/* ============================================================
   CourtBaseline premium layer v2
   Additive. Loads after the base sheet and overrides it.
   Blueprint-technical register: hairlines, tabular numerals,
   drawing callouts, measured motion. Dark mode included.
   ============================================================ */

:root{
  --ink:#0B1113; --ink-70:#3A4648; --ink-45:#6B7678; --ink-25:#9AA4A4;
  --paper:#EBEEEB; --paper-2:#E981E4E0; --white:#FAFBF9;
  --court:#0F4D73; --court-lift:#1A6A9C;
  --turf:#35604A; --rule:#C3CBC5; --hair:#D6DCD7; --mark:#B8941F;
  --shadow-1:0 1px 2px rgba(11,17,19,.04), 0 2px 8px rgba(11,17,19,.04);
  --shadow-2:0 2px 4px rgba(11,17,19,.05), 0 12px 32px rgba(11,17,19,.07);
  --grid:rgba(20,86,127,.055);
}
:root{ --paper-2:#E2E7E3; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E8EDEA; --ink-70:#B2BCBA; --ink-45:#8A9594; --ink-25:#5E6A69;
    --paper:#0C1214; --paper-2:#121A1C; --white:#131B1E;
    --court:#6FB6E2; --court-lift:#8CC9EE;
    --turf:#7FB394; --rule:#273436; --hair:#1E292B; --mark:#D9B64A;
    --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
    --shadow-2:0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.4);
    --grid:rgba(111,182,226,.07);
  }
}
:root[data-theme="dark"]{
  --ink:#E8EDEA; --ink-70:#B2BCBA; --ink-45:#8A9594; --ink-25:#5E6A69;
  --paper:#0C1214; --paper-2:#121A1C; --white:#131B1E;
  --court:#6FB6E2; --court-lift:#8CC9EE;
  --turf:#7FB394; --rule:#273436; --hair:#1E292B; --mark:#D9B64A;
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --shadow-2:0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.4);
  --grid:rgba(111,182,226,.07);
}

/* ---- surface: a faint drafting grid, the subject matter as texture ---- */
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px, 56px 56px;
  background-position:-1px -1px, -1px -1px;
  font-feature-settings:"kern" 1, "liga" 1, "onum" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* ---- type ---- */
h1,h2,h3{ letter-spacing:-.032em; }
h1{ text-wrap:balance; }
h2{ text-wrap:balance; }
p,li{ text-wrap:pretty; }
.lede,.lede2,.sub,.answer{ font-optical-sizing:auto; }
b,strong{ font-weight:500; letter-spacing:-.004em; }

/* numerals: tabular everywhere a figure appears */
.n,.num .k,.dim,td.n,.k,.big,.range,table td,table th,
.out .big,.steps li::before,.cell .n{ font-variant-numeric:tabular-nums; }

/* ---- masthead: hairline, sticky, blur ---- */
header.mast,header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--hair);
}
.logo{ font-size:1.09rem; letter-spacing:-.04em; }
.logo span{ color:var(--court); }
header nav a,.mast nav a{
  position:relative; padding-block:.3rem; transition:color .18s ease;
}
header nav a::after,.mast nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--court); transition:right .28s cubic-bezier(.2,.7,.3,1);
}
header nav a:hover::after,.mast nav a:hover::after{ right:0; }
header nav a:hover,.mast nav a:hover{ color:var(--court); }

/* ---- eyebrow: drawing callout ---- */
.eyebrow{ color:var(--ink-45); letter-spacing:.16em; }
.eyebrow::before{ background:var(--mark); width:2rem; height:1px; }

/* ---- hero numbers ---- */
.numbers{ border-top:1px solid var(--hair); gap:1.5rem; }
.num .k{
  letter-spacing:-.045em;
  background:linear-gradient(180deg, var(--ink) 55%, var(--ink-70));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.num .l{ color:var(--ink-45); }

/* ---- figures: labeled technical plates ---- */
figure,.plan-fig,.stack,.calc,.box{
  background:var(--white);
  border:1px solid var(--hair);
  box-shadow:var(--shadow-1);
  border-radius:2px;
}
figure{ position:relative; overflow:hidden; }
figure::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,var(--court) 0 28%,var(--hair) 28%);
}
figcaption{
  border-top:1px dashed var(--hair);
  padding-top:.8rem; color:var(--ink-45);
}
figcaption strong,figcaption b{ color:var(--ink-70); }

/* ---- tables: drafting schedule ---- */
table{
  border:1px solid var(--hair); border-collapse:separate; border-spacing:0;
  box-shadow:var(--shadow-1); border-radius:2px; overflow:hidden;
  background:var(--white);
}
table th{
  background:var(--paper-2); color:var(--ink);
  font-family:var(--mono); font-size:.69rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  border:0; border-bottom:1px solid var(--rule); padding:.8rem .85rem;
}
table td{
  border:0; border-bottom:1px solid var(--hair); padding:.72rem .85rem;
  vertical-align:top;
}
table tr:last-child td{ border-bottom:0; }
table tbody tr{ transition:background .15s ease; }
table tbody tr:hover{ background:var(--paper-2); }
td.n{ color:var(--court); font-weight:500; }
caption{ color:var(--ink-45); border-top:1px solid var(--hair); margin-top:-1px; }

/* ---- cards ---- */
.card,.cell{ border-radius:2px; }
.card{
  background:var(--white); border:1px solid var(--hair);
  box-shadow:var(--shadow-1);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
  position:relative; overflow:hidden;
}
.card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--court); transform:scaleY(0); transform-origin:top;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--rule); }
.card:hover::after{ transform:scaleY(1); }
.card h3{ color:var(--court); }
.grid{ background:var(--hair); border-color:var(--hair); }
.cell{ background:var(--white); transition:background .18s ease; }
.cell:hover{ background:var(--paper-2); }
.cell .n{ color:var(--mark); letter-spacing:.12em; }

/* ---- checklists ---- */
.check li::before{
  border:1.5px solid var(--court); background:transparent;
  transition:background .2s ease;
}
.check li:hover::before{ background:var(--court); }

/* ---- steps ---- */
.steps li{ border-top-width:2px; border-color:var(--court); }
.steps li::before{ color:var(--court); letter-spacing:.14em; }

/* ---- flag / aside ---- */
.flag{
  border-left:2px solid var(--mark);
  background:linear-gradient(90deg, color-mix(in srgb,var(--mark) 7%, transparent), transparent 60%);
  padding:.9rem 1rem; border-radius:0 2px 2px 0;
}

/* ---- FAQ ---- */
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{ transition:color .18s ease; }
.faq summary:hover{ color:var(--court); }
.faq summary::after{ transition:transform .25s ease, content 0s; color:var(--court); }
.faq details[open] summary{ color:var(--court); }
.faq details[open] .a{ animation:reveal .32s cubic-bezier(.2,.7,.3,1) both; }
@keyframes reveal{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }

/* ---- links ---- */
main a:not(.card):not(.btn):not(.logo){
  color:var(--court);
  text-decoration-color:color-mix(in srgb,var(--court) 35%, transparent);
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:text-decoration-color .18s ease, color .18s ease;
}
main a:not(.card):not(.btn):not(.logo):hover{
  color:var(--court-lift); text-decoration-color:var(--court-lift);
}

/* ---- buttons ---- */
.btn{
  border-radius:2px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); }
.btn:active{ transform:translateY(0); }

/* ---- forms ---- */
input,select{
  border-radius:2px; border-color:var(--rule);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:hover,select:hover{ border-color:var(--ink-45); }
input:focus,select:focus{
  outline:none; border-color:var(--court);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--court) 16%, transparent);
}
label{ color:var(--ink-45); letter-spacing:.1em; }
.bar i{ background:var(--hair); transition:background .3s ease; border-radius:1px; }
.bar i.on{ background:var(--court); }

/* ---- CTA band ---- */
.cta,.tail{
  background:
    radial-gradient(1100px 380px at 12% -10%, rgba(26,106,156,.26), transparent 62%),
    linear-gradient(180deg,#0B1113,#111A1D);
  position:relative; overflow:hidden;
}
.cta::before,.tail::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px,56px 56px;
}
.cta .wrap,.tail .wrap{ position:relative; }
.cta h2,.tail h2{ color:#FAFBF9; }

/* ---- section rhythm ---- */
section + section{ border-top:1px solid var(--hair); }
section{ position:relative; }

/* ---- breadcrumb ---- */
.crumb{ color:var(--ink-45); }
.crumb a{ color:var(--ink-45); }
.crumb a:hover{ color:var(--court); }

/* ---- footer ---- */
footer{ border-top:1px solid var(--hair); color:var(--ink-45); }
footer a{ color:var(--ink-70); transition:color .18s ease; }
footer a:hover{ color:var(--court); }

/* ---- scroll reveal ---- */
/* Reveal is opt-in and JS-gated: without JS, or if anything fails,
   every element stays fully visible. Never hide content behind script. */
@media (prefers-reduced-motion: no-preference){
  html.js-reveal .rv{ opacity:0; transform:translateY(10px); }
  html.js-reveal .rv.in{ opacity:1; transform:none;
    transition:opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1); }
}

/* ---- reading progress ---- */
#prog{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--court),var(--mark));
  transition:width .1s linear;
}

/* ---- theme toggle ---- */
.themer{
  background:transparent; border:1px solid var(--hair); color:var(--ink-45);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.34rem .6rem; cursor:pointer;
  border-radius:2px; transition:border-color .18s ease,color .18s ease;
}
.themer:hover{ border-color:var(--court); color:var(--court); }

/* ---- key facts block (AI citation surface) ---- */
.keyfacts{
  background:var(--white); border:1px solid var(--hair);
  border-left:2px solid var(--court);
  box-shadow:var(--shadow-1); border-radius:0 2px 2px 0;
  padding:1.15rem 1.3rem; margin-top:1.8rem;
}
.keyfacts h2,.keyfacts h3,.keyfacts .kf-label{
  font-family:var(--mono); font-size:.69rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45);
  margin:0 0 .75rem;
}
.keyfacts dl{ margin:0; display:grid; gap:.5rem;
  grid-template-columns:minmax(9rem,auto) 1fr; }
.keyfacts dt{ font-family:var(--mono); font-size:.78rem; color:var(--ink-45); }
.keyfacts dd{ margin:0; font-size:.95rem; color:var(--ink); }
@media (max-width:34rem){
  .keyfacts dl{ grid-template-columns:1fr; gap:.15rem; }
  .keyfacts dd{ margin-bottom:.5rem; }
}

/* ---- selection ---- */
::selection{ background:color-mix(in srgb,var(--mark) 32%, transparent); }

/* ---- focus ---- */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--mark); outline-offset:3px; border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ---- tables on narrow screens: scroll inside their own container,
       never the page. Edge fades hint that there is more to the right. ---- */
.tscroll{
  margin-top:1.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:2px;
  background:
    linear-gradient(90deg, var(--white) 30%, transparent),
    linear-gradient(90deg, transparent, var(--white) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(11,17,19,.10), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(11,17,19,.10), transparent) 100% 0;
  background-repeat:no-repeat; background-size:36px 100%,36px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}
.tscroll table{ margin-top:0; min-width:34rem; box-shadow:none; }
.tscroll + p{ margin-top:1.1rem; }

@media (max-width:48rem){
  td.n{ white-space:normal; }
  .tscroll table{ min-width:30rem; font-size:.875rem; }
  table th,table td{ padding:.6rem .65rem; }
}

/* long figures scroll rather than shrink to illegibility */
@media (max-width:40rem){
  figure svg{ min-width:19rem; }
  figure{ overflow-x:auto; }
}

/* nothing may push the page sideways */
html,body{ max-width:100%; overflow-x:hidden; }