/* RailWait: a sunny street in Miami Springs. Cream stucco, school-bus yellow, and a road
   sign's yellow disc and black X. Red and green are kept for one job: the crossing's status. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fbf6ec;
  --surface: #ffffff;
  --surface-2: #f6efe0;
  --text: #1f2f3a;
  --muted: #566571;
  --border: #eadfcb;
  --sun: #f6b81f;
  --sun-strong: #e5a50a;
  --on-sun: #1f2f3a;
  --blocked: #b3261e;
  --clear: #1b7247;
  --data: #2a7a9b;
  --heat-empty: #f2eadb;
  --heat-low: #eaf3f7;
  --focus: #1f2f3a;
  --shadow: 0 1px 2px rgba(74, 52, 16, 0.06), 0 10px 28px rgba(74, 52, 16, 0.06);

  /* The status plate stays the same in both themes, like a real sign. */
  --plate-blocked: #b3261e;
  --plate-clear: #1b7247;
  --plate-unknown: #46586a;

  /* The street scene. */
  --sky-a: #a9def2;
  --sky-b: #fff1cf;
  --sun-disc: #ffd257;
  --sun-glow: rgba(255, 210, 87, 0.35);
  --cloud: #ffffff;
  --lawn-far: #a6d08a;
  --lawn: #8fc476;
  --hedge: #6fa862;
  --stucco: #f7e8d0;
  --stucco-shade: #ecd8b8;
  --roof: #c9623b;
  --door: #7a4a2b;
  --window: #7fc4d8;
  --shutter: #2f7f8c;
  --trunk: #7d5a3c;
  --leaf: #5f9e57;
  --flame: #e4572e;
  --flame-light: #f58a3c;
  --ballast: #cfc2a9;
  --tie: #8d7054;
  --rail: #55606b;
  --road: #626c77;
  --road-panel: #76808a;
  --paint-white: #f5f1e6;
  --paint-yellow: #f6c33a;
  --post: #c3ccd3;
  --post-dark: #2a3640;
  --buck: #ffffff;
  --lamp-off: #3c464f;
  --lamp-on: #ff4b3a;
  --veil: rgba(246, 240, 228, 0.58);
  --train-nose: #24405c;
  --train-stripe: #f6b81f;
  --train-a: #2f8290;
  --train-b: #d29a2c;
  --train-c: #84613f;
  --car: #2f7f8c;
  --car-glass: #bfe3ec;

  --radius: 20px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12171d;
    --surface: #1b222a;
    --surface-2: #232c35;
    --text: #f4efe6;
    --muted: #b1bbc4;
    --border: #2f3944;
    --blocked: #ff8a7a;
    --clear: #7bd6a2;
    --data: #4fa3c7;
    --heat-empty: #27303a;
    --heat-low: #27303a;
    --focus: #f4efe6;
    --shadow: none;

    --sky-a: #1d2c4f;
    --sky-b: #e59a6e;
    --sun-disc: #f6e7bf;
    --sun-glow: rgba(246, 231, 191, 0.16);
    --cloud: #55688a;
    --lawn-far: #3f6650;
    --lawn: #35594a;
    --hedge: #2b4b3e;
    --stucco: #b9a68f;
    --stucco-shade: #a2907a;
    --roof: #83452f;
    --door: #4a3020;
    --window: #ffd98a;
    --shutter: #2a5560;
    --trunk: #4d3a2a;
    --leaf: #2f5a46;
    --flame: #a8432a;
    --flame-light: #c9622f;
    --ballast: #7d7464;
    --tie: #57473a;
    --rail: #2d353d;
    --road: #3a434c;
    --road-panel: #4b555f;
    --post: #8c97a0;
    --buck: #e6e1d6;
    --veil: rgba(18, 23, 29, 0.55);
    --car-glass: #5d8796;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #12171d;
  --surface: #1b222a;
  --surface-2: #232c35;
  --text: #f4efe6;
  --muted: #b1bbc4;
  --border: #2f3944;
  --blocked: #ff8a7a;
  --clear: #7bd6a2;
  --data: #4fa3c7;
  --heat-empty: #27303a;
  --heat-low: #27303a;
  --focus: #f4efe6;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { text-wrap: balance; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 8px;
}

.page {
  max-width: 680px;
  margin: 0 auto;
  padding-block: max(16px, env(safe-area-inset-top)) 44px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* --- masthead --- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.brand-mark { width: 38px; height: 38px; flex: none; }

.brand-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

.place {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.demo-note {
  margin: 14px 0 0;
  padding: 9px 14px;
  border: 1px dashed var(--muted);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* --- the status: the answer to the only question most visitors have --- */

.signal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 14px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--plate-unknown);
  color: #fff;
  box-shadow: var(--shadow);
  transition: background-color 0.3s ease;
}

.signal[data-state="blocked"] { background: var(--plate-blocked); }
.signal[data-state="clear"] { background: var(--plate-clear); }

.signal-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 22px 16px;
  min-width: 0;
}

.eyebrow {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.status-word {
  margin: 2px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3.4rem, 17vw, 4.6rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.signal[data-state="unknown"] .status-word,
.signal[data-state="loading"] .status-word { font-size: clamp(2.3rem, 11vw, 3.2rem); }

.status-detail {
  margin: 6px 0 0;
  font-size: 1.15rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.status-detail:empty { display: none; }

.signal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 14px;
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.signal-foot:has(span:first-child:empty):has(span:last-child:empty) { display: none; }

.scene-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  min-width: 0;
  max-width: 100%;
}

.scene { display: block; width: 100%; height: 100%; }

.sky-a { stop-color: var(--sky-a); }
.sky-b { stop-color: var(--sky-b); }
.sun-disc { fill: var(--sun-disc); }
.sun-glow { fill: var(--sun-glow); }
.cloud { fill: var(--cloud); opacity: 0.92; }
.lawn-far { fill: var(--lawn-far); }
.lawn { fill: var(--lawn); }
.hedge { fill: var(--hedge); }
.stucco { fill: var(--stucco); }
.stucco-shade { fill: var(--stucco-shade); }
.roof { fill: var(--roof); }
.door { fill: var(--door); }
.window { fill: var(--window); }
.shutter { fill: var(--shutter); }
.trunk { fill: none; stroke: var(--trunk); stroke-linecap: round; }
.leaf { fill: var(--leaf); }
.flame { fill: var(--flame); }
.flame-light { fill: var(--flame-light); }
.ballast { fill: var(--ballast); }
.tie { fill: var(--tie); }
.rail { fill: var(--rail); }
.road { fill: var(--road); }
.road-panel { fill: var(--road-panel); }
.paint-white { fill: var(--paint-white); }
.paint-yellow { fill: var(--paint-yellow); }
.post { fill: var(--post); }
.post-dark { fill: var(--post-dark); }
.buck { fill: var(--buck); stroke: var(--post-dark); stroke-width: 1.4; }
.lamp-off { fill: var(--lamp-off); }
.lamp-on { fill: var(--lamp-on); opacity: 0; }
.arm-red { fill: #d3392c; }
.arm-white { fill: #fbf7ee; }
.t-nose { fill: var(--train-nose); }
.t-stripe { fill: var(--train-stripe); }
.t-a { fill: var(--train-a); }
.t-b { fill: var(--train-b); }
.t-c { fill: var(--train-c); }
.t-dark { fill: #1e2730; }
.t-glass { fill: #bfe3ec; }
.t-rib { fill: rgba(0, 0, 0, 0.13); }
.bus { fill: #f6b81f; }
.bus-ink { fill: #1e2730; }
.bus-glass { fill: #cdeaf2; }
.bus-red { fill: #d3392c; }
.bus-amber { fill: #f28a22; }
.bus-text { fill: #1e2730; font: 800 7.6px var(--body); letter-spacing: 0.08em; text-anchor: middle; }
.tire { fill: #1e2730; }
.car { fill: var(--car); }
.car-glass { fill: var(--car-glass); }
.taillight { fill: #d3392c; }
.plate { fill: #fbf7ee; }
.plate-text { fill: #1e2730; font: 800 8px var(--body); letter-spacing: 0.06em; text-anchor: middle; }
.stick { fill: #ffffff; stroke: #ffffff; stroke-width: 1.1; stroke-linecap: round; }
.veil { fill: var(--veil); opacity: 1; }
.q-disc { fill: var(--surface); }
.q-mark { fill: var(--text); font: 600 42px var(--display); text-anchor: middle; }

/* What the scene shows for each status. Before anything is known: gates up, nothing moving. */
.train { transform: translateX(660px); transition: transform 1.8s cubic-bezier(0.22, 0.7, 0.3, 1); }
.arm { transform-box: view-box; transition: transform 1.2s ease; }
.arm-left { transform-origin: 208px 182px; transform: rotate(-76deg); }
.arm-right { transform-origin: 352px 182px; transform: rotate(76deg); }
.queue, .passing { opacity: 0; transition: opacity 0.5s ease; }
.veil, .unknown-mark { transition: opacity 0.4s ease; }

[data-state="blocked"] .train { transform: translateX(0); }
[data-state="blocked"] .arm-left,
[data-state="blocked"] .arm-right { transform: rotate(0deg); }
[data-state="blocked"] .queue { opacity: 1; }
[data-state="clear"] .passing { opacity: 1; }
[data-state="blocked"] .veil,
[data-state="clear"] .veil,
[data-state="blocked"] .unknown-mark,
[data-state="clear"] .unknown-mark,
[data-state="loading"] .unknown-mark { opacity: 0; }

/* The two lamps flash in turn, as the real signal does. */
[data-state="blocked"] .lamp-on { animation: lamp 1.5s steps(1, end) infinite; }
[data-state="blocked"] .lamp-b { animation-delay: -0.75s; }

@keyframes lamp {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .signal, .train, .arm, .queue, .passing, .veil, .unknown-mark { transition: none; }
  [data-state="blocked"] .lamp-on { animation: none; opacity: 1; }
}

/* --- layout --- */

.quick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.primary, .facts {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

@media (min-width: 900px) {
  .page { max-width: 1120px; padding-block-start: 26px; }
  .signal { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); min-height: 340px; }
  .signal-text { padding: 30px 34px 22px; }
  .scene-wrap { aspect-ratio: auto; }
  .scene { position: absolute; inset: 0; }
  .status-word { font-size: 6.2rem; }
  .signal[data-state="unknown"] .status-word,
  .signal[data-state="loading"] .status-word { font-size: 4rem; }
  .status-detail { font-size: 1.3rem; }
  .quick { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .quick .sponsor { grid-column: 1 / -1; }
  .columns { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
}

/* --- neighbors and alerts --- */

.mini-title {
  display: block;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
}

.crowd, .alerts-card {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.crowd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
}

.crowd > div { min-width: min(100%, 220px); flex: 1 1 220px; }
.crowd p { margin: 2px 0 0; color: var(--muted); }

.btn {
  display: inline-block;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-sun { background: var(--sun); color: var(--on-sun); }
.btn-sun:hover { background: var(--sun-strong); }

.alerts-card {
  display: grid;
  gap: 2px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.alerts-card:hover { border-color: var(--sun-strong); }
.alerts-card .why { color: var(--muted); font-size: 0.95rem; }
.alerts-card .go { margin-top: 6px; font-weight: 700; }

.sponsor {
  margin: 0;
  padding: 11px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 0.95rem;
}

.sponsor a { color: inherit; font-weight: 600; }

/* --- panels --- */

.panel {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 12px;
}

.panel h2, .family h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.panel-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.panel-lead { margin: 4px 0 0; color: var(--muted); font-size: 0.97rem; }

.note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.note:empty { display: none; }

.text-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--text);
  font-size: 0.97rem;
  font-weight: 600;
}

/* --- today's strip --- */

.rail {
  position: relative;
  height: 32px;
  margin-top: 14px;
  border-radius: 10px;
  background: var(--heat-empty);
  overflow: hidden;
}

.rail-future {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--border) 5px 6px);
  opacity: 0.8;
}

.rail-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 3px;
  background: var(--blocked);
  border-radius: 2px;
}

.rail-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--text);
}

.rail-hours {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}

.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 560px) {
  .stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stats div { min-width: 0; }

.stats dt, .fact-list dt {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.stats dd {
  margin: 1px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.85rem;
  line-height: 1.12;
  font-variant-numeric: lining-nums tabular-nums;
}

.stats .stat-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.3;
}

.more { margin-top: 12px; }

.more summary {
  padding: 8px 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 600;
}

.today-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.today-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 0.97rem;
  font-variant-numeric: tabular-nums;
}

.today-list li:first-child { border-top: none; }
.today-list .length { color: var(--muted); white-space: nowrap; }
.today-list .ongoing .length { color: var(--blocked); font-weight: 600; }
.today-list .empty { color: var(--muted); justify-content: flex-start; }

/* --- usual times heatmap --- */

.heatmap {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 32px repeat(24, minmax(0, 1fr));
  gap: 2px;
  font-size: 0.72rem;
  color: var(--muted);
}

.heatmap .day { align-self: center; font-size: 0.76rem; }

.heatmap .cell {
  aspect-ratio: 1 / 1.25;
  border-radius: 3px;
  background: var(--heat-empty);
}

.heatmap .cell.now { outline: 2px solid var(--text); outline-offset: -1px; }

.heatmap .hour { white-space: nowrap; overflow: visible; }

.heat-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.heat-legend .swatch { width: 14px; height: 14px; border-radius: 3px; }

/* --- federal record --- */

.record-lead { margin: 8px 0 0; font-size: 1.05rem; }

.chart-title {
  margin: 20px 0 0;
  font-size: 0.98rem;
  font-weight: 600;
}

.bars {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: end;
  height: 128px;
  margin-top: 8px;
  border-bottom: 1px solid var(--border);
}

.bar-slot {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 1px;
}

.bar {
  width: 100%;
  max-width: 24px;
  background: var(--data);
  border-radius: 4px 4px 0 0;
}

.bar-peak {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bars-hours {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
}

.numbers {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
}

.numbers th, .numbers td {
  padding: 4px 6px;
  border-top: 1px solid var(--border);
  text-align: left;
  font-weight: 400;
}

.numbers td.count { text-align: right; }

/* --- facts and urgent help --- */

.fact-list { margin: 10px 0 0; }

.fact-list div {
  padding: 9px 0;
  border-top: 1px solid var(--border);
}

.fact-list div:first-child { border-top: none; padding-top: 2px; }

.fact-list dd {
  margin: 1px 0 0;
  font-size: 0.98rem;
}

.urgent { border: 2px solid var(--blocked); }
.urgent h2 { font-size: 1.3rem; }
.urgent p { margin: 6px 0 14px; font-size: 0.98rem; }

.call-btn {
  display: block;
  padding: 13px 16px;
  border-radius: 999px;
  background: var(--plate-blocked);
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

/* --- around the tracks with your family --- */

.family {
  margin-top: 14px;
  padding: 24px 22px;
  border-radius: 26px;
  background: var(--surface-2);
}

.family-lead { margin: 6px 0 0; max-width: 62ch; color: var(--muted); }

.tips {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
}

@media (min-width: 640px) { .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; } }
@media (min-width: 1000px) { .tips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tips li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.98rem;
}

.tips svg { width: 30px; height: 30px; }
.tips strong { display: block; margin-bottom: 1px; }

/* --- hover detail for charts --- */

.tip {
  position: fixed;
  z-index: 20;
  max-width: 230px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.84rem;
  line-height: 1.3;
  pointer-events: none;
}

[data-tip] { cursor: default; }

/* --- footer --- */

.footer {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}

.footer p { margin: 0 0 8px; }
.footer strong { color: var(--text); }
.footer .made { font-family: var(--display); font-size: 1.12rem; font-weight: 600; color: var(--text); }
.footer .fine { font-size: 0.84rem; }

@media (max-width: 420px) {
  .heatmap { grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 1px; }
  .heatmap .hour { font-size: 0.62rem; }
  .stats dd { font-size: 1.55rem; }
  .panel { padding: 16px; }
  .family { padding: 20px 16px; }
}

/* --- the "Stuck at the crossing" page --- */

.report-page { max-width: 640px; }

.safety {
  margin: 16px 0 0;
  padding: 11px 15px;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 0.98rem;
}

.report { margin-top: 14px; display: grid; gap: 12px; }

.report-btn {
  width: 100%;
  min-height: 44vh;
  max-height: 400px;
  border: 0;
  border-radius: 26px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px 18px;
  text-align: center;
  font: inherit;
  cursor: pointer;
  background: var(--plate-blocked);
  color: #fff;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.08s ease;
}

.report-btn:active { transform: scale(0.985); }
.report-btn:disabled { opacity: 0.6; cursor: wait; }
.report-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.report[data-state="stuck"] .report-btn { background: var(--plate-clear); }
.report[data-state="done"] .report-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); cursor: default; }

.report-big {
  font-family: var(--display);
  font-size: clamp(2.5rem, 11vw, 3.4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.report-sub { font-size: 1.12rem; font-weight: 500; font-variant-numeric: tabular-nums; }

.report-after { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.text-btn { background: none; border: 0; padding: 4px 0; color: var(--muted); text-decoration: underline; font: inherit; font-size: 0.97rem; cursor: pointer; }
.confirm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.97rem; }
.danger-btn { background: var(--plate-blocked); color: #fff; border: 0; border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.plain-btn { display: inline-block; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.plain-btn:hover { border-color: var(--sun-strong); }

.report-msg { margin: 10px 2px 0; min-height: 1.2em; font-size: 0.97rem; color: var(--blocked); }
.activity { margin: 8px 2px 0; color: var(--muted); font-size: 0.98rem; }
#turnstile { margin-top: 8px; }

/* --- page not found --- */

.lost { margin-top: 18px; padding: 34px 26px; text-align: center; }
.lost h1 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 10vw, 3.6rem); letter-spacing: -0.02em; line-height: 1.05; }
.lost p { margin: 8px 0 18px; color: var(--muted); }