/* PolyForm V2 — design tokens + cross-surface base/utilities.
   Loaded FIRST by both base.html (console) and base_public.html (public).
   Split out of the former monolithic pf.css. Contains: :root design tokens,
   the CSS reset/base body, and the genuinely shared utilities used by BOTH
   the console and public surfaces (links, theme toggle, cards/forms, CTAs,
   toast, muted). Surface-specific rules live in console.css / public.css. */

:root {
  /* brand */
  --pf-dark: #0F2030;
  --pf-blue: #004B96;
  --pf-terracotta: #C56630;
  /* surfaces (light) */
  --pf-bg: #FFFFFF;
  --pf-surface: #FAFBFC;
  --pf-border: #E8EEF3;
  --pf-text: #1F2933;
  --pf-muted: #6B7785;
  /* semantic */
  --pf-success: #0F766E;
  --pf-warning: #B45309;
  --pf-alert: #B91C1C;
  /* spacing scale */
  --pf-s-1: 4px;  --pf-s-2: 8px;  --pf-s-3: 12px;
  --pf-s-4: 16px; --pf-s-5: 24px; --pf-s-6: 32px;
  /* radius + tap targets */
  --pf-r-sm: 6px; --pf-r-md: 10px; --pf-r-lg: 14px;
  --pf-tap-min: 44px; --pf-tap-primary: 52px;
  --pf-font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Public redesign palette (2026-07) ---
     Additive: the terracotta/blueprint marketing surface. Maps the design
     handoff's redesign-concepts.css :root onto the --pf-* layer. Console/base
     rules do not consume these, so adding them is a no-op until public.css does. */
  --pf-navy-2: #0B1822; --pf-navy-3: #08121b;       /* deeper navy grounds */
  --pf-blue-lite: #5B9BD5; --pf-blue-dk: #003a75;
  --pf-terra-lite: #E89A5E; --pf-terra-dk: #b35828; /* CTA hover = terra-dk */
  --pf-on-dark: #F4F7FA; --pf-muted-dark: #9FB2C4;  /* text on navy grounds */
  --pf-paper-2: #F0F4F8; --pf-warm: #FFFFFF;        /* light surface steps */
  --pf-line: #E3EAF1;                               /* hairline (softer than --pf-border) */
  --pf-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* technical labels ONLY */
  /* larger marketing spacing steps + pill radius */
  --pf-s-7: 48px; --pf-s-8: 64px; --pf-s-9: 84px;
  --pf-r-pill: 999px;

  /* --- Console redesign (2026-07): operator-surface tokens ---
     Additive: the "blueprint" operator console layer. Semantic act/link/focus
     aliases, the per-stage palette (drives chips, board lanes, rail accents),
     tints, and the blueprint-grid values. Only console.css consumes these, so
     adding them is a no-op on the public surface. Light values here; the
     console dark overrides live in console.css under .pf-console-body. */
  --act: var(--pf-terracotta);   /* forward / commit / do-next accent */
  --act-ink: #A8501F;            /* darker terracotta for hover / text on tint */
  --act-tint: #FFF4ED;
  --link: var(--pf-blue);        /* links / info / active reference */
  --focus: #2C7BE5;              /* one system-wide focus ring */
  --stage-new: #2563EB; --stage-assessing: #C56630; --stage-quoting: #B45309;
  --stage-quote-sent: #7C3AED; --stage-deposit-paid: #0F766E; --stage-design-re: #0E7490;
  --stage-printing: #004B96; --stage-ready: #15803D; --stage-declined: #B91C1C;
  --stage-completed: #64748B; --stage-need-info: #B45309;
  --pf-tint-warm: #FFF4ED; --pf-tint-alert: #FEF2F2; --pf-tint-success: #F0F7F5;
  --pf-tint-link: #F1F6FB;  /* blue chip/tag tint (distinct from the DS's near-white --pf-tint-blue) */
  --pf-grid-line: rgba(15,32,48,.030); --pf-tick: rgba(15,32,48,.16);
  --pf-side-w: 236px; --pf-side-collapsed: 70px;

  /* Redesign CSS bridge (2026-07): alias the design package's short token names
     onto the --pf-* layer + add the two surface/border steps it uses, so the
     redesign page CSS ports near-verbatim. Additive; console body CSS consumes
     these under a .pf-rd scope, so they are a no-op on the public surface. */
  --pf-surface-2: #F3F6F9; --pf-border-strong: #D3DEE7;
  --r-sm: var(--pf-r-sm); --r-md: var(--pf-r-md); --r-lg: var(--pf-r-lg); --r-pill: var(--pf-r-pill);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px;
  --ease: cubic-bezier(.4,0,.2,1); --dur: 160ms;
  --font: var(--pf-font); --mono: var(--pf-mono);
  --sh1: 0 1px 2px rgba(15,32,48,.06),0 1px 1px rgba(15,32,48,.04);
  --sh2: 0 4px 12px rgba(15,32,48,.10),0 2px 4px rgba(15,32,48,.06);
  --sh3: 0 16px 40px rgba(15,32,48,.18),0 4px 12px rgba(15,32,48,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--pf-font);
  background: var(--pf-bg);
  color: var(--pf-text);
  line-height: 1.5;
}

/* shared link + theme toggle (header/nav + sidebar) */
.pf-link, .pf-nav .pf-link {
  background: none; border: 0; color: #cfe0f0; cursor: pointer;
  font: inherit; padding: 0; text-decoration: underline;
}
.pf-theme-toggle { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.1rem; }

.pf-sidebar-tools .pf-theme-toggle,
.pf-sidebar-tools .pf-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-s-1);
  color: #D4DEE7;
  font-size: .85rem;
  text-decoration: none;
  min-height: 2.5rem;
  width: 100%;
}
.pf-console-shell:not(.is-sidebar-expanded) .pf-sidebar-tools span {
  display: none;
}

.pf-console-main .pf-link {
  color: var(--pf-blue);
}

/* cards / forms */
.pf-card {
  max-width: 560px; margin: 0 auto;
  background: var(--pf-surface); border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-lg); padding: var(--pf-s-5);
}
.pf-sub { color: var(--pf-muted); margin-top: 0; }
.pf-form { display: grid; gap: var(--pf-s-4); }
.pf-form label { display: grid; gap: var(--pf-s-2); font-weight: 600; font-size: .92rem; }
.pf-form input, .pf-form textarea, .pf-form select {
  font: inherit; padding: var(--pf-s-3);
  border: 1px solid var(--pf-border); border-radius: var(--pf-r-sm);
  background: var(--pf-bg); color: var(--pf-text); min-height: var(--pf-tap-min);
}
.pf-hint { color: var(--pf-muted); font-weight: 400; }
.pf-req { color: var(--pf-terracotta); font-weight: 600; }
.pf-error {
  background: #FEF2F2; color: var(--pf-alert);
  border-left: 4px solid var(--pf-alert); padding: var(--pf-s-3); border-radius: var(--pf-r-sm);
}
.pf-cta {
  background: var(--pf-blue); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; padding: 0 var(--pf-s-5);
  min-height: var(--pf-tap-primary); border-radius: var(--pf-r-md);
}
.pf-cta-sm { min-height: var(--pf-tap-min); display: inline-flex; align-items: center; text-decoration: none; }

/* Button affordances (operator-flow redesign P1): actions look like actions,
   not links. primary = forward/commit · secondary = reverse/quiet · danger. */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pf-s-1);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  min-height: var(--pf-tap-min); padding: 0 var(--pf-s-4);
  border-radius: var(--pf-r-md); border: 1px solid transparent;
}
.pf-btn-primary { background: var(--pf-blue); color: #fff; }
.pf-btn-primary:hover { background: color-mix(in srgb, var(--pf-blue) 88%, #000); }
.pf-btn-secondary { background: transparent; color: var(--pf-text); border-color: var(--pf-border); }
.pf-btn-secondary:hover { border-color: var(--pf-blue); color: var(--pf-blue); }
.pf-btn-danger {
  background: color-mix(in srgb, var(--pf-alert) 9%, var(--pf-surface, #FAFBFC));
  color: var(--pf-alert);
  border-color: color-mix(in srgb, var(--pf-alert) 40%, var(--pf-border));
}
/* Non-color tell: tinted background (visible in grayscale) + warning glyph prefix. */
.pf-btn-danger::before { content: "\26A0\FE0E\00A0"; font-style: normal; }
.pf-btn-danger:hover { background: color-mix(in srgb, var(--pf-alert) 18%, var(--pf-surface, #FAFBFC)); }
.pf-btn-sm { min-height: 2rem; padding: 0 var(--pf-s-3); font-size: .82rem; }

/* One-shot success toast (Nielsen: visibility of system status). Auto-dismissed
   by ui.js; manual dismiss via the × button. */
.pf-toast {
  position: fixed; top: var(--pf-s-4); left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; align-items: center; gap: var(--pf-s-3);
  background: var(--pf-success); color: #fff; font-weight: 600;
  padding: var(--pf-s-3) var(--pf-s-4); border-radius: var(--pf-r-md);
  box-shadow: 0 6px 24px rgba(0,0,0,.18); max-width: 90vw;
  animation: pf-toast-in .18s ease-out;
}
.pf-toast-x { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; opacity: .85; }
.pf-toast-x:hover { opacity: 1; }
/* Undo affordance inside the toast (Theme 9 — undo over confirm). A clear, tappable
   button on the green toast; the inverse action POSTs back to the source endpoint. */
.pf-toast-undo { display: inline; margin: 0; }
.pf-toast-undo-btn {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.55);
  color: #fff; font-weight: 700; cursor: pointer; font-size: .82rem;
  padding: 2px 10px; border-radius: var(--pf-r-sm); line-height: 1.4;
}
.pf-toast-undo-btn:hover { background: rgba(255,255,255,.30); }
.pf-toast-undo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.pf-toast-out { opacity: 0; transition: opacity .3s ease; }
@keyframes pf-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pf-confirm h1 { color: var(--pf-success); }
.pf-login { max-width: 360px; }

.pf-muted { color: var(--pf-muted); }

/* ── Thin, theme-aware scrollbars everywhere ──────────────────────────────────
   The OS default scrollbars looked out of place (especially in dark mode). A slim
   rounded thumb on a transparent track, tinted from --pf-text so it adapts to both
   themes; it brightens on hover. Lives in tokens.css so it applies to BOTH the
   console and the public site. Elements that intentionally hide their scrollbar
   (the sidebar, the photo carousel) set scrollbar-width:none / display:none at
   higher specificity, so they still win. */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pf-text) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--pf-text) 45%, transparent);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--pf-text) 65%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }

/* Respect prefers-reduced-motion: disable toast entrance animation and stage-rail
   step transitions so motion-sensitive users get static state changes instead. */
@media (prefers-reduced-motion: reduce) {
  .pf-toast { animation: none; }
  .pf-toast-out { transition: none; }
  .pf-stage-step span { transition: none; }
  .pf-stage-step-current span,
  .pf-stage-step-done span { transition: none; }
}

/* Drag-and-drop dropzone highlight (v37) — cross-surface (console async uploaders
   + the public intake / capture / portfolio file fields). The base affordance lives
   in console.css for the .pf-upload-dropzone box; this is just the active state, so
   the public intake page (which loads tokens.css, not console.css) gets it too. */
[data-upload-dropzone] { transition: background .12s ease, box-shadow .12s ease, border-color .12s ease; }
[data-upload-dropzone].is-dragging {
  border-color: var(--pf-blue) !important;
  background: color-mix(in srgb, var(--pf-blue) 14%, transparent) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pf-blue) 45%, transparent);
}