/* ============================================================
   Prism — Bryckroad social calendar (V1 HTML prototype)
   Styles per BRYCKROAD_DESIGN_SYSTEM.md
   Fonts: Epilogue (headings) + Reddit Sans (body) — Worksite pairing
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Surfaces */
  --color-canvas: 241 243 244;
  --color-surface: 255 255 255;
  --color-surface-muted: 241 243 244;
  --color-surface-sunken: 232 234 237;
  --color-hover: 241 243 244;
  --color-active: 232 234 237;
  --color-selected: 232 240 254;

  /* Text */
  --color-text: 32 33 36;
  --color-text-muted: 95 99 104;
  --color-text-subtle: 128 134 139;

  /* Lines */
  --color-border: 218 220 224;
  --color-border-subtle: 232 234 237;
  --color-border-strong: 189 193 198;

  /* Accent */
  --color-accent: 26 115 232;
  --color-accent-hover: 23 100 204;
  --color-accent-subtle: 232 240 254;
  --color-accent-ink: 23 100 204;
  --color-accent-foreground: 255 255 255;

  /* Semantic states */
  --color-success: 30 142 62;   --color-success-subtle: 230 244 234; --color-success-ink: 19 115 51;
  --color-warning: 242 153 0;   --color-warning-subtle: 254 247 224; --color-warning-ink: 176 96 0;
  --color-danger: 217 48 37;    --color-danger-subtle: 252 232 230;  --color-danger-ink: 197 34 31;
  --color-info: 26 115 232;     --color-info-subtle: 232 240 254;    --color-info-ink: 23 100 204;

  /* Person identity dots (deterministic per user, see personPill) */
  --person-dot-0: 176 0 79;
  --person-dot-1: 160 90 0;
  --person-dot-2: 13 101 45;
  --person-dot-3: 26 86 176;
  --person-dot-4: 118 39 187;
  --person-dot-5: 0 123 131;

  /* Radii */
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-ambient: 0 1px 2px 0 rgba(60,64,67,.08);
  --shadow-raised: 0 1px 3px 0 rgba(60,64,67,.12), 0 1px 2px -1px rgba(60,64,67,.08);
  --shadow-pop: 0 2px 6px 2px rgba(60,64,67,.12), 0 1px 2px 0 rgba(60,64,67,.10);
  --shadow-overlay: 0 8px 24px 0 rgba(60,64,67,.20);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;

  /* Theme-flippable values */
  --modal-backdrop: rgb(60 64 67 / .35);
  --surface-alt: #fbfcfd;
  --chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f6368' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Fonts */
  --font-body: 'Reddit Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Epilogue', var(--font-body);
}

/* ---------- Dark mode ---------- */
:root[data-theme="dark"] {
  --color-canvas: 24 25 28;
  --color-surface: 36 38 42;
  --color-surface-muted: 32 34 38;
  --color-surface-sunken: 44 46 51;
  --color-hover: 48 50 55;
  --color-active: 56 58 64;
  --color-selected: 30 53 91;

  --color-text: 232 234 237;
  --color-text-muted: 161 165 171;
  --color-text-subtle: 130 134 140;

  --color-border: 56 58 64;
  --color-border-subtle: 48 50 55;
  --color-border-strong: 80 84 92;

  --color-accent: 138 180 248;
  --color-accent-hover: 174 203 250;
  --color-accent-subtle: 30 53 91;
  --color-accent-ink: 174 203 250;
  --color-accent-foreground: 12 18 30;

  --color-success: 129 201 149;   --color-success-subtle: 30 60 38;  --color-success-ink: 129 201 149;
  --color-warning: 252 184 87;    --color-warning-subtle: 72 50 12;  --color-warning-ink: 252 184 87;
  --color-danger:  242 139 130;   --color-danger-subtle:  72 28 28;  --color-danger-ink:  242 139 130;
  --color-info:    138 180 248;   --color-info-subtle:    30 53 91;  --color-info-ink:    174 203 250;

  --person-dot-0: 255 158 198;
  --person-dot-1: 255 207 125;
  --person-dot-2: 159 224 179;
  --person-dot-3: 165 200 255;
  --person-dot-4: 213 170 255;
  --person-dot-5: 143 227 236;

  --shadow-ambient: 0 1px 2px 0 rgba(0,0,0,.28);
  --shadow-raised:  0 1px 3px 0 rgba(0,0,0,.4), 0 1px 2px -1px rgba(0,0,0,.32);
  --shadow-pop:     0 4px 12px 0 rgba(0,0,0,.45), 0 2px 4px 0 rgba(0,0,0,.32);
  --shadow-overlay: 0 12px 32px 0 rgba(0,0,0,.6);

  --modal-backdrop: rgb(0 0 0 / .55);
  --surface-alt: #2a2c31;
  --chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a5ab' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --color-canvas: 24 25 28;
    --color-surface: 36 38 42;
    --color-surface-muted: 32 34 38;
    --color-surface-sunken: 44 46 51;
    --color-hover: 48 50 55;
    --color-active: 56 58 64;
    --color-selected: 30 53 91;

    --color-text: 232 234 237;
    --color-text-muted: 161 165 171;
    --color-text-subtle: 130 134 140;

    --color-border: 56 58 64;
    --color-border-subtle: 48 50 55;
    --color-border-strong: 80 84 92;

    --color-accent: 138 180 248;
    --color-accent-hover: 174 203 250;
    --color-accent-subtle: 30 53 91;
    --color-accent-ink: 174 203 250;
    --color-accent-foreground: 12 18 30;

    --color-success: 129 201 149;   --color-success-subtle: 30 60 38;  --color-success-ink: 129 201 149;
    --color-warning: 252 184 87;    --color-warning-subtle: 72 50 12;  --color-warning-ink: 252 184 87;
    --color-danger:  242 139 130;   --color-danger-subtle:  72 28 28;  --color-danger-ink:  242 139 130;
    --color-info:    138 180 248;   --color-info-subtle:    30 53 91;  --color-info-ink:    174 203 250;

    --person-dot-0: 255 158 198;
    --person-dot-1: 255 207 125;
    --person-dot-2: 159 224 179;
    --person-dot-3: 165 200 255;
    --person-dot-4: 213 170 255;
    --person-dot-5: 143 227 236;

    --shadow-ambient: 0 1px 2px 0 rgba(0,0,0,.28);
    --shadow-raised:  0 1px 3px 0 rgba(0,0,0,.4), 0 1px 2px -1px rgba(0,0,0,.32);
    --shadow-pop:     0 4px 12px 0 rgba(0,0,0,.45), 0 2px 4px 0 rgba(0,0,0,.32);
    --shadow-overlay: 0 12px 32px 0 rgba(0,0,0,.6);

    --modal-backdrop: rgb(0 0 0 / .55);
    --surface-alt: #2a2c31;
    --chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a5ab' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--color-text));
  background: rgb(var(--color-canvas));
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; }
p { margin: 0; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
a { color: rgb(var(--color-accent-ink)); }
::placeholder { color: rgb(var(--color-text-subtle)); }
svg { flex-shrink: 0; }

/* ---------- Recipe classes ---------- */
.surface-card  { border-radius: var(--radius-card);  background: rgb(var(--color-surface)); box-shadow: var(--shadow-ambient); }
.surface-panel { border-radius: var(--radius-panel); background: rgb(var(--color-surface)); box-shadow: var(--shadow-raised); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; cursor: pointer; font-weight: 500; border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
  height: 36px; padding: 0 16px; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--color-accent) / .4); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn:active { transform: scale(.98); }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; }
.btn-lg { height: 40px; padding: 0 20px; }
.btn-primary { background: rgb(var(--color-accent)); color: rgb(var(--color-accent-foreground)); box-shadow: var(--shadow-ambient); }
.btn-primary:hover { background: rgb(var(--color-accent-hover)); box-shadow: var(--shadow-raised); }
.btn-soft    { background: rgb(var(--color-accent-subtle)); color: rgb(var(--color-accent-ink)); }
.btn-soft:hover { background: rgb(var(--color-selected)); }
.btn-outline { background: rgb(var(--color-surface)); color: rgb(var(--color-text)); border: 1px solid rgb(var(--color-border)); }
.btn-outline:hover { background: rgb(var(--color-hover)); border-color: rgb(var(--color-border-strong)); }
.btn-ghost   { background: transparent; color: rgb(var(--color-text-muted)); }
.btn-ghost:hover { background: rgb(var(--color-hover)); color: rgb(var(--color-text)); }
.btn-danger  { background: rgb(var(--color-danger)); color: rgb(var(--color-surface)); box-shadow: var(--shadow-ambient); }
.btn-danger:hover { filter: brightness(.95); }
.btn-danger-ghost { background: transparent; color: rgb(var(--color-danger-ink)); }
.btn-danger-ghost:hover { background: rgb(var(--color-danger-subtle)); }
.btn-success { background: rgb(var(--color-success)); color: rgb(var(--color-surface)); box-shadow: var(--shadow-ambient); }
.btn-success:hover { filter: brightness(.95); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; width: 32px; border: 0; cursor: pointer; background: transparent;
  border-radius: var(--radius-pill); color: rgb(var(--color-text-subtle));
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.icon-btn:hover { background: rgb(var(--color-hover)); color: rgb(var(--color-text)); }
.icon-btn.danger:hover { background: rgb(var(--color-danger-subtle)); color: rgb(var(--color-danger-ink)); }

.btn-row {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: rgb(var(--color-surface)); color: rgb(var(--color-text));
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-pill);
  padding: 0 10px; height: 26px; font-size: 12px; font-weight: 500; cursor: pointer;
  text-decoration: none; line-height: 1;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.btn-row:hover { background: rgb(var(--color-hover)); border-color: rgb(var(--color-border-strong)); }
.btn-row--icon { width: 28px; height: 28px; padding: 0; color: rgb(var(--color-text-muted)); }
.btn-row--icon:hover { color: rgb(var(--color-text)); }

.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip-default { background: rgb(var(--color-accent-subtle)); color: rgb(var(--color-accent-ink)); }
.chip-success { background: rgb(var(--color-success-subtle)); color: rgb(var(--color-success-ink)); }
.chip-warning { background: rgb(var(--color-warning-subtle)); color: rgb(var(--color-warning-ink)); }
.chip-danger  { background: rgb(var(--color-danger-subtle));  color: rgb(var(--color-danger-ink)); }
.chip-muted   { background: rgb(var(--color-surface-sunken)); color: rgb(var(--color-text-muted)); }
.chip-outline { border: 1px solid rgb(var(--color-border)); color: rgb(var(--color-text-muted)); }
.chip-sm { padding: 1px 8px; font-size: 11px; }

.field {
  display: flex; width: 100%; height: 36px; padding: 0 12px; font-size: 14px;
  color: rgb(var(--color-text)); background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-control);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field:hover { border-color: rgb(var(--color-border-strong)); }
.field:focus { outline: none; border-color: rgb(var(--color-accent)); box-shadow: 0 0 0 2px rgb(var(--color-accent) / .3); }
textarea.field { height: auto; min-height: 80px; padding: 8px 12px; line-height: 1.6; resize: vertical; }
select.field {
  appearance: none; -webkit-appearance: none;
  background-image: var(--chevron-url);
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px; cursor: pointer;
}
.field-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: rgb(var(--color-text-muted)); }

.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 500;
  color: rgb(var(--color-text-muted)); text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.nav-item:hover { background: rgb(var(--color-hover)); color: rgb(var(--color-text)); }
.nav-item-active { background: rgb(var(--color-selected)); color: rgb(var(--color-accent-ink)); }
.nav-item > svg { flex-shrink: 0; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: rgb(var(--color-danger));
  color: rgb(var(--color-surface)); font-size: 11px; font-weight: 600;
}

.list-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; transition: background-color var(--dur-fast); }
.list-row:hover { background: rgb(var(--color-hover)); }

.metric-card { border-radius: var(--radius-card); background: rgb(var(--color-surface)); padding: 14px 16px; box-shadow: var(--shadow-ambient); }
.table-wrap { overflow: hidden; border-radius: var(--radius-card); background: rgb(var(--color-surface)); box-shadow: var(--shadow-ambient); }
.section-title { font-size: 14px; font-weight: 600; color: rgb(var(--color-text)); font-family: var(--font-head); }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgb(var(--color-text-muted));
}

[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: rgb(var(--color-text)); color: rgb(var(--color-surface));
  padding: 5px 10px; border-radius: var(--radius-control);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  pointer-events: none; z-index: 20;
}
[data-tooltip]:hover::before {
  content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgb(var(--color-text));
  pointer-events: none; z-index: 20;
}

/* ---------- App shell ---------- */
.app-shell { display: flex; height: 100vh; min-height: 0; gap: 8px; padding: 8px; }

.sidebar {
  display: flex; flex-direction: column; width: 224px; flex-shrink: 0;
  border-radius: var(--radius-panel); background: rgb(var(--color-surface));
  box-shadow: var(--shadow-ambient);
  transition: width var(--dur-base) var(--ease-standard);
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; }
.sidebar-brand > svg { flex-shrink: 0; transition: opacity var(--dur-fast); }
.sidebar-collapse { margin-left: auto; width: 26px; height: 26px; flex-shrink: 0; }
.sidebar-brand-name { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: rgb(var(--color-text)); letter-spacing: -.01em; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-footer { padding: 12px; border-top: 1px solid rgb(var(--color-border-subtle)); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; }
.sidebar-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgb(var(--color-accent)); color: rgb(var(--color-accent-foreground));
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.sidebar-user-meta { min-width: 0; }
.sidebar-user-name { font-size: 12px; font-weight: 600; color: rgb(var(--color-text)); line-height: 1.2; }
.sidebar-user-role { font-size: 11px; color: rgb(var(--color-text-subtle)); line-height: 1.2; }
.sidebar-switch-label { font-size: 11px; font-weight: 500; color: rgb(var(--color-text-subtle)); margin: 6px 4px 3px; display: block; }
.sidebar-footer select.field { height: 30px; font-size: 12px; border-radius: 10px; padding: 0 28px 0 10px; }
/* Footer rows — Pulse pattern: icon + label ghost rows, toggle rides the theme row */
.side-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px;
  border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-pill);
  font-size: 12.5px; color: rgb(var(--color-text-muted));
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.side-row:hover { background: rgb(var(--color-hover)); color: rgb(var(--color-text)); }
.side-row .theme-toggle { margin-left: auto; }
.side-row > svg { flex-shrink: 0; }
.side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.side-row { text-decoration: none; }

.theme-toggle { position: relative; width: 32px; height: 18px; background: transparent; border: 0; padding: 0; cursor: pointer; flex-shrink: 0; }
.theme-toggle-track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: rgb(var(--color-surface-sunken)); transition: background-color var(--dur-base) var(--ease-standard); }
.theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: rgb(var(--color-surface)); box-shadow: var(--shadow-ambient); transition: transform var(--dur-base) var(--ease-standard); }
.theme-toggle.is-on .theme-toggle-track { background: rgb(var(--color-accent)); }
.theme-toggle.is-on .theme-toggle-knob { transform: translateX(14px); }

/* Collapsed sidebar — 56px of icons, everything textual folds away. Scoped
   above the mobile breakpoint: below it the sidebar is an off-canvas drawer
   that has no business collapsing. The brand mark doubles as the expand
   control — hovering the brand row swaps it for the chevron, since 56px has
   no room for both. */
@media (min-width: 769px) {
  .sidebar.is-collapsed { width: 56px; }
  .sidebar.is-collapsed .sidebar-brand { position: relative; justify-content: center; padding: 0; gap: 0; }
  .sidebar.is-collapsed .sidebar-brand-name { display: none; }
  .sidebar.is-collapsed .sidebar-brand:hover > svg { opacity: 0; }
  .sidebar.is-collapsed .sidebar-collapse {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    opacity: 0; transition: opacity var(--dur-fast);
  }
  .sidebar.is-collapsed .sidebar-brand:hover .sidebar-collapse,
  .sidebar.is-collapsed .sidebar-collapse:focus-visible { opacity: 1; }

  .sidebar.is-collapsed .nav-item { justify-content: center; padding: 8px 0; gap: 0; position: relative; }
  .sidebar.is-collapsed .nav-label { display: none; }
  .sidebar.is-collapsed .nav-badge {
    position: absolute; top: 1px; right: 3px; margin-left: 0;
    min-width: 15px; height: 15px; padding: 0 3px; font-size: 9.5px;
    border: 1.5px solid rgb(var(--color-surface));
  }

  .sidebar.is-collapsed .sidebar-footer { padding: 12px 8px; }
  .sidebar.is-collapsed .sidebar-user { justify-content: center; padding: 4px 0 10px; gap: 0; }
  .sidebar.is-collapsed .sidebar-user-meta { display: none; }
  .sidebar.is-collapsed .side-row { justify-content: center; padding: 7px 0; gap: 0; }
  .sidebar.is-collapsed .side-label,
  .sidebar.is-collapsed .side-row .theme-toggle,
  .sidebar.is-collapsed .sidebar-switch-label,
  .sidebar.is-collapsed .sidebar-footer select.field { display: none; }
}

.main { flex: 1; min-width: 0; overflow-y: auto; border-radius: var(--radius-panel); }
.page { max-width: 1200px; margin: 0 auto; padding: 24px 28px 48px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.page-subtitle { color: rgb(var(--color-text-muted)); font-size: 13px; margin-top: 2px; }
.page-actions { display: flex; align-items: center; gap: 8px; }

.hamburger { display: none; }

@media (max-width: 768px) {
  .sidebar {
    position: fixed; top: 8px; bottom: 8px; left: 8px; z-index: 60;
    transform: translateX(calc(-100% - 16px));
    transition: transform var(--dur-base) var(--ease-standard);
    box-shadow: var(--shadow-overlay);
  }
  .sidebar.is-open { transform: translateX(0); }
  /* The drawer is already off-canvas, so it never collapses — the .is-collapsed
     rules are scoped above this breakpoint. Its toggle would be a dead end. */
  .sidebar-collapse { display: none; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 55; background: var(--modal-backdrop); }
  .hamburger { display: inline-flex; margin-bottom: 12px; }
  .page { padding: 16px 16px 40px; }
}

/* ---------- Stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; }
.stat-tile--link { color: inherit; text-decoration: none; cursor: pointer; transition: box-shadow var(--dur-fast), transform var(--dur-fast); }
.stat-tile--link:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); }
.stat-tile--link:focus-visible { outline: 2px solid rgb(var(--color-accent)); outline-offset: 2px; }
.stat-label { font-size: 12px; font-weight: 500; color: rgb(var(--color-text-muted)); display: flex; align-items: center; gap: 6px; }
.stat-value { font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.2; }
.stat-hint { font-size: 11px; color: rgb(var(--color-text-subtle)); }

/* ---------- Dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dash-grid > * { min-width: 0; }
@media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr; } }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.card-body { padding: 0 0 8px; }
.empty-note { padding: 20px 16px 24px; text-align: center; color: rgb(var(--color-text-subtle)); font-size: 13px; }
.queue-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; transition: background-color var(--dur-fast); }
.queue-row:hover { background: rgb(var(--color-hover)); }
.queue-row-main { flex: 1; min-width: 0; }
.queue-row-caption { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-row-meta { font-size: 12px; color: rgb(var(--color-text-muted)); display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.day-group-label { padding: 10px 16px 4px; }

/* ---------- Channel dot / pills ---------- */
.ch-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ch-pill, .person-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-pill); padding: 2px 10px 2px 8px;
  font-size: 12px; font-weight: 500; line-height: 18px;
  background: rgb(var(--color-surface-sunken)); color: rgb(var(--color-text-muted));
  min-width: 0; max-width: 100%;
}
.pill-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-pill .p-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: rgb(var(--color-border-strong)); }
.pt-0 .p-dot { background: rgb(var(--person-dot-0)); }
.pt-1 .p-dot { background: rgb(var(--person-dot-1)); }
.pt-2 .p-dot { background: rgb(var(--person-dot-2)); }
.pt-3 .p-dot { background: rgb(var(--person-dot-3)); }
.pt-4 .p-dot { background: rgb(var(--person-dot-4)); }
.pt-5 .p-dot { background: rgb(var(--person-dot-5)); }

/* ---------- Calendar toolbar ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: rgb(var(--color-surface-sunken)); }
.seg button {
  border: 0; cursor: pointer; background: transparent; border-radius: var(--radius-pill);
  height: 28px; padding: 0 14px; font-size: 12.5px; font-weight: 500;
  color: rgb(var(--color-text-muted));
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.seg button:hover { color: rgb(var(--color-text)); }
.seg button.is-active { background: rgb(var(--color-surface)); color: rgb(var(--color-text)); box-shadow: var(--shadow-ambient); }
.cal-nav { display: inline-flex; align-items: center; gap: 2px; }
.cal-range { font-family: var(--font-head); font-size: 15px; font-weight: 600; padding: 0 6px; min-width: 150px; text-align: center; }
.cal-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip-count { background: rgb(var(--color-accent-foreground) / .22); color: inherit; margin-left: 2px; }

/* Active filter rules, one removable pill each */
.flt-pill {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid rgb(var(--color-border)); background: rgb(var(--color-surface));
  border-radius: var(--radius-pill); padding: 3px 4px 3px 11px;
  font-size: 12px; font-weight: 500; color: rgb(var(--color-text-muted));
  max-width: 320px;
}
.flt-pill-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 0; padding: 0; cursor: pointer;
  border-radius: 50%; background: transparent; color: rgb(var(--color-text-subtle));
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.flt-pill-x:hover { background: rgb(var(--color-hover)); color: rgb(var(--color-text)); }
.cal-clear { color: rgb(var(--color-text-subtle)); border-style: dashed; }
.cal-empty { margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.cal-empty p { margin: 0; }

/* ---------- Filter builder popover ---------- */
.flt-pop {
  position: fixed; z-index: 70; width: min(560px, calc(100vw - 16px));
  max-height: min(70vh, 640px); overflow-y: auto;
  box-shadow: var(--shadow-overlay); padding: 4px 0 0;
}
.flt-hint { padding: 12px 14px; margin: 0; font-size: 12.5px; color: rgb(var(--color-text-subtle)); }
.flt-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 6px; }
.flt-views { border-bottom: 1px solid rgb(var(--color-border-subtle)); padding-bottom: 6px; }
.flt-view { display: flex; align-items: center; gap: 6px; padding: 1px 10px 1px 14px; }
.flt-view-apply {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 6px 8px; border-radius: var(--radius-pill);
  font-size: 13px; color: rgb(var(--color-text));
  transition: background-color var(--dur-fast);
}
.flt-view-apply:hover { background: rgb(var(--color-hover)); }
.flt-view-apply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flt-view-by { font-size: 11px; color: rgb(var(--color-text-subtle)); white-space: nowrap; }
.flt-view-btn { width: 24px; height: 24px; }

.flt-rules { padding: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.flt-row { display: flex; align-items: flex-start; gap: 6px; padding: 0 10px 0 14px; }
.flt-row .field { height: 30px; font-size: 12.5px; border-radius: 9px; }
.flt-conj { flex: 0 0 62px; font-size: 12px; color: rgb(var(--color-text-subtle)); }
.flt-conj--first, .flt-conj--echo { padding-top: 8px; }
.flt-conj--pick { flex: 0 0 62px; padding-left: 6px; }
.flt-prop { flex: 0 0 108px; }
.flt-op { flex: 0 0 128px; }
.flt-value { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.flt-value .field { width: 100%; }
.flt-value--none { flex: 1; }
.flt-range .field { min-width: 0; }
.flt-dash { color: rgb(var(--color-text-subtle)); font-size: 12px; }
.flt-multi {
  flex-direction: column; align-items: stretch; gap: 0;
  max-height: 132px; overflow-y: auto; padding: 4px 0;
  border: 1px solid rgb(var(--color-border)); border-radius: 9px;
  background: rgb(var(--color-surface-sunken));
}
.flt-check { display: flex; align-items: center; gap: 8px; padding: 3px 9px; font-size: 12.5px; cursor: pointer; }
.flt-check:hover { background: rgb(var(--color-hover)); }
.flt-check input { accent-color: rgb(var(--color-accent)); }
.flt-empty-opts { padding: 6px 9px; font-size: 12px; color: rgb(var(--color-text-subtle)); }
.flt-menu-btn { width: 26px; height: 30px; flex-shrink: 0; }

.flt-nested { display: flex; align-items: flex-start; gap: 6px; padding: 0 10px 0 14px; }
.flt-nested-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 8px 0; border: 1px dashed rgb(var(--color-border)); border-radius: var(--radius-card);
  background: rgb(var(--color-surface-sunken));
}
.flt-nested-body .flt-row { padding: 0 8px; }
.flt-nested-body .flt-conj { flex: 0 0 52px; }
.flt-nested-foot { padding: 0 8px; }

.flt-foot {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-top: 1px solid rgb(var(--color-border-subtle));
  position: sticky; bottom: 0; background: rgb(var(--color-surface));
}
.flt-menu { position: fixed; z-index: 80; width: 170px; padding: 4px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-overlay); }
.flt-menu .btn-row { width: 100%; justify-content: flex-start; border: 0; }
.btn-row.danger { color: rgb(var(--color-danger-ink)); }

@media (max-width: 700px) {
  .flt-row, .flt-nested { flex-wrap: wrap; }
  .flt-prop, .flt-op { flex: 1 1 130px; }
  .flt-value { flex: 1 1 100%; }
}

/* ---------- Calendar layout: grid + preview panel ---------- */
.cal-layout { display: flex; gap: 16px; align-items: flex-start; }
.cal-main { flex: 1; min-width: 0; }
.cal-panel {
  width: 420px; flex-shrink: 0;
  position: sticky; top: 0;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 14px 16px 0;
}
.cal-panel-scrim { display: none; }
@media (max-width: 1199px) {
  .cal-panel { display: none; }
  .cal-layout.has-selection .cal-panel {
    display: block; position: fixed; z-index: 80;
    top: 8px; right: 8px; bottom: 8px;
    width: min(440px, calc(100vw - 32px)); max-height: none;
    box-shadow: var(--shadow-overlay);
  }
  .cal-layout.has-selection .cal-panel-scrim { display: block; position: fixed; inset: 0; z-index: 75; background: var(--modal-backdrop); }
}

/* Panel: shared header + drafts list */
.pv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pv-hint { font-size: 12px; color: rgb(var(--color-text-subtle)); margin-bottom: 10px; }
/* Says out loud that this list ignores the calendar filter */
.pv-head-note { margin-left: auto; font-size: 11px; color: rgb(var(--color-text-subtle)); }
.pv-when { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: rgb(var(--color-text-muted)); margin-bottom: 12px; }
/* An admin's panel stacks the review queue above their own drafts */
.pv-section + .pv-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgb(var(--color-border-subtle)); }
.pv-drafts { display: flex; flex-direction: column; }
.pv-draft {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-radius: var(--radius-control); cursor: pointer;
  transition: background-color var(--dur-fast);
}
.pv-draft:hover { background: rgb(var(--color-hover)); }
.pv-draft-thumb { width: 44px; height: 44px; aspect-ratio: auto; border-radius: 8px; flex-shrink: 0; cursor: pointer; }
.pv-draft-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--color-surface-sunken)); color: rgb(var(--color-text-subtle));
}
.pv-draft-main { flex: 1; min-width: 0; }
.pv-draft-cap { font-size: 12.5px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-draft-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgb(var(--color-text-muted)); margin-top: 2px; min-width: 0; }
.pv-draft-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Panel: simulated native post */
.pv-post {
  border: 1px solid rgb(var(--color-border-subtle)); border-radius: var(--radius-card);
  background: var(--surface-alt); overflow: hidden; font-size: 13px;
}
.pv-row { display: flex; align-items: center; gap: 8px; }
.pv-pad { padding: 10px 12px; }
.pv-name { font-weight: 600; font-size: 12.5px; }
.pv-dim { color: rgb(var(--color-text-subtle)); display: inline-flex; align-items: center; gap: 3px; }
.pv-caption { font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; padding-top: 0; }
/* Avatar = the round Bryckroad mark (inline SVG) on every account */
.pv-avatar { display: inline-flex; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.pv-avatar svg { width: 100%; height: 100%; display: block; }
.pv-actions { color: rgb(var(--color-text-muted)); gap: 14px; }
.pv-actions span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; }
.pv-actions--spread { justify-content: space-between; gap: 8px; }
.pv-likes { font-size: 12.5px; font-weight: 600; padding-top: 0; padding-bottom: 2px; }
.pv-counts { color: rgb(var(--color-text-subtle)); font-size: 11.5px; padding-top: 6px; padding-bottom: 6px; }
.pv-counts span { display: inline-flex; align-items: center; gap: 4px; }
.pv-sep { border-top: 1px solid rgb(var(--color-border-subtle)); }

.pv-media { position: relative; background: rgb(var(--color-surface-sunken)); overflow: hidden; }
.pv-square { aspect-ratio: 1 / 1; }
.pv-landscape { aspect-ratio: 16 / 10; }
.pv-portrait { aspect-ratio: 9 / 16; }
.pv-video { aspect-ratio: 16 / 9; }
.pv-rounded { border-radius: 12px; border: 1px solid rgb(var(--color-border-subtle)); }
.pv-media .pv-slide { position: absolute; inset: 0; display: none; aspect-ratio: auto; border-radius: 0; cursor: default; }
.pv-media .pv-slide.is-active { display: block; }
.pv-media-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: rgb(var(--color-text-subtle)); font-size: 11px; font-weight: 500;
}
.pv-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3;
  display: flex; justify-content: center; gap: 5px;
}
.pv-dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.4);
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}
.pv-dot.is-active { background: #fff; transform: scale(1.15); }

/* Carousel chrome: counter pill and paging arrows over the frame. Arrows
   surface on hover the way they do on the real platforms; the counter stays
   put for a carousel, because that is the post telling you what it is. */
.pv-count {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 10.5px; font-weight: 600; line-height: 1.5;
  opacity: 0; transition: opacity var(--dur-fast);
}
.pv-media:hover .pv-count, .pv-media--carousel .pv-count { opacity: 1; }
.pv-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.9); color: #202124;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  opacity: 0; transition: opacity var(--dur-fast);
}
.pv-arrow--prev { left: 8px; }
.pv-arrow--next { right: 8px; }
.pv-media:hover .pv-arrow, .pv-arrow:focus-visible { opacity: 1; }

/* Story: 9:16 with the platform's chrome over the media, not around it */
.pv-story { border: 0; background: transparent; overflow: visible; }
.pv-story-frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-card); background: #111;
  max-width: 300px; margin: 0 auto;
}
.pv-story-frame .pv-media { background: #1c1c1e; }
.pv-story-chrome {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 12px; color: #fff; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55));
}
.pv-story-bars { display: flex; gap: 3px; }
.pv-story-seg { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.35); }
.pv-story-seg.is-done { background: rgba(255,255,255,.85); }
.pv-story-seg.is-on { background: #fff; }
.pv-story-head { gap: 7px; font-size: 12px; }
.pv-story-when { color: rgba(255,255,255,.75); font-size: 11px; }
.pv-story-body { flex: 1; display: flex; align-items: flex-end; min-height: 0; }
.pv-story-cap {
  width: 100%; font-size: 12.5px; line-height: 1.45; font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,.55); pointer-events: auto;
}
.pv-story-foot { gap: 8px; }
.pv-story-reply {
  flex: 1; padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.6); color: rgba(255,255,255,.85); font-size: 11.5px;
}
.pv-story-act { display: inline-flex; flex-shrink: 0; }

/* Safe zones: where the platform's own chrome lands on a 1080×1920 frame */
.pv-safe {
  position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none;
  /* The label hugs the band's inner edge, not its middle: the middle is
     exactly where the chrome it is describing already sits. */
  display: flex; justify-content: flex-end; padding: 3px 8px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.11) 0 6px, rgba(255,255,255,0) 6px 12px);
  border-color: rgba(255,255,255,.4); border-style: dashed; border-width: 0;
}
.pv-safe--top { top: 0; border-bottom-width: 1px; align-items: flex-end; }
.pv-safe--bottom { bottom: 0; border-top-width: 1px; align-items: flex-start; }
.pv-safe span {
  font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.7);
}

/* TikTok 9:16 frame with overlaid caption + action rail */
.pv-tt { border: 0; background: transparent; }
.pv-tt-frame { position: relative; border-radius: var(--radius-card); overflow: hidden; background: #111; }
.pv-tt-frame .pv-media { background: #222; }
.pv-tt-overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 8px 14px 12px; color: #fff; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%);
}
.pv-tt-meta { flex: 1; min-width: 0; }
.pv-tt-cap { font-size: 12px; line-height: 1.45; margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv-tt-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.pv-tt-rail-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pv-tt-rail-item i { font-style: normal; font-size: 10px; font-weight: 600; }
.pv-tt-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 12px; color: rgba(255,255,255,.7); font-size: 12px; font-weight: 500;
  background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,0));
  pointer-events: none;
}
.pv-tt-top .is-on { color: #fff; font-weight: 700; }
.pv-tt-top .pv-tt-search { position: absolute; right: 12px; color: #fff; display: inline-flex; }
.pv-tt .pv-dots { bottom: 4px; }
/* Photo mode: same feed, different post — labelled so the preview can't be
   mistaken for the video player it isn't. */
.pv-tt-tag {
  position: absolute; top: 38px; left: 12px; z-index: 3;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.9); color: #111;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pv-tt--photo .pv-count { top: 38px; }

/* YouTube player frame */
.pv-yt-player { position: relative; background: #17181b; }
.pv-yt-player .pv-media { background: #26282d; }
.pv-yt-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 10px 6px; color: #fff; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.pv-yt-progress { height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); margin-bottom: 6px; overflow: hidden; }
.pv-yt-progress span { display: block; width: 38%; height: 100%; background: #f03; }
.pv-yt-time { font-size: 10.5px; font-weight: 500; }
.pv-yt-title { font-size: 13px; font-weight: 600; line-height: 1.4; }
.pv-yt-sub {
  margin-left: auto; flex-shrink: 0;
  background: #f03; color: #fff; border-radius: var(--radius-pill);
  padding: 4px 12px; font-size: 11.5px; font-weight: 600;
}

/* ---------- Inline post editor ----------
   The preview above is the input surface: everything here either sits
   around it or turns one of its parts editable in place. */
.pe { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
.pe-head { margin-bottom: 0; }
.pe-head .pe-save { margin-left: auto; }
.pe-icon { width: 28px; height: 28px; }
.pe-save-note {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: rgb(var(--color-text-subtle));
  white-space: nowrap;
}
.pe-save-note.is-ok { color: rgb(var(--color-success-ink)); }

.pe-notices:empty { display: none; }
.pe-notice {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px; border-radius: var(--radius-control);
  font-size: 12px; line-height: 1.45; margin-bottom: 8px;
}
.pe-notice:last-child { margin-bottom: 0; }
.pe-notice svg { margin-top: 1px; }
.pe-notice.is-warn { background: rgb(var(--color-warning-subtle)); color: rgb(var(--color-warning-ink)); }
.pe-notice.is-info { background: rgb(var(--color-accent-subtle)); color: rgb(var(--color-accent-ink)); align-items: center; }
.pe-notice .btn-row { margin-left: auto; flex-shrink: 0; }

/* The editable caption is the inert one plus a caret — same metrics, so the
   truncation point never moves when you start typing. */
.pe-cap {
  outline: none; white-space: pre-wrap; word-break: break-word;
  border-radius: 6px; box-shadow: 0 0 0 1px transparent;
  transition: box-shadow var(--dur-fast), background-color var(--dur-fast);
  cursor: text; min-height: 1.4em;
}
.pe-cap:hover { box-shadow: 0 0 0 1px rgb(var(--color-border)); }
.pe-cap:focus { box-shadow: 0 0 0 2px rgb(var(--color-accent) / .45); }
.pe-cap:empty::before {
  content: attr(data-ph); color: rgb(var(--color-text-subtle)); pointer-events: none;
}
.pv-cap-inline { display: inline; }
.pv-cap-x { padding: 8px 0 10px; }
/* TikTok's overlay is click-through chrome — the caption inside it is not.
   Its three-line clamp is the fold, so it stays until you're actually
   typing past it. */
.pv-tt-overlay .pe-cap { pointer-events: auto; }
.pv-tt-overlay .pe-cap:focus { -webkit-line-clamp: unset; display: block; }

/* Media frame as a drop target */
.pv-media--drop { border: 1.5px dashed rgb(var(--color-border)); }
.pv-media.drag-over {
  outline: 2px dashed rgb(var(--color-accent));
  outline-offset: -3px; background: rgb(var(--color-accent-subtle) / .5);
}
.pv-media-empty .pe-browse { margin-top: 6px; pointer-events: auto; }
.pe-add-media {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(var(--color-text) / .6); color: rgb(var(--color-surface));
  opacity: 0; transition: opacity var(--dur-fast);
}
.pv-media:hover .pe-add-media { opacity: 1; }

/* Slide rail: the reorder surface, under the frame rather than in it —
   the frame only ever shows one slide, so there is nothing in there to
   drag a slide onto. */
.pe-slides[hidden] { display: none; }
.pe-slides-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 11px; font-weight: 600; color: rgb(var(--color-text-muted));
}
.pe-slides-hint { margin-left: auto; font-weight: 500; color: rgb(var(--color-text-subtle)); }
.pe-slide-rail { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.pe-slide {
  position: relative; flex: 0 0 auto; width: 54px;
  border-radius: 8px; cursor: grab; user-select: none;
  box-shadow: 0 0 0 1px rgb(var(--color-border-subtle));
  transition: box-shadow var(--dur-fast), opacity var(--dur-fast);
}
.pe-slide:hover { box-shadow: 0 0 0 1px rgb(var(--color-border)); }
.pe-slide.is-active { box-shadow: 0 0 0 2px rgb(var(--color-accent)); }
.pe-slide.is-dragging { opacity: .4; cursor: grabbing; }
.pe-slide.drop-before, .pe-slide.drop-after {
  /* The insertion point, drawn as an edge rather than a gap so the rail
     doesn't reflow under the pointer mid-drag. */
  box-shadow: 0 0 0 1px rgb(var(--color-border-subtle)), inset 3px 0 0 rgb(var(--color-accent));
}
.pe-slide.drop-after { box-shadow: 0 0 0 1px rgb(var(--color-border-subtle)), inset -3px 0 0 rgb(var(--color-accent)); }
.pe-slide-thumb { aspect-ratio: 1 / 1; border-radius: 8px; cursor: inherit; }
.pe-slide-thumb .mt-fallback { padding: 2px; }
.pe-slide-n {
  position: absolute; left: 3px; bottom: 3px;
  min-width: 14px; padding: 0 3px; border-radius: 4px; text-align: center;
  background: rgba(0,0,0,.6); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 14px;
}
.pe-slide-x {
  position: absolute; top: 2px; right: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(var(--color-text) / .65); color: rgb(var(--color-surface));
  opacity: 0; transition: opacity var(--dur-fast);
}
.pe-slide:hover .pe-slide-x { opacity: 1; }

/* Validation: warnings, never blocks — a plan is allowed to run ahead of
   what a platform permits. */
.pe-warns { display: flex; flex-direction: column; gap: 6px; }
.pe-warns:empty { display: none; }
.pe-warn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-control);
  background: rgb(var(--color-warning-subtle)); color: rgb(var(--color-warning-ink));
  font-size: 11.5px; line-height: 1.4;
}
.pe-warn svg { flex-shrink: 0; }
.pe-warn .btn-row { margin-left: auto; flex-shrink: 0; }

/* Properties: rows that read as text until you click one */
.pe-props {
  display: flex; flex-direction: column;
  border: 1px solid rgb(var(--color-border-subtle)); border-radius: var(--radius-card);
  overflow: hidden;
}
.pe-prop {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; min-height: 36px; text-align: left;
  background: transparent; border: 0; border-top: 1px solid rgb(var(--color-border-subtle));
  font-size: 12.5px; color: rgb(var(--color-text)); cursor: pointer;
  transition: background-color var(--dur-fast);
}
.pe-prop:first-child { border-top: 0; }
.pe-prop.is-static, .pe-prop.is-open { cursor: default; }
button.pe-prop:hover { background: rgb(var(--color-hover)); }
.pe-prop > svg { margin-left: auto; color: rgb(var(--color-text-subtle)); opacity: 0; }
button.pe-prop:hover > svg { opacity: 1; }
.pe-prop-k { flex: 0 0 76px; font-size: 12px; font-weight: 500; color: rgb(var(--color-text-muted)); }
.pe-prop-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-prop-empty { color: rgb(var(--color-text-subtle)); }
.pe-prop-input { flex: 1; min-width: 0; height: 30px; font-size: 12.5px; border-radius: 9px; }

/* Collapsible blocks: notes and comments */
.pe-block { border-top: 1px solid rgb(var(--color-border-subtle)); padding-top: 10px; }
.pe-block-head {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: transparent; border: 0; padding: 2px 0 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: rgb(var(--color-text));
}
.pe-block-head svg { color: rgb(var(--color-text-subtle)); }
.pe-caret { margin-left: auto; display: inline-flex; }
.pe-notes { min-height: 64px; font-size: 12.5px; }
.pe-static-text { font-size: 12.5px; color: rgb(var(--color-text-muted)); white-space: pre-wrap; }
.pe-comments .comment-composer .field { height: 32px; font-size: 12.5px; }

/* Workflow transitions stay reachable however long the post is */
.pe-actions {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 -16px; padding: 10px 16px 14px;
  background: rgb(var(--color-surface));
  border-top: 1px solid rgb(var(--color-border-subtle));
}
.pe-actions:empty { display: none; }
.pe-spacer { flex: 1; }
.pe-author { min-width: 0; overflow: hidden; }
.pe-reject { margin-top: 0; }
.pe-menu { width: 180px; }
.pe.is-readonly .pv-media { cursor: default; }

/* ---------- Device previews ----------
   The stage is drawn at real device dimensions and scaled into whatever
   width the host panel has, so it is positioned out of flow and the host
   takes the scaled height (set by fitStage). Nothing here may assume the
   panel's width — full screen uses the same markup at 1:1. */
.pe-devbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg-xs { padding: 2px; }
.seg-xs button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; font-size: 11.5px; }
.pe-devsize {
  height: 26px; padding: 0 26px 0 11px; max-width: 200px;
  font-size: 11.5px; font-weight: 500; font-family: inherit;
  color: rgb(var(--color-text-muted)); background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-pill);
  appearance: none; -webkit-appearance: none;
  background-image: var(--chevron-url); background-repeat: no-repeat; background-position: right 9px center;
  cursor: pointer;
}
.pe-devsize:hover { border-color: rgb(var(--color-border-strong)); }
.pe-devnote { font-size: 11px; font-weight: 500; color: rgb(var(--color-text-subtle)); white-space: nowrap; }
/* Only shown when the stage isn't at real size — silence means 1:1 */
.pe-scale {
  margin-left: auto; padding: 1px 7px; border-radius: var(--radius-pill);
  background: rgb(var(--color-surface-sunken)); color: rgb(var(--color-text-subtle));
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.pe-scale:empty { display: none; }

.pe-preview { position: relative; overflow: hidden; min-height: 80px; }
.pe-stage { position: absolute; top: 0; left: 0; transform-origin: top left; }
.pe-stage-foot { display: flex; justify-content: center; gap: 8px; }
.pe-stage-foot:empty { display: none; }

/* Phone */
.pe-phone { height: 100%; background: #0d0e11; box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, var(--shadow-overlay); }
.pe-phone-screen {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  background: rgb(var(--color-surface)); color: rgb(var(--color-text));
}
.pe-phone-status {
  position: relative; z-index: 5; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; padding: 0 22px; font-size: 12.5px; font-weight: 600;
}
.pe-phone-island {
  position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  width: 94px; height: 26px; border-radius: var(--radius-pill); background: #0d0e11;
}
.pe-phone-icons { display: inline-flex; align-items: center; gap: 5px; }
.pe-ph-sig { width: 13px; height: 8px; background: repeating-linear-gradient(to right, currentColor 0 3px, transparent 3px 5px); }
.pe-ph-wifi { width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; clip-path: polygon(0 0, 100% 0, 50% 62%); }
.pe-ph-batt { position: relative; width: 20px; height: 10px; border: 1.4px solid currentColor; border-radius: 3px; }
.pe-ph-batt::before { content: ''; position: absolute; inset: 1.6px; background: currentColor; border-radius: 1px; }
.pe-ph-batt::after { content: ''; position: absolute; left: 100%; top: 3px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: currentColor; }
.pe-phone-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* Inside a phone a feed post is the app, not a card sitting on one. The
   full-bleed surfaces (TikTok, stories) already have no card to flatten. */
.pe-phone .pv-post:not(.pv-tt):not(.pv-story) { border-width: 0 0 1px; border-radius: 0; }
/* A story runs under the status bar the way it does on the device */
.pe-phone--immersive .pe-phone-status { position: absolute; top: 0; left: 0; right: 0; color: #fff; }
.pe-phone--immersive .pe-phone-island { background: #000; }
.pe-phone--immersive .pe-phone-scroll { overflow: hidden; }
.pv-story--fill { height: 100%; }
.pv-story--fill .pv-story-frame { max-width: none; height: 100%; border-radius: 0; }
.pv-story--fill .pv-story-frame > .pv-media { position: absolute; inset: 0; aspect-ratio: auto; }
.pv-story--fill .pv-story-chrome { padding-top: 44px; }

/* Browser */
.pe-browser {
  border: 1px solid rgb(var(--color-border-subtle)); border-radius: 14px; overflow: hidden;
  background: rgb(var(--color-surface)); box-shadow: var(--shadow-overlay);
}
.pe-browser-bar {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  background: rgb(var(--color-surface-sunken)); border-bottom: 1px solid rgb(var(--color-border-subtle));
}
.pe-browser-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.pe-browser-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--color-border-strong)); }
.pe-browser-url {
  flex: 1; padding: 5px 14px; border-radius: var(--radius-pill);
  background: rgb(var(--color-surface)); color: rgb(var(--color-text-muted));
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-browser-page { background: var(--surface-alt); }
.pe-desk-col { margin: 0 auto; }
/* Web type is bigger than phone type — the templates are drawn for 390px */
.pe-stage--desktop .pv-caption, .pe-stage--desktop .pv-cap-x, .pe-stage--desktop .pv-cap-inline { font-size: 14px; line-height: 1.55; }
.pe-stage--desktop .pv-name { font-size: 13.5px; }
.pe-stage--desktop .pv-pad { padding: 12px 16px; }
/* LinkedIn stacks follower count and timestamp; .pv-dim is inline-flex, so at
   a width that doesn't force a wrap the two lines ran together. */
.pv-li .pv-row > div > .pv-dim { display: flex; }

/* Instagram on the web: media beside the conversation, not above it */
.pv-igd { display: grid; grid-template-columns: 600px minmax(0, 1fr); }
.pv-igd-media { background: #000; }
.pv-igd-side { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid rgb(var(--color-border-subtle)); }
.pv-igd-head { border-bottom: 1px solid rgb(var(--color-border-subtle)); flex-shrink: 0; }
.pv-igd-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 6px; }
.pv-igd-cap { align-items: flex-start; padding-bottom: 4px; }
.pv-igd-cap .pv-avatar { margin-top: 2px; }
.pv-igd-comment { padding: 6px 16px 6px 56px; font-size: 13px; color: rgb(var(--color-text-muted)); }
.pv-igd-foot { flex-shrink: 0; padding-top: 10px; }
.pv-igd-add { flex-shrink: 0; font-size: 13px; }
.pv-igd-post { margin-left: auto; color: rgb(var(--color-accent)); font-weight: 600; }

/* YouTube on the web: player, then everything the page hangs off it */
.pv-ytd { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.pv-ytd-main { min-width: 0; }
.pv-ytd-title { font-size: 18px; line-height: 1.3; margin: 14px 0 10px; }
.pv-ytd-bar { gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgb(var(--color-border-subtle)); }
.pv-ytd-desc { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgb(var(--color-surface-sunken)); font-size: 12.5px; }
.pv-ytd-side { display: flex; flex-direction: column; gap: 10px; }
.pv-ytd-next { display: flex; gap: 9px; }
.pv-ytd-next-thumb {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 100px; height: 58px; border-radius: 8px;
  background: rgb(var(--color-surface-sunken)); color: rgb(var(--color-text-subtle));
}
.pv-ytd-next-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }

/* Full screen: the preview gets the room, the post's details move beside it */
.pe-fullscreen { background: rgb(var(--color-surface)); }
.pe.is-expanded {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 14px 24px; align-content: start;
  min-height: 100%; padding: 16px 24px 24px;
}
.pe.is-expanded > .pe-head, .pe.is-expanded > .pe-notices { grid-column: 1 / -1; }
.pe-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pe.is-expanded .pe-actions { margin: 0; padding: 12px 0 0; }
@media (max-width: 900px) {
  .pe.is-expanded { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Month grid ---------- */
.cal-grid { overflow: hidden; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: rgb(var(--color-surface-sunken)); }
.cal-dow div { padding: 8px 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--color-text-muted)); }
.cal-weeks { display: grid; grid-auto-rows: minmax(118px, auto); }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid rgb(var(--color-border-subtle)); }
.cal-week:first-child { border-top: 0; }
.cal-day { padding: 6px; min-width: 0; border-left: 1px solid rgb(var(--color-border-subtle)); display: flex; flex-direction: column; gap: 3px; transition: background-color var(--dur-fast); position: relative; }
.cal-day:first-child { border-left: 0; }
.cal-day.is-outside { background: rgb(var(--color-surface-muted) / .5); }
.cal-day.is-outside .cal-day-num { color: rgb(var(--color-text-subtle)); }
.cal-day.drag-over { background: rgb(var(--color-selected)); }
.cal-day-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.cal-day-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 500; color: rgb(var(--color-text-muted));
}
.cal-day.is-today .cal-day-num { background: rgb(var(--color-accent)); color: rgb(var(--color-accent-foreground)); font-weight: 600; }
.cal-day-add { opacity: 0; }
.cal-day:hover .cal-day-add { opacity: 1; }
.cal-more { font-size: 11px; font-weight: 500; color: rgb(var(--color-accent-ink)); cursor: pointer; padding: 1px 6px; border-radius: var(--radius-pill); align-self: flex-start; }
.cal-more:hover { background: rgb(var(--color-accent-subtle)); }

/* Hide-weekends: 5 weekday columns + a slim weekend-spill strip */
.cal-dow.cols-5, .cal-week.cols-5 { grid-template-columns: repeat(5, 1fr) 34px; }
.cal-wknd {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; padding: 8px 2px; border-left: 1px solid rgb(var(--color-border-subtle));
  background: rgb(var(--color-surface-muted) / .5);
}
.cal-wknd-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: rgb(var(--color-surface-sunken)); color: rgb(var(--color-text-muted));
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.cal-wknd-label { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--color-text-subtle)); }

/* ---------- Post cards ---------- */
.post-chip {
  display: flex; align-items: center; gap: 5px;
  border-left: 3px solid transparent; border-radius: 6px;
  background: var(--surface-alt); box-shadow: var(--shadow-ambient);
  padding: 3px 7px 3px 6px; font-size: 11.5px; cursor: pointer;
  min-width: 0; transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.post-chip:hover { box-shadow: var(--shadow-raised); }
.post-chip .pc-time { font-weight: 600; color: rgb(var(--color-text-muted)); font-size: 10.5px; flex-shrink: 0; }
.post-chip .pc-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-chip.st-draft { border-left-style: dashed; opacity: .8; }
.post-chip.st-draft .pc-text { color: rgb(var(--color-text-muted)); }
.post-chip.st-pending { background: rgb(var(--color-warning-subtle)); }
.post-chip.st-rejected { background: rgb(var(--color-danger-subtle)); }
.post-chip.is-dragging { opacity: .4; }
.post-chip[draggable="true"] { user-select: none; }

/* Month-chip thumbnail of the first media item */
.post-chip .pc-thumb {
  width: 20px; height: 20px; aspect-ratio: auto; border-radius: 5px;
  flex-shrink: 0; cursor: inherit; pointer-events: none;
}
.post-chip .pc-thumb .mt-fallback { padding: 0; }
.post-chip .pc-thumb .mt-play { display: none; }

/* Selected-for-preview highlight */
.post-chip.is-selected, .post-card.is-selected {
  outline: 2px solid rgb(var(--color-accent)); outline-offset: -1px;
}

.post-card {
  border-left: 3px solid transparent; border-radius: 10px;
  background: var(--surface-alt); box-shadow: var(--shadow-ambient);
  padding: 8px 10px; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  transition: box-shadow var(--dur-fast);
}
.post-card:hover { box-shadow: var(--shadow-raised); }
.post-card.is-dragging { opacity: .4; }
.post-card-top { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgb(var(--color-text-muted)); }
/* Week/channel-card thumbnail: full width, capped height */
.post-card .card-thumb {
  width: 100%; aspect-ratio: 3 / 2; max-height: 110px; border-radius: 7px;
  cursor: inherit; pointer-events: none;
}
.post-card-caption { font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px 6px; flex-wrap: wrap; }

/* ---------- Week grid ---------- */
.week-wrap { overflow-x: auto; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); min-width: 860px; }
.week-grid.cols-5 { grid-template-columns: repeat(5, minmax(120px, 1fr)); min-width: 640px; }
.week-grid.cols-5-wknd { grid-template-columns: repeat(5, minmax(120px, 1fr)) 52px; min-width: 690px; }
.week-col--wknd .week-col-body { align-items: center; min-height: 0; }
.week-col--wknd .week-col-head { justify-content: center; }
.week-col { border-left: 1px solid rgb(var(--color-border-subtle)); min-width: 0; display: flex; flex-direction: column; }
.week-col:first-child { border-left: 0; }
.week-col-head { padding: 8px 10px; background: rgb(var(--color-surface-sunken)); display: flex; align-items: baseline; gap: 6px; }
.week-col-head .wd { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--color-text-muted)); }
.week-col-head .wn { font-family: var(--font-head); font-size: 15px; font-weight: 600; }
.week-col-head.is-today .wn { color: rgb(var(--color-accent-ink)); }
.week-col-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 300px; transition: background-color var(--dur-fast); }
.week-col-body.drag-over { background: rgb(var(--color-selected)); }

/* ---------- Channel swimlanes ---------- */
.lane-grid { overflow-x: auto; }
.lane-table { display: grid; grid-template-columns: 148px repeat(7, minmax(110px, 1fr)); min-width: 900px; }
.lane-table.cols-5 { grid-template-columns: 168px repeat(5, minmax(110px, 1fr)); min-width: 700px; }
.lane-corner, .lane-day-head { background: rgb(var(--color-surface-sunken)); padding: 8px 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--color-text-muted)); }
.lane-day-head.is-today { color: rgb(var(--color-accent-ink)); }
.lane-label { display: flex; align-items: center; gap: 8px; padding: 10px; font-size: 13px; font-weight: 600; border-top: 1px solid rgb(var(--color-border-subtle)); }
.lane-cell { border-top: 1px solid rgb(var(--color-border-subtle)); border-left: 1px solid rgb(var(--color-border-subtle)); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-height: 56px; transition: background-color var(--dur-fast); }
.lane-cell.drag-over { background: rgb(var(--color-selected)); }

/* ============================================================
   Campaigns section — list beside detail, and the shared
   template library. The calendar's old campaign view is gone;
   this is where campaigns live now.
   ============================================================ */

.cmp-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.cmp-layout > * { min-width: 0; }
@media (max-width: 1000px) { .cmp-layout { grid-template-columns: 1fr; } }

.cmp-list { overflow: hidden; }
.cmp-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 11px 16px; border: 0; border-top: 1px solid rgb(var(--color-border-subtle));
  background: transparent; cursor: pointer; text-align: left;
  transition: background-color var(--dur-fast);
}
.cmp-row:hover { background: rgb(var(--color-hover)); }
.cmp-row.is-selected { background: rgb(var(--color-selected) / .5); }
.cmp-row-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.cmp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cmp-row-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-row-meta { font-size: 11.5px; color: rgb(var(--color-text-muted)); }

/* Approved-of-total, because that is what says whether a campaign is ready. */
.cmp-bar { display: block; height: 4px; border-radius: var(--radius-pill); background: rgb(var(--color-surface-sunken)); overflow: hidden; margin-top: 3px; }
.cmp-bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: rgb(var(--color-success)); transition: width var(--dur-base) var(--ease-standard); }

.cmp-detail .setting-row textarea.field { min-height: 52px; padding-top: 7px; font-size: 13px; }
.cmp-detail .setting-row .field { height: 32px; font-size: 13px; }
.cmp-detail .setting-row textarea.field { height: auto; }
.cmp-dash { color: rgb(var(--color-text-subtle)); font-size: 12px; }
.cmp-desc { font-size: 13px; color: rgb(var(--color-text-muted)); margin: 0; }
/* Fixed-width labels so the two panes' fields line up as a column. Scoped:
   Settings' own rows keep the wider, darker label they were drawn with. */
.cmp-detail .setting-label, .tpl-editor .setting-label {
  font-size: 12.5px; color: rgb(var(--color-text-muted)); width: 92px;
}

.cmp-timeline-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; border-top: 1px solid rgb(var(--color-border-subtle)); margin-top: 4px; }
.cmp-day { padding: 0 16px 4px; }
.cmp-day-head { display: flex; align-items: baseline; gap: 8px; padding: 8px 0 4px; }
.cmp-day-date { font-size: 12px; font-weight: 600; }
.cmp-day-off { font-size: 11px; color: rgb(var(--color-text-subtle)); }
.cmp-post {
  display: grid; grid-template-columns: 56px minmax(0, 130px) 1fr auto; gap: 10px; align-items: center;
  padding: 7px 8px; margin-left: 4px; border-radius: var(--radius-control); cursor: pointer;
  border-left: 2px solid rgb(var(--color-border)); transition: background-color var(--dur-fast);
}
.cmp-post:hover { background: rgb(var(--color-hover)); }
.cmp-post-time { font-size: 12px; font-weight: 500; color: rgb(var(--color-text-muted)); }
.cmp-post-cap { font-size: 12.5px; color: rgb(var(--color-text-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .cmp-post { grid-template-columns: 56px 1fr auto; }
  .cmp-post-cap { display: none; }
}

/* ---------- Template library ---------- */
.tpl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.tpl-head .page-subtitle { margin: 0; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 760px) { .tpl-grid { grid-template-columns: 1fr; } }
/* A description of any length pushes the buttons down unless they anchor to
   the top, which is where the title they belong to is. */
.tpl-card .card-head { align-items: flex-start; }
.tpl-title { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.tpl-title .cmp-row-dot { margin-top: 5px; }
.tpl-steps { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.tpl-step {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgb(var(--color-border-subtle)); border-radius: var(--radius-pill);
  padding: 3px 10px; font-size: 12px; color: rgb(var(--color-text-muted));
}
.tpl-step-off { color: rgb(var(--color-text-subtle)); font-size: 11px; }
.tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid rgb(var(--color-border-subtle)); }

.tpl-editor { max-width: 980px; }
.tpl-rows { display: flex; flex-direction: column; }
.tpl-row {
  display: grid; gap: 8px; align-items: center; padding: 8px 16px;
  grid-template-columns: 130px 1fr 92px 96px 108px 1.2fr 30px;
  border-top: 1px solid rgb(var(--color-border-subtle));
}
.tpl-row .field { height: 32px; font-size: 12.5px; min-width: 0; }
.tpl-off { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgb(var(--color-text-muted)); }
.tpl-off .field { width: 58px; }
.tpl-editor-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid rgb(var(--color-border-subtle)); }
@media (max-width: 1080px) {
  .tpl-row { grid-template-columns: 1fr 1fr 92px 96px; grid-auto-flow: row; }
  .tpl-row .tpl-cap { grid-column: 1 / -1; }
}

/* ---------- The campaign walkthrough ---------- */
.wiz { max-width: 900px; }
.wiz-dots { display: flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 10px; }
.wiz-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--color-border-strong)); transition: background-color var(--dur-fast), transform var(--dur-fast); }
.wiz-dot.is-done { background: rgb(var(--color-success)); }
.wiz-dot.is-at { background: rgb(var(--color-accent)); transform: scale(1.5); }
.wiz-lead { font-size: 13px; color: rgb(var(--color-text-muted)); margin: 0 0 14px; }

.wiz-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .wiz-tpl-grid { grid-template-columns: 1fr; } }
.wiz-tpl {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: var(--radius-card);
  border: 1px solid rgb(var(--color-border)); background: rgb(var(--color-surface));
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.wiz-tpl:hover { border-color: rgb(var(--color-accent)); box-shadow: var(--shadow-raised); }
.wiz-tpl.is-picked { border-color: rgb(var(--color-accent)); background: rgb(var(--color-selected) / .5); }
.wiz-tpl--blank { border-style: dashed; }
.wiz-tpl-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wiz-tpl-name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.wiz-tpl-desc { font-size: 12px; color: rgb(var(--color-text-muted)); }

.wiz-field { display: flex; flex-direction: column; gap: 5px; }
.wiz-field.full { grid-column: 1 / -1; }

.wiz-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* The editor is mounted here — it draws its own surface, so this is only a
   height ceiling so the modal's foot stays reachable on a short window. */
.wiz-editor { max-height: min(64vh, 620px); overflow-y: auto; }

.wiz-review { display: flex; flex-direction: column; }
.wiz-review-row {
  display: grid; grid-template-columns: 150px minmax(0, 130px) 1fr auto auto auto; gap: 10px; align-items: center;
  padding: 9px 4px; border-top: 1px solid rgb(var(--color-border-subtle)); font-size: 12.5px;
}
.wiz-review-row:first-child { border-top: 0; }
.wiz-review-row.is-skipped { opacity: .5; }
.wiz-review-when { font-weight: 500; }
.wiz-review-cap { color: rgb(var(--color-text-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-blocked { margin-top: 12px; }
@media (max-width: 720px) {
  .wiz-review-row { grid-template-columns: 1fr auto auto; }
  .wiz-review-row .ch-pill, .wiz-review-cap { display: none; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: var(--modal-backdrop);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
.modal { width: 100%; max-width: 640px; margin: auto 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.modal-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.modal-body { padding: 8px 20px 16px; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px 18px; }
.modal-foot .spacer { flex: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.status-line { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; color: rgb(var(--color-text-muted)); flex-wrap: wrap; }
.reject-box { margin-top: 12px; padding: 12px; border-radius: var(--radius-control); background: rgb(var(--color-danger-subtle)); }
.reject-box .field { background: rgb(var(--color-surface)); }

/* ---------- Comments ---------- */
.comments { border-top: 1px solid rgb(var(--color-border-subtle)); margin-top: 16px; padding-top: 12px; }
.comment { display: flex; gap: 10px; padding: 8px 0; }
.comment-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  background: rgb(var(--color-surface-sunken)); color: rgb(var(--color-text-muted));
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.comment-meta .who { font-weight: 600; }
.comment-meta .when { color: rgb(var(--color-text-subtle)); font-size: 11px; }
.comment-text { font-size: 13px; margin-top: 1px; white-space: pre-wrap; word-break: break-word; }
.comment-composer { display: flex; gap: 8px; margin-top: 8px; }
.comment-composer .field { flex: 1; }

/* ---------- Ideas ---------- */
.ideas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.idea-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.idea-title { font-family: var(--font-head); font-size: 14.5px; font-weight: 600; }
.idea-desc { font-size: 13px; color: rgb(var(--color-text-muted)); line-height: 1.55; flex: 1; }
.idea-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.idea-foot > .flex { min-width: 0; max-width: 100%; }
.idea-foot .ch-pill { flex-shrink: 0; }
.idea-foot .btn { flex-shrink: 0; margin-left: auto; }
.idea-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-fast); }
.idea-card:hover .idea-actions { opacity: 1; }

/* ---------- Settings ---------- */
.settings-stack { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.setting-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid rgb(var(--color-border-subtle)); }
.setting-row:first-of-type { border-top: 0; }
.setting-row .grow { flex: 1; }
.setting-row input[type="text"].field { height: 32px; font-size: 13px; }
.channel-platform { width: 178px; height: 32px; font-size: 12px; flex-shrink: 0; }
.swatch {
  width: 32px; height: 32px; padding: 0; border: 1px solid rgb(var(--color-border));
  border-radius: 10px; cursor: pointer; background: transparent;
}
.swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.swatch::-webkit-color-swatch { border: none; border-radius: 7px; }
.usage-note { font-size: 11px; color: rgb(var(--color-text-subtle)); white-space: nowrap; }
.setting-label { font-size: 13px; font-weight: 500; color: rgb(var(--color-text)); flex-shrink: 0; }
.setting-row .usage-note.grow { flex: 1; white-space: normal; }
.setting-check { width: 16px; height: 16px; accent-color: rgb(var(--color-accent)); cursor: pointer; flex-shrink: 0; }
.card-pad { padding: 14px 16px; }

/* ---------- Media attachments ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.media-thumb {
  position: relative; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: rgb(var(--color-surface-sunken)); aspect-ratio: 4 / 3; min-width: 0;
}
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb .mt-remove {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(var(--color-text) / .65); color: rgb(var(--color-surface));
  opacity: 0; transition: opacity var(--dur-fast);
}
.media-thumb:hover .mt-remove { opacity: 1; }
.media-thumb .mt-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none;
}
.media-thumb .mt-fallback {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px; text-align: center;
  font-size: 10.5px; font-weight: 500; color: rgb(var(--color-text-muted));
}
.media-thumb .mt-fallback span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.media-thumb.is-fallback img { display: none; }
.media-thumb.is-fallback .mt-fallback { display: flex; }
.media-drop {
  border: 1.5px dashed rgb(var(--color-border)); border-radius: 10px; aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px; text-align: center; cursor: pointer;
  font-size: 10.5px; font-weight: 500; color: rgb(var(--color-text-subtle));
  transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}
.media-drop:hover, .media-grid.drag-over .media-drop {
  border-color: rgb(var(--color-accent)); color: rgb(var(--color-accent-ink));
  background: rgb(var(--color-accent-subtle) / .5);
}
.post-card-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.post-card-thumbs .media-thumb { aspect-ratio: 16 / 10; border-radius: 6px; cursor: default; }
.pc-att { display: inline-flex; align-items: center; gap: 1px; color: rgb(var(--color-text-subtle)); flex-shrink: 0; font-size: 10px; }
/* A carousel and a story are different posts to write and to approve, so the
   chip says which it is; the warning mark says the channel can't publish it. */
.pc-fmt { display: inline-flex; align-items: center; color: rgb(var(--color-text-subtle)); flex-shrink: 0; }
.pc-warn { display: inline-flex; align-items: center; color: rgb(var(--color-warning-ink)); flex-shrink: 0; }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 8px;
  border-radius: var(--radius-card); background: rgb(var(--color-surface));
  box-shadow: var(--shadow-pop); padding: 10px 14px; font-size: 13px; font-weight: 500;
  animation: toast-in var(--dur-base) var(--ease-standard);
}
.toast .t-msg { min-width: 0; }
.toast .t-action { margin-left: 4px; flex-shrink: 0; }
.toast .t-ok { color: rgb(var(--color-success)); }
.toast .t-err { color: rgb(var(--color-danger)); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Misc ---------- */
.muted { color: rgb(var(--color-text-muted)); }
.subtle { color: rgb(var(--color-text-subtle)); }
.flex { display: flex; align-items: center; gap: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 8px; }
.notice-card { padding: 20px; text-align: center; color: rgb(var(--color-text-muted)); }

/* ============ sign-in page (branded /prism/login/ — WP plugin only; Pulse design) ============ */
body.prism-login { margin: 0; background: rgb(var(--color-canvas)); font-family: var(--font-body); }
.login-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 400px;
  background: rgb(var(--color-surface));
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-raised);
  padding: 36px 34px 30px;
}
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgb(var(--color-accent)); color: rgb(var(--color-accent-foreground));
  display: flex; align-items: center; justify-content: center;
}
.login-brand-name { font-family: var(--font-head); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: rgb(var(--color-text)); }
.login-brand-sub {
  font-family: 'Reddit Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--color-text-subtle)); margin-top: -2px;
}
.login-title {
  font-family: var(--font-head); font-weight: 800;
  font-size: 26px; letter-spacing: -.02em;
  color: rgb(var(--color-text)); margin: 0 0 6px;
}
.login-sub { font-size: 13.5px; color: rgb(var(--color-text-muted)); margin: 0 0 20px; }
.login-notice {
  font-size: 13px; padding: 10px 14px; border-radius: var(--radius-control);
  background: rgb(var(--color-info-subtle)); color: rgb(var(--color-info-ink));
  margin-bottom: 16px;
}
.login-notice.is-error { background: rgb(var(--color-danger-subtle)); color: rgb(var(--color-danger-ink)); }
.login-field-group { margin-bottom: 14px; }
.login-field-label {
  display: block; font-family: 'Reddit Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgb(var(--color-text-subtle)); margin-bottom: 6px;
}
.login-field {
  width: 100%; box-sizing: border-box;
  font: 500 14px var(--font-body); color: rgb(var(--color-text));
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-control);
  padding: 10px 13px; outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.login-field:focus { border-color: rgb(var(--color-accent)); box-shadow: 0 0 0 3px rgb(var(--color-accent) / .18); }
.login-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 18px; font-size: 12.5px; color: rgb(var(--color-text-muted));
}
.login-remember { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.login-remember input { accent-color: rgb(var(--color-accent)); }
.login-link { color: rgb(var(--color-accent-ink)); text-decoration: none; font-weight: 600; }
.login-link:hover { text-decoration: underline; }
.login-submit {
  width: 100%; border: 0; cursor: pointer;
  font: 700 14px var(--font-body);
  color: rgb(var(--color-accent-foreground));
  background: rgb(var(--color-accent));
  border-radius: var(--radius-pill);
  padding: 12px 16px;
  box-shadow: var(--shadow-ambient);
  transition: background var(--dur-fast) var(--ease-standard);
}
.login-submit:hover { background: rgb(var(--color-accent-hover)); }
.login-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: rgb(var(--color-text-subtle)); font-size: 12px;
}
.login-or::before, .login-or::after {
  content: ''; flex: 1; height: 1px; background: rgb(var(--color-border-subtle));
}
/* The add-on's button stylesheet is not loaded on this virtual page — the
   anchor is restyled wholesale to the Bryckroad pill button (Pulse pattern). */
.login-google { text-align: center; }
.login-google a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box;
  font: 600 14px var(--font-body); color: rgb(var(--color-text));
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius-pill);
  padding: 11px 16px; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.login-google a:hover { background: rgb(var(--color-hover)); }

/* ---------- Branded sign-in ----------------------------------------------
   The port of prism_render_login() in legacy/prism/frontend/routing.php: the
   Pulse card pattern (accent brand tile, mono uppercase field labels, pill
   buttons). WordPress authenticated behind this; Supabase does now, so the
   password form is gone — Google and a magic link are the two ways in, the
   same as the portal and every other tool on the platform. */
.prism-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgb(var(--color-canvas)); }
.prism-auth-card { width: 100%; max-width: 380px; padding: 34px 30px; text-align: center;
  background: rgb(var(--color-surface)); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-overlay); border: 1px solid rgb(var(--color-border-subtle)); }
.prism-auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.prism-auth-mark { width: 30px; height: 30px; border-radius: 9px; background: rgb(var(--color-accent));
  color: rgb(var(--color-accent-foreground)); display: inline-flex; align-items: center; justify-content: center; }
.prism-auth-mark svg { width: 17px; height: 17px; }
.prism-auth-wordmark { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -.01em;
  color: rgb(var(--color-text)); }
.prism-auth-byline { font-size: 12px; color: rgb(var(--color-text-subtle)); margin: -14px 0 22px; }
.prism-auth-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 6px; font-size: 22px; color: rgb(var(--color-text)); }
.prism-auth-sub { margin: 0 0 24px; font-size: 13px; color: rgb(var(--color-text-muted)); line-height: 1.5; }
.prism-auth-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.prism-field-group { display: flex; flex-direction: column; }
.prism-auth-or { display: flex; align-items: center; gap: 10px; margin: 18px 0;
  color: rgb(var(--color-text-subtle)); font-size: 12px; }
.prism-auth-or::before, .prism-auth-or::after { content: ""; flex: 1; height: 1px; background: rgb(var(--color-border)); }
.prism-auth-google { display: flex; justify-content: center; }
.prism-auth-notice { font-size: 13px; padding: 9px 12px; border-radius: var(--radius-control);
  margin-bottom: 16px; text-align: left; background: rgb(var(--color-surface-sunken));
  color: rgb(var(--color-text-muted)); }
.prism-auth-notice.is-error { background: rgb(var(--color-danger) / .12); color: rgb(var(--color-danger)); }