/* ---------- /privacy and /terms in the th legal layout (WS#654) ----------
   th/agentx-feedback#197, assets/v3/legal.css @ 6aa53f4: the draft banner, the
   hero, and the sticky contents beside the text. The design's site.css shades
   are scoped to .lg, light by default and dark under the dark themes, like
   .inst in public.css. Fraunces is pinned for the headings, whatever the
   theme's --serif. CSP: every style lives here. Its own file: legal.css is
   /supported-agents' sheet (WS#648), with the same .lg class names. */
.lg{--l-ink:#141834;--l-ink-2:#3B4160;--l-body:#4A5068;--l-muted:#545A72;--l-link:#2D5BE3;
  --l-rule:#E2E0D9;--l-rule-ink:#141834;--l-wash:#F0EFEA;
  --l-amber-soft:#FFF9EC;--l-amber:#FBEFCF;--l-amber-ink:#8A5300;--l-amber-strong:#6E4500;
  --l-serif:"Fraunces",Georgia,serif;--l-mono:"IBM Plex Mono",ui-monospace,monospace;
  display:block;background:var(--bg);color:var(--l-ink);
  font-family:"IBM Plex Sans","Helvetica Neue",system-ui,sans-serif;overflow-wrap:break-word}
:root:not([data-theme]) .lg,[data-theme=studio] .lg,[data-theme=console] .lg{
  --l-ink:#ECEDF2;--l-ink-2:#C3C7D6;--l-body:#AEB3C5;--l-muted:#9AA0B5;--l-link:#7FA2FF;
  --l-rule:#2A2E3C;--l-rule-ink:#C3C7D6;--l-wash:#1F2330;
  --l-amber-soft:#2A2210;--l-amber:#3A2B0C;--l-amber-ink:#F2C46D;--l-amber-strong:#E9D27A}
.lg-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.lg a{color:var(--l-link);text-underline-offset:3px}
.lg-label{font-family:var(--l-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--l-muted)}

/* ---- draft banner ---- */
.lg-draft{background:var(--l-amber-soft);border-bottom:1px solid var(--l-amber);color:var(--l-amber-strong)}
.lg-draft .lg-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:14px;padding-bottom:14px;font-size:15px;line-height:1.5}
.lg-draft strong{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:13px;background:var(--l-amber);color:var(--l-amber-ink);font-family:var(--l-mono);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.lg mark{background:var(--l-amber);color:var(--l-amber-strong);padding:1px 5px;border-radius:5px;font-weight:500;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---- hero ---- */
.lg-hero{padding:clamp(64px,calc(104 * var(--vu)),104px) 0 clamp(48px,calc(72 * var(--vu)),72px)}
.lg-hero .lg-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.lg-h1{margin:0;font-family:var(--l-serif);font-variation-settings:'SOFT' 30;font-weight:600;font-size:clamp(46px,calc(76 * var(--vu)),76px);line-height:1;letter-spacing:-0.035em;text-wrap:balance;color:var(--l-ink)}
.lg-h1 i{font-style:normal;font-variation-settings:'SOFT' 50;font-weight:600;color:var(--l-link)}
.lg-body{margin:0;font-size:20px;line-height:1.65;color:var(--l-body);max-width:60ch;text-wrap:pretty}
@keyframes lg-rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.lg-rise{animation:lg-rise 900ms cubic-bezier(.16,1,.3,1) both}
.lg-rise:nth-child(2){animation-delay:80ms}
.lg-rise:nth-child(3){animation-delay:160ms}

/* ---- document: sticky contents beside the text ---- */
.lg-doc{padding:24px 0 clamp(56px,calc(112 * var(--vu)),112px)}
.lg-doc .lg-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px clamp(48px,calc(72 * var(--vu)),72px);align-items:start}
.lg-toc{position:sticky;top:104px;display:flex;flex-direction:column;gap:12px}
.lg-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--l-rule-ink)}
.lg-toc a{display:block;padding:9px 0;border-bottom:1px solid var(--l-rule);color:var(--l-ink-2);text-decoration:none;font-size:15px;line-height:1.4}
.lg-toc a:hover{color:var(--l-ink)}
.lg-toc .lg-alt{font-size:14px;color:var(--l-muted)}
.lg-text{min-width:0;overflow-wrap:anywhere;max-width:74ch;font-size:17px;line-height:1.7;color:var(--l-body)}
.lg-text > h2{margin:56px 0 14px;scroll-margin-top:96px;font-family:var(--l-serif);font-variation-settings:'SOFT' 30;font-weight:600;font-size:clamp(28px,calc(34 * var(--vu)),34px);line-height:1.12;letter-spacing:-0.025em;color:var(--l-ink)}
.lg-text > h2:first-child{margin-top:0}
.lg-text p{margin:0 0 16px}
.lg-text ul,.lg-text ol{margin:0 0 16px;padding-left:22px}
.lg-text li{margin:0 0 8px}
.lg-text strong{color:var(--l-ink);font-weight:600}
.lg-text code{font-family:var(--l-mono);font-size:14px;padding:1px 6px;border-radius:6px;background:var(--l-wash);color:var(--l-ink)}
.lg-meta{font-family:var(--l-mono);font-size:14px;color:var(--l-muted)}

/* ---- tables ---- */
.lg-table-wrap{overflow-x:auto;margin-top:18px}
/* Cells keep words whole: the table grows past a narrow wrap, which scrolls (qc-2 r5724). */
.lg-table{width:100%;overflow-wrap:normal;border-collapse:collapse;border-top:1px solid var(--l-rule-ink);font-size:15px;line-height:1.6;margin:8px 0 20px}
.lg-table th{text-align:left;font-weight:600;color:var(--l-ink);padding:16px 20px 16px 0;border-bottom:1px solid var(--l-rule);vertical-align:bottom}
.lg-table td{padding:18px 20px 18px 0;border-bottom:1px solid var(--l-rule);color:var(--l-body);vertical-align:top}
.lg-table td:first-child{color:var(--l-ink);font-weight:500;min-width:200px}
.lg-table code{font-family:var(--l-mono);font-size:14px}

/* ---- open items box ---- */
.lg-open{margin:0 0 40px;padding:24px 26px;border-radius:20px;background:var(--l-amber-soft);box-shadow:0 0 0 1px var(--l-amber);color:var(--l-amber-strong);font-size:15px;line-height:1.6}
.lg-open h2{margin:0 0 10px;font-family:"IBM Plex Sans","Helvetica Neue",system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:0;color:var(--l-amber-strong)}
.lg-open ol{margin:0;padding-left:22px}
.lg-open li{margin:0 0 6px}
.lg-open code{background:var(--l-amber);color:var(--l-amber-strong)}

/* ---- narrow screens ---- */
@media (max-width: 900px){
  .lg-doc .lg-wrap{grid-template-columns:minmax(0,1fr)}
  .lg-toc{position:static}
}
@media (max-width: 640px){
  .lg-hero{padding:64px 0 48px}
  .lg-h1{font-size:46px}
  .lg-text > h2{font-size:28px}
  /* each table row is a card (th#197): the first cell is its title, every
     other cell shows its column header (data-label) above its value; cards
     split on the rule line, as legal.css stacks Trust's table. The header
     row stays for screen readers, only clipped out of sight. */
  .lg-table-wrap{overflow:visible}
  .lg-table,.lg-table tbody,.lg-table tr,.lg-table td{display:block}
  .lg-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .lg-table tr{padding:14px 0;border-bottom:1px solid var(--l-rule)}
  .lg-table td{padding:3px 0;border-bottom:0}
  .lg-table td:first-child{min-width:0;padding-bottom:6px}
  .lg-table td[data-label]::before{content:attr(data-label) / "";display:block;font-size:12px;font-weight:600;
    line-height:1.5;letter-spacing:.02em;color:var(--l-muted)}
}
@media (prefers-reduced-motion: reduce){.lg-rise{animation:none}}
