:root {
  color-scheme: light;
  --canvas: #faf9f6;
  --surface: #ffffff;
  --surface-raised: #f5f3ee;
  --surface-input: #ffffff;
  --sidebar: #181716;
  --sidebar-soft: #272522;
  --line: #dedbd4;
  --border: #dedbd4;
  --border-focus: #8b5a2b;
  --ink: #1a1a1a;
  --muted: #68645f;
  /* AA-compliant secondary text: 4.99 on --surface, 4.50 on --surface-raised. */
  --muted-2: #746f66;
  --accent: #8b5a2b;
  --accent-dark: #70451f;
  --accent-soft: #f4ede5;
  --focus-ring: var(--accent);
  /* Each semantic colour is used as TEXT far more than as a fill: status pills,
     ledger amounts, trends, the retained-earnings figure. The previous values
     were picked as fills and failed WCAG AA badly wherever they carried a word
     — 2.88:1 for a green "Active" pill, 2.48:1 for an orange "Paused", 3.16:1
     for a green ledger credit on white. These clear 4.5:1 on both white and
     their own -soft background, and white still clears 5:1 on top of them for
     the danger button. */
  --mint: #127e5f;
  --mint-soft: #e8f8f2;
  --orange: #aa5737;
  --orange-soft: #fff0e8;
  --blue: #2d6bca;
  --blue-soft: #eaf2ff;
  --red: #bb4052;
  --red-soft: #fdeaee;
  --shadow: 0 1px 3px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.04);
  --shadow-lg: 0 12px 40px rgba(26, 26, 26, 0.12);
  --radius: 8px;
  --radius-lg: 12px;
  /* Vertical rhythm: --stack between blocks on a page, --stack-lg after the
     page heading, --card-gap between the regions inside a card. */
  --stack: 24px;
  --stack-lg: 28px;
  --card-gap: 18px;
  --sidebar-w: 268px;
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --panel-open-dur: 250ms;
  --panel-close-dur: 200ms;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
/* `clip` rather than `hidden`: it stops the off-canvas drawer and any over-wide
   panel from making the page pannable sideways on a phone, without turning the
   document into a scroll container (which would break sticky headers). */
html { height: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.drawer-open, body.sidebar-open, body.command-open { overflow: hidden; }
body.sidebar-open .modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
[hidden] { display: none !important; }

/* Interactive targets baseline */
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
/* A focus indicator needs 3:1 against what it sits on (WCAG 1.4.11). The brown
   accent manages 5.84:1 on the page but only 2.62:1 on the dark sidebar — the
   most-used keyboard path in the app — and 1:1 on the skip link, whose own
   background IS the accent. Dark surfaces re-point the token instead. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}

.sidebar, .skip-link { --focus-ring: #fff; }

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: Montserrat, Inter, system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.15;
}

h1 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

h2 {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.01em;
}

h3 {
  font-size: 15px;
  font-weight: 700;
}

.eyebrow, .panel-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Authentication Screen */
.login-screen {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 36px 20px 24px;
  background: var(--canvas);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
}

.login-brand .brand-logo {
  width: 48px;
  height: 48px;
  padding: 4px;
  border-radius: 50%;
  background: #1a1a1a;
}

.login-brand strong {
  display: block;
  text-transform: uppercase;
  font-family: Montserrat, Inter, sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
}

.login-brand small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
}

.login-card {
  width: min(440px, 100%);
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.login-card h1 {
  margin: 10px 0 8px;
  font-size: 30px;
}

.login-card > p:not(.eyebrow) {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
}

.login-form { display: grid; gap: 16px; }
.login-submit { width: 100%; min-height: 46px; margin-top: 6px; font-size: 14px; }
.form-error {
  margin: 0 !important;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--red-soft);
  color: var(--red) !important;
  font-size: 12px;
  border: 1px solid rgba(220, 75, 97, 0.3);
}

.demo-logins {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.demo-logins > span {
  width: 100%;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-logins button {
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
  transition: all .18s ease;
}

.demo-logins button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #fff;
}


/* App Shell & Sidebar */
.app-shell { position: relative; min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  padding: 24px 18px 20px;
  background: var(--sidebar);
  border-right: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px 24px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 50%;
  background: #252422;
}

.brand strong {
  display: block;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.2;
}

.brand small {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
}

.primary-nav { flex: 1; overflow-y: auto; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }
.nav-label {
  margin: 18px 12px 8px;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .16s ease;
  text-align: left;
}

.nav-item:hover {
  background: var(--sidebar-soft);
  color: #fff;
}

.nav-item.active {
  background: var(--sidebar-soft);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-item svg { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; }
.nav-item > span:nth-child(2) { flex: 1; }
.nav-item b {
  min-width: 22px;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 11px;
  text-align: center;
  font-weight: 700;
}

.nav-item.active b {
  background: var(--accent);
  color: #fff;
}

.nav-more { margin-top: 12px; }
.nav-more > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary:hover, .nav-more.active > summary { background: var(--sidebar-soft); color: #fff; }
.nav-more > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nav-more > summary svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-more-links { margin: 4px 0 0 12px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.15); }
.nav-more-links .nav-item { padding-left: 12px; }

.sidebar-foot {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.system-status, .profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}

.system-status > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(24, 164, 124, .2);
}

.system-status span, .profile-chip span { min-width: 0; flex: 1; }
.system-status strong, .profile-chip strong { display: block; color: #fff; font-size: 13px; font-weight: 600; }
.system-status small, .profile-chip small { display: block; margin-top: 2px; color: rgba(255,255,255,0.5); font-size: 11px; }

.profile-chip {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.profile-logout {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: all .16s ease;
}

.profile-logout:hover {
  background: var(--sidebar-soft);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

.profile-logout svg { width: 16px; height: 16px; }

.avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.avatar-owner {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
}

/* Topbar & Header */
.main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  margin-left: var(--sidebar-w);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 249, 246, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.crumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
}

.crumb span { color: var(--muted); }
.crumb i { color: var(--muted-2); font-style: normal; }
.crumb strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 700; white-space: nowrap; }

.top-actions { display: flex; align-items: center; gap: 10px; }

.search-trigger {
  width: 230px;
  min-height: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: all .16s ease;
  font-size: 13px;
}

.search-trigger:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.search-trigger svg { width: 16px; height: 16px; }
.search-trigger span:nth-child(2) { flex: 1; text-align: left; }

kbd {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}

.icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: all .16s ease;
}

.icon-button:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.icon-button svg { width: 18px; height: 18px; }
.notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--red);
}

.mobile-menu { display: none; }

/* Buttons & Interactive Controls */
.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
  user-select: none;
}

.button svg { width: 16px; height: 16px; }
.button-primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(139, 90, 43, 0.2);
}

.button-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-1px);
}

.button-primary:active { transform: translateY(0); }
.button-primary:disabled, .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.button-secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.button-secondary:hover {
  border-color: var(--muted-2);
  background: var(--surface-raised);
  transform: translateY(-1px);
}

.button-danger {
  border-color: rgba(220, 75, 97, 0.4);
  background: var(--red-soft);
  color: var(--red);
}

.button-danger:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.text-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .16s ease;
}

.text-button:hover { opacity: .8; }

/* Page Layout & View Switching */
.page {
  max-width: 1540px;
  margin: 0 auto;
  padding: 36px 34px 60px;
}

.view { display: none; animation: view-in .2s ease; }
.view.active { display: block; }

/* Vertical rhythm between the top-level blocks of a page.

   This used to be each component's own business, declared as a margin-bottom
   wherever somebody happened to need one. The result across the ten views was
   nine different gaps (0, 4, 10, 12, 18, 20, 22, 24, 28px) and two outright
   collisions: the commission summary sat flush against the chatter cards on
   Team, and two panels touched on Settlements. The page owns the rhythm now,
   so a block that declares nothing still gets separated. Margin-top rather
   than a flex gap because `[hidden]` blocks (display:none) then drop their
   spacing with them, whatever position they hold in the view. */
.view.active > * { margin-top: var(--stack); }
.view.active > *:first-child { margin-top: 0; }
/* The page heading keeps its own larger margin-bottom (--stack-lg); adjacent
   sibling margins collapse to the larger of the two, which stays correct even
   when the block right after the heading is display:none. */
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Wrap, or a wide action group overflows the page between 769px and the
   768px column rule: the earnings range picker ran 224px past a 1024px
   laptop, with the Custom control clipped off the right edge. */
.page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--stack-lg);
}

.page-heading > :first-child { flex: 1 1 260px; min-width: 0; }

.page-heading.compact { align-items: center; }
.page-heading h1 { margin: 6px 0 8px; }
.page-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 14px; }
.heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Metrics & Finance Cards */
/* Card grids all share one gutter; the page owns the margin below. */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--card-gap);
}

.metric-card {
  position: relative;
  /* The headline figure sizes against this card, not the viewport - see
     .metric-value strong. */
  container-type: inline-size;
  overflow: hidden;
  min-height: 140px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-top > span:first-child {
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.metric-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.metric-icon svg { width: 18px; height: 18px; }
.metric-value {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* A fixed 28px was clipped by the card's overflow:hidden as soon as the number
   grew: EUR 866,649.40 needed 161px and EUR 1,733,892.90 needed 180px inside a
   144px card on a 390px phone, and a silently truncated finance figure is the
   worst failure this dashboard has. Scaling against the card keeps 28px
   everywhere it fits and still holds a 15-character "US$1,733,892.90" on the
   narrowest two-up phone card. */
.metric-value strong {
  font-size: clamp(18px, 13cqi, 28px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}

.metric-value small { color: var(--muted); font-size: 12px; }
.metric-foot { margin-top: 6px; color: var(--muted); font-size: 12px; }

.finance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--card-gap);
}

.finance-card {
  container-type: inline-size;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
}

.finance-card span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.finance-card strong {
  display: block;
  margin-top: 8px;
  /* Same clipping as .metric-value strong; same container-relative fix. */
  font-size: clamp(18px, 13cqi, 26px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}

.finance-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.finance-card.catch-up-card {
  border-color: color-mix(in srgb, var(--orange) 38%, var(--line));
  background: color-mix(in srgb, var(--orange-soft) 28%, var(--surface));
}

.finance-card.catch-up-card > span {
  color: var(--orange);
}

/* A reconciliation table keeps history inside the total instead of presenting
   it as another balance. Performance and statement status have separate space. */
.finance-summary.creator-earnings-summary {
  grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.creator-earnings-summary section { min-width: 0; padding: 24px; }
.creator-earnings-summary h2 { margin: 0; font-size: 18px; font-weight: 750; }
.creator-earnings-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.creator-earnings-heading p, .creator-earnings-intro, .creator-earnings-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.creator-earnings-intro { margin-top: 8px; max-width: 65ch; }
.earnings-fx-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 75ch; }
.earnings-fx-note a { color: var(--accent-dark); text-underline-offset: 3px; }
.earnings-eur-estimate { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: normal; font-variant-numeric: tabular-nums; }
.creator-earnings-performance .earnings-eur-estimate { text-align: right; }
.currency-estimate-note { color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 96ch; }
.currency-estimate-note p { margin: 0; }
.currency-estimate-note .earnings-fx-note { margin-top: 6px; max-width: none; }
.panel-currency-note { margin: 16px 24px; }
.metric-value .earnings-eur-estimate { font-size: 12px; letter-spacing: normal; }
#metric-grid:has([data-eur-estimate]) .metric-card { justify-content: flex-start; }
#metric-grid:has([data-eur-estimate]) .metric-top { min-height: 36px; }
#metric-grid:has([data-eur-estimate]) .metric-value { min-height: 54px; }
#metric-grid:has([data-eur-estimate]) .metric-foot { margin-top: auto; padding-top: 6px; }
.attribution-card .earnings-eur-estimate, .receipt-payroll-summary .earnings-eur-estimate { font-size: 12px; text-transform: none; letter-spacing: normal; }
.payment-exchange-estimate { padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.payment-exchange-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.payment-exchange-estimate small { line-height: 1.6; }
.creator-earnings-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-variant-numeric: tabular-nums; }
.creator-earnings-table th, .creator-earnings-table td { padding: 14px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.creator-earnings-table th:first-child { text-align: left; padding-left: 0; }
.creator-earnings-table :is(th, td):last-child { padding-right: 0; }
.creator-earnings-table thead th { color: var(--muted); font-size: 12px; font-weight: 600; padding-top: 0; }
.creator-earnings-table tbody th { font-weight: 600; }
.creator-earnings-table td { white-space: nowrap; }
.creator-earnings-table small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 3px; }
.creator-earnings-table tfoot :is(th, td) { border-bottom: 0; font-weight: 750; padding-bottom: 0; }
.creator-earnings-table tfoot td:last-child { font-size: 22px; color: var(--accent-dark); }
.creator-earnings-method { margin-top: 18px; color: var(--muted); font-size: 12px; }
.creator-earnings-method summary { width: fit-content; min-height: 44px; padding: 12px 0; color: var(--accent-dark); cursor: pointer; font-weight: 600; }
.creator-earnings-method summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.creator-earnings-method summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 2px; }
.creator-earnings-method p { margin: 4px 0 12px; max-width: 65ch; }
.creator-earnings-performance { border-left: 1px solid var(--line); }
.creator-earnings-performance dl { margin: 22px 0 0; }
.creator-earnings-performance dl > div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.creator-earnings-performance dl > div:last-child { border-bottom: 0; }
.creator-earnings-performance dt { color: var(--muted); font-size: 13px; }
.creator-earnings-performance dd { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.creator-earnings-payments { grid-column: 1 / -1; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.creator-earnings-payments p { margin: 6px 0 0; max-width: 75ch; }
.creator-earnings-payments p strong { font-size: 13px; font-weight: 600; }
.creator-earnings-payments .button { flex-shrink: 0; }
@media (max-width: 1000px) {
  .finance-summary.creator-earnings-summary { grid-template-columns: minmax(0, 1fr); }
  .creator-earnings-performance { border-left: 0; border-top: 1px solid var(--line); }
  .creator-earnings-performance dl { margin-top: 8px; }
}
@media (max-width: 480px) {
  .creator-earnings-summary section { padding: 16px; }
  .creator-earnings-table { font-size: 12px; }
  .creator-earnings-table th, .creator-earnings-table td { padding-inline: 5px; }
  .creator-earnings-table tfoot td:last-child { font-size: 18px; }
  .creator-earnings-payments { align-items: stretch; flex-direction: column; gap: 14px; }
}

.trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 750;
}

.trend svg { width: 13px; height: 13px; }
.trend.positive { color: var(--mint); }
.trend.negative { color: var(--red); }

/* Panels & Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, .85fr);
  gap: 18px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 14px;
}

.panel-head h2 { margin: 4px 0 0; }
.ledger-head { flex-wrap: wrap; }
.ledger-head > div { min-width: 0; }

.segmented {
  display: flex;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  gap: 3px;
}

.segmented button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .16s ease;
}

.segmented button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.chart-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px 10px;
}

.chart-summary strong { font-size: 26px; font-weight: 800; color: var(--ink); }
.chart-summary small { color: var(--muted); font-size: 12px; }

.chart-wrap { height: 200px; padding: 4px 20px 16px 10px; }
.chart-wrap svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid-line { stroke: #eae7df; stroke-width: 1; }
.chart-area { fill: url(#areaGradient); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.chart-label { fill: var(--muted); font-size: 11px; }

.currency-guard {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Action Center & Attention List */
.attention-list { display: grid; padding: 0 18px 18px; }
.attention-item {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .16s ease;
}

.attention-item:last-child { border-bottom: 0; }
.attention-item:hover { border-radius: 8px; background: var(--surface-raised); }
.attention-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
}

.attention-icon svg { width: 17px; height: 17px; }
.attention-icon.orange { background: var(--orange-soft); color: var(--orange); }
.attention-icon.red { background: var(--red-soft); color: var(--red); }
.attention-icon.blue { background: var(--blue-soft); color: var(--blue); }

.attention-copy { min-width: 0; flex: 1; }
.attention-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink); }
.attention-copy small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.attention-item > strong { padding-left: 8px; font-size: 13px; text-align: right; white-space: nowrap; color: var(--ink); }

/* Coverage Mini Week */
/* Seven cells have to hold a 28px uppercase weekday. At 20px panel padding,
   8px gaps and 6px cell padding the label box was 19px, so every day read
   "MO" with the rest cut off in the dashboard's narrow column. */
.mini-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 4px 14px 20px; }
.mini-day { min-width: 0; padding: 10px 2px; border-radius: 8px; background: var(--surface-raised); text-align: center; border: 1px solid var(--line); }
.mini-day.today { border-color: var(--accent); background: var(--accent-soft); }
.mini-day > span { display: block; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.mini-day > strong { display: block; margin: 6px 0 8px; font-size: 16px; color: var(--ink); }
.shift-dots { min-height: 20px; display: flex; justify-content: center; align-items: flex-end; gap: 3px; }
.shift-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Creator Performance in Dashboard */
/* A container query, not a viewport one: this panel is 697px wide on a desktop,
   333px in the two-column dashboard of a 1024px laptop and 316px on a phone,
   so viewport width says nothing useful about whether four columns fit. */
.creator-performance { padding: 0 20px 18px; container-type: inline-size; }
/* The name column shrinks (it already ellipsizes) and the bar keeps a floor,
   because fixed minimums of 36+120+140+36 needed 332px inside the 293px
   dashboard column of a 1024px laptop: the bar collapsed to 0px and the euro
   figure was cut off on the right. The figure column stays intrinsic — a
   settlement total is never worth ellipsizing. */
.performance-row {
  display: grid;
  grid-template-columns: 36px minmax(0, .7fr) minmax(48px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.performance-row:last-child { border: 0; }
.performance-row .avatar { width: 34px; height: 34px; border-radius: 8px; font-size: 11px; }
.performance-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink); }
.performance-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-track { height: 6px; overflow: hidden; border-radius: 6px; background: var(--surface-raised); }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.performance-row > strong { font-size: 13px; text-align: right; color: var(--ink); }

/* Owner rows share .performance-row's tracks; only the value block differs. */
.performance-values { text-align: right; }
.performance-values strong { display: block; font-size: 13px; color: var(--ink); }
.performance-values small { display: block; margin-top: 3px; color: var(--mint); font-size: 11px; font-weight: 700; }

/* Below this the name column drops under ~60px and the portfolio reads
   "Luna Va…" against a stub of a bar, so the row takes two lines instead:
   name and figure on the first, the full-width bar on the second. */
@container (max-width: 420px) {
  .performance-row { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 9px; }
  .performance-row .avatar { grid-column: 1; grid-row: 1 / span 2; }
  .performance-name { grid-column: 2; grid-row: 1; }
  .performance-values, .performance-row > strong { grid-column: 3; grid-row: 1; }
  .performance-row .progress-track { grid-column: 2 / -1; grid-row: 2; }
}


/* Filter Toolbars & Horizontal Pill Carousels */
/* Wrap for the same reason .page-heading does. The pill strip scrolls with a
   hidden scrollbar, which is right on a phone and wrong on a laptop: at 1024px
   the Creators toolbar left it 306px for 380px of pills, so "Archived" was cut
   off with no scrollbar and nothing to say it was there. Given its own row it
   fits whole. */
.toolbar, .planner-controls, .table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.filter-search {
  min-width: 240px;
  max-width: 360px;
  min-height: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.filter-search svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.filter-search input {
  width: 100%;
  align-self: stretch;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}

.filter-search input::placeholder { color: var(--muted-2); }

.filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.filter-pills::-webkit-scrollbar { display: none; }
.filter-pills button {
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .16s ease;
  white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.filter-pills button:hover {
  color: var(--ink);
  background: var(--surface-raised);
}

.filter-pills button.active {
  background: var(--accent);
  color: #ffffff;
}

.advanced-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 16px;
  padding: 20px 24px;
}

.advanced-filters .text-button { min-height: 44px; }

/* Status Badges & Pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.active, .status-pill.paid, .status-pill.cleared, .status-pill.completed {
  background: var(--mint-soft);
  color: var(--mint);
}

.status-pill.onboarding, .status-pill.ready, .status-pill.scheduled, .status-pill.planned, .status-pill.pending {
  background: var(--blue-soft);
  color: var(--blue);
}

.status-pill.paused, .status-pill.held, .status-pill.away {
  background: var(--orange-soft);
  color: var(--orange);
}

.status-pill.disputed, .status-pill.overdue, .status-pill.missed {
  background: var(--red-soft);
  color: var(--red);
}

.status-pill.needs_finish {
  background: var(--orange-soft);
  color: var(--orange);
}

.status-pill.in_progress {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-pill.inactive, .status-pill.cancelled, .status-pill.void {
  background: var(--surface-raised);
  color: var(--muted);
}

/* Creator & Team Grids */
.creator-grid, .team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.creator-card, .team-card {
  position: relative;
  overflow: hidden;
  /* A column with one gap, so the card's internal rhythm is stated once
     instead of as four different margins (18/18/12/0 on a team card — the
     Manage button had no separation from the workload bar at all). */
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.creator-card:hover, .team-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.creator-card-head, .team-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.creator-card-head .avatar, .team-card-head .avatar {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--creator-accent, var(--accent));
  /* The accent is owner-chosen per creator, so the readable foreground has to
     be derived from it rather than assumed white: #ff7d5c gave white 2.52:1. */
  color: var(--creator-accent-ink, #fff);
  font-size: 14px;
  font-weight: 800;
}

.creator-identity, .team-card-head > div:nth-child(2) { min-width: 0; flex: 1; }
.creator-identity h2, .creator-identity h3, .team-card-head h2, .team-card-head h3 { margin: 0; font-size: 16px; color: var(--ink); }
.creator-identity p, .team-card-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.more-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .16s ease;
}

.more-button:hover { background: var(--surface-raised); color: var(--ink); }
.more-button svg { width: 18px; height: 18px; }

.creator-card-body, .team-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.creator-stat, .team-stat {
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

.creator-stat span, .team-stat span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.creator-stat strong, .team-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

/* Pinned to the bottom of the card. Cards in a grid row stretch to the tallest
   one, so without this a card with fewer paired models left its Manage button
   floating with 61px of dead space beneath it while its neighbour's sat lower
   — the action baseline was ragged straight across the row. */
.creator-card-foot, .creator-card > .row-actions, .team-card > .row-actions {
  margin-top: auto;
}

.creator-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.platform-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.platform-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--creator-accent, var(--accent));
}

.account-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.account-chips > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

/* A platform handle is user data with no break opportunity, so it needs the
   same treatment as the deployment host name: @alexandra_konstantinopoulou_
   official pushed the chip 9px past its creator card. */
.account-chips > span { min-width: 0; }
.account-chips small { color: var(--muted); font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }

/* Paired Models & Workload in Team Cards */
.paired-models {
  padding-top: var(--card-gap);
  border-top: 1px solid var(--line);
}
.paired-models span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.paired-models strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.workload { margin-top: 0; }
.workload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.workload-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.workload-head strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

/* Shift Planner (continuous desktop clock vs mobile agenda) */
.planner-agenda { display: none; }
.planner-controls { justify-content: space-between; }
.date-nav { display: flex; align-items: center; gap: 8px; }
.date-nav strong { min-width: 200px; margin-left: 8px; font-size: 14px; color: var(--ink); }
.planner-legend { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 12px; }
.planner-legend > span, .planner-guide-keys > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.live { background: var(--accent); }
.dot.chat { background: var(--mint); }
.dot.content { background: var(--orange); }
.dot.admin { background: var(--blue); }

.planner-summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  scrollbar-width: thin;
}
.planner-summary > span {
  flex: 0 0 auto;
  padding: 0 14px;
  border-inline-start: 1px solid var(--line);
  font-size: 12px;
  white-space: nowrap;
}
.planner-summary > span:first-child { border-inline-start: 0; }
.planner-summary strong { margin-inline-end: 4px; color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.planner-summary-title { color: var(--ink); font-weight: 750; }
.planner-summary .is-live strong { color: var(--mint); }
.planner-summary .needs-attention strong, .planner-summary .has-variance strong { color: var(--orange); }

.planner-guide {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-height: 26px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
}
.planner-guide > strong { margin-inline-end: auto; color: var(--muted); font-size: 11px; font-weight: 700; }
.planner-guide-keys,
.planner-desktop-tools,
.planner-jump-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.planner-desktop-tools { gap: 8px; }
.planner-jump-actions { flex-wrap: nowrap; gap: 6px; }
.planner-tool-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.planner-tool-button:hover { border-color: var(--accent); color: var(--accent); }
.planner-tool-button:disabled { opacity: .45; cursor: not-allowed; }
.planner-tool-button svg { width: 14px; height: 14px; }
.planner-density {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}
.planner-density > span {
  padding: 0 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.planner-density button {
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.planner-density button:hover { color: var(--ink); }
.planner-density button.active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(26, 26, 26, .1); }
.planner-key { width: 14px; height: 10px; border-radius: 3px; }
.planner-key.planned { border: 1px dashed var(--accent); background: var(--accent-soft); }
.planner-key.actual { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 22%, #fff); }
.planner-key.gap {
  border: 1px dashed var(--orange);
  background: repeating-linear-gradient(135deg, var(--orange-soft) 0 3px, #fff 3px 6px);
}

.planner-shell {
  height: var(--planner-shell-height, min(72vh, 760px));
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  scrollbar-color: var(--muted-2) var(--surface-raised);
  scrollbar-width: thin;
}

/* The week remains wide enough for overlapping cards, while the inner shell owns
   vertical scrolling so the date header and time rail can remain visible. */
.planner-grid {
  --planner-hour-height: 56px;
  --planner-half-hour-height: 28px;
  --planner-day-height: calc(var(--planner-hour-height) * 24);
  min-width: 1060px;
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(140px, 1fr));
  grid-template-rows: 64px var(--planner-day-height);
}
@media (min-width: 1500px) {
  .planner-grid { min-width: 100%; }
}
@media (min-width: 1181px) and (max-width: 1499px) {
  .planner-grid {
    min-width: 100%;
    grid-template-columns: 64px repeat(7, minmax(0, 1fr));
  }
}

.planner-head {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
}
.planner-head.corner { left: 0; z-index: 30; background: var(--surface); }
.planner-head span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.planner-head strong { margin-top: 4px; font-size: 16px; color: var(--ink); }
.planner-head.today { background: var(--accent-soft); }
.planner-head.today strong {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
}

.planner-time-rail {
  position: sticky;
  left: 0;
  z-index: 15;
  height: var(--planner-day-height);
  border-inline-end: 1px solid var(--line);
  background: var(--surface-raised);
}
.planner-time-rail span {
  position: absolute;
  top: var(--time-position);
  inset-inline: 0;
  padding-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.planner-day {
  position: relative;
  height: var(--planner-day-height);
  border-inline-end: 1px solid var(--line);
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--planner-hour-height) - 1px), var(--line) calc(var(--planner-hour-height) - 1px) var(--planner-hour-height)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--planner-half-hour-height) - 1px), rgba(104, 100, 95, .12) calc(var(--planner-half-hour-height) - 1px) var(--planner-half-hour-height));
}
.planner-day.today { background-color: color-mix(in srgb, var(--accent-soft) 35%, #fff); }
.planner-now-line {
  position: absolute;
  z-index: 8;
  top: var(--now-position);
  inset-inline: 0;
  border-top: 1px solid var(--red);
  pointer-events: none;
}
.planner-now-line i {
  position: absolute;
  top: -4px;
  inset-inline-start: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

/* The button is the union of the scheduled and actual windows. Its two internal
   layers preserve both clocks without drawing a duplicate shift. */
.shift-card {
  position: absolute;
  z-index: 3;
  top: calc(var(--shift-top) + 2px);
  left: calc(4px + (100% - 8px) / var(--lanes, 1) * var(--lane, 0));
  width: calc((100% - 8px) / var(--lanes, 1));
  height: max(28px, calc(var(--shift-height) - 4px));
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transition: box-shadow .14s ease, filter .14s ease;
}
.shift-card-planned,
.shift-card-actual {
  position: absolute;
  z-index: 0;
  inset-inline: 1px;
  border-radius: 6px;
  pointer-events: none;
}
.shift-card-planned {
  top: var(--planned-top);
  height: max(2px, var(--planned-height));
  border: 1px dashed color-mix(in srgb, var(--shift-color) 72%, #fff);
  background: color-mix(in srgb, var(--shift-color) 8%, #fff);
}
.shift-card-has-gap .shift-card-planned {
  border-color: var(--orange);
  background: repeating-linear-gradient(135deg, var(--orange-soft) 0 5px, #fff 5px 10px);
}
.shift-card-actual {
  z-index: 1;
  top: var(--actual-top);
  height: max(2px, var(--actual-height));
  inset-inline: 3px;
  border: 1px solid color-mix(in srgb, var(--shift-color) 72%, #fff);
  background: color-mix(in srgb, var(--shift-color) 20%, #fff);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shift-color) 16%, transparent);
}
.shift-card-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  overflow: hidden;
  padding: 7px 9px;
}
.shift-card-labels { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.shift-type-tag,
.shift-state-tag {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--shift-color) 42%, var(--line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--shift-color) 10%, #fff);
  color: color-mix(in srgb, var(--shift-color) 84%, var(--ink));
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.shift-state-tag { border-color: var(--line); background: rgba(255,255,255,.82); color: var(--muted); }
.shift-state-tag.now { border-color: color-mix(in srgb, var(--mint) 35%, var(--line)); background: var(--mint-soft); color: var(--mint); }
.shift-state-tag.needs-finish { border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); background: var(--orange-soft); color: var(--orange); }
.shift-card-content > strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shift-card-content small {
  display: flex;
  align-items: baseline;
  gap: 5px;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shift-card-content small > span {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.shift-card-time { color: var(--ink) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.shift-card-planned-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.shift-card-variance {
  display: block !important;
  color: var(--orange) !important;
  font-weight: 750;
  line-height: 1.25 !important;
  white-space: normal !important;
}
.shift-card:hover { z-index: 9; filter: saturate(1.08); box-shadow: 0 6px 18px rgba(26, 26, 26, .14); }
.shift-card:focus-visible { z-index: 10; }
.shift-card-tight .shift-card-content { padding-inline: 6px; }
.shift-card-tight .shift-card-planned-time,
.shift-card-tight .shift-card-meta,
.shift-card-tight .shift-card-variance,
.shift-card-compact .shift-card-meta,
.shift-card-compact .shift-card-variance { display: none !important; }
.shift-card-tight .shift-state-tag:not(.now):not(.needs-finish) { display: none; }
.shift-card-short .shift-card-time,
.shift-card-short .shift-card-planned-time,
.shift-card-short .shift-card-meta,
.shift-card-short .shift-card-variance { display: none; }
.shift-card-short .shift-card-content { justify-content: center; gap: 2px; padding-block: 3px; }
.shift-card-short .shift-card-content > strong { font-size: 11.5px; }
.shift-card-cancelled { opacity: .58; }
.shift-card-missed .shift-card-planned,
.shift-card-unverified .shift-card-planned {
  border-color: var(--red);
  background: repeating-linear-gradient(135deg, var(--red-soft) 0 5px, #fff 5px 10px);
}
.shift-card-needs_finish .shift-card-planned,
.shift-card-needs_finish .shift-card-actual {
  border-color: var(--orange);
  background: repeating-linear-gradient(135deg, var(--orange-soft) 0 5px, #fff 5px 10px);
}

/* Fit compresses only the time axis. Cards retain readable text and hit areas,
   while their visual layers continue to mark exact scheduled and worked time. */
.planner-shell[data-density="fit"] .planner-time-rail span:nth-child(even) { display: none; }
.planner-shell[data-density="fit"] .shift-card-content { gap: 2px; padding: 5px 7px; }
.planner-shell[data-density="fit"] .shift-card-labels,
.planner-shell[data-density="fit"] .shift-card-planned-time,
.planner-shell[data-density="fit"] .shift-card-meta,
.planner-shell[data-density="fit"] .shift-card-variance { display: none !important; }
.planner-shell[data-density="fit"] .shift-card-roomy .shift-card-labels { display: flex !important; }
.planner-shell[data-density="fit"] .shift-state-tag:not(.now):not(.needs-finish) { display: none; }
.planner-shell[data-density="fit"] .shift-card-content > strong { font-size: 12px; }
.planner-shell[data-density="fit"] .shift-card-time { font-size: 10.5px; }
.planner-shell[data-density="comfortable"] .shift-card-content { padding: 6px 8px; }

/* Data Tables & Ledger */
.table-panel { overflow: hidden; }
.table-tools {
  justify-content: space-between;
  padding: 16px 20px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.table-tools .filter-search { max-width: 320px; background: var(--surface); }
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #f7f6f2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}

.data-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .14s ease; }
.data-table tbody tr:hover { background: #faf8f5; }

.data-table .primary-cell { display: flex; align-items: center; gap: 10px; }
.table-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  background: var(--accent);
}

.cell-stack strong, .cell-stack small { display: block; }
.cell-stack strong { font-size: 13px; color: var(--ink); }
.cell-stack small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.money-cell { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
/* The figure the row exists for. Accent, not a one-off hex: the earlier
   #e6a760 sat at 1.9:1 on white and the gross column was literally white. */
.money-strong, .data-table td.money-strong { color: var(--accent); }
.cell-muted { color: var(--muted-2); }
.align-right { text-align: right !important; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.row-action {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .16s ease;
}

.row-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.row-action.danger {
  color: var(--red);
  border-color: rgba(220, 75, 97, 0.3);
}

.row-action.danger:hover {
  background: var(--red-soft);
  border-color: var(--red);
}

/* Forms, Inputs & Fields */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 10px 24px 24px;
}

.field { display: grid; gap: 8px; min-width: 0; }
.field > small, .field-help, .section-help {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.section-help { margin: 0 0 16px; }
.form-grid + .section-help { margin-top: 16px; }
.field > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-input);
  color: var(--ink);
  outline: 0;
  font-size: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.field textarea {
  min-height: 90px;
  padding-top: 12px;
  resize: vertical;
}

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 90, 43, .15);
}

.form-grid > .span-2 { grid-column: span 2; min-width: 0; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 40px; }
.input-suffix > span {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 13px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* Destructive actions sit apart from the confirming one, so a mis-tap on a
   crowded row cannot delete a shift the operator meant to start. */
.form-actions .button-danger { margin-right: auto; }

.earnings-date-error { flex: 1 0 100%; }

/* The quick-action button is a thumb-zone affordance; above phone widths the
   sidebar and page actions already cover it. */
.mobile-fab { display: none; }

/* Overflow action menu.

   Opens upward because it lives in a drawer footer pinned to the bottom of the
   viewport, where a downward menu would be clipped. */
.action-overflow { position: relative; margin-right: auto; }
.action-overflow-trigger { display: inline-flex; align-items: center; gap: 8px; }
.action-overflow-trigger svg { width: 16px; height: 16px; }

.action-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 232px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(26, 26, 26, .14);
}

.action-overflow.open .action-menu { display: flex; }

.action-menu button {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.action-menu button:hover { background: var(--surface-raised); }
/* Destructive entries sit last and read as destructive before they are pressed. */
.action-menu button.danger { color: var(--red); }
.action-menu button.danger:hover { background: var(--red-soft); }
/* Drawers & Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(26, 26, 26, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.drawer {
  position: fixed;
  z-index: 60;
  inset: 0 0 0 auto;
  width: min(620px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  border-left: 1px solid var(--line);
  transform: translateX(105%);
  /* A closed drawer keeps its last contents in the DOM. Left merely translated
     off-canvas it stayed reachable by a sideways pan on a phone, so the
     previously edited record ("Edit <name>") appeared to bleed onto unrelated
     pages. Hiding it also takes its controls out of the tab order. */
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--panel-close-dur) var(--panel-ease), visibility 0s linear var(--panel-close-dur);
  will-change: transform;
}

.drawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--panel-open-dur) var(--panel-ease), visibility 0s;
}
.drawer-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.drawer-head h2 { margin: 4px 0 0; font-size: 20px; }
.drawer-body {
  overflow-y: auto;
  flex: 1;
  padding: 24px 28px 40px;
}

.drawer-section { margin-bottom: 24px; }
.drawer-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
}

.drawer-section-title span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.drawer-form .form-grid { padding: 0; }
/* Inline section actions must stay with their fields, separate from the drawer footer. */
.drawer-section > .form-grid + .button,
.correction-submit { margin-top: 16px; }
.history-section { padding-top: 24px; border-top: 1px solid var(--line); }
.correction-form { display: grid; justify-items: start; }
.correction-form > .form-grid { width: 100%; }
.correction-list, .assignment-list, .token-balance-list, .allocation-lines {
  display: grid;
  gap: 12px;
}
.token-balance-row + .token-balance-row { padding-top: 20px; border-top: 1px solid var(--line); }
.token-balance-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 12px; }
.token-balance-head small { color: var(--muted); overflow-wrap: anywhere; }
.template-list, .evidence-list { display: grid; gap: 12px; margin-top: 16px; }
.template-row, .evidence-row, .correction-card {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.template-row, .evidence-row, .correction-card-head, .correction-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.template-row > span:first-child, .evidence-row > span:nth-child(2), .correction-card-head > span:first-child {
  display: grid;
  flex: 1 1 200px;
  min-width: 0;
  gap: 4px;
}
.template-row small, .evidence-row small, .correction-card-head small { color: var(--muted); font-size: 12px; }
.evidence-row > span:first-child { flex: 0 0 20px; }
.evidence-row svg { width: 20px; height: 20px; }
.evidence-add { margin-top: 16px; }
.correction-card dl { display: grid; gap: 12px; margin-block: 16px; }
.correction-card dl > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.correction-card dt { color: var(--muted); }
.correction-card dd { margin: 0; font-variant-numeric: tabular-nums; }
.correction-actions { justify-content: flex-end; margin-top: 16px; }
.import-preview-list { display: grid; gap: 12px; }
.import-preview-row { display: grid; gap: 4px; padding-block: 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.import-preview-row small { color: var(--muted); }
.import-preview-row.invalid small { color: var(--red); }
/* .drawer-actions is the same row in a drawer that has no <form> — a settlement
   review, a commission, a cleared ledger entry. It used to be five copies of an
   inline "margin:25px -25px -35px", which assumed the desktop drawer padding:
   against the 18px phone padding the row ran 7px past both edges and made the
   whole drawer body scroll sideways. */
.drawer-form .form-actions, .drawer-actions {
  position: sticky;
  bottom: -40px;
  margin: 28px -28px -40px;
  padding: 16px 28px;
  z-index: 2;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* Calculation & Summary Boxes */
.calc-preview {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.calc-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.calc-preview-head strong { font-size: 13px; color: var(--ink); }
.calc-preview-head small { color: var(--muted); font-size: 11px; }

.calc-lines { padding: 8px 16px; }
.calc-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--muted);
  font-size: 13px;
}

.calc-line strong { color: var(--ink); font-size: 13px; }
.calc-line span { min-width: 0; }
/* Nested detail belongs under its label, not run together with it. */
.calc-line span small {
  display: block;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.45;
}
.calc-line.total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.calc-line.total span, .calc-line.total strong {
  color: var(--accent);
  font-weight: 800;
  font-size: 14px;
}

/* Checkbox options and chatter pairings.

   These classes are used across the creator, shift, settlement and commission
   forms but had no stylesheet rule at all, so they rendered on browser defaults:
   a tiny native checkbox jammed against its label, with the hint text running
   straight on from the bold title ("VAT number verifiedRequired before applying
   EU reverse charge"). */
.assignment-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.assignment-option:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.assignment-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.assignment-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.assignment-option > span, .assignment-option > .pairing-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* The chatter row's identity block is a real <label for> rather than a span,
   so it has to carry the pointer the surrounding div cannot. */
.pairing-identity { cursor: pointer; }

.assignment-option strong { color: var(--ink); font-size: 13px; font-weight: 700; }
/* The hint belongs under the title, not run together with it. */
.assignment-option small { color: var(--muted); font-size: 11.5px; line-height: 1.5; }

.pairing-assignment {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
}

.pairing-assignment > span:first-of-type, .pairing-assignment > .pairing-identity { flex: 1 1 150px; }
/* Stacked fields: the label sits above its control, and the rate keeps its % on the same line as the input. */
.pairing-scope, .pairing-rate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 0 0 auto;
}

.pairing-rate-input { display: flex; align-items: center; gap: 6px; }
.pairing-scope > span, .pairing-rate-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pairing-scope select, .pairing-rate input {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-input);
  color: var(--ink);
  font-size: 13px;
}

.pairing-rate input { width: 78px; text-align: right; }
.pairing-rate b { color: var(--muted); font-size: 12px; }
/* Loading veil.

   Dims whatever is already on screen rather than replacing it, so the reader
   can see that the figures underneath are the previous ones and not current. */
.is-loading { position: relative; }
.loading-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
.metric-note {
  margin: -8px 0 4px;
  max-width: 96ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
/* Accounting Specific */
.accounting-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 340px;
  gap: 18px;
}

.tax-panel { align-self: start; }
/* hydrateIcons() renders the svg INSIDE the [data-icon] span, so a direct-child
   selector never matched: the VAT snapshot shield had a 0x0 box and drew at its
   raw 16x20 path size, outside layout. */
.tax-panel .panel-head svg { width: 24px; height: 24px; color: var(--accent); }
.tax-lines { padding: 0 24px 14px; }
.cash-group-title { margin: 24px 0 2px; color: var(--ink); font-size: 13px; font-weight: 750; }
.cash-group-title:first-child { margin-top: 0; }
.cash-group-note { margin: 12px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cash-status-details summary { cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 650; padding: 8px 0; }
.cash-status-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#owner-cash-exposure .tax-line { gap: 16px; }
#owner-cash-exposure .tax-line > span { min-width: 0; }
#owner-cash-exposure .tax-line > strong { flex-shrink: 0; text-align: right; }
.panel-note {
  margin: 0;
  padding: 0 24px 20px;
  max-width: 75ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.tax-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.tax-line strong { color: var(--ink); font-size: 13px; }
.tax-line.total { border-bottom: 0; }
.tax-line.total strong { color: var(--accent); font-size: 16px; font-weight: 800; }

.contract-note {
  display: flex;
  gap: 12px;
  margin: 12px 18px 18px;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--ink);
}

.contract-note svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.contract-note p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.contract-note strong { display: block; margin-bottom: 4px; color: var(--accent); font-size: 13px; }

.contract-note.shift-start-lock,
.contract-note.shift-finish-required {
  border-color: color-mix(in srgb, var(--orange) 40%, var(--line));
  background: var(--orange-soft);
}
.contract-note.shift-start-lock svg,
.contract-note.shift-finish-required svg,
.contract-note.shift-start-lock strong,
.contract-note.shift-finish-required strong { color: var(--orange); }

.platform-balance-disclaimer { margin-inline: 0; }
#view-balances .data-table td { vertical-align: top; }
#view-balances .money-cell > small { display: block; margin-top: 4px; color: var(--muted); font-weight: 500; }

.balance-history-list { display: grid; gap: 10px; }
.balance-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.balance-history-item > div:last-of-type { text-align: right; }
.balance-history-item strong { display: block; color: var(--ink); font-size: 13px; }
.balance-history-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.balance-history-item p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.model-balance-preview { min-height: 84px; }
.model-balance-list-title { margin-top: 22px; }
.model-balance-warning { margin-top: 14px; }
.model-balance-warning p { overflow-wrap: anywhere; }

/* Settings View */
.settings-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 780px);
  gap: 24px;
}

.settings-nav { min-width: 0; display: grid; align-content: start; gap: 4px; }
.settings-nav button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: all .16s ease;
}

.settings-nav button:hover { background: var(--surface-raised); color: var(--ink); }
.settings-nav button.active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 750;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* An implicit `auto` track floors at min-content just as `1fr` does, so
   min-width:0 on the container alone did not stop the settings panels from
   forcing the column to 524px on a 375px screen. */
.settings-content { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); }
.settings-section-head {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.deployment-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--card-gap);
  padding: 24px;
}

.deployment-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.deployment-icon svg { width: 22px; height: 22px; }
/* min-width:0, or the description's min-content plus the nowrap status pill
   push the card past a phone's width. */
.deployment-card > div:nth-child(2) { flex: 1 1 200px; min-width: 0; }
/* A domain has no break opportunity, so min-width: 0 alone does not save the
   card: management.spacemanagementagency.com needed 307px in a 244px box. */
.deployment-card h2 { font-size: 15px; margin: 4px 0 6px; overflow-wrap: anywhere; }
.deployment-card p:not(.panel-kicker) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Command Palette */
.command-palette {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding-top: min(15vh, 120px);
  background: rgba(26, 26, 26, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--modal-close-dur) var(--modal-ease);
}

.command-palette.is-open {
  opacity: 1;
  pointer-events: auto;
  transition-duration: var(--modal-open-dur);
}

.command-box {
  width: min(600px, calc(100% - 32px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-lg);
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity var(--modal-close-dur) var(--modal-ease);
}

.command-search {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.command-search svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.command-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
}

.command-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
}

.command-group-label {
  padding: 10px 12px 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.command-item {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--modal-close-dur) ease, border-color var(--modal-close-dur) ease;
}

.command-item:hover, .command-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.command-item .avatar { width: 32px; height: 32px; border-radius: 6px; font-size: 11px; }
.command-item > span { flex: 1; min-width: 0; }
.command-item strong { display: block; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-item > svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }

/* Toast Notifications */
.toast-stack {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  display: grid;
  gap: 10px;
}

.toast {
  min-width: 300px;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

.toast > span:first-child {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--mint-soft);
  color: var(--mint);
}

.toast svg { width: 16px; height: 16px; }
.toast strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.toast small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* Actionable Empty States */
/* .data-table sets white-space: nowrap, which a colspan empty state inherits:
   the explanation rendered as one 736px line inside a 380px box and gave an
   empty table a horizontal scrollbar. */
.data-table td[colspan], .empty-state { white-space: normal; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
}

.empty-state > .empty-icon, .empty-state > span:first-child {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--accent);
  border: 1px solid var(--line);
}

.empty-state > .empty-icon svg, .empty-state > span:first-child svg {
  width: 22px;
  height: 22px;
}

.empty-state strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.empty-state p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  max-width: 380px;
  line-height: 1.5;
}

.empty-state .button { margin-top: 4px; }

/* Earnings & Analytics Styles */
.attribution-panel {
  margin: 20px 0 24px;
  overflow: hidden;
}

.attribution-head {
  align-items: flex-start;
  gap: 20px;
}

.attribution-head h2 { margin: 0; }
.attribution-head p {
  max-width: 68ch;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.attribution-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.attribution-actions .filter-pills { flex: 0 0 auto; }
.attribution-actions .button svg { width: 16px; height: 16px; }

.attribution-reconciliation {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.attribution-reconciliation > span {
  min-width: 0;
  flex: 1 1 0;
  padding: 14px 20px;
}

.attribution-reconciliation > span + span { border-left: 1px solid var(--line); }
.attribution-reconciliation small,
.attribution-reconciliation strong { display: block; }
.attribution-reconciliation small {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}
.attribution-reconciliation strong {
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.attribution-list {
  display: grid;
  max-height: 680px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
}

.attribution-card {
  min-width: 0;
  background: var(--surface);
}

.attribution-card + .attribution-card { border-top: 1px solid var(--line); }
.attribution-card-head,
.attribution-card-foot,
.attribution-platform-summary,
.attribution-platform-row,
.model-reserve-row {
  min-width: 0;
}

.attribution-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
}

.attribution-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.attribution-person .avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  font-size: 10px;
}
.attribution-person > span:last-child { min-width: 0; }
.attribution-person strong,
.attribution-person small { display: block; }
.attribution-person strong { color: var(--ink); }
.attribution-person small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.attribution-card-totals {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, auto);
  gap: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.attribution-card-totals small,
.attribution-card-totals strong { display: block; }
.attribution-card-totals small,
.attribution-value small,
.attribution-reserve small,
.model-reserve-row small,
.attribution-card-foot small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.attribution-card-totals strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
}
.attribution-card-totals .reserve-total strong { color: var(--accent-dark); }

.attribution-platform-list,
.attribution-platform-groups { border-top: 1px solid var(--line); }
.attribution-platform-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) repeat(2, minmax(130px, 0.45fr));
  align-items: center;
  gap: 20px;
  padding: 15px 20px;
}
.attribution-platform-row + .attribution-platform-row { border-top: 1px solid var(--line); }
.attribution-platform-name,
.attribution-value,
.attribution-reserve { min-width: 0; }
.attribution-platform-name strong,
.attribution-platform-name small,
.attribution-value small,
.attribution-value strong,
.attribution-reserve small,
.attribution-reserve strong { display: block; }
.attribution-platform-name strong { color: var(--ink); font-size: 13px; }
.attribution-platform-name small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.attribution-value,
.attribution-reserve {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.attribution-value strong,
.attribution-reserve strong { margin-top: 4px; color: var(--ink); }
.attribution-reserve strong { color: var(--accent-dark); }

.attribution-platform-group + .attribution-platform-group { border-top: 1px solid var(--line); }
.attribution-platform-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(230px, auto);
  align-items: center;
  gap: 24px;
  padding: 15px 20px;
  background: var(--surface-raised);
}
.model-reserve-list { padding: 0 20px; }
.model-reserve-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(135px, 0.75fr));
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  font-variant-numeric: tabular-nums;
}
.model-reserve-row + .model-reserve-row { border-top: 1px solid var(--line); }
.model-reserve-row > div,
.model-reserve-row > span { min-width: 0; }
.model-reserve-row strong,
.model-reserve-row small { display: block; }
.model-reserve-row > div strong { color: var(--ink); }
.model-reserve-row > div small { margin-top: 3px; }
.model-reserve-row > span { text-align: right; }
.model-reserve-row > span strong { margin-top: 4px; color: var(--ink); }
.model-reserve-row > span:first-of-type strong { color: var(--accent-dark); }

.attribution-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
  font-variant-numeric: tabular-nums;
}
.attribution-card-foot > span > small,
.attribution-card-foot > span > strong { display: block; }
.attribution-card-foot > span > strong { margin-top: 3px; color: var(--ink); }
.attribution-card-foot .payment-stack { align-items: flex-start; min-width: 0; }
.attribution-payment-heading { display: block; margin-bottom: 4px; color: var(--muted); font-weight: 700; }
.attribution-payment-state { min-width: 0; }
.attribution-payment-state > small { display: block; margin-top: 5px; }
.attribution-payment-button { flex: 0 0 auto; }
.attribution-no-platform { margin: 0; padding: 18px 20px; }
.attribution-empty { padding: 8px 20px; }

.commission-ledger-list { display: grid; gap: 10px; }
.commission-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.commission-ledger-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  min-width: 0;
}
.commission-ledger-main > span { min-width: 0; }
.commission-ledger-main strong,
.commission-ledger-main small { display: block; }
.commission-ledger-main strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.commission-ledger-main small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.commission-ledger-main > span:last-child { text-align: right; }
.commission-ledger-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.platform-contribution,
.payment-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 145px;
  font-variant-numeric: tabular-nums;
}
.platform-contribution strong { color: var(--ink); }
.platform-contribution small,
.payment-stack small,
.payment-stack span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.payment-stack .payment-ready { color: var(--mint); }
.total-share {
  display: inline-flex;
  justify-content: center;
  min-width: 56px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}
.total-share.covered-share {
  background: var(--mint-soft);
  color: var(--mint);
}

.attribution-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.attribution-foot > span {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--accent);
}
.attribution-foot svg { width: 18px; height: 18px; }
.attribution-foot p { margin: 0; font-size: 12px; line-height: 1.55; }
.attribution-foot strong { color: var(--ink); }

.receipt-payroll-panel {
  margin-bottom: 24px;
  overflow: hidden;
}
.receipt-payroll-head {
  align-items: center;
  gap: 18px;
}
.receipt-payroll-head h2,
.receipt-section-head h3 { margin: 0; }
.receipt-payroll-head p,
.receipt-section-head p {
  max-width: 72ch;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.receipt-payroll-head .button svg { width: 16px; height: 16px; }
.receipt-payroll-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
  background: var(--surface-raised);
}
.receipt-payroll-summary > span {
  min-width: 0;
  padding: 16px 20px;
}
.receipt-payroll-summary > span + span { border-inline-start: 1px solid var(--line); }
.receipt-payroll-summary small,
.receipt-payroll-summary strong { display: block; }
.receipt-payroll-summary small {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
}
.receipt-payroll-summary strong {
  color: var(--ink);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.receipt-payroll-summary .payroll-due {
  background: var(--mint-soft);
}
.receipt-payroll-summary .payroll-due small,
.receipt-payroll-summary .payroll-due strong,
.payroll-due-value { color: var(--mint); }
.receipt-payroll-section + .receipt-payroll-section { border-top: 1px solid var(--line); }
.receipt-section-head { padding: 18px 20px 12px; }
.receipt-section-head h3 { color: var(--ink); font-size: 15px; }
.receipt-table { min-width: 900px; }
.chatter-payroll-table { min-width: 1080px; }
.receipt-table th:not(:first-child),
.receipt-table td:not(:first-child) { text-align: right; }
.receipt-table .money-cell small,
.receipt-table td > small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.receipt-table .payment-stack { min-width: 118px; }
.receipt-table .status-pill + small { white-space: normal; }
.receipt-waiting span { white-space: normal; }
.receipt-waiting span small { display: inline; white-space: normal; }
.receipt-payroll-foot { background: var(--surface-raised); }

.earnings-charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}

.chart-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.chart-container {
  padding: 18px 24px 24px;
  flex: 1;
  position: relative;
}

.svg-bar-chart {
  width: 100%;
  height: 240px;
  overflow: visible;
}

.svg-bar {
  transition: opacity .15s ease, filter .15s ease;
  cursor: pointer;
}

.svg-bar:hover {
  opacity: 0.85;
  filter: brightness(1.15);
}

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 20;
  transition: opacity .12s ease;
  white-space: nowrap;
}

.donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.svg-donut {
  width: 180px;
  height: 180px;
  transform: rotate(-90deg);
}

.donut-segment {
  transition: stroke-width .2s ease, opacity .2s ease;
  cursor: pointer;
}

.donut-segment:hover {
  stroke-width: 24;
  opacity: 0.9;
}

.donut-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink);
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

/* SOPs & Knowledge Base */
.sop-tools-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.sops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.sop-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.sop-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.sop-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sop-badge {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
}

.sop-visibility {
  font-size: 11px;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--muted);
}

.sop-card h2, .sop-card h3 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.35;
}

.sop-preview {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.sop-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.sop-card-foot > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sop-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.sop-actions .row-action {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sop-reader-content {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
}

.sop-reader-content h1, .sop-reader-content h2, .sop-reader-content h3 {
  color: var(--ink);
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  font-weight: 700;
}

.sop-reader-content h1 { font-size: 20px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.sop-reader-content h2 { font-size: 17px; }
.sop-reader-content h3 { font-size: 15px; color: var(--accent); }
.sop-reader-content ul, .sop-reader-content ol { padding-left: 20px; margin: 10px 0; }
.sop-reader-content li { margin-bottom: 6px; }
.sop-reader-content code {
  background: var(--surface-raised);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  color: var(--accent);
}

.sop-reader-content pre {
  background: var(--surface-raised);
  padding: 14px;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
}

.sop-dropzone {
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  background: var(--surface-raised);
  cursor: pointer;
  transition: all .16s ease;
  margin-top: 8px;
}

.sop-dropzone.dragover, .sop-dropzone:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.sop-dropzone p { margin: 0; color: var(--muted); font-size: 13px; }
.sop-dropzone strong { color: var(--accent); }
/* The attachment card had markup but no rule, so its filename was styled white
   on the white drawer surface and read as blank. */
.sop-attachment-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.sop-attachment-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sop-attachment-icon { font-size: 20px; line-height: 1; }
.sop-attachment-info strong { font-size: 14px; overflow-wrap: anywhere; }
.sop-attachment-info small { color: var(--muted-2); font-size: 11px; }
.sop-attachment-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sop-attachment-actions .button { min-height: 36px; padding-inline: 12px; }

.sop-pdf-container {
  width: 100%;
  height: 600px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #eae8e2;
  margin-top: 14px;
}

.sop-pdf-frame { width: 100%; height: 100%; border: none; background: #faf9f6; }

/* Custom Date Panel */
.custom-date-panel { padding: 20px 24px; }
.earnings-summary-disclosure > summary {
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 12px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.earnings-summary-disclosure > summary:hover { color: var(--ink); }
.earnings-summary-disclosure > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.earnings-summary-disclosure:not([open]) > :not(summary) { display: none; }
.custom-date-panel input[type="date"] {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  min-height: 44px;
}

.custom-date-panel input[type="date"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(139, 90, 43, 0.15);
}

/* Quick Add Menu */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: all .16s ease;
}

.quick-card:hover {
  border-color: var(--accent);
  background: var(--surface-raised);
  transform: translateY(-1px);
}

.quick-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.quick-icon svg { width: 18px; height: 18px; }
.quick-card strong { display: block; font-size: 13px; color: var(--ink); }
.quick-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-grid, .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earnings-charts-grid { grid-template-columns: minmax(0, 1fr); }
  .accounting-layout { grid-template-columns: minmax(0, 1fr); }
  .model-reserve-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .model-reserve-row > div { grid-column: 1 / -1; }
}

/* The planner needs the horizontal canvas more than it needs persistent
   navigation. On tablet and small laptops it borrows the sidebar's width and
   keeps the same accessible drawer navigation used at narrower breakpoints. */
@media (min-width: 921px) and (max-width: 1180px) {
  body.planner-expanded { --sidebar-w: 0px; }
  body.planner-expanded .sidebar {
    z-index: 60;
    width: min(84vw, 310px);
    transform: translateX(-102%);
    transition: transform .25s ease;
    box-shadow: 10px 0 30px rgba(0, 0, 0, .2);
  }
  body.planner-expanded .sidebar.open { transform: none; }
  body.planner-expanded .main { margin-left: 0; }
  body.planner-expanded .mobile-menu { display: grid; }
  body.planner-expanded .planner-grid {
    min-width: 100%;
    grid-template-columns: 60px repeat(7, minmax(0, 1fr));
  }
}

@media (pointer: coarse) and (min-width: 769px) {
  .planner-tool-button,
  .planner-density button { min-height: 44px; }
}

@media (max-width: 920px) {
  :root { --sidebar-w: 0px; }
  .sidebar {
    z-index: 60;
    width: min(84vw, 310px);
    transform: translateX(-102%);
    transition: transform .25s ease;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);
  }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .mobile-menu { display: grid; }
  /* Every `1fr` in these responsive overrides is `minmax(0, 1fr)`. A bare
     `1fr` takes its automatic minimum from min-content, so a wide child drags
     the whole column past the viewport: the revenue panel overhung the page by
     31px, and Settings → Workspace was 524px wide inside a 375px screen, which
     is what cut the agency fields off on the right. */
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-summary { flex-wrap: wrap; min-width: 0; }
  .chart-summary strong { font-size: 22px; }
  .search-trigger { width: 44px; padding: 0; justify-content: center; }
  .search-trigger span:nth-child(2), .search-trigger kbd { display: none; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .settings-nav button { white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 768px) {
  /* The 44px touch guideline applies to every control, not only buttons. */
  .filter-pills button { min-height: 44px; height: 44px; }
  .row-action { min-height: 44px; padding: 10px 14px; }
  .segmented button, .agenda-day-tabs button, .more-button { min-height: 44px; }
  .action-overflow, .action-overflow .button { width: 100%; }
  .action-menu { left: 0; right: 0; min-width: 0; }
  .assignment-option { padding: 14px; }
  .assignment-option input[type="checkbox"] { width: 22px; height: 22px; }
  .pairing-scope, .pairing-rate { width: 100%; }
  .pairing-scope select { flex: 1; min-height: 44px; }
  .pairing-rate input { min-height: 44px; }
  /* Prevent iOS focus zoom */
  .field input, .field select, .field textarea, .filter-search input {
    font-size: 16px !important;
  }

  .topbar { height: 64px; padding: 0 16px; gap: 10px; }
  .crumb span, .crumb i { display: none; }
  .top-actions .button span:last-child { display: none; }
  .top-actions .button { width: 44px; padding: 0; }
  .icon-button, .search-trigger { width: 44px; height: 44px; }
  .page { padding: 24px 16px 70px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: var(--stack-lg); gap: 14px; }
  /* flex-basis is the main axis. Once the heading stacks, the 260px basis that
     makes the title share a row on desktop becomes a 260px tall empty block
     between the description and the button. */
  .page-heading > :first-child { flex: 0 1 auto; width: 100%; }
  .heading-actions { width: 100%; flex-wrap: wrap; }
  .heading-actions .button { min-width: 0; flex: 1 1 140px; }
  /* A panel title and its actions cannot share one line at this width: the
     heading wrapped to a word per line while the buttons overflowed the panel
     ("Signed-in devices" on Settings → Security). Stack them instead. */
  .panel-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px 18px 12px;
  }
  .panel-head > .row-actions,
  .panel-head > .heading-actions,
  .panel-head > .segmented { width: 100%; flex-wrap: wrap; }
  .panel-head > .row-actions .button,
  .panel-head > .heading-actions .button { flex: 1 1 150px; min-width: 0; }
  /* Metric cards stay two-up: four full-width cards pushed every panel below
     roughly 600px of scroll, most of it showing zeros. */
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric-card { padding: 14px; }
  .metric-value { font-size: 20px; }
  .metric-top { font-size: 10.5px; letter-spacing: .04em; }
  .metric-foot { font-size: 11px; }
  .metric-icon { display: none; }
  /* Summary cards follow the metric cards: four stacked full-width cards push
     the ledger and statement tables off the first screen. */
  .finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .finance-summary .finance-card { padding: 14px; }
  .attribution-actions { width: 100%; justify-content: stretch; }
  .attribution-actions .filter-pills { flex: 1 1 auto; }
  .attribution-actions .button { flex: 1 1 150px; }
  .attribution-reconciliation { display: grid; grid-template-columns: minmax(0, 1fr); }
  .attribution-reconciliation > span { padding: 12px 18px; }
  .attribution-reconciliation > span + span { border-left: 0; border-top: 1px solid var(--line); }
  .attribution-list { max-height: none; }
  .attribution-card-head,
  .attribution-card-foot { align-items: stretch; flex-direction: column; }
  .attribution-card-totals {
    width: 100%;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    text-align: left;
  }
  .attribution-card-totals > span {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-raised);
  }
  .attribution-platform-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attribution-platform-row .attribution-platform-name { grid-column: 1 / -1; }
  .attribution-value { text-align: left; }
  .attribution-platform-summary { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .attribution-reserve { text-align: left; }
  .model-reserve-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .model-reserve-row > div { grid-column: 1 / -1; }
  .model-reserve-row > span { text-align: left; }
  .model-reserve-row > span:last-child { grid-column: 1 / -1; }
  .attribution-payment-button { width: 100%; }
  .commission-ledger-row { grid-template-columns: minmax(0, 1fr); }
  .commission-ledger-actions { justify-content: flex-start; flex-wrap: wrap; }
  .attribution-foot { padding: 14px 18px; }
  .receipt-payroll-head { align-items: stretch; }
  .receipt-payroll-head .button { width: 100%; }
  .receipt-payroll-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .receipt-payroll-summary > span { padding: 13px 16px; }
  .receipt-payroll-summary > span + span { border-inline-start: 0; }
  .receipt-payroll-summary > span:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .receipt-payroll-summary > span:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .receipt-table,
  .chatter-payroll-table { min-width: 0; }
  .receipt-table th:not(:first-child),
  .receipt-table td:not(:first-child) { text-align: left; }
  .receipt-table .platform-contribution,
  .receipt-table .payment-stack { align-items: flex-start; min-width: 0; }
  .receipt-section-head { padding: 16px 18px 10px; }
  .creator-grid, .team-grid { grid-template-columns: minmax(0, 1fr); }
  
  .toolbar, .planner-controls, .table-tools {
    align-items: stretch;
    flex-direction: column;
    /* Wrapping is a row-direction fix. Once stacked, a wrapping column takes
       its line width from the widest child, so the 380px pill strip stopped
       the search field filling the screen and pushed the toolbar 50px wide. */
    flex-wrap: nowrap;
    gap: 10px;
  }
  
  .filter-search { width: 100%; max-width: none; min-width: 0; }
  .advanced-filters { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .advanced-filters .text-button { justify-self: start; }
  .custom-date-panel { padding: 16px; }
  .custom-date-panel .field { flex: 1 1 160px; }
  .custom-date-panel .button { flex: 1 1 100%; }
  .form-grid { grid-template-columns: minmax(0, 1fr); padding: 10px 16px 20px; }
  .form-grid > .span-2 { grid-column: span 1; }
  .quick-grid { grid-template-columns: minmax(0, 1fr); }
  
  /* Mobile Schedule Agenda Mode */
  .planner-shell { display: none; }
  .planner-agenda { display: block; }
  .date-nav { flex-wrap: wrap; }
  .date-nav strong { order: 4; width: 100%; min-width: 0; margin: 2px 0 0; }
  .planner-legend { overflow-x: auto; padding-block: 2px; scrollbar-width: none; }
  .planner-legend::-webkit-scrollbar { display: none; }
  .planner-summary {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding-block: 6px;
    margin-bottom: 8px;
  }
  .planner-summary > span {
    min-width: 0;
    padding: 6px 12px;
    border-inline-start: 0;
    white-space: normal;
  }
  .planner-summary-title {
    grid-column: 1 / -1;
    padding-top: 2px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--line);
  }
  .planner-summary > span:nth-child(3),
  .planner-summary > span:nth-child(5) { border-inline-start: 1px solid var(--line); }
  .planner-summary > span:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .planner-guide { justify-content: flex-start; margin-bottom: 14px; }
  .planner-guide > strong { width: 100%; margin: 0; }
  .planner-guide-keys { width: 100%; gap: 8px 14px; }
  .planner-desktop-tools { display: none; }
  
  .agenda-day-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 4px;
  }
  .agenda-day-tabs::-webkit-scrollbar { display: none; }
  .agenda-day-tabs button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    display: grid;
    place-items: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
  }
  .agenda-day-tabs button.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }
  .agenda-day-tabs span { font-size: 10px; text-transform: uppercase; font-weight: 700; }
  .agenda-day-tabs strong { font-size: 14px; }

  .agenda-list { display: grid; gap: 8px; }
  .agenda-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 2px;
    margin-bottom: 4px;
  }
  .agenda-heading strong { font-size: 14px; color: var(--ink); }
  .agenda-heading small { color: var(--muted); font-size: 12px; }

  .agenda-shift {
    width: 100%;
    min-height: 86px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--shift-color) 4%, var(--surface));
    text-align: left;
    margin-bottom: 8px;
    cursor: pointer;
  }
  .agenda-shift-gap { border-color: color-mix(in srgb, var(--orange) 48%, var(--line)); }
  .agenda-time { min-width: 0; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
  .agenda-time strong { overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
  .agenda-time small { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
  .agenda-shift-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
  }
  .agenda-shift-labels { display: flex; gap: 4px; max-width: 100%; }
  .agenda-shift-copy > strong {
    font-size: 13px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .agenda-shift-copy > small {
    color: var(--muted);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .agenda-shift-copy .agenda-planned { font-variant-numeric: tabular-nums; }
  .agenda-shift-side { display: grid; justify-items: end; gap: 6px; max-width: 132px; }
  .agenda-shift-side > small { color: var(--orange); font-size: 10.5px; font-weight: 700; line-height: 1.25; text-align: right; }

  /* Full-width Drawers on Mobile */
  .drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    inset: 0 0 0 0 !important;
  }
  .drawer-head { min-height: 64px; padding: 14px 18px; }
  .drawer-body {
    padding: 20px 18px calc(var(--drawer-footer-height, 86px) + 24px);
    scroll-padding-bottom: calc(var(--drawer-footer-height, 86px) + 24px);
  }
  .drawer-form .form-actions, .drawer-actions, .shift-detail-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 70;
    margin: 0;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
    gap: 10px;
  }
  .drawer-form .form-actions .button, .drawer-actions .button, .shift-detail-actions .button {
    flex: 1 1 calc(50% - 10px);
  }

  /* Responsive Table-to-Card Transformation */
  .table-panel { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .table-tools, .table-panel > .panel-head {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .table-tools { margin-bottom: 12px; }
  .data-table-wrap { overflow: visible; }
  .data-table { display: block; white-space: normal; }
  .data-table thead { display: none; }
  .data-table tbody { display: grid; gap: 12px; }
  .data-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .data-table tbody tr:hover { background: var(--surface); }
  .data-table td {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .data-table td::before {
    /* Without content the pseudo-element never renders, which left every stacked
       table row showing bare values: two money columns and no way to tell which
       was net receipts and which was the agency fee. */
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3;
  }
  .data-table td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .data-table td:last-child {
    grid-column: 1 / -1;
    padding-top: 8px;
  }

  /* The action button already names itself; an "ACTIONS" label above it is noise. */
  .data-table td:last-child::before { content: none; }
  .data-table td[colspan] { grid-column: 1 / -1; padding: 0; border: 0; }
  .data-table td[colspan]::before { content: none !important; }
  .row-actions { justify-content: stretch; gap: 8px; }
  .row-action { flex: 1; text-align: center; }

  /* Mobile FAB */
  .mobile-fab {
    display: grid !important;
    place-items: center;
    position: fixed;
    right: 20px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    border: 0;
    box-shadow: 0 4px 18px rgba(139, 90, 43, 0.35);
    z-index: 40;
    cursor: pointer;
    transition: transform .18s ease;
  }
  .mobile-fab:active { transform: scale(0.92); }
  .mobile-fab svg { width: 24px; height: 24px; stroke-width: 2.2; }

  .toast-stack {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    left: 14px;
  }
  .toast { width: 100%; min-width: 0; }
  .sop-pdf-container { height: 420px; }
}

/* Only the narrowest phones genuinely run out of width for a two-up stacked
   row. Keeping two columns at 375px+ roughly halves the height of every card —
   a shift row was 431px tall, one record per screen. */
@media (max-width: 340px) {
  .data-table tbody tr { grid-template-columns: minmax(0, 1fr); }
  .data-table td, .data-table td:first-child, .data-table td:last-child { grid-column: 1; }
}

@media (max-width: 480px) {
  .balance-history-item { grid-template-columns: minmax(0, 1fr); }
  .balance-history-item > div:last-of-type { text-align: left; }
  .commission-ledger-main { grid-template-columns: minmax(0, 1fr); }
  .commission-ledger-main > span:last-child { text-align: left; }
  .drawer-form .form-actions .button, .drawer-actions .button, .shift-detail-actions .button { flex-basis: 100%; }
  .agenda-shift {
    grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
    align-items: start;
    gap: 9px 12px;
  }
  .agenda-time {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .agenda-time strong { overflow: visible; text-overflow: clip; white-space: normal; }
  .agenda-shift-copy { grid-column: 1; }
  .agenda-shift-side { grid-column: 2; width: auto; max-width: 122px; }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: top .16s ease;
}

.skip-link:focus { top: 8px; }

/* Printing.

   Statements and invoices are generated server-side as PDFs, but somebody will
   press Ctrl+P on a settlement sooner or later. Without this they get the
   sidebar, the top bar and every button printed around the figures. */
@media print {
  .sidebar,
  .topbar,
  .mobile-fab,
  .skip-link,
  .drawer,
  .modal-backdrop,
  .toast-stack,
  .command-palette,
  .form-actions,
  .row-actions,
  .heading-actions,
  .table-tools,
  .action-overflow { display: none !important; }

  .shell, .main, .page { display: block; margin: 0; padding: 0; max-width: none; }
  body { background: #fff; color: #000; }

  .panel, .metric-card, .finance-card, .creator-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  /* A stacked card layout wastes a printed page; keep tables as tables. */
  .data-table { width: 100%; border-collapse: collapse; }
  .data-table td, .data-table th { display: table-cell; padding: 6px 8px; border-bottom: 1px solid #ddd; }
  .data-table td::before { content: none !important; }
  .data-table thead { display: table-header-group; }
  .data-table tr { break-inside: avoid; }

  /* A URL after every link is noise when the page is a financial record. */
  a[href]::after { content: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .t-modal, .t-toast { transition: none !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* The withdrawal figure is needed on a small minority of shifts, so it folds away
   by default and the three balances that are always filled in keep the eye. It
   opens itself whenever a shift actually carries a withdrawal, so a recorded
   value is never hidden behind a closed disclosure. */
.token-adjustment { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }

.token-adjustment > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  list-style: none;
  padding: 4px 0;
}

.token-adjustment > summary::-webkit-details-marker { display: none; }

.token-adjustment > summary::before {
  content: '+';
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
}

.token-adjustment[open] > summary::before { content: '−'; }
.token-adjustment > summary:hover { color: var(--ink); }
.token-adjustment > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.token-adjustment-hint {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Giving a direct child of <details> its own display value overrides the way the
   user agent hides closed content, which left this panel permanently expanded.
   The field is wrapped instead, and the closed state is asserted here rather than
   relied upon. */
.token-adjustment:not([open]) > *:not(summary) { display: none; }
.token-adjustment-body { margin-top: 10px; max-width: 320px; }
.token-adjustment-help { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }

/* Both summary lines carried no styling at all, so the label and its figure ran
   together as "Net earned1,000 tokens". They are a label/value pair: the caption
   sits left, the figure right, and the digits are tabular so the amounts under a
   multi-account shift line up with each other. */
.token-calculation {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-size: 13px;
}

.token-calculation > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.token-calculation > strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.token-calculation.total {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.token-calculation.total > strong { color: var(--accent); font-size: 15px; }

/* A deletion that destroys financial records should not look like an ordinary
   confirmation, so its note carries the danger colour and lists what goes. */
.contract-note.danger-note {
  border-color: var(--red);
  background: var(--red-soft);
}

.deletion-impact {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

.deletion-impact li::marker { color: var(--red); }

/* A group id can only be verified by asking Telegram, so the answer sits with
   the field rather than in a toast that disappears. */
.field-inline-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.field-inline-result { font-size: 12px; line-height: 1.5; }
.field-inline-result[data-state="pending"] { color: var(--muted); }
.field-inline-result[data-state="good"] { color: var(--mint); font-weight: 600; }
.field-inline-result[data-state="bad"] { color: var(--red); font-weight: 600; }

/* Audit repairs: retain every field and action while making the primary work readable. */
.creator-identity p { overflow-wrap: anywhere; }
.creator-card-head .more-button { flex: 0 0 38px; }
#view-overview > .attention-panel { margin-bottom: 24px; }
#view-overview > .attention-panel .attention-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.payout-batch-empty .data-table-wrap { display: none; }
.payout-batch-empty .panel-head { padding-block: 16px; }
.payout-batch-empty .panel-head p:not(.panel-kicker) { max-width: 65ch; }
.platform-account-disclosure { border: 1px solid var(--line); border-radius: 8px; margin-block: 12px; }
.platform-account-disclosure > summary { padding: 14px; cursor: pointer; font-weight: 700; }
.platform-account-disclosure .platform-account-row { display: grid; gap: 16px; padding: 4px 14px 16px; border: 0; }
.platform-account-disclosure:not([open]) > :not(summary) { display: none; }
.platform-account-terms { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 12px; }
.platform-account-terms.infloww-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-active { display: flex; align-items: center; gap: 10px; min-height: 44px; width: fit-content; cursor: pointer; }
.account-active input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.field-label { display: block; margin-bottom: 12px; color: var(--muted); font-size: 12px; font-weight: 700; }
.platform-account-note { margin: 0; }
@media (max-width: 480px) {
  .platform-account-terms, .platform-account-terms.infloww-fields { grid-template-columns: minmax(0, 1fr); }
}
.platform-account-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.planner-shell[data-density="fit"] .shift-card-content { justify-content: flex-start; padding: 3px 5px; }
.planner-shell[data-density="fit"] .shift-card:not(.shift-card-roomy) .shift-card-time { display: none; }
.planner-shell[data-density="fit"] .shift-card-content > strong { line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 769px) {
 #view-accounting .data-table .status-pill, #view-balances .data-table .status-pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
 .accounting-layout { grid-template-columns: minmax(0, 1fr); }
 #view-accounting .data-table, #view-balances .data-table { width: 100%; table-layout: fixed; }
 #view-accounting .data-table td, #view-accounting .data-table th,
 #view-balances .data-table td, #view-balances .data-table th { padding: 12px 10px; white-space: normal; overflow-wrap: anywhere; }
 #view-accounting .data-table th:nth-child(2) { width: 25%; }
 #view-accounting .data-table .row-actions, #view-balances .data-table .row-actions { flex-wrap: wrap; }
}

/* Audit details can be long; they must not take width from the action label. */
.data-table-activity td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; line-height: 1.6; }
.data-table-activity .status-pill { width: fit-content; max-width: 100%; white-space: normal; overflow-wrap: normal; word-break: normal; }
.data-table-activity .status-pill::before { flex-shrink: 0; }
@media (min-width: 769px) {
  .data-table-activity { table-layout: fixed; min-width: 800px; }
  .data-table-activity th:nth-child(1) { width: 180px; }
  .data-table-activity th:nth-child(2) { width: 110px; }
  .data-table-activity th:nth-child(3) { width: 180px; }
  .data-table-activity th:nth-child(4) { width: 140px; }
}
@media (max-width: 768px) {
  .data-table-activity td[data-label="Action"] { grid-column: 1 / -1; }
  .data-table-activity td[data-label="Details"]::before { content: attr(data-label); }
}

/* Task-focused views and progressive disclosure. */
.density-details { margin: 16px 0; border-top: 1px solid var(--line); padding-top: 8px; }
.density-details > summary, .inline-help > summary { cursor: pointer; color: var(--ink); font-weight: 600; padding: 12px 0; min-height: 44px; }
.density-details > summary:focus-visible, .inline-help > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.density-details > .panel { margin-top: 16px; }
.dashboard-grid > .density-details { grid-column: 1 / -1; }
.inline-help { font-size: 13px; color: var(--muted); }
.inline-help p { max-width: 72ch; line-height: 1.6; }
.density-switcher { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.density-switcher button { font: inherit; min-height: 44px; padding: 10px 18px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; }
.density-switcher button[aria-pressed="true"] { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 700; }
.density-switcher button:hover { background: var(--accent-soft); }
.density-switcher button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.earnings-section[hidden] { display: none !important; }
.earnings-section > * { margin-bottom: 18px; }
.density-checkbox { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; }
#view-earnings > .page-heading { flex-wrap: wrap; gap: 12px; }
#view-earnings > .page-heading > div:first-child { flex: 1 0 100%; }
.earnings-period-field { width: min(220px, 100%); }
@media (max-width: 768px) { .earnings-period-field { width: 100%; } }
.page-heading h1 { font-size: clamp(24px, 2.4vw, 32px); }
#view-overview .metric-card { min-height: 0; padding: 16px; }
#view-overview .metric-value { margin: 12px 0; }
#view-overview .metric-foot { margin-top: 8px; }
#team-grid { display: flex; flex-direction: column; gap: 0; }
#team-grid .team-row { display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(160px, 1fr) 80px auto; align-items: center; gap: 20px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
.team-row .team-card-head { margin: 0; }
.team-row .paired-models { margin: 0; padding: 0; border: 0; }
.team-row .paired-models p { margin: 4px 0 0; }
.team-row-workload { display: flex; flex-direction: column; gap: 4px; }
.team-row-workload small { color: var(--muted); }
#planner-summary { display: flex; flex-wrap: wrap; padding: 8px 0; background: transparent; border: 0; gap: 8px 18px; margin: 8px 0; }
#planner-summary > span { padding: 0; border: 0; }
#planner-summary .planner-summary-title { display: none; }
.planner-legend-help { margin: 0; }
.planner-guide { align-items: center; }
#view-balances .platform-balance-disclaimer { margin: 12px 0; }
#view-balances .ledger-head { padding-top: 14px; padding-bottom: 8px; }
#view-balances th { overflow-wrap: normal; word-break: normal; }
#view-earnings > .currency-estimate-note { font-size: 12px; margin: 8px 0 16px; }
@media (max-width: 900px) {
  #team-grid .team-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .team-row .team-card-head { grid-column: 1 / -1; }
  .team-row .paired-models { grid-column: 1; }
  .team-row .row-action { grid-column: 2; }
  .density-switcher button { padding-inline: 12px; }
}
#metric-grid:has([data-eur-estimate]) .metric-value { min-height: 0; }
#view-overview .metric-icon { width: 28px; height: 28px; }
#view-overview .metric-foot { flex-grow: 0; }
#planner-summary > span[hidden] { display: none; }

/* Visible payment decisions and readable chart dates. */
#staff-payment-records > .panel { margin-bottom: var(--stack); }
#staff-payment-records .row-actions { flex-wrap: wrap; gap: 8px; }
.performance-chart-scroll { overflow-x: auto; padding-bottom: 8px; }
.performance-chart-scroll .svg-bar-chart { display: block; width: 100%; height: auto; }
.performance-chart-scroll:focus-visible, .bar-group:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Shared financial performance view. The stage cards describe different
   event dates, while the large chart is exclusively shift performance. */
.performance-overview { margin-bottom: 24px; }
.current-balances-heading { margin: 24px 0 14px; font-size: 18px; }
#view-overview .metric-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.performance-overview-head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin: 0 0 16px; }
.performance-overview-head h2 { margin: 0 0 6px; font-size: clamp(21px, 2vw, 27px); }
.performance-overview-head p, .performance-chart-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.performance-period-field { min-width: 180px; margin: 0; }
.performance-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); margin-bottom: 18px; }
.performance-stage { min-width: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.performance-stage > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.performance-stage strong { color: var(--ink); font-size: clamp(23px, 2.6vw, 35px); font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.performance-stage small { color: var(--muted); line-height: 1.4; }
.performance-stage em { color: var(--accent); font-size: 12px; font-style: normal; font-weight: 700; margin-top: auto; }
.performance-main-chart { overflow: hidden; }
.performance-chart-head { align-items: end; flex-wrap: wrap; padding-bottom: 10px; }
.performance-chart-head h2 { margin-bottom: 6px; }
.performance-chart-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 6px 24px 16px; }
.performance-chart-summary strong { color: var(--ink); font-size: clamp(25px, 3vw, 38px); font-variant-numeric: tabular-nums; }
.performance-chart-summary span { color: var(--accent); font-weight: 700; }
.performance-chart-summary small { width: 100%; color: var(--muted); }
#overview-daily-chart { margin: 0 24px; overflow-x: auto; padding: 4px 0 12px; }
#overview-daily-chart svg { display: block; width: 100%; height: 320px; user-select: none; }
.performance-previous-bar { fill: var(--surface-raised); stroke: var(--accent); stroke-width: 1.5; }
.performance-current-bar { fill: var(--accent); }
.performance-day-bar { cursor: pointer; }
.performance-day-bar:hover .performance-current-bar, .performance-day-bar.selected .performance-current-bar { fill: var(--ink); }
.performance-focus-indicator { fill: transparent; pointer-events: none; }
.performance-day-bar:focus-visible { outline: none; }
.performance-day-bar:focus-visible .performance-focus-indicator { fill: var(--focus-ring); }
.performance-chart-legend { display: flex; gap: 22px; flex-wrap: wrap; padding: 0 24px 20px; color: var(--muted); font-size: 12px; }
.performance-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.performance-chart-legend[hidden], .performance-day-detail:empty { display: none; }
.performance-chart-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.performance-legend-current { background: var(--accent); }
.performance-legend-previous { background: var(--surface-raised); border: 1.5px solid var(--accent); }
.performance-day-detail { border-top: 1px solid var(--line); padding: 18px 24px 22px; background: var(--surface-raised); }
.performance-day-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.performance-day-head h3 { margin: 0 0 3px; font-size: 16px; }
.performance-day-head p, .performance-day-empty { margin: 0; color: var(--muted); font-size: 13px; }
.performance-day-head > strong { font-variant-numeric: tabular-nums; }
.performance-day-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 14px; }
.performance-day-list button { min-width: 0; display: flex; justify-content: space-between; gap: 12px; padding: 12px; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.performance-day-list button:hover { border-color: var(--accent); }
.performance-day-list button span { min-width: 0; }
.performance-day-list button small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.performance-day-list button > span:last-child { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.performance-day-empty { padding-top: 14px; }
.performance-loading, .performance-error { grid-column: 1 / -1; padding: 18px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--muted); }
#view-overview .revenue-panel, #view-overview #owner-operational-panel { display: none; }
#overview-extra-metrics[hidden] { display: none; }
#view-earnings .earnings-charts-grid { grid-template-columns: minmax(0, 1fr); }
#view-earnings .earnings-charts-grid .chart-panel:first-child { min-height: 350px; }
#view-earnings .earnings-charts-grid .svg-bar-chart { height: 300px; }
@media (max-width: 900px) { .performance-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .performance-stages { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .performance-period-field { width: 100%; }
  .performance-chart-head .segmented { width: 100%; }
  .performance-chart-head .segmented button { flex: 1; padding-inline: 7px; }
  #overview-daily-chart { margin-inline: 12px; }
  .performance-day-detail { padding-inline: 16px; }
  .performance-day-head > strong { font-size: 13px; }
}

#view-commissions .toolbar { flex-wrap: wrap; }
.commission-count { margin: 0; color: var(--muted); font-size: 13px; }
#view-commissions .row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#view-commissions > .currency-estimate-note { margin-bottom: 16px; }

/* Workspace logo settings */
.logo-settings {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.logo-settings .logo-preview {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Shown only when one email and password open several workspaces */
.workspace-picker {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.workspace-picker p {
  margin: 0;
  color: var(--muted);
}

/* Self sign-up on the shared host */
.login-switch {
  margin: 18px 0 0;
  color: var(--muted);
  text-align: center;
}

.signup-sent p {
  line-height: 1.5;
}