/* Imara portal — shared tokens, themes and components.
   Every colour lives in the theme blocks below; components use tokens only.
   A theme block also applies to a .swatch[data-theme] element, so a Profile preview renders in its own theme. */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/portal-assets/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/portal-assets/jetbrains-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── THEME: ink (default) ─────────────────────────────── */
:root,html[data-theme="ink"],.swatch[data-theme="ink"]{
  color-scheme:dark;
  --bg:#020617; --bg-2:#050b1a; --panel:#0a1122; --panel-2:#0e1629; --field:#050b1a; --nav:rgba(2,6,23,.84);
  --line:rgba(148,163,184,.14); --line-2:rgba(148,163,184,.28); --hover:rgba(148,163,184,.08);
  --text:#e8eef7; --text-2:#cbd5e1; --muted:#95a1b3; --faint:#8390a5;
  --accent:#fbbf24; --accent-2:#f39c0b; --on-accent:#17130a; --accent-text:#fbbf24;
  --accent-soft:rgba(251,191,36,.08); --accent-line:rgba(251,191,36,.4);
  --up:#63c7a2; --up-soft:rgba(95,191,156,.1); --up-line:rgba(95,191,156,.4);
  --down:#ec8c7c; --down-soft:rgba(224,128,110,.08); --down-line:rgba(224,128,110,.42);
  --warn-text:#ecdfbf; --bad-text:#efcfc7;
  --shadow:0 40px 90px -40px rgba(0,0,0,.9); --grid:rgba(148,163,184,.06); --glow:rgba(251,191,36,.08);
  --backdrop:rgba(2,6,23,.74); --focus:#fbbf24; --focus-w:2px;
}
/* ── THEME: paper (light, warm) ───────────────────────── */
html[data-theme="paper"],.swatch[data-theme="paper"]{
  color-scheme:light;
  --bg:#f8f5ee; --bg-2:#f0ebdf; --panel:#fffdf9; --panel-2:#fffdf9; --field:#ffffff; --nav:rgba(248,245,238,.9);
  --line:rgba(68,52,24,.13); --line-2:rgba(68,52,24,.28); --hover:rgba(68,52,24,.06);
  --text:#1b1813; --text-2:#342e27; --muted:#595145; --faint:#645c4f;
  --accent:#f5a524; --accent-2:#e8900c; --on-accent:#1c1206; --accent-text:#8a3c05;
  --accent-soft:rgba(217,119,6,.09); --accent-line:rgba(160,75,8,.45);
  --up:#046548; --up-soft:rgba(4,120,87,.08); --up-line:rgba(4,120,87,.4);
  --down:#a8231b; --down-soft:rgba(179,38,30,.07); --down-line:rgba(179,38,30,.4);
  --warn-text:#533607; --bad-text:#6b1a12;
  --shadow:0 30px 70px -40px rgba(60,40,10,.35); --grid:rgba(68,52,24,.07); --glow:rgba(217,119,6,.08);
  --backdrop:rgba(40,30,12,.45); --focus:#8a3c05; --focus-w:2px;
}
/* ── THEME: slate (cool blue-grey, teal) ──────────────── */
html[data-theme="slate"],.swatch[data-theme="slate"]{
  color-scheme:dark;
  --bg:#111a24; --bg-2:#0d151e; --panel:#16212d; --panel-2:#1a2735; --field:#0e1720; --nav:rgba(17,26,36,.88);
  --line:rgba(160,185,205,.15); --line-2:rgba(160,185,205,.3); --hover:rgba(160,185,205,.08);
  --text:#e7eef4; --text-2:#cad6e0; --muted:#a6b4c2; --faint:#97a6b5;
  --accent:#2dd4bf; --accent-2:#14b8a6; --on-accent:#042420; --accent-text:#5eead4;
  --accent-soft:rgba(45,212,191,.09); --accent-line:rgba(45,212,191,.42);
  --up:#86dfae; --up-soft:rgba(110,210,160,.1); --up-line:rgba(110,210,160,.4);
  --down:#f6a597; --down-soft:rgba(240,140,125,.09); --down-line:rgba(240,140,125,.42);
  --warn-text:#d3f2ec; --bad-text:#f5d3cc;
  --shadow:0 40px 90px -40px rgba(0,0,0,.75); --grid:rgba(160,185,205,.06); --glow:rgba(45,212,191,.08);
  --backdrop:rgba(8,12,18,.74); --focus:#5eead4; --focus-w:2px;
}
/* ── THEME: contrast (accessibility) ──────────────────── */
html[data-theme="contrast"],.swatch[data-theme="contrast"]{
  color-scheme:dark;
  --bg:#000000; --bg-2:#000000; --panel:#000000; --panel-2:#000000; --field:#000000; --nav:#000000;
  --line:#b3b3b3; --line-2:#ffffff; --hover:#262626;
  --text:#ffffff; --text-2:#ffffff; --muted:#e8e8e8; --faint:#d6d6d6;
  --accent:#ffe500; --accent-2:#ffe500; --on-accent:#000000; --accent-text:#ffe500;
  --accent-soft:#000000; --accent-line:#ffe500;
  --up:#5cff9d; --up-soft:#000000; --up-line:#5cff9d;
  --down:#ff9a90; --down-soft:#000000; --down-line:#ff9a90;
  --warn-text:#ffffff; --bad-text:#ffffff;
  --shadow:none; --grid:rgba(255,255,255,.1); --glow:transparent;
  --backdrop:rgba(0,0,0,.86); --focus:#ffe500; --focus-w:3px;
}

/* ── THEME: dusk (warm dark, little blue light) ── */
html[data-theme="dusk"],.swatch[data-theme="dusk"]{
  color-scheme:dark;
  --bg:#1a1714; --bg-2:#15120f; --panel:#221e1a; --panel-2:#29241f; --field:#17130f; --nav:rgba(26,23,20,.88);
  --line:rgba(214,196,170,.14); --line-2:rgba(214,196,170,.28); --hover:rgba(214,196,170,.07);
  --text:#ebe3d6; --text-2:#d6ccbb; --muted:#ab9f8d; --faint:#9c9080;
  --accent:#e2a65a; --accent-2:#d0913f; --on-accent:#20160a; --accent-text:#e8b470;
  --accent-soft:rgba(226,166,90,.09); --accent-line:rgba(226,166,90,.42);
  --up:#8ccf9f; --up-soft:rgba(140,207,159,.1); --up-line:rgba(140,207,159,.4);
  --down:#e79a85; --down-soft:rgba(231,154,133,.09); --down-line:rgba(231,154,133,.42);
  --warn-text:#eadfc4; --bad-text:#f0d2c8;
  --shadow:0 40px 90px -40px rgba(0,0,0,.7); --grid:rgba(214,196,170,.05); --glow:rgba(226,166,90,.07);
  --backdrop:rgba(14,11,8,.74); --focus:#e8b470; --focus-w:2px;
}
/* ── THEME: forest (dark green-grey, soft) ── */
html[data-theme="forest"],.swatch[data-theme="forest"]{
  color-scheme:dark;
  --bg:#121916; --bg-2:#0e1411; --panel:#18211d; --panel-2:#1d2823; --field:#0f1512; --nav:rgba(18,25,22,.88);
  --line:rgba(170,200,182,.14); --line-2:rgba(170,200,182,.28); --hover:rgba(170,200,182,.07);
  --text:#e1eae4; --text-2:#c8d5cd; --muted:#9eb0a5; --faint:#90a397;
  --accent:#dcc27a; --accent-2:#cbae5e; --on-accent:#1d1806; --accent-text:#e3cd8e;
  --accent-soft:rgba(220,194,122,.09); --accent-line:rgba(220,194,122,.42);
  --up:#86d6a6; --up-soft:rgba(134,214,166,.1); --up-line:rgba(134,214,166,.4);
  --down:#eb9c8c; --down-soft:rgba(235,156,140,.09); --down-line:rgba(235,156,140,.42);
  --warn-text:#ebe4c6; --bad-text:#f1d3cc;
  --shadow:0 40px 90px -40px rgba(0,0,0,.7); --grid:rgba(170,200,182,.05); --glow:rgba(220,194,122,.07);
  --backdrop:rgba(8,12,10,.74); --focus:#e3cd8e; --focus-w:2px;
}
/* ── THEME: sand (light sepia, no white glare) ── */
html[data-theme="sand"],.swatch[data-theme="sand"]{
  color-scheme:light;
  --bg:#efe7d6; --bg-2:#e6dcc8; --panel:#f6f0e2; --panel-2:#f6f0e2; --field:#fbf7ec; --nav:rgba(239,231,214,.92);
  --line:rgba(74,58,30,.15); --line-2:rgba(74,58,30,.3); --hover:rgba(74,58,30,.06);
  --text:#2f281d; --text-2:#40372a; --muted:#5f5443; --faint:#6a5f4d;
  --accent:#dd9a3c; --accent-2:#cc8829; --on-accent:#241606; --accent-text:#7c4410;
  --accent-soft:rgba(180,105,20,.1); --accent-line:rgba(140,80,15,.45);
  --up:#1d6648; --up-soft:rgba(29,102,72,.1); --up-line:rgba(29,102,72,.4);
  --down:#9c3327; --down-soft:rgba(156,51,39,.09); --down-line:rgba(156,51,39,.42);
  --warn-text:#50370c; --bad-text:#66201a;
  --shadow:0 30px 70px -40px rgba(60,40,10,.3); --grid:rgba(74,58,30,.07); --glow:rgba(180,105,20,.07);
  --backdrop:rgba(40,30,12,.42); --focus:#7c4410; --focus-w:2px;
}
/* ── THEME: mist (light cool grey, soft) ── */
html[data-theme="mist"],.swatch[data-theme="mist"]{
  color-scheme:light;
  --bg:#e8ecef; --bg-2:#dde3e7; --panel:#f1f4f6; --panel-2:#f1f4f6; --field:#f8fafb; --nav:rgba(232,236,239,.92);
  --line:rgba(40,60,78,.15); --line-2:rgba(40,60,78,.3); --hover:rgba(40,60,78,.06);
  --text:#212b34; --text-2:#303c47; --muted:#51606c; --faint:#53626e;
  --accent:#1f7f8c; --accent-2:#176f7b; --on-accent:#ffffff; --accent-text:#0e5d68;
  --accent-soft:rgba(31,127,140,.1); --accent-line:rgba(14,93,104,.45);
  --up:#1a6a4c; --up-soft:rgba(26,106,76,.1); --up-line:rgba(26,106,76,.4);
  --down:#a2372d; --down-soft:rgba(162,55,45,.09); --down-line:rgba(162,55,45,.42);
  --warn-text:#4d3a10; --bad-text:#65211b;
  --shadow:0 30px 70px -40px rgba(20,35,50,.3); --grid:rgba(40,60,78,.07); --glow:rgba(31,127,140,.07);
  --backdrop:rgba(20,30,40,.42); --focus:#0e5d68; --focus-w:2px;
}

:root{
  --sans:"Inter","Helvetica Neue","Segoe UI",Arial,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:Georgia,"Times New Roman",serif;
  --pad:clamp(16px,4vw,48px); --ease:cubic-bezier(.2,.7,.2,1);
}

/* ── base ─────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.i18n-pending body{opacity:0}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
a{color:inherit}
a.link,.prose a,.txt a{color:var(--accent-text);text-underline-offset:2px}
:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:3px;border-radius:6px}
.seg button:focus-visible,.tabs a:focus-visible,details.acc summary:focus-visible,.tbl:focus-visible{outline-offset:-2px}   /* inside a clipping box the ring is drawn inwards */
@media (max-width:520px){#bk-rows td:nth-child(n+5){white-space:normal;min-width:7.5em}}   /* phones: several stop prices wrap instead of widening the table */
html[data-theme="contrast"] :focus-visible{outline-offset:3px;box-shadow:0 0 0 calc(var(--focus-w) + 3px) #000}
html[data-theme="contrast"] a{text-decoration:underline}
::selection{background:var(--accent);color:var(--on-accent)}
img,svg{max-width:100%}
.mono{font-family:var(--mono)}
code,kbd,pre,.mono,.code,.expect{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
.accent{color:var(--accent-text)}
.up{color:var(--up)}.down{color:var(--down)}.dim{color:var(--muted)}.faint{color:var(--faint)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:8px;font:600 14px/1 var(--sans);text-decoration:none}
.skip:focus{top:12px}

/* ── brand ────────────────────────────────────────────── */
.badge{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:var(--on-accent);font:700 21px/1 var(--serif);flex:none}
.badge.sm{width:22px;height:22px;font-size:15px;border-radius:5px}
.word{font:800 19px/1 var(--sans);letter-spacing:-.035em;color:var(--text)}
.word b{color:var(--accent-text);font-weight:800}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}

/* ── top bar (all pages) ──────────────────────────────── */
.topbar{position:sticky;top:0;z-index:20;background:var(--nav);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .in{display:flex;align-items:center;gap:18px;min-height:60px;padding:0 var(--pad);max-width:1280px;margin:0 auto}
.topbar .grow{flex:1 1 auto}
.navlinks{display:flex;gap:22px;margin-left:auto}
.navlinks a{color:var(--muted);text-decoration:none;font-size:14px}
.navlinks a:hover{color:var(--text)}
.toplink{font:600 13px/1 var(--sans);color:var(--muted);text-decoration:none;white-space:nowrap}
.toplink:hover{color:var(--text)}

/* ── app shell: the member app (/app) and the operator pages share this top bar ──
   row 1 = brand · member tabs · who is signed in;  row 2 (.optabs, admins only) = operator pages + page tools */
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto;align-items:center}
.tabs::-webkit-scrollbar{display:none}
.tabs a{text-decoration:none;color:var(--muted);font:600 13.5px/1 var(--sans);padding:9px 12px;border-radius:9px;white-space:nowrap}
.tabs a:hover{color:var(--text);background:var(--hover)}
.tabs a[aria-current="page"]{color:var(--text);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
html[data-theme="contrast"] .tabs a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;box-shadow:inset 0 0 0 2px var(--accent)}
.right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.me{font:600 12.5px/1.5 var(--mono);color:var(--muted);white-space:nowrap}
.me a{color:var(--text);text-decoration:none}.me a:hover{color:var(--accent-text);text-decoration:underline}
.me .out{color:var(--down)}
.optabs{border-top:1px solid var(--line)}
.optabs .in{display:flex;align-items:center;gap:6px 10px;min-height:46px;padding:4px var(--pad);max-width:1280px;margin:0 auto;flex-wrap:wrap}
.optabs .k{font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);flex:none}
.optabs nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}
.optabs nav::-webkit-scrollbar{display:none}
.optabs nav a{text-decoration:none;color:var(--muted);font:600 12.5px/1 var(--mono);padding:8px 10px;border-radius:8px;white-space:nowrap}
.optabs nav a:hover{color:var(--text);background:var(--hover)}
.optabs nav a[aria-current="page"]{color:var(--accent-text);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
html[data-theme="contrast"] .optabs nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.optabs .tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;font:600 12px/1.3 var(--mono);color:var(--muted)}
@media (max-width:760px){
  .topbar .in{flex-wrap:wrap;min-height:0;padding-top:8px;padding-bottom:8px;row-gap:8px}
  .tabs{order:3;flex:1 0 100%}
  .right{display:contents}
  .me{order:2;margin-left:auto;white-space:normal;font-size:12px;text-align:right}
  .me a{white-space:nowrap}
  .me:empty{display:none}
  .optabs .tools{margin-left:0;flex:1 0 100%}
  .topbar:has(.optabs),.topbar.two-rows{position:static}    /* two rows on a phone: let the header scroll away */
}
@media (max-width:520px){.tabs{flex-wrap:wrap;overflow:visible}.tabs a{padding:8px 10px}}

/* theme / language switchers */
.switchers{display:inline-flex;align-items:center;gap:6px;flex:none}
.sw{appearance:none;-webkit-appearance:none;font:600 12px/1 var(--mono);color:var(--text);background:var(--field);border:1px solid var(--line-2);border-radius:8px;
  padding:8px 24px 8px 9px;cursor:pointer;max-width:12em;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.sw:hover{border-color:var(--accent-line)}
.sw option{background:var(--panel);color:var(--text)}
.sw-lang{max-width:5.2em}

/* ── buttons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:11px 17px;font:600 14px/1.1 var(--sans);
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s var(--ease),background .15s,border-color .15s;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn-accent,.btn-amber{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:transparent}
.btn-ghost:hover{background:var(--hover)}
.btn-danger{border-color:var(--down-line);color:var(--down);background:var(--down-soft)}
.btn-danger:hover{background:var(--hover)}
.btn-sm{padding:8px 12px;font-size:13px;border-radius:9px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.btn[aria-busy="true"]{cursor:progress}
html[data-theme="contrast"] .btn-ghost,html[data-theme="contrast"] .btn-danger{border-width:2px}
html[data-theme="contrast"] .btn[disabled],html[data-theme="contrast"] .btn[aria-disabled="true"]{opacity:1;border:2px dashed var(--line);background:#000;color:var(--muted)}

/* ── forms ────────────────────────────────────────────── */
.field{margin:0 0 14px}
.field>label:not(.check),.lbl{display:block;font:600 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.input,input[type=text],input[type=email],input[type=password],input[type=search],textarea{
  width:100%;font:15px/1.3 var(--sans);color:var(--text);background:var(--field);border:1px solid var(--line-2);border-radius:10px;padding:12px 13px;min-width:0}
textarea{min-height:88px;resize:vertical;line-height:1.5}
input.mono,.input.mono{font:13.5px/1.3 var(--mono)}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
input:focus,textarea:focus{border-color:var(--accent-line)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--down)}
input[readonly]{color:var(--muted);background:transparent}
select.input{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.input:focus{border-color:var(--accent-line)}
select.input option{background:var(--panel);color:var(--text)}
.hint{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.45}
.hint a{color:var(--accent-text)}
.lbl{font:600 11.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ferr{font:13px/1.45 var(--sans);color:var(--down);margin:6px 0 0}
.ferr:empty{display:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-2);line-height:1.5;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--accent-2)}
.check a{color:var(--accent-text)}
.check input[aria-invalid="true"]{outline:2px solid var(--down);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>.grow{flex:1 1 240px;min-width:0}

/* ── pills, banners, notes ────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono);letter-spacing:.04em;padding:6px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.pill.wrap{white-space:normal;line-height:1.4;max-width:100%}
.pill.accent{color:var(--accent-text);border-color:var(--accent-line);background:var(--accent-soft)}
.pill.ok{color:var(--up);border-color:var(--up-line);background:var(--up-soft)}
.pill.bad{color:var(--down);border-color:var(--down-line);background:var(--down-soft)}
.pill.warn{color:var(--accent-text);border-color:var(--accent-line);background:var(--accent-soft)}
.banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--warn-text);line-height:1.5}
.banner b,.banner strong{color:var(--accent-text)}
.banner.ok{border-color:var(--up-line);background:var(--up-soft);color:var(--text)}
.banner.ok b{color:var(--up)}
.banner.bad{border-color:var(--down-line);background:var(--down-soft);color:var(--bad-text)}
.banner.bad b{color:var(--down)}
.banner.info{border-color:var(--line-2);background:var(--panel-2);color:var(--text-2)}
.banner.info b{color:var(--text)}
.banner .btn{margin-left:auto}
.banner p{margin:0}
.note{font:12.5px/1.55 var(--mono);color:var(--faint);margin:10px 0 0}
.msg{font-size:14px;line-height:1.5;margin:12px 0 0;min-height:0}
.msg:empty{margin:0;padding:0;border:0;min-height:0}   /* empty but still present: a status text that arrives is announced */
.msg.err{color:var(--down)}
.msg.ok{color:var(--up)}

/* ── panels, tables ───────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.panel-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2,.panel-h h3{font:700 16px/1.25 var(--sans);letter-spacing:-.01em;margin:0}
.panel-h .sp{margin-left:auto}
.panel-b{padding:16px}
.tbl{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font:13px/1.2 var(--mono);font-variant-numeric:tabular-nums}
table.t th{font:600 10.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:left;padding:11px 14px;white-space:nowrap}
table.t td{padding:11px 14px;border-top:1px solid var(--line);white-space:nowrap}
.r,table.t th.r{text-align:right}
#v-book table.t th.r,#v-book table.t td.r{text-align:left}
.coin{font-weight:700;color:var(--text)}
.side{display:inline-block;min-width:52px;text-align:center;padding:4px 7px;border-radius:6px;font:700 11px/1 var(--mono);letter-spacing:.05em}
.side.long{color:var(--up);background:var(--up-soft)}
.side.short{color:var(--down);background:var(--down-soft)}
.side.flat{color:var(--muted);background:var(--hover)}
.side.close{color:var(--accent);background:var(--hover)}
table.t tr.grp th{color:var(--muted);background:var(--hover);padding:8px 14px;border-top:1px solid var(--line)}
.t .arr,.how .arr{color:var(--muted);margin:0 5px}
.side{text-transform:uppercase}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:0 28px;padding:4px 18px 10px}
.how-i{display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.how-v{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;padding-top:1px}
.how-v .side+.side{margin-left:6px}
.how-n{font:600 13px/1.6 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.how-n.accent{color:var(--accent)}
.how .was{color:var(--muted);font-size:.9em;font-weight:400}
.how .was.gone{text-decoration:line-through}
.how-b h3{margin:0 0 3px;font-size:14px;font-weight:600;color:var(--text)}
.how-b p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-2)}
@media (max-width:480px){.how-i{grid-template-columns:1fr;gap:8px}}
.t .was{color:var(--muted);font-size:.9em}
.t .was.gone{text-decoration:line-through}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:12px;align-items:start}
.pcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:inherit;text-decoration:none}
a.pcard:hover{border-color:var(--muted)}
.pcard-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pcard-h .coin{font:700 16px/1.2 var(--mono)}
.pcard-h .sz{margin-left:auto;font:13px/1.2 var(--mono);color:var(--muted);white-space:nowrap}
.pcard svg{display:block;width:100%;height:auto;margin:10px 0 8px}
.pcard svg text{font:10px var(--mono);fill:var(--muted)}
.pcard dl.pf{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:8px 12px;margin:0}
.pcard dt{font-size:11px;line-height:1.3;color:var(--muted)}
.pcard dd{margin:1px 0 0;font:12.5px/1.35 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard dd .up{color:var(--up)}
.pcard dd .dn{color:var(--down)}
.pcard .vns{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.vn{--vn:#8a94a6;display:inline-block;min-width:30px;text-align:center;padding:4px 8px;border-radius:6px;font:700 11px/1 var(--mono);letter-spacing:.05em;
  color:var(--text);background:color-mix(in srgb,var(--vn) 24%,transparent);border:1px dashed color-mix(in srgb,var(--vn) 70%,transparent)}
.vn.first{border-style:solid;border-color:var(--vn)}
.vn-hyperliquid{--vn:#2bb8a3}
.vn-aster{--vn:#e08a1e}
.vn-lighter{--vn:#6d7cf0}
.pcard .chg{display:inline-block;margin:10px 0 0;padding:3px 8px;border-radius:6px;font-size:11.5px;line-height:1.3;color:var(--muted);background:var(--hover)}
.pcard .chg.on{color:var(--accent)}
/* "Since entry" / "Held for" at the right end of a line: the same label and value styles as the figures below the chart */
.pcard .rt{margin-left:auto;text-align:right}
.pcard .rk{display:block;font-size:11px;line-height:1.3;color:var(--muted)}
.pcard .rv{display:block;margin:1px 0 0;font:12.5px/1.35 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.pcard .rv .up{color:var(--up)}
.pcard .rv .dn{color:var(--down)}
.pcard-f{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:auto}
/* every card as tall as the tallest one; the footer line sits at the bottom of each */
#ov-cards{grid-auto-rows:1fr;align-items:stretch}
.pcard dl.pf>div:nth-child(2){text-align:right}
.pcard dl.pf>div.c2{grid-column:2;text-align:right}                 /* the stop: right column, under the entry price */                    /* entry price at the right edge, under "Since entry" */
#ov-cards .pcard{display:flex;flex-direction:column}
.pcard .vns{align-items:flex-end}                                   /* chips and the change note keep their own height */
.pcard-f .rt{margin-top:10px}
html[data-theme="contrast"] .side{border:1px solid currentColor}
.empty,table.t td.empty{padding:24px 16px;color:var(--faint);font:13px/1.5 var(--mono);white-space:normal}
.empty a{color:var(--accent-text)}

/* ── copyable code ────────────────────────────────────── */
.code{display:flex;align-items:center;gap:10px;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:9px 10px 9px 12px;font:12.5px/1.5 var(--mono);color:var(--text-2);margin:8px 0 0;min-width:0}
.code code{flex:1 1 auto;min-width:0;white-space:pre;overflow-x:auto;font:inherit;padding:2px 0}
.code .copy,.copy{font:600 11.5px/1 var(--mono);padding:7px 9px;border-radius:7px;border:1px solid var(--line-2);background:transparent;color:var(--muted);cursor:pointer;flex:none}
.code .copy:hover,.copy:hover{color:var(--text);background:var(--hover)}
code.inl{font:12.5px/1.4 var(--mono);color:var(--text-2);background:var(--hover);padding:1px 6px;border-radius:5px;overflow-wrap:anywhere}
kbd{font:600 12px/1 var(--mono);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:2px 5px;color:var(--text)}

/* ── accordion ────────────────────────────────────────── */
details.acc{border-top:1px solid var(--line)}
details.acc:first-of-type{border-top:0}
details.acc summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600;display:flex;gap:10px;align-items:center}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::before{content:"+";font:700 14px/1 var(--mono);color:var(--accent-text);width:14px;flex:none}
details.acc[open] summary::before{content:"−"}
details.acc summary code{font:12.5px/1.4 var(--mono);color:var(--text-2)}
details.acc .acc-b{padding:0 16px 16px 40px;color:var(--text-2);font-size:14px}
details.acc .acc-b p{margin:0 0 8px}

/* ── lists ────────────────────────────────────────────── */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{font-size:14.5px;color:var(--text-2);padding-left:24px;position:relative;line-height:1.5}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--up);font:700 13px/1.6 var(--mono)}
.ticks.no li::before{content:"✕";color:var(--down)}
.ticks.dash li::before{content:"";top:.72em;left:2px;width:11px;border-top:2px dashed var(--accent-text)}

/* ── loading skeleton ─────────────────────────────────── */
.skel{display:block;border-radius:8px;background:linear-gradient(90deg,var(--hover) 25%,var(--line) 50%,var(--hover) 75%);background-size:200% 100%;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ── line chart (IMARA.lineChart): c1 = main series (accent, soft area), c2/c3 = dashed comparisons ── */
.ch{position:relative;min-width:0}
.ch-plot{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ch-plot svg{display:block;width:100%;height:auto;overflow:visible}
.ch .gl{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.ch .ax{fill:var(--faint);font:500 10.5px/1 var(--mono);font-variant-numeric:tabular-nums}
.ch .base{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.ch .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ch .ln.c1{stroke:var(--accent-text)}
.ch .ln.c2{stroke:var(--muted);stroke-dasharray:6 4}
.ch .ln.c3{stroke:var(--up);stroke-dasharray:2 3}
.ch .ar{fill:var(--accent-text);fill-opacity:.1;stroke:none}
.ch .dt{stroke:var(--panel);stroke-width:2;vector-effect:non-scaling-stroke}
.ch .dt.c1{fill:var(--accent-text)}.ch .dt.c2{fill:var(--muted)}.ch .dt.c3{fill:var(--up)}
.ch .xh{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}
.ch-tip{position:absolute;z-index:2;pointer-events:none;background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;padding:7px 10px;
  font:12px/1.5 var(--mono);color:var(--text-2);box-shadow:var(--shadow);white-space:nowrap}
.ch-tip .tt{color:var(--muted);font-size:11.5px}
.ch-tip b{color:var(--text);font-weight:700}
.ch-tip i,.ch-leg i{display:inline-block;width:16px;height:0;border-top:2px solid var(--accent-text);vertical-align:middle;margin-right:7px}
.ch-tip i.c2,.ch-leg i.c2{border-top-style:dashed;border-color:var(--muted)}
.ch-tip i.c3,.ch-leg i.c3{border-top-style:dotted;border-color:var(--up)}
.ch-leg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font:12px/1.4 var(--mono);color:var(--muted)}
html[data-theme="contrast"] .ch .ar{fill-opacity:.16}
html[data-theme="contrast"] .ch-tip{border-width:2px}

/* ── theme preview (Profile): the tokens of its own data-theme ── */
.swatch{display:block;position:relative;height:64px;border-radius:10px;background:var(--bg);border:1px solid var(--line-2);overflow:hidden}
.swatch .sw-top{position:absolute;left:0;right:0;top:0;height:15px;background:var(--nav);border-bottom:1px solid var(--line)}
.swatch .sw-top::before{content:"";position:absolute;left:8px;top:4px;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.swatch .sw-card{position:absolute;left:9px;right:9px;top:22px;bottom:8px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.swatch i{position:absolute;height:4px;border-radius:2px}
.swatch .sw-t{left:7px;top:7px;width:44%;background:var(--text)}
.swatch .sw-m{left:7px;top:16px;width:28%;background:var(--muted)}
.swatch .sw-a{right:7px;top:6px;width:20%;height:10px;border-radius:3px;background:var(--accent)}
.swatch .sw-u{right:7px;top:21px;width:10%;background:var(--up)}
.swatch .sw-d{right:20%;top:21px;width:8%;background:var(--down)}

/* ── footer ───────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);padding:26px 0 36px;margin-top:8px}
.site-foot .in{max-width:1280px;margin:0 auto;padding:0 var(--pad);display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;color:var(--faint);font:12.5px/1.6 var(--mono)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--text);text-decoration:underline}
html[data-theme="contrast"] .site-foot a{text-decoration:underline}

/* ── the three products, shown as a preview (IMARA.tiers) ─ */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0 0}
.tier{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line-2);border-radius:18px;padding:22px;background:var(--panel)}
.tier-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tier-name{font:700 13px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin:0 auto 0 0}
.tier-tag{margin:12px 0 0;font-size:15px;color:var(--text);font-weight:600;line-height:1.4}
.tier-price{font:800 34px/1.1 var(--sans);letter-spacing:-.03em;margin:16px 0 2px;font-variant-numeric:tabular-nums;color:var(--text)}
.tier-price small{font:500 14px/1 var(--sans);color:var(--muted);letter-spacing:0}
.tier-alt{font-size:14px;color:var(--muted);min-height:1.5em}
.tier-buy{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pay-methods{border:0;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 18px}
.pay-methods legend{padding:0;margin:0 0 6px;font-size:13px;color:var(--muted)}
.tier-cap{font:12px/1.45 var(--mono);color:var(--faint);margin-top:4px}
.tier-price+.tier-alt+.tier-cap{margin-top:2px}
.tier-tag+.tier-cap{margin-top:16px}
.tier .ticks{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);flex:1}
.tier .ticks li{font-size:14px}
.tier-foot{margin:16px 0 0;font:12px/1.45 var(--mono);color:var(--faint)}
@media (max-width:900px){.tiers{grid-template-columns:minmax(0,1fr)}}

/* ── small screens ────────────────────────────────────── */
@media (max-width:640px){
  .topbar .in{gap:10px}
  .sw{padding:7px 20px 7px 7px;font-size:11.5px;max-width:7.6em}
  .sw-lang{max-width:4.6em}
  .navlinks{display:none}
}
@media (max-width:380px){.topbar .word{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.btn:hover{transform:none}}
@media print{.topbar,.site-foot,.switchers{display:none}body{background:#fff;color:#000}}
/* setup: the step-by-step guide to an exchange account and its API key */
details.guide{margin-top:10px;padding:10px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--hover)}
details.guide summary{cursor:pointer;font-weight:600}
details.guide ol{margin:10px 0 0;padding-left:20px;display:grid;gap:8px}
details.guide .guide-have{margin:12px 0 4px;font-weight:600}
details.guide .guide-keys{margin:0 0 8px;padding-left:20px;display:grid;gap:4px}
/* setup: step titles, the word list, the answers of the approval window */
.vn-steps .step-t{display:block;margin-bottom:4px;font-size:15px}
.vn-steps .step-p{margin:10px 0 0}
.set-list.words{padding:4px 18px 14px 34px;display:grid;gap:7px}
dl.ans{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:8px 0}
dl.ans dt{font:600 12.5px/1.5 var(--mono);padding:1px 8px;border:1px solid var(--line-2);border-radius:6px;background:var(--field);white-space:nowrap}
dl.ans dd{margin:0}
/* Book: since entry, coloured by gain or loss */
#v-book td .up{color:var(--up)}
#v-book td .dn{color:var(--down)}