/* ============================================================
   GHOSTHUNTER — fx-console
   ⌘K palette, act navigation & deep links, live-incident dialog.
   Tokens only: every colour is a :root custom property from
   index.html; threat red appears exactly where the spec puts it
   (the nav 'Incident' link, threat feature rows, the incident chip).
   ============================================================ */

/* ---------- visually hidden (aria-live announcer) ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- rail ticks become links ---------- */
/* The main script keeps a reference to the three .tick spans and toggles
   .on on them every frame, so the span stays and the anchor lives inside
   it; a{color:inherit} carries the .on colour down to the link. */
.rail .tick a{display:block;padding:2px 4px;margin:-2px -4px;color:inherit}
.rail .tick a:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px;border-radius:2px}
/* the rail fades to opacity 0 outside the acts; keep its links out of the tab order there */
.rail:not(.show) .tick a{visibility:hidden}

/* palette navigation focuses the section itself (fx-smooth's anchor idiom);
   the scroll is the indicator — a 1.5px ring around a whole section is not */
main > section[tabindex="-1"]:focus-visible{outline:none}

/* ---------- nav openers ---------- */
.nav-links .nav-k{
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);background:none;cursor:pointer;
  border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:6px 8px;white-space:nowrap;
  transition:color .3s,border-color .3s;
}
.nav-links .nav-k:hover{color:var(--text);border-color:var(--ink)}
.nav-links a.nav-inc{color:var(--threat)}
.nav-links a.nav-inc:hover{color:var(--threat-hi)}
@media (max-width:760px){.nav-k{display:none}}

/* mobile menu rows (the anchors' own rules only match <a>; the button and the
   late-added link get the same treatment) */
.mobile-menu .mm-btn{
  font-family:var(--sans);font-size:clamp(24px,6.4vw,34px);font-weight:500;color:var(--text-dim);
  background:none;border:0;cursor:pointer;padding:8px 0;
  transform:translateY(24px);opacity:0;
  transition:transform .6s var(--ease-out),opacity .6s,color .3s;
}
.mobile-menu .mm-btn:hover{color:var(--text)}
.menu-open .mobile-menu .mm-btn{transform:translateY(0);opacity:1}
.mobile-menu a.mm-inc{color:var(--threat)}
.mobile-menu a.mm-inc:hover{color:var(--threat-hi)}
/* rows past the seventh child (the prepended button shifts the anchors by one,
   and other modules append rows) still arrive last rather than instantly */
.menu-open .mobile-menu a:nth-child(n+8){transition-delay:.4s}

/* ---------- palette ---------- */
.pal{
  position:fixed;inset:0;margin:12vh auto auto;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  width:min(640px,92vw);max-width:none;max-height:none;padding:0;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px);
  transition:opacity .25s var(--ease-out-expo,var(--ease-out)),transform .25s var(--ease-out-expo,var(--ease-out));
}
.pal.is-open{opacity:1;transform:none}
.pal::backdrop{
  background:rgba(16,16,16,.78);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.pal input{
  width:100%;font:400 17px var(--sans);background:none;border:0;
  border-bottom:1px solid var(--border);color:var(--text);
  padding:18px 20px;outline:none;border-radius:0;
}
.pal input::placeholder{color:var(--text-faint)}
.pal ul{
  list-style:none;margin:0;padding:0;
  max-height:min(58vh,520px);overflow-y:auto;overscroll-behavior:contain;
}
.pal li{
  display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:baseline;
  padding:11px 20px;border-bottom:1px solid var(--border);cursor:pointer;
}
.pal li:last-child{border-bottom:0}
.pal li[aria-selected=true]{background:var(--surface-hi)}
.pal-k{font:500 10px/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}
.pal-k.threat,.pal li.incident .pal-l{color:var(--threat)}
.pal-l{font-size:15px;color:var(--text-dim);line-height:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal li[aria-selected=true] .pal-l{color:var(--text)}
.pal-l em{font-style:normal;color:var(--text-faint)}
.pal-r{font:400 11px/1 var(--mono);color:var(--text-faint);opacity:0;transition:opacity .15s}
.pal li[aria-selected=true] .pal-r{opacity:1}
.pal mark{background:none;color:var(--text)}
.pal .pal-empty{grid-template-columns:1fr;color:var(--text-faint);cursor:default;font-size:14px}
.pal-foot{
  display:flex;justify-content:space-between;gap:16px;
  padding:10px 20px;border-top:1px solid var(--border);
  font:400 10px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);
}
.pal-foot .pal-status{color:var(--text)}
@media (max-width:760px){
  .pal{margin:6vh auto auto;width:calc(100vw - 24px)}
  .pal li{grid-template-columns:64px 1fr auto;gap:10px;padding:11px 14px}
  .pal input{padding:16px 14px;font-size:16px}
  .pal-foot span:not(.pal-status){display:none}
}

/* ---------- incident dialog ---------- */
/* .doc supplies border, radius, #141414 ground, shadow and overflow:hidden;
   its position:relative is overridden here because a modal must be fixed. */
.incident-doc{
  position:fixed;inset:0;margin:auto;
  width:min(520px,92vw);max-width:none;max-height:none;padding:0;
  color:var(--text);
  opacity:0;transform:translateY(8px);
  transition:opacity .25s var(--ease-out-expo,var(--ease-out)),transform .25s var(--ease-out-expo,var(--ease-out));
}
.incident-doc.is-open{opacity:1;transform:none}
.incident-doc::backdrop{
  background:rgba(16,16,16,.78);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.incident-doc .doc-head{gap:14px}
/* each header item stays on one line; where the row is too narrow for all
   three, the max-width:460px block below gives the chip its own line */
.incident-doc .doc-head > *{white-space:nowrap}
.incident-doc .doc-head .inc-close{
  position:relative;
  margin-left:auto;font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);background:none;border:0;cursor:pointer;padding:4px 0;
  transition:color .3s;
}
/* touch targets: an undrawn 44px-tall hit area around each small control, so
   the label, its focus ring and the layout stay exactly as they are */
.incident-doc .doc-head .inc-close::after{content:"";position:absolute;inset:-13px -12px}
.incident-doc .doc-head .inc-close:hover{color:var(--text)}
.incident-doc .doc-row .dv{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.incident-doc .inc-tel{
  font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:-.01em;line-height:1.2;
  color:var(--text);transition:color .3s;
}
.incident-doc .inc-tel:hover{color:var(--ink)}
.incident-doc .inc-copy{
  position:relative;
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);background:none;cursor:pointer;
  border:1px solid var(--border-strong);border-radius:var(--radius);padding:6px 9px;
  transition:color .3s,border-color .3s;
}
/* grows down and right only: the number sits directly above it on a phone and
   directly left of it on a wide screen, and must keep every tap on itself */
.incident-doc .inc-copy::after{content:"";position:absolute;inset:0 -9px -21px 0}
.incident-doc .inc-copy:hover{color:var(--text);border-color:var(--ink)}
.incident-doc .doc-row .dv p{margin:0}
@media (max-width:760px){
  .incident-doc{width:calc(100vw - 24px)}
  .incident-doc .doc-row{flex-direction:column;gap:6px}
  .incident-doc .doc-row .dk{width:auto}
}
/* narrow phones: title, chip and Close need about 360px and the row has less.
   Title and Close keep the first line, the chip takes the second. Narrower than
   the 760px block on purpose: from 461px up the single row fits, and stacking
   it there would only add height to a sheet that is tight in landscape. */
@media (max-width:460px){
  .incident-doc .doc-head{display:grid;grid-template-columns:1fr auto;gap:10px 14px}
  .incident-doc .doc-head > span:first-child{grid-area:1/1}
  .incident-doc .doc-head .inc-close{grid-area:1/2}
  .incident-doc .doc-head .sev{grid-area:2/1;justify-self:start}
}

/* contact paragraph opener — sits inside the mono, threat-red .incident line */
.reserve .incident .inc-open{
  position:relative;
  display:inline-block;margin-left:.6em;
  font:inherit;letter-spacing:inherit;color:inherit;
  background:none;border:0;border-bottom:1px solid var(--threat-line);
  cursor:pointer;padding:0 0 1px;
  transition:border-color .3s,color .3s;
}
/* same undrawn hit area: 44px tall over a 20px line of mono text */
.reserve .incident .inc-open::after{content:"";position:absolute;inset:-12px 0 -13px}
.reserve .incident .inc-open:hover{color:var(--threat-hi);border-bottom-color:var(--threat)}

/* ---------- reduced motion ---------- */
/* reduced motion (html.rm) */html.rm .pal,html.rm .incident-doc{transition:none;opacity:1;transform:none}