/* pc-brand.css — People Choice Brand & Style Guide v1.1 layer.
   Loaded last: maps the portal onto the public people-choice.com website look
   (white paper, #121212 ink, Cormorant SC display, Geist/Inter UI text,
   hairlines instead of shadows, zero radius on surfaces).

   Fonts under CSP: the portal ships a strict `font-src 'self'`, so no external
   Google Fonts request is allowed. The website loads Cormorant SC + Inter from
   the Google CDN, which we cannot mirror here. We therefore self-host the two
   woff2 files already in the repo (Cormorant Garamond ≈ Cormorant SC once
   uppercased; Archivo ≈ Inter/Geist neo-grotesque) and list the website's own
   family names first in the stack so the intent matches — the self-hosted file
   is the guaranteed render. No @font-face src points off-origin. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/ai-twins/assets/fonts/archivo-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/ai-twins/assets/fonts/cormorant-garamond-400.woff2) format('woff2');
}

:root {
  /* People Choice tokens — aligned to website/src/styles/global.css */
  --pc-ink: #121212;      /* website --color-primary */
  --pc-ink-70: #4a4a4a;   /* neutral secondary text */
  --pc-stone: #8f8f8f;    /* website --color-muted */
  --pc-border: #ededed;   /* website --color-light */
  --pc-paper: #ffffff;    /* website --color-white (page background) */
  --pc-white: #ffffff;
  --pc-soft: #f5f5f5;     /* website --color-light-bg (soft fills) */
  --pc-error: oklch(0.55 0.16 25);
  --pc-success: oklch(0.55 0.10 150);
  --pc-font-display: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  --pc-font-text: 'Geist', 'Inter', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pc-track-display: 0.05em;
  --pc-track-label: 0.16em;

  /* Remap existing app variables onto the brand */
  --background: var(--pc-paper);
  --foreground: var(--pc-ink);
  --card: var(--pc-white);
  --primary: var(--pc-ink);
  --primary-dark: var(--pc-ink-70);
  --primary-soft: var(--pc-soft);
  --muted: var(--pc-stone);
  --border: var(--pc-border);
  --input: var(--pc-border);
  --danger: var(--pc-error);
  --success: var(--pc-success);
  --radius: 0;
}

/* ---------- global ---------- */
* { box-shadow: none !important; }
.pc-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
body::before { display: none; }
.pc-wordmark.mobile-mark { display: none; }
.onboarding-progress { scrollbar-width: none; }
.onboarding-progress::-webkit-scrollbar { display: none; }
body {
  background: var(--pc-paper);
  color: var(--pc-ink);
  font-family: var(--pc-font-text);
}
h1, h2 {
  font-family: var(--pc-font-display);
  font-weight: 500;
  letter-spacing: var(--pc-track-display);
  text-transform: uppercase;
}
h3, h4 { font-family: var(--pc-font-text); font-weight: 600; }
.eyebrow, .nav-label, legend {
  color: var(--pc-stone);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--pc-track-label);
  text-transform: uppercase;
}

/* ---------- wordmark ---------- */
/* Bracket lockup mirrors the website nav logo: 2px left/right rules around a
   centred Cormorant column (website/src/components/Navigation.astro). */
.pc-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px 8px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  color: var(--pc-ink);
  font-family: var(--pc-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--pc-track-label);
  line-height: 1.15;
  text-transform: uppercase;
}
.brand-lockup { color: inherit; }
.brand-lockup strong { font-weight: 600; letter-spacing: .02em; }
.brand-lockup small { color: var(--pc-stone); letter-spacing: .08em; text-transform: uppercase; font-size: 9px; }

/* ---------- login ---------- */
.login-brand-panel { background: var(--pc-ink); color: var(--pc-paper); }
.login-brand-panel::after { display: none; }
.login-brand-panel .pc-wordmark { color: var(--pc-paper); }
.login-brand-panel small, .login-brand-panel .eyebrow { color: rgba(255,255,255,.62); }
.login-brand-panel h1 { font-size: clamp(34px, 4.6vw, 54px); }
.login-form-panel { background: var(--pc-paper); }
.login-card { border: 1px solid var(--pc-border); background: var(--pc-white); padding: 40px 36px; }

/* ---------- surfaces ---------- */
.panel, .login-card, .workspace-grid > *, .card {
  border-radius: 0;
  border-color: var(--pc-border);
}
.panel { border: 1px solid var(--pc-border); background: var(--pc-white); }
.notice {
  border: 1px solid var(--pc-border);
  background: var(--pc-white);
  color: var(--pc-ink-70);
}

/* ---------- sidebar ---------- */
.sidebar { background: var(--pc-paper); border-right: 1px solid var(--pc-border); }
.sidebar-item, .sidebar-group > p { border-radius: 999px; font-weight: 500; font-size: 13px; color: var(--pc-ink-70); }
.sidebar-item:hover { background: var(--primary-soft); color: var(--pc-ink); }
.sidebar-item.active { background: var(--pc-ink); color: var(--pc-paper); }
.nav-icon { width: 22px; height: 22px; color: inherit; }
.nav-icon svg { width: 18px; height: 18px; display: block; }
.sidebar-promo {
  border-radius: 0;
  background: var(--pc-ink);
  color: var(--pc-paper);
}
.sidebar-promo p { color: rgba(255,255,255,.72); }
.sidebar-version { color: var(--pc-stone); letter-spacing: .08em; text-transform: uppercase; font-size: 9px; }

/* ---------- header ---------- */
.site-header { background: var(--pc-paper); border-bottom: 1px solid var(--pc-border); }
.page-title strong { font-family: var(--pc-font-display); font-size: 20px; font-weight: 500; letter-spacing: var(--pc-track-display); text-transform: uppercase; }
.badge, .header-button, .local-role select, .notification-button {
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  background: transparent;
  color: var(--pc-ink-70);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--pc-track-label);
  text-transform: uppercase;
}
.header-button:hover { background: var(--pc-ink); border-color: var(--pc-ink); color: var(--pc-paper); }
.badge::before { background: var(--pc-success); }
.badge-subtle::before { background: var(--pc-stone); }
/* Desktop: sidebar owns navigation — drop duplicate header shortcuts. */
@media (min-width: 981px) {
  #studioLauncher, #portalHomeLauncher { display: none; }
}

/* ---------- buttons ---------- */
/* Website pill buttons (global.css .btn-pill) are calm sentence case, not
   tracked caps: 1px hairline, solid ink for primary, fill-on-hover feel. */
button, .button {
  border-radius: 999px;
  font-family: var(--pc-font-text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
button[type="submit"], .button-primary, #startGenerationButton {
  background: var(--pc-ink);
  border: 1px solid var(--pc-ink);
  color: var(--pc-paper);
}
button[type="submit"]:hover, .button-primary:hover { background: var(--pc-ink-70); border-color: var(--pc-ink-70); }
button[disabled] { background: var(--pc-border); border-color: var(--pc-border); color: var(--pc-ink-70); }
.button-link-muted, .help-link {
  background: transparent;
  border: none;
  color: var(--pc-ink-70);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: .06em;
}
.help-link:hover, .button-link-muted:hover { color: var(--pc-ink); }

/* ---------- forms: underline only ---------- */
input, textarea, select {
  border: none;
  border-bottom: 1px solid var(--pc-border);
  border-radius: 0;
  background: transparent;
  font-family: var(--pc-font-text);
  color: var(--pc-ink);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-bottom: 2px solid var(--pc-ink);
}
label > span { color: var(--pc-ink-70); font-size: 11px; font-weight: 500; letter-spacing: var(--pc-track-label); text-transform: uppercase; }
::placeholder { color: var(--pc-stone); }
fieldset { border: 1px solid var(--pc-border); border-radius: 0; }

/* ---------- pills, badges, chips ---------- */
.count-badge, .model-attached-badge, .search-examples button, .tag {
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--pc-ink-70);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.model-consent-badge { background: rgba(18,18,18,.82); border-color: rgba(255,255,255,.4); }
.style-preview-notice > span:first-child { background: var(--pc-ink); color: var(--pc-paper); border-radius: 0; }

/* ---------- media ---------- */
.model-card img, .portrait-picker img, .style-card img, .job-media img, .canvas img { border-radius: 0; }
.model-card, .style-card, .portrait-picker > * { border-radius: 0; }

/* ---------- guide / floating help ---------- */
.guide-launcher, .need-help, [class*="guide-fab"] { background: var(--pc-ink); color: var(--pc-paper); border-radius: 999px; }

/* ---------- onboarding steps ---------- */
.onboarding-progress span { background: var(--primary-soft); color: var(--pc-ink-70); }
.onboarding-progress .active span, .onboarding-progress [aria-current] span { background: var(--pc-ink); color: var(--pc-paper); }

/* ---------- twin creation (consent panel removed) ---------- */
.model-create-layout { grid-template-columns: minmax(0, 1fr); }
.twin-create-action { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--pc-border); }
.twin-create-action button { min-width: 220px; }

/* ---------- campaigns ---------- */
.section-heading-actions { display: flex; gap: 10px; }
.campaign-detail { padding: 24px; display: grid; gap: 18px; }
.campaign-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.campaign-detail-header h3 { font-family: var(--pc-font-display); font-size: 24px; font-weight: 500; letter-spacing: var(--pc-track-display); text-transform: uppercase; margin: 2px 0 4px; }
.campaign-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 1px solid var(--pc-border); border-bottom: 1px solid var(--pc-border); }
.campaign-detail-stats > div { padding: 14px 16px; border-right: 1px solid var(--pc-border); }
.campaign-detail-stats > div:last-child { border-right: none; }
.campaign-detail-stats small { display: block; color: var(--pc-stone); font-size: 10px; letter-spacing: var(--pc-track-label); text-transform: uppercase; margin-bottom: 5px; }
/* Usage rights, read-only: the licence the agency agreed, stated where the
   customer looks at the shoot and at the handover package. */
.campaign-detail-usage { display: grid; gap: 8px; }
.usage-tile { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 18px; }
.usage-tile:empty { display: none; }
.usage-tile h4 { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 500; letter-spacing: var(--pc-track-label); text-transform: uppercase; }
.usage-line { display: grid; gap: 3px; }
.usage-line small { color: var(--pc-stone); font-size: 10px; letter-spacing: var(--pc-track-label); text-transform: uppercase; }
.usage-line strong { font-size: 13px; font-weight: 500; }
.usage-line.usage-expiring strong { color: #9a6a00; }
.usage-line.usage-expired strong { color: var(--pc-alert, #a4262c); }
/* The same licence line on a single result card: quiet while the window is
   wide open, amber a month out, red once the date has passed. */
.job-usage { margin: 0; color: var(--pc-stone); font-size: 12px; }
.job-usage.usage-expiring { color: #9a6a00; font-weight: 500; }
.job-usage.usage-expired { color: var(--pc-alert, #a4262c); font-weight: 500; }
.campaign-detail-edit { display: grid; gap: 12px; }
.campaign-detail-edit form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 16px; border: 1px solid var(--pc-border); background: var(--pc-paper); }
.campaign-detail-edit form label { display: grid; gap: 6px; }
.campaign-detail-edit form label.wide, .campaign-detail-edit form .campaign-detail-edit-actions, .campaign-detail-edit form .message { grid-column: 1 / -1; }
.campaign-detail-edit form textarea { min-height: 78px; }
.campaign-detail-edit-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.campaign-detail-edit-locked { grid-column: 1 / -1; margin: 0; color: var(--pc-ink-70); font-size: 12px; }
.campaign-detail-subhead { margin: 0; color: var(--pc-ink-70); font-size: 11px; letter-spacing: var(--pc-track-label); text-transform: uppercase; }
.campaign-detail-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.campaign-asset-tile { display: grid; gap: 6px; padding: 0; border: 1px solid var(--pc-border); border-radius: 0; background: var(--pc-white); text-transform: none; letter-spacing: 0; cursor: pointer; }
.campaign-asset-tile img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.campaign-asset-tile small { padding: 0 8px 8px; color: var(--pc-ink-70); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.campaign-asset-pending { display: grid; place-items: center; aspect-ratio: 3/4; color: var(--pc-stone); font-size: 11px; }

/* ---------- studio canvas: keep results at a reviewable size ---------- */
main.studio-active .job-preview img,
main.studio-active .job-preview video { max-height: 56vh; width: 100%; object-fit: contain; background: var(--pc-paper); }

/* ---------- shot ideas ---------- */
.shot-ideas { display: grid; gap: 8px; }
.shot-ideas-head { display: flex; align-items: center; justify-content: space-between; }
.shot-ideas-head > span { color: var(--pc-ink-70); font-size: 11px; font-weight: 500; letter-spacing: var(--pc-track-label); text-transform: uppercase; }
.shot-ideas-list { display: grid; gap: 8px; }
.shot-idea-chip { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--pc-border); border-radius: 0; background: var(--pc-white); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; }
.shot-idea-chip:hover { border-color: var(--pc-ink); }
.shot-idea-chip strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.shot-idea-chip small { color: var(--pc-ink-70); font-size: 12px; line-height: 1.5; }

/* ---------- campaign set + reference tags ---------- */
.campaign-set { display: grid; gap: 8px; padding-top: 4px; }
.campaign-set-row { display: flex; gap: 10px; align-items: center; }
.campaign-set-row select { max-width: 120px; }
.reference-tags { color: var(--pc-ink-70); font-size: 11px; letter-spacing: .04em; }

/* ---------- messages ---------- */
.message.error, .message[data-error="true"] { color: var(--pc-error); }
.message { color: var(--pc-ink-70); }
a { color: var(--pc-ink); }