/* fanningbayou.net — a mock-municipal community portal.
   Civic road-signage meets soft bayou green. Light theme only. */

/* `hidden` must always beat any `display:` rule (same trick as isitdns). */
[hidden] { display: none !important; }

:root {
  /* ───── Surfaces — soft cool green-grey wash, off-white cards ───── */
  --bg:         #e7ece6;
  --bg-card:    #fbfdfb;
  --bg-card-hi: #eef3ed;
  --border:     #cfd8cd;
  --border-hi:  #bcc8b9;

  /* ───── Ink ───── */
  --text:       #18211b;
  --text-dim:   #46514a;
  --text-vdim:  #5c685e;

  /* ───── Bayou accent ───── */
  --accent:      #2f7d4f;
  --accent-deep: #1f5a39;
  --accent-glow: rgba(47, 125, 79, 0.14);

  /* ───── Road-sign palette (the satire's visual language) ───── */
  --sign-yellow:     #f4c20d;  /* caution diamond */
  --sign-yellow-ink: #1c1602;
  --sign-green:      #0f7a43;  /* highway guide sign */
  --wrongway:        #cf3a2e;  /* regulatory red — DO NOT ENTER */

  /* ───── Status-board states ───── */
  --ok:    #1f8a4c;  --ok-bg:    #e6f5ec;
  --warn:  #b9790a;  --warn-bg:  #fbf1dd;
  --bad:   #cf3a2e;  --bad-bg:   #fbe9e7;
  --info:  #2563b8;  --info-bg:  #e8f0fb;

  --radius:    14px;
  --radius-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(20, 33, 24, 0.05), 0 1px 3px rgba(20, 33, 24, 0.07);
  --shadow:    0 2px 4px rgba(20, 33, 24, 0.05), 0 8px 20px rgba(20, 33, 24, 0.08);
  --shadow-lg: 0 14px 34px rgba(20, 33, 24, 0.12);

  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* "Signage" face: heavy, slightly condensed, set uppercase in use. */
  --display: "Inter", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;

  --wrap: 1040px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background:
    radial-gradient(ellipse 1100px 560px at 50% -220px, var(--accent-glow) 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.92em; }
h1, h2, h3 { line-height: 1.2; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

/* ───────────────────────── Gov-ish header ───────────────────────── */

.gov {
  background: linear-gradient(180deg, #16231b 0%, #1b2c21 100%);
  box-shadow: 0 10px 26px -16px rgba(10, 20, 12, 0.6);
  position: relative;
}
.gov-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.55rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand:hover { text-decoration: none; }
.seal {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--sign-yellow);
  color: var(--sign-yellow-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.03em;
  border: 2px solid #0c130d;
  box-shadow: inset 0 0 0 2px var(--sign-yellow);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
  color: #f3f7f2;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.brand-sub { color: #9fb3a4; font-size: 0.7rem; letter-spacing: 0.02em; }

.nav { margin-left: auto; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.nav-link {
  color: #c4d2c8;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.nav-link.is-active { color: var(--sign-yellow-ink); background: var(--sign-yellow); }

/* A thin caution-tape rule under the header. */
.gov::after {
  content: "";
  display: block;
  height: 4px;
  background: repeating-linear-gradient(135deg, var(--sign-yellow) 0 14px, #1c1602 14px 28px);
  opacity: 0.9;
}

/* ───────────────────────── Generic sections ───────────────────────── */

main { padding: 2.2rem 0 3rem; }
.section { margin: 2.4rem 0; }
.section-h {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
  color: var(--text-vdim);
  margin: 0 0 0.9rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.section-h::before { content: "//"; color: var(--accent); font-weight: 700; }

.lead { font-size: 1.08rem; color: var(--text-dim); max-width: 60ch; }

/* ───────────────────────── Hero ───────────────────────── */

.hero { padding: 1.4rem 0 0.6rem; }
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  margin: 0 0 0.5rem;
}
.hero .tag { font-size: 1.15rem; color: var(--text-dim); max-width: 54ch; margin: 0; }
.hero .ribbon {
  display: inline-block;
  margin-bottom: 0.9rem;
  background: var(--bad-bg);
  color: var(--bad);
  border: 1px solid var(--bad);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.7rem;
}

/* ───────────────────────── Community Status Board ───────────────────────── */

.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 0.9rem;
}
.cell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--unk, var(--border-hi));
  border-radius: var(--radius);
  padding: 0.95rem 1.05rem;
  box-shadow: var(--shadow-sm);
}
.cell[data-state="ok"]   { border-left-color: var(--ok); }
.cell[data-state="warn"] { border-left-color: var(--warn); }
.cell[data-state="bad"]  { border-left-color: var(--bad); }
.cell[data-state="info"] { border-left-color: var(--info); }

.cell-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cell-name { font-weight: 700; font-size: 0.96rem; }
.cell-pill {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cell[data-state="ok"]   .cell-pill { background: var(--ok-bg);   color: var(--ok); }
.cell[data-state="warn"] .cell-pill { background: var(--warn-bg); color: var(--warn); }
.cell[data-state="bad"]  .cell-pill { background: var(--bad-bg);  color: var(--bad); }
.cell[data-state="info"] .cell-pill { background: var(--info-bg); color: var(--info); }

.cell-sub { color: var(--text-vdim); font-size: 0.86rem; margin-top: 0.25rem; }
.cell-metric { margin-top: 0.7rem; display: flex; align-items: baseline; gap: 0.4rem; }
.cell-num { font-family: var(--mono); font-weight: 700; font-size: 1.7rem; color: var(--text); }
.cell-unit { font-size: 0.78rem; color: var(--text-vdim); }
.board-note { font-size: 0.78rem; color: var(--text-vdim); margin-top: 0.7rem; }

/* ───────────────────────── Department cards ───────────────────────── */

.depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
.dept {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dept:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-hi); }
.dept-emoji { font-size: 1.5rem; }
.dept h3 { margin: 0.4rem 0 0.25rem; font-size: 1.08rem; color: var(--text); }
.dept p { margin: 0; color: var(--text-vdim); font-size: 0.9rem; }
.dept .go { display: inline-block; margin-top: 0.6rem; color: var(--accent); font-weight: 600; font-size: 0.86rem; }

/* ───────────────────────── Callouts / signs ───────────────────────── */

.callout {
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 1.4rem 0;
  border: 1px solid var(--border);
  background: var(--bg-card-hi);
}
.callout strong { color: var(--text); }
.callout.warn   { background: var(--warn-bg); border-color: var(--warn); }
.callout.danger { background: var(--bad-bg);  border-color: var(--bad); }
.callout.rules  { background: var(--bg-card); border-left: 5px solid var(--accent); }
.callout-title {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  font-size: 0.82rem;
  margin: 0 0 0.35rem;
}
.callout.warn .callout-title   { color: var(--warn); }
.callout.danger .callout-title { color: var(--bad); }
.callout p { margin: 0.35rem 0 0; color: var(--text-dim); font-size: 0.94rem; }

/* A diamond caution sign + a red regulatory sign, for flavor. */
.sign {
  display: inline-grid;
  place-items: center;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
}
.sign.caution {
  width: 132px; height: 132px;
  background: var(--sign-yellow);
  color: var(--sign-yellow-ink);
  border: 5px solid #0c130d;
  border-radius: 12px;
  transform: rotate(45deg);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow);
}
.sign.caution span { transform: rotate(-45deg); display: block; padding: 0 0.4rem; }
.sign.regulatory {
  padding: 0.5rem 1.1rem;
  background: #fff;
  color: var(--wrongway);
  border: 4px solid var(--wrongway);
  border-radius: 10px;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow-sm);
}
.sign-row { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin: 1.4rem 0; }

/* ───────────────────────── Academy modules ───────────────────────── */

.module {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--border);
}
.module:first-of-type { border-top: none; }
.module-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  height: 56px;
}
.module-body h3 { margin: 0.1rem 0 0.4rem; font-size: 1.12rem; }
.module-body p { margin: 0 0 0.5rem; color: var(--text-dim); }
.module-body .aside { color: var(--text-vdim); font-size: 0.9rem; font-style: italic; }

/* The Exhibit A photo slot. */
.photo { margin: 1.6rem 0; }
.photo-img { width: 100%; border-radius: var(--radius); display: block; box-shadow: var(--shadow); }
.photo-img.is-missing { display: none; }
.photo-fallback {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 240px;
  border: 2px dashed var(--border-hi);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(47,125,79,0.05) 18px 36px),
    var(--bg-card-hi);
  color: var(--text-vdim);
  padding: 1.5rem;
}
.photo-fallback .ph-big { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--text-dim); }
.photo-fallback code { background: var(--bg-card); padding: 0.1rem 0.35rem; border-radius: 6px; border: 1px solid var(--border); }
.photo figcaption { color: var(--text-vdim); font-size: 0.86rem; margin-top: 0.5rem; text-align: center; }

/* The mock certificate. */
.cert {
  border: 3px double var(--accent-deep);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1.6rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  margin: 1.6rem 0;
}
.cert h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.4rem; }
.cert p { color: var(--text-dim); margin: 0.3rem 0; }
.cert .seal-big {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--sign-yellow); color: var(--sign-yellow-ink);
  border: 3px solid var(--accent-deep);
  font-family: var(--display); font-weight: 800; margin-bottom: 0.6rem;
}

/* ───────────────────────── Bulletin (the board) ───────────────────────── */

.composer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.4rem;
}
.composer-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.composer label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); flex: 1 1 200px; }
.composer select, .composer input, .composer textarea {
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  width: 100%;
}
.composer textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.composer select:focus, .composer input:focus, .composer textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.6rem; }
.counter { font-family: var(--mono); font-size: 0.78rem; color: var(--text-vdim); }
.counter.over { color: var(--bad); }
.btn {
  font: inherit; font-weight: 700;
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem; cursor: pointer;
  transition: background 0.12s ease;
}
.btn:hover { background: var(--accent-deep); }
.btn:disabled { opacity: 0.55; cursor: default; }
.composer-msg { margin: 0.7rem 0 0; font-size: 0.9rem; font-weight: 600; }
.composer-msg.ok  { color: var(--ok); }
.composer-msg.err { color: var(--bad); }

.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip {
  font: inherit; font-size: 0.82rem; font-weight: 600;
  background: var(--bg-card); color: var(--text-dim);
  border: 1px solid var(--border-hi); border-radius: 999px;
  padding: 0.32rem 0.8rem; cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.feed { display: flex; flex-direction: column; gap: 0.8rem; }
.post {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.05rem;
  box-shadow: var(--shadow-sm);
}
.post-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8rem; }
.post-cat {
  font-weight: 700;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  background: var(--bg-card-hi);
  border: 1px solid var(--border-hi);
}
.post-handle { font-weight: 600; color: var(--text-dim); }
.post-time { color: var(--text-vdim); margin-left: auto; }
.post-body { margin: 0.5rem 0 0.6rem; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.post-foot { display: flex; align-items: center; gap: 0.6rem; }
.agree {
  font: inherit; font-size: 0.82rem; font-weight: 600;
  background: var(--bg-card-hi); color: var(--text-dim);
  border: 1px solid var(--border-hi); border-radius: 999px;
  padding: 0.25rem 0.7rem; cursor: pointer;
}
.agree:hover { border-color: var(--accent); color: var(--accent); }
.agree.is-done { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); cursor: default; }
.agree-n { font-family: var(--mono); }

.empty, .feed-msg {
  text-align: center; color: var(--text-vdim);
  padding: 2.2rem 1rem; border: 1px dashed var(--border-hi);
  border-radius: var(--radius); background: var(--bg-card-hi);
}
.more { display: block; margin: 1.2rem auto 0; }

/* ───────────────────────── Classifieds ───────────────────────── */

.listing {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.05rem;
  box-shadow: var(--shadow-sm);
}
.listing.sold { opacity: 0.72; }
.listing-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.listing-title { font-weight: 700; font-size: 1.04rem; color: var(--text); }
.listing-price {
  font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
  color: var(--accent-deep); background: var(--ok-bg);
  border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap;
}
.listing-cat {
  font-size: 0.74rem; font-weight: 700;
  border-radius: 999px; padding: 0.1rem 0.5rem;
  background: var(--bg-card-hi); border: 1px solid var(--border-hi); color: var(--text-dim);
}
.listing-time { color: var(--text-vdim); font-size: 0.78rem; margin-left: auto; }
.listing-body { margin: 0.5rem 0 0.6rem; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.listing-contact {
  font-size: 0.86rem; color: var(--text-dim);
  background: var(--bg-card-hi); border-radius: var(--radius-sm);
  padding: 0.45rem 0.65rem;
}
.listing-contact strong { color: var(--accent-deep); }
.listing-foot { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.55rem; }
.sold-badge {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bad); background: var(--bad-bg);
  border: 1px solid var(--bad); border-radius: 999px; padding: 0.12rem 0.5rem;
}
.listing-manage {
  font: inherit; font-size: 0.8rem; font-weight: 600;
  background: var(--bg-card-hi); color: var(--text-dim);
  border: 1px solid var(--border-hi); border-radius: 999px;
  padding: 0.22rem 0.7rem; cursor: pointer;
}
.listing-manage:hover { border-color: var(--bad); color: var(--bad); }

/* ───────────────────────── Contractor list ───────────────────────── */

.seg { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.seg-btn {
  font: inherit; font-weight: 600; font-size: 0.9rem;
  background: var(--bg-card); color: var(--text-dim);
  border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  padding: 0.45rem 0.9rem; cursor: pointer;
}
.seg-btn:hover { border-color: var(--accent); }
.seg-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 720px) { .lists { grid-template-columns: 1fr; } }
.list-h {
  font-family: var(--display); font-size: 1.2rem; margin: 0 0 0.7rem;
  padding-bottom: 0.4rem; border-bottom: 2px solid var(--border);
}
.list-h.nice { color: var(--ok); border-color: var(--ok); }
.list-h.naughty { color: var(--bad); border-color: var(--bad); }
.list-h-sub { font-family: var(--sans); font-size: 0.7rem; font-weight: 400; color: var(--text-vdim); }
.entries { display: flex; flex-direction: column; gap: 0.7rem; }

.entry {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  box-shadow: var(--shadow-sm);
}
.entry.nice { border-left-color: var(--ok); }
.entry.naughty { border-left-color: var(--bad); }
.entry-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.entry-biz { font-weight: 700; font-size: 1rem; color: var(--text); }
.entry-trade {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  border-radius: 999px; padding: 0.1rem 0.5rem;
  background: var(--bg-card-hi); border: 1px solid var(--border-hi); color: var(--text-dim);
}
.entry-time { color: var(--text-vdim); font-size: 0.76rem; margin-left: auto; }
.entry-body { margin: 0.45rem 0 0.4rem; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.entry-meta { font-size: 0.78rem; color: var(--text-vdim); }

.opt { font-weight: 400; color: var(--text-vdim); }

/* Business directory: social links + recent reviews on a nice entry. */
.socials { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 0.2rem; }
.social-chip {
  font-size: 0.78rem; font-weight: 600;
  color: var(--accent-deep); background: var(--ok-bg);
  border: 1px solid var(--ok); border-radius: 999px;
  padding: 0.18rem 0.6rem;
}
.social-chip:hover { background: var(--ok); color: #fff; text-decoration: none; }
.revs { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.rev {
  font-size: 0.9rem; color: var(--text-dim);
  border-left: 3px solid var(--border-hi); padding-left: 0.6rem;
  overflow-wrap: anywhere;
}
.rev-by { color: var(--text-vdim); font-weight: 600; }
.rev-more { font-size: 0.8rem; color: var(--text-vdim); list-style: none; padding-left: 0.6rem; }

/* Thumbs up/down voting on a business card. */
.entry.biz.liked { border-left-color: var(--ok); }
.entry.biz.disliked { border-left-color: var(--bad); }
.vote-row { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
.vote {
  font: inherit; font-size: 0.95rem; font-weight: 700;
  background: var(--bg-card-hi); color: var(--text-dim);
  border: 1px solid var(--border-hi); border-radius: 999px;
  padding: 0.35rem 0.9rem; cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.vote-n { font-family: var(--mono); }
.vote-up:hover, .vote-up.is-mine { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.vote-down:hover, .vote-down.is-mine { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

/* ───────────────────────── The Dispatch (news) ───────────────────────── */

.news { display: flex; flex-direction: column; gap: 1.4rem; }
.article {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm);
}
.kicker {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.72rem; font-weight: 800; color: var(--accent);
}
.headline {
  font-family: var(--display); font-weight: 800; font-size: 1.4rem; line-height: 1.2;
  margin: 0.3rem 0 0.4rem; color: var(--text);
}
.dateline {
  font-size: 0.72rem; color: var(--text-vdim); text-transform: uppercase;
  letter-spacing: 0.04em; margin: 0 0 0.7rem;
}
.art-body { color: var(--text-dim); margin: 0 0 0.6rem; }
.art-body:last-child { margin-bottom: 0; }
.news-foot { text-align: center; color: var(--text-vdim); margin-top: 1.6rem; }

/* ───────────────────────── By The Numbers + Gator Tracker ───────────────────────── */

.gator-hero {
  background:
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(207,58,46,0.04) 20px 40px),
    var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow-sm); text-align: center; margin-bottom: 1.2rem;
}
.gator-big { font-family: var(--mono); font-weight: 700; font-size: 3.6rem; color: var(--bad); line-height: 1; display: block; }
.gator-big-label { color: var(--text-dim); font-weight: 600; }
.gator-sub { display: flex; justify-content: center; gap: 1.6rem; margin-top: 0.9rem; color: var(--text-dim); }
.gator-n { font-family: var(--mono); font-weight: 700; color: var(--text); }
.gator-form { margin-bottom: 1.2rem; }
.gatorlog { display: flex; flex-direction: column; gap: 0.4rem; }
.gatorlog-row {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.45rem 0.75rem;
}
.gatorlog-row.removed { opacity: 0.65; }
.gl-icon { font-size: 1.05rem; }
.gl-text { font-size: 0.9rem; color: var(--text); }
.gl-time { margin-left: auto; font-size: 0.78rem; color: var(--text-vdim); }

.bignums { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; }
.bignum {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem; text-align: center; box-shadow: var(--shadow-sm);
}
.bignum-n { display: block; font-family: var(--mono); font-weight: 700; font-size: 2.2rem; color: var(--accent-deep); line-height: 1; }
.bignum-label { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: var(--text-vdim); }

/* ───────────────────────── Guides ───────────────────────── */

.prose { max-width: 68ch; }
.prose h2 { font-size: 1.5rem; margin: 1.8rem 0 0.6rem; }
.prose h3 { font-size: 1.15rem; margin: 1.4rem 0 0.4rem; }
.prose p { color: var(--text-dim); }
.prose ul { color: var(--text-dim); padding-left: 1.2rem; }
.prose li { margin: 0.3rem 0; }
.mythfact { display: grid; gap: 0.7rem; margin: 1.2rem 0; }
.mf { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; box-shadow: var(--shadow-sm); }
.mf .m { color: var(--bad); font-weight: 700; }
.mf .f { color: var(--ok); font-weight: 700; }

/* ───────────────────────── Footer ───────────────────────── */

.foot {
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
  padding: 1.6rem 0 2.4rem;
  color: var(--text-vdim);
  font-size: 0.84rem;
}
.foot .wrap { display: flex; gap: 0.6rem 1.2rem; flex-wrap: wrap; align-items: baseline; }
.foot .disclaim { max-width: 60ch; }
.foot a { color: var(--text-dim); }

/* ───────────────────────── Responsive ───────────────────────── */

@media (max-width: 560px) {
  .nav { width: 100%; margin-left: 0; }
  .composer-row { flex-direction: column; }
  .module { grid-template-columns: 44px 1fr; gap: 0.7rem; }
  .module-num { height: 44px; font-size: 1.2rem; }
}

/* ───────────────────────── Network NOC ("is it AT&T?") ─────────────────────────
   A deadpan mirror of the isitdns probe front page: one big honest verdict,
   a freshness pulse, a by-cause scoreboard, live conditions, and a very
   professional component-uptime board. Reuses the civic palette tokens. */

.net-hero {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.4rem 1.4rem 2rem;
  margin: 1.8rem 0 2.4rem;
  position: relative;
  overflow: hidden;
}
.net-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--border-hi);
}
.net-hero[data-state="ok"]::before   { background: var(--ok); }
.net-hero[data-state="warn"]::before { background: var(--warn); }
.net-hero[data-state="bad"]::before  { background: var(--bad); }
.net-hero[data-state="unk"]::before  { background: var(--text-vdim); }

.net-eyebrow {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 800;
  color: var(--text-vdim); margin: 0 0 0.6rem;
}
.net-q { font-size: 1.2rem; color: var(--text-dim); margin: 0; font-weight: 600; }
.net-word {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(4rem, 17vw, 8.5rem); line-height: 0.95;
  margin: 0.1rem 0 0.55rem; color: var(--text-vdim);
}
.net-hero[data-state="ok"]   .net-word { color: var(--ok); }
.net-hero[data-state="warn"] .net-word { color: var(--warn); }
.net-hero[data-state="bad"]  .net-word { color: var(--bad); }
.net-hero[data-state="unk"]  .net-word { color: var(--text-vdim); }

.net-sub { max-width: 52ch; margin: 0 auto 1.1rem; color: var(--text-dim); font-size: 1.05rem; }

.net-fresh {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-vdim);
  background: var(--bg-card-hi); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.3rem 0.85rem; margin: 0;
}
.net-fresh-sep { opacity: 0.45; }
.net-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-vdim); position: relative; flex: none; }
.net-hero[data-state="ok"]   .net-dot { background: var(--ok); }
.net-hero[data-state="warn"] .net-dot { background: var(--warn); }
.net-hero[data-state="bad"]  .net-dot { background: var(--bad); }
.net-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--text-vdim); opacity: 0.5;
  animation: netpulse 2.2s ease-out infinite;
}
.net-hero[data-state="ok"]   .net-dot::after { border-color: var(--ok); }
.net-hero[data-state="warn"] .net-dot::after { border-color: var(--warn); }
.net-hero[data-state="bad"]  .net-dot::after { border-color: var(--bad); }
@keyframes netpulse { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .net-dot::after { animation: none; } }

.net-stat { text-align: center; padding: 0.2rem 0; }
.net-stat-n {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem); color: var(--text); letter-spacing: -0.01em;
}
.net-stat-n strong { color: var(--accent-deep); }
.net-stat-sub { display: block; max-width: 56ch; margin: 0.5rem auto 0; color: var(--text-vdim); font-size: 0.92rem; }

.net-vantage { max-width: 70ch; color: var(--text-dim); font-size: 1.02rem; }
.net-chip {
  display: inline-block; margin-left: 0.3rem; white-space: nowrap;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  color: var(--accent-deep); background: var(--accent-glow);
  border: 1px solid var(--accent); border-radius: 999px; padding: 0.15rem 0.6rem;
}

.scoreboard { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.score-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--bg-card); border: 1px solid var(--border-hi);
  border-radius: 999px; padding: 0.4rem 0.55rem 0.4rem 0.85rem;
  font-size: 0.9rem; color: var(--text-dim);
}
.score-cause { font-weight: 600; }
.score-n {
  font-family: var(--mono); font-weight: 700; font-size: 0.82rem; color: var(--text);
  background: var(--bg-card-hi); border-radius: 999px; padding: 0.1rem 0.5rem;
  min-width: 1.7rem; text-align: center;
}
.score-chip.att { border-color: var(--ok); background: var(--ok-bg); }
.score-chip.att .score-cause { color: var(--accent-deep); }
.score-chip.att .score-n { color: var(--ok); background: #fff; }

.conditions { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem; }
.condition {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 5px solid var(--border-hi); border-radius: var(--radius);
  padding: 0.95rem 1.05rem; box-shadow: var(--shadow-sm);
}
.condition[data-state="warn"] { border-left-color: var(--warn); }
.condition[data-state="bad"]  { border-left-color: var(--bad); }
.cond-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cond-where { font-weight: 700; font-size: 1rem; }
.cond-sig {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  padding: 0.16rem 0.5rem; border-radius: 999px;
  background: var(--bg-card-hi); border: 1px solid var(--border-hi); color: var(--text-dim);
}
.condition[data-state="warn"] .cond-sig { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.condition[data-state="bad"]  .cond-sig { background: var(--bad-bg);  color: var(--bad);  border-color: var(--bad); }
.cond-body { margin: 0.55rem 0 0.5rem; color: var(--text-dim); font-size: 0.92rem; }
.cond-body strong { color: var(--text); }
.cond-receipts { margin: 0; font-family: var(--mono); font-size: 0.72rem; color: var(--text-vdim); }

.uptime { display: flex; flex-direction: column; gap: 1rem; }
/* The three lights: router, demarc gateway, open internet. The method, visible.
   An unknown light is grey and says "no data" — never green by default. */
.net-lights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem;
}
.light {
  display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.6rem; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 4px solid var(--border-hi);
  border-radius: var(--radius); padding: 0.9rem 1rem; box-shadow: var(--shadow-sm);
}
.light[data-state="ok"]  { border-left-color: var(--ok); }
.light[data-state="bad"] { border-left-color: var(--bad); }
.light-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--text-vdim); flex: none;
}
.light[data-state="ok"]  .light-dot { background: var(--ok); }
.light[data-state="bad"] .light-dot { background: var(--bad); }
.light-name { font-weight: 700; font-size: 0.98rem; }
.light-state {
  grid-column: 2; font-family: var(--mono); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-vdim);
}
.light[data-state="ok"]  .light-state { color: var(--ok); }
.light[data-state="bad"] .light-state { color: var(--bad); }
.light-note { grid-column: 1 / -1; font-size: 0.84rem; color: var(--text-dim); margin-top: 0.15rem; }

.uprow {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.9rem 1.05rem; box-shadow: var(--shadow-sm);
}
.up-name { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.98rem; margin-bottom: 0.55rem; }
.up-state {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.14rem 0.5rem; border-radius: 999px; margin-left: auto; white-space: nowrap;
}
.up-state.ok   { background: var(--ok-bg);   color: var(--ok); }
.up-state.warn { background: var(--warn-bg); color: var(--warn); }
.up-state.bad  { background: var(--bad-bg);  color: var(--bad); }
.uptime-track { display: flex; gap: 2px; align-items: stretch; height: 30px; }
.ub { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--ok-bg); }
.ub.up { background: var(--ok); }
.ub.degraded { background: var(--warn); }
.ub.down { background: var(--bad); }
/* A day the probe never reported. Deliberately not green: an unwatched day is
   not a day that was fine. Same rule as the rain ledger's pre-ledger days. */
.ub.gap {
  background: repeating-linear-gradient(
    135deg, var(--border) 0 3px, transparent 3px 6px
  );
  opacity: 0.75;
}
/* A day we only partly watched. Same colour, less claim. */
.ub.thin { opacity: 0.42; }
.up-state:empty { display: none; }
.up-foot { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; }
.up-pct { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; color: var(--text); }
.up-note { font-size: 0.84rem; color: var(--text-vdim); }

.cmd { position: relative; }
.cmd pre {
  margin: 0; font-family: var(--mono); font-size: 0.86rem; line-height: 1.7;
  background: #15201a; color: #d7e6db;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.15rem; overflow-x: auto;
}
.cmd-copy {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1;
  font: inherit; font-size: 0.74rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.1); color: #eaf3ec;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px;
  padding: 0.28rem 0.65rem; cursor: pointer;
}
.cmd-copy:hover { background: rgba(255, 255, 255, 0.18); }

.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; }
.method-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 5px solid var(--accent); border-radius: var(--radius);
  padding: 1rem 1.15rem; box-shadow: var(--shadow-sm);
}
.method-item h3 { margin: 0 0 0.35rem; font-size: 1.02rem; }
.method-item p { margin: 0; color: var(--text-vdim); font-size: 0.9rem; }

@media (max-width: 560px) {
  .net-hero { padding: 1.8rem 1rem 1.5rem; }
  .net-fresh { flex-wrap: wrap; justify-content: center; }
}

/* Bayou Benchmark — fiber vs the "just use 5G/Starlink" suggestions */
.vs-wrap { overflow-x: auto; }
.vs {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.vs th, .vs td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.vs thead th {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 0.7rem; color: var(--text-vdim); background: var(--bg-card-hi); white-space: nowrap;
}
.vs tbody tr:last-child td { border-bottom: none; }
.vs .opt-name { font-weight: 700; color: var(--text); }
.vs .opt-sub { display: block; font-size: 0.76rem; color: var(--text-vdim); font-weight: 400; font-style: italic; }
.vs tr.current { background: var(--ok-bg); }
.vs tr.current .opt-name { color: var(--accent-deep); }
.vs .mono { font-family: var(--mono); white-space: nowrap; }
.vs td.ok { color: var(--ok); font-weight: 700; }
.vs td.warn { color: var(--warn); font-weight: 700; }
.vs td.bad { color: var(--bad); font-weight: 700; }

/* Can I trust this? — the BOC administrator's decorations */
.creds {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 5px solid var(--sign-yellow); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm);
}
.creds-name { font-weight: 800; font-size: 1.05rem; color: var(--text); }
.creds-role { color: var(--text-vdim); font-size: 0.84rem; margin-bottom: 0.7rem; }
.creds ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.creds li { padding-left: 1.7rem; position: relative; color: var(--text-dim); font-size: 0.92rem; }
.creds li::before { content: "🎖️"; position: absolute; left: 0; top: 0; }

/* OnlySwamp — the "we host a streaming empire out of the shack" disclosure.
   Watery teal to evoke the format without copying anyone's lockup. SFW. */
.onlyfins {
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 4px solid #0aa3c2; border-radius: var(--radius);
  padding: 1.2rem 1.25rem; box-shadow: var(--shadow-sm);
}
.of-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.of-logo { font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; color: #0883a0; }
.of-tag { font-size: 0.78rem; color: var(--text-vdim); }
.of-lead { margin: 0 0 0.85rem; color: var(--text-dim); }
.of-lead strong { color: #0883a0; }
.of-sub { margin: 0 0 0.45rem; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-vdim); }
.of-channels { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.45rem; }
.of-channels li { font-size: 0.93rem; color: var(--text); display: flex; gap: 0.55rem; align-items: baseline; }
.of-live { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; color: var(--bad); white-space: nowrap; }
.of-join { border-top: 1px solid var(--border); padding-top: 0.9rem; }
.of-join summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 0.86rem; color: #fff; background: #0aa3c2;
  border-radius: var(--radius-sm); padding: 0.45rem 1.05rem;
}
.of-join summary::-webkit-details-marker { display: none; }
.of-join summary:hover { background: #0883a0; }
.of-join[open] summary { margin-bottom: 0.6rem; }
.of-join p { margin: 0; color: var(--text-vdim); font-size: 0.9rem; max-width: 62ch; }
.of-tiers { list-style: none; margin: 0 0 0.7rem; padding: 0; display: grid; gap: 0.45rem; }
.of-tiers li { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; font-size: 0.9rem; }
.of-tier-name { font-weight: 700; color: var(--text); min-width: 6rem; }
.of-tier-price { font-family: var(--mono); font-weight: 700; color: #0883a0; white-space: nowrap; }
.of-tier-perk { color: var(--text-vdim); flex: 1 1 12rem; }

/* Bayou sighting — the witness-quote montage (Austin Powers homage) */
.sighting { list-style: none; margin: 0.65rem 0 0.3rem; padding: 0; display: grid; gap: 0.4rem; }
.sighting li { font-size: 0.92rem; color: var(--text); }
.s-who { font-weight: 700; color: var(--accent-deep); margin-right: 0.45rem; }

/* Verified-creator badge (Chad Brackish, OnlySwamp's top creator) */
.verified {
  display: inline-grid; place-items: center;
  width: 1.05em; height: 1.05em; border-radius: 50%;
  background: #0aa3c2; color: #fff; font-size: 0.7em; font-weight: 900;
  vertical-align: middle; margin-left: 0.15em; line-height: 1;
}

/* ───────────────────────── Power desk: GCEC SLA report card ───────────────────────── */
.gradecard {
  display: flex; gap: 1.2rem; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm);
}
.grade-badge {
  flex: 0 0 auto; display: grid; place-items: center; text-align: center;
  width: 108px; height: 108px; border-radius: 18px;
  background: var(--bg-card-hi); border: 2px solid var(--border-hi);
}
.grade-letter { font-family: var(--display); font-weight: 900; font-size: 3.2rem; line-height: 1; color: var(--text-dim); }
.grade-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.62rem; font-weight: 700; color: var(--text-vdim); margin-top: 0.25rem; }
/* Grade tint: A/A+ green, B blue (still good), C/D amber, F red. */
.gradecard[data-grade="A+"] .grade-badge,
.gradecard[data-grade="A"]  .grade-badge { background: var(--ok-bg);   border-color: var(--ok); }
.gradecard[data-grade="A+"] .grade-letter,
.gradecard[data-grade="A"]  .grade-letter { color: var(--ok); }
.gradecard[data-grade="B"]  .grade-badge { background: var(--info-bg); border-color: var(--info); }
.gradecard[data-grade="B"]  .grade-letter { color: var(--info); }
.gradecard[data-grade="C"]  .grade-badge,
.gradecard[data-grade="D"]  .grade-badge { background: var(--warn-bg); border-color: var(--warn); }
.gradecard[data-grade="C"]  .grade-letter,
.gradecard[data-grade="D"]  .grade-letter { color: var(--warn); }
.gradecard[data-grade="F"]  .grade-badge { background: var(--bad-bg);  border-color: var(--bad); }
.gradecard[data-grade="F"]  .grade-letter { color: var(--bad); }
.grade-meat { flex: 1 1 auto; min-width: 0; }
.grade-headline { margin: 0 0 0.3rem; font-size: 1.2rem; }
.grade-headline strong { font-family: var(--display); font-size: 1.5rem; color: var(--accent-deep); }
.grade-pct { color: var(--text-vdim); font-size: 0.95rem; font-weight: 600; margin-left: 0.2rem; }
.grade-note { margin: 0 0 0.7rem; color: var(--text-vdim); font-size: 0.9rem; line-height: 1.5; }
.grade-windows { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gw-chip {
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--bg-card-hi); color: var(--text-dim);
  border: 1px solid var(--border);
}
.gw-chip:hover { border-color: var(--border-hi); }
.gw-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent-deep); }
.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem; margin-top: 0.9rem;
}
.metric {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.85rem 0.95rem;
}
.metric-n { display: block; font-family: var(--display); font-weight: 800; font-size: 1.7rem; color: var(--text); }
.metric-l { display: block; margin-top: 0.2rem; color: var(--text-vdim); font-size: 0.82rem; line-height: 1.4; }
@media (max-width: 560px) {
  .gradecard { flex-direction: column; align-items: flex-start; }
}

/* ───────────────────────── Airspace desk: radar + ranked board ───────────────────────── */
.radar-wrap { text-align: center; }
.radar {
  width: 100%; max-width: 360px; height: auto; margin: 0 auto;
  display: block; background: #0f1a12; border-radius: var(--radius);
  border: 1px solid var(--border-hi); box-shadow: var(--shadow-sm);
}
.radar .ring { fill: none; stroke: rgba(120, 200, 150, 0.22); stroke-width: 1; }
.radar .radar-card { fill: rgba(150, 210, 175, 0.7); font: 700 11px var(--mono); text-anchor: middle; }
.radar-home { fill: var(--sign-yellow); stroke: #0f1a12; stroke-width: 1.5; }
.radar-note { color: var(--text-vdim); font-size: 0.82rem; margin: 0.6rem 0 0; }
/* Blips, colored by pecking-order tier. Helicopters render larger (see JS). */
.blip { stroke: rgba(15, 26, 18, 0.7); stroke-width: 0.5; }
.blip.heli { filter: drop-shadow(0 0 3px currentColor); }
.blip.t1 { fill: #ffd23f; color: #ffd23f; }   /* UH-60 — gold */
.blip.t2 { fill: #4ade80; color: #4ade80; }   /* Army helos — green */
.blip.t3 { fill: #2dd4bf; color: #2dd4bf; }   /* AF helos — teal */
.blip.t4 { fill: #60a5fa; color: #60a5fa; }   /* other helos — blue */
.blip.t5 { fill: #c084fc; color: #c084fc; }   /* mil fixed-wing — purple */
.blip.t6 { fill: #fb923c; color: #fb923c; }   /* Chairforce — orange */
.blip.t7 { fill: #94a3b8; color: #94a3b8; }   /* civilian — grey */

.ac-tier { margin-bottom: 1.1rem; }
.tier-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.tier-em { font-size: 1.1rem; }
.tier-name { font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.tier-count {
  margin-left: auto; font: 700 0.8rem var(--mono);
  background: var(--bg-card-hi); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.1rem 0.55rem; color: var(--text-dim);
}
.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.ac-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 4px solid var(--border-hi); border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}
.ac-card[data-tier="1"] { border-left-color: #e0a800; background: #fffbe9; }
.ac-card[data-tier="2"] { border-left-color: var(--ok); }
.ac-card[data-tier="3"] { border-left-color: #0d9488; }
.ac-card[data-tier="4"] { border-left-color: var(--info); }
.ac-card[data-tier="5"] { border-left-color: #9333ea; }
.ac-card[data-tier="6"] { border-left-color: #ea7317; }
.ac-card[data-tier="7"] { border-left-color: var(--border-hi); }
.ac-top { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.ac-em { font-size: 1rem; }
.ac-type { font-weight: 700; font-size: 0.96rem; }
.ac-cs { font: 600 0.78rem var(--mono); color: var(--text-vdim); margin-left: auto; }
.ac-meta { margin-top: 0.25rem; color: var(--text-dim); font-size: 0.85rem; }
.ac-foot { margin-top: 0.3rem; }
.ac-branch { font-size: 0.78rem; font-weight: 700; color: var(--accent-deep); }
.ac-guess { font-weight: 500; color: var(--text-vdim); }

.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; }
.tally-stat {
  text-align: center; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem 0.8rem;
}
.tally-n { display: block; font-family: var(--display); font-weight: 900; font-size: 2.2rem; color: var(--accent-deep); line-height: 1; }
.tally-l { display: block; margin-top: 0.35rem; color: var(--text-vdim); font-size: 0.82rem; line-height: 1.4; }

.pecking { margin: 0 0 1rem; padding-left: 1.3rem; }
.pecking li { margin: 0.35rem 0; line-height: 1.5; }
.pk-em { margin-right: 0.2rem; }

/* ───────────────────────── Weather desk: Swamp Tracker ───────────────────────── */
/* Hero tint by swamp level: cool blue (dry) → deep swamp green (full). */
.net-hero[data-swamp="0"] .net-word { color: var(--info); }
.net-hero[data-swamp="1"] .net-word { color: var(--ok); }
.net-hero[data-swamp="2"] .net-word { color: #5a8a2c; }
.net-hero[data-swamp="3"] .net-word { color: var(--warn); }
.net-hero[data-swamp="4"] .net-word { color: #b9560a; }
.net-hero[data-swamp="5"] .net-word { color: #2f6b3a; }

.swampmeter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.sm-seg {
  position: relative; height: 46px; border-radius: var(--radius-sm);
  background: var(--bg-card-hi); border: 1px solid var(--border);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
}
.sm-lab { font-size: 0.66rem; font-weight: 700; color: var(--text-vdim); text-align: center; line-height: 1.1; }
.sm-seg.is-on { border-color: transparent; }
.sm-seg.is-on .sm-lab { color: #fff; }
.sm-seg.is-on[data-i="0"] { background: #2f80c8; }
.sm-seg.is-on[data-i="1"] { background: #2f9e57; }
.sm-seg.is-on[data-i="2"] { background: #6fa32a; }
.sm-seg.is-on[data-i="3"] { background: #c08a12; }
.sm-seg.is-on[data-i="4"] { background: #c0610a; }
.sm-seg.is-on[data-i="5"] { background: #2f6b3a; }
.sm-seg.is-cur { outline: 2px solid var(--text); outline-offset: 1px; box-shadow: var(--shadow); }
.sm-seg.is-cur .sm-lab { font-size: 0.72rem; }

.wx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem; }
.wx-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 4px solid var(--border-hi); border-radius: var(--radius); padding: 0.9rem 1rem;
}
.wx-card[data-swamp="0"] { border-top-color: #2f80c8; }
.wx-card[data-swamp="1"] { border-top-color: #2f9e57; }
.wx-card[data-swamp="2"] { border-top-color: #6fa32a; }
.wx-card[data-swamp="3"] { border-top-color: #c08a12; }
.wx-card[data-swamp="4"] { border-top-color: #c0610a; }
.wx-card[data-swamp="5"] { border-top-color: #2f6b3a; }
.wx-card.offline { opacity: 0.7; }
.wx-card.backup { border-style: dashed; }
.wx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.wx-name { font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.wx-id { font: 600 0.72rem var(--mono); color: var(--text-vdim); }
.wx-offline { color: var(--text-vdim); font-size: 0.88rem; margin: 0.6rem 0 0; }
.wx-dew { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.5rem 0 0.2rem; }
.wx-dew-n { font-family: var(--display); font-weight: 900; font-size: 2.1rem; color: var(--accent-deep); line-height: 1; }
.wx-dew-l { font-size: 0.78rem; color: var(--text-vdim); }
.wx-spark { width: 100%; height: 34px; color: var(--accent); display: block; margin: 0.3rem 0 0; }
.wx-spark-l { font-size: 0.68rem; color: var(--text-vdim); margin-bottom: 0.3rem; }
.wx-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 0.8rem; margin-top: 0.3rem; }
.wx-row { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.85rem; border-bottom: 1px dotted var(--border); padding: 0.18rem 0; }
.wx-rl { color: var(--text-vdim); }
.wx-rv { font-weight: 600; color: var(--text); }

/* ───── Official Watering Decrees (weather page) ───── */
.dc-rainline { margin: 0 0 14px; font-size: 15px; color: #3d4a41; }
.dc-receipts { color: #6b776e; font-size: 13px; }
.dc-card .wx-head { align-items: center; }
.dc-default { border-color: #2f7a43; box-shadow: 0 0 0 1px #2f7a43 inset; }
.dc-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #2f7a43; margin-left: 6px; }
.dc-chip { font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; border: 1.5px solid; }
.dc-chip.water { color: #0b5aa5; border-color: #0b5aa5; background: #e8f2fc; }
.dc-chip.hold  { color: #2f7a43; border-color: #2f7a43; background: #eaf5ee; }
.dc-chip.watch { color: #8a6d1a; border-color: #b28c22; background: #faf3dd; }
.dc-decree { margin: 10px 0 12px; font-size: 15px; line-height: 1.45; }
.dc-motto { margin: 12px 0 0; font-size: 13px; color: #6b776e; font-style: italic; line-height: 1.4; }
.dc-fact { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: #3d4a41; }
.dc-fact strong { color: #19251c; }

/* ───── Decree meters (rain vs need, dataviz pass) ───── */
.dc-card.v-water { border-top: 3px solid #0b5aa5; }
.dc-card.v-hold  { border-top: 3px solid #2f7a43; }
.dc-card.v-watch { border-top: 3px solid #b28c22; }
.dc-meter { margin: 4px 0 12px; }
.dc-track { position: relative; height: 10px; border-radius: 5px; background: #e9e6da; overflow: visible; }
.dc-fill { height: 100%; border-radius: 5px 4px 4px 5px; background: #0b5aa5; min-width: 2px; transition: width .4s ease; }
.dc-tick { position: absolute; top: -3px; width: 2px; height: 16px; background: #19251c; border-radius: 1px; }
.dc-meter-cap { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12.5px; color: #62705f; }
.dc-tick-key { color: #19251c; font-size: 11px; white-space: nowrap; }


/* ───── Radar desk ───── */
.rd-wrap { border: 1px solid #e2ddcb; border-radius: 14px; overflow: hidden; background: #fff; }
.rd-map { position: relative; height: 440px; overflow: hidden; background: #eef1ec; }
.rd-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; }
.rd-layer { position: absolute; inset: 0; }
.rd-tile { position: absolute; width: 256px; height: 256px; user-select: none; -webkit-user-drag: none; }
.rd-base { filter: saturate(.55); }
.rd-frame { opacity: 0; transition: opacity .18s linear; pointer-events: none; }
.rd-frame.is-on { opacity: .82; }
.rd-pins { pointer-events: none; }
.rd-pin { position: absolute; transform: translate(-50%, -50%); }
.rd-dot { width: 12px; height: 12px; border-radius: 50%; background: #c8452a; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(200,69,42,.28); }
.rd-pin-l { font-size: 12px; font-weight: 700; color: #19251c; background: rgba(255,255,255,.88); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.rd-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid #e9e6da; background: #fcfcfb; }
.rd-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 999px; border: 1.5px solid #2f7a43; background: #fff; color: #2f7a43; cursor: pointer; }
.rd-btn:hover { background: #eaf5ee; }
.rd-scrub { flex: 1; accent-color: #0b5aa5; }
.rd-time { font-size: 13px; font-weight: 700; color: #19251c; font-variant-numeric: tabular-nums; min-width: 108px; text-align: right; }
.rd-progress { height: 3px; background: #e9e6da; }
.rd-progress-fill { height: 100%; width: 0; background: #0b5aa5; transition: width .2s linear; }
.rd-attrib { font-size: 12.5px; }

/* ───── Outlook strip ───── */
.fc-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 2px; background: #e9e6da; border: 1px solid #e2ddcb; border-radius: 14px; overflow: hidden; }
.fc-cell { background: #fff; padding: 12px 10px 10px; text-align: center; }
.fc-cell.night { background: #f7f7f3; }
.fc-name { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #62705f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-temp { font-size: 26px; font-weight: 700; color: #19251c; margin: 4px 0 2px; }
.fc-short { font-size: 12px; line-height: 1.3; color: #3d4a41; min-height: 32px; }
.fc-pop { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.fc-pop-track { flex: 1; height: 6px; border-radius: 3px; background: #e7eef7; overflow: hidden; }
.fc-pop-fill { height: 100%; border-radius: 3px; background: #0b5aa5; }
.fc-pop-n { font-size: 11px; font-weight: 700; color: #62705f; font-variant-numeric: tabular-nums; }

/* ───── Rain ledger ───── */
.rh-chart { border: 1px solid #e2ddcb; border-radius: 14px; background: #fff; padding: 16px 14px 10px; }
.rh-bars { display: flex; align-items: flex-end; gap: 6px; }
.rh-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rh-slot { position: relative; width: 100%; max-width: 34px; height: 130px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid #e9e6da; }
.rh-bar { width: 100%; background: #7fb2dd; border-radius: 4px 4px 0 0; min-height: 0; transition: height .35s ease; }
.rh-bar.is-top { background: #0b5aa5; }
.rh-val { position: absolute; top: -18px; font-size: 11.5px; font-weight: 700; color: #19251c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rh-x { font-size: 11px; color: #62705f; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .rh-x { font-size: 9.5px; } .rd-map { height: 320px; } }

.rd-tile-2x { width: 512px; height: 512px; image-rendering: auto; }
.rd-pin .rd-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.rd-pin-l { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }

/* tagline + radar legend + ledger empty slots */
.wx-tagline { max-width: 62ch; margin: 14px auto 0; font-size: 14.5px; line-height: 1.5; color: #62705f; }
.rd-legend { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap; }
.rd-leg-l { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #62705f; }
.rd-leg-ramp { width: 190px; height: 9px; border-radius: 5px; border: 1px solid #e2ddcb;
  background: linear-gradient(90deg, #9fd3f0 0%, #3aa3dc 18%, #2f9e52 38%, #d8c62b 58%, #e08a1e 74%, #cf3b26 88%, #a3379b 100%); }
.rd-leg-note { font-size: 12px; color: #8a948a; }
.rh-none { width: 100%; max-width: 34px; height: 3px; background: #eeece2; border-radius: 2px; }
.rh-bar.is-zero { min-height: 0; }
.rh-x.is-muted { color: #b6bdb4; }

/* ───── Swamp meter: validated single-hue ordinal ramp ───── */
.sm-seg[data-i="0"].is-on { background: #8fc072; }
.sm-seg[data-i="1"].is-on { background: #72aa55; }
.sm-seg[data-i="2"].is-on { background: #55953c; }
.sm-seg[data-i="3"].is-on { background: #3c7f31; }
.sm-seg[data-i="4"].is-on { background: #286628; }
.sm-seg[data-i="5"].is-on { background: #144d1f; }
.sm-seg[data-i="0"].is-on .sm-lab,
.sm-seg[data-i="1"].is-on .sm-lab { color: #14240f; }
.sm-seg[data-i="2"].is-on .sm-lab,
.sm-seg[data-i="3"].is-on .sm-lab,
.sm-seg[data-i="4"].is-on .sm-lab,
.sm-seg[data-i="5"].is-on .sm-lab { color: #fff; }
.sm-seg.is-cur { box-shadow: 0 0 0 2px #fcfcfb inset, 0 0 0 4px #19251c inset; }

.rh-slot { border-top: 1px solid #f1efe6; }

.thanks-line { font-size: 16px; line-height: 1.7; }
.thanks-line a { text-decoration: none; border-bottom: 1.5px solid #2f7a43; }
.thanks-line a:hover { background: #eaf5ee; }

/* Swampside HOA advisory banner */
.dc-advisory { border-left: 5px solid #b6bdb4; background: #fff; border-radius: 10px;
  padding: 14px 16px; margin: 0 0 14px; }
.dc-advisory:empty { display: none; }
.dc-advisory[data-level="water"] { border-left-color: #0b5aa5; background: #f2f8fd; }
.dc-advisory[data-level="hold"]  { border-left-color: #2f7a43; background: #f1f8f3; }
.dc-adv-h { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: #19251c; }
.dc-adv-n { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: #3d4a41; }

/* compact decree card */
.dc-big { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 8px; }
.dc-big-n { font-size: 34px; font-weight: 700; color: #19251c; line-height: 1; }
.dc-big-l { font-size: 12.5px; color: #62705f; }
.dc-plant { margin: 10px 0 0; font-size: 12.5px; color: #62705f; }
.dc-score { display: inline-flex; gap: 3px; vertical-align: middle; }
.dc-score i { width: 9px; height: 9px; border-radius: 2px; background: #e5e2d6; display: inline-block; }
.dc-score i.on { background: #2f7a43; }
.dc-score-l { margin-left: 7px; font-size: 12px; color: #62705f; }
.dc-adv-n { display: none; }

/* ───── breaking-news crawl ───── */
.tick { display: flex; align-items: stretch; background: #19251c; color: #f4f1e8;
  overflow: hidden; border-bottom: 3px solid #f4c20d; }
.tick-badge { flex: none; display: flex; align-items: center; padding: 0 14px;
  background: #c8452a; color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; }
.tick-view { flex: 1; overflow: hidden; position: relative; }
.tick-run { display: inline-flex; white-space: nowrap; padding: 9px 0;
  font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  animation: tickslide 40s linear infinite; will-change: transform; }
.tick:hover .tick-run { animation-play-state: paused; }
@keyframes tickslide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tick-run { animation: none; white-space: normal; padding: 9px 12px; }
}

/* dog alert */
.dog-alert { border-left: 5px solid #b28c22; background: #fdf8e8; border-radius: 10px;
  padding: 14px 16px; margin: 0 0 14px; }
.dog-alert:empty { display: none; }
.dog-alert[data-level="both"] { border-left-color: #c8452a; background: #fdf0ed; }
.dog-h { margin: 0; font-size: 17px; font-weight: 700; color: #19251c; }
.dog-emoji { font-size: 19px; }
.dog-n { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: #3d4a41; }
/* K-9 Sedation Schedule: hourly thunder bars + the dose pin */
.dog-chart { background: #fff; border: 1px solid #e4e2d6; border-radius: 10px;
  padding: 12px 14px 10px; margin: 0 0 14px; }
.dogc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dogc-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #62705f; margin-right: auto; }
.dogc-chip { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.dogc-dose { background: #eef4ee; color: #2c5c34; border: 1px solid #bcd4be; }
.dogc-dose.now { background: #2c5c34; color: #fff; border-color: #2c5c34; }
.dogc-storm { background: #fdf0ed; color: #a33518; border: 1px solid #eac2b6; }
.dogc-strip { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
.dogc-cell { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.dogc-pin { font-size: 13px; line-height: 1; height: 16px; }
.dogc-bar { width: 100%; max-width: 22px; flex: 1; display: flex; align-items: flex-end; background: #f2f1ea; border-radius: 4px; overflow: hidden; }
.dogc-fill { width: 100%; background: #8fb0cf; border-radius: 4px 4px 0 0; }
.dogc-cell.thunder .dogc-fill { background: #d98324; }
.dogc-cell.storm .dogc-fill { background: #c8452a; }
.dogc-cell.dose .dogc-bar { outline: 2px solid #2c5c34; outline-offset: 1px; }
.dogc-hr { font-size: 10px; font-weight: 700; color: #8b937f; height: 14px; margin-top: 3px; white-space: nowrap; }
.dogc-note { margin-top: 8px; }

/* Cinder's ranking on each grass card */
.dc-cinder { margin-top: 12px; padding-top: 11px; border-top: 1px solid #eeece2; }
.dc-cinder-rank { display: inline-block; font-size: 13px; font-weight: 800; color: #fff;
  background: #7a5c33; border-radius: 999px; padding: 1px 9px; vertical-align: middle; }
.dc-cinder-t { margin-left: 7px; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #7a5c33; }
.dc-cinder-n { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: #62705f; }

/* ───── Swamp's Most Wanted ───── */
.mw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
.mw-card { background: #fff; border: 1px solid #e2ddcb; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; }
.mw-photo { aspect-ratio: 3 / 2; overflow: hidden; background: #eceadf; border-bottom: 3px solid #c8452a; }
.mw-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-body { padding: 13px 15px 16px; }
.mw-name { margin: 0; font-size: 18px; font-weight: 800; color: #19251c; letter-spacing: -.01em; }
.mw-latin { margin: 1px 0 9px; font-size: 12.5px; font-style: italic; color: #8a948a; }
.mw-id, .mw-ctl { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: #3d4a41; }
.mw-ctl { margin-bottom: 0; }
.mw-id strong, .mw-ctl strong { color: #19251c; }
.mw-fine { font-size: 13px; }
.mw-credit { font-size: 11.5px; color: #8a948a; }

/* ───── Most Wanted: the poster tier ─────
   Booking-photo treatment for the three headline offenders. Reads as a paper
   notice pinned to a corkboard: cream stock, heavy ink rules, a mono placard
   under each subject and a red AT LARGE stamp. Light theme only, per house rule. */
.mwp-head { margin: 18px 0 14px; padding: 12px 10px 13px; text-align: center;
  background: #fdfbf2; border: 2px solid #1c1a14; border-radius: 6px; box-shadow: var(--shadow-sm); }
.mwp-agency { margin: 0; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .16em; color: #6a6555; }
.mwp-title { margin: 4px 0 3px; font-family: var(--display); font-size: clamp(30px, 7vw, 52px);
  font-weight: 900; line-height: .95; text-transform: uppercase; letter-spacing: .02em; color: #14120c;
  border-top: 2px solid #1c1a14; border-bottom: 2px solid #1c1a14; padding: 6px 0 4px; }
.mwp-sub { margin: 7px 0 0; font-size: 13px; color: #6a6555; }

/* Four subjects, so a 2x2 board rather than a 3-up with an orphan on row two.
   Bigger posters too, which is what a wanted notice wants to be. */
.mwp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .mwp-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.mwp-card { display: flex; flex-direction: column; background: #fdfbf2; border: 2px solid #1c1a14;
  border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); }

.mwp-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: #ded9c6; border-bottom: 2px solid #1c1a14; }
.mwp-shot img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.42) contrast(1.12) saturate(.9); }
/* height-chart ticks down the left edge, the way a booking wall is ruled */
.mwp-shot::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 26px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(253,251,242,.62), rgba(253,251,242,.30)),
    repeating-linear-gradient(to bottom, rgba(28,26,20,.55) 0 1px, transparent 1px 26px);
  border-right: 1px solid rgba(28,26,20,.35); }

.mwp-stamp { position: absolute; top: 12px; right: 10px; z-index: 2; transform: rotate(7deg);
  font-family: var(--display); font-size: 15px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .1em; color: #a3271c; background: rgba(253,251,242,.9);
  border: 2.5px solid #a3271c; border-radius: 3px; padding: 3px 12px 2px; }

.mwp-placard { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 5px 10px 5px 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: #fdfbf2; background: rgba(20, 18, 12, .86); }

.mwp-sheet { padding: 14px 16px 17px; }
.mwp-name { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .01em; color: #14120c; }
.mwp-latin { margin: 1px 0 12px; font-size: 12.5px; font-style: italic; color: #7d7768; }

.mwp-rap { display: grid; grid-template-columns: 104px 1fr; gap: 7px 13px; margin: 0; }
.mwp-rap dt { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: #8a8271; padding-top: 3px; }
.mwp-rap dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: #3a382e; }
.mwp-rap dd em { font-style: italic; }

.mwp-note { margin-top: 14px; font-size: 13px; }
.mwp-also { margin: 26px 0 12px; font-family: var(--display); font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: #6a6555; }

@media (max-width: 460px) {
  .mwp-rap { grid-template-columns: 1fr; gap: 3px 0; }
  .mwp-rap dt { padding-top: 9px; }
  .mwp-stamp { font-size: 13px; padding: 2px 9px 1px; }
}
/* grass photo on each face-off card */
.dc-photo { margin: -2px -2px 10px; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: #eceadf; }
.dc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ───── Dispatch ───── */
.dispatch { display: grid; gap: 18px; }
.dsp { background: #fff; border: 1px solid #e2ddcb; border-radius: 14px; padding: 22px 24px; }
.dsp-kicker { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #c8452a; }
.dsp-head { margin: 0 0 4px; font-size: 25px; line-height: 1.2; letter-spacing: -.015em; color: #19251c; }
.dsp-byline { margin: 0 0 14px; font-size: 12.5px; color: #8a948a; }
.dsp p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: #2f3a33; }
.dsp p:last-child { margin-bottom: 0; }
.dsp-pull { border-left: 4px solid #f4c20d; padding-left: 14px; font-style: italic; color: #4a564d; }