/* SODA1 checker: the question, one cobalt input band, then a framed result read top to bottom
 * as five numbered steps. Mono for anything a reader copies; rust only for the export.csv trap. */
article.soda1 { color: var(--wp-ink); font-family: var(--wp-font-body); max-width: 72rem; margin-inline: auto; padding: var(--wp-16) 0 var(--wp-24); }
article.soda1 code, article.soda1 pre { font-family: var(--wp-font-mono); }
article.soda1 code { font-size: .92em; overflow-wrap: anywhere; }
article.soda1 :where(p, li) { max-width: 44em; }

.soda1 .eyebrow { background: none; border: 0; border-radius: 0; display: block; padding: 0; font: 500 var(--wp-text-cite)/1.4 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wp-muted); margin: 0 0 var(--wp-4); }
.soda1 h1 { font: 700 clamp(2.5rem, 5.2vw, 4.5rem)/1 var(--wp-font-display); letter-spacing: -.025em; margin: 0 0 var(--wp-6); max-width: 18ch; text-wrap: balance; }
.soda1 h1 code { font: 500 .78em/1 var(--wp-font-mono); letter-spacing: -.04em; background: var(--wp-cited); padding: 0 .12em; overflow-wrap: normal; }
.soda1 .lede { font-size: var(--wp-text-lede); line-height: 1.5; max-width: 38em; margin: 0; }
.soda1 .lede code { white-space: normal; overflow-wrap: anywhere; }

/* The input band: the one place the page asks for something. */
.soda1-tool { background: var(--wp-cobalt); color: var(--wp-on-bio); margin: var(--wp-12) 0 0; padding: var(--wp-8) var(--wp-8) var(--wp-6); }
.soda1-tool :focus-visible { outline-color: var(--wp-focus-field); }
.soda1-form label { display: block; font: 600 1.0625rem/1.4 var(--wp-font-body); margin: 0 0 var(--wp-3); }
.soda1-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wp-3); }
.soda1-entry input { border-color: var(--wp-on-bio); font: 500 var(--wp-text-ledger)/1.4 var(--wp-font-mono); min-height: 56px; }
.soda1-entry input::placeholder { color: var(--wp-muted); opacity: 1; }
.soda1-entry input[aria-invalid="true"] { border-color: var(--wp-focus-field); box-shadow: inset 0 0 0 1px var(--wp-focus-field); }
.soda1-tool button#soda1-submit { background: var(--wp-on-bio); border-color: var(--wp-on-bio); color: var(--wp-cobalt); min-height: 56px; padding-inline: var(--wp-8); }
.soda1-tool button#soda1-submit:hover { background: #fff; border-color: #fff; color: var(--wp-cobalt-deep); }
.soda1-tool button#soda1-submit:disabled { cursor: progress; opacity: .7; }
.soda1-input-error { background: var(--wp-paper); color: var(--wp-rust); font-weight: 600; margin: var(--wp-3) 0 0; padding: var(--wp-2) var(--wp-3); border-left: 4px solid var(--wp-rust); }
.soda1-hint { color: var(--wp-pale); margin: var(--wp-3) 0 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--wp-4); }
.soda1-hint .text-button { color: var(--wp-on-bio); font-weight: 600; }
.soda1-hint .text-button:hover { color: #fff; }
.soda1-privacy { color: var(--wp-pale); font-size: 1rem; margin: var(--wp-4) 0 0; padding-top: var(--wp-4); border-top: var(--wp-rule) solid var(--wp-pale); }
.soda1-privacy a { color: var(--wp-on-bio); }

article.soda1 .soda1-status { margin: var(--wp-6) 0 0; min-height: 1.6em; font-weight: 600; }
article.soda1 .soda1-status:empty { margin: 0; min-height: 0; }
.soda1-status.state-loading { color: var(--wp-muted); }

.soda1-fallback { margin: var(--wp-4) 0 0; max-width: 48rem; }
.soda1-fallback p { margin: var(--wp-3) 0; }

/* The result: a framed receipt, steps numbered down the margin. */
.soda1-result { border: var(--wp-rule-strong) solid var(--wp-ink); background: var(--wp-panel); margin: var(--wp-6) 0 0; }
.soda1-result:focus { outline: none; }
.soda1-result:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 3px; }
.result-head { padding: var(--wp-6) var(--wp-8); border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
.result-head .label { font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wp-muted); margin: 0 0 var(--wp-2); }
.result-head h2 { font: 700 var(--wp-text-title)/1.05 var(--wp-font-display); letter-spacing: -.02em; margin: 0 0 var(--wp-3); max-width: 28ch; }
.result-head h2 a { color: var(--wp-ink); display: inline-block; padding-block: .3em; text-decoration-thickness: 2px; }
.result-meta { color: var(--wp-muted); font: 500 1rem/1.5 var(--wp-font-mono); margin: 0; max-width: none; }
.result-step { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--wp-4); padding: var(--wp-6) var(--wp-8) var(--wp-8) var(--wp-4); border-top: var(--wp-rule) solid var(--wp-ink); }
.result-head + .result-step { border-top: 0; }
.step-n { font: 500 1.5rem/1.2 var(--wp-font-mono); color: var(--wp-muted); margin: 0; text-align: right; }
.result-step h3 { font: 600 var(--wp-text-h3)/1.3 var(--wp-font-body); margin: 0 0 var(--wp-4); }
.result-step p { margin: var(--wp-3) 0 0; }

.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-2) var(--wp-4); background: var(--wp-paper); border: var(--wp-rule) solid var(--wp-ink); padding: var(--wp-2) var(--wp-2) var(--wp-2) var(--wp-4); }
.copy-line code { flex: 1 1 20rem; font-size: var(--wp-text-ledger); line-height: 1.5; padding: var(--wp-2) 0; }
.soda1 button.copy { min-height: var(--wp-tap); padding: 0 var(--wp-3); font-size: .9375rem; white-space: nowrap; }

.soda2 { margin: var(--wp-4) 0 0; border-top: var(--wp-rule) solid var(--wp-hair); padding-top: var(--wp-2); }
.soda2 summary { cursor: pointer; font-weight: 600; min-height: var(--wp-tap); display: flex; align-items: center; }
.soda2[open] summary { margin-bottom: var(--wp-3); }
.soda2 summary:focus-visible, .map-wrap:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 2px; }

.soda1 .limit { max-width: 44em; }
.soda1 .limit .label { font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.soda1 .limit p:first-of-type { margin-top: 0; }
.break-list { list-style: none; margin: var(--wp-3) 0 0; padding: 0; }
.break-list li { padding: var(--wp-3) 0; border-top: var(--wp-rule) solid var(--wp-hair); }
.break-list .how { display: block; font-weight: 600; margin-bottom: var(--wp-1); }
.break-list .cols { color: var(--wp-ink); }
.break-list code { background: var(--wp-flag); padding: 0 .25em; white-space: nowrap; }
.soda1 .state-success { color: var(--wp-ink); margin: 0; }
.soda1 .header-check { max-width: 44em; margin: 0 0 var(--wp-4); padding: var(--wp-1) 0 var(--wp-1) var(--wp-3); border-left: var(--wp-rule-strong) solid var(--wp-hair); }
.soda1 .header-check.state-success { margin: 0 0 var(--wp-4); border-left-color: var(--wp-ink); }
.soda1 .header-check.state-limit { border-left-color: var(--wp-rust); }
.header-check .cols { font: 500 var(--wp-text-meta)/1.5 var(--wp-font-mono); }

.code-tabs [role="tablist"] { display: flex; gap: 0; border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
.soda1 button.tab { font: 600 1rem/1 var(--wp-font-body); padding: 0 var(--wp-6); text-decoration: none; border: var(--wp-rule-strong) solid transparent; border-bottom: 0; margin-bottom: calc(-1 * var(--wp-rule-strong)); }
.soda1 button.tab[aria-selected="true"] { background: var(--wp-ink); color: var(--wp-paper); border-color: var(--wp-ink); }
.soda1 button.tab[aria-selected="false"]:hover { text-decoration: underline; }
.code-panel pre, .soda1 .static-code { background: var(--wp-ink); color: var(--wp-paper); font-size: .875rem; line-height: 1.6; margin: 0; max-height: 34rem; overflow: auto; padding: var(--wp-4) var(--wp-6); tab-size: 4; }
.code-panel pre:focus-visible, .soda1 .static-code:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 2px; }
.code-panel pre code, .soda1 .static-code code { font-size: inherit; overflow-wrap: normal; white-space: pre; }
.code-panel .copy { margin-top: var(--wp-3); }

.map-wrap { max-height: 32rem; overflow: auto; border: var(--wp-rule) solid var(--wp-ink); background: var(--wp-paper); }
.map { border: 0; border-collapse: collapse; min-width: 0; table-layout: fixed; width: 100%; font-size: var(--wp-text-ledger); }
.map col.c-field { width: 38%; } .map col.c-name { width: 44%; } .map col.c-type { width: 18%; }
.map :is(th, td) { border: 0; overflow-wrap: anywhere; }
.map thead th { position: sticky; top: 0; background: var(--wp-ink); color: var(--wp-paper); font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .04em; text-align: left; padding: var(--wp-2) var(--wp-3); }
.map thead code { font-size: 1em; }
.map td, .map tbody th { border-top: var(--wp-rule) solid var(--wp-hair); padding: var(--wp-2) var(--wp-3); text-align: left; vertical-align: top; }
.map tbody th { font-weight: 600; }
.map td:last-child { color: var(--wp-muted); font: 400 var(--wp-text-meta)/1.5 var(--wp-font-mono); }
.map tr.flagged th { background: var(--wp-flag); }
.map td .tag { display: block; color: var(--wp-ink); overflow-wrap: normal; }
.map tr.flagged th::after { content: " · export.csv: text"; color: var(--wp-rust); font: 500 var(--wp-text-cite)/1 var(--wp-font-mono); }

.left-list { margin: 0; padding-left: 1.25em; }
.left-list li + li { margin-top: var(--wp-3); }
.left-list .cols { font: 500 var(--wp-text-meta)/1.5 var(--wp-font-mono); color: var(--wp-muted); }

/* Static explainer below the tool. */
.soda1-section { border-top: var(--wp-rule-strong) solid var(--wp-ink); margin-top: var(--wp-16); padding-top: var(--wp-8); }
.soda1-section h2 { font: 700 var(--wp-text-title)/1.05 var(--wp-font-display); letter-spacing: -.02em; margin: 0 0 var(--wp-6); max-width: 22ch; }
.soda1-section h3 { font: 600 var(--wp-text-h3)/1.3 var(--wp-font-body); margin: var(--wp-8) 0 var(--wp-3); }
.soda1-section > p + p { margin-top: var(--wp-4); }
.soda1 .static-code { margin: var(--wp-6) 0 0; }
.checked-list { padding-left: 1.25em; }
.checked-list li + li { margin-top: var(--wp-2); }
.soda1 .byline { color: var(--wp-muted); margin-top: var(--wp-8); }

.trio { margin: var(--wp-8) 0; max-width: 56rem; }
.trio :is(th, td) { border: 0; }
.trio table { border-collapse: collapse; min-width: 0; width: 100%; border: var(--wp-rule-strong) solid var(--wp-ink); background: var(--wp-panel); }
.trio thead th { font: 500 var(--wp-text-cite)/1.3 var(--wp-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--wp-muted); text-align: left; padding: var(--wp-3) var(--wp-4); border-bottom: var(--wp-rule-strong) solid var(--wp-ink); }
.trio td, .trio tbody th { padding: var(--wp-3) var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); text-align: left; vertical-align: baseline; }
.trio tbody th { font-weight: 400; }
.trio tbody th code { font-weight: 500; }
.trio tbody th span { display: block; color: var(--wp-muted); font-size: var(--wp-text-meta); }
.trio td code { font-size: var(--wp-text-ledger); white-space: nowrap; }
.trio tr.bad td:nth-child(3) code { background: var(--wp-flag); padding: 0 .25em; }
.trio tr.bad td:last-child b { color: var(--wp-rust); }
.trio figcaption { color: var(--wp-muted); margin-top: var(--wp-3); max-width: 44em; }

@media (max-width: 56rem) {
  article.soda1 { padding: var(--wp-8) 0 var(--wp-16); }
  .soda1-tool { margin-inline: calc(-1 * var(--wp-gutter)); padding: var(--wp-6) var(--wp-gutter); }
  .soda1-entry { grid-template-columns: minmax(0, 1fr); }
  .soda1-tool button#soda1-submit { width: 100%; }
  .soda1-result { margin-inline: calc(-1 * var(--wp-gutter)); border-left: 0; border-right: 0; }
  .result-head { padding: var(--wp-6) var(--wp-gutter); }
  .result-step { grid-template-columns: minmax(0, 1fr); gap: var(--wp-1); padding: var(--wp-6) var(--wp-gutter) var(--wp-8); }
  .step-n { text-align: left; font-size: 1rem; }
  .code-panel pre, .soda1 .static-code { font-size: .8125rem; padding: var(--wp-3) var(--wp-4); margin-inline: 0; }
  .map col.c-field { width: 34%; } .map col.c-name { width: 40%; } .map col.c-type { width: 26%; }
  .map td:last-child { padding-inline: var(--wp-2); }
  .map tr.flagged th::after { display: block; margin-top: var(--wp-1); content: "export.csv: text"; }
  .trio thead { display: none; }
  .trio tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wp-1) var(--wp-4); padding: var(--wp-3) var(--wp-4); border-top: var(--wp-rule) solid var(--wp-hair); }
  .trio td, .trio tbody th { border: 0; padding: 0; }
  .trio tbody th { grid-column: 1 / -1; }
  .trio td:nth-child(2) { grid-column: 1 / -1; }
}