/* App shell layout and view-specific styles */
.app { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 0; }
.main { overflow: auto; min-height: 0; background: var(--bg-0); }
.view { padding: var(--sp-3) var(--sp-4) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); animation: viewin var(--dur-2) var(--ease); }
@keyframes viewin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* View header */
.vh { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-4); padding: var(--sp-2) 0 var(--sp-1); }
.vh .crumb { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.vh .crumb a:hover { color: var(--ink-0); }
.vh h1 { font-size: 28px; }
.vh .actions { display: flex; gap: 1px; }
.vh .sub { color: var(--ink-1); margin-top: 6px; font-size: var(--fs-13); max-width: 70ch; }

/* Instruments row */
.instruments .stat { height: 100%; }
.stat .value.red { color: var(--red); }

/* Overview hero strip: dither field behind fleet summary */
.fleet-strip { position: relative; overflow: hidden; min-height: 132px; display: grid; grid-template-columns: 1fr auto; }
.fleet-strip canvas.bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.fleet-strip .fs-fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-1) 0%, color-mix(in srgb, var(--bg-1) 88%, transparent) 42%, color-mix(in srgb, var(--bg-1) 30%, transparent) 75%, color-mix(in srgb, var(--bg-1) 70%, transparent) 100%); }
.fleet-strip .fs-body { position: relative; padding: var(--sp-5) var(--sp-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4); }
.fleet-strip .fs-title { font-size: 28px; max-width: 26ch; }
.fleet-strip .fs-side { position: relative; padding: var(--sp-5); border-left: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: var(--sp-6); align-items: center; min-width: 0; }
.fleet-strip .fs-body { min-width: 0; }
.fleet-strip .fs-side .k { display: flex; flex-direction: column; gap: 6px; }
.fleet-strip .fs-side .k .v { font-family: var(--font-mono); font-size: var(--fs-24); font-weight: 600; letter-spacing: -0.03em; }

/* Agent cards (roster grid) */
.agent-card { display: flex; flex-direction: column; gap: 10px; padding: var(--sp-4); cursor: pointer; transition: background var(--dur-1) var(--ease); min-height: 160px; }
.agent-card:hover { background: var(--bg-2); }
.agent-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.agent-card .n { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: var(--fs-18); letter-spacing: -0.02em; }
.agent-card .r { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; }
.agent-card .task { color: var(--ink-1); font-size: var(--fs-12); line-height: 1.45; min-height: 34px; }
.agent-card .tools { display: flex; flex-wrap: wrap; gap: 4px; }
.agent-card .foot { margin-top: auto; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); letter-spacing: 0.08em; text-transform: uppercase; }
.agent-card .foot b { color: var(--ink-0); font-weight: 500; }
.agent-card.idle { opacity: 0.6; }
.agent-glyph { width: 28px; height: 28px; flex: none; }

/* Agent detail */
.agent-hero { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-5); padding: var(--sp-5); align-items: center; }
.agent-hero canvas { width: 96px; height: 96px; }
.effort { display: inline-flex; gap: 3px; align-items: center; }
.effort i { width: 10px; height: 4px; background: var(--line-2); }
.effort[data-e="low"] i:nth-child(-n+1), .effort[data-e="high"] i:nth-child(-n+2), .effort[data-e="max"] i:nth-child(-n+3) { background: var(--ink-0); }
.effort[data-e="max"] i { background: var(--red); }

/* Hunts */
.hunt-row { grid-template-columns: 1.4fr 1.6fr 0.8fr 0.9fr 1fr 110px; }
.hunt-row .phase-mini { display: inline-flex; gap: 2px; }
.hunt-row .phase-mini i { width: 14px; height: 6px; background: var(--line-2); }
.hunt-row .phase-mini i.d { background: var(--ink-1); }
.hunt-row .phase-mini i.a { background: var(--red); }
.hunt-map { position: relative; min-height: 320px; overflow: hidden; }
.hunt-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hunt-map .legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: var(--sp-4); padding: 8px var(--sp-4); background: var(--bg-1); border-top: 1px solid var(--line); }
.hunt-map .pin { position: absolute; width: 8px; height: 8px; background: var(--red); transform: translate(-50%, -50%); box-shadow: 0 0 0 0 var(--red-glow); animation: pulse 2.2s var(--ease) infinite; }
.hunt-map .pin.ok { background: var(--ok); animation: none; }
.hunt-map .pin.dim { background: var(--ink-2); animation: none; }
.hunt-map .pin span { position: absolute; left: 12px; top: -4px; background: var(--bg-1); padding: 1px 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-1); white-space: nowrap; text-transform: uppercase; }

/* Live scan */
.scan-top { display: grid; grid-template-columns: 1fr 260px; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.scan-top > * { background: var(--bg-1); }
.sweep { position: relative; display: grid; place-items: center; min-height: 240px; }
.sweep canvas { width: 220px; height: 220px; }
.sweep .center { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--bg-1); padding: 10px 14px; box-shadow: 0 0 0 8px var(--bg-1); }
.sweep .center .v { font-family: var(--font-mono); font-size: var(--fs-24); font-weight: 600; letter-spacing: -0.03em; }
.panes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.panes > .cell { background: var(--bg-1); min-height: 220px; }
.panes .term { height: 200px; }
.net { font-family: var(--font-mono); font-size: var(--fs-11); }
.net .ln { display: grid; grid-template-columns: 36px 44px 1fr 56px; gap: 10px; padding: 5px var(--sp-4); border-bottom: 1px solid var(--line); color: var(--ink-1); }
.net .ln:last-child { border-bottom: 0; }
.net .st { font-weight: 600; } .net .st.s2 { color: var(--ok); } .net .st.s4 { color: var(--warn); } .net .st.s4.red { color: var(--red); }
.net .ms { text-align: right; color: var(--ink-2); }
.browser { display: flex; flex-direction: column; height: 100%; }
.browser .bar { display: flex; gap: 8px; align-items: center; padding: 8px var(--sp-4); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); letter-spacing: 0.06em; }
.browser .bar i { width: 6px; height: 6px; background: var(--line-2); }
.browser .page { flex: 1; padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; background: var(--bg-0); }
.browser .page .sk { height: 8px; background: var(--line-2); width: var(--w, 60%); }
.browser .page .sk.hi { background: var(--red); opacity: 0.8; }
.browser .page .box { border: 1px solid var(--line-2); padding: 10px; display: flex; flex-direction: column; gap: 6px; }

/* Findings */
.finding-row { grid-template-columns: 84px 1fr 120px 160px 90px 60px; }
.report { display: grid; grid-template-columns: 1fr 320px; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.report > * { background: var(--bg-1); }
.report .body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); }
.report .side { display: flex; flex-direction: column; }
.report .section h3 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.report .section h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.report .section p { color: var(--ink-1); font-size: var(--fs-13); line-height: 1.6; max-width: 72ch; }
.report .section p b { color: var(--ink-0); font-weight: 500; }
.tier-ladder { display: flex; flex-direction: column; }
.tier-ladder .step { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 8px var(--sp-4); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.tier-ladder .step:last-child { border-bottom: 0; }
.tier-ladder .step i { width: 8px; height: 8px; border: 1px solid var(--line-2); }
.tier-ladder .step.on { color: var(--ink-1); }
.tier-ladder .step.on i { background: var(--ink-1); border-color: var(--ink-1); }
.tier-ladder .step.cur { color: var(--ink-0); }
.tier-ladder .step.cur i { background: var(--red); border-color: var(--red); }
.tier-ladder .step.top.on { color: var(--ok); }
.tier-ladder .step.top.on i { background: var(--ok); border-color: var(--ok); }

/* Intake wizard */
.wizard { display: grid; grid-template-columns: 1fr 240px; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wizard > * { background: var(--bg-1); }
.wizard .steps { display: flex; flex-direction: column; }
.wizard .steps a { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 12px var(--sp-4); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-12); font-weight: 500; }
.wizard .steps a .n { font-family: var(--font-mono); font-size: 10px; width: 20px; height: 20px; border: 1px solid var(--line-2); display: grid; place-items: center; }
.wizard .steps a.done { color: var(--ink-1); } .wizard .steps a.done .n { background: var(--ink-1); color: var(--bg-0); border-color: var(--ink-1); }
.wizard .steps a.cur { color: var(--ink-0); background: var(--bg-2); } .wizard .steps a.cur .n { border-color: var(--red); color: var(--red); }
.wizard .pane { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.opts .opt { border: 0; }
.opts .opt.is-on { box-shadow: inset 0 0 0 1px var(--red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.scope-box { border: 1px solid var(--line-2); padding: var(--sp-4); display: flex; flex-direction: column; gap: 10px; background: var(--bg-0); }
.scope-box .line { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-11); }
.scope-box .line span:first-child { color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; padding-top: 2px; }

/* Network */
.cond { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.cond > div { background: var(--bg-1); padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; }
.cond > div .t { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: var(--fs-18); color: var(--ink-3); }
.cond > div.on .t { color: var(--ink-0); }
.cond > div.on { box-shadow: inset 0 2px 0 var(--red); }
.cond > div .d { font-size: var(--fs-12); color: var(--ink-2); line-height: 1.45; }
.cond > div.on .d { color: var(--ink-1); }
.loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.loop > div { background: var(--bg-1); padding: var(--sp-4); position: relative; }
.loop > div .n { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.12em; }
.loop > div .t { font-family: var(--font-display); font-weight: 700; font-stretch: 108%; font-size: var(--fs-15); margin: 6px 0 4px; }
.loop > div .d { color: var(--ink-2); font-size: var(--fs-11); line-height: 1.45; }
.loop > div::after { content: "→"; position: absolute; right: -1px; top: 50%; transform: translate(50%, -50%); font-family: var(--font-mono); color: var(--ink-3); background: var(--bg-1); padding: 0 2px; z-index: 1; font-size: 11px; }
.loop > div:last-child::after { display: none; }

/* Research */
.thread-row { grid-template-columns: 90px 1fr 140px 180px 60px; }
.rel { display: inline-flex; gap: 2px; }
.rel i { width: 5px; height: 10px; background: var(--line-2); }
.rel i.on { background: var(--ink-1); }

/* Mobile */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-group { padding: 0; display: flex; }
  .rail-group .label, .rail-foot, .rail a .k { display: none; }
  .rail a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .rail a[aria-current="page"] { border-bottom-color: var(--red); }
  .fleet-strip, .scan-top, .report, .wizard { grid-template-columns: 1fr; }
  .fleet-strip .fs-side { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .fleet-strip .fs-title { font-size: var(--fs-24); }
  .fleet-strip .fs-side .k .v { font-size: var(--fs-18); }
  .panes { grid-template-columns: 1fr; }
  .opts, .cond, .loop { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hunt-row, .finding-row, .thread-row { grid-template-columns: 1fr 1fr; }
  .loop > div::after { display: none; }
  .vh { grid-template-columns: 1fr; align-items: start; }
  .vh h1 { font-size: var(--fs-24); }
}

.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--5 { grid-template-columns: 1fr; } }