/* 2026 time-zone check: a wall of six station clocks on the graphite field, then the reading sheet.
   A clock this browser gets wrong shows a second hour hand in rust-on-field: the hour it believes. */
.tzc-page main { max-width: none; padding: 0; }
article.tzc { margin: 0; padding: 0; max-width: none; }

/* the field */
.tzc-field { background: var(--oa-ground); color: var(--oa-paper); padding: var(--wp-8) var(--wp-gutter) var(--wp-12); }
.tzc-field > * { max-width: var(--wp-page); margin-inline: auto; }
.tzc-head { display: grid; gap: var(--wp-4); }
/* at desktop the title and the verdict share a row, so the clocks rise into the first screen */
.tzc-top { display: grid; gap: 0; }
@media (min-width: 72rem) { .tzc-top { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--wp-12); align-items: end; } .tzc-top .tzc-verdict { margin-top: 0; } }
.tzc-eyebrow { margin: 0; font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--oa-muted); }
.tzc h1 { margin: 0; max-width: 17ch; color: var(--oa-paper); font: 600 clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem)/1 var(--wp-font-display); letter-spacing: -.02em; text-wrap: balance; }
.tzc-lede { margin: 0; max-width: 40em; font-size: var(--wp-text-lede); line-height: 1.5; color: var(--oa-paper); }

/* the verdict: one sentence, the largest thing after the title */
.tzc-verdict { margin-top: var(--wp-8); padding-left: var(--wp-4); border-left: 6px solid var(--oa-control); min-height: 3.5rem; }
.tzc-verdict[data-tone="ok"] { border-color: var(--oa-blue); }
.tzc-verdict[data-tone="off"] { border-color: var(--tzc-off); }
.tzc-verdict-h { margin: 0; max-width: 34ch; font: 600 clamp(1.375rem, 1.1rem + 1.2vw, 2rem)/1.2 var(--wp-font-display); text-wrap: balance; }
.tzc-verdict-sub { margin: var(--wp-2) 0 0; max-width: 46em; color: var(--oa-muted); }
.tzc-verdict-sub:empty { display: none; }

/* the wall */
.tzc { --tzc-off: #f0a27c; }
.tzc-wall { list-style: none; margin: var(--wp-8) auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp-8) var(--wp-4); }
.tzc-wall:focus { outline: none; }
@media (min-width: 46rem) { .tzc-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp-8) var(--wp-6); } }
@media (min-width: 72rem) { .tzc-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--wp-6); } }
.tzc-clock { display: grid; align-content: start; gap: var(--wp-3); min-height: 15rem; }
.tzc-face { display: block; width: 100%; max-width: 11rem; aspect-ratio: 1; margin-inline: auto; overflow: visible; }
.tzc-rim { fill: var(--oa-ground-2); stroke: var(--oa-line); stroke-width: 1.5; }
.tzc-clock[data-state="old"] .tzc-rim, .tzc-clock[data-state="other"] .tzc-rim { stroke: var(--tzc-off); stroke-width: 2.5; }
.tzc-tick { stroke: var(--oa-control); stroke-width: 1; }
.tzc-tick-h { stroke: var(--oa-paper); stroke-width: 2.4; }
.tzc-hand { stroke-linecap: round; }
.tzc-hour { stroke: var(--oa-paper); stroke-width: 4.5; }
.tzc-minute { stroke: var(--oa-paper); stroke-width: 2.6; }
.tzc-second { stroke: var(--oa-blue); stroke-width: 1; }
.tzc-ghost { stroke: var(--tzc-off); stroke-width: 4.5; stroke-dasharray: 3 3.2; }
/* the lost hour: the wedge between the hour this browser believes and the real one */
.tzc-wedge { fill: var(--tzc-off); fill-opacity: .36; }
.tzc-pin { fill: var(--oa-blue); }
.tzc-off { display: none; }

.tzc-cap { display: grid; gap: var(--wp-1); }
.tzc-city { margin: 0; font: 600 1.25rem/1.2 var(--wp-font-display); }
.tzc-region { margin: 0; font-size: var(--wp-text-meta); color: var(--oa-muted); }
.tzc-zone { margin: 0; font: 400 var(--wp-text-cite)/1.4 var(--wp-font-mono); color: var(--oa-muted); overflow-wrap: anywhere; }
.tzc-times { margin: var(--wp-2) 0 0; display: grid; gap: 2px; }
.tzc-t { display: flex; justify-content: space-between; gap: var(--wp-2); align-items: baseline; border-top: 1px solid var(--oa-line); padding-top: 2px; }
.tzc-t dt { font-size: var(--wp-text-meta); color: var(--oa-muted); }
.tzc-t dd { margin: 0; font: 500 1.125rem/1.4 var(--wp-font-mono); font-variant-numeric: tabular-nums; }
.tzc-clock[data-state="old"] .tzc-t-b dd, .tzc-clock[data-state="other"] .tzc-t-b dd { color: var(--tzc-off); }
.tzc-state { margin: var(--wp-1) 0 0; font-size: var(--wp-text-meta); font-weight: 600; }
.tzc-need { display: block; font-weight: 400; color: var(--oa-muted); }
.tzc-clock[data-state="right"] .tzc-state { color: var(--oa-blue); font-weight: 500; }
.tzc-clock[data-state="old"] .tzc-state, .tzc-clock[data-state="other"] .tzc-state, .tzc-clock[data-state="unknown"] .tzc-state { color: var(--tzc-off); }
.tzc-fix { display: inline-flex; align-items: center; min-height: var(--wp-tap); width: fit-content; color: var(--oa-paper); text-decoration: underline; text-decoration-color: var(--tzc-off); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 600; }
.tzc-fix:hover { text-decoration-color: var(--oa-paper); }
.tzc-field a:focus-visible, .tzc-wall:focus-visible { outline: 3px solid var(--wp-focus-field); outline-offset: 3px; }
.tzc-noscript { color: var(--oa-paper); }

/* the ladder: five releases, filled up to what this browser has */
.tzc-ladder-wrap { margin-top: var(--wp-12); }
.tzc-label { margin: 0 0 var(--wp-3); font: 500 var(--wp-text-cite)/1.4 var(--wp-font-mono); letter-spacing: .04em; color: var(--oa-muted); }
.tzc-ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 46rem) { .tzc-ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tzc-rung { display: grid; grid-template-columns: 4.5rem 4rem 1fr auto; align-items: baseline; gap: var(--wp-2); padding: var(--wp-3); background: var(--oa-ground-2); border-top: 3px solid var(--oa-line); }
@media (min-width: 46rem) { .tzc-rung { grid-template-columns: 1fr; align-content: start; gap: var(--wp-1); min-height: 8rem; } }
.tzc-rung[data-state="has"] { border-top-color: var(--oa-blue); }
.tzc-rung[data-state="missing"] { border-top-color: var(--tzc-off); border-top-style: dashed; }
.tzc-rung[data-state="patched"] { border-top-color: var(--oa-blue); border-top-style: dashed; }
.tzc-rel { font: 500 1rem/1.3 var(--wp-font-mono); }
.tzc-when { font-size: var(--wp-text-meta); color: var(--oa-muted); }
.tzc-where { font-size: var(--wp-text-meta); }
.tzc-mark { font-size: var(--wp-text-meta); font-weight: 600; text-align: right; }
@media (min-width: 46rem) { .tzc-mark { text-align: left; margin-top: auto; } }
.tzc-rung[data-state="has"] .tzc-mark { color: var(--oa-blue); }
.tzc-rung[data-state="missing"] .tzc-mark { color: var(--tzc-off); }

/* the sheet */
.tzc-sheet { max-width: 52rem; margin-inline: auto; padding: var(--wp-12) var(--wp-gutter) 0; box-sizing: content-box; }
.tzc-sheet h2 { margin: 0 0 var(--wp-4); font: 600 var(--wp-text-title)/1.05 var(--wp-font-display); letter-spacing: -.015em; }
.tzc-sheet p { max-width: var(--wp-measure); }
.tzc-cmd { margin: var(--wp-6) 0 var(--wp-3); }
.tzc-code { margin: 0; padding: var(--wp-4); background: var(--wp-panel); border: var(--wp-rule-strong) solid var(--wp-ink); font: 400 .875rem/1.6 var(--wp-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.tzc-code code { font: inherit; background: none; padding: 0; }
.tzc-code:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 3px; }
.tzc-copy { margin-top: var(--wp-3); }
.tzc-copied { margin: var(--wp-1) 0 0; font-size: var(--wp-text-meta); color: var(--wp-muted); min-height: 1.25rem; }
.tzc-note { font-size: var(--wp-text-meta); color: var(--wp-muted); }
.tzc-sheet p code { white-space: nowrap; }
.tzc-sheet .tzc-note code { white-space: normal; overflow-wrap: anywhere; }
.tzc-paste-label { display: block; margin: var(--wp-8) 0 var(--wp-2); font-weight: 600; }
.tzc-server textarea { display: block; box-sizing: border-box; width: 100%; padding: var(--wp-3); font: 400 .875rem/1.5 var(--wp-font-mono); white-space: pre; overflow-x: auto; resize: vertical; border: var(--wp-rule-strong) solid var(--wp-ink); border-radius: var(--wp-radius); background: var(--wp-panel); color: var(--wp-ink); }
.tzc-server textarea:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 2px; }
.tzc-read { margin-top: var(--wp-3); }
.tzc-paste-result { margin-top: var(--wp-6); padding-left: var(--wp-4); border-left: 6px solid var(--wp-ink); }
.tzc-paste-result:focus { outline: none; }
.tzc-paste-result:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 4px; }
.tzc-paste-result[data-tone="ok"] { border-color: var(--oa-blue-deep); }
.tzc-paste-result[data-tone="off"] { border-color: var(--wp-rust); }
.tzc-paste-result .tzc-verdict-h { max-width: 40ch; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.tzc-paste-list { margin: var(--wp-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--wp-1); font: 400 .9375rem/1.5 var(--wp-font-mono); }
.tzc-paste-list li[data-state="old"], .tzc-paste-list li[data-state="other"], .tzc-paste-list li[data-state="unknown"] { color: var(--wp-rust); }
.tzc-paste-list a { display: inline-block; padding-block: 12px; margin-block: -12px; }

.tzc-table-wrap { overflow-x: auto; margin: var(--wp-4) 0 var(--wp-6); }
.tzc-table { width: 100%; min-width: 0; border: 0; border-collapse: collapse; font-size: var(--wp-text-ledger); }
.tzc-table th, .tzc-table td { text-align: left; vertical-align: top; padding: var(--wp-2) var(--wp-3) var(--wp-2) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
.tzc-table thead th { font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--wp-muted); border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
.tzc-table code { font-size: .875em; white-space: nowrap; }
/* at phone width the table becomes one card per place */
@media (max-width: 40rem) {
  .tzc-table-wrap { overflow: visible; }
  .tzc-table code { white-space: normal; overflow-wrap: anywhere; }
  .tzc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tzc-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--wp-3); padding: var(--wp-3) 0; border-bottom: var(--wp-rule) solid var(--wp-hair); }
  .tzc-table th, .tzc-table td { border: 0; padding: 2px 0; }
  .tzc-table th[scope="row"] { grid-column: 1 / -1; font-weight: 600; }
  .tzc-table td:nth-child(2) { grid-column: 1 / -1; }
  .tzc-table td:nth-child(3)::before { content: "Right: "; color: var(--wp-muted); }
  .tzc-table td:nth-child(4)::before { content: "Old: "; color: var(--wp-muted); }
  .tzc-table td:nth-child(5) { grid-column: 1 / -1; }
  .tzc-table td:nth-child(5)::before { content: "Fixed in "; color: var(--wp-muted); }
}
.tzc-foot { padding-bottom: var(--wp-16); font-size: var(--wp-text-meta); color: var(--wp-muted); }