/* =========================================================================
   BradleyPens — Drafting Board
   =========================================================================
   Family resemblance to BarryBids: Archivo display, Chivo Mono data, dark
   and light both first-class, flat hairline cards, one button fill / one
   hover (brightness, never darken) / one radius system, selected = filled
   not tinted. Own accent: amber on a blueprint/steel/ink-navy ground, with
   a corner-tick "spec frame" card as the signature motif.

   Two palettes live side by side on purpose:
     --bp-*      the app chrome — reacts to [data-theme] light/dark.
     --bp-draw-* the sign-drawing SVGs — fixed regardless of app theme, the
                 same way a real drafting sheet doesn't change color when
                 you turn the office lights off. Only the night/day SIMULATION
                 toggle (a separate, per-sign control) changes what these draw.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..900;1,400..900&family=Chivo+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: light;

  /* ── App chrome tokens (theme-reactive) ── */
  --bp-paper: #F5F6F3;
  --bp-card: #FFFFFF;
  --bp-ink: #232B36;
  --bp-ink-navy: #10192B;
  --bp-blueprint: #1E3F66;
  --bp-steel: #4A5A72;
  --bp-steel-soft: #8493A8;
  --bp-hairline: #DEE1D9;
  --bp-amber: #F2A63D;
  --bp-amber-ink: #10192B;   /* label on amber fill — fixed both themes, see DESIGN notes */
  --bp-success: #3F9142;
  --bp-danger: #C0392B;
  --bp-focus: #F2A63D;

  --bp-radius-card: 10px;
  --bp-radius-control: 6px;
  --bp-radius-chip: 3px;
  --bp-radius-pill: 999px;

  --bp-shadow-raised: 0 1px 2px rgba(16,25,43,.07), 0 4px 12px rgba(16,25,43,.06);
  --bp-shadow-overlay: 0 8px 24px rgba(16,25,43,.10), 0 24px 60px rgba(16,25,43,.10);

  --bp-dur-fast: 120ms;
  --bp-dur: 200ms;
  --bp-ease: cubic-bezier(0.2, 0, 0, 1);

  --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Drawing tokens (fixed — never redefined under [data-theme]) ── */
  --bp-draw-card: #FFFFFF;
  --bp-draw-ink: #232B36;
  --bp-draw-ink-navy: #10192B;
  --bp-draw-graphite: #232B36;
  --bp-draw-blueprint: #1E3F66;
  --bp-draw-steel: #4A5A72;
  --bp-draw-steel-soft: #8493A8;
  --bp-draw-hairline: #DEE1D9;
  --bp-draw-amber: #F2A63D;

  --bp-canvas-day: #F8F9F6;
  --bp-canvas-night: #0A1424;
  --bp-star: #FFFFFF;

  --bp-iso-top-day: #E4E7EA;
  --bp-iso-side-day: #B9C2CC;
  --bp-iso-front-day: #D6DBE0;
  --bp-iso-top-night: #1B2A3F;
  --bp-iso-side-night: #0E1826;
  --bp-iso-front-night: #152238;

  --bp-glow-day: none;
  --bp-glow-night: drop-shadow(0 0 6px rgba(242,166,61,.85)) drop-shadow(0 0 14px rgba(242,166,61,.45));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bp-paper: #10192B;
    --bp-card: #16213A;
    --bp-ink: #E7EAF0;
    --bp-blueprint: #6F94C4;
    --bp-steel: #94A3B8;
    --bp-steel-soft: #64748B;
    --bp-hairline: #253449;
    --bp-shadow-raised: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.35);
    --bp-shadow-overlay: 0 8px 24px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bp-paper: #10192B;
  --bp-card: #16213A;
  --bp-ink: #E7EAF0;
  --bp-blueprint: #6F94C4;
  --bp-steel: #94A3B8;
  --bp-steel-soft: #64748B;
  --bp-hairline: #253449;
  --bp-shadow-raised: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.35);
  --bp-shadow-overlay: 0 8px 24px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.45);
}

/* ── Reset-ish ─────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--bp-focus); outline-offset: 2px; }
.bp-mono { font-family: var(--font-mono); }
.bp-flex-row { display: flex; gap: 10px; flex-wrap: wrap; }
/* An inline display: declaration beats the UA [hidden]{display:none} rule,
   so any element toggled by the hidden attribute must get its display from
   a class, never from an inline style — bp-package-actions shipped with
   exactly that bug: hidden="" was set correctly but stayed visible because
   its own inline display:flex outranked it. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Layout shell ──────────────────────────────────────────────────── */

.bp-app { min-height: 100%; display: flex; flex-direction: column; }

.bp-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  height: 60px; padding: 0 20px;
  background: var(--bp-card);
  border-bottom: 1px solid var(--bp-hairline);
}

.bp-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.bp-brand-mark { display: block; }
.bp-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.bp-brand-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--bp-steel); text-transform: uppercase; }

.bp-steps {
  display: flex; align-items: center; gap: 2px;
  margin: 0 auto; padding: 4px; background: var(--bp-paper);
  border: 1px solid var(--bp-hairline); border-radius: var(--bp-radius-pill);
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.bp-steps::-webkit-scrollbar { display: none; }
.bp-step {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--bp-radius-pill);
  font-size: 12.5px; font-weight: 600; color: var(--bp-steel);
  background: transparent; border: none;
  transition: background-color var(--bp-dur) var(--bp-ease), color var(--bp-dur) var(--bp-ease);
  white-space: nowrap;
}
.bp-step:hover { color: var(--bp-ink); }
.bp-step[aria-current="step"] {
  background: var(--bp-ink-navy); color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bp-step[aria-current="step"] { background: var(--bp-amber); color: var(--bp-amber-ink); }
}
:root[data-theme="dark"] .bp-step[aria-current="step"] { background: var(--bp-amber); color: var(--bp-amber-ink); }
.bp-step-num { font-family: var(--font-mono); font-size: 10px; opacity: .7; }
.bp-step-check { color: var(--bp-amber); }

.bp-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.bp-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--bp-radius-control);
  border: 1px solid var(--bp-hairline); background: var(--bp-paper); color: var(--bp-steel);
}
.bp-theme-toggle:hover { color: var(--bp-ink); }

.bp-main { flex: 1; position: relative; }

/* Dot-grid depth canvas, behind the Dashboard/step screens */
.bp-dotfield {
  position: relative;
  background-image: radial-gradient(var(--bp-hairline) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -6px -6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bp-dotfield { background-image: radial-gradient(rgba(148,163,184,.16) 1px, transparent 1px); }
}
:root[data-theme="dark"] .bp-dotfield { background-image: radial-gradient(rgba(148,163,184,.16) 1px, transparent 1px); }

.bp-page { max-width: 1040px; margin: 0 auto; padding: 48px 32px 80px; }
.bp-page-narrow { max-width: 760px; }

.bp-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--bp-steel); text-transform: uppercase; }
.bp-h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 0; }
.bp-lede { color: var(--bp-steel); margin: 10px 0 0; max-width: 640px; font-size: 14.5px; line-height: 1.6; }

/* ── Spec frame — the signature card ──────────────────────────────── */

.bp-spec-frame {
  position: relative;
  background: var(--bp-card);
  border: 1px solid var(--bp-hairline);
  border-radius: var(--bp-radius-card);
}
.bp-spec-frame > .bp-spec-frame-pad { padding: 20px; }
.bp-tick { position: absolute; width: 13px; height: 13px; pointer-events: none; color: var(--bp-hairline); }
.bp-tick-tl { top: -1px; left: -1px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; border-top-left-radius: 3px; }
.bp-tick-tr { top: -1px; right: -1px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-top-right-radius: 3px; }
.bp-tick-bl { bottom: -1px; left: -1px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; border-bottom-left-radius: 3px; }
.bp-tick-br { bottom: -1px; right: -1px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; border-bottom-right-radius: 3px; }
.bp-spec-frame.bp-tick-amber .bp-tick { color: var(--bp-amber); }
.bp-spec-frame.bp-tick-active { border-color: var(--bp-amber); }

/* ── Buttons ───────────────────────────────────────────────────────── */

.bp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--bp-radius-control);
  font-size: 13.5px; font-weight: 600; border: 1px solid transparent;
  transition: filter var(--bp-dur-fast) var(--bp-ease), background-color var(--bp-dur-fast) var(--bp-ease), border-color var(--bp-dur-fast) var(--bp-ease);
}
.bp-btn:disabled { opacity: .5; cursor: not-allowed; }
.bp-btn-primary {
  background: var(--bp-amber); color: var(--bp-amber-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(16,25,43,.18);
}
.bp-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.bp-btn-secondary { background: var(--bp-card); color: var(--bp-ink); border-color: var(--bp-hairline); }
.bp-btn-secondary:hover:not(:disabled) { border-color: var(--bp-steel); }
.bp-btn-ghost { background: transparent; color: var(--bp-steel); }
.bp-btn-ghost:hover:not(:disabled) { background: rgba(74,90,114,.1); color: var(--bp-ink); }
.bp-btn-sm { padding: 6px 10px; font-size: 12.5px; }

/* ── Chips (visible-options, never dropdowns for a primary choice) ──── */

.bp-chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bp-chip-card {
  text-align: left; width: 100%; padding: 16px;
  background: var(--bp-card); border: 1px solid var(--bp-hairline); border-radius: var(--bp-radius-card);
  transition: border-color var(--bp-dur-fast) var(--bp-ease), background-color var(--bp-dur-fast) var(--bp-ease);
}
.bp-chip-card:hover { border-color: var(--bp-steel); }
.bp-chip-card[aria-pressed="true"] {
  background: var(--bp-ink-navy); border-color: var(--bp-ink-navy); color: #fff;
}
.bp-chip-card[aria-pressed="true"] .bp-chip-blurb { color: rgba(255,255,255,.72); }
.bp-chip-card[aria-pressed="true"] .bp-chip-icon { color: var(--bp-amber); }
.bp-chip-title { font-weight: 700; font-size: 14.5px; margin-top: 10px; }
.bp-chip-blurb { font-size: 12.5px; color: var(--bp-steel); margin-top: 4px; line-height: 1.4; }
.bp-chip-icon { color: var(--bp-steel); width: 20px; height: 20px; }
.bp-chip-head { display: flex; align-items: flex-start; justify-content: space-between; }

.bp-pill-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--bp-radius-pill);
  font-size: 12px; font-weight: 600; color: var(--bp-steel);
  background: var(--bp-card); border: 1px solid var(--bp-hairline);
  transition: background-color var(--bp-dur-fast) var(--bp-ease), color var(--bp-dur-fast) var(--bp-ease), border-color var(--bp-dur-fast) var(--bp-ease);
}
.bp-pill-toggle[aria-pressed="true"] { background: var(--bp-ink-navy); color: var(--bp-amber); border-color: var(--bp-ink-navy); }
.bp-pill-toggle:disabled { opacity: .4; cursor: not-allowed; }

.bp-tab-row { display: flex; gap: 2px; background: var(--bp-paper); border: 1px solid var(--bp-hairline); border-radius: var(--bp-radius-control); padding: 3px; width: fit-content; }
.bp-tab-btn { padding: 6px 13px; border-radius: 4px; font-size: 12.5px; font-weight: 600; color: var(--bp-steel); background: transparent; }
.bp-tab-btn[aria-selected="true"] { background: var(--bp-card); color: var(--bp-ink); box-shadow: var(--bp-shadow-raised); }

/* ── Forms ─────────────────────────────────────────────────────────── */

.bp-field-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-steel); margin-bottom: 6px; }
.bp-input {
  width: 100%; padding: 9px 11px; border-radius: var(--bp-radius-control);
  border: 1px solid var(--bp-hairline); background: var(--bp-card); color: var(--bp-ink);
}
.bp-input:focus { outline: none; border-color: var(--bp-amber); box-shadow: 0 0 0 3px rgba(242,166,61,.18); }
.bp-field-grid { display: grid; gap: 10px; }
.bp-field-grid-4 { grid-template-columns: repeat(4, 1fr); }
.bp-field-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .bp-field-grid-4 { grid-template-columns: repeat(2, 1fr); } }

.bp-upload-field {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 16px; border: 1px dashed var(--bp-hairline); border-radius: var(--bp-radius-control);
  color: var(--bp-steel); font-size: 13px;
}
.bp-upload-field:hover { border-color: var(--bp-steel); }

/* ── Drawing viewer ────────────────────────────────────────────────── */

.bp-viewer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.bp-canvas-frame {
  margin-top: 10px; border: 1px solid var(--bp-hairline); border-radius: var(--bp-radius-control);
  overflow: hidden; background: var(--bp-draw-card);
}
.bp-drawing-svg { display: block; width: 100%; height: auto; }
/* The real shop-drawing sheets from engine/cabinet-draw.js are fully
   self-contained SVGs (their own white paper background, their own fixed
   drafting-ink colors) — they don't use the --bp-draw-* tokens above, on
   purpose: a shop drawing looks the same whether the app is in day or
   night mode, exactly like a printed sheet would. */
.bp-engine-sheet svg { display: block; width: 100%; height: auto; }

/* Night-mode ink. Wireframe strokes and dimension lines are drawn with
   var(--bp-draw-blueprint)/var(--bp-draw-steel*), and every draw call
   already references those custom properties rather than a literal color —
   so redefining them here, scoped to a night-mode drawing, brightens every
   wireframe line and dimension callout against the near-black night canvas
   with no change needed at any of the many call sites that draw them. */
.bp-drawing-svg.bp-night {
  --bp-draw-blueprint: #6F94C4;
  --bp-draw-steel: #94A3B8;
  --bp-draw-steel-soft: #64748B;
  --bp-draw-hairline: #2A3B52;
}
.bp-drawing-svg .bp-dim line { stroke: var(--bp-draw-blueprint); stroke-width: 1; }
.bp-drawing-svg .bp-dim text { font-family: var(--font-mono); font-size: 9px; fill: var(--bp-draw-blueprint); }
.bp-drawing-svg .bp-face-label { font-family: var(--font-display); font-weight: 800; }
.bp-drawing-svg .bp-mono { font-family: var(--font-mono); }

/* ── Dashboard step cards ─────────────────────────────────────────── */

.bp-step-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
@media (max-width: 640px) { .bp-step-grid { grid-template-columns: 1fr; } }
.bp-step-num-lg { font-family: var(--font-mono); font-size: 11px; color: var(--bp-steel); }

/* ── Package / book pages ─────────────────────────────────────────── */

.bp-book { margin-top: 32px; display: flex; flex-direction: column; gap: 22px; }
.bp-sheet {
  background: var(--bp-card); border: 1px solid var(--bp-hairline); border-radius: var(--bp-radius-card);
  overflow: hidden; box-shadow: var(--bp-shadow-raised);
}
.bp-sheet-inner { padding: 28px; }
.bp-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.bp-sheet-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }

/* Cover sheet aspect ratio driven by chosen paper size */
.bp-cover { display: flex; flex-direction: column; justify-content: space-between; padding: 40px; }

/* ── Color / brand reference swatches ─────────────────────────────── */

.bp-swatch-row { display: flex; align-items: center; gap: 8px; }
.bp-swatch { width: 24px; height: 24px; border-radius: 5px; border: 1px solid rgba(16,25,43,.12); flex-shrink: 0; }
.bp-swatch-label { font-family: var(--font-mono); font-size: 11px; color: var(--bp-steel); }

.bp-colormatch-row {
  display: grid; grid-template-columns: 160px 1fr 220px; gap: 14px; align-items: start;
  border-top: 1px solid var(--bp-hairline); padding-top: 12px;
}
@media (max-width: 640px) {
  .bp-colormatch-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Print ─────────────────────────────────────────────────────────── */

.bp-no-print { }
@media print {
  .bp-topbar, .bp-no-print { display: none !important; }
  body { background: #fff; }
  .bp-dotfield { background-image: none; }
  .bp-sheet { box-shadow: none !important; break-inside: avoid; }
  .bp-sheet .bp-tick { display: none; }
  .bp-book-page { page-break-after: always; break-after: page; }
  .bp-page { padding: 0; max-width: none; }
}