/* =============================================================
WaxFrame — style.css
Build: 20260524-002
Author: WeirDave (R David Paine III) | License: AGPL-3.0
============================================================= */
/* ══════════════════════════════════════
DM SANS — self-hosted (fonts/ folder)
Replaces former Google Fonts dependency. All 18 weights × styles
declared so any callsite can use them. Browsers lazy-load each
woff2 only when a matching font-weight/style is actually rendered,
so declaring all is effectively free at page-load time.
Syne dropped entirely; DM Sans handles former display callsites
via the --font-display token (see :root below).
Font: DM Sans by Indian Type Foundry / Colophon Foundry. SIL OFL 1.1.
══════════════════════════════════════ */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/dm-sans-v17-latin-100.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/dm-sans-v17-latin-100italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/dm-sans-v17-latin-200.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/dm-sans-v17-latin-200italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/dm-sans-v17-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/dm-sans-v17-latin-300italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-v17-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-v17-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-v17-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-v17-latin-500italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/dm-sans-v17-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/dm-sans-v17-latin-600italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dm-sans-v17-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/dm-sans-v17-latin-700italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/dm-sans-v17-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/dm-sans-v17-latin-800italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/dm-sans-v17-latin-900.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/dm-sans-v17-latin-900italic.woff2') format('woff2'); }
/* ══════════════════════════════════════
RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }
/* ══════════════════════════════════════
THEME VARIABLES
══════════════════════════════════════ */
/* Dark (default) */
:root {
--bg: #0a0c12;
--surface: #111318;
--surface2: #181b24;
--surface3: #1e2130;
--border: #252838;
--border2: #454a66;
--text: #e8ecf4;
--text-dim: #9aa3b8;
--muted: #4a5270;
--accent: #f5a623;
--accent-dim: rgba(245,166,35,0.10);
--accent-hover: #f7b84a;
--blue: #4d8aff;
--blue-dim: rgba(77,138,255,0.10);
--purple: #a78bfa;
--purple-dim: rgba(167,139,250,0.10);
--green: #00b300;
--green-dim: rgba(0,179,0,0.10);
--red: #f87171;
--red-dim: rgba(248,113,113,0.10);
--amber: #fbbf24;
--line-stripe: rgba(255,255,255,0.04);
--font: 'DM Sans', system-ui, sans-serif;
--font-display: 'DM Sans', system-ui, sans-serif;
--font-mono: 'Courier New', Courier, monospace;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
--shadow-md: 0 8px 32px rgba(0,0,0,0.5);
--shadow-lg: 0 16px 64px rgba(0,0,0,0.6);
--glow: 0 0 24px rgba(245,166,35,0.15);
/* ── Font size scale ── */
--fs-xs: 10px; /* version stamps, tiny badges */
--fs-sm: 13px; /* tips, hints, sub-labels, counter text */
--fs-base: 14px; /* body text, nav items, form labels */
--fs-md: 16px; /* button text, card sub-copy */
--fs-lg: 18px; /* card titles */
--fs-xl: clamp(22px, calc(11.75px + 0.75vw), 26px); /* screen-level headings — fluid 22→26 */
--fs-2xl: clamp(28px, calc(17.75px + 0.75vw), 32px); /* logo/brand name — fluid 28→32 */
--fs-mono: 13px; /* all Courier New — textarea, code */
/* Numeric font-size tokens — px-named scale used by R5a/R5b/R6/R7
migrations. Same naming convention as --space-N. Defined here in
v3.34.14 to retroactively activate the migrated declarations
across all prior R-pass releases. */
--fs-11: 11px;
--fs-12: 12px;
--fs-13: 13px;
--fs-14: 14px;
--fs-15: 15px;
--fs-16: 16px;
--fs-18: 18px;
--fs-20: 20px;
--fs-22: clamp(22px, calc(11.75px + 0.75vw), 26px); /* fluid 22→26 (matches --fs-xl) */
--fs-24: clamp(24px, calc(13.75px + 0.75vw), 28px); /* fluid 24→28 */
--fs-28: clamp(28px, calc(17.75px + 0.75vw), 32px); /* fluid 28→32 (matches --fs-2xl) */
--fs-32: clamp(32px, calc(21.75px + 0.75vw), 36px); /* fluid 32→36 */
/* ── Spacing scale (px-named) ──
Tokens for padding / margin / gap. Number = pixel value, so migration
from hardcoded `padding: 12px` to `padding: var(--space-12)` is a
direct textual swap. Covers the most common values from v3.34.6
frequency analysis — top 5 (8/10/6/12/4) collectively >85% of all
spacing declarations. Odd values (3, 5, 7) intentionally NOT tokenized
— they're either fine-tuning that should snap to nearest even during
migration, or evaluated case-by-case. 1px / 2px values used for
borders and hairlines are out of scope for the spacing scale. */
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-14: 14px;
--space-16: 16px;
--space-18: 18px;
--space-20: 20px;
--space-24: 24px;
--space-28: 28px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
/* ── MODAL WIDTH SCALE (added v3.55.1) ───────────────────────
One canonical set of modal widths so sizing is uniform
instead of 17 one-off values. Named to mirror the --fs-*
convention (sm / base / lg / xl / 2xl). Sized against the
1366px supported floor: the overlay adds --space-24 padding
each side, so usable width on the floor is ~1318px — every
tier below stays within that, and the modal's own width:100%
constrains it on smaller screens regardless of the cap.
sm confirms, gates, license, edit-hive
base errors, finish, length guard, sheet picker
lg builder / custom-AI setup, troubleshooting
xl the ⓘ info / explainer family (wide-and-short)
2xl big data panels (test-keys, gallery, history)
Adoption is incremental — info family + Project Goal are
wired now; the rest migrate in the UX-003 uniformity sweep
(see backlog). */
--modal-w-sm: 420px;
--modal-w-base: 640px;
--modal-w-lg: 900px;
--modal-w-xl: 1200px;
--modal-w-2xl: 1320px;
}
/* ══════════════════════════════════════════════════════════════
CANONICAL VIEWPORT TIERS — DO NOT INVENT NEW BREAKPOINTS
══════════════════════════════════════════════════════════════
Floor: <1366 wide OR <768 tall → min-screen-overlay shown
Laptop: 1366–1600 wide → @media (max-width: 1600px)
Desktop: 1601+ wide → base rules (no media query)
Short: ≤900 tall → @media (max-height: 900px)
Compaction principle: at Laptop / Short tiers, type shrinks and
padding tightens — but information is never removed. The only
acceptable display:none at a compaction tier is for purely
decorative elements (hero illustrations, ambient mascots).
Never display:none on text content, status, or metadata.
Layout swaps (e.g. hex-grid → bee-dot-strip at laptop) are
permitted when the alternate UI presents the same information
via interaction (hover/click tooltip).
══════════════════════════════════════════════════════════════ */
/* Light theme */
[data-theme="light"] {
--bg: #f2f4f8;
--surface: #ffffff;
--surface2: #f0f2f8;
--surface3: #e4e7f4;
--border: #d0d4e8;
--border2: #b8bdd8;
--text: #0f1221;
--text-dim: #384060;
--muted: #555d80;
--accent: #c97c06;
--accent-dim: rgba(201,124,6,0.12);
--accent-hover: #d98a10;
--blue: #2563eb;
--blue-dim: rgba(37,99,235,0.12);
--purple: #7c3aed;
--purple-dim: rgba(124,58,237,0.10);
--green: #047857;
--green-dim: rgba(4,120,87,0.18);
--red: #b91c1c;
--red-dim: rgba(185,28,28,0.10);
--amber: #b45309;
--line-stripe: rgba(0,0,0,0.04);
--shadow-sm: 0 2px 12px rgba(0,0,0,0.14);
--shadow-md: 0 8px 32px rgba(0,0,0,0.18);
--shadow-lg: 0 16px 64px rgba(0,0,0,0.22);
--glow: 0 0 24px rgba(201,124,6,0.15);
}
/* Auto theme (follows OS) */
@media (prefers-color-scheme: light) {
[data-theme="auto"] {
--bg: #f2f4f8;
--surface: #ffffff;
--surface2: #f0f2f8;
--surface3: #e4e7f4;
--border: #d0d4e8;
--border2: #b8bdd8;
--text: #0f1221;
--text-dim: #384060;
--muted: #7880a0;
--accent: #c97c06;
--accent-dim: rgba(201,124,6,0.12);
--accent-hover: #d98a10;
--blue: #1d4ed8;
--blue-dim: rgba(29,78,216,0.10);
--purple: #7c3aed;
--purple-dim: rgba(124,58,237,0.10);
--green: #047857;
--green-dim: rgba(4,120,87,0.18);
--red: #b91c1c;
--red-dim: rgba(185,28,28,0.10);
--amber: #b45309;
--line-stripe: rgba(0,0,0,0.04);
--shadow-sm: 0 2px 12px rgba(0,0,0,0.14);
--shadow-md: 0 8px 32px rgba(0,0,0,0.18);
--shadow-lg: 0 16px 64px rgba(0,0,0,0.22);
--glow: 0 0 24px rgba(201,124,6,0.15);
}
}
/* ── BASE ── */
/* Toggleable display utility — used in place of inline style="display:none;" */
.is-hidden { display: none !important; }
/* Global text selection — guarantees readable contrast in both themes regardless
of where the user selects from. Mirrors the .work-doc-ta::selection pattern. */
::selection {
background: var(--accent);
color: #0a0c12;
}
[data-theme="light"] ::selection {
background: var(--accent);
color: #ffffff;
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] ::selection {
background: var(--accent);
color: #ffffff;
}
}
html, body {
height: 100%;
color: var(--text);
font-family: var(--font);
font-size: 15px;
line-height: 1.6;
overflow: hidden;
background-image:
linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
url('images/WaxFrame_Honeycomb_BG_Dark.png');
background-size: auto, 300px auto;
background-repeat: repeat, repeat;
}
[data-theme="light"] body {
background-image:
linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
url('images/WaxFrame_Honeycomb_BG_Light.png');
background-size: auto, 300px auto;
background-repeat: repeat, repeat;
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] body {
background-image:
linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
url('images/WaxFrame_Honeycomb_BG_Light.png');
background-size: auto, 300px auto;
background-repeat: repeat, repeat;
}
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
/* ── SCREENS ── */
.screen {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
display: none;
overflow: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
.screen.active {
display: flex;
opacity: 1;
}
/* ══════════════════════════════════════
BUTTONS
══════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px dashed var(--border2);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-size: 13px;
padding: 7px 14px;
transition: all 0.12s;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.btn.btn-copied {
border-color: var(--green);
background: var(--green-dim);
color: var(--green);
transition: all 0.15s ease-out;
}
/* Ghost — visible over honeycomb */
.btn-ghost {
border: 1px solid rgba(255,255,255,0.3);
background: rgba(0,0,0,0.4);
color: rgba(255,255,255,0.85);
backdrop-filter: blur(4px);
}
.btn-ghost:hover {
border-color: var(--accent);
border-style: solid;
color: var(--accent);
background: rgba(0,0,0,0.5);
}
/* Accent (filled) — always readable */
.btn-accent {
background: var(--accent);
border-color: var(--accent);
/* v3.36.30 — Base text color is white to match .footer-btn-smoke's
light-theme rule (L2589 sets footer-btn-smoke color to #ffffff).
White-on-amber base + amber-on-white hover gives the symmetric
flip that Smoke uses. Was: color #0a0c12 (dark). Same fix-the-
class-not-the-overrides pattern as v3.36.29 — every primary CTA
across the app now has consistent resting text color. */
color: #ffffff;
font-weight: 700;
}
.btn-accent:hover {
/* v3.36.29 — Smoke-style hover treatment applied to all .btn-accent
buttons for UX consistency. Background flips from amber to white,
text turns amber, button lifts 2px, larger amber glow shadow. Same
visual language as the footer-btn-smoke hover (the Smoke-the-Hive
button) — every primary CTA in the app now feels the same on hover.
Previously: subtle accent-hover background tint + small lift +
small shadow + dark text retained. Light/auto theme overrides
below removed — these absolute-color values work across all themes
and we want the same flip everywhere. */
background: #ffffff;
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(245,166,35,0.5);
}
/* v3.36.29 — Light/auto theme overrides removed (was: dark-brown bg
on hover). The universal .btn-accent:hover rule above uses
absolute white + amber values that work across all themes,
matching the Smoke-the-Hive treatment. */
.btn-sm { font-size: 12px; padding: 5px 11px; }
.btn-lg { font-size: 15px; padding: 12px 28px; border-radius: var(--radius-md); }
.btn-cta { min-width: 320px; justify-content: center; }
/* ── THEME TOGGLE ── */
.theme-opt {
background: transparent;
border: 1px solid var(--border2);
border-radius: 20px;
color: var(--muted);
cursor: pointer;
font-size: var(--fs-11);
font-weight: 600;
padding: var(--space-4) var(--space-12);
transition: all 0.12s;
white-space: nowrap;
}
.theme-opt.active {
background: var(--accent);
border-color: var(--accent);
color: #0a0c12;
font-weight: 700;
cursor: default;
}
.theme-opt:hover:not(.active) {
border-color: var(--accent);
color: var(--accent);
}
/* Mute button — color-coded state indicator. Green = sounds on, red = muted.
Sits left of theme toggles, separated by a small gap. Overrides the dim
transparent .theme-opt base because mute is a state indicator, not a
radio-group selector — different control type, different visual weight. */
.mute-btn {
margin-right: 4px;
background: var(--green-dim);
border-color: var(--green);
color: var(--green);
}
.mute-btn:hover:not(.is-muted) {
background: var(--green);
border-color: var(--green);
color: var(--bg);
}
.mute-btn.is-muted {
background: var(--red-dim);
border-color: var(--red);
color: var(--red);
}
.mute-btn.is-muted:hover {
background: var(--red);
border-color: var(--red);
color: var(--bg);
}
.theme-toggle {
display: flex;
gap: var(--space-4);
align-items: center;
}
/* ══════════════════════════════════════
SCREEN 1 — WELCOME
══════════════════════════════════════ */
.screen#screen-welcome {
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.welcome-bg {
position: fixed;
inset: 0;
z-index: 0;
background: var(--bg);
}
.welcome-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 620px;
padding: var(--space-48) var(--space-32);
display: flex;
flex-direction: column;
gap: 36px;
align-items: center;
}
.welcome-logo {
display: flex;
align-items: center;
gap: var(--space-18);
}
.welcome-logo-anim {
position: relative;
width: 140px;
height: 140px;
flex-shrink: 0;
overflow: visible;
}
.welcome-logo-static {
width: 140px;
height: 140px;
object-fit: contain;
display: block;
}
.welcome-bee-fly {
position: absolute;
width: 78px;
height: 78px;
object-fit: contain;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}
.screen#screen-welcome.active .welcome-bee-fly {
animation: beeExit 7s ease-in-out infinite;
}
@keyframes beeExit {
/* Start hidden in the hive */
0% { transform: translate(-50%, -50%) scale(0) scaleX(1); opacity: 0; }
/* Pop out of hive */
8% { transform: translate(-50%, -50%) scale(1) scaleX(1); opacity: 1; }
/* Fly straight right to end of title */
38% { transform: translate(370px, -50%) scale(1) scaleX(1); opacity: 1; }
/* Pause at the end — holds for ~2s */
40% { transform: translate(380px, -50%) scale(1) scaleX(1); opacity: 1; }
60% { transform: translate(380px, -50%) scale(1) scaleX(1); opacity: 1; }
/* Flip to face left */
63% { transform: translate(380px, -50%) scale(1) scaleX(-1); opacity: 1; }
/* Rocket up-left at 45 degrees off the top of the screen */
85% { transform: translate(100px, -600px) scale(1) scaleX(-1); opacity: 0; }
/* Reset hidden for next loop */
100% { transform: translate(-50%, -50%) scale(0) scaleX(1); opacity: 0; }
}
.app-version-stamp {
font-size: var(--fs-11);
font-weight: 700;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: var(--space-4);
display: block;
}
/* Welcome screen pair: tagline 15px → version 13px, weight matches tagline */
.welcome-brand .app-version-stamp {
font-size: var(--fs-13);
font-weight: 600;
letter-spacing: 0.08em;
}
.setup-step-badge .app-version-stamp {
display: inline;
margin-top: 0;
margin-left: var(--space-6);
opacity: 0.65;
}
/* Version stamp below the tagline in the center header brand */
.fs-header-brand .app-version-stamp {
display: block;
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 600;
color: var(--text-dim);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: var(--space-4);
}
/* Version stamp below the tagline on helper pages */
.page-header-brand .app-version-stamp {
display: block;
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 600;
color: var(--text-dim);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: var(--space-4);
}
.welcome-brand h1 {
font-family: var(--font-display);
font-size: 54px /* out-of-scale */;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1;
}
.welcome-brand p {
color: var(--muted);
font-size: var(--fs-15);
margin-top: var(--space-6);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
.welcome-pitch {
text-align: center;
color: var(--text-dim);
font-size: var(--fs-15);
line-height: 1.7;
max-width: 500px;
}
.welcome-pitch strong { color: var(--text); }
/* Inline ⓘ button used on the welcome screen — sized down from the default
36px helper-info-img to match the 15px paragraph context so it reads as a
discrete affordance rather than a basketball next to body text. */
.welcome-info-inline {
width: 22px;
height: 22px;
vertical-align: -5px;
margin-left: var(--space-4);
}
.welcome-info-inline img { width: 22px; height: 22px; }
.welcome-choices {
display: flex;
flex-direction: column;
gap: var(--space-12);
width: 100%;
}
.welcome-card {
display: flex;
align-items: center;
gap: var(--space-16);
padding: var(--space-20) 22px;
border-radius: var(--radius-md);
border: 1px dashed var(--border2);
background: transparent;
color: var(--text-dim);
cursor: pointer;
transition: all 0.12s;
}
.welcome-card:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-dim);
}
.welcome-card.free {
background: rgba(59, 130, 246, 0.07);
border-color: rgba(59, 130, 246, 0.35);
}
.welcome-card.free:hover {
background: rgba(59, 130, 246, 0.14);
border-color: rgba(59, 130, 246, 0.65);
color: #7ab8ff;
}
.welcome-card.pro {
background: rgba(245, 158, 11, 0.07);
border-color: rgba(245, 158, 11, 0.35);
}
.welcome-card.pro:hover {
background: rgba(245, 158, 11, 0.14);
border-color: var(--accent);
color: var(--accent);
}
.welcome-card-icon {
font-size: var(--fs-28);
width: 48px;
text-align: center;
flex-shrink: 0;
}
.welcome-card-body { flex: 1; }
.welcome-card-title {
font-family: var(--font-display);
font-size: var(--fs-16);
font-weight: 700;
margin-bottom: var(--space-4);
display: flex;
align-items: center;
gap: var(--space-8);
color: var(--text-dim);
}
.welcome-card-arrow {
font-size: var(--fs-18);
color: var(--text-dim);
}
.badge-api {
background: var(--accent);
color: #0a0c12;
font-size: 10px;
font-weight: 800;
padding: 2px 7px;
border-radius: 20px;
letter-spacing: 0.06em;
font-family: var(--font);
}
.welcome-info-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.15s;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.welcome-info-btn:hover { opacity: 1; }
.welcome-info-label {
font-size: var(--fs-11);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text2);
margin-bottom: var(--space-6);
}
.welcome-info-row {
display: flex;
gap: var(--space-12);
align-items: flex-start;
margin-bottom: var(--space-10);
}
.welcome-info-icon {
font-size: var(--fs-20);
flex-shrink: 0;
width: 28px;
text-align: center;
line-height: 1.4;
}
.welcome-info-body {
display: flex;
flex-direction: column;
gap: 2px;
font-size: var(--fs-13);
line-height: 1.5;
color: var(--text2);
}
.welcome-info-body strong {
color: var(--text);
font-size: var(--fs-13);
}
.welcome-info-note {
font-size: var(--fs-12);
color: var(--text2);
opacity: 0.8;
}
.welcome-footer {
display: flex;
gap: var(--space-10);
align-items: center;
margin-bottom: var(--space-10);
}
/* ══════════════════════════════════════
SCREENS 2 & 3 — SETUP LAYOUT
══════════════════════════════════════ */
.screen#screen-api-setup,
.screen#screen-project {
flex-direction: column;
overflow: hidden;
}
/* ── AI Setup Grid ── */
.ai-setup-grid {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.ai-setup-row {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-8) var(--space-12);
border: 1px dashed var(--border2);
border-radius: var(--radius-sm);
background: var(--surface);
transition: all 0.12s;
}
/* v3.31.0 — legacy .ai-setup-row:hover and .ai-setup-row.checked rules
removed. Hover and active state are now handled by mode-aware
selectors (.is-collapsed:hover, .is-expanded) further down in this
stylesheet under the v3.31.0 — Worker Bee inventory screen redesign
block. The .checked variant was tied to the legacy active-AI checkbox
that lived on this screen pre-v3.31; that selection has moved to the
work screen and (in v3.32) to a dedicated active-group screen. */
/* .ai-setup-row-top removed in v3.31.0 — replaced by .ai-setup-row-summary
when the row template moved to a collapsed-by-default model. */
.ai-setup-icon {
width: 24px;
height: 24px;
object-fit: contain;
border-radius: 4px;
flex-shrink: 0;
}
.ai-setup-name {
flex: 1;
min-width: 0;
font-weight: 600;
font-size: var(--fs-13);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-mono);
}
/* v3.40.0 — deprecation flag marker on AI cards when the saved model is
no longer in the provider's live /v1/models list. Sits right after the
AI name, before the spacer that pushes action buttons to the right.
Uses the accent tokens so it visually echoes other warn-state UI
without needing a new color. */
.ai-setup-deprecation-flag {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: var(--space-6);
padding: 0 var(--space-6);
height: 20px;
border-radius: 4px;
font-size: var(--fs-13);
font-weight: 700;
color: var(--accent);
background: var(--accent-dim);
border: 1px solid var(--accent);
cursor: help;
}
.ai-setup-key-wrap {
display: flex;
align-items: center;
gap: var(--space-6);
flex: 1;
min-width: 0;
}
.ai-setup-key {
flex: 1;
min-width: 0;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-mono);
font-size: var(--fs-12);
padding: var(--space-6) var(--space-10);
outline: none;
transition: all 0.15s;
}
.ai-setup-key:focus { border-color: var(--accent); }
.ai-setup-key[type="text"] {
background: var(--surface3);
border-color: var(--accent);
}
.ai-setup-key:disabled {
opacity: 0.35;
cursor: not-allowed;
}
/* .ai-info-btn rules removed in v3.31.0 — the small ↗ circle button
on every AI row was replaced by the .ai-getkey-link inside the
expanded panel (only renders when the AI has no key yet). */
/* ── Builder Pick ── */
.builder-pick-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.builder-pick-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-10);
padding: var(--space-20) var(--space-12) var(--space-14);
border: 1px dashed var(--border2);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text-dim);
font-size: var(--fs-13);
font-weight: 500;
transition: all 0.12s;
position: relative;
min-width: 100px;
cursor: pointer;
/* v3.32.19 — Defensive overflow clip so a long AI name (e.g. an
Alfredo-prefixed model like "[Base] Claude-3-7-Sonnet") can't
visually overflow the card and collide with neighboring cards
in the grid. The wrap behavior is provided by .builder-pick-name
below; this is the safety net for any edge case where wrap can't
fit the content (extreme widths, custom AIs with single super-
long unbreakable tokens, etc.). */
overflow: hidden;
}
.builder-pick-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-dim);
}
.builder-pick-btn.selected {
border: 2px solid var(--accent);
background: var(--accent-dim);
color: var(--accent);
font-weight: 700;
}
.builder-pick-icon {
width: 36px;
height: 36px;
object-fit: contain;
border-radius: 8px;
}
.builder-pick-name {
font-size: var(--fs-13);
font-weight: 600;
/* v3.32.19 — Allow long AI names to wrap inside the card width.
`word-break: break-word` lets hyphenated model names like
"Claude-3-7-Sonnet" or "GPT-4o-Mini" break at hyphens cleanly;
`overflow-wrap: anywhere` is a fallback for unbreakable tokens
(extremely long single words). `max-width: 100%` keeps the name
within the card's content box. `line-height: 1.25` gives multi-
line names visual breathing room without making single-line
names feel loose. `text-align: center` matches the column
layout's centered alignment so wrapped names remain centered. */
max-width: 100%;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.25;
text-align: center;
}
.builder-selected-badge {
position: absolute;
top: -12px;
right: -10px;
width: 32px;
height: 32px;
object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.custom-ai-form {
margin-top: var(--space-10);
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--space-14);
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.custom-ai-form input {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
color: var(--text);
font-size: var(--fs-13);
padding: var(--space-8) var(--space-12);
outline: none;
}
.custom-ai-form input:focus { border-color: var(--accent); }
.field-lg, .field-sm, .field-goal,
.field-sm { width: 180px; min-width: 0; }
.field-lg:focus, .field-sm:focus, .field-goal:focus, .field-doc:focus { border-color: var(--accent); }
/* ── Doc input tabs ── */
.doc-input-tabs {
display: flex;
gap: var(--space-6);
margin-bottom: var(--space-14);
}
.doc-tab {
background: transparent;
border: 1px solid var(--border2);
color: var(--text-dim);
}
.doc-tab:hover {
border-color: var(--accent);
color: var(--accent);
background: transparent;
}
.doc-tab.active {
background: var(--accent);
border-color: var(--accent);
border-style: solid;
color: #0a0c12;
font-weight: 700;
}
.doc-tab-panel { display: none; }
.doc-tab-panel.active { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
/* Paste panel: fill column height; width = working doc formula */
#panel-paste .proj-ta-editor,
#panel-ref-paste .proj-ta-editor {
flex: 1;
height: auto;
min-height: 0;
width: calc(44px + 80ch + 8px + 12px + 32px);
max-width: calc(44px + 80ch + 8px + 12px + 32px);
}
/* ── Drop zone ── */
.drop-zone {
border: 2px dashed var(--border2);
border-radius: var(--radius-md);
padding: var(--space-40) var(--space-24);
text-align: center;
cursor: pointer;
transition: all 0.18s;
background: var(--surface);
}
.drop-zone:hover, .drop-zone.drag-over {
border-color: var(--accent);
background: var(--accent-dim);
}
.drop-zone-icon { font-size: 36px /* out-of-scale */; margin-bottom: var(--space-10); }
.drop-zone-text { font-size: var(--fs-15); font-weight: 600; color: var(--text); margin-bottom: var(--space-4); }
.drop-zone-sub { font-size: var(--fs-12); color: var(--text-dim); }
.file-status {
margin-top: var(--space-10);
padding: var(--space-10) var(--space-14);
border-radius: var(--radius-sm);
font-size: var(--fs-13);
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
}
.file-status--loading { background: var(--blue-dim); border-color: var(--blue); color: var(--blue); }
.file-status--success { background: var(--green-dim); border-color: var(--green); color: var(--green); }
.file-status--warn { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.file-status--error { background: var(--red-dim); border-color: var(--red); color: var(--red); }
.file-status-line { font-size: var(--fs-11); margin-top: var(--space-4); opacity: 0.85; }
.quota-warn-btn { margin: 4px 0 4px 90px; font-size: 11px; }
.file-clear-row { margin-top: var(--space-6); }
/* ══════════════════════════════════════
SCREEN 4 — WORK SCREEN
══════════════════════════════════════ */
.screen#screen-work { overflow: hidden; }
/* TOP BAR */
.work-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-12);
background: #0a0c12;
border-bottom: none;
gap: var(--space-12);
flex-shrink: 0;
}
[data-theme="light"] .work-topbar { background: #ffffff; }
@media (prefers-color-scheme: light) { [data-theme="auto"] .work-topbar { background: #ffffff; } }
.work-topbar-left {
display: flex;
align-items: center;
gap: var(--space-10);
flex: 1;
min-width: 0;
/* v3.32.21 — Cap the left zone so a long project name can't visually
extend into the absolute-positioned .work-topbar-center round badge
zone. Math: half-of-topbar minus half-of-badge-width minus a small
safety gap. The badge is "Round 4 — Refine" or similar at 17px mono
font with 56px horizontal padding ≈ 280px max width, so half is
~140px; using 150px gives a 10px buffer. The existing
`.work-project-name { text-overflow: ellipsis }` rule then kicks in
correctly as the name competes for the constrained left-zone width.
At wider viewports this still leaves plenty of room for full names;
at laptop widths (~1366px) it cleanly truncates instead of overlapping. */
max-width: calc(50% - 150px);
}
.work-topbar-center {
display: flex;
align-items: center;
gap: var(--space-10);
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.work-topbar-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-6);
flex: 1;
}
/* v3.36.14 / updated v3.36.16 — Vertical divider on the work
topbar separates the action button group (Notes / Reference /
Finish) from the selector / control cluster (Auto toggle +
theme/mute). Auto moved across the divider in v3.36.16 because
it is semantically a state toggle, not an action. */
.work-topbar-divider {
width: 1px;
height: 24px;
background: var(--border);
margin: 0 var(--space-4);
align-self: center;
}
.work-project-info {
display: flex;
align-items: center;
gap: var(--space-8);
min-width: 0;
padding: var(--space-4) var(--space-8);
border-radius: var(--radius-sm);
transition: background 0.15s;
}
.work-project-info:hover {
background: var(--surface2);
}
.work-project-name {
font-family: var(--font-display);
font-size: var(--fs-14);
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.work-project-version {
font-size: var(--fs-11);
background: var(--accent-dim);
border: 1px solid var(--accent);
border-radius: 20px;
color: var(--accent);
padding: 1px var(--space-8);
font-weight: 700;
flex-shrink: 0;
}
.work-start-mode {
font-size: var(--fs-11);
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 20px;
color: var(--text-dim);
padding: 1px var(--space-8);
flex-shrink: 0;
}
/* Phase bar now in topbar — inline layout */
/* .work-phase-pill kept — used by history modal tabs */
.work-phase-pill {
font-size: var(--fs-11);
font-weight: 600;
padding: var(--space-4) var(--space-12);
border-radius: 20px;
border: 1px solid var(--border2);
color: var(--muted);
background: transparent;
white-space: nowrap;
cursor: pointer;
transition: all 0.12s;
}
.work-phase-pill:hover { border-color: var(--accent); color: var(--accent); }
.work-round-badge {
font-family: var(--font-mono);
font-size: 17px /* out-of-scale */;
font-weight: 700;
background: linear-gradient(145deg, #0a0c12, #151820);
border: 1px solid #2a2d3a;
border-radius: 8px;
padding: var(--space-4) var(--space-28);
color: var(--accent);
white-space: nowrap;
letter-spacing: 0.14em;
pointer-events: none;
user-select: none;
box-shadow:
inset 0 2px 6px rgba(0,0,0,0.8),
0 2px 8px rgba(0,0,0,0.5),
0 0 14px rgba(245,166,35,0.18);
text-shadow: 0 0 10px rgba(245,166,35,0.5);
}
[data-theme="light"] .work-round-badge {
background: #ffffff;
border: 2px solid var(--accent);
color: var(--accent);
box-shadow: 0 2px 8px rgba(245,166,35,0.2);
text-shadow: none;
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] .work-round-badge {
background: #ffffff;
border: 2px solid var(--accent);
color: var(--accent);
box-shadow: 0 2px 8px rgba(245,166,35,0.2);
text-shadow: none;
}
}
/* ══════════════════════════════════════
WORK SCREEN — HAMBURGER NAV
══════════════════════════════════════ */
.nav-hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--space-4);
width: 36px;
height: 36px;
background: transparent;
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.15s, background 0.15s;
padding: 0;
}
.nav-hamburger:hover {
border-color: var(--accent);
background: var(--accent-dim);
}
.nav-hamburger span {
display: block;
width: 16px;
height: 2px;
background: var(--text-dim);
border-radius: 2px;
transition: background 0.15s;
}
.nav-hamburger:hover span {
background: var(--accent);
}
.welcome-hamburger {
position: absolute;
top: 20px;
left: 20px;
z-index: 10;
}
.welcome-menu-btn {
position: absolute;
top: 20px;
left: 20px;
z-index: 10;
display: flex;
align-items: center;
gap: var(--space-8);
cursor: pointer;
padding: var(--space-4) var(--space-12) var(--space-4) var(--space-6);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
background: var(--bg2);
transition: border-color 0.15s, background 0.15s;
}
.welcome-menu-btn:hover {
border-color: var(--accent);
background: var(--bg2);
}
.welcome-menu-btn .nav-hamburger {
border: none;
background: transparent;
width: 28px;
height: 28px;
pointer-events: none;
flex-shrink: 0;
}
.welcome-menu-btn:hover .nav-hamburger {
border: none;
background: transparent;
}
.welcome-menu-btn:hover .nav-hamburger span {
background: var(--accent);
}
.welcome-menu-label {
font-family: var(--font-display);
font-size: var(--fs-13);
font-weight: 700;
color: var(--text-dim);
letter-spacing: 0.03em;
transition: color 0.15s;
}
.welcome-menu-btn:hover .welcome-menu-label {
color: var(--accent);
}
.welcome-menu-hint {
font-size: var(--fs-13);
color: var(--text-dim);
text-align: center;
margin: 0 0 var(--space-16) 0;
opacity: 0.8;
}
/* Backdrop */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 900;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
}
.nav-backdrop.open {
opacity: 1;
pointer-events: all;
}
[data-theme="light"] .nav-backdrop { background: rgba(0,0,0,0.25); }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .nav-backdrop { background: rgba(0,0,0,0.25); }
}
/* Panel */
.nav-panel {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 100vh;
background: #0d1017;
border-right: 1px solid var(--border2);
z-index: 901;
display: flex;
flex-direction: column;
padding: 0 0 var(--space-24);
transform: translateX(-100%);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 4px 0 24px rgba(0,0,0,0.5);
overflow: hidden;
}
.nav-panel.open {
transform: translateX(0);
}
[data-theme="light"] .nav-panel {
background: #ffffff;
border-right-color: #e5e7eb;
box-shadow: 4px 0 24px rgba(0,0,0,0.12);
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] .nav-panel {
background: #ffffff;
border-right-color: #e5e7eb;
box-shadow: 4px 0 24px rgba(0,0,0,0.12);
}
}
/* Panel header */
.nav-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-14) var(--space-16);
border-bottom: 1px solid var(--border2);
flex-shrink: 0;
}
[data-theme="light"] .nav-panel-header { border-bottom-color: #e5e7eb; }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .nav-panel-header { border-bottom-color: #e5e7eb; }
}
.nav-panel-brand {
display: flex;
align-items: center;
gap: var(--space-10);
min-width: 0;
}
.nav-panel-brand-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.nav-panel-logo {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
}
.nav-panel-title {
font-family: var(--font-display);
font-size: var(--fs-16);
font-weight: 800;
color: var(--text);
letter-spacing: 0.02em;
line-height: 1.1;
}
.nav-panel-tagline {
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.3;
}
.nav-panel-version {
font-size: 9px /* out-of-scale */;
font-weight: 600;
color: var(--text-dim);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 1px;
line-height: 1.2;
}
/* About button in nav-panel header (v3.22.1) — sits below the version stamp
in the brand block, matches the dashed-button visual language used by other
small chrome buttons. Compact since it lives inside the menu's brand block. */
.nav-panel-about-btn {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-6);
background: transparent;
border: 1px dashed var(--border2);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-family: var(--font);
font-size: var(--fs-11);
padding: var(--space-4) var(--space-8);
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
}
.nav-panel-about-btn:hover {
border-color: var(--accent);
color: var(--text);
}
.nav-close-btn {
background: transparent;
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
color: var(--muted);
font-size: var(--fs-12);
width: 28px;
height: 28px;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.nav-close-btn:hover {
border-color: var(--red);
color: var(--red);
background: var(--red-dim);
}
/* Section labels */
.nav-section-label {
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
padding: var(--space-16) var(--space-16) var(--space-6);
}
/* Nav body — scrollable item list below the fixed header */
.nav-body {
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border2) transparent;
padding-bottom: var(--space-16);
}
/* Nav items */
.nav-item {
display: flex;
align-items: center;
gap: var(--space-10);
width: 100%;
padding: var(--space-10) var(--space-16);
background: transparent;
border: none;
border-radius: 0;
color: var(--text-dim);
font-size: var(--fs-13);
font-weight: 500;
font-family: var(--font-body);
text-decoration: none;
cursor: pointer;
text-align: left;
transition: background 0.12s, color 0.12s;
}
.nav-item:hover {
background: var(--accent-dim);
color: var(--accent);
}
[data-theme="light"] .nav-item { color: #374151; }
[data-theme="light"] .nav-item:hover { background: rgba(245,166,35,0.08); color: var(--accent); }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .nav-item { color: #374151; }
[data-theme="auto"] .nav-item:hover { background: rgba(245,166,35,0.08); color: var(--accent); }
}
/* Divider */
.nav-divider {
height: 1px;
background: var(--border2);
margin: var(--space-8) var(--space-16);
}
[data-theme="light"] .nav-divider { background: #e5e7eb; }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .nav-divider { background: #e5e7eb; }
}
/* ══════════════════════════════════════
WORK SCREEN — 3-COLUMN + FOOTER LAYOUT
══════════════════════════════════════ */
.work-layout {
display: grid;
grid-template-rows: 52px 1fr 64px;
width: 100%;
height: 100%;
overflow: hidden;
}
/* MAIN AREA — 5-column grid, body bg shows through.
Left and right panels are symmetrical (equal min/max). Doc panel is the fixed star (80ch).
Gap columns absorb surplus at ultra-wide only after panels reach max. */
.work-main {
display: grid;
grid-template-columns: minmax(320px, 640px) minmax(0, 0.5fr) auto minmax(0, 0.5fr) minmax(320px, 640px);
overflow: hidden;
min-height: 0;
background: transparent;
}
/* Gap columns — transparent, body honeycomb shows through */
.work-gap {
min-width: 0;
background: transparent;
}
/* ══ LEFT PANEL — transparent, body bg shows through ══ */
.work-left-panel {
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
max-width: 640px;
background: transparent;
}
.left-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
margin: 6px 8px 2px;
flex-shrink: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.left-panel-section-border {
margin-top: 8px;
}
/* Custom AI slots */
/* ── BEE CARDS — horizontal two-zone layout (big screen) ── */
.hex-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
padding: var(--space-6) var(--space-10) var(--space-4);
flex-shrink: 0;
}
.hex-cell {
display: flex;
flex-direction: row;
align-items: stretch;
border: 1px solid var(--border2);
border-radius: 8px;
overflow: hidden;
min-height: 44px;
background: var(--surface2);
cursor: default;
transition: border-color 0.2s, box-shadow 0.2s;
position: relative;
}
/* Left status strip */
.hex-cell::before {
content: '';
display: block;
width: 4px;
flex-shrink: 0;
background: var(--border2);
transition: background 0.2s;
}
/* Body — v3.32.20: was a single horizontal row cramming icon + name +
status (and previously a BUILDER tag); now a vertical stack of two
horizontal rows. Row 1 (.hex-row-identity) carries the checkbox,
provider icon, and AI name; row 2 (.hex-row-status) carries the
Builder Bee role indicator (only on the Builder card) and the live
status text. The split keeps the name from competing horizontally
with status pills + role badges, which is what caused the previous
layout's "[Base] Geh..." mid-name truncation when all elements were
on one line. Card outer height stays the same — the prior single-
row body had generous vertical padding (5px top + 5px bottom = 10px)
that's now absorbed into the second row. See comment at the top of
renderBeeStatusGrid() in app.js for the full punch-list-#8 rationale. */
.hex-cell-body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding: var(--space-4) var(--space-8);
flex: 1;
min-width: 0;
}
.hex-row {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-6);
min-width: 0;
}
.hex-row-identity {
/* Row 1 — primary identification line. Inherits the row defaults;
only present here for selector target if future tweaks need to
differentiate row 1 from row 2 (e.g. different gap or padding). */
}
.hex-row-status {
/* Row 2 — secondary status line. Slight opacity dial-down vs row 1
so the eye lands on identity first, then status. Status colors
(.is-working, .is-done, etc.) override the dim color on the
status text itself, so opacity here only affects the row's
visual weight relative to row 1. */
opacity: 0.95;
}
/* hex-icon-wrap: no-op on big screen — icon sits directly in body */
.hex-icon-wrap {
display: contents;
}
.hex-cell.is-builder { border-color: var(--border2); }
.hex-cell.is-builder::before { background: var(--border2); }
.hex-cell.is-active { border-color: var(--border2); }
.hex-cell.is-active::before { background: var(--border2); }
.hex-cell.is-working,
.hex-cell.is-sending {
border-color: var(--blue);
animation: cardPulse 1s ease-in-out infinite alternate;
}
.hex-cell.is-working::before,
.hex-cell.is-sending::before { background: var(--blue); }
.hex-cell.is-responding {
border-color: var(--purple);
animation: cardPulse 1s ease-in-out infinite alternate;
}
.hex-cell.is-responding::before { background: var(--purple); }
.hex-cell.is-done { border-color: #00b300; }
.hex-cell.is-done::before { background: #00b300; }
.hex-cell.is-error { border-color: #f87171; }
.hex-cell.is-error::before { background: #f87171; }
.hex-cell.is-inactive { opacity: 0.38; }
.hex-cell.is-inactive::before { background: transparent; }
@keyframes cardPulse {
from { box-shadow: 0 0 4px rgba(96,165,250,0.3); }
to { box-shadow: 0 0 14px rgba(96,165,250,0.75); }
}
.hex-toggle {
width: 13px;
height: 13px;
flex-shrink: 0;
accent-color: var(--accent);
cursor: pointer;
}
.hex-icon {
/* v3.32.20 — Was 20x20 in the single-row layout; now 16x16 to fit
the row-1 vertical space in the two-row card. Source PNGs are
256x256 and stay that size; CSS sizing is local to this context. */
width: 16px;
height: 16px;
object-fit: contain;
border-radius: 3px;
flex-shrink: 0;
}
/* Icon initial avatar — shown when real icon fails or is missing */
.hex-icon-avatar {
/* v3.32.20 — match the new .hex-icon size so avatar fallbacks stay
visually identical to the loaded-icon case. */
width: 16px;
height: 16px;
border-radius: 4px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 800;
color: #fff;
line-height: 1;
text-transform: uppercase;
user-select: none;
}
.hex-name {
font-size: var(--fs-11);
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.hex-status {
font-size: 9px /* out-of-scale */;
font-family: var(--font-mono);
color: var(--text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hex-cell.is-working .hex-status,
.hex-cell.is-sending .hex-status { color: var(--blue); }
.hex-cell.is-responding .hex-status { color: var(--purple); }
.hex-cell.is-done .hex-status { color: #00b300; }
.hex-cell.is-error .hex-status { color: #f87171; }
/* v3.32.21 — Restored from v3.32.19 era. Replaces the brief v3.32.20
.hex-builder-bee experiment that put the Builder Bee PNG in the
checkbox slot — at the slot's natural size (~13–14px) the bee
silhouette became unreadable mush. Plaintext "BUILDER" in an amber
chip reads at any size and matches the slot dimensions naturally.
The bee asset stays available in /images/WaxFrame_Builder_v3.png
for places with room (Setup 2 picker, Change Builder modal title). */
.hex-builder-tag {
font-size: 8px /* out-of-scale */;
font-weight: 800;
color: #0a0c12;
background: var(--accent);
border-radius: 3px;
padding: 1px var(--space-4);
letter-spacing: 0.05em;
flex-shrink: 0;
}
/* v3.32.23 — Card-level satisfaction star, sibling of .hex-cell-body.
Sits at the right edge of the card, vertically centered across both
rows. Sized large enough to span the combined row heights as a
visual anchor — this is the at-a-glance "this AI is satisfied"
signal, so it gets the visual weight it deserves rather than being
tucked inline at the end of row 2. The .hex-cell-body has flex:1
and min-width:0 already, so its content (name on row 1, status on
row 2) shrinks via the existing ellipsis rules to leave room for
the star.
Pre-v3.32.23 history:
v3.32.20 and earlier: star was a centered .hex-cell::after overlay
covering the whole card content (obscured row text).
v3.32.21–22: star moved inline on row 2 with margin-left:auto —
better than the overlay but constrained to single-row height
and competed horizontally with status text.
Implementation notes:
• .hex-cell is already display:flex flex-direction:row align-items:stretch
so the star span stretches to full card height; align-items:center
on the span itself centers the glyph vertically within that
stretched footprint.
• flex-shrink:0 keeps the star at full size even when card content
is squeezed at narrow widths.
• padding: 0 8px (v3.32.25, was 12px) matches the .hex-cell-body's
8px left padding so the visible margin from the star glyph to
the card's right edge equals the visible margin from the colored
state strip to the first body content. The 4px strip itself reads
as state ornament rather than empty margin, so 12px on the right
looked perceptually larger than the left's 8px-of-actual-padding.
• font-size 28px ≈ combined height of two rows (16+16+gap) for
visual mass that anchors the card. line-height:1 keeps the
glyph's vertical footprint matched to its rendered size. */
.hex-clean-star {
display: none;
align-items: center;
justify-content: center;
font-size: 28px;
line-height: 1;
color: var(--accent);
flex-shrink: 0;
padding: 0 8px;
user-select: none;
pointer-events: none;
}
.hex-cell.is-clean .hex-clean-star { display: flex; }
[data-theme="light"] .hex-cell.is-clean .hex-clean-star,
[data-theme="auto"] .hex-cell.is-clean .hex-clean-star { color: #d97706; opacity: 1; }
/* ── Edit Hive button — laptop-only (paired with the dot-strip view) ──
At desktop (≥1601px) the full hex-grid AI cards are visible with their
own toggle affordance, so this header button is redundant noise. It
becomes useful again at ≤1600px where cards collapse to dot icons. */
.hive-edit-btn { display: none; }
/* ── Dot strip — hidden on big screens, shown at laptop ── */
.bee-dot-strip { display: none; }
/* ── Edit Hive modal ── */
.edit-hive-modal { max-width: 360px; width: 90vw; }
.edit-hive-list {
display: flex;
flex-direction: column;
gap: 6px;
margin: 12px 0 20px;
max-height: 60vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border2) transparent;
}
.edit-hive-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 8px;
}
.edit-hive-row.is-builder-row { border-color: rgba(245,166,35,0.4); }
.edit-hive-avatar {
width: 24px;
height: 24px;
border-radius: 5px;
flex-shrink: 0;
object-fit: contain;
}
.edit-hive-avatar-letter {
width: 24px;
height: 24px;
border-radius: 5px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
color: #fff;
text-transform: uppercase;
user-select: none;
}
.edit-hive-name {
flex: 1;
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.edit-hive-tag {
font-size: 8px;
font-weight: 800;
color: #0a0c12;
background: var(--accent);
border-radius: 3px;
padding: 2px 5px;
letter-spacing: 0.06em;
flex-shrink: 0;
}
.edit-hive-toggle {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
flex-shrink: 0;
}
/* ── At laptop viewport: show dot strip, hide card grid ── */
@media (max-width: 1600px) {
.hex-grid { display: none; }
.hive-edit-btn { display: inline-flex; }
.bee-dot-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
padding: var(--space-6) var(--space-10) var(--space-6);
flex-shrink: 0;
background: rgba(0,0,0,0.45);
border-radius: 8px;
margin: 2px var(--space-8) var(--space-4);
}
[data-theme="light"] .bee-dot-strip,
.bee-dot-strip-light { background: rgba(0,0,0,0.12); }
/* v3.32.29 — Laptop dot overhaul.
• Ring width bumped from 2px → 5px (bold). Inner space drops from
30px to 24px; the 18px icon still has 3px breathing room each
side.
• Convergence signal added (was missing): when .is-clean is on a
reviewer dot, the surface fill goes transparent and a small ★
overlays in the top-right corner. Builder keeps its gold fill
even when satisfied (identity layer never disappears) — only the
reviewers go transparent. The star appears via .bee-dot-star
child element rather than ::after so the icon's z-index stays
clean and the star can fade-in via opacity transition (display
isn't transitionable; opacity is).
• Custom tooltip on hover/focus replaces the prior native title
attribute. See .bee-dot-tooltip rules below. */
.bee-dot {
position: relative;
width: 34px;
height: 34px;
border-radius: 50%;
border: 5px solid var(--border2);
background: var(--surface2);
display: flex;
align-items: center;
justify-content: center;
cursor: default;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
flex-shrink: 0;
outline: none;
}
.bee-dot:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.bee-dot img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; display: block; }
.bee-dot .bee-dot-avatar {
width: 18px;
height: 18px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 800;
color: #fff;
text-transform: uppercase;
}
/* Satisfaction star — always present in DOM, opacity-toggled via
.is-clean. Sits in the top-right corner overlapping the ring so it
reads as an "additive" satisfaction marker rather than a fill
change. pointer-events:none so it can't intercept hover from the
dot itself. */
.bee-dot-star {
position: absolute;
top: -6px;
right: -6px;
width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
font-size: 12px;
color: #d97706;
background: var(--surface);
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(217,119,6,0.45);
opacity: 0;
transition: opacity 150ms ease;
pointer-events: none;
user-select: none;
}
.bee-dot.is-clean .bee-dot-star { opacity: 1; }
/* State colours for dots */
.bee-dot.is-builder {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 8px rgba(245,166,35,0.6);
}
.bee-dot.is-active { border-color: var(--border2); }
.bee-dot.is-inactive { border-color: transparent; opacity: 0.3; }
.bee-dot.is-sending,
.bee-dot.is-working { border-color: var(--blue); animation: dotPulse 1s ease-in-out infinite alternate; }
.bee-dot.is-responding { border-color: var(--purple); animation: dotPulse 1s ease-in-out infinite alternate; }
.bee-dot.is-done { border-color: #00b300; box-shadow: 0 0 6px rgba(0,179,0,0.5); }
.bee-dot.is-error { border-color: #f87171; }
/* v3.32.29 — Convergence-signal layer. Source order matters: this
block is placed AFTER all role/state rules so its border-color
and box-shadow win for satisfied dots. The :not(.is-builder)
guard preserves the Builder's gold fill even when satisfied —
only standard reviewers go transparent. */
.bee-dot.is-clean {
border-color: #00b300;
box-shadow: 0 0 10px rgba(0,179,0,0.65);
}
.bee-dot.is-clean:not(.is-builder) {
background: transparent;
}
@keyframes dotPulse {
from { box-shadow: 0 0 3px rgba(96,165,250,0.3); }
to { box-shadow: 0 0 10px rgba(96,165,250,0.85); }
}
/* Respect reduced-motion: kill pulses, keep static color cues. */
@media (prefers-reduced-motion: reduce) {
.bee-dot.is-sending,
.bee-dot.is-working,
.bee-dot.is-responding { animation: none; }
.bee-dot-star { transition: none; }
}
}
/* v3.32.29 — Bee-dot custom tooltip. Lives in , positioned via JS
(showBeeTooltip/refreshBeeTooltip in app.js). The 3-line content is
AI name (bold), role (Builder/Reviewer), and live state — the state
line updates as the round progresses without requiring mouseleave/
re-enter. Defined OUTSIDE the laptop @media because the tooltip
element is appended to body and positioned in viewport coords; no
need to media-gate it (the dot strip itself is the only place that
shows it). */
.bee-dot-tooltip {
position: fixed;
display: none;
z-index: 9999;
background: var(--surface);
border: 1px solid var(--border2);
border-radius: 6px;
padding: 7px 10px;
min-width: 140px;
max-width: 260px;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
font-family: var(--font);
pointer-events: none;
user-select: none;
}
.bee-dot-tooltip.is-visible { display: block; }
.bee-dot-tooltip .bdt-name {
font-size: var(--fs-12);
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bee-dot-tooltip .bdt-role {
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 700;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-4);
}
.bee-dot-tooltip .bdt-state {
font-size: var(--fs-11);
font-family: var(--font-mono);
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ══ CENTER PANEL — floats as card over honeycomb ══ */
/* ══════════════════════════════════════
WORKING DOCUMENT PANEL — clean rewrite
══════════════════════════════════════ */
/* Outer card — transparent so the body honeycomb shows through around
the floating glass header strip, matching .work-left-panel and
.work-right-panel. v3.22.7. */
.work-doc-panel {
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
width: calc(44px + 80ch + 8px + 12px + 32px);
font-family: 'Courier New', Courier, monospace;
font-size: var(--fs-13);
flex-shrink: 0;
margin: 0 0 var(--space-8);
background: transparent;
border-radius: 10px 10px 0 0;
}
.work-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-8) var(--space-12);
background: rgba(0,0,0,0.4);
flex-shrink: 0;
border-radius: 12px 12px 0 0;
}
[data-theme="light"] .work-panel-header { background: #ffffff; }
[data-theme="light"] .work-panel-header .work-section-title { color: var(--text); }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .work-panel-header { background: #ffffff; }
[data-theme="auto"] .work-panel-header .work-section-title { color: var(--text); }
}
/* Floating card header — used over honeycomb background. Compound selector beats .work-panel-header specificity; block declared after theme rules so dark text stays forced white in both themes. */
.work-panel-header.honeycomb-header {
margin: var(--space-6) var(--space-8) var(--space-4);
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
padding: var(--space-8) var(--space-12);
}
.work-panel-header.honeycomb-header .work-section-title { color: #ffffff; }
[data-theme="light"] .work-panel-header.honeycomb-header .work-section-title { color: #ffffff; }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .work-panel-header.honeycomb-header .work-section-title { color: #ffffff; }
}
/* Working Document strip is wider than the others because the document
body editor below it spans the full .work-doc-panel width. Zero out
the side margins (top/bottom kept for the floating gap) so the strip
stretches edge-to-edge to align with the document body. Specificity
0,2,0 ties .work-panel-header.honeycomb-header (also 0,2,0) — declared
after, wins by source order. */
.work-doc-panel > .work-panel-header.honeycomb-header {
margin-left: 0;
margin-right: 0;
margin-bottom: var(--space-8);
}
/* Working Document header has two rows: title+buttons (row 1) and the
stats counter (row 2). When the strip wraps a .work-panel-header-row
child, switch the strip from row layout to column layout so the rows
stack. The .work-panel-header-row child carries the original row
layout (title left, buttons right). */
.work-panel-header.honeycomb-header:has(> .work-panel-header-row) {
flex-direction: column;
align-items: stretch;
padding: var(--space-6) var(--space-12) var(--space-4);
}
.work-panel-header-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
/* doc-stats-row, when nested inside the floating glass strip, drops its
own background fills (originally dark in dark mode / white in light
mode) and rides the strip's glass. Centered, slim, sits below the
title+buttons row. */
.work-panel-header.honeycomb-header > .doc-stats-row {
background: transparent;
padding: var(--space-8) 0 0;
min-height: 0;
}
[data-theme="light"] .work-panel-header.honeycomb-header > .doc-stats-row {
background: transparent;
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] .work-panel-header.honeycomb-header > .doc-stats-row {
background: transparent;
}
}
/* The .doc-stats pill chip, when riding the glass strip, keeps its
accent (amber) color and border so it reads as a distinct chip
against the white title and white buttons. Background goes
transparent so it inherits the strip's glass instead of carrying
its own surface2 fill. */
.work-panel-header.honeycomb-header > .doc-stats-row > .doc-stats {
color: var(--accent);
background: transparent;
border-color: var(--accent);
}
[data-theme="light"] .work-panel-header.honeycomb-header > .doc-stats-row > .doc-stats {
color: var(--accent);
background: transparent;
border-color: var(--accent);
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] .work-panel-header.honeycomb-header > .doc-stats-row > .doc-stats {
color: var(--accent);
background: transparent;
border-color: var(--accent);
}
}
/* ══ DOC EDITOR ══ */
/* ══ DOC EDITOR — single scroll container, notebook paper background ══ */
.work-doc-editor {
display: block;
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: auto;
border-radius: 12px;
background: var(--surface);
scrollbar-width: thin;
scrollbar-gutter: stable;
}
.work-doc-editor::-webkit-scrollbar { width: 8px; }
.work-doc-editor::-webkit-scrollbar-track { background: transparent; }
.work-doc-editor::-webkit-scrollbar-thumb { background: rgba(120,120,140,0.55); border-radius: 8px; }
/* Flex row containing gutter + textarea — grows to content height, paper background lives here */
.work-doc-scroll {
display: flex;
align-items: flex-start;
min-height: 100%;
/* Notebook paper — on the content layer so it scrolls with text */
background-color: var(--surface);
background-image:
linear-gradient(to right, transparent 44px, rgba(220,50,50,0.25) 44px, rgba(220,50,50,0.25) 46px, transparent 46px),
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 20px,
rgba(80,140,220,0.18) 20px,
rgba(80,140,220,0.18) 21px
);
background-position: 0 0;
}
/* Gutter — sticky so it stays visible as paper scrolls */
.work-line-numbers {
position: sticky;
left: 0;
top: 0;
width: 44px;
flex: 0 0 44px;
align-self: stretch;
font-family: var(--font-mono);
font-size: var(--fs-13);
line-height: 21px;
color: var(--muted);
text-align: right;
padding: 0 var(--space-6) 0 0;
user-select: none;
background: transparent;
border-right: 1px solid var(--border2);
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: visible;
z-index: 1;
}
.work-line-numbers::-webkit-scrollbar { display: none; }
.work-line-numbers div {
height: 21px;
line-height: 21px;
box-sizing: border-box;
flex-shrink: 0;
padding-right: var(--space-6);
}
.work-line-numbers div.line-highlight {
color: var(--amber);
font-weight: 700;
animation: lineNumPulse 0.8s ease-in-out infinite;
}
@keyframes lineNumPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* Inner wrapper — no scroll, just sizes the textarea correctly */
.work-doc-inner {
flex: 0 0 auto;
position: relative;
font-family: 'Courier New', Courier, monospace;
font-size: var(--fs-13);
background: transparent;
box-sizing: border-box;
width: calc(80ch + 8px + 12px);
}
.work-doc-ta {
position: relative;
z-index: 1;
display: block;
/* EXACT text box: 80ch + only left/right text padding */
width: calc(80ch + 8px + 12px);
min-width: calc(80ch + 8px + 12px);
max-width: calc(80ch + 8px + 12px);
height: auto;
min-height: 0;
margin: 0;
padding: 0 var(--space-12) 0 var(--space-8);
border: none;
outline: none;
resize: none;
overflow: hidden;
box-sizing: border-box;
background: transparent;
color: var(--text);
font-family: 'Courier New', Courier, monospace;
font-size: var(--fs-13);
line-height: 21px;
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-word;
tab-size: 4;
}
.work-doc-ta::selection {
background: var(--accent);
color: #0a0c12;
}
[data-theme="light"] .work-doc-ta::selection {
background: var(--accent);
color: #ffffff;
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] .work-doc-ta::selection {
background: var(--accent);
color: #ffffff;
}
}
.work-doc-rules { display: none; }
.work-doc-right-margin { display: none; }
/* ══ RIGHT PANEL — transparent, body bg shows through ══ */
.work-right-panel {
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
border: none;
max-width: 640px;
background: transparent;
}
/* 3D Digital Clock */
.work-right-logo {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-12);
padding: var(--space-12) var(--space-14);
margin: var(--space-6) var(--space-8) var(--space-4);
flex-shrink: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.work-right-logo-img {
width: 140px;
height: 140px;
object-fit: contain;
filter: drop-shadow(0 0 16px rgba(245,166,35,0.5));
flex-shrink: 0;
}
.work-right-logo-text {
display: flex;
flex-direction: column;
gap: var(--space-4);
text-align: right;
}
.work-right-logo-name {
font-family: var(--font-display);
font-size: var(--fs-28);
font-weight: 800;
color: #ffffff;
line-height: 1;
}
.work-right-logo-tag {
font-size: var(--fs-13);
color: rgba(255,255,255,0.8);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
.work-right-logo-version {
font-size: var(--fs-11);
color: rgba(255,255,255,0.8);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: var(--space-4);
}
/* ══ RESPONSIVE BREAKPOINTS ══
Doc panel is the fixed star at all sizes.
Side panels compress; gaps absorb surplus at ultra-wide.
══════════════════════════════════════════════════════ */
/* Ultra-wide (4K / 5K / curved widescreen) — let gaps soak up extra space naturally,
panels already capped at 640px so nothing stretches beyond that. No overrides needed. */
/* Laptop tier (1366–1600) — single canonical block.
v3.34.0: replaced the prior 1700/1500/1600 cascade. The 1500 block
was fully overridden by 1600 (cascade-order bug). The 1700 block
created a hard step at the desktop boundary. Now: Desktop uses
base rules; Laptop uses this single canonical block. Tag and
version REMAIN VISIBLE per the compaction principle — only their
font-size shrinks. */
@media (max-width: 1600px) {
/* work-right-logo — compact but information-preserving */
.work-right-logo-img { width: 56px; height: 56px; }
.work-right-logo-name { font-size: var(--fs-15); }
.work-right-logo-tag { font-size: 9px /* out-of-scale */; letter-spacing: 0.05em; }
.work-right-logo-version { font-size: 8px /* out-of-scale */; letter-spacing: 0.05em; margin-top: 2px; }
.work-right-logo { padding: var(--space-6) var(--space-8); gap: var(--space-8); margin: var(--space-4) var(--space-4) var(--space-4); }
/* Work-main panels compress */
.work-main {
grid-template-columns: minmax(300px, 380px) 0 auto 0 minmax(300px, 380px);
}
.dcw-digits { font-size: 16px; }
.dcw-label-top { font-size: 9px; }
.dcw-label-bot { font-size: 9px; }
.left-panel-header { padding: 5px 8px; margin: 4px 5px 2px; }
/* Setup Page 2 — hide bee, tighten padding */
/* Compress length constraint box */
.length-constraint-desc { display: none; }
.length-constraint-header { margin-bottom: var(--space-4); }
/* Goal area: fixed height at laptop — full width, refine panel replaced by button+popover */
/* Compress launch requirements: smaller text, no wrap, truncate doc label */
.launch-requirements { gap: 8px; font-size: 12px; flex-wrap: nowrap; overflow: hidden; }
.launch-req-item { font-size: var(--fs-11); white-space: nowrap; }
.launch-req-title { font-size: var(--fs-11); }
/* Truncate the long document requirement label */
#req-doc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* Shrink setup page 1 action buttons */
.bee-controls-row-setup .btn { font-size: var(--fs-11); padding: var(--space-4) var(--space-10); }
/* ── Overlay animations — scale to ~50% at laptop viewport ── */
/* Smoker bee */
.smoker-hero-img { width: 210px; height: 210px; margin-top: var(--space-20); }
.smoker-overlay-label { font-size: var(--fs-16); }
.smoker-subtitle { font-size: var(--fs-11); max-width: 280px; }
/* Builder station */
.builder-scene-wrap { width: 380px; }
.builder-stage { padding: var(--space-16) var(--space-18) var(--space-12); gap: var(--space-6); }
.builder-belt-track { height: 35px; bottom: 30%; }
.builder-block { width: 55px; height: 30px; gap: 2px; border-radius: 4px; }
.builder-block-icon { width: 12px; height: 12px; }
.builder-block-name { font-size: 7px /* out-of-scale */; }
.builder-station-sparks { width: 70px; height: 70px; left: calc(80% + 10px); top: 63%; }
.builder-station-sparks span { width: 3px; height: 3px; }
.builder-station-sparks span:nth-child(1) { --dx: 9px; --dy: 30px; }
.builder-station-sparks span:nth-child(2) { --dx: 14px; --dy: 40px; }
.builder-station-sparks span:nth-child(3) { --dx: 32px; --dy: 15px; }
.builder-station-sparks span:nth-child(4) { --dx: 22px; --dy: 35px; }
.builder-station-sparks span:nth-child(5) { --dx: 5px; --dy: 50px; }
.builder-station-sparks span:nth-child(6) { --dx: -20px; --dy: 22px; }
.builder-station-sparks span:nth-child(7) { --dx: 11px; --dy: 37px; }
.builder-station-sparks span:nth-child(8) { --dx: 17px; --dy: 47px; }
.builder-station-sparks span:nth-child(9) { --dx: 35px; --dy: 12px; }
.builder-station-sparks span:nth-child(10) { --dx: 23px; --dy: 55px; }
.builder-station-sparks span:nth-child(11) { --dx: 13px; --dy: 32px; }
.builder-station-sparks span:nth-child(12) { --dx: -15px; --dy: 27px; }
.builder-overlay-label { font-size: var(--fs-14); }
/* Builder belt block exit keyframe scale — blocks start/end positions halved */
@keyframes builderBlockExit {
from { transform: translateX(330px); opacity: 0; }
6% { opacity: 1; }
70% { opacity: 1; }
85% { opacity: 0; }
to { transform: translateX(-70px); opacity: 0; }
}
/* Hive finish approved bee */
.hive-finish-bee-img { width: min(85vw, 290px); }
.hive-finish-tagline { font-size: clamp(1rem, 2.5vw, 1.4rem); }
}
/* ══ UNIFIED DUAL-FACE CLOCK WIDGET ══ */
.dual-clock-widget {
margin: 4px 8px 2px;
flex-shrink: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
padding: 6px 8px;
}
.dcw-bezel {
background: linear-gradient(145deg, #0a0c12, #151820);
border-radius: 8px;
border: 1px solid #1a1d2a;
box-shadow:
inset 0 2px 6px rgba(0,0,0,0.8),
inset 0 -1px 2px rgba(255,255,255,0.05),
0 4px 12px rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.08);
display: flex;
flex-direction: row;
align-items: stretch;
padding: 8px 10px;
gap: 0;
}
.dcw-face {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 8px;
}
.dcw-divider {
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.12), transparent);
margin: 2px 0;
flex-shrink: 0;
}
.dcw-label-top {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: #9aa3b8;
text-transform: uppercase;
font-weight: 600;
text-align: center;
}
.dcw-screen {
background: linear-gradient(180deg, #050608 0%, #0a0d14 100%);
border-radius: 4px;
padding: 5px 10px;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.9), inset 0 0 16px rgba(245,166,35,0.03);
border: 1px solid #0d0f18;
width: 100%;
text-align: center;
}
/* dcw-digits — JS adds/removes .running and .paused on these by ID */
.dcw-digits {
font-family: var(--font-mono);
font-size: 19px;
font-weight: 700;
color: #4a5270;
letter-spacing: 0.1em;
transition: color 0.3s, text-shadow 0.3s;
display: block;
white-space: nowrap;
}
.dcw-digits.running {
color: #00b300;
text-shadow: 0 0 10px rgba(0,179,0,0.6), 0 0 28px rgba(0,179,0,0.2);
}
/* Round clock status label */
.dcw-label-bot {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: #6a7090;
text-transform: uppercase;
transition: color 0.3s;
text-align: center;
}
.dcw-label-bot.running { color: #00b300; }
/* Project clock — amber digits when running */
.dcw-digits-project.running {
color: var(--accent);
text-shadow: 0 0 10px rgba(245,166,35,0.6), 0 0 28px rgba(245,166,35,0.2);
}
/* Project clock paused — slow amber flash */
.dcw-digits-project.paused {
color: var(--accent);
animation: projClockPausedFlash 1.4s ease-in-out infinite;
}
@keyframes projClockPausedFlash {
0% { opacity: 1; }
50% { opacity: 0.25; }
100% { opacity: 1; }
}
/* Project clock controls */
.dcw-controls {
display: flex;
justify-content: center;
gap: 5px;
}
.dcw-ctrl-btn {
background: transparent;
border: 1px solid #2a2d3a;
border-radius: 4px;
color: #4a5270;
font-size: 11px;
padding: 2px 8px;
cursor: pointer;
transition: all 0.12s;
font-family: var(--font-mono);
line-height: 1.4;
}
.dcw-ctrl-btn:not(.active):hover { border-color: var(--accent); color: var(--accent); }
/* Active states — green when running (Start pressed), amber when paused (Pause pressed).
Matches the semantic mapping used by the clock digits: running digits are green,
paused digits flash amber. The :hover rule above excludes .active so we don't need
!important — hover and active never compete on the same element. */
.dcw-ctrl-btn--start.active {
border-color: #00b300;
color: #00b300;
}
.dcw-ctrl-btn--pause.active {
border-color: var(--accent);
color: var(--accent);
}
/* Light theme overrides */
[data-theme="light"] .dual-clock-widget { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .dcw-bezel { background: linear-gradient(145deg, #e8eaf0, #ffffff); border-color: #d0d4e8; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.1); }
[data-theme="light"] .dcw-screen { background: linear-gradient(180deg, #f0f2f8 0%, #e8eaf4 100%); border-color: #d0d4e8; box-shadow: inset 0 1px 4px rgba(0,0,0,0.1); }
[data-theme="light"] .dcw-digits { color: #1a1d2a; }
[data-theme="light"] .dcw-digits.running { color: #00b300; text-shadow: 0 0 8px rgba(0,179,0,0.5); }
[data-theme="light"] .dcw-digits-project.running { color: var(--accent); text-shadow: 0 0 8px rgba(245,166,35,0.5); }
[data-theme="light"] .dcw-digits-project.paused { color: var(--accent); }
[data-theme="light"] .dcw-label-top { color: #384060; }
[data-theme="light"] .dcw-label-bot { color: #384060; }
[data-theme="light"] .dcw-label-bot.running { color: #00b300; }
[data-theme="light"] .dcw-ctrl-btn { border-color: #7880a0; color: #384060; }
[data-theme="light"] .dcw-ctrl-btn:not(.active):hover { border-color: var(--accent); color: var(--accent); }
[data-theme="light"] .dcw-ctrl-btn--start.active {
border-color: #00b300;
color: #00b300;
}
[data-theme="light"] .dcw-ctrl-btn--pause.active {
border-color: var(--accent);
color: var(--accent);
}
[data-theme="light"] .dcw-divider { background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.12), transparent); }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .dual-clock-widget { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.1); }
[data-theme="auto"] .dcw-bezel { background: linear-gradient(145deg, #e8eaf0, #ffffff); border-color: #d0d4e8; }
[data-theme="auto"] .dcw-screen { background: linear-gradient(180deg, #f0f2f8 0%, #e8eaf4 100%); border-color: #d0d4e8; }
[data-theme="auto"] .dcw-digits { color: #1a1d2a; }
[data-theme="auto"] .dcw-digits.running { color: #00b300; text-shadow: 0 0 8px rgba(0,179,0,0.5); }
[data-theme="auto"] .dcw-digits-project.running { color: var(--accent); text-shadow: 0 0 8px rgba(245,166,35,0.5); }
[data-theme="auto"] .dcw-digits-project.paused { color: var(--accent); }
[data-theme="auto"] .dcw-label-top { color: #7880a0; }
[data-theme="auto"] .dcw-label-bot { color: #7880a0; }
[data-theme="auto"] .dcw-ctrl-btn { border-color: #7880a0; color: #384060; }
[data-theme="auto"] .dcw-ctrl-btn--start.active {
border-color: #00b300;
color: #00b300;
}
[data-theme="auto"] .dcw-ctrl-btn--pause.active {
border-color: var(--accent);
color: var(--accent);
}
[data-theme="auto"] .dcw-divider { background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.12), transparent); }
}
/* ── FOOTER BAR ── */
.work-footer {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 var(--space-20);
background: #0a0c12;
border-top: none;
gap: var(--space-16);
}
[data-theme="light"] .work-footer { background: #ffffff; }
@media (prefers-color-scheme: light) { [data-theme="auto"] .work-footer { background: #ffffff; } }
/* ── LIGHT MODE BUTTONS — split by background context ──────────────────
Dark-bg headers (left-panel, honeycomb/console): white text, amber fill hover
Light-bg headers (work-panel, topbar): dark text, amber fill hover
Footer smoke: always white text (filled amber button)
─────────────────────────────────────────────────────────────────── */
/* Dark-background headers — white text */
[data-theme="light"] .left-panel-header .btn,
[data-theme="light"] .honeycomb-header .btn {
color: #ffffff; border-color: rgba(255,255,255,0.5); background: transparent;
}
[data-theme="light"] .left-panel-header .btn:hover,
[data-theme="light"] .honeycomb-header .btn:hover {
color: #0a0c12; border-color: var(--accent); background: var(--accent);
}
/* Light-background headers — dark text, amber fill hover.
v3.36.29: scoped with :not(.btn-accent) so .btn-accent buttons
(e.g. the always-lit Finish button) keep their accent treatment
from the .btn-accent rule at L325 instead of getting flattened
to neutral here. Replaces the v3.36.28 work-topbar .btn.btn-accent
override block — fix at source rather than parallel rules. */
[data-theme="light"] .work-topbar .btn:not(.btn-accent),
[data-theme="light"] .work-panel-header .btn:not(.btn-accent) {
color: #1a1d2a; border-color: #9aa3b8; background: transparent;
}
[data-theme="light"] .work-topbar .btn:not(.btn-accent):hover,
[data-theme="light"] .work-panel-header .btn:not(.btn-accent):hover {
color: #0a0c12; border-color: var(--accent); background: var(--accent);
}
/* Footer buttons */
[data-theme="light"] .footer-btn { color: #1a1d2a; border-color: #9aa3b8; }
[data-theme="light"] .footer-btn:hover { color: #0a0c12; border-color: var(--accent); background: var(--accent-dim); }
[data-theme="light"] .footer-btn-smoke { color: #ffffff; }
[data-theme="light"] .footer-btn-smoke span { color: #ffffff; }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .left-panel-header .btn,
[data-theme="auto"] .honeycomb-header .btn {
color: #ffffff; border-color: rgba(255,255,255,0.5); background: transparent;
}
[data-theme="auto"] .left-panel-header .btn:hover,
[data-theme="auto"] .honeycomb-header .btn:hover {
color: #0a0c12; border-color: var(--accent); background: var(--accent);
}
[data-theme="auto"] .work-topbar .btn:not(.btn-accent),
[data-theme="auto"] .work-panel-header .btn:not(.btn-accent) {
color: #1a1d2a; border-color: #9aa3b8; background: transparent;
}
[data-theme="auto"] .work-topbar .btn:not(.btn-accent):hover,
[data-theme="auto"] .work-panel-header .btn:not(.btn-accent):hover {
color: #0a0c12; border-color: var(--accent); background: var(--accent);
}
[data-theme="auto"] .footer-btn { color: #1a1d2a; border-color: #9aa3b8; }
[data-theme="auto"] .footer-btn:hover { color: #0a0c12; border-color: var(--accent); background: var(--accent-dim); }
[data-theme="auto"] .footer-btn-smoke { color: #ffffff; }
[data-theme="auto"] .footer-btn-smoke span { color: #ffffff; }
}
/* Console header has both classes — honeycomb wins for button color */
[data-theme="light"] .work-panel-header.honeycomb-header .btn {
color: #ffffff; border-color: rgba(255,255,255,0.5); background: transparent;
}
[data-theme="light"] .work-panel-header.honeycomb-header .btn:hover {
color: #0a0c12; border-color: var(--accent); background: var(--accent);
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] .work-panel-header.honeycomb-header .btn {
color: #ffffff; border-color: rgba(255,255,255,0.5); background: transparent;
}
[data-theme="auto"] .work-panel-header.honeycomb-header .btn:hover {
color: #0a0c12; border-color: var(--accent); background: var(--accent);
}
}
.footer-status {
font-size: var(--fs-13);
font-style: italic;
color: rgba(255,255,255,0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="light"] .footer-status { color: #0a0c12; }
@media (prefers-color-scheme: light) { [data-theme="auto"] .footer-status { color: #0a0c12; } }
.footer-actions {
display: flex;
gap: var(--space-12);
align-items: center;
}
.footer-btn {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 2px solid var(--accent);
border-radius: var(--radius-sm);
cursor: pointer;
padding: var(--space-8) var(--space-40);
transition: all 0.15s;
min-width: 200px;
}
.footer-btn:hover {
background: var(--accent-dim);
transform: translateY(-1px);
}
.footer-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.footer-btn-smoke {
display: flex;
align-items: center;
justify-content: center;
background: var(--accent);
border: 2px solid var(--accent);
border-radius: var(--radius-sm);
cursor: pointer;
padding: var(--space-8) var(--space-40);
min-width: 200px;
transition: all 0.15s;
}
.footer-btn-smoke:hover {
background: #ffffff;
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(245,166,35,0.5);
}
.footer-btn-smoke:hover span { color: var(--accent); }
.footer-btn-smoke:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.footer-btn-smoke.running {
animation: shakePulse 0.8s ease-in-out infinite alternate;
}
.footer-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-6);
}
/* About button in work-screen footer (v3.22.0) — sits next to the license pill,
visually quieter than the action buttons in the same footer. */
.footer-about-btn {
display: inline-flex;
align-items: center;
gap: var(--space-4);
background: transparent;
border: 1px dashed var(--border2);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-family: var(--font);
font-size: var(--fs-12);
padding: var(--space-4) var(--space-10);
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
}
.footer-about-btn:hover {
border-color: var(--accent);
color: var(--text);
}
.bee-status-card.is-active { border-color: var(--border2); }
.bee-status-card.is-inactive { opacity: 0.45; }
.bee-status-card.is-builder { border-color: var(--accent); background: var(--accent-dim); }
.bee-status-card.is-working { border-color: var(--blue); background: var(--blue-dim); }
.bee-status-card.is-sending { border-color: var(--blue); background: var(--blue-dim); }
.bee-status-card.is-responding { border-color: var(--purple); background: var(--purple-dim); }
.bee-status-card.is-done { border-color: var(--green); }
.bee-status-card.is-error { border-color: var(--red); background: var(--red-dim); }
/* ROUND HISTORY */
.round-history {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.round-history-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 16px 0; }
/* STATUS BAR */
/* ── SETUP STEP BADGE ── */
.setup-step-badge {
background: var(--accent-dim);
border: 1px solid var(--accent);
border-radius: 20px;
color: var(--accent);
font-size: var(--fs-12);
font-weight: 700;
padding: var(--space-4) var(--space-12);
}
/* ── BEE CONTROLS ROW ── */
.bee-controls-row {
display: flex;
align-items: center;
gap: var(--space-6);
margin-bottom: var(--space-10);
flex-wrap: wrap;
}
/* ── BUILDER PICK GRID LARGE ── */
.builder-pick-grid-large {
display: grid;
/* v3.27.7: explicit 3 columns instead of auto-fill, minmax(175px, 1fr).
With the default 6 AIs this produces a 3+3 layout (two balanced rows)
and the cards flex to fill horizontal space — so they grow to ~500px
each at typical desktop widths and feel substantial against the tall
amber header band. For non-multiple-of-3 hive counts (4, 5, 7, 8…) the
last row may be partial; that's an acceptable trade for the balanced
visual the default 6-AI hive produces. */
grid-template-columns: repeat(3, 1fr);
gap: var(--space-14);
margin-bottom: var(--space-8);
}
.builder-pick-grid-large .builder-pick-btn {
flex-direction: column;
align-items: center;
gap: var(--space-14);
/* v3.27.7: bumped padding 20px 12px 14px → 28px 16px 22px for more
vertical presence to fill the wider card width. */
padding: var(--space-28) var(--space-16) 22px;
font-size: var(--fs-15);
text-align: center;
justify-content: center;
/* v3.27.9: lock aspect-ratio so cards grow proportionally in both
dimensions as the viewport widens, instead of stretching only
horizontally and progressively letterboxing. 2:1 keeps cards a
deliberate landscape shape that scales naturally — at laptop widths
each card is ~470×235, at full desktop ~540×270, with content
centered in the available space at every size. */
/* v3.34.1: aspect-ratio 2/1 → 2.6/1. At desktop-tier widths above
the laptop compaction trigger (1872×938 in particular), the prior
2:1 ratio made cards ~215px tall apiece, and two rows + bee mascot
+ amber band + Continue button overflowed the viewport, forcing
scroll. 2.6:1 keeps cards feeling substantial while pulling height
down enough that the full Setup 2 page fits in 938+ tall viewports
without scroll. Cards remain landscape and visually grounded. */
aspect-ratio: 2.6 / 1;
}
/* v3.27.7: scoped icon + name overrides for the large variant only. The
small builder-pick-grid (used in the change-builder modal) retains
36px / 13px sizing.
v3.34.2: moved ABOVE the @media compaction block. Previously these
were declared after the @media, so they stomped the compaction's
icon/name overrides (cascade-order bug — same pattern as the
work-right-logo fix in v3.34.0). At laptop tier the compaction's
icon: 32px and name: 13px were silently overridden by the 56px and
15px values here. Now compaction properly wins inside its tier. */
.builder-pick-grid-large .builder-pick-icon {
width: 56px;
height: 56px;
}
.builder-pick-grid-large .builder-pick-name {
font-size: var(--fs-15);
}
/* v3.27.10: shrink Builder cards at laptop widths (≤1421px = the project's
established laptop threshold) and when vertically compact (≤900px tall =
devtools open, smaller laptops). Cards at full desktop (1422px+ wide AND
900px+ tall) keep the v3.27.7/v3.27.9 sizing — at laptop sizes those
numbers eat too much vertical space, especially with devtools open.
v3.27.11: pulled cards down significantly further — aspect 2.6→3.2,
icon 42→32, padding 20/14/16→14/12/12, font 14→13. The v3.27.10 numbers
were still too tall at 1422×811. Target ~⅔ of v3.27.10 height.
v3.34.1: width trigger updated from non-canonical 1421px → canonical
Laptop boundary 1600px. Now fires across the full Laptop tier instead
of just the bottom 55px of it. Height trigger 900px unchanged (canonical
Short tier). Logic: compact whenever in Laptop tier OR Short tier. */
@media (max-width: 1600px), (max-height: 900px) {
.builder-pick-grid-large .builder-pick-btn {
padding: var(--space-12) var(--space-12) var(--space-10);
gap: var(--space-6);
aspect-ratio: 3.8 / 1;
}
.builder-pick-grid-large .builder-pick-icon {
width: 32px;
height: 32px;
}
.builder-pick-grid-large .builder-pick-name {
font-size: var(--fs-13);
}
}
/* ── SECTION BEE IMAGE ── */
/* ── CUSTOM AI FORM ── */
.custom-ai-form-title {
font-weight: 700;
font-size: var(--fs-14);
margin-bottom: var(--space-12);
color: var(--text);
}
.custom-ai-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
}
.custom-ai-field-wrap {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.custom-ai-field-wrap label {
font-size: var(--fs-11);
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.custom-ai-field-wrap input,
.custom-ai-select {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font);
font-size: var(--fs-13);
padding: var(--space-6) var(--space-10);
outline: none;
transition: border-color 0.12s;
width: 100%;
}
.custom-ai-field-wrap input:focus,
.custom-ai-select:focus { border-color: var(--accent); }
/* ── Add Custom AI Modal ── */
.custom-ai-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-24);
backdrop-filter: blur(4px);
}
.custom-ai-modal-overlay.active { display: flex; }
/* Import server modal overrides overlay padding so it can go full-bleed */
.custom-ai-modal-overlay:has(.import-server-modal) {
padding: 0;
}
.custom-ai-modal {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-28) var(--space-32);
width: 100%;
max-width: 760px;
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.custom-ai-modal-hdr {
display: flex;
align-items: center;
gap: var(--space-16);
padding-bottom: var(--space-16);
border-bottom: 1px solid var(--border2);
}
.custom-ai-modal-bee { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
/* v3.56.6 — the header info button was moved inline next to the title and
reclassed to the standard .goal-info-btn (was a far-right circle via
.custom-ai-info-btn, which margin-left:auto'd it to the edge — inconsistent
with every other info button). The three .custom-ai-info-btn rules were
removed as dead CSS (that class had a single call site). */
/* Body styling for the info modal — uses the standard custom-ai-modal
shell but adds explanatory-prose styling. */
.custom-ai-info-body {
font-size: var(--fs-13);
line-height: 1.6;
color: var(--text);
}
.custom-ai-info-body h4.custom-ai-info-h {
margin: var(--space-16) 0 var(--space-6) 0;
font-size: var(--fs-13);
font-weight: 700;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.custom-ai-info-body p { margin: 0 0 var(--space-8) 0; }
.custom-ai-info-body ul { margin: var(--space-4) 0 var(--space-12) 0; padding-left: var(--space-20); }
.custom-ai-info-body li { margin: 2px 0; }
.custom-ai-info-body code {
font-family: 'Courier New', monospace;
font-size: var(--fs-12);
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 4px;
padding: 1px var(--space-4);
color: var(--text-dim);
}
.custom-ai-info-tip {
background: var(--surface2);
border-left: 3px solid var(--accent);
padding: var(--space-10) var(--space-12);
border-radius: 4px;
margin-bottom: var(--space-16);
font-size: var(--fs-13);
line-height: 1.55;
}
.import-server-modal .custom-ai-modal-bee { width: 120px; height: 120px; }
.custom-ai-modal-title { font-family: var(--font-display); font-size: var(--fs-18); font-weight: 800; color: var(--text); }
.custom-ai-modal-sub { font-size: var(--fs-13); color: var(--text-dim); margin-top: 2px; }
.custom-ai-form-footer {
display: flex;
justify-content: flex-end;
gap: var(--space-8);
margin-top: var(--space-12);
padding-top: var(--space-10);
border-top: 1px solid var(--border);
}
.field-required { color: var(--red); }
.field-optional { color: var(--muted); font-weight: 400; }
.custom-ai-field-wrap--model { flex: 1; }
.custom-ai-quickadd-row { align-items: flex-end; }
.custom-ai-field-wrap--keylinkwrap { flex: 0 0 auto; min-width: 0; }
.custom-ai-key-link {
display: block;
font-size: var(--fs-12);
color: var(--accent);
text-decoration: none;
white-space: nowrap;
padding: var(--space-6) 0;
}
.custom-ai-key-link:hover { text-decoration: underline; }
/* v3.29.8 — provider docs link sits below the Get API key link, in a
muted color so it reads as secondary. Same shape and hover behavior. */
.custom-ai-provider-help-link {
color: var(--text-dim);
}
.custom-ai-provider-help-link:hover {
color: var(--accent);
}
/* v3.29.11 — Shared icon uploader widget, used in both the Add a Custom
Worker Bee modal and the Import from Model Server modal. Layout:
[📷 Upload Icon] [preview 56×56 with × clear btn] help text
Empty state: only the upload button + help text are visible. Once an
icon is loaded, the preview box appears and the clear × becomes
visible. v3.32.16: the upload button text is always "📷 Upload Icon"
regardless of state — the prior flip to "🔄 Replace Icon" was removed
because the button does the same thing in both states. Help text and
× clear button are hidden when no icon is loaded — the `.has-icon`
class on the wrap gates them in. */
.custom-ai-icon-uploader {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.custom-ai-icon-preview-box {
position: relative;
width: 56px;
height: 56px;
flex-shrink: 0;
border: 1px dashed var(--border2);
border-radius: 8px;
background: var(--surface2);
display: none;
align-items: center;
justify-content: center;
overflow: visible;
}
.custom-ai-icon-uploader.has-icon .custom-ai-icon-preview-box {
display: flex;
border-style: solid;
border-color: var(--border);
}
.custom-ai-icon-preview-box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 6px;
}
.custom-ai-icon-clear-btn {
position: absolute;
top: -8px;
right: -8px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--border2);
background: var(--surface);
color: var(--text);
font-size: var(--fs-14);
font-weight: 700;
line-height: 1;
cursor: pointer;
padding: 0;
display: none;
align-items: center;
justify-content: center;
}
.custom-ai-icon-uploader.has-icon .custom-ai-icon-clear-btn {
display: flex;
}
.custom-ai-icon-clear-btn:hover {
background: var(--red);
color: #fff;
border-color: var(--red);
}
.custom-ai-icon-help {
font-size: var(--fs-11);
color: var(--text-dim);
font-style: italic;
}
/* ── v3.32.15 — Server-icon presets row in Import Server modal ──
Quick-pick buttons for known runtime icons (Alfredo, LM Studio,
Open WebUI, Together, Generic). Click sets the preview as if the
user had uploaded that icon. Selected state mirrors whatever the
preview is currently showing — driven from JS in
highlightImportServerIconPreset(). The blurb above sets context;
the row sits between the blurb and the existing upload control,
so the visual flow is: explain → pick a preset → or upload your
own → preview at right. */
.import-server-icon-help-blurb {
font-size: 12px;
color: var(--text-dim);
margin: 4px 0 8px;
line-height: 1.4;
}
.import-server-icon-presets {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
margin-bottom: var(--space-10);
}
.import-server-icon-preset {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
padding: var(--space-8) var(--space-10) var(--space-6);
background: var(--surface2);
border: 1px dashed var(--border2);
border-radius: 8px;
cursor: pointer;
transition: border-color 0.12s, background 0.12s, transform 0.08s;
min-width: 72px;
}
.import-server-icon-preset:hover {
border-color: var(--accent);
background: var(--accent-dim);
}
.import-server-icon-preset:active {
transform: scale(0.97);
}
.import-server-icon-preset img {
width: 28px;
height: 28px;
object-fit: contain;
border-radius: 4px;
}
.import-server-icon-preset span {
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 600;
color: var(--text-dim);
letter-spacing: 0.02em;
}
.import-server-icon-preset.is-selected {
border-style: solid;
border-color: var(--accent);
background: var(--accent-dim);
}
.import-server-icon-preset.is-selected span {
color: var(--accent);
}
/* v3.29.11 — Two-column model row layout for the Add a Custom Worker
Bee modal. Left column: the existing Model input + Fetch Models +
Browse-models link. Right column: big icon preview + upload button.
Uses a flex split so the right column stays a fixed comfortable
width while the left grows. The variant classes (--big, --iconcol)
only apply to this layout — the import-server modal still uses the
inline horizontal uploader (defined above).
Live preview behavior (driven from JS):
- The ![]()
is always present in DOM; src is set by JS.
- The .custom-ai-icon-preview-empty placeholder shows when nothing's
loaded (no upload, no catalog match). Suppressed when .has-icon
is on the wrap.
- The × clear button only matters for user uploads; it's hidden
when the preview is showing a catalog match (the user can't
"clear" something they didn't upload). Driven by .has-user-icon. */
.custom-ai-model-row {
display: flex;
gap: 24px;
align-items: flex-start;
}
.custom-ai-field-wrap--model {
flex: 1;
min-width: 0;
}
.custom-ai-field-wrap--iconcol {
flex: 0 0 auto;
width: 140px;
display: flex;
flex-direction: column;
}
.custom-ai-icon-uploader--big {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-8);
}
.custom-ai-icon-preview-box--big {
/* v3.32.32 — dropped the `!important` on display: flex. The element
carries both .custom-ai-icon-preview-box (sets display: none) and
.custom-ai-icon-preview-box--big together; both rules are at
specificity (0,1,0), so source order wins, and the --big rule
comes later in the stylesheet so its display: flex wins cleanly.
When .has-icon lands on the parent, the (0,2,0) rule above
reinforces flex. The !important was preemptive overcaution —
same pattern v3.27.5 cleaned up on .btn-sm. */
width: 96px;
height: 96px;
border: 1px dashed var(--border2);
border-radius: 12px;
background: var(--surface2);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: visible;
}
.custom-ai-icon-preview-box--big img {
max-width: 80px;
max-height: 80px;
object-fit: contain;
border-radius: 8px;
display: none;
}
.custom-ai-icon-uploader--big.has-icon .custom-ai-icon-preview-box--big {
border-style: solid;
border-color: var(--border);
background: var(--surface);
}
.custom-ai-icon-uploader--big.has-icon .custom-ai-icon-preview-box--big img {
display: block;
}
.custom-ai-icon-preview-empty {
font-size: var(--fs-11);
color: var(--text-dim);
text-align: center;
font-style: italic;
padding: 0 var(--space-8);
display: block;
}
.custom-ai-icon-uploader--big.has-icon .custom-ai-icon-preview-empty {
display: none;
}
/* Clear × button only visible when user uploaded a real icon — not
for catalog-matched previews, since those aren't "theirs to clear" */
.custom-ai-icon-uploader--big .custom-ai-icon-clear-btn {
display: none;
}
.custom-ai-icon-uploader--big.has-user-icon .custom-ai-icon-clear-btn {
display: flex;
}
.custom-ai-icon-uploader--big .custom-ai-icon-help {
text-align: center;
font-size: var(--fs-11) /* snapped from 10px */;
}
/* Subtle visual differentiator between user-uploaded and catalog-matched
previews — solid border for user upload, dashed (slightly muted) for
auto-suggested. Helps users understand what they're seeing. */
.custom-ai-icon-uploader--big:not(.has-user-icon).has-icon .custom-ai-icon-preview-box--big {
border-style: dashed;
opacity: 0.92;
}
/* v3.32.16 — Upload + Browse Icons buttons sit side-by-side under the
preview in the Custom AI modal. The 140px iconcol is narrow — buttons
stack with a small gap and use compact padding so both fit at standard
sizes. Browse Icons opens openIconPicker (full bundled catalog) for
when the user's model name doesn't trigger auto-detect and they don't
want to upload their own. */
.custom-ai-icon-actions {
display: flex;
flex-direction: column;
gap: var(--space-4);
width: 100%;
align-items: stretch;
}
.custom-ai-icon-actions .btn {
width: 100%;
padding: var(--space-4) var(--space-8);
font-size: var(--fs-11);
white-space: nowrap;
}
.custom-ai-model-input-wrap {
display: flex;
gap: var(--space-6);
align-items: center;
}
.custom-ai-model-input-wrap input,
.custom-ai-model-input-wrap select { flex: 1; min-width: 0; }
/* v3.25.7 / v3.26.0 / v3.26.1 — Decision aids row (sits BELOW the model
field, not inline with it). Holds the 🤖 Recommend button and the
↗ Browse models link. Hidden by default; .is-visible toggled by JS only
AFTER Fetch Models has populated the dropdown — both aids need a fetched
list of models to make sense. Putting them on their own row solves the
squashed-dropdown layout bug from v3.26.0 where 4 elements competed for
horizontal space inside .custom-ai-model-input-wrap. */
.custom-ai-model-aids {
display: none;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--border);
}
.custom-ai-model-aids.is-visible { display: flex; }
/* v3.29.9 — .custom-ai-recommend-btn rules removed. Manual Recommend a Model
button no longer exists; the recommendation runs automatically after a
successful Fetch Models. */
.custom-ai-choose-model-link {
display: inline-flex;
align-items: center;
gap: var(--space-6);
flex-shrink: 0;
font-size: var(--fs-12);
color: var(--accent);
text-decoration: none;
white-space: nowrap;
padding: var(--space-6) var(--space-4);
}
.custom-ai-choose-model-link:hover { text-decoration: underline; }
/* v3.29.5 — basic / advanced flow badges removed. The Recommend button
and Browse-models link now stand on their own; users learned the
distinction from the labels themselves, and the badges added visual
noise without earning their pixels. */
/* v3.26.1 / v3.26.3 — per-row 🤖 Recommend button on default-AI rows.
v3.26.3 moved this from the key row down to the model selector row so
it sits next to the dropdown it actually changes (was confusable with
the Test button when colocated). Flex-shrink-0 so it never collapses
when the dropdown is wide. */
.ai-recheck-btn {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
font-size: 12px;
padding: 4px 10px;
/* v3.32.12 — color-only normalization. Original styling was orange text
(var(--accent)) on a faint purple wash with a purple border, which
compressed visually into a muddy reddish color at distance and looked
out of place next to the neighboring blue Test button. Swapped to the
same blue scheme as .ai-test-btn so the Test + Recommend Models pair
reads as a coordinated row of utility actions. Layout preserved
exactly — display, padding, font-size, border-radius, gap, alignment
all unchanged from the original ruleset. */
background: transparent;
color: var(--blue);
border: 1px solid var(--blue);
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
}
.ai-recheck-btn:hover { background: var(--blue-dim); }
.ai-recheck-btn:disabled { opacity: 0.6; cursor: wait; }
.custom-ai-key-wrap {
display: flex;
gap: var(--space-6);
align-items: center;
}
.custom-ai-key-wrap input { flex: 1; min-width: 0; }
/* v3.29.7 — Test Connection button removed from Add Custom Worker Bee
modal; Fetch Models is now the implicit connectivity test. The
.custom-ai-test-status class is still used by the Import-from-Model-Server
modal (importServerFetchStatus) for its inline fetch-progress indicator,
so the rules below remain. */
.custom-ai-test-status {
flex: 1;
font-size: var(--fs-12);
font-family: 'Courier New', monospace;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--muted);
}
.custom-ai-test-status.testing { color: var(--muted); }
.custom-ai-test-status.pass { color: var(--green); }
.custom-ai-test-status.fail { color: var(--red); }
/* v3.29.7 — diagnostic raw panel was originally part of the Add Custom
Worker Bee modal (Test Connection feedback). With Test Connection
removed, the only consumer left is the Import-from-Model-Server modal,
which always uses simple vertical-stack layout. The v3.29.6 grid layout
has been reverted because the custom-AI modal no longer renders this
panel. */
.custom-ai-raw-panel {
margin-top: 12px;
border: 1px solid var(--border2);
border-radius: var(--radius-md);
overflow: hidden;
font-family: 'Courier New', monospace;
font-size: 11px;
}
.custom-ai-raw-row {
display: flex;
border-bottom: 1px solid var(--border2);
}
.custom-ai-raw-row:last-child { border-bottom: none; }
.custom-ai-raw-label {
flex-shrink: 0;
width: 80px;
padding: var(--space-8) var(--space-10);
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
background: var(--surface2);
border-right: 1px solid var(--border2);
display: flex;
align-items: flex-start;
padding-top: var(--space-10);
}
.custom-ai-raw-pre {
flex: 1;
margin: 0;
padding: var(--space-8) var(--space-10);
white-space: pre-wrap;
word-break: break-all;
color: var(--text-dim);
background: transparent;
font-family: 'Courier New', monospace;
font-size: var(--fs-11);
max-height: 120px;
overflow-y: auto;
line-height: 1.5;
}
.import-server-raw-received {
max-height: 160px;
}
.ai-setup-key-status {
font-size: var(--fs-14);
flex-shrink: 0;
opacity: 0.4;
transition: opacity 0.12s;
}
.ai-setup-key-status.has-key { opacity: 1; }
.ai-eye-btn {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--muted);
font-size: var(--fs-11);
padding: var(--space-4) var(--space-6);
transition: all 0.12s;
flex-shrink: 0;
line-height: 1;
}
.ai-clear-key-btn {
background: transparent;
border: 1px solid var(--red);
border-radius: var(--radius-sm);
color: var(--red);
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 700;
padding: var(--space-4) var(--space-6);
transition: all 0.12s;
flex-shrink: 0;
line-height: 1;
white-space: nowrap;
}
.ai-clear-key-btn:hover { background: var(--red-dim); }
.ai-test-btn {
background: transparent;
border: 1px solid var(--blue);
border-radius: var(--radius-sm);
color: var(--blue);
font-size: 10px;
font-weight: 700;
padding: 4px 7px;
transition: all 0.12s;
flex-shrink: 0;
white-space: nowrap;
line-height: 1;
}
.ai-test-btn:hover { background: var(--blue-dim); }
.ai-test-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* ── IMPORT FROM MODEL SERVER ── */
.import-server-modal {
max-width: 100vw;
width: 100vw;
height: 100vh;
max-height: 100vh;
border-radius: 0;
margin: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ── 3-column body grid — designed for 1366px minimum viewport ── */
.import-server-body {
flex: 1 1 0;
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--space-20);
padding: 0 var(--space-4);
overflow: hidden;
}
.import-server-col {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--space-14);
overflow: hidden;
}
.import-server-col-middle,
.import-server-col-checklist {
border-left: 1px solid var(--border);
padding-left: var(--space-20);
}
/* ── Left column — inputs ── */
.import-server-col-inputs .custom-ai-field-wrap { margin-bottom: 0; }
.import-server-col-inputs .custom-ai-field-wrap label {
display: flex;
align-items: center;
gap: var(--space-8);
}
.import-server-fetch-row {
display: flex;
align-items: center;
gap: var(--space-12);
margin-top: var(--space-4);
}
.import-server-actions-row {
display: flex;
align-items: center;
gap: var(--space-8);
margin-top: var(--space-8);
flex-wrap: wrap;
}
.import-server-key-saved {
display: none;
font-size: var(--fs-11);
color: var(--accent);
font-weight: 600;
letter-spacing: 0.3px;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
padding: 1px var(--space-6);
}
.import-server-modal.has-saved-key .import-server-key-saved { display: inline-flex; }
.import-server-forget-btn {
display: none;
}
.import-server-modal.has-saved-key .import-server-forget-btn { display: inline-flex; }
/* ── Middle column panes — state-toggled visibility ─────────────
RULE: cols 2+3 show exactly ONE pane at a time, per state:
• prefetch → help
• loading → nothing (transient, during auto-fetch)
• ready (default) → (checklist lives in col 3; middle is empty)
• ready + .import-server-raw-visible → raw response
• error → error pane
─────────────────────────────────────────────────────────── */
.import-server-help,
.import-server-raw-panel,
.import-server-error { display: none; }
.import-server-modal.import-server-state-prefetch .import-server-help { display: block; }
.import-server-modal.import-server-state-ready.import-server-raw-visible .import-server-raw-panel { display: flex; }
.import-server-modal.import-server-state-error .import-server-error { display: block; }
/* Loading state: hide all right-region content so nothing flashes during auto-fetch */
.import-server-modal.import-server-state-loading .import-server-col-middle,
.import-server-modal.import-server-state-loading .import-server-col-checklist {
visibility: hidden;
}
/* Help pane */
.import-server-help {
overflow-y: auto;
min-height: 0;
flex: 1;
}
.import-server-help-title {
font-family: var(--font-display);
font-size: var(--fs-16);
font-weight: 800;
color: var(--text);
margin-bottom: var(--space-10);
}
.import-server-help-intro {
font-size: var(--fs-13);
color: var(--text-dim);
line-height: 1.5;
margin-bottom: var(--space-14);
}
.import-server-help-row {
margin-bottom: var(--space-12);
padding-bottom: var(--space-12);
border-bottom: 1px dashed var(--border);
}
.import-server-help-row:last-of-type { border-bottom: none; }
.import-server-help-label {
font-size: var(--fs-12);
font-weight: 700;
color: var(--accent);
margin-bottom: var(--space-4);
letter-spacing: 0.3px;
text-transform: uppercase;
}
.import-server-help-desc {
font-size: var(--fs-12);
color: var(--text-dim);
line-height: 1.5;
}
.import-server-help-desc code {
font-family: var(--font-mono);
font-size: var(--fs-11);
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 1px var(--space-4);
color: var(--text);
}
.import-server-help-tip {
background: var(--surface2);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius-sm);
padding: var(--space-10) var(--space-12);
font-size: var(--fs-12);
color: var(--text-dim);
line-height: 1.5;
margin-top: var(--space-12);
}
.import-server-help-runtime {
font-size: var(--fs-11);
color: var(--text-faint);
margin-top: var(--space-10);
padding: var(--space-8) var(--space-10);
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
display: none;
}
.import-server-help-runtime.visible { display: block; }
/* Raw response pane — reuses .custom-ai-raw-panel base but allowed to fill its column */
/* Raw response pane — reuses .custom-ai-raw-panel base but allowed to fill its column.
Base stays display:none (declared above); state-show rule applies display:flex. */
.import-server-raw-panel {
overflow-y: auto;
min-height: 0;
flex: 1;
margin-top: 0;
flex-direction: column;
}
.import-server-raw-panel .custom-ai-raw-row {
flex-shrink: 0;
}
.import-server-raw-panel .custom-ai-raw-row:last-child {
flex: 1 1 0;
min-height: 0;
}
.import-server-raw-panel .custom-ai-raw-pre {
max-height: none;
}
.import-server-raw-panel .import-server-raw-received {
max-height: none;
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
}
/* Error pane */
.import-server-error {
overflow-y: auto;
min-height: 0;
flex: 1;
padding: var(--space-14) var(--space-14);
background: var(--surface2);
border: 1px solid var(--border);
border-left: 3px solid #e64545;
border-radius: var(--radius-sm);
}
.import-server-error-title {
font-family: var(--font-display);
font-size: var(--fs-15);
font-weight: 800;
color: #e64545;
margin-bottom: var(--space-8);
}
.import-server-error-desc {
font-size: var(--fs-13);
color: var(--text);
line-height: 1.5;
margin-bottom: var(--space-12);
}
.import-server-error-hints {
font-size: var(--fs-12);
color: var(--text-dim);
line-height: 1.6;
}
.import-server-error-hints ul { margin: var(--space-6) 0 0 var(--space-18); padding: 0; }
.import-server-error-hints li { margin-bottom: var(--space-4); }
/* ── Right column — checklist ── */
.import-server-checklist-placeholder,
.import-server-checklist-panel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.import-server-modal.import-server-state-prefetch .import-server-checklist-placeholder { display: flex; }
.import-server-modal.import-server-state-error .import-server-checklist-placeholder { display: flex; }
.import-server-modal.import-server-state-ready .import-server-checklist-panel { display: flex; }
.import-server-checklist-placeholder {
align-items: center;
justify-content: center;
text-align: center;
border: 1px dashed var(--border);
border-radius: var(--radius-md);
padding: var(--space-24);
color: var(--text-faint);
}
.import-server-checklist-placeholder-icon {
font-size: var(--fs-32);
color: var(--border2);
margin-bottom: var(--space-10);
}
.import-server-checklist-placeholder-title {
font-family: var(--font-display);
font-size: var(--fs-15);
font-weight: 700;
color: var(--text-dim);
margin-bottom: var(--space-8);
}
.import-server-checklist-placeholder-desc {
font-size: var(--fs-12);
color: var(--text-faint);
line-height: 1.5;
max-width: 280px;
}
.import-server-checklist-panel {
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.import-server-checklist-hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-8) var(--space-12);
background: var(--surface2);
border-bottom: 1px solid var(--border);
font-size: var(--fs-12);
color: var(--text-dim);
flex-shrink: 0;
gap: var(--space-12);
flex-wrap: wrap;
}
.import-checklist-hdr-left {
display: flex;
align-items: center;
gap: var(--space-10);
flex-wrap: wrap;
min-width: 0;
}
.import-checklist-timestamp {
font-size: var(--fs-11);
color: var(--text-faint);
font-style: italic;
}
.import-server-checklist-actions { display: flex; gap: var(--space-6); }
.import-server-checklist-items {
overflow-y: auto;
flex: 1;
min-height: 0;
}
.import-checklist-count {
font-family: var(--font-mono);
font-size: var(--fs-11);
color: var(--text-dim);
}
/* Individual checklist row — single line: checkbox | model ID | nickname */
.import-server-item {
display: flex;
align-items: center;
gap: var(--space-12);
padding: var(--space-8) var(--space-12);
border-bottom: 1px solid var(--border);
flex-wrap: nowrap;
}
.import-server-item:last-child { border-bottom: none; }
.import-server-item:hover { background: var(--surface2); }
/* In-hive row variant — dimmed, non-interactive, replaces the nickname input
with a green "Already in your hive" badge. Disabled checkbox visually but
stays in the markup so :not(:disabled) selectors target it correctly. */
.import-server-item--in-hive { opacity: 0.55; cursor: default; }
.import-server-item--in-hive:hover { background: transparent; }
.import-server-item--in-hive .import-server-check,
.import-server-item--in-hive .import-server-item-label { cursor: default; }
.import-server-in-hive-badge {
font-size: var(--fs-11);
font-weight: 700;
letter-spacing: 0.3px;
color: var(--green);
background: var(--green-dim);
border: 1px solid var(--green);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-8);
flex-shrink: 0;
white-space: nowrap;
}
.import-server-check {
flex-shrink: 0;
accent-color: var(--accent);
width: 15px;
height: 15px;
cursor: pointer;
}
.import-server-item-label {
font-size: var(--fs-12);
color: var(--text-dim);
font-family: var(--font-mono);
flex: 1 1 50%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.import-server-nickname-wrap {
flex: 0 1 45%;
display: flex;
align-items: center;
gap: var(--space-8);
min-width: 0;
}
.import-server-nickname-label {
font-size: var(--fs-11);
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 600;
flex-shrink: 0;
}
.import-server-name-input {
flex: 1 1 auto;
font-size: var(--fs-12);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
padding: var(--space-4) var(--space-8);
min-width: 0;
}
.import-server-name-input.is-default {
font-style: italic;
color: var(--text-faint);
}
.import-server-name-input::placeholder {
color: var(--text-faint);
font-style: italic;
}
.import-server-name-input:focus { outline: none; border-color: var(--accent); }
.import-server-item-badge {
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--text-faint);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 1px var(--space-6);
flex-shrink: 0;
}
/* ── Raw-response toggle button (shown in ready state on both tiers) ── */
.import-server-raw-toggle {
display: none;
}
.import-server-modal.import-server-state-ready .import-server-raw-toggle {
display: inline-flex;
}
/* ══════════════════════════════════════════════════════════════
DESKTOP TIER (≥1601px): same swap-based behavior as laptop.
The right region is either checklist OR raw OR error — never
multiple panes side-by-side. This keeps the user's mental
model consistent across viewport sizes.
══════════════════════════════════════════════════════════════ */
@media (min-width: 1601px) {
/* PREFETCH: help pane takes cols 2+3, hide checklist placeholder */
.import-server-modal.import-server-state-prefetch .import-server-col-middle {
grid-column: 2 / 4;
}
.import-server-modal.import-server-state-prefetch .import-server-col-checklist {
display: none;
}
/* READY (default): checklist takes cols 2+3, middle col hidden */
.import-server-modal.import-server-state-ready .import-server-col-middle {
display: none;
}
.import-server-modal.import-server-state-ready .import-server-col-checklist {
grid-column: 2 / 4;
}
/* READY + raw toggled ON: raw response takes cols 2+3, checklist hidden */
.import-server-modal.import-server-state-ready.import-server-raw-visible .import-server-col-middle {
display: flex;
grid-column: 2 / 4;
}
.import-server-modal.import-server-state-ready.import-server-raw-visible .import-server-col-checklist {
display: none;
}
/* ERROR: error pane + auto-shown raw stack in merged 2+3 region */
.import-server-modal.import-server-state-error .import-server-col-middle {
grid-column: 2 / 4;
}
.import-server-modal.import-server-state-error .import-server-col-checklist {
display: none;
}
.import-server-modal.import-server-state-error .import-server-raw-panel {
display: flex;
margin-top: var(--space-14);
}
}
/* ══════════════════════════════════════════════════════════════
LAPTOP TIER (1366–1600px): collapse cols 2+3 into a single
right region whose content swaps based on modal state. Keeps
col 1 (inputs) stable; lets the model list / help / error /
raw-response each own the full right region when active.
══════════════════════════════════════════════════════════════ */
@media (max-width: 1600px) {
/* PREFETCH: help pane takes cols 2+3, hide placeholder */
.import-server-modal.import-server-state-prefetch .import-server-col-middle {
grid-column: 2 / 4;
}
.import-server-modal.import-server-state-prefetch .import-server-col-checklist {
display: none;
}
/* READY (default): checklist takes cols 2+3, middle col empty */
.import-server-modal.import-server-state-ready .import-server-col-middle {
display: none;
}
.import-server-modal.import-server-state-ready .import-server-col-checklist {
grid-column: 2 / 4;
}
/* READY + raw toggled ON: raw response takes cols 2+3, checklist hidden */
.import-server-modal.import-server-state-ready.import-server-raw-visible .import-server-col-middle {
display: flex;
grid-column: 2 / 4;
}
.import-server-modal.import-server-state-ready.import-server-raw-visible .import-server-col-checklist {
display: none;
}
/* ERROR: error pane takes cols 2+3, raw response auto-appears below it */
.import-server-modal.import-server-state-error .import-server-col-middle {
grid-column: 2 / 4;
}
.import-server-modal.import-server-state-error .import-server-col-checklist {
display: none;
}
.import-server-modal.import-server-state-error .import-server-raw-panel {
display: flex;
margin-top: var(--space-14);
}
}
/* ── MODEL SELECTOR ── */
/* v3.26.8: fixed width (not min/max) so dropdowns across all 6 default rows
line up identically regardless of model-id length. Wide enough to accommodate
id + " — Most Capable" tag + ✨ prefix without truncation for typical names. */
.model-select {
font-family: var(--font-mono);
font-size: var(--fs-11);
color: var(--text);
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-8);
width: 520px;
flex-shrink: 0;
cursor: pointer;
transition: border-color 0.12s;
}
.model-select:focus { border-color: var(--accent); outline: none; }
.model-select-label {
font-family: var(--font-display);
font-size: var(--fs-12);
color: var(--text-dim);
font-weight: 500;
flex-shrink: 0;
}
.model-select-note {
/* v3.26.9: force note to its own line below the dropdown row. Previously
the parent's flex-wrap only kicked in when content overflowed — short
WHYs (Claude) wrapped, long WHYs (ChatGPT) overflowed off the right
edge instead. Now: flex-basis 100% always wraps it, and removing the
nowrap rule lets long lines wrap naturally instead of truncating. */
flex-basis: 100%;
font-size: var(--fs-11);
color: var(--text-dim);
font-style: italic;
line-height: 1.4;
/* Visually align with the dropdown column — the label "Pick a model:"
plus the gap take ~110px on the left. */
padding-left: 110px;
}
/* v3.32.11 — each role's why-line renders on its own row inside the note
wrapper. The Reviewer (✨) and Builder (🔨) lines were previously joined
with ' · ' which produced awkward mid-sentence wrapping when both lines
landed on the same model. Block display + small top margin between
lines (except first) makes the two-line case scannable. */
.model-select-note-line {
display: block;
}
.model-select-note-line + .model-select-note-line {
margin-top: 2px;
}
/* .ai-remove-btn rules removed in v3.30.4 — the trash button it
styled was replaced by a persistent checkbox (.ai-select-check)
plus the bulk-select toolbar above the list. */
/* .ai-hide-btn rules removed in v3.31.0 — defaults are no longer
hidable; they're always present in the inventory. */
/* .ai-hidden-banner removed in v3.31.0 — no hidden-defaults state
exists anymore so the banner has nothing to display. */
/* ── Hive count chip (Worker Bees setup screen) ── */
/* This is a passive status display, NOT a button. Styled as a plain info
line with no border, no pill shape, and no interactive cursor. */
.hive-count-chip {
display: flex;
align-items: center;
gap: 14px;
padding: 6px 0;
margin-bottom: 10px;
color: var(--text-dim);
font-size: 13px;
flex-wrap: wrap;
}
.hive-count-chip:empty { display: none; }
.hive-count-chip-main {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hive-count-chip-main strong {
color: var(--text);
font-weight: 700;
}
.hive-count-sep {
color: var(--text-faint);
margin: 0 2px;
}
/* .ai-hidden-restore-btn removed in v3.31.0 — paired with the
removed .ai-hidden-banner; nothing to restore. */
/* ── KBD TAG ── */
kbd {
background: var(--surface3);
border: 1px solid var(--border2);
border-radius: 4px;
color: var(--text);
font-family: var(--font-mono);
font-size: 11px;
padding: 1px 5px;
}
/* ── PROJECT FIELD CLEAR BUTTONS ── */
.project-field-wrap .field-lg { width: 100%; }
.project-field-wrap:nth-child(2) .field-sm { width: 150px; }
/* ── PROJECT FIELDS — clean stacked layout ── */
.project-fields {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-bottom: var(--space-12);
width: 100%;
max-width: 480px;
}
.proj-field-full {
width: 100%;
}
.proj-field-ver {
width: 180px;
}
/* v3.27.7: removed .proj-clear-row, .proj-clear-row--bottom, .proj-clear-btn —
project-screen restructure eliminated all referencing markup. */
/* ── GOAL INFO BUTTON & MODAL ── */
.goal-info-btn {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
vertical-align: middle;
opacity: 0.9;
transition: opacity 0.12s;
}
.goal-info-btn img { width: 28px; height: 28px; display: block; }
.goal-info-btn-img { width: 28px; height: 28px; display: block; flex-shrink: 0; opacity: 0.9; }
.goal-info-btn:hover { opacity: 1; }
.finish-modal.goal-info-modal {
max-width: var(--modal-w-xl); /* v3.55.1 — was 900px; widened to 1200 for wide-and-short reading */
max-height: 92vh;
text-align: left;
overflow-y: auto;
display: flex;
flex-direction: column;
padding: var(--space-28) 36px var(--space-28);
align-items: flex-start;
}
.goal-info-icon {
font-size: var(--fs-32);
text-align: center;
margin-bottom: var(--space-4);
}
.goal-info-body {
font-size: var(--fs-13);
color: var(--text-dim);
line-height: 1.6;
display: flex;
flex-direction: column;
gap: var(--space-12);
margin: var(--space-12) 0 var(--space-16);
}
.goal-info-body p { margin: 0; }
.modal-section-divider {
border: 0;
height: 1px;
background: var(--border);
margin: var(--space-8) 0 var(--space-4);
width: 100%;
}
.goal-info-row {
display: flex;
gap: var(--space-10);
align-items: flex-start;
background: var(--surface2);
border-radius: var(--radius-sm);
padding: var(--space-10) var(--space-12);
}
.info-label {
font-size: 10px;
font-weight: 800;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
text-align: center;
margin-top: 1px;
letter-spacing: 0.04em;
background: var(--accent-dim);
border: 1px solid var(--accent);
color: var(--accent);
}
.about-modal-subtitle {
font-size: var(--fs-11);
color: var(--text-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: -var(--space-8) 0 var(--space-4);
}
.goal-info-desc { font-size: var(--fs-12); color: var(--text-dim); line-height: 1.5; }
.goal-info-tip {
font-size: var(--fs-13);
color: var(--text);
font-style: italic;
border-top: 1px solid var(--border);
padding-top: var(--space-10);
margin-top: var(--space-4);
}
.goal-info-manual-link {
font-size: var(--fs-15);
text-align: center;
margin: 2px 0 0;
padding-top: var(--space-10);
}
.goal-info-manual-link a {
font-weight: 600;
}
/* ── GOAL HEADING ── */
/* ── Length Constraint ── */
.length-constraint-row {
margin-top: var(--space-4);
margin-bottom: var(--space-4);
padding: var(--space-14);
background: var(--surface2);
border: 1px dashed var(--border2);
border-radius: var(--radius-sm);
}
.length-constraint-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.length-constraint-hint {
font-size: var(--fs-11);
color: var(--accent);
font-weight: 600;
white-space: nowrap;
}
.length-constraint-desc {
font-size: var(--fs-12);
color: var(--text-dim);
line-height: 1.6;
margin: 0 0 var(--space-10);
}
.length-constraint-fields {
display: flex;
gap: var(--space-8);
align-items: center;
}
/* v3.33.0 — Length mode picker (4 pills above the input row) */
.length-mode-pills {
display: flex;
gap: var(--space-6);
margin: 0 0 var(--space-8);
flex-wrap: wrap;
}
.length-mode-pill {
padding: var(--space-6) var(--space-14);
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-size: var(--fs-13);
font-family: var(--font-display);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.length-mode-pill:hover {
background: var(--surface3);
color: var(--text);
}
.length-mode-pill.is-active {
background: var(--accent);
border-color: var(--accent);
color: #0a0c12;
}
[data-theme="light"] .length-mode-pill.is-active {
color: #ffffff;
}
.length-mode-desc {
font-size: var(--fs-12);
color: var(--text-dim);
font-style: italic;
margin: 0 0 var(--space-8);
line-height: 1.5;
}
.length-range-sep {
color: var(--text-dim);
font-size: var(--fs-13);
font-family: var(--font-mono);
padding: 0 2px;
}
.length-limit-input--min {
width: 90px;
}
.length-limit-input {
width: 110px;
padding: var(--space-6) var(--space-10);
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
color: var(--text);
font-size: var(--fs-14);
font-family: var(--font-mono);
transition: border-color 0.12s;
}
.length-limit-input:focus {
outline: none;
border-color: var(--accent);
}
.length-limit-input::placeholder { color: var(--text-dim); opacity: 0.6; }
.length-unit-select {
padding: var(--space-6) var(--space-10);
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
color: var(--text);
font-size: var(--fs-13);
cursor: pointer;
transition: border-color 0.12s;
}
.length-unit-select:focus { outline: none; border-color: var(--accent); }
[data-theme="light"] .length-limit-input,
[data-theme="light"] .length-unit-select {
background: #ffffff;
border-color: var(--border2);
}
.proj-goal-heading {
font-family: var(--font-display);
font-size: var(--fs-16);
font-weight: 700;
color: var(--text);
margin: 0;
letter-spacing: -0.01em;
}
/* v3.27.7: removed #goalCounter rule + .goal-stat, .goal-stat-label,
.goal-stat-warn, .goal-stat-sep — only consumed by the goalCounter
inline-html block in updateGoalCounter, which was deleted along with
the goal-counter-bar markup in the project-screen restructure. */
/* ── EXPORT MASK ROW ── */
.export-mask-row {
display: flex;
align-items: center;
gap: var(--space-8);
padding: var(--space-6) var(--space-10);
background: var(--surface2);
border: 1px dashed var(--border2);
border-radius: var(--radius-sm);
margin-bottom: var(--space-8);
}
.export-mask-label {
font-size: 11px;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
flex-shrink: 0;
}
.export-mask-input {
width: 480px;
flex: 0 0 480px;
min-width: 0;
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-mono);
font-size: 12px;
padding: 4px 8px;
outline: none;
transition: border-color 0.15s;
}
.export-mask-input:focus { border-color: var(--accent); }
.export-mask-preview {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
white-space: nowrap;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── LIVE CONSOLE ── */
.console-body-wrap {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
border: 4px solid rgba(0,179,0,0.45);
border-radius: var(--radius-sm);
margin: var(--space-4) var(--space-8) var(--space-8);
overflow: hidden;
box-shadow: 0 0 12px rgba(0,179,0,0.07);
}
.live-console {
flex: 1;
overflow-y: auto;
background: #0a0c12;
border: none;
border-radius: 0;
padding: var(--space-8);
font-family: var(--font-mono);
font-size: var(--fs-11);
line-height: 1.7;
scrollbar-width: thin;
scrollbar-color: rgba(0,179,0,0.3) transparent;
min-height: 160px;
margin: 0;
}
/* Console — white in light mode */
[data-theme="light"] .live-console { background: #ffffff; color: #0f1221; }
[data-theme="light"] .console-body-wrap { border-color: #00b300; }
[data-theme="light"] .console-legend { background: #f0f2f8; border-bottom-color: rgba(0,179,0,0.3); }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .live-console { background: #ffffff; color: #0f1221; }
[data-theme="auto"] .console-body-wrap { border-color: #00b300; }
[data-theme="auto"] .console-legend { background: #f0f2f8; border-bottom-color: rgba(0,179,0,0.3); }
}
@media (prefers-color-scheme: dark) {
[data-theme="auto"] .live-console { background: #0a0c12; }
}
.console-entry {
display: flex;
align-items: baseline;
gap: 0;
padding: 1px 0;
word-break: break-word;
}
.console-time {
flex-shrink: 0;
min-width: 90px;
color: #4a5270;
margin-right: var(--space-6);
user-select: none;
}
.console-entry span:last-child {
flex: 1;
min-width: 0;
}
.console-info { color: #9aa3b8; }
.console-success { color: #00b300; }
.console-warn { color: #fbbf24; }
.console-error { color: #f87171; }
.console-divider { color: #f5a623; font-weight: 700; margin: var(--space-4) 0 2px; }
.console-send { color: #60a5fa; }
.console-preview { color: #a78bfa; }
/* ── Console Legend ── */
.console-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
padding: var(--space-4) var(--space-8);
background: #111318;
border-bottom: 1px solid rgba(0,179,0,0.2);
margin: 0;
font-family: var(--font-mono);
font-size: var(--fs-11);
align-items: center;
flex-shrink: 0;
}
.legend-item {
white-space: nowrap;
display: flex;
align-items: center;
gap: var(--space-4);
line-height: 1;
}
.legend-label {
font-weight: 700;
color: var(--text-dim);
font-size: var(--fs-11);
margin-right: var(--space-4);
}
/* ── SECTION TITLES (larger headers) ── */
.work-section-title {
font-family: var(--font);
font-size: var(--fs-15);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #ffffff;
text-shadow: none;
}
/* ── LOGO ROW (right-aligned, top of right panel) ── */
.bee-card.is-builder { border-color: var(--accent); background: var(--accent-dim); }
.bee-card.is-active { border-color: var(--border2); }
.bee-card.is-inactive { opacity: 0.4; }
.bee-card.is-working { border-color: var(--blue); background: var(--blue-dim); }
.bee-card.is-done { border-color: var(--green); background: var(--green-dim); }
.bee-card.is-error { border-color: var(--red); background: var(--red-dim); }
/* v3.52.10 — Four orphan .bee-card.is-* selectors removed from here.
They had no declaration block, so the CSS parser consumed the next
rule's selector into an impossible descendant chain — making the
.work-notes-panel .work-panel-header rule below never match. Likely
residue of a comma-list whose shared declaration block was deleted
at some point. Surfaced by Codex CSS audit 2026-05-17. */
.work-notes-panel .work-panel-header {
background: var(--surface2);
}
/* ══════════════════════════════════════
FULLSCREEN LAYOUT (Setup Screens 2 & 3)
══════════════════════════════════════ */
.fullscreen-layout {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
}
/* ── Full-screen header bar ── */
.fs-header {
display: flex;
align-items: center;
gap: var(--space-16);
padding: var(--space-14) var(--space-32);
background: var(--surface);
border-bottom: 2px solid var(--border2);
flex-shrink: 0;
}
.fs-header-brand {
display: flex;
align-items: center;
gap: var(--space-12);
flex: 1;
justify-content: center;
}
.fs-logo {
width: 80px;
height: 80px;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(245,166,35,0.4));
}
.fs-logo-name {
font-family: var(--font-display);
font-size: var(--fs-28);
font-weight: 800;
color: var(--text);
line-height: 1;
}
.fs-logo-tag {
font-size: var(--fs-12);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-top: 2px;
}
.fs-col-header { margin-bottom: var(--space-20); }
.fs-col-title {
font-family: var(--font-display);
font-size: var(--fs-24);
font-weight: 800;
color: var(--text);
margin-bottom: var(--space-8);
letter-spacing: -0.01em;
}
.fs-col-sub { font-size: var(--fs-14); color: var(--text-dim); line-height: 1.7; }
/* v3.27.7: replaced .fs-col-tip with .gold-tip-card — generic gold/amber
callout block reusable across the app. Generalized from the .dp-real-example
styling used in document-playbooks.html. Use this for guidance copy that
should feel official rather than incidental. .fs-col-tip removed (only
consumer was the Builder screen, now using .gold-tip-card). */
.gold-tip-card {
background: rgba(245, 166, 35, 0.05);
border: 1px solid rgba(245, 166, 35, 0.25);
border-radius: var(--radius-sm);
padding: var(--space-14) var(--space-18);
margin: 0 0 var(--space-16);
font-size: var(--fs-13);
color: var(--text);
line-height: 1.6;
}
.gold-tip-card a { color: var(--accent); }
.gold-tip-card .tip-icon-img {
vertical-align: middle;
margin-right: var(--space-6);
}
/* Bee — fixed block above scroll area, not absolute */
.setup-card-bee {
display: block;
width: 260px;
height: 260px;
object-fit: contain;
pointer-events: none;
user-select: none;
filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
align-self: center;
flex-shrink: 0;
padding-top: 12px;
}
/* Controls row */
.bee-controls-row-setup {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
margin-bottom: var(--space-16);
}
/* Setup page 1 action buttons — cap at normal btn size regardless of btn-lg class */
/* ============================================================
v3.52.0 — Source Size Check card (Setup 5)
Compares user's Starting Document size vs active template's
length range and surfaces a recommendation card when the
mismatch is significant. Two status variants share base
structure: ssc-warning (red/amber, source too small) and
ssc-recommend (accent, source much larger than target).
============================================================ */
.source-size-check {
display: flex;
align-items: flex-start;
gap: var(--space-12);
padding: var(--space-14) var(--space-16);
/* v3.52.3 — Margins reduced from var(--space-12) var(--space-32) 0 var(--space-32).
v3.52.0 placed this card OUTSIDE the white hp-section-body panel (on the
honeycomb background), where the 32px horizontal margins served to inset
it from the screen edges. v3.52.3 moves it INSIDE the panel which already
provides its own padding — no horizontal margin needed, and a top margin
keeps the card spaced from the doc-tab content above. */
margin: var(--space-16) 0 0 0;
border-radius: 6px;
position: relative;
}
.source-size-check.ssc-warning {
background: rgba(255, 120, 80, 0.08);
border: 1px solid rgba(255, 120, 80, 0.35);
border-left: 4px solid #ff7850;
}
.source-size-check.ssc-recommend {
background: rgba(255, 200, 80, 0.07);
border: 1px solid rgba(255, 200, 80, 0.3);
border-left: 4px solid var(--accent);
}
.ssc-icon {
font-size: 1.4rem;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.ssc-body {
flex: 1;
min-width: 0;
}
.ssc-label {
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
}
.ssc-message {
font-size: 0.88rem;
line-height: 1.55;
color: var(--text2);
margin-bottom: 10px;
}
.ssc-counts {
font-size: 0.82rem;
color: var(--text2);
font-family: 'Courier New', monospace;
margin-bottom: 10px;
}
.ssc-counts strong {
color: var(--text);
font-weight: 700;
}
.ssc-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ssc-dismiss {
position: absolute;
top: 6px;
right: 8px;
background: transparent;
border: none;
color: var(--text2);
font-size: 1rem;
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
line-height: 1;
}
.ssc-dismiss:hover {
background: rgba(0, 0, 0, 0.06);
color: var(--text);
}
/* ── Footer ── */
.fs-footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
padding: var(--space-14) var(--space-32);
background: var(--surface);
border-top: 2px solid var(--border2);
flex-shrink: 0;
}
.fs-footer-spacer {
display: block;
}
.fs-footer .btn-cta {
justify-self: end;
width: fit-content;
}
.btn-cta:not(.btn-accent) {
border: 1px solid var(--border2);
border-style: solid;
color: var(--text-dim);
background: transparent;
}/* Paste panel — display/flex handled by doc-tab-panel class rules above.
Only non-display properties here so the class-based show/hide keeps control. */
#panel-paste,
#panel-upload,
#panel-scratch,
#panel-ref-paste,
#panel-ref-upload {
position: relative;
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
}
/* Pulsing logo watermark in dead space right of content — anchors to active panel.
Centered horizontally within the dead space (the area to the right of the
constrained-width content column). Updated v3.21.3 — was right 24px center
which pinned the logo to the right edge instead of centering it. */
#panel-paste::after,
#panel-upload::after,
#panel-scratch::after,
#panel-ref-paste::after,
#panel-ref-upload::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: calc(44px + 80ch + 8px + 12px + 32px + 12px);
right: 0;
background-image: url('images/Waxframe_logo_v19.png');
background-repeat: no-repeat;
background-position: center center;
background-size: min(240px, 85%);
opacity: 0;
pointer-events: none;
z-index: 0;
animation: watermarkPulse 16s ease-in-out infinite;
}
@keyframes watermarkPulse {
0% { opacity: 0; } /* start dark */
6.25% { opacity: 0; } /* 1s dark holds */
43.75% { opacity: 0.9; } /* 6s fade in complete */
56.25% { opacity: 0.9; } /* 2s full hold */
93.75% { opacity: 0; } /* 6s fade out complete */
100% { opacity: 0; } /* 1s dark before restart */
}
/* Upload panel: drop zone matches paste panel width */
#panel-upload .drop-zone,
#panel-ref-upload .drop-zone {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Courier New', Courier, monospace;
font-size: var(--fs-13);
width: calc(44px + 80ch + 8px + 12px + 32px);
max-width: calc(44px + 80ch + 8px + 12px + 32px);
}
/* Scratch panel: notebook matches paste panel width, fills panel height */
#panel-scratch .proj-notebook-scratch {
flex: 1;
min-height: 0;
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
width: calc(44px + 80ch + 8px + 12px + 32px);
max-width: calc(44px + 80ch + 8px + 12px + 32px);
}
/* ── PROJECT NOTEBOOK — scratch panel only ── */
.proj-notebook {
display: flex;
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
overflow-y: auto;
overflow-x: hidden;
min-height: 320px;
align-items: flex-start;
background-color: var(--surface);
background-image:
linear-gradient(to right, transparent 44px, rgba(220,50,50,0.25) 44px, rgba(220,50,50,0.25) 46px, transparent 46px),
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 20px,
rgba(80,140,220,0.18) 20px,
rgba(80,140,220,0.18) 21px
);
}
/* ── PROJECT TEXTAREA EDITOR — mirrors work-doc-editor pattern ── */
/* Outer scroll container */
.proj-ta-editor {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: auto;
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
background: var(--surface);
scrollbar-width: thin;
scrollbar-color: var(--border2) transparent;
font-family: 'Courier New', Courier, monospace;
font-size: var(--fs-13);
}
.proj-ta-editor::-webkit-scrollbar { width: 8px; }
.proj-ta-editor::-webkit-scrollbar-track { background: transparent; }
.proj-ta-editor::-webkit-scrollbar-thumb { background: rgba(120,120,140,0.55); border-radius: 8px; }
/* Inner row — grows to content height and full width, carries notebook paper background */
.proj-ta-scroll {
display: flex;
align-items: flex-start;
min-height: 100%;
width: 100%;
background-color: var(--surface);
background-image:
linear-gradient(to right, transparent 44px, rgba(220,50,50,0.25) 44px, rgba(220,50,50,0.25) 46px, transparent 46px),
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 20px,
rgba(80,140,220,0.18) 20px,
rgba(80,140,220,0.18) 21px
);
background-position: 0 0;
}
/* Gutter — sticky so it stays visible as content scrolls */
.proj-ta-nums {
position: sticky;
left: 0;
top: 0;
width: 44px;
flex: 0 0 44px;
align-self: stretch;
font-family: var(--font-mono);
font-size: var(--fs-13);
line-height: 21px;
color: var(--muted);
text-align: right;
padding: 0 var(--space-6) 0 0;
user-select: none;
background: transparent;
border-right: 1px solid var(--border2);
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: visible;
z-index: 1;
}
.proj-ta-nums::-webkit-scrollbar { display: none; }
.proj-ta-nums div { height: 21px; line-height: 21px; font-size: var(--fs-13); box-sizing: border-box; flex-shrink: 0; padding-right: var(--space-6); }
/* Inner wrapper — fixed 80ch wide, mirrors work-doc-inner */
.proj-ta-inner {
flex: 0 0 auto;
position: relative;
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
background: transparent;
box-sizing: border-box;
width: calc(80ch + 8px + 12px);
}
/* Textarea — exact 80ch text area, grows to content height, mirrors work-doc-ta */
.proj-ta {
display: block;
width: calc(80ch + 8px + 12px);
min-width: calc(80ch + 8px + 12px);
max-width: calc(80ch + 8px + 12px);
height: auto;
min-height: 0;
margin: 0;
padding: 0 12px 0 8px;
border: none;
outline: none;
resize: none;
overflow: hidden;
box-sizing: border-box;
background: transparent;
color: var(--text);
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
line-height: 21px;
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: break-word;
}.proj-notebook-scratch {
align-items: center;
justify-content: center;
border-style: dashed;
min-height: 280px;
}
.proj-scratch-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-10);
padding: var(--space-32);
text-align: center;
}
.proj-scratch-icon { font-size: 40px /* out-of-scale */; }
.proj-scratch-title {
font-family: var(--font-display);
font-size: var(--fs-18);
font-weight: 700;
color: var(--text);
}
.proj-scratch-msg {
font-size: var(--fs-13);
color: var(--text-dim);
line-height: 1.6;
max-width: 380px;
}
/* ══════════════════════════════════════
SETUP SCREEN — BEE IMAGES & DIVIDER
══════════════════════════════════════ */
/* Make sure col content sits above the image */
.fs-col > *:not(.setup-section-img) { position: relative; z-index: 1; }
.fs-body-single > *:not(.setup-section-img) { position: relative; z-index: 1; }
.fs-body-single .fs-col-header {
max-width: 680px;
padding: 0 var(--space-20);
}
/* ── ROUND HISTORY CARDS ── */
.round-hist-item {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: var(--space-6);
overflow: hidden;
transition: border-color 0.12s;
}
.round-hist-item:hover { border-color: var(--border2); }
.round-hist-item--failed {
border-color: rgba(251,191,36,0.4);
background: rgba(251,191,36,0.05);
opacity: 0.85;
}
.round-hist-item--failed:hover { border-color: rgba(251,191,36,0.7); opacity: 1; }
.round-hist-badge--failed {
background: rgba(251,191,36,0.15);
border-color: rgba(251,191,36,0.6);
color: #fbbf24;
}
.round-hist-stats--failed { color: #fbbf24; opacity: 0.8; }
.round-hist-hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-8) var(--space-10);
gap: var(--space-8);
}
.round-hist-hdr-left {
display: flex;
align-items: center;
gap: var(--space-6);
flex-wrap: wrap;
min-width: 0;
}
.round-hist-hdr-right {
display: flex;
gap: var(--space-4);
flex-shrink: 0;
}
.round-hist-badge {
font-size: var(--fs-11);
font-weight: 700;
background: var(--accent-dim);
border: 1px solid var(--accent);
color: var(--accent);
border-radius: 20px;
padding: 1px var(--space-8);
white-space: nowrap;
}
.round-hist-meta {
font-size: var(--fs-11);
color: var(--text);
white-space: nowrap;
}
.round-hist-stats {
font-size: var(--fs-11);
color: var(--text-dim);
white-space: nowrap;
}
.round-hist-view-btn {
font-size: var(--fs-11);
font-weight: 600;
background: transparent;
border: 1px dashed var(--border2);
border-radius: var(--radius-sm);
color: var(--text-dim);
padding: var(--space-4) var(--space-10);
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
}
.round-hist-view-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.round-hist-restore-btn {
font-size: var(--fs-11);
font-weight: 700;
background: transparent;
border: 1px dashed var(--accent);
border-radius: var(--radius-sm);
color: var(--accent);
padding: var(--space-4) var(--space-10);
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
}
.round-hist-restore-btn:hover { background: var(--accent-dim); border-style: solid; }
/* ── HISTORY DOC MODAL ── */
.hist-doc-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-24);
}
.hist-doc-modal-inner {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 1100px;
height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.hist-doc-modal-hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-14) var(--space-18);
border-bottom: 1px solid var(--border);
font-size: var(--fs-13);
font-weight: 600;
color: var(--text);
flex-shrink: 0;
gap: var(--space-10);
}
.hist-doc-modal-ta {
flex: 1;
background: var(--surface2);
border: none;
color: var(--text);
font-family: var(--font-mono);
font-size: var(--fs-15);
line-height: 1.8;
padding: var(--space-24) var(--space-28);
resize: none;
outline: none;
overflow-y: auto;
}
/* ── Full-width Shake the Hive button ── */
/* ── Two-button row ── */
.builder-only-label {
font-family: var(--font);
font-size: var(--fs-12);
font-weight: 700;
color: var(--accent);
letter-spacing: 0.02em;
pointer-events: none;
}
.btn-shake-wide.running {
animation: shakePulse 0.8s ease-in-out infinite alternate;
}
@keyframes shakePulse {
from { box-shadow: 0 0 6px rgba(245,166,35,0.4); }
to { box-shadow: 0 0 18px rgba(245,166,35,0.9); }
}
.shake-wide-label {
font-family: var(--font);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
pointer-events: none;
}
/* v3.35.3 — Extended to cover .builder-only-label. The original rules
only targeted .shake-wide-label (the Smoke-the-Hive button's text).
When updateNotesBtnPriority() flips priority on Notes-filled rounds,
the builderOnlyBtn gets .footer-btn-smoke (amber bg) but its
.builder-only-label had no matching color rule — text inherited the
global text color, which in dark mode is light, producing near-
invisible "amber on amber" labels. Light mode escaped the bug because
the [data-theme="light"] .footer-btn-smoke span override at line ~2578
already targets all spans. This pair-rule fix restores symmetry. */
.footer-btn-smoke .shake-wide-label,
.footer-btn-smoke .builder-only-label { color: #0a0c12; }
.footer-btn .shake-wide-label,
.footer-btn .builder-only-label { color: var(--text); }
/* ── Console Clock ── */
.console-clock {
display: flex;
align-items: center;
justify-content: space-between;
background: #0a0c12;
border: 1px solid #1a7a3a;
border-radius: var(--radius-sm);
margin: var(--space-4) var(--space-10);
padding: var(--space-6) var(--space-12);
font-family: var(--font-mono);
}
.console-clock.running .console-clock-time {
color: var(--amber);
}
.console-clock.running .console-clock-label {
color: var(--amber);
opacity: 0.7;
}
/* ── Round Timer Widget ── */
.round-timer-clock.running {
color: #00b300;
text-shadow: 0 0 8px rgba(0,179,0,0.4);
}
/* ── Compact bee rows ── */
/* ── NOTES 1/3, HISTORY 2/3 SPLIT ── */
.work-notes-panel .round-history {
flex: 0 0 auto;
max-height: 220px;
overflow-y: auto;
padding: var(--space-8);
min-height: 0;
background: var(--surface);
scrollbar-width: thin;
scrollbar-color: var(--border2) transparent;
}
/* ══════════════════════════════════════
CONFLICTS PANEL
══════════════════════════════════════ */
.conflicts-panel {
flex: 1;
min-height: 0;
overflow-y: auto;
background: #0a0c12;
border: 4px solid rgba(245,166,35,0.5);
border-radius: var(--radius-sm);
margin: 4px 10px 8px;
padding: 10px 12px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.7;
color: #9aa3b8;
box-shadow: 0 0 12px rgba(245,166,35,0.08);
scrollbar-width: thin;
scrollbar-color: rgba(245,166,35,0.4) transparent;
}
[data-theme="light"] .conflicts-panel {
background: #ffffff;
border-color: var(--accent);
color: #0f1221;
box-shadow: 0 0 12px rgba(201,124,6,0.10);
scrollbar-color: var(--accent) transparent;
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] .conflicts-panel {
background: #ffffff;
border-color: var(--accent);
color: #0f1221;
box-shadow: 0 0 12px rgba(201,124,6,0.10);
scrollbar-color: var(--accent) transparent;
}
}
@media (prefers-color-scheme: dark) {
[data-theme="auto"] .conflicts-panel {
background: #0a0c12;
border-color: rgba(245,166,35,0.5);
color: #9aa3b8;
}
}
.conflicts-empty {
color: var(--text);
font-size: 12px;
font-style: italic;
padding: 4px 0;
}
/* v3.39.8 — Empty-state card. Same visual treatment as .applied-card so
the "no conflicts this round" / "no rounds yet" / "Builder-Only round"
explanations read as a contained card instead of floating italic
prose. Left-edge accent uses the neutral accent color (not green/red)
because these states are informational, not success/warning. */
.conflicts-empty-card {
background: var(--surface);
border: 1px solid var(--border2);
border-left: 3px solid var(--accent);
border-radius: var(--radius-sm);
padding: var(--space-12) var(--space-14);
margin-bottom: var(--space-10);
color: var(--text);
font-size: var(--fs-13);
line-height: 1.6;
}
.conflicts-empty-card strong {
color: var(--accent);
font-weight: 700;
}
.conflicts-section-header {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 5px 8px;
border-radius: var(--radius-sm);
margin-bottom: 8px;
}
.builder-resolved-header {
background: var(--green-dim);
color: var(--green);
border: 1px solid var(--green);
}
.user-decisions-header {
background: rgba(245,166,35,0.1);
color: var(--amber);
border: 1px solid var(--amber);
}
.convergence-header {
background: rgba(0,179,0,0.08);
color: var(--text);
border: 1px solid #00b300;
}
/* Compound selectors used here: .convergence-card is always rendered WITH
.decision-card on the same element, so .decision-card.convergence-card has
specificity (0,2,0) which naturally beats the .decision-card base rule
below at (0,1,0) — no !important needed. */
.decision-card.convergence-card {
border-color: #00b300;
}
.decision-card.convergence-card.declined {
border-color: #f87171;
}
.decision-card.convergence-card.declined .convergence-ai-badge {
color: var(--muted);
}
.decision-card.convergence-card.custom-selected {
border-color: var(--amber);
}
.decision-opt-btn.selected.decline-btn {
border-color: #f87171;
background: rgba(248,113,113,0.08);
}
.decision-opt-btn.selected.custom-btn {
border-color: var(--amber);
background: rgba(245,166,35,0.08);
}
/* .decision-opt-num background/color when selected is handled per-variant
at lines 6176-6179 via .decision-opt-num-{apply|decline|custom|bypass} —
single source of truth rather than duplicated here. */
.convergence-ai-badge {
font-size: var(--fs-11);
font-weight: 700;
color: #00b300;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.convergence-suggestion {
font-size: 12px;
color: var(--text);
line-height: 1.6;
white-space: pre-wrap;
margin: 8px 0 12px;
padding: 8px 10px;
background: var(--surface);
border-radius: var(--radius-sm);
border: 1px solid var(--border2);
}
.convergence-footer {
margin-top: 14px;
padding: 10px 12px;
background: var(--surface2);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
font-size: 12px;
color: var(--muted);
text-align: center;
line-height: 1.5;
}
.convergence-footer strong {
color: var(--text);
}
.conflicts-body {
white-space: pre-wrap;
word-break: break-word;
color: #e8ecf4;
}
[data-theme="light"] .conflicts-body { color: #0f1221; }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .conflicts-body { color: #0f1221; }
}
/* ── USER DECISION CARDS ── */
.decision-card {
background: var(--surface2);
border: 1px solid var(--amber);
border-radius: var(--radius-sm);
padding: var(--space-12);
margin-bottom: var(--space-12);
transition: border-color 0.2s;
}
.decision-card.resolved {
border-color: #00b300;
}
/* v3.39.8 — Locked decision card. Stronger green than .resolved
(which just means "user picked an option") to distinguish "selected"
from "selected + locked." Matches the green-tint treatment of
.applied-card-locked so locked-state visual reads the same across
the conflicts panel. */
.decision-card.decision-card-locked {
border-color: var(--green);
background: var(--green-dim);
}
.decision-card.decision-card-locked .decision-badge {
background: transparent;
color: var(--green);
border-color: var(--green);
}
.decision-locked-badge {
font-size: var(--fs-10);
font-weight: 700;
padding: 2px var(--space-6);
border-radius: 10px;
background: var(--green);
color: #0a0c12;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.decision-lock-btn-locked {
background: var(--green-dim);
color: var(--green);
border-color: var(--green);
}
.decision-lock-btn-locked:hover {
background: var(--green);
color: #0a0c12;
box-shadow: 0 0 10px rgba(46, 204, 113, 0.45);
}
/* Repeat offender — hot card (3+ appearances) */
.decision-card.decision-card-hot {
border-color: #f87171;
background: rgba(239,68,68,0.06);
}
[data-theme="light"] .decision-card.decision-card-hot { background: rgba(239,68,68,0.04); }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .decision-card.decision-card-hot { background: rgba(239,68,68,0.04); }
}
.decision-card-header {
display: flex;
align-items: center;
gap: var(--space-8);
margin-bottom: var(--space-8);
flex-wrap: wrap;
}
.decision-badge {
font-size: var(--fs-11);
font-weight: 700;
color: var(--amber);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.decision-card.resolved .decision-badge {
color: #00b300;
}
/* Repeat badge — shown when conflict appears 2+ times */
.conflict-repeat-badge {
font-size: var(--fs-11);
font-weight: 700;
padding: 2px var(--space-6);
border-radius: 20px;
background: rgba(245,166,35,0.12);
border: 1px solid rgba(245,166,35,0.4);
color: var(--amber);
letter-spacing: 0.03em;
white-space: nowrap;
}
/* Hot badge — 3+ appearances */
.conflict-repeat-badge.conflict-repeat-hot {
background: rgba(239,68,68,0.12);
border-color: rgba(239,68,68,0.5);
color: #f87171;
}
[data-theme="light"] .conflict-repeat-badge { background: rgba(245,166,35,0.08); }
[data-theme="light"] .conflict-repeat-badge.conflict-repeat-hot { background: rgba(239,68,68,0.08); }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .conflict-repeat-badge { background: rgba(245,166,35,0.08); }
[data-theme="auto"] .conflict-repeat-badge.conflict-repeat-hot { background: rgba(239,68,68,0.08); }
}
/* Repeat offender summary warning banner */
.conflict-repeat-warning {
background: rgba(239,68,68,0.08);
color: #f87171;
border: 1px solid rgba(239,68,68,0.4);
margin-bottom: var(--space-10);
}
[data-theme="light"] .conflict-repeat-warning { background: rgba(239,68,68,0.05); }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .conflict-repeat-warning { background: rgba(239,68,68,0.05); }
}
/* v3.39.0 — Builder Applied This Round section. Surfaces silent
reviewer-sourced changes the Builder accepted without flagging.
Visual language: blue/info treatment (informational, not warning)
to distinguish from the amber USER DECISION cards and the red
repeat-warning band. Cards reuse spacing tokens and border-radius
from the existing .decision-card pattern. */
.applied-changes-header {
background: var(--accent-dim);
color: var(--accent);
border: 1px solid var(--accent);
margin-top: var(--space-10);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-8);
}
.applied-changes-header-text {
flex: 1 1 auto;
}
.applied-bulk-btn {
font-family: inherit;
font-size: var(--fs-11);
font-weight: 700;
padding: var(--space-4) var(--space-10);
background: var(--surface);
color: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.12s;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.applied-bulk-btn:hover {
background: var(--accent);
color: var(--bg);
box-shadow: 0 0 8px rgba(255, 165, 0, 0.35);
}
.applied-bulk-btn-locked {
background: var(--green-dim);
color: var(--green);
border-color: var(--green);
}
.applied-bulk-btn-locked:hover {
background: var(--green);
color: #0a0c12;
box-shadow: 0 0 8px rgba(46, 204, 113, 0.35);
}
.applied-changes-blurb {
font-size: var(--fs-12);
color: var(--text-dim);
margin-bottom: var(--space-10);
line-height: 1.5;
}
/* v3.39.6 — Applied-changes section restructure. Cards now read as
proper cards instead of a wall of text. Key changes:
- Header row now hosts a Lock All / Unlock All bulk button on the right
- Each card has a left-edge accent bar for visual anchoring
- Line-ref styled as a small pill tag (not bold inline)
- Attribution moved to its own dim italic line
- was:/now: replaced with diff-style ± rows in red/green tints
- Locked cards retain green border but lose opacity dimming so they
stay readable (you might still want to unlock one) */
.applied-card {
background: var(--surface);
border: 1px solid var(--border2);
border-left: 3px solid var(--accent);
border-radius: var(--radius-sm);
padding: var(--space-10) var(--space-12);
margin-bottom: var(--space-8);
transition: border-color 0.12s, background 0.12s;
}
.applied-card-locked {
border-color: var(--green);
border-left-color: var(--green);
background: var(--green-dim);
}
.applied-card-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-6);
margin-bottom: var(--space-4);
}
.applied-line-ref {
font-size: var(--fs-11);
font-weight: 700;
color: var(--accent);
background: var(--accent-dim);
border: 1px solid var(--accent);
padding: 2px var(--space-6);
border-radius: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.applied-card-locked .applied-line-ref {
color: var(--green);
background: transparent;
border-color: var(--green);
}
.applied-from-line {
font-size: var(--fs-11);
color: var(--text-dim);
margin-bottom: var(--space-8);
letter-spacing: 0.01em;
}
.applied-from-line em {
color: var(--text);
font-style: italic;
font-weight: 600;
}
.applied-diff {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.applied-diff-row {
display: flex;
align-items: flex-start;
gap: var(--space-8);
font-size: var(--fs-12);
line-height: 1.5;
padding: var(--space-6) var(--space-8);
border-radius: var(--radius-sm);
}
.applied-diff-marker {
font-weight: 700;
flex: 0 0 auto;
font-family: 'Courier New', monospace;
font-size: var(--fs-14);
line-height: 1.4;
}
.applied-diff-text {
flex: 1 1 auto;
}
.applied-diff-old {
background: var(--red-dim);
color: var(--text-dim);
}
.applied-diff-old .applied-diff-marker {
color: var(--red);
}
.applied-diff-old .applied-diff-text {
text-decoration: line-through;
text-decoration-color: var(--red);
}
.applied-diff-new {
background: var(--green-dim);
color: var(--text);
}
.applied-diff-new .applied-diff-marker {
color: var(--green);
}
.applied-repeat-badge {
font-size: var(--fs-10);
font-weight: 700;
padding: 2px var(--space-6);
border-radius: 10px;
background: var(--accent-dim);
color: var(--accent);
border: 1px solid var(--accent);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.applied-repeat-strong {
background: var(--red-dim);
color: var(--red);
border-color: var(--red);
}
.applied-locked-tag {
font-size: var(--fs-10);
font-weight: 700;
padding: 2px var(--space-6);
border-radius: 10px;
background: var(--green-dim);
color: var(--green);
border: 1px solid var(--green);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.applied-label {
font-weight: 700;
color: var(--text);
margin-right: var(--space-4);
font-style: normal;
}
.applied-actions {
display: flex;
gap: var(--space-6);
margin-top: var(--space-4);
justify-content: flex-end;
}
.applied-lock-btn {
font-family: inherit;
font-size: var(--fs-11);
font-weight: 700;
padding: var(--space-4) var(--space-10);
background: var(--accent-dim);
color: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.12s;
letter-spacing: 0.02em;
}
.applied-lock-btn:hover {
background: var(--accent);
color: #0a0c12;
box-shadow: 0 0 10px rgba(245, 166, 35, 0.45);
}
.applied-lock-btn-disabled,
.applied-lock-btn-disabled:hover {
background: var(--green-dim);
color: var(--green);
border-color: var(--green);
cursor: default;
box-shadow: none;
opacity: 0.7;
}
/* v3.39.2 — Locked-state lock button (toggles to Unlock). Same green
treatment as the previous disabled state so the visual signal "this
is locked" carries through, but remains clickable so the user can
reverse an accidental lock. Hover lifts opacity and adds the
amber-warning shadow to telegraph "clicking this will undo something". */
.applied-lock-btn-locked {
background: var(--green-dim);
color: var(--green);
border-color: var(--green);
}
.applied-lock-btn-locked:hover {
background: var(--green);
color: #0a0c12;
box-shadow: 0 0 10px rgba(46, 204, 113, 0.45);
}
.decision-question {
font-size: var(--fs-13);
font-weight: 600;
color: var(--text);
margin-bottom: var(--space-8);
line-height: 1.4;
}
.decision-current {
font-size: var(--fs-13);
color: var(--text-dim);
margin-bottom: var(--space-10);
font-style: italic;
}
.decision-current-clickable {
cursor: pointer;
}
.decision-current-clickable:hover {
color: var(--accent);
}
.decision-label {
font-weight: 700;
font-style: normal;
color: var(--text);
}
.decision-options {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.decision-opt-btn {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-8);
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
padding: var(--space-8) var(--space-10);
cursor: pointer;
text-align: left;
transition: all 0.15s;
width: 100%;
}
.decision-opt-btn:hover {
border-color: var(--amber);
background: var(--surface3);
}
.decision-opt-btn.selected {
border-color: #00b300;
background: rgba(52, 211, 153, 0.08);
}
.decision-opt-num {
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 700;
color: var(--amber);
background: var(--surface3);
border-radius: 4px;
padding: 1px var(--space-6);
flex-shrink: 0;
line-height: 1.6;
margin-top: 1px;
}
/* decision-opt-num selected colours now handled per-variant below */
.decision-opt-text {
font-size: var(--fs-12);
color: var(--text);
line-height: 1.5;
min-width: 0;
flex: 1;
word-break: break-word;
overflow-wrap: anywhere;
}
.decision-opt-custom {
border-style: dashed;
}
/* Source order wins: this rule comes after .decision-opt-btn.selected above,
at equal specificity (0,2,0), so it overrides naturally without !important. */
.decision-opt-custom.selected {
border-color: var(--amber);
background: rgba(245,166,35,0.08);
}
.decision-opt-bypass {
border-style: dashed;
opacity: 0.6;
}
.decision-opt-bypass:hover { opacity: 1; }
.decision-opt-bypass.selected {
border-color: var(--text-dim);
background: rgba(255,255,255,0.04);
opacity: 1;
}
/* ── Lock in Notes button on conflict cards ── */
.decision-lock-row {
padding: var(--space-6) 0 2px;
display: flex;
justify-content: flex-end;
}
.decision-lock-btn {
background: transparent;
border: 1px dashed var(--border2);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-family: var(--font);
font-size: var(--fs-11);
padding: var(--space-4) var(--space-12);
cursor: pointer;
transition: all 0.12s;
}
.decision-lock-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-dim);
}
.decision-card.bypassed {
border-color: var(--border2);
opacity: 0.65;
}
.decision-card.bypassed .decision-badge {
background: var(--surface3);
color: var(--text-dim);
}
.decision-custom-wrap {
margin-top: var(--space-8);
}
.decision-custom-ta {
width: 100%;
background: var(--surface);
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-mono);
font-size: var(--fs-12);
line-height: 1.5;
padding: var(--space-8) var(--space-10);
resize: vertical;
min-height: 60px;
outline: none;
box-sizing: border-box;
}
.decision-custom-ta:focus {
border-color: var(--accent-hover);
}
.decision-opt-ais {
font-size: var(--fs-11);
color: var(--text-dim);
font-style: italic;
white-space: normal;
line-height: 1.4;
padding-bottom: 1px;
display: block;
margin-top: 2px;
flex-basis: 100%;
min-width: 0;
overflow-wrap: anywhere;
}
/* ── APPLY DECISIONS BUTTON ── */
.btn-apply-decisions {
width: 100%;
padding: 12px;
background: #00b300;
border: none;
border-radius: var(--radius-sm);
color: #0a0c12;
font-family: var(--font);
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-bottom: 12px;
transition: all 0.15s;
}
.btn-apply-decisions:hover:not(:disabled) {
background: #10b981;
transform: translateY(-1px);
}
.btn-apply-decisions:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* ── CHURN (v3.56.15) ── */
/* Header banner for a synthetic churn decision. Uses the same amber language
as the length/repeat warnings — caution, not error. */
.churn-warning {
background: rgba(245,166,35,0.1);
color: var(--accent);
border: 1px solid var(--accent);
text-transform: none;
letter-spacing: 0.01em;
line-height: 1.4;
}
[data-theme="light"] .churn-warning { background: rgba(201,124,6,0.08); }
@media (prefers-color-scheme: light) {
[data-theme="auto"] .churn-warning { background: rgba(201,124,6,0.08); }
}
/* Churn decision card — amber edge to read as the hive looping, distinct from
the red repeat-offender card and the green resolved/locked states. */
.decision-card.decision-card-churn {
border-color: var(--accent);
background: var(--accent-dim);
}
.decision-card.decision-card-churn .decision-badge {
color: var(--accent);
}
/* "Apply without locking" — de-emphasized escape hatch under Apply & Lock. */
.btn-apply-nolock {
width: 100%;
padding: 8px 12px;
background: transparent;
border: 1px dashed var(--border2);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-family: var(--font);
font-size: 12px;
font-weight: 600;
cursor: pointer;
margin-bottom: 12px;
transition: all 0.12s;
}
.btn-apply-nolock:hover:not(:disabled) {
border-color: var(--text-dim);
color: var(--text);
background: rgba(255,255,255,0.04);
}
.btn-apply-nolock:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ── BUILDER DECISIONS (informational) ── */
.builder-decisions-section {
border-top: 1px solid var(--border);
padding-top: var(--space-10);
margin-top: var(--space-4);
}
.builder-decisions-title {
font-size: var(--fs-11);
font-weight: 700;
color: var(--blue);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-8);
}
.builder-decision-item {
font-size: var(--fs-12);
color: var(--muted);
margin-bottom: var(--space-6);
padding-left: var(--space-8);
border-left: 2px solid var(--blue);
line-height: 1.5;
}
/* ── SMOKER OVERLAY ── */
.smoker-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 8000;
display: none;
pointer-events: none;
}
.smoker-overlay.active {
display: block;
}
.smoker-stage {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-12);
border-radius: var(--radius-lg);
padding: 148px var(--space-32) var(--space-48);
width: 760px;
max-height: 90vh;
overflow: hidden;
}
.smoker-stage::before {
content: "";
position: absolute;
inset: 0;
background: rgba(6, 8, 14, 0.98);
backdrop-filter: blur(6px);
border-radius: var(--radius-lg);
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 16px 48px rgba(0,0,0,0.6);
z-index: -1;
pointer-events: none;
}
.smoker-hero-img {
position: relative;
z-index: 1;
width: 420px;
height: 420px;
object-fit: contain;
margin-top: var(--space-40);
filter: drop-shadow(0 0 40px rgba(245,166,35,0.6));
animation: smokerBob 2s ease-in-out infinite;
}
@keyframes smokerBob {
0% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-12px) rotate(2deg); }
100% { transform: translateY(0) rotate(-2deg); }
}
.smoker-overlay-label {
font-family: var(--font-display);
font-size: var(--fs-22);
font-weight: 800;
color: var(--accent);
letter-spacing: 0.06em;
text-shadow: 0 0 20px rgba(245,166,35,0.5);
animation: smokerPulse 1.5s ease-in-out infinite;
}
@keyframes smokerPulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
.smoker-subtitle {
font-size: var(--fs-12);
color: rgba(255,255,255,0.75);
line-height: 1.6;
text-align: center;
max-width: 420px;
font-style: italic;
opacity: 0;
animation: smokerExplanationFadeIn 0.8s ease-out 1.5s forwards;
}
@keyframes smokerExplanationFadeIn {
0% { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ══════════════════════════════════════
BUILDER OVERLAY — belt + end station
══════════════════════════════════════ */
.builder-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 8000;
display: none;
pointer-events: none;
}
.builder-overlay.active {
display: block;
}
.builder-stage {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-10);
border-radius: var(--radius-lg);
padding: var(--space-28) var(--space-32) var(--space-20);
overflow: visible;
}
.builder-stage::before {
content: "";
position: absolute;
inset: 0;
background: rgba(6, 8, 14, 0.98);
backdrop-filter: blur(6px);
border-radius: var(--radius-lg);
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 16px 48px rgba(0,0,0,0.6);
z-index: -1;
pointer-events: none;
}
/* Scene wrap — image with blocks sliding out left */
.builder-scene-wrap {
position: relative;
width: 760px;
overflow: visible;
}
/* Image full width */
.builder-station-img {
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 1;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.3));
}
/* Belt segments — silver blocks IN the belt surface, create movement illusion */
/* AI blocks track — sits above the belt */
.builder-belt-track {
position: absolute;
bottom: 32%;
left: 0;
right: 0;
height: 70px;
overflow: visible;
pointer-events: none;
}
/* AI branded blocks — icon + name, exit right to left */
.builder-block {
position: absolute;
top: 0;
width: 110px;
height: 60px;
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border: 1px solid rgba(56,210,210,0.40);
background: linear-gradient(180deg, rgba(20,22,32,0.88), rgba(10,12,18,0.92));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 14px rgba(0,0,0,0.5);
animation: builderBlockExit var(--belt-dur, 8s) linear var(--belt-delay, 0s) infinite;
white-space: nowrap;
overflow: hidden;
}
.builder-block-icon {
width: 22px;
height: 22px;
object-fit: contain;
border-radius: 4px;
flex-shrink: 0;
}
.builder-block-name {
font-family: var(--font-display);
font-size: var(--fs-11) /* snapped from 10px */;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #eafcff;
}
/* Sparks at drill tip */
.builder-station-sparks {
position: absolute;
top: 63%;
left: calc(80% + 20px);
width: 140px;
height: 140px;
pointer-events: none;
z-index: 5;
overflow: visible;
}
.builder-station-sparks span {
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 5px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #ffe566 35%, var(--accent) 68%, transparent 100%);
box-shadow: 0 0 8px rgba(255,220,80,0.95);
transform: translate(0, 0);
transform-origin: center;
animation: builderSparkBurst var(--spark-dur, 0.85s) ease-out var(--spark-delay, 0s) infinite;
opacity: 0;
}
.builder-station-sparks span:nth-child(1) { --dx: 18px; --dy: 60px; --spark-dur: .55s; --spark-delay: .00s; }
.builder-station-sparks span:nth-child(2) { --dx: 28px; --dy: 80px; --spark-dur: .65s; --spark-delay: .05s; }
.builder-station-sparks span:nth-child(3) { --dx: 65px; --dy: 30px; --spark-dur: .70s; --spark-delay: .10s; }
.builder-station-sparks span:nth-child(4) { --dx: 44px; --dy: 70px; --spark-dur: .75s; --spark-delay: .15s; }
.builder-station-sparks span:nth-child(5) { --dx: 10px; --dy: 100px; --spark-dur: .80s; --spark-delay: .20s; }
.builder-station-sparks span:nth-child(6) { --dx: -40px; --dy: 45px; --spark-dur: .85s; --spark-delay: .03s; }
.builder-station-sparks span:nth-child(7) { --dx: 22px; --dy: 75px; --spark-dur: .60s; --spark-delay: .08s; }
.builder-station-sparks span:nth-child(8) { --dx: 34px; --dy: 95px; --spark-dur: .72s; --spark-delay: .12s; }
.builder-station-sparks span:nth-child(9) { --dx: 70px; --dy: 25px; --spark-dur: .82s; --spark-delay: .18s; }
.builder-station-sparks span:nth-child(10) { --dx: 46px; --dy: 110px; --spark-dur: .90s; --spark-delay: .24s; }
.builder-station-sparks span:nth-child(11) { --dx: 26px; --dy: 65px; --spark-dur: .68s; --spark-delay: .28s; }
.builder-station-sparks span:nth-child(12) { --dx: -30px; --dy: 55px; --spark-dur: .78s; --spark-delay: .32s; }
/* Label */
.builder-overlay-label {
font-family: var(--font-display);
font-size: var(--fs-18);
font-weight: 800;
color: var(--accent);
letter-spacing: 0.06em;
text-shadow: 0 0 16px rgba(245,166,35,0.5);
animation: smokerPulse 1.5s ease-in-out infinite;
}
/* Keyframes — blocks exit left from bee workstation */
@keyframes builderBlockExit {
from { transform: translateX(660px); opacity: 0; }
6% { opacity: 1; }
70% { opacity: 1; }
85% { opacity: 0; }
to { transform: translateX(-140px); opacity: 0; }
}
@keyframes builderSegMove {
from { transform: translateX(760px); }
to { transform: translateX(-80px); }
}
@keyframes builderSparkBurst {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
35% { opacity: 1; }
100% { transform: translate(var(--dx), var(--dy)) scale(0.15); opacity: 0; }
}
/* Smoke particles — out the top of the nozzle */
.smoke-particles {
position: absolute;
top: 140px;
left: 50%;
transform: translateX(-86%);
width: 180px;
height: 160px;
pointer-events: none;
z-index: 2;
}
.smoke-puff {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(210,210,230,0.85) 0%, rgba(190,190,210,0.5) 40%, transparent 70%);
opacity: 0;
animation: smokePuff var(--dur, 2.5s) ease-out var(--delay, 0s) infinite;
}
@keyframes smokePuff {
0% { transform: translate(var(--ox, 0), 0) scale(0.15); opacity: 1; }
30% { transform: translate(calc(var(--ox, 0) * 0.6), -40px) scale(0.6); opacity: 0.9; }
65% { transform: translate(calc(var(--ox, 0) * 0.3), -90px) scale(1.8); opacity: 0.5; }
100% { transform: translate(0, -150px) scale(3.5); opacity: 0; }
}
/* ── NOTES DRAWER ── */
.notes-drawer {
position: fixed;
bottom: 64px;
left: 50%;
transform: translateX(-50%) translateY(150%);
width: 720px;
max-width: calc(100vw - 48px);
/* v3.36.14 — z-index bumped from 7000 to 8500 so the drawer sits
ABOVE the smoker overlay (8000) and builder overlay (8000).
Without this, opening Notes mid-round forced the user to type
blind underneath the running animation. Stays well below modals
(9999) so any modal opened mid-typing still wins.
v3.36.17 — drawer height grows to accommodate two stacked
sections (one-shot + standing). max-height caps at viewport
minus chrome so it never overflows. */
z-index: 8500;
max-height: calc(100vh - 96px);
background: var(--surface);
border: 1px solid var(--accent);
border-bottom: none;
border-radius: var(--radius-md) var(--radius-md) 0 0;
box-shadow: 0 -8px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--accent-dim);
display: flex;
flex-direction: column;
transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
pointer-events: none;
visibility: hidden;
overflow: hidden;
}
.notes-drawer.active {
transform: translateX(-50%) translateY(0%);
pointer-events: all;
visibility: visible;
}
.notes-drawer-hdr {
display: flex;
align-items: center;
gap: var(--space-12);
padding: var(--space-10) var(--space-16);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.notes-drawer-title {
font-size: var(--fs-14);
font-weight: 700;
color: var(--text);
white-space: nowrap;
flex-shrink: 0;
}
.notes-drawer-sub {
font-size: var(--fs-12);
color: var(--muted);
flex: 1;
min-width: 0;
}
.notes-drawer-actions {
display: flex;
gap: var(--space-6);
flex-shrink: 0;
}
.notes-drawer-ta {
background: var(--surface2);
border: none;
color: var(--text);
font-family: var(--font-mono);
font-size: var(--fs-13);
line-height: 21px;
padding: var(--space-12) var(--space-16);
resize: none;
outline: none;
width: 100%;
box-sizing: border-box;
}
.notes-drawer-ta:focus { background: var(--surface3); }
/* v3.36.17 — Two-section drawer: stacked sections within #notesModal.
One-shot on top (auto-clears after Builder), standing on bottom
(persists across rounds). Each section has its own header strip
with title, sub-label, and per-section actions (Copy / Clear).
Standing section gets a subtle top divider so the two read as
distinct surfaces without heavy chrome. */
.notes-section {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.notes-section-standing {
border-top: 1px solid var(--border);
}
.notes-section-hdr {
display: flex;
align-items: center;
gap: var(--space-12);
padding: var(--space-8) var(--space-16);
background: var(--surface);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.notes-section-title {
font-size: var(--fs-13);
font-weight: 700;
color: var(--text);
white-space: nowrap;
flex-shrink: 0;
}
.notes-section-sub {
font-size: var(--fs-11);
color: var(--muted);
flex: 1;
min-width: 0;
}
.notes-section-actions {
display: flex;
gap: var(--space-6);
flex-shrink: 0;
}
.notes-ta-oneshot {
height: 200px;
}
.notes-ta-standing {
height: 140px;
border-radius: 0 0 var(--radius-md) var(--radius-md);
}
/* ── notes-templates: quick-fill template buttons in the Notes drawer ── */
.notes-templates {
display: flex;
align-items: center;
gap: var(--space-6);
padding: var(--space-6) var(--space-16);
background: var(--surface2);
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
flex-shrink: 0;
}
.notes-templates-label {
font-size: var(--fs-11);
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
flex-shrink: 0;
}
.notes-template-btn {
background: transparent;
border: 1px solid var(--border2);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-family: var(--font);
font-size: var(--fs-11);
padding: var(--space-4) var(--space-10);
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
flex-shrink: 0;
}
.notes-template-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-dim);
}
/* ── ROUND HISTORY MODAL ── */
.hist-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-24);
backdrop-filter: blur(4px);
}
.hist-modal-overlay.active {
display: flex;
}
.hist-modal {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 1000px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.hist-modal-hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-20) var(--space-28);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
background: var(--surface2);
gap: var(--space-16);
}
.hist-modal-brand {
display: flex;
align-items: center;
gap: var(--space-18);
}
.hist-modal-bee {
width: 200px;
height: 200px;
object-fit: contain;
filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
flex-shrink: 0;
margin-bottom: -60px;
}
.hist-modal-title {
font-family: var(--font-display);
font-size: var(--fs-32);
font-weight: 800;
color: var(--text);
line-height: 1;
}
.hist-modal-sub {
font-size: var(--fs-13);
color: var(--muted);
margin-top: var(--space-6);
}
.hist-modal .round-history {
flex: 1;
overflow-y: auto;
padding: var(--space-12);
scrollbar-width: thin;
scrollbar-color: var(--border2) transparent;
}
/* ══════════════════════════════════════
FINISH MODAL
══════════════════════════════════════ */
.finish-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-24);
backdrop-filter: blur(4px);
overflow-y: auto;
}
/* When modal content is taller than viewport, stick to top */
.finish-modal-overlay.active {
display: flex;
align-items: flex-start;
}
.finish-modal {
background: var(--surface);
border: 1px solid var(--border2);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-40) var(--space-48) 36px;
width: 100%;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
text-align: center;
}
.finish-modal-bee {
width: 40px;
height: 40px;
object-fit: contain;
}
.finish-modal-logo {
width: 288px;
height: 288px;
object-fit: contain;
filter: drop-shadow(0 0 24px rgba(245,166,35,0.5));
}
.finish-modal-title {
font-family: var(--font-display);
font-size: var(--fs-24);
font-weight: 800;
color: var(--text);
margin: 0;
}
.finish-modal-msg {
font-size: var(--fs-13);
color: var(--text-dim);
line-height: 1.6;
margin: 0;
}
.finish-modal-actions {
display: flex;
flex-direction: column;
gap: var(--space-10);
width: 100%;
}
.finish-modal-btn {
width: 100%;
padding: 13px var(--space-20);
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-size: var(--fs-15);
font-weight: 700;
cursor: pointer;
background: transparent;
transition: all 0.12s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
}
.finish-modal-btn-export {
border: 1px dashed var(--accent);
color: var(--text);
}
.finish-modal-btn-export:hover {
background: var(--accent-dim);
border-style: solid;
color: var(--accent);
}
.finish-modal-btn-new {
border: 1px dashed var(--green);
color: var(--text);
flex-direction: column;
gap: var(--space-4);
}
.finish-modal-btn-new:hover {
background: var(--green-dim);
border-style: solid;
color: var(--green);
}
/* v3.28.1 — Missing .finish-modal-btn-transcript definition. The Round
Error Modal's "Change Builder" button referenced this class but it was
never declared, so the button rendered invisible (transparent
background, no border, no color). Same dashed→solid pattern as -export
and -new, but accent-keyed since it's a Builder action. */
.finish-modal-btn-transcript {
border: 1px dashed var(--accent);
color: var(--text);
}
.finish-modal-btn-transcript:hover {
background: var(--accent-dim);
border-style: solid;
color: var(--accent);
}
.finish-modal-btn-new-sub {
font-size: var(--fs-11);
font-weight: 400;
opacity: 0.75;
line-height: 1.4;
font-family: var(--font);
}
.finish-modal-footer-btns {
display: flex;
gap: var(--space-10);
justify-content: center;
margin-top: var(--space-4);
}
.finish-modal-cancel {
background: transparent;
border: 1px dashed var(--border2);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-size: var(--fs-13);
font-weight: 500;
cursor: pointer;
padding: var(--space-6) var(--space-16);
transition: all 0.12s;
font-family: var(--font);
}
.finish-modal-cancel:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-dim);
}
/* ══════════════════════════════════════
WAXFRAME CONFIRM MODAL (v3.26.8)
Promise-based replacement for native confirm()
══════════════════════════════════════ */
/* v3.56.8 — wfConfirm is a blocking confirm dialog and must sit above ALL
other modals. It shared the .finish-modal-overlay z-index (99999) with the
Deep Dive capture viewer (.ddv-overlay), and being EARLIER in the DOM it lost
the tie and rendered behind — so the Sensitive-backup confirm launched from
the viewer's Save Backup button was invisible/unclickable. ID selector wins
the cascade; this guarantees the confirm is always on top regardless of which
modal opened it. */
#wfConfirmModal { z-index: 1000000; }
.wf-confirm-modal {
max-width: 480px;
text-align: center;
}
.wf-confirm-modal .finish-modal-msg {
text-align: left;
white-space: pre-wrap;
}
.wf-confirm-actions {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-12);
margin-top: var(--space-20);
}
.wf-confirm-actions .finish-modal-cancel {
margin-top: 0;
}
#wfConfirmOkBtn.wf-confirm-danger {
background: rgba(220, 70, 70, 0.18);
border-color: rgba(220, 70, 70, 0.5);
color: #ff8a8a;
}
#wfConfirmOkBtn.wf-confirm-danger:hover {
background: rgba(220, 70, 70, 0.32);
border-color: rgba(220, 70, 70, 0.8);
color: #ffaaaa;
}
/* v3.54.0 — optional checkbox row in wfConfirm (used by Diagnostic Bundle) */
.wf-confirm-check-row {
display: flex;
align-items: flex-start;
gap: var(--space-8);
text-align: left;
margin-top: var(--space-16);
font-size: var(--fs-sm);
color: var(--text-dim);
cursor: pointer;
line-height: 1.4;
}
.wf-confirm-check-row input[type="checkbox"] {
margin-top: 2px;
flex-shrink: 0;
cursor: pointer;
}
/* v3.32.18 — Length guard modal. Inherits .finish-modal sizing. The
trajectory rows are a small key/value table-style block that gives the
user enough context to decide between Discard / Keep / Continue Anyway
without going back to read the doc. Action buttons are stacked
vertically since the labels are too long for a single horizontal row
at 600px modal width — also makes the destructive option (Continue
Anyway · disable guard) read more clearly when isolated on its own row. */
.length-guard-modal {
max-width: 540px;
text-align: left;
}
.length-guard-modal .finish-modal-title {
text-align: center;
}
.length-guard-modal .finish-modal-msg {
text-align: center;
margin-bottom: var(--space-14);
}
.length-guard-trajectory {
width: 100%;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: var(--radius-md);
padding: var(--space-12) var(--space-14);
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-bottom: var(--space-18);
}
.length-guard-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: var(--fs-13);
gap: var(--space-12);
}
.length-guard-row-label {
color: var(--text-dim);
font-weight: 500;
}
.length-guard-row-value {
color: var(--text);
font-weight: 600;
font-family: var(--font-mono);
text-align: right;
}
.length-guard-row-delta .length-guard-row-value {
/* Trajectory direction is communicated in the value text itself
(↓ N words / ↑ N words / unchanged) — color is set inline by JS
via classList so the row keeps a stable structure. */
}
.length-guard-row-delta.is-improving .length-guard-row-value { color: #4ade80; }
.length-guard-row-delta.is-worsening .length-guard-row-value { color: #f87171; }
.length-guard-row-delta.is-stalled .length-guard-row-value { color: var(--text-dim); }
.length-guard-actions {
display: flex;
flex-direction: column;
gap: var(--space-8);
width: 100%;
margin-bottom: var(--space-14);
}
.length-guard-actions .btn {
width: 100%;
padding: var(--space-10) var(--space-14);
font-size: var(--fs-14);
font-weight: 600;
}
.length-guard-discard {
/* Default — same visual weight as the Cancel buttons in other modals.
"Discard" is the safe / conservative choice that matches existing
behavior, so it's intentionally not styled as destructive. */
}
.length-guard-keep {
background: rgba(245, 166, 35, 0.16);
border-color: rgba(245, 166, 35, 0.45);
color: #f5a623;
}
.length-guard-keep:hover {
background: rgba(245, 166, 35, 0.28);
border-color: rgba(245, 166, 35, 0.7);
color: #ffc56b;
}
.length-guard-builderfix {
/* v3.56.9 — Send the converged document back to the Builder to trim (over)
or expand (under) into range, then re-check. The recommended, non-
destructive fix — positive primary (green), distinct from Keep (amber)
and Continue/disable-guard (red). */
background: rgba(74, 184, 122, 0.18);
border-color: rgba(74, 184, 122, 0.5);
color: #6fd49b;
}
.length-guard-builderfix:hover {
background: rgba(74, 184, 122, 0.30);
border-color: rgba(74, 184, 122, 0.8);
color: #8fe6b5;
}
.length-guard-continue {
/* Continue anyway is the most consequential option (disables the guard
for the rest of the session), so we surface it with the destructive-red
style used by wf-confirm-danger. Communicates "this changes more than
just this round." */
background: rgba(220, 70, 70, 0.18);
border-color: rgba(220, 70, 70, 0.5);
color: #ff8a8a;
}
.length-guard-continue:hover {
background: rgba(220, 70, 70, 0.32);
border-color: rgba(220, 70, 70, 0.8);
color: #ffaaaa;
}
.length-guard-help {
font-size: var(--fs-11);
color: var(--text-dim);
line-height: 1.5;
text-align: left;
margin: 0;
padding: var(--space-10) var(--space-12);
background: var(--surface2);
border-radius: var(--radius-sm);
}
.length-guard-help strong {
color: var(--text);
}
/* v3.32.28 — Hide row helper for length-guard modal kinds that don't
apply to all rows. The convergence kinds hide the Prior-document
and Trajectory rows because there's no round-to-round comparison
to display — the gate is on the standalone document length. */
.length-guard-row.is-hidden {
display: none;
}
/* ─────────────────────────────────────────────────────────────────
v3.35.0 — AUTO MODE
Toggle pill in work-topbar-right + halt modal.
─────────────────────────────────────────────────────────────────
Toggle pill mirrors the .theme-opt aesthetic (rounded, compact,
topbar-friendly) and shifts color palette by state:
• Manual (default) — neutral border, dim text
• Auto: ON — accent border + accent fill, animated
pulse on the icon to communicate "live"
v3.36.14: Static "Auto" label both states; round-count counter
moved off the pill, logged to LIVE CONSOLE on toggle-ON instead.
Halt modal piggybacks on the existing .finish-modal-overlay base
so we inherit fade-in, backdrop, centering, and breakpoint behavior.
Three buttons stack vertically; resume button takes the accent.
*/
/* v3.36.16 — Auto Mode toggle uses its own three-color semantic so
it doesn't masquerade as a hard warning when nothing is wrong.
Default (Manual) = amber accent fill — matches the system's
--accent palette and signals "user is in the loop, this is the
default mode, no risk here". .is-auto = green-dim/green like
the License badge — signals "active and chaining, not idle".
Pulse animation on the icon stays on .is-auto only.
v3.36.16 also drops the v3.35.0-era .auto-mode-detail counter
rule (round-count counter was removed from the pill in v3.36.14;
the rule was a straggler).
*/
.auto-mode-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-6);
background: var(--accent-dim);
border: 1px solid var(--accent);
border-radius: 20px;
color: var(--accent);
cursor: pointer;
font-size: var(--fs-11);
font-weight: 700;
padding: var(--space-4) var(--space-10);
transition: all 0.12s;
white-space: nowrap;
user-select: none;
}
.auto-mode-toggle:hover:not(.is-auto) {
background: var(--accent);
color: #0a0c12;
box-shadow: 0 0 10px rgba(245, 166, 35, 0.45);
}
.auto-mode-toggle .auto-mode-icon {
/* v3.36.19 — line-height removed for the same reason as
.length-guard-indicator-icon: the explicit `line-height: 1`
was clamping the inline-flex container shorter than the
.license-badge pill. Three-pill height parity restored. */
display: inline-block;
font-size: var(--fs-13);
}
.auto-mode-toggle .auto-mode-label {
letter-spacing: 0.01em;
}
.auto-mode-toggle.is-auto {
background: var(--green-dim);
border-color: var(--green);
color: var(--green);
}
.auto-mode-toggle.is-auto:hover {
background: var(--green);
color: #0a0c12;
box-shadow: 0 0 10px rgba(46, 204, 113, 0.45);
}
.auto-mode-toggle.is-auto .auto-mode-icon {
animation: autoModePulse 1.6s ease-in-out infinite;
}
@keyframes autoModePulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.auto-mode-toggle.is-auto .auto-mode-icon { animation: none; }
}
/* Halt modal — three vertical action buttons.
Inherits .finish-modal-overlay fade-in + .finish-modal centering. */
.auto-halt-modal {
max-width: 480px;
text-align: center;
}
.auto-halt-modal .auto-halt-icon {
font-size: var(--fs-24);
margin-bottom: var(--space-8);
}
.auto-halt-modal .auto-halt-reason {
margin: var(--space-12) 0 var(--space-20);
color: var(--text-dim);
line-height: 1.5;
}
.auto-halt-modal .auto-halt-actions {
display: flex;
flex-direction: column;
gap: var(--space-10);
margin-top: var(--space-16);
}
.auto-halt-btn {
appearance: none;
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 8px;
color: var(--text);
cursor: pointer;
font-family: var(--font-display);
font-size: var(--fs-14);
font-weight: 600;
padding: var(--space-12) var(--space-16);
transition: all 0.12s;
}
.auto-halt-btn:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
}
.auto-halt-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.auto-halt-btn.auto-halt-resume {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
.auto-halt-btn.auto-halt-resume:hover:not(:disabled) {
background: var(--accent-hover);
border-color: var(--accent-hover);
color: var(--bg);
}
.auto-halt-btn.auto-halt-resume:disabled:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
.auto-halt-btn.auto-halt-stop {
color: var(--red);
border-color: var(--red);
background: var(--red-dim);
}
.auto-halt-btn.auto-halt-stop:hover:not(:disabled) {
background: var(--red);
border-color: var(--red);
color: var(--bg);
}
/* End v3.35.0 — Auto Mode ───────────────────────────────────────── */
/* v3.32.28 — #6c toolbar "Length guard: off" indicator.
Renders only when window._lengthGuardOverride is true (the
is-visible class is toggled by updateLengthGuardIndicator).
Pill matches the existing topbar pill aesthetic (.work-start-mode,
.work-project-version) but uses the amber palette to communicate
"guard disabled — be aware". Clickable: re-arms the guard for
the rest of the project. The hover state intensifies the amber
to signal the affordance. */
/* v3.36.16 — Length-guard footer pill mirrors the License badge
geometry and color system. Green when armed (default, like
.licensed), red when off (like the unlicensed base). Same
font-size, weight, padding, radius as .license-badge so the two
pills sit as visual siblings in the footer-right cluster. */
.length-guard-indicator {
display: inline-flex;
align-items: center;
gap: var(--space-4);
font-size: var(--fs-11);
font-weight: 700;
/* v3.36.20 — Explicit line-height matches html/body's 1.6.
The .license-badge sibling is a that inherits body
line-height; this