/* FieldHydro — shared UI polish (accessibility + demo/reviewer affordances)
 * Load after each page's inline theme tokens. Additive overrides only. */

/* ── Focus & keyboard ── */
:focus{ outline:none }
:focus-visible{
  outline:2px solid var(--accent, #3ea6ff);
  outline-offset:2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline:2px solid var(--accent, #3ea6ff);
  outline-offset:2px;
}
input:focus-visible,
select:focus-visible{
  border-color:var(--accent, #3ea6ff);
  box-shadow:0 0 0 1px rgba(62,166,255,.35);
}

/* ── Touch targets (mobile) ── */
@media (max-width:640px){
  button,
  header nav button,
  header nav a,
  .suite-card{
    min-height:44px;
  }
  header nav button,
  header nav a{
    display:inline-flex;
    align-items:center;
  }
}

/* ── Motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── Buttons: clearer hierarchy & feedback ── */
button{
  transition:background .15s ease, border-color .15s ease, filter .15s ease, transform .1s ease;
}
button.primary:hover:not(:disabled){ filter:brightness(1.06) }
button.primary:active:not(:disabled){ transform:translateY(1px) }
button.ghost:hover:not(:disabled){
  border-color:var(--accent, #3ea6ff);
  color:var(--ink, #e8edf2);
}
button:disabled{ cursor:not-allowed }

/* ── Demo landing card (ar-prototype cold start) ── */
.demo-landing{
  display:grid;
  gap:1rem 1.25rem;
  grid-template-columns:1fr;
  align-items:start;
  margin:.85rem .7rem;
  padding:1rem 1.1rem;
  background:linear-gradient(180deg, #1a2332, #131b27);
  border:1px solid #2e6cb6;
  border-radius:12px;
}
@media (min-width:720px){
  .demo-landing{
    grid-template-columns:minmax(0,1fr) minmax(220px, 300px);
    padding:1.15rem 1.25rem;
  }
}
.demo-landing .dl-text{ min-width:0 }
.demo-landing .dl-text h2, .demo-landing .dl-text h3{
  margin:0 0 .35rem;
  color:#80d4ff;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.demo-landing .dl-text p{
  margin:.2rem 0;
  color:var(--dim, #9aa4b1);
  font-size:13px;
  line-height:1.5;
}
.demo-landing .dl-text p b{ color:var(--ink, #e8edf2); font-weight:600 }
.demo-landing .dl-text .dl-meta{
  margin-top:.5rem;
  font-size:12px;
  color:var(--dim, #9aa4b1);
}

.demo-landing .dl-actions{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  min-width:0;
}
.demo-landing .dl-actions > button{
  width:100%;
  min-height:44px;
  border-radius:8px;
  font:inherit;
  cursor:pointer;
}
.demo-landing .dl-actions .primary-demo{
  background:var(--accent, #3ea6ff);
  color:#0b1320;
  border:0;
  font-weight:700;
  font-size:14px;
  padding:.75rem 1rem;
  box-shadow:0 0 0 2px rgba(62,166,255,.22);
}
.demo-landing .dl-actions .primary-demo:hover{ filter:brightness(1.06) }
.demo-landing .dl-btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.demo-landing .dl-btn-row button{
  flex:1 1 calc(50% - .2rem);
  min-width:8.5rem;
  padding:.55rem .65rem;
  font-size:12px;
  font-weight:600;
}
.demo-landing button.secondary,
.demo-landing button.tour{
  background:transparent;
  color:#80d4ff;
  border:1px solid #2e6cb6;
}
.demo-landing button.secondary:hover,
.demo-landing button.tour:hover{
  background:rgba(62,166,255,.08);
}
.demo-landing button.tour{ flex:1 1 auto }
.demo-landing button.dismiss{
  background:transparent;
  color:var(--dim, #9aa4b1);
  border:1px solid var(--line, #2a323d);
  font-weight:500;
  font-size:12px;
  padding:.45rem .7rem;
}
.demo-landing button.dismiss:hover{
  color:var(--ink, #e8edf2);
  border-color:var(--line, #2a323d);
}
/* Alternate scenarios, demoted behind a disclosure so the cold-start card offers
   one obvious action instead of a menu. */
.demo-landing .dl-more{ margin-top:.15rem }
.demo-landing .dl-more > summary{
  cursor:pointer;
  font-size:12px;
  color:var(--dim, #9aa4b1);
  padding:.3rem .1rem;
  list-style:none;
  user-select:none;
}
.demo-landing .dl-more > summary::-webkit-details-marker{ display:none }
.demo-landing .dl-more > summary::before{
  content:'▸ ';
  display:inline-block;
  transition:transform .15s ease;
}
.demo-landing .dl-more[open] > summary::before{ content:'▾ ' }
.demo-landing .dl-more > summary:hover{ color:var(--ink, #e8edf2) }
.demo-landing .dl-more > summary:focus-visible{
  outline:2px solid var(--accent, #3ea6ff);
  outline-offset:2px;
  border-radius:4px;
}
.demo-landing .dl-more .dl-btn-row{ margin-top:.35rem }

/* ── Reviewer landing polish ── */
.suite-card:focus-visible{
  outline:2px solid var(--accent, #3ea6ff);
  outline-offset:2px;
}
.reviewer-quicklinks a:focus-visible{
  outline-offset:2px;
}
#reviewerHero .hero-copy h2{ margin-top:0 }

/* ── Header nav tabs (index.html) ── */
header nav[role="tablist"] button[aria-selected="true"]{
  background:var(--panel2, #1c232c);
  color:var(--ink, #e8edf2);
  border-color:var(--line, #2a323d);
}

/* ── FieldHydro v4 polish layer ── */
:root{
  --fh-radius:14px;
  --fh-shadow:0 12px 30px rgba(0,0,0,.18);
}

body{
  text-rendering:optimizeLegibility;
}

button, .button, a.btn{
  border-radius:var(--fh-radius);
  font-weight:600;
  letter-spacing:.01em;
}

.card, .panel, .suite-card{
  border-radius:var(--fh-radius);
  box-shadow:var(--fh-shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}

.card:hover, .panel:hover, .suite-card:hover{
  transform:translateY(-2px);
}

input, select, textarea{
  border-radius:10px;
  min-height:42px;
}

.status, .badge{
  border-radius:999px;
  padding:.35rem .75rem;
  font-size:.85rem;
}

@media(max-width:640px){
  .card, .panel, .suite-card{
    margin-bottom:12px;
  }
}

/* ── Reviewer operations dashboard (index.html) ── */
.fh-dashboard{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:20px 0;
}
.fh-stat{
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
}
.fh-stat span{
  display:block;
  font-size:12px;
  opacity:.75;
}
.fh-stat strong{
  display:block;
  font-size:1.8rem;
  margin-top:8px;
}
.fh-stat small{
  display:block;
  margin-top:6px;
  font-size:11px;
  opacity:.6;
}
.fh-action-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0;
  align-items:center;
}
.fh-action-bar button,
.fh-action-bar a.btn-link{
  cursor:pointer;
  padding:12px 18px;
}
.fh-action-bar a.btn-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  border:1px solid var(--line, #2a323d);
  border-radius:var(--fh-radius);
  color:var(--ink, #e8edf2);
  font-size:13px;
  font-weight:600;
}
.fh-action-bar a.btn-link:hover{
  border-color:var(--accent, #3ea6ff);
}
.fh-toast{
  position:fixed;
  right:20px;
  bottom:20px;
  padding:14px 18px;
  border-radius:14px;
  background:#111;
  color:white;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:9999;
}
/* ═══════════════════════════════════════════════════════════════════════════════
   Instrument polish — 2026-08. Shared by every /field/ page.
   Depends on fieldhydro-tokens.css, which must be linked first.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Controls ─────────────────────────────────────────────────────────────────
   A native file input renders as a white slab, which on this palette looked like
   a rendering fault. Style the button half and let the filename sit as mono text
   beside it, matching every other control. */
input[type=file]{
  background:var(--shoal);
  border:1px solid var(--rule);
  border-radius:8px;
  color:var(--sounding);
  font-family:var(--mono);
  font-size:var(--t-fine);
  padding:.42rem .5rem;
  width:100%;
}
input[type=file]::file-selector-button{
  appearance:none;
  margin-right:.75rem;
  padding:.4rem .8rem;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--shelf);
  color:var(--chart);
  font-family:var(--display);
  font-size:var(--t-fine);
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
input[type=file]::file-selector-button:hover{
  border-color:var(--gauge);
  color:var(--gauge);
}

/* Numeric fields are measurements — give them mono so digits align in a column. */
input[type=number], input[type=text]{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums slashed-zero;
}
input[type=number]:focus, input[type=text]:focus, select:focus{
  border-color:var(--gauge);
  outline:none;
  box-shadow:0 0 0 3px rgba(76,194,224,.14);
}

/* ── Panel headings as drawing-sheet callouts ─────────────────────────────────
   The setup panels are a numbered sequence (1 polygon → 2 observer → 3 terrain …),
   so the numbering carries real order rather than decorating. Set the heading in
   condensed caps and hang a hairline off it, the way a section callout sits on a
   plan sheet. */
.panel > h2:first-child,
.panel > h3:first-child{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin:0 0 .85rem;
  font-family:var(--display);
  font-size:var(--t-data);
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--sounding);
}
.panel > h2:first-child::after,
.panel > h3:first-child::after{
  content:"";
  flex:1 1 auto;
  height:0;
  border-top:1px solid var(--rule);
}
/* Pills sitting inside a heading must not be stretched by the flex row. */
.panel > h2:first-child > *,
.panel > h3:first-child > *{ flex:0 0 auto; }

/* ── Buttons ──────────────────────────────────────────────────────────────────
   One primary per view. Everything else is an outline; developer/diagnostic
   controls are quieter still, so they cannot compete with the action a reviewer
   is meant to take. */
button.primary{
  background:var(--gauge);
  border:1px solid var(--gauge);
  color:#052430;
  font-family:var(--display);
  font-weight:700;
  letter-spacing:.01em;
}
button.primary:hover{ background:#63d0ea; border-color:#63d0ea; }
button.ghost{
  background:transparent;
  border:1px solid var(--rule);
  color:var(--chart);
  font-family:var(--display);
  font-weight:600;
}
button.ghost:hover{ border-color:var(--gauge); color:var(--gauge); }

/* ── Provenance banners keep their amber; it is an honest convention. ── */
.ar-demo-banner{ font-family:var(--body); }

/* ── Data readouts ────────────────────────────────────────────────────────────
   Anything that reports a measured quantity gets mono with tabular figures, so a
   changing value does not make the layout jitter. */
.status, .gj-summary, .dem-readout, .ar-hud, .reticle-hud{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums slashed-zero;
}

/* ── Links ── */
a{ color:var(--gauge); text-underline-offset:3px; }
a:hover{ color:#7fd7ee; }

/* ── Corrections to the earlier "v4 polish" layer ─────────────────────────────
   Three rules there worked against a dense instrument page. Overridden here
   rather than edited in place, so the cascade order stays obvious. */

/* 1. Every .panel lifted on hover. On a page that is a stack of panels the whole
      document twitched as the pointer crossed it. Reserve the lift for cards that
      are actually links. */
.card:hover, .panel:hover{ transform:none; }
.suite-card{ transition:border-color .15s ease, transform .12s ease; }
.suite-card:hover{ transform:translateY(-2px); }
.suite-card.soon:hover{ transform:none; }

/* 2. Frosted white stat cards were off-palette and washed out on the deep ground.
      Put them on the depth ramp and let the number carry the emphasis. */
.fh-stat{
  background:var(--shoal);
  border:1px solid var(--rule);
  border-radius:10px;
  backdrop-filter:none;
  padding:16px;
}
.fh-stat span{ font-family:var(--display); letter-spacing:.06em; text-transform:uppercase;
  font-size:var(--t-micro); color:var(--sounding); opacity:1; }
.fh-stat strong{ font-family:var(--mono); font-size:1.55rem; color:var(--chart);
  font-variant-numeric:tabular-nums slashed-zero; }
.fh-stat small{ font-size:var(--t-micro); color:var(--sounding); opacity:1; }

/* 3. A 14px radius on every control reads soft for an instrument, and pill-shaped
      status text bulked up inline readouts. Tighten both. */
:root{ --fh-radius:9px; }
.status, .badge{ border-radius:6px; padding:.2rem .45rem; font-size:var(--t-fine); }
.panel, .card, .suite-card{ border-radius:12px; }

/* On coarse pointers the touch-target rule turns buttons into flex containers, which
   drops the whitespace text node between a leading glyph and its label. Space it
   explicitly rather than relying on markup whitespace. */
button > [aria-hidden="true"]:first-child{ margin-right:.4em; }

/* ── KaTeX on narrow screens ─────────────────────────────────────────────────────────────
   WebKit lets the (visually hidden, 1px, overflow:hidden) accessible-MathML copy widen the
   document's scrollable area — a 500px formula produced a 396px-wide page on a 320px phone.
   Containing it keeps the MathML for screen readers without letting it lay out. Long display
   formulas scroll inside their own box instead of the page. */
.katex .katex-mathml{ contain:strict; clip-path:inset(50%); }
.katex-display{ overflow-x:auto; overflow-y:hidden; max-width:100%; }

/* Inline code samples (CSV headers, "station(ft):n" breakpoints) must wrap on a 320px phone
   rather than widen the page. */
code, kbd{ overflow-wrap:anywhere; word-break:break-word; }
pre code{ overflow-wrap:normal; word-break:normal; }

/* ── UX audit 2026-09-04 ────────────────────────────────────────────────────────────── */
/* Visually hidden page heading (each tool page had no H1). */
.sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* iOS Safari zooms the page when a focused input is under 16px. Per-page rules missed the
   inputs that carry their own font-size, so pin it globally on touch devices. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select, textarea{ font-size:16px !important; }
}