/* portal/assets/portal.css — SlideSmith portal styles.
 *
 * The :root block below is copied VERBATIM from SlideSmith/css/slidesmith-ui.css
 * — `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) === */
  --ss-glass-chrome: rgba(238, 242, 247, 0.96);
  --ss-glass-filter-md: blur(14px) saturate(118%);
  --ss-glass-border-color: rgba(255, 255, 255, 0.70);
  --ss-glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --ss-shadow-chrome: 0 8px 26px rgba(31, 45, 66, 0.18);

  /* === Text (dark ink for legibility on the light frost) === */
  --ss-ink-1: #1d2b3e;
  --ss-ink-2: #3a4658;
  --ss-ink-3: rgba(58, 70, 88, 0.55);
  --ss-ink-4: rgba(58, 70, 88, 0.32);

  /* === Control surfaces (glass-on-glass; cool-grey tints over the frost) === */
  --ss-tint-1: rgba(60, 80, 110, 0.06);
  --ss-tint-2: rgba(60, 80, 110, 0.12);
  --ss-tint-3: rgba(60, 80, 110, 0.18);
  --ss-line-1: rgba(60, 80, 110, 0.14);
  --ss-line-2: rgba(60, 80, 110, 0.24);
  --ss-glass-hi-soft: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --ss-hairline: rgba(29, 43, 62, 0.12); /* hairline separators inside a surface */

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

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

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

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

  /* === Geometry === */
  --ss-radius-item: 6px;
  --ss-radius-control: 8px;
  --ss-radius-panel: 12px;
  --ss-radius-bar: 14px;
  --ss-control-h: 28px;

  /* === Shadows / depth === */
  --ss-shadow-dialog: 0 14px 40px rgba(31, 45, 66, 0.22);
  --ss-scrim: rgba(29, 43, 66, 0.55); /* modal backdrop — ink-tinted, never black */

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

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

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

/* ============================================================================
 * Reset + base
 * ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ss-font);
  color: var(--ss-ink-1);
  /* 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(--ss-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(--ss-gold);
}
.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(--ss-ink-1);
}
.ss-brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
  filter: var(--ss-logo-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(--ss-radius-control);
  font-size: 13px;
  font-weight: 500;
  color: var(--ss-ink-2);
  text-decoration: none;
  transition: background 140ms var(--ss-ease), color 140ms var(--ss-ease);
}
.ss-nav-link:hover { background: var(--ss-tint-1); color: var(--ss-ink-1); }

.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(--ss-ink-2); line-height: 1.5; margin-bottom: 22px; }

/* ============================================================================
 * Card — real glass: 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(--ss-glass-chrome);
  -webkit-backdrop-filter: var(--ss-glass-filter-md);
  backdrop-filter: var(--ss-glass-filter-md);
  border: 1px solid var(--ss-glass-border-color);
  border-radius: var(--ss-radius-panel);
  box-shadow: var(--ss-shadow-chrome), var(--ss-glass-hi);
  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(--ss-ink-3); 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(--ss-hairline);
}
.ss-card-row:first-of-type { border-top: none; padding-top: 0; }
.ss-hr { height: 1px; background: var(--ss-hairline); 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.
 * ========================================================================== */
.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--ss-control-h);
  padding: 0 16px;
  border-radius: var(--ss-radius-control);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms var(--ss-ease), border-color 140ms var(--ss-ease), color 140ms var(--ss-ease), transform 140ms var(--ss-ease-spring), opacity 140ms var(--ss-ease);
  white-space: nowrap;
}
.ss-btn:active { transform: scale(0.97); }
.ss-btn:disabled, .ss-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; pointer-events: none; }
.ss-btn:focus-visible { outline: none; box-shadow: var(--ss-focus-ring); }

.ss-btn--primary { background: var(--ss-gold); color: var(--ss-ink-1); }
.ss-btn--primary:hover { background: linear-gradient(var(--ss-on-gold-hover), var(--ss-on-gold-hover)), var(--ss-gold); }

.ss-btn--secondary { background: var(--ss-tint-1); border-color: var(--ss-line-1); color: var(--ss-ink-1); }
.ss-btn--secondary:hover { background: var(--ss-tint-2); border-color: var(--ss-line-2); }

.ss-btn--ghost { background: transparent; color: var(--ss-ink-2); }
.ss-btn--ghost:hover { background: var(--ss-tint-1); color: var(--ss-ink-1); }

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

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

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

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

/* Stepper (seat count) */
.ss-stepper { display: inline-flex; align-items: stretch; height: var(--ss-control-h); background: var(--ss-tint-1); border: 1px solid var(--ss-line-1); border-radius: var(--ss-radius-control); overflow: hidden; }
.ss-stepper-btn { width: 34px; background: transparent; border: none; color: var(--ss-ink-2); font-size: 16px; cursor: pointer; }
.ss-stepper-btn:hover { background: var(--ss-tint-2); color: var(--ss-ink-1); }
.ss-stepper-input { flex: 1; min-width: 44px; background: transparent; border: none; border-left: 1px solid var(--ss-line-1); border-right: 1px solid var(--ss-line-1); text-align: center; color: var(--ss-ink-1); font-family: var(--ss-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(--ss-success-bg); color: var(--ss-success); }
.ss-pill--warn { background: var(--ss-warning-bg); color: var(--ss-warning); }
.ss-pill--bad { background: var(--ss-danger-soft); color: var(--ss-danger); }
.ss-pill--neutral { background: var(--ss-tint-1); color: var(--ss-ink-2); }

.ss-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--ss-radius-control); font-size: 12.5px; line-height: 1.5; margin-bottom: 16px; }
.ss-banner--warn { background: var(--ss-warning-bg); color: var(--ss-warning); }
.ss-banner--bad { background: var(--ss-danger-soft); color: var(--ss-danger); }
.ss-banner--info { background: var(--ss-tint-1); color: var(--ss-ink-2); }
.ss-banner--ok { background: var(--ss-success-bg); color: var(--ss-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(--ss-ink-3);
  border-bottom: 1px solid var(--ss-hairline);
  white-space: nowrap;
}
.ss-table td { padding: 9px 10px; border-bottom: 1px solid var(--ss-hairline); vertical-align: middle; }
.ss-table tr:last-child td { border-bottom: none; }
.ss-table-empty { padding: 20px 10px; text-align: center; color: var(--ss-ink-3); 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(--ss-ink-1);
  color: #fff;
  padding: 11px 14px;
  border-radius: var(--ss-radius-control);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: var(--ss-shadow-dialog);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ss-ease), transform 180ms var(--ss-ease);
}
.ss-toast--in { opacity: 1; transform: translateY(0); }
.ss-toast--error { background: var(--ss-danger); }

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

/* ============================================================================
 * Misc
 * ========================================================================== */
.ss-muted { color: var(--ss-ink-3); }
.ss-code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0.08em;
  padding: 12px 16px;
  background: var(--ss-tint-1);
  border: 1px solid var(--ss-line-1);
  border-radius: var(--ss-radius-control);
  text-align: center;
  color: var(--ss-ink-1);
}
.ss-spinner {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--ss-line-1);
  border-top-color: var(--ss-ink-2);
  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(--ss-ink-3); font-size: 13px; }
.ss-footer { text-align: center; font-size: 11.5px; color: var(--ss-ink-3); padding: 24px; }
.ss-footer a { color: var(--ss-ink-2); 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 (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(--ss-ink-2); }
.ss-prose h2 { font-size: 15px; font-weight: 650; color: var(--ss-ink-1); 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(--ss-ink-1); 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(--ss-hairline); }
.ss-prose th { color: var(--ss-ink-1); font-weight: 600; }