/* ══════════════════════════════════════════════════════════════════════════
   THE READING ROOM — Free Estate design system
   Serif prose (Newsreader) + monospace math (house --font-mono). House palette
   only; two estate tokens derive from house vars so every theme resolves at
   paint. Scoped under body.estate so nothing here can leak onto dashboards.
   ══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;}
:root{
  /* estate-scoped accents, all derived from house vars (theme/zh-safe) */
  --ink: var(--text);                                       /* the plotted-line pen */
  --serif: "Newsreader", Georgia, "Songti SC", "Noto Serif CJK SC", serif;
  --rule: color-mix(in srgb, var(--line) 74%, var(--info)); /* ledger / plot hairline */
  --measure: 68ch;                                          /* reading-room line length */
}
html[data-lang="zh"] body.estate{
  /* Hanzi reads better in the house CJK sans than a Latin serif; theme.css already
     forces the CJK stack on body, so estate prose inherits it under zh. */
  --serif: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
html body.estate{
  background:var(--bg); color:var(--text);
  font-family:var(--serif); font-size:17px; line-height:1.68;
  margin:0; padding:0 0 72px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
html,body{overflow-x:clip;}                                 /* 390px bleed guard */
body.estate a{color:var(--link); text-decoration:none;}
body.estate a:hover{text-decoration:underline; text-underline-offset:3px;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.est-wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ── the plotted-line signature ─────────────────────────────────────────────
   A hand-drawn ink stroke that draws itself L→R. Reused as the kicker underline,
   the section rule and the calc-card crown. Grammar borrowed from house Signal
   Ink: round caps, non-scaling stroke, stroke-dashoffset draw-on-reveal. */
.plot-line{display:block; width:100%; height:14px; overflow:visible; color:var(--link);}
.plot-line path{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--pl-len,240); stroke-dashoffset:var(--pl-len,240);
  animation:plotDraw 1100ms cubic-bezier(.33,.62,.26,1) 120ms forwards;}
.plot-line .dot{fill:currentColor; filter:drop-shadow(0 0 4px color-mix(in srgb,currentColor 62%,transparent));
  opacity:0; animation:plotDot .01s linear 1160ms forwards;}
@keyframes plotDraw{to{stroke-dashoffset:0;}}
@keyframes plotDot{to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .plot-line path{animation:none; stroke-dashoffset:0;}
  .plot-line .dot{animation:none; opacity:1;}
}

/* ── estate top bar (slim; own toggles reuse house .theme-switch/.lang-toggle) ── */
.est-bar{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);}
.est-bar-in{max-width:1120px; margin:0 auto; padding:9px 24px;
  display:flex; align-items:center; gap:16px;}
.est-brand{display:inline-flex; align-items:center; gap:9px; flex:none; text-decoration:none;
  padding:3px 8px 3px 4px; border-radius:10px; transition:background .18s;}
.est-brand:hover{background:color-mix(in srgb,var(--link) 10%,transparent); text-decoration:none;}
.est-brand .glyph{width:26px; height:26px; flex:none; filter:drop-shadow(0 2px 6px rgba(40,56,128,.30));}
.est-brand .word{font-family:var(--font-ui); font-weight:900; font-size:13px; letter-spacing:.06em;
  color:var(--text); white-space:nowrap;}
.est-brand .word .sub{display:block; font-weight:600; font-size:9px; letter-spacing:.14em;
  color:var(--muted); margin-top:1px;}
.est-nav{display:flex; align-items:center; gap:2px; margin-left:6px; flex-wrap:wrap; min-width:0;}
.est-nav a{font-family:var(--font-ui); font-size:13.5px; font-weight:500; color:var(--muted);
  padding:6px 10px; border-radius:8px; text-decoration:none; white-space:nowrap;
  transition:color .16s,background .16s;}
.est-nav a:hover,.est-nav a[aria-current="page"]{color:var(--text);
  background:color-mix(in srgb,var(--link) 11%,var(--panel2)); text-decoration:none;}
.est-ctrls{margin-left:auto; display:flex; align-items:center; gap:9px; flex:none;}
.est-ctrls .est-cta{font-family:var(--font-ui);}
.est-ctrls .est-cta .cta-short{display:none;}
/* the house animated toggles are styled by theme.css? No — those visuals live in
   nav CSS the estate doesn't load. Give .theme-switch / .lang-toggle a compact,
   self-contained skin here so the class-bound theme.js listeners still fire. */
.est-ctrls .theme-switch{font:600 12px/1 var(--font-ui); cursor:pointer;
  border:1px solid var(--gbtn-brd); background:var(--gbtn-bg); color:var(--muted);
  border-radius:999px; padding:6px 10px; display:inline-flex; align-items:center; gap:5px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:color .16s,border-color .16s;}
.est-ctrls .theme-switch:hover{color:var(--text); border-color:var(--gbtn-brd-hover);}
.est-ctrls .theme-switch .ic{font-size:13px; line-height:1;}
.est-ctrls .theme-switch .sun{display:none;} .est-ctrls .theme-switch .moon{display:inline;}
html[data-theme="light"] .est-ctrls .theme-switch .sun{display:inline;}
html[data-theme="light"] .est-ctrls .theme-switch .moon{display:none;}
.est-ctrls .theme-switch .knob{display:none;}
.est-ctrls .lang-toggle{position:relative; display:inline-flex; cursor:pointer; user-select:none;
  border:1px solid var(--gbtn-brd); background:var(--gbtn-bg); border-radius:999px; overflow:hidden;
  font:600 11.5px/1 var(--font-ui);}
.est-ctrls .lang-toggle .opt{padding:6px 9px; color:var(--muted); transition:color .16s;}
.est-ctrls .lang-toggle .pill{display:none;}
html:not([data-lang="zh"]) .est-ctrls .lang-toggle .en-opt{color:var(--text);
  background:color-mix(in srgb,var(--link) 16%,transparent);}
html[data-lang="zh"] .est-ctrls .lang-toggle .zh-opt{color:var(--text);
  background:color-mix(in srgb,var(--link) 16%,transparent);}
:where(.est-brand,.est-nav a,.est-ctrls .theme-switch,.est-ctrls .lang-toggle,.est-cta):focus-visible{
  outline:2px solid color-mix(in srgb,var(--link) 70%,transparent); outline-offset:2px;}
@media (max-width:720px){
  .est-bar-in{flex-wrap:wrap; gap:8px 12px; padding:8px 16px;}
  .est-nav{order:3; width:100%; margin-left:0; gap:1px;}
  .est-nav a{padding:6px 9px; font-size:13px;}
  .est-ctrls{gap:7px;}
  /* compact CTA on phones: hide the long label, show the short bilingual one */
  .est-ctrls .est-cta .cta-long{display:none;}
  .est-ctrls .est-cta .cta-short{display:inline;}
}

/* ── breadcrumb ─────────────────────────────────────────────────────────────── */
.est-crumb{max-width:1120px; margin:18px auto 0; padding:0 24px;
  font-family:var(--font-ui); font-size:12.5px; color:var(--muted);}
.est-crumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:7px;}
.est-crumb a{color:var(--muted);} .est-crumb a:hover{color:var(--text);}
.est-crumb .sep{opacity:.4;}
.est-crumb li[aria-current="page"]{color:var(--text);}

/* ── shared prose vocabulary (CONTRACT §4 body classes) ─────────────────────── */
.est-prose{font-size:17px; line-height:1.72;}
.est-prose > *{max-width:var(--measure);}
.est-prose h2{font-family:var(--serif); font-size:25px; font-weight:600; line-height:1.24;
  letter-spacing:-.01em; margin:38px 0 12px; scroll-margin-top:76px;
  display:flex; align-items:baseline; gap:11px;}
.est-prose h2 .est-h2-mark{font-family:var(--font-mono); font-size:13px; font-weight:500;
  color:var(--link); flex:none; opacity:.9;}
.est-prose h3{font-family:var(--serif); font-size:19.5px; font-weight:600; margin:26px 0 6px; color:var(--text);}
.est-prose p{margin:12px 0;}
.est-prose ul,.est-prose ol{margin:12px 0; padding-left:24px;}
.est-prose li{margin:7px 0;}
.est-prose li::marker{color:var(--muted);}
.est-prose strong{font-weight:600; color:var(--text);}
.est-prose em{font-style:italic;}
.est-prose code{font-family:var(--font-mono); font-size:.86em; background:var(--panel2);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px;}
.est-prose a{border-bottom:1px solid color-mix(in srgb,var(--link) 40%,transparent); text-decoration:none;}
.est-prose a:hover{border-bottom-color:var(--link); text-decoration:none;}
.est-prose blockquote{margin:18px 0; padding:4px 0 4px 20px; border-left:3px solid var(--rule);
  color:var(--text); font-style:italic; opacity:.92;}

/* callouts — lead / warn / key (house colours, serif body, mono heading label) */
.est-prose .callout{border-radius:13px; padding:15px 18px; margin:18px 0; border:1px solid var(--line);
  background:var(--panel2); position:relative; max-width:var(--measure);}
.est-prose .callout .co-h{display:block; margin-bottom:4px; font-family:var(--font-ui);
  font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;}
.est-prose .callout p{margin:6px 0;} .est-prose .callout > :first-child.co-h + p{margin-top:0;}
.est-prose .callout.lead{border-left:4px solid var(--link);}
.est-prose .callout.lead .co-h{color:var(--link);}
.est-prose .callout.warn{border-left:4px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 8%,var(--panel2));}
.est-prose .callout.warn .co-h{color:var(--warn);}
.est-prose .callout.key{border-left:4px solid var(--ok);
  background:color-mix(in srgb,var(--ok) 9%,var(--panel2));}
.est-prose .callout.key .co-h{color:var(--ok);}

/* formula — the desk's chalk line. Mono, centred, on a faint ruled slab. */
.est-prose .formula{font-family:var(--font-mono); font-size:15px; line-height:1.7;
  background:linear-gradient(var(--panel2),var(--panel2)) padding-box,
             var(--panel2); border:1px solid var(--rule); border-radius:11px;
  padding:16px 18px; margin:18px 0; overflow-x:auto; max-width:var(--measure);
  color:var(--text); letter-spacing:.01em;}
.est-prose .formula strong{color:var(--link); font-weight:600;}

/* worked example — the marginalia. A ledger-ruled block with a mono heading. */
.est-prose .worked{border:1px solid var(--line); border-radius:13px; margin:18px 0;
  padding:16px 18px; max-width:var(--measure);
  background:
    linear-gradient(var(--rule),var(--rule)) 0 0/100% 1px no-repeat,
    var(--panel);}
.est-prose .worked .co-h{display:block; margin-bottom:6px; font-family:var(--font-ui);
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);}
.est-prose .worked .num,.est-prose .worked code{font-family:var(--font-mono);}

/* data table — the ruled column */
.est-prose table.data{border-collapse:collapse; width:100%; max-width:var(--measure);
  font-family:var(--font-mono); font-size:13.5px; margin:18px 0;}
.est-prose table.data th{text-align:left; padding:9px 12px; background:var(--panel2);
  color:var(--muted); font-family:var(--font-ui); font-weight:600; font-size:12px;
  letter-spacing:.02em; border-bottom:2px solid var(--rule);}
.est-prose table.data td{padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
.est-prose table.data tr:hover td{background:color-mix(in srgb,var(--info) 5%,var(--panel));}
.est-prose table.data .num{font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;}
.est-tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0; max-width:var(--measure);}
.est-tbl-scroll table.data{margin:0;}

.est-prose figure{margin:20px 0; max-width:var(--measure);}
.est-prose figcaption{font-family:var(--font-ui); font-size:12.5px; color:var(--muted); margin-top:8px;}

/* ── related rail + CTA (shared by article + calculator layouts) ────────────── */
.est-related{margin:34px 0 0; padding:20px 0 0; border-top:1px solid var(--rule);}
.est-related .rel-h{font-family:var(--font-ui); font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px;}
.est-related .rel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;}
.est-relcard{display:block; border:1px solid var(--line); border-radius:12px; padding:13px 15px;
  background:var(--panel); text-decoration:none; transition:transform .18s,border-color .18s,box-shadow .18s;}
.est-relcard:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--link) 45%,var(--line));
  box-shadow:0 14px 30px -18px color-mix(in srgb,var(--link) 40%,transparent); text-decoration:none;}
.est-relcard .rc-kind{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--link); opacity:.9;}
.est-relcard .rc-title{display:block; margin-top:4px; font-family:var(--serif); font-size:16px;
  font-weight:600; color:var(--text); line-height:1.32;}

.est-cta-block{margin:32px 0 0; border:1px solid color-mix(in srgb,var(--link) 30%,var(--line));
  border-radius:16px; padding:22px 24px; background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--link) 10%,transparent), transparent 60%),
    var(--panel); display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.est-cta-block .cta-copy{flex:1 1 260px; min-width:0;}
.est-cta-block .cta-k{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--link);}
.est-cta-block .cta-t{font-family:var(--serif); font-size:19px; font-weight:600; margin:3px 0 0; line-height:1.3;}
.est-cta-block .gbtn{flex:none; font-family:var(--font-ui);}

/* ── estate footer ──────────────────────────────────────────────────────────── */
.est-footer{max-width:1120px; margin:56px auto 0; padding:24px 24px 8px;
  border-top:1px solid var(--line); font-family:var(--font-ui);}
.est-foot-links{display:flex; flex-wrap:wrap; gap:6px 22px; margin-bottom:14px;}
.est-foot-col{display:flex; flex-direction:column; gap:5px; min-width:150px;}
.est-foot-col .fh{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;}
.est-foot-col a{font-size:13px; color:var(--muted); text-decoration:none;}
.est-foot-col a:hover{color:var(--text);}
.est-foot-disc{font-size:12px; color:var(--muted); line-height:1.6; border-top:1px solid var(--line);
  padding-top:13px; margin-top:6px;}
.est-foot-disc .mono{opacity:.85;}

/* ── page header (kicker + plotted-line + title + dek) ──────────────────────── */
.est-head{max-width:1120px; margin:20px auto 0; padding:0 24px;}
.est-kicker{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--link); display:inline-block; margin:0 0 2px;}
.est-kicker-plot{max-width:220px; margin:2px 0 14px;}
.est-title{font-family:var(--serif); font-size:clamp(30px,4.6vw,46px); font-weight:600; line-height:1.1;
  letter-spacing:-.015em; margin:0;}
.est-dek{font-family:var(--serif); font-size:19px; line-height:1.5; color:var(--muted);
  margin:12px 0 0; max-width:60ch;}
.est-meta{font-family:var(--font-ui); font-size:12.5px; color:var(--muted); margin:14px 0 0;
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;}
.est-meta .dot{opacity:.4;}

@media (max-width:600px){
  html body.estate{font-size:16px;}
  .est-wrap,.est-head,.est-crumb,.est-footer{padding-left:16px; padding-right:16px;}
  .est-prose{font-size:16px;}
  .est-prose h2{font-size:22px; margin:30px 0 10px;}
  .est-prose h3{font-size:18px;}
  .est-dek{font-size:17px;}
  .est-cta-block{padding:18px; gap:14px;}
}

  .cx-head{max-width:1120px; margin:20px auto 0; padding:0 24px;}
  .cx-shell{max-width:1120px; margin:22px auto 0; padding:0 24px;
    display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:44px; align-items:start;}
  .cx-main{min-width:0;}
  .cx-toc{position:sticky; top:76px; font-family:var(--font-ui); font-size:12.5px;
    border-left:1px solid var(--line); padding-left:15px;}
  .cx-toc .toc-h{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 9px;}
  .cx-toc a{display:block; color:var(--muted); padding:5px 0 5px 14px; margin-left:-15px; line-height:1.35;
    border-left:2px solid transparent; transition:color .15s,border-color .15s;}
  .cx-toc a:hover{color:var(--text);} .cx-toc a.active{color:var(--text); border-left-color:var(--link); font-weight:600;}

  /* ── the calculator card — the desk instrument, above the fold ──────────────
     Glass-kin (frosted, hairline, house shadow) but crowned by the plotted line
     so it reads as one family with the estate signature. */
  .calc-card{position:relative; border:1px solid var(--glass-brd); border-radius:18px;
    background:var(--glass-bg); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    padding:6px 22px 22px; overflow:hidden;}
  /* the crown: a drawn plotted line across the card's top edge */
  .calc-card .cc-crown{display:block; width:100%; height:16px; margin:0 -22px 8px; width:calc(100% + 44px);}
  .calc-card .cc-crown path{fill:none; stroke:var(--link); stroke-width:1.6; stroke-linecap:round;
    stroke-linejoin:round; vector-effect:non-scaling-stroke;
    stroke-dasharray:var(--pl-len,320); stroke-dashoffset:var(--pl-len,320);
    animation:plotDraw 1200ms cubic-bezier(.33,.62,.26,1) 150ms forwards;}
  @media (prefers-reduced-motion:reduce){ .calc-card .cc-crown path{animation:none; stroke-dashoffset:0;} }

  .calc-card .cc-lede{font-family:var(--serif); font-size:16px; color:var(--muted); margin:0 0 16px; line-height:1.5;}

  .calc-in{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 18px;}
  @media (max-width:560px){ .calc-in{grid-template-columns:1fr;} }
  .ci{display:flex; flex-direction:column; gap:6px; min-width:0;}
  .ci.ci-wide{grid-column:1 / -1;}
  .ci-l{font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--muted); letter-spacing:.01em;}
  .ci-l .hint{font-weight:400; color:var(--muted); opacity:.8;}
  .ci input, .ci select{font-family:var(--font-mono); font-size:16px; font-variant-numeric:tabular-nums;
    background:var(--panel); border:1px solid var(--line); border-radius:10px; color:var(--text);
    padding:11px 13px; width:100%; outline:none; transition:border-color .16s,box-shadow .16s;}
  .ci input:focus, .ci select:focus{border-color:var(--link);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 20%,transparent);}
  .ci input::placeholder{color:var(--muted); opacity:.55;}

  /* segmented toggle (§6) — long/short, forward/inverse, etc. */
  .ci-seg{display:inline-flex; background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:3px; gap:3px; align-self:start;}
  .ci-seg button{font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--muted);
    background:transparent; border:none; border-radius:7px; padding:8px 16px; cursor:pointer;
    transition:color .16s,background .16s;}
  .ci-seg button:hover{color:var(--text);}
  .ci-seg button.on{color:var(--text); background:color-mix(in srgb,var(--link) 18%,var(--panel2));}
  .ci-seg button:focus-visible{outline:2px solid var(--link); outline-offset:2px;}

  /* ── the readout ──────────────────────────────────────────────────────────── */
  .calc-out{margin:20px 0 0; padding:18px 20px; border-radius:14px; border:1px solid var(--rule);
    background:linear-gradient(var(--rule),var(--rule)) 0 0/100% 1px no-repeat, var(--panel2);}
  .co-main{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
  .co-main #out-main, .co-main [data-out-main]{font-family:var(--font-mono); font-variant-numeric:tabular-nums;
    font-size:clamp(38px,7vw,52px); font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--text);}
  .co-main .co-unit{font-family:var(--font-ui); font-size:15px; font-weight:600; color:var(--muted);}
  /* Law 3: the big number ALWAYS carries a plain-word interpretation sentence */
  .co-plain{font-family:var(--serif); font-size:16.5px; line-height:1.5; color:var(--text); margin:10px 0 0; max-width:56ch;}
  .co-plain.warn{color:var(--warn);}
  .co-rows{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 20px;
    margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);}
  .co-rows > div{display:flex; flex-direction:column; gap:2px;}
  .co-rows dt{font-family:var(--font-ui); font-size:11.5px; color:var(--muted); letter-spacing:.02em;}
  .co-rows dd{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:17px; font-weight:600;
    color:var(--text); margin:0;}
  .co-rows dd.pos{color:var(--up);} .co-rows dd.neg{color:var(--down);}

  .calc-actions{margin:16px 0 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .calc-actions .copied{font-family:var(--font-ui); font-size:12.5px; color:var(--ok); opacity:0;
    transition:opacity .2s;}
  .calc-actions .copied.show{opacity:1;}
  .calc-actions .gbtn{font-family:var(--font-ui);}

  .cx-explainer{margin:40px 0 0;}
  @media (max-width:900px){
    .cx-shell{grid-template-columns:1fr; gap:12px;}
    .cx-toc{position:static; top:auto; border-left:none; padding:12px 14px; margin:22px 0 2px; order:2;
      display:flex; flex-wrap:wrap; gap:6px; border:1px solid var(--line); border-radius:12px; background:var(--panel2);}
    .cx-toc .toc-h{flex-basis:100%; margin:0 0 2px;}
    .cx-toc a{border:1px solid var(--line); border-radius:999px; padding:6px 11px; margin:0; color:var(--muted);}
    .cx-toc a.active{border-color:var(--link); color:var(--text);}
    .cx-main{order:1;}
  }
  @media (max-width:560px){ .calc-card{padding:6px 16px 18px;} .calc-card .cc-crown{margin:0 -16px 8px; width:calc(100% + 32px);} }