/* ==========================================================================
   Dashi UI — "the edit suite"
   Neutral grey surfaces, one accent (system blue) for the primary action,
   REC red only for filmed/recording. Inter for everything.
   (The --ui-violet* names are kept for compatibility; they hold the blue accent.) Loaded last: it owns the look of the app.
   ========================================================================== */
:root {
  --ui-bg: #111111;
  --ui-s1: #1c1c1e;
  --ui-s2: #2c2c2e;
  --ui-s3: #3a3a3c;
  --ui-line: #2c2c2e;
  --ui-line-2: #3a3a3c;
  --ui-text: #f5f5f7;
  --ui-text-2: #aeaeb2;
  --ui-text-3: #8e8e93;
  --ui-violet: #0A84FF;
  --ui-violet-2: #409CFF;
  --ui-violet-soft: rgba(10, 132, 255, .14);
  --ui-rec: #FF453A;
  --ui-rec-soft: rgba(255, 69, 58, .14);
  --ui-go: #30D158;
  --ui-go-soft: rgba(48, 209, 88, .14);
  --ui-amber: #FF9F0A;
  --ui-scrim: rgba(6, 6, 8, .62);

  --ui-display: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui-font: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ui-r-sm: 8px;
  --ui-r: 12px;
  --ui-r-lg: 18px;

  --ui-ease: cubic-bezier(.2, .8, .2, 1);
  --ui-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ui-fast: 140ms;
  --ui-med: 240ms;
  --ui-slow: 420ms;
}
:root[data-theme="light"] {
  --ui-bg: #f2f2f7;
  --ui-s1: #ffffff;
  --ui-s2: #f2f2f7;
  --ui-s3: #e5e5ea;
  --ui-line: #e5e5ea;
  --ui-line-2: #d1d1d6;
  --ui-text: #1c1c1e;
  --ui-text-2: #48484a;
  --ui-text-3: #6e6e73;
  --ui-violet: #007AFF;
  --ui-violet-2: #0062CC;
  --ui-violet-soft: rgba(0, 122, 255, .10);
  --ui-rec: #FF3B30;
  --ui-rec-soft: rgba(255, 59, 48, .10);
  --ui-go: #248A3D;
  --ui-go-soft: rgba(52, 199, 89, .12);
  --ui-scrim: rgba(20, 20, 24, .38);
}

/* ------------------------------------------------------------------ modal */
.ui-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.ui-modal-scrim {
  position: absolute; inset: 0; background: var(--ui-scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--ui-med) var(--ui-ease);
}
.ui-modal-box {
  position: relative; width: 100%; max-width: 400px;
  background: var(--ui-s1); color: var(--ui-text);
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-lg);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  padding: 22px 20px 18px;
  font-family: var(--ui-font);
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity var(--ui-med) var(--ui-ease), transform var(--ui-slow) var(--ui-spring);
}
.ui-modal.is-open .ui-modal-scrim { opacity: 1; }
.ui-modal.is-open .ui-modal-box { opacity: 1; transform: none; }
.ui-modal.is-closing .ui-modal-scrim { opacity: 0; }
.ui-modal.is-closing .ui-modal-box { opacity: 0; transform: translateY(8px) scale(.98); transition-duration: var(--ui-fast); }

.ui-modal-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ui-s3); color: var(--ui-text); font-size: 22px; margin-bottom: 14px;
}
.ui-modal-icon.rec { background: var(--ui-rec-soft); color: var(--ui-rec); }
.ui-modal-icon.go { background: var(--ui-go-soft); color: var(--ui-go); }
.ui-modal-icon.violet { background: var(--ui-violet-soft); color: var(--ui-violet-2); }
.ui-modal h2 {
  font-family: var(--ui-display); font-stretch: 88%; font-weight: 700;
  font-size: 22px; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 6px;
}
.ui-modal-sub { color: var(--ui-text-2); font-size: 15px; line-height: 1.45; margin: 0; }
.ui-modal-quote {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--ui-r-sm);
  background: var(--ui-s2); color: var(--ui-text); font-size: 15px; line-height: 1.4; font-weight: 500;
}
.ui-modal-choices { display: grid; gap: 8px; margin-top: 18px; }
.ui-choice {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; text-align: left;
  width: 100%; padding: 12px; border-radius: var(--ui-r);
  background: var(--ui-s2); border: 1px solid transparent; color: var(--ui-text);
  font: inherit; cursor: pointer;
  transition: background var(--ui-fast) var(--ui-ease), border-color var(--ui-fast) var(--ui-ease), transform var(--ui-fast) var(--ui-ease);
}
.ui-choice:hover { background: var(--ui-s3); border-color: var(--ui-line-2); }
.ui-choice:active { transform: scale(.98); }
.ui-choice:focus-visible { outline: 2px solid var(--ui-violet); outline-offset: 2px; }
.ui-choice i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; background: var(--ui-s3); color: var(--ui-text-2); }
.ui-choice b { display: block; font-weight: 600; font-size: 15px; }
.ui-choice span { display: block; color: var(--ui-text-2); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.ui-choice.tone-later i { color: var(--ui-amber); background: rgba(245, 184, 65, .12); }
.ui-choice.tone-meh i { color: var(--ui-text-2); }
.ui-choice.tone-bad i { color: var(--ui-rec); background: var(--ui-rec-soft); }

.ui-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.ui-modal-actions.single { justify-content: stretch; }
.ui-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 16px; border-radius: var(--ui-r);
  font: 600 15px/1 var(--ui-font); cursor: pointer;
  border: 1px solid var(--ui-line-2); background: transparent; color: var(--ui-text);
  transition: background var(--ui-fast) var(--ui-ease), transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease);
}
.ui-btn:hover { background: var(--ui-s2); }
.ui-btn:active { transform: scale(.97); }
.ui-btn:focus-visible { outline: 2px solid var(--ui-violet); outline-offset: 2px; }
.ui-btn.primary { background: var(--ui-violet); border-color: transparent; color: #fff; }
.ui-btn.primary:hover { background: var(--ui-violet-2); }
.ui-btn.rec { background: var(--ui-rec); border-color: transparent; color: #fff; }
.ui-btn.rec:hover { filter: brightness(1.08); }
.ui-btn.go { background: var(--ui-go); border-color: transparent; color: #06140d; }
.ui-btn.danger { color: var(--ui-rec); border-color: color-mix(in srgb, var(--ui-rec) 40%, transparent); }
.ui-btn .rec-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
.ui-modal-skip { display: block; width: 100%; margin-top: 12px; padding: 10px; background: none; border: 0; color: var(--ui-text-2); font: 500 14px var(--ui-font); cursor: pointer; border-radius: var(--ui-r-sm); }
.ui-modal-skip:hover { color: var(--ui-text); }
.ui-modal-skip:focus-visible { outline: 2px solid var(--ui-violet); }
html.ui-locked, html.ui-locked body { overflow: hidden; }

/* ------------------------------------------------- celebrations (overlay) */
.ui-fx { position: fixed; inset: 0; pointer-events: none; z-index: 300; }
.ui-fx canvas { width: 100%; height: 100%; display: block; }
.ui-moment {
  position: fixed; left: 50%; top: 42%; z-index: 301; pointer-events: none;
  transform: translate(-50%, -50%) scale(.6); opacity: 0;
  display: grid; justify-items: center; gap: 8px; text-align: center;
  width: min(320px, calc(100vw - 48px)); padding: 22px 22px 24px; border-radius: 26px;
  background: color-mix(in srgb, var(--ui-s1) 80%, transparent); border: 1px solid var(--ui-line-2);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .75);
  animation: ui-moment 2100ms var(--ui-ease) forwards;
}
.ui-moment .dashi { width: 104px; height: 104px; margin-top: -2px; }
.ui-moment .label {
  font-family: var(--ui-display); font-stretch: 85%; font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: -.01em; color: var(--ui-text);
}
.ui-moment .sub { color: var(--ui-text-2); font-size: 14.5px; line-height: 1.45; }
@keyframes ui-moment {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  28% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(.98); }
}
.ui-moment-dim {
  position: fixed; inset: 0; z-index: 298; pointer-events: none;
  background: rgba(8, 8, 10, .45);
  opacity: 0; animation: ui-dim 2100ms var(--ui-ease) forwards;
}
@keyframes ui-dim { 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
/* Clapperboard for "Filmed" */
.ui-slate { width: 92px; height: 80px; }
.ui-slate .arm { transform-origin: 8px 26px; animation: ui-clap 520ms var(--ui-ease) 120ms both; }
@keyframes ui-clap { 0% { transform: rotate(-28deg); } 70% { transform: rotate(2deg); } 100% { transform: rotate(0); } }
.ui-tally {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: var(--ui-rec); color: #fff; font: 700 13px/1 var(--ui-font); letter-spacing: .02em;
}
.ui-tally::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ui-blink 900ms steps(1) infinite; }
@keyframes ui-blink { 50% { opacity: 0; } }
/* screen edge flash when filming lands */
.ui-recflash { position: fixed; inset: 0; z-index: 299; pointer-events: none; box-shadow: inset 0 0 0 3px var(--ui-rec); opacity: 0; animation: ui-recflash 900ms var(--ui-ease) forwards; }
@keyframes ui-recflash { 15% { opacity: 1; } 100% { opacity: 0; } }

/* -------------------------------------------- idea cards arriving / leaving */
.ui-leaving { overflow: hidden; transition: height var(--ui-med) var(--ui-ease), opacity var(--ui-fast) var(--ui-ease), margin var(--ui-med) var(--ui-ease), transform var(--ui-med) var(--ui-ease); }
.ui-arrive { animation: ui-arrive 520ms var(--ui-ease) both; }
@keyframes ui-arrive { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
/* a freshly written idea "pulls focus" into place */
.ui-focus-pull { animation: ui-focus-pull 900ms var(--ui-ease) both; }
@keyframes ui-focus-pull {
  0% { opacity: 0; filter: blur(10px); transform: scale(1.03); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: none; transform: none; }
}
.ui-focus-pull > .card, .ui-focus-pull.card { box-shadow: 0 0 0 1px var(--ui-violet); transition: box-shadow 1.6s var(--ui-ease) .9s; }
.ui-focus-pull.settled > .card, .ui-focus-pull.settled.card { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .ui-modal-box, .ui-modal-scrim { transition: opacity 1ms !important; transform: none !important; }
  .ui-moment, .ui-moment-dim, .ui-slate .arm, .ui-recflash, .ui-arrive, .ui-focus-pull { animation-duration: 1ms !important; }
  .ui-leaving { transition-duration: 1ms !important; }
}

/* ==========================================================================
   APP — the whole product in the edit-suite language.
   Hierarchy comes from type and spacing, not boxes: one surface level for
   content, hairlines between rows, colour only where it means something.
   ========================================================================== */
body { font: 15px/1.55 var(--font); background: var(--bg); color: var(--text); font-feature-settings: 'cv11', 'ss01', 'ss03'; }
h1, h2, h3, h4 { letter-spacing: -.012em; }
.num, .stat-value, td.n, .tnum { font-variant-numeric: tabular-nums; }
::selection { background: var(--accent-soft); }

/* ---------------------------------------------------------------- shell */
.sidebar { background: var(--bg); border-right: 1px solid var(--border); padding: 18px 12px; gap: 2px; }
.brand { font-family: var(--display); font-stretch: 88%; font-weight: 800; font-size: 20px; letter-spacing: -.01em; padding: 4px 10px 20px; gap: 9px; }
.brand-logo { width: 30px; height: 30px; filter: none; }
.nav-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 18px 12px 6px; }
.nav a { padding: 8px 10px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--text-2); gap: 11px; position: relative; transition: background var(--ui-fast) var(--ui-ease), color var(--ui-fast) var(--ui-ease); }
.nav a .ti { font-size: 19px; color: var(--muted); transition: color var(--ui-fast) var(--ui-ease); }
.nav a:hover { background: var(--surface); color: var(--text); }
.nav a.active { background: var(--surface-2); color: var(--text); box-shadow: none; }
.nav a.active .ti { color: var(--accent-2); }
.nav a.active::before { content: none; }
.sidebar-foot { border-top: 1px solid var(--border); }
.avatar { background: var(--surface-2); border-color: var(--border-2); font-family: var(--display); font-stretch: 90%; font-weight: 700; color: var(--text); }

.topbar { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid transparent; padding: 12px 32px; min-height: 56px; transition: border-color var(--ui-med) var(--ui-ease), background var(--ui-med) var(--ui-ease); }
.topbar .page-title { font-family: var(--display); font-stretch: 90%; font-weight: 700; font-size: 17px; opacity: 0; transform: translateY(6px); transition: opacity var(--ui-med) var(--ui-ease), transform var(--ui-med) var(--ui-ease); }
/* iOS-style large title: the bar shows the title once the big one scrolls away */
body.title-away .topbar { border-bottom-color: var(--border); }
body.title-away .topbar .page-title { opacity: 1; transform: none; }
.content { padding: 8px 32px 72px; max-width: 1180px; }

/* ----------------------------------------------------------- page heads */
.page-head { align-items: flex-end; margin: 14px 0 22px; gap: 16px; }
.page-head h1, .page-title-block h1 { font-family: var(--display); font-stretch: 84%; font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.page-head p { color: var(--text-2); margin-top: 8px; font-size: 15px; max-width: 46ch; }
.page-head .dashi-head .dashi { display: none; }
.head-actions { display: flex; align-items: center; gap: 8px; }
.head-actions form { margin: 0; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 11px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 19px;
  transition: background var(--ui-fast) var(--ui-ease), color var(--ui-fast) var(--ui-ease), transform var(--ui-fast) var(--ui-ease), border-color var(--ui-fast) var(--ui-ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .ti { font-size: 19px; vertical-align: 0; }

/* -------------------------------------------------------------- buttons */
.btn { min-height: 40px; padding: 0 16px; border-radius: 11px; font-weight: 600; font-size: 14.5px; border-color: var(--border-2); background: var(--surface-2); box-shadow: none; transition: background var(--ui-fast) var(--ui-ease), border-color var(--ui-fast) var(--ui-ease), transform var(--ui-fast) var(--ui-ease), color var(--ui-fast) var(--ui-ease); }
.btn:hover { background: var(--surface-3); border-color: var(--border-2); }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 9px; }
.btn-lg { min-height: 50px; padding: 0 22px; font-size: 16px; border-radius: 13px; }
.btn-primary { background: var(--accent); color: #fff; border-color: transparent; box-shadow: none; }
.btn-primary:hover { background: var(--accent-2); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.btn-rec { background: var(--rec); border-color: transparent; color: #fff; }
/* White text needs a deep enough red to read (WCAG AA). */
:root:not([data-theme="light"]) .btn-rec { background: #d63323; }
:root:not([data-theme="light"]) .btn-rec:hover { background: #c42d1f; }
.btn-rec:hover { background: color-mix(in srgb, var(--rec) 88%, #fff); border-color: transparent; }
.btn-go { background: var(--good); border-color: transparent; color: #04140c; }
.btn-go:hover { background: color-mix(in srgb, var(--good) 88%, #fff); border-color: transparent; }
.btn .rec-dot, .rec-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.btn-rec .rec-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.btn-new-ideas .ti-sparkles { color: var(--accent-2); }
.link { color: var(--accent-2); }

/* ------------------------------------------------------- cards & groups */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; padding: 20px; }
.card-head { margin-bottom: 14px; }
.card-head h2 { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; gap: 9px; }
.card-head .ti { color: var(--muted); font-size: 18px; }
.card.glow::before { display: none; }
.grid { gap: 16px; }

/* stats: numbers are the hero, set in the display face */
.stat-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.stat-value { font-family: var(--display); font-stretch: 84%; font-weight: 800; font-size: 32px; letter-spacing: -.015em; line-height: 1; margin-top: 8px; }
.stat-sub { font-size: 13px; }
.delta { font-size: 13px; }

/* tags: quiet metadata, never pills shouting for attention */
.pill { border: 0; background: var(--surface-2); color: var(--text-2); border-radius: 7px; padding: 3px 8px; font-size: 12px; font-weight: 600; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.top { background: var(--bad-soft); color: var(--rec); }
.pill.ai, .pill.purpose { background: var(--accent-soft); color: var(--accent-2); }
.pill.sales { background: var(--sales-soft); color: var(--sales); }
.pill.err { background: var(--bad-soft); color: var(--bad); }
.pill.low { background: transparent; }

/* segmented control (sliding thumb added by ui.js) */
.segmented, .seg { position: relative; display: inline-flex; gap: 0; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); isolation: isolate; }
.segmented { margin: 0 0 22px; }
.segmented a, .seg a { position: relative; z-index: 1; padding: 7px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-2); transition: color var(--ui-med) var(--ui-ease), background-color var(--ui-med) var(--ui-ease); white-space: nowrap; }
.segmented a:hover, .seg a:hover { color: var(--text); background: transparent; }
.segmented a.on, .seg a.on { color: var(--text); background: var(--surface-3); box-shadow: none; }
.segmented.has-thumb a.on, .seg.has-thumb a.on { background: transparent; }
.seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: 9px; background: var(--surface-3); transition: transform var(--ui-slow) var(--ui-spring), width var(--ui-slow) var(--ui-spring); }

/* -------------------------------------------------------------- forms */
.input, select.input, textarea.input { background: var(--surface); border-color: var(--border-2); border-radius: 11px; padding: 11px 13px; min-height: 44px; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field label, .label { font-size: 13.5px; font-weight: 600; }

/* --------------------------------------------------------------- toasts */
.toast-host { left: 50%; right: auto; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: min(440px, calc(100vw - 32px)); justify-items: center; }
.toast-host .flash {
  margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border-2); color: var(--text); font-weight: 600; font-size: 14px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); animation: ui-toast-in 420ms var(--ui-spring) both;
}
.toast-host .flash::before { content: ''; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--accent) center / 12px no-repeat; }
.toast-host .flash.success::before { background-color: var(--good); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304140c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.toast-host .flash.error::before { background-color: var(--rec); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
.flash { border-radius: 12px; }
.flash.success { background: var(--good-soft); border-color: transparent; color: var(--text); }
.flash.error { background: var(--bad-soft); border-color: transparent; color: var(--text); }
.flash.info { background: var(--accent-soft); border-color: transparent; color: var(--text); }

/* --------------------------------------------------------- empty states */
.empty-state { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 48px 20px; border: 1px dashed var(--border-2); border-radius: var(--radius); color: var(--text-2); }
.empty-state h3 { color: var(--text); font-size: 18px; font-weight: 650; margin-top: 4px; }
.empty-state p { max-width: 40ch; }
.dashi-empty { border-style: dashed; }

/* ==========================================================================
   IDEAS — the shot list
   ========================================================================== */
.idea-plan { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 0; max-width: 820px; }
.idea-plan > .single { min-width: 0; }
.idea {
  display: block; padding: 0; border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); transition: border-color var(--ui-med) var(--ui-ease), background var(--ui-med) var(--ui-ease);
}
.idea:hover { border-color: var(--border-2); }
.idea.used { opacity: 1; }
.idea-toggle > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 16px 16px 16px; border-radius: inherit; }
.idea-toggle > summary:hover h3 { color: var(--text); }
.idea-toggle > summary:active { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.idea .step-num.shot-n, .shot-n {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-top: 1px;
  background: var(--accent-soft); color: var(--accent-2); font: 800 17px/1 var(--display); font-stretch: 85%;
}
.idea-summary { display: grid; gap: 7px; min-width: 0; }
.idea-summary h3 { font-family: var(--display); font-stretch: 90%; font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; margin: 0; text-wrap: pretty; }
.idea-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-2); }
.idea-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.idea-meta .ti { font-size: 15px; vertical-align: 0; color: var(--muted); }
.idea-meta .pf-tiktok, .idea-meta .pf-instagram, .idea-meta .pf-facebook { color: inherit; }
.idea-meta .meta-purpose { color: var(--muted); }
.idea-meta .meta-trend { color: var(--accent-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.idea-meta .meta-trend .ti { color: var(--accent-2); }
.idea-meta .meta-status.filmed { color: var(--rec); font-weight: 600; }
.idea-meta .meta-status.filmed .rec-dot { width: 7px; height: 7px; animation: ui-blink 1.2s steps(1) infinite; }
.idea-meta .meta-status.posted { color: var(--good); font-weight: 600; }
.idea-meta .meta-status.posted .ti { color: var(--good); }
.idea-chevron { width: 34px; height: 34px; display: grid !important; place-items: center; border-radius: 10px; color: var(--muted); font-size: 18px; margin: 0; transition: transform var(--ui-med) var(--ui-ease), background var(--ui-fast) var(--ui-ease); }
.idea-toggle > summary:hover .idea-chevron { background: var(--surface-2); color: var(--text); }
.idea-toggle[open] .idea-chevron { transform: rotate(180deg); }
.idea-toggle[open] { border-radius: inherit; }
.idea:has(.idea-toggle[open]) { border-color: var(--border-2); }

/* expanded: reads like a director's notes */
.idea-body.brief { display: grid; gap: 20px; padding: 2px 16px 16px 64px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.idea-toggle[open] > .idea-body { animation: ui-unfold 360ms var(--ui-ease) both; }
@keyframes ui-unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.brief section { display: grid; gap: 5px; }
.brief h4 { font: 600 13px/1.3 var(--font); color: var(--muted); letter-spacing: 0; margin: 0; }
.brief b { color: var(--text); }
.brief p { margin: 0; }
.brief .brief-quote { color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.4; }
.brief .brief-note { font-size: 13px; color: var(--muted); line-height: 1.5; }
.brief .brief-soft { font-size: 14px; color: var(--text-2); }

/* the opening line inside the viewfinder: the one memorable element */
.vf { position: relative; padding: 22px 20px 18px; margin: 16px 0 0; } /* room for the "Opening line" label that sits on the top edge */
.vf::before, .vf::after { content: ''; position: absolute; inset: 0; pointer-events: none; --c: var(--text-2); --l: 18px; --w: 2px; }
.vf::before { background:
  linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
  linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
  linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
  linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat; }
.vf::after { background:
  linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
  linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
  linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
  linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat; }
.idea-toggle[open] .vf::before, .idea-toggle[open] .vf::after { animation: ui-vf-lock 520ms var(--ui-ease) both; }
@keyframes ui-vf-lock { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }
.vf-label { position: absolute; top: -9px; left: 28px; padding: 0 8px; background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 18px; }
.vf-label::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rec); margin-right: 6px; vertical-align: 1px; }
.vf-line { margin: 0; color: var(--text); font-family: var(--display); font-stretch: 92%; font-weight: 700; font-size: 21px; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }

/* filming steps as a timeline */
.shot-steps { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: shot; display: grid; gap: 0; }
.shot-steps li { counter-increment: shot; position: relative; padding: 0 0 14px 34px; color: var(--text); font-size: 15px; line-height: 1.5; }
.shot-steps li::before { content: counter(shot); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font: 700 12px/1 var(--display); font-stretch: 90%; }
.shot-steps li::after { content: ''; position: absolute; left: 10.5px; top: 25px; bottom: 3px; width: 1px; background: var(--border-2); }
.shot-steps li:last-child { padding-bottom: 2px; }
.shot-steps li:last-child::after { display: none; }

.prod-list { margin: 6px 0 0; display: grid; gap: 0; }
.prod-list > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.prod-list > div:last-child { border-bottom: 1px solid var(--border); }
.prod-list dt { color: var(--muted); font-size: 13.5px; }
.prod-list dd { margin: 0; color: var(--text); font-size: 14.5px; }

.brief .brief-caption { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--surface-2); }
.brief .caption-text { color: var(--text); white-space: pre-line; font-size: 15px; }
.brief .copy-inline { width: 34px; height: 34px; flex: none; }

.idea-actions { display: flex; gap: 8px; padding-top: 4px; }
.idea-actions .btn { min-height: 46px; flex: 1; font-size: 15px; border-radius: 12px; }
.idea-actions .btn-ghost { flex: 0 0 auto; padding: 0 18px; }
.idea-actions.is-note { color: var(--muted); font-size: 13.5px; }
.idea.is-busy { pointer-events: none; opacity: .6; }

/* "Writing a fresh idea": a viewfinder hunting for focus */
.idea-planning { padding: 16px; }
.idea-planning-body { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; }
.vf-focus { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.vf-focus::before { content: ''; position: absolute; inset: 0; --c: var(--accent-2); background:
  linear-gradient(var(--c), var(--c)) top left / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 12px no-repeat,
  linear-gradient(var(--c), var(--c)) top right / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 12px no-repeat,
  linear-gradient(var(--c), var(--c)) bottom left / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 12px no-repeat,
  linear-gradient(var(--c), var(--c)) bottom right / 12px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 12px no-repeat;
  animation: ui-hunt 1.8s var(--ui-ease) infinite; }
@keyframes ui-hunt { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(.78); opacity: .7; } 60% { transform: scale(.86); } }
.idea-planning-body .vf-focus .dashi { width: 44px; height: 44px; }
.idea-planning-body .dashi { width: 44px; height: 44px; }
.is-error .vf-focus::before { --c: var(--muted); animation: none; }
.thinking-copy h3 { font-family: var(--display); font-stretch: 90%; font-weight: 700; font-size: 17px; margin: 0 0 2px; }
.thinking-copy p { color: var(--text-2); font-size: 14px; }
.sk { display: block; height: 9px; margin-top: 10px; border-radius: 5px; width: 82%; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%) 0 0 / 300% 100%; animation: ui-shimmer 1.6s linear infinite; }
.sk.short { width: 52%; margin-top: 7px; }
@keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.idea-planning .idea-actions { justify-content: flex-end; }

/* batch being written */
.writing-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; margin: 0 0 14px; max-width: 820px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.writing-strip.is-idle { grid-template-columns: 1fr; border-style: dashed; background: transparent; }
.writing-strip h3 { font-family: var(--display); font-stretch: 90%; font-weight: 700; font-size: 17px; margin: 0 0 2px; }
.writing-strip p { color: var(--text-2); font-size: 14px; }
.vf-mini { position: relative; width: 44px; height: 44px; }
.vf-mini::before { content: ''; position: absolute; inset: 0; --c: var(--accent-2); background:
  linear-gradient(var(--c), var(--c)) top left / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 10px no-repeat,
  linear-gradient(var(--c), var(--c)) top right / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 10px no-repeat,
  linear-gradient(var(--c), var(--c)) bottom left / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 10px no-repeat,
  linear-gradient(var(--c), var(--c)) bottom right / 10px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 10px no-repeat;
  animation: ui-hunt 1.8s var(--ui-ease) infinite; }
.vf-mini span { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--rec); animation: ui-blink 1s steps(1) infinite; }

/* ready to post */
.ready-to-post { margin: 0 0 18px; max-width: 820px; padding: 14px 14px 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.ready-to-post.is-wide { max-width: none; }
.rtp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 8px; }
.rtp-head h2 { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 650; margin: 0; }
.rtp-head .rec-dot { width: 9px; height: 9px; background: var(--rec); animation: ui-blink 1.2s steps(1) infinite; }
.rtp-count { color: var(--muted); font-size: 13px; }
.ready-list { display: grid; gap: 0; }
.ready-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 2px; border-radius: 0; background: transparent; border-left: 0; border-top: 1px solid var(--border); }
.ready-title { font-weight: 600; font-size: 15px; }
.ready-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ready-actions { gap: 6px; }
.ready-actions .icon-btn { width: 36px; height: 36px; font-size: 17px; }

/* keep / stop: two plain lists */
.keep-stop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 36px 0 0; max-width: 820px; padding-top: 26px; border-top: 1px solid var(--border); }
.ks-col h2 { font-size: 16px; font-weight: 650; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.ks-col h2::before { content: ''; width: 18px; height: 18px; border-radius: 6px; background: var(--good-soft) center / 12px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ccf91' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ks-col.ks-stop h2::before { background-color: var(--bad-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a5a' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.ks-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.ks-col li { padding: 10px 0; border-top: 1px solid var(--border); color: var(--text-2); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ks-col li:first-child { border-top: 0; padding-top: 2px; }
.keep-stop .card { display: none; }

.ideas-divider { max-width: 820px; margin: 30px 0 12px; color: var(--muted); font-size: 13px; }
.ideas-divider::before, .ideas-divider::after { background: var(--border); }

.idea-search-wrap { max-width: 820px; margin: -8px 0 16px; animation: ui-arrive 300ms var(--ui-ease) both; }

/* add your own idea (same look as the pop-ups) */
.idea-add-modal { z-index: 210; padding: 16px; }
.idea-add-modal-backdrop { background: var(--ui-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.idea-add-modal-body { width: 100%; max-width: 440px; padding: 22px 20px 18px; border-radius: var(--ui-r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); animation: ui-pop 380ms var(--ui-spring) both; }
.idea-add-modal-body h2 { font-family: var(--display); font-stretch: 88%; font-weight: 700; font-size: 22px; margin: 0 0 6px; }
.idea-add-modal-body .soft { font-size: 14.5px; margin-bottom: 16px; }
.idea-add-modal .idea-input-row { display: grid; gap: 12px; }
.idea-add-modal-body { max-width: 560px; padding: 24px 22px 18px; }
.ia-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--ui-s3); color: var(--ui-text-2); display: grid; place-items: center; font-size: 18px; cursor: pointer; }
.ia-close:hover { color: var(--ui-text); }
.idea-add-modal-body h2 { padding-right: 44px; }
.ia-form { display: grid; gap: 8px; }
.ia-label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ui-text); margin-top: 6px; }
.ia-label .ti { color: var(--ui-violet-2); font-size: 16px; }
.ia-opt { font-weight: 500; color: var(--ui-text-3); font-size: 12px; }
.ia-text { min-height: 220px; resize: vertical; line-height: 1.5; padding: 12px 14px; font: inherit; font-size: 15px; }
.ia-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; }
.idea-add-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
@media (max-width: 560px) {
  .idea-add-modal { place-items: end center; padding: 0; }
  .idea-add-modal-body { border-radius: 20px 20px 0 0; max-height: 92dvh; overflow: auto; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .ia-text { min-height: 34dvh; }
  .idea-add-actions .btn { flex: 1; }
}
.idea-add-actions { display: flex; gap: 10px; justify-content: flex-end; }
.idea-add-actions .btn { min-height: 44px; }
@keyframes ui-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- tab bar */
@media (max-width: 860px) {
  .tabbar { border-top: 1px solid var(--border); background: var(--tabbar-bg); padding-top: 6px; }
  .tab { color: var(--muted); }
  .tab-ico { width: 54px; height: 32px; border-radius: 11px; font-size: 22px; background: transparent !important; position: relative; z-index: 1; transition: color var(--ui-med) var(--ui-ease), transform var(--ui-fast) var(--ui-ease); }
  .tab.active { color: var(--text); }
  .tab.active .tab-ico { color: var(--accent-2); }
  .tab-label { font-size: 11px; font-weight: 600; }
  .tab-ink { position: absolute; top: 6px; left: 0; height: 32px; width: 54px; border-radius: 11px; background: var(--accent-soft); pointer-events: none; opacity: 0; transition: transform 460ms var(--ui-spring), opacity 160ms linear; }
  .more-sheet { background: var(--surface); border-color: var(--border); }
  .more-list a { font-size: 16px; }
  .more-list a.active { background: var(--surface-2); }
  .topbar { padding: 10px 16px; min-height: 52px; }
  .content { padding: 4px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 32px); }
  .page-head { margin: 10px 0 18px; }
  .page-head h1, .page-title-block h1 { font-size: 34px; }
  .toast-host { left: 50%; right: auto; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px); }
}
@media (max-width: 560px) {
  .page-head { flex-wrap: nowrap; align-items: flex-start; }
  .page-head.stack { flex-wrap: wrap; } /* header with several buttons (Admin): buttons go under the title */
  .page-head p { font-size: 14.5px; }
  .head-actions .btn-new-ideas .label { display: none; }
  .head-actions .btn-new-ideas { width: 40px; padding: 0; min-height: 40px; border-radius: 11px; }
  .idea-body.brief { padding: 0 16px 16px 16px; }
  .idea-toggle > summary { gap: 12px; padding: 14px; }
  .idea-summary h3 { font-size: 18px; }
  .keep-stop { grid-template-columns: 1fr; gap: 22px; }
  .prod-list > div { grid-template-columns: 1fr; gap: 2px; }
  .vf-line { font-size: 19px; }
}

/* ---------------------------------------------------------------- motion */
/* one orchestrated entrance per page: the main list deals in */
.ui-deal > * { animation: ui-deal 520ms var(--ui-ease) both; }
@keyframes ui-deal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ui-press { transition: transform var(--ui-fast) var(--ui-ease); }

@media (prefers-reduced-motion: reduce) {
  .ui-deal > *, .idea-toggle[open] > .idea-body, .vf::before, .vf::after, .vf-focus::before, .vf-mini::before, .vf-mini span, .sk,
  .rtp-head .rec-dot, .idea-meta .meta-status.filmed .rec-dot, .toast-host .flash, .idea-add-modal-body { animation: none !important; }
  .tab-ink, .seg-thumb { transition: none !important; }
}

/* ==========================================================================
   HOME
   ========================================================================== */
.dash-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; text-align: left; gap: 16px; margin: 14px 0 22px; }
.dash-hero h1 { font-family: var(--display); font-stretch: 84%; font-weight: 800; font-size: 36px; line-height: 1.02; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.dash-hero .dashi-mood svg { width: 160px; height: 160px; }
.dash-say { margin: 10px 0 0; color: var(--text-2); font-size: 15.5px; line-height: 1.45; max-width: 44ch; }
.dash-sync { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.dash-sync .warn { color: var(--warn); display: inline-flex; gap: 6px; align-items: center; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.live-dot.pending { background: var(--warn); }
@keyframes ui-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

.celebrate { grid-template-columns: auto 1fr auto; background: var(--accent-soft); border: 0; border-radius: var(--radius); }

/* Film next: the one thing to do today */
.film-next { position: relative; display: grid; gap: 6px; padding: 18px 18px 16px; margin: 0 0 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); overflow: hidden; transition: border-color var(--ui-med) var(--ui-ease), transform var(--ui-fast) var(--ui-ease); }
.film-next::before { content: ''; position: absolute; inset: 10px; pointer-events: none; --c: var(--border-2); background:
  linear-gradient(var(--c), var(--c)) top left / 14px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 14px no-repeat,
  linear-gradient(var(--c), var(--c)) top right / 14px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 14px no-repeat,
  linear-gradient(var(--c), var(--c)) bottom left / 14px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 14px no-repeat,
  linear-gradient(var(--c), var(--c)) bottom right / 14px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 14px no-repeat; }
.film-next:hover { border-color: var(--border-2); }
.film-next:active { transform: scale(.99); }
.fn-label { display: inline-flex; align-items: center; gap: 8px; color: var(--rec); font-size: 13px; font-weight: 700; }
.fn-label .rec-dot { width: 8px; height: 8px; background: var(--rec); animation: ui-blink 1.2s steps(1) infinite; }
.fn-title { font-family: var(--display); font-stretch: 88%; font-weight: 800; font-size: 23px; line-height: 1.15; letter-spacing: -.01em; padding-right: 8px; }
.fn-hook { color: var(--text-2); font-size: 15px; line-height: 1.45; }
.fn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; color: var(--muted); font-size: 13px; }
.fn-meta span { display: inline-flex; align-items: center; gap: 5px; }
.fn-meta .fn-go { margin-left: auto; color: var(--accent-2); font-weight: 600; }

/* numbers: one panel, four readings */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.kpi { padding: 18px 20px; min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi .stat-value { font-size: 34px; }
.kpi-pair small { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 10px 0 4px; letter-spacing: 0; }
.revenue-stat .stat-value { color: var(--sales); }

/* panels: titled sections without the box-in-box look */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 18px; min-width: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { font-size: 16.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.panel-note { color: var(--muted); font-size: 13px; }
.panel-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 10px 6px; color: var(--text-2); font-size: 14px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; }
.dash-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-grid > .panel { margin: 0 0 18px; }

.working-list { list-style: none; margin: 0; padding: 0; display: grid; }
.working-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.working-list li:first-child { border-top: 0; padding-top: 0; }
.working-list li > .ti { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); font-size: 17px; }
.working-list li.warn > .ti { background: var(--bad-soft); color: var(--bad); }
.working-list b { display: block; font-weight: 600; font-size: 14.5px; }
.working-list span { display: block; color: var(--text-2); font-size: 13.5px; margin-top: 2px; }

.acct-list { display: grid; }
.acct-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); }
.acct-row:first-child { border-top: 0; padding-top: 2px; }
.acct-row:last-child { padding-bottom: 0; }
.acct-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.acct-handle { color: var(--muted); font-size: 13px; }
.acct-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 5px; color: var(--text-2); font-size: 13px; }
.acct-err { margin-top: 4px; color: var(--bad); font-size: 13px; }
.acct-num { display: grid; justify-items: end; gap: 2px; text-align: right; }
.acct-num b { font-family: var(--display); font-stretch: 84%; font-weight: 800; font-size: 24px; line-height: 1; }
.acct-num .delta { font-size: 12.5px; }
.acct-num .viz-spark { width: 92px; height: 26px; margin-top: 4px; }
.pf-icon { background: var(--surface-2); border: 0; border-radius: 11px; }

/* post rows: the score is the headline */
.post-list { display: grid; }
.post-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 0; border-top: 1px solid var(--border); border-radius: 0; transition: background var(--ui-fast) var(--ui-ease); }
.post-list .post-row:first-child { border-top: 0; padding-top: 0; }
.post-row .thumb { width: 46px; height: 60px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); font-size: 18px; }
.post-row .title { font-weight: 550; font-size: 14.5px; line-height: 1.35; }
.pr-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; color: var(--muted); font-size: 12.5px; }
.pr-meta span { display: inline-flex; align-items: center; gap: 4px; }
.post-row .mult { font-family: var(--display); font-stretch: 84%; font-weight: 800; font-size: 21px; text-align: right; color: var(--text); }
.post-row .mult.hot { color: var(--good); }
.post-row .mult.cold { color: var(--bad); }
.post-row .mult.muted { color: var(--muted); }
.post-row:hover .title { color: var(--text); }

.analysis-line { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; margin: 0 0 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 14px; }
.analysis-line b { color: var(--text); }
.meter { background: var(--surface-3); }
.meter > span { background: var(--accent); }

.opp-dash { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; margin: 0 0 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.opp-chev { color: var(--muted); }
.taking-off { margin: 0 0 18px; padding: 14px 14px 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid color-mix(in srgb, var(--good) 35%, var(--border)); }
.taking-off .rtp-head h2 .ti { color: var(--good); }

/* charts */
.viz-stroke { stroke-width: 2.25; }
.viz-area { opacity: .08; }

@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(3) { border-left: 0; } .kpi:nth-child(n+3) { border-top: 1px solid var(--border); } }
@media (max-width: 860px) {
  .dash-grid, .dash-grid.two { grid-template-columns: 1fr; gap: 0; }
  .dash-hero h1 { font-size: 32px; }
  .dash-hero .dashi-mood svg { width: 128px; height: 128px; }
}
@media (max-width: 520px) {
  .kpi { padding: 14px 16px; }
  .kpi .stat-value { font-size: 28px; }
  .panel { padding: 16px; }
  .fn-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .live-dot, .fn-label .rec-dot { animation: none !important; } }

/* Phones: the top bar floats over the page and only appears once the big title scrolls away */
@media (max-width: 860px) {
  /* Fixed, not sticky: on iPhones a sticky blurred bar over a long list re-paints on every scroll step and stutters. */
  .topbar { position: fixed; top: 0 !important; left: 0; right: 0; margin-bottom: 0; transform: translateZ(0); will-change: transform; height: 52px; min-height: 52px; padding: env(safe-area-inset-top, 0px) 16px 0 !important; box-sizing: content-box; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; pointer-events: none; }
  .topbar > * { pointer-events: auto; }
  body.title-away .topbar { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); border-bottom-color: var(--border); }
  .content { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
}

/* ==========================================================================
   SHARED POLISH
   ========================================================================== */
/* sentence case everywhere: no tracked-out capitals */
.nav-label, .combo .chip small, th, .week h4, .kv span, .ob-count, .pay-group-title { text-transform: none !important; letter-spacing: 0 !important; }
th { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px; }
td { border-bottom-color: var(--border); }

/* filter rows: one swipeable line each, never wrapping into boxes */
.filter-rows { display: grid; gap: 10px; margin-bottom: 18px; }
.filter-rows .seg { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; justify-self: start; overscroll-behavior-x: contain; }
.filter-rows .seg::-webkit-scrollbar { display: none; }
.filter-rows .seg a { flex: none; }
.seg a .ti { font-size: 16px; }
.filter-count { color: var(--muted); font-size: 13px; }

/* post grid */
.post-grid { gap: 12px; }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: border-color var(--ui-med) var(--ui-ease), transform var(--ui-fast) var(--ui-ease); }
.post-card:hover { transform: translateY(-2px); border-color: var(--border-2); }
.post-card:active { transform: scale(.985); }
.post-thumb { background: var(--surface-2); }
.post-thumb .ph { color: var(--border-2); }
.post-thumb .corner .pill { background: rgba(14, 14, 16, .62); color: #f5f5f7; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.post-thumb .corner .pill.top { background: rgba(255, 84, 66, .9); color: #fff; }
.post-thumb .corner .pill.ai { background: rgba(14, 14, 16, .62); color: #fff; }
.post-thumb .views { font-family: var(--display); font-stretch: 88%; font-weight: 800; font-size: 17px; color: #fff; }
.post-thumb .score { font-family: var(--display); font-stretch: 84%; font-weight: 800; font-size: 17px; color: #fff; padding: 2px 8px; border-radius: 7px; background: rgba(14, 14, 16, .55); backdrop-filter: blur(6px); }
.post-body .hook { color: var(--text); font-size: 13.5px; font-weight: 500; }
.post-body .meta { color: var(--muted); font-size: 12px; }
.sleeper-badge { background: var(--good); color: #04140c; }

/* insights rows */
.insight .ico { background: var(--accent-soft); color: var(--accent-2); border-radius: 10px; }
.insight .title { font-weight: 600; }
.lift-meter { background: var(--surface-2); }
.banner { background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--radius); }
.banner > .ti:first-child { background: var(--accent-soft); color: var(--accent-2); }
.learned-list li { background: var(--surface-2); border-radius: 12px; }
.learned-list li .ti { color: var(--accent-2); }
.kv div { background: var(--surface-2); border: 0; border-radius: 10px; }
.kv span { font-size: 12.5px; }
.quote { border-left: 0; background: var(--surface-2); border-radius: 12px; font-weight: 600; }
.transcript { background: var(--surface-2); border: 0; border-radius: 12px; }
.post-media { border-radius: 16px; border-color: var(--border); }
.deep-item, .week, .bio-card, .ab-side, .opp, .stage-track div, .platform-card .metrics div { background: var(--surface-2); border-color: transparent; }
.opp-ico { border-radius: 10px; }
.chip-opt span { background: var(--surface); border-color: var(--border-2); }
.chip-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: none; }
.choice .box { background: var(--surface); border-color: var(--border-2); border-radius: 14px; }
.choice input:checked + .box { box-shadow: none; }
.mode-switch { background: var(--surface); border-color: var(--border); }
.tooltip { background: var(--surface-3); border-color: var(--border-2); border-radius: 10px; }
.tooltip strong { font-family: var(--display); font-stretch: 88%; font-weight: 800; }

/* auth + onboarding surfaces */
.auth-art { background: var(--bg-2); }
.auth-art h2 { font-family: var(--display); font-stretch: 84%; font-weight: 800; font-size: 40px; letter-spacing: -.02em; line-height: 1; }
.auth-form h1, .ob-panel h1 { font-family: var(--display); font-stretch: 84%; font-weight: 800; letter-spacing: -.02em; }
body.onboard { background: var(--bg); }
.ob-panel { background: var(--surface); border-color: var(--border); }
.ob-progress span { background: var(--accent); }
.ob-count { color: var(--accent-2); }
.bubble, .ob-bubble, .dashi-say { background: var(--surface-2); border-color: var(--border-2); }
.bubble::before, .ob-bubble::before, .dashi-say::before { background: var(--surface-2); border-color: var(--border-2); }

/* tour */
.tour-card { background: var(--surface); border-color: var(--border-2); border-radius: 22px; }
.tour-art { background: var(--surface-2); }
.tour-slide h2 { font-family: var(--display); font-stretch: 86%; font-weight: 800; font-size: 26px; letter-spacing: -.015em; }
.ta-bars i { background: var(--accent); }
.tour-dots span.on { background: var(--accent); }

/* the More sheet on phones */
.more-user .avatar { width: 40px; height: 40px; }
@media (max-width: 560px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
/* every switch is one swipeable line */
.seg { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; width: max-content; }
.seg::-webkit-scrollbar { display: none; }
.seg a { flex: none; }
[data-theme="light"] .topbar { background: color-mix(in srgb, var(--bg) 82%, transparent); }
@media (max-width: 860px) {
  [data-theme="light"] .topbar { background: transparent; }
  [data-theme="light"] body.title-away .topbar, body.title-away[data-theme="light"] .topbar { background: color-mix(in srgb, var(--bg) 86%, transparent); }
}
[data-theme="light"] .ui-moment-dim { background: rgba(20, 20, 24, .25); }
[data-theme="light"] .btn-go { color: #fff; }
[data-theme="light"] .post-thumb .score, [data-theme="light"] .post-thumb .corner .pill { color: #fff; }

/* a single post: the score is the headline */
.post-head-side { display: grid; justify-items: end; gap: 10px; }
.post-score { display: grid; justify-items: end; text-align: right; }
.post-score b { font-family: var(--display); font-stretch: 82%; font-weight: 800; font-size: 54px; line-height: .9; letter-spacing: -.02em; }
.post-score span { color: var(--text-2); font-size: 13px; font-weight: 600; margin-top: 4px; }
.post-score.hot b { color: var(--good); }
.post-score.cold b { color: var(--bad); }
.post-score.meh b { color: var(--text-2); }
.post-media .empty { height: 100%; display: grid; place-items: center; color: var(--border-2); font-size: 40px; }
@media (max-width: 560px) {
  .page-head:has(.post-head-side) { flex-wrap: wrap; }
  .post-head-side { grid-template-columns: auto auto; justify-content: space-between; align-items: center; width: 100%; justify-items: start; }
  .post-score { justify-items: start; text-align: left; }
  .post-score b { font-size: 44px; }
}

/* onboarding */
.btn { font-family: var(--font); font-stretch: 100%; }
.ob-skip-btn { color: var(--text-2); }
/* Home-screen app (iPhone): the header and Skip sit below the status bar, on the same line, and scroll away with the page. */
.ob-top { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
@media (min-width: 861px) { .ob-top { padding-top: calc(env(safe-area-inset-top, 0px) + 18px); } }
.ob-top .ob-skip-btn { flex: none; }
.ob-top form { flex: none; }
@media (max-width: 420px) { .ob-top { gap: 10px; } }

/* ------------------------------------------------------------ taste test */
.taste { max-width: 520px; margin: 0 auto; padding-bottom: 24px; }
.taste-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.tp-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--ui-s3); overflow: hidden; }
.tp-bar i { display: block; height: 100%; width: 0; background: var(--ui-violet); border-radius: inherit; transition: width var(--ui-slow) var(--ui-ease); }
.tp-count { font-family: var(--ui-display); font-stretch: 88%; font-weight: 700; font-size: 14px; color: var(--ui-text-2); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }

.taste-stage { position: relative; height: clamp(290px, calc(100vh - 470px), 420px); height: clamp(290px, calc(100svh - 470px), 420px); margin-bottom: 18px; }
.taste-stage[hidden] { display: none; }
.taste-card {
  position: absolute; inset: 0 0 24px; display: flex; flex-direction: column; gap: 18px;
  padding: 26px 24px 24px; background: var(--ui-s1); color: var(--ui-text);
  border: 1px solid var(--ui-line); border-radius: var(--ui-r-lg);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .6);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  transform-origin: 50% 90%;
  transition: transform var(--ui-slow) var(--ui-spring), opacity var(--ui-med) var(--ui-ease), border-color var(--ui-fast) linear;
}
.taste-card:active { cursor: grabbing; }
.taste-card[data-pos="1"] { transform: translateY(12px) scale(.955); opacity: .75; pointer-events: none; }
.taste-card[data-pos="2"] { transform: translateY(24px) scale(.91); opacity: .4; pointer-events: none; }
.taste-card[data-pos="1"] > *, .taste-card[data-pos="2"] > * { visibility: hidden; }
.taste-card.lean-yes { border-color: var(--ui-go); }
.taste-card.lean-no { border-color: var(--ui-line-2); }
.taste-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.taste-meta span { font-size: 12.5px; font-weight: 600; color: var(--ui-text-2); background: var(--ui-s2); border: 1px solid var(--ui-line); border-radius: 999px; padding: 3px 10px; }
.taste-meta span:first-child { color: var(--ui-violet-2); background: var(--ui-violet-soft); border-color: transparent; }
.taste-title { margin: 0; font-family: var(--ui-display); font-stretch: 86%; font-weight: 800; font-size: clamp(26px, 6.4vw, 32px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.taste-hook { margin-top: auto; }
.taste-meta span .ti { font-size: 14px; margin-right: 5px; vertical-align: -2px; }
.taste-line { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--ui-s2); border: 1px solid var(--ui-line); border-radius: var(--ui-r); position: relative; z-index: 1; }
.taste-line > .ti { font-size: 20px; color: var(--ui-violet-2); margin-top: 2px; flex: none; }
.taste-line p { margin: 0; font-size: 16.5px; line-height: 1.4; color: var(--ui-text); }
.taste-line span { display: block; font-size: 12px; font-weight: 600; color: var(--ui-text-3); margin-bottom: 3px; }
.taste-glyph { display: none; position: absolute; right: 18px; bottom: 14px; font-size: 96px; line-height: 1; color: var(--ui-violet-2); opacity: .09; pointer-events: none; }
.taste-card .taste-title { position: relative; z-index: 1; }
.taste-hook .vf-label { background: var(--ui-s1); }
.taste-hook .vf-line { font-size: 18px; }
.taste-stamp {
  position: absolute; top: 20px; padding: 4px 12px; border: 2px solid; border-radius: 8px;
  font-family: var(--ui-display); font-stretch: 86%; font-weight: 800; font-size: 20px; letter-spacing: .01em;
  opacity: 0; pointer-events: none; z-index: 2; background: var(--ui-s1);
}
.taste-stamp.yes { left: 18px; color: var(--ui-go); transform: rotate(-10deg); }
.taste-stamp.no { right: 18px; color: var(--ui-text-2); transform: rotate(10deg); }
.taste-card.go-yes .taste-stamp.yes, .taste-card.go-no .taste-stamp.no { opacity: 1 !important; }
.is-dealing .taste-card { animation: taste-deal 620ms var(--ui-spring) both; }
.is-dealing .taste-card[data-pos="1"] { animation-delay: 90ms; }
.is-dealing .taste-card[data-pos="2"] { animation-delay: 180ms; }
@keyframes taste-deal { from { opacity: 0; translate: 0 60px; scale: .9; } }

.taste-wait { position: relative; min-height: 260px; margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px; border: 1px dashed var(--ui-line-2); border-radius: var(--ui-r-lg); }
.taste-wait[hidden] { display: none; }
.taste-wait h2 { margin: 6px 0 0; font-family: var(--ui-display); font-stretch: 88%; font-weight: 800; font-size: 22px; }
.taste-wait p { max-width: 34ch; margin: 0; }
.taste-wait .vf-focus { width: 76px; height: 76px; }
.taste-wait .vf-focus .dashi { width: 52px; height: 52px; }

.taste-actions { display: flex; align-items: center; justify-content: center; gap: 12px; }
.taste-actions[hidden], .taste-foot[hidden], .taste-done[hidden], .taste-keys[hidden], .taste-progress[hidden] { display: none; }
.taste-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 0 20px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--ui-line-2);
  background: var(--ui-s2); color: var(--ui-text); font: 600 15px/1 var(--ui-font); cursor: pointer;
  transition: transform var(--ui-fast) var(--ui-ease), background var(--ui-fast) linear, border-color var(--ui-fast) linear;
}
.taste-btn .ti { font-size: 20px; }
.taste-btn:active { transform: scale(.94); }
.taste-btn:focus-visible { outline: 2px solid var(--ui-violet); outline-offset: 3px; }
.taste-no, .taste-yes { flex: 1; max-width: 200px; }
.taste-yes { background: var(--ui-go); border-color: transparent; color: #04140c; }
.taste-yes:hover { background: color-mix(in srgb, var(--ui-go) 88%, #fff); }
.taste-no:hover { border-color: var(--ui-text-3); }
.taste-undo { width: 44px; height: 44px; padding: 0; flex: none; }
.taste-undo:disabled { opacity: .35; cursor: default; }
.taste-foot { display: flex; justify-content: center; gap: 22px; margin-top: 12px; }
@media (max-width: 400px) { .taste-btn { padding: 0 14px; font-size: 14px; gap: 6px; } .taste-head p { font-size: 14px; } }
/* Phones: the yes/no buttons always sit just above the tab bar, never behind it. */
@media (max-width: 860px) {
  .taste-stage { height: clamp(280px, calc(100svh - 400px), 420px); }
  .taste-actions { position: sticky; z-index: 6; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 10px); }
  body.tabbar-hidden .taste-actions { bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
}
/* Short phones (iPhone SE, mini): a tighter header and card so it all fits. */
@media (max-width: 860px) and (max-height: 740px) {
  .page-head.taste-head h1 { font-size: 28px; }
  .page-head.taste-head p { display: none; }
  .taste-progress { margin-bottom: 12px; }
  .taste-card { gap: 12px; padding: 18px 18px 16px; }
  .taste-title { font-size: 23px; }
  .taste-hook .vf-line { font-size: 16px; }
  .taste-line { padding: 10px 12px; gap: 10px; }
  .taste-line p { font-size: 15px; line-height: 1.35; }
  .taste-line > .ti { font-size: 18px; }
  .taste-glyph { display: none; }
}
.taste-card { overflow: hidden; }
.link-btn { background: none; border: 0; padding: 6px 2px; color: var(--ui-text-2); font: 500 14px/1.2 var(--ui-font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ui-line-2); }
.link-btn:hover { color: var(--ui-text); }
.link-btn[hidden] { display: none; }
.taste-keys { text-align: center; margin-top: 14px; color: var(--ui-text-3); }

.taste-done { text-align: center; padding: 26px 8px 8px; animation: taste-deal 620ms var(--ui-spring) both; }
.taste-done-mascot { display: grid; place-items: center; margin-bottom: 8px; }
.taste-done h2 { margin: 0 0 8px; font-family: var(--ui-display); font-stretch: 84%; font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -.02em; }
.taste-done p { max-width: 38ch; margin: 0 auto 22px; }
.taste-done-actions { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; }
.taste-done-actions .btn { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .taste-card, .tp-bar i { transition: none; }
  .is-dealing .taste-card, .taste-done { animation: none; }
}
.taste-card[data-pos="3"] { transform: translateY(30px) scale(.88); opacity: 0; pointer-events: none; }
.taste-card[data-pos="3"] > * { visibility: hidden; }
.taste-nudge { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 16px; border-radius: var(--ui-r); background: var(--ui-violet-soft); color: var(--ui-text); text-decoration: none; border: 1px solid transparent; transition: border-color var(--ui-fast) linear; }
.taste-nudge:hover { border-color: var(--ui-violet); }
.taste-nudge-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ui-violet); color: #fff; flex: none; font-size: 20px; }
.taste-nudge-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.taste-nudge-text strong { font-weight: 650; font-size: 15px; }
.taste-nudge-text span { color: var(--ui-text-2); font-size: 13.5px; }
.taste-nudge > .ti { color: var(--ui-text-2); font-size: 18px; }
.taste-head { max-width: 520px; margin-left: auto; margin-right: auto; }
/* Head buttons never get squeezed into ovals on narrow screens */
.head-actions { flex: none; }
.head-actions > *, .icon-btn { flex: none; }
.privacy-switch .when-on { display: none; }
.public-mode .privacy-switch .when-on { display: inline-flex; align-items: center; gap: 8px; }
.public-mode .privacy-switch .when-off { display: none; }
.privacy-switch .when-off { display: inline-flex; align-items: center; gap: 8px; }

/* Home-screen app: a solid strip behind the iPhone status bar, so the time and battery never sit on top of page content. */
@media (max-width: 860px) {
  body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 60; pointer-events: none; }
}

/* Monetise: each "money left on the table" card says exactly how to fix it */
.opp-steps { margin: 10px 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--text); }
.opp-steps li::marker { color: var(--accent); font-weight: 700; }
#more-sheet:focus { outline: none; }

/* ── Idea details: each part has its own icon and colour, and the production
      plan is drawn as a tiny phone so you can see the video, not read about it. */
.brief .sec h4 { display: flex; align-items: center; gap: 8px; }
.sec-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 15px; flex: none; }
.c-violet, .c-amber, .c-red, .c-green, .c-blue, .c-pink { color: var(--ui-text-2); background: var(--ui-s2); }
.brief .sec > h4 + * { margin-top: 8px; }

.first3 { display: flex; gap: 12px; align-items: flex-start; }
.first3 p { margin: 0; color: var(--text); }
.f3-clock { flex: none; display: grid; place-items: center; align-content: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ui-rec); color: var(--ui-text-2); font: 600 10px/1 var(--ui-font); position: relative; }
.f3-clock b { font: 800 15px/1 var(--ui-display); font-stretch: 88%; color: var(--ui-text); margin-bottom: 2px; }

.vibe { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; }
.vibe-main p { margin: 0 0 10px; color: var(--text); }
.pm { width: 92px; aspect-ratio: 9 / 16; border-radius: 16px; padding: 4px; background: var(--ui-s3); border: 1px solid var(--ui-line-2); }
.pm-screen { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #3a3a3c; }
.pm-screen.fx-casual { background: #48484a; }
.pm-screen.fx-high { background: #1c1c1e; }
.pm-person { position: absolute; left: 50%; bottom: 0; width: 46px; height: 62px; transform: translateX(-50%); }
.pm-person::before { content: ''; position: absolute; left: 50%; top: 0; width: 22px; height: 22px; border-radius: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, .28); }
.pm-person::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; border-radius: 22px 22px 0 0; background: rgba(255, 255, 255, .2); }
.pm-ost { position: absolute; left: 5px; right: 5px; z-index: 2; padding: 3px 3px; border-radius: 4px; background: #fff; color: #111; font: 800 6.5px/1.2 var(--ui-display); font-stretch: 85%; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
/* The clamp sits on the inner text so the box padding never shows a cut-off fourth line. */
.pm-ost > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pm-ost.at-top { top: 12px; }
.pm-ost.at-mid { top: 40%; }
.pm-ost.at-bottom { bottom: 30px; }
.pm-subs { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: grid; gap: 3px; justify-items: center; }
.pm-subs i { display: block; height: 4px; border-radius: 2px; background: #FFD60A; width: 100%; }
.pm-subs i + i { width: 64%; }
.pm-eq { position: absolute; top: 6px; right: 6px; z-index: 3; display: flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.pm-eq i { width: 2px; height: 100%; border-radius: 1px; background: #fff; transform-origin: bottom; animation: pm-eq 900ms ease-in-out infinite alternate; }
.pm-eq i:nth-child(2) { animation-delay: -300ms; } .pm-eq i:nth-child(3) { animation-delay: -600ms; } .pm-eq i:nth-child(4) { animation-delay: -150ms; }
@keyframes pm-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.pm-subs i { animation: pm-type 2.4s steps(6) infinite; transform-origin: left; }
.pm-subs i + i { animation-delay: 1.2s; }
@keyframes pm-type { 0% { clip-path: inset(0 100% 0 0); } 50%, 100% { clip-path: inset(0 0 0 0); } }

.effort { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ui-text-2); }
.effort-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.effort-bars i { width: 5px; border-radius: 2px; background: var(--ui-line-2); }
.effort-bars i:nth-child(1) { height: 6px; } .effort-bars i:nth-child(2) { height: 11px; } .effort-bars i:nth-child(3) { height: 16px; }
.effort[data-level="1"] .effort-bars i:nth-child(-n+1),
.effort[data-level="2"] .effort-bars i:nth-child(-n+2),
.effort[data-level="3"] .effort-bars i { background: var(--ui-text-2); }

.prod-tiles { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.prod-tiles li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: var(--ui-r); background: var(--ui-s2); border: 1px solid var(--ui-line); }
.pt-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 17px; color: var(--ui-text-2); background: var(--ui-s3); }
.prod-tiles li.is-off .pt-ic { color: var(--ui-text-3); background: var(--ui-s3); }
.pt-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ui-text-2); }
.pt-label em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; color: var(--ui-text-2); background: var(--ui-s3); }
.is-off .pt-label em { color: var(--ui-text-3); background: var(--ui-s3); }
.pt-val { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.is-off .pt-val { color: var(--ui-text-2); }
@media (max-width: 560px) {
  .prod-tiles { grid-template-columns: 1fr; }
  .vibe { grid-template-columns: 78px minmax(0, 1fr); gap: 14px; }
  .pm { width: 78px; }
}
@media (prefers-reduced-motion: reduce) { .pm-eq i, .pm-subs i { animation: none; } }

/* Taste test: waiting for their videos */
.prep-steps { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 8px; text-align: left; width: min(320px, 100%); }
.prep-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--ui-s1); border: 1px solid var(--ui-line); color: var(--ui-text-3); font-size: 14px; transition: color var(--ui-med) var(--ui-ease), border-color var(--ui-med) var(--ui-ease); }
.prep-steps li .ti { font-size: 17px; flex: none; }
.prep-steps li b { font-weight: 500; color: var(--ui-text-3); }
.prep-steps li.is-now { color: var(--ui-text); border-color: var(--ui-violet); }
.prep-steps li.is-now .ti { color: var(--ui-violet-2); animation: prep-pulse 1.4s ease-in-out infinite; }
.prep-steps li.is-done { color: var(--ui-text-2); }
.prep-steps li.is-done .ti { color: var(--ui-go); }
@keyframes prep-pulse { 50% { opacity: .35; } }
.prep-eta { margin: 4px 0 0 !important; font-size: 15px; color: var(--ui-text); }
@media (prefers-reduced-motion: reduce) { .prep-steps li.is-now .ti { animation: none; } }

/* Waiting/writing: the box sets the height (cards set it themselves via JS). */
.taste-stage:not(:has(.taste-card)) { height: auto !important; }

/* Audience stage (stage.js): one quiet row; tap for the reasoning */
.stage-card { margin: 0 0 18px; border-radius: var(--ui-r-lg); background: var(--ui-s1); border: 1px solid var(--ui-line); overflow: hidden; }
.stage-head { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stage-head:focus-visible { outline: 2px solid var(--ui-violet); outline-offset: -2px; border-radius: var(--ui-r-lg); }
.stage-ladder { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.stage-ladder i { position: relative; width: 6px; border-radius: 2px; background: var(--ui-s3); overflow: hidden; }
.stage-ladder i:nth-child(1) { height: 9px; } .stage-ladder i:nth-child(2) { height: 14px; } .stage-ladder i:nth-child(3) { height: 20px; } .stage-ladder i:nth-child(4) { height: 26px; }
.stage-ladder i::after { content: ''; position: absolute; inset: auto 0 0; height: 0; background: var(--ui-violet); transition: height 700ms var(--ui-ease); }
.stage-ladder i.is-past::after { height: 100%; background: color-mix(in srgb, var(--ui-violet) 55%, var(--ui-s3)); }
.stage-ladder i.is-now::after { height: var(--fill, 100%); }
.stage-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.stage-label { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--ui-text-2); }
.stage-say { font-size: 14.5px; line-height: 1.45; color: var(--ui-text); }
.stage-chev { flex: none; font-size: 18px; color: var(--ui-text-3); transition: transform 300ms var(--ui-ease); }
.stage-card.is-open .stage-chev { transform: rotate(180deg); }
.stage-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--ui-ease); }
.stage-card.is-open .stage-more { grid-template-rows: 1fr; }
.stage-more-in { min-height: 0; overflow: hidden; }
.stage-block { padding: 14px 16px; border-top: 1px solid var(--ui-line); opacity: 0; transform: translateY(-4px); transition: opacity 260ms var(--ui-ease), transform 260ms var(--ui-ease); }
.stage-card.is-open .stage-block { opacity: 1; transform: none; transition-delay: 80ms; }
.stage-card.is-open .stage-block + .stage-block { transition-delay: 140ms; }
.stage-block h4 { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--ui-text-2); }
.stage-plats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stage-plats li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ui-text-2); }
.stage-plats li b { color: var(--ui-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.stage-plats li.is-top span { color: var(--ui-text); }
.stage-plats em { font-style: normal; font-size: 11px; font-weight: 600; margin-left: 6px; padding: 1px 7px; border-radius: 999px; color: var(--ui-violet-2); background: var(--ui-violet-soft); }
.stage-rungs { list-style: none; margin: 0; padding: 0; display: grid; }
.stage-rungs li { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; font-size: 13.5px; color: var(--ui-text-3); }
.stage-rungs li.is-past { color: var(--ui-text-2); }
.stage-rungs li.is-now { color: var(--ui-text); background: var(--ui-violet-soft); }
.sr-range { font-variant-numeric: tabular-nums; font-weight: 600; }
.sr-you { font-size: 11px; font-weight: 700; color: var(--ui-violet-2); }
.stage-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ui-text-3); }
.stage-next-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ui-text-2); }
.stage-next-row b { color: var(--ui-text); }
.stage-bar { height: 4px; margin-top: 10px; border-radius: 999px; background: var(--ui-s3); overflow: hidden; }
.stage-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ui-violet); }
.stage-ladder i.is-past::after, .stage-ladder i.is-now::after { animation: stage-rise 650ms var(--ui-ease) both; }
.stage-ladder i:nth-child(2)::after { animation-delay: 90ms; } .stage-ladder i:nth-child(3)::after { animation-delay: 180ms; } .stage-ladder i:nth-child(4)::after { animation-delay: 270ms; }
@keyframes stage-rise { from { height: 0; } }
@media (max-width: 420px) { .stage-rungs li { grid-template-columns: 70px 1fr auto; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .stage-more, .stage-block, .stage-chev, .stage-ladder i::after { transition: none; animation: none; } }

/* "Tell me more about you" */
.about-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; }
.about-modal[hidden] { display: none; }
.about-scrim { position: absolute; inset: 0; background: var(--ui-scrim); opacity: 0; transition: opacity 250ms var(--ui-ease); }
.about-box { position: relative; width: min(560px, 100%); max-height: min(92dvh, 860px); overflow-y: auto; margin: 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--ui-s1); border: 1px solid var(--ui-line-2); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.7); display: grid; gap: 14px; transform: translateY(40px); opacity: 0; transition: transform 320ms var(--ui-spring), opacity 250ms var(--ui-ease); }
.about-modal.is-open .about-scrim { opacity: 1; }
.about-modal.is-open .about-box { transform: none; opacity: 1; }
.about-head { display: flex; gap: 12px; align-items: flex-start; }
.about-dashi { flex: none; width: 64px; height: 64px; }
.about-dashi .dashi { width: 100%; height: 100%; }
.about-head h2 { margin: 0; font-family: var(--ui-display); font-stretch: 88%; font-weight: 800; font-size: 22px; line-height: 1.1; }
.about-head p { margin: 6px 0 0; color: var(--ui-text-2); font-size: 14.5px; line-height: 1.5; }
.about-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--ui-r); background: var(--ui-go-soft); border: 1px solid color-mix(in srgb, var(--ui-go) 30%, transparent); }
.about-note .ti { color: var(--ui-go); font-size: 18px; margin-top: 1px; flex: none; }
.about-note p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ui-text); }
.about-q { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.about-q > span, .about-q legend { font-size: 14px; font-weight: 600; color: var(--ui-text); padding: 0; }
.about-q em { font-style: normal; color: var(--ui-text-3); font-weight: 500; }
.about-q textarea, .about-q input:not([type=radio]) { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: var(--ui-r); background: var(--ui-bg); border: 1px solid var(--ui-line-2); color: var(--ui-text); font: 500 16px/1.4 var(--ui-font); resize: vertical; }
.about-q textarea:focus, .about-q input:focus { outline: none; border-color: var(--ui-violet); box-shadow: none; }
.about-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
body.about-open { overflow: hidden; }
@media (min-width: 700px) { .about-modal { place-items: center; } .about-box { border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .about-box, .about-scrim { transition: none; } }

/* Waiting for their videos: their own covers, watched one by one */
.taste-wait.is-prep { border: 0; padding: 4px 0 0; min-height: 0; }
.prep { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.prep-wall { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; width: min(300px, 80vw); margin: 6px auto 26px; }
.prep-tile { position: relative; aspect-ratio: 9 / 14; border-radius: 10px; overflow: hidden; background: var(--ui-s2); border: 1px solid var(--ui-line); }
.prep-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.45); transition: filter 600ms var(--ui-ease); }
.prep-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); background-size: 250% 100%; animation: prep-shimmer 1.8s linear infinite; }
.prep-tile.is-done img { filter: none; }
.prep-tile.is-done::after { display: none; }
.prep-tile.is-empty { opacity: .35; }
.prep-check { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ui-go); color: #04140c; font-size: 13px; transform: scale(0); transition: transform 380ms var(--ui-spring); }
.prep-tile.is-done .prep-check { transform: scale(1); }
.prep-scan { position: absolute; left: -6px; right: -6px; height: 2px; border-radius: 2px; background: var(--ui-text-3); animation: prep-scan 2.6s ease-in-out infinite alternate; pointer-events: none; }
.prep.is-writing .prep-scan { opacity: 0; }
.prep-dashi { position: absolute; right: -26px; bottom: -30px; width: 64px; height: 64px; animation: prep-bob 3s ease-in-out infinite; }
.prep-dashi .dashi { width: 100%; height: 100%; }
.prep-title { margin: 0; font-family: var(--ui-display); font-stretch: 86%; font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -.01em; }
.prep-sub { margin: 8px 0 0; max-width: 32ch; color: var(--ui-text-2); font-size: 15px; line-height: 1.5; }
.prep-bar { width: min(300px, 82vw); height: 6px; margin: 20px auto 10px; border-radius: 999px; background: var(--ui-s3); overflow: hidden; }
.prep-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ui-violet); transition: width 900ms var(--ui-ease); }
.prep-eta { margin: 0 !important; font-size: 14px !important; color: var(--ui-text-2) !important; }
.prep-eta b { color: var(--ui-text); }
.prep-leave { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 14px; border-radius: var(--ui-r); background: var(--ui-s1); border: 1px solid var(--ui-line); color: var(--ui-text-2); font-size: 13.5px; line-height: 1.45; text-align: left; max-width: 360px; }
.prep-leave .ti { font-size: 20px; color: var(--ui-violet-2); flex: none; }
@keyframes prep-shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes prep-scan { from { top: -4px; } to { top: calc(100% + 2px); } }
@keyframes prep-bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .prep-tile::after, .prep-scan, .prep-dashi { animation: none; } }

/* Toasts: one quiet floating pill for every message (replaces the green banners) */
.toast-host { position: fixed; z-index: 120; display: grid; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 16px 10px 10px; border-radius: 16px;
  background: rgba(30, 30, 35, .88); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .09); color: var(--ui-text); font: 500 14px/1.4 var(--ui-font);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .8); animation: ui-toast-in 380ms var(--ui-spring) both; transition: opacity 240ms var(--ui-ease), transform 240ms var(--ui-ease); }
.toast.is-out { opacity: 0; transform: translateY(8px) scale(.97); }
.toast-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; font-size: 15px; color: var(--ui-violet-2); background: var(--ui-violet-soft); }
.toast.success .toast-ic { color: var(--ui-go); background: var(--ui-go-soft); }
.toast.error .toast-ic { color: var(--ui-rec); background: var(--ui-rec-soft); }
.toast-text { min-width: 0; overflow-wrap: anywhere; }
[data-theme="light"] .toast { background: rgba(255, 255, 255, .92); border-color: rgba(0, 0, 0, .08); }
/* Without JS the server message stays as a quiet line in the page. */
.flash-page { background: var(--ui-s1) !important; border: 1px solid var(--ui-line) !important; color: var(--ui-text) !important; border-radius: var(--ui-r) !important; align-items: center !important; font-weight: 500; }
.flash-page .ti { color: var(--ui-text-2); font-size: 18px; }
.flash-page.success .ti { color: var(--ui-go); }
.flash-page.error .ti { color: var(--ui-rec); }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition: none; } }
/* Inline notices in pages (form errors, "taking off"): quiet card with a coloured icon, not a coloured slab. */
.flash { background: var(--ui-s1); border: 1px solid var(--ui-line); color: var(--ui-text); border-radius: var(--ui-r); align-items: center; }
.flash > .ti { font-size: 18px; color: var(--ui-violet-2); flex: none; }
.flash.success > .ti { color: var(--ui-go); }
.flash.error { border-color: color-mix(in srgb, var(--ui-rec) 35%, var(--ui-line)); }
.flash.error > .ti { color: var(--ui-rec); }

/* Word-for-word script for emotional ideas: reads like a teleprompter card. */
.brief .sec-say h4 .say-copy { margin-left: auto; width: 30px; height: 30px; }
.say-script { margin-top: 10px; padding: 14px 16px 14px 18px; border-radius: 14px; background: var(--surface-2, rgba(255,255,255,.04)); display: grid; gap: 8px; }
.say-script p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }

/* ---------------------------------------------------------- plans & usage */
.plans-wrap { max-width: 980px; margin: 0 auto; padding: 8px 0 32px; }
.plans-wrap h1 { margin: 0 0 6px; }
.plans-meter { margin: 18px 0; display: grid; gap: 10px; }
.pm-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pm-name { display: block; font-size: 20px; }
.pm-count { font-size: 15px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.pm-count b { color: var(--text); font-size: 20px; }
.pm-bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.pm-bar.hot i { background: var(--warn); }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.plan-tile { display: flex; flex-direction: column; gap: 10px; padding: 20px; min-width: 0; }
.plan-tile.is-current { border-color: var(--accent); }
.plan-tile.is-pro { background: var(--surface); }
.pt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt-head h2 { margin: 0; font-size: 19px; }
.pt-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.pt-badge.soft { background: var(--surface-2); color: var(--text-2); }
.pt-badge.pink { background: var(--accent); color: #fff; }
.pt-price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.pt-price small { font-size: 14px; font-weight: 500; color: var(--text-2); margin-left: 2px; }
.pt-blurb { margin: 0; font-size: 14px; }
.pt-list { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 8px; align-content: start; font-size: 14px; flex: 1; }
.pt-list li { display: flex; gap: 8px; align-items: flex-start; }
.pt-list .ti { color: var(--accent); margin-top: 2px; flex: none; }
.plan-tile.is-pro .pt-list .ti { color: var(--accent); }
.pt-note { margin: 2px 0 0; text-align: center; }

/* Out-of-uses pop-up: shares the about-modal shell. */
.limit-next { border: 1px solid var(--border-2); border-radius: 14px; padding: 14px 16px; background: var(--surface-2); }
.limit-next.is-pro { border-color: var(--accent); }
.ln-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ln-top b { font-size: 17px; }
.ln-top span { font-weight: 800; font-size: 18px; white-space: nowrap; }
.ln-top small { font-weight: 500; font-size: 12px; color: var(--text-2); }
.limit-next ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.limit-next li { display: flex; gap: 8px; align-items: flex-start; }
.limit-next li .ti { color: var(--accent); margin-top: 2px; flex: none; }
.limit-modal .about-actions { flex-wrap: wrap; }

/* Today's new ideas, on the Ideas page */
.allowance { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 14px; text-decoration: none; }
.allowance:hover { border-color: var(--border-2); }
.al-dots { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.al-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.al-dots i.on { background: var(--accent); box-shadow: none; }
.al-text b { color: var(--text); }
.al-reset { margin-left: auto; font-size: 12px; color: var(--muted, #8a8990); }
.allowance.is-out { border-color: rgba(255,159,10,.4); }
.allowance.is-out .al-text b { color: var(--warn); }

/* What's going on in their life right now (ideas page) */
.life-now { margin: 0 0 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 14px; }
.life-now summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 44px; cursor: pointer; list-style: none; }
.life-now summary::-webkit-details-marker { display: none; }
.life-now summary .ti { color: var(--accent); font-size: 18px; flex: none; }
.life-now .ln-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.life-now[open] .ln-text { white-space: normal; }
.life-now .ln-text b { color: var(--text); }
.life-now .ln-edit { flex: none; color: var(--accent); font-weight: 600; font-size: 13px; }
.life-now[open] .ln-edit { visibility: hidden; }
.life-now .ln-form { padding: 0 14px 14px; display: grid; gap: 10px; }
.life-now textarea { width: 100%; resize: vertical; font-size: 16px; }
.life-now .ln-form p { margin: 0; }
.life-now .ln-swap { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-2); }
.life-now .ln-swap input { margin-top: 2px; width: 18px; height: 18px; flex: none; }
.life-now .ln-actions { display: flex; justify-content: flex-end; gap: 8px; }
.idea-notes .in-list { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 6px; }
.idea-notes .in-list li { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 12px; border-radius: 10px; background: var(--bg); color: var(--text); }
.idea-notes .in-list li span { flex: 1; min-width: 0; }
.idea-notes .in-list form { margin: 0; }
.idea-notes .in-x { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.idea-notes .in-x:hover, .idea-notes .in-x:focus-visible { color: var(--text); background: var(--surface); }

/* Hide/show income, in the top bar on every screen */
.privacy-eye .when-hidden { display: none; }
.public-mode .privacy-eye .when-hidden { display: inline; }
.public-mode .privacy-eye .when-shown { display: none; }
.public-mode .privacy-eye { color: var(--ui-violet-2); background: var(--ui-violet-soft); }
.btn.admin-del { color: var(--bad); }
.ui-modal-x { border: 0; padding: 0; cursor: pointer; font: inherit; }
.ui-modal-x:active { transform: scale(.94); }

/* ---------------------------------------------------------- Insights: Your numbers (v3) */
.nx { padding: 20px; }
.nx-r { position: absolute; opacity: 0; pointer-events: none; }
.nx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nx-top h2 { font-size: 22px; letter-spacing: -.02em; margin: 0; }
.nx-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); }
.nx-switch label { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s; }
#nx-7:checked ~ .nx-top label[for="nx-7"], #nx-30:checked ~ .nx-top label[for="nx-30"] { background: var(--accent); color: #fff; }
#nx-7:focus-visible ~ .nx-top label[for="nx-7"], #nx-30:focus-visible ~ .nx-top label[for="nx-30"] { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.nx-panel { display: none; }
#nx-7:checked ~ .nx-p7, #nx-30:checked ~ .nx-p30 { display: block; animation: nx-in .3s ease both; }
@keyframes nx-in { from { opacity: 0; transform: translateY(4px); } }
.nx-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nx-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 13px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--border); min-width: 0; }
.nx-k { font-size: 13px; color: var(--text-2); font-weight: 500; }
.nx-v { font-family: var(--display); font-stretch: 92%; font-weight: 750; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.nx-tile.big .nx-v { font-size: 34px; }
.nx-pill { align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .06); color: var(--text-2); }
.nx-pill.up { background: var(--good-soft); color: var(--good); }
.nx-pill.down { background: var(--bad-soft); color: var(--bad); }
.nx-note, .nx-foot { font-size: 12.5px; color: var(--muted); margin: 10px 2px 0; line-height: 1.45; }
.nx-chart { margin-top: 18px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .025); border: 1px solid var(--border); }
.nx-chart .nx-k { display: block; margin-bottom: 8px; }
.nx-h { font-size: 16px; margin: 24px 2px 12px; letter-spacing: -.01em; }
.nx-cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nx-row { padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--border); min-width: 0; }
.nx-row-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.nx-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--accent-soft); color: var(--accent-2); }
.nx-rv { font-family: var(--display); font-stretch: 92%; font-weight: 750; font-size: 22px; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-rv small { font-family: var(--sans); font-stretch: 100%; font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.nx-meter { position: relative; height: 8px; margin: 14px 0 0; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.nx-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); }
.nx-typ { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); opacity: .75; }
.nx-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.nx-dots i { width: 8px; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.nx-dots i.on { background: var(--accent); }
.nx-say { font-size: 13.5px; line-height: 1.45; color: var(--text-2); margin: 10px 0 0; }
@media (max-width: 860px) {
  .nx { padding: 18px 16px; }
  .nx-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .nx-tile { padding: 12px; }
  .nx-k { font-size: 12.5px; }
  .nx-tile.big { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .nx-tile.big .nx-k { width: 100%; }
  .nx-v { font-size: 22px; }
  .nx-tile.big .nx-v { font-size: 38px; }
  .nx-cmp { grid-template-columns: 1fr; gap: 8px; }
}
:root[data-theme="light"] .nx-tile, :root[data-theme="light"] .nx-row, :root[data-theme="light"] .nx-chart { background: var(--surface-2); }
:root[data-theme="light"] .nx-dots i, :root[data-theme="light"] .nx-meter { background: rgba(0, 0, 0, .08); }
.offer-how { margin-top: 8px; }
.offer-how > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-2); list-style: none; -webkit-tap-highlight-color: transparent; }
.offer-how > summary::-webkit-details-marker { display: none; }
.offer-how > summary::after { content: " +"; }
.offer-how[open] > summary::after { content: " −"; }
.offer-how ol { margin-top: 6px; }

/* Short labels and numbers never break mid-word ("Post s"): they wrap only at spaces */
.content :where(th, td.n, .stat-value, .pill, .chip, .btn, .tab-label) { overflow-wrap: normal; word-break: normal; }
.content th { hyphens: none; }
/* An idea without a number (their own ideas): text takes the space, chevron stays on the right edge */
.idea-toggle > summary:not(:has(> .shot-n)) { grid-template-columns: minmax(0, 1fr) auto; }
/* Light theme: the change pills and small tags need darker text to stay readable */
:root[data-theme="light"] .nx-pill.up { background: var(--good-soft); color: var(--good); }
:root[data-theme="light"] .nx-pill.down { background: var(--bad-soft); color: #D70015; }
:root[data-theme="light"] .nx-pill { color: var(--text-2); }
:root[data-theme="light"] .is-off .pt-label em { color: var(--ui-text-3); }

/* Small tables that must fit a phone without sideways scrolling */
.tight-table td:first-child { white-space: nowrap; }
@media (max-width: 480px) {
  .tight-table th, .tight-table td { padding-left: 6px; padding-right: 6px; font-size: 13px; }
  .tight-table th:first-child, .tight-table td:first-child { padding-left: 0; }
}

/* Light theme: green buttons and the period switch deep enough for AA contrast */
[data-theme="light"] .btn-go { background: #10744c; }
[data-theme="light"] .btn-go:hover { background: #0d6642; }
[data-theme="light"] .nx-switch label { color: var(--text-2); }

/* Accounts: each account shows its own sync time, so the page-level one is only for wide screens */
@media (max-width: 600px) { .page-head .head-sync { display: none; } }
.page-head .head-sync { white-space: nowrap; }

/* Plans: cancelling is there, small and quiet, under the plans */
.plans-cancel { margin: 26px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.plans-cancel a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.plans-cancel a:hover { color: var(--text); }
.plans-end { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.plans-end p { margin: 0; }

/* Money: what you sell */
.offers-card .soft.small { margin: 0 0 12px; }
.offer-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.offer-row { position: relative; padding: 12px 92px 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.offer-name { font-weight: 600; overflow-wrap: anywhere; }
.offer-edit > summary { list-style: none; cursor: pointer; position: absolute; top: 9px; right: 10px; }
.offer-edit > summary::-webkit-details-marker, .offer-add > summary::-webkit-details-marker { display: none; }
.offer-row:has(.offer-edit[open]) { padding-right: 14px; }
.offer-row:has(.offer-edit[open]) .offer-main { padding-right: 82px; }
.offer-form .input { width: 100%; }
.offer-edit[open] > summary { background: var(--surface-2, rgba(255,255,255,.06)); }
.offer-form { display: grid; gap: 10px; margin-top: 6px; }
.offer-form .field { margin: 0; }
.offer-more { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border); }
.offer-del { color: var(--bad, #e5484d); }
.offer-add > summary { list-style: none; cursor: pointer; display: inline-flex; }
.offer-add > summary.hidden-summary { display: none; }
.offer-add[open] > summary { margin-bottom: 4px; }
[data-theme="light"] .offer-row { background: #fff; }

/* Onboarding: Dashi learns you */
.ob-learns { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.ob-learns .ti { font-size: 22px; color: var(--accent); flex: none; margin-top: 1px; }
.ob-learns p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ob-learns b { color: var(--text); }

/* Insights: the big stats at a glance (few words, one number each) */
.wow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 16px; }
@media (min-width: 760px) { .wow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wow-tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 128px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; overflow: hidden; }
a.wow-tile:hover { border-color: var(--border-2); }
.wow-k { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: .01em; }
.wow-big { font-family: var(--font); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.02em; margin-top: auto; display: flex; align-items: baseline; gap: 2px; }
.wow-big small { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--text-2); }
.wow-big .ti { font-size: 26px; align-self: center; }
.wow-mid { font-size: 26px; }
.wow-s { font-size: 12.5px; color: var(--text-2); line-height: 1.3; }
.wow-clip, .wow-cap { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wow-hero { grid-column: 1 / -1; min-height: 150px; background: var(--surface); border-color: var(--border); }
.wow-hero .wow-big { font-size: 64px; }
.wow-hero .wow-big small { font-size: 26px; color: var(--text-2); }
.wow-cap { font-size: 14px; color: var(--text); opacity: .9; margin-top: 2px; }
@media (min-width: 760px) { .wow-hero { grid-column: span 2; grid-row: span 2; } }
.wow-ring { width: 76px; height: 76px; margin-top: auto; }
.wow-ring circle { fill: none; stroke-width: 8; }
.wow-ring .r-bg { stroke: var(--viz-grid); }
.wow-ring .r-fg { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 36px 36px; }
.wow-ring text { fill: var(--text); font: 700 17px var(--font); }
.wow-bars { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin: 4px 0 2px; }
.wow-bars i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--viz-grid); }
.wow-bars i.top { background: var(--accent); }
.wow-bars i.none { opacity: .4; }
.wow-bars.wide { gap: 4px; }
.wow-bars:not(.wide) i:not(.none):not(.top) { background: var(--muted); opacity: .55; }
.wow-tile.is-up .wow-big { color: var(--good); }
.wow-tile.is-down .wow-big { color: var(--viz-under); }
.ins-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 16px 0 0; border-radius: 14px; border: 1px dashed var(--border); color: var(--text-2); font-weight: 600; font-size: 14px; }
.ins-more > summary::-webkit-details-marker { display: none; }
.ins-more[open] > summary { margin-bottom: 12px; }
.fresh-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
@media (max-width: 759px) { .wow > .wow-tile:last-child:nth-child(even) { grid-column: 1 / -1; min-height: 110px; } }

/* The 3 ways to open a video: the first thing on an opened idea. Flat, numbered, the words big. */
.openings { margin-top: 16px; }
.open-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: open; }
.open-opt { position: relative; padding: 14px 16px 14px 52px; border-radius: 16px; background: var(--surface-2); counter-increment: open; }
.open-opt::before { content: counter(open); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text); font-size: 13px; font-weight: 700; }
.open-kind { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 26px; }
.open-kind .ti { font-size: 15px; }
.open-say .open-kind .ti { color: var(--rec); }
.open-clip .open-kind .ti, .open-text .open-kind .ti { color: var(--accent-2); }
.open-words { margin: 4px 0 0; color: var(--text); font-family: var(--display); font-stretch: 92%; font-weight: 700; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.open-shot { margin: 4px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.open-clip .open-shot { color: var(--text); font-size: 16px; font-weight: 600; }

/* Admin: add a person by hand */
.add-person { margin: 4px 0 14px; }
.add-person > summary { list-style: none; display: inline-flex; cursor: pointer; }
.add-person > summary::-webkit-details-marker { display: none; }
.add-person-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; margin-top: 12px; max-width: 900px; }
.add-person-form label { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.add-person-form p { grid-column: 1 / -1; margin: 0; }

/* Over this month's plan limit (plans.block): one calm, clear bar on every page. */
.cap-stop { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 14px; }
.cap-stop .ti { font-size: 18px; color: var(--accent); flex: none; }
.cap-stop p { margin: 0; flex: 1; min-width: 0; }
.cap-stop .btn { flex: none; }
.cost-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cost-list li { padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.cost-list .cl-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cost-list .cl-bar { height: 6px; border-radius: 3px; background: var(--border); margin: 8px 0 6px; overflow: hidden; }
.cost-list .cl-bar i { display: block; height: 100%; background: var(--accent); }
.cost-list li.is-near .cl-bar i { background: #f5a524; }
.cost-list li.is-over .cl-bar i { background: #ef4444; }
.cost-list .cl-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.cost-list form { margin: 0; }

/* The first ten ideas: ten numbered slots that fill in as each one is written, then they all show together. */
.first-set { max-width: 820px; }
.first-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.first-slot { position: relative; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.first-slot .n { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted, #8e8e93); background: rgba(127, 127, 127, .12); }
.first-slot .bar { height: 10px; border-radius: 99px; background: rgba(127, 127, 127, .16); animation: first-pulse 1.6s ease-in-out infinite; }
.first-slot .bar.short { width: 55%; }
.first-slot .ti-check { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #30D158; font-size: 18px; opacity: 0; transition: opacity .3s; }
.first-slot.is-ready .bar { animation: none; background: rgba(48, 209, 88, .18); }
.first-slot.is-ready .n { color: #30D158; background: rgba(48, 209, 88, .14); }
.first-slot.is-ready .ti-check { opacity: 1; }
@keyframes first-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .first-slot .bar { animation: none; } }

/* Admin: each customer's cost sits in their own row */
.cost-cell { min-width: 220px; }
.cost-cell .cc { display: grid; gap: 6px; }
.cost-cell .cc-top b { font-size: 15px; }
.cost-cell .cc.is-near .cc-top b { color: #f59e0b; }
.cost-cell .cc.is-over .cc-top b { color: #ff453a; }
.cost-cell form { margin: 0; }
.cost-cell .cl-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.cost-cell .cl-bar i { display: block; height: 100%; background: var(--accent); }
.cost-cell .is-near .cl-bar i { background: #f5a524; }
.cost-cell .is-over .cl-bar i { background: #ff453a; }