/* Waxbook plugin surfaces · system chrome (OpenAI design guidelines): system font stack, host palette for the chrome,
   brand colour only on badges and primary buttons, light/dark from window.openai.theme (data-theme on <html>). */
:root{
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --host-width:640px;
  /* light */
  --bg:#ffffff; --fg:#0d0d0d; --fg2:#5d5f63; --fg3:#8a8d92; --line:#e4e4e6; --mat:#f4f4f5; --mat2:#ebebed;
  --brand:#0f7b6c; --brand-ink:#ffffff; --brand-tint:#dff3ee; --brand-text:#0b5e52;
  --warn:#8a5a00; --warn-tint:#fff1cc; --bad:#9c3a22; --bad-tint:#fbe2da; --good:#1a6b3d; --good-tint:#dff0e5;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px -12px rgba(0,0,0,.25);
  --r:14px; --r2:8px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#212121; --fg:#ececec; --fg2:#b4b4b4; --fg3:#8e8e8e; --line:#3a3a3a; --mat:#2a2a2a; --mat2:#333333;
  --brand:#2fa892; --brand-ink:#06201b; --brand-tint:#173b35; --brand-text:#7fdcc9;
  --warn:#ffd37a; --warn-tint:#3b2d08; --bad:#ffb09a; --bad-tint:#4a1d12; --good:#8fe0ad; --good-tint:#133622;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:transparent;color:var(--fg);font:15px/1.45 var(--font);-webkit-font-smoothing:antialiased}
body{padding:12px 0 0}
.host{width:min(var(--host-width),100%);margin:0 auto;padding:0 12px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ---- inline card */
.wb-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);box-shadow:var(--shadow);overflow:hidden}
.wb-card .row{display:flex;gap:14px;align-items:flex-start}
.wb-figure{position:relative;flex-shrink:0;width:112px}
.wb-figure.land{width:150px}
.wb-figure .frame{position:relative;width:100%;aspect-ratio:5/7;display:flex;align-items:center;justify-content:center;padding:4px}
.wb-figure.land .frame{aspect-ratio:7/5}
.wb-figure.slab .frame{aspect-ratio:1000/1723}
.wbcard{position:relative;display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
.wbcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.wbcard.wb-gl img{visibility:hidden}
.wb-figure{display:flex;flex-direction:column;align-items:center;gap:6px}
.wb-figure .tap{font:600 10px var(--font);letter-spacing:.04em;color:var(--fg3);white-space:nowrap}
.wb-main{display:flex;flex-direction:column;gap:8px;min-width:0;flex-grow:1}
.wb-name{font-size:17px;font-weight:650;letter-spacing:-.01em;line-height:1.2}
.wb-id{font-size:13px;color:var(--fg2);line-height:1.4}
.wb-id b{color:var(--fg);font-weight:600}
/* badge belt */
.belt{display:flex;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:0;border-radius:999px;background:var(--brand-tint);color:var(--brand-text);font:600 12px var(--font);letter-spacing:.01em;cursor:pointer;max-width:100%}
.badge .q{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;font:700 9px var(--mono);opacity:.75}
.badge[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
.badge[aria-pressed="true"] .q{opacity:1}
.badge:focus-visible,.btn:focus-visible,.chip:focus-visible,.wbcard:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.blurb{font-size:13px;line-height:1.45;color:var(--fg2);padding:8px 10px;border-radius:var(--r2);background:var(--mat)}
.blurb b{color:var(--fg)}
.blurb .lvl{display:inline-flex;gap:8px;margin-left:6px;font:600 11px var(--font);color:var(--fg3)}
.blurb .lvl button{all:unset;cursor:pointer;color:var(--fg3)}
.blurb .lvl button[aria-pressed="true"]{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
/* value line */
.value{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.value .big{font:650 24px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.value .big.soft{color:var(--fg2);font-weight:500}
.value .range{font:500 13px var(--mono);color:var(--fg2)}
.value .meta{font-size:12.5px;color:var(--fg2);flex-basis:100%}
.value .meta b{color:var(--fg);font-weight:600}
.state{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:0 8px;border-radius:6px;font:600 11px var(--font);letter-spacing:.02em;white-space:nowrap}
.state i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.state.verified{background:var(--good-tint);color:var(--good)}
.state.thin,.state.stale,.state.lot_value_only,.state.parallel_unknown{background:var(--warn-tint);color:var(--warn)}
.state.unpriced{background:transparent;color:var(--fg2);border:1.5px dashed var(--fg3)}
.state.unpriced i{background:transparent;border:1.5px solid currentColor}
.delta{font:600 12.5px var(--mono);font-variant-numeric:tabular-nums}
.delta.up{color:var(--good)}.delta.down{color:var(--bad)}.delta.flat{color:var(--fg2)}
.tri{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;margin-right:3px;vertical-align:1px}
.tri.up{border-bottom:6px solid currentColor}.tri.down{border-top:6px solid currentColor}
/* actions */
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:600 14px var(--font);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.ghost{background:transparent}
.btn svg{width:14px;height:14px;flex-shrink:0}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:600 13px var(--font);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.note{font-size:12.5px;line-height:1.45;color:var(--fg2)}
.note b{color:var(--fg)}
.hr{height:1px;background:var(--line)}
/* narrow (iOS inline ≈ 358) */
@media (max-width:420px){
  .wb-card .row{gap:12px}
  .wb-figure{width:92px}.wb-figure.land{width:120px}
  .wb-name{font-size:16px}
  .value .big{font-size:22px}
  .actions .btn{flex-grow:1}
}
/* fullscreen / pip */
.fs{min-height:100vh;display:flex;flex-direction:column;gap:14px;padding:16px 16px calc(var(--composer,92px) + var(--safe-bottom,0px))}
.pip .fs{min-height:0;padding-bottom:16px}
.fs-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fs-title{font-size:19px;font-weight:650;letter-spacing:-.01em}
.eyebrow{font:600 11px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.stage{position:relative;flex-grow:1;display:flex;align-items:center;justify-content:center;border-radius:var(--r);background:var(--mat);min-height:320px;overflow:hidden}
.composer-overlay{position:fixed;left:0;right:0;bottom:0;height:calc(var(--composer,92px) + var(--safe-bottom,0px));pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.08),transparent);display:none}
.mock-composer .composer-overlay{display:block}
.mock-composer .composer-overlay::after{content:'ChatGPT composer (host)';position:absolute;left:16px;right:16px;bottom:calc(14px + var(--safe-bottom,0px));height:52px;border-radius:26px;border:1px dashed var(--fg3);display:flex;align-items:center;padding:0 16px;font:12px var(--font);color:var(--fg3);background:var(--bg)}
/* reduced motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.cm-hud{font-family:var(--mono)!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}