/* The idea lab's look. Every length is calc(N * var(--u)), every text size calc(N * var(--t)) with N ≥ 20,
   hairlines stay px. The person sets --size (and --text) with the Size control in the top bar. */
:root {
  --size: 1;
  --text: 1;
  --u: calc(1px * var(--size));
  --t: calc(1px * var(--size) * var(--text));

  --bg: #0d131b;
  --panel: #131b26;
  --panel-2: #182231;
  --edge: #273345;
  --edge-2: #33445c;
  --ink: #e8eef6;
  --ink-2: #b9c6d8;
  --muted: #8fa0b8;

  --in: #3fc1b0;      /* money in */
  --in-bg: #13302e;
  --out: #5aa9f0;     /* money out */
  --out-bg: #13243a;
  --kept: #b48cf2;    /* what is yours */
  --kept-bg: #221c33;
  --ask: #f2c94c;     /* needs you */
  --ask-ink: #f2d77a;
  --ask-bg: #2a2412;
  --ok: #7ed36b;
  --ok-bg: #182716;
  --bad: #f07878;
  --bad-bg: #331818;
  --tax: #f2994a;     /* the government's share */
  --tax-bg: #33220f;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r: calc(14 * var(--u));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 400 calc(20 * var(--t)) / 1.35 var(--body); }
body { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--kept); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); margin: 0; font-weight: 700; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── the frame: top bar · left Sidecar (the pretend SaaS) · Centre · right (feedback) ── */
#lab { display: grid; height: 100vh; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: var(--left-w, calc(600 * var(--u))) minmax(0, 1fr) var(--right-w, calc(480 * var(--u))); }
#lab.no-left { --left-w: calc(56 * var(--u)); }
#lab.no-right { --right-w: calc(56 * var(--u)); }
#top { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); background: #0a0f15; border-bottom: 1px solid var(--edge); min-width: 0; }
#top .brand { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
#top .brand b { font: 700 calc(24 * var(--t)) var(--display); }
#top .brand span { font-size: calc(20 * var(--t)); color: var(--muted); }
#ideas { flex: 1; min-width: 0; display: flex; gap: calc(8 * var(--u)); overflow-x: auto; padding: calc(4 * var(--u)) 0; scrollbar-width: thin; }
#ideas button { flex: none; min-height: calc(64 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); border: 1px solid var(--edge); background: var(--panel); color: var(--ink-2); font-weight: 600; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(2 * var(--u)); }
#ideas button .top { display: flex; align-items: center; gap: calc(8 * var(--u)); }
#ideas button .state { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(20 * var(--t)); font-weight: 400; }
#ideas button .state .dot { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: 2px solid; }
#ideas button .state .extra { color: var(--muted); }
#ideas button.new { border-style: dashed; }
#ideas button.done { border-color: #2f5a2a; }
#ideas button[aria-current='true'] { background: #26344a; color: #fff; border-color: var(--kept); border-style: solid; }
#ideas button .n { font: 600 calc(20 * var(--t)) var(--mono); color: var(--muted); }
#progress { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; padding-left: calc(12 * var(--u)); border-left: 1px solid var(--edge); }
#progress b { font: 700 calc(22 * var(--t)) var(--display); color: var(--ok); }
#progress span { font-size: calc(20 * var(--t)); color: var(--muted); }
.fb .net { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(28 * var(--u)); }
#size { display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--muted); white-space: nowrap; }
#size input { width: calc(140 * var(--u)); accent-color: var(--kept); }

.side { position: relative; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--edge); background: var(--panel); }
#right.side { border-right: 0; border-left: 1px solid var(--edge); }
.side-head { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(12 * var(--u)); background: #0f1620; border-bottom: 1px solid var(--edge); font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.side-head .dot { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; flex: none; }
.side-head .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.iconbtn { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(10 * var(--u)); border: 1px solid var(--edge); background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex: none; }
.iconbtn svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.side-body { flex: 1; min-height: 0; overflow: auto; }
#lab.no-left #left .side-body, #lab.no-left #left .side-head .grow, #lab.no-left #left .side-head .dot,
#lab.no-right #right .side-body, #lab.no-right #right .side-head .grow, #lab.no-right #right .side-head .dot { display: none; }

#centre { position: relative; min-width: 0; min-height: 0; overflow: auto; background: var(--bg); }
#centre > .view { min-height: 100%; }
#centre.pinning { cursor: crosshair; }
.pin { position: absolute; z-index: 30; width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin: calc(-40 * var(--u)) 0 0 calc(-20 * var(--u)); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ask); color: #2a2412; border: 2px solid #2a2412; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pin b { transform: rotate(45deg); font: 700 calc(20 * var(--t)) var(--display); }

/* ── shared pieces views use ── */
.v-pad { padding: calc(32 * var(--u)) calc(40 * var(--u)); }
.v-title { font: 700 calc(40 * var(--t)) var(--display); }
.v-sub { color: var(--muted); font-size: calc(22 * var(--t)); }
.card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); padding: calc(20 * var(--u)); }
.btn { height: calc(52 * var(--u)); padding: 0 calc(22 * var(--u)); border-radius: calc(12 * var(--u)); border: 1px solid var(--edge-2); background: var(--panel-2); color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.go { background: var(--ask); color: #2a2412; border: 0; }
.btn.primary { background: var(--kept); color: #1b1230; border: 0; }
.btn.small { height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); }
.chip { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(2 * var(--u)) calc(12 * var(--u)); border-radius: 999px; border: 1px solid var(--edge-2); font-size: calc(20 * var(--t)); color: var(--ink-2); white-space: nowrap; }
.hl { outline: 3px solid var(--kept) !important; outline-offset: 2px; }
.tip { position: fixed; z-index: 100; pointer-events: none; max-width: calc(420 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: #f4f6fa; color: #111; font-size: calc(20 * var(--t)); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(28 * var(--u)); transform: translateX(-50%); padding: calc(14 * var(--u)) calc(22 * var(--u)); border-radius: calc(12 * var(--u)); background: #f4f6fa; color: #111; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* ── the feedback panel ── */
.fb { padding: calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
.fb h2 { font-size: calc(28 * var(--t)); }
.fb .pitch { color: var(--ink-2); }
.fb .from { color: var(--muted); }
.fb label, .fb .q { font-weight: 600; }
.fb .scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(6 * var(--u)); }
.fb .scale button { min-height: calc(64 * var(--u)); padding: calc(6 * var(--u)) calc(4 * var(--u)); border-radius: calc(12 * var(--u)); border: 1px solid var(--edge-2); background: var(--panel-2); font-size: calc(20 * var(--t)); line-height: 1.1; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); }
.fb .scale button svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.fb .scale button[aria-pressed='true'] { background: #26344a; border-color: var(--kept); color: #fff; }
.fb .feat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) 0; border-bottom: 1px solid var(--edge); }
.fb .feat button { height: calc(44 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); border: 1px solid var(--edge-2); background: transparent; color: var(--ink-2); }
.fb .feat button[aria-pressed='true'].keep { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.fb .feat button[aria-pressed='true'].drop { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.fb textarea, .fb input, .fb select { width: 100%; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); border: 1px solid var(--edge-2); background: #0f1620; }
.fb textarea { min-height: calc(110 * var(--u)); resize: vertical; }
.fb .pins { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.fb .pinrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(8 * var(--u)); align-items: start; }
.fb .pinrow .no { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: var(--ask); color: #2a2412; font: 700 calc(20 * var(--t)) var(--display); display: flex; align-items: center; justify-content: center; }
.fb .sent { color: var(--ok); font-weight: 600; }
.fb details { border: 1px solid var(--edge); border-radius: var(--r); padding: calc(12 * var(--u)); }
.fb summary { cursor: pointer; font-weight: 600; }
.fb .row { display: flex; gap: calc(10 * var(--u)); flex-wrap: wrap; align-items: center; }

/* ── the pretend SaaS (light, like the web apps people know) ── */
.saas { background: #f6f7f9; color: #1d2433; min-height: 100%; }
.saas .tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: calc(4 * var(--u)); overflow-x: auto; padding: calc(8 * var(--u)); background: #ffffff; border-bottom: 1px solid #dde1e8; }
.saas .tabs button { flex: none; height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(8 * var(--u)); border: 0; background: transparent; color: #3a4252; font-weight: 600; }
.saas .tabs button[aria-current='true'] { background: #e7eefc; color: #1b4fd6; }
.saas .page { padding: calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.saas h3 { font: 700 calc(24 * var(--t)) var(--body); color: #1d2433; }
.saas .box { background: #fff; border: 1px solid #dde1e8; border-radius: calc(10 * var(--u)); padding: calc(14 * var(--u)); }
.saas table { width: 100%; border-collapse: collapse; font-size: calc(20 * var(--t)); }
.saas th { text-align: left; font-weight: 600; color: #5b6475; padding: calc(8 * var(--u)); border-bottom: 2px solid #dde1e8; white-space: nowrap; position: sticky; top: calc(60 * var(--u)); background: #f6f7f9; }
.saas td { padding: calc(8 * var(--u)); border-bottom: 1px solid #e8ebf0; vertical-align: top; }
.saas tr[data-ref] { cursor: pointer; }
.saas tr[data-ref]:hover td { background: #eef3fd; }
.saas tr.hl td { background: #fff4cc; }
.saas .r { text-align: right; font-family: var(--mono); white-space: nowrap; }
.saas .pill { display: inline-block; padding: 0 calc(10 * var(--u)); border-radius: 999px; font-size: calc(20 * var(--t)); font-weight: 600; }
.saas .pill.Paid { background: #dff5e3; color: #1d6b2c; }
.saas .pill.Open { background: #e7eefc; color: #1b4fd6; }
.saas .pill.Overdue { background: #fde2e2; color: #a61b1b; }
.saas .muted { color: #5b6475; }
.saas select, .saas .sbtn { height: calc(44 * var(--u)); border-radius: calc(8 * var(--u)); border: 1px solid #c9ced8; background: #fff; color: #1d2433; padding: 0 calc(10 * var(--u)); }
.saas .sbtn.blue { background: #1b4fd6; border-color: #1b4fd6; color: #fff; font-weight: 600; }