/* County page. Builds on style.css tokens. */
body.county-page { display: block; height: auto; }
.btn { display: inline-block; margin-top: 10px; background: var(--accent); color: #0b1115; border: 0; border-radius: 8px; padding: 10px 14px; font: 700 15px var(--head); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn.ghost { background: none; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

.hero { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg2), var(--bg)); }
.back { font: 600 13px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
.back:hover { color: var(--accent); }
.hero h1 { margin: 6px 0 10px; font: 800 52px/1 var(--head); letter-spacing: .03em; text-transform: uppercase; }
.hero h1 small { display: block; font: 600 18px var(--head); letter-spacing: .2em; color: var(--mute); margin-top: 6px; }
.status { display: inline-flex; align-items: center; gap: 10px; font: 800 26px var(--head); letter-spacing: .1em; padding: 8px 16px; border-radius: 10px; }
.status svg { width: 24px; height: 24px; }
.status.clear { background: rgba(66,209,122,.14); color: var(--ok); }
.status.watch { background: rgba(228,184,64,.14); color: var(--watch); }
.status.prepare { background: rgba(242,92,36,.16); color: var(--prepare); }
.status.act { background: rgba(229,72,77,.18); color: #ef6b6f; }
.reasons { margin: 12px 0 0; padding-left: 18px; color: var(--ink); }
.reasons li { margin: 3px 0; }
#minimap { height: 150px; border: 1px solid var(--line); border-radius: 12px; background: #070b0e; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 14px; padding: 16px 24px; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wrap { padding: 0 24px; }

.fc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fc div { background: var(--bg2); border-radius: 10px; padding: 10px; }
.fc b { display: block; font: 700 14px var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.fc .t { font: 800 30px/1.1 var(--head); }
.fc .s { font-size: 12px; color: var(--ink); }
.fc .r { font: 500 11px var(--mono); color: #8cc4dc; }
.fcd { margin-top: 10px; font-size: 14px; }

.list { display: flex; flex-direction: column; gap: 8px; }
.item { background: var(--bg2); border-radius: 8px; padding: 10px 12px; }
.item .h { display: flex; justify-content: space-between; gap: 10px; font: 700 16px var(--head); letter-spacing: .04em; text-transform: uppercase; }
.item .m { font-size: 12px; color: var(--mute); margin-top: 2px; }
.item p { margin: 6px 0 0; font-size: 14px; }
.trend { font: 600 12px var(--mono); padding: 2px 8px; border-radius: 999px; }
.trend.rising { background: rgba(229,72,77,.15); color: var(--bad); }
.trend.falling { background: rgba(88,166,199,.15); color: #8cc4dc; }
.trend.steady { background: rgba(142,154,160,.15); color: var(--mute); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--mute); }
.kv dd { margin: 0; }
.fbwrap { margin-top: 12px; border-radius: 10px; overflow: hidden; background: #fff; max-width: 500px; }
.fbwrap iframe { display: block; width: 100%; border: 0; }
.subh { font: 700 13px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 14px 0 6px; }
.call a.tel { font: 800 24px var(--head); letter-spacing: .04em; text-decoration: none; color: var(--ink); }
.checklist { margin: 8px 0 0; padding: 0; list-style: none; }
.checklist li { padding: 6px 0 6px 26px; position: relative; border-top: 1px solid var(--line); }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 12px; height: 12px; border: 2px solid var(--mute); border-radius: 3px; }

/* at a glance */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 14px 24px 0; }
.tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--mute); border-radius: 10px; padding: 10px 12px; min-height: 96px; }
.tile:hover { border-color: var(--accent); }
.tile .tk { font: 700 13px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.tile .tv { font: 600 15px/1.25 var(--body); flex: 1; }
.tile .ts { font: 700 12px var(--mono); letter-spacing: .06em; }
.tile.ok { border-top-color: var(--ok); } .tile.ok .ts { color: var(--ok); }
.tile.watch { border-top-color: var(--watch); background: rgba(228,184,64,.06); } .tile.watch .ts { color: var(--watch); }
.tile.prepare { border-top-color: var(--prepare); background: rgba(242,92,36,.08); } .tile.prepare .ts { color: var(--prepare); }
.tile.act { border-top-color: #e5484d; background: rgba(229,72,77,.10); } .tile.act .ts { color: #ef6b6f; }
.tile.unknown { border-top-color: var(--bad); } .tile.unknown .ts { color: var(--bad); }
.tile.note { border-top-color: #c9a227; } .tile.note .ts { color: #e0bd45; }
.qrow.note .dot { background: #e0bd45; }
.tile.pending { opacity: .55; } .tile.pending .ts { color: var(--mute); }

/* urgent cards and quiet rows */
.card.hot.watch { border-color: rgba(228,184,64,.5); }
.card.hot.prepare { border-color: rgba(242,92,36,.6); }
.card.hot.act { border-color: rgba(229,72,77,.7); box-shadow: 0 0 0 1px rgba(229,72,77,.3); }
.qrow { border-top: 1px solid var(--line); }
.qrow:first-of-type { border-top: 0; }
.qrow summary { list-style: none; display: grid; grid-template-columns: 14px 170px 1fr auto; align-items: center; gap: 10px; padding: 11px 2px; cursor: pointer; }
.qrow summary::-webkit-details-marker { display: none; }
.qrow summary b { font: 700 16px var(--head); letter-spacing: .06em; text-transform: uppercase; }
.qrow .qs { font-size: 14px; }
.qrow .qa .age { font: 500 10px var(--mono); color: var(--mute); }
.qrow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.qrow.pending .dot { background: var(--mute); } .qrow.pending { opacity: .6; }
.qrow[open] summary { border-bottom: 1px dashed var(--line); }
.qbody { padding: 10px 2px 14px; }
.qsrc { font-size: 11px; }

/* side column */
.rail .card { position: relative; }
.e911 { font: 800 22px var(--head); letter-spacing: .06em; margin-bottom: 8px; }
.e911 a { color: var(--bad); text-decoration: none; }
.crow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.crow b { font: 700 15px var(--head); letter-spacing: .06em; text-transform: uppercase; }
.crow .m { font-size: 12px; color: var(--mute); }
.crow .tel { font: 800 22px var(--head); letter-spacing: .03em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.btn.wide { display: block; text-align: center; margin-top: 12px; }
.small { font-size: 12px; margin: 8px 0 0; }

#s-tv .tvgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }


/* report form */
#reportDlg { width: min(560px, 94vw); max-height: 92vh; overflow: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
#reportDlg::backdrop { background: rgba(0,0,0,.65); }
.rhead { display: flex; justify-content: space-between; align-items: center; }
.rhead h2 { margin: 0; font: 800 26px var(--head); letter-spacing: .04em; text-transform: uppercase; }
.rhead .close { background: none; border: 0; color: var(--mute); font-size: 28px; cursor: pointer; }
.small-911 { font-size: 18px; margin: 6px 0 10px; }
.rtypes { border: 0; padding: 0; margin: 0 0 12px; }
.rtypes legend, .rlabel { font: 700 14px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 10px 0 6px; display: block; }
#rTypes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#rTypes label { display: block; }
#rTypes input { position: absolute; opacity: 0; }
#rTypes span { display: block; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); font-size: 16px; cursor: pointer; }
#rTypes input:checked + span { border-color: var(--accent); background: rgba(242,232,213,.12); font-weight: 600; }
#rTypes input:focus-visible + span { outline: 2px solid var(--accent); }
#rMap { height: 220px; border-radius: 10px; border: 1px solid var(--line); background: #070b0e; }
.rrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
#reportDlg input:not([type=radio]), #reportDlg textarea { width: 100%; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: 16px var(--body); }
.hp { position: absolute !important; left: -9999px; width: 1px !important; height: 1px; }
.rbadge { font: 700 11px var(--mono); letter-spacing: .06em; padding: 3px 7px; border-radius: 4px; }
.rbadge.unconfirmed { border: 1px dashed var(--mute); color: var(--mute); }
.rbadge.multiple { border: 1px solid var(--watch); color: var(--watch); }
.rbadge.official { background: rgba(228,184,64,.15); color: var(--watch); }

@media (max-width: 900px) {
  #rTypes { grid-template-columns: 1fr; }
  .glance { grid-template-columns: repeat(2, 1fr); padding: 12px 16px 0; }
  .qrow summary { grid-template-columns: 12px 1fr; }
  .qrow .qs { grid-column: 2; } .qrow .qa { display: none; }
  .hero { grid-template-columns: 1fr; padding: 16px; }
  .hero h1 { font-size: 40px; }
  .cgrid { grid-template-columns: 1fr; padding: 12px 16px; }
  .fc { grid-template-columns: repeat(2, 1fr); }
  .wrap { padding: 0 16px; }
}

/* Printed county report */
@media print {
  .top, .glance, .hero-actions, #minimap, #s-tv, .fbwrap, iframe, dialog, .links, .sponsor, .sponsor-top { display: none !important; }
  html, body, .card, .hero, details, summary { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .card { border: 1px solid #999 !important; break-inside: avoid; }
  a { color: #000 !important; }
  .mute, .src, .age, .fine { color: #333 !important; }
  body::before { content: "Texas Readiness county report, printed " attr(data-printed) ". Live version: texasreadiness.com"; display: block; font-size: 12px; margin-bottom: 8px; }
}