/* Splash hero for the PHP2Shell observatory. Layout comes from /tools/splash.css. */
.sp-hero > * + * { margin-top: 0; }
.sp-hero { margin-bottom: 14px; }
.sp-intro, .sp-ctrl, .sp-stage { border-color: var(--ps-border) !important; }
.sp-intro { gap: 8px; }
.sp-intro .ax-badge { font-size: 10px; letter-spacing: .05em; }
.sp-h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important; }
.sp-intro .sp-lede { font-size: 14px; margin: 0; }
.sp-intro .ax-verdict { margin: 0; padding: 10px 12px; gap: 10px; border: 2px solid var(--ps-border); border-left-width: 5px; border-left-color: var(--ax-bad); border-radius: 12px; background: #fff; display: flex; align-items: flex-start; }
.sp-intro .ax-verdict-icon { width: 34px; height: 34px; flex: none; }
.sp-intro .ax-verdict-icon svg { width: 18px; height: 18px; }
.sp-intro .ax-verdict-title { font-size: 15px; margin: 0; }
.sp-intro .ax-verdict p { font-size: 13px; margin: 3px 0 0; line-height: 1.45; }
.sp-ctrl { gap: 10px; }
.sp-hero .ax-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.sp-hero .ps-metric.ax-tile { padding: 8px 10px; gap: 2px; }
.sp-hero .ps-metric .ax-tile-value { font-size: 20px; overflow-wrap: break-word; word-break: normal; }
.sp-hero .ps-metric .ax-tile-label { font-size: 11px; }
.sp-hero .ps-metric .ax-tile-sub { font-size: 11px; line-height: 1.35; }
.p2s-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; }
.p2s-field { display: grid; gap: 4px; min-width: 0; }
.p2s-field span, .p2s-lab { font: 800 10.5px var(--ax-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ax-dim); word-break: keep-all; }
.p2s-field select { width: 100%; min-width: 0; min-height: 36px; padding: 5px 8px; border: 2px solid var(--ps-border); border-radius: 10px; background: #fff; color: var(--ax-ink); font-size: 13px; }
.p2s-group { display: grid; gap: 4px; }
.p2s-seg.ax-seg { display: flex; flex-wrap: wrap; gap: 4px; border: 2px solid var(--ps-border); border-radius: 12px; padding: 3px; background: #fff; }
.p2s-seg.ax-seg button { flex: 1 1 auto; min-height: 32px; padding: 4px 8px; font-size: 12.5px; white-space: nowrap; }
.sp-legend i.sq { border-radius: 2px; background: #475569; }
.sp-stage { position: relative; }

/* SVG */
#p2s-viz { overflow: visible; }
#p2s-viz text { font-family: var(--ax-display); fill: #0f172a; }
#p2s-viz .bt { font-family: var(--ax-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; fill: #475467; }
#p2s-viz .tick { font-family: var(--ax-mono); font-size: 11px; fill: #475467; }
#p2s-viz .lane-lab { font-size: 12.5px; font-weight: 700; }
#p2s-viz .cat-lab { font-size: 12px; fill: #1f2937; cursor: pointer; }
#p2s-viz .cat-lab:hover { fill: #047857; text-decoration: underline; }
#p2s-viz .key { font-size: 11.5px; font-weight: 600; fill: #1f2937; paint-order: stroke; stroke: #f8fbff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
#p2s-viz .cnt { font-family: var(--ax-mono); font-size: 11px; fill: #475467; }
#p2s-viz .grid { stroke: #e2e8f0; stroke-width: 1; }
#p2s-viz .gap { stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 3 4; }
#p2s-viz .lane-bg { fill: #fff; stroke: #e2e8f0; }
#p2s-viz .mk { cursor: pointer; stroke: #0f172a; stroke-width: 1.2; transition: opacity .15s; }
#p2s-viz .mk:hover, #p2s-viz .mk:focus-visible, #p2s-viz .mk.is-open { stroke-width: 3; outline: none; }
#p2s-viz .seg { cursor: pointer; stroke: #fff; stroke-width: 1.5; transition: opacity .15s; }
#p2s-viz .seg:hover, #p2s-viz .seg:focus-visible, #p2s-viz .seg.is-open { stroke: #0f172a; stroke-width: 2.5; outline: none; }
#p2s-viz .is-dim { opacity: .16; }
#p2s-viz .msg { font-size: 13px; fill: #475467; }
#p2s-viz .skel { fill: #e6ebf1; animation: p2s-pulse 1.4s ease-in-out infinite; }
@keyframes p2s-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { #p2s-viz .skel { animation: none; } }

/* Row picked from the visual */
.ps-app tr.is-hit td, .ps-app tr.is-hit td:first-child { background: #ecfdf5; }

/* Event chronology table */
.ev-wrap { max-height: 64vh; }
.ev-wrap .event-table { min-width: 860px; }
.event-table th { white-space: nowrap; word-break: keep-all; }
.event-table td:first-child { min-width: 240px; width: 30%; }
.event-table td:first-child .badge { display: inline-block; margin: 0 0 6px; white-space: nowrap; }
.event-table td:first-child b { display: block; overflow-wrap: break-word; color: var(--ax-ink); }
.event-table td:nth-child(2) { min-width: 150px; font-family: var(--ax-mono); font-size: 12px; }
.event-table td:nth-child(3) { min-width: 170px; }
.event-table td:last-child { max-width: none; min-width: 300px; font-size: 13px; }
.ev-sort { all: unset; cursor: pointer; font: inherit; color: inherit; }
.ev-sort:focus-visible { outline: 3px solid rgba(4,120,87,.35); outline-offset: 2px; }
th[aria-sort="ascending"] .ev-sort::after { content: " \25B2"; font-size: 8px; }
th[aria-sort="descending"] .ev-sort::after { content: " \25BC"; font-size: 8px; }

@media (max-width: 959px) {
  .sp-hero { grid-template-rows: auto minmax(440px, 1fr) auto; }
  .sp-intro .ax-verdict p { display: none; }
}
@media (max-width: 640px) {
  .ps-tabs.ax-seg { top: 44px; }
}
@media (min-width: 960px) {
  .sp-intro { padding: 14px 16px; }
  .sp-ctrl { padding: 12px 16px; gap: 8px; }
  .sp-hero .ps-metric .ax-tile-sub { font-size: 10.5px; }
}
@media (min-width: 960px) {
  .sp-ctrl { gap: 7px; }
  .sp-hero .ps-metric.ax-tile { padding: 6px 10px; }
  .p2s-seg.ax-seg button { min-height: 28px; padding: 3px 8px; }
  .p2s-field select { min-height: 32px; padding: 3px 8px; }
  .sp-intro { gap: 6px; }
}
@media (max-width: 959px) {
  .sp-hero { grid-template-rows: auto auto auto; }
  .sp-stage .sp-canvas { flex: none; height: 560px; }
}