/* Terminoo — one design system, every page.
 *
 * The landing page used to carry its own copy of the tokens in an inline <style>, and this
 * file carried a second copy for the document pages. Two copies drift: the legal pages were
 * already a letter "T" where the landing page was an icon, and --text-faint had quietly
 * failed contrast in both of them for months without either noticing. There is now one set
 * of tokens, one shell (header, footer, focus, language switcher) and one type scale. The
 * landing page's own sections live in `home.css`; everything here is shared.
 *
 * The look is Swiss/editorial: hairline rules instead of drop shadows, a strict grid, a
 * modular type scale, and DM Mono for the labels. It suits a product about official paper,
 * and a rule costs nothing to paint where a soft shadow costs a layer.
 */

/* ── tokens ─────────────────────────────────────────────────────────────────── */
:root{
  /* Tells the browser which of its own surfaces to draw (scrollbars, form controls); without
     it the dark theme kept light scrollbars. Each dark block below flips it. */
  color-scheme:light;
  --bg:#F7F6F2; --surface:#FFFFFF; --surface-sunken:#EFEDE6;
  --text:#0F1E33; --text-muted:#5A6675;
  /* was #6E7A8A: 4.03:1 on paper, below 4.5 for every line it was used on. */
  --text-faint:#5F6B7A;
  --brand:#1B3A6B; --on-brand:#FFFFFF;
  --brand-container:#E8EBF2; --on-brand-container:#2D3F5C;
  --band-bg:#0F1E33; --on-band:#E8EBF2; --on-band-muted:#AEBBD1; --on-band-accent:#8BAED4;

  /* A rule has to be visible to do the job a shadow used to do. */
  --rule:rgba(15,30,51,.14); --rule-strong:rgba(15,30,51,.26); --hairline:rgba(15,30,51,.08);

  --warn-bg:#FDF4E3; --warn-border:#E4C583; --warn-text:#6B4E12;
  --ok:#136A3E; --err:#A4231C;

  --shadow-modal:0 24px 60px rgba(15,30,51,.28);
  --shadow-art:0 2px 6px rgba(15,30,51,.10), 0 26px 44px rgba(15,30,51,.20);

  /* Modular scale, ratio 1.25 from a 16px base. Nothing is set by eye. */
  /* Reaches its 60px cap at ~1290px, not ~900: the hero headline sits in a column beside the
     phone, and at 1024 the steeper slope set it on three lines. */
  --fs-display:clamp(2.5rem, 1rem + 3.4vw, 3.75rem);
  --fs-h2:clamp(1.75rem, 1.33rem + 1.9vw, 2.4rem);
  --fs-h3:1.25rem; --fs-lead:1.125rem; --fs-body:1rem; --fs-sm:.875rem; --fs-label:.75rem;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --page:1180px; /* px, not ch: `ch` is relative to each element's own font, so a serif h2 rule ran wider than the sans paragraphs under it. */
  --measure:660px;
  --gutter:24px;
  --ease:cubic-bezier(.2,.7,.3,1);

  --sans:'DM Sans','Noto Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'DM Serif Display','Noto Naskh Arabic',Georgia,serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (min-width:900px){ :root{ --gutter:32px } }

/* One dark palette, declared once and pointed at from both selectors below. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#14171C; --surface:#1C1F26; --surface-sunken:#22262E;
    --text:#EDEEF0; --text-muted:#9AA3B0;
    /* was #6B7280: 3.4:1 on the card surface. */
    --text-faint:#8A93A0;
    --brand:#8BAED4; --on-brand:#0F1E33;
    --brand-container:#26314A; --on-brand-container:#C9D3E6;
    --band-bg:#1A2740;
    --rule:rgba(255,255,255,.18); --rule-strong:rgba(255,255,255,.30); --hairline:rgba(255,255,255,.10);
    --warn-bg:#2A2312; --warn-border:#6B5620; --warn-text:#E8CF95;
    --ok:#5EC98D; --err:#F2837C;
    --shadow-modal:0 24px 60px rgba(0,0,0,.6);
    --shadow-art:0 2px 6px rgba(0,0,0,.4), 0 26px 44px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#14171C; --surface:#1C1F26; --surface-sunken:#22262E;
  --text:#EDEEF0; --text-muted:#9AA3B0; --text-faint:#8A93A0;
  --brand:#8BAED4; --on-brand:#0F1E33;
  --brand-container:#26314A; --on-brand-container:#C9D3E6;
  --band-bg:#1A2740;
  --rule:rgba(255,255,255,.18); --rule-strong:rgba(255,255,255,.30); --hairline:rgba(255,255,255,.10);
  --warn-bg:#2A2312; --warn-border:#6B5620; --warn-text:#E8CF95;
  --ok:#5EC98D; --err:#F2837C;
  --shadow-modal:0 24px 60px rgba(0,0,0,.6);
  --shadow-art:0 2px 6px rgba(0,0,0,.4), 0 26px 44px rgba(0,0,0,.55);
}

/* ── base ───────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%; height:auto}
a{color:var(--brand); text-underline-offset:.2em; text-decoration-thickness:1px}
/* The browser's own surfaces, drawn from the palette rather than left at the OS default. */
::selection{background:var(--brand-container); color:var(--on-brand-container)}
:root{accent-color:var(--brand); caret-color:var(--brand)}
h1,h2,h3{margin:0}
/* Display type sets solid: a wrapped 60px serif line with body leading looks broken. */
h1,h2{font-family:var(--serif); font-weight:400; line-height:1; letter-spacing:-.015em; text-wrap:balance}
p{text-wrap:pretty}

/* ── the label voice: DM Mono, already loaded, previously used for one counter ── */
.eyebrow{
  font-family:var(--mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
  margin:0 0 var(--s-4);
}

/* ── shell: skip link, header, footer ───────────────────────────────────────── */
.skip-link{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:60;
  background:var(--brand); color:var(--on-brand);
  padding:var(--s-3) var(--s-5); border-radius:0 0 var(--r-md) var(--r-md);
  font-size:var(--fs-sm); font-weight:600; text-decoration:none;
}
.skip-link:focus{inset-inline-start:0}

.shell{max-width:var(--page); margin:0 auto; padding-inline:var(--gutter)}

.site-head{border-bottom:1px solid var(--rule); background:var(--bg)}
.site-head-row{
  max-width:var(--page); margin:0 auto; padding:var(--s-4) var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); min-height:44px}
/* The app icon itself — "The Stack", `favicon.svg`, the same file the browser tab gets.
   It carries its own navy tile and its own 22% corner radius, so there is nothing to draw
   behind it and nothing to recolour: an app icon that changes with the theme is not the app
   icon. Loaded as <img> rather than inlined so the three copies are one cached request and
   the SVG's `vignette` gradient id cannot collide with anything on the page. */
/* 36px, not 32: the handoff's scale table has the fan of documents reading down to 40px
   and collapsing to a silhouette by 29. 36 keeps three layers visible beside a 20px wordmark. */
.brand-mark{width:36px; height:36px; display:block; flex-shrink:0}
.brand-name{font-size:var(--fs-h3); font-weight:700; letter-spacing:-.01em}
.head-tools{display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap}
/* Icon-only controls sit 4px apart inside their own cluster, 16px from labelled things. */
.head-links{display:flex; gap:0 var(--s-5); flex-wrap:wrap; font-size:var(--fs-sm); align-items:center}
/* Link lists are not inline text, so they carry the 44px target rather than the 2.5.8 exception. */
.head-links a{color:var(--text-muted); text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
.head-links a:hover{color:var(--brand)}
.head-links a[aria-current]{color:var(--text); font-weight:600}

/* 38px is under the 44px target, so the hit area is grown with padding, not with paint. */
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--rule);
  background:transparent; color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  position:relative; flex-shrink:0;
}
.icon-btn::after{content:''; position:absolute; inset:-3px}
.icon-btn:hover{background:var(--brand-container); border-color:transparent; color:var(--on-brand-container)}
.icon-btn:active{transform:scale(.93)}

.site-foot{border-top:1px solid var(--rule); margin-top:var(--s-9)}
.site-foot-row{
  max-width:var(--page); margin:0 auto; padding:var(--s-7) var(--gutter);
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--s-6); flex-wrap:wrap;
}
.foot-brand{display:flex; align-items:center; gap:10px}
.foot-brand .brand-mark{width:30px; height:30px}
.foot-copy{font-size:var(--fs-sm); color:var(--text-muted)}
.foot-links{display:flex; gap:0 var(--s-5); flex-wrap:wrap; font-size:var(--fs-sm); align-items:center}
.foot-links a,.foot-links .linkish{color:var(--text-muted); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px}
.foot-links a:hover,.foot-links .linkish:hover{color:var(--brand)}
/* A <button> never carries an underline, so it matches the links by colour and hover instead. */
.linkish{border:0; background:none; padding:0; font:inherit; font-size:var(--fs-sm); cursor:pointer}

/* ── document pages ─────────────────────────────────────────────────────────── */
/* A legal document is one column of running prose at ~70 characters, which is where long-form
   reading holds. It starts at the same x as the brand mark above it rather than being centred
   in the page: a measure floating in the middle of a full-width header reads as a different
   grid, and the whole point of this file is that there is only one. Tables get more room. */
.doc-wrap{max-width:var(--page); margin:0 auto; padding:var(--s-8) var(--gutter) var(--s-9)}
.doc-wrap>*{max-width:var(--measure)}
.doc-wrap>.tbl-scroll{max-width:920px}
.doc-head{border-bottom:1px solid var(--rule-strong); padding-bottom:var(--s-6); margin-bottom:var(--s-7)}
.doc-wrap h1{font-size:clamp(2.25rem,1.7rem + 2.4vw,3rem); margin:0 0 var(--s-4)}
.doc-meta{font-size:var(--fs-sm); color:var(--text-faint); margin:0; font-family:var(--mono)}
.doc-wrap h2{
  font-size:clamp(1.5rem,1.3rem + .9vw,1.875rem);
  margin:var(--s-7) 0 var(--s-6); padding-top:var(--s-5);
  border-top:1px solid var(--hairline);
}
.doc-wrap h2:first-of-type{border-top:0; padding-top:0}
.doc-wrap h3{font-family:var(--sans); font-size:var(--fs-h3); font-weight:700; line-height:1.25; margin:var(--s-6) 0 var(--s-3)}
.doc-wrap p{color:var(--text-muted); margin:0 0 var(--s-4)}
.doc-wrap ul,.doc-wrap ol{color:var(--text-muted); margin:0 0 var(--s-4); padding-inline-start:var(--s-5)}
.doc-wrap li{margin-bottom:var(--s-2)}
.doc-wrap strong{color:var(--text); font-weight:700}
.addr{font-style:normal; color:var(--text); line-height:1.8; margin:0 0 var(--s-4)}

.banner{
  background:var(--warn-bg); border:1px solid var(--warn-border);
  border-radius:var(--r-md); padding:var(--s-4) var(--s-5); margin:0 0 var(--s-6);
}
.banner-title{font-size:var(--fs-body); font-weight:700; color:var(--warn-text); margin-bottom:var(--s-2); display:flex; align-items:center; gap:var(--s-2)}
.banner p{font-size:var(--fs-sm); color:var(--warn-text); margin:0 0 var(--s-2); line-height:1.6}
.banner p:last-child{margin-bottom:0}
.banner strong{color:var(--warn-text)}

.callout{
  background:var(--surface); border:1px solid var(--rule);
  border-inline-start:3px solid var(--brand);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:var(--s-4) var(--s-5); margin:0 0 var(--s-5);
}
.callout p{margin:0 0 var(--s-3); font-size:var(--fs-sm)}
.callout p:last-child{margin:0}

.tbl-scroll{overflow-x:auto; margin:0 0 var(--s-5); -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:var(--fs-sm)}
thead th{border-bottom:1px solid var(--rule-strong)}
th,td{text-align:start; padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--hairline); vertical-align:top; color:var(--text-muted)}
th{color:var(--text); font-weight:700; letter-spacing:.01em}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}


/* ── contact form (support.html) ────────────────────────────────────────────── */
.cform{margin:0 0 var(--s-7); max-width:560px}
.cfield{margin:0 0 var(--s-5)}
.cfield label{display:block; font-size:var(--fs-sm); font-weight:600; color:var(--text); margin:0 0 var(--s-2)}
.cf-opt{font-weight:400; color:var(--text-faint)}
.cfield input,.cfield textarea{
  width:100%; font:inherit; font-size:var(--fs-body); color:var(--text);
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:12px 14px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.cfield textarea{resize:vertical; min-height:140px; line-height:1.6}
.cfield input:focus,.cfield textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.cf-help{font-size:var(--fs-sm); color:var(--text-faint); margin:var(--s-2) 0 0}
/* Honeypot: never shown, never announced. A bot fills it, a person cannot. */
.cf-hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden}
.cf-submit{
  font:inherit; font-size:var(--fs-body); font-weight:600; color:var(--on-brand);
  background:var(--brand); border:0; border-radius:var(--r-md);
  padding:13px 24px; min-height:44px; cursor:pointer;
  transition:opacity .15s var(--ease), transform .15s var(--ease);
}
.cf-submit:hover{opacity:.9}
.cf-submit:active{transform:scale(.98)}
.cf-submit:disabled{opacity:.55; cursor:default; transform:none}
.cf-status{font-size:var(--fs-sm); margin:var(--s-3) 0 0; min-height:1.2em}
.cf-status.is-ok{color:var(--ok)}
.cf-status.is-err{color:var(--err)}

/* ── third-party notices sheet ──────────────────────────────────────────────── */
.scrim{position:fixed; inset:0; background:rgba(15,30,51,.5); z-index:40; display:none}
.scrim.open{display:block}
.sheet{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px,92vw); max-height:80vh; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-lg); z-index:41;
  display:none; flex-direction:column; box-shadow:var(--shadow-modal);
}
.sheet.open{display:flex}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--rule)}
.sheet-title{font-family:var(--serif); font-size:var(--fs-h3); line-height:1.2; color:var(--text)}
.sheet-body{flex:1; overflow:auto; padding:var(--s-2) var(--s-5) var(--s-6)}
.notice-row{padding:var(--s-4) 0; border-bottom:1px solid var(--hairline)}
.notice-row:last-child{border-bottom:0}
.notice-name{font-size:var(--fs-body); font-weight:700; color:var(--text); margin-bottom:var(--s-1)}
.notice-meta{font-size:var(--fs-sm); color:var(--text-muted)}
.notice-copyright{font-size:var(--fs-sm); color:var(--text-faint)}

/* ── focus, motion ──────────────────────────────────────────────────────────── */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--r-sm)}
a,button,summary{transition:color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important}
}