/* =============================================================
   langsyn-theme.css — LangSyn design system (PROOF SHEET)
   Shared across every branded host. The page is set the way a
   derivation is written down: statements in a text face drawn for
   scientific publishing, code in a slab-serif monospace, chalk on
   slate.
   - A horizontal rule line means "therefore": it sits only between
     premises and a conclusion. Sections are separated by space.
   - Two colours carry meaning: --ls-given marks what someone gave
     the engine, --ls-derived marks what the engine concluded.
     Everything else is chalk on slate.
   - Labels are italic and in sentence case, never tracked capitals.
   Fonts are self-hosted.
   ============================================================= */

/* --- Self-hosted type ----------------------------------------
   Each face is a Latin core every page loads, plus an extension
   (Greek, math, Latin Extended-A, combining marks) a browser fetches
   only for a page that uses those characters. The code face is
   derived from Monaspace Xenon and renamed, as its licence requires
   of a modified version (fonts/OFL-LangSynCode.txt). */
@font-face{font-family:'STIX Two Text';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/STIXTwoText.woff2') format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030-203A,U+2044,U+20AC,U+2190-2193,U+2212,U+2234,U+2260,U+2264-2265}
@font-face{font-family:'STIX Two Text';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/STIXTwoText-Ext.woff2') format('woff2');unicode-range:U+0100-017F,U+0300-036F,U+0370-03FF,U+2194-2199,U+2200-2211,U+2213-2233,U+2235-225F,U+2261-2263,U+2266-22FF,U+2300-23FF,U+FB01-FB02}
@font-face{font-family:'STIX Two Text';font-style:italic;font-weight:400 700;font-display:swap;src:url('fonts/STIXTwoText-Italic.woff2') format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030-203A,U+2044,U+20AC,U+2190-2193,U+2212,U+2234,U+2260,U+2264-2265}
@font-face{font-family:'LangSyn Code';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/LangSynCode.woff2') format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030-203A,U+2044,U+20AC,U+2190-2193,U+2212,U+2234,U+2260,U+2264-2265}
@font-face{font-family:'LangSyn Code';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/LangSynCode-Ext.woff2') format('woff2');unicode-range:U+0100-017F,U+0300-036F,U+0370-03FF,U+2194-2199,U+2200-2211,U+2213-2233,U+2235-225F,U+2261-2263,U+2266-22FF,U+2300-23FF,U+FB01-FB02}

:root{
  color-scheme:dark;

  /* ---- ground and chalk (contrast measured against --ls-bg) ---- */
  --ls-bg:            #1B2220;   /* slate */
  --ls-surface:       #232C29;   /* raised: code panels, forms */
  --ls-surface-2:     #2A3430;   /* raised twice: hover, selected */
  --ls-border:        #34403C;   /* quiet edge, decorative only */
  --ls-border-strong: #76847E;   /* control edge, 4.1:1 */

  --ls-text:       #E8E6DF;      /* chalk, 13.0:1 */
  --ls-text-2:     #A8B1AC;      /* chalk, secondary, 7.4:1 */
  --ls-text-faint: #939D98;      /* faint, 5.8:1; 4.6:1 even on surface-2 */
  --ls-text-muted: #A8B1AC;      /* alias kept for existing markup */

  /* ---- the two colours that mean something ---- */
  --ls-given:   #E6C26E;         /* asserted values, literals, 9.5:1 */
  --ls-derived: #8CC6E2;         /* what the engine concluded, 8.7:1 */
  --ls-rule:    #71807A;         /* the rule line of a derivation, 3.9:1 */
  --ls-focus:   var(--ls-derived);

  /* ---- type ----
     --ls-font-sans keeps its name for existing markup; it is the text
     face, which is a serif. */
  --ls-font-text:   "STIX Two Text",Georgia,"Times New Roman",serif;
  --ls-font-display:var(--ls-font-text);
  --ls-font-sans:   var(--ls-font-text);
  --ls-font-mono:   "LangSyn Code",ui-monospace,Menlo,Consolas,monospace;

  --ls-tracking-eyebrow:0;
  --ls-radius:3px; --ls-radius-sm:2px;
  /* the sheet grid: the margin that holds a section's name, and the gutter */
  --ls-margin:11rem; --ls-gap:clamp(1.5rem,4vw,3.5rem);
  --ls-dur:200ms; --ls-ease:cubic-bezier(.2,.6,.2,1);

  /* ---- accent: retired as a per-site colour. Kept as tokens so
     existing rules resolve; it is chalk, like everything that does
     not mean given or derived. ---- */
  --ls-accent-rgb:168 177 172;
  --ls-accent-glow:#E8E6DF;
  --ls-accent-ink:#1B2220;
  --ls-accent:        rgb(var(--ls-accent-rgb));
  --ls-accent-border: rgb(var(--ls-accent-rgb) / .35);
  --ls-accent-bg:     rgb(var(--ls-accent-rgb) / .08);
  --ls-accent-primary: var(--ls-accent);

  /* ---- semantic colours for the account pages and the status board.
     Coherence Spec A2: the ONE home for these, so a page states
     var(--ls-danger), never a raw colour (gate G2). ---- */
  --ls-danger-rgb:240 154 136;                 /* #F09A88, 7.5:1 */
  --ls-danger:rgb(var(--ls-danger-rgb));
  --ls-warn-rgb:240 168 96;                    /* #F0A860 */
  --ls-warn-border:rgb(var(--ls-warn-rgb) / .6);
  --ls-warn-bg:rgb(var(--ls-warn-rgb) / .08);
  --ls-ok-rgb:147 201 154;                     /* #93C99A, service up */
  --ls-ok:rgb(var(--ls-ok-rgb));
}

/* --- Reset -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;background:var(--ls-bg)}
body{
  font-family:var(--ls-font-text);
  font-size:18px;line-height:1.65;font-weight:400;
  font-variant-numeric:oldstyle-nums;
  color:var(--ls-text);background:var(--ls-bg);
  -webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;
}
body>*{position:relative;z-index:1}
/* `hidden` means hidden. The browser's own [hidden] rule loses to any page rule
   that gives a class a display (flex, grid, a button's inline-flex), so the
   element showed. Pages patched that class by class, and each new class opened
   it again (WEB-A-CLASS-DISPLAY-RULE-OUTRANKS-HIDDEN-SO-SIX-CONTROLS-NEVER-HIDE). */
[hidden]{display:none!important}
table,.ls-num{font-variant-numeric:lining-nums tabular-nums}

/* --- Typography --------------------------------------------- */
h1{font-family:var(--ls-font-text);font-weight:600;font-size:clamp(2.35rem,1.9rem + 2.1vw,3.5rem);line-height:1.12;letter-spacing:-.012em;color:var(--ls-text);text-wrap:balance}
h2{font-family:var(--ls-font-text);font-weight:600;font-size:clamp(1.6rem,1.3rem + 1.3vw,2.25rem);line-height:1.18;color:var(--ls-text);text-wrap:balance}
h3{font-family:var(--ls-font-text);font-weight:600;font-size:1.3rem;line-height:1.3;color:var(--ls-text)}
h4{font-family:var(--ls-font-text);font-weight:600;font-size:1.05rem;color:var(--ls-text)}
h1 em{font-style:normal;color:inherit}
a{color:var(--ls-text);text-decoration:underline;text-decoration-color:var(--ls-text-faint);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--ls-text)}
:focus-visible{outline:2px solid var(--ls-focus);outline-offset:3px;border-radius:2px}
code,.ls-mono{font-family:var(--ls-font-mono);font-variant-numeric:normal}
p code,li code,td code{font-size:.86em}
.ls-given{color:var(--ls-given)}
.ls-derived{color:var(--ls-derived)}
.ls-kw{font-weight:600}
.ls-com{color:var(--ls-text-faint)}

/* --- Navigation -------------------------------------------- */
/* The mark, then the four sections, then Sign in pushed to the far edge. The
   section the page belongs to is set in chalk at 600; the rest stay chalk-2. */
.ls-nav{display:flex;align-items:baseline;gap:.8rem 2.5rem;padding:1.4rem 2rem;position:relative;z-index:100;flex-wrap:wrap}
.ls-nav-logo{font-family:var(--ls-font-text);font-size:1.3rem;font-weight:600;letter-spacing:-.01em;color:var(--ls-text);text-decoration:none}
.ls-nav-logo:hover{color:var(--ls-text)}
.ls-nav-links{display:flex;gap:.6rem 1.8rem;list-style:none;flex-wrap:wrap}
.ls-nav-links a,.ls-nav-signin{color:var(--ls-text-2);text-decoration:none;font-family:var(--ls-font-text);font-size:1rem}
.ls-nav-links a:hover,.ls-nav-signin:hover{color:var(--ls-text)}
.ls-nav-links a[aria-current],.ls-nav-signin[aria-current]{color:var(--ls-text);font-weight:600}
.ls-nav-signin{margin-left:auto}
/* Sign out, set beside the right-hand item by account-nav.js on the signed-in
   pages. A button, since signing out is an action and not a place. */
.ls-nav-signout{font:inherit;font-family:var(--ls-font-text);font-size:1rem;color:var(--ls-text-2);background:none;border:0;padding:0;cursor:pointer}
.ls-nav-signout:hover{color:var(--ls-text)}
.ls-nav-account{margin-left:auto;display:inline-flex;align-items:baseline;gap:1.8rem}
.ls-nav-account .ls-nav-signin{margin-left:0}
.ls-nav-lang{display:flex;gap:.8rem;align-items:baseline;list-style:none}
.ls-nav-lang:empty,nav.lang:empty{display:none}
.ls-nav-lang a{color:var(--ls-text-2);text-decoration:none;font-family:var(--ls-font-text);font-size:.95rem}
.ls-nav-lang a:hover{color:var(--ls-text)}
.ls-nav-lang a[aria-current="true"]{color:var(--ls-text);font-weight:600}
@media(max-width:640px){
  /* Domain-only nav: short links never need a collapsing menu — keep them
     inline and let them wrap on narrow screens (the hamburger was retired in
     WEB-NAV-TOGGLE-RETIRE). The mark takes the first row by itself, so
     the sections always start the second and where they break does not
     depend on which one is set at 600. The margin fills the row and leaves
     the link its own width. */
  .ls-nav{padding:1.2rem 1rem;column-gap:1.2rem}
  .ls-nav-logo{margin-inline-end:100%}
  .ls-nav-links{gap:.4rem 1.1rem}
  .ls-nav-account{gap:1.1rem}
}

/* --- Hero ---------------------------------------------------- */
.ls-hero{padding:5rem 2rem 3.5rem;max-width:1040px;margin:0 auto}
/* The column under a hero: the same box, so what follows a page's heading
   starts on the heading's own edge. The account and checkout pages set their
   cards in it, left-aligned, rather than centring them under a heading that
   is not centred. */
.ls-column{max-width:1040px;margin:0 auto;padding-inline:2rem}
.ls-eyebrow{font-family:var(--ls-font-text);font-style:italic;font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--ls-text-2);margin-bottom:1rem}
.ls-hero h1{margin-bottom:1.3rem}
.ls-hero-sub{font-size:1.1rem;color:var(--ls-text-2);max-width:60ch;margin-bottom:2rem;line-height:1.65}
.ls-ctas{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
.ls-streak-bar,.ls-side-streak{display:none}

/* --- Buttons ----------------------------------------------- */
.ls-btn-primary,.ls-btn-outline{font-family:var(--ls-font-text);font-weight:600;font-size:1rem;line-height:1.2;padding:.8em 1.2em;min-height:48px;border-radius:var(--ls-radius);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:background var(--ls-dur) var(--ls-ease),border-color var(--ls-dur) var(--ls-ease)}
.ls-btn-primary{background:var(--ls-text);color:var(--ls-bg);border:1px solid transparent}
.ls-btn-primary:hover{background:#FFFFFF}
.ls-btn-outline{background:transparent;border:1px solid var(--ls-border-strong);color:var(--ls-text)}
.ls-btn-outline:hover{background:var(--ls-surface)}
/* The one button that destroys something. Outlined in the danger colour rather
   than filled, so it never reads as the page's primary action. */
.ls-btn-danger{font-family:var(--ls-font-text);font-weight:600;font-size:1rem;line-height:1.2;padding:.8em 1.2em;min-height:48px;border-radius:var(--ls-radius);cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:1px solid var(--ls-danger);color:var(--ls-danger);transition:background var(--ls-dur) var(--ls-ease)}
.ls-btn-danger:hover{background:rgb(var(--ls-danger-rgb) / .12)}
.ls-btn-danger[disabled]{opacity:.5;cursor:default}

/* --- Layout ------------------------------------------------ */
.ls-section{max-width:1040px;margin:0 auto;padding:4.5rem 2rem}
.ls-section-label{font-family:var(--ls-font-text);font-style:italic;font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--ls-text-2);margin-bottom:.6rem}
/* Sections are separated by space; the only rule line on the site is a
   derivation's. The element stays for existing markup. */
.ls-divider{height:0;background:none;margin:0 2rem}

/* --- Cards ------------------------------------------------- */
.ls-card,.ls-card-subtle,.ls-card-left{background:var(--ls-surface);border:0;border-radius:var(--ls-radius-sm);padding:1.3rem;position:relative;overflow:hidden}
.ls-card-subtle{background:var(--ls-surface-2)}
.ls-card::before,.ls-card-left::before{display:none}
.ls-card h3,.ls-card-subtle h3,.ls-card-left h3{margin-bottom:.4rem}
.ls-card p,.ls-card-subtle p,.ls-card-left p{font-size:.95rem;color:var(--ls-text-2);line-height:1.6}
.ls-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem}
.ls-card-left{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.3rem}

/* --- Paths grid (org "Four Paths") ------------------------- */
.ls-paths-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.4rem}
.ls-path-card{background:var(--ls-surface);border:0;border-radius:var(--ls-radius-sm);padding:1.3rem;text-align:left}
.ls-path-icon,.ls-about-accent{display:none}
.ls-path-card h3{margin-bottom:.4rem}
.ls-path-card p{font-size:.95rem;color:var(--ls-text-2);line-height:1.6}

/* --- Code panel -------------------------------------------- */
/* Only code sits on a raised panel. An italic caption heads it, and its copy
   button starts hidden: the page's script reveals it, because without a script
   it would be a button that does nothing. Keywords are set in weight, literals
   in the given colour, results in the derived one; nothing else is coloured. */
.ls-panel{background:var(--ls-surface);border-radius:var(--ls-radius-sm);min-width:0}
.ls-panel-top{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem .6rem 0 1.25rem;min-height:2.75rem;color:var(--ls-text-faint);font-size:.95rem;font-style:italic}
.ls-panel pre{margin:0;padding:1.1rem 1.25rem;overflow-x:auto;font-family:var(--ls-font-mono);font-size:.9rem;line-height:1.6;color:var(--ls-text)}
.ls-panel-top+pre{padding-top:.5rem}
.ls-copy{font-family:var(--ls-font-text);font-style:normal;font-weight:600;font-size:.95rem;line-height:1;color:var(--ls-text);background:var(--ls-bg);border:1px solid var(--ls-border-strong);border-radius:var(--ls-radius);padding:.5rem .9rem;min-height:44px;cursor:pointer}
.ls-copy:hover{background:var(--ls-surface-2)}
/* --- Badge -------------------------------------------------- */
.ls-badge{font-family:var(--ls-font-text);font-size:.85rem;font-weight:600;letter-spacing:0;padding:1px 8px;border-radius:var(--ls-radius-sm);background:none;color:var(--ls-text-2);border:1px solid var(--ls-border-strong)}

/* --- Footer ------------------------------------------------ */
/* The mark over its rows. The release line closes the family row in faint, the
   one place outside the docs that states the version a customer is on. */
.ls-footer{padding:6rem 2rem 3rem;display:grid;gap:.7rem;font-family:var(--ls-font-text);font-size:.95rem}
.ls-footer-mark{font-weight:600;color:var(--ls-text-2)}
.ls-footer-links{display:flex;gap:.5rem 1.6rem;list-style:none;flex-wrap:wrap;align-items:baseline}
.ls-footer-links a{color:var(--ls-text-2);text-decoration:none}
.ls-footer-links a:hover{color:var(--ls-text);text-decoration:underline;text-underline-offset:.18em}
.ls-footer-release{color:var(--ls-text-faint);font-variant-numeric:lining-nums}

/* --- Long-form prose (philosophy / spec intros) ------------ */
.ls-prose{max-width:66ch;margin:0 auto;padding:4rem 2rem 2rem}
.ls-prose h1{margin-bottom:1.5rem}
.ls-prose h2{margin:2.5rem 0 .75rem}
.ls-prose h2:first-child{margin-top:0}
.ls-prose p,.ls-prose ul,.ls-prose ol{color:var(--ls-text-2);line-height:1.7;margin-bottom:1rem}
.ls-prose ul,.ls-prose ol{padding-left:1.5rem}
.ls-prose li{margin-bottom:.5rem}
.ls-prose .lead{font-size:1.15rem}
.ls-prose strong{color:var(--ls-text);font-weight:600}
.ls-prose em{color:var(--ls-text);font-style:italic}
.ls-prose code{font-size:.86em;padding:1px 5px;background:var(--ls-surface);border-radius:var(--ls-radius-sm)}
.ls-prose pre{background:var(--ls-surface);border:0;border-radius:var(--ls-radius-sm);padding:1rem 1.2rem;overflow-x:auto;font-size:.85rem;line-height:1.6;margin:.8rem 0 1rem}
.ls-prose pre code{background:none;padding:0;font-size:inherit}

/* --- Page nav (prev/next) ---------------------------------- */
.ls-page-nav{display:flex;justify-content:space-between;align-items:center;max-width:66ch;margin:0 auto;padding:1rem 2rem 2rem}
.ls-page-nav a{font-size:1rem;font-weight:600;color:var(--ls-text-2);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.ls-page-nav a:hover{color:var(--ls-text)}

/* --- Mobile ------------------------------------------------ */
@media(max-width:640px){
  body{font-size:17px}
  .ls-hero{padding:3.5rem 1rem 2.5rem}
  .ls-column{padding-inline:1rem}
  .ls-section{padding:3rem 1rem}
  .ls-prose{padding:2.5rem 1rem 1.5rem}
  .ls-page-nav{padding:1rem 1rem 1.5rem}
  .ls-card-grid{grid-template-columns:1fr}
  .ls-footer{padding:4rem 1rem 2rem}
}

/* --- Motion -------------------------------------------------
   The one orchestrated moment on the site is a derivation drawing its
   rule line on first load; everything respects reduced motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* --- Sheet sections ----------------------------------------- */
/* The page grid the proof sheet is set on: a margin for a section's name, in
   italic, and a main column. Sections are separated by space, never by a
   line. Below 900px the name moves above what it names. */
.ls-sheet{max-width:1280px;margin:0 auto;padding:clamp(3.5rem,8vw,7rem) 2rem 0;display:grid;grid-template-columns:var(--ls-margin) minmax(0,1fr);column-gap:var(--ls-gap);row-gap:.9rem}
.ls-sheet-name{font-family:var(--ls-font-text);font-style:italic;font-weight:400;font-size:1.17rem;line-height:1.3;letter-spacing:0;color:var(--ls-text-2);padding-top:.35em}
.ls-sheet-name small{display:block;font-size:.95rem;font-style:normal;color:var(--ls-text-faint);margin-top:.4rem;font-variant-numeric:lining-nums}
.ls-sheet-main{display:flex;flex-direction:column;gap:1.75rem;min-width:0}
.ls-sheet-lede{max-width:62ch;color:var(--ls-text-2);font-size:1.17rem;line-height:1.5}
.ls-sheet-note{color:var(--ls-text-2);font-size:.95rem;max-width:62ch}
.ls-sheet-body{color:var(--ls-text-2);max-width:62ch;line-height:1.7}
/* Short titled notes in the main column: a heading and a sentence or two
   each, with no box around them, in as many columns as the notes fill. A
   note whose heading is a link takes the reader to what it describes. */
.ls-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:1.75rem var(--ls-gap);max-width:62rem}
.ls-notes h3{font-size:1.1rem;line-height:1.35;margin:0 0 .35rem}
.ls-notes p{color:var(--ls-text-2);line-height:1.6}
/* The last section of a page, which the footer follows. */
.ls-close{padding-bottom:clamp(4rem,9vw,7.5rem)}
@media(max-width:900px){
  .ls-sheet{grid-template-columns:minmax(0,1fr)}
  .ls-sheet-name{font-size:1rem;padding-top:0}
}
@media(max-width:640px){
  .ls-sheet{padding-inline:1rem}
}