/* ===========================================================
   sj-enhance.css
   Companion layer to traf-enhance.css.
   traf-enhance already provides: hero-fx, .rv scroll reveal,
   .stat-num count-up, navbar scrollspy, .cchart, .tcc, .cxp.
   This file adds only what that layer lacks. Namespaced .sjx-*
   so nothing here can collide with .cchart / .cxp / .tcc.
   Pages in this cluster are explicitly light-mode only
   (meta color-scheme: only light), so no dark palette is defined.
   =========================================================== */

/* ---------- 1. Reading progress ---------- */
.sjx-prog{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  background:transparent; pointer-events:none;
}
.sjx-prog i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brass,#B8863B),var(--brass-lt,#d0a862));
  transition:transform .08s linear;
}

/* ---------- 2. Back to top ---------- */
.sjx-top{
  position:fixed; right:20px; bottom:20px; z-index:120;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:var(--sea,#12525E); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s;
  box-shadow:0 6px 22px -8px rgba(11,49,56,.55);
  font-family:"Space Mono",monospace; font-size:16px; line-height:1;
}
.sjx-top.on{opacity:1; visibility:visible; transform:translateY(0)}
.sjx-top:hover{background:var(--deep,#0B3138)}
.sjx-top:focus-visible{outline:2px solid var(--brass,#B8863B); outline-offset:3px}
@media(max-width:720px){ .sjx-top{right:14px; bottom:14px; width:40px; height:40px} }

/* ---------- 3. Section permalink ---------- */
.section-head{position:relative}
.sjx-anchor{
  font-family:"Space Mono",monospace; font-size:14px; text-decoration:none;
  color:var(--brass,#B8863B); opacity:0; margin-left:8px;
  transition:opacity .18s ease; padding:2px 5px; border-radius:4px;
}
.section-head:hover .sjx-anchor,
.sjx-anchor:focus-visible{opacity:1}
.sjx-anchor:hover{background:rgba(184,134,59,.12)}
.sjx-anchor.done{color:var(--sea,#12525E); opacity:1}
@media(max-width:720px){ .sjx-anchor{display:none} }

/* ---------- 4. FAQ filter ---------- */
.sjx-faqbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin:18px 0 6px;
}
.sjx-faqsearch{
  flex:1; min-width:210px; border:1px solid var(--paper-2,#E4E7DE);
  border-radius:100px; padding:11px 18px; background:#fff;
  font-family:"Newsreader",Georgia,serif; font-size:15.5px; color:var(--ink,#12262A);
  transition:border-color .18s, box-shadow .18s;
}
.sjx-faqsearch:focus{
  outline:none; border-color:var(--sea,#12525E);
  box-shadow:0 0 0 3px rgba(18,82,94,.12);
}
.sjx-faqsearch::placeholder{color:#9aa8a8}
.sjx-faqbtn{
  font-family:"Space Mono",monospace; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sea,#12525E); background:var(--paper,#EFF1EC);
  border:1px solid var(--paper-2,#E4E7DE); border-radius:100px;
  padding:10px 15px; cursor:pointer; transition:all .16s;
}
.sjx-faqbtn:hover{background:var(--sea,#12525E); color:#fff; border-color:var(--sea,#12525E)}
.sjx-faqbtn:focus-visible{outline:2px solid var(--brass,#B8863B); outline-offset:2px}
.sjx-faqcount{
  font-family:"Space Mono",monospace; font-size:11.5px; color:var(--muted,#5b6b6b);
  letter-spacing:.04em; width:100%;
}
.faq details.sjx-hide{display:none}
.sjx-hl{background:rgba(184,134,59,.28); border-radius:2px; padding:0 1px}
.sjx-noresult{
  padding:22px 4px; color:var(--muted,#5b6b6b); font-style:italic; display:none;
}
.sjx-noresult.on{display:block}

/* ---------- 5. Card / table polish ---------- */
.card{transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 0 rgba(11,49,56,.05),0 16px 40px -22px rgba(11,49,56,.5);
  border-color:#d6ddcd;
}
.kx a{transition:transform .18s cubic-bezier(.2,.7,.2,1), border-color .18s, background .18s}
.kx a:hover{transform:translateY(-2px)}
.tbl tbody tr{transition:background .16s}

/* scroll affordance on wide tables */
.tbl-wrap{position:relative}
.tbl-wrap.sjx-scrollable::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:44px;
  background:linear-gradient(90deg,rgba(239,241,236,0),rgba(239,241,236,.92));
  pointer-events:none; opacity:1; transition:opacity .2s;
}
.tbl-wrap.sjx-scrollable.sjx-end::after{opacity:0}
.sjx-swipe{
  display:none; font-family:"Space Mono",monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#5b6b6b);
  margin-top:7px;
}
.tbl-wrap.sjx-scrollable + .sjx-swipe{display:block}

/* ---------- 6. Meter (inline proportion bar) ---------- */
.sjx-meters{margin-top:22px; display:grid; gap:14px}
.sjx-meter-row{display:grid; grid-template-columns:150px 1fr auto; gap:14px; align-items:center}
.sjx-meter-lbl{font-size:14.5px; color:var(--ink,#12262A); line-height:1.25}
.sjx-meter-track{height:9px; background:rgba(11,49,56,.09); border-radius:100px; overflow:hidden}
.sjx-meter-fill{
  display:block;              /* <i> is inline by default — without this, width never applies */
  height:100%; border-radius:100px; width:0;
  transition:width 1s cubic-bezier(.2,.7,.2,1);
}
.sjx-meter-val{
  font-family:"Space Mono",monospace; font-size:13px; color:var(--brass-text,#89642C);
  font-weight:700; white-space:nowrap; min-width:52px; text-align:right;
}
@media(max-width:600px){
  .sjx-meter-row{grid-template-columns:1fr auto; grid-template-areas:"l v" "t t"; gap:6px 10px}
  .sjx-meter-lbl{grid-area:l} .sjx-meter-val{grid-area:v} .sjx-meter-track{grid-area:t}
}

/* ---------- 7. Verdict / key-number strip ---------- */
.sjx-keys{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; background:var(--paper-2,#E4E7DE);
  border:1px solid var(--paper-2,#E4E7DE); border-radius:10px;
  overflow:hidden; margin-top:24px;
}
.sjx-key{background:#fff; padding:18px 20px}
.sjx-key b{
  display:block; font-family:"Space Mono",monospace; font-size:23px;
  color:var(--deep,#0B3138); line-height:1.05; letter-spacing:-.01em;
}
.sjx-key span{
  display:block; margin-top:7px; font-size:13.5px;
  color:var(--muted,#5b6b6b); line-height:1.4;
}

/* ---------- 8. Smooth details ---------- */
.faq details{transition:background .18s}
.faq details[open]{background:rgba(184,134,59,.035)}
.faq summary{transition:color .16s}
.faq summary:hover{color:var(--brass-text,#89642C)}
.faq summary:focus-visible{outline:2px solid var(--brass,#B8863B); outline-offset:3px; border-radius:4px}
.faq details[open] > *:not(summary){animation:sjxFade .28s ease both}
@keyframes sjxFade{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

/* ---------- 9. Reduced motion & print ---------- */
@media(prefers-reduced-motion:reduce){
  .sjx-prog i{transition:none}
  .sjx-top{transition:opacity .01s}
  .card:hover,.kx a:hover{transform:none}
  .sjx-meter-fill{transition:none}
  .faq details[open] > *:not(summary){animation:none}
}
@media print{
  .sjx-prog,.sjx-top,.sjx-faqbar,.sjx-anchor,.sjx-swipe{display:none !important}
  .faq details{display:block !important}
  .faq details > *:not(summary){display:block !important}
}

/* ---------- 10. Interactive widget shell (shared by page tools) ---------- */
.sjx-tool{
  background:var(--deep,#0B3138); color:var(--paper,#EFF1EC);
  border-radius:12px; overflow:hidden; margin-top:26px;
  box-shadow:0 2px 0 rgba(11,49,56,.06),0 18px 46px -26px rgba(11,49,56,.7);
}
.sjx-tool-top{
  padding:20px 26px 18px; border-bottom:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.sjx-tool-title{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:18px; color:#fff}
.sjx-tool-tag{
  font-family:"Space Mono",monospace; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--brass-lt,#d0a862);
}
.sjx-tool-body{padding:22px 26px 26px}
.sjx-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 26px}
@media(max-width:680px){ .sjx-grid{grid-template-columns:1fr} }

.sjx-f{display:flex; flex-direction:column; gap:8px}
.sjx-f label{
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:#a9c6c6;
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.sjx-f label b{
  font-family:"Space Mono",monospace; color:var(--brass-lt,#d0a862);
  font-size:13px; font-weight:700;
}
.sjx-f select{
  width:100%; background:rgba(255,255,255,.07); color:#fff;
  border:1px solid rgba(255,255,255,.18); border-radius:8px;
  padding:11px 12px; font-family:"Newsreader",Georgia,serif; font-size:15.5px;
}
.sjx-f select option{background:#0B3138; color:#fff}
.sjx-f select:focus{outline:2px solid var(--brass,#B8863B); outline-offset:1px}
.sjx-f input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:5px; border-radius:100px;
  background:rgba(255,255,255,.18); outline:none;
}
.sjx-f input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:19px; height:19px; border-radius:50%;
  background:var(--brass-lt,#d0a862); cursor:pointer; border:2px solid var(--deep,#0B3138);
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}
.sjx-f input[type=range]::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%; background:var(--brass-lt,#d0a862);
  cursor:pointer; border:2px solid var(--deep,#0B3138);
}
.sjx-f input[type=range]:focus-visible{outline:2px solid var(--brass,#B8863B); outline-offset:4px}

.sjx-seg{display:flex; gap:0; border:1px solid rgba(255,255,255,.2); border-radius:100px; overflow:hidden}
.sjx-seg button{
  flex:1; background:transparent; color:#cfe0e0; border:none; cursor:pointer;
  padding:10px 8px; font-family:"Space Mono",monospace; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; transition:background .16s,color .16s;
}
.sjx-seg button + button{border-left:1px solid rgba(255,255,255,.2)}
.sjx-seg button[aria-pressed="true"]{background:var(--brass,#B8863B); color:#fff}
.sjx-seg button:focus-visible{outline:2px solid var(--brass-lt,#d0a862); outline-offset:-2px}

.sjx-out{
  margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
}
.sjx-out-big{
  font-family:"Space Mono",monospace; font-size:34px; font-weight:700; color:#fff;
  line-height:1; letter-spacing:-.01em;
}
.sjx-out-sub{font-size:14.5px; color:#a9c6c6; margin-top:9px; line-height:1.5; max-width:62ch}
.sjx-out-sub b{color:var(--brass-lt,#d0a862); font-weight:700}
.sjx-bar{
  margin-top:16px; height:10px; border-radius:100px;
  background:rgba(255,255,255,.13); overflow:hidden; display:flex;
}
.sjx-bar i{display:block; height:100%; transition:width .55s cubic-bezier(.2,.7,.2,1)}
.sjx-bar i + i{box-shadow:-2px 0 0 var(--deep,#0B3138)}
.sjx-legend{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:13px;
  font-family:"Space Mono",monospace; font-size:11px; color:#c5dede; letter-spacing:.03em;
}
.sjx-legend span{display:flex; align-items:center; gap:7px}
.sjx-legend i{width:10px; height:10px; border-radius:2px; display:block}

.sjx-verdict{
  margin-top:18px; padding:15px 18px; border-radius:9px;
  background:rgba(255,255,255,.07); border-left:3px solid var(--brass,#B8863B);
  font-size:15.5px; line-height:1.55; color:#e7f0f0;
}
.sjx-verdict.yes{border-left-color:#5DBB7E}
.sjx-verdict.no{border-left-color:#E0705C}
.sjx-verdict b{color:#fff}
.sjx-note{
  margin-top:15px; font-family:"Space Mono",monospace; font-size:10.5px;
  color:#8fb0b0; letter-spacing:.02em; line-height:1.6;
}
@media(prefers-reduced-motion:reduce){
  .sjx-bar i{transition:none}
}

/* label + value stack on narrow screens so long hint text doesn't crowd the label */
@media(max-width:600px){
  .sjx-f label{flex-direction:column; align-items:flex-start; gap:4px}
  .sjx-out-big{font-size:28px}
}

/* ---------- 11. Spacing repair: .lede followed directly by a prose block ----------
   .lede carries only margin-top and .prose p only margin-bottom, so the two
   collapse into a single unbroken column when they are adjacent siblings.
   Scoped to the adjacency so no existing layout changes unless it has the bug. */
.lede + .prose,
.lede + .split,
.lede + .tbl-wrap{margin-top:18px}