/*
 * Den – Cool Ferret Games marketing suite.
 * Based on the CFG Brand & UI Styleguide v1.0 and CFG_Den_Theme_Tokens.css (2026-11-01).
 *
 * Rules that shape this file:
 * - Brand values (--cfg-*) never change between themes; components only use semantic --ui-* tokens.
 * - Usability first: quiet panels, 1 px borders, small radii, readable DM Sans for all controls and data.
 * - CFG character second: Jersey 15 for page titles and branding, pixel-art icons, cyan primary
 *   actions, violet navigation marker, brand chart palette.
 * - Theme on <html data-theme="dark|light|system">, rendered by the server, so there is no flash on load.
 */

@font-face {
  font-family: "Jersey 15";
  src: url("/static/fonts/jersey-15-latin.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/static/fonts/dm-sans-latin.woff") format("woff");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* ===================================================================
   Tokens
   =================================================================== */
:root {
  /* Stable brand colors: never inverted for light mode. */
  --cfg-cyan: #50DCF5;
  --cfg-blue: #4EABEA;
  --cfg-gold: #F9C22B;
  --cfg-orange: #F79617;
  --cfg-peach: #FCA790;
  --cfg-pink: #F04F78;
  --cfg-raspberry: #C32454;
  --cfg-ink: #0E0D21;
  --cfg-slate: #323353;
  --cfg-indigo: #484A77;
  --cfg-purple: #6B3E75;
  --cfg-nav-accent: #9252FF;

  --font-display: "Jersey 15", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --pixel-unit: 4px;
  --pixel-border-width: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --motion-fast: 110ms;
  --motion-ui: 160ms;
  --ease-ui: cubic-bezier(.2, .8, .2, 1);

  --topbar-h: 56px;
  --sidebar-w: 240px;
  --page-width: 1120px;


  /* Platform identity (badges only). */
  --platform-instagram: #C13584;
  --platform-tiktok: var(--ui-text);
  --platform-youtube: #E62117;
}

/* Dark is the website reference and the fallback. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #08091D;
  --ui-bg-alt: #0D0F2B;
  --ui-sidebar: #11143A;
  --ui-surface: #171A46;
  --ui-surface-raised: #1C2052;
  --ui-surface-hover: #242962;
  --ui-input: #0D1030;
  --ui-border: #565B92;
  --ui-border-subtle: #343866;
  --ui-border-strong: #8178C4;
  --ui-text: #F8F4F0;
  --ui-text-secondary: #CDC8D9;
  --ui-text-muted: #9592AD;
  --ui-link: #50DCF5;
  --ui-primary-bg: #50DCF5;
  --ui-primary-text: #0E0D21;
  --ui-primary-border: #A8F3FF;
  --ui-focus: #50DCF5;
  --ui-nav-accent: #9252FF;
  --ui-nav-text-active: #C7A7FF;
  --ui-selection-bg: #242962;
  --ui-shadow: rgba(4, 5, 20, .78);
  --ui-gridline: #343866;
  --ui-success: #59E391;
  --ui-warning: #F9C22B;
  --ui-error: #FF6B7A;
  --chart-1: #50DCF5;
  --chart-2: #F9C22B;
  --chart-3: #C7A7FF;
  --chart-4: #FF88A5;
  --chart-5: #59E391;
}

html[data-theme="light"] {
  color-scheme: light;
  --ui-bg: #F7F5FA;
  --ui-bg-alt: #F0ECF7;
  --ui-sidebar: #EDE7F7;
  --ui-surface: #FFFFFF;
  --ui-surface-raised: #F0ECF7;
  --ui-surface-hover: #E7E1F3;
  --ui-input: #FFFFFF;
  --ui-border: #B8AED3;
  --ui-border-subtle: #D5CEE5;
  --ui-border-strong: #7870AB;
  --ui-text: #201D36;
  --ui-text-secondary: #46415E;
  --ui-text-muted: #646079;
  --ui-link: #096C89;
  --ui-primary-bg: #50DCF5;
  --ui-primary-text: #0E0D21;
  --ui-primary-border: #21819D;
  --ui-focus: #6830C7;
  --ui-nav-accent: #9252FF;
  --ui-nav-text-active: #6830C7;
  --ui-selection-bg: #E7D8FF;
  --ui-shadow: rgba(44, 33, 70, .22);
  --ui-gridline: #D5CEE5;
  --ui-success: #166D42;
  --ui-warning: #8C5600;
  --ui-error: #AA2947;
  /* chart-1 is a touch more saturated than the styleguide's #096C89 so it does not read as gray in charts. */
  --chart-1: #00779E;
  --chart-2: #8C5600;
  --chart-3: #6830C7;
  --chart-4: #AD2858;
  --chart-5: #166D42;
}

/* "System" follows the operating system; same light values as above. */
@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --ui-bg: #F7F5FA;
    --ui-bg-alt: #F0ECF7;
    --ui-sidebar: #EDE7F7;
    --ui-surface: #FFFFFF;
    --ui-surface-raised: #F0ECF7;
    --ui-surface-hover: #E7E1F3;
    --ui-input: #FFFFFF;
    --ui-border: #B8AED3;
    --ui-border-subtle: #D5CEE5;
    --ui-border-strong: #7870AB;
    --ui-text: #201D36;
    --ui-text-secondary: #46415E;
    --ui-text-muted: #646079;
    --ui-link: #096C89;
    --ui-primary-bg: #50DCF5;
    --ui-primary-text: #0E0D21;
    --ui-primary-border: #21819D;
    --ui-focus: #6830C7;
    --ui-nav-accent: #9252FF;
    --ui-nav-text-active: #6830C7;
    --ui-selection-bg: #E7D8FF;
    --ui-shadow: rgba(44, 33, 70, .22);
    --ui-gridline: #D5CEE5;
    --ui-success: #166D42;
    --ui-warning: #8C5600;
    --ui-error: #AA2947;
    --chart-1: #00779E;
    --chart-2: #8C5600;
    --chart-3: #6830C7;
    --chart-4: #AD2858;
    --chart-5: #166D42;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-ui: 0ms; }
}

/* ===================================================================
   Base
   =================================================================== */
* { box-sizing: border-box; }
html { font-size: 15px; background: var(--ui-bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  line-height: 1.5;
  background: var(--ui-bg);
  color: var(--ui-text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ui-selection-bg); color: var(--ui-text); }
a { color: var(--ui-link); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; line-height: 1; margin: 0; }
h1 { font-size: 40px; }
h2 { font-size: 26px; margin-bottom: var(--space-3); }
h3 { font-size: 22px; margin-bottom: var(--space-2); }
p { margin: 0 0 var(--space-3); }
strong { font-weight: 650; }
.muted { color: var(--ui-text-muted); }
.hint { display: block; color: var(--ui-text-muted); font-size: 13px; margin-top: var(--space-1); }
.error { color: var(--ui-error); font-weight: 650; }
:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

/* ===================================================================
   Surfaces: quiet, readable panels. CFG character lives in type, icons and accents.
   =================================================================== */
:root { --radius: 8px; --radius-small: 6px; --radius-tiny: 4px; }
.card, .px-panel, .rows {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--radius);
}
html[data-theme="light"] .card, html[data-theme="light"] .rows { box-shadow: 0 1px 2px rgba(44, 33, 70, .06); }
.menu-panel, .chart-tooltip { box-shadow: 0 10px 30px var(--ui-shadow); }

/* ===================================================================
   App shell
   =================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-4);
  background: var(--ui-bg-alt);
  border-bottom: 1px solid var(--ui-border-subtle);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ui-text); text-decoration: none; }
.brand-name { font-family: var(--font-display); font-size: 28px; line-height: 1; }
.brand-large { justify-content: center; margin-bottom: var(--space-4); }
.brand-large .brand-name { font-size: 48px; }

.shell { min-height: calc(100vh - var(--topbar-h)); }
.has-shell .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); background: linear-gradient(to right, var(--ui-sidebar) calc(var(--sidebar-w) - 1px), var(--ui-border-subtle) 0 var(--sidebar-w), transparent 0); }
.sidebar {
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  background: var(--ui-sidebar);
  border-right: 1px solid var(--ui-border-subtle);
  padding: var(--space-6) var(--space-3);
}
.side-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.side-nav a {
  display: block; position: relative;
  font-size: 14.5px; font-weight: 550; line-height: 1.2;
  padding: 10px var(--space-3) 10px var(--space-4);
  color: var(--ui-text-secondary); text-decoration: none;
  border-left: 3px solid transparent; border-radius: 0 var(--radius-small) var(--radius-small) 0;
  transition: background-color var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui);
}
.side-nav a:hover { background: var(--ui-surface-hover); color: var(--ui-text); }
.side-nav a.is-active {
  border-left-color: var(--ui-nav-accent);
  background: var(--ui-selection-bg);
  color: var(--ui-nav-text-active); font-weight: 650;
}
.side-nav a:focus-visible { outline-offset: -3px; }

.page { padding: var(--space-8) var(--space-8) var(--space-12); max-width: calc(var(--page-width) + 2 * var(--space-8)); width: 100%; }
.page-wide { max-width: none; }
.shell-plain .page { margin: 0 auto; }

@media (max-width: 900px) {
  :root { --topbar-h: 52px; }
  .has-shell .shell { grid-template-columns: 1fr; background: none; }
  .sidebar {
    position: sticky; top: var(--topbar-h); z-index: 20; height: auto;
    padding: 0 var(--space-2); border-right: 0; border-bottom: 2px solid var(--ui-border-subtle);
    display: flex; align-items: center; overflow-x: auto;
  }
  .side-nav { flex-direction: row; gap: 0; }
  .side-nav a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 14px var(--space-3) 11px; min-height: 44px; }
  .side-nav a.is-active { border-bottom-color: var(--ui-nav-accent); }
  .page { padding: var(--space-5) var(--space-4) var(--space-10); }
  h1 { font-size: 32px; }
}

/* ----- menus (app switcher, account) ----- */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.icon-button {
  display: grid; place-items: center; width: 40px; height: 40px;
  color: var(--ui-text-secondary);
  transition: background-color var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui);
}
.icon-button:hover, .menu[open] > .icon-button { background: var(--ui-surface-hover); color: var(--ui-text); }
.menu[open] > .icon-button { color: var(--ui-nav-text-active); }
.menu-panel {
  position: absolute; top: calc(100% + 10px); z-index: 40;
  background: var(--ui-surface-raised);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.menu-title { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-muted); margin: var(--space-1) var(--space-2) var(--space-2); }
.switcher-panel { left: 0; width: 360px; }
.switcher-tile {
  display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-2); margin-bottom: var(--space-1);
  color: var(--ui-text); text-decoration: none;
  border-radius: var(--radius-small);
}
.switcher-tile:hover { background: var(--ui-surface-hover); }
.switcher-tile.is-current { background: var(--ui-selection-bg); box-shadow: inset 3px 0 0 var(--ui-nav-accent); }
.tile-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ui-text-secondary); }
.tile-text strong { font-size: 15px; color: var(--ui-text); }
.menu-link { display: block; padding: var(--space-2) var(--space-3); font-size: 14px; border-top: 1px solid var(--ui-border-subtle); margin-top: var(--space-2); }
.menu-home { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); color: var(--ui-text); text-decoration: none; border-radius: 0 0 var(--radius-small) var(--radius-small); }
.menu-home:hover { background: var(--ui-surface-hover); color: var(--ui-text); }
.menu-home .brand-name { font-size: 24px; }

.app-icon { display: block; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }

.account { margin-left: auto; }
.account-summary {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); min-height: 40px; border-radius: var(--radius-small);
  color: var(--ui-text-secondary); font-size: 14px;
}
.account-summary:hover, .account[open] > .account-summary { background: var(--ui-surface-hover); color: var(--ui-text); }
.avatar {
  display: grid; place-items: center; width: 28px; height: 28px;
  background: var(--cfg-nav-accent); color: #FFFFFF;
  font-size: 13px; font-weight: 700; line-height: 1;
  border-radius: 50%;
}
.account-panel { right: 0; width: 300px; }
.account-email { margin: 0 var(--space-2) var(--space-4); overflow-wrap: anywhere; }
.theme-form { margin-bottom: var(--space-4); }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border: 1px solid var(--ui-border); border-radius: var(--radius-small); background: var(--ui-input); }
.segment {
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1;
  min-height: 34px; border: 0; border-radius: var(--radius-tiny); background: none; color: var(--ui-text-secondary); cursor: pointer;
}
.segment:hover { background: var(--ui-surface-hover); color: var(--ui-text); }
.segment.is-active { background: var(--ui-selection-bg); color: var(--ui-nav-text-active); }
.segment:focus-visible { outline-offset: -3px; }
@media (max-width: 900px) { .account-mail { display: none; } }

/* ===================================================================
   Layout helpers
   =================================================================== */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-head h1 { display: flex; align-items: center; gap: var(--space-2); }
.page-head p { margin: var(--space-2) 0 0; }
.card { padding: var(--space-6); margin-bottom: var(--space-6); }
.narrow { max-width: 640px; }
.stack > * + * { margin-top: var(--space-4); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); align-items: start; }
.section-title { margin: var(--space-8) 0 var(--space-4); }
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-4); }
.page-head .actions { margin-top: 0; }
.actions-end { justify-content: flex-end; }
.flash {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); margin-bottom: var(--space-6);
  border-color: var(--ui-success); border-left-width: 4px;
}
.flash > *, .flash { color: var(--ui-text); }
.empty { text-align: center; padding: var(--space-10) var(--space-6); }
.empty h2 { margin-bottom: var(--space-3); }
.empty p { color: var(--ui-text-secondary); max-width: 52ch; margin-left: auto; margin-right: auto; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li + li { margin-top: var(--space-2); }
.inline-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.row-form { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.row-form p { margin: 0; }
.grow { flex: 1; min-width: 240px; }

/* ===================================================================
   Forms
   =================================================================== */
.field { display: block; }
.label { display: block; font-family: var(--font-body); font-weight: 650; font-size: 13px; letter-spacing: .01em; color: var(--ui-text-secondary); margin-bottom: 6px; }
h2.label { font-size: 13px; line-height: 1.4; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; min-height: 40px;
  font: inherit; font-size: 15px; color: var(--ui-text);
  background: var(--ui-input);
  border: 1px solid var(--ui-border); border-radius: var(--radius-small);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--motion-fast) var(--ease-ui);
}
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: var(--ui-border-strong); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; border-color: var(--ui-focus); }
input::placeholder, textarea::placeholder { color: var(--ui-text-muted); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ui-text-secondary) 50%), linear-gradient(135deg, var(--ui-text-secondary) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
textarea { resize: vertical; min-height: 6em; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-nav-accent); width: 18px; height: 18px; margin: 0; flex: none; }
fieldset { margin: 0; min-width: 0; }
fieldset.field { border: 0; padding: 0; }
.choice { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-1) 0; cursor: pointer; }
.counter { display: inline-block; font-size: 12px; color: var(--ui-text-muted); margin-top: var(--space-1); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--ui-error); font-weight: 650; }

/* ===================================================================
   Buttons
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4);
  font: inherit; font-size: 14.5px; font-weight: 650; line-height: 1;
  color: var(--ui-text); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--ui-surface-raised);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-small);
  transition: background-color var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui);
}
.btn:hover { background: var(--ui-surface-hover); border-color: var(--ui-border-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--ui-primary-bg); border-color: var(--ui-primary-bg); color: var(--ui-primary-text); }
.btn-primary:hover { background: #7BE6F8; border-color: #7BE6F8; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ui-link); }
.btn-ghost:hover { background: var(--ui-surface-hover); border-color: transparent; color: var(--ui-text); }
.btn-danger { color: var(--ui-error); }
.btn-danger:not(.btn-ghost):hover { border-color: var(--ui-error); }
.btn-small { min-height: 32px; font-size: 13.5px; padding: 0 var(--space-3); }
.btn-block { width: 100%; }
.btn.copied { border-color: var(--ui-success); color: var(--ui-success); }

/* ===================================================================
   Badges and status
   =================================================================== */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1;
  color: #FFFFFF; background: var(--ui-text-muted);
  border-radius: var(--radius-tiny);
}
.badge-instagram { background: var(--platform-instagram); }
.badge-tiktok { background: var(--platform-tiktok); color: var(--ui-bg); }
.badge-youtube { background: var(--platform-youtube); }
.format { margin-left: var(--space-2); font-weight: 650; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  font-size: 12px; font-weight: 650; letter-spacing: .02em; white-space: nowrap;
  color: var(--ui-text-muted); border: 1px solid currentColor; border-radius: 999px;
  vertical-align: middle;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill-done { color: var(--ui-success); }
.pill-warn { color: var(--ui-warning); }
.pill-issue { color: var(--ui-error); }
.count { color: var(--ui-text-muted); font-family: var(--font-body); font-size: 15px; margin-left: var(--space-1); }

/* ===================================================================
   Stash
   =================================================================== */
.group { margin-bottom: var(--space-8); }
.group > h2 { display: flex; align-items: baseline; }
.rows { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.row {
  display: grid; grid-template-columns: 7.5rem 9rem minmax(8rem, 1.2fr) minmax(0, 2fr) auto auto;
  gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4);
}
.row + .row { border-top: 1px solid var(--ui-border-subtle); }
.row:hover { background: var(--ui-surface-hover); }
.row .when { font-variant-numeric: tabular-nums; color: var(--ui-text-secondary); font-size: 14px; }
.row .target { display: flex; align-items: center; white-space: nowrap; }
.row .title { font-weight: 650; color: var(--ui-text); text-decoration: none; }
.row .title:hover { text-decoration: underline; }
.row .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.row .state { display: flex; gap: var(--space-1); }
.row.is-done { opacity: .65; }
.row.is-overdue .when { color: var(--ui-warning); font-weight: 650; }
.row-simple { grid-template-columns: auto 1fr auto; }
@media (max-width: 860px) {
  .row { grid-template-columns: 1fr auto; }
  .row .text, .row .when { grid-column: 1 / -1; }
}

.target-card { border-left: 4px solid var(--platform, var(--ui-border)); }
.target-instagram { --platform: var(--platform-instagram); }
.target-tiktok { --platform: var(--platform-tiktok); }
.target-youtube { --platform: var(--platform-youtube); }
.target-card { min-width: 0; }
.target-head { float: left; width: 100%; padding: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); font-weight: 650; border-bottom: 1px solid var(--ui-border-subtle); }
.target-head + * { clear: both; }
.target-head .format { font-size: 15px; }
.target-card > .field, .target-card > .grid-2 { margin-top: var(--space-4); }
.linked-preview { background: var(--ui-bg-alt); border: 1px dashed var(--ui-border); border-radius: var(--radius-small); padding: var(--space-2) var(--space-3); white-space: pre-wrap; }
.issues { margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-5); color: var(--ui-error); border: 1px solid var(--ui-error); border-left-width: 4px; border-radius: var(--radius-small); background: none; }
.add-target { display: flex; gap: var(--space-3); align-items: flex-end; }
.add-target .field { flex: 1; }

.package { padding: var(--space-2) 0; }
.pkg-row { display: grid; grid-template-columns: 13rem 1fr auto; gap: var(--space-4); align-items: start; padding: var(--space-3) var(--space-6); }
.pkg-row + .pkg-row { border-top: 1px solid var(--ui-border-subtle); }
.pkg-label { font-weight: 650; color: var(--ui-text-secondary); font-size: 14px; padding-top: 2px; }
.pkg-value { overflow-wrap: anywhere; }
.pkg-value.pre { white-space: pre-wrap; }
@media (max-width: 700px) { .pkg-row { grid-template-columns: 1fr auto; } .pkg-label { grid-column: 1 / -1; } }
.checklist { margin: 0; padding-left: var(--space-5); }
.checklist li + li { margin-top: var(--space-1); }

/* ===================================================================
   Login and launcher
   =================================================================== */
.login { max-width: 420px; margin: 12vh auto 0; text-align: center; padding: var(--space-10) var(--space-8); }
.login-title { font-size: 34px; margin-bottom: var(--space-2); }
.login .stack { margin-top: var(--space-6); text-align: left; }
.login .btn-block { margin-top: var(--space-5); }
.launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); }
.launcher-tile, .template {
  display: flex; flex-direction: column; gap: var(--space-2);
  color: var(--ui-text); text-decoration: none; margin: 0;
  transition: border-color var(--motion-fast) var(--ease-ui), background-color var(--motion-fast) var(--ease-ui);
}
.launcher-tile .app-icon { margin-bottom: var(--space-3); }
.launcher-name { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; }
.launcher-tile .muted { color: var(--ui-text-secondary); }
.launcher-tile:hover, .template:hover { border-color: var(--ui-nav-accent); background: var(--ui-surface-raised); }

/* ===================================================================
   Tables and code
   =================================================================== */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--ui-border-subtle); vertical-align: top; }
th { font-weight: 650; font-size: 13px; color: var(--ui-text-muted); white-space: nowrap; }
tbody tr:hover td { background: var(--ui-surface-hover); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
pre.code { background: var(--ui-bg-alt); border: 1px solid var(--ui-border-subtle); border-radius: var(--radius-small); padding: var(--space-3) var(--space-4); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; white-space: pre; }
code { font-family: var(--font-mono); font-size: .88em; }

/* ===================================================================
   Scout
   =================================================================== */
.explorer { display: grid; grid-template-columns: 344px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 1180px) { .explorer { grid-template-columns: 1fr; } }
.explorer-form {
  position: sticky; top: calc(var(--topbar-h) + var(--space-6));
  padding: var(--space-5) var(--space-2) var(--space-4) var(--space-5);
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--topbar-h) - var(--space-12));
}
@media (max-width: 1180px) { .explorer-form { position: static; max-height: none; } }
.explorer-scroll { overflow-y: auto; padding-right: var(--space-3); min-height: 0; }
.explorer-submit { margin-top: var(--space-3); padding-right: var(--space-3); }
.explorer-submit .btn { width: 100%; }
.explorer-form .filter-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.explorer-form .filter-row .choice { grid-column: 1 / -1; }
.explorer-form .filter-row .field { min-width: 0; }
.explorer-form .filter-row input:not([type="checkbox"]), .explorer-form .filter-row select { font-size: 14px; padding-left: var(--space-2); }
.explorer-form .filter-row select { padding-right: 28px; background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; }
.explorer-main > .hint { margin: 0 0 var(--space-4); }
.kpi-picker { border: 1px solid var(--ui-border-subtle); border-radius: var(--radius-small); background: var(--ui-bg-alt); overflow: hidden; }
.kpi-group + .kpi-group { border-top: 1px solid var(--ui-border-subtle); }
.kpi-group > summary { cursor: pointer; padding: var(--space-2) var(--space-3); font-weight: 650; }
.kpi-group > summary:hover { background: var(--ui-surface-hover); }
.kpi-group[open] > summary { color: var(--ui-text); }
.kpi-choice { padding: 3px var(--space-3); font-size: 13.5px; align-items: flex-start; color: var(--ui-text-secondary); }
.kpi-choice:hover { color: var(--ui-text); }
.kpi-choice input { margin-top: 2px; }
.kpi-choice.is-unavailable { opacity: .5; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-6); }
@media (max-width: 560px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card { margin: 0; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.dash-head h2 { margin: 0; }
.template-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); text-align: left; margin-top: var(--space-6); }
.template { padding: var(--space-4); background: var(--ui-surface); border: 1px solid var(--ui-border-subtle); border-radius: var(--radius); }
.template strong { font-size: 15px; }
.template .muted { font-size: 13px; }
.kpi-notes li { font-size: 14px; }

/* ----- charts -----
   Categorical order follows the CFG chart palette, re-ordered so neighbours stay apart for
   color-blind readers (checked with the dataviz validator): cyan, pink, gold, violet, green.
   More than five series repeat the hues with a second encoding (dashed, then dotted lines;
   outlined, then light bars). "Andere" is always neutral. */
:root {
  --series-1: var(--chart-1); --series-2: var(--chart-4); --series-3: var(--chart-2);
  --series-4: var(--chart-3); --series-5: var(--chart-5); --series-x: var(--ui-text-muted);
}
.series-1, .series-6, .series-11 { --c: var(--series-1); }
.series-2, .series-7, .series-12 { --c: var(--series-2); }
.series-3, .series-8, .series-13 { --c: var(--series-3); }
.series-4, .series-9, .series-14 { --c: var(--series-4); }
.series-5, .series-10, .series-15 { --c: var(--series-5); }
.series-x { --c: var(--series-x); }

.chart { margin: 0; position: relative; }
.chart-title { font-weight: 650; margin-bottom: var(--space-2); }
.chart-canvas { position: relative; min-height: 120px; }
.chart-empty { color: var(--ui-text-muted); padding: var(--space-8) 0; text-align: center; margin: 0; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.chart-svg .grid line { stroke: var(--ui-gridline); stroke-width: 1; shape-rendering: crispEdges; }
.chart-svg .grid .baseline-100 { stroke: var(--ui-text-muted); stroke-dasharray: 4 4; }
.chart-svg .tick { fill: var(--ui-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-svg .line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line.pattern-1 { stroke-dasharray: 8 5; stroke-linecap: butt; }
.chart-svg .line.pattern-2 { stroke-dasharray: 2 5; }
.chart-svg .bar { fill: var(--c); shape-rendering: crispEdges; }
.chart-svg .bar.pattern-1 { fill: var(--ui-surface); stroke: var(--c); stroke-width: 2; }
.chart-svg .bar.pattern-2 { fill: var(--c); fill-opacity: .4; }
.chart-svg .dot, .chart-svg .hover-dot { fill: var(--c); stroke: var(--ui-surface); stroke-width: 2; shape-rendering: crispEdges; }
.chart-svg .crosshair { stroke: var(--ui-text-muted); stroke-width: 1; shape-rendering: crispEdges; }
.chart-svg .ann-line { stroke: var(--ui-text-muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: .55; shape-rendering: crispEdges; }
.chart-svg .ann-line.ann-manual { stroke: var(--ui-nav-text-active); opacity: .9; }
.chart-svg .ann-dot { fill: var(--ui-surface); stroke: var(--ui-text-muted); stroke-width: 2; cursor: help; shape-rendering: crispEdges; }
.chart-svg .ann-manual-dot { fill: var(--ui-nav-accent); stroke: var(--ui-nav-accent); }
.chart-svg .direct-label { fill: var(--ui-text-secondary); font-size: 12px; font-weight: 650; }
.chart-legend { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: none; padding: 2px 0; font: inherit; font-size: 13.5px; color: var(--ui-text-secondary); cursor: pointer; text-align: left; }
.legend-item:hover { color: var(--ui-text); }
.legend-item.is-off { color: var(--ui-text-muted); text-decoration: line-through; }
.legend-item.is-off .swatch { opacity: .3; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }
.swatch.pattern-1 { width: 16px; height: 4px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 9px); }
.swatch.pattern-2 { width: 16px; height: 4px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 6px); }
.chart-single { font-size: 13.5px; color: var(--ui-text-secondary); margin: 0 0 var(--space-2); }
.panel-title { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-muted); margin: var(--space-4) 0 0; }
.chart-tooltip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 200px; max-width: 340px;
  padding: var(--space-3) var(--space-4); font-size: 13px;
  background: var(--ui-surface-raised); border: 1px solid var(--ui-border); border-radius: var(--radius-small);
}
.chart-tooltip strong { font-weight: 650; }
.chart-tooltip ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.chart-tooltip li { display: flex; align-items: center; gap: var(--space-2); }
.chart-tooltip li + li { margin-top: 2px; }
.chart-tooltip .tt-name { flex: 1; color: var(--ui-text-secondary); }
.chart-tooltip .tt-val { font-weight: 650; font-variant-numeric: tabular-nums; }
.chart-tooltip .tt-events { border-top: 1px solid var(--ui-border-subtle); margin-top: var(--space-2); padding-top: var(--space-2); color: var(--ui-text); }
.chart-tooltip .tt-events li::before { content: ""; width: 6px; height: 6px; background: var(--ui-nav-accent); flex: none; }
.chart-table { margin-top: var(--space-4); }
.chart-table summary { cursor: pointer; color: var(--ui-text-muted); font-size: 13.5px; }
.chart-table summary:hover { color: var(--ui-text); }
.chart-compact .chart-legend { font-size: 13px; }

/* Planned apps (e.g. Tally): visible, not clickable */
.is-upcoming { opacity: .6; cursor: default; }
.is-upcoming:hover { background: none; border-color: var(--ui-border-subtle); }
.switcher-tile.is-upcoming:hover { background: none; }
.soon { display: inline-block; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-nav-text-active); background: var(--ui-selection-bg); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.launcher-tile .soon { align-self: flex-start; margin-top: var(--space-1); }

/* ===================================================================
   Scout insights: KPI cards, notes, chain, content, channels, games
   =================================================================== */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.actions-center { justify-content: center; }
.page-head .actions { align-items: center; }
.range-tabs { display: inline-grid; grid-template-columns: repeat(3, auto); }
a.segment { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-3); text-decoration: none; }
.inline-filter { display: inline-flex; gap: var(--space-2); align-items: center; margin: 0; }
.inline-filter select { min-height: 40px; width: auto; }

.demo-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5); margin-bottom: var(--space-6);
  background: var(--ui-surface); border: 1px dashed var(--ui-warning); border-radius: var(--radius);
}
.demo-banner p { margin: 0; color: var(--ui-text-secondary); }
.demo-banner strong { color: var(--ui-warning); }
.demo-banner form { margin: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5); min-width: 0;
  background: var(--ui-surface); border: 1px solid var(--ui-border-subtle); border-radius: var(--radius);
}
.kpi-card.is-north { grid-column: span 2; border-color: var(--ui-border); }
@media (max-width: 560px) { .kpi-card.is-north { grid-column: auto; } }
.kpi-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 12px; color: var(--ui-text-muted); }
.kpi-id { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--ui-text-secondary); }
.kpi-platform { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-tag { font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: var(--ui-surface-raised); color: var(--ui-text-secondary); }
.is-north .kpi-head .kpi-tag:first-of-type { background: var(--ui-selection-bg); color: var(--ui-nav-text-active); }
.kpi-label { margin: 0; font-family: var(--font-body); font-size: 14.5px; font-weight: 650; line-height: 1.3; color: var(--ui-text); }
.kpi-label a { color: inherit; text-decoration: none; }
.kpi-label a:hover { text-decoration: underline; }
.kpi-value { margin: var(--space-1) 0 0; font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.is-north .kpi-value { font-size: 40px; }
.kpi-compare, .kpi-typical { margin: 0; font-size: 13px; display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: baseline; }
.delta { font-weight: 650; color: var(--ui-text-secondary); font-variant-numeric: tabular-nums; }
.kpi-stand { margin: auto 0 0; padding-top: var(--space-1); font-size: 12px; color: var(--ui-text-muted); }
.kpi-missing { margin: var(--space-2) 0 0; font-size: 15px; font-weight: 650; color: var(--ui-text-muted); }
.kpi-card.is-missing { background: transparent; border-style: dashed; }
.kpi-card .hint { margin: 0; }

.ratio { display: inline-flex; gap: 4px; align-items: baseline; font-size: 12.5px; font-weight: 600; color: var(--ui-text-secondary); white-space: nowrap; }
.ratio::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ui-text-muted); align-self: center; }
.ratio.is-up { color: var(--ui-success); }
.ratio.is-up::before { background: var(--ui-success); }
.ratio.is-down { color: var(--ui-warning); }
.ratio.is-down::before { background: var(--ui-warning); }
.ratio strong { font-variant-numeric: tabular-nums; }

.spark { display: block; width: 100%; height: 36px; margin-top: var(--space-2); overflow: visible; }
.is-north .spark { height: 56px; }
.spark-band { fill: var(--ui-text-muted); fill-opacity: .14; }
.spark-line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-end { fill: var(--series-1); }

.split-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--space-6); margin-bottom: var(--space-6); align-items: start; }
.split-2 > .card { margin: 0; }
@media (max-width: 560px) { .split-2 { grid-template-columns: 1fr; } }

.notes { list-style: none; margin: 0; padding: 0; }
.note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--ui-border-subtle); line-height: 1.45; }
.note:first-child { border-top: 0; padding-top: 0; }
.note a { color: var(--ui-text); text-decoration: none; }
.note a:hover { color: var(--ui-link); text-decoration: underline; }
.note-mark { width: 10px; height: 10px; margin-top: 6px; border-radius: 2px; flex: none; background: var(--ui-text-muted); }
.note-good .note-mark { background: var(--ui-success); }
.note-bad .note-mark { background: var(--ui-warning); }
.note-info .note-mark { background: var(--series-1); }

.chain { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.chain-step { display: grid; grid-template-columns: auto 1fr auto; gap: 2px var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4); background: var(--ui-bg-alt); border: 1px solid var(--ui-border-subtle); border-radius: var(--radius-small); }
.chain-step .muted { grid-column: 2 / 4; font-size: 12px; }
.chain-step.is-missing { background: transparent; border-style: dashed; }
.chain-step.is-missing .chain-value { color: var(--ui-text-muted); font-size: 13px; }
.chain-label { font-size: 13.5px; color: var(--ui-text-secondary); min-width: 0; }
.chain-value { font-size: 18px; font-variant-numeric: tabular-nums; }
.chain-link { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-1) 0 var(--space-1) var(--space-6); margin-left: var(--space-4); border-left: 2px solid var(--ui-border); font-size: 13px; }
.chain-ratio { font-weight: 700; font-variant-numeric: tabular-nums; }

.content-list { list-style: none; margin: 0; padding: 0; }
.content-list li + li { border-top: 1px solid var(--ui-border-subtle); }
.content-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-2); color: var(--ui-text); text-decoration: none; border-radius: var(--radius-small); }
.content-row:hover { background: var(--ui-surface-hover); }
.content-title { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.content-title .muted { font-weight: 400; font-size: 12.5px; }
.content-row .num { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--ui-text-secondary); white-space: nowrap; }
@media (max-width: 560px) {
  .content-row { grid-template-columns: auto minmax(0, 1fr); }
  .content-row .num, .content-row .ratio { grid-column: 2; }
}

.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.preset {
  display: flex; flex-direction: column; gap: var(--space-1); text-align: left; cursor: pointer;
  padding: var(--space-4); font: inherit; color: var(--ui-text);
  background: var(--ui-surface); border: 1px solid var(--ui-border-subtle); border-radius: var(--radius);
}
.preset:hover { border-color: var(--ui-border-strong); background: var(--ui-surface-hover); }
.preset.is-active { border-color: var(--ui-nav-accent); }
.preset .muted { font-size: 13px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3) var(--space-4); }
.slot-grid .field { margin: 0; }

.filter-bar { display: flex; gap: var(--space-3) var(--space-4); flex-wrap: wrap; align-items: flex-end; margin: 0; }
.filter-bar .field { margin: 0; min-width: 160px; }
.content-table td { vertical-align: middle; }
.cell-title { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--ui-text); font-weight: 600; text-decoration: none; }
.cell-title:hover { color: var(--ui-link); }
.per-platform { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; }
.pp { display: inline-flex; gap: 6px; align-items: center; color: var(--ui-text); text-decoration: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.pp:hover { color: var(--ui-link); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); background: var(--ui-surface); border: 1px solid var(--ui-border-subtle); border-radius: var(--radius); }
.stat strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.stat .muted { font-size: 12.5px; }

.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); border-bottom: 1px solid var(--ui-border-subtle); overflow-x: auto; }
.tab { display: inline-flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); color: var(--ui-text-secondary); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--ui-text); }
.tab.is-active { color: var(--ui-text); border-bottom-color: var(--ui-nav-accent); }

.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.store-block { padding: var(--space-4); background: var(--ui-bg-alt); border: 1px solid var(--ui-border-subtle); border-radius: var(--radius-small); }
.store-block.is-missing { background: transparent; border-style: dashed; }
.store-block h3 { margin: 0 0 var(--space-3); font-family: var(--font-body); font-size: 15px; }
.store-block .kpi-missing { margin: 0; }
.store-funnel { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: end; }
.store-funnel > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.store-funnel .label { font-size: 12px; color: var(--ui-text-muted); line-height: 1.3; }
.store-funnel strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.store-ratio { align-items: center; padding-bottom: 4px; }
.store-ratio span { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ui-surface-raised); }
.store-block .hint { margin: var(--space-3) 0 0; }
.game-card .hint { margin-bottom: 0; }

/* Charts: usual range and the "typical" comparison line. */
.chart-svg .band { fill: var(--ui-text-muted); fill-opacity: .13; }
.series-typical { --c: var(--ui-text-muted); }
.chart-svg .line.series-typical { stroke-dasharray: 6 4; stroke-linecap: butt; }
.chart-band-note { display: flex; gap: var(--space-2); align-items: center; font-size: 12.5px; color: var(--ui-text-muted); margin: 0 0 var(--space-2); }
.swatch-band { background: var(--ui-text-muted); opacity: .35; }
.chart-tooltip .tt-band { margin: var(--space-2) 0 0; font-size: 12px; color: var(--ui-text-muted); }
.team-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.team-row form { margin: 0; }
.px-icon { display: inline-block; flex: none; vertical-align: middle; image-rendering: pixelated; }
.icon-title { display: flex; align-items: center; gap: var(--space-2); }
.kpi-head .px-icon { margin-right: -2px; }
.chain-id { display: inline-flex; align-items: center; gap: var(--space-2); }
.store-block h3 { display: flex; align-items: center; gap: var(--space-2); }
.demo-banner .px-icon { margin-top: -3px; }
.content-row .px-icon, .cell-title .px-icon, .pp .px-icon { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .kpi-card.is-north { grid-column: span 2; }
  .kpi-card { padding: var(--space-3) var(--space-4); }
  .kpi-card:not(.is-north) .kpi-value { font-size: 24px; }
  .kpi-card:not(.is-north) .kpi-compare .muted, .kpi-card:not(.is-north) .kpi-typical .muted, .kpi-card:not(.is-north) .kpi-platform { display: none; }
}

/* ===================================================================
   Stash calendar
   =================================================================== */
.cal-nav { grid-template-columns: 40px auto 40px; }
.cal { border: 1px solid var(--ui-border-subtle); border-radius: var(--radius); overflow: hidden; background: var(--ui-surface); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head span { padding: var(--space-2) var(--space-3); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-text-muted); border-bottom: 1px solid var(--ui-border-subtle); }
.cal-day { min-height: 128px; padding: var(--space-2); display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--ui-border-subtle); border-bottom: 1px solid var(--ui-border-subtle); min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.is-outside { background: var(--ui-bg-alt); }
.cal-day.is-outside .cal-date { color: var(--ui-text-muted); }
.cal-day-head { display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.cal-date { font-size: 13px; font-weight: 650; padding: 2px 6px; border-radius: var(--radius-tiny); }
.cal-wd { display: none; }
.is-today .cal-date { background: var(--ui-primary-bg); color: var(--ui-primary-text); }
.cal-add { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-tiny); color: var(--ui-text-muted); text-decoration: none; font-size: 18px; line-height: 1; opacity: 0; }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-add:hover { background: var(--ui-surface-hover); color: var(--ui-text); }
.cal-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0;
  padding: 3px 6px; font-size: 12.5px; line-height: 1.3; color: var(--ui-text); text-decoration: none;
  background: var(--ui-surface-raised); border-left: 3px solid var(--series-1); border-radius: var(--radius-tiny);
}
.cal-item:hover { background: var(--ui-surface-hover); color: var(--ui-text); }
.cal-item.is-done { border-left-color: var(--ui-success); color: var(--ui-text-muted); }
.cal-item.is-done .cal-title { text-decoration: line-through; text-decoration-color: var(--ui-text-muted); }
.cal-item.is-overdue { border-left-color: var(--ui-warning); }
.cal-item.is-draft { border-left-style: dashed; border-left-color: var(--ui-text-muted); }
.cal-icons { display: inline-flex; gap: 2px; flex: none; }
.cal-time { flex: none; font-variant-numeric: tabular-nums; color: var(--ui-text-secondary); }
.cal-title { flex-basis: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 600; overflow-wrap: anywhere; }
.cal-sample .cal-title, .cal-sample { flex-basis: auto; }
.cal-event { display: block; padding: 2px 6px; font-size: 12px; color: var(--ui-nav-text-active); background: var(--ui-selection-bg); border-radius: var(--radius-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-legend { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }
.cal-sample { display: inline-flex; }
@media (max-width: 760px) {
  .cal-head { display: none; }
  .cal-grid { display: block; }
  .cal-day { min-height: 0; border-right: 0; padding: var(--space-3); }
  .cal-day.is-empty:not(.is-today), .cal-day.is-outside { display: none; }
  .cal-wd { display: inline; }
  .cal-add { opacity: 1; }
  .cal-item { font-size: 14px; padding: 8px 10px; }
}
.side-group { margin: var(--space-4) var(--space-3) var(--space-1); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-text-muted); }
@media (max-width: 900px) { .side-group { display: none; } }
.area-tabs { display: flex; gap: var(--space-1); margin: calc(-1 * var(--space-2)) 0 var(--space-6); border-bottom: 1px solid var(--ui-border-subtle); overflow-x: auto; }
.area-tab { padding: var(--space-2) var(--space-4) var(--space-3); color: var(--ui-text-secondary); text-decoration: none; font-weight: 600; font-size: 14.5px; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.area-tab:hover { color: var(--ui-text); }
.area-tab.is-active { color: var(--ui-text); border-bottom-color: var(--ui-nav-accent); }

/* ===================================================================
   Studio overview (CFG-81): briefing, Studio Health, goals, insights
   =================================================================== */
.section-kicker { margin: 0 0 var(--space-2); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ui-text-muted); }
.studio-section { margin-bottom: var(--space-6); }
.studio-section > .split-2 { margin-bottom: 0; }
.briefing h2 { margin-bottom: var(--space-3); }
.briefing .notes { font-size: 15px; }
.briefing .hint { margin: var(--space-3) 0 0; }
.subhead { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-body); font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-text-muted); }
.breadcrumb { margin: 0 0 var(--space-2); font-size: 13px; color: var(--ui-text-muted); }
.breadcrumb a { color: var(--ui-text-secondary); }
.persp-lead { margin: 0; display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.page-head h1 .px-icon { margin-right: var(--space-2); }

.persp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4); }
@media (max-width: 560px) { .persp-grid { grid-template-columns: 1fr; } }
.persp-card {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  padding: var(--space-4) var(--space-5); background: var(--ui-surface); border: 1px solid var(--ui-border-subtle); border-radius: var(--radius);
}
.persp-card.is-open { background: transparent; border-style: dashed; }
.persp-head { display: flex; align-items: center; gap: var(--space-2); }
.persp-head h3 { margin: 0; flex: 1; min-width: 0; font-family: var(--font-body); font-size: 15.5px; font-weight: 700; }
.persp-head h3 a { color: var(--ui-text); text-decoration: none; }
.persp-head h3 a:hover { color: var(--ui-link); }
.ratio.is-open { color: var(--ui-text-muted); }
.persp-question { margin: 0; font-size: 12.5px; color: var(--ui-text-muted); }
.persp-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ui-text-secondary); }
.kpi-rows { list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.kpi-rows li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 4.5rem; gap: var(--space-2); align-items: center; padding: 5px 0; font-size: 13.5px; border-top: 1px solid var(--ui-border-subtle); }
.kpi-rows li:first-child { border-top: 0; }
.kpi-rows li:not(:has(.px-icon)) { grid-template-columns: minmax(0, 1fr) auto 4.5rem; }
.kr-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-secondary); }
.kr-value { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.kr-delta { font-size: 12.5px; color: var(--ui-text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.kpi-rows li.is-missing .kr-value { font-weight: 500; font-size: 12.5px; color: var(--ui-text-muted); }
.persp-card .spark { margin-top: var(--space-1); }
.persp-more { margin-top: auto; padding-top: var(--space-1); font-size: 13px; font-weight: 600; align-self: flex-start; }

.goals { list-style: none; margin: 0; padding: 0; }
.goal { padding: var(--space-3) 0; border-top: 1px solid var(--ui-border-subtle); }
.goal:first-child { border-top: 0; padding-top: 0; }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.goal-head strong { font-size: 15px; }
.goal-kr { margin: 2px 0 var(--space-2); font-size: 13px; color: var(--ui-text-secondary); }
.goal-bar { display: block; width: 100%; height: 10px; }
.goal-track { fill: var(--ui-surface-raised); }
.goal-fill { fill: var(--series-1); }
.goal-bar.is-down .goal-fill { fill: var(--ui-warning); }
.goal-bar.is-open .goal-fill { fill: var(--ui-text-muted); }
.goal-plan { fill: var(--ui-text); }
.goal-meta { margin: var(--space-2) 0 0; font-size: 12.5px; color: var(--ui-text-muted); }
.goal-meta strong { color: var(--ui-text); font-variant-numeric: tabular-nums; }
.goal-actions { margin-top: var(--space-2); }

.insight-list { display: flex; flex-direction: column; gap: var(--space-3); }
.insight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
@media (max-width: 560px) { .insight-grid { grid-template-columns: 1fr; } }
.insight { padding: var(--space-3) var(--space-4); background: var(--ui-bg-alt); border: 1px solid var(--ui-border-subtle); border-left: 3px solid var(--series-1); border-radius: var(--radius-small); }
.insight-grid .insight { background: var(--ui-surface); }
.insight-entwurf { border-left-color: var(--ui-warning); border-left-style: dashed; }
.insight-ueberholt { border-left-color: var(--ui-text-muted); opacity: .75; }
.insight-ueberholt h3 { text-decoration: line-through; text-decoration-color: var(--ui-text-muted); }
.insight-head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.insight-status { font-size: 12px; font-weight: 650; color: var(--ui-text-muted); }
.status-geprueft { color: var(--ui-success); }
.status-entwurf { color: var(--ui-warning); }
.insight h3 { margin: var(--space-2) 0 var(--space-1); font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1.35; }
.insight p { margin: 0 0 var(--space-1); font-size: 13.5px; color: var(--ui-text-secondary); line-height: 1.45; }
.insight .insight-meta { font-size: 12px; color: var(--ui-text-muted); }
.insight-kpis { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kpi-link { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-tiny); background: var(--ui-surface-raised); text-decoration: none; }
.insight .inline-actions { margin-top: var(--space-2); }
.insight .inline-actions form { margin: 0; }

.planned li { line-height: 1.5; }
.empty-icon { margin: 0 auto var(--space-4); }
textarea.mono { font-family: var(--font-mono); font-size: 12.5px; }

.persp-config { display: flex; flex-direction: column; gap: var(--space-2); }
.persp-cfg { border: 1px solid var(--ui-border-subtle); border-radius: var(--radius-small); background: var(--ui-bg-alt); }
.persp-cfg > summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); cursor: pointer; flex-wrap: wrap; }
.persp-cfg > summary .choice { margin: 0; }
.persp-cfg-kpis { font-size: 12.5px; font-family: var(--font-mono); margin-left: auto; }
.persp-pos select { min-height: 32px; width: auto; padding-right: 28px; }
.persp-cfg > .slot-grid { padding: var(--space-3); border-top: 1px solid var(--ui-border-subtle); }
.planned-rows { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.planned-rows li { display: flex; flex-direction: column; padding: 5px 0; border-top: 1px solid var(--ui-border-subtle); }
.planned-rows li:first-child { border-top: 0; }
.planned-rows span { color: var(--ui-text-muted); font-size: 12.5px; }