*{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#000;--accent:#e8c547;--accent2:#f0a500;
  --surface:#141414;--surface2:#1c1c1c;--surface3:#242424;
  --text:#fff;--text2:#a0a0a0;--text3:#606060;
  --border:#2a2a2a;--border2:#383838;
  --green:#1a7a5e;--green-bg:rgba(26,122,94,0.15);
  --red:#e05252;--red-bg:rgba(224,82,82,0.12);
  --blue:#4a90d9;--blue-bg:rgba(74,144,217,0.12);
  /* Brand UI v1 — typography roles. Wider scale than the legacy
     13px-only body gives the product the breathing room "expensive"
     interfaces have. Pair with the existing Outfit (sans) + DM Mono
     + Instrument Serif font stack. */
  --type-display: 72px;   /* hero moments. Marketing headlines. */
  --type-h1:      40px;   /* page titles. */
  --type-h2:      28px;   /* section titles. */
  --type-h3:      20px;   /* subsections. */
  --type-body-lg: 16px;   /* generous body. */
  --type-body:    14px;   /* default body. */
  --type-label:   11px;   /* mono kicker labels. */
  --type-micro:   10px;   /* meta info. */
  /* Brand UI v1 — signature timing curves. Tight, slightly
     aggressive — punk-coded motion, not Apple-soft. */
  --ease-tight:    cubic-bezier(0.22, 1, 0.36, 1);  /* snappy ease-out */
  --ease-snap:     cubic-bezier(0.4, 0, 0.2, 1);    /* material-fast */
  --dur-quick:     120ms;
  --dur-tight:     180ms;
  --dur-comfort:   240ms;
}

/* ============================================================================
   Brand UI v1 — signature primitives.
   ----------------------------------------------------------------------------
   Four reusable classes that compound into a distinctive Doom Tide look:

     .dt-money   — heavyweight typographic treatment for dollar figures.
                    Tabular DM Mono at oversized weight; subtle accent
                    shadow. Treats money like the receipts brand voice
                    promises: dense, monospaced, evidence-of-work.
     .dt-redact  — print-design "blacked out" bar for sensitive/hidden
                    data. CSS-only, animated on hover to peek the
                    underlying text (reveals the metaphor without
                    actually revealing the data).
     .dt-receipt — wraps content in a torn-edge ticket-stub container
                    with monospace body. Use as the rendered-result
                    treatment for analyses, completions, confirmations.
     .dt-grain   — adds a low-opacity grain/halftone texture overlay
                    via an SVG noise filter (no image asset needed).
                    Gives cards a tactile, screen-print feel.

   These are not skin-deep. They're brand-voiced typography + motion +
   texture that show up everywhere data is presented. Used in
   combination they make Doom Tide visually unmistakable. ============================ */

/* ── .dt-money — heavyweight dollar typography ─────────────────────── */
.dt-money{
  font-family:'DM Mono',ui-monospace,monospace;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
  color:var(--accent);
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
  display:inline-flex;
  align-items:baseline;
  gap:2px;
}
.dt-money-xl{font-size:56px;line-height:1}
.dt-money-lg{font-size:36px;line-height:1.05}
.dt-money-md{font-size:22px;line-height:1.1}
.dt-money-sm{font-size:16px;line-height:1.15}
/* Optional dollar-sign prefix is rendered smaller + offset so the
   numeric weight reads first. Use markup:
     <span class="dt-money dt-money-lg"><span class="dt-money-sym">$</span>31,662</span> */
.dt-money-sym{font-size:0.55em;color:var(--text2);margin-right:1px;align-self:flex-start;line-height:1.6}

/* ── .dt-redact — blacked-out bar (print-design metaphor) ──────────── */
.dt-redact{
  display:inline-block;
  position:relative;
  background:#000;
  color:transparent !important;
  user-select:none;
  border-radius:1px;
  padding:0 4px;
  transition:background var(--dur-tight) var(--ease-tight);
}
.dt-redact::before{
  /* Three sharp diagonal slashes overlaid — the "stamp" pattern that
     makes a redaction look intentional rather than broken. */
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    -25deg,
    transparent 0,
    transparent 2px,
    rgba(255,255,255,0.04) 2px,
    rgba(255,255,255,0.04) 4px
  );
  border-radius:1px;
  pointer-events:none;
}
.dt-redact:hover{
  background:#1a1a1a;
  color:var(--text3) !important;
}
.dt-redact:hover::before{opacity:0.3}

/* ── .dt-receipt-print — line-by-line print-in animation ───────────── */
@keyframes dt-receipt-line{
  0%   { opacity:0; transform:translateY(-4px) scaleY(0.4); transform-origin:top; }
  60%  { opacity:1; transform:translateY(0) scaleY(1); }
  100% { opacity:1; transform:translateY(0) scaleY(1); }
}
@keyframes dt-receipt-tear{
  0%   { clip-path:polygon(0 0, 100% 0, 100% 0, 0 0); opacity:0; }
  100% { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity:1; }
}
.dt-receipt{
  background:#f4f1ea;
  color:#1a1a1a;
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:13px;
  line-height:1.7;
  padding:18px 20px 22px;
  position:relative;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.06);
  /* Torn bottom edge via a zigzag SVG mask. The receipt feels like
     it printed from a tape reel, not like a div. */
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0,0 H100 V96 L97,98 L94,96 L91,98 L88,96 L85,98 L82,96 L79,98 L76,96 L73,98 L70,96 L67,98 L64,96 L61,98 L58,96 L55,98 L52,96 L49,98 L46,96 L43,98 L40,96 L37,98 L34,96 L31,98 L28,96 L25,98 L22,96 L19,98 L16,96 L13,98 L10,96 L7,98 L4,96 L1,98 L0,96 Z' fill='black'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0,0 H100 V96 L97,98 L94,96 L91,98 L88,96 L85,98 L82,96 L79,98 L76,96 L73,98 L70,96 L67,98 L64,96 L61,98 L58,96 L55,98 L52,96 L49,98 L46,96 L43,98 L40,96 L37,98 L34,96 L31,98 L28,96 L25,98 L22,96 L19,98 L16,96 L13,98 L10,96 L7,98 L4,96 L1,98 L0,96 Z' fill='black'/></svg>");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  animation:dt-receipt-tear 260ms var(--ease-tight) both;
}
.dt-receipt-header{
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:0.12em;
  color:#666;
  padding-bottom:8px;
  margin-bottom:10px;
  border-bottom:1px dashed #999;
}
.dt-receipt-row{
  display:flex;
  justify-content:space-between;
  padding:2px 0;
  opacity:0;
  animation:dt-receipt-line 220ms var(--ease-tight) both;
}
/* Stagger each subsequent line by ~60ms so the print effect is
   visible without dragging. Up to 12 lines supported in CSS;
   beyond that the last delay holds. */
.dt-receipt-row:nth-child(1) { animation-delay:80ms; }
.dt-receipt-row:nth-child(2) { animation-delay:140ms; }
.dt-receipt-row:nth-child(3) { animation-delay:200ms; }
.dt-receipt-row:nth-child(4) { animation-delay:260ms; }
.dt-receipt-row:nth-child(5) { animation-delay:320ms; }
.dt-receipt-row:nth-child(6) { animation-delay:380ms; }
.dt-receipt-row:nth-child(7) { animation-delay:440ms; }
.dt-receipt-row:nth-child(8) { animation-delay:500ms; }
.dt-receipt-row:nth-child(9) { animation-delay:560ms; }
.dt-receipt-row:nth-child(10){ animation-delay:620ms; }
.dt-receipt-row:nth-child(11){ animation-delay:680ms; }
.dt-receipt-row:nth-child(12){ animation-delay:740ms; }
.dt-receipt-total{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #999;
  font-weight:600;
  font-size:14px;
}

/* ── .dt-grain — SVG noise overlay for tactile texture ─────────────── */
.dt-grain{
  position:relative;
  isolation:isolate;
}
.dt-grain::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
}
/* Stronger variant for cards that should feel obviously textural —
   receipt-style surfaces, statement scans, marketing hero blocks. */
.dt-grain-loud::after{ opacity:0.08; }

/* ── Brand-voiced primary button hover ────────────────────────────── */
/* Tighter than Apple-soft, slight scale-up + accent shift. Used by
   the existing .primary buttons — overrides their hover transition
   to feel intentional rather than generic. */
button.primary, .btn-main{
  transition:background var(--dur-tight) var(--ease-tight),
             transform var(--dur-quick) var(--ease-snap),
             box-shadow var(--dur-tight) var(--ease-tight);
}
button.primary:hover, .btn-main:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(232,197,71,0.25);
}
button.primary:active, .btn-main:active{
  transform:translateY(0);
  box-shadow:0 1px 4px rgba(232,197,71,0.2);
}

/* ── Operator dashboard KPI tiles get grain by default ────────────── */
/* The .v2-kpi tiles on the operator Overview are the highest-traffic
   surface for the operator. Wrapping them in the grain overlay
   universally (instead of per-tile markup) gives the whole dashboard
   a tactile screen-print feel with one CSS rule. The relative
   positioning + isolation set up the stacking context the ::after
   noise overlay needs. */
.page-v2 .v2-kpi {
  position: relative;
  isolation: isolate;
}
.page-v2 .v2-kpi::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
.page-v2 .v2-kpi > * { position: relative; z-index: 2; }

/* Also bump the v2-kpi-v values (the headline numbers) to match the
   heavyweight .dt-money treatment: tabular numerals, tighter tracking,
   subtle shadow so they read as evidence of work rather than a label.
   Size bumps from 22px to 30px — gives the dashboard the "expensive"
   typographic breathing room. */
.page-v2 .v2-kpi-v {
  font-size: 30px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  line-height: 1.05 !important;
}

/* ── Headline-statement display type ──────────────────────────────── */
/* Hero-moment treatment for marketing/dashboard page titles where the
   page is making a claim, not just labeling. Pairs with Instrument
   Serif italic for the "voice" word. */
.dt-headline{
  font-family:'Outfit',sans-serif;
  font-weight:500;
  font-size:var(--type-h1);
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--text);
}
.dt-headline em{
  /* Outfit italic, NOT a serif font swap. Per the brand's own Phase
     2.9c decision documented in _design/tokens.md: "never swap to a
     serif font mid-phrase" — the swap shifts perceived weight and
     reads as a glitch at this scale. The italic + accent alone
     carries the editorial weight. Earlier Brand UI v3 tried serif;
     rolled back to match the auth screen treatment site-wide. */
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}
.dt-headline-display{
  font-size:var(--type-display);
  line-height:0.98;
  letter-spacing:-0.03em;
}
@media (max-width:760px){
  :root{ --type-display:48px; --type-h1:30px; --type-h2:22px; }
}
html,body{height:100%;font-family:"Outfit",sans-serif;color:var(--text);background:var(--brand)}
#auth-screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:#000;position:relative;overflow:hidden}
#auth-screen::before{content:"";position:absolute;top:-300px;right:-300px;width:700px;height:700px;border-radius:50%;background:rgba(232,197,71,0.03);pointer-events:none}
.auth-box{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:2.5rem;width:100%;max-width:440px;position:relative;z-index:1;animation:fadeUp 0.6s ease both;transition:max-width 0.3s ease}
.auth-box.expanded{max-width:760px}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* Auth-screen wordmark — bumped 160px → 220px. (Drop-shadow trick
   reverted — exposed source-PNG edge artifact at scale.)
   2026-05-26: source asset replaced with a transparent-background PNG
   (alpha-keyed from the original JPEG, downscaled to 1024px, RGB kept
   black so existing filter:invert(1) still produces a white wordmark).
   Earlier mix-blend-mode:screen workaround removed — no box to hide. */
.auth-logo{width:220px;margin-bottom:1.75rem;filter:invert(1)}
.auth-headline{font-family:"Outfit",serif;font-size:32px;line-height:1.15;color:#fff;margin-bottom:1.25rem}
.auth-headline em{color:var(--accent);font-style:italic}
/* Carries the same brand lede from the marketing-site landing onto the
   auth screen. Each phrase gets its own line for cadence; the block
   sits between the headline and the Sign in / Create account tabs. */
.auth-lede{font-size:14px;line-height:1.7;color:rgba(255,255,255,0.55);margin-bottom:2rem}
.auth-lede span{display:block}
.auth-tabs{display:flex;border:1px solid rgba(255,255,255,0.1);border-radius:10px;overflow:hidden;margin-bottom:1.5rem}
.auth-tab{flex:1;padding:10px;font-family:"Outfit",sans-serif;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all 0.2s}
.auth-tab.active{background:var(--accent);color:#000}
.auth-tab:not(.active){background:transparent;color:rgba(255,255,255,0.4)}
.afield{margin-bottom:13px}
.afield label{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,0.4);margin-bottom:5px}
.afield input{width:100%;padding:10px 13px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#fff;font-family:"Outfit",sans-serif;font-size:14px;outline:none;transition:border 0.2s}
.afield input::placeholder{color:rgba(255,255,255,0.25)}
.afield input:focus{border-color:var(--accent)}
.plan-cards{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.plan-card{border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all 0.2s;display:flex;justify-content:space-between;align-items:center}
.plan-card:hover{border-color:rgba(232,197,71,0.4)}
.plan-card.selected{border-color:var(--accent);background:rgba(232,197,71,0.06)}
.plan-name{font-size:13px;font-weight:500;color:#fff;margin-bottom:2px}
.plan-desc{font-size:11px;color:rgba(255,255,255,0.4)}
.plan-price{font-family:"Outfit",serif;font-size:22px;color:var(--accent);text-align:right}
.plan-price-sub{font-size:10px;color:rgba(255,255,255,0.35);text-align:right}
.btn-main{width:100%;padding:12px;background:var(--accent);color:#000;border:none;border-radius:10px;font-family:"Outfit",sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s;margin-top:4px}
.btn-main:hover{background:var(--accent2)}
.btn-main:disabled{opacity:0.35;cursor:not-allowed}
.auth-switch{text-align:center;margin-top:14px;font-size:12px;color:rgba(255,255,255,0.35)}
.auth-switch a{color:var(--accent);cursor:pointer}
.stripe-block{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:14px;margin-bottom:14px}
.stripe-label{font-size:11px;color:rgba(255,255,255,0.35);margin-bottom:10px}
.stripe-row{display:flex;gap:8px}
.stripe-row input{flex:1;padding:10px 13px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#fff;font-family:"Outfit",sans-serif;font-size:14px;outline:none}
.err-msg{background:rgba(224,82,82,0.12);border:1px solid rgba(224,82,82,0.3);border-radius:8px;padding:10px 13px;font-size:12px;color:#f0948a;margin-bottom:12px;display:none}
.notice-box{background:rgba(232,197,71,0.08);border:1px solid rgba(232,197,71,0.2);border-radius:8px;padding:10px 13px;font-size:11px;color:rgba(255,255,255,0.6);margin-bottom:14px}
#platform{display:none;min-height:100vh;min-height:100dvh;background:var(--brand)}
.pg{display:grid;grid-template-columns:200px 1fr;min-height:100vh;min-height:100dvh}
.sidebar{background:#000;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1.25rem 12px;position:sticky;top:0;height:100vh;height:100dvh}
.ws-switcher{position:relative;margin-bottom:8px;display:none}
.ws-current{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;cursor:pointer;transition:all 0.15s}
.ws-current:hover{background:rgba(255,255,255,0.06);border-color:rgba(232,197,71,0.3)}
.ws-current-label{font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.05em;line-height:1}
.ws-current-name{font-size:13px;color:#fff;font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px}
.ws-current-caret{margin-left:auto;color:rgba(255,255,255,0.4);font-size:10px}
.ws-menu{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#0f0f12;border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,0.5);z-index:100;max-height:280px;overflow-y:auto;display:none}
.ws-menu.open{display:block}
.ws-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background 0.1s}
.ws-item:hover{background:rgba(255,255,255,0.05)}
.ws-item.active{background:rgba(232,197,71,0.08)}
.ws-item.active .ws-item-name{color:var(--accent)}
.ws-item-name{font-size:13px;color:#fff;font-weight:500;line-height:1.2}
.ws-item-meta{font-size:10px;color:rgba(255,255,255,0.35);margin-top:2px;line-height:1.2}
.ws-item-check{margin-left:auto;color:var(--accent);font-size:11px;display:none}
.ws-item.active .ws-item-check{display:block}
.sb-logo{margin-bottom:8px;padding:0 4px;text-align:center}
/* Sidebar wordmark — bumped 100px → 140px. (Paired drop-shadow trick
   reverted — exposed an edge artifact in the source PNG; size bump
   alone gives the boldness.) */
.sb-logo img{width:140px;filter:invert(1);display:block;margin:0 auto}
/* Tier badge — plain mono uppercase text below the logo. Phase 2.8,
   simplified Phase 2.9 to match the songwriter-dashboard mockup: no
   pill background, no border, just amber mono uppercase centered.
   Cleaner; lets the wordmark above breathe. Operator variant uses
   red text but keeps the same plain treatment (no fill, no border). */
.sb-tier{font-family:'DM Mono',monospace;font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:0.12em;font-weight:500;text-align:center;display:block;margin:0 auto 1.5rem}
.sb-tier-wrap{text-align:center}
.sb-tier.operator{color:var(--red)}
/* Section label — small mono uppercase header above each nav group.
   Phase 2.8. Replaces the previous inline-styled labels with a
   consistent class so all three sections (Catalog/Money/Resources)
   read identically. */
/* Sidebar nav — Phase 2.9 polish pass. Bumped font from 13 → 14px so
   nav reads with more weight (matches the mockup); added a smoother
   transition curve on hover so the bg flicker glides in rather than
   snapping; tightened the count badge to a squared 4px corner with
   slightly more contrast so the numbers pop. Active state inherits
   a hairline left rail at the sidebar edge. */
.sb-section{display:flex;flex-direction:column;gap:1px;margin-bottom:16px}
/* Section headers — matches the songwriter dashboard mockup.
   Outfit semibold uppercase tracked-out, amber color. Same
   treatment for both songwriter ("Catalog" / "Money" / "Resources")
   and operator ("Clients" / "Pipeline" / "Ops") sidebars. */
.sb-section-label{font-family:'Outfit','Helvetica Neue',Arial,sans-serif;font-size:10px;font-weight:600;color:var(--accent);letter-spacing:0.08em;text-transform:uppercase;margin:10px 12px 6px}
.nav-links{flex:1;display:flex;flex-direction:column;gap:0}
.nl{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:6px;font-size:14px;color:var(--text2);cursor:pointer;transition:background 0.14s cubic-bezier(0.4,0,0.2,1),color 0.14s ease;border:none;background:none;width:100%;text-align:left;position:relative;font-family:'Outfit',sans-serif}
.nl:hover{background:rgba(255,255,255,0.035);color:var(--text)}
.nl:hover svg{opacity:1}
/* Active state — v2 subtle treatment (Phase 2.8, refined 2.9). Amber-dim
   background + amber text. Hairline left rail at the sidebar's left
   edge gives a sharper "you are here" signal than bg alone. */
.nl.active{background:var(--accent-dim,rgba(212,166,76,0.15));color:var(--accent);font-weight:500}
.nl.active::before{content:"";position:absolute;left:-20px;top:2px;bottom:2px;width:2px;background:var(--accent);border-radius:0 2px 2px 0}
.nl svg{width:17px;height:17px;flex-shrink:0;opacity:0.75;transition:opacity 0.14s ease}
.nl.active svg{opacity:1}
/* Count badge — squared 4px corners (matches mockup) instead of pill.
   Slightly more contrast so the number reads at a glance. */
.nl .sb-count{margin-left:auto;font-family:'DM Mono',monospace;font-size:11px;font-weight:500;padding:1px 7px;border-radius:4px;background:rgba(255,255,255,0.07);color:var(--text2);letter-spacing:0.02em;transition:background 0.14s ease,color 0.14s ease}
.nl:hover .sb-count{background:rgba(255,255,255,0.1);color:var(--text)}
.nl.active .sb-count{background:rgba(212,166,76,0.18);color:var(--accent)}
.sb-user{border-top:1px solid var(--border);padding-top:12px;margin-top:auto}
/* Bottom-of-sidebar user chip — Phase 2.9 typography pass. Name stays
   in Outfit (sans) so it reads as a person's name; tier/meta line
   switches to DM Mono uppercase for the gritty forensic signature
   that matches the rest of the sidebar (section labels, item counts,
   tier badge). Sign-out button also gets mono treatment so it sits
   in the same typographic family as everything around it. */
.u-chip{display:flex;align-items:center;gap:9px;padding:0 4px;margin-bottom:8px}
.u-av{width:30px;height:30px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#000;flex-shrink:0;font-family:'Outfit',sans-serif}
.u-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.u-tier{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:0.04em;margin-top:2px;line-height:1.3}
.so-btn{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--red);background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:6px;width:100%;text-align:left;opacity:0.7;transition:opacity 0.12s}
.so-btn:hover{opacity:1}
.content{padding:1.75rem;overflow-y:auto;background:var(--surface)}
.page{display:none}
.page.active{display:block}
/* Page title / sub — v2 typography rhythm. Matches the songwriter
   dashboard mockup: Outfit 500 base, Outfit 400 italic amber for the
   <em> accent. No font swap mid-phrase — same family throughout, the
   italic alone carries the editorial weight. */
.page-title{font-size:30px;font-weight:500;line-height:1.15;letter-spacing:-0.01em;margin-bottom:4px;color:var(--text)}
.page-title em{color:var(--accent);font-style:italic;font-weight:400;font-family:inherit;font-size:1em;letter-spacing:inherit}
.page-sub{font-size:14px;color:var(--text2);line-height:1.55;margin-bottom:1.75rem;max-width:72ch}
.page-kicker{font-family:'DM Mono',monospace;font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:0.1em;font-weight:500;margin-bottom:8px;display:block}
.card{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:1.25rem}
.card+.card{margin-top:12px}
.ci{background:var(--surface3);border:1px solid var(--border);border-radius:10px;padding:1rem}
.pf{margin-bottom:12px}
.pf label{font-size:12px;font-weight:500;color:var(--text2);display:block;margin-bottom:4px}
.pf input,.pf select,.pf textarea{width:100%;padding:8px 11px;background:var(--surface3);border:1px solid var(--border);border-radius:8px;font-family:"Outfit",sans-serif;font-size:13px;color:var(--text);outline:none;transition:border 0.15s}
.pf input:focus,.pf select:focus,.pf textarea:focus{border-color:var(--accent)}
.pf input::placeholder{color:var(--text3)}
.pf textarea{resize:vertical;min-height:60px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
button.primary, a.primary{background:var(--accent);color:#000;border:1px solid var(--accent);padding:9px 18px;border-radius:8px;font-family:"Outfit",sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s}
button.primary:hover, a.primary:hover{background:var(--accent2)}
button.secondary, a.secondary{background:var(--surface3);color:var(--text);border:1px solid var(--border);padding:9px 18px;border-radius:8px;font-family:"Outfit",sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s}
button.secondary:hover, a.secondary:hover{background:var(--border)}
button.success{background:var(--green);color:#fff;border:1px solid var(--green);padding:9px 18px;border-radius:8px;font-family:"Outfit",sans-serif;font-size:13px;font-weight:500;cursor:pointer}
button.info, a.info{background:var(--blue);color:#fff;border:1px solid var(--blue);padding:9px 18px;border-radius:8px;font-family:"Outfit",sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s}
button.info:hover, a.info:hover{background:#3d7bc0}
button.sm{padding:5px 11px;font-size:12px}
button.dsm{background:var(--red-bg);color:var(--red);border:1px solid rgba(224,82,82,0.3);padding:5px 9px;border-radius:6px;font-size:12px;cursor:pointer}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px}
.pg-green{background:var(--green-bg);color:#4ade80;border:1px solid rgba(74,222,128,0.2)}
.pg-blue{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(74,144,217,0.2)}
.pg-gold{background:rgba(232,197,71,0.12);color:var(--accent);border:1px solid rgba(232,197,71,0.25)}
.pg-gray{background:var(--surface3);color:var(--text2);border:1px solid var(--border)}
.pg-red{background:var(--red-bg);color:var(--red);border:1px solid rgba(224,82,82,0.3)}
.wdots{display:flex;gap:6px;align-items:center}
.wd{width:8px;height:8px;border-radius:50%;background:var(--border2);transition:all 0.2s}
.wd.active{background:var(--accent);width:24px;border-radius:4px}
.wd.done{background:var(--green)}
/* Splits row layout — name | IPI/PRO | role/type | (spacer) | % + remove button.
   The final column houses the % number input and the × remove button together,
   so it needs enough room for both — 130px keeps the % input readable instead
   of cramming it into a 30-40px slot next to the close button. */
.sh{display:grid;grid-template-columns:2fr 1.1fr 0.9fr 0.4fr 130px;gap:6px;padding-bottom:4px}
.sh span{font-size:11px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:0.04em}
.sr{display:grid;grid-template-columns:2fr 1.1fr 0.9fr 0.4fr 130px;gap:6px;align-items:end;margin-bottom:6px}
.ts{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:500;margin-top:6px}
.ts-ok{background:var(--green-bg);color:#4ade80}
.ts-w{background:rgba(232,197,71,0.1);color:var(--accent)}
.ts-e{background:var(--red-bg);color:var(--red)}
.sh2{display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;cursor:pointer;margin-bottom:5px;transition:all 0.12s;background:var(--surface2)}
.sh2:hover{border-color:var(--accent)}
.sh2.picked{border-color:var(--accent);background:rgba(232,197,71,0.06)}
.ta{width:36px;height:36px;border-radius:5px;background:var(--surface3);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px}
.reg-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.reg-row:last-child{border-bottom:none}
.reg-lbl{flex:1;font-size:13px;color:var(--text)}
.reg-lbl small{display:block;font-size:11px;color:var(--text3);margin-top:2px}
.reg-btns{display:flex;gap:4px;flex-shrink:0}
.rb{padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface3);color:var(--text2);font-family:"Outfit",sans-serif;transition:all 0.15s}
.rb.ryes.on{background:var(--green-bg);color:#4ade80;border-color:rgba(74,222,128,0.3)}
.rb.rno.on{background:var(--red-bg);color:var(--red);border-color:rgba(224,82,82,0.3)}
.rb.runsure.on{background:rgba(232,197,71,0.1);color:var(--accent);border-color:rgba(232,197,71,0.3)}
.cf{overflow:hidden;max-height:0;transition:max-height 0.25s ease,opacity 0.2s;opacity:0}
.cf.show{max-height:80px;opacity:1}
/* My Catalog column layout. Header and row MUST share the same template
   or columns visually drift apart. The minmax(0,...) prevents long
   writer lists or ISRC strings from blowing past their fr-share, and
   gap:14px gives breathing room between columns.

   Sizing rationale (post-2026-05 trim): WRITERS + PUBLISHERS columns
   were removed from the table entirely — that information lives in the
   per-row "Show metadata" modal now. The remaining columns get more
   breathing room. ARTIST + WORK lead; Role (MLC) keeps its tight 80px;
   Registration Status holds at 170px for badge wrapping; ACTIONS column
   widens to 320px to fit "Show metadata / Manage registration / + Recording
   / Edit / ×" without truncation. */
/* My Catalog Upgrade Phase 1: a new Registry column lands between
   "Registration status" (the legacy stored tri-state) and the trailing
   Actions column. Reads as a progression — what we asked for, what the
   registry actually says, what to do about it. 110px keeps five small
   chips ([A][B][S][M][F]) plus 4px gaps on one line. The header grid
   and the row grid must stay in lockstep — a half-shifted row signals
   a sync error here, not a row-level bug. */
.cat-hd{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.6fr) 130px 130px 110px 70px 150px 110px 290px;gap:12px;padding:0 14px 8px;border-bottom:1px solid var(--border);font-size:11px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:0.04em}
.cat-hd > span:last-child{text-align:right}
.cat-row{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.6fr) 130px 130px 110px 70px 150px 110px 290px;gap:12px;align-items:start;padding:14px;border-bottom:1px solid var(--border);font-size:13px}
/* Inline Role (MLC) dropdown on each catalog row. Compact — has to fit
   in an 80px column — and styled to look like other catalog chrome
   rather than a stock browser <select>. Options expand to a wider
   dropdown when clicked; the closed select shows just the MLC code. */
.role-mlc-select{
  width:100%;
  padding:5px 6px;
  font-family:'DM Mono',monospace;
  font-size:12px;
  color:var(--text);
  background:var(--surface3);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text3) 50%),linear-gradient(135deg,var(--text3) 50%,transparent 50%);
  background-position:calc(100% - 10px) 50%,calc(100% - 6px) 50%;
  background-size:4px 4px,4px 4px;
  background-repeat:no-repeat;
  padding-right:18px;
}
.role-mlc-select:hover{border-color:var(--accent)}
.role-mlc-select:focus{outline:none;border-color:var(--accent)}
.gap-badges{display:flex;gap:4px;flex-wrap:wrap}
.gb{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:500}
.gb-ok{background:var(--green-bg);color:#4ade80}
.gb-miss{background:var(--red-bg);color:var(--red)}
/* Unknown / not-yet-tracked state — gray, low-key. Distinct from
   "red = missing" (we know it's not registered) and "green = done." */
/* 2026-06-02: quieted from a dashed pill to a low-contrast italic
   inline label. The badge is still clickable (regStatusBadge applies
   cursor:pointer inline when editable), but at rest it stops
   competing visually with the green / red badges and the actual row
   buttons. Hover restores a faint border so it reads as interactive. */
.gb-q{background:transparent;color:var(--text3);border:1px solid transparent;font-style:italic;opacity:0.8}
.gb-q:hover{border-color:rgba(255,255,255,0.10);opacity:1}

/* Progressive MLC lifecycle badges — registered → claimed → matched.
   Distinct from gb-ok/gb-miss (which stay PRO/SXE tri-state) because the
   MLC badge encodes WHERE in the registration lifecycle a work sits, not a
   binary done/not-done. Colour escalates blue → amber → green and the
   ::before pie glyph fills in (◔ → ◑ → ●) so the progression reads without
   relying on colour alone (matches the gb-ok/gb-miss ::before convention).
   "matched" reuses the green done-state palette; "registered"/"claimed" are
   in-progress hues. */
.gb-stage-registered{background:rgba(106,163,255,0.12);color:#6aa3ff;border:1px solid rgba(106,163,255,0.32)}
.gb-stage-claimed{background:rgba(245,159,76,0.12);color:#f59f4c;border:1px solid rgba(245,159,76,0.32)}
.gb-stage-matched{background:var(--green-bg);color:#4ade80;border:1px solid rgba(74,222,128,0.32)}

/* Row overflow menu — collapses Show metadata / Manage registration /
   Edit / Delete behind a single ⋯ button per catalog row. Added
   2026-06-02 to cut the wall-of-buttons density on the Self-Admin
   catalog. The primary "+ Recording" stays inline next to this. */
.cat-row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.row-overflow{position:relative;display:inline-block}
.row-overflow>summary{list-style:none;cursor:pointer;width:30px;height:30px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--text2);font-size:18px;line-height:1;user-select:none;background:transparent}
.row-overflow>summary::-webkit-details-marker{display:none}
.row-overflow:hover>summary{border-color:var(--accent);color:var(--text)}
.row-overflow[open]>summary{background:rgba(255,255,255,0.04);color:var(--text)}
.row-overflow-menu{position:absolute;right:0;top:calc(100% + 4px);background:#1a1a1a;border:1px solid var(--border);border-radius:8px;padding:4px;min-width:180px;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,0.5);display:flex;flex-direction:column;gap:2px}
/* Inside the menu, force the menu-item shape regardless of inline
   styles on the button (admin-row buttons set inline font-size,
   border-color, etc.). !important is targeted at the structural
   properties — color stays inheritable so red destructive labels
   still read as red. */
.row-overflow-menu>button{text-align:left !important;background:transparent !important;border:none !important;padding:8px 12px !important;font-size:13px !important;border-radius:4px !important;color:var(--text);white-space:nowrap;cursor:pointer;width:100%;display:block}
.row-overflow-menu>button:hover{background:rgba(255,255,255,0.05) !important}
.row-overflow-note{padding:8px 12px;font-size:12px;color:var(--text3);font-style:italic;border-top:1px solid var(--border);margin-top:2px}
.ry-hd{display:grid;grid-template-columns:1.5fr 1fr 1fr 0.8fr 0.8fr 70px;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border);font-size:11px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:0.04em}
.ry-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 0.8fr 0.8fr 70px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}

/* Per-work aggregated row (Phase A.2). Each row = one composition with
   total recovered + inline source-mix mini-bars + a small click-affordance.
   Hover reveals the row is clickable; .ry-work-row.active is the
   currently-open drawer source. */
.ry-work-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,2fr) minmax(0,1.2fr) 24px;gap:14px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--border);font-size:13px;cursor:pointer;transition:background 0.12s}
.ry-work-row:hover{background:rgba(255,255,255,0.025)}
.ry-work-row.active{background:rgba(212,166,76,0.06)}
.ry-work-row .ry-work-title{font-weight:500;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ry-work-row .ry-work-meta{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:0.04em;margin-top:3px}
.ry-work-row .ry-work-total{font-family:'DM Mono',monospace;font-size:14px;font-weight:500;color:var(--text);text-align:right;font-feature-settings:'tnum'}
.ry-work-row .ry-work-total .ry-work-pct{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);font-weight:400;letter-spacing:0.04em;margin-top:2px}
.ry-work-row .ry-work-toggle{font-family:'DM Mono',monospace;font-size:14px;color:var(--text3);text-align:center;transition:transform 0.15s,color 0.12s}
.ry-work-row.active .ry-work-toggle{color:var(--accent);transform:rotate(90deg)}

/* Source-mix mini-bars. Stacked horizontal bar showing the proportion
   of a work's total earnings by source. Each segment carries a tooltip
   with the dollar amount + percentage. Used per-work in the by-work
   panel and per-period in the drawer. */
.ry-mix{display:flex;height:6px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,0.04)}
.ry-mix-seg{height:100%;transition:filter 0.12s}
.ry-mix-seg:hover{filter:brightness(1.2)}
.ry-mix-legend{display:flex;flex-wrap:wrap;gap:8px 12px;font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);margin-top:6px;letter-spacing:0.04em}
.ry-mix-legend-item{display:inline-flex;align-items:center;gap:5px}
.ry-mix-legend-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0}

/* Source color tokens — kept consistent across all royalty surfaces so
   BMI is always the same color whether it's in a mini-bar, the drawer
   history table, or a future chart. */
.ry-c-bmi    {background:#e8c547}
.ry-c-ascap  {background:#60a5fa}
.ry-c-sesac  {background:#d4a64c}
.ry-c-gmr    {background:#a78bfa}
.ry-c-mlc    {background:#4ade80}
.ry-c-sxe    {background:#f472b6}
.ry-c-direct {background:#94a3b8}
.ry-c-other  {background:#64748b}

/* Drawer — opens below the by-work panel when a row is clicked. Carries
   the full per-line-item history for that single work. */
.ry-drawer-card{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:10px;padding:18px 20px}
.ry-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed rgba(255,255,255,0.1)}
.ry-drawer-head .ry-drawer-title{font-size:16px;font-weight:500;color:var(--text)}
.ry-drawer-head .ry-drawer-sub{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:0.06em;text-transform:uppercase;margin-top:4px}
.ry-drawer-head .ry-drawer-close{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;padding:0 4px;line-height:1}
.ry-drawer-head .ry-drawer-close:hover{color:var(--text)}
.ry-drawer-line{display:grid;grid-template-columns:90px minmax(0,1.4fr) minmax(0,0.9fr) minmax(0,0.9fr) auto;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:12px}
.ry-drawer-line:last-child{border-bottom:none}
.ry-drawer-line .ry-l-src{font-family:'DM Mono',monospace;font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:0.06em}
.ry-drawer-line .ry-l-label{color:var(--text2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ry-drawer-line .ry-l-period{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3)}
.ry-drawer-line .ry-l-attr{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3)}
.ry-drawer-line .ry-l-amt{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;color:var(--text);text-align:right;font-feature-settings:'tnum'}

/* "Freshly parsed — Doom Tide hasn't reviewed yet" caveat chip on
   Self-Admin auto-published line items. Quiet until you read it. */
.ry-fresh-chip{display:inline-block;font-family:'DM Mono',monospace;font-size:9px;color:var(--text3);letter-spacing:0.06em;text-transform:uppercase;border:1px solid rgba(255,255,255,0.1);padding:1px 5px;border-radius:3px;margin-left:6px}

/* Phase B.2 — Signals row. Each signal is its own card with a colored
   left rail (amber for anomaly, green for recovery, red for missing).
   Stack vertically; rendered only when there's something to surface. */
.ry-signal{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:rgba(255,255,255,0.025);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;border-left-width:3px;border-left-style:solid}
.ry-signal:last-child{margin-bottom:0}
.ry-signal-amber{border-left-color:var(--accent)}
.ry-signal-green{border-left-color:#4ade80}
.ry-signal-red{border-left-color:#e05252}
.ry-signal-icon{font-family:'DM Mono',monospace;font-size:14px;color:var(--accent);flex-shrink:0;width:18px;line-height:1.5;text-align:center}
.ry-signal-green .ry-signal-icon{color:#4ade80}
.ry-signal-red   .ry-signal-icon{color:#e05252}
.ry-signal-body{flex:1;min-width:0}
.ry-signal-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:3px}
.ry-signal-detail{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);letter-spacing:0.04em;line-height:1.5}

/* Phase B.1 — Chart styling. Stacked source bars per quarter. */
.ry-chart-bar{cursor:default;transition:opacity 0.12s}
.ry-chart-bar:hover{opacity:0.85}
.ry-chart-axis{font-family:'DM Mono',monospace;font-size:9px;fill:var(--text3);letter-spacing:0.04em}
.ry-chart-grid{stroke:rgba(255,255,255,0.04);stroke-width:0.5}
.ry-chart-tip{position:absolute;background:#0a0a0a;border:1px solid var(--accent);border-radius:6px;padding:8px 12px;font-family:'DM Mono',monospace;font-size:11px;color:var(--text);pointer-events:none;z-index:10;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,0.5)}
.inv-hd{display:grid;grid-template-columns:1.2fr 1fr 0.8fr 1fr 90px 100px;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border);font-size:11px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:0.04em}
.inv-row{display:grid;grid-template-columns:1.2fr 1fr 0.8fr 1fr 90px 100px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:1.25rem}
.sc{background:var(--surface3);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.sv{font-family:"Outfit",serif;font-size:26px;color:var(--text);margin-top:4px}
.sl{font-size:11px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:0.05em}
.cp{background:var(--surface3);border:1px solid var(--border);border-radius:8px;padding:1rem;font-family:"DM Mono",monospace;font-size:11px;line-height:1.8;color:var(--text2);max-height:200px;overflow-y:auto;white-space:pre-wrap}
.er{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;background:var(--surface3)}
.ei{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.divider{height:1px;background:var(--border);margin:1rem 0}
.ib{border-radius:8px;padding:10px 14px;font-size:12px;line-height:1.6;margin-bottom:12px}
.ib-blue{background:var(--blue-bg);border:1px solid rgba(74,144,217,0.2);color:var(--blue)}
.ib-green{background:var(--green-bg);border:1px solid rgba(74,222,128,0.15);color:#4ade80}
.ib-amber{background:rgba(232,197,71,0.08);border:1px solid rgba(232,197,71,0.2);color:var(--accent)}

/* Migration intake radio-pill styling. Compact, pill-shaped radio
   buttons that work in the dense form layout of the migration intake
   section on First Moves. Style mirrors the chip-pick affordance used
   elsewhere in the app. */
.mi-radio-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text2); cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; }
.mi-radio-pill input[type="radio"] { accent-color: var(--accent); }
.mi-radio-pill:hover { color: var(--text); border-color: rgba(232,197,71,0.4); }
.mi-radio-pill input[type="radio"]:checked + span { color: var(--accent); font-weight: 500; }
.mi-radio-pill:has(input[type="radio"]:checked) { border-color: var(--accent); background: rgba(232,197,71,0.08); }

/* Per-work selection rows in the migration works picker. Each row is
   a checkbox + title + meta line. Scrollable so a 200-song catalog
   doesn't push the rest of the page off-screen. */
.mi-works-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: rgba(0,0,0,0.18); }
.mi-work-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background 0.12s; }
.mi-work-row:last-child { border-bottom: none; }
.mi-work-row:hover { background: rgba(255,255,255,0.025); }
.mi-work-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.mi-work-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mi-work-title { font-size: 13px; color: var(--text); font-weight: 500; }
.mi-work-meta { font-size: 11px; color: var(--text3); }

/* Tier-gating utility classes. The body element carries either
   .tier-admin or .tier-self based on ENTITY.tier (toggled in
   applyEntityTierNav). Page elements that should only appear for one
   tier wear the matching utility class and disappear on the other
   tier without needing per-page JS. Use sparingly — operator-only
   admin tools have their own visibility paths via #app.is-admin or
   the nav-level gates. */
body.tier-self  .full-admin-only { display: none !important; }
body.tier-admin .self-admin-only { display: none !important; }
.ib-red{background:var(--red-bg);border:1px solid rgba(224,82,82,0.3);color:var(--red)}
.tab-row{display:flex;gap:4px;margin-bottom:1rem}
.tab-btn{font-size:12px;padding:5px 13px;border-radius:20px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface3);color:var(--text2);font-family:"Outfit",sans-serif;transition:all 0.15s}
.tab-btn.on{background:var(--accent);color:#000;border-color:var(--accent)}
.rt-opt{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface3);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);transition:all 0.15s}
.rt-opt:hover{border-color:var(--accent)}
.rt-opt input[type="radio"]{accent-color:var(--accent);margin:0}
.manual-badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:4px;background:rgba(232,197,71,0.12);color:var(--accent);border:1px solid rgba(232,197,71,0.3);font-weight:500;letter-spacing:0.04em;text-transform:uppercase;margin-left:6px}
.empty{text-align:center;padding:3rem;color:var(--text3)}

/* ============================================================================
   Brand UI v4 — hand-drawn icons + brand-voiced empty states.
   ----------------------------------------------------------------------------
   Two paired primitives:

     .dt-hand-icon  — wraps any inline SVG to give it a more organic,
                       hand-drawn feel. Thicker stroke, round caps/joins,
                       slight rotation on hover. Use on nav icons + any
                       interactive icon that should feel less geometric.

     .dt-empty      — opinionated empty-state container. Larger icon,
                       brand-voiced headline + forensic body copy.
                       Replaces the generic .empty class for empty
                       states that deserve actual presence (not just
                       "no data"). Use sparingly — for primary
                       surfaces, not for every list.

   Plus a small library of hand-drawn empty-state SVG icons usable
   anywhere via the .dt-icon-* family.
============================ */

/* Give existing inline SVG nav icons a chunkier, hand-drawn feel
   without redrawing every path. The trick: thicker stroke, round
   joins + caps, subtle hover wobble. Reads as deliberate rather than
   the default Heroicons precision. */
.sidebar .nl svg {
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sidebar .nl:hover svg {
  transform: rotate(-2deg) scale(1.05);
}
.sidebar .nl.active svg {
  stroke-width: 2.2 !important;
}

/* Larger interactive .dt-hand-icon for places we want the hand-drawn
   feel even more obvious (modal headers, empty-state hero icons,
   marketing illustrations). */
.dt-hand-icon {
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dt-hand-icon:hover { transform: rotate(-2deg) scale(1.06); }
.dt-hand-icon-lg { width: 48px; height: 48px; stroke-width: 2; }
.dt-hand-icon-xl { width: 72px; height: 72px; stroke-width: 1.8; }

/* ── .dt-empty — brand-voiced empty state ───────────────────────── */
/* Replaces the generic .empty for primary surfaces. The icon is
   bigger (48-72px), the headline is forensic, and the copy explains
   what lands here when something does — no "Get started by..."
   slop, no "Add your first..." sweetener. */
.dt-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--text2);
  max-width: 480px;
  margin: 0 auto;
}
.dt-empty-icon {
  display: inline-block;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  color: var(--text3);
  /* Slight wobble on the icon every 8s — alive without being noisy. */
  animation: dt-empty-breathe 6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes dt-empty-breathe {
  0%, 100% { transform: rotate(-1.5deg) scale(1); opacity: 0.6; }
  50%      { transform: rotate(1.5deg) scale(1.04); opacity: 0.85; }
}
.dt-empty-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.3;
}
.dt-empty-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text2);
  max-width: 42ch;
  margin: 0 auto 14px;
}
.dt-empty-cta {
  margin-top: 10px;
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .dt-empty-icon { animation: none; transform: none; }
}
.empty-icon{font-size:40px;display:block;margin-bottom:10px}
.sv.red{color:var(--red)}
.adm-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 100px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px}
.adm-client-row{display:grid;grid-template-columns:minmax(380px,2.2fr) 0.7fr 0.4fr 0.5fr 0.8fr 0.7fr 0.6fr;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}
.rost-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.rost-filters{display:flex;gap:6px;flex-wrap:wrap}
.pill-filter{padding:5px 12px;border-radius:14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--text2);font-size:12px;cursor:pointer;font-family:inherit;transition:all 0.15s}
.pill-filter:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.pill-filter.active{background:rgba(232,197,71,0.18);border-color:rgba(232,197,71,0.5);color:var(--accent)}
.pill-filter .pf-count{margin-left:4px;font-size:11px;opacity:0.8}
.rost-search{width:100%;padding:8px 12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#fff;font-family:inherit;font-size:13px;outline:none;margin-bottom:12px}
.rost-search:focus{border-color:rgba(232,197,71,0.5)}
/* Operator catalog Group-by segmented control (Work / Artist / Songwriter) */
.cat-group-btn{font-size:11px;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-family:'Outfit',sans-serif}
.cat-group-btn:hover{color:#fff}
.cat-group-btn.active{background:var(--accent);color:#0a0a0a;border-color:var(--accent);font-weight:500}
.adm-stmt-row{display:grid;grid-template-columns:1.4fr 1fr 0.8fr 0.7fr 0.5fr 1.1fr;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}

/* Statement Queue two-path explainer. Sits above the queue rows and
   makes the Generate-invoice vs. Skip-invoice choice equally
   prominent so the operator never feels stuck on a "must invoice"
   rail. Left border in amber to tie it visually to the queue card
   header. Renders the same regardless of upload origin — every row
   below has both paths. */
.stmt-queue-paths{margin:0 0 14px;padding:12px 14px;background:rgba(212,166,76,0.04);border:1px solid rgba(212,166,76,0.18);border-left:3px solid var(--accent);border-radius:6px}
.stmt-queue-paths .stmt-path-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px}
.stmt-queue-paths .stmt-path-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){.stmt-queue-paths .stmt-path-grid{grid-template-columns:1fr;gap:10px}}
.stmt-queue-paths .stmt-path-name{font-size:13px;font-weight:600;margin-bottom:3px}
.stmt-queue-paths .stmt-path-name-invoice{color:var(--accent)}
.stmt-queue-paths .stmt-path-name-skip{color:#7fb3d5}
.stmt-queue-paths .stmt-path-body{font-size:11.5px;line-height:1.45;color:var(--text2)}

/* Master Edit pill on the right side of each Statements Archive
   row. Single button that opens the metadata-edit modal so the
   operator can correct the period, override the gross, or rename
   the file label in one place. Quiet by default; brightens on row
   hover so it's discoverable without shouting from every row.
   Pill-shaped to read as an action affordance, not a column value. */
.arch-edit-btn{background:transparent;border:1px solid var(--border);color:var(--text3);cursor:pointer;font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;padding:3px 9px;line-height:1;border-radius:999px;transition:color .12s,background .12s,border-color .12s}
.arch-row:hover .arch-edit-btn{color:var(--text2);border-color:var(--border-2)}
.arch-edit-btn:hover{color:var(--accent) !important;background:rgba(212,166,76,0.08) !important;border-color:rgba(212,166,76,0.4) !important}

/* Statement edit modal — three-field form for period, gross
   override, and display name. Mirrors the spacing language used by
   the Operator Upload modal so the two feel like the same product. */
.stmt-edit-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.stmt-edit-modal-card{background:#0a0a0a;border:1px solid var(--border);border-radius:12px;max-width:520px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.stmt-edit-modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.stmt-edit-modal-body{padding:18px 22px;overflow-y:auto;flex:1}
.stmt-edit-modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.stmt-edit-label{display:block;font-size:11px;font-family:'DM Mono',monospace;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px}
.stmt-edit-help{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.5}
.stmt-edit-input{width:100%;padding:10px 12px;background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;font-family:inherit;box-sizing:border-box}
.stmt-edit-current{font-size:11px;color:var(--text3);margin-top:4px;font-family:'DM Mono',monospace}

/* Skip-invoice button (row-level). Co-equal to Generate invoice —
   muted teal-blue tint, real readable contrast (not the previous
   ghost-on-ghost look). Same .secondary.sm base; this class layers on
   color so it reads as "second path, not afterthought." */
.stmt-skip-btn{background:rgba(127,179,213,0.08) !important;border-color:rgba(127,179,213,0.32) !important;color:#7fb3d5 !important;font-weight:500}
.stmt-skip-btn:hover{background:rgba(127,179,213,0.16) !important;border-color:rgba(127,179,213,0.5) !important;color:#a8cbe0 !important}

/* Statements Archive row. Seven columns: uploaded date / client /
   filename / source pill / period / status pill / gross. Header row
   shares the same grid via .arch-hd. */
.arch-row{display:grid;grid-template-columns:90px 1fr 1.4fr 80px 90px 100px 100px 64px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}
.arch-row:hover:not(.arch-hd){background:rgba(255,255,255,0.025)}
.arch-pill-src{display:inline-block;font-family:'DM Mono',monospace;font-size:9px;color:#0a0a0a;letter-spacing:0.06em;text-transform:uppercase;padding:2px 6px;border-radius:3px;font-weight:500}
.arch-pill-status{display:inline-block;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.06em;text-transform:uppercase;padding:1px 6px;border-radius:3px;border:1px solid currentColor;white-space:nowrap}
/* Onboarding checklist */
.ob-step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.ob-step:last-child{border-bottom:none}
.ob-num{width:28px;height:28px;border-radius:50%;background:var(--surface3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--text2);flex-shrink:0;margin-top:2px;transition:all 0.2s}
.ob-num.done{background:var(--green);border-color:var(--green);color:#fff}
.ob-content{flex:1}
.ob-title{font-size:14px;font-weight:500;margin-bottom:4px}
.ob-desc{font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:8px}
/* Statement upload */
.upload-zone{border:2px dashed var(--border2);border-radius:10px;padding:2rem;text-align:center;color:var(--text3);cursor:pointer;transition:all 0.2s;margin-bottom:12px}
.upload-zone:hover{border-color:var(--accent);color:var(--text2)}
.upload-zone.dragover{border-color:var(--accent);background:rgba(232,197,71,0.04)}
.stmt-hd{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,0.9fr) minmax(0,0.7fr) minmax(0,0.7fr) 150px 90px 56px;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--border);font-size:11px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:0.04em}
.stmt-hd > span:last-child{text-align:right}
.stmt-hd span{user-select:none}
.stmt-hd .sortable{cursor:pointer}
.stmt-hd .sortable:hover{color:var(--text)}
.stmt-hd .sort-active{color:var(--accent)}
.stmt-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,0.9fr) minmax(0,0.7fr) minmax(0,0.7fr) 150px 90px 56px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px}
.stmt-row > div:last-child{text-align:right}
.stmt-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text2);font-size:11px;font-weight:500;cursor:pointer;transition:all .12s}
.stmt-chip:hover{background:rgba(255,255,255,0.07);color:var(--text)}
.stmt-chip.active{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.stmt-chip-group{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.stmt-chip-label{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3);margin-right:4px;font-weight:600}
/* Roadmap */
.rm-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.rm-item:last-child{border-bottom:none}
.rm-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:2px}
.rm-ok{background:var(--green-bg)}
.rm-gap{background:var(--red-bg)}
.rm-q{background:rgba(232,197,71,0.1)}
.rm-content .rm-title{font-size:13px;font-weight:500;margin-bottom:2px}
.rm-content .rm-detail{font-size:12px;color:var(--text2);line-height:1.5}
.rm-content .rm-action{font-size:11px;color:var(--accent);margin-top:4px}
/* Accounting schedule */
.sched-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.sched-row:last-child{border-bottom:none}
/* Catalog rows — stack as cards on narrow-desktop / shared-screen
   widths too (Google Meet shares, half-screen Chrome windows, iPad
   landscape). The 7-column grid only reads well above ~1000px; below
   that the writers + publishers columns squash. Hiding the column
   header and stacking each row as a card matches the phone treatment
   but kicks in earlier. */
@media(max-width:1000px) and (min-width:641px){
  .cat-hd{display:none}
  .cat-row{display:flex !important;flex-direction:column;align-items:stretch;gap:10px;padding:14px;background:rgba(255,255,255,0.02);border-radius:10px;margin-bottom:8px}
}
@media(max-width:640px){
  .pg{grid-template-columns:1fr}
  /* Sidebar becomes a slide-in overlay on mobile instead of being hidden.
     Without this, users had no way to navigate the app from a phone — the
     hamburger menu button just showed a "coming soon" alert. The sidebar
     slides in from the left when .sidebar.open is set on it (toggled by
     the hamburger button). A backdrop overlay sits between the sidebar
     and the content so the user can tap outside to close. */
  .sidebar{display:flex;position:fixed;top:0;left:0;width:280px;max-width:85vw;height:100vh;height:100dvh;transform:translateX(-100%);transition:transform 0.25s ease;z-index:1000;overflow-y:auto;padding-top:60px}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:999;backdrop-filter:blur(2px)}
  .sidebar-backdrop.show{display:block}
  .content{padding:1rem}
  .g2,.g3{grid-template-columns:1fr}
  /* Stat grid stacks single column on phones. The 3-card strip (Total /
     Fee / Net) wastes vertical balance when split into a 2+1 row layout,
     and at narrow widths the dollar amounts get cramped against the
     labels. Single column reads cleaner and the strip is short anyway. */
  .stat-grid{grid-template-columns:1fr}
  #auth-screen{justify-content:flex-start;padding-top:2rem}
  .auth-box{margin-bottom:1rem}
  /* Catalog table → vertical card stack on mobile. The 7-column grid
     overflows the viewport on phones; stacking vertically with
     row-by-row labels gives back legibility. Hide the table header
     since headers don't make sense once rows are cards.
     Note: this is the phone-width override (<640px). A separate
     wider-breakpoint override below stacks the catalog rows on
     narrow desktop / Google-Meet-share widths too. */
  .cat-hd{display:none}
  .cat-row{display:flex !important;flex-direction:column;align-items:stretch;gap:10px;padding:14px;background:rgba(255,255,255,0.02);border-radius:10px;margin-bottom:8px}
  /* Same treatment for the admin client roster rows. */
  .adm-client-row{display:flex !important;flex-direction:column;align-items:stretch;gap:8px;padding:14px;background:rgba(255,255,255,0.02);border-radius:10px;margin-bottom:8px}
  .adm-row{display:flex !important;flex-direction:column;align-items:stretch;gap:8px;padding:14px;background:rgba(255,255,255,0.02);border-radius:10px;margin-bottom:8px}
  /* Money-page tables → vertical card stacks on mobile. The 5-6 column
     grids (Statements, Royalties, Invoices) crush at phone widths and
     turn dense data into 2-character columns. Card-stacking each row
     restores legibility. Headers are hidden because column headers
     don't translate to cards; instead each cell renders its own small
     uppercase label via data-label attributes set in the row JS. */
  .stmt-hd, .ry-hd, .inv-hd { display: none; }
  .stmt-row, .ry-row, .inv-row {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    margin-bottom: 8px;
    border-bottom: none;
    align-items: stretch;
  }
  /* Per-cell label above each value. Tiny uppercase, brand-typical. */
  .stmt-row > div[data-label]::before,
  .ry-row > div[data-label]::before,
  .inv-row > div[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-bottom: 4px;
  }
  /* Invoice action button (Pay now / Retry / Receipt) is the highest-
     leverage touch target on the page. Make it full-width and 44px+
     tall on mobile so it's an obvious, easy tap. */
  .inv-row > .inv-action {
    margin-top: 4px;
  }
  .inv-row > .inv-action > a,
  .inv-row > .inv-action > button {
    width: 100%;
    display: block;
    text-align: center;
    padding: 12px 16px;
    min-height: 44px;
    box-sizing: border-box;
    font-size: 14px;
  }
  /* Statements search input — was a fixed 170px, which forced the rest
     of the toolbar to crowd. Full-width on mobile, sits below the title
     block via parent flex-wrap. */
  #stmt-search { width: 100% !important; }
  /* Hide the "or drag and drop" hint on touch devices — drag-drop
     doesn't apply on phones, just clutters the upload zone. */
  .upload-or-drag { display: none; }
  /* Sprint 8 — prevent iOS Safari from auto-zooming into focused inputs.
     iOS triggers zoom when an input's effective font-size is under 16px.
     Desktop styles are 13–14px (correct for cursor reads); mobile bumps
     to 16px so taps don't yank the viewport in. */
  .afield input,
  .pf input,
  .pf select,
  .pf textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
  }
  /* Royalty source breakdown row — let the chip strip wrap so the
     Clear filters button doesn't get pushed off-screen. */
  #ry-source-breakdown { flex: 1; min-width: 0; }
  #ry-source-breakdown + button { margin-top: 0; }
  /* Agreement card header — pill wraps below title block on narrow
     screens so long status text doesn't overlap the title. */
  #agreement-status-card > div:first-child { flex-wrap: wrap; }
  /* Agreement body download buttons (Master agreement, Schedule A) —
     allow them to break to two rows on phones rather than squish into
     a one-row strip of half-buttons. */
  #agreement-status-body button,
  #agreement-status-body a.secondary,
  #agreement-status-body a.primary {
    flex: 1;
    min-width: 140px;
  }
  /* Modals become full-screen on mobile so they're easier to interact
     with — fixed-width centered overlays get cut off and force horizontal
     scrolling on phones. */
  .modal-overlay .modal{max-width:100% !important;width:100% !important;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0;display:flex;flex-direction:column}
  .modal-overlay .modal-body{flex:1;overflow-y:auto}
  /* Touch target sizing — buttons should be at least 44px tall on mobile.
     Apply to common button classes; per-element overrides can shrink
     where appropriate. */
  button.primary,button.secondary{min-height:44px}
  .nl{min-height:44px}
  /* Bottom tab bar — mobile-only primary nav. */
  .bottom-tabs{display:flex;align-items:stretch;position:fixed;left:0;right:0;bottom:0;background:rgba(8,8,10,0.92);border-top:1px solid rgba(255,255,255,0.08);z-index:60;padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  /* Reserve space at the bottom of the content area so the fixed tab
     bar doesn't cover real content. Adds ~70px plus safe-area inset. */
  .content{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)) !important}
  /* When viewing as a client (yellow banner sticky at top), the Book a
     meeting button needs to nudge above the new tab bar so it stays
     visible. Already moved to bottom-right in MVP mobile; bump it up. */
  #book-meeting-btn{bottom:calc(78px + env(safe-area-inset-bottom, 0px)) !important}
  /* Log a performance modal — the date/time row and address row use
     tight column grids that are unreadable on phones (Start/End time
     overlap, City/State/Zip get pinched to single characters). Restack
     for mobile: date full-width with the two time fields sharing a
     row below; address full-width, city full-width, state + zip
     side-by-side. */
  .ap-grid-datetime{grid-template-columns:1fr 1fr !important}
  .ap-grid-datetime > .pf:first-child{grid-column:1 / -1 !important}
  .ap-grid-address{grid-template-columns:1fr 1fr !important}
  .ap-grid-address > .pf:nth-child(1){grid-column:1 / -1 !important}
  .ap-grid-address > .pf:nth-child(2){grid-column:1 / -1 !important}
}
.mobile-header{display:none}
/* Sprint 6: tap feedback for that native feel. Disable iOS's default
   blue tap highlight (replaced by explicit :active styles below) and
   remove the 300ms click delay via touch-action:manipulation. */
button, a, .nl, .cat-row, .adm-row, .stmt-row, .ry-row, .inv-row, .btab {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Visible active state — a tiny scale-down + brightness shift so the
   tap registers instantly instead of feeling laggy. Applied broadly
   but only to the interactive surfaces (not to text or static cards). */
button:active, a.primary:active, a.secondary:active {
  transform: scale(0.97);
  transition: transform 0.05s;
}
.nl:active, .cat-row:active, .adm-row:active, .stmt-row:active, .ry-row:active, .inv-row:active {
  background: rgba(255,255,255,0.06);
  transition: background 0.05s;
}
/* Bottom tab bar (Sprint 6). Hidden by default; shown on mobile only.
   Fixed to the viewport bottom with safe-area padding for iPhone home
   indicator. */
.bottom-tabs{display:none}
.btab{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.48);font-family:'Outfit',sans-serif;font-size:10px;font-weight:500;padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:color 0.15s;flex:1;-webkit-tap-highlight-color:transparent;touch-action:manipulation;letter-spacing:0.02em;min-height:54px}
.btab svg{width:22px;height:22px;display:block;flex-shrink:0}
.btab.active{color:var(--accent)}
.btab:active{transform:scale(0.94);transition:transform 0.05s}
@media(max-width:640px){
  /* Mobile header — pushed down past the iPhone status bar so the
     Doom Tide logo and hamburger don't collide with the iOS time,
     signal, wifi, and battery indicators. env(safe-area-inset-top)
     accounts for notch/Dynamic Island height; the extra +8px gives
     visual breathing room so the header doesn't feel pasted against
     the status bar. */
  .mobile-header{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top, 0px) + 10px) 1rem 12px;background:#000;border-bottom:1px solid #1a1a1a;position:sticky;top:0;z-index:55}
  /* Mobile top-bar wordmark — bumped 36px → 52px. (Drop-shadow trick
     reverted — exposed source-PNG edge artifact at scale.) */
  .mobile-logo{height:52px;filter:invert(1)}
  .mobile-menu-btn{background:none;border:none;color:#fff;font-size:26px;cursor:pointer;padding:4px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;line-height:1}
  /* On mobile, reposition the universal "Book a meeting" button from
     top-right to bottom-right so it doesn't fight with the hamburger
     for that corner. Same affordance, just relocated — a floating
     bottom-right pill is a familiar mobile pattern (chat widgets,
     compose buttons) so it still feels intentional. */
  #book-meeting-btn{top:auto !important;bottom:18px !important;right:14px !important;left:auto !important;font-size:11px !important;padding:8px 13px !important}
}


.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:1000;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.modal-overlay.active{display:flex}
.modal-box{background:#1c1c1c;border:1px solid #2a2a2a;border-radius:14px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;padding:24px}
.modal-hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.modal-title{font-size:18px;font-weight:500;color:#fff;margin-bottom:4px}
.modal-sub{font-size:12px;color:var(--text3);font-family:monospace}
.modal-close{background:none;border:none;color:var(--text2);font-size:22px;cursor:pointer;padding:0;line-height:1}
.modal-section{margin-bottom:18px}
.modal-section-title{font-size:11px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px}
/* Product/Market-Fit survey controls (#pmf-modal). */
.pmf-opt{display:block;padding:11px 13px;margin-bottom:8px;background:var(--surface3);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text);cursor:pointer}
.pmf-opt:hover{border-color:var(--accent)}
.pmf-opt input{margin-right:9px}
.pmf-q{display:block;font-size:12px;color:var(--text2);margin-bottom:6px}
.pmf-ta{width:100%;box-sizing:border-box;padding:9px 11px;background:var(--surface3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:13px;line-height:1.5;resize:vertical;outline:none}
.pmf-ta:focus{border-color:var(--accent)}
.writer-row{display:grid;grid-template-columns:2fr 1.4fr 70px 50px;gap:6px;margin-bottom:6px;align-items:center}
.writer-row input,.writer-row select{padding:7px 10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:#fff;font-size:12px;font-family:inherit;outline:none}
.writer-row .rm-w{background:none;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:0}
.writer-row .rm-w:hover{color:var(--red)}
.add-w-btn{background:transparent;border:1px dashed rgba(255,255,255,0.15);color:var(--text2);padding:8px;border-radius:6px;width:100%;font-size:12px;cursor:pointer;margin-top:4px}
.add-w-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Per-recording editor inside the Edit Work modal. One block per
   recording — small header strip with version label / primary badge /
   row controls, then a 2-column grid of fields underneath. Stacks
   vertically so editing one ISRC doesn't visually crowd the others. */
.rec-row{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.rec-row-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.rec-row-head .rec-label{font-size:11px;font-family:'DM Mono',monospace;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-right:auto}
.rec-row-head .rec-primary-badge{font-size:10px;font-family:'DM Mono',monospace;color:var(--accent);background:rgba(232,197,71,0.10);border:1px solid rgba(232,197,71,0.30);border-radius:4px;padding:2px 6px;text-transform:uppercase;letter-spacing:0.06em}
.rec-row-head .rec-action{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);color:var(--text2);border-radius:4px;padding:3px 8px;font-size:10px;font-family:'DM Mono',monospace;cursor:pointer;text-transform:uppercase;letter-spacing:0.04em}
.rec-row-head .rec-action:hover{border-color:var(--accent);color:var(--accent)}
.rec-row-head .rec-action.danger:hover{border-color:rgba(224,82,82,0.5);color:var(--red)}
.rec-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rec-row-grid .rec-field label{display:block;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:3px}
.rec-row-grid .rec-field input{width:100%;padding:7px 10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:#fff;font-size:12px;font-family:inherit;outline:none;box-sizing:border-box}
.rec-row-grid .rec-field input.mono{font-family:'DM Mono',monospace;text-transform:uppercase}
.rec-row-grid .rec-field.span-2{grid-column:1 / span 2}

/* Royalty chart granularity toggle (Month / Quarter / Year). Segmented
   control styling, matching the operator-page section toggles. */
.ry-chart-grain{display:inline-flex;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.ry-chart-grain .ry-grain-btn{background:transparent;border:0;color:var(--text2);font-size:11px;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:0.06em;padding:5px 11px;cursor:pointer;transition:background .12s,color .12s;border-right:1px solid var(--border)}
.ry-chart-grain .ry-grain-btn:last-child{border-right:0}
.ry-chart-grain .ry-grain-btn:hover{color:var(--text)}
.ry-chart-grain .ry-grain-btn.active{background:rgba(232,197,71,0.10);color:var(--accent)}

.modal-footer{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--border)}
.modal-pf{display:flex;flex-direction:column;gap:4px}
.modal-pf label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em}
.modal-pf input{padding:9px 12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:#fff;font-size:13px;font-family:inherit;outline:none}
.modal-pf input:focus{border-color:var(--accent)}
.reg-toggle{display:flex;gap:4px}
.reg-toggle button{flex:1;padding:6px 10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:var(--text2);font-size:11px;cursor:pointer}
.reg-toggle button.active{background:rgba(232,197,71,0.15);color:var(--accent);border-color:rgba(232,197,71,0.3)}
.reg-row-edit{display:grid;grid-template-columns:1fr 200px;gap:12px;margin-bottom:8px;align-items:center}
.reg-row-edit > div:first-child{font-size:12px;color:var(--text2)}
.reg-row-edit > div:first-child small{display:block;font-size:10px;color:var(--text3);margin-top:1px}

/* ===== Royalty Reckoning leads v2 — page-scoped styles (.page-v2) =====
   Originally an inline <style> block co-located with the page markup;
   moved here during the CSS extraction. The .page-v2 prefix scopes
   every selector so these styles don't leak. */
          .page-v2 { font-family: 'Outfit', sans-serif; }
          .page-v2 .v2-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
          .page-v2 .v2-crumb { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
          .page-v2 .v2-crumb span { color: var(--text2); }
          .page-v2 .v2-h1 { font-size: 30px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); margin: 0; }
          .page-v2 .v2-h1 em { color: var(--accent); font-style: italic; font-weight: 400; font-family: inherit; font-size: 1em; letter-spacing: inherit; }
          .page-v2 .v2-meta { text-align: right; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text3); line-height: 1.6; letter-spacing: 0.04em; }
          .page-v2 .v2-meta strong { color: var(--text2); font-weight: 500; }
          .page-v2 .v2-pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; margin-right: 4px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: v2-pulse 1.8s infinite; }
          @keyframes v2-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

          /* Operator hero — "money you've helped collect for clients." Big
             receipts-over-slogans number that updates every refresh, gated
             to operator + assigned-tactician views. Amber-bordered to
             match the rest of the operator surface; the number itself
             uses Outfit italic at large size for the same celebratory-
             but-restrained feel the page titles have. Milestone progress
             bar gives the operator something concrete to climb toward. */
          .page-v2 .adm-hero { background: linear-gradient(135deg, rgba(212,166,76,0.08) 0%, rgba(212,166,76,0.02) 100%); border: 1px solid rgba(212,166,76,0.28); border-radius: 12px; padding: 22px 26px; margin-bottom: 18px; position: relative; overflow: hidden; }
          .page-v2 .adm-hero::before { content:''; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); opacity:0.4; }
          .page-v2 .adm-hero-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
          .page-v2 .adm-hero-value { font-family: 'Outfit', sans-serif; font-style: italic; font-weight: 500; font-size: 48px; line-height: 1; color: var(--text); letter-spacing: -0.02em; font-feature-settings: 'tnum'; margin-bottom: 10px; }
          .page-v2 .adm-hero-meta { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text2); letter-spacing: 0.04em; }
          .page-v2 .adm-hero-tier { color: var(--accent); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
          .page-v2 .adm-hero-sep { color: var(--text3); margin: 0 8px; }
          .page-v2 .adm-hero-next { color: var(--text3); }
          .page-v2 .adm-hero-bar { margin-top: 12px; height: 4px; background: rgba(255,255,255,0.04); border-radius: 999px; overflow: hidden; }
          .page-v2 .adm-hero-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #f0c878); border-radius: 999px; transition: width 0.4s ease; width: 0%; }
          .page-v2 .adm-hero-split { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
          .page-v2 .adm-hero-splitbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.04); }
          .page-v2 .adm-hero-splitbar-full { background: #4ade80; transition: width 0.4s ease; width: 0%; }
          .page-v2 .adm-hero-splitbar-self { background: var(--accent); transition: width 0.4s ease; width: 0%; }
          .page-v2 .adm-hero-split-tiles { display: flex; gap: 12px; margin-top: 14px; }
          .page-v2 .adm-hero-split-tile { flex: 1; }
          .page-v2 .adm-hero-split-l { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
          .page-v2 .adm-hero-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
          .page-v2 .adm-hero-dot.full { background: #4ade80; }
          .page-v2 .adm-hero-dot.self { background: var(--accent); }
          .page-v2 .adm-hero-split-v { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 26px; line-height: 1; color: var(--text); letter-spacing: -0.01em; font-feature-settings: 'tnum'; }
          .page-v2 .adm-hero-split-d { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text3); letter-spacing: 0.04em; margin-top: 6px; }
          @media (max-width: 720px) {
            .page-v2 .adm-hero-value { font-size: 36px; }
            .page-v2 .adm-hero { padding: 18px 18px; }
          }

          .page-v2 .v2-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
          .page-v2 .v2-kpi { background: var(--brand,#0a0a0a); padding: 14px 16px; }
          .page-v2 .v2-kpi-l { font-size: 9px; font-weight: 600; color: var(--text3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
          .page-v2 .v2-kpi-v { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 22px; letter-spacing: -0.015em; font-feature-settings: 'tnum'; color: var(--text); }
          .page-v2 .v2-kpi-d { font-size: 10px; color: var(--text3); margin-top: 2px; font-family: 'DM Mono', monospace; }
          .page-v2 .v2-kpi-d.up { color: #4ade80; }

          .page-v2 .v2-note { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-left: 3px solid #60a5fa; border-radius: 0 8px 8px 0; padding: 13px 16px; margin-bottom: 18px; }
          .page-v2 .v2-note-l { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; color: #60a5fa; text-transform: uppercase; margin-bottom: 4px; }
          .page-v2 .v2-note-b { font-size: 13px; line-height: 1.55; color: var(--text2); max-width: 80ch; font-style: italic; font-weight: 300; }

          .page-v2 .v2-filters { display: flex; gap: 7px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
          .page-v2 .v2-chip { font-family: 'DM Mono', monospace; font-size: 11px; padding: 5px 10px; border-radius: 4px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: var(--text2); cursor: pointer; transition: all 0.12s; letter-spacing: 0.02em; }
          .page-v2 .v2-chip:hover { border-color: var(--border2); color: var(--text); }
          .page-v2 .v2-chip.active { background: rgba(212,166,76,0.15); color: var(--accent); border-color: rgba(212,166,76,0.4); }
          .page-v2 .v2-search { background: rgba(255,255,255,0.025); border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px; color: var(--text); font-family: 'Outfit', sans-serif; font-size: 12px; min-width: 220px; flex: 1; max-width: 280px; margin-left: auto; outline: none; }
          .page-v2 .v2-search:focus { border-color: var(--accent); }

          .page-v2 .v2-table-wrap { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
          .page-v2 table { width: 100%; border-collapse: collapse; font-size: 12px; }
          .page-v2 thead { background: rgba(255,255,255,0.02); }
          .page-v2 thead th { text-align: left; padding: 11px 14px; font-size: 9px; font-weight: 600; color: var(--text3); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
          .page-v2 thead th.right { text-align: right; }
          .page-v2 tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.1s; }
          .page-v2 tbody tr:hover { background: rgba(255,255,255,0.02); }
          .page-v2 tbody tr:last-child { border-bottom: none; }
          .page-v2 tbody td { padding: 12px 14px; vertical-align: top; }
          .page-v2 .v2-t-date { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text3); white-space: nowrap; }
          .page-v2 .v2-t-date strong { color: var(--text2); font-weight: 500; }
          .page-v2 .v2-t-artist { font-weight: 500; font-size: 13px; color: var(--text); }
          .page-v2 .v2-t-artist-sub { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text3); margin-top: 2px; }
          .page-v2 .v2-t-email { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--accent); text-decoration: none; display: block; }
          .page-v2 .v2-t-phone { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text2); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
          .page-v2 .v2-t-phone.muted { color: var(--text3); }
          .page-v2 .v2-pill { font-family: 'DM Mono', monospace; font-size: 9px; padding: 1px 6px; border-radius: 999px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; display: inline-block; }
          .page-v2 .v2-pill.green { background: rgba(74,222,128,0.14); color: #4ade80; }
          .page-v2 .v2-pill.amber { background: rgba(212,166,76,0.15); color: var(--accent); }
          .page-v2 .v2-pill.blue { background: rgba(96,165,250,0.14); color: #60a5fa; }
          .page-v2 .v2-pill.gray { background: rgba(255,255,255,0.06); color: var(--text2); }
          .page-v2 .v2-t-ref { font-family: 'DM Mono', monospace; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(96,165,250,0.14); color: #60a5fa; }
          .page-v2 .v2-t-num { font-family: 'DM Mono', monospace; font-size: 12px; text-align: right; font-feature-settings: 'tnum'; color: var(--text); }
          .page-v2 .v2-t-amt { font-family: 'DM Mono', monospace; font-size: 12px; text-align: right; color: var(--accent); font-weight: 500; font-feature-settings: 'tnum'; white-space: nowrap; }
          .page-v2 .v2-t-actions { text-align: right; }
          .page-v2 .v2-ibtn { display: inline-block; font-family: 'DM Mono', monospace; font-size: 10px; padding: 4px 9px; border-radius: 4px; background: transparent; border: 1px solid var(--border2); color: var(--text2); cursor: pointer; margin-left: 4px; letter-spacing: 0.04em; transition: all 0.12s; }
          .page-v2 .v2-ibtn:hover { color: var(--text); border-color: var(--text2); }
          .page-v2 .v2-ibtn.danger { color: #e05252; border-color: rgba(224,82,82,0.3); }
          .page-v2 .v2-ibtn.danger:hover { border-color: #e05252; }

          .page-v2 .v2-ledger { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border2); display: flex; justify-content: space-between; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text3); letter-spacing: 0.04em; }

          /* Carbon strip — backbone-of-the-brand. Quiet, structural,
             always visible at the bottom of the v2 page. Restates the
             commitment in the operator's own voice. Not a decoration;
             it's a brand position made structural. */
          .page-v2 .v2-carbon { margin-top: 28px; padding: 16px 20px; background: rgba(74,222,128,0.04); border: 1px solid rgba(74,222,128,0.18); border-left: 3px solid #4ade80; border-radius: 0 10px 10px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
          .page-v2 .v2-carbon-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(74,222,128,0.12); display: flex; align-items: center; justify-content: center; color: #4ade80; flex-shrink: 0; }
          .page-v2 .v2-carbon-icon svg { width: 16px; height: 16px; }
          .page-v2 .v2-carbon-body { font-size: 12px; line-height: 1.6; color: var(--text2); }
          .page-v2 .v2-carbon-body strong { color: var(--text); font-weight: 500; }
          .page-v2 .v2-carbon-body em { font-style: italic; color: var(--text3); font-weight: 300; }
          .page-v2 .v2-carbon-meta { text-align: right; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text3); letter-spacing: 0.04em; line-height: 1.5; }
          .page-v2 .v2-carbon-meta strong { color: #4ade80; font-weight: 500; }

          @media (max-width: 900px) {
            .page-v2 .v2-kpis { grid-template-columns: repeat(2, 1fr); }
            .page-v2 .v2-carbon { grid-template-columns: 1fr; gap: 12px; text-align: left; }
            .page-v2 .v2-carbon-meta { text-align: left; }
          }

/* ============================================================
   UI audit weekend bundle — May 2026
   ------------------------------------------------------------
   Added in response to the Self-Admin / Full Admin UI audit
   (outputs/self-admin-full-admin-ui-audit.md). Five additions:

     1. Inline glossary tooltip (.dt-gloss-*)
     2. Status-pill icon redundancy (.gb-ok::before, etc.)
     3. Tap-target floor on coarse pointers (@media pointer:coarse)
     4. Spinner component (.dt-spin)
     5. Splits-sum live readout polish (.ts.ts-strong)

   Each section is self-contained so individual changes can be
   reverted by snipping that block.
   ============================================================ */

/* 1) Inline glossary tooltip
   ------------------------------------------------------------
   Decorates any element with data-gloss="TERM" via glossary-tip.js.
   The hover/focus popover is a singleton anchored to document.body.
   Designed to feel like the existing chrome — DM Mono term label,
   Outfit body, accent-color underline. */
.dt-gloss-wrap{
  display:inline;
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  cursor:help;
  border-bottom:1px dotted rgba(232,197,71,0.55);
  text-decoration:none;
  border-radius:0;
}
.dt-gloss-wrap:hover,
.dt-gloss-wrap:focus{
  outline:none;
  border-bottom-color:var(--accent);
  color:var(--accent);
}
.dt-gloss-wrap:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.dt-gloss-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:6px;
  padding:0;
  background:rgba(232,197,71,0.10);
  color:var(--accent);
  border:1px solid rgba(232,197,71,0.35);
  border-radius:50%;
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:10px;
  font-weight:500;
  line-height:1;
  cursor:help;
  vertical-align:middle;
  transition:background 0.12s,border-color 0.12s;
}
.dt-gloss-icon:hover,
.dt-gloss-icon:focus{
  background:rgba(232,197,71,0.22);
  border-color:var(--accent);
  outline:none;
}
.dt-gloss-icon:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.dt-gloss-pop{
  position:absolute;
  z-index:99999;
  max-width:320px;
  background:#0f0f12;
  border:1px solid rgba(232,197,71,0.4);
  border-radius:8px;
  padding:12px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
  pointer-events:auto;
  animation:dtGlossFade 0.12s ease both;
}
@keyframes dtGlossFade{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.dt-gloss-pop-term{
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:10px;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:6px;
  font-weight:500;
}
.dt-gloss-pop-def{
  font-family:'Outfit',sans-serif;
  font-size:12px;
  line-height:1.55;
  color:var(--text);
}
.dt-gloss-pop-link{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:11px;
}
.dt-gloss-pop-link a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}
.dt-gloss-pop-link a:hover{
  text-decoration:underline;
}

/* 2) Status-pill icon redundancy
   ------------------------------------------------------------
   Per the audit, the .gb/.rb/.pg-* pill families relied on color
   alone. Adding a ::before glyph (✓ / ✕ / · / ?) keeps the pill
   compact while giving screen-reader and colorblind users a
   second non-color signal. The glyph is purely decorative so we
   mark it aria-hidden via content:'' / pseudo (CSS pseudos are
   ignored by screen readers when content is empty — but here we
   want the glyph visible, so we use real chars and let aria-label
   on the host element carry the semantic meaning). */
.gb-ok::before{
  content:"\2713";  /* ✓ */
  margin-right:4px;
  font-weight:700;
  font-size:10px;
}
.gb-miss::before{
  content:"\2715";  /* ✕ */
  margin-right:4px;
  font-weight:700;
  font-size:10px;
}
.gb-q::before{
  content:"?";
  margin-right:4px;
  font-weight:700;
  font-size:10px;
  opacity:0.7;
}
/* Progressive pie glyph for the MLC lifecycle badges — fills in as the work
   advances so the stage is legible without colour. ◔ registered, ◑ claimed,
   ● matched. */
.gb-stage-registered::before{ content:"\25D4"; margin-right:4px; font-weight:700; font-size:10px; }
.gb-stage-claimed::before{ content:"\25D1"; margin-right:4px; font-weight:700; font-size:10px; }
.gb-stage-matched::before{ content:"\25CF"; margin-right:4px; font-weight:700; font-size:10px; }
.rb.ryes.on::before{
  content:"\2713 ";
  font-weight:700;
}
.rb.rno.on::before{
  content:"\2715 ";
  font-weight:700;
}
.rb.runsure.on::before{
  content:"? ";
  font-weight:700;
}
/* The big .pg-* status pills get the same treatment, but only when
   the host carries .pg-glyph — opt-in so we don't accidentally
   decorate Refresh/Filter/etc. badges that happen to reuse the
   color class for accent. */
.pg-glyph.pg-green::before{ content:"\2713 "; font-weight:700; }
.pg-glyph.pg-red::before{ content:"\2715 "; font-weight:700; }
.pg-glyph.pg-gold::before{ content:"\26A0 "; font-weight:700; }  /* ⚠ */
.pg-glyph.pg-blue::before{ content:"\21BB "; font-weight:700; }  /* ↻ in progress */
.pg-glyph.pg-gray::before{ content:"\00B7 "; font-weight:700; opacity:0.7; }

/* 3) Tap-target floor on coarse pointers
   ------------------------------------------------------------
   Lifts the smallest interactive surfaces to at least 44 px tall
   on touch devices per Fitts's Law / Apple HIG / WCAG 2.5.5.
   Scoped to @media (pointer:coarse) so desktop chrome stays compact. */
@media (pointer:coarse){
  .rb{
    min-height:44px;
    padding:10px 14px;
    display:inline-flex;
    align-items:center;
  }
  button.sm,
  button.secondary.sm,
  button.dsm{
    min-height:44px;
    padding:10px 14px;
  }
  .modal-close{
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .nl .sb-count{
    min-height:24px;
    padding:3px 9px;
  }
  /* Self-Admin registration tri-state badges in the catalog. The
     .gb pill is a passive label for Full Admin clients, but in
     Self-Admin it's clickable via regStatusBadge() — give it more
     room when it's a button. */
  .gb[role="button"]{
    min-height:44px;
    padding:10px 12px;
    display:inline-flex;
    align-items:center;
    font-size:13px;
  }
}

/* 4) Spinner component
   ------------------------------------------------------------
   .dt-spin is a 14px monochrome circle that spins. dt-spin-lg
   bumps to 22px for large async surfaces (page loads). Use
   together with dtSpinnerStart(btn) / dtSpinnerStop(btn) in
   core.js for the "swap button label for spinner + text" idiom
   that recurs throughout the codebase. */
.dt-spin,
.dt-spin-lg{
  display:inline-block;
  vertical-align:-2px;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,0.18);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:dtSpinRot 0.7s linear infinite;
  box-sizing:border-box;
}
.dt-spin-lg{
  width:22px;
  height:22px;
  border-width:3px;
  vertical-align:-5px;
}
.dt-spin-inline{
  margin-right:8px;
}
@keyframes dtSpinRot{
  to{transform:rotate(360deg)}
}
/* Reduce motion — replace spin with a soft pulse. */
@media (prefers-reduced-motion: reduce){
  .dt-spin,
  .dt-spin-lg{
    animation:dtSpinPulse 1.4s ease-in-out infinite;
    border-top-color:rgba(255,255,255,0.18);
    background:rgba(232,197,71,0.18);
  }
  @keyframes dtSpinPulse{
    0%,100%{opacity:0.4}
    50%{opacity:1}
  }
}

/* 5) Splits-sum strong readout
   ------------------------------------------------------------
   The wizard's .ts strip already turned green/yellow/red on
   sum-to-100; the audit wants it bolder so users can't miss it
   before finalizing. .ts-strong layers on weight + a small
   "needs fix" prefix when not 100. */
.ts.ts-strong{
  font-weight:600;
  font-size:13px;
  padding:10px 14px;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:8px;
}
.ts.ts-strong::before{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:11px;
  font-weight:700;
}
.ts.ts-strong.ts-ok::before{ content:"\2713"; background:rgba(74,222,128,0.2); color:#4ade80; }
.ts.ts-strong.ts-w::before{  content:"!"; background:rgba(232,197,71,0.2); color:var(--accent); }
.ts.ts-strong.ts-e::before{  content:"\2715"; background:rgba(224,82,82,0.2); color:var(--red); }

/* =============================================================================
   Tax Workbench — Phase 1 styling.
   =============================================================================
   Surfaces: top bar, sub-nav tabs, three primary panels, ledger table,
   empty state, footer disclaimer, expense / mileage modal fields.
   Conventions mirror the existing page-level patterns: top bar uses the
   same .v2-h1 / .v2-crumb cadence, panels use the existing var(--border)
   / var(--text2) tokens, ledger borrows from the existing table styling
   on the catalog page.
============================================================================= */
#page-tax{ padding:0 24px 32px; }

.tax-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
  padding:24px 0 16px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
}
.tax-crumb{
  font-size:11px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:6px;
}
.tax-h1{
  font-size:28px;
  line-height:1.2;
  margin:0 0 8px;
  font-weight:500;
  color:#fff;
}
.tax-h1 em{
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-weight:400;
}
.tax-sub{
  font-size:13px;
  color:var(--text2);
  max-width:60ch;
  line-height:1.5;
}
.tax-meta{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

/* Sub-nav tabs — Dashboard / Expenses / Mileage. */
.tax-subnav{
  display:flex;
  gap:4px;
  margin-bottom:20px;
  border-bottom:1px solid var(--border);
}
.tax-tab{
  background:transparent;
  border:none;
  color:var(--text2);
  font-family:inherit;
  font-size:13px;
  padding:10px 16px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color 0.12s, border-color 0.12s;
}
.tax-tab:hover{ color:#fff; }
.tax-tab.active{
  color:#fff;
  border-bottom-color:var(--accent);
}
.tax-count{
  display:inline-block;
  background:rgba(255,255,255,0.06);
  padding:1px 7px;
  border-radius:10px;
  font-size:10px;
  margin-left:6px;
  color:var(--text2);
}

/* Three primary panels — Income / Expenses / Set-aside target. */
.tax-panels{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
  margin-bottom:24px;
}
.tax-panel{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:8px;
  padding:18px;
}
.tax-panel-label{
  font-size:11px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:10px;
}
.tax-panel-value{
  font-size:24px;
  font-weight:500;
  color:#fff;
  margin-bottom:10px;
  font-feature-settings:"tnum";
}
.tax-panel-value.tax-panel-muted{
  font-size:15px;
  color:var(--text3);
  font-weight:400;
  font-style:italic;
}
.tax-panel-body{
  font-size:12px;
  color:var(--text2);
  line-height:1.6;
  margin-bottom:12px;
}
.tax-panel-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* Empty state — shown when no data at all. */
.tax-empty{
  text-align:center;
  padding:36px 20px;
  border:1px dashed var(--border);
  border-radius:8px;
  background:rgba(255,255,255,0.01);
}
.tax-empty-title{
  font-size:16px;
  color:#fff;
  margin-bottom:8px;
}
.tax-empty-body{
  font-size:13px;
  color:var(--text2);
  max-width:48ch;
  margin:0 auto 16px;
  line-height:1.6;
}
.tax-empty-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Ledger table — used for both expenses and mileage sub-views. */
.tax-ledger{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.tax-ledger th{
  text-align:left;
  font-weight:500;
  color:var(--text3);
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:0.06em;
  padding:8px 10px;
  border-bottom:1px solid var(--border);
}
.tax-ledger td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  color:var(--text2);
}
.tax-ledger tr:hover td{ background:rgba(255,255,255,0.02); }
.tax-ledger .num{ text-align:right; font-feature-settings:"tnum"; }

/* Footer disclaimer — always visible at bottom of every Workbench page. */
.tax-footer{
  margin-top:32px;
  padding:14px 0;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--text3);
  line-height:1.6;
}
.tax-footer a{ color:var(--text2); text-decoration:underline; }

/* Modal form fields — used in the expense quick-add and mileage entry
   modals. Mirrors the pattern in the existing edit-modal for visual
   consistency. */
.tax-field{
  display:block;
  margin-bottom:14px;
}
.tax-field > span{
  display:block;
  font-size:11px;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:6px;
}
.tax-field input,
.tax-field select,
.tax-field textarea{
  width:100%;
  padding:9px 11px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:6px;
  color:#fff;
  font-family:inherit;
  font-size:13px;
  box-sizing:border-box;
}
.tax-field input[type="file"]{
  padding:6px;
  font-size:12px;
}
.tax-field small{
  display:block;
  margin-top:5px;
  color:var(--text3);
  font-size:11px;
  line-height:1.5;
}

/* Phase 2 surfaces — income consolidation, 1099 reconciliation, savings. */
.tax-page-intro{
  font-size:13px;
  color:var(--text2);
  margin-bottom:18px;
  max-width:70ch;
  line-height:1.6;
}
.tax-banner{
  background:rgba(232,197,71,0.08);
  border-left:3px solid var(--accent);
  border-radius:4px;
  padding:12px 14px;
  font-size:13px;
  color:var(--text2);
  margin-bottom:16px;
  line-height:1.6;
}
.tax-tooltip{
  background:rgba(255,255,255,0.04);
  border-left:3px solid var(--accent);
  border-radius:4px;
  padding:12px 14px;
  margin-top:16px;
  font-size:12px;
  color:var(--text2);
}
.tax-tooltip strong{
  display:block;
  color:#fff;
  font-size:13px;
  margin-bottom:6px;
}
.tax-tooltip p{
  margin:0;
  line-height:1.6;
}

/* 1099 reconciliation rows. */
.tax-recon-row{
  border:1px solid var(--border);
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:12px;
  background:rgba(255,255,255,0.02);
}
.tax-recon-header{
  font-size:13px;
  color:#fff;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.tax-recon-status{
  font-size:11px;
  padding:2px 8px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  color:var(--text2);
}
.tax-recon-status-matched{ background:rgba(74,222,128,0.15); color:#4ade80; }
.tax-recon-status-inquiry_open{ background:rgba(232,197,71,0.15); color:var(--accent); }
.tax-recon-status-accepted_variance{ background:rgba(255,255,255,0.08); color:var(--text2); }
.tax-recon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  margin-bottom:10px;
}
.tax-recon-mini-label{
  font-size:10px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:4px;
}
.tax-recon-mini-value{
  font-size:14px;
  color:#fff;
  font-feature-settings:"tnum";
}
.tax-recon-mini-value.tax-recon-warn{ color:var(--accent); }
.tax-recon-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* Savings dashboard. */
.tax-savings-inputs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-top:10px;
}
.tax-savings-hero{
  background:rgba(232,197,71,0.06);
  border:1px solid var(--accent);
  border-radius:8px;
  padding:20px;
  margin-bottom:16px;
  text-align:center;
}
.tax-savings-hero-value{
  font-size:32px;
  font-weight:500;
  color:#fff;
  margin-bottom:8px;
  font-feature-settings:"tnum";
}
.tax-savings-hero-sub{
  font-size:13px;
  color:var(--text2);
  line-height:1.6;
}

/* Phase 3 — exports grid + wizard. */
.tax-export-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
  margin-bottom:14px;
}
.tax-export-card{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:8px;
  padding:18px;
}
.tax-export-card h3{
  font-size:14px;
  color:#fff;
  margin:0 0 8px;
  font-weight:500;
}
.tax-export-card p{
  font-size:12px;
  color:var(--text2);
  line-height:1.6;
  margin:0 0 12px;
}
.tax-export-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* Year-end wizard. */
#page-tax-wizard{ padding:0 24px 32px; }
.tax-wizard-dots{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:20px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.tax-wizard-dot{
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  color:var(--text3);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-family:inherit;
  transition:background 0.12s, color 0.12s, border-color 0.12s;
}
.tax-wizard-dot:hover{ background:rgba(255,255,255,0.08); }
.tax-wizard-dot.done{
  background:rgba(74,222,128,0.15);
  border-color:rgba(74,222,128,0.4);
  color:#4ade80;
}
.tax-wizard-dot.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#000;
  font-weight:600;
}
.tax-wizard-step{
  padding:20px 0;
  font-size:13px;
  color:var(--text2);
  line-height:1.7;
}
.tax-wizard-step p{ margin:0 0 14px; }
.tax-wizard-step ul{ margin:0 0 14px 18px; }
.tax-wizard-step li{ margin-bottom:6px; }
.tax-wizard-nav{
  display:flex;
  gap:8px;
  justify-content:space-between;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.tax-disclaimer-fullread{
  background:rgba(255,255,255,0.03);
  border-left:3px solid var(--accent);
  padding:14px 16px;
  font-size:12px;
  color:var(--text2);
  line-height:1.7;
  border-radius:4px;
  white-space:pre-wrap;
}
/* Partial-use shortcut on the Tax Workbench dashboard — for users who
   don't want the full Workbench but do want their royalty CSV for the
   CPA. Visually softer than the main panels so it reads as "escape
   hatch" rather than "main path." */
.tax-shortcut{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  background:rgba(255,255,255,0.02);
  border:1px dashed var(--border);
  border-radius:8px;
  padding:14px 18px;
  margin-bottom:18px;
}

/* ============================================================================
   Catalog Continuity Plan — wizard styles.
   ----------------------------------------------------------------------------
   Used by src/continuity-plan.js. Dark mode, calm, less decoration than the
   marketing surfaces — this is a sensitive sit-down-and-think page, not a
   conversion funnel. Padding errs generous so the wizard doesn't feel cramped.
   Mirrors existing tokens (--accent, --surface, --border, --text*) so the
   wizard inherits Brand UI v1 typography automatically.
   ============================================================================ */

#page-continuity { padding-bottom: 80px; }

.cp-body { margin-top: 20px; }

/* Cards. .cp-card is the wizard's repeating section frame. .cp-card-lead
   adds a touch more vertical breathing room for entry/done screens. */
.cp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  max-width: 880px;
}
.cp-card-lead { padding: 48px 40px; }

.cp-h2 {
  font-size: var(--type-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--text);
}
.cp-h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--text);
}
.cp-lead {
  font-size: var(--type-body-lg);
  line-height: 1.55;
  color: var(--text2);
  margin-bottom: 16px;
  max-width: 640px;
}
.cp-meta {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.04em;
}
.cp-empty {
  padding: 28px;
  text-align: center;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border2);
  border-radius: 8px;
  color: var(--text3);
  font-size: 13px;
}

/* Buttons — match the existing button vocabulary without coupling to it. */
.cp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-tight),
              border-color var(--dur-quick) var(--ease-tight),
              opacity var(--dur-quick) var(--ease-tight);
}
.cp-btn-primary {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.cp-btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }
.cp-btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border2);
}
.cp-btn-ghost:hover { background: rgba(255,255,255,0.04); }
.cp-link {
  background: none; border: none; padding: 0;
  color: var(--accent);
  font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.cp-link:hover { text-decoration: underline; }
.cp-link-warn { color: var(--red); }

.cp-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--border2);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Form fields. The wizard reuses these for every editable surface. */
.cp-fields { display: flex; flex-direction: column; gap: 14px; }
.cp-field { display: flex; flex-direction: column; gap: 4px; }
.cp-field-label {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.cp-input, .cp-textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-quick) var(--ease-tight);
}
.cp-input:focus, .cp-textarea:focus { border-color: var(--accent); }
.cp-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }

/* Inline row grids — used for beneficiaries, relationships, band members.
   Wraps to a single column at narrow widths so the wizard stays usable
   on a phone. */
.cp-row-grid {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
}
.cp-row-rel  { grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1.4fr 1.4fr 70px; }
.cp-row-ben  { grid-template-columns: 1.4fr 1fr 1.4fr 1fr 1.2fr 0.8fr 70px; }
.cp-row-band-member { grid-template-columns: 1.4fr 1.2fr 0.8fr 0.6fr 1fr 70px; }
@media (max-width: 900px) {
  .cp-row-grid { grid-template-columns: 1fr !important; }
}

.cp-add-row { margin: 8px 0 12px; }

/* Prefilled (read-only) PRO rows above the editable relationships list. */
.cp-prefill {
  background: rgba(232,197,71,0.04);
  border: 1px solid rgba(232,197,71,0.18);
  border-radius: 8px;
  padding: 10px 14px;
}
.cp-prefill-row {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text2);
  border-bottom: 1px dashed var(--border2);
  padding: 4px 0;
}
.cp-prefill-row:last-child { border-bottom: none; }

/* Inventory table for Step 1 — borrows the inventory-table aesthetic. */
.cp-table-wrap { margin-top: 14px; }
.cp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cp-table thead th {
  text-align: left;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 6px;
  border-bottom: 1px solid var(--border2);
}
.cp-table tbody td {
  padding: 10px 6px;
  border-bottom: 1px dashed var(--border);
  color: var(--text);
}
.cp-table .cp-cell-dot   { width: 24px; text-align: center; }
.cp-table .cp-cell-meta  { color: var(--text2); font-size: 12px; }
.cp-table .cp-cell-title { font-weight: 500; }
.cp-dot {
  display: inline-block;
  width: 16px; height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
}
.cp-dot-ok   { background: var(--green-bg); color: #6fd5b4; }
.cp-dot-warn { background: rgba(232,197,71,0.18); color: var(--accent); }

/* Radio-button cards (band branch, admin type, preferences). */
.cp-radio-stack { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.cp-radio-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-tight),
              background var(--dur-quick) var(--ease-tight);
}
.cp-radio-btn:hover { border-color: var(--border2); background: var(--surface3); }
.cp-radio-btn-active {
  border-color: var(--accent);
  background: rgba(232,197,71,0.06);
}
.cp-radio-btn strong { font-size: 14px; font-weight: 500; display: block; }
.cp-radio-sub { font-size: 12px; color: var(--text2); margin-top: 4px; }
.cp-radio-btn-inline {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  font-size: 12px;
}
.cp-pick-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* Callout (used liberally — disclaimers, warnings, footnotes). */
.cp-callout {
  margin: 16px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(232,197,71,0.06);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  border-radius: 0 6px 6px 0;
}
.cp-callout-warn {
  border-left-color: var(--accent2);
  background: rgba(240,165,0,0.06);
}
.cp-banner {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.cp-banner-warn {
  background: rgba(232,197,71,0.08);
  border: 1px solid rgba(232,197,71,0.30);
  color: var(--accent);
}

/* Review blocks (Step 6). */
.cp-review-block {
  margin: 10px 0;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cp-review-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.cp-review-body { color: var(--text2); font-size: 13px; line-height: 1.6; }

/* CTAs on entry / done screens. */
.cp-cta-row { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.cp-storage-row { padding: 12px 0; border-bottom: 1px dashed var(--border); }
.cp-storage-row:last-child { border-bottom: none; }

/* Toast — short-lived flash notification at the bottom of the wizard. */
.cp-toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--surface3);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 8px;
  z-index: 9999;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}

/* Dashboard entry card — the dismissible CTA above the dashboard body. */
.cp-entry-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid rgba(232,197,71,0.22);
  border-radius: 12px;
  padding: 22px 26px;
  display: flex; align-items: center;
}
.cp-entry-body { width: 100%; }
.cp-entry-eyebrow {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.cp-entry-h {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.cp-entry-p {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 580px;
}
.cp-entry-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* Saved-state badge in the wizard header. Renders empty until the
   first save; thereafter shows "Saved" / "Saved 30s ago" via the
   _cpRefreshSavedBadge ticker. Empty content collapses the line. */
.cp-saved-badge {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text3);
  margin-top: 6px;
  min-height: 12px;
}
.cp-saved-badge:empty { display: none; }