/* portal/assets/ds.css — SlideSmith portal styles.
 *
 * The :root block below is copied VERBATIM from Dreamslide/css/slidesmith-ui.css
 * (BRIEF-S8c step 5 / CLAUDE.md "Design system") — `tools/design-system` in the
 * extension repo is the authority on the VALUES; if a token here looks wrong,
 * fix it there and re-copy, never edit a value in place. The z-index ladder is
 * omitted: this is a plain page, not a layered popover host, so it has nothing
 * to order against. Everything past the block extends these tokens — no
 * hardcoded brand hex past this point.
 */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;650;700&display=swap');

:root {
  /* === Surfaces (CLEAR/LIGHT frosted glass) === */
  --ds-glass-bg: rgba(238, 242, 247, 0.96);
  --ds-glass-blur: blur(14px) saturate(118%);
  --ds-glass-border: rgba(255, 255, 255, 0.70);
  --ds-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --ds-glass-shadow: 0 8px 26px rgba(31, 45, 66, 0.18);

  /* === Text (dark ink for legibility on the light frost) === */
  --ds-fg-primary: #1d2b3e;
  --ds-fg-secondary: #3a4658;
  --ds-fg-muted: rgba(58, 70, 88, 0.55);
  --ds-fg-disabled: rgba(58, 70, 88, 0.32);

  /* === Control surfaces (glass-on-glass; cool-grey tints over the frost) === */
  --ds-control-bg: rgba(60, 80, 110, 0.06);
  --ds-control-bg-hover: rgba(60, 80, 110, 0.12);
  --ds-control-bg-active: rgba(60, 80, 110, 0.18);
  --ds-control-border: rgba(60, 80, 110, 0.14);
  --ds-control-border-hover: rgba(60, 80, 110, 0.24);
  --ds-control-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --ds-border: rgba(29, 43, 62, 0.12); /* hairline separators inside a surface */

  /* === Accent (warm gold — Slides yellow) === */
  --ds-accent: #f5b44e;
  --ds-accent-soft: rgba(245, 180, 78, 0.20);
  --ds-accent-glow: 0 0 0 1px rgba(245, 180, 78, 0.55), 0 0 12px rgba(245, 180, 78, 0.25);
  --ds-accent-ink: #8a5a12; /* gold-tinted text on a gold-soft fill */

  /* === Gold GLASS === */
  --ds-glass-gold: rgba(245, 180, 78, 0.72);
  --ds-glass-gold-blur: blur(14px) saturate(140%);
  --ds-glass-gold-border: rgba(255, 235, 200, 0.75);
  --ds-shadow-gold: 0 8px 24px rgba(196, 130, 40, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --ds-text-shadow-on-gold: 0 1px 1px rgba(120, 70, 0, 0.25);
  --ds-on-gold-hover: rgba(255, 255, 255, 0.20);

  /* === Brand mark (the logo glyph only — NOT the UI accent) === */
  --ds-mark: #e8ab49;
  --ds-mark-shadow: drop-shadow(0 1px 2px rgba(31, 45, 66, 0.35));

  /* === States === */
  --ds-success: #1e9e4a;
  --ds-danger: #e0352b;
  --ds-danger-soft: rgba(224, 53, 43, 0.12);
  --ds-focus-ring: 0 0 0 2px rgba(245, 180, 78, 0.45);

  /* === Geometry === */
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 14px;
  --ds-control-h: 28px;

  /* === Shadows / depth === */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
  --ds-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.28);
  --ds-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.32);
  --ds-scrim: rgba(29, 43, 66, 0.55); /* modal backdrop — ink-tinted, never black */

  /* === Motion === */
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* === Font === */
  --ds-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* === Page-level additions — NOT in the extension, this plain page needs them ===
   * `--ds-warning*` reuse the gold-tint pair (`--ds-accent-ink` / `--ds-accent-soft`)
   * rather than inventing a new hue: past-due/expiring billing states read as
   * "gold, pay attention" not a foreign amber. `--ds-success-bg` pairs with the
   * extension's own `--ds-success`, which never needed a tinted panel of its own.
   */
  --ds-warning: var(--ds-accent-ink);
  --ds-warning-bg: var(--ds-accent-soft);
  --ds-success-bg: rgba(30, 158, 74, 0.12);
  --ds-page-bg: #f6f8fb;
}

/* ============================================================================
 * Reset + base
 * ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ds-font);
  color: var(--ds-fg-primary);
  /* A faint brand-tinted glow (never a "generic SaaS gradient" — one hue, one
   * accent, near-invisible) so the glass cards have something to refract.
   * "If it doesn't refract what's behind it, it's not done." */
  background:
    radial-gradient(680px 420px at 12% -8%, rgba(245, 180, 78, 0.10), transparent 60%),
    radial-gradient(760px 520px at 88% 18%, rgba(29, 43, 66, 0.05), transparent 65%),
    var(--ds-page-bg);
  background-attachment: fixed;
  font-feature-settings: 'tnum', 'cv11';
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }

/* ============================================================================
 * Layout shell
 * ========================================================================== */
.ss-topbar {
  height: 3px;
  background: var(--ds-accent);
}
.ss-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  max-width: 960px;
  margin: 0 auto;
}
.ss-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ds-fg-primary);
}
.ss-brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
  filter: var(--ds-mark-shadow);
}
.ss-brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.ss-nav-links { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ss-nav-link {
  padding: 7px 12px;
  border-radius: var(--ds-radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-fg-secondary);
  text-decoration: none;
  transition: background 140ms var(--ds-ease), color 140ms var(--ds-ease);
}
.ss-nav-link:hover { background: var(--ds-control-bg); color: var(--ds-fg-primary); }

.ss-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}
.ss-main--wide { max-width: 960px; }
.ss-main--narrow { max-width: 440px; }

.ss-page-title { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 4px; }
.ss-page-sub { font-size: 13.5px; color: var(--ds-fg-secondary); line-height: 1.5; margin-bottom: 22px; }

/* ============================================================================
 * Card — real glass (BRIEF-S8c step 5): a white frosted veil + genuine
 * backdrop-blur + a 1px white rim + a lit top edge + a soft cool shadow, so
 * the page background reads through, frosted. A flat opaque panel that only
 * *calls* itself glass is the primary anti-reference (docs/design-system/).
 * ========================================================================== */
.ss-card {
  background: var(--ds-glass-bg);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  backdrop-filter: var(--ds-glass-blur);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-glass-shadow), var(--ds-glass-highlight);
  padding: 22px;
}
.ss-card + .ss-card { margin-top: 16px; }
.ss-card-title { font-size: 14.5px; font-weight: 650; margin-bottom: 3px; }
.ss-card-sub { font-size: 12.5px; color: var(--ds-fg-muted); line-height: 1.5; margin-bottom: 14px; }
.ss-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ds-border);
}
.ss-card-row:first-of-type { border-top: none; padding-top: 0; }
.ss-hr { height: 1px; background: var(--ds-border); border: none; margin: 16px 0; }

/* ============================================================================
 * Buttons — hover/press match the extension's own recipe: a translucent
 * WHITE WASH on the gold surface (never a second, darker gold), a cool-grey
 * tint step for secondary/ghost, scale(0.97) on press.
 * ========================================================================== */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--ds-control-h);
  padding: 0 16px;
  border-radius: var(--ds-radius-md);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms var(--ds-ease), border-color 140ms var(--ds-ease), color 140ms var(--ds-ease), transform 140ms var(--ds-ease-spring), opacity 140ms var(--ds-ease);
  white-space: nowrap;
}
.ds-btn:active { transform: scale(0.97); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; pointer-events: none; }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

.ds-btn--primary { background: var(--ds-accent); color: var(--ds-fg-primary); }
.ds-btn--primary:hover { background: linear-gradient(var(--ds-on-gold-hover), var(--ds-on-gold-hover)), var(--ds-accent); }

.ds-btn--secondary { background: var(--ds-control-bg); border-color: var(--ds-control-border); color: var(--ds-fg-primary); }
.ds-btn--secondary:hover { background: var(--ds-control-bg-hover); border-color: var(--ds-control-border-hover); }

.ds-btn--ghost { background: transparent; color: var(--ds-fg-secondary); }
.ds-btn--ghost:hover { background: var(--ds-control-bg); color: var(--ds-fg-primary); }

.ds-btn--danger { background: var(--ds-danger); color: #fff; }
.ds-btn--danger:hover { background: color-mix(in srgb, var(--ds-danger) 84%, #000); }

.ds-btn--sm { height: 28px; padding: 0 11px; font-size: 12px; }
.ds-btn--block { width: 100%; }

/* ============================================================================
 * Forms
 * ========================================================================== */
.ds-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ds-field label { font-size: 12px; font-weight: 600; color: var(--ds-fg-secondary); }
.hint { display: block; font-size: 11.5px; color: var(--ds-fg-muted); line-height: 1.5; }
.ds-input, .ds-textarea, .ds-select {
  height: var(--ds-control-h);
  padding: 0 12px;
  background: var(--ds-control-bg);
  border: 1px solid var(--ds-control-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-fg-primary);
  font-family: var(--ds-font);
  font-size: 13.5px;
  font-feature-settings: 'tnum', 'cv11';
  outline: none;
  transition: background 140ms var(--ds-ease), border-color 140ms var(--ds-ease), box-shadow 140ms var(--ds-ease);
  width: 100%;
}
.ds-textarea { height: auto; padding: 10px 12px; min-height: 96px; resize: vertical; font-family: var(--ds-font); line-height: 1.5; }
.ds-input:hover, .ds-textarea:hover, .ds-select:hover { border-color: var(--ds-control-border-hover); }
.ds-input:focus, .ds-textarea:focus, .ds-select:focus {
  background: #fff;
  border-color: rgba(245, 180, 78, 0.55);
  box-shadow: var(--ds-focus-ring);
}
.ds-input:disabled, .ds-textarea:disabled { opacity: 0.6; }
.ds-checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ds-fg-primary); }
.ds-checkbox-row input { width: 16px; height: 16px; accent-color: var(--ds-accent); cursor: pointer; }
form.ss-pending { opacity: 0.7; pointer-events: none; }

/* Segmented toggle (monthly/yearly, etc). Same tokens as the extension's .ds-segment. */
.ds-segment { display: inline-flex; background: var(--ds-control-bg); border: 1px solid var(--ds-control-border); border-radius: var(--ds-radius-md); padding: 2px; gap: 1px; }
.ds-segment-btn {
  flex: 1;
  min-width: 64px;
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--ds-fg-secondary);
  font-family: var(--ds-font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ds-segment-btn:hover:not([data-selected="true"]) { background: var(--ds-control-bg-hover); }
.ds-segment-btn[data-selected="true"] { background: var(--ds-accent-soft); color: var(--ds-fg-primary); box-shadow: inset 0 0 0 1px rgba(245, 180, 78, 0.35); }

/* Stepper (seat count) */
.ds-stepper { display: inline-flex; align-items: stretch; height: var(--ds-control-h); background: var(--ds-control-bg); border: 1px solid var(--ds-control-border); border-radius: var(--ds-radius-md); overflow: hidden; }
.ds-stepper-btn { width: 34px; background: transparent; border: none; color: var(--ds-fg-secondary); font-size: 16px; cursor: pointer; }
.ds-stepper-btn:hover { background: var(--ds-control-bg-hover); color: var(--ds-fg-primary); }
.ds-stepper-input { flex: 1; min-width: 44px; background: transparent; border: none; border-left: 1px solid var(--ds-control-border); border-right: 1px solid var(--ds-control-border); text-align: center; color: var(--ds-fg-primary); font-family: var(--ds-font); font-size: 15px; font-weight: 600; outline: none; }

/* ============================================================================
 * Status pills + banners
 * ========================================================================== */
.ss-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; }
.ss-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ss-pill--ok { background: var(--ds-success-bg); color: var(--ds-success); }
.ss-pill--warn { background: var(--ds-warning-bg); color: var(--ds-warning); }
.ss-pill--bad { background: var(--ds-danger-soft); color: var(--ds-danger); }
.ss-pill--neutral { background: var(--ds-control-bg); color: var(--ds-fg-secondary); }

.ss-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--ds-radius-md); font-size: 12.5px; line-height: 1.5; margin-bottom: 16px; }
.ss-banner--warn { background: var(--ds-warning-bg); color: var(--ds-warning); }
.ss-banner--bad { background: var(--ds-danger-soft); color: var(--ds-danger); }
.ss-banner--info { background: var(--ds-control-bg); color: var(--ds-fg-secondary); }
.ss-banner--ok { background: var(--ds-success-bg); color: var(--ds-success); }

/* ============================================================================
 * Table
 * ========================================================================== */
.ss-table-wrap { overflow-x: auto; }
.ss-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ss-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 650;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-fg-muted);
  border-bottom: 1px solid var(--ds-border);
  white-space: nowrap;
}
.ss-table td { padding: 9px 10px; border-bottom: 1px solid var(--ds-border); vertical-align: middle; }
.ss-table tr:last-child td { border-bottom: none; }
.ss-table-empty { padding: 20px 10px; text-align: center; color: var(--ds-fg-muted); font-size: 12.5px; }

/* ============================================================================
 * Toasts
 * ========================================================================== */
.ss-toast-host { position: fixed; top: 18px; right: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.ss-toast {
  background: var(--ds-fg-primary);
  color: #fff;
  padding: 11px 14px;
  border-radius: var(--ds-radius-md);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: var(--ds-shadow-lg);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ds-ease), transform 180ms var(--ds-ease);
}
.ss-toast--in { opacity: 1; transform: translateY(0); }
.ss-toast--error { background: var(--ds-danger); }

/* ============================================================================
 * Modal (confirm dialogs) — same class names as the extension's modal system.
 * Backdrop is the extension's own ink-tinted scrim, never black.
 * ========================================================================== */
.ds-modal-backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ds-scrim); z-index: 900; font-family: var(--ds-font); }
.ds-modal-panel {
  background: var(--ds-glass-bg);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  backdrop-filter: var(--ds-glass-blur);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-glass-shadow), var(--ds-glass-highlight);
  color: var(--ds-fg-primary);
}
.ds-modal-header { padding: 20px 22px 12px; }
.ds-modal-title { margin: 0; font-size: 15.5px; font-weight: 650; }
.ds-modal-body { padding: 0 22px 18px; }
.ds-modal-message { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ds-fg-secondary); }
.ds-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--ds-border); }
.ds-modal-btn { padding: 8px 16px; border-radius: var(--ds-radius-sm); border: 1px solid var(--ds-control-border); background: var(--ds-control-bg); color: var(--ds-fg-secondary); font-size: 13px; font-weight: 600; cursor: pointer; }
.ds-modal-btn:hover { background: var(--ds-control-bg-hover); }
.ds-modal-btn--primary { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-fg-primary); }
.ds-modal-btn--primary:hover { background: linear-gradient(var(--ds-on-gold-hover), var(--ds-on-gold-hover)), var(--ds-accent); }
.ds-modal-btn--danger { background: var(--ds-danger); border-color: var(--ds-danger); color: #fff; }
.ds-modal-btn--danger:hover { background: color-mix(in srgb, var(--ds-danger) 82%, #000); }

/* ============================================================================
 * Misc
 * ========================================================================== */
.ss-muted { color: var(--ds-fg-muted); }
.ss-code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0.08em;
  padding: 12px 16px;
  background: var(--ds-control-bg);
  border: 1px solid var(--ds-control-border);
  border-radius: var(--ds-radius-md);
  text-align: center;
  color: var(--ds-fg-primary);
}
.ss-spinner {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--ds-control-border);
  border-top-color: var(--ds-fg-secondary);
  animation: ss-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 0; color: var(--ds-fg-muted); font-size: 13px; }
.ss-footer { text-align: center; font-size: 11.5px; color: var(--ds-fg-muted); padding: 24px; }
.ss-footer a { color: var(--ds-fg-secondary); text-decoration: none; }
.ss-footer a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================================
 * 360px width (BRIEF-S5 "works at 360 px width")
 * ========================================================================== */
@media (max-width: 480px) {
  .ss-nav { padding: 14px 16px; }
  .ss-main { padding: 16px 16px 48px; }
  .ss-page-title { font-size: 19px; }
  .ss-card { padding: 16px; }
  .ss-nav-link { padding: 6px 9px; font-size: 12.5px; }
}

/* === Long-form text (the legal pages) ===================================== */
.ss-prose { font-size: 13.5px; line-height: 1.65; color: var(--ds-fg-secondary); }
.ss-prose h2 { font-size: 15px; font-weight: 650; color: var(--ds-fg-primary); margin: 26px 0 8px; }
.ss-prose h2:first-child { margin-top: 0; }
.ss-prose p { margin: 0 0 10px; }
.ss-prose ul { margin: 0 0 10px; padding-left: 20px; }
.ss-prose li { margin-bottom: 4px; }
.ss-prose strong { color: var(--ds-fg-primary); font-weight: 600; }
.ss-prose table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 12.5px; }
.ss-prose th, .ss-prose td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--ds-border); }
.ss-prose th { color: var(--ds-fg-primary); font-weight: 600; }