/* ============================================================
V25 — IBM PLEX TYPE STACK (+ DATUM families)
Loaded once. Used by warm-light/warm-dark themes (and any
future theme that opts in via the --font-* tokens).
SELF-HOSTED since 2026-07-02 (health-check Phase 2): the six
families formerly @imported from fonts.googleapis.com now live
in /fonts/vendored (latin + latin-ext woff2, SIL OFL), declared
by /fonts/vendored-fonts.css. Zero external fetches on load.
============================================================ */
@import url("../fonts/vendored-fonts.css");
/* ============================================================
ROUTED GOTHIC — bundled drafting face (NOT a CDN font)
Darren Embry, SIL Open Font License v1.1 (see /fonts/OFL.txt).
Traced from a Leroy lettering stencil — the genuine drafting-
template lineage. Used by the 2D-mode noteBox 'Routed Gothic'
lettering styles (js/97 NB_STYLES). Three cuts, each shipped as
a single normal/normal face under its own family name so the
canvas drawer can select it by family alone:
Regular · Wide (extended) · Half-Italic (gentle lean).
Files live in /fonts; url() is relative to THIS stylesheet (css/).
============================================================ */
@font-face {
font-family: "Routed Gothic";
src: url("../fonts/routed-gothic.ttf") format("truetype");
font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Routed Gothic Wide";
src: url("../fonts/routed-gothic-wide.ttf") format("truetype");
font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Routed Gothic Half Italic";
src: url("../fonts/routed-gothic-half-italic.ttf") format("truetype");
font-weight: normal; font-style: normal; font-display: swap;
}
/* ============================================================
SAIRA CONDENSED — vendored drafting-text face (NOT a CDN font)
Steve Matteson, SIL Open Font License v1.1. Latin subset of
Google Fonts 'Saira Condensed' v12, weights 400 and 500 only,
fetched as woff2 and stored locally for offline use. Used by the
2D-mode Text-section entities (Callout / Text box / Plain text /
Detail title / Section title / Section mark). Canvas selects it
by family name: 'Saira Condensed'. url() is relative to THIS
stylesheet (css/), so it points up into /lib.
============================================================ */
@font-face {
font-family: "Saira Condensed";
src: url("../lib/saira-condensed-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Saira Condensed";
src: url("../lib/saira-condensed-500.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ============================================================
V25 STRUCTURAL TOKENS (theme-agnostic)
Type families, type ramp, spacing, radii, layout heights,
motion. Available to every theme so newly written rules can
reference them without theme branching. Existing rules keep
working because they reference the per-theme color tokens.
============================================================ */
:root {
/* Type families */
--font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--font-serif: "IBM Plex Serif", ui-serif, Georgia, serif;
/* Type ramp */
--fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
--fs-lg: 14px; --fs-xl: 16px; --fs-2xl: 20px; --fs-3xl: 28px;
/* Tracking */
--tracking-tight: -0.012em;
--tracking-wide: 0.04em;
--tracking-caps: 0.08em;
/* Spacing scale (4-px base, 12 steps) */
--sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px;
--sp-6:12px; --sp-7:14px; --sp-8:16px; --sp-10:20px; --sp-12:24px; --sp-16:32px;
/* Radii */
--r-0: 0; --r-1: 3px; --r-2: 5px; --r-3: 7px; --r-4: 10px; --r-pill: 999px;
/* properties-panel-polish (2026-06-21) — theme-agnostic.
--font-display: Josefin Sans for headings/eyebrows ONLY (never body),
falling back to the sans stack. --shadow-plate: a hard, un-blurred
offset "plate" shadow for the floating options ribbon; a translucent
black reads correctly on both light and dark theme surfaces. */
--font-display: "Josefin Sans", var(--font-sans);
--shadow-plate: 3px 3px 0 0 rgba(0, 0, 0, 0.18);
/* Layout heights / widths */
/* V25-layout-overhaul — top bar trimmed from 44 → 38 for the
thinner header in Dan's sketch. */
--bar-h: 38px; --rail-row-h: 28px; --status-h: 28px;
/* V25-c — palette widened from 172 → 196 so the 2-col tiles fit
"360UB 50.7" / "100x50x5" labels cleanly without ellipsis. */
--tile-size: 56px; --rail-w: 192px; --palette-w: 196px;
/* Motion */
--t-fast: 100ms; --t-base: 160ms;
--ease-out: cubic-bezier(.22, .61, .36, 1);
/* V25 — paper/ink pair (theme-agnostic).
--paper is the cream sheet color, used in both warm-light and
warm-dark themes (the sheet always represents real paper).
--paper-ink is the warm graphite that sits on it. Used for tiles,
sheet content, anything on --paper so it doesn't disappear into
cream-on-cream in dark mode where --text becomes cream. */
--paper-ink: #2A241F;
--paper-ink-mute: #6E665A;
}
/* ============================================================
V21 + V25 DESIGN SYSTEM — THEME TOKENS
Five themes:
· WARM LIGHT (V25 default) — paper-cream + coral accent
· WARM DARK (V25) — warm charcoal sibling
· CLASSIC (V21) — white sheet / black ink
· DARK (V21) — neutral charcoal IDE
· BT — Bligh Tanner brand red
Each theme defines BOTH the new V21 semantic tokens (--surface,
--text, --accent, etc.) AND aliases for the legacy V20 token
names (--bg, --ink, --mute, etc.) so existing CSS rules inherit
the new palette without a full sweep. Canvas-rendering tokens
(--entity-color, --cut-color, etc.) drive the drawing engine
and must be defined in every theme. */
/* WARM LIGHT — V25 default. Paper-cream surfaces, warm graphite
ink, single coral accent. Borders-first, almost no shadows. */
body.theme-warm-light {
/* V25 surface ramp */
--paper: #FCFAF6;
--surface: #F2EBDD;
--surface-cool: #E6E2D8;
--surface-2: #F8F2E5;
--surface-3: #EDE5D2;
--surface-4: #E4DBC4;
/* Borders (three weights doing the structural work) */
--border: #E0D6BF;
--border-2: #C9BD9E;
--border-strong: #A89A78;
/* Ink ramp (warm graphite, no #000) */
--text: #2A241F;
--text-mute: #6E665A;
--text-subtle: #9A9079;
--text-faint: #BFB59A;
/* Coral / terracotta accent (single hue, multiple roles) */
--accent: oklch(0.62 0.13 35);
--accent-hover: oklch(0.58 0.14 35);
--accent-press: oklch(0.52 0.14 35);
--accent-bg: oklch(0.62 0.13 35 / 0.10);
--accent-bg-2: oklch(0.62 0.13 35 / 0.18);
--accent-brd: oklch(0.62 0.13 35 / 0.40);
--accent-ink: #FCFAF6;
/* Semantic colors (share the warm chroma family) */
--warn: oklch(0.68 0.13 70);
--danger: oklch(0.55 0.16 27);
--success: oklch(0.58 0.10 145);
--info: oklch(0.58 0.08 240);
--focus-ring: oklch(0.62 0.13 35 / 0.45);
/* DATUM canonical ladder (additive — richer paper/ink/accent vocabulary
for the refinement layer; existing rules are untouched). */
--paper-0: #FDFBF7; --paper-1: #F7F1E3; --paper-2: #EEE6D4; --paper-3: #E0D3B2;
--ink-1: #2A241F; --ink-2: #4A3526; --ink-3: #6E665A; --ink-4: #9A9079; --ink-5: #BFB59A;
--red-chop: #BE4234; --red-deep: #8F2E25; --red-wash: #EBD2C2;
--blueprint: oklch(0.56 0.045 248); --olive: oklch(0.585 0.040 128);
--ochre: oklch(0.70 0.055 73); --plum: oklch(0.42 0.030 345);
--warn-bg: oklch(0.68 0.13 70 / 0.13); --danger-bg: oklch(0.55 0.16 27 / 0.11);
--success-bg: oklch(0.58 0.10 145 / 0.12); --info-bg: oklch(0.58 0.08 240 / 0.12);
/* FLW print-plate signature — warm sepia offset, kept subtle. */
--shadow-plate: 3px 3px 0 0 color-mix(in oklab, var(--ink-2) 13%, transparent);
/* Hover / active surfaces */
--hover-bg: rgba(42, 36, 31, 0.04);
--hover-bg-2: rgba(42, 36, 31, 0.07);
--active-bg: var(--accent-bg);
--active-brd: var(--accent-brd);
--scrollbar: rgba(42, 36, 31, 0.22);
--selected-color: var(--accent);
/* GLT notch-mode glow — warm honey amber, deliberately a different hue
from --selected-color (terracotta, hue 35) so "armed for cutting"
never reads as "selected". */
--notch-glow: oklch(0.70 0.14 72);
/* V25 — modal veil (theme-aware overlay scrim) */
--modal-veil: rgba(42, 36, 31, 0.28);
/* Elevation — borders-first */
--shadow-hairline: inset 0 0 0 1px var(--border);
--shadow-sm: 0 1px 0 rgba(42,36,31,0.04);
--shadow-md: 0 1px 0 rgba(42,36,31,0.04),
0 6px 18px -8px rgba(42,36,31,0.14),
0 2px 6px -2px rgba(42,36,31,0.08);
--shadow-lg: 0 1px 0 rgba(42,36,31,0.04),
0 12px 32px -12px rgba(42,36,31,0.18),
0 2px 6px -2px rgba(42,36,31,0.10);
--shadow-pop: var(--shadow-lg);
/* Legacy V20 aliases (kept so existing rules inherit warmly) */
--bg: var(--surface);
--bg2: var(--surface-2);
--bg3: var(--surface-3);
--brd: var(--border);
--brd-subtle: var(--border);
--ink: var(--text);
--mute: var(--text-mute);
--detail-boundary: var(--accent-soft, var(--accent));
--inputBg: var(--surface-2);
/* Canvas engine tokens — drive drawing output */
--workspace-bg: var(--surface);
--sheet-bg: var(--paper);
--sheet-border: #B8AC8E;
/* V25 — sheet drop-shadow read by canvas drawSheet() via getComputedStyle.
Canvas can only paint a single shadow layer (vs CSS's stacking), so
we tune one warm soft shadow. Comma-separated list = canvas reads
the first comma-separated token for color. */
--sheet-shadow: rgba(42, 36, 31, 0.16);
--grid-major: rgba(42,36,31,0.10);
--grid-minor: rgba(42,36,31,0.04);
--entity-color: #2A241F;
--epoxy-color: #a09080;
--cut-color: oklch(0.55 0.16 27);
--hid-color: rgba(42,36,31,0.30);
/* V25-c — view-key accents toned down to share the warm chroma family.
Section-A keeps the cool side of the wheel (slightly muted teal),
Plan-B keeps the warm side (muted ochre). Both at ~0.04 chroma so
they read as differentiation, not as colored interruption. */
--section-a-accent: oklch(0.50 0.04 210);
--plan-b-accent: oklch(0.55 0.05 75);
--cl-color: oklch(0.55 0.16 27 / 0.45);
--proj-line: rgba(42,36,31,0.12);
--crosshair-color: rgba(42,36,31,0.16);
--crosshair-text: rgba(42,36,31,0.55);
}
/* WARM DARK — V25 sibling. Same accent family on a warm charcoal
surface. Sheet stays paper-cream so prints feel right. */
body.theme-warm-dark {
--paper: #ECE6D7;
--surface: #1B1916;
--surface-cool: #1F1E1B;
--surface-2: #232019;
--surface-3: #2B2820;
--surface-4: #35312A;
--border: #3A352C;
--border-2: #4A4438;
--border-strong: #5E5746;
--text: #EFE7D5;
--text-mute: #B5AC97;
--text-subtle: #877F6C;
--text-faint: #5C5447;
--accent: oklch(0.72 0.13 35);
--accent-hover: oklch(0.78 0.13 35);
--accent-press: oklch(0.68 0.13 35);
--accent-bg: oklch(0.72 0.13 35 / 0.14);
--accent-bg-2: oklch(0.72 0.13 35 / 0.22);
--accent-brd: oklch(0.72 0.13 35 / 0.50);
--accent-ink: #1B1916;
--warn: oklch(0.74 0.13 70);
--danger: oklch(0.65 0.17 27);
--success: oklch(0.70 0.10 145);
--info: oklch(0.70 0.08 240);
--focus-ring: oklch(0.72 0.13 35 / 0.50);
/* DATUM canonical ladder (additive) — warm-dark "lamp-lit drafting table". */
--paper-0: #232019; --paper-1: #1B1916; --paper-2: #2B2820; --paper-3: #35312A;
--ink-1: #EFE7D5; --ink-2: #D8CFB9; --ink-3: #B5AC97; --ink-4: #877F6C; --ink-5: #5C5447;
--red-chop: #D2604F; --red-deep: #B5483A; --red-wash: #3A2A22;
--blueprint: oklch(0.72 0.050 248); --olive: oklch(0.74 0.045 128);
--ochre: oklch(0.78 0.060 73); --plum: oklch(0.74 0.040 345);
--warn-bg: oklch(0.74 0.13 70 / 0.16); --danger-bg: oklch(0.65 0.17 27 / 0.16);
--success-bg: oklch(0.70 0.10 145 / 0.16); --info-bg: oklch(0.70 0.08 240 / 0.16);
--shadow-plate: 3px 3px 0 0 rgba(0,0,0,0.40);
--hover-bg: rgba(239,231,213,0.05);
--hover-bg-2: rgba(239,231,213,0.09);
--active-bg: var(--accent-bg);
--active-brd: var(--accent-brd);
--scrollbar: rgba(239,231,213,0.22);
--selected-color: var(--accent);
--notch-glow: oklch(0.72 0.14 74); /* GLT notch glow (amber ≠ terracotta selection) */
/* V25 — darker modal veil for dark mode (deeper black scrim) */
--modal-veil: rgba(0, 0, 0, 0.55);
--shadow-hairline: inset 0 0 0 1px var(--border);
--shadow-sm: 0 1px 0 rgba(0,0,0,0.30);
--shadow-md: 0 1px 0 rgba(0,0,0,0.30),
0 6px 18px -8px rgba(0,0,0,0.45);
--shadow-lg: 0 1px 0 rgba(0,0,0,0.30),
0 14px 36px -14px rgba(0,0,0,0.55),
0 2px 6px -2px rgba(0,0,0,0.35);
--shadow-pop: var(--shadow-lg);
--bg: var(--surface);
--bg2: var(--surface-2);
--bg3: var(--surface-3);
--brd: var(--border);
--brd-subtle: var(--border);
--ink: var(--text);
--mute: var(--text-mute);
--detail-boundary: var(--accent-soft, var(--accent));
--inputBg: var(--surface-3);
--workspace-bg: var(--surface);
--sheet-bg: var(--paper);
--sheet-border: #5E5746;
--sheet-shadow: rgba(0, 0, 0, 0.55);
--grid-major: rgba(42,36,31,0.18);
--grid-minor: rgba(42,36,31,0.08);
--entity-color: #2A241F;
--epoxy-color: #7a7a7a;
--cut-color: oklch(0.65 0.17 27);
--hid-color: rgba(42,36,31,0.45);
/* V25-c — match warm-light: low-chroma warm-friendly view accents. */
--section-a-accent: oklch(0.55 0.04 210);
--plan-b-accent: oklch(0.60 0.05 75);
--cl-color: oklch(0.65 0.17 27 / 0.55);
--proj-line: rgba(42,36,31,0.18);
--crosshair-color: rgba(239,231,213,0.20);
--crosshair-text: rgba(239,231,213,0.62);
}
/* CLASSIC B&W — V21 alternate. White sheet, black ink, grey UI chrome. */
body.theme-classic {
/* Semantic V21 tokens */
--surface: #FAFAFA;
--surface-2: #FFFFFF;
--surface-3: #F2F2F2;
--border: #E0E0E0;
--border-2: #CCCCCC;
--text: #1A1A1A;
--text-mute: #666666;
--text-subtle: #9A9A9A;
--accent: #2A6FC0;
--accent-bg: rgba(42,111,192,0.10);
--accent-brd: rgba(42,111,192,0.40);
--warn: #D97706;
--danger: #C83232;
--success: #16A34A;
--focus-ring: rgba(42,111,192,0.35);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 0 1px rgba(0,0,0,0.08);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.15);
/* Legacy V20 token aliases — so existing CSS rules keep working */
--bg: var(--surface);
--bg2: var(--surface-2);
--bg3: var(--surface-3);
--brd: var(--border);
--brd-subtle: var(--border);
--ink: var(--text);
--mute: var(--text-mute);
--detail-boundary: var(--accent-soft, var(--accent));
--inputBg: var(--surface-2);
--hover-bg: rgba(0,0,0,0.04);
--active-bg: var(--accent-bg);
--active-brd: var(--accent-brd);
--scrollbar: rgba(0,0,0,0.15);
--selected-color: var(--accent);
--notch-glow: #D9852A; /* GLT notch glow (amber ≠ blue selection) */
/* Canvas engine tokens (drive drawing output) */
--workspace-bg: #D6D6D6;
--sheet-bg: #FFFFFF;
--sheet-border: #999999;
--sheet-shadow: rgba(0, 0, 0, 0.15);
--grid-major: rgba(0,0,0,0.10); --grid-minor: rgba(0,0,0,0.04);
--entity-color: #000000;
--epoxy-color: #8090a0;
--cut-color: #C83232; --hid-color: rgba(0,0,0,0.30);
--section-a-accent: #008080; --plan-b-accent: #B8860B;
--cl-color: rgba(200,0,0,0.45);
--proj-line: rgba(0,0,0,0.12);
--crosshair-color: rgba(0,0,0,0.15);
--crosshair-text: rgba(0,0,0,0.5);
}
/* DARK — neutral charcoal IDE look. Sheet stays off-white (paper). */
body.theme-dark {
--surface: #1A1D22;
--surface-2: #22262D;
--surface-3: #2A2F37;
--border: #2E3640;
--border-2: #3E4650;
--text: #EAEAEA;
--text-mute: #9AA0A8;
--text-subtle: #6A7079;
--accent: #4A9EFF;
--accent-bg: rgba(74,158,255,0.15);
--accent-brd: rgba(74,158,255,0.50);
--warn: #F59E0B;
--danger: #F87171;
--success: #4ADE80;
--focus-ring: rgba(74,158,255,0.45);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.20);
--shadow-md: 0 4px 12px rgba(0,0,0,0.35);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
/* Legacy aliases */
--bg: var(--surface);
--bg2: var(--surface-2);
--bg3: var(--surface-3);
--brd: var(--border);
--brd-subtle: var(--border);
--ink: var(--text);
--mute: var(--text-mute);
--detail-boundary: var(--accent-soft, var(--accent));
--inputBg: var(--surface-3);
--hover-bg: rgba(255,255,255,0.06);
--active-bg: var(--accent-bg);
--active-brd: var(--accent-brd);
--scrollbar: rgba(255,255,255,0.15);
--selected-color: var(--accent);
--notch-glow: #D9852A; /* GLT notch glow (amber ≠ blue selection); sheet is off-white */
/* Canvas engine — workspace dark, sheet off-white (paper), ink dark on paper */
--workspace-bg: #0F1115;
--sheet-bg: #ECEBE6;
--sheet-border: #2E3640;
--sheet-shadow: rgba(0, 0, 0, 0.55);
--grid-major: rgba(0,0,0,0.10); --grid-minor: rgba(0,0,0,0.04);
--entity-color: #1A1A1A;
--epoxy-color: #606060;
--cut-color: #C83232; --hid-color: rgba(0,0,0,0.35);
--section-a-accent: #008080; --plan-b-accent: #8B6508;
--cl-color: rgba(200,0,0,0.50);
--proj-line: rgba(0,0,0,0.15);
--crosshair-color: rgba(255,255,255,0.18);
--crosshair-text: rgba(255,255,255,0.6);
}
/* BT — Bligh Tanner brand red. Retained from V20 default but opt-in. */
body.theme-bt {
--surface: #7B1818;
--surface-2: #5A1212;
--surface-3: #6B1515;
--border: #9A3030;
--border-2: #A84040;
--text: #FFFFFF;
--text-mute: #FFCCCC;
--text-subtle: #DD9999;
--accent: #4A9EFF;
--accent-bg: rgba(74,158,255,0.15);
--accent-brd: rgba(74,158,255,0.50);
--warn: #FBBF24;
--danger: #FCA5A5;
--success: #86EFAC;
--focus-ring: rgba(74,158,255,0.45);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
--shadow-md: 0 4px 12px rgba(0,0,0,0.35);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
/* Legacy aliases */
--bg: var(--surface);
--bg2: var(--surface-2);
--bg3: var(--surface-3);
--brd: var(--border);
--brd-subtle: #8A2525;
--ink: var(--text);
--mute: var(--text-mute);
--detail-boundary: var(--accent-soft, var(--accent));
--inputBg: var(--surface-3);
--hover-bg: rgba(255,255,255,0.08);
--active-bg: var(--accent-bg);
--active-brd: var(--accent-brd);
--scrollbar: rgba(255,255,255,0.15);
--selected-color: var(--accent);
--notch-glow: #F2B05A; /* GLT notch glow — light amber, pops on the dark-red sheet */
/* Canvas engine — V20 brand palette */
--workspace-bg: #4A0E0E;
--sheet-bg: #5A1212;
--sheet-border: #9A3030;
--sheet-shadow: rgba(0, 0, 0, 0.55);
--grid-major: rgba(255,255,255,0.06); --grid-minor: rgba(255,255,255,0.025);
--entity-color: #FFFFFF;
--epoxy-color: #909090;
--cut-color: #FF6B6B; --hid-color: rgba(255,255,255,0.30);
--section-a-accent: #4ECDC4; --plan-b-accent: #FFE66D;
--cl-color: rgba(255,120,120,0.4);
--proj-line: rgba(255,255,255,0.10);
--crosshair-color: rgba(255,255,255,0.2);
--crosshair-text: rgba(255,255,255,0.6);
}
body {
/* V25 — Plex Sans is the UI face. Existing rules inherit unless they
set font-family explicitly; legacy "system-ui" inline styles still
resolve fine, they just won't be Plex until each region is refit. */
font-family: var(--font-sans);
font-size: var(--fs-md);
background: var(--bg); color: var(--ink);
height: 100vh; display: flex; flex-direction: column; overflow: hidden;
font-feature-settings: "ss01", "cv05", "cv11";
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* V25 — Plex Mono for number fields and any opt-in .mono target.
`tnum` keeps tabular figures aligned in coord readouts. */
input[type="number"], .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
/* V25 — Plex Serif helper. Used sparingly: brand wordmark, modal H1,
view labels, sheet number. Italic variant matches the Workshop-ledger
title-block treatment. */
.v25-serif { font-family: var(--font-serif); }
.v25-serif-italic{ font-family: var(--font-serif); font-style: italic; }
/* ========== V21 DESIGN-SYSTEM CHROME PRIMITIVES ========== */
/* All shell chrome reads from the V21 semantic tokens. Written once here
and reused by the top bar, sheet tabs, mode switcher, palette tiles,
inspector panel, status bar, dropdowns, chord overlay, etc. */
/* ---- Icons (V21.11 professional stroke language) ---- */
/* Primary stroke 1.25px on a 20×20 viewBox. Per-element stroke-width
attributes override for secondary detail (0.9) or accent (1.5). */
.icon { width: 20px; height: 20px; display: inline-block; flex-shrink: 0;
fill: none; stroke: currentColor; stroke-width: 1.25;
stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 14px; height: 14px; stroke-width: 1.4; }
.icon-lg { width: 28px; height: 28px; stroke-width: 1.25; }
.icon-xl { width: 36px; height: 36px; stroke-width: 1.1; }
.icon-fill { fill: currentColor; stroke: none; }
/* ---- Top bar (V25 — drafting bench) ---- */
.top-bar {
display: flex; align-items: stretch;
height: var(--bar-h); flex-shrink: 0;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
padding: 0 12px;
gap: 12px;
user-select: none;
}
/* Brand block: serif "SD" mark · vertical divider · name + version stack.
Existing classes kept (.top-bar__brand, .logo-mark) so JS hooks survive;
new descendants .brand__div / .brand__name / .brand__ver are additive. */
.top-bar__brand {
display: flex; align-items: center; gap: 10px;
padding: 0 12px 0 2px;
color: var(--text); white-space: nowrap;
border-right: 1px solid var(--border);
margin-right: 0;
}
.top-bar__brand .logo-mark {
width: auto; height: auto; padding: 0;
background: transparent; color: var(--text);
font-family: var(--font-serif); font-weight: 600;
font-size: 18px; letter-spacing: var(--tracking-tight);
border-radius: 0;
}
.top-bar__brand .brand__div { width: 1px; height: 24px; background: var(--border); }
.top-bar__brand .brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.top-bar__brand .brand__name {
font-size: var(--fs-sm); font-weight: 500;
letter-spacing: var(--tracking-tight);
color: var(--text);
}
.top-bar__brand .brand__ver {
font-family: var(--font-mono); font-size: 9px;
color: var(--text-subtle); letter-spacing: var(--tracking-wide);
text-transform: uppercase; line-height: 1.2; margin-top: 2px;
}
.top-bar__spacer { flex: 1; }
.top-bar__actions { display: flex; align-items: center; gap: 4px; }
/* ---- Sheet tabs (V25 — warmed up, coral lid on active) ----
Chrome-style multi-tab strip kept; restyled so the active tab reads
as the doc-chip the design proposes (paper background, hairline
border, coral underline) while preserving the multi-sheet workflow. */
.sheet-tabs {
display: flex; align-items: flex-end;
gap: 2px; min-width: 0; overflow-x: auto;
padding-top: 8px;
}
.sheet-tabs::-webkit-scrollbar { height: 4px; }
.sheet-tabs::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
.sheet-tab {
display: flex; align-items: center; gap: 10px;
height: 30px; padding: 0 12px;
background: var(--surface-3);
border: 1px solid var(--border);
border-bottom: none;
border-top-left-radius: var(--r-2); border-top-right-radius: var(--r-2);
font-size: var(--fs-sm); color: var(--text-mute);
white-space: nowrap; max-width: 220px;
cursor: pointer; position: relative;
transition: background var(--t-fast), color var(--t-fast);
}
.sheet-tab:hover { background: var(--surface-2); color: var(--text); }
.sheet-tab.active {
background: var(--paper, var(--surface-2));
color: var(--text);
border-color: var(--border);
z-index: 1;
}
/* Active-tab "lid" — covers the bottom border, then a coral underline above it */
.sheet-tab.active::after {
content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px;
height: 2px; background: var(--paper, var(--surface-2));
}
/* V25-c — bumped from 2px to 3px and full-width so the active-tab lid
reads cleanly across the tab top (was almost invisible at 2px inset). */
.sheet-tab.active::before {
content: ""; position: absolute; left: 0; right: 0; top: 0;
height: 3px; background: var(--accent);
border-radius: var(--r-1) var(--r-1) 0 0;
}
.sheet-tab .sheet-tab__title {
overflow: hidden; text-overflow: ellipsis; max-width: 130px;
letter-spacing: var(--tracking-tight);
}
.sheet-tab .sheet-tab__dno {
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
color: var(--text-subtle); letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.sheet-tab.active .sheet-tab__dno { color: var(--accent); }
.sheet-tab .sheet-tab__close {
width: 16px; height: 16px; display: grid; place-items: center;
border-radius: var(--r-1); color: var(--text-subtle); font-size: 11px;
opacity: 0; transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.sheet-tab:hover .sheet-tab__close,
.sheet-tab.active .sheet-tab__close { opacity: 1; }
.sheet-tab__close:hover { background: var(--danger); color: var(--accent-ink, #fff); }
.sheet-tab__add {
display: grid; place-items: center; width: 28px; height: 30px;
background: transparent; border: 1px solid transparent; border-bottom: none;
border-top-left-radius: var(--r-2); border-top-right-radius: var(--r-2);
color: var(--text-mute); cursor: pointer; font-size: 16px; line-height: 1;
align-self: flex-end;
}
.sheet-tab__add:hover { background: var(--hover-bg); color: var(--text); }
/* ---- File tabs (multi-file-workspace) ----
Browser-style tabs in the top bar: one per OPEN FILE (a project / page set).
Distinct from .sheet-tabs (pages live in the left rail now). Mirrors the
.sheet-tab visual language so it themes across all five palettes. */
.file-tabs {
display: flex; align-items: center; gap: 2px;
min-width: 0; overflow-x: auto; flex: 0 1 auto;
margin-left: 10px;
}
.file-tabs::-webkit-scrollbar { height: 4px; }
.file-tabs::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
.file-tab {
display: flex; align-items: center; gap: 8px;
height: 28px; padding: 0 10px;
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: var(--r-2);
font-size: var(--fs-sm); color: var(--text-mute);
white-space: nowrap; max-width: 200px;
cursor: pointer; position: relative;
transition: background var(--t-fast), color var(--t-fast);
}
.file-tab:hover { background: var(--surface-2); color: var(--text); }
.file-tab.active {
background: var(--paper, var(--surface-2));
color: var(--text);
border-color: var(--accent);
z-index: 1;
}
.file-tab__name {
overflow: hidden; text-overflow: ellipsis; max-width: 150px;
letter-spacing: var(--tracking-tight);
}
/* unsaved-to-disk indicator (dot before the name) */
.file-tab__dot {
width: 6px; height: 6px; flex: 0 0 auto;
border-radius: 50%; background: var(--accent);
}
.file-tab__close {
width: 16px; height: 16px; display: grid; place-items: center;
border-radius: var(--r-1); color: var(--text-subtle); font-size: 12px; line-height: 1;
opacity: 0; transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.file-tab:hover .file-tab__close,
.file-tab.active .file-tab__close { opacity: 1; }
.file-tab__close:hover { background: var(--danger); color: var(--accent-ink, #fff); }
.file-tab__add {
display: grid; place-items: center; width: 26px; height: 28px; flex: 0 0 auto;
background: transparent; border: 1px solid transparent;
border-radius: var(--r-2);
color: var(--text-mute); cursor: pointer; font-size: 17px; line-height: 1;
margin-left: 2px;
}
.file-tab__add:hover { background: var(--hover-bg); color: var(--text); }
/* ---- New-file landing overlay (multi-file-workspace) ----
Centred over the drawing area when the active file has zero pages. */
.file-landing {
position: absolute; inset: 0; z-index: 40;
display: grid; place-items: center;
background: var(--surface, #ece7df);
}
.file-landing__card {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 40px 56px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-3, 10px);
box-shadow: var(--shadow-2, 0 8px 30px rgba(0,0,0,0.10));
text-align: center;
}
.file-landing__title {
font-size: var(--fs-lg, 17px); font-weight: 600; color: var(--text);
letter-spacing: var(--tracking-tight);
}
.file-landing__sub {
font-size: var(--fs-sm); color: var(--text-mute); margin-bottom: 14px;
}
.file-landing__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.file-landing__btn {
padding: 9px 16px; border-radius: var(--r-2);
border: 1px solid var(--border); background: var(--surface-3);
color: var(--text); font-size: var(--fs-sm); cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
.file-landing__btn:hover { background: var(--hover-bg); border-color: var(--accent); }
.file-landing__btn--primary {
background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent);
}
.file-landing__btn--primary:hover { filter: brightness(1.05); background: var(--accent); }
.file-landing__btn--soon { opacity: 0.55; }
/* ---- Mode switcher (V25 — segmented, mono caps) ----
Holds the Model / Draw / Annotate tabs. Restyled to match the design's
.seg pill: smaller, mono-caps labels, paper-on-active. */
.mode-switcher {
display: inline-flex; align-self: center;
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: var(--r-2); padding: 2px;
height: 28px;
}
.mode-seg {
display: flex; align-items: center; gap: 6px;
padding: 0 12px; border-radius: var(--r-1); cursor: pointer;
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
color: var(--text-mute);
border: none; background: transparent;
transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.mode-seg:hover { color: var(--text); }
.mode-seg.active {
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
}
.mode-seg .icon { width: 14px; height: 14px; }
/* ---- V25 Sheet-mode (3D | 2D) switcher — sits left of the .mode-switcher.
Same .seg treatment, but active state uses the coral fill so the
global drawing-mode toggle reads as a "primary" choice. */
/* .tb-style-switcher (title-block style: Sketch | Bottom | Right) reuses
the exact sheet-mode treatment so it reads as a sibling of the 2D/3D
toggle it sits beside. */
.sheet-mode-switcher, .tb-style-switcher {
display: inline-flex; align-self: center;
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: var(--r-2); padding: 2px;
height: 28px;
margin-right: 4px;
}
.sheet-mode-seg, .tb-style-seg {
display: flex; align-items: center; justify-content: center;
min-width: 36px; padding: 0 10px; border-radius: var(--r-1); cursor: pointer;
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
color: var(--text-mute);
border: none; background: transparent;
transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.sheet-mode-seg:hover, .tb-style-seg:hover { color: var(--text); }
.sheet-mode-seg.active, .tb-style-seg.active {
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--accent-brd);
}
/* When the active sheet is in 2D mode, hide the Model/Draw/Annotate tabs
since the 2D palette has its own structure. */
body.sheet-2d #modeSwitcher { display: none; }
body.sheet-2d .sheet-mode-seg.active {
/* Subtle "calm" feedback when 2D is the active mode (no chrome alarm) */
box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--success);
}
/* title-block-styles — sub-headers inside the Edit Title Block dialog. */
.tb-dlg-group {
font: 600 11px var(--font-mono, monospace);
letter-spacing: var(--tracking-wide, .06em); text-transform: uppercase;
color: var(--text-mute); margin: 6px 0 1px;
border-bottom: 1px solid var(--border); padding-bottom: 3px;
}
/* V25 — 2D-mode palette extras (compact tile rows for materials etc.) */
.palette-group__hint {
font-size: 10px; color: var(--text-mute);
padding: 0 6px 4px; line-height: 1.3;
}
/* ---- Top-bar tool cluster (V25 — Snap / Ortho / Grid as icon toggles).
Same hover/active treatment as .icon-btn but presented as a tighter
contiguous cluster with .tools wrapper. Existing IDs (#sbSnap,
#sbOrtho, #sbGrid) preserved on the elements themselves so legacy
click handlers still fire. */
.tools { display: inline-flex; align-items: center; gap: 2px; }
.tool {
width: 28px; height: 28px;
display: grid; place-items: center;
background: transparent; border: 1px solid transparent;
border-radius: var(--r-1);
color: var(--text-mute); cursor: pointer;
padding: 0;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tool:hover { background: var(--hover-bg); color: var(--text); }
.tool.active {
background: var(--accent-bg);
border-color: var(--accent-brd);
color: var(--accent-press, var(--accent));
}
.tool .icon { width: 16px; height: 16px; }
.tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* ---- Icon-button (V25 — quieter 28×28, hairline radius) ----
Used in top-bar actions and inside dialogs. Borders only on active /
hover states; no shadow. */
.icon-btn {
display: inline-grid; place-items: center;
width: 28px; height: 28px;
background: transparent; border: 1px solid transparent;
border-radius: var(--r-1); color: var(--text-mute);
cursor: pointer; padding: 0;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--hover-bg); color: var(--text); border-color: transparent; }
.icon-btn.active {
background: var(--accent-bg); color: var(--accent-press, var(--accent));
border-color: var(--accent-brd);
}
.icon-btn .icon { width: 16px; height: 16px; }
/* ---- Trace paper overlay ----
The TRACE button's active state is canary (hardcoded, not a theme
token — canary is canary in every theme), matching the yellow paper
it lays down. The #traceBar options panel mirrors the inline
#v25OptionsBar styling (built in js/72) but lives in CSS so it can
be themed and so its range slider picks up the accent. */
.trace-btn.active { background: #f6e27e; border-color: #e6cb56; color: #6b5712; }
.trace-btn.active:hover { background: #f6e27e; border-color: #e6cb56; color: #6b5712; }
#traceBar {
position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
background: var(--surface-2); color: var(--text);
border: 1px solid var(--border); border-radius: 8px;
padding: 6px 10px; font: 12px var(--font-sans, system-ui);
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
z-index: 51; box-shadow: var(--shadow-pop, 0 2px 8px rgba(0,0,0,.1));
max-width: 90%;
}
#traceBar input[type=range] { accent-color: var(--accent); cursor: pointer; }
#traceBar input[type=range]:focus-visible {
outline: 2px solid var(--accent-brd); outline-offset: 2px; border-radius: 4px;
}
/* ---- V25 orientation row ----
Icon buttons in the 2D-mode quick-options bar, one per standard
orientation of the active member type. Replaces the Aspect + PFC
Open-face dropdowns. Resting state sits flat on the bar (--surface-2);
active reuses the accent treatment shared by .icon-btn / .tile. The
glyph tints via currentColor (.icon stroke). */
.v25-orient-btn {
display: inline-grid; place-items: center;
width: 30px; height: 26px;
background: transparent; border: 1px solid var(--border);
border-radius: var(--r-1); color: var(--text-mute);
cursor: pointer; padding: 0;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.v25-orient-btn:hover { background: var(--surface-3); color: var(--text); }
.v25-orient-btn.active {
background: var(--accent-bg); color: var(--accent-press, var(--accent));
border-color: var(--accent-brd);
}
.v25-orient-btn .icon { width: 18px; height: 18px; }
/* ---- V25 horizontal menu strip (File / Edit / View) ---- */
.menubar { display: inline-flex; align-items: center; gap: 0; }
.menubar__item {
background: transparent; border: 0;
padding: 6px 9px;
font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400;
color: var(--text-mute);
border-radius: var(--r-1);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast);
letter-spacing: var(--tracking-tight);
}
.menubar__item:hover { background: var(--hover-bg); color: var(--text); }
.menubar__item.open { background: var(--hover-bg-2, var(--hover-bg)); color: var(--text); }
@media (max-width: 1280px) {
.menubar__item { padding: 6px 6px; font-size: var(--fs-xs); }
}
@media (max-width: 1100px) {
.menubar { display: none; }
}
/* ---- Dropdown menu (anchored under menubar items / context menus) ---- */
.menu {
position: absolute; z-index: 1500;
min-width: 200px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-pop, var(--shadow-md));
padding: 6px;
display: none;
}
.menu.open { display: block; }
.menu-item {
display: flex; align-items: center; gap: 10px;
padding: 6px 10px; border-radius: var(--r-1);
font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text);
cursor: pointer; white-space: nowrap;
letter-spacing: var(--tracking-tight);
}
.menu-item:hover { background: var(--accent-bg); color: var(--accent-press, var(--accent)); }
.menu-item .icon { width: 14px; height: 14px; opacity: 0.8; }
.menu-item .shortcut {
margin-left: auto; font-size: var(--fs-2xs);
color: var(--text-subtle);
font-family: var(--font-mono); letter-spacing: var(--tracking-wide);
}
.menu-sep { height: 1px; background: var(--border); margin: 4px -2px; }
/* V25-layout-overhaul — disabled placeholder items.
Visually faded; the menubar click handler short-circuits on them so
the menu stays open and nothing fires. */
.menu-item.disabled {
opacity: 0.42;
cursor: default;
}
.menu-item.disabled:hover {
background: transparent;
color: var(--text);
}
.menu-item.disabled .shortcut {
font-style: italic;
}
.menu-heading {
padding: 6px 10px 2px;
font-family: var(--font-mono); font-size: 9px;
color: var(--text-subtle); text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
/* ---- Right palette shell (V25 — design's drafting-pegboard) ----
Lives on the right edge of the workspace. Surface-2 panel, hairline
left border, vertical stack of groups divided by hairlines. Tiles
sit on paper-cream with a glyph + mono shortcut hint. */
.palette {
flex-shrink: 0;
background: var(--surface-2);
border-left: 1px solid var(--border);
display: flex; flex-direction: column;
overflow-y: auto; user-select: none;
min-height: 0;
}
.palette::-webkit-scrollbar { width: 6px; }
.palette::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.palette-group { padding: 8px 10px; }
.palette-group + .palette-group { border-top: 1px solid var(--border); margin-top: 0; padding-top: 8px; }
.palette-group__title {
font-family: var(--font-mono); font-size: 9px; font-weight: 500;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--text-subtle);
padding: 0 2px 6px;
}
.palette-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
/* ---- Tile (V25 — paper-on-panel) ----
Two-column grid in the 172 px palette gives tiles ~70 px wide. Glyph
(~28 px), label below (sans), optional shortcut hint (top-right mono).
Active = accent-bg wash + accent-brd hairline + accent-press text.
Hover = quiet border-color shift, no shadow. */
.tile {
position: relative;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 2px;
min-height: 56px; padding: 6px 6px 5px;
background: var(--paper, var(--surface));
border: 1px solid var(--border);
border-radius: var(--r-1);
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast),
color var(--t-fast), transform 0.04s;
/* V25-d — --paper-ink (warm graphite) instead of --text, so the
tile glyph stays dark on cream paper in BOTH light and dark
modes (--text becomes cream in dark, which would vanish here). */
color: var(--paper-ink);
overflow: hidden;
}
.tile:hover {
border-color: var(--border-2);
background: var(--paper, var(--surface));
box-shadow: none;
}
.tile:active { transform: scale(0.97); }
.tile.active {
background: var(--accent-bg);
border-color: var(--accent-brd);
color: var(--accent-press, var(--accent));
box-shadow: none;
}
.tile__icon {
flex: 1; display: grid; place-items: center; width: 100%;
color: inherit; min-height: 0;
}
.tile.active .tile__icon { color: var(--accent-press, var(--accent)); }
/* V25-c — glyph bumped from 24 → 28 to match the design's drafting
pegboard scale; gives the icon room to breathe in the 56-px tile. */
.tile__icon .icon { width: 28px; height: 28px; stroke-width: 1.25; }
/* text-preview icons (Detail title / Section title) render a literal
miniature of what the tool draws, so they need a wider, shorter box. */
.tile__icon .icon.icon-tpv { width: 50px; height: 28px; stroke-width: 1; }
.tile.has-sub { min-height: 64px; }
.tile__label {
/* V25-c — flex container for {text + optional chev}. Text-overflow
lives on the INNER text span (see the > span:first-child rule below)
because text-overflow:ellipsis only fires on the element with the
overflowing inline content. The previous version put it on this
flex container, which then clipped centered text on BOTH sides.
V25-d — --paper-ink so labels stay dark on cream paper in dark mode. */
font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
color: var(--paper-ink);
line-height: 1;
max-width: 100%; min-width: 0;
display: flex; align-items: center; gap: 2px; justify-content: center;
padding-top: 2px;
letter-spacing: -0.01em;
}
/* The text span (first child) — shrinks with ellipsis. */
.tile__label > span:first-child {
flex: 0 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-align: center;
}
/* The picker chevron (when present) — never shrink. */
.tile__label > .tile__chev { flex: 0 0 auto; }
.tile.active .tile__label { color: var(--accent-press, var(--accent)); font-weight: 600; }
/* Optional mono shortcut hint pinned to top-right of a tile (renderer can
opt in by setting a .tile__hint child). Inert if absent. */
.tile__hint {
position: absolute; top: 4px; right: 5px;
font-family: var(--font-mono); font-size: 9px;
color: var(--text-faint, var(--text-subtle));
letter-spacing: var(--tracking-wide);
pointer-events: none;
}
.tile__chev {
font-size: 7px; opacity: 0.55;
padding: 1px 2px; margin-right: -2px;
border-radius: 2px; cursor: pointer;
}
.tile__chev:hover { background: var(--hover-bg-2, rgba(0,0,0,0.10)); opacity: 1; }
.tile.placeholder { opacity: 0.38; cursor: help; }
.tile.placeholder:hover {
opacity: 0.55; border-color: var(--border); background: var(--surface-3);
box-shadow: none;
}
.tile__soon {
position: absolute; bottom: 1px; right: 1px;
font-size: 7px; font-weight: 700; letter-spacing: 0.03em;
padding: 0 3px; border-radius: 2px; line-height: 1.3;
background: var(--text-mute); color: var(--surface-2);
}
/* ---- Favourites strip (V25 — quiet pinned-tools row) ----
Sits above the regular palette groups. 4-column grid of small tiles
(paper-cream, hairline border) with a coral corner clip when pinned. */
.favourites {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 4px; padding: 4px 0 0;
}
.fav-tile {
position: relative;
display: grid; place-items: center;
height: 32px; border-radius: var(--r-1);
background: var(--paper, var(--surface));
border: 1px solid var(--border);
cursor: pointer;
/* V25-d — paper-ink so favourite glyphs stay readable in dark mode. */
color: var(--paper-ink);
transition: background var(--t-fast), border-color var(--t-fast);
}
.fav-tile:hover { background: var(--accent-bg); border-color: var(--accent-brd); }
.fav-tile .icon { width: 16px; height: 16px; }
.fav-tile__label { display: none; }
.fav-tile.pinned::after {
content: ""; position: absolute; top: 1px; right: 1px;
width: 0; height: 0; border-style: solid;
border-width: 0 4px 4px 0;
border-color: transparent var(--accent) transparent transparent;
}
/* ---- Inspector panel (V21.10 compact) ---- */
.inspector {
flex-shrink: 0; width: 260px;
background: var(--surface);
border-left: 1px solid var(--border);
display: flex; flex-direction: column;
overflow-y: auto; user-select: none;
}
.inspector::-webkit-scrollbar { width: 6px; }
.inspector::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.insp-section { padding: 7px 10px; }
.insp-section + .insp-section { border-top: 1px solid var(--border); }
.insp-title {
font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--text-subtle);
margin-bottom: 5px;
}
.insp-header {
padding: 9px 10px 7px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.insp-header .insp-eyebrow {
font-size: 9px; color: var(--text-subtle);
text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1px;
}
.insp-header .insp-h1 {
font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em;
}
.insp-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 5px; }
.insp-field > label {
font-size: 9.5px; color: var(--text-mute); font-weight: 500;
}
.insp-field > input, .insp-field > select, .insp-field > textarea {
width: 100%; min-width: 0;
padding: 3px 6px; font-size: 11.5px;
background: var(--surface-2); color: var(--text);
border: 1px solid var(--border); border-radius: 4px;
height: 24px;
}
.insp-field > textarea { height: auto; min-height: 44px; resize: vertical; }
.insp-field > input:focus, .insp-field > select:focus, .insp-field > textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring);
}
/* Read-only property fields (e.g. v2 plate material / geometry) read as
locked, not editable — muted fill + no focus ring. */
.insp-field > input[readonly] {
background: var(--surface-3); color: var(--text-mute); cursor: default;
}
.insp-field > input[readonly]:focus {
border-color: var(--border); box-shadow: none;
}
.insp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.insp-row.triple { grid-template-columns: 1.6fr 0.8fr 1fr; }
.insp-row .insp-field { margin-bottom: 0; }
.insp-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; font-size: 11px;
background: var(--surface-2); color: var(--text);
border: 1px solid var(--border); border-radius: 5px;
cursor: pointer; font-weight: 500;
}
.insp-btn:hover { background: var(--accent-bg); border-color: var(--accent-brd); color: var(--accent); }
.insp-btn.danger:hover { background: var(--danger); border-color: var(--danger); color: var(--accent-ink, #fff); }
.insp-btn.primary {
background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent-press, var(--accent));
}
.insp-btn.primary:hover { background: var(--accent-hover, var(--accent)); }
/* ---- Status bar (V25 — mono masthead) ----
28px tall, surface-2, hairline top border. Mono caps for the small
labels, tabular-figure mono for values. Selects in the bar drop the
boxy chrome and read as inline data. The right-side .sb-flex still
holds the count chips and tool indicator (preserved). */
.status-bar {
display: flex; align-items: center;
height: var(--status-h); flex-shrink: 0;
background: var(--surface-2);
border-top: 1px solid var(--border);
padding: 0 14px;
gap: 18px;
font-size: var(--fs-xs); color: var(--text-mute);
font-family: var(--font-mono);
user-select: none;
}
.status-bar .sb-group { display: flex; align-items: center; gap: 8px; }
.status-bar .sb-divider { width: 1px; height: 12px; background: var(--border); }
.status-bar .sb-coord { font-family: var(--font-mono); font-size: var(--fs-xs); }
.status-bar .sb-coord span {
margin-right: 2px; color: var(--text-subtle);
letter-spacing: var(--tracking-caps);
}
.status-bar .sb-coord span[id] { color: var(--text); margin-right: 6px; letter-spacing: 0; }
/* Inline selects (Scale / Grid / Nudge) — read as data, not as chrome. */
.status-bar select {
background: transparent; color: var(--text);
border: 1px solid var(--border);
border-radius: var(--r-1); height: 20px;
font: 500 var(--fs-xs)/1 var(--font-mono);
padding: 0 4px;
letter-spacing: var(--tracking-wide);
}
.status-bar select:hover { border-color: var(--border-2); }
.status-bar label > span {
color: var(--text-subtle); font-size: 9px;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.status-bar .sb-flex { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Page navigator (‹ N / total ›) — multi-file-workspace. Click arrows to step
pages; mirrors Shift+scroll. Sits left of the right-aligned status chips. */
.status-bar .sb-pagenav { gap: 3px; }
.sb-pagenav__btn {
display: grid; place-items: center;
width: 18px; height: 18px; padding: 0;
border: 1px solid var(--border); border-radius: var(--r-1);
background: var(--surface-3); color: var(--text);
font-size: 13px; line-height: 1; cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sb-pagenav__btn:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--accent); color: var(--accent); }
.sb-pagenav__btn:disabled { opacity: 0.35; cursor: default; }
.sb-pagenav__label {
min-width: 46px; text-align: center;
font-family: var(--font-mono); font-size: 9px; font-weight: 600;
color: var(--text); letter-spacing: var(--tracking-wide);
}
/* Status chips (statusTool, count chips, statusScale) — still semantically
chips but now as quiet mono pills aligned to the design vocabulary. */
.status-bar .sb-chip {
padding: 2px 8px; border-radius: var(--r-pill);
font-family: var(--font-mono); font-size: 9px; font-weight: 500;
background: var(--surface-3); color: var(--text);
letter-spacing: var(--tracking-wide); text-transform: uppercase;
border: 1px solid var(--border);
}
/* Saved-state group — green dot + mono timestamp. .sb-group--ok class
is used by the design's status-bar variant; we adopt it here as an
additive class for the new save-indicator group. */
.status-bar .sb-group--ok .sb-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--success);
display: inline-block;
}
.status-bar .sb-group--ok .sb-val { color: var(--success); }
/* ---- Size-picker dropdown ---- */
.picker {
position: absolute; z-index: 1600;
width: 280px; max-height: 360px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-md);
display: none; flex-direction: column;
overflow: hidden;
}
.picker.open { display: flex; }
.picker__search {
width: 100%; padding: 8px 10px;
background: var(--surface-2); color: var(--text);
border: none; border-bottom: 1px solid var(--border);
font-size: 12px; outline: none;
}
.picker__list { flex: 1; overflow-y: auto; padding: 4px 0; }
.picker__list::-webkit-scrollbar { width: 6px; }
.picker__list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.picker__series {
padding: 6px 12px 2px; font-size: 10px; font-weight: 600;
color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.08em;
}
.picker__item {
display: flex; align-items: center; gap: 8px;
padding: 6px 14px; font-size: 12px;
color: var(--text); cursor: pointer;
}
.picker__item:hover, .picker__item.focus { background: var(--accent-bg); color: var(--accent); }
.picker__item .star { color: var(--warn); font-size: 10px; margin-left: auto; }
/* "More sizes" expander — reveals the rarely-used small-size tail in place. */
.picker__more {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin: 4px 10px 6px; padding: 6px 10px;
font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
color: var(--accent); cursor: pointer;
border: 1px dashed var(--border-2); border-radius: 6px;
}
.picker__more:hover { background: var(--accent-bg); }
/* ---- Chord overlay (keyboard chord prompt) ---- */
.chord-overlay {
position: fixed; z-index: 1800;
top: 50%; left: 50%; transform: translate(-50%, -50%);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 12px 16px; min-width: 280px;
display: none; color: var(--text);
}
.chord-overlay.open { display: block; }
.chord-overlay h3 {
font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--text-subtle);
margin-bottom: 10px;
}
.chord-row {
display: flex; align-items: center; gap: 10px;
padding: 4px 2px; font-size: 12px;
}
.chord-row kbd {
display: inline-grid; place-items: center;
min-width: 20px; padding: 2px 6px;
background: var(--surface-3); border: 1px solid var(--border);
border-radius: 4px; font-size: 11px; font-weight: 700;
font-family: var(--font-mono);
}
.chord-row.soon { opacity: 0.5; }
.chord-overlay .chord-hint {
margin-top: 10px; padding-top: 8px;
border-top: 1px solid var(--border);
font-size: 10px; color: var(--text-subtle);
}
/* ---- Placeholder popover ---- */
.soon-popover {
position: absolute; z-index: 1700;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 8px; box-shadow: var(--shadow-md);
padding: 12px 14px; max-width: 260px;
display: none;
}
.soon-popover.open { display: block; }
.soon-popover h4 {
font-size: 12px; font-weight: 600; color: var(--text);
margin-bottom: 4px;
}
.soon-popover p {
font-size: 11px; color: var(--text-mute); line-height: 1.5;
}
.soon-popover .version-tag {
display: inline-block; margin-top: 8px;
padding: 2px 6px; border-radius: 3px;
background: var(--accent-bg); color: var(--accent);
font-size: 10px; font-weight: 600;
}
/* ========== TOOLBAR ========== */
.toolbar {
padding: 0 8px; background: var(--bg2);
border-bottom: 1px solid var(--brd);
display: flex; align-items: center; flex-shrink: 0; height: 36px;
gap: 2px; user-select: none;
}
.toolbar-title {
font-size: 11px; font-weight: 600; color: var(--mute);
padding: 0 8px 0 4px; white-space: nowrap; letter-spacing: -0.01em;
}
.toolbar-group { display: flex; gap: 1px; align-items: center; }
.tool-btn {
font-size: 10px; padding: 4px 7px; border: 1px solid transparent;
border-radius: 4px; background: transparent; color: var(--ink);
cursor: pointer; font-weight: 500; min-width: 26px; text-align: center;
transition: all 0.1s; line-height: 1.2;
}
.tool-btn:hover { background: var(--hover-bg); border-color: var(--brd-subtle); }
.tool-btn.active { background: var(--active-bg); border-color: var(--active-brd); color: var(--selected-color); }
.toolbar-sep { width: 1px; height: 16px; background: var(--brd); margin: 0 4px; flex-shrink: 0; }
.toolbar-label { font-size: 9px; color: var(--mute); margin-right: 2px; }
select, input[type="number"], input[type="text"] {
font-size: 10px; padding: 2px 4px; border: 1px solid var(--brd);
border-radius: 3px; background: var(--inputBg); color: var(--ink); min-width: 48px;
height: 22px;
}
select:focus, input:focus { outline: none; border-color: var(--selected-color); }
#themeBtn {
font-size: 9px; padding: 3px 8px; border: 1px solid var(--brd);
border-radius: 3px; background: transparent; color: var(--mute);
cursor: pointer; margin-left: auto; white-space: nowrap;
}
#themeBtn:hover { background: var(--hover-bg); color: var(--ink); }
/* ========== MAIN LAYOUT (V25 — rail | handle | canvas | palette) ==========
Per the V25 design, the tile palette moved from left-of-canvas to
right-of-canvas. HTML order changes correspondingly (palette is now
after #canvas-container). The right Inspector aside is still hidden;
its content is reparented into the rail's Settings tab on init.
Rail width is the CSS variable --bb-rail-w (drag handle resizes it). */
.main {
display: grid;
/* V25-layout-overhaul — palette column removed; tools live in the rail Draw tab. */
grid-template-columns: var(--bb-rail-w, 280px) 6px 1fr;
flex: 1; min-height: 0;
}
.main.bb-rail-collapsed { grid-template-columns: 0 6px 1fr; }
.main.bb-rail-collapsed .bb-rail { display: none; }
.main.inspector-collapsed { /* legacy class kept so existing toggles don't error */ }
/* Hide only the original right-side aside placement (direct child of .main).
After reparentInspectorIntoSettings() moves #inspectorRoot into the rail
Settings tab, it's no longer a direct child and therefore stays visible. */
.main > .inspector { display: none !important; }
/* V25-layout-overhaul — right palette hidden; #paletteRoot/#paletteGroups
remain in DOM (legacy renderers still call into them). */
.main .palette { display: none !important; }
/* V25-layout-overhaul — Draw rail tab uses a 4-column tile grid that
reuses the .palette-grid / .tile / .palette-group__title styles for
visual consistency with the legacy palette. Scrolls if it overflows. */
.bb-rail__panel.bb-draw { padding: 0; overflow-y: auto; }
.bb-rail__panel.bb-draw::-webkit-scrollbar { width: 6px; }
.bb-rail__panel.bb-draw::-webkit-scrollbar-thumb {
background: var(--border-2); border-radius: 3px;
}
.bb-rail__panel.bb-draw .palette-group { padding: 8px 10px; }
.bb-rail__panel.bb-draw .palette-group + .palette-group {
border-top: 1px solid var(--border); margin-top: 0; padding-top: 8px;
}
.bb-rail__panel.bb-draw .palette-grid {
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
/* ===== Toolbox refresh (slider-row rebuild) — three global sliders
(Density / Size / Text), collapsible families and pointer-drag reorder.
Tile sizing is calc()+clamp() off the scalar vars --bb-D / --bb-S / --bb-T
(set by JS on #bbDrawHost) plus a per-family --bb-m, so the sliders update
everything live with no re-render. Replaces the old fixed density-slider +
per-family JS sizing. ===== */
/* Host seeds the scalar vars and derives the density-driven spacing via a CSS
lerp (loose @ D=0 → tight @ D=1). JS overrides --bb-D/--bb-S/--bb-T inline. */
#bbDrawHost {
position: relative; /* anchor for the absolute drag dropbar */
--bb-S: 1; --bb-T: 1; --bb-D: .5;
--bb-gap: calc(5px + (2px - 5px ) * var(--bb-D, .5)); /* grid gap 5→2 */
--bb-tilepad: calc(7px + (3px - 7px ) * var(--bb-D, .5)); /* tile pad 7→3 */
--bb-fampad: calc(10px + (6px - 10px) * var(--bb-D, .5)); /* family pad 10→6 */
--bb-hdrpad: calc(6px + (2px - 6px ) * var(--bb-D, .5)); /* header pad 6→2 */
--bb-secmrg: calc(4px + (1px - 4px ) * var(--bb-D, .5)); /* section mgn 4→1 */
--bb-colx: calc(8px + (-8px - 8px ) * var(--bb-D, .5)); /* colw extra +8→-8 */
}
/* --- ADJUST drawer: a thin sticky header that reveals the 3 sliders --- */
.bb-adjust {
position: sticky; top: 0; z-index: 3;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
}
.bb-adjust__hdr {
display: flex; align-items: center; justify-content: center; gap: 5px;
width: 100%; padding: 3px 10px; cursor: pointer;
background: transparent; border: 0;
font-family: var(--font-mono); font-size: 8px; line-height: 1;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--text-subtle); user-select: none;
transition: color .15s ease;
}
.bb-adjust__hdr:hover { color: var(--text); }
.bb-adjust__chev { font-size: 7px; opacity: .65; transition: transform .2s ease; }
.bb-adjust.is-closed .bb-adjust__chev { transform: rotate(-90deg); } /* ▾ → ▸ when closed */
/* Body — same grid-rows 1fr↔0fr animation as a family body (no JS height read). */
.bb-adjust__body {
display: grid; grid-template-rows: 1fr;
transition: grid-template-rows .2s cubic-bezier(.4, 0, .2, 1);
}
.bb-adjust__inner { overflow: hidden; min-height: 0; }
.bb-adjust.is-closed .bb-adjust__body { grid-template-rows: 0fr; }
/* --- The 3-slider row (Density · Size · Text) — lives inside the ADJUST drawer --- */
.bb-draw__bar {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px;
padding: 2px 10px 7px;
}
.bb-sl { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }
.bb-sl__lbl {
font-family: var(--font-mono); font-size: 8px; line-height: 1;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--text-subtle); text-align: center; user-select: none;
}
/* Custom track groove + thumb (appearance:none, so accent-color can't apply — we
draw a visible --border-2 groove and an --accent thumb with a surface ring that
keeps it legible on every theme; no progress-fill needed for a display control). */
.bb-sl__rng {
-webkit-appearance: none; appearance: none;
width: 100%; min-width: 0; height: 14px; margin: 1px 0 0;
background: transparent; cursor: pointer;
}
.bb-sl__rng::-webkit-slider-runnable-track {
height: 3px; border-radius: 2px; background: var(--border-2);
}
.bb-sl__rng::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 11px; height: 11px; border-radius: 50%; margin-top: -4px;
background: var(--accent);
border: 2px solid var(--surface-2);
box-shadow: 0 0 0 1px var(--border-2);
}
.bb-sl__rng::-moz-range-track {
height: 3px; border-radius: 2px; background: var(--border-2);
}
.bb-sl__rng::-moz-range-thumb {
width: 11px; height: 11px; border-radius: 50%;
background: var(--accent); border: 2px solid var(--surface-2);
box-shadow: 0 0 0 1px var(--border-2);
}
.bb-sl__rng:active::-webkit-slider-thumb { cursor: grabbing; }
.bb-sl__rng:focus-visible { outline: none; }
.bb-sl__rng:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--accent); }
.bb-sl__rng:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--accent); }
/* --- Family block --- */
.bb-fam { position: relative; }
.bb-rail__panel.bb-draw .bb-fam { padding: var(--bb-fampad, 8px) 10px; --bb-m: 1; }
.bb-fam + .bb-fam { border-top: 1px solid var(--border); }
/* Derived per-tile sizing (scoped so it can never leak onto a .bb-fam elsewhere). */
.bb-rail__panel.bb-draw .bb-fam {
--bb-icon: clamp(12px, calc(24px * var(--bb-S, 1) * var(--bb-m, 1)), 54px);
--bb-lbl: clamp(8px, calc(9px * var(--bb-T, 1)), 13px);
--bb-th: clamp(30px, calc(var(--bb-icon) + var(--bb-lbl) * 1.08 * 2 + var(--bb-tilepad, 5px) * 2 + 6px), 88px);
--bb-colw: clamp(44px, calc(var(--bb-icon) + 30px + var(--bb-colx, 0px)), 120px);
}
/* --- Header: grip | checkbox | № | title | SIZE --- */
.bb-rail__panel.bb-draw .bb-fam__hdr {
display: flex; align-items: center; gap: 6px;
padding: 0 2px var(--bb-hdrpad, 6px);
user-select: none;
}
/* Grip = the ONLY drag origin. Pure-CSS dot grid (radial-gradient) — no font
glyph dependency, follows currentColor through every theme. */
.bb-fam__grip {
flex: 0 0 auto; position: relative; width: 8px; height: 12px; align-self: center;
cursor: grab; touch-action: none; color: var(--text-subtle);
background-image: radial-gradient(currentColor 1px, transparent 1.5px);
background-size: 4px 4px; background-position: 0 0;
}
/* Transparent hit-target overlay → a reliable ~24px-tall grab zone for trackpad/touch.
Biased LEFT (into the rail edge) so it never overlaps the adjacent checkbox. */
.bb-fam__grip::before { content: ""; position: absolute; inset: -6px -2px -6px -9px; }
.bb-fam__grip:hover { color: var(--text); }
.bb-fam__grip:active { cursor: grabbing; }
/* Collapse checkbox — small box, tick contrasts the accent fill on every theme. */
.bb-fam__chk {
flex: 0 0 auto; position: relative; width: 11px; height: 11px; padding: 0; cursor: pointer;
background: transparent; border: 1px solid var(--border-2); border-radius: 2px;
transition: background .15s ease, border-color .15s ease;
}
.bb-fam__chk::before { content: ""; position: absolute; inset: -6px -1px; } /* ≥24px hit-target */
/* Checked = soft, faded tint (not a loud solid-accent block) with a muted-accent
tick — reads clearly as "on" without feeling abrupt. Uses the per-theme accent
tint tokens, falling back gracefully on themes that define fewer of them. */
.bb-fam__chk[aria-checked="true"] {
background: var(--accent-bg-2, var(--accent-bg));
border-color: var(--accent-brd, var(--accent));
}
.bb-fam__chk[aria-checked="true"]::after {
content: ""; position: absolute; left: 3px; top: 0.5px;
width: 3px; height: 6px; transform: rotate(40deg);
border: solid var(--accent-press, var(--accent)); border-width: 0 1.5px 1.5px 0;
opacity: .8; /* gently fade the tick so the whole control feels subtle */
}
.bb-fam__num {
font-family: var(--font-mono); font-size: 8px;
color: var(--accent); flex-shrink: 0;
}
.bb-fam__title {
font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--text-subtle); flex: 1; cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-fam.is-collapsed .bb-fam__title { color: var(--text-faint, var(--text-subtle)); }
.bb-rail__panel.bb-draw .bb-fam.is-collapsed .bb-fam__hdr { padding-bottom: 0; }
.bb-fam__sizebtn {
margin-left: auto;
font-family: var(--font-mono); font-size: 8px;
color: var(--text-subtle);
background: transparent; border: 1px solid var(--border);
border-radius: var(--r-1); padding: 1px 5px; cursor: pointer;
}
.bb-fam__sizebtn:hover { border-color: var(--border-2); }
/* --- Per-family SIZE popover (outside the collapsible body) --- */
.bb-fam__size { display: flex; align-items: center; gap: 6px; padding: 3px 2px 5px; }
.bb-fam__size .bb-fam__size-lbl {
font-family: var(--font-mono); font-size: 8px;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--text-faint, var(--text-subtle)); flex-shrink: 0;
}
.bb-fam__size .bb-fam__size-range { flex: 1; min-width: 0; accent-color: var(--accent); }
/* --- Collapsible body — animate grid-template-rows 1fr↔0fr (no JS height read) --- */
.bb-fam__body {
display: grid; grid-template-rows: 1fr;
transition: grid-template-rows .2s cubic-bezier(.4, 0, .2, 1);
}
.bb-fam__bodyinner { overflow: hidden; min-height: 0; margin: 0; }
.bb-fam.is-collapsed .bb-fam__body { grid-template-rows: 0fr; }
/* --- Drag-reorder visuals --- */
.bb-fam--dragging { opacity: .55; }
.bb-fam__dropbar {
position: absolute; left: 8px; right: 8px; height: 2px;
background: var(--accent); border-radius: 1px;
pointer-events: none; z-index: 4; display: none;
}
/* --- Tile grid + sizing --- */
.bb-rail__panel.bb-draw .bb-fam__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--bb-colw, 56px), 1fr));
gap: var(--bb-gap, 4px);
}
.bb-rail__panel.bb-draw .bb-sec { margin-bottom: var(--bb-secmrg, 2px); }
.bb-sec__label {
font-family: var(--font-mono); font-size: 8px; font-weight: 500;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--text-faint, var(--text-subtle));
padding: 1px 2px 3px;
}
/* Var-driven tile sizing scoped to the draw tab. */
.bb-rail__panel.bb-draw .tile.bb-tool {
min-height: var(--bb-th, 54px);
padding: var(--bb-tilepad, 6px) 4px;
gap: 2px;
}
/* Defeat the global .tile.has-sub{min-height:64px} so Size/Density reach every family. */
.bb-rail__panel.bb-draw .tile.bb-tool.has-sub { min-height: var(--bb-th, 54px); }
.bb-rail__panel.bb-draw .tile.bb-tool .tile__icon .icon,
.bb-rail__panel.bb-draw .tile.bb-tool .tile__icon canvas {
width: var(--bb-icon, 28px); height: var(--bb-icon, 28px);
}
/* Label fix — never clip, wrap on whole words, never below 8px. */
.bb-rail__panel.bb-draw .tile.bb-tool .tile__label {
font-size: var(--bb-lbl, 9px);
white-space: normal; line-height: 1.08;
text-transform: uppercase; text-align: center; max-width: 100%;
}
.bb-rail__panel.bb-draw .tile.bb-tool .tile__label > span:first-child {
white-space: normal; overflow: visible; text-overflow: clip;
word-break: keep-all; overflow-wrap: break-word;
}
/* Size-picker chevron scales with the Text slider so sized tiles stay balanced. */
.bb-rail__panel.bb-draw .tile.bb-tool .tile__chev {
font-size: clamp(7px, calc(7px * var(--bb-T, 1)), 11px);
}
/* "soon" badge → top-right on Draw-tab tiles (the shortcut-hint slot is
unused here) so it never overlaps the now-always-rendered wrapping label. */
.bb-rail__panel.bb-draw .tile.bb-tool.placeholder .tile__soon {
top: 2px; right: 3px; bottom: auto; left: auto;
}
/* ---- Left rail (V25 — Pages / Layers / Settings) ----
Surface-2 panel, hairline borders, mono-caps tabs with a coral
underline on the active tab. Tabs and panels keep their existing
data-bbtab / data-bbpanel attribute hooks; CSS is what changes. */
.bb-rail {
background: var(--surface-2);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
min-width: 0; min-height: 0;
overflow: hidden;
}
.bb-rail__tabs {
display: flex; flex-shrink: 0;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.bb-rail__tab {
flex: 1; padding: 9px 0;
font-family: var(--font-mono); font-size: 10px;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--text-mute);
text-align: center;
cursor: pointer;
background: transparent;
border: 0; border-bottom: 1.5px solid transparent;
user-select: none;
transition: color var(--t-fast), border-color var(--t-fast);
}
.bb-rail__tab:hover { color: var(--text); }
.bb-rail__tab.active {
color: var(--text);
border-bottom-color: var(--accent);
box-shadow: none;
}
.bb-rail__panels { flex: 1; overflow: hidden; position: relative; }
.bb-rail__panel {
position: absolute; inset: 0;
overflow-y: auto; overflow-x: hidden;
padding: 10px 12px;
display: none;
}
.bb-rail__panel.active { display: block; }
.bb-rail__section-title {
font-family: var(--font-mono); font-size: 9px;
color: var(--text-subtle);
letter-spacing: var(--tracking-caps); text-transform: uppercase;
margin: 6px 0 8px;
}
/* Pages list — the page-preview cards are styled by the .bb-page-grid /
.bb-page-thumb* block below (multi-file-workspace polish Item 2b). The old
single-column .bb-page-card text-row rules were removed when renderPagesTab
moved to the 2-column thumbnail grid (they were orphaned — the renderer no
longer emits any bb-page-card* class). */
.bb-page-actions {
display: flex; gap: 6px; padding: 4px 0 10px;
border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.bb-page-actions button {
flex: 1; padding: 5px 10px;
font-family: var(--font-sans); font-size: var(--fs-xs);
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--r-1);
color: var(--text); cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
.bb-page-actions button:hover {
background: var(--surface-3); border-color: var(--border-2);
}
/* multi-file-workspace polish (Item 2b) — 2-column thumbnail grid.
Replaces the old single-column .bb-page-card text rows with compact
page-preview cards (thumbnail box + number badge + size tag). Thumbnails
come from js/85 via window.pageThumbRequest; cards are placeholder-first
and fill in progressively. Themes across all 5 palettes via the tokens. */
.bb-page-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
align-content: start;
}
.bb-page-thumb {
position: relative;
display: flex; flex-direction: column;
padding: 4px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-2);
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.bb-page-thumb:hover {
background: var(--surface-3);
border-color: var(--border-2);
}
.bb-page-thumb.active {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 1px 4px rgba(0,0,0,0.18);
background: var(--accent-bg);
}
/* Preview box — aspect set inline (page.size w/h) so portrait vs landscape
reads before the bitmap lands; default A1-ish landscape fallback. */
.bb-page-thumb__box {
position: relative;
width: 100%;
aspect-ratio: 841 / 594;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-1);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.bb-page-thumb__img {
display: block;
width: 100%; height: 100%;
object-fit: contain;
}
/* Faint page-number shown until the thumbnail fills in. Hidden once a real
preview is attached (box gets .has-thumb). */
.bb-page-thumb__ph {
font-family: var(--font-mono); font-size: var(--fs-md);
color: var(--text-faint);
letter-spacing: var(--tracking-wide);
pointer-events: none;
}
.bb-page-thumb__box.has-thumb .bb-page-thumb__ph { display: none; }
/* Footer — page-number badge + optional size tag. */
.bb-page-thumb__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 4px; padding: 4px 2px 1px;
}
.bb-page-thumb__num {
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
color: var(--text-mute);
min-width: 14px; height: 14px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 4px;
background: var(--surface-3);
border-radius: var(--r-1);
letter-spacing: var(--tracking-wide);
}
.bb-page-thumb.active .bb-page-thumb__num {
color: var(--accent-ink, #fff);
background: var(--accent);
}
.bb-page-thumb__tag {
font-family: var(--font-mono); font-size: 9px;
color: var(--text-subtle);
letter-spacing: var(--tracking-wide); text-transform: uppercase;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-page-thumb__close {
position: absolute; right: 2px; top: 2px;
width: 16px; height: 16px;
font-size: 13px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-subtle);
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-1);
cursor: pointer; padding: 0;
opacity: 0; transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.bb-page-thumb:hover .bb-page-thumb__close,
.bb-page-thumb.active .bb-page-thumb__close { opacity: 1; }
.bb-page-thumb__close:hover { color: var(--danger); border-color: var(--danger); }
/* project-drawing — the pinned Project Drawing (model) page reads distinctly:
a dashed accent frame + a faint accent wash so it's clearly the special
"everything lives here" canvas, not just another sheet. Token-based → all
five themes inherit. */
.bb-page-thumb--model {
border-style: dashed;
border-color: var(--accent-brd, var(--accent));
background: var(--accent-bg);
}
.bb-page-thumb--model .bb-page-thumb__box {
background: repeating-linear-gradient(
var(--surface), var(--surface) 7px, var(--surface-2) 7px, var(--surface-2) 8px);
}
.bb-page-thumb--model .bb-page-thumb__tag {
color: var(--accent); font-size: 12px; font-weight: 700;
}
/* project-drawing — the Detail index/navigator, under the page grid. */
.bb-details { margin-top: 12px; }
.bb-details__head {
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
letter-spacing: var(--tracking-wide); text-transform: uppercase;
color: var(--text-mute); padding: 0 2px 6px;
border-top: 1px solid var(--border); padding-top: 10px;
}
.bb-details__empty {
font-size: var(--fs-sm); color: var(--text-faint);
line-height: 1.4; padding: 2px 2px 4px;
}
.bb-details__search {
width: 100%; box-sizing: border-box; margin: 0 0 6px;
padding: 5px 8px; font-size: var(--fs-sm);
color: var(--text); background: var(--surface);
border: 1px solid var(--border); border-radius: var(--r-1);
}
.bb-details__search:focus { outline: none; border-color: var(--accent); }
.bb-details__list { display: flex; flex-direction: column; gap: 4px; }
.bb-details__row {
display: flex; align-items: center; gap: 8px;
padding: 4px; border-radius: var(--r-1); cursor: pointer;
border: 1px solid transparent;
transition: background var(--t-fast), border-color var(--t-fast);
}
.bb-details__row:hover { background: var(--surface-3); border-color: var(--border-2); }
.bb-details__thumb {
width: 48px; height: 36px; flex: 0 0 auto;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-1); overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.bb-details__thumbimg { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bb-details__meta { min-width: 0; flex: 1 1 auto; }
.bb-details__name {
font-size: var(--fs-sm); font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-details__sub {
display: flex; align-items: center; gap: 5px;
font-size: 10px; color: var(--text-subtle); margin-top: 1px;
}
.bb-details__dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--text-faint); flex: 0 0 auto;
}
.bb-details__dot--unassigned { background: var(--text-faint); }
.bb-details__dot--placed { background: var(--accent); }
.bb-details__dot--issued { background: #2e9e5b; }
.bb-details__dot--differs { background: #d08400; }
/* Layers list — design's .layer row spec.
Existing renderer emits inline style.cssText; the V25 renderer drops
that line so this CSS rule applies. Rows are checkbox + label today;
structure can grow into vis/lock/swatch later without CSS changes. */
.layer-row {
display: flex; align-items: center; gap: 8px;
padding: 4px 6px;
border-radius: var(--r-1);
cursor: pointer;
color: var(--text);
font-size: var(--fs-sm);
transition: background var(--t-fast);
}
.layer-row:hover { background: var(--hover-bg); }
.layer-row.active,
.layer-row.layer--on {
background: var(--accent-bg);
box-shadow: inset 2px 0 0 var(--accent);
}
.layer-row input[type="checkbox"] { cursor: pointer; }
.layer-row label {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: var(--tracking-wide);
flex: 1; cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-empty {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-subtle);
letter-spacing: var(--tracking-wide);
padding: 12px 6px; text-align: center;
}
/* Settings tab — re-uses the inspector content moved here on init.
Inspector header stays, but borders inherit the warm token palette. */
.bb-rail__panel.bb-settings .insp-header {
padding: 0 0 10px; border-bottom: 1px solid var(--border);
margin-bottom: 10px; background: transparent;
}
.bb-rail__panel.bb-settings .insp-header .insp-eyebrow {
font-family: var(--font-mono); font-size: 9px;
letter-spacing: var(--tracking-caps); text-transform: uppercase;
color: var(--text-subtle);
}
.bb-rail__panel.bb-settings .insp-header .insp-h1 {
font-family: var(--font-serif); font-weight: 500;
font-size: var(--fs-2xl);
letter-spacing: var(--tracking-tight);
color: var(--text);
}
/* ---- Drag-resize handle (V25 — quieter, warm hover) ---- */
.bb-rail-handle {
width: 6px; cursor: ew-resize;
background: var(--surface-2);
border-right: 1px solid var(--border);
transition: background var(--t-fast);
}
.bb-rail-handle:hover, .bb-rail-handle.dragging {
background: var(--accent-bg);
border-right-color: var(--accent-brd);
}
.bb-rail-handle.collapsed-edge {
width: 14px; cursor: ew-resize;
background: var(--surface-2);
border-right: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
}
.bb-rail-handle.collapsed-edge::after {
content: '›'; font-family: var(--font-mono); font-size: 14px;
color: var(--text-mute);
}
/* Library sidebar */
#libraryPanel-wrap {
background: var(--bg2); border-right: 1px solid var(--brd);
display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.panel-header {
padding: 6px 8px; border-bottom: 1px solid var(--brd);
font-size: 9px; font-weight: 600; color: var(--mute);
letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0;
}
.panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px; }
/* Canvas container (V25 — fallback bg = workspace-bg so any moment
between the page paint and the first canvas render reads as the
drafting workspace, not blank white). */
#canvas-container {
position: relative; overflow: hidden; cursor: crosshair;
background: var(--workspace-bg);
}
#canvas-container canvas { display: block; width: 100%; height: 100%; }
#canvas-container.pan-cursor { cursor: grab; }
#canvas-container.grabbing { cursor: grabbing; }
/* V25 — mode-aware workspace tint.
Per design: 2D = warm paper-cream surface, 3D = cooler stone-grey.
V2 toggles body.sheet-2d when the active sheet is in 2D mode, so we
override --workspace-bg (and the canvas-container fallback) when the
active sheet is in 3D mode (i.e. NOT .sheet-2d). Scoped to warm
themes only — classic/dark/bt keep their existing workspace fill. */
body.theme-warm-light:not(.sheet-2d),
body.theme-warm-dark:not(.sheet-2d) {
--workspace-bg: var(--surface-cool);
}
/* Library items */
.lib-title {
font-size: 8px; font-weight: 700; color: var(--mute); text-transform: uppercase;
margin: 6px 0 3px 2px; letter-spacing: 0.05em;
}
.lib-item {
font-size: 10px; padding: 3px 5px; margin-bottom: 0;
background: transparent; border: 1px solid transparent;
border-radius: 3px; cursor: pointer; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; line-height: 1.4;
}
.lib-item:hover { background: var(--hover-bg); }
.library-section { margin-bottom: 4px; }
/* V20 command palette + keyboard help */
kbd {
display: inline-block; padding: 1px 5px; margin: 0 2px;
background: var(--bg3); border: 1px solid var(--brd);
border-radius: 3px; font: 11px ui-monospace, Menlo, monospace;
min-width: 16px; text-align: center;
}
.cmd-row { padding: 8px 14px; cursor: pointer; font: 13px system-ui; color: var(--ink); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cmd-row:hover, .cmd-row.focus { background: var(--active-bg); }
.cmd-row .cmd-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmd-row .cmd-cat { font-size:10px; opacity:0.55; flex-shrink:0; }
.layer-row { display:flex; align-items:center; gap:6px; padding:3px 0; }
.layer-row input[type=checkbox] { margin:0; cursor:pointer; }
.layer-row label { cursor:pointer; flex:1; }
/* ========== PROPERTIES (floating overlay) ========== */
#propsPanel {
position: absolute; bottom: 6px; right: 6px; z-index: 10;
width: 180px; background: var(--bg2); border: 1px solid var(--brd);
border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.3);
font-size: 10px; display: none;
max-height: 50%; overflow-y: auto;
}
#propsPanel.visible { display: block; }
#propsPanel .panel-header { padding: 5px 8px; font-size: 8px; }
.prop-row { padding: 3px 8px; }
.prop-label { font-size: 7.5px; font-weight: 600; color: var(--mute); text-transform: uppercase; margin-bottom: 1px; letter-spacing: 0.04em; }
.prop-value { padding: 2px 4px; background: rgba(128,128,128,0.1); border-radius: 2px; color: var(--ink); font-size: 10px; }
.prop-input-group { display: flex; gap: 2px; }
.prop-input-group input { flex: 1; font-size: 9px; padding: 2px 4px; height: 20px; }
/* ========== STATUS BAR ========== */
.status-bar {
padding: 2px 10px; background: var(--bg2); border-top: 1px solid var(--brd);
display: flex; gap: 14px; align-items: center; font-size: 9px; color: var(--mute);
flex-shrink: 0; height: 22px; user-select: none;
}
.status-item { display: flex; gap: 3px; align-items: center; }
.status-value { color: var(--ink); font-weight: 600; font-family: var(--font-mono); font-size: 9px; }
/* Scrollbars */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
/* ---- Dialogs (V25 — drafting modal aesthetic) ----
Existing class names preserved (.dialog-overlay, .dialog, .dialog-title,
.dialog-body, .dialog-buttons, .dialog-btn) so all show/hide handlers
and Place/Save/Cancel button bindings keep working. CSS shape matches
the design's modal pattern: warm overlay veil, surface-2 panel, serif
H1, mono caps subtitle, hairline-border inputs, accent primary button. */
.dialog-overlay {
position: fixed; inset: 0;
/* V25 — theme-aware veil. Warm-light: subtle warm graphite. Dark
themes: lift to a thin black scrim so the modal still pops. */
background: var(--modal-veil, rgba(42, 36, 31, 0.28));
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
display: none; align-items: center; justify-content: center;
z-index: 9999;
}
.dialog-overlay.visible { display: flex; }
.dialog {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-4);
box-shadow: var(--shadow-pop, var(--shadow-lg));
padding: 18px 20px;
min-width: 320px;
max-width: calc(100vw - 48px);
max-height: calc(100vh - 60px);
color: var(--text);
overflow: hidden;
display: flex; flex-direction: column;
}
.dialog-title {
font-family: var(--font-serif); font-weight: 500;
font-size: var(--fs-2xl); letter-spacing: var(--tracking-tight);
color: var(--text);
margin-bottom: 4px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
/* Optional secondary header line — opt-in via .dialog-sub on a span next
to .dialog-title (mono caps, subtle). Existing dialogs that don't use
this stay styled as-is. */
.dialog-sub {
font-family: var(--font-mono); font-size: var(--fs-xs);
color: var(--text-subtle); letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.dialog-body {
font-size: var(--fs-sm); color: var(--text);
padding: 14px 0;
flex: 1; overflow-y: auto;
}
.dialog-buttons {
display: flex; gap: 8px; justify-content: flex-end;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.dialog-btn {
height: 28px; padding: 0 14px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: var(--r-2);
cursor: pointer;
font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500;
transition: background var(--t-fast), border-color var(--t-fast);
}
.dialog-btn:hover { background: var(--surface-3); border-color: var(--border-2); }
.dialog-btn.primary {
background: var(--accent);
border-color: var(--accent-press, var(--accent));
color: var(--accent-ink, #fff);
}
.dialog-btn.primary:hover {
background: var(--accent-hover, var(--accent));
border-color: var(--accent-press, var(--accent));
}
/* Form inputs and labels inside dialogs — paper-on-panel inputs, mono
caps labels (the design's .field + .finput pattern adapted to V2's
existing markup which uses bare ). */
.dialog label,
.plate-dialog label {
display: block; margin-bottom: 8px;
font-family: var(--font-mono); font-size: var(--fs-xs);
color: var(--text-mute); letter-spacing: var(--tracking-wide);
}
.plate-dialog input { width: 80px; }
.dialog input:not([type="checkbox"]):not([type="radio"]),
.dialog select,
.dialog textarea,
.plate-dialog input,
.plate-dialog select {
height: 26px; padding: 0 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-1);
color: var(--text);
font-family: var(--font-mono); font-size: var(--fs-xs);
}
.dialog textarea { height: auto; min-height: 60px; padding: 6px 8px; resize: vertical; }
.dialog input:focus, .dialog select:focus, .dialog textarea:focus,
.plate-dialog input:focus, .plate-dialog select:focus {
outline: none;
border-color: var(--accent-brd, var(--accent));
box-shadow: 0 0 0 2px var(--focus-ring);
}
/* ============================================================
SPELL-CHECK (note text) — js/80 engine + js/81 UI.
Live red-squiggle overlay, right-click fix menu, sweep panel.
============================================================ */
/* Backdrop mirrored exactly behind #nbEditorTA. Its text is transparent;
only the wavy underline under a flagged word is painted, showing through
the (transparent) textarea beneath the live glyphs. */
.sp-backdrop {
position: absolute;
margin: 0;
z-index: 59; /* directly behind the textarea (z-index 60) */
overflow: hidden;
pointer-events: none;
color: transparent;
background: transparent;
white-space: pre-wrap;
word-break: normal;
overflow-wrap: break-word;
-webkit-user-select: none;
user-select: none;
}
.sp-bad {
color: transparent;
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #e23b2e;
text-decoration-skip-ink: none;
-webkit-text-decoration: underline wavy #e23b2e;
text-underline-offset: 2px;
}
/* Right-click fix menu (mirrors the .menu idiom). */
.sp-menu {
position: fixed;
z-index: 2200;
min-width: 180px; max-width: 280px;
padding: 4px;
background: var(--surface-2, var(--surface, #fff));
border: 1px solid var(--border, #ccc);
border-radius: 8px;
box-shadow: var(--shadow-pop, 0 8px 24px rgba(0,0,0,0.25));
font-size: 12px;
color: var(--text, #222);
}
.sp-menu-item {
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-menu-item:hover { background: var(--accent-bg, rgba(0,0,0,0.06)); color: var(--accent-press, var(--accent, #06c)); }
.sp-menu-item.sp-strong { font-weight: 600; }
.sp-menu-item.sp-disabled { color: var(--text-subtle, #999); cursor: default; }
.sp-menu-item.sp-disabled:hover { background: transparent; color: var(--text-subtle, #999); }
.sp-menu-sep { height: 1px; background: var(--border, #ccc); margin: 4px 2px; }
/* Document-sweep results panel (right side). */
.sp-panel {
position: fixed;
top: 64px; right: 14px;
width: 320px; max-height: 72vh;
display: flex; flex-direction: column;
z-index: 1400;
background: var(--surface, #fff);
border: 1px solid var(--border, #ccc);
border-radius: 10px;
box-shadow: var(--shadow-pop, 0 10px 30px rgba(0,0,0,0.3));
font-size: 12px; color: var(--text, #222);
overflow: hidden;
}
.sp-panel-head {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 12px;
border-bottom: 1px solid var(--border, #ccc);
background: var(--surface-3, var(--surface-2, var(--surface)));
}
.sp-panel-title { font-weight: 600; }
.sp-panel-x {
border: none; background: transparent; cursor: pointer;
font-size: 16px; line-height: 1; color: var(--text-mute, #777); padding: 0 2px;
}
.sp-panel-x:hover { color: var(--text, #222); }
.sp-panel-body { overflow-y: auto; padding: 6px; }
.sp-panel-empty { padding: 18px 10px; text-align: center; color: var(--text-mute, #777); }
.sp-hit {
padding: 8px; border-radius: 7px; margin-bottom: 6px;
background: var(--surface-2, var(--surface)); border: 1px solid var(--border, #ddd);
}
.sp-hit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sp-hit-word { font-weight: 600; color: #e23b2e; }
.sp-hit-meta { font-size: 10px; color: var(--text-subtle, #999); white-space: nowrap; }
.sp-hit-ctx { margin: 3px 0 6px; color: var(--text-mute, #666); font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; }
.sp-hit-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-btn {
padding: 3px 8px; border-radius: 5px; cursor: pointer; font-size: 11px;
border: 1px solid var(--border-2, var(--border, #ccc));
background: var(--surface-3, var(--surface)); color: var(--text, #222);
}
.sp-btn:hover { border-color: var(--accent, #06c); }
.sp-btn-fix { background: var(--accent-bg, rgba(0,0,0,0.05)); border-color: var(--accent-brd, var(--accent)); color: var(--accent-press, var(--accent)); font-weight: 600; }
.sp-btn-mute { color: var(--text-mute, #777); }
/* ============================================================
PRINT PREVIEW (44b-print-preview.js, 2026-06-13)
WYSIWYG print dialog. Top-bar .print-btn + .pp-* dialog. All
colours/typography via theme tokens so the five themes inherit.
============================================================ */
/* ---- Top-bar Print button — sibling of the tb-style / sheet-mode
switchers (same height, mono uppercase) but a single accent-leaning
action rather than a segmented choice. */
.print-btn {
display: inline-flex; align-items: center; gap: 6px; align-self: center;
height: 28px; padding: 0 12px; margin-right: 8px;
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: var(--r-2);
color: var(--text-mute); cursor: pointer;
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
letter-spacing: var(--tracking-wide); text-transform: uppercase;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.print-btn:hover {
background: var(--accent-bg); color: var(--accent-press, var(--accent));
border-color: var(--accent-brd);
}
/* generic top-bar toggle "on" state (snap / ortho / grid): accent tint + accent
ink, all token-driven. */
.print-btn.active {
background: var(--active-bg, var(--accent-bg));
color: var(--accent);
border-color: var(--active-brd, var(--accent-brd));
}
.print-btn .icon { width: 15px; height: 15px; }
/* ---- Overlay + dialog shell ---- */
.pp-overlay {
position: fixed; inset: 0; z-index: 3000;
background: var(--modal-veil, rgba(0,0,0,0.35));
display: flex; align-items: center; justify-content: center;
padding: 28px;
}
.pp-overlay[hidden] { display: none; }
.pp-dialog {
display: flex; flex-direction: column;
width: min(1480px, 100%); height: min(920px, 100%);
background: var(--surface);
border: 1px solid var(--border-2);
border-radius: var(--r-3, 10px);
box-shadow: var(--shadow-pop, var(--shadow-lg));
overflow: hidden;
}
/* ---- Header ---- */
.pp-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.pp-head__title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.pp-head__name {
font-family: var(--font-mono); font-size: 12px; font-weight: 600;
letter-spacing: var(--tracking-wide); text-transform: uppercase;
color: var(--text);
}
.pp-head__sub {
font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-mute);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ---- Body: stage (left) + options (right) ---- */
.pp-body { display: flex; flex: 1; min-height: 0; }
.pp-stagecol { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pp-stagebar {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.pp-pagenav, .pp-zoom { display: inline-flex; align-items: center; gap: 4px; }
.pp-navbtn {
display: inline-grid; place-items: center;
min-width: 26px; height: 26px; padding: 0 6px;
background: transparent; border: 1px solid var(--border);
border-radius: var(--r-1); color: var(--text-mute); cursor: pointer;
font-family: var(--font-mono); font-size: 13px; line-height: 1;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pp-navbtn--wide { font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.pp-navbtn:hover:not(:disabled) { background: var(--hover-bg); color: var(--text); }
.pp-navbtn:disabled { opacity: 0.35; cursor: default; }
.pp-pagelabel, .pp-zoomlabel {
font-family: var(--font-mono); font-size: 11px; color: var(--text-mute);
min-width: 48px; text-align: center;
}
.pp-zoomlabel {
background: transparent; border: none; cursor: pointer; padding: 0 4px; height: 26px;
}
.pp-zoomlabel:hover { color: var(--text); }
/* The paper sits on a recessed drafting-desk surface so the white print
sheet reads as the unambiguous subject. */
.pp-stage {
position: relative; flex: 1; min-height: 0;
overflow: auto;
background: var(--surface-cool, var(--surface-3));
box-shadow: inset 0 1px 4px rgba(0,0,0,0.06);
display: flex;
}
.pp-paper { margin: auto; padding: 24px; display: flex; }
.pp-canvas {
display: block;
background: #fff;
box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 14px 40px -12px rgba(0,0,0,0.35);
border-radius: 1px;
}
.pp-loading {
position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
padding: 5px 14px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 999px;
font-family: var(--font-mono); font-size: 11px; color: var(--text-mute);
box-shadow: var(--shadow-md);
pointer-events: none;
}
.pp-error {
margin: auto; padding: 16px 22px;
font-family: var(--font-mono); font-size: 12px; color: var(--danger);
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-2);
}
/* ---- Options panel ---- */
.pp-side {
width: 264px; flex: none;
border-left: 1px solid var(--border);
background: var(--surface-2);
overflow-y: auto;
padding: 14px 16px;
display: flex; flex-direction: column; gap: 16px;
}
.pp-sec { display: flex; flex-direction: column; gap: 7px; }
.pp-sec__title {
font: 600 11px var(--font-mono, monospace);
letter-spacing: var(--tracking-wide, .06em); text-transform: uppercase;
color: var(--text-mute);
border-bottom: 1px solid var(--border); padding-bottom: 4px;
}
.pp-info {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
font-size: var(--fs-sm);
}
.pp-info span { color: var(--text-subtle); }
.pp-info b {
font-weight: 500; color: var(--text); text-align: right;
font-family: var(--font-mono); font-size: 11px;
}
.pp-seggroup {
display: flex;
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: var(--r-2); padding: 2px;
}
.pp-seg {
flex: 1;
display: flex; align-items: center; justify-content: center;
height: 24px; padding: 0 8px;
border: none; background: transparent; border-radius: var(--r-1);
font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-mute); cursor: pointer; white-space: nowrap;
transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.pp-seg:hover:not(:disabled) { color: var(--text); }
.pp-seg.active {
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--accent-brd);
}
.pp-seg:disabled { opacity: 0.4; cursor: default; }
.pp-fieldlabel {
font-size: var(--fs-xs, 11px); color: var(--text-subtle); margin-top: 2px;
}
.pp-input {
height: 28px; padding: 0 9px;
background: var(--inputBg, var(--surface-3));
border: 1px solid var(--border-2);
border-radius: var(--r-1);
font-family: var(--font-mono); font-size: 11.5px; color: var(--text);
outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pp-input:focus { border-color: var(--accent-brd); box-shadow: 0 0 0 2px var(--focus-ring); }
.pp-hint { font-size: 10.5px; color: var(--text-subtle); line-height: 1.4; }
/* ---- Footer ---- */
.pp-foot {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 12px 16px;
border-top: 1px solid var(--border);
background: var(--surface-2);
}
.pp-foot__note {
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.03em; color: var(--text-subtle);
}
.pp-foot__actions { display: inline-flex; align-items: center; gap: 8px; }
.pp-btn {
height: 30px; padding: 0 16px;
background: var(--surface-3);
border: 1px solid var(--border-2);
border-radius: var(--r-2);
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
letter-spacing: var(--tracking-wide); text-transform: uppercase;
color: var(--text); cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pp-btn:hover:not(:disabled) { border-color: var(--accent-brd); color: var(--accent-press, var(--accent)); }
.pp-btn:disabled { opacity: 0.55; cursor: default; }
.pp-btn--primary {
background: var(--accent); border-color: var(--accent);
color: var(--accent-ink, #fff);
}
.pp-btn--primary:hover:not(:disabled) {
background: var(--accent-hover, var(--accent)); border-color: var(--accent-hover, var(--accent));
color: var(--accent-ink, #fff);
}
/* Narrow screens — keep the dialog usable on a 13" laptop. */
@media (max-width: 1100px) {
.pp-side { width: 230px; }
.print-btn span { display: none; }
.print-btn { padding: 0 8px; }
}
/* ============================================================
DATUM REFINEMENT LAYER (2026-06-27)
Interface-only polish over the warm DATUM palette. Appended
last so it overrides earlier rules by cascade; `!important`
is used ONLY to defeat hardcoded inline styles (the legacy
options ribbon builds controls with inline style strings).
No tool logic, no sketch templates, no canvas-engine tokens
are touched. Scope: brand wordmark, toolbox family headers,
the per-tool options ribbon, app-wide slider/control language.
============================================================ */
/* ---- Brand wordmark — StructuralSketch, top-left, restrained ---- */
.top-bar__brand { gap: 8px; padding-left: 4px; align-items: center; }
/* The Daniel McCarron Design grid-mark (a Frank Lloyd Wright / Mondrian
cartouche) is the brand logo now — it replaces the earlier flat chop.
Sized to sit quietly beside the wordmark. */
.top-bar__brand::before { content: none; }
.brand__logo {
flex: 0 0 auto; width: 22px; height: 22px;
object-fit: contain; display: block;
user-select: none; -webkit-user-drag: none;
}
.brand__name {
font-family: var(--font-sans); font-size: 13.5px; line-height: 1;
letter-spacing: -0.005em; white-space: nowrap;
display: inline-flex; align-items: baseline;
}
.brand__name-a { color: var(--text); font-weight: 600; }
.brand__name-b { color: var(--text); font-weight: 400; opacity: 0.78; }
/* ---- Toolbox family headers — a clean drafting "datum" row ----
Replaces the old circled tick with a quiet pill switch that reads
instantly as show / hide, plus a hover-revealed grip + SIZE so the
resting row stays calm. All CSS-driven off the existing
role=checkbox [aria-checked] the JS already maintains. */
.bb-rail__panel.bb-draw .bb-fam__hdr {
gap: 8px; border-radius: var(--r-1);
padding-left: 5px; padding-right: 4px; margin: 0 -3px;
transition: background var(--t-fast) var(--ease-out);
}
.bb-rail__panel.bb-draw .bb-fam__hdr:hover { background: var(--hover-bg); }
/* grip — quiet at rest, firms up when the row is hovered */
.bb-fam__grip { color: var(--text-faint, var(--text-subtle)); opacity: 0.5;
transition: opacity var(--t-fast), color var(--t-fast); }
.bb-rail__panel.bb-draw .bb-fam__hdr:hover .bb-fam__grip { opacity: 1; color: var(--text-subtle); }
/* the visibility toggle — a small, faded hairline pill. Deliberately quiet
at rest (the row title carries the eye); it firms up only when its row is
hovered, so a screen full of families reads as calm. */
.bb-rail__panel.bb-draw .bb-fam__chk {
width: 17px; height: 10px; border-radius: var(--r-pill);
border: 1px solid var(--border-2); background: var(--surface-3);
opacity: 0.55;
transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), opacity var(--t-fast);
}
.bb-rail__panel.bb-draw .bb-fam__chk::after {
content: ""; position: absolute; top: 50%; left: 2px; right: auto;
transform: translateY(-50%);
width: 6px; height: 6px; border-radius: 50%; border: 0;
background: var(--text-faint, var(--text-subtle));
transition: left var(--t-base) var(--ease-out), right var(--t-base) var(--ease-out),
background var(--t-fast) var(--ease-out);
}
.bb-rail__panel.bb-draw .bb-fam__chk[aria-checked="true"] {
background: var(--accent-bg); border-color: var(--accent-bg);
}
.bb-rail__panel.bb-draw .bb-fam__chk[aria-checked="true"]::after {
left: auto; right: 2px; background: var(--accent-brd, var(--accent));
}
/* On row hover the toggle becomes fully opaque + its "on" knob deepens to the
true accent, so the interactive affordance is obvious only when reached for. */
.bb-rail__panel.bb-draw .bb-fam__hdr:hover .bb-fam__chk { opacity: 1; }
.bb-rail__panel.bb-draw .bb-fam__hdr:hover .bb-fam__chk[aria-checked="true"]::after,
.bb-rail__panel.bb-draw .bb-fam__chk:hover[aria-checked="true"]::after { background: var(--accent); }
.bb-rail__panel.bb-draw .bb-fam__chk:hover { border-color: var(--accent-brd); }
.bb-rail__panel.bb-draw .bb-fam__chk:focus-visible {
outline: none; opacity: 1; box-shadow: 0 0 0 2px var(--focus-ring);
}
/* index number (terracotta datum) + title */
.bb-fam__num { font-size: 8.5px; color: var(--accent); opacity: 0.85; letter-spacing: 0.02em; }
.bb-fam__title { color: var(--text-mute); font-size: 10px; letter-spacing: var(--tracking-caps); }
.bb-fam.is-collapsed .bb-fam__hdr { opacity: 0.78; }
/* SIZE — recedes until the row is hovered */
.bb-fam__sizebtn {
color: var(--text-faint, var(--text-subtle)); border-color: transparent;
opacity: 0.7; letter-spacing: var(--tracking-caps);
transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.bb-rail__panel.bb-draw .bb-fam__hdr:hover .bb-fam__sizebtn { opacity: 1; border-color: var(--border); }
.bb-fam__sizebtn:hover { color: var(--accent); border-color: var(--accent-brd); }
/* ====================================================================
DATUM SLIDER INSTRUMENT — "open rail" (2026-06-27, rev B)
Per the "2D detailing sliders redesign" handoff, variant A. js/74a wraps
every in a single thin row:
‹ ──grooved + ticked rule · red chop── ›
No box: bare chevrons flank a long thin rail with a small square "chop"
thumb. Drag the chop, click the rail to jump, key it, OR click a chevron
at each end to step. The rail FLEXES to fill its row everywhere except
the horizontal ribbons (js/74a keeps the input's width there) — that
length is what stops it looking cramped. The native input stays the live
value source and is hidden inside .sl-inst. Tokens fall back so the
non-DATUM themes stay coherent. Chrome only — exported values untouched. */
.sl-inst {
--sl-accent: var(--accent);
--sl-thumb: var(--red-chop, var(--accent));
--sl-h: 22px;
--sl-groove: 4px;
--sl-thumb-sz: 15px;
--sl-thumb-r: 50%; /* clean round knob (was a 2.5px square "chop") */
--sl-cap-w: 11px; /* quiet step-arrows (was 14px — "too big") */
--sl-inset: 8px; /* rail end padding; mirrored as INSET in js/74a */
display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
box-sizing: border-box; height: var(--sl-h); min-width: 0;
}
.sl-inst.is-disabled { opacity: 0.5; }
/* the live native input — kept in the DOM, hidden from view */
.sl-inst > input[type=range] {
position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
opacity: 0; pointer-events: none; clip: rect(0 0 0 0); overflow: hidden;
}
/* step chevrons — the clickable arrowheads at each end (no box, no divider) */
.sl-inst__cap {
flex: 0 0 var(--sl-cap-w); width: var(--sl-cap-w);
display: inline-flex; align-items: center; justify-content: center;
padding: 0; border: 0; background: transparent; cursor: pointer;
color: var(--text-mute); -webkit-user-select: none; user-select: none;
border-radius: var(--r-1);
transition: color var(--t-fast) var(--ease-out);
}
.sl-inst__cap svg { width: 10px; height: 10px; display: block; pointer-events: none; }
.sl-inst__cap:hover:not(:disabled) { color: var(--sl-accent); }
.sl-inst__cap:active:not(:disabled) { color: var(--accent-press, var(--sl-accent)); }
.sl-inst__cap:disabled { color: var(--text-faint, var(--text-mute)); cursor: default; opacity: 0.45; }
.sl-inst__cap:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
/* the rail — drag / click / keyboard target */
.sl-inst__rail { position: relative; flex: 1 1 auto; align-self: stretch; min-width: 24px; cursor: pointer; touch-action: none; }
.sl-inst__rail:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-radius: var(--r-1); }
.sl-inst__groove {
position: absolute; left: var(--sl-inset); right: var(--sl-inset); top: 50%; height: var(--sl-groove);
transform: translateY(-50%); border-radius: var(--r-pill);
background:
repeating-linear-gradient(to right, var(--border-2) 0 1px, transparent 1px 10%),
var(--surface-3);
box-shadow: inset 0 0 0 1px var(--border);
}
.sl-inst__fill {
position: absolute; left: var(--sl-inset); top: 50%; height: var(--sl-groove);
transform: translateY(-50%); border-radius: var(--r-pill);
background: var(--sl-accent); pointer-events: none;
width: calc((100% - var(--sl-inset) * 2) * var(--p, 0));
}
.sl-inst__thumb {
position: absolute; top: 50%; left: calc(var(--sl-inset) + (100% - var(--sl-inset) * 2) * var(--p, 0));
width: var(--sl-thumb-sz); height: var(--sl-thumb-sz);
transform: translate(-50%, -50%);
background: var(--sl-thumb); border-radius: var(--sl-thumb-r);
box-shadow: 0 0 0 2px var(--paper-0, var(--surface-2)), var(--shadow-sm);
transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
pointer-events: none;
}
.sl-inst__rail:hover .sl-inst__thumb,
.sl-inst.is-drag .sl-inst__thumb {
transform: translate(-50%, -50%) scale(1.15);
box-shadow: 0 0 0 2.5px var(--paper-0, var(--surface-2)), var(--shadow-pop, var(--shadow-md));
}
.sl-inst.is-disabled .sl-inst__rail { cursor: default; }
.sl-inst.is-disabled .sl-inst__thumb { background: var(--text-subtle, var(--text-mute)); }
/* BB-rail toolbox 3-up (Density · Size · Text) is dense — tighten the gap. */
.bb-draw__bar .sl-inst { --sl-cap-w: 10px; gap: 2px; }
.bb-draw__bar .sl-inst__cap svg { width: 9px; height: 9px; }
/* Inspector (SETTINGS panel) slider rows — LABEL ON TOP (2026-06-28).
The fixed ~104px label column starved the rail in the narrow ~250px
panel (the "much too narrow" complaint). Stacking the label above the
rail hands the open rail the panel's FULL width — the concept-card
layout. :has(.sl-inst) out-specifies the js/71-injected
.ins-row{flex-direction:row} / .ins-row>label{flex:0 0 104px}, so no
js/71