/* Orbita — the dashboard.

   Loads after styles.css and keeps its palette, its type and its brand mark.
   What it does not keep is the landing page's rhythm: nothing here is being
   sold, so the headings shrink, the whitespace tightens, and every screen is
   built to answer one question in the first two seconds — how much did I
   spend, is it fast, and which key is doing it.

   The rail is the dark slab from the price card. It is the one large block of
   colour on the page, which leaves the numbers as the only other thing with
   any weight. */

:root{--rail:244px;--gut:clamp(20px,2.6vw,34px);--ok:#2f9e6e;--warn:#d08a2c;--bad:#c2503f}
:root[data-theme=dark]{--ok:#5ad39a;--warn:#e6b45e;--bad:#ff7358}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ok:#5ad39a;--warn:#e6b45e;--bad:#ff7358}}

body.app{margin:0;min-height:100vh;overflow-x:hidden}
.app-wrap{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}

/* ── the rail ───────────────────────────────────────────────────────────── */
/* The hairline is for the dark theme, where the slab and the page sit two
   shades apart and the rail would otherwise have no edge at all. */
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;padding:22px 14px 16px;background:var(--slab);color:var(--onslab);border-right:1px solid color-mix(in srgb,var(--onslab) 9%,transparent);z-index:8}
.rail .brand{color:var(--onslab);padding:0 8px 20px;font-size:21px}
.rail .brand svg circle{fill:var(--coral)}
.rail-tag{font:9px DM Mono,monospace;letter-spacing:.12em;color:#a49ccd;background:color-mix(in srgb,var(--onslab) 10%,transparent);padding:3px 6px;border-radius:3px;margin-left:2px;letter-spacing:.1em}
.rail-group{font:500 9px DM Mono,monospace;letter-spacing:.13em;color:#7f77a8;padding:16px 10px 7px;margin:0}
.rail a,.rail button.rail-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:5px;background:none;color:#b3abd6;font:500 12.5px "DM Sans",sans-serif;text-decoration:none;text-align:left;cursor:pointer;position:relative;transition:background .18s,color .18s}
.rail a:hover,.rail button.rail-item:hover{background:color-mix(in srgb,var(--onslab) 7%,transparent);color:#fff}
.rail a[aria-current=page]{background:color-mix(in srgb,var(--onslab) 11%,transparent);color:#fff}
.rail a[aria-current=page]:before{content:"";position:absolute;left:-14px;top:50%;width:3px;height:18px;margin-top:-9px;border-radius:0 2px 2px 0;background:var(--yellow)}
.rail svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail .ext{margin-left:auto;font-size:10px;color:#7f77a8}
.rail-fill{flex:1}
.rail-foot{border-top:1px solid color-mix(in srgb,var(--onslab) 11%,transparent);padding-top:12px;margin-top:10px}

/* Who is signed in, and the only way out. */
.who{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:5px}
.who i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--coral);color:#fff;font:600 12px "DM Sans",sans-serif;font-style:normal;text-transform:uppercase}
.who div{min-width:0;flex:1}
.who b{display:block;font:600 12px "DM Sans",sans-serif;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who span{display:block;font:9.5px DM Mono,monospace;color:#8981ae;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-out{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:4px;background:none;color:#8981ae;cursor:pointer;transition:color .18s,background .18s}
.who-out:hover{color:#fff;background:color-mix(in srgb,var(--onslab) 10%,transparent)}

/* ── the page ───────────────────────────────────────────────────────────── */
.sheet{min-width:0;padding:0 var(--gut) 60px;display:flex;flex-direction:column}
.app-top{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:16px;padding:20px 0 18px;margin-bottom:8px;background:linear-gradient(var(--cream) 72%,transparent);backdrop-filter:blur(3px)}
.app-top h1{flex:1;font-size:27px;letter-spacing:-.055em;margin:0;line-height:1.1}
.app-top-right{display:flex;align-items:center;gap:10px}
.chip{display:inline-flex;align-items:center;gap:7px;font:500 10px DM Mono,monospace;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:6px 11px}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.app-burger{display:none;width:37px;height:37px;padding:0;border:1px solid var(--line);border-radius:4px;background:none;color:var(--ink);cursor:pointer}
.app-burger i{display:block;width:15px;height:1.6px;background:currentColor;margin:3px auto}

.view[hidden]{display:none}
.view{display:grid;gap:14px}
.lede{font-size:13.5px;line-height:1.6;color:var(--muted);margin:-4px 0 6px;max-width:640px}

/* ── panels ─────────────────────────────────────────────────────────────── */
.panel{background:var(--sheet);border:1px solid var(--line);border-radius:8px;padding:20px 22px}
.panel>header{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.panel h2{font-size:15px;letter-spacing:-.03em;margin:0}
.panel .sub{font:10px DM Mono,monospace;color:var(--faint);margin:0}

/* ── the four numbers ───────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{background:var(--sheet);border:1px solid var(--line);border-radius:8px;padding:17px 19px 15px;position:relative;overflow:hidden}
.tile p{font:500 9.5px DM Mono,monospace;letter-spacing:.1em;color:var(--muted);margin:0}
.tile b{display:block;font-size:31px;line-height:1.15;letter-spacing:-.055em;margin-top:9px;font-variant-numeric:tabular-nums}
.tile b small{font-size:15px;letter-spacing:-.03em;color:var(--muted);margin-left:1px}
.tile .move{display:inline-flex;align-items:center;gap:4px;font:500 10px DM Mono,monospace;margin-top:6px;color:var(--muted)}
.tile .move.up{color:var(--ok)}
.tile .move.down{color:var(--bad)}
.tile .move.flat{color:var(--faint)}
.tile .spark{position:absolute;right:0;bottom:0;width:74px;height:34px;opacity:.5}
.tile .spark path{fill:none;stroke:var(--coral);stroke-width:1.6}

/* ── charts ─────────────────────────────────────────────────────────────── */
.plot{position:relative;width:100%}
.plot svg{display:block;width:100%;overflow:visible}
.plot .grid{stroke:color-mix(in srgb,var(--ink) 11%,transparent);stroke-dasharray:3 5}
.plot .tickv{font:9.5px DM Mono,monospace;fill:var(--faint)}
.plot .tickd{font:9.5px DM Mono,monospace;fill:var(--faint)}
/* The fill is set on the element — each chart carries its own gradient id. */
.plot .line{fill:none;stroke:var(--coral);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.plot .bar{fill:var(--coral);opacity:.85}
.plot .hair{stroke:var(--ink);stroke-opacity:.3;stroke-dasharray:2 4}
.plot .knob{fill:var(--coral);stroke:var(--cream);stroke-width:2.5}
.plot .hit{fill:transparent;cursor:crosshair}
.tip{position:absolute;z-index:3;pointer-events:none;opacity:0;transform:translate(-50%,-100%);transition:opacity .14s;background:var(--slab);color:var(--onslab);border-radius:5px;padding:9px 11px;font:10px/1.5 DM Mono,monospace;white-space:nowrap;box-shadow:0 10px 24px color-mix(in srgb,var(--shade) 24%,transparent)}
.tip.on{opacity:1}
.tip b{display:block;font-size:12px;color:#fff;font-weight:500}
.tip span{color:#a49ccd}

/* ── segmented switches ─────────────────────────────────────────────────── */
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
.seg button{border:0;border-radius:4px;background:none;color:var(--muted);font:500 10.5px DM Mono,monospace;padding:6px 11px;cursor:pointer;transition:background .18s,color .18s}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected=true]{background:var(--slab);color:var(--onslab)}

/* ── tables ─────────────────────────────────────────────────────────────── */
.grid-table{width:100%;border-collapse:collapse;font-size:12.5px}
.grid-table th{text-align:left;font:500 9.5px DM Mono,monospace;letter-spacing:.1em;color:var(--muted);padding:0 12px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.grid-table td{padding:12px 12px 12px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);vertical-align:middle}
.grid-table tr:last-child td{border-bottom:0}
/* Colour stated rather than inherited: styles.css owns a global .num for the
   landing page's card numerals and would otherwise grey these out. */
.grid-table .num{text-align:right;font-variant-numeric:tabular-nums;font-family:"DM Mono",monospace;font-size:11.5px;color:var(--ink)}
/* Only the last column loses its gutter. Zeroing it on every right-aligned
   cell runs the numbers into the column beside them. */
.grid-table th:last-child,.grid-table td:last-child{padding-right:0}
.grid-table .mono{font:11.5px DM Mono,monospace;color:var(--muted)}
.grid-table .end{text-align:right;padding-right:0}
.dim{color:var(--faint)}

.pill{display:inline-flex;align-items:center;gap:5px;font:500 10px DM Mono,monospace;border-radius:20px;padding:3px 8px;background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.pill.no{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.pill.hold{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}

/* A share bar that lives inside a cell — it has to read at 4px tall. */
.share{display:flex;align-items:center;gap:9px;min-width:120px}
.share i{flex:1;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.share i b{display:block;height:100%;border-radius:3px;background:var(--coral);transition:width .6s cubic-bezier(.22,1,.36,1)}
.share span{font:11px DM Mono,monospace;color:var(--muted);width:38px;text-align:right}

/* ── buttons ────────────────────────────────────────────────────────────── */
.act{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:10px 14px;border:0;border-radius:4px;background:var(--coral);color:#fff;font:500 10.5px DM Mono,monospace;text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .18s,opacity .18s}
.act:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 9px 16px color-mix(in srgb,var(--coral) 34%,transparent)}
.act:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.act.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.act.ghost:hover:not(:disabled){border-color:var(--ink);background:var(--sheet-hi);box-shadow:none;transform:none}
.act.slab{background:var(--slab);color:var(--onslab)}
.act.slab:hover:not(:disabled){box-shadow:0 9px 16px color-mix(in srgb,var(--shade) 22%,transparent)}
.act.risk{background:none;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent)}
.act.risk:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 10%,transparent);box-shadow:none;transform:none}
.act.busy{pointer-events:none;opacity:.6}
.icon{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:4px;background:none;color:var(--muted);cursor:pointer;transition:color .18s,border-color .18s,background .18s}
.icon:hover{color:var(--ink);border-color:var(--ink);background:var(--sheet-hi)}
.icon.warn:hover{color:var(--bad);border-color:var(--bad);background:color-mix(in srgb,var(--bad) 9%,transparent)}
.icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.row-acts{display:flex;gap:6px;justify-content:flex-end}

/* ── a secret ───────────────────────────────────────────────────────────── */
.secret{display:flex;align-items:center;gap:8px;font:11.5px DM Mono,monospace;background:var(--card);border:1px solid var(--card-line);border-radius:5px;padding:9px 10px;min-width:0}
.secret code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.secret button{flex:none}

/* Shown once, on creation, and said so — the row afterwards only ever holds a
   prefix, so nobody has to wonder whether the page is leaking their key. */
.reveal{border:1px solid var(--card-line);background:var(--card);border-radius:7px;padding:16px 18px;display:grid;gap:11px}
.reveal p{margin:0;font:10.5px/1.6 DM Mono,monospace;color:var(--muted)}
.reveal p b{color:var(--ink)}

.privacy-promise{background:linear-gradient(135deg,color-mix(in srgb,var(--purple) 8%,var(--sheet)),var(--sheet))}
.privacy-promise>.lede{margin:0;max-width:760px}
.privacy-facts{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.privacy-facts div{display:grid;gap:8px;padding:16px;border-right:1px solid var(--line)}
.privacy-facts div:last-child{border-right:0}
.privacy-facts b{font-size:13px}
.privacy-facts span{font:10.5px/1.55 DM Mono,monospace;color:var(--muted)}
.payment-method-row{display:grid;grid-template-columns:78px 1fr auto;gap:18px;align-items:center}.payment-method-row>div:nth-child(2)>b{font-size:14px}.payment-method-row p{max-width:540px;margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.card-mark{width:78px;height:48px;padding:9px;border-radius:7px;background:var(--slab);color:var(--onslab);display:flex;align-items:flex-end;justify-content:space-between;box-shadow:6px 6px color-mix(in srgb,var(--coral) 45%,transparent)}.card-mark i{align-self:flex-start;width:12px;height:9px;border-radius:2px;background:var(--yellow)}.card-mark b{font:9px DM Mono,monospace;letter-spacing:.12em}

/* ── forms inside the app ───────────────────────────────────────────────── */
.form-row{display:grid;gap:7px;max-width:380px}
.form-row label{font:500 9.5px DM Mono,monospace;letter-spacing:.1em;color:var(--muted)}
.form-row input,.form-row select,.form-row textarea{width:100%;font:13.5px "DM Sans",sans-serif;color:var(--ink);background:var(--card);border:1px solid var(--card-line);border-radius:5px;padding:11px 12px;transition:border-color .18s,box-shadow .18s}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--faint)}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 16%,transparent)}
.form-row .say{font:10px/1.5 DM Mono,monospace;color:var(--faint);min-height:13px}
.form-row.bad input{border-color:var(--coral)}
.form-row.bad .say{color:var(--coral)}
.form-row.good .say{color:var(--ok)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:780px}
.form-grid .form-row{max-width:none}

.switch{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:12.5px;color:var(--ink)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{flex:none;width:36px;height:20px;border-radius:20px;background:color-mix(in srgb,var(--ink) 16%,transparent);position:relative;transition:background .22s}
.switch i:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--cream);transition:transform .24s cubic-bezier(.34,1.4,.5,1)}
.switch input:checked+i{background:var(--coral)}
.switch input:checked+i:after{transform:translateX(16px)}
.switch input:focus-visible+i{box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 22%,transparent)}

/* ── empty and loading ──────────────────────────────────────────────────── */
.empty{display:grid;justify-items:center;text-align:center;gap:12px;padding:44px 20px}
.empty b{font-size:17px;letter-spacing:-.04em}
.empty p{margin:0;font-size:12.5px;color:var(--muted);max-width:330px;line-height:1.6}
.bones{border-radius:5px;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 7%,transparent) 25%,color-mix(in srgb,var(--ink) 12%,transparent) 37%,color-mix(in srgb,var(--ink) 7%,transparent) 63%);background-size:400% 100%;animation:bones 1.3s ease-in-out infinite;color:transparent!important}
@keyframes bones{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.bones{animation:none}}

/* ── playground ─────────────────────────────────────────────────────────── */
.play{display:grid;grid-template-columns:330px 1fr;gap:14px;align-items:start}
.play-controls{display:grid;gap:16px}
.range{display:grid;gap:6px}
.range .top{display:flex;justify-content:space-between;font:500 9.5px DM Mono,monospace;letter-spacing:.1em;color:var(--muted)}
.range .top b{color:var(--ink);letter-spacing:0}
/* Drawn rather than tinted: accent-color alone leaves WebKit's own dark track,
   which is the heaviest thing on the panel and the least important. */
.range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 14%,transparent);outline:none}
.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--coral);border:2.5px solid var(--sheet);box-shadow:0 1px 5px color-mix(in srgb,var(--shade) 30%,transparent);cursor:pointer}
.range input[type=range]::-moz-range-thumb{width:14px;height:14px;border:2.5px solid var(--sheet);border-radius:50%;background:var(--coral);cursor:pointer}
.range input[type=range]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 22%,transparent)}
.out{background:var(--slab);color:var(--onslab);border-radius:8px;overflow:hidden;min-height:340px;display:flex;flex-direction:column}
.out-top{display:flex;align-items:center;gap:2px;padding:9px 11px;border-bottom:1px solid color-mix(in srgb,var(--onslab) 11%,transparent)}
.out-top button{border:0;border-radius:4px;background:none;color:#8981ae;font:500 10.5px DM Mono,monospace;padding:6px 10px;cursor:pointer;transition:background .18s,color .18s}
.out-top button:hover{color:#fff}
.out-top button[aria-selected=true]{background:color-mix(in srgb,var(--onslab) 10%,transparent);color:#fff}
.out-top .meta{margin-left:auto;font:10px DM Mono,monospace;color:#8981ae;padding-right:4px}
.out pre{flex:1;margin:0;padding:18px 20px;font:11.5px/1.75 DM Mono,monospace;color:#dedbf0;overflow:auto;max-height:520px}
.out .k{color:#b8abff}.out .s{color:#ffc36c}.out .n{color:#c8ffad}.out .c{color:#8981ae}.out .b{color:#7fe3ff}

/* ── the preview strip, again ───────────────────────────────────────────── */
.demo-strip{display:flex;align-items:center;gap:10px;font:10px/1.5 DM Mono,monospace;color:var(--on-sun);background:var(--sun);border-radius:5px;padding:9px 13px;margin-bottom:2px}
.demo-strip[hidden]{display:none!important}
.demo-strip svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.demo-strip b{font-weight:500}

/* ── asking before doing something irreversible ─────────────────────────── */
/* A native <dialog>, so focus, Escape and the backdrop are the browser's job
   and not a pile of listeners that get one of them wrong. */
dialog.ask{border:0;padding:0;border-radius:9px;background:var(--sheet);color:var(--ink);width:min(430px,calc(100vw - 32px));box-shadow:0 26px 64px color-mix(in srgb,var(--shade) 36%,transparent)}
dialog.ask::backdrop{background:color-mix(in srgb,#0b0724 58%,transparent)}
dialog.ask[open]{animation:ask-in .26s cubic-bezier(.22,1,.36,1)}
@keyframes ask-in{from{opacity:0;transform:translateY(10px) scale(.985)}}
@media(prefers-reduced-motion:reduce){dialog.ask[open]{animation:none}}
.ask-body{padding:24px 24px 4px;display:grid;gap:13px}
.ask-body h3{margin:0;font-size:19px;letter-spacing:-.045em}
.ask-body p{margin:0;font:12px/1.65 "DM Sans",sans-serif;color:var(--muted)}
.ask-body p b{color:var(--ink);font-weight:600}
.ask-foot{display:flex;justify-content:flex-end;gap:9px;padding:20px 24px 22px}

/* ── the copy flash ─────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:26px;z-index:40;transform:translate(-50%,14px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:9px;background:var(--slab);color:var(--onslab);border-radius:6px;padding:11px 16px;font:500 11px DM Mono,monospace;box-shadow:0 14px 32px color-mix(in srgb,var(--shade) 28%,transparent);transition:opacity .2s,transform .3s cubic-bezier(.22,1,.36,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast i{width:7px;height:7px;border-radius:50%;background:var(--yellow)}

/* ── entrances ──────────────────────────────────────────────────────────── */
/* Only the panels, only once per view, and only while the document can animate
   its way back. Same .still contract as everywhere else in this build. */
html.motion .view>*{opacity:0;transform:translateY(12px)}
html.motion .view>.in{opacity:1;transform:none;transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1)}
html.motion.still .view *,html.motion.still .app-wrap *{transition:none!important}

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media(max-width:1080px){.tiles{grid-template-columns:1fr 1fr}.play{grid-template-columns:1fr}}
@media(max-width:900px){
  .app-wrap{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:264px;height:100%;transform:translateX(-100%);transition:transform .32s cubic-bezier(.22,1,.36,1);box-shadow:0 0 40px color-mix(in srgb,var(--shade) 40%,transparent)}
  body.app.rail-open .rail{transform:none}
  body.app.rail-open:after{content:"";position:fixed;inset:0;z-index:7;background:color-mix(in srgb,var(--shade) 42%,transparent)}
  .app-burger{display:block}
  .sheet{padding:0 18px 46px}
  .form-grid{grid-template-columns:1fr}
  .privacy-facts{grid-template-columns:1fr}.privacy-facts div{border-right:0;border-bottom:1px solid var(--line)}.privacy-facts div:last-child{border-bottom:0}
  .payment-method-row{grid-template-columns:78px 1fr}.payment-method-row .act{grid-column:1/-1;width:max-content}
}
@media(max-width:560px){
  .tiles{grid-template-columns:1fr}
  .app-top h1{font-size:22px}
  .panel{padding:16px 15px}
  .grid-table .hide-s{display:none}
}