/* The portal's stylesheet: the tradefloor.dev identity (the docs site's
   learn.css tokens, type and components) for the app's pages. No build step. */

/* -- tokens ----------------------------------------------------------------- */
/* --line is for dividers; --line-strong (3:1 or more on --card, --ground and
   --surface) outlines form controls and segmented controls (WCAG 1.4.11).
   --on-red is text on a solid --red. */
:root{
  --ground:#FAFBFA;--surface:#F1F4F3;--card:#FFFFFF;--line:#D2DBD9;--line-soft:#E3E9E7;
  --line-strong:#7E8C89;
  --ink:#101A18;--ink-2:#3C4A47;--ink-3:#5A6864;
  --accent:#0E6B65;--accent-deep:#0A4F4A;--accent-soft:#DDEEEC;--accent-line:#8FC2BD;
  --chip-teal:#CBE7E3;--chip-bg:#EDF3F2;--chip-line:#CBD9D6;--band:#C9DEDB;
  --red:#8A3A3A;--red-soft:#C98A8A;--red-bg:#F6ECEB;--green:#2F6B4A;--green-soft:#8FBFA3;--green-bg:#E9F2EC;
  --amber:#7A5C2E;--amber-bg:#F5EEE2;
  --series3:#3C6E8F;--series4:#8A5A6B;--series5:#5B7A3C;
  --on-accent:#FFFFFF;--on-red:#FFFFFF;--header-bg:rgba(250,251,250,0.93);--shadow:0 12px 32px rgba(0,0,0,0.12);
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Source Serif 4',ui-serif,Georgia,serif;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
html[data-theme="dark"]{
  --ground:#0D1312;--surface:#151D1C;--card:#111917;--line:#2B3735;--line-soft:#202B2A;
  --line-strong:#617370;
  --ink:#E5ECEA;--ink-2:#B2C0BD;--ink-3:#8A9895;
  --accent:#5FC9BE;--accent-deep:#8ADDD4;--accent-soft:#10302E;--accent-line:#2E6B65;
  --chip-teal:#173B38;--chip-bg:#14201F;--chip-line:#2B3735;--band:#24413E;
  --red:#E2938E;--red-soft:#7A4340;--red-bg:#2A1716;--green:#7FD3A6;--green-soft:#2F6B4A;--green-bg:#12261C;
  --amber:#D3AC63;--amber-bg:#2A2214;
  --series3:#7FB4D6;--series4:#CE93A6;--series5:#A5C77E;
  --on-accent:#0D1312;--on-red:#0D1312;--header-bg:rgba(13,19,18,0.92);--shadow:0 12px 32px rgba(0,0,0,0.45);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --ground:#0D1312;--surface:#151D1C;--card:#111917;--line:#2B3735;--line-soft:#202B2A;
    --line-strong:#617370;
    --ink:#E5ECEA;--ink-2:#B2C0BD;--ink-3:#8A9895;
    --accent:#5FC9BE;--accent-deep:#8ADDD4;--accent-soft:#10302E;--accent-line:#2E6B65;
    --chip-teal:#173B38;--chip-bg:#14201F;--chip-line:#2B3735;--band:#24413E;
    --red:#E2938E;--red-soft:#7A4340;--red-bg:#2A1716;--green:#7FD3A6;--green-soft:#2F6B4A;--green-bg:#12261C;
    --amber:#D3AC63;--amber-bg:#2A2214;
    --series3:#7FB4D6;--series4:#CE93A6;--series5:#A5C77E;
    --on-accent:#0D1312;--on-red:#0D1312;--header-bg:rgba(13,19,18,0.92);--shadow:0 12px 32px rgba(0,0,0,0.45);
    color-scheme:dark;
  }
}
.only-dark{display:none !important}
html[data-theme="dark"] .only-dark{display:revert !important}
html[data-theme="dark"] .only-light{display:none !important}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .only-dark{display:revert !important}
  html:not([data-theme="light"]) .only-light{display:none !important}
}

/* -- base ------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep);text-decoration:underline}
/* A link inside running text is underlined, so it is not told apart by colour
   alone (WCAG 1.4.1); nav, buttons, chips and pills stay as they are. A
   sentence in a span or a cell takes .prose to say it is running text, and
   an empty state (.empty), a card's line (.pg-text) and an alert are
   sentences too. */
:where(p,.pg-md,.pg-note,.pg-text,.pg-card-list > span,.caption,.hint,.plain-list li,.prose,.empty,.alert) a:not(.btn):not(.chip):not(.pill):not(.linkish){
  text-decoration:underline;text-underline-offset:0.15em;text-decoration-thickness:1px}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
p{margin:0 0 0.85rem;text-wrap:pretty}
p:last-child{margin-bottom:0}
h1,h2,h3,h4,h5{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-0.015em;line-height:1.15;color:var(--ink)}
b,strong{font-weight:600}
img{max-width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--card);padding:0.5rem 0.8rem;z-index:100}
.skip:focus{left:0.5rem;top:0.5rem}
[hidden]{display:none !important}

.wrap{max-width:1040px;margin:0 auto;padding:0 1.5rem 4rem}
.wrap-wide{max-width:1280px}
.narrow{max-width:40rem;padding-top:3rem}
.mono{font-family:var(--mono);font-size:0.92em}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.right{text-align:right}
.nowrap{white-space:nowrap}
.muted{color:var(--ink-3)}
.small{font-size:0.875rem}
.dim{opacity:0.6}
.up{color:var(--green)}
.down{color:var(--red)}

.h1{font-size:clamp(1.9rem,4vw,2.6rem);text-wrap:balance;margin:0.4rem 0 0.9rem}
.h2{font-size:1.5rem}
.h3{font-size:1.125rem}
.h4{font-size:1.0625rem}
.h5{font-family:var(--sans);font-size:0.75rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);margin:1.1rem 0 0.4rem}
.h3.sub{margin:1.6rem 0 0.5rem}
.lede{font-size:1.125rem;color:var(--ink-2);max-width:48rem;margin-bottom:1.6rem}
.crumb{display:flex;align-items:center;gap:0.5rem;padding:2.5rem 0 0;font-family:var(--mono);
  font-size:0.6875rem;letter-spacing:0.1em;color:var(--ink-3)}
.crumb-here{color:var(--accent)}
.section{padding:2.2rem 0 0;display:flex;flex-direction:column;gap:0.9rem}
.section > p{color:var(--ink-2);margin:0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.stamp{font-family:var(--mono);font-size:0.75rem;color:var(--ink-3)}
.actions{display:flex;gap:0.7rem;flex-wrap:wrap;margin:1.2rem 0}

/* -- header ----------------------------------------------------------------- */
.hd{position:sticky;top:0;z-index:40;background:var(--header-bg);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd-row{max-width:1040px;margin:0 auto;padding:0.7rem 1.5rem;display:flex;align-items:center;gap:1.5rem}
.hd-row-wide{max-width:1280px}
.brand{display:flex;align-items:center;gap:0.5rem;color:var(--ink)}
.brand:hover{color:var(--ink);text-decoration:none}
.brand img{flex:none}
.wordmark{font-family:var(--mono);font-size:1.0625rem;font-weight:500;letter-spacing:-0.01em}
.nav{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap}
.nav a{font-size:0.875rem;color:var(--ink-2);padding:0.2rem 0}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a.here{color:var(--accent)}
.spacer{flex:1}
.pill{font-family:var(--mono);font-size:0.75rem;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:99px;padding:3px 11px;cursor:pointer;line-height:1.5;white-space:nowrap}
.pill:hover{color:var(--ink);border-color:var(--accent-line);text-decoration:none}
.pill-accent{color:var(--accent-deep);background:var(--accent-soft);border-color:var(--accent-line)}
.signout{margin:0}

/* -- footer ----------------------------------------------------------------- */
.ft{border-top:1px solid var(--line);margin-top:3rem;padding:1.8rem 0 2.4rem;background:var(--ground)}
.ft .wrap{padding-bottom:0}
.ft-row{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start;flex-wrap:wrap}
.ft-brand{display:flex;flex-direction:column;gap:0.35rem;max-width:32rem}
.ft-note{font-size:0.8125rem;color:var(--ink-3)}
.ft-links{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:0.875rem}
.ft-links a{color:var(--ink-2)}

/* -- cards, chips, alerts ------------------------------------------------------- */
.card{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:1.1rem 1.2rem;min-width:0}
.card > h2,.card > h3{margin-bottom:0.6rem}
.card-accent{border-color:var(--accent-line);background:var(--accent-soft)}
.card-accent,.card-accent p,.card-accent h2,.card-accent h3,.card-accent li{color:var(--accent-deep)}
.card-head{display:flex;align-items:baseline;gap:0.8rem;flex-wrap:wrap;margin-bottom:0.7rem}
.card-head .small{flex:1 1 14rem}
.chip{display:inline-block;font-family:var(--mono);font-size:0.75rem;line-height:1.4;padding:0.12rem 0.45rem;
  border-radius:4px;background:var(--chip-bg);border:1px solid var(--chip-line);color:var(--accent-deep);white-space:nowrap}
.chip-quiet{color:var(--ink-3)}
.chip-warn{color:var(--amber);background:var(--amber-bg);border-color:var(--amber)}
.chip-bad{color:var(--red);background:var(--red-bg);border-color:var(--red-soft)}
.chip-btn{cursor:pointer}
.chip-btn:hover{border-color:var(--accent-line)}
.chips{display:inline-flex;gap:0.35rem;flex-wrap:wrap}
.alert{border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:0.75rem 0.95rem;
  font-size:0.9375rem;color:var(--ink-2);margin:0 0 1rem}
.alert-error{border-color:var(--red-soft);background:var(--red-bg);color:var(--red)}
.alert-ok{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-deep)}
.callout{border:1px solid var(--accent-line);border-radius:6px;background:var(--accent-soft);padding:0.9rem 1.05rem;
  color:var(--accent-deep);margin:0 0 1.6rem}
.owner-todo{color:var(--amber)}
.callout.owner-todo{border-color:var(--amber);background:var(--amber-bg);color:var(--amber)}
.warn{border-left:3px solid var(--amber);padding:0.2rem 0 0.2rem 0.8rem;color:var(--ink)}
.empty{border:1px dashed var(--line);border-radius:6px;padding:1rem;color:var(--ink-3);font-size:0.9375rem}
.plain-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.45rem}
.plain-list.bullets{padding-left:1.1rem;list-style:disc}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.7rem}
.steps li{display:flex;gap:0.7rem;align-items:flex-start}
.pip{font-family:var(--mono);font-size:0.6875rem;color:var(--accent);border:1px solid var(--accent-line);border-radius:99px;
  width:1.4rem;height:1.4rem;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px;background:var(--card)}

/* -- buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;font-family:var(--sans);font-size:0.9375rem;
  font-weight:500;line-height:1.2;padding:0.62rem 1.05rem;border-radius:6px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background 0.12s,border-color 0.12s,color 0.12s}
.btn:hover{text-decoration:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:0.5;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover:not(:disabled){background:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-accent)}
.btn-secondary{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-secondary:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent-deep)}
.btn-danger{background:var(--card);color:var(--red);border-color:var(--red-soft)}
.btn-danger:hover:not(:disabled){background:var(--red-bg);color:var(--red)}
.btn-small{font-size:0.8125rem;padding:0.38rem 0.7rem}
.btn-block{width:100%}
.btn-wide{min-width:14rem}
.linkish{background:none;border:0;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-align:left}
.linkish:hover{color:var(--accent-deep);text-decoration:underline}
.copy{font-family:var(--mono);font-size:0.6875rem;color:var(--ink-2);background:var(--card);border:1px solid var(--line);
  border-radius:4px;padding:0.2rem 0.55rem;cursor:pointer;line-height:1.4}
.copy:hover{border-color:var(--accent-line);color:var(--accent-deep)}
.copy.copied{color:var(--green);border-color:var(--green-soft)}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;background:var(--card)}
.seg button{font-family:var(--sans);font-size:0.8125rem;background:none;border:0;border-right:1px solid var(--line);
  padding:0.4rem 0.7rem;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--accent-soft);color:var(--accent-deep);font-weight:500}
.seg-small button{font-size:0.75rem;padding:0.25rem 0.55rem}

/* -- forms ------------------------------------------------------------------ */
.form{display:flex;flex-direction:column;gap:1rem}
.form-inline{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
.form-inline .alert{flex-basis:100%;margin:0}
.grow{flex:1 1 16rem}
.field{display:flex;flex-direction:column;gap:0.3rem;min-width:0;flex:1 1 0}
.field-row{display:flex;gap:0.8rem;flex-wrap:wrap}
.field-row > .field{flex:1 1 7rem}
.field-label{font-size:0.8125rem;font-weight:500;color:var(--ink-2)}
.hint{font-size:0.8125rem;color:var(--ink-3);margin:0}
.hint-bad{color:var(--red)}
.input{font-family:var(--sans);font-size:0.9375rem;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);
  border-radius:6px;padding:0.55rem 0.7rem;width:100%;min-width:0;line-height:1.35}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input::placeholder{color:var(--ink-3);opacity:0.8}
.input.mono{font-family:var(--mono);font-size:0.875rem}
.input-small{font-size:0.8125rem;padding:0.32rem 0.5rem;width:auto;max-width:15rem}
.input-bad{border-color:var(--red-soft)}
textarea.input{resize:vertical;min-height:8rem}
select.input{appearance:none;-webkit-appearance:none;padding-right:1.9rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.turnstile{min-height:65px}
.code-form{margin-top:1.2rem}
.code-input{font-size:1.25rem;letter-spacing:0.3em;max-width:12rem}

/* -- tables, key-value lists, code ------------------------------------------------ */
.tablebox{border:1px solid var(--line);border-radius:6px;background:var(--card);overflow-x:auto;max-width:100%}
.tablebox-flat{border:0;border-radius:0;background:none}
.table{border-collapse:collapse;width:100%;font-size:0.875rem}
.table th{text-align:left;padding:0.6rem 0.9rem;font:500 0.75rem/1.3 var(--sans);color:var(--ink-3);
  border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:0.6rem 0.9rem;color:var(--ink-2);border-bottom:1px solid var(--line-soft);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table th.num{text-align:right}
.table-tight{font-size:0.8125rem}
.table-tight th{padding:0.35rem 0.5rem;font-size:0.6875rem}
.table-tight td{padding:0.35rem 0.5rem}
.table-tight th:first-child,.table-tight td:first-child{padding-left:0}
.table-tight th:last-child,.table-tight td:last-child{padding-right:0}
.table .empty-row td{color:var(--ink-3);font-style:normal}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack-actions a{margin-right:0.9rem}
/* A table that becomes a list of cards on a phone: each row a card, each
   cell a line with its column name (data-label) on the left. */
@media (max-width: 640px){
  .table-stack thead{display:none}
  .table-stack,.table-stack tbody,.table-stack tr,.table-stack td{display:block;width:100%}
  .table-stack tr{padding:0.7rem 0.9rem;border-bottom:1px solid var(--line)}
  .table-stack tr:last-child{border-bottom:0}
  .table-stack td,.table.table-stack td{padding:0.15rem 0;border:0;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-align:right;white-space:normal}
  .table-stack td[data-label]::before{content:attr(data-label);font:500 0.75rem/1.3 var(--sans);color:var(--ink-3);text-align:left;flex:none}
  .table-stack td.stack-title{display:block;text-align:left;padding-bottom:0.35rem;color:var(--ink)}
  .table-stack td.stack-actions{justify-content:flex-start;align-items:center;padding-top:0.55rem}
  .table-stack td.stack-actions a{margin-right:auto}
}
.kv{border:1px solid var(--line);border-radius:6px;background:var(--card);overflow:hidden}
.kv-row{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:0.9rem;padding:0.6rem 1rem;
  border-bottom:1px solid var(--line-soft);align-items:baseline}
.kv-row:last-child{border-bottom:0}
.kv-key{font-family:var(--mono);font-size:0.75rem;color:var(--accent)}
.kv-val{font-size:0.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.kv-tight .kv-row{grid-template-columns:minmax(0,1fr) auto;padding:0.45rem 0.8rem}
.kv-tight .kv-key{font-family:var(--sans);font-size:0.8125rem;color:var(--ink-2)}
.codebox{position:relative;min-width:0}
.codebox-head{display:flex;justify-content:space-between;align-items:center;gap:0.6rem;background:var(--surface);
  border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;padding:0.35rem 0.55rem 0.35rem 1rem}
.codebox-label{font-family:var(--mono);font-size:0.6875rem;color:var(--ink-3)}
.codebox-head + .code{border-top-left-radius:0;border-top-right-radius:0}
.copy-float{position:absolute;top:0.55rem;right:0.55rem;z-index:1}
.code{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:0.95rem 1rem;overflow-x:auto;
  font-family:var(--mono);font-size:0.8125rem;line-height:1.7;color:var(--ink-2);white-space:pre;tab-size:2}
.copy-float + .code{padding-right:4.5rem}
.code-tight{padding:0.6rem 0.8rem;font-size:0.75rem;line-height:1.6}
.codebox-key .code{font-size:0.9375rem;color:var(--ink);background:var(--card);border-color:var(--accent-line);white-space:pre-wrap;overflow-wrap:anywhere}
.card-key{border-color:var(--accent-line);display:flex;flex-direction:column;gap:0.8rem}
details.disclose{margin-top:0.4rem}
details.disclose > summary{cursor:pointer;font-size:0.875rem;font-weight:500;color:var(--ink-2);padding:0.5rem 0}
details.disclose[open] > summary{margin-bottom:0.5rem}
details.confirm{display:inline-block;position:relative;text-align:left}
details.confirm > summary{list-style:none}
details.confirm > summary::-webkit-details-marker{display:none}
.confirm-box{position:absolute;right:0;top:calc(100% + 0.4rem);z-index:20;width:min(20rem,80vw);background:var(--card);
  border:1px solid var(--red-soft);border-radius:6px;box-shadow:var(--shadow);padding:0.8rem 0.9rem;
  display:flex;flex-direction:column;gap:0.6rem;font-size:0.875rem;white-space:normal;color:var(--ink-2)}
.confirm-box p{margin:0}
.check{display:flex;gap:0.55rem;align-items:flex-start;font-size:0.9375rem;color:var(--ink-2)}
.check input{margin-top:0.3rem;flex:none}

/* -- the terms banner (a new version of the terms or privacy policy) -------- */
.terms-bar{background:var(--accent-soft);border-bottom:1px solid var(--accent-line);color:var(--accent-deep);font-size:0.875rem}
.terms-bar-row{display:flex;gap:0.8rem;align-items:center;justify-content:space-between;padding-top:0.45rem;padding-bottom:0.45rem;flex-wrap:wrap}
.terms-bar a{color:var(--accent-deep);text-decoration:underline}

/* -- layouts ---------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2.2rem;align-items:start;padding-top:1rem}
.split-main,.split-side{display:flex;flex-direction:column;gap:1rem;min-width:0}
.h1-top{margin-top:2.5rem}
.split-flush{padding-top:0}
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}
.meter{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:0.9rem 1rem;display:flex;flex-direction:column;gap:0.5rem}
.meter-head{display:flex;flex-direction:column;gap:0.15rem;min-width:0}
.meter-label{font-size:0.875rem;font-weight:600;color:var(--ink)}
.meter-num{font-family:var(--mono);font-size:0.8125rem;color:var(--ink-3);overflow-wrap:anywhere}
.meter-num b{color:var(--ink);font-weight:500;font-size:1.0625rem}
.meter-track{height:8px;border-radius:99px;background:var(--surface);border:1px solid var(--line-soft);overflow:hidden}
.meter-fill{height:100%;background:var(--accent);border-radius:99px;min-width:2px}
.meter-warn .meter-fill{background:var(--amber)}
.meter-full .meter-fill{background:var(--red)}
.meter-note{font-size:0.8125rem;color:var(--ink-3);margin:0}
.prose{max-width:46rem}
.prose h2{margin:2rem 0 0.6rem}
.prose p,.prose li{color:var(--ink-2)}
.md h1{font-size:clamp(1.9rem,4vw,2.6rem);margin:0.4rem 0 1rem}
.md h2{font-size:1.5rem;margin:2.2rem 0 0.7rem}
.md h3{font-size:1.125rem;margin:1.6rem 0 0.5rem}
.md ul,.md ol{padding-left:1.3rem;color:var(--ink-2)}
.md li{margin:0 0 0.3rem}
.md code{font-family:var(--mono);font-size:0.85em;background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:4px;padding:0 0.3rem;color:var(--accent-deep)}
.md pre{margin:0 0 1rem;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:0.95rem 1rem;overflow-x:auto;
  font-family:var(--mono);font-size:0.8125rem;line-height:1.7;color:var(--ink-2)}
.md pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
/* A long identifier or URL in running text breaks rather than widening the page at 375 px. */
.md :not(pre) > code{overflow-wrap:anywhere}
.md{min-width:0;max-width:100%}
.md table{border-collapse:collapse;width:100%;font-size:0.875rem;margin:0 0 1rem;display:block;overflow-x:auto}
.md th{text-align:left;padding:0.5rem 0.8rem;font-weight:500;font-size:0.75rem;color:var(--ink-3);border-bottom:1px solid var(--line)}
.md td{padding:0.5rem 0.8rem;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:top}
.md blockquote{margin:0 0 1rem;border-left:3px solid var(--accent-line);padding:0.2rem 0 0.2rem 1rem;color:var(--ink-2)}
/* The agent guide: text at a readable width, code and tables across the
   page, scrolling sideways inside their own box when a line is longer. */
.md-guide{max-width:none}
.md-guide > p,.md-guide > ul,.md-guide > ol,.md-guide > blockquote,.md-guide > h1,.md-guide > h2,.md-guide > h3{max-width:52rem}
.md-guide > p,.md-guide li{color:var(--ink-2)}
.md-guide pre{max-width:100%;overflow-x:auto;white-space:pre;scrollbar-width:thin}
.md-guide .kv{max-width:none}
.md-note{font-size:0.9375rem;color:var(--ink-3);border-left:3px solid var(--accent-line);padding-left:0.8rem;margin:0 0 1.4rem}
.connect-list{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.connect-item .code{white-space:pre-wrap;overflow-wrap:anywhere}
.connect-item{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:0.55rem;min-width:0}
.connect-item p{margin:0;color:var(--ink-2)}
.keyfill{margin-bottom:0.4rem;display:flex;flex-direction:column;gap:0.5rem}
.error-page .reset{display:flex;flex-direction:column;gap:0.15rem;margin:0.4rem 0 1.2rem;max-width:22rem}
.reset-label{font-size:0.8125rem;color:var(--ink-3)}
.reset-time{font-size:1.5rem;color:var(--ink)}
.reset-wait{font-size:0.875rem;color:var(--ink-2)}

/* -- companies, events and charts some pages still draw (the classic player
   that used the rest of this part went in Wave 4) ------------------------ */
.starters{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0.8rem;margin-top:0.8rem}
.field > .seg{align-self:flex-start}
.missing{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.35rem;font-size:0.8125rem;color:var(--ink-2)}
.missing li{display:grid;grid-template-columns:4rem minmax(0,11rem) minmax(0,1fr);gap:0.6rem;align-items:baseline;
  padding:0.3rem 0;border-bottom:1px solid var(--line-soft)}
.missing .mono{color:var(--accent-deep);font-size:0.75rem}
.picker{position:relative;display:flex;flex-direction:column;gap:0.45rem}
.chip-real{color:var(--accent-deep);background:var(--accent-soft);border-color:var(--accent-line)}
.gaps{list-style:none;margin:0.45rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.3rem;color:var(--ink-2)}
.gaps:empty{display:none}
.gaps li{padding-left:0.8rem;position:relative}
.gaps li::before{content:"";position:absolute;left:0;top:0.6em;width:0.35rem;height:0.35rem;border-radius:50%;background:var(--accent-line)}
textarea.input{resize:vertical;min-height:4.5rem;font-size:0.8125rem;line-height:1.5}
.kpi{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:0.7rem 0.9rem;display:flex;flex-direction:column;gap:1px;min-width:0}
.kpi-label{font-size:0.75rem;color:var(--ink-3)}
.kpi-val{font-size:1.3rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-sub{font-family:var(--mono);font-size:0.75rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chartcard{margin:0;padding:0.8rem 0.9rem 0.6rem}
.chartcard figcaption{display:flex;align-items:baseline;gap:0.6rem;flex-wrap:wrap;margin-bottom:0.3rem}
.chart{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.chart text{font-family:var(--mono);font-size:10px;fill:var(--ink-3)}
.chart .line{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart .after{fill:var(--ground);opacity:0.55}
.chart .cursor{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.chart .dot{fill:var(--card);stroke:var(--accent);stroke-width:2}
.chart .ref{stroke:var(--amber);stroke-width:1;stroke-dasharray:2 4;opacity:0.7}
.chart .b0{stroke:var(--accent)}
.chart .b1{stroke:var(--series4)}
.chart .b2{stroke:var(--series3)}
.chart .b3{stroke:var(--series5)}
.chart .buy{fill:var(--green)}
.chart .sell{fill:var(--red)}
.chart{cursor:pointer}
.companies{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:0.5rem}
.events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:30rem;overflow-y:auto}
.events ol{list-style:none;margin:0;padding:0}
.events .when{font-family:var(--mono);font-size:0.6875rem;color:var(--ink-3);padding-top:0.15rem}
.events .txt{color:var(--ink-2)}
.events .today .txt{color:var(--ink)}
.events .fresh{animation:fresh 1.2s ease-out}
.events .empty{display:block;border:0;padding:0.3rem 0;color:var(--ink-3)}
@keyframes fresh{from{background:var(--accent-soft)}to{background:transparent}}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.3rem 1rem;margin:0 0 0.6rem}
.stats div{display:flex;justify-content:space-between;gap:0.5rem;border-bottom:1px solid var(--line-soft);padding:0.25rem 0}
.stats dt{font-size:0.8125rem;color:var(--ink-3)}
.stats dd{margin:0;font-family:var(--mono);font-size:0.8125rem;color:var(--ink);white-space:nowrap}
.cancel{font-size:0.75rem;padding:0.1rem 0.45rem}
.tree{list-style:none;margin:0 0 1rem;padding:0;font-size:0.875rem}
.tree ul{list-style:none;margin:0;padding-left:1.1rem;border-left:1px solid var(--line)}
.tree li{margin:0.2rem 0}
.tree button{display:flex;align-items:center;gap:0.45rem;background:none;border:1px solid transparent;border-radius:5px;padding:0.2rem 0.4rem;
  cursor:pointer;font:inherit;color:var(--ink-2);text-align:left;width:100%}
.tree button:hover{border-color:var(--line)}
.tree button.on{background:var(--accent-soft);color:var(--accent-deep)}
.tree .meta{font-family:var(--mono);font-size:0.6875rem;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.fork{display:flex;flex-direction:column;gap:0.6rem}
.calls{list-style:none;margin:0.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.6rem}
.calls .empty{border:0;padding:0;color:var(--ink-3);font-size:0.875rem}
.calls .code{font-size:0.75rem;line-height:1.55;padding:0.6rem 0.8rem}
.replays{list-style:none;margin:0.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.8rem}
.replays p{margin:0.2rem 0 0}
dialog.builder{width:min(62rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);border:1px solid var(--line);border-radius:8px;
  padding:0;background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
dialog.builder::backdrop{background:rgba(16,26,24,0.45)}
.check{display:inline-flex;gap:0.4rem;align-items:center;font-size:0.8125rem;color:var(--ink-2);cursor:pointer}
.check input{accent-color:var(--accent);margin:0}

/* -- narrow screens ----------------------------------------------------------- */
@media (max-width: 900px){
  .hd-row{flex-wrap:wrap;row-gap:0.4rem}
  .nav{order:3;width:100%;gap:1rem}
  .split{grid-template-columns:minmax(0,1fr)}
  .wrap{padding-left:1.1rem;padding-right:1.1rem}
  .hd-row{padding-left:1.1rem;padding-right:1.1rem}
}
@media (max-width: 620px){
  .nav{gap:0.85rem}
  .nav a{font-size:0.8125rem}
  .wrap{padding-left:1rem;padding-right:1rem}
  .hd-row{padding-left:1rem;padding-right:1rem;gap:0.8rem}
  .kv-row{grid-template-columns:minmax(0,1fr);gap:0.15rem}
  .table{font-size:0.8125rem}
  .table th,.table td{padding:0.5rem 0.6rem}
  .form-inline{flex-direction:column;align-items:stretch}
  .code{font-size:0.75rem}
  .companies{grid-template-columns:repeat(2,minmax(0,1fr))}
  .missing li{grid-template-columns:3.4rem minmax(0,1fr);row-gap:0.1rem}
  .kpi-val{font-size:1.1rem}
  .kpi-sub{white-space:normal}
  .stats{grid-template-columns:minmax(0,1fr)}
  .seg button{padding:0.4rem 0.55rem}
  .ft-row{flex-direction:column;gap:1rem}
  .table-tight th:last-child,.table-tight td:last-child{padding-right:2px}
  /* The header's links on one row: Docs is in the footer too, and the row
     scrolls sideways on the narrowest screens rather than wrapping. */
  .nav{flex-wrap:nowrap;overflow-x:auto;gap:0.8rem;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  .nav .nav-docs{display:none}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}
@media print{
  .hd,.ft,#theme-toggle{display:none !important}
}

/* -- plans (the pricing page) ---------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;align-items:start}
.plan-card{display:flex;flex-direction:column;gap:0.8rem}
.plan-card p{margin:0}
.plan-action:empty{display:none}
.plan-limits{margin-top:0.4rem}