/* ==========================================================================
   calcivilguide.com  ·  stylesheet v5
   Target: static build in /dist, generated by /site/build.pl.

   VERSION HISTORY, kept so rejected directions do not come back.

   v1  Rejected. Six bordered cards, a 4px accent rail on each, an uppercase
       label on every block, coloured chips breaking the reading line.
       Decoration standing in for hierarchy.

   v2  Rejected. Built to be READ. Serif body over 2,500 words is an essay and
       an attorney at 9pm is not reading an essay.

   v3  Rejected on layout. Content model was right (answer, glance panel,
       detail behind a toggle) but the page was still one long centred column.
       No persistent navigation, so every page was a dead end and the whole
       horizontal half of a laptop screen sat empty.

   v4  Rejected. A documentation sidebar built for a site that has six pages.
       Three concrete defects, all reported from the live site:
         - the sidebar carried its own scrollbar, so the page had two
         - 20 of its 26 links were dead "soon" items
         - below 1040px the grid collapsed and the entire nav stacked ABOVE
           the content, so you scrolled past 26 links to reach a sentence
       The lesson: navigation furniture has to be sized to the site that
       exists, not the site that is planned.

   v5  Current. Horizontal nav in the masthead, single centred column, sticky
       contents rail on article pages at 1240px and up. No nested scroll
       region anywhere. Pending pages are advertised on the home index, where
       "soon" is useful information, and nowhere else.
       Content model unchanged from v3: answer, glance panel, detail on demand.
       Sans body, serif display. Cases italic, statutes roman. One accent.
   ========================================================================== */

@font-face{
  font-family:"Source Serif VF";
  src:url(/assets/serif.e9192c2fe0.woff2) format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Sans VF";
  src:url(/assets/sans.30164609c1.woff2) format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}

:root{
  --serif:"Source Serif VF",Charter,Cambria,Georgia,serif;
  --sans:"Source Sans VF","Segoe UI",-apple-system,Helvetica,Arial,sans-serif;

  --paper:#fffdf9; --paper-2:#f6f3ec; --paper-3:#efebe1;
  --ink:#1b1a17; --ink-2:#45433c; --ink-3:#75726a;
  --rule:#e6e1d5; --rule-2:#cdc7b7;
  --accent:#1b3a5c; --accent-2:#2c5f95;
  --alert:#8c2f26; --caution:#7a5514; --ok:#2c5f4a;
  --ok-wash:#eaf3ee; --ok-edge:#bcd6c6; --warn-wash:#faf2e4; --warn-edge:#e3d2b0;

  --measure:64ch;
  --sidebar:15.5rem;
  --rail:12.5rem;
  --gap:2.75rem;
  --shell:96rem;

  --fs:1.0625rem; --lh:1.6;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#15161a; --paper-2:#1c1e24; --paper-3:#23262d;
    --ink:#eae7df; --ink-2:#c4c0b6; --ink-3:#918d83;
    --rule:#2b2e35; --rule-2:#414550;
    --accent:#9dc0e6; --accent-2:#c0d8f4;
    --alert:#e69086; --caution:#d6ad60; --ok:#7cbfa2;
    --ok-wash:#16241f; --ok-edge:#2f5244; --warn-wash:#251f12; --warn-edge:#524524;
  }
}
:root[data-theme="dark"]{
  --paper:#15161a; --paper-2:#1c1e24; --paper-3:#23262d;
  --ink:#eae7df; --ink-2:#c4c0b6; --ink-3:#918d83;
  --rule:#2b2e35; --rule-2:#414550;
  --accent:#9dc0e6; --accent-2:#c0d8f4;
  --alert:#e69086; --caution:#d6ad60; --ok:#7cbfa2;
    --ok-wash:#16241f; --ok-edge:#2f5244; --warn-wash:#251f12; --warn-edge:#524524;
}
:root[data-theme="light"]{
  --paper:#fffdf9; --paper-2:#f6f3ec; --paper-3:#efebe1;
  --ink:#1b1a17; --ink-2:#45433c; --ink-3:#75726a;
  --rule:#e6e1d5; --rule-2:#cdc7b7;
  --accent:#1b3a5c; --accent-2:#2c5f95;
  --alert:#8c2f26; --caution:#7a5514; --ok:#2c5f4a;
  --ok-wash:#eaf3ee; --ok-edge:#bcd6c6; --warn-wash:#faf2e4; --warn-edge:#e3d2b0;
}

*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs); line-height:var(--lh);
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased}

/* ------------------------------------------------- network bar, 3 sites */
.net{background:var(--paper-3); border-bottom:1px solid var(--rule-2);
  font-size:.8125rem}
.net-in{max-width:var(--shell); margin-inline:auto; padding:.4rem var(--s5);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s5)}
.net-label{color:var(--ink-3); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; font-size:.6875rem}
.net a{color:var(--ink-2); text-decoration:none; padding-bottom:1px;
  border-bottom:1px solid transparent}
.net a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.net a[aria-current]{color:var(--ink); font-weight:600;
  border-bottom-color:var(--accent)}
.net .sep{color:var(--rule-2)}

/* ------------------------------------------------------------- masthead */
.masthead{border-bottom:1px solid var(--rule-2); background:var(--paper)}
.masthead-in{max-width:var(--shell); margin-inline:auto;
  padding:var(--s4) var(--s5); display:flex; flex-wrap:wrap;
  align-items:baseline; justify-content:space-between; gap:var(--s3) var(--s5)}
.wordmark{font-family:var(--serif); font-size:1.375rem; font-weight:600;
  letter-spacing:-.022em; color:var(--ink); text-decoration:none}
.wordmark em{font-style:normal; color:var(--ink-3); font-weight:400}
.tagline{font-size:.8125rem; color:var(--ink-3)}

/* ---------------------------------------------------------- layout v5
   Six pages do not need a documentation sidebar. A sidebar whose links are
   mostly dead "soon" items is worse than no sidebar: it nests a second
   scrollbar, it dominates the screen, and below 1040px it stacks the whole
   nav above the content so you scroll past 26 links to reach a sentence.
   Horizontal nav in the masthead, centred column, TOC rail on articles. */
.shell{max-width:var(--shell); margin-inline:auto; padding:0 var(--s5);
  display:grid; gap:0 var(--gap); align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:1240px){
  .shell.has-rail{grid-template-columns:minmax(0,1fr) var(--rail)}
}
.sidebar,.sb-toggle{display:none !important}

/* horizontal nav in the masthead, replaces the sidebar */
.mast-nav{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  font-size:.9375rem; font-weight:500}
.mast-nav a{color:var(--ink-2); text-decoration:none; padding-bottom:2px;
  border-bottom:1px solid transparent; white-space:nowrap}
.mast-nav a:hover{color:var(--ink); border-bottom-color:var(--ink-3)}
.mast-nav a[aria-current]{color:var(--ink); font-weight:600;
  border-bottom-color:var(--accent)}

/* main */
.main{padding:var(--s6) 0 var(--s8); min-width:0}
.col{max-width:var(--measure)}

/* ----------------------------------------------------------- typography */
h1,h2{font-family:var(--serif); font-weight:600; color:var(--ink);
  text-wrap:balance; letter-spacing:-.018em}
h1{font-size:clamp(1.75rem,1.4rem + 1.7vw,2.35rem); line-height:1.14;
  margin:0 0 var(--s4)}
h2{font-size:1.3125rem; line-height:1.28; margin:var(--s7) 0 var(--s3)}
h3{font-family:var(--sans); font-size:1.0625rem; font-weight:700;
  margin:var(--s5) 0 var(--s2); color:var(--ink)}
p{margin:0 0 var(--s4); text-wrap:pretty; max-width:var(--measure)}
.lede{font-family:var(--serif); font-size:1.1875rem; line-height:1.5;
  color:var(--ink-2); max-width:56ch}
a{color:var(--accent); text-decoration-line:underline;
  text-decoration-thickness:1px; text-underline-offset:.16em;
  text-decoration-color:var(--rule-2)}
a:hover{color:var(--accent-2); text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
ul,ol{margin:0 0 var(--s4); padding-left:1.3em; max-width:var(--measure)}
li{margin-bottom:var(--s2)}
li::marker{color:var(--ink-3)}
strong{font-weight:600}
.case{font-style:italic}
.stat{font-variant-numeric:lining-nums tabular-nums; white-space:nowrap;
  color:var(--ink-2)}
.kicker{font-size:.6875rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s3)}
.breadcrumb{font-size:.8125rem; color:var(--ink-3); margin:0 0 var(--s3)}
.breadcrumb a{color:var(--ink-3)}

/* ------------------------------------------------------ article content */
.answer{font-family:var(--serif); font-size:1.375rem; line-height:1.4;
  font-weight:500; max-width:54ch; margin:0 0 var(--s5)}
.answer .q{display:block; font-family:var(--sans); font-size:1rem;
  font-weight:400; line-height:1.55; color:var(--ink-2); margin-top:var(--s3)}

.glance{border:1px solid var(--rule-2); background:var(--paper-2);
  border-radius:3px; padding:var(--s2) var(--s5); margin:0 0 var(--s6);
  max-width:var(--measure)}
.glance dl{margin:0; display:grid; grid-template-columns:1fr}
@media (min-width:600px){ .glance dl{grid-template-columns:11rem 1fr} }
.glance dt{font-size:.6875rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
  padding:var(--s3) 0 0; border-top:1px solid var(--rule)}
.glance dd{margin:0; padding:var(--s3) 0; border-top:1px solid var(--rule);
  font-size:.9375rem; color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums}
@media (max-width:599px){
  .glance dt{padding-bottom:var(--s1)}
  .glance dd{border-top:0; padding-top:0}
}
.glance dl > dt:first-of-type,
.glance dl > dt:first-of-type + dd{border-top:0}
.glance .flag{color:var(--alert); font-weight:600}
.glance .fine{font-size:.8125rem; color:var(--ink-3); display:block;
  margin-top:.1rem}

.banner{display:flex; gap:var(--s3); align-items:baseline;
  border-top:2px solid var(--alert); padding:var(--s3) 0 0;
  margin:0 0 var(--s6); max-width:var(--measure)}
.banner .label{font-size:.6875rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--alert); white-space:nowrap}
.banner p{margin:0; font-size:.9375rem}
.banner.is-caution{border-top-color:var(--caution)}
.banner.is-caution .label{color:var(--caution)}

.point{font-size:1.0625rem; font-weight:600; margin-bottom:var(--s3);
  max-width:var(--measure); line-height:1.45}

details.more{border-top:1px solid var(--rule); margin:var(--s4) 0 var(--s5);
  max-width:var(--measure)}
details.more > summary{list-style:none; cursor:pointer; padding:var(--s3) 0;
  font-size:.75rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:var(--s3)}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{content:"+"; font-size:.9375rem; line-height:1;
  width:1.05rem; height:1.05rem; border:1px solid var(--rule-2);
  border-radius:2px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--ink-3); flex:none}
details.more[open] > summary::before{content:"\2212"}
details.more > summary:hover{color:var(--ink)}
details.more .inner{padding:0 0 var(--s5) calc(1.05rem + var(--s3));
  font-size:.9375rem; color:var(--ink-2); line-height:1.6}
details.more .inner p{max-width:56ch}
details.more .inner p:last-child{margin-bottom:0}
details.more .inner strong{color:var(--ink)}

.breaks{margin:var(--s7) 0 var(--s6); border-top:2px solid var(--ink);
  padding-top:var(--s4)}
.breaks h2{margin:0 0 var(--s2); font-size:1.3125rem}
.breaks .sub{font-size:.875rem; color:var(--ink-3); margin-bottom:var(--s4)}
.bk{border-bottom:1px solid var(--rule); padding:var(--s4) 0;
  display:grid; gap:var(--s2) var(--s5); max-width:var(--measure)}
@media (min-width:600px){ .bk{grid-template-columns:9rem 1fr} }
.bk:first-of-type{border-top:1px solid var(--rule)}
.verdict{font-size:.6875rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; line-height:1.6}
.verdict.fatal{color:var(--alert)}
.verdict.curable{color:var(--caution)}
.verdict.soft{color:var(--ok)}
.bk .what{font-weight:600; margin:0 0 var(--s2)}
.bk .why{margin:0; font-size:.9375rem; color:var(--ink-2)}

table.rules{width:100%; border-collapse:collapse; font-size:.9375rem;
  margin:var(--s4) 0 var(--s5); max-width:var(--measure)}
table.rules th{text-align:left; font-size:.6875rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  padding:0 var(--s4) var(--s2) 0; border-bottom:1px solid var(--rule-2)}
table.rules td{padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--rule); vertical-align:baseline;
  color:var(--ink-2)}
table.rules td:first-child{color:var(--ink); font-weight:600}
.table-wrap{overflow-x:auto; max-width:var(--measure)}

.meta{font-size:.8125rem; color:var(--ink-3); display:flex; flex-wrap:wrap;
  gap:var(--s2) var(--s5); padding:var(--s3) 0;
  border-block:1px solid var(--rule); margin:var(--s6) 0 0;
  max-width:var(--measure)}
.meta .when{font-variant-numeric:lining-nums tabular-nums}

.handoff{margin:var(--s6) 0; padding-top:var(--s4);
  border-top:1px solid var(--rule-2); max-width:var(--measure);
  font-size:.9375rem; color:var(--ink-2)}
.handoff b{display:block; font-family:var(--serif); font-size:1.0625rem;
  font-weight:600; color:var(--ink); margin-bottom:var(--s2)}

/* ----------------------------------------------------------------- home */
.hero{padding:0 0 var(--s5); border-bottom:1px solid var(--rule);
  margin-bottom:var(--s6)}
.hero h1{max-width:26ch}
.cards{display:grid; gap:var(--s5); margin-bottom:var(--s7)}
@media (min-width:760px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.card{border:1px solid var(--rule); border-radius:3px; padding:var(--s4) var(--s5)}
.card h2{font-size:1.0625rem; font-family:var(--sans); font-weight:700;
  margin:0 0 var(--s2); letter-spacing:0}
.card p{font-size:.9375rem; color:var(--ink-3); margin:0 0 var(--s3);
  max-width:none}
.card a.go{font-size:.9375rem; font-weight:600}

.reviewed{width:100%; border-collapse:collapse; font-size:.9375rem}
.reviewed th{font-size:.6875rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); text-align:left;
  padding:0 var(--s5) var(--s2) 0; border-bottom:1px solid var(--rule-2)}
.reviewed td{padding:var(--s3) var(--s5) var(--s3) 0;
  border-bottom:1px solid var(--rule); vertical-align:baseline;
  color:var(--ink-2)}
.reviewed td:first-child{color:var(--ink)}
.reviewed .when{font-variant-numeric:lining-nums tabular-nums;
  color:var(--ink-3); white-space:nowrap}

.why{border-top:2px solid var(--ink); padding-top:var(--s5);
  margin-top:var(--s7); display:grid; gap:var(--s5) var(--gap)}
@media (min-width:820px){ .why{grid-template-columns:1fr 1fr} }
.why h2{margin:0 0 var(--s3); font-size:1.3125rem}
.why p{font-size:.9375rem; color:var(--ink-2); max-width:48ch}
.why strong{color:var(--ink)}

.band{background:var(--paper-2); border:1px solid var(--rule-2);
  border-radius:3px; padding:var(--s5); margin-top:var(--s7)}
.band h2{margin:0 0 var(--s2); font-size:1.1875rem}
.band > p{font-size:.9375rem; color:var(--ink-2); max-width:52ch}
.band .cards{margin:var(--s5) 0 0}
.band .card{background:var(--paper); border-color:var(--rule)}

/* --------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--rule-2); background:var(--paper-2)}
.foot-in{max-width:var(--shell); margin-inline:auto;
  padding:var(--s6) var(--s5) var(--s7); font-size:.875rem;
  color:var(--ink-3); line-height:1.6}
.foot-cols{display:grid; gap:var(--s5); margin-bottom:var(--s5)}
@media (min-width:720px){ .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))} }
.foot h4{font-size:.6875rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 var(--s3)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:var(--s2)}
.foot a{color:var(--ink-2)}
.foot .fine{max-width:74ch; padding-top:var(--s4);
  border-top:1px solid var(--rule)}

@media (max-width:640px){
  .shell,.masthead-in,.foot-in,.net-in{padding-left:var(--s4);
    padding-right:var(--s4)}
  .answer{font-size:1.1875rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------------------------------------------------------- guides index */
.cat{margin:0 0 var(--s7)}
.cat > h2{font-size:1.3125rem; margin:0 0 var(--s2);
  padding-bottom:var(--s2); border-bottom:1px solid var(--rule-2)}
.cat-blurb{font-size:.9375rem; color:var(--ink-3); margin:0 0 var(--s3);
  max-width:60ch}

/* ------------------------------------------------- decision tree + tools
   Carried over from Jacob's standalone article and retoned to the site
   palette: semantic colour as a tinted ground only inside a decision branch,
   where green/amber IS the information, never elsewhere. */
.tree{background:var(--paper-2); border:1px solid var(--rule-2); border-radius:4px;
  padding:var(--s5) var(--s5) var(--s3); margin:var(--s6) 0; max-width:var(--measure)}
.tree-h{font-size:.6875rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s4)}
.tree .q{background:var(--paper); border:1px solid var(--rule);
  border-left:3px solid var(--accent); border-radius:3px;
  padding:var(--s3) var(--s4); margin:0 0 var(--s1); font-weight:600;
  font-size:.9375rem; line-height:1.45}
.tree .cite-mini{display:block; font-weight:400; font-size:.8125rem;
  color:var(--ink-3); margin-top:.2rem}
.branches{display:flex; flex-wrap:wrap; gap:var(--s2);
  margin:0 0 var(--s4); padding-left:var(--s4)}
.b{flex:1 1 15rem; border:1px solid var(--rule); border-radius:3px;
  padding:var(--s3) var(--s4); font-size:.875rem; line-height:1.5}
.b .lab{display:block; font-weight:700; font-size:.6875rem; letter-spacing:.07em;
  text-transform:uppercase; margin-bottom:.15rem}
.b-go{background:var(--ok-wash); border-color:var(--ok-edge)}
.b-go .lab{color:var(--ok)}
.b-stop{background:var(--warn-wash); border-color:var(--warn-edge)}
.b-stop .lab{color:var(--caution)}
.b-next{background:var(--paper)}
.b-next .lab{color:var(--ink-3)}
.tree .rail{position:static; display:block; padding:0 0 0 var(--s4);
  color:var(--ink-3); font-size:.8125rem; margin:0 0 var(--s3)}

.checklist{background:var(--paper-2); border:1px solid var(--rule-2);
  border-radius:4px; padding:var(--s5) var(--s5) var(--s3);
  margin:var(--s6) 0; max-width:var(--measure)}
.checklist ol{margin:0; padding-left:1.4em}
.checklist li{margin-bottom:var(--s3); font-size:.9375rem}

.local{border:1px solid var(--rule-2); border-radius:4px; padding:var(--s5);
  margin:var(--s5) 0; background:var(--paper-2); max-width:var(--measure)}
.local label{display:block; font-size:.6875rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:var(--s2)}
.local select{width:100%; font-family:var(--sans); font-size:1rem;
  padding:var(--s3) var(--s3); border:1px solid var(--rule-2); border-radius:3px;
  background:var(--paper); color:var(--ink)}
#out{margin-top:var(--s4); background:var(--paper); border:1px solid var(--rule);
  border-radius:3px; padding:var(--s4); font-size:.9375rem; line-height:1.6}
#out h4{margin:0 0 var(--s2); font-size:1rem; font-family:var(--sans)}
#out p{margin:0 0 var(--s3); max-width:none}
#out p:last-child{margin-bottom:0}
#out .rule{font-weight:600; color:var(--ink)}
#out .badge{display:inline-block; font-size:.625rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.3em .5em;
  border-radius:2px; margin-bottom:var(--s3)}
.v-yes{background:var(--ok-wash); color:var(--ok); border:1px solid var(--ok-edge)}
.v-no{background:var(--warn-wash); color:var(--caution); border:1px solid var(--warn-edge)}

/* --------------------------------------------------------- walkthrough tool
   One question at a time, answers recorded underneath. Semantic colour is
   load-bearing here (green = file it, amber = you need a signature), which is
   the only place on the site a tinted ground is allowed. */
.tool{border:1px solid var(--rule-2); border-radius:4px; background:var(--paper-2);
  padding:var(--s5); margin:var(--s6) 0; max-width:var(--measure)}
.tool-h{font-size:.6875rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s4)}
.tw-step{background:var(--paper); border:1px solid var(--rule);
  border-left:3px solid var(--accent); border-radius:3px;
  padding:var(--s4) var(--s5)}
.tw-q{margin:0; font-size:1.0625rem; font-weight:600; line-height:1.45;
  max-width:none}
.tw-cite{margin:var(--s2) 0 0; font-size:.8125rem; color:var(--ink-3);
  max-width:none; font-variant-numeric:lining-nums tabular-nums}
.tw-actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s4) 0 0}
.tw-btn{font-family:var(--sans); font-size:.9375rem; font-weight:500;
  color:var(--ink); background:var(--paper); border:1px solid var(--rule-2);
  border-radius:3px; padding:var(--s3) var(--s4); cursor:pointer;
  text-align:left; flex:1 1 12rem; line-height:1.4}
.tw-btn:hover{border-color:var(--accent); color:var(--accent)}
.tw-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tw-restart{flex:0 0 auto; color:var(--ink-3)}

.tw-result{border-left-width:3px}
.tw-result.tw-go{background:var(--ok-wash); border-color:var(--ok-edge);
  border-left-color:var(--ok)}
.tw-result.tw-stop{background:var(--warn-wash); border-color:var(--warn-edge);
  border-left-color:var(--caution)}
.tw-verdict{margin:0 0 var(--s2); font-size:.6875rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; max-width:none}
.tw-go .tw-verdict{color:var(--ok)}
.tw-stop .tw-verdict{color:var(--caution)}
.tw-h{margin:0 0 var(--s3); font-family:var(--serif); font-size:1.1875rem;
  font-weight:600; line-height:1.35; max-width:none}
.tw-p{margin:0; font-size:.9375rem; color:var(--ink-2); max-width:none}

.tw-trail{list-style:none; margin:var(--s4) 0 0; padding:0; max-width:none}
.tw-trail li{display:grid; grid-template-columns:1fr auto; gap:var(--s4);
  padding:var(--s2) 0; border-top:1px solid var(--rule);
  font-size:.8125rem; color:var(--ink-3); margin:0; align-items:baseline}
.tw-qa{line-height:1.4}
.tw-ans{font-weight:600; color:var(--ink-2); white-space:nowrap}
.tw-noscript{font-size:.875rem; color:var(--ink-3); margin:var(--s3) 0 0}
@media (max-width:520px){
  .tw-btn{flex:1 1 100%}
  .tw-trail li{grid-template-columns:1fr}
  .tw-ans{white-space:normal}
}