/* translator.css - the Scent Translator page (/scent-translator; Lane 23, 2026-09-30). Tokens only, through the roles (roles.css):
   Plex Mono labels, the body face for readings, brass hairlines on oxblood. No animation (reduced motion needs nothing turned off),
   no icons, no colour-only meaning: every confidence, fit and evidence is a word. The form's controls are the shared .rp-btn /
   .rp-input / .rp-field (controls.css). At 390 px the example table stacks, one reading under another, with no sideways scroll.
   Served standalone as /sections/translator.css (copied by scripts/build-entities.mjs), like spine-nav.css. */
.st-tool{margin:0 0 var(--rp-space-scale-12)}
/* Lane 27: the form and the example table are one column of work: the two containers' paddings and the tool's margin stacked into a
   ~190 px empty band at 390 before "Eight phrases, translated"; the heading's own top margin is the only gap left */
.st-sec .st-lead{padding-bottom:0!important}
.st-sec .st-lead .st-tool{margin-bottom:0}
.st-sec .st-wide{padding-top:0!important}
/* Lane 27: each carrier's regulation flags (jurisdiction and kind; IFRA is an industry standard, not law) and the descriptor that
   brought it in */
.st-reg{margin:.2em 0 0;font:400 var(--rp-type-scale-label)/1.6 var(--rp-mono);letter-spacing:.04em;color:var(--rp-text-muted)}
.st-reg-k{margin-right:.5em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--rp-brass)}
.st-reg a{color:inherit;text-decoration:underline;text-decoration-color:var(--rp-hair);text-underline-offset:.2em}
.st-table .st-reg{display:block;margin:.15em 0 .35em}
.st-cw{font-weight:500}
.st-nojs{margin:0 0 var(--rp-space-scale-6);font:400 var(--rp-body-size)/var(--rp-body-lh) var(--rp-body);color:var(--rp-text-muted)}
.st-form{margin:0;padding:0}
.st-field{margin-bottom:var(--rp-space-scale-4)}
.st-row{display:flex;flex-wrap:wrap;gap:var(--rp-space-scale-3);align-items:stretch}
.st-row .rp-input{flex:1 1 16rem;min-width:0;width:auto}
.st-row .rp-btn{flex:0 0 auto}
.st-err[hidden]{display:none}
.st-ex{margin:0 0 var(--rp-space-scale-4);padding:0;border:0;min-width:0}
.st-ex legend{padding:0;margin:0 0 var(--rp-space-scale-2)}
.st-exs{display:flex;flex-wrap:wrap;gap:var(--rp-space-scale-2) var(--rp-space-scale-6)}
/* the example phrases: quoted words on a brass hairline, in the body face (sentence case reads as a phrase; the mono capitals of
   .rp-btn would shout a sentence) - still real buttons, 44 px tall, with the shared focus ring */
.st-exb{appearance:none;-webkit-appearance:none;display:inline-block;max-width:100%;min-height:44px;margin:0;padding:.55em 0 .45em;background:none;border:0;border-bottom:1px solid var(--rp-brass-dim);border-radius:0;font:400 var(--rp-body-size)/1.4 var(--rp-body);color:var(--rp-text);text-align:left;white-space:normal;cursor:pointer}
.st-exb::before{content:"“";content:"“" / ""}.st-exb::after{content:"”";content:"”" / ""}
.st-exb:hover{border-bottom-color:var(--rp-brass);color:var(--rp-brass-hi)}
.st-exb:focus-visible{outline:var(--rp-focus-ring);outline-offset:3px;border-bottom-color:var(--rp-brass)}
.st-status{min-height:1.6em;margin:var(--rp-space-scale-3) 0;font:400 var(--rp-type-scale-label)/1.6 var(--rp-mono);letter-spacing:.04em;color:var(--rp-text-muted)}
.st-result{margin:var(--rp-space-scale-4) 0 0;padding-top:var(--rp-space-scale-2);border-top:1px solid var(--rp-hair)}
.st-result[hidden]{display:none}
.st-result-h{margin-top:var(--rp-space-scale-6)!important}
/* the result: blocks of words, concepts and readings */
.st-out h3{margin:var(--rp-space-scale-8) 0 var(--rp-space-scale-3);font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rp-text-muted)}
.st-out h4{margin:0 0 var(--rp-space-scale-2);font-family:var(--rp-display);font-weight:500;font-size:var(--rp-type-scale-h3);line-height:1.2;color:var(--rp-text)}
.st-words,.st-concepts,.st-readings,.st-lex-list,.st-how{margin:0;padding:0}
.st-words{list-style:none}
.st-words>li{margin:0 0 var(--rp-space-scale-2);padding:0 0 var(--rp-space-scale-2);border-bottom:1px solid var(--rp-hair);font:400 var(--rp-body-size)/1.5 var(--rp-body);color:var(--rp-text);overflow-wrap:anywhere}
.st-w-k{display:inline-block;min-width:9.5em;margin-right:.4em;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rp-brass)}
.st-w-miss .st-w-k,.st-w-neg .st-w-k{color:var(--rp-text-muted)}
.st-w-miss .st-w-k::before{content:"\2715\00a0"}   /* a mark as well as the word: not colour alone */
.st-w-neg .st-w-k::before{content:"\2013\00a0"}
.st-w-note,.st-from,.st-as,.st-carries,.st-skipped,.st-note,.st-qual{color:var(--rp-text-muted)}
.st-w-note,.st-from,.st-as,.st-qual{font-size:var(--rp-type-scale-small)}
.st-skipped,.st-note,.st-gaps{margin:var(--rp-space-scale-3) 0 0;font:400 var(--rp-type-scale-small)/1.6 var(--rp-body)}
.st-gaps{padding:var(--rp-space-scale-2) var(--rp-space-scale-3);border-left:2px solid var(--rp-brass-dim);color:var(--rp-text)}
.st-concepts{list-style:none;columns:2 18rem;column-gap:var(--rp-space-scale-8)}
.st-concepts>li{break-inside:avoid;margin:0 0 var(--rp-space-scale-3);font:400 var(--rp-body-size)/1.45 var(--rp-body);color:var(--rp-text)}
.st-conf{margin:0 .3em;font:500 var(--rp-type-scale-label)/1 var(--rp-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rp-brass)}
.st-def{display:inline-block;margin-top:.2em;font-size:var(--rp-type-scale-small);font-style:italic;color:var(--rp-text-muted)}
.st-readings{list-style:none;display:grid;gap:var(--rp-space-scale-6)}
.st-reading{margin:0;padding:var(--rp-space-scale-4) 0 0;border-top:1px solid var(--rp-brass-dim)}
.st-letter{display:inline-block;min-width:1.4em;font-family:var(--rp-display);font-weight:var(--rp-num-weight);color:var(--rp-brass)}
.st-fit,.st-why{margin:0 0 var(--rp-space-scale-2);font:400 var(--rp-body-size)/1.55 var(--rp-body);color:var(--rp-text)}
.st-fit b{font:500 var(--rp-type-scale-label)/1 var(--rp-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rp-brass)}
.st-dl{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--rp-space-scale-2) 0;margin:var(--rp-space-scale-3) 0 0}
.st-dl>div{padding-top:var(--rp-space-scale-2);border-top:1px solid var(--rp-hair)}
.st-dl dt{margin:0 0 .2em;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-text-muted)}
.st-dl dd{margin:0;font:400 var(--rp-body-size)/1.5 var(--rp-body);color:var(--rp-text);overflow-wrap:anywhere}
.st-dl dd ul{margin:.2em 0 0;padding-left:1.1em}
.st-dl dd li{margin:0 0 .35em}
.st-dl dd li::marker{color:var(--rp-brass)}
.st-none{color:var(--rp-text-muted);font-style:italic}
.st-chip{display:inline-block;margin:0 0 0 .5em;vertical-align:baseline}
.st-chip[open]{display:block;margin:.3em 0 0}
.st-chip>summary{letter-spacing:.08em}
.st-label{margin:var(--rp-space-scale-8) 0 0;padding:var(--rp-space-scale-3) var(--rp-space-scale-4);border:1px solid var(--rp-brass-dim);font:400 var(--rp-type-scale-small)/1.6 var(--rp-body);color:var(--rp-text)}
@media (min-width:900px){.st-dl{grid-template-columns:1fr 1fr;gap:var(--rp-space-scale-2) var(--rp-space-scale-6)}}
/* the example table (the no-JS equivalent): four columns on a wide screen; stacked, reading by reading, on a narrow one */
.st-table-wrap{margin:var(--rp-space-scale-3) 0 var(--rp-space-scale-12);overflow-x:auto}
.st-table{table-layout:fixed;font-size:var(--rp-type-scale-small)}
.st-table thead th:first-child{width:17%}
.st-table td p,.st-table th p{margin:0 0 .45em;font:400 var(--rp-type-scale-small)/1.55 var(--rp-body);color:var(--rp-text);overflow-wrap:break-word}
.st-phrase{display:block;font-family:var(--rp-display);font-size:1.15em;font-weight:500;line-height:1.25;color:var(--rp-text)}
.st-rec{display:block;margin-top:.35em;font:400 var(--rp-type-scale-label)/1.5 var(--rp-mono);letter-spacing:.03em;color:var(--rp-text-muted)}
.st-k,.st-fitw,.st-evw,.st-gapw,.st-count{font:400 var(--rp-type-scale-label)/1.5 var(--rp-mono);letter-spacing:.04em;color:var(--rp-text-muted)}
.st-k{display:block;text-transform:uppercase;letter-spacing:.12em}
.st-cell-h b{font-family:var(--rp-display);font-weight:500;font-size:1.25em;line-height:1.2}
.st-table td a{overflow-wrap:break-word}
.st-empty{color:var(--rp-text-muted);font-style:italic}
@media (max-width:760px){
  .st-table,.st-table tbody,.st-table tr,.st-table th,.st-table td{display:block;width:auto}
  .st-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .st-table caption{display:block}
  .st-table tr{padding:var(--rp-space-scale-3) 0;border-top:1px solid var(--rp-brass-dim)}
  .st-table th,.st-table td{border-top:0;padding:.4em 0}
  .st-table td::before{content:attr(data-label);display:block;margin:0 0 .2em;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-brass)}
}
/* how it works and the lexicon */
.st-how{padding-left:1.4em;margin:0 0 var(--rp-space-scale-4)}
.st-how li{margin:0 0 var(--rp-space-scale-3);font:400 var(--rp-body-size)/var(--rp-body-lh) var(--rp-body);color:var(--rp-text)}
.st-how li::marker{color:var(--rp-brass);font-family:var(--rp-display)}
.st-lex{margin:var(--rp-space-scale-3) 0 var(--rp-space-scale-8)}
.st-lex>summary{display:inline-block;cursor:pointer;min-height:44px;padding:.7em 0;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-brass);border-bottom:1px solid var(--rp-brass-dim)}
.st-lex>summary:focus-visible{outline:var(--rp-focus-ring);outline-offset:3px}
.st-lex-h{margin:var(--rp-space-scale-6) 0 var(--rp-space-scale-2)!important;font:500 var(--rp-type-scale-label)/1.4 var(--rp-mono)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--rp-text-muted)!important}
.st-lex-list{list-style:none}
.st-lex-list>li{margin:0;padding:.55em 0;border-top:1px solid var(--rp-hair);font:400 var(--rp-type-scale-small)/1.55 var(--rp-body);color:var(--rp-text);overflow-wrap:anywhere}
.st-lex-list b{font-weight:600}
.st-lex-list i{color:var(--rp-text)}
.st-out a,.st-table a,.st-lex a{color:inherit;text-decoration:underline;text-decoration-color:var(--rp-brass-dim);text-underline-offset:.2em}
.st-out a:hover,.st-table a:hover,.st-lex a:hover{text-decoration-color:currentColor}