/* BradleyPens upgrade (Signature). Built from prototypes/upgrade-1/2/3.css; loaded after studio-shell.css, scoped to body.bp-up/.bp-v2/.bp-v3. No words changed. */

/* ═══════════════════════════════════════════════════════════════════════
   BradleyPens upgrade — 1. REFRESH
   Loaded after style.css and studio-shell.css, scoped to body.bp-v1
   (and inherited by v2 and v3). Every rule here fixes a line on the
   upgrade list. No words change. No layout moves except to fix a named
   phone fault.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens: contrast and tap-target floors ─────────────────────── */

body.bp-up {
  /* 44px on touch, 36px with a mouse. One token, read everywhere. */
  --up-hit: 36px;
  --up-hit-sm: 32px;
}
@media (pointer: coarse) {
  body.bp-up { --up-hit: 44px; --up-hit-sm: 40px; }
}

/* steel-soft carried every label, hint and secondary value at 3.9:1 (dark)
   and 2.9:1 (light). Lift it to AA on both grounds; keep steel for emphasis. */
:root[data-theme="light"] body.bp-up,
:root:not([data-theme="dark"]) body.bp-up {
  --bp-steel-soft: #5E6C82;        /* 4.9:1 on #F4F5F1 */
}
:root[data-theme="dark"] body.bp-up,
:root:not([data-theme="light"]) body.bp-up {
  --bp-steel-soft: #8794A8;        /* 6.0:1 on #0B0F16 */
  --bp-steel: #A9B4C5;
}

/* ── 2. Type floors: nothing under 10.5px, labels readable ─────────── */

body.bp-up .st-eyebrow,
body.bp-up .bp-eyebrow,
body.bp-up .bp-bar-label,
body.bp-up .bp-readout-key,
body.bp-up .bp-cover-meta-label,
body.bp-up .dk-param-label { font-size: 10.5px; letter-spacing: .1em; }
body.bp-up .st-line-label { font-size: 10px; letter-spacing: .1em; }
body.bp-up .bp-dim-key { font-size: 10px; letter-spacing: .08em; }
body.bp-up .bp-dim-ftin { font-size: 11px; opacity: 1; min-height: 15px; }
body.bp-up .bp-dim-suffix { font-size: 11px; }
body.bp-up .bd-tile-key { font-size: 10.5px; }
body.bp-up .st-signtile-code { font-size: 9.5px; letter-spacing: .06em; }
body.bp-up .bp-brand-tag { font-size: 10px; letter-spacing: .1em; }
body.bp-up .bp-demo-chip,
body.bp-up .bp-save-state { font-size: 10.5px; letter-spacing: .08em; }
body.bp-up .bd-rev,
body.bp-up .cd-cap .cd-rev,
body.bp-up .cd-foot-title .cd-rev { font-size: 10.5px; }
body.bp-up .dk-label { font-size: 11px; }
body.bp-up .bd-hud-pct { font-size: 11.5px; }
body.bp-up .st-meta { font-size: 12px; }
body.bp-up .st-line-value { font-size: 13px; line-height: 1.45; }
body.bp-up .st-readout { font-size: 12px; }
body.bp-up .bp-readout-sub { font-size: 11.5px; }
body.bp-up .st-linkbtn { font-size: 12px; }
body.bp-up .bd-foot, body.bp-up .cd-foot { font-size: 11px; }
body.bp-up .bd-foot-size { font-size: 11.5px; }
body.bp-up .cd-note, body.bp-up .dk-note { font-size: 11.5px; }
body.bp-up .bp-option-desc { font-size: 12px; }
body.bp-up .bp-panel-hint { font-size: 13px; }
body.bp-up .bp-cover-index-note, body.bp-up .bp-sheet-meta { font-size: 10.5px; }
body.bp-up .bp-gate-tag { font-size: 10.5px; }

/* ── 3. Tap targets ────────────────────────────────────────────────── */

body.bp-up .bp-topbar .bp-btn-secondary,
body.bp-up .bp-theme-toggle { height: var(--up-hit); min-width: var(--up-hit); }
body.bp-up .bp-topbar .bp-btn-secondary { padding: 0 13px; font-size: 12.5px; }
body.bp-up .bp-mode-switch { padding: 3px; }
body.bp-up .bp-mode-btn { min-height: calc(var(--up-hit) - 6px); padding: 0 14px; font-size: 12.5px; }
body.bp-up .bp-project-input { min-height: var(--up-hit); font-size: 14px; }

body.bp-up .bp-dim-input,
body.bp-up .bp-copy-input { height: var(--up-hit); font-size: 13.5px; }
body.bp-up .bp-dim-input { width: 82px; }
body.bp-up .bp-dim-suffix { bottom: 0; top: 0; display: grid; align-items: center; }
body.bp-up .bp-tab-row { padding: 3px; }
body.bp-up .bp-tab-btn { min-height: calc(var(--up-hit) - 6px); padding: 0 13px; font-size: 12.5px; }
body.bp-up .bp-pill-toggle,
body.bp-up .bp-bar-spec { height: var(--up-hit); padding: 0 13px; font-size: 12px; }
body.bp-up .bd-barwrap > .bp-design-bar { min-height: calc(var(--up-hit) + 32px); }

body.bp-up .bd-hud { padding: 4px; }
body.bp-up .bd-hud-btn,
body.bp-up .bd-hud-pct { width: var(--up-hit-sm); height: var(--up-hit-sm); }
body.bp-up .bd-hud-pct { width: auto; min-width: 52px; }
body.bp-up .bd-inspector-close,
body.bp-up .cd-act { width: var(--up-hit-sm); height: var(--up-hit-sm); }
body.bp-up .bd-inspector-head { height: calc(var(--up-hit-sm) + 12px); }
body.bp-up .st-signtile { min-height: 52px; }
body.bp-up .st-signs-add { width: var(--up-hit); height: var(--up-hit); }
body.bp-up .bp-panel-close { width: var(--up-hit); height: var(--up-hit); }
body.bp-up .st-linkbtn { padding: 8px 0; }
body.bp-up .bh-btn { height: var(--up-hit-sm); }
body.bp-up .dk-btn { min-width: 64px; }

/* The confidence mark was a 7px square nobody could hit or read. The mark
   keeps its shape language (hollow = approximate, filled = confirmed) at a
   size a thumb can find, inside a full-size hit area. */
body.bp-up .st-conf {
  position: relative; width: 14px; height: 14px; border-width: 1.5px; border-radius: 2px;
  margin: 0 6px;
}
body.bp-up .st-conf::before {
  content: ""; position: absolute; inset: -11px; /* 36px hit area */
}
body.bp-up .st-conf[data-c="confirmed"] { background: var(--bp-accent); border-color: var(--bp-accent); }

/* ── 4. Focus, hover-only, and touch ───────────────────────────────── */

/* The board itself lost its focus ring. Give it one that respects the frame. */
body.bp-up .bd-stage:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: -3px; }

/* Card action bars and the dock gear were hover-only. On touch there is no
   hover, so they show when the card is selected, and the gear is always
   present where there are settings. */
@media (hover: none) {
  body.bp-up .dk-gear { opacity: 1; width: 24px; height: 24px; right: 0; top: 0; }
  body.bp-up .dk-label { display: block; }
  body.bp-up .bd-dock { height: auto; padding: 4px 6px; }
  body.bp-up .dk-btn { height: 56px; }
}
/* Below 1120 the dock dropped its labels for everyone. Keep them wherever
   there is room; they go only on a true phone width, where the tooltip
   still names the button on long-press. */
@media (min-width: 761px) and (max-width: 1120px) {
  body.bp-up .dk-label { display: block; }
  body.bp-up .dk-btn { height: 52px; }
  body.bp-up .bd-dock { height: var(--st-dock-h); }
}

/* ── 5. Inspector readout cells were clipping ──────────────────────── */

body.bp-up .bd-inspector .bp-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.bp-up .bd-inspector .bp-readout-cell { min-width: 0; overflow: hidden; }
body.bp-up .bd-inspector .bp-readout-val { font-size: 16px; }

/* ── 6. The empty board: the primary move leads ────────────────────── */

body.bp-up .bd-tile[data-primary="1"] {
  border-color: color-mix(in srgb, var(--bp-accent) 55%, var(--st-glass-line));
  box-shadow: var(--st-glass-lift), 0 0 0 1px color-mix(in srgb, var(--bp-accent) 22%, transparent);
}
body.bp-up .bd-tile[data-primary="1"] .bd-tile-name { color: var(--bp-ink); }
body.bp-up .bd-tile:not([data-primary="1"]) .bd-tile-ico { background: var(--st-surf-2); }
body.bp-up .bd-tile-name { font-size: 15px; }
body.bp-up .bd-tile-why { font-size: 12.5px; color: var(--bp-steel); }
body.bp-up .bd-empty .st-body { font-size: 14.5px; }

/* ── 7. Phone: the shell had no layout under 760px ─────────────────── */

@media (max-width: 760px) {
  body.bp-up { --st-signrail-w: 52px; --st-specrail-w: 100%; }
  body.bp-up .bp-app { grid-template-rows: auto 1fr; min-width: 0; }
  body.bp-up .bp-main, body.bp-up .st-work, body.bp-up .bd-stage { min-width: 0; max-width: 100vw; }

  /* The top bar wraps to two rows instead of running off the right edge. */
  body.bp-up .bp-topbar {
    height: auto; min-height: var(--st-topbar-h);
    flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; gap: 8px;
  }
  body.bp-up .bp-topbar .bp-brand { order: 1; }
  body.bp-up .bp-topbar .bp-mode-switch { order: 2; margin-left: auto; }
  body.bp-up .bp-topbar .bp-topbar-actions { order: 3; flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-start; min-width: 0; gap: 6px; }
  body.bp-up .bp-topbar .bp-demo-chip { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.bp-up .bp-topbar .bp-topbar-project { display: none; }

  /* The design bar spans the stage, compact, and scrolls sideways inside itself. */
  body.bp-up .bd-stage { --bd-left: var(--sp-2); --bd-right: var(--sp-2); }
  body.bp-up .bd-barwrap { left: var(--sp-2); right: var(--sp-2); top: var(--sp-2); }
  body.bp-up .bd-barwrap > .bp-design-bar { width: 100%; border-radius: 14px; padding: 0 var(--sp-1); min-height: 0; }
  body.bp-up .bp-bar-group { padding: 8px 10px; }
  body.bp-up .bp-dim-input, body.bp-up .bp-copy-input { height: 38px; }
  body.bp-up .bp-dim-ftin { min-height: 13px; font-size: 10.5px; }

  /* The sign rail stays on the left, below the bar, and never under it. */
  body.bp-up .bd-signs { top: 108px; max-height: calc(100% - 108px - var(--st-dock-h) - var(--sp-4)); }
  body.bp-up .st-signtile { min-height: 48px; }

  /* The inspector becomes a bottom sheet over the board. */
  body.bp-up .bd-inspector {
    left: var(--sp-2); right: var(--sp-2); top: 34%; bottom: calc(var(--sp-2) + var(--st-dock-h) + var(--sp-2));
    width: auto;
  }
  body.bp-up .bd-stage[data-spec="0"] .bd-inspector { transform: translateY(calc(100% + 24px)); }
  body.bp-up .bd-stage[data-spec="1"] .bd-hud { right: var(--sp-2); }

  /* The dock fills the width and scrolls sideways. */
  body.bp-up .bd-dock { left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); width: auto; max-width: none; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  body.bp-up .bd-stage[data-empty="1"] .bd-hud { bottom: var(--sp-2); }
  body.bp-up .bd-dock::-webkit-scrollbar { display: none; }
  body.bp-up .dk-list { padding: 0 2px; }
  body.bp-up .bd-hud { bottom: calc(var(--sp-2) + var(--st-dock-h) + var(--sp-2)); right: var(--sp-2); }
  body.bp-up .bd-note { bottom: calc(var(--sp-2) + var(--st-dock-h) + 40px); }

  /* The empty board stacks, the primary move first. */
  body.bp-up .bd-emptywrap { padding: var(--sp-6) var(--sp-4) calc(var(--st-dock-h) + var(--sp-6)); align-items: start; overflow-y: auto; }
  body.bp-up .bd-tiles { grid-template-columns: 1fr; }
  body.bp-up .bd-tile[data-primary="1"] { order: -1; }
  body.bp-up .bd-empty .st-h1 { font-size: 26px; }

  /* Panels take the full width. */
  body.bp-up .bp-panel { width: 100%; max-width: 100%; }

  /* The Book never scrolls sideways. */
  body.bp-up #bp-package { max-width: 100vw; overflow-x: hidden; }
  body.bp-up .bp-page { padding: 28px 16px 80px; }
  body.bp-up .bp-sheet { max-width: 100%; }
  body.bp-up .bp-sheet-inner { overflow-x: auto; }
}

/* ── 8. Printing from the dark theme produced dark sheets, and the
      fixed-height shell cut the book to one page ─────────────────── */

@media print {
  body.bp-up.st-shell { overflow: visible !important; height: auto; }
  body.bp-up .bp-app { height: auto; display: block; }
  body.bp-up .bp-main { display: block; }
  body.bp-up #bp-package { overflow: visible; height: auto; }
  body.bp-up .bp-sheet { color: var(--bp-ink); }
  /* Light drawing tokens, whatever the screen theme. */
  :root body.bp-up {
    --bp-paper: #fff; --bp-paper-deep: #fff; --bp-card: #fff;
    --bp-ink: #1D242E; --bp-ink-navy: #101A2B; --bp-blueprint: #1E3F66;
    --bp-steel: #4E5D73; --bp-steel-soft: #5E6C82;
    --bp-hairline: #DDE0DA; --bp-hairline-soft: #E9EBE6;
    --bp-accent: #0A98A8; --bp-amber: #0A98A8;
    --st-surf-0: #fff; --st-surf-1: #fff; --st-surf-2: #fff; --st-surf-3: #fff; --st-surf-4: #fff;
    --st-line: #E0E3DC; --st-line-hard: #D3D7CF; --st-line-soft: #EAECE6;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BradleyPens upgrade — 2. UPGRADE
   Loads after upgrade-1.css. Adds a real first-frame composition, a
   refined type pairing in the same character, section rhythm, paper
   treatment for the Book, and quiet load motion. Same words, same parts.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Type: Archivo stays, but earns a real scale ───────────────────── */

body.bp-v2 .st-h1,
body.bp-v2 .bp-h1 {
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 700;
  letter-spacing: -.04em; line-height: 1.02;
  font-variation-settings: "wdth" 100;
  text-wrap: balance;
}
body.bp-v2 .st-h2, body.bp-v2 .bp-h2 { font-weight: 650; letter-spacing: -.03em; }
body.bp-v2 .st-body, body.bp-v2 .bp-lede { text-wrap: pretty; }

/* Eyebrows: fewer shouting caps. Mono stays for data, the drawing's language. */
body.bp-v2 .st-eyebrow,
body.bp-v2 .bp-eyebrow,
body.bp-v2 .st-line-label,
body.bp-v2 .bp-readout-key,
body.bp-v2 .bp-cover-meta-label,
body.bp-v2 .dk-param-label,
body.bp-v2 .bp-bar-label {
  font-family: var(--font-display); font-weight: 600;
  text-transform: none; letter-spacing: 0; font-size: 11.5px;
  color: var(--bp-steel);
}
body.bp-v2 .st-eyebrow { font-size: 12px; }
body.bp-v2 .bp-dim-key { font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--bp-steel); }
body.bp-v2 .bd-tile-key,
body.bp-v2 .bd-rev,
body.bp-v2 .st-signtile-code,
body.bp-v2 .bp-demo-chip,
body.bp-v2 .bp-brand-tag { font-family: var(--font-mono); }

/* ── Glass: one edge, one tint, one light source ───────────────────── */

body.bp-v2 .st-glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 1px 1px rgba(0,0,0,.45),
    0 24px 56px -24px rgba(0,0,0,.8);
}
:root[data-theme="light"] body.bp-v2 .st-glass,
:root:not([data-theme="dark"]) body.bp-v2 .st-glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 1px rgba(16,26,43,.06),
    0 22px 50px -22px rgba(16,26,43,.3);
}
/* Radius ladder: the bar and the dock are the big shapes, controls inside
   are tighter, and chips are tighter still. Not one radius everywhere. */
body.bp-v2 .bd-barwrap > .bp-design-bar { border-radius: 18px; }
body.bp-v2 .bd-dock { border-radius: 20px; }
body.bp-v2 .bd-signs, body.bp-v2 .bd-inspector { border-radius: 16px; }
body.bp-v2 .bd-hud { border-radius: 12px; }
body.bp-v2 .bd-node { border-radius: 10px; }
body.bp-v2 .bd-tile { border-radius: 16px; }
body.bp-v2 .bp-dim-input, body.bp-v2 .bp-copy-input { border-radius: 8px; }
body.bp-v2 .bp-tab-row, body.bp-v2 .bp-mode-switch { border-radius: 10px; }
body.bp-v2 .bp-tab-btn, body.bp-v2 .bp-mode-btn { border-radius: 7px; }

/* ── The first frame: a composed opening, not three equal doors ────── */

body.bp-v2 .bd-emptywrap { padding: var(--sp-6) var(--sp-6) calc(var(--st-dock-h) + var(--sp-6)); }
body.bp-v2 .bd-empty {
  max-width: 920px; text-align: left; justify-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas: "head tiles" "lede tiles";
  column-gap: var(--sp-8); row-gap: var(--sp-4); align-items: start;
}
body.bp-v2 .bd-empty > div:first-child { grid-area: head; align-self: end; }
body.bp-v2 .bd-empty .st-body { grid-area: lede; margin: 0; max-width: 34ch; font-size: 15px; color: var(--bp-steel); }
body.bp-v2 .bd-tiles {
  grid-area: tiles;
  grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
  grid-template-areas: "sign sign" "logo photo";
  gap: var(--sp-3);
}
body.bp-v2 .bd-tile[data-empty="sign"] { grid-area: sign; padding: var(--sp-5) var(--sp-5) var(--sp-5); grid-template-columns: auto 1fr; grid-template-areas: "ico name" "ico why" "ico key"; column-gap: var(--sp-4); row-gap: 6px; align-items: start; }
body.bp-v2 .bd-tile[data-empty="sign"] .bd-tile-ico { grid-area: ico; width: 46px; height: 46px; border-radius: 12px; }
body.bp-v2 .bd-tile[data-empty="sign"] .bd-tile-name { grid-area: name; font-size: 18px; letter-spacing: -.025em; }
body.bp-v2 .bd-tile[data-empty="sign"] .bd-tile-why { grid-area: why; margin: 0; font-size: 13px; max-width: 36ch; }
body.bp-v2 .bd-tile[data-empty="sign"] .bd-tile-key { grid-area: key; margin-top: 4px; }
body.bp-v2 .bd-tile[data-empty="logo"] { grid-area: logo; }
body.bp-v2 .bd-tile[data-empty="photo"] { grid-area: photo; }
body.bp-v2 .bd-tile:not([data-primary="1"]) { padding: var(--sp-4); gap: var(--sp-2); }
body.bp-v2 .bd-tile:not([data-primary="1"]) .bd-tile-ico { width: 32px; height: 32px; border-radius: 8px; }
body.bp-v2 .bd-tile:not([data-primary="1"]) .bd-tile-name { font-size: 14px; }
body.bp-v2 .bd-tile:not([data-primary="1"]) .bd-tile-why { font-size: 12px; margin: 0; }

/* Entrance: the headline settles, then the tiles, one beat apart. */
body.bp-v2 .bd-empty > div:first-child,
body.bp-v2 .bd-empty .st-body,
body.bp-v2 .bd-tile { animation: up-rise 520ms var(--bp-ease-out) both; }
body.bp-v2 .bd-empty .st-body { animation-delay: 70ms; }
body.bp-v2 .bd-tile[data-empty="sign"] { animation-delay: 140ms; }
body.bp-v2 .bd-tile[data-empty="logo"] { animation-delay: 220ms; }
body.bp-v2 .bd-tile[data-empty="photo"] { animation-delay: 280ms; }
@keyframes up-rise { from { opacity: 0; transform: translateY(10px); } }

/* Floating chrome arrives with the page, from its own edge. */
body.bp-v2 .bd-barwrap { animation: up-drop 460ms var(--bp-ease-out) both; }
body.bp-v2 .bd-signs { animation: up-slide-r 460ms var(--bp-ease-out) 60ms both; }
body.bp-v2 .bd-dock { animation: up-rise 460ms var(--bp-ease-out) 120ms both; }
body.bp-v2 .bd-hud { animation: up-rise 460ms var(--bp-ease-out) 160ms both; }
@keyframes up-drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes up-slide-r { from { opacity: 0; transform: translateX(-8px); } }
@media (prefers-reduced-motion: reduce) {
  body.bp-v2 .bd-empty > div:first-child, body.bp-v2 .bd-empty .st-body, body.bp-v2 .bd-tile,
  body.bp-v2 .bd-barwrap, body.bp-v2 .bd-signs, body.bp-v2 .bd-dock, body.bp-v2 .bd-hud { animation: none; }
}

@media (max-width: 760px) {
  body.bp-v2 .bd-empty { grid-template-columns: 1fr; grid-template-areas: "head" "lede" "tiles"; row-gap: var(--sp-3); }
  body.bp-v2 .bd-tiles { grid-template-columns: 1fr; grid-template-areas: "sign" "logo" "photo"; }
  body.bp-v2 .bd-emptywrap { padding: var(--sp-6) var(--sp-4) calc(var(--st-dock-h) + var(--sp-6)); }
}

/* ── The design bar: the live number reads like a dimension ────────── */

body.bp-v2 .bp-bar-group + .bp-bar-group { border-left-color: var(--st-glass-line); }
body.bp-v2 .bp-dim-input { font-weight: 500; }
body.bp-v2 .bp-dim-ftin { color: var(--bp-ink); font-weight: 500; }
body.bp-v2 .bp-dim:focus-within .bp-dim-ftin { color: var(--bp-accent); }
body.bp-v2 .bp-dim-ftin { transition: color var(--bp-dur-fast) var(--bp-ease-out); }

/* ── Cards: the title strip is a sheet's title strip ───────────────── */

body.bp-v2 .bd-head { height: 34px; }
body.bp-v2 .bd-name { font-size: 12.5px; font-weight: 600; }
body.bp-v2 .bd-foot-size { font-weight: 500; color: var(--bp-ink); }
body.bp-v2 .bd-node { box-shadow: var(--st-lift), 0 30px 60px -30px rgba(0,0,0,.6); }

/* ── Inspector rhythm: one spacing scale, three tiers ──────────────── */

body.bp-v2 .st-spec-sect { padding: var(--sp-5) var(--sp-4); }
body.bp-v2 .st-spec-sect > .st-eyebrow { margin-bottom: var(--sp-4); }
body.bp-v2 .st-line { margin-bottom: var(--sp-4); gap: 3px; }
body.bp-v2 .st-spec-type { font-size: 15px; font-weight: 650; letter-spacing: -.02em; }

/* Project and Add-sign panels. */
body.bp-v2 .bp-panel-section { padding: var(--sp-6) 0; }
body.bp-v2 .bp-panel-section-title { font-size: 15px; letter-spacing: -.02em; }
body.bp-v2 .bp-panel-hint { margin: 8px 0 18px; }
body.bp-v2 .bp-option { border-radius: 10px; }
body.bp-v2 .bp-option[aria-pressed="true"] { border-color: var(--bp-accent); }

/* ── The Book reads as paper on screen, whatever the theme ─────────── */

body.bp-v2 #bp-package .bp-sheet {
  --bp-paper: #fff; --bp-paper-deep: #F4F5F1; --bp-card: #fff;
  --bp-ink: #1D242E; --bp-ink-navy: #101A2B; --bp-blueprint: #1E3F66;
  --bp-steel: #4E5D73; --bp-steel-soft: #5E6C82;
  --bp-hairline: #DDE0DA; --bp-hairline-soft: #E9EBE6;
  --bp-accent: #0A98A8; --bp-amber: #0A98A8;
  --st-surf-0: #fff; --st-surf-1: #fff; --st-surf-2: #FAFBF8; --st-surf-3: #fff; --st-surf-4: #fff;
  --st-line: #E0E3DC; --st-line-hard: #D3D7CF; --st-line-soft: #EAECE6;
  color-scheme: light; color: var(--bp-ink);
  border: 0; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 2px 2px rgba(0,0,0,.3), 0 40px 80px -30px rgba(0,0,0,.9);
}
:root[data-theme="light"] body.bp-v2 #bp-package .bp-sheet,
:root:not([data-theme="dark"]) body.bp-v2 #bp-package .bp-sheet {
  box-shadow: 0 0 0 1px rgba(16,26,43,.12), 0 2px 2px rgba(16,26,43,.06), 0 30px 60px -28px rgba(16,26,43,.35);
}
body.bp-v2 .bp-book { gap: var(--sp-7); }
body.bp-v2 #bp-package .bp-eyebrow { margin-bottom: var(--sp-2); }

/* ═══════════════════════════════════════════════════════════════════════
   BradleyPens upgrade — 3. SIGNATURE
   Loads after upgrade-2.css. One standout first-frame idea: the opening
   copy IS the sign. "A blank board." sits on a blank sign face, drafted
   on the sheet with its pole, ground line and dimension lines, drawn on
   in the order a drawing is actually made. Pure CSS on the existing
   markup: no words, no photos, no new elements, no scroll effects.
   ═══════════════════════════════════════════════════════════════════════ */

body.bp-v3 { --v3-ink: color-mix(in srgb, var(--bp-blueprint) 60%, transparent); --v3-ink-soft: color-mix(in srgb, var(--bp-blueprint) 32%, transparent); --v3-dim: color-mix(in srgb, var(--bp-accent) 75%, transparent); }

/* ── The sign face around the copy ────────────────────────────────── */

@media (min-width: 1100px) {
  body.bp-v3 .bd-empty { max-width: 980px; column-gap: var(--sp-9); position: relative; z-index: 1; }
  body.bp-v3 .bd-empty > div:first-child,
  body.bp-v3 .bd-empty .st-body { position: relative; z-index: 1; justify-self: stretch; }
  body.bp-v3 .bd-empty > div:first-child { padding-top: var(--sp-5); align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
  body.bp-v3 .bd-empty .st-body { padding-bottom: var(--sp-5); }
  body.bp-v3 .bd-empty .st-h1 { font-size: clamp(34px, 3.8vw, 52px); }

  /* The face: a cabinet frame with a retainer line inside, as the real
     elevation draws it. It spans the copy's two grid rows. */
  body.bp-v3 .bd-empty::before {
    content: ""; grid-area: head / head / lede / lede; z-index: 0;
    align-self: stretch; justify-self: stretch;
    margin: calc(var(--sp-5) * -1) calc(var(--sp-6) * -1) calc(var(--sp-5) * -1) calc(var(--sp-6) * -1);
    border: 1.5px solid var(--v3-ink); border-radius: 8px;
    outline: 1px solid var(--v3-ink-soft); outline-offset: -12px;
    /* The face is acrylic: a flat panel on the ground, lit from inside. */
    background: var(--st-surf-2);
    box-shadow: 0 0 80px -24px color-mix(in srgb, var(--bp-lit) 28%, transparent), 0 24px 60px -30px rgba(0,0,0,.8);
    clip-path: inset(0 100% 0 0 round 8px);
    animation: v3-wipe 900ms var(--bp-ease-out) 200ms forwards;
  }
  /* The height dimension at the face's right edge. */
  body.bp-v3 .bd-empty::after {
    content: ""; grid-area: head / head / lede / lede; z-index: 0;
    align-self: stretch; justify-self: end; width: 14px;
    margin: calc(var(--sp-5) * -1) calc(var(--sp-6) * -1 - 44px) calc(var(--sp-5) * -1) 0;
    border-top: 1px solid var(--v3-dim); border-bottom: 1px solid var(--v3-dim);
    background: linear-gradient(var(--v3-dim), var(--v3-dim)) center / 1px 100% no-repeat;
    transform-origin: top; transform: scaleY(0);
    animation: v3-grow-y 700ms var(--bp-ease-out) 1300ms forwards;
  }
  /* The width dimension above the face. */
  body.bp-v3 .bd-empty > div:first-child::before {
    content: ""; position: absolute; z-index: 0;
    left: calc(var(--sp-6) * -1); right: calc(var(--sp-6) * -1); top: calc(var(--sp-5) * -1 - 44px); height: 14px;
    border-left: 1px solid var(--v3-dim); border-right: 1px solid var(--v3-dim);
    background: linear-gradient(var(--v3-dim), var(--v3-dim)) center / 100% 1px no-repeat;
    transform-origin: left; transform: scaleX(0);
    animation: v3-grow-x 700ms var(--bp-ease-out) 1150ms forwards;
  }
  /* Drafting rule under the headline. */
  body.bp-v3 .bd-empty > div:first-child::after {
    content: ""; display: block; width: 56px; height: 2px; margin-top: var(--sp-4);
    background: var(--bp-accent); border-radius: 1px;
    transform-origin: left; animation: v3-grow-x 600ms var(--bp-ease-out) 900ms both;
  }

  /* The pole, from the face down to the ground, and the ground itself,
     hatched the way the elevation draws grade. Both belong to the stage,
     so they can reach the frame's bottom. */
  body.bp-v3 .bd-emptywrap { z-index: 3; }
  body.bp-v3 .bd-emptywrap::before {
    content: ""; position: absolute; z-index: 0;
    /* Under the middle of the face: the copy column is (980 - 96) / 2.25
       wide, the face adds 32px each side, the pole is 40px. */
    left: calc(50% - 490px + 196px - 20px); width: 40px;
    top: calc(50% + 150px); bottom: 92px;
    border-left: 1.5px solid var(--v3-ink); border-right: 1.5px solid var(--v3-ink);
    transform-origin: top; transform: scaleY(0);
    animation: v3-grow-y 600ms var(--bp-ease-out) 1000ms forwards;
  }
  body.bp-v3 .bd-emptywrap::after {
    content: ""; position: absolute; z-index: 0;
    left: 6%; right: 6%; bottom: 80px; height: 12px;
    border-top: 1.5px solid var(--v3-ink);
    background: repeating-linear-gradient(135deg, var(--v3-ink-soft) 0 1px, transparent 1px 22px) left top / 100% 100% no-repeat;
    transform-origin: left; transform: scaleX(0);
    animation: v3-grow-x 900ms var(--bp-ease-out) 1050ms forwards;
  }
  body.bp-v3 .bd-stage[data-empty="0"] .bd-emptywrap::before,
  body.bp-v3 .bd-stage[data-empty="0"] .bd-emptywrap::after { display: none; }

  /* Tiles on the drafted sheet read as paper, so they sit over the line
     work. The primary tile keeps v1's full accent edge; no side tab. */
  body.bp-v3 .bd-tile { background: color-mix(in srgb, var(--st-surf-1) 94%, transparent); position: relative; z-index: 1; }
}

@keyframes v3-wipe { to { clip-path: inset(0 0 0 0 round 8px); } }
@keyframes v3-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v3-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  body.bp-v3 .bd-empty::before { animation: none; clip-path: none; }
  body.bp-v3 .bd-empty::after,
  body.bp-v3 .bd-empty > div:first-child::before,
  body.bp-v3 .bd-empty > div:first-child::after,
  body.bp-v3 .bd-emptywrap::before,
  body.bp-v3 .bd-emptywrap::after { animation: none; transform: none; }
}

/* Under 1100px the face is just the rule under the headline; the tiles
   are the subject and there is no room for a pole. */
@media (max-width: 1099px) {
  body.bp-v3 .bd-empty > div:first-child::after {
    content: ""; display: block; width: 48px; height: 2px; margin-top: var(--sp-3);
    background: var(--bp-accent); border-radius: 1px;
  }
}

/* ── The bar carries a tape measure along its foot ─────────────────── */

body.bp-v3 .bd-barwrap > .bp-design-bar { position: relative; top: auto; } /* style.css sets top:108px for its old sticky bar; relative must not inherit it */
body.bp-v3 .bd-barwrap > .bp-design-bar::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 5px;
  background:
    repeating-linear-gradient(90deg, var(--st-line-hard) 0 1px, transparent 1px 8px) left bottom / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--st-line-hard) 0 1px, transparent 1px 40px) left bottom / 100% 5px no-repeat;
  opacity: .9; pointer-events: none;
}

/* ── Sign rail: the brand tile is the only accent ──────────────────── */

body.bp-v3 .st-signtile-brand[aria-selected="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bp-accent) 50%, transparent); }

/* ── The Book: sheets carry corner ticks like a drawing ────────────── */

body.bp-v3 #bp-package .bp-sheet { position: relative; }
body.bp-v3 #bp-package .bp-sheet::before,
body.bp-v3 #bp-package .bp-sheet::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 0 solid #0A98A8; opacity: .7;
}
body.bp-v3 #bp-package .bp-sheet::before { left: 10px; top: 10px; border-left-width: 1.5px; border-top-width: 1.5px; }
body.bp-v3 #bp-package .bp-sheet::after { right: 10px; bottom: 10px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* ═══════════════════════════════════════════════════════════════════════
   SIGNUP AND THE SIGN-IN GATE
   The signup form floated bare on the ground with 11.5px hints; the gate
   had a glass card. Both get the same card, the same dot field, the same
   label scale as the rest of the upgrade.
   ═══════════════════════════════════════════════════════════════════════ */

body.bp-signup.bp-up .su-wrap {
  background-image:
    radial-gradient(circle, var(--st-dot-major) 1.1px, transparent 1.4px),
    radial-gradient(circle, var(--st-dot-minor) 1px, transparent 1.3px);
  background-size: 96px 96px, 24px 24px;
}
body.bp-signup.bp-up .su-inner { max-width: 440px; }
body.bp-signup.bp-up .bp-gate-card,
body.bp-up #bp-gate-card {
  background: var(--st-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid var(--st-glass-line); box-shadow: var(--st-glass-lift);
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
}
body.bp-signup.bp-up .bp-gate-card .st-h2 { font-size: 22px; letter-spacing: -.03em; }
body.bp-signup.bp-up .su-hint { font-size: 13px; line-height: 1.5; color: var(--bp-steel); }
body.bp-signup.bp-up .su-hint a { color: var(--bp-accent); text-underline-offset: 2px; }
body.bp-up .bp-gate-card .bp-field-label {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0; text-transform: none; color: var(--bp-steel); margin-top: var(--sp-3);
}
body.bp-up .bp-gate-card .bp-input { min-height: 42px; font-size: 14px; }
body.bp-up .bp-gate-card .bp-btn { min-height: 44px; }
body.bp-up .bp-gate-error:empty { display: none; }
body.bp-up .bp-gate-tag { font-size: 10.5px; }
body.bp-signup.bp-up .su-slug { font-size: 24px; background: var(--st-surf-2); }
@media (max-width: 480px) {
  body.bp-signup.bp-up .bp-gate-card { padding: var(--sp-5) var(--sp-4); }
  body.bp-signup.bp-up .su-row { grid-template-columns: 1fr; }
}