/* assets/site-base.css  —  THE HOUSE RULES, applied to every page.
   ------------------------------------------------------------------
   site-nav.js loads this file (and site.css, the tokens) on every page
   that has  <script src="/assets/site-nav.js" defer></script>.
   A new page needs nothing else: no wrapper class, no font link, no
   copy of the rail maths. Everything below is what Manisha settled on in
   the September 2026 redesign, in one place.

   Two kinds of rule live here:
   1. DEFAULTS, written with :where() so they have zero specificity.
      A page's own <style> can override any of them by writing the
      same property. (Fonts, sizes, spacing, links, tables.)
   2. LOCKED rules, written with normal specificity so a page's own
      style cannot undo them. (One rail, no second gutter, light-only,
      interactives as wide as the rail, no overflow.)
   ------------------------------------------------------------------ */

/* ===== 1. rail: 1600 px max, 40 px gutter, one edge for everything ===== */
:root{--shell-max:var(--ua-page-max,1600px);}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
:where(body){margin:0;background:var(--ua-bg,#FAF9F6);color:var(--ua-text,#102436);
  font-family:var(--ua-font-sans,'Inter',system-ui,sans-serif);font-size:var(--ua-font-size-body,1rem);
  line-height:var(--ua-line-height-body,1.55);-webkit-font-smoothing:antialiased;}
*,*::before,*::after{box-sizing:border-box;}

/* LOCKED. main is the rail. Nothing inside it adds a second gutter. */
main:not(.ua-full){display:block;max-width:var(--shell-max,1600px);width:calc(100% - (2 * var(--ua-page-gutter,40px)));
  margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;}
main.ua-full{width:auto;max-width:none;}
main:not(.ua-full) > .wrap,main:not(.ua-full) > .pw,main:not(.ua-full) > .page,main:not(.ua-full) > .shell,main:not(.ua-full) > .container,main:not(.ua-full) > .ua-shell{width:auto;max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0;}
/* Full-layout pages (home, research, publications, resources, about) are
   full-bleed on purpose; their .pw inners ARE the rail and keep their width. */
main.ua-full .pw{width:calc(100% - (2 * var(--ua-page-gutter,40px)));max-width:var(--shell-max,1600px);margin-left:auto;margin-right:auto;}
body > div.wrap:has(> main){width:auto;max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0;}
/* Old reading-column caps (900-1240 px) that pages carry: lifted to the rail. */
main .wrap,main .prose,main .intro,main .dek,main .deck,main .lead,main .lede,main .sub,main .head-wrap,main .arrive,main .arr-in,main .outro,
main .pagehead h1,main .pagehead .sub,main header.hero,main header.top h1,main header.top p.lede,main .viewcard,main .canvas-wrap,main .words,
main .short-answer,main .limits-card,main .ua-next,main .ua-toc,main .citebox,main .demo,main .module,main .topbar-in,main .footer,main .serieswrap,
main .crosslink,main:not(.ua-full) .panel,main:not(.ua-full) .card,main .lab,main .stage,main .sim,main .tool,main figure,main table,main p,main li,main blockquote{max-width:none;}
@media (min-width:700px){main .wrap,main.wrap,main .prose,main .head-wrap,main .arrive,main .outro{padding-left:0;padding-right:0;}}
/* Full-bleed sections (heroes with an image) may leave the rail on purpose,
   but the page itself never scrolls sideways. */
html,body{overflow-x:clip;}
.ua-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}

/* ===== 2. light only ===== */
html{color-scheme:light;}
[data-theme="dark"]{color-scheme:light;}
.themebtn,#themeBtn,.theme-toggle{display:none !important;}

/* ===== 3. type: Source Serif 4 for titles and nav, Inter for text (scale A) ===== */
:where(h1,h2,h3,h4){font-family:var(--ua-font-display,'Source Serif 4',Georgia,serif);color:var(--ua-text,#102436);
  line-height:var(--ua-line-height-heading,1.15);text-wrap:balance;font-weight:600;margin:0;}
:where(main h1){font-size:var(--ua-font-size-page-title,2.6rem);letter-spacing:var(--ua-tracking-hero,-.035em);line-height:var(--ua-line-height-tight,1.08);}
:where(main h2){font-size:var(--ua-font-size-h2,1.7rem);letter-spacing:var(--ua-tracking-h2,-.02em);}
:where(main h3){font-size:var(--ua-font-size-h3,1.15rem);}
:where(main h4){font-size:1rem;}
:where(main p,main li,main dd,main figcaption,main td,main th){font-size:var(--ua-font-size-article,1.05rem);line-height:var(--ua-line-height-article,1.72);}
:where(main figcaption,main small,main .meta,main .cap){font-size:var(--ua-font-size-small,.875rem);color:var(--ua-text-muted,#5E6773);line-height:1.45;}
:where(.eyebrow,.kicker,.k){font-family:var(--ua-font-sans);font-size:var(--ua-font-size-eyebrow,.6875rem);font-weight:700;letter-spacing:var(--ua-tracking-label,.2em);text-transform:uppercase;color:var(--ua-accent-text,#C7382B);}
:where(a){color:var(--ua-accent-text,#C7382B);text-decoration:none;}
:where(a:hover){text-decoration:underline;text-underline-offset:2px;}
:where(code,kbd,pre){font-family:var(--ua-font-mono,ui-monospace,monospace);font-size:.92em;}
:where(button,input,select,textarea){font-family:inherit;font-size:inherit;}
:where(main strong){font-weight:650;}

/* ===== 4. spacing: tight. 48 px between sections, 16 px under a heading, 12 px between paragraphs ===== */
:where(main > :first-child){margin-top:0;}
:where(main p){margin:0 0 12px;}
:where(main ul,main ol){margin:0 0 12px;padding-left:1.3em;}
:where(main li + li){margin-top:4px;}
:where(main h2){margin:var(--ua-page-section-gap,48px) 0 var(--ua-heading-gap,16px);}
:where(main h3){margin:24px 0 10px;}
:where(main h4){margin:16px 0 8px;}
:where(main section + section,main article + article){margin-top:var(--ua-page-section-gap,48px);}
:where(main figure){margin:16px 0;}
:where(main hr){border:0;border-top:1px solid var(--ua-border,#E1E6EA);margin:32px 0;}
:where(main blockquote){margin:16px 0;padding:0 0 0 16px;border-left:3px solid var(--ua-accent,#FF5F43);}
:where(main .pagehead,main header.top,main .head){margin-bottom:24px;}
:where(main .pagehead h1 + p,main header.top h1 + p,main h1 + p){margin-top:8px;}

/* ===== 5. hero: text left, picture right, picture fades into the page ===== */
:where(.ua-hero){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;
  padding:var(--ua-hero-padding,36px) 0;min-height:var(--ua-hero-visual-min-h,240px);}
:where(.ua-hero .ua-hero-img){position:relative;min-height:var(--ua-hero-visual-min-h,240px);}
:where(.ua-hero .ua-hero-img img){width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);}
:where(.ua-hero p){font-size:1.15rem;line-height:1.55;color:var(--ua-text-secondary,#435363);}
@media (max-width:1000px){:where(.ua-hero){grid-template-columns:1fr;gap:16px;padding:20px 0;}:where(.ua-hero .ua-hero-img){min-height:200px;}}

/* ===== 6. interactives: as wide as the rail, crisp, never overflowing ===== */
:where(main img,main video,main iframe,main svg){max-width:100%;height:auto;}
:where(main canvas){display:block;max-width:100%;}
:where(main figure > canvas,main figure > svg,main figure > img,main .panel > canvas,main .demo > canvas,main .demo-body > canvas,main .card > canvas,main .lab > canvas,main .stage > canvas){width:100%;height:auto;}
:where(main .ua-tool){display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;align-items:start;}
@media (max-width:1000px){:where(main .ua-tool){grid-template-columns:minmax(0,1fr);}}
:where(main .ua-2col){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
@media (max-width:760px){:where(main .ua-2col){grid-template-columns:1fr;}}
:where(main .ua-panel,main .panel,main .viewcard,main .demo){background:var(--ua-surface,#fff);border:1px solid var(--ua-border,#E1E6EA);border-radius:var(--ua-radius-md,12px);}
:where(main .ua-panel){padding:14px;}

/* ===== 7. tables ===== */
:where(main table){width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
:where(main th,main td){padding:8px 10px;text-align:left;border-bottom:1px solid var(--ua-border,#E1E6EA);vertical-align:top;}
:where(main th){font-family:var(--ua-font-sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ua-text-muted,#5E6773);font-weight:700;}
:where(main .tablewrap,main .wide-table,main .tblwrap){overflow-x:auto;}
:where(td.num,th.num){text-align:right;}

/* ===== 8. controls (sliders, buttons, pills) ===== */
:where(main .btn,main button.btn){display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--ua-border,#E1E6EA);background:var(--ua-surface,#fff);color:var(--ua-text,#102436);cursor:pointer;font-size:.92rem;}
:where(main .btn.primary,main .btn.on,main .btn[aria-pressed="true"]){background:var(--ua-accent-fill,#E22C1B);border-color:var(--ua-accent-fill,#E22C1B);color:#fff;}
:where(main input[type="range"]){accent-color:var(--ua-accent,#FF5F43);width:100%;}
:where(main .controls label){display:block;font-size:.85rem;margin:0 0 10px;}
:where(main .pill){display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;background:var(--ua-surface-soft,#F8F9FA);border:1px solid var(--ua-border,#E1E6EA);}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ua-accent,#FF5F43);outline-offset:2px;}

/* ===== 9. callouts (Try it / Note) ===== */
:where(main .note,main .tryit,main .callout){padding:12px 16px;border-radius:var(--ua-radius-sm,8px);border-left:4px solid var(--ua-accent-secondary,#2E6EBE);
  background:var(--ua-surface-soft,#F8F9FA);margin:12px 0;font-size:1rem;}
:where(main .note.key,main .callout.key){border-left-color:var(--ua-accent,#FF5F43);}

/* ===== 10. phones ===== */
@media (max-width:767px){
  :where(main h1){font-size:2rem;}
  :where(main h2){font-size:1.4rem;margin-top:32px;}
  :where(main p,main li){font-size:1rem;line-height:1.6;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation-duration:.01ms !important;transition-duration:.01ms !important;}}