/* Ranger HQ: only what HQ adds on top of the look every Ranger site shares (core/*.css, copied in at deploy by
   tools/hq-core.sh). Colors are theme tokens only, so each of the 4 themes picks its own. */

/* Signed out / not Eros */
.hq-auth { max-width: 440px; width: calc(100% - 32px); margin: 40px auto; }
.hq-auth .logo svg, .hq-auth .logo img { height: 56px; width: auto; display: block; margin-bottom: 12px; }
.hq-auth .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hq-auth .row > * { flex: 1 1 140px; }

/* Brand: the fixed Ranger logo with an HQ tag (Design: no HQ name/logo setting) */
.hq-tag { display: table; margin: 6px auto 0;  padding: 2px 8px; border-radius: 6px; background: var(--brand); color: var(--on-color); font-size: 12px; font-weight: 800; letter-spacing: .08em; vertical-align: middle; }

/* One primary color for every main button (Style 2026-10-25), not each section's color; red stays red */
.btnw:not(.eros-red) { background: var(--brand); }
.nv-brand, .nv-brand:hover { text-decoration: none; }

/* Page title under the section bar */
.pghead { margin: 0 0 16px; }
.pghead h1 { margin: 0 0 4px; font-size: 24px; }
.pghead p { margin: 0; }

/* Cards: phone 1 column, tablet 2, desktop 3. Never sideways scroll. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.tab > .xw + .xw, .tab > div:not(.grid) > .xw + .xw, .hq-stats + .xw { margin-top: 16px; }   /* not in grids: cards line up at the top */

/* Home tiles: tone comes from --st-tone (a theme token), mixed into the card color */
.hq-stats { margin-bottom: 16px; }
@media (max-width: 499px) { .hq-stats { grid-template-columns: minmax(0, 1fr); } }
.hq-st { --st-tone: var(--brand); --st-ink: var(--st-tone); background: color-mix(in srgb, var(--st-tone) 14%, var(--card)); }
.hq-st:hover { background: color-mix(in srgb, var(--st-tone) 22%, var(--card)); }
.hq-st .xwi { background: var(--card) !important; }
.hq-st .xwi .ico { color: var(--st-tone) !important; }

/* List rows */
.hq-lr { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.hq-lr:first-of-type { border-top: 0; }
.hq-lr[data-act], a.hq-lr { cursor: pointer; }
.hq-lr[data-act]:hover, a.hq-lr:hover { background: var(--hover); }
.hq-lr .g { flex: 1; min-width: 0; }
.hq-lr .nm { font-weight: 700; overflow-wrap: anywhere; }
.hq-lr .s { font-size: 14px; overflow-wrap: anywhere; }
.hq-lr .pill { flex: none; font-size: 12.5px; padding: 3px 10px; cursor: default; }
.hq-lr > .ico { flex: none; color: var(--muted); }
.hq-wx .hq-pl { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: var(--soft); flex: none; }

/* Park and release cards */
.hq-park { display: flex; flex-direction: column; gap: 10px; }
.hq-park.attn { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.hq-park .top { display: flex; align-items: flex-start; gap: 10px; }
.hq-park .top .nm { flex: 1; min-width: 0; }
.hq-park .top b { display: block; font-size: 18px; overflow-wrap: anywhere; }
.hq-park .top a, .hq-park .top .nm span { display: block; font-size: 14px; color: var(--brand); overflow-wrap: anywhere; }
.hq-park .sum { font-weight: 600; overflow-wrap: anywhere; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills .pill { font-size: 13px; padding: 3px 10px; cursor: default; }
.rows { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; font-size: 14px; }
.rows span { color: var(--muted); white-space: nowrap; }
.rows b { font-weight: 600; overflow-wrap: anywhere; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.acts > * { flex: 1 1 140px; }
.seedbox { border-top: 1px solid var(--line); padding-top: 10px; }
.seedbox h4 { font-size: 15px; margin: 0 0 6px; }
.hq-sm { min-height: var(--btn-h-sm); font-size: var(--btn-fs-sm); }
.hq-red { color: var(--red) !important; }

/* Forms in pop-ups */
.hint { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 12px; }
@media (min-width: 560px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.msg { background: var(--red-soft); color: var(--red); padding: 10px 12px; border-radius: var(--btn-r); font-size: 14px; margin-top: 12px; }
.msg.ok { background: var(--c-event); color: var(--ok-d); }
#sheetBody textarea { display: block; width: 100%; min-height: 96px; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--btn-r); resize: vertical; }
#sheetBody .btnw { width: 100%; margin-top: 8px; }
#sheetBody h3 { font-size: 16px; margin: 20px 0 0; }
.results { list-style: none; padding: 0; margin: 0 0 12px; }
.results li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.results li b { overflow-wrap: anywhere; }
.ent { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.ent .entTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 14px; }

/* Reports tables: scroll inside their own box on phones, never the page */
.hq-tbl { overflow-x: auto; max-width: 100%; }
.hq-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hq-tbl th, .hq-tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hq-tbl th { color: var(--muted); font-weight: 700; }
.hq-tbl td:first-child { font-weight: 700; }

.empty { color: var(--muted); }

.hq-now { margin-top: 16px; }
.hq-steps { margin: 8px 0; padding-left: 22px; }
.hq-steps li { margin: 6px 0; }
/* Costs: a table from 800 up, stacked rows on phones (Style) */
.hq-cost-rows { display: none; }
.hq-cost-n { text-align: right; flex: none; max-width: 55%; }
.hq-cost-n b { display: block; }
.hq-cost-n small { display: block; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 799px) { .hq-cost-wide { display: none; } .hq-cost-rows { display: block; } }

/* Parks: the US map (usmap.js). Theme tokens only. */
.hq-map { margin-bottom: 16px; }
.hq-map svg { display: block; width: 100%; height: auto; }
.hq-map .land { fill: var(--soft); stroke: var(--muted); stroke-width: 1; }
.hq-map .lines { fill: none; stroke: var(--line); stroke-width: 1; stroke-linejoin: round; }
.hq-dot circle { fill: var(--brand); stroke: var(--card); stroke-width: 3; cursor: pointer; }
.hq-dot.test circle { fill: var(--card); stroke: var(--slate); stroke-width: 2px; vector-effect: non-scaling-stroke; }   /* hollow: never told apart by color alone */
.hq-dot text { fill: var(--ink); font-size: 24px; font-weight: 700; paint-order: stroke; stroke: var(--card); stroke-width: 6px; stroke-linejoin: round; }
@media (min-width: 700px) { .hq-map svg { max-height: 220px; } .hq-dot circle { r: 18px; stroke-width: 6px; } .hq-dot.test circle { stroke-width: 2px; } .hq-dot text { display: none; } }
.hq-dot:hover circle, .hq-dot:focus circle { fill: var(--accent); }
.hq-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.hq-k { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); margin-right: 6px; vertical-align: -1px; }
.hq-k.test { background: var(--card); box-shadow: inset 0 0 0 2px var(--slate); }
.hq-map p.muted { margin: 8px 0 0; font-size: 14px; }
@media (max-width: 699px) { .hq-dot circle { r: 18px; stroke-width: 5px; } .hq-dot.test circle { stroke-width: 2px; } .hq-dot text { display: none; } }   /* the map shrinks on phones: keep dots big enough to tap */

/* Home: the Parks today banner (park Home's day strip); right side empty for now */
.hq-strip { margin-bottom: 16px; }
.hq-strip[data-act] { cursor: pointer; }
.hq-strip .hq-strip-n { margin-left: auto; font-weight: 400; text-align: right; min-width: 0; }
.hq-strip .hq-strip-n span { white-space: nowrap; }   /* each item stays on one line */
.hq-strip .hq-strip-wx { cursor: pointer; text-decoration: underline; }
.hq-strip .hq-strip-wx .ico { width: 18px; height: 18px; color: var(--warn); vertical-align: -3px; margin-right: 4px; }   /* the urgent item: not by underline alone (Style) */   /* its own tap: the weather list */
.hq-strip .hq-strip-n span + span::before { content: "·"; margin: 0 6px 0 2px; }   /* the space between items is the gap before the dot */
@media (max-width: 699px) {   /* phones: the news goes under the title, one item per line (Style) */
  .hq-strip .xwh { flex-wrap: wrap; }
  .hq-strip .hq-strip-n { flex-basis: 100%; margin-left: 0; text-align: left; }
  .hq-strip .hq-strip-n span { display: block; }
  .hq-strip .hq-strip-n span + span::before { content: none; }
}
.hq-srch { display: none; }
@media (max-width: 699px) { .hq-srch { display: grid; } }   /* phones hide the Search box, so Search is an icon there */

/* Parks list (Design 2026-10-26): one short row per park, filters on top, details on the park's page */
.hq-pf .hq-st.on { box-shadow: inset 0 0 0 2px var(--st-tone); }
.hq-pf { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }   /* filters stay small: 2 across on phones, 4 on wider screens */
@media (min-width: 700px) { .hq-pf { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.hq-pf .big { font-size: 24px; }
.hq-psearch input { width: 100%; }
.hq-pdiv { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hq-pr { display: grid; grid-template-columns: 112px minmax(0, 1.4fr) auto minmax(0, 1.6fr) 92px 18px; align-items: center; gap: 12px;
  width: 100%; min-height: var(--btn-h); padding: 10px 4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.hq-pr:hover, .hq-pr:focus-visible { background: var(--hover); }
.hq-ph { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--st-tone); }
.hq-ph span { color: var(--ph-ink, var(--st-tone)); }   /* the word in a text-safe shade (green text uses --ok-d); the icon keeps the signal color */
.hq-ph .ico { width: 18px; height: 18px; flex: none; }
.hq-pn { min-width: 0; overflow-wrap: anywhere; }
.hq-pr .pill { font-size: 12.5px; padding: 3px 10px; cursor: inherit; justify-self: start; }
.hq-pw { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.hq-pt { font-size: 14px; white-space: nowrap; text-align: right; }
.hq-pc { width: 18px; height: 18px; color: var(--muted); }
.hq-pfold { grid-template-columns: 18px minmax(0, 1fr) 18px; font-weight: 700; }
.hq-pfold > .ico:first-child { width: 18px; height: 18px; color: var(--ok); }
.hq-pmore { margin-top: 12px; }
@media (max-width: 699px) {   /* phones: two lines; health, name and chevron on top, waiting and last report under them */
  .hq-pr { grid-template-columns: auto minmax(0, 1fr) auto 18px; grid-template-areas: "h n k c" "w w t c"; row-gap: 4px; }
  .hq-ph { grid-area: h; } .hq-ph span { display: none; } .hq-pn { grid-area: n; } .hq-pr .pill { grid-area: k; }
  .hq-pw { grid-area: w; color: var(--muted); } .hq-pw:empty { display: none; } .hq-pt { grid-area: t; } .hq-pc { grid-area: c; }
  .hq-pfold { grid-template-columns: 18px minmax(0, 1fr) 18px; grid-template-areas: none; }
}
@media (max-width: 699px) { .hq-pfold .hq-pc { grid-area: auto; } }
#sheetBody .hq-park { box-shadow: none; padding: 0; background: none; border: 0; }   /* the park's page: the card's content without a second box */
/* Admin > Keys: the events key, shown once */
.hq-key-box { margin: 12px 0; }
.hq-key-in { resize: none; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.hq-key-warn { color: var(--red); font-weight: 600; margin: 12px 0; }
.hq-key-pair { gap: 12px; margin-top: 12px; }
.hq-key-pair > button { flex: 1 1 0; height: 44px; min-height: 44px; margin: 0; padding: 0 12px; display: flex; align-items: center; justify-content: center; text-align: center; }
.hq-key-pair > .xbtn { background: var(--soft); }
/* Reports > APM: the ranked row (Design), the range and park bar, the two donuts */
.hq-us .chips { justify-content: flex-start; }
.hq-us .chart svg { height: auto; }   /* bars use the full width on wide screens (Style) */
.hq-us-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 0 0 14px; }
.hq-us-sel { flex: 1 1 106px; min-width: 0; margin: 0; }
.hq-us-sel:nth-child(4) { flex-basis: 150px; }
@media (max-width: 559px) { .hq-us-bar { display: grid; grid-template-columns: 1fr 1fr; } .hq-us-sel:nth-child(4) { flex-basis: auto; } }
.hq-us-sel span { display: block; font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.hq-us-sel select { width: 100%; min-height: 44px; }
.hq-rank { padding: 10px 0; border-bottom: 1px solid var(--line); min-height: var(--btn-h); display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.hq-rank:last-child { border-bottom: 0; }
.hq-rank-t { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.hq-rank-t span { min-width: 0; overflow-wrap: anywhere; }
.hq-rank-t b { flex: none; }
.hq-rank i { display: block; height: 4px; border-radius: 2px; background: linear-gradient(var(--c), var(--c)) no-repeat 0 0 / var(--w) 100%, var(--line); }
.hq-us-more { margin-top: 10px; width: 100%; }
.hq-us-never { margin-top: 12px; }
.hq-us-never summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--muted); }
.hq-us-pies { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .hq-us-pies { grid-template-columns: 1fr 1fr; } }
.hq-us-pie { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hq-us-pie h4 { margin: 0; }
/* Meter scan: three tiles in one row from 700px; Typed instead is always the warn amber (Style) */
@media (min-width: 700px) { .hq-stats.hq-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hq-typed .chart rect.bar.other, .hq-typed .chartkey .k-empty { fill: var(--warn); background: var(--warn); }
/* Scan website (setup answers from a park's own site) */
#scOut { margin-top: 16px; }
#scOut .acts { margin-top: 16px; }
.hq-scan-am { padding: 12px 0; }
.hq-scan-am .chips { margin: 8px 0 0; justify-content: flex-start; }
.hq-scan-ul { margin: 6px 0 0; padding-left: 20px; }
#scOut .tgl small .pill { font-size: 12px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }

.hq-conn { margin: 0 0 14px; }
.hq-conn summary { cursor: pointer; min-height: var(--btn-h); display: flex; align-items: center; font-weight: 600; }
/* The park's page: facts side by side, a label over its value, as many to a row as fit (John 2026-10-26) */
.hq-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; font-size: 14px; }
.hq-facts div { min-width: 0; }
.hq-facts span { display: block; color: var(--muted); font-size: 12px; }
.hq-facts b { display: block; font-weight: 600; overflow-wrap: anywhere; }
/* Home (John 2026-10-28): the map and weather on the left, What's happening on the right, like a park's Home; one column on phones */
.hq-dot circle.hit { fill: transparent; stroke: none; pointer-events: all; }
.hq-hm { display: grid; gap: 16px; }
.hq-hm-l, .hq-hm-r { display: grid; gap: 16px; align-content: start; min-width: 0; }
.hq-hm .xw { margin: 0; }
@media (min-width: 900px) {
  .hq-hm { grid-template-columns: minmax(0, 1fr) 348px; align-items: start; }
  .hq-map svg { max-height: 420px; }
  .hq-dot circle { r: 14px; stroke-width: 5px; } .hq-dot.test circle { stroke-width: 2px; }
  .hq-dot text { display: block; font-size: 22px; stroke-width: 7px; }
}
.hq-wxc { cursor: pointer; }
.hq-wxc .xwh .hq-pc { margin-left: auto; }
.hq-needs .hq-lr .hq-pc { margin-left: auto; flex: none; color: var(--muted); }
.hq-strip-n b { font-weight: 800; }
.hq-sub { font-size: 18px; margin: 32px 0 10px; }
.hq-mapprev { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); margin: 8px 0 12px; }
.hq-mapprev svg { display: block; width: 100%; height: auto; max-height: 70vh; }
button.hq-mapprev { display: block; width: 100%; padding: 0; font: inherit; color: inherit; cursor: zoom-in; }
.hq-mapprev-t { text-align: center; margin: -4px 0 12px; }
.hq-scan-in { padding: 12px 0 0; border-top: 1px solid var(--line); margin-top: 8px; }
.hq-sr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; width: 100%; min-height: var(--btn-h);
  padding: 10px 4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.hq-sr { cursor: default; }
button.hq-sr { cursor: pointer; }
button.hq-sr:hover, button.hq-sr:focus-visible { background: var(--hover); }
.hq-srbad { color: var(--ink); font-weight: 700; }
.hq-sr .hq-srwarn .ico { color: var(--warn) !important; }
.hq-spin { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: hq-spin 1s linear infinite; }
@keyframes hq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hq-spin { animation: none; } }
.hq-srt { min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.hq-srm { font-variant-numeric: tabular-nums; }
.hq-src { width: 18px; height: 18px; color: var(--muted); }
.hq-scan-ul a { color: var(--info); font-weight: 600; text-decoration: none; }
.hq-wide { flex-direction: column; align-items: stretch; }
.hq-wide > * { flex: 0 0 auto; }   /* in a column, .acts's 140px basis would be height */
.hq-wide .btnw, .hq-wide .xbtn { width: 100%; min-height: 54px; justify-content: center; text-align: center; }
.hq-mapbig { position: fixed; inset: 0; z-index: 200; background: var(--card); display: flex; flex-direction: column; }
.hq-mapbig-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.hq-mapbig-s { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.hq-mapbig-s svg { display: block; width: max(100%, 1600px); height: auto; }
.lnkb { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--info); cursor: pointer; }
.hq-tall { width: 100%; min-height: 54px; justify-content: center; }

.hq-relacts { margin: 0 0 14px; }
.hq-relacts > .btnw { flex: 0 1 auto; width: auto; padding-left: 22px; padding-right: 22px; }
.hq-bellrow { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.hq-bellrow .lr { flex: 1; min-width: 0; border-top: 0; }
.hq-bellrow .hq-clear { flex: none; }