/* ═══════════════════════════════════════════════════════════════
Otack Manager — Design System CSS
Font: Manrope (sans), JetBrains Mono (mono). No serif, no italic.
Source of truth: docs/DESIGN.md
═══════════════════════════════════════════════════════════════ */
/* ─── §1 Layer A — Palette (reference tokens) ────────────────── */
:root {
/* PAPER (warm canvas, 4 steps) */
--paper: #ffffff;
--paper-2: #F5F2EC;
--paper-3: #E2D9C5;
--paper-4: #D4C8AC;
/* INK (warm dark text, 4 steps) */
--ink: #1A1612;
--ink-2: #5A4E3F;
--ink-3: #8B7C68;
--ink-4: #A89A85;
/* RULE (subtle dividers, 3 steps) */
--rule: #D7CFBF;
--rule-2: #C5B99F;
--rule-3: #B0A487;
/* BRAND (warm orange, 5 steps) */
--brand: #C2410C;
--brand-2: #9A2F06;
--brand-3: #FCE4D6;
--brand-4: #F8D1B9;
--brand-pop: #EA580C;
/* SEMANTIC TONES */
--green: #4D6840; --green-tint: #E5EFDC;
--red: #B23A2B; --red-tint: #F5DAD5;
--blue: #2E5A88; --blue-tint: #DCE7F3;
--yellow: #B5871E; --yellow-tint: #FAEFCD;
--teal: #2E7878; --teal-tint: #D8ECEC;
--purple: #6B4B82; --purple-tint: #E8DEEF;
--magenta: #993E62; --magenta-tint: #F2D7DF;
--brown: #7C5034; --brown-tint: #ECDED1;
--olive: #6B7A3A; --olive-tint: #E8ECD3;
--indigo: #4B3F88; --indigo-tint: #DDD9EF;
}
/* ─── §1 Layer B — Semantic roles ────────────────────────────── */
:root {
/* Surfaces — V4 Hybrid: warm paper base, white cards sit on top */
--bg: var(--paper-2);
--bg-elevated: var(--paper);
--bg-sunken: var(--paper-3);
/* Text */
--text: var(--ink);
--text-2: var(--ink-2);
--text-muted: var(--ink-3);
--text-placeholder: var(--ink-4);
--text-on-brand: var(--paper);
--text-on-dark: var(--paper);
--text-link: var(--brand);
--text-link-hover: var(--brand-pop);
/* Borders */
--border: var(--rule);
--border-strong: var(--rule-2);
--border-focus: var(--brand-pop);
/* Brand */
--accent: var(--brand);
--accent-hover: var(--brand-2);
--accent-pop: var(--brand-pop);
--accent-tint: var(--brand-3);
/* Status */
--success: var(--green);
--success-bg: var(--green-tint);
--danger: var(--red);
--danger-bg: var(--red-tint);
--warning: var(--yellow);
--warning-bg: var(--yellow-tint);
--info: var(--blue);
--info-bg: var(--blue-tint);
/* Focus ring */
--focus-ring: var(--brand-pop);
--focus-ring-alpha: rgba(234, 88, 12, 0.25);
/* Component surfaces (extracted so dark theme can override cleanly).
topbar-bg matches the page bg with slight transparency so the rounded
top-left of .main reads as a single curved cream surface against the
white shell instead of a hard rectangular topbar covering it. */
--topbar-bg: rgba(245, 242, 236, 0.92);
--surface-soft: #f8f7f7;
--auth-page-bg: #ffffff;
}
/* ─── §1 Layer D — Dark theme palette ────────────────────────
Token-level inversion. Every semantic role above still resolves
correctly because we only swap the leaf palette values. Activate
via `` (server-rendered from cookie) or
automatically via `prefers-color-scheme: dark` when no explicit
theme is chosen. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* PAPER inverted — deep warm graphite stack */
--paper: #1A1612;
--paper-2: #221D17;
--paper-3: #2D2620;
--paper-4: #3A3128;
/* INK inverted — cream stack for text */
--ink: #F5F2EC;
--ink-2: #D7CFBF;
--ink-3: #A89A85;
--ink-4: #7A6E5C;
/* RULE — dark warm dividers */
--rule: #3A3128;
--rule-2: #4A3F33;
--rule-3: #5A4E3F;
/* BRAND — warm orange slightly punchier on dark */
--brand: #EA580C;
--brand-2: #FB7837;
--brand-3: #3D2014;
--brand-4: #4F2A1B;
--brand-pop: #FB7837;
/* SEMANTIC TONES — solid stays, tint becomes deep version */
--green: #7AA068; --green-tint: #1E2A18;
--red: #D4604F; --red-tint: #2E1814;
--blue: #5A92C5; --blue-tint: #172836;
--yellow: #E0A93A; --yellow-tint: #2C2110;
--teal: #5BAFAF; --teal-tint: #14302F;
--purple: #9D7BB5; --purple-tint: #221A2C;
--magenta: #C5688A; --magenta-tint: #2A141E;
--brown: #B07C58; --brown-tint: #2A1D14;
--olive: #99A85A; --olive-tint: #1E2410;
--indigo: #7A6FC2; --indigo-tint: #1A1730;
/* Component surface overrides */
--topbar-bg: rgba(26, 22, 18, 0.85);
--surface-soft: #221D17;
--auth-page-bg: #1A1612;
color-scheme: dark;
}
}
/* Manual override — duplicated rule body so cascade works regardless of OS */
:root[data-theme="dark"] {
--paper: #1A1612;
--paper-2: #221D17;
--paper-3: #2D2620;
--paper-4: #3A3128;
--ink: #F5F2EC;
--ink-2: #D7CFBF;
--ink-3: #A89A85;
--ink-4: #7A6E5C;
--rule: #3A3128;
--rule-2: #4A3F33;
--rule-3: #5A4E3F;
--brand: #EA580C;
--brand-2: #FB7837;
--brand-3: #3D2014;
--brand-4: #4F2A1B;
--brand-pop: #FB7837;
--green: #7AA068; --green-tint: #1E2A18;
--red: #D4604F; --red-tint: #2E1814;
--blue: #5A92C5; --blue-tint: #172836;
--yellow: #E0A93A; --yellow-tint: #2C2110;
--teal: #5BAFAF; --teal-tint: #14302F;
--purple: #9D7BB5; --purple-tint: #221A2C;
--magenta: #C5688A; --magenta-tint: #2A141E;
--brown: #B07C58; --brown-tint: #2A1D14;
--olive: #99A85A; --olive-tint: #1E2410;
--indigo: #7A6FC2; --indigo-tint: #1A1730;
--topbar-bg: rgba(26, 22, 18, 0.85);
--surface-soft: #221D17;
--auth-page-bg: #1A1612;
color-scheme: dark;
}
/* ─── §2 Tokens — radius, shadow, motion, spacing, z-index ───── */
:root {
/* Radius */
--radius-xs: 3px;
--radius-sm: 4px;
--radius: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px;
/* Shadows (warm-tinted) */
--shadow-xs: 0 1px 0 rgba(26, 22, 18, 0.06);
--shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.08), 0 1px 1px rgba(26, 22, 18, 0.04);
--shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 2px 0 rgba(215, 207, 191, 0.4),
0 18px 40px -28px rgba(26, 22, 18, 0.14);
--shadow-card: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 2px 0 rgba(215, 207, 191, 0.4),
0 18px 40px -28px rgba(26, 22, 18, 0.14);
--shadow-md: 0 4px 12px rgba(26, 22, 18, 0.06), 0 1px 3px rgba(26, 22, 18, 0.05);
--shadow-lg: 0 12px 30px -8px rgba(26, 22, 18, 0.14), 0 2px 6px rgba(26, 22, 18, 0.06);
--shadow-pop: 0 18px 40px -16px rgba(26, 22, 18, 0.16), 0 2px 0 rgba(26, 22, 18, 0.06);
--shadow-modal: 0 30px 60px -12px rgba(26, 22, 18, 0.28), 0 8px 16px rgba(26, 22, 18, 0.08);
/* Motion */
--duration-instant: 80ms;
--duration-fast: 120ms;
--duration: 150ms;
--duration-slow: 240ms;
--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
/* Spacing */
--space-1: 2px;
--space-2: 4px;
--space-3: 6px;
--space-4: 8px;
--space-5: 10px;
--space-6: 12px;
--space-8: 16px;
--space-10: 20px;
--space-12: 24px;
--space-16: 32px;
--space-20: 40px;
--space-24: 56px;
--space-32: 80px;
/* Z-index scale */
--z-base: 1;
--z-sticky: 10;
--z-dropdown: 40;
--z-modal: 100;
--z-toast: 150;
--z-lightbox: 200;
}
/* ─── §3 Typography tokens ───────────────────────────────────── */
:root {
--font-sans: 'Manrope', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Mono', 'Cascadia Code', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
--fz-display: clamp(40px, 5.5vw, 64px);
--fz-h1: clamp(24px, 2vw + 1rem, 32px);
--fz-h2: 20px;
--fz-h3: 16px;
--fz-body: 15px;
--fz-ui: 13px;
--fz-small: 12px;
--fz-xs: 11px;
--fz-micro: 10px;
--lh-tight: 1.15;
--lh: 1.5;
--lh-prose: 1.6;
--ls-tight: -0.02em;
--ls-mono: 0.1em;
--ls-mono-strong: 0.15em;
}
/* ─── §3 Font faces ──────────────────────────────────────────── */
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap;
src: url('/assets/fonts/manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap;
src: url('/assets/fonts/manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap;
src: url('/assets/fonts/manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap;
src: url('/assets/fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap;
src: url('/assets/fonts/jetbrainsmono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap;
src: url('/assets/fonts/jetbrainsmono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-display: swap;
src: url('/assets/fonts/jetbrainsmono-700.woff2') format('woff2'); }
/* ─── §3 Base reset + styles ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
overscroll-behavior-y: none;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--fz-body);
line-height: var(--lh);
min-height: 100vh;
overflow-x: hidden;
}
/* Auth screens: page is plain white, the brief card carries the paper tone. */
body.auth-page { background: var(--auth-page-bg); }
body.auth-page::before { content: none; }
body.auth-page .brief { background: var(--paper-2); }
body.auth-page .brief .input,
body.auth-page .brief .textarea,
body.auth-page .brief .select { background: var(--paper); }
/* Grain overlay — subtle paper texture, not dots */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.3;
z-index: var(--z-lightbox);
background-image: url("data:image/svg+xml;utf8,");
}
/* Heading helpers */
.h-display {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fz-display);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--text);
}
.h-display em { font-style: normal; color: var(--accent); }
.h-kicker {
font-family: var(--font-mono);
font-size: var(--fz-xs);
font-weight: 500;
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--accent);
}
/* ─── §4 Layout: shell + sidebar + topbar + body-wrap ────────── */
.shell {
display: grid;
grid-template-columns: 240px 1fr;
height: 100vh;
padding-top: 6px;
/* Tone matches the sidebar so .main's rounded top-left exposes a clean
white curve continuing the sidebar's right edge. The 6px top breathing
space exposes that same tone above .main, giving the corner curve a
visible cap. .sidebar uses calc(100vh - 6px) below so it doesn't
overflow into a vertical scroll bar. */
background: var(--bg-elevated);
box-sizing: border-box;
}
.sidebar {
position: sticky;
top: 0;
/* Match .shell padding-top so the sidebar fills exactly the available
viewport height — no inner scroll just because of the breathing space. */
height: calc(100vh - 6px);
overflow-y: auto;
background: var(--bg-elevated);
padding: 0 var(--space-10) var(--space-12);
display: flex;
flex-direction: column;
gap: var(--space-8);
z-index: var(--z-sticky);
}
.main {
min-width: 0;
display: flex;
flex-direction: column;
height: calc(100vh - 6px);
background: var(--bg);
border-top-left-radius: var(--radius-xl);
overflow: hidden;
}
/* ─── §8 Sidebar: brand + nav ────────────────────────────────── */
.brand {
display: flex;
align-items: center;
gap: var(--space-6);
margin: 0 calc(var(--space-10) * -1) var(--space-4);
padding: var(--space-6) var(--space-10);
min-height: 65px;
box-sizing: border-box;
text-decoration: none;
color: inherit;
}
.brand:hover { text-decoration: none; }
.brand:hover .brand__word-b { color: var(--accent); transition: color var(--duration) var(--ease); }
.brand__mark {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--accent);
display: grid;
place-items: center;
box-shadow: var(--shadow-xs);
flex-shrink: 0;
}
.brand__mark svg { width: 22px; height: 22px; color: var(--paper); }
.brand__word {
display: flex;
flex-direction: column;
font-family: var(--font-sans);
font-weight: 700;
font-size: 18px;
letter-spacing: var(--ls-tight);
line-height: 1.05;
}
.brand__word-a { color: var(--accent); }
.brand__word-b { color: var(--text); }
/* Legacy .mark/.word aliases (backward compat) */
.brand .mark { width: 36px; height: 36px; border-radius: var(--radius-sm);
background: var(--accent); display: grid; place-items: center;
box-shadow: var(--shadow-xs); flex-shrink: 0; }
.brand .mark svg { width: 100%; height: 100%; }
.brand .word { font-family: var(--font-sans); font-weight: 700; font-size: 18px;
letter-spacing: var(--ls-tight); line-height: 1.05;
display: flex; flex-direction: column; gap: 2px; }
.brand .word .a { color: var(--accent); }
.brand .word .b { color: var(--text); }
.brand .word .row { display: inline-flex; align-items: baseline; gap: 4px; }
.nav-group {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
/* New BEM selectors */
.nav-group__label,
.nav-group-label {
font-family: var(--font-mono);
font-size: var(--fz-xs);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 var(--space-4) var(--space-3);
display: flex;
align-items: center;
gap: var(--space-4);
}
.nav-group__label::after,
.nav-group-label::after { content: none; }
.nav-item {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: var(--space-6);
align-items: center;
padding: var(--space-4) var(--space-5);
border-radius: var(--radius);
color: var(--text-2);
text-decoration: none;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 400;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
position: relative;
}
/* nav-item__marker (new BEM) and .marker (legacy compat) */
.nav-item__marker,
.nav-item .marker {
font-family: var(--font-mono);
font-size: var(--fz-micro);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
}
.nav-item__marker i,
.nav-item .marker i { font-size: 14px; }
.nav-item:hover { background: var(--paper); color: var(--text); }
.nav-item__count {
margin-left: auto;
font-family: var(--font-mono);
font-size: var(--fz-micro);
font-weight: 700;
letter-spacing: var(--ls-mono-strong);
color: var(--text-muted);
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 999px;
padding: 1px 8px;
min-width: 22px;
text-align: center;
}
.nav-item--active .nav-item__count { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.nav-item__count--accent { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.sidebar__foot {
margin-top: auto;
padding: var(--space-8) 0 0;
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono);
color: var(--text-muted);
text-transform: uppercase;
line-height: 1.5;
border-top: 1px solid var(--rule);
}
.sidebar__foot-sub { color: var(--text-2); font-weight: 700; }
/* Credit links — text colour stays mono/muted, underline carries the cue
(we don't want them to read as the brand-coloured nav links). */
.sidebar__foot-link {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color .15s ease;
}
.sidebar__foot-link:hover { color: var(--text); }
/* Active states — both old (.active) and new (.nav-item--active) */
.nav-item.active,
.nav-item--active {
color: var(--accent);
background: transparent;
font-weight: 600;
}
.nav-item.active .marker,
.nav-item.active .nav-item__marker,
.nav-item--active .marker,
.nav-item--active .nav-item__marker { color: var(--accent); }
.nav-item.active::before,
.nav-item--active::before {
content: "";
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 16px;
background: var(--accent);
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.nav-item .badge {
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono);
background: var(--accent);
color: var(--paper);
padding: 1px 6px;
border-radius: var(--radius-full);
font-weight: 700;
}
.nav-divider {
margin: var(--space-4) 0;
}
.sidebar-foot {
margin-top: auto;
padding-top: var(--space-8);
border-top: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.sidebar-foot .label {
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.sidebar-foot a {
color: var(--text-2);
text-decoration: none;
font-family: var(--font-sans);
font-size: var(--fz-small);
}
.sidebar-foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.sidebar-foot .row { display: flex; gap: 14px; flex-wrap: wrap; }
/* ─── §9 Topbar ──────────────────────────────────────────────── */
.topbar {
position: sticky;
top: 0;
z-index: var(--z-dropdown);
background: var(--topbar-bg);
backdrop-filter: blur(6px);
/* Soft fade-out shadow — present but not heavy. Halfway between an
invisible whisper and an obvious hairline. */
box-shadow: 0 5px 10px -10px rgba(26, 22, 18, 0.14);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-8);
min-height: 65px;
flex-shrink: 0;
box-sizing: border-box;
padding: var(--space-6) var(--space-16);
color: var(--text);
}
.topbar__title {
font-family: var(--font-sans);
font-weight: 700;
font-size: 22px;
letter-spacing: var(--ls-tight);
color: var(--text);
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
gap: var(--space-5);
}
.topbar__title-num {
font-family: var(--font-mono);
font-size: var(--fz-xs);
letter-spacing: var(--ls-mono-strong);
color: var(--text-muted);
font-weight: 600;
flex-shrink: 0;
}
.topbar__title-extra {
display: inline-flex;
align-items: center;
gap: var(--space-4);
margin-left: var(--space-4);
}
.topbar__title-sub {
color: var(--ink-3);
font-weight: 500;
}
/* Action bar for index/list pages — replaces the section-head when only actions remain */
.page-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
margin-bottom: var(--space-10);
flex-wrap: wrap;
}
/* Rich text rendered from Quill HTML */
.rich-text { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 12px; }
.rich-text strong { font-weight: 700; color: var(--text); }
.rich-text em { font-style: italic; }
.rich-text u { text-decoration: underline; }
.rich-text a { color: var(--accent); text-decoration: underline; }
.rich-text code {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--paper-2);
padding: 1px 5px;
border-radius: 3px;
}
.rich-text pre {
font-family: var(--font-mono);
background: var(--paper-2);
padding: 10px 12px;
border-radius: var(--radius-sm);
overflow-x: auto;
}
.rich-text ul, .rich-text ol { margin: 0 0 12px; padding-left: 20px; }
.rich-text li { margin: 2px 0; }
.rich-text blockquote {
border-left: 3px solid var(--rule-2);
margin: 0 0 12px;
padding: 4px 12px;
color: var(--text-muted);
}
/* Dropdown rows (tag picker, assignee picker) */
.tag-dropdown__row,
.assignee-dropdown__row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
font-size: 13px;
color: var(--text-2);
}
.tag-dropdown__row:hover,
.assignee-dropdown__row:hover { background: var(--paper-2); color: var(--text); }
.tag-dropdown__row--hint,
.assignee-dropdown__row--hint { color: var(--text-muted); cursor: default; font-style: italic; }
.tag-dropdown__row--hint:hover,
.assignee-dropdown__row--hint:hover { background: transparent; color: var(--text-muted); }
.tag-dropdown__dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
/* User avatar (colored letter circle) */
.user-avatar {
display: inline-grid;
place-items: center;
background: var(--ink-3);
color: #fff;
font-family: var(--font-sans);
font-weight: 600;
border-radius: 50%;
flex-shrink: 0;
}
.user-avatar--xs { width: 18px; height: 18px; font-size: 9px; }
.user-avatar--sm { width: 24px; height: 24px; font-size: 11px; }
.user-avatar--md { width: 32px; height: 32px; font-size: 13px; }
.user-avatar--lg { width: 72px; height: 72px; font-size: 28px; }
.user-avatar--empty { background: transparent; color: var(--text-muted); border: 1px dashed var(--rule-2); }
.user-avatar--empty i { font-size: 10px; }
.user-avatar--img { overflow: hidden; background: transparent !important; }
.user-avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Assignee picker (custom dropdown with avatars) */
.assignee-picker { position: relative; width: 100%; }
.assignee-picker__btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
background: var(--paper);
border: 1px solid var(--rule-2);
border-radius: var(--radius-md);
cursor: pointer;
font-family: var(--font-sans);
font-size: 13px;
color: var(--text);
text-align: left;
}
.assignee-picker__btn:hover { border-color: var(--ink-3); }
.assignee-picker__btn:focus { border-color: var(--focus-ring); outline: none; box-shadow: 0 0 0 3px var(--focus-ring-alpha); }
.assignee-picker__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignee-picker__name--muted { color: var(--text-muted); }
.assignee-picker__chevron { color: var(--text-muted); font-size: 11px; }
.assignee-picker__pop {
position: absolute;
top: calc(100% + 4px);
left: 0; right: 0;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
box-shadow: var(--shadow-pop);
max-height: 260px;
overflow-y: auto;
z-index: var(--z-dropdown);
padding: 4px;
}
.assignee-picker__pop[hidden] { display: none; }
/* Attachments grid */
.attachments-section {
position: relative;
border: 2px dashed transparent;
border-radius: 6px;
padding: 4px;
margin: -4px;
transition: border-color .2s ease, background .2s ease;
}
.attachments-section:hover {
border-color: color-mix(in srgb, var(--ink-3) 40%, transparent);
}
.attachments-section.is-uploading {
border-color: var(--accent);
animation: attach-pulse 1s ease-in-out infinite;
}
@keyframes attach-pulse {
0%, 100% { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
50% { border-color: var(--accent); }
}
.attach-loader {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: color-mix(in srgb, var(--paper) 80%, transparent);
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: var(--ls-mono-strong);
color: var(--ink-2);
border-radius: 6px;
z-index: 5;
pointer-events: none;
backdrop-filter: blur(2px);
}
.attach-loader__spinner {
width: 16px;
height: 16px;
border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-top-color: var(--accent);
border-radius: 50%;
animation: attach-spin 0.7s linear infinite;
}
@keyframes attach-spin { to { transform: rotate(360deg); } }
.attach-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.attach-item {
position: relative;
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--paper-2);
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
}
.attach-item__media {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: var(--text-2);
}
.attach-item__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.attach-item__media--icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 26px var(--space-5) calc(var(--space-5) + 22px);
transition: background var(--duration) var(--ease);
height: 100%;
box-sizing: border-box;
color: var(--text-2);
}
.attach-item__media--icon i { font-size: 32px; color: var(--text-muted); }
.attach-item__media--icon:hover { background: var(--paper); }
.attach-item__name {
font-family: var(--font-mono);
font-size: 11px;
text-align: center;
line-height: 1.3;
word-break: break-all;
color: var(--text-2);
}
.attach-item__cta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 4px;
}
.attach-item__foot,
.attach-item__top {
position: absolute;
left: 0; right: 0;
background: rgba(26, 22, 18, 0.85);
color: var(--paper);
padding: 3px 8px;
font-size: 10px;
font-family: var(--font-mono);
letter-spacing: var(--ls-mono);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 2;
}
.attach-item__top { top: 0; }
.attach-item__foot { bottom: 0; }
.attach-item__action {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--paper);
text-decoration: none;
text-transform: uppercase;
letter-spacing: var(--ls-mono-strong);
font-weight: 700;
transition: color var(--duration) var(--ease);
margin-left: auto;
}
.attach-item__action:hover { color: var(--brand-pop); }
.attach-item__del {
background: none;
border: none;
color: var(--paper);
cursor: pointer;
padding: 0;
line-height: 1;
}
.attach-item--archive i { color: var(--brown); }
.attach-item--viewable i { color: var(--blue); }
.comment-links-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.from-comments-block { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.from-comments-block__summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: var(--ls-mono-strong);
color: var(--ink-3);
user-select: none;
}
.from-comments-block__summary::-webkit-details-marker { display: none; }
.from-comments-block__caret { font-size: 9px; transition: transform .12s ease; }
.from-comments-block[open] .from-comments-block__caret { transform: rotate(90deg); }
.from-comments-block__count {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 999px;
padding: 1px 8px;
font-size: 10px;
color: var(--ink-2);
font-weight: 600;
}
.from-comments-block__body { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.attach-item--from-comment::after {
content: "\f075"; /* fa-comment */
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
bottom: 28px;
left: 6px;
font-size: 9px;
color: var(--ink-3);
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 50%;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 3;
pointer-events: none;
}
/* Inline attachments under comments */
.comment-attachments {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.comment-attachment {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border: 1px solid var(--rule);
border-radius: var(--radius-full);
font-size: 12px;
color: var(--text-2);
text-decoration: none;
background: var(--paper);
max-width: 220px;
}
.comment-attachment:hover { border-color: var(--ink-3); color: var(--text); }
.comment-attachment i { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.comment-attachment span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Activity feed (dashboard) */
.activity-list { display: flex; flex-direction: column; gap: var(--space-2); }
.activity-row {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-4) var(--space-6);
border: 1px solid var(--rule);
background: var(--bg-elevated);
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--text-2);
white-space: nowrap;
overflow: hidden;
box-shadow: 0 1px 2px rgba(26, 22, 18, .04);
transition: transform .15s ease, border-color .15s ease;
}
.activity-row:hover { border-color: var(--rule-2); transform: translateX(2px); }
.activity-row__icon { color: var(--text-muted); font-size: 12px; flex-shrink: 0; width: 18px; text-align: center; }
.activity-row__time { font-size: 10px; letter-spacing: var(--ls-mono); color: var(--text-muted); flex-shrink: 0; }
.activity-row__actor { font-weight: 600; color: var(--text); flex-shrink: 0; }
.activity-row__verb { color: var(--text-muted); flex-shrink: 0; }
.activity-row__target { display: inline-flex; gap: var(--space-3); align-items: baseline; flex-shrink: 0; }
.activity-row__link { color: var(--accent); text-decoration: none; font-weight: 600; }
.activity-row__link:hover { text-decoration: underline; }
.activity-row__link--muted { color: var(--text-2); font-weight: 500; }
.activity-row__in { color: var(--text-muted); }
.activity-row__summary { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
/* Project tabs */
.project-tabs {
display: flex;
gap: var(--space-10);
border-bottom: 1px solid var(--rule);
margin-bottom: var(--space-10);
}
.project-tab {
padding: var(--space-4) 0;
border-bottom: 2px solid transparent;
text-decoration: none;
color: var(--text-2);
font-weight: 500;
font-size: 14px;
transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.project-tab:hover { color: var(--text); }
.project-tab--active,
.project-tab.is-active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
.project-tabs--inline {
border-bottom: none;
margin-bottom: 0;
gap: var(--space-6);
}
.project-tabs--inline .project-tab { padding: var(--space-3) var(--space-6); border: 1px solid transparent; border-radius: var(--radius); }
.project-tabs--inline .project-tab.is-active {
background: var(--paper);
border-color: var(--accent);
border-bottom-color: var(--accent);
}
.project-tab__count {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
font-family: var(--font-mono);
font-size: var(--fz-micro);
font-weight: 700;
letter-spacing: var(--ls-mono-strong);
background: var(--paper-2);
border-radius: 999px;
color: var(--text-muted);
}
.project-tab.is-active .project-tab__count { background: var(--accent); color: var(--paper); }
/* ─── Pagination ─────────────────────────────────────────────── */
.pager {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin: var(--space-12) 0;
font-family: var(--font-mono);
}
.pager__btn,
.pager__page {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 var(--space-4);
background: var(--paper);
border: 1px solid var(--rule-2);
border-radius: var(--radius-sm);
color: var(--text-2);
text-decoration: none;
font-size: var(--fz-small);
transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.pager__btn:hover,
.pager__page:hover { border-color: var(--ink-3); color: var(--text); }
.pager__page.is-current {
background: var(--accent);
color: var(--paper);
border-color: var(--accent);
font-weight: 700;
}
.pager__btn.is-disabled { opacity: .4; pointer-events: none; }
.pager__gap { color: var(--text-muted); padding: 0 var(--space-2); }
.kanban-load-sentinel {
padding: var(--space-6);
text-align: center;
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--text-muted);
border: 1px dashed var(--rule);
border-radius: var(--radius-sm);
margin-top: var(--space-3);
}
/* Kanban column drag handle */
.kanban-col__drag {
background: none;
border: none;
cursor: grab;
color: var(--text-muted);
padding: 4px;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
margin-right: 2px;
}
.kanban-col__drag:hover { color: var(--text-2); background: var(--paper); }
.kanban-col__drag:active { cursor: grabbing; }
.kanban-col-ghost { opacity: 0.4; }
.kanban-col-dragging { opacity: 0.9; }
/* Backlog list */
.backlog {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.backlog__add {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
border: 1px dashed var(--rule-2);
border-radius: var(--radius-md);
background: var(--paper-2);
cursor: text;
transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.backlog__add:hover { border-color: var(--ink-3); }
.backlog__add:focus-within {
border-style: solid;
border-color: var(--focus-ring);
background: var(--paper);
box-shadow: 0 0 0 3px var(--focus-ring-alpha);
}
.backlog__add i { color: var(--text-muted); flex-shrink: 0; }
.backlog__add input { background: transparent; border: none; padding: 0; flex: 1; }
.backlog__add input:focus { box-shadow: none; outline: none; }
.backlog__add-hint {
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono);
color: var(--text-muted);
flex-shrink: 0;
opacity: 0;
transition: opacity var(--duration) var(--ease);
}
.backlog__add:focus-within .backlog__add-hint { opacity: 1; }
.backlog__empty {
padding: var(--space-12);
text-align: center;
color: var(--text-muted);
border: 1px dashed var(--rule);
border-radius: var(--radius-md);
}
.backlog__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.backlog__item { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.backlog__item:hover { border-color: var(--ink-3); }
.backlog__link {
display: flex;
align-items: center;
gap: var(--space-6);
padding: var(--space-5) var(--space-6);
text-decoration: none;
color: var(--text);
font-size: 14px;
}
.backlog__title { flex: 1; font-weight: 500; }
.backlog__tags { display: inline-flex; gap: var(--space-2); }
.backlog__assignee,
.backlog__due,
.backlog__counts {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--text-muted);
font-size: 12px;
}
.backlog__counts { gap: var(--space-4); }
.backlog__counts span { display: inline-flex; gap: 4px; align-items: center; }
/* New BEM topbar selectors */
.topbar__lhs,
.topbar .lhs {
display: inline-flex;
gap: var(--space-6);
align-items: center;
}
.topbar__seal,
.topbar .seal {
display: inline-flex;
align-items: center;
gap: var(--space-4);
color: var(--text);
font-weight: 700;
}
.topbar__seal::before,
.topbar .seal::before {
content: "";
display: inline-block;
width: 7px; height: 7px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.18);
}
.topbar__crumb,
.topbar .crumb {
color: var(--accent);
font-weight: 500;
}
.topbar__rhs,
.topbar .rhs {
display: inline-flex;
justify-self: end;
align-items: center;
gap: var(--space-6);
}
/* Avatar — new BEM .topbar__avatar + legacy .avatar in topbar */
.topbar__avatar {
width: 32px; height: 32px;
border-radius: var(--radius-full);
background: var(--ink);
color: var(--text-on-dark);
display: grid; place-items: center;
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
text-decoration: none;
transition: background var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
}
.topbar__avatar:hover { background: var(--accent); transform: scale(1.05); }
.topbar__avatar { border: none; cursor: pointer; padding: 0; }
/* Combined name + avatar trigger in the topbar — replaces the avatar-only
button so a quick glance shows whose session is active. */
.topbar__user {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 4px 4px 4px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-full);
cursor: pointer;
font: 600 13px/1 var(--font-sans);
color: var(--text);
transition: background .15s ease, border-color .15s ease;
}
.topbar__user:hover { background: var(--bg-elevated); border-color: var(--rule); }
.topbar__user-name {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 600px) {
.topbar__user-name { display: none; }
.topbar__user { padding: 0; border: 0; background: transparent; }
}
/* ─── User menu (avatar dropdown) ─────────────────────────────── */
.user-menu { position: relative; }
.user-menu__pop {
position: absolute;
top: calc(100% + var(--space-4));
right: 0;
min-width: 220px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
box-shadow: var(--shadow-pop);
padding: var(--space-3);
z-index: var(--z-modal);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.user-menu__pop[hidden] { display: none; }
.user-menu__head {
padding: var(--space-4) var(--space-5) var(--space-3);
border-bottom: 1px solid var(--rule);
margin-bottom: var(--space-2);
}
.user-menu__name {
font-weight: 600;
font-size: 14px;
color: var(--text);
line-height: 1.3;
}
.user-menu__email {
font-family: var(--font-mono);
font-size: var(--fz-xs);
color: var(--text-muted);
letter-spacing: var(--ls-mono);
margin-top: 2px;
word-break: break-all;
}
.user-menu__item,
.user-menu__item--form > button {
display: flex;
align-items: center;
gap: var(--space-5);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-2);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
width: 100%;
text-align: left;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.user-menu__item:hover,
.user-menu__item--form > button:hover {
background: var(--paper-2);
color: var(--text);
}
.user-menu__item i {
width: 16px;
font-size: 13px;
color: var(--text-muted);
text-align: center;
}
.user-menu__item:hover i,
.user-menu__item--form > button:hover i { color: var(--accent); }
.user-menu__item--form { margin: 0; padding: 0; }
.user-menu__item--form > button { color: var(--danger, #b04a3a); }
.user-menu__item--form > button:hover { background: var(--danger-bg, #fbe7e3); color: var(--danger, #b04a3a); }
/* Legacy .avatar (used in topbar + profile pages) — NO PRO badge */
.avatar {
width: 32px; height: 32px;
border-radius: var(--radius-full);
background: var(--ink);
color: var(--paper);
display: grid; place-items: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
position: relative;
cursor: pointer;
}
/* REMOVED: .avatar::after PRO badge */
/* Avatar size variants */
.avatar--xs { width: 20px; height: 20px; font-size: 10px; }
.avatar--sm { width: 24px; height: 24px; font-size: 11px; }
.avatar--lg { width: 36px; height: 36px; font-size: 14px; }
.avatar--brand { background: var(--accent); }
/* ─── §4 Body wrap ───────────────────────────────────────────── */
.body-wrap {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--space-8) var(--space-16) var(--space-24);
position: relative;
display: flex;
flex-direction: column;
}
/* Kanban-bearing page: lock body-wrap to viewport, let .kanban fill the rest. */
.body-wrap:has(.kanban) { overflow-y: hidden; padding-bottom: var(--space-8); }
/* ─── §4 Hero + kicker ───────────────────────────────────────── */
.hero { margin-bottom: var(--space-20); }
.kicker {
font-family: var(--font-mono);
font-size: var(--fz-xs);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--space-6) 0;
display: flex;
align-items: center;
gap: var(--space-8);
}
.kicker .num { color: var(--text); font-weight: 700; }
.kicker .sep { color: var(--text-muted); }
.kicker::after { content: none; }
/* ─── §3 Display heading + lede ─────────────────────────────── */
h1.display {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(28px, 3.6vw, 44px);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
margin: 0;
color: var(--text);
max-width: 18ch;
}
h1.display em {
font-style: normal;
font-weight: 600;
color: var(--accent);
}
.lede {
font-family: var(--font-sans);
font-weight: 500;
font-size: 19px;
line-height: var(--lh-prose);
color: var(--text-2);
max-width: 56ch;
margin: var(--space-8) 0 var(--space-12);
}
.lede a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* ─── §10 Brief (text card) ──────────────────────────────────── */
.brief {
position: relative;
background: var(--paper-2);
border: 1px solid var(--rule);
padding: 26px 28px 18px;
max-width: 880px;
margin-left: auto;
margin-right: auto;
box-shadow: var(--shadow-card);
border-radius: var(--radius-md);
}
/* Shared form wrapper — keeps individual form cards readable (~880px) while
the surrounding header/grid spans the full content area. */
.page-form {
max-width: 880px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* "Wide" .brief variant — fills the body-wrap width instead of clamping at
880px. Used for settings/admin pages where the form sits under a
full-width tab header and should align with those tabs. */
.brief--wide {
max-width: none;
margin-left: 0;
margin-right: 0;
background: var(--paper);
}
/* Two-column field grid. Each .field column sits in its own track so the
widened brief doesn't end up with stretched-out single-column inputs. */
.form-grid {
display: grid;
gap: var(--space-5) var(--space-6);
}
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid__span { grid-column: 1 / -1; }
@media (max-width: 720px) {
.form-grid--2, .form-grid--3 { grid-template-columns: 1fr; }
}
/* Profile form — two stacked row-blocks (personal info + password) with a
shared white card surface and a single Save button at the bottom. */
.profile-form { display: flex; flex-direction: column; gap: var(--space-6); }
.profile-card { padding: var(--space-10) var(--space-10); }
.profile-card__title {
font-size: 18px;
font-weight: 600;
margin: 0 0 var(--space-5);
}
.profile-card__hint {
font-size: 12px;
color: var(--ink-3);
margin: 0 0 var(--space-5);
}
.profile-card__body--personal {
display: grid;
grid-template-columns: minmax(180px, 220px) 1fr;
gap: var(--space-10);
align-items: start;
}
.profile-avatar { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.profile-avatar__pic { width: 96px !important; height: 96px !important; font-size: 36px !important; }
.profile-avatar__controls { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; }
.profile-avatar__upload { cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); }
.profile-avatar__remove { font-size: 12px; color: var(--ink-3); padding: 0; background: transparent; border: 0; cursor: pointer; }
.profile-avatar__remove:hover { color: var(--accent); }
.profile-avatar__hint { font-size: 11px; text-align: center; margin: 0; color: var(--ink-3); }
.profile-form__actions {
display: flex;
align-items: center;
gap: var(--space-6);
flex-wrap: wrap;
}
.profile-form__note { margin: 0; font-size: 12px; color: var(--ink-3); }
@media (max-width: 720px) {
.profile-card__body--personal { grid-template-columns: 1fr; }
}
/* Two-column grid for stand-alone "settings"-style cards (profile, etc.)
that should span the full width of the content area without bunching
into a narrow central column. Cards drop to a single column on small
viewports. */
.page-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
align-items: start;
width: 100%;
}
.page-grid--full > * { grid-column: 1 / -1; }
@media (max-width: 880px) {
.page-grid { grid-template-columns: 1fr; }
}
/* Header row that sits flush with the body-wrap edges: tabs left, action
button right, with the project-tabs underline rule extending the full
width of the row. */
.page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-6);
border-bottom: 1px solid var(--rule);
margin-bottom: var(--space-8);
}
.page-head .project-tabs { border-bottom: 0; margin-bottom: 0; flex: 1; }
.page-head__btn {
align-self: center;
margin-bottom: var(--space-3);
white-space: nowrap;
}
/* .brief corner-tag removed — was a literal "Otack Manager" string that
ignored white-label. If we ever want a brand chip back, render it from
PHP using app_name() rather than baking it into a pseudo-element. */
.brief-meta {
margin: var(--space-6) 0 var(--space-4);
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono);
color: var(--text-muted);
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.brief-meta .right { color: var(--text-2); }
.brief textarea {
width: 100%;
min-height: 140px;
border: none;
background: transparent;
resize: none;
outline: none;
font-family: var(--font-sans);
font-size: 22px;
line-height: 1.45;
color: var(--text);
padding: 6px 0 12px;
}
.brief textarea::placeholder { color: var(--text-muted); font-weight: 400; }
.brief-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-6);
border-top: 1px solid var(--rule);
}
/* ─── §5 Buttons ─────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-8);
min-height: 36px;
border-radius: var(--radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--text);
font: 500 var(--fz-ui)/1.2 var(--font-sans);
letter-spacing: 0;
cursor: pointer;
transition: background var(--duration) var(--ease),
border-color var(--duration) var(--ease),
color var(--duration) var(--ease),
transform var(--duration-fast) var(--ease);
user-select: none;
text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring-alpha); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
/* Sizes */
.btn--sm { min-height: 30px; padding: var(--space-3) var(--space-6); font-size: var(--fz-small); }
.btn--lg { min-height: 44px; padding: var(--space-6) var(--space-10); font-size: var(--fz-body); }
.btn--icon-only { padding: 0; width: 36px; }
/* Variants — new BEM */
.btn--primary {
background: var(--ink);
color: var(--text-on-dark);
font-family: var(--font-mono);
font-size: var(--fz-xs);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
padding: var(--space-5) var(--space-10);
}
.btn--primary:hover { background: var(--accent); color: var(--text-on-dark); }
.btn--secondary {
background: var(--paper);
border-color: var(--rule-2);
color: var(--text);
}
.btn--secondary:hover { border-color: var(--ink-2); background: var(--paper-2); }
.btn--ghost {
background: transparent;
color: var(--text-2);
border-color: transparent;
}
.btn--ghost:hover { background: var(--paper-2); color: var(--text); }
.btn--danger {
background: var(--danger);
color: var(--text-on-dark);
border-color: transparent;
}
.btn--danger:hover { background: var(--red-tint); color: var(--danger); border-color: var(--danger); }
.btn--brand {
background: var(--accent-pop);
color: var(--text-on-dark);
}
.btn--brand:hover { background: var(--accent); }
/* ─── Legacy button aliases — keep working in existing templates ─ */
/* .submit = old primary */
.submit {
display: inline-flex;
align-items: center;
gap: var(--space-8);
padding: var(--space-5) var(--space-10);
background: var(--ink);
color: var(--paper);
border: none;
font-family: var(--font-mono);
font-size: var(--fz-xs);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
cursor: pointer;
border-radius: var(--radius-md);
transition: background var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
min-height: 36px;
text-decoration: none;
user-select: none;
}
.submit:hover { background: var(--accent); }
.submit:active { transform: translateY(1px); }
.submit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring-alpha); }
.submit .arrow { font-family: var(--font-sans); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 18px; }
/* Legacy btn-* class names */
.btn-secondary {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-4) var(--space-8); min-height: 36px;
background: var(--paper-2); color: var(--text);
border: 1px solid var(--rule-2); border-radius: var(--radius-md);
font: 500 var(--fz-ui)/1.2 var(--font-sans);
cursor: pointer; transition: all var(--duration) var(--ease);
text-decoration: none; user-select: none;
}
.btn-secondary:hover { background: var(--paper); border-color: var(--ink-2); color: var(--text); }
.btn-ghost {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-4) var(--space-8); min-height: 36px;
background: transparent; color: var(--text-2);
border: 1px solid var(--rule-2); border-radius: var(--radius-md);
font: 500 var(--fz-ui)/1.2 var(--font-sans);
cursor: pointer; transition: all var(--duration) var(--ease);
text-decoration: none; user-select: none;
}
.btn-ghost:hover { background: var(--paper); color: var(--text); border-color: var(--ink-2); }
.btn-danger {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-4) var(--space-8); min-height: 36px;
background: var(--danger); color: var(--paper);
border: 1px solid transparent; border-radius: var(--radius-md);
font: 500 var(--fz-ui)/1.2 var(--font-sans);
cursor: pointer; transition: all var(--duration) var(--ease);
text-decoration: none; user-select: none;
}
.btn-danger:hover { background: var(--red-tint); color: var(--danger); border-color: var(--danger); }
.btn-icon {
width: 32px; height: 32px;
padding: 0;
display: inline-grid; place-items: center;
background: transparent;
color: var(--text-muted);
border: 1px solid var(--rule);
border-radius: var(--radius);
cursor: pointer;
transition: all var(--duration) var(--ease);
font-size: var(--fz-small);
}
.btn-icon:hover { color: var(--text); border-color: var(--ink-2); background: var(--paper); }
/* ─── §12 Section heads ──────────────────────────────────────── */
.section-head {
display: grid;
/* Three slots: title (auto), rule filler (1fr), trailing meta/actions
(auto). The previous 4-column layout assumed a leading .num cell which
we no longer render — leaving it caused the actions to land in the 1fr
column and drift left. */
grid-template-columns: auto 1fr auto;
gap: var(--space-8);
align-items: baseline;
margin: var(--space-20) 0 var(--space-10);
}
.section-head .num {
font-family: var(--font-mono);
font-size: var(--fz-xs);
letter-spacing: var(--ls-mono-strong);
color: var(--text-muted);
font-weight: 700;
}
.section-head .title {
font-family: var(--font-sans);
font-weight: 700;
font-size: 26px;
letter-spacing: var(--ls-tight);
color: var(--text);
}
.section-head .title em {
font-style: normal;
font-weight: 600;
color: var(--accent);
}
.section-head .rule { display: none; }
.section-head .meta {
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
color: var(--text-muted);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: var(--space-4);
text-decoration: none;
transition: color var(--duration) var(--ease);
margin-left: auto;
}
.section-head .meta:hover { color: var(--text); }
.section-head__actions { margin-left: auto; display: inline-flex; align-items: baseline; gap: var(--space-8); }
.section-head .meta--action { color: var(--accent); font-weight: 700; }
.section-head .meta--action:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.dashboard-page .section-head { margin: var(--space-16) 0 var(--space-8); }
/* Dashboard stat cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
margin-bottom: var(--space-12);
}
.stat-card {
position: relative;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 16px 18px 14px;
display: flex;
flex-direction: column;
min-height: 130px;
overflow: hidden;
transition: border-color var(--duration) var(--ease),
transform var(--duration-fast) var(--ease),
box-shadow var(--duration) var(--ease);
}
.stat-card:hover {
border-color: var(--ink-2);
transform: translateY(-2px);
box-shadow: var(--shadow-pop);
}
.stat-card--accent:hover { border-color: var(--accent); }
.stat-card--green:hover { border-color: var(--green); }
.stat-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, color-mix(in srgb, var(--paper-2) 70%, transparent) 0%, transparent 60%);
pointer-events: none;
}
.stat-card__label {
position: relative;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-2);
font-weight: 700;
}
.stat-card__value {
position: relative;
font-family: var(--font-sans);
font-size: 44px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text);
line-height: 1;
margin: 8px 0 2px;
}
.stat-card__sub {
position: relative;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--ls-mono);
margin-top: auto;
}
.stat-card--accent { border-color: color-mix(in srgb, var(--rule) 60%, var(--accent)); }
.stat-card--accent .stat-card__value { color: var(--accent); }
.stat-card--green { border-color: color-mix(in srgb, var(--rule) 60%, var(--green)); }
.stat-card--green .stat-card__value { color: var(--green); }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
/* ─── Empty state (single pattern across pages) ──────────────── */
.empty-state {
position: relative;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
padding: var(--space-12) var(--space-12) var(--space-10);
text-align: center;
margin: 0;
}
.empty-state__tag {
position: absolute;
top: -1px;
left: -1px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono);
font-size: var(--fz-micro);
font-weight: 700;
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-md) 0 var(--radius-sm) 0;
}
.empty-state__text {
margin: var(--space-3) 0 0;
color: var(--text-2);
font-size: var(--fz-body);
}
.empty-state__text a { color: var(--accent); }
.empty-state__sub { display: block; margin-top: var(--space-3); font-size: var(--fz-small); color: var(--text-muted); }
.backlog__sentinel {
list-style: none;
padding: var(--space-6);
text-align: center;
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--text-muted);
border: 1px dashed var(--rule);
border-radius: var(--radius-sm);
margin-top: var(--space-3);
}
/* ─── Overview panel (project show: Description + Attachments) ── */
.overview-panel {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: var(--space-16);
}
.overview-panel__head {
padding: var(--space-12) var(--space-12) var(--space-6);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-8);
}
.overview-panel__title {
margin: 0;
font-weight: 600;
font-size: 18px;
letter-spacing: var(--ls-tight);
color: var(--text);
}
.overview-panel__body {
padding: 0 var(--space-12) var(--space-12);
color: var(--text-2);
min-height: 32px;
}
.overview-panel__empty {
font-style: italic;
color: var(--text-muted);
}
.overview-panel__attach {
border-top: 1px dashed var(--rule);
padding: var(--space-10) var(--space-12) var(--space-12);
background: var(--surface-soft);
}
/* Generic sub-section inside .overview-panel. Used to fold what used to be
separate panels (Comments, Related tasks) into one continuous block,
visually divided by the same dashed line .overview-panel__attach uses.
Pure base = inherit panel bg (white in light), modifiers tint it. */
.overview-panel__section {
border-top: 1px dashed var(--rule);
padding: var(--space-12);
background: var(--bg-elevated);
}
.overview-panel__section--gray { background: var(--surface-soft); }
.overview-panel__section--cream {
background: color-mix(in srgb, var(--paper) 65%, var(--paper-2));
}
.overview-panel__attach-label {
font-family: var(--font-mono);
font-size: var(--fz-micro);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-mono-strong);
color: var(--text-muted);
margin-bottom: var(--space-8);
}
.overview-panel__attach .attachments-section > div[style*="margin-top"] {
margin-top: var(--space-8) !important;
}
.overview-panel--comments {
padding: var(--space-12);
background: color-mix(in srgb, var(--paper) 65%, var(--paper-2));
}
.overview-panel--links .overview-panel__body { padding-top: var(--space-6); }
.linked-tasks__list { display: flex; flex-direction: column; gap: 6px; }
.linked-task {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: var(--space-6);
padding: 8px 12px;
border: 1px solid var(--rule);
border-radius: 4px;
background: var(--paper);
text-decoration: none !important;
color: inherit;
transition: border-color .12s ease, background .12s ease;
}
.linked-task:hover { border-color: var(--ink-3); background: var(--paper-2); }
.linked-task__id {
font: 500 var(--fz-micro)/1 var(--font-mono);
color: var(--text-muted);
letter-spacing: var(--ls-mono);
}
.linked-task__title {
font-size: 14px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.linked-task__status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-2);
white-space: nowrap;
}
.linked-task__status .col-dot { width: 8px; height: 8px; }
.linked-task__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 0;
background: transparent;
color: var(--text-muted);
border-radius: 4px;
cursor: pointer;
}
.linked-task__remove:hover { background: var(--paper-3, var(--paper-2)); color: var(--danger, #b94d3c); }
.linked-tasks__picker { margin-top: var(--space-6); }
.linked-tasks__search {
position: relative;
display: flex;
align-items: center;
}
.linked-tasks__search i.fa-magnifying-glass {
position: absolute;
left: 10px;
color: var(--text-muted);
font-size: 12px;
pointer-events: none;
}
.linked-tasks__search .input { padding-left: 30px; width: 100%; }
.linked-tasks__results {
margin-top: 6px;
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--rule);
border-radius: 4px;
background: var(--paper);
display: none;
}
.linked-tasks__results.is-open { display: block; }
.linked-tasks__results .linked-result {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-5);
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--rule);
}
.linked-tasks__results .linked-result:last-child { border-bottom: 0; }
.linked-tasks__results .linked-result:hover { background: var(--paper-2); }
.linked-tasks__results .linked-result__id {
font: 500 var(--fz-micro)/1 var(--font-mono);
color: var(--text-muted);
}
.linked-tasks__results .linked-result__title {
font-size: 13px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.linked-tasks__results .linked-result__status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-2);
white-space: nowrap;
}
.linked-tasks__results .linked-result__empty {
padding: 10px 12px;
font-size: 12px;
color: var(--text-muted);
font-style: italic;
}
.overview-panel--comments .comment-thread > h3:first-child {
margin: 0 0 var(--space-10) !important;
}
.section-head .meta .count { color: var(--text); font-weight: 700; }
.section-head .meta .arr {
font-family: var(--font-sans);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
font-size: 14px;
color: var(--accent);
}
/* ─── §7 Cards ───────────────────────────────────────────────── */
.cards-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.card {
position: relative;
background: var(--bg-elevated);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: var(--space-10) var(--space-10) var(--space-8);
transition: border-color var(--duration) var(--ease),
transform var(--duration-fast) var(--ease),
box-shadow var(--duration) var(--ease);
display: flex;
flex-direction: column;
gap: var(--space-5);
min-height: 168px;
cursor: pointer;
}
.card:hover { border-color: var(--ink-2); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.card.selected,
.card--selected { border-color: var(--accent); background: var(--brand-3); }
.card.is-pinned { border-color: var(--accent); }
.card--clickable { cursor: pointer; }
.card.is-pinned .corner-tag { background: var(--accent); color: var(--text-on-dark); }
/* Pin button on project cards — sits below the top-right corner-meta (date). */
.card-pin {
position: absolute;
top: 36px;
right: 14px;
width: 26px; height: 26px;
display: grid; place-items: center;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
color: var(--ink-3);
opacity: .45;
transition: opacity .14s ease, color .14s ease, background .14s ease, border-color .14s ease, transform .14s ease;
font-size: 13px;
z-index: 2;
}
.card-pin i { transform: rotate(35deg); transition: transform .14s ease; }
.card:hover .card-pin { opacity: .9; }
.card-pin:hover { opacity: 1; color: var(--accent); background: var(--paper-2); border-color: var(--rule); }
.card-pin.is-on { opacity: 1; color: var(--accent); }
.card-pin.is-on i { transform: rotate(0deg); }
/* Corner tag / corner meta (editorial signatures) */
.card .corner-tag,
.card__tag {
position: absolute;
top: -1px; left: -1px;
background: var(--ink);
color: var(--text-on-dark);
font: 500 var(--fz-micro)/1 var(--font-mono);
letter-spacing: var(--ls-mono-strong);
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-sm) 0 var(--radius-sm) 0;
}
.card .corner-meta,
.card__meta {
position: absolute;
top: var(--space-3); right: var(--space-5);
background: transparent;
color: var(--text-muted);
font: 400 var(--fz-micro)/1 var(--font-mono);
letter-spacing: var(--ls-mono);
padding: 0;
}
.card-head {
display: flex;
gap: var(--space-6);
align-items: flex-start;
padding-top: var(--space-5);
}
.ini {
width: 36px; height: 36px;
background: var(--ink);
color: var(--paper);
display: grid; place-items: center;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
border-radius: var(--radius-sm);
letter-spacing: -0.02em;
}
.card .name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 17px;
line-height: 1.25;
color: var(--text);
letter-spacing: -0.01em;
margin: 0;
word-break: break-word;
}
.card .name em { font-style: normal; color: var(--text-2); font-weight: 400; }
.card__desc {
font-size: 13px;
line-height: 1.45;
color: var(--text-2);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: var(--space-5);
border-top: 1px dashed var(--rule);
}
/* ─── §7 Panel ───────────────────────────────────────────────── */
.panel {
background: var(--bg-elevated);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: var(--space-10);
}
/* ─── Status pill ────────────────────────────────────────────── */
.status {
font-family: var(--font-mono);
font-size: var(--fz-xs);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--text-muted);
}
.status::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--text-muted);
}
.status.is-ready { color: var(--green); }
.status.is-ready::before { background: var(--green); box-shadow: 0 0 0 2px rgba(77, 104, 64, .22); }
.status.is-draft { color: var(--text-2); }
.status.is-draft::before { background: var(--text-2); }
.status--active { color: var(--green); }
.status--active::before { background: var(--green); box-shadow: 0 0 0 2px rgba(77, 104, 64, .22); }
.status--planning { color: var(--blue); }
.status--planning::before { background: var(--blue); box-shadow: 0 0 0 2px rgba(46, 90, 136, .22); }
.status--under_review { color: var(--yellow); }
.status--under_review::before { background: var(--yellow); box-shadow: 0 0 0 2px rgba(181, 135, 30, .22); }
.status--archived { color: var(--text-muted); }
.status--archived::before { background: var(--text-muted); }
.status--new { color: var(--blue); }
.status--new::before { background: var(--blue); box-shadow: 0 0 0 2px rgba(46, 90, 136, .22); }
.status--in_progress { color: var(--yellow); }
.status--in_progress::before { background: var(--yellow); box-shadow: 0 0 0 2px rgba(181, 135, 30, .22); }
.status--rejected { color: var(--accent); }
.status--rejected::before { background: var(--accent); }
.status--done { color: var(--green); }
.status--done::before { background: var(--green); }
.status--converted_task,
.status--converted_project { color: var(--accent); }
.status--converted_task::before,
.status--converted_project::before { background: var(--accent); }
/* ─── Form builder ────────────────────────────────────────── */
/* Builder takes the whole body-wrap. Body-wrap padding-top is zero'd via
:has() so the sticky toolbar sits flush against the topbar — otherwise
the wrap's padding-top leaves a visible gap above the stuck toolbar. */
.body-wrap:has(.form-builder) { padding-top: 0; }
.form-builder { display: flex; flex-direction: column; gap: 18px; }
.builder-toolbar {
position: sticky; top: 0; z-index: 30;
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
padding: 12px 0;
margin: 0;
background: var(--topbar-bg);
backdrop-filter: blur(6px);
transition: border-color .15s ease, box-shadow .15s ease, padding .15s ease;
border-bottom: 1px solid transparent;
}
.builder-toolbar.is-stuck {
border-bottom-color: var(--rule);
box-shadow: 0 2px 10px -8px rgba(26, 22, 18, .15);
padding: 10px 0;
}
.builder-toolbar__left, .builder-toolbar__right { display: flex; align-items: center; gap: 10px; }
.builder-toolbar__back { color: var(--ink-3); text-decoration: none; font-size: 12px; }
.builder-toolbar__back:hover { color: var(--ink-2); }
.builder-panel {
background: var(--bg-elevated);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 20px 22px;
}
.builder-panel__title {
font-size: 13px; font-weight: 600; text-transform: uppercase;
letter-spacing: .1em; color: var(--ink-3);
margin: 0 0 14px;
}
.builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.builder-grid__span { grid-column: 1 / -1; }
.builder-grid .field label { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; display: block; }
.builder-hint { font-size: 12px; color: var(--ink-3); margin: 10px 0 0; }
.fields-list { display: flex; flex-direction: column; gap: 10px; }
.field-card {
border: 1px solid var(--rule);
border-radius: 6px;
background: var(--paper);
padding: 12px 14px;
transition: border-color .2s ease, background .2s ease;
}
.field-card--flash { border-color: var(--accent); background: var(--paper-2); }
.field-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.field-card__tag {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase;
}
.field-card__ctrl { display: flex; gap: 4px; }
.field-card__btn {
background: transparent; border: 1px solid transparent;
width: 26px; height: 26px; border-radius: 4px;
display: grid; place-items: center;
color: var(--ink-3); cursor: pointer;
font-size: 11px;
transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.field-card__btn:hover { background: var(--paper-2); color: var(--ink-2); border-color: var(--rule); }
.field-card__btn--danger:hover { color: var(--accent); }
.field-card__body {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr) auto;
gap: 10px;
align-items: end;
}
.field-card__cell { display: flex; flex-direction: column; min-width: 0; }
.field-card__cell label { font-size: 11px; color: var(--ink-3); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .06em; }
.field-card__cell .input { padding: 7px 10px; font-size: 13px; }
.field-card__required {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--ink-2);
white-space: nowrap; padding-bottom: 8px;
}
.field-card__options { margin-top: 10px; }
.field-card__options label { font-size: 11px; color: var(--ink-3); margin-bottom: 4px; display: block; text-transform: uppercase; letter-spacing: .06em; }
.field-card__options .textarea { padding: 7px 10px; font-size: 12px; font-family: var(--font-mono); }
.contact-grid { display: flex; flex-direction: column; gap: 10px; }
.contact-row {
display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center;
padding: 8px 10px; border: 1px solid var(--rule); border-radius: 5px;
background: var(--paper);
}
.contact-row__toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.contact-row .input, .contact-row .textarea { padding: 6px 10px; font-size: 13px; }
@media (max-width: 720px) {
.field-card__body { grid-template-columns: 1fr 1fr; }
.contact-row { grid-template-columns: 1fr; }
}
.form-card__url {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 11px;
color: var(--accent);
padding: 6px 10px;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 5px;
overflow: hidden;
margin-top: auto;
}
.form-card__url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.public-url-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 14px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 6px;
}
.public-url-row__url {
flex: 1; min-width: 0;
font-family: var(--font-mono); font-size: 12px;
color: var(--accent); text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px;
}
.public-url-row__url:hover { text-decoration: underline; }
/* Drag-handle for field cards */
.field-card { display: flex; flex-direction: column; }
.field-card.field-card--ghost { opacity: .5; }
.field-card.field-card--dragging { border-color: var(--accent); }
.field-card__drag {
cursor: grab;
color: var(--ink-3);
padding: 2px 6px;
border-radius: 4px;
}
.field-card__drag:hover { background: var(--paper-2); color: var(--ink-2); }
.field-card__drag:active { cursor: grabbing; }
/* ─── Public form page ─────────────────────────────────────── */
body.public-form {
background:
radial-gradient(circle at 1px 1px, rgba(26,22,18,.06) 1px, transparent 0) 0 0/16px 16px,
var(--bg);
min-height: 100vh;
font-family: var(--font-sans);
color: var(--text);
}
.pf-shell { max-width: 680px; margin: 56px auto; padding: 0 20px; }
/* Surface tone used by every public-form block. Mixes the page bg with
pure paper so blocks sit a notch lighter than the cream backdrop — gives
inputs (which stay pure paper) a visible step above the block itself. */
.public-form {
--pf-block-bg: color-mix(in srgb, var(--bg) 40%, var(--paper) 60%);
}
.pf-header {
background: var(--pf-block-bg);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 32px 36px 28px;
margin-bottom: 14px;
position: relative;
}
.pf-tag {
position: absolute; top: -1px; left: -1px;
background: var(--ink); color: var(--text-on-dark);
font: 500 11px/1 var(--font-mono);
letter-spacing: .12em;
padding: 6px 12px;
border-radius: var(--radius-sm) 0 var(--radius-sm) 0;
text-transform: uppercase;
}
.pf-title { font-size: 28px; font-weight: 700; letter-spacing: -.015em; margin: 14px 0 8px; line-height: 1.2; }
.pf-desc { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.pf-desc p:first-child { margin-top: 0; } .pf-desc p:last-child { margin-bottom: 0; }
.pf-card {
background: var(--pf-block-bg);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 28px 32px 24px;
margin-bottom: 14px;
}
.pf-card__title {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .14em;
color: var(--ink-3);
margin: 0 0 18px;
}
.pf-field { margin-bottom: 18px; }
.pf-field:last-child { margin-bottom: 0; }
.pf-field__label {
display: block;
font-size: 13px; color: var(--ink-2); font-weight: 500;
margin-bottom: 6px;
}
.pf-field__label--req::after { content: " *"; color: var(--accent); font-weight: 700; }
.pf-field--invalid .input,
.pf-field--invalid .textarea,
.pf-field--invalid .select { border-color: var(--accent); }
.pf-error { color: var(--accent); font-size: 12px; margin-top: 5px; font-family: var(--font-mono); }
/* Select arrow chrome */
.pf-select { position: relative; }
.pf-select .select { padding-right: 36px; }
/* Custom radio / checkbox */
.pf-choices { display: flex; flex-direction: column; gap: 6px; }
.pf-choice {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
border: 1px solid var(--rule);
border-radius: 6px;
background: var(--paper);
cursor: pointer;
user-select: none;
transition: border-color .14s ease, background .14s ease;
}
.pf-choice:hover { border-color: var(--ink-3); }
.pf-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pf-choice__box,
.pf-choice__dot {
width: 18px; height: 18px;
border: 1.5px solid var(--rule-2);
background: var(--paper);
flex-shrink: 0;
display: grid; place-items: center;
transition: border-color .14s ease, background .14s ease;
}
.pf-choice__box { border-radius: 4px; }
.pf-choice__dot { border-radius: 50%; }
.pf-choice__box::after {
content: "";
width: 10px; height: 10px;
background: transparent;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
transition: background .14s ease;
}
.pf-choice__dot::after {
content: "";
width: 10px; height: 10px;
border-radius: 50%;
background: transparent;
transition: background .14s ease;
}
.pf-choice input:checked ~ .pf-choice__box,
.pf-choice input:checked ~ .pf-choice__dot { border-color: var(--accent); background: var(--paper); }
.pf-choice input:checked ~ .pf-choice__box::after,
.pf-choice input:checked ~ .pf-choice__dot::after { background: var(--accent); }
.pf-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, rgba(199, 91, 48, 0.08)); }
.pf-choice__text { font-size: 14px; color: var(--ink-2); }
/* Contact info — read-only */
.pf-contact {
background: var(--pf-block-bg);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 22px 26px;
margin-bottom: 14px;
}
.pf-contact__list { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pf-contact__row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: baseline; }
.pf-contact__row dt {
font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
color: var(--ink-3); margin: 0;
font-family: var(--font-mono);
}
.pf-contact__row dd { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.pf-contact__row dd a { color: var(--accent); text-decoration: none; }
.pf-contact__row dd a:hover { text-decoration: underline; }
/* Standalone note prose — sits below the contact dl as plain text. */
.pf-contact__note {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--rule);
font-size: 14px;
color: var(--ink-2);
line-height: 1.55;
}
.pf-contact__note:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pf-contact__note p:first-child { margin-top: 0; }
.pf-contact__note p:last-child { margin-bottom: 0; }
.pf-actions { display: flex; justify-content: flex-end; }
.pf-submit { padding: 12px 26px; font-size: 14px; }
@media (max-width: 540px) {
.pf-header, .pf-card { padding: 22px 22px; }
.pf-contact__row { grid-template-columns: 1fr; gap: 4px; }
.pf-contact__row dt { font-size: 10px; }
}
/* Share link */
.share-link {
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--text-2);
text-decoration: none;
border-bottom: 1px solid var(--rule-2);
padding-bottom: 1px;
transition: all var(--duration) var(--ease);
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.share-link:hover { color: var(--accent); border-color: var(--accent); }
.share-link .arr { font-family: var(--font-sans); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--accent); }
/* ─── §6 Forms ───────────────────────────────────────────────── */
.field {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* .field label / .field__label */
.field label,
.field__label {
font-family: var(--font-mono);
font-size: var(--fz-micro);
font-weight: 500;
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--text-muted);
}
.field__hint { font-size: var(--fz-small); color: var(--text-muted); }
.field__error { font-size: var(--fz-small); color: var(--danger); }
/* Inputs — visible border at rest */
.input,
.textarea,
.select {
display: block;
width: 100%;
padding: var(--space-5) var(--space-6);
background: var(--paper);
border: 1px solid var(--rule-2);
border-radius: var(--radius-md);
color: var(--text);
font: 400 var(--fz-body)/1.4 var(--font-sans);
transition: border-color var(--duration) var(--ease),
box-shadow var(--duration) var(--ease);
outline: none;
appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--text-placeholder); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-3); }
.input:focus, .textarea:focus, .select:focus {
border-color: var(--focus-ring);
box-shadow: 0 0 0 3px var(--focus-ring-alpha);
}
.input:disabled, .textarea:disabled, .select:disabled {
background: var(--paper-2);
color: var(--text-muted);
cursor: not-allowed;
}
.input--invalid, .textarea--invalid { border-color: var(--danger); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
/* Select arrow */
.select {
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
/* Inline search input variant */
.input--inline {
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.input--inline:focus { box-shadow: none; border-color: transparent; }
/* Small input */
.input--sm { padding: var(--space-3) var(--space-5); font-size: var(--fz-small); border-radius: var(--radius); }
/* ─── §6 WYSIWYG host ────────────────────────────────────────── */
.wysiwyg-host {
border: 1px solid var(--rule-2);
border-radius: var(--radius-md);
background: var(--paper);
transition: border-color var(--duration) var(--ease),
box-shadow var(--duration) var(--ease);
}
.wysiwyg-host .ql-toolbar.ql-snow {
border: 0;
border-bottom: 1px solid var(--rule);
font-family: var(--font-sans);
}
.wysiwyg-host .ql-container.ql-snow {
border: 0;
min-height: 120px;
font-family: var(--font-sans);
font-size: var(--fz-body);
color: var(--text);
}
.wysiwyg-host:focus-within {
border-color: var(--focus-ring);
box-shadow: 0 0 0 3px var(--focus-ring-alpha);
}
.wysiwyg-host .ql-editor { min-height: 120px; padding: var(--space-5) var(--space-6); }
.wysiwyg-host .ql-editor.ql-blank::before { color: var(--text-placeholder); font-style: normal; }
/* ─── §6 Toggle ──────────────────────────────────────────────── */
.toggle {
position: relative;
display: inline-block;
width: 36px; height: 20px;
cursor: pointer;
}
.toggle input { opacity: 0; position: absolute; inset: 0; }
.toggle__track {
position: absolute; inset: 0;
background: var(--rule-2);
border-radius: var(--radius-full);
transition: background var(--duration) var(--ease);
}
.toggle__track::before {
content: "";
position: absolute;
width: 16px; height: 16px;
left: 2px; top: 2px;
background: var(--paper);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
transition: transform var(--duration) var(--ease);
}
.toggle input:checked + .toggle__track { background: var(--accent); }
.toggle input:checked + .toggle__track::before { transform: translateX(16px); }
.toggle input:focus-visible + .toggle__track { box-shadow: 0 0 0 3px var(--focus-ring-alpha); }
/* ─── §10 Kanban ─────────────────────────────────────────────── */
/* Full-viewport kanban board: uses calc() to fill below topbar + section-head + tabs */
.kanban {
display: flex;
gap: var(--space-6);
overflow-x: auto;
overflow-y: hidden;
align-items: stretch;
flex: 1;
min-height: 0;
padding-bottom: var(--space-4);
}
.kanban::-webkit-scrollbar { height: 6px; }
.kanban::-webkit-scrollbar-track { background: var(--paper-2); }
.kanban::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 3px; }
.kanban::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
/* Toolbar (filter bar) — flat white card with a hairline border, matches
the rest of the system without competing for attention. */
.kanban-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-8);
padding: 12px 14px;
background: var(--bg-elevated);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
margin-bottom: var(--space-6);
flex-shrink: 0;
}
.kanban-tagbar {
display: flex;
gap: var(--space-3);
flex: 1;
overflow-x: auto;
padding-bottom: var(--space-2);
}
.kanban-search {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-5);
background: var(--paper);
border: 1px solid var(--rule-2);
border-radius: var(--radius);
}
.kanban-search input { border: 0; padding: var(--space-3) 0; min-width: 200px; background: transparent; flex: 1; }
.kanban-search--with-submit { padding-right: 2px; }
.kanban-search__submit {
background: var(--ink);
color: var(--paper);
border: none;
width: 26px;
height: 26px;
display: inline-grid;
place-items: center;
border-radius: var(--radius-sm);
cursor: pointer;
flex-shrink: 0;
font-size: 11px;
transition: background var(--duration) var(--ease);
}
.kanban-search__submit:hover { background: var(--accent); }
.kanban-sort-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
background: var(--paper);
border: 1px solid var(--rule-2);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--text-muted);
cursor: pointer;
transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
flex-shrink: 0;
}
.kanban-sort-toggle:hover { color: var(--text); border-color: var(--ink-3); }
.kanban-sort-toggle[data-sort="priority"] { color: var(--accent); border-color: var(--accent); }
/* Editable inline titles (task title / project title) */
.task-title.is-editable:hover,
.project-title.is-editable:hover { border-bottom-color: var(--rule-2) !important; }
.task-title.is-editable:focus,
.project-title.is-editable:focus { border-bottom-color: var(--accent) !important; }
/* Column — full height of kanban row, internal scroll */
.kanban-col {
flex: 0 0 300px;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
overflow: hidden;
}
/* Column head — new BEM + legacy selectors */
.kanban-col__head,
.kanban-col-head {
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--rule);
background: var(--paper);
display: flex;
align-items: center;
gap: var(--space-4);
flex-shrink: 0;
}
.kanban-col__head .title,
.kanban-col-head .title,
.kanban-col__name {
font-family: var(--font-mono);
font-size: var(--fz-xs);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--text-2);
font-weight: 700;
flex: 1;
}
.kanban-col__head .name { flex: 1; } /* alias */
.kanban-col__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--col, var(--rule-2));
flex-shrink: 0;
}
.kanban-col__count,
.kanban-col-count {
font-family: var(--font-mono);
font-size: var(--fz-micro);
font-weight: 700;
background: var(--paper-3);
color: var(--text-muted);
padding: 1px 7px;
border-radius: var(--radius-full);
letter-spacing: var(--ls-mono);
}
/* Card list — scrolls internally */
.kanban-list,
.kanban-col__list {
flex: 1;
padding: var(--space-4);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--space-4);
min-height: 0;
}
/* Pretty scrollbar for column lists */
.kanban-col__list::-webkit-scrollbar,
.kanban-list::-webkit-scrollbar { width: 6px; }
.kanban-col__list::-webkit-scrollbar-track,
.kanban-list::-webkit-scrollbar-track { background: transparent; }
.kanban-col__list::-webkit-scrollbar-thumb,
.kanban-list::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 3px; }
.kanban-col__list::-webkit-scrollbar-thumb:hover,
.kanban-list::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
/* Empty column state */
.kanban-empty {
font-size: var(--fz-xs);
color: var(--text-muted);
text-align: center;
padding: var(--space-8) 0;
}
/* Card */
.kanban-card {
background: var(--paper);
border: 1px solid var(--rule);
padding: var(--space-5) var(--space-6);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color var(--duration) var(--ease),
box-shadow var(--duration) var(--ease),
transform var(--duration-fast) var(--ease);
display: flex;
flex-direction: column;
gap: var(--space-3);
box-shadow: var(--shadow-sm);
flex-shrink: 0;
user-select: none;
}
.kanban-card:hover {
border-color: var(--ink-3);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.kanban-card:active { cursor: grabbing; }
/* Card content — legacy selectors (.k-title, .k-meta) */
.kanban-card .k-title {
font-family: var(--font-sans);
font-weight: 600;
font-size: 13.5px;
color: var(--text);
margin: 0 0 var(--space-4);
line-height: 1.3;
}
.kanban-card .k-meta {
font-family: var(--font-mono);
font-size: var(--fz-xs);
letter-spacing: var(--ls-mono);
color: var(--text-muted);
text-transform: uppercase;
display: flex;
gap: var(--space-5);
align-items: center;
}
/* New BEM card sub-elements */
.kanban-card__row { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; }
.kanban-card__id { font: 500 var(--fz-micro)/1 var(--font-mono); color: var(--text-muted); letter-spacing: var(--ls-mono); }
.kanban-card__tag {
font: 500 var(--fz-micro)/1 var(--font-mono);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
padding: 2px var(--space-3);
border-radius: var(--radius-xs);
background: var(--tag-bg, var(--paper-2));
color: var(--tag, var(--text-2));
}
.kanban-card__id,
.backlog__id,
.task-header__id {
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
}
.kanban-card__id { display: block; margin-bottom: 4px; }
.backlog__id { margin-right: 4px; flex-shrink: 0; }
.task-header__id {
font-size: 13px;
padding: 4px 10px;
background: var(--accent-tint);
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
border-radius: var(--radius-sm);
flex-shrink: 0;
}
/* Inline variant — sits inside the mono breadcrumb line, so it shrinks to
match the surrounding 11px uppercase typography. */
.task-header__id--inline {
font-size: 10px;
padding: 2px 8px;
line-height: 1.4;
vertical-align: middle;
}
/* Breadcrumb line above the task title. Replaces the old "/ Task #N" plain
text with project link + accent chip. */
.task-breadcrumb-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 12px;
}
.task-breadcrumb-line__project {
color: var(--ink-3);
text-decoration: none;
transition: color .15s ease;
}
.task-breadcrumb-line__project:hover { color: var(--text); }
.task-breadcrumb-line__sep { color: var(--text-muted); opacity: .6; }
.kanban-card__title {
font-size: var(--fz-body);
font-weight: 600;
line-height: 1.3;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kanban-card__assignee { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fz-small); color: var(--text-2); }
.kanban-card__meta { display: flex; justify-content: space-between; font-size: var(--fz-xs); color: var(--text-muted); font-family: var(--font-mono); }
.kanban-card__counts { display: flex; gap: var(--space-5); }
.kanban-card__counts i { margin-right: 3px; }
/* Drag states */
.kanban-ghost {
opacity: 0.35;
background: var(--brand-3) !important;
border-style: dashed;
border-color: var(--accent) !important;
box-shadow: none !important;
}
.kanban-dragging {
opacity: 0.5;
cursor: grabbing;
box-shadow: var(--shadow-pop) !important;
}
/* ─── Priority ───────────────────────────────────────────────── */
:root {
--prio-urgent: #DC2626;
--prio-high: #EA580C;
--prio-medium: #CA8A04;
--prio-low: #2563EB;
}
[data-priority="urgent"] { --prio: var(--prio-urgent); }
[data-priority="high"] { --prio: var(--prio-high); }
[data-priority="medium"] { --prio: var(--prio-medium); }
[data-priority="low"] { --prio: var(--prio-low); }
[data-priority="none"] { --prio: var(--ink-3); }
.priority-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--prio, var(--ink-3));
flex-shrink: 0;
}
[data-priority="none"] .priority-dot {
background: transparent;
border: 1px dashed var(--ink-3);
box-sizing: border-box;
}
.kanban-card[data-priority]:not([data-priority="none"]) {
background: linear-gradient(
135deg,
color-mix(in srgb, var(--paper) 82%, var(--prio)) 0%,
color-mix(in srgb, var(--paper) 96%, var(--prio)) 55%,
var(--paper) 100%
);
border-color: color-mix(in srgb, var(--rule) 70%, var(--prio));
}
.kanban-card[data-priority]:not([data-priority="none"]):hover {
border-color: color-mix(in srgb, var(--ink-3) 60%, var(--prio));
}
.kanban-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: 4px;
}
.kanban-card__head .kanban-card__id { margin-bottom: 0; }
.kanban-card__prio {
display: inline-flex;
align-items: center;
gap: 5px;
font: 700 var(--fz-micro)/1 var(--font-mono);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--prio);
}
/* Sub-status badge (returned / reopened) */
.sub-status {
display: inline-flex;
align-items: center;
gap: 4px;
font: 700 var(--fz-micro)/1 var(--font-mono);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
padding: 3px 7px;
border-radius: 999px;
border: 1px solid currentColor;
}
.sub-status[hidden] { display: none !important; }
/* ─── Link preview card (rendered inside comments/descriptions) ──── */
a.link-card,
.rich-text a.link-card,
.comment-body a.link-card {
display: inline-flex;
align-items: center;
gap: var(--space-4);
padding: 4px 6px 4px 4px;
background: var(--paper);
border: 1px solid var(--rule-2);
border-radius: var(--radius-sm);
text-decoration: none !important;
color: var(--text);
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
max-width: 100%;
margin: 3px 8px 3px 0;
line-height: 1.2;
vertical-align: middle;
}
a.link-card *,
.rich-text a.link-card * { text-decoration: none !important; }
.link-card:hover {
border-color: var(--accent);
box-shadow: 0 2px 6px -4px rgba(26, 22, 18, 0.18);
}
.link-card__icon {
width: 22px;
height: 22px;
display: inline-grid;
place-items: center;
border-radius: var(--radius-xs);
background: var(--paper-2);
color: var(--text-muted);
flex-shrink: 0;
font-size: 10px;
}
.link-card__body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.link-card__label {
font-size: 12px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link-card__url {
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono);
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link-card__cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: var(--fz-micro);
font-weight: 700;
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--accent);
padding: 2px 6px;
border: 1px solid currentColor;
border-radius: var(--radius-xs);
}
.link-card:hover .link-card__cta { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Task page: back-to-board link above tabs */
.task-breadcrumb {
margin-bottom: var(--space-6);
}
.task-breadcrumb__back {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--text-muted);
text-decoration: none;
transition: color var(--duration) var(--ease);
}
.task-breadcrumb__back:hover { color: var(--accent); }
/* Member-add dropdown rows */
.member-dropdown__row {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
cursor: pointer;
border-bottom: 1px solid var(--rule);
transition: background var(--duration) var(--ease);
}
.member-dropdown__row:last-child { border-bottom: none; }
.member-dropdown__row:hover { background: var(--paper-2); }
.member-dropdown__label { flex: 1; min-width: 0; }
.member-dropdown__name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.2; }
.member-dropdown__email {
font-family: var(--font-mono);
font-size: var(--fz-micro);
color: var(--text-muted);
letter-spacing: var(--ls-mono);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.member-dropdown__empty {
padding: var(--space-5);
text-align: center;
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--text-muted);
}
/* Project avatar — clickable to open colour picker */
.project-avatar-edit {
position: relative;
display: inline-block;
cursor: pointer;
}
.project-avatar-edit .project-avatar {
transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.project-avatar-edit:hover .project-avatar {
transform: scale(1.04);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rule-2) 70%, transparent);
}
.project-avatar-edit input[type="color"] {
position: absolute;
inset: -4px;
width: calc(100% + 8px);
height: calc(100% + 8px);
opacity: 0;
cursor: pointer;
border: none;
padding: 0;
background: none;
}
.sub-status--returned { color: #B45309; background: color-mix(in srgb, #FDE68A 60%, transparent); }
.sub-status--reopened { color: #6D28D9; background: color-mix(in srgb, #DDD6FE 60%, transparent); }
.task-header .sub-status { font-size: 11px; padding: 4px 10px; }
/* Open tasks indicator on project card */
.card__tasks {
display: inline-flex;
align-items: baseline;
gap: 6px;
margin-top: auto;
padding: 4px 0;
flex-wrap: wrap;
}
.card__tasks-caption {
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--text-2);
font-weight: 700;
margin-right: 2px;
}
.card__tasks-caption::after { content: ':'; margin-left: 1px; }
.card__tasks-num {
font-family: var(--font-mono);
font-size: var(--fz-micro);
font-weight: 700;
letter-spacing: var(--ls-mono-strong);
line-height: 1;
color: var(--accent);
}
.card__tasks-label {
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
color: var(--text-muted);
}
/* ─── Custom select ──────────────────────────────────────────── */
.custom-select {
position: relative;
display: block;
width: 100%;
margin-top: 4px;
}
/* Inside .field the parent flex already provides the gap between label and
control — the extra margin-top here would push the custom-select 4px
lower than the sibling .input, breaking baseline alignment in 2-column
form grids (e.g. Title + Language in the form builder). */
.field > .custom-select { margin-top: 0; }
.custom-select__btn {
display: flex;
align-items: center;
gap: var(--space-4);
width: 100%;
padding: var(--space-5) var(--space-6);
background: var(--paper);
border: 1px solid var(--rule-2);
border-radius: var(--radius-md);
color: var(--text);
font: 400 var(--fz-body)/1.4 var(--font-sans);
cursor: pointer;
transition: border-color var(--duration) var(--ease),
box-shadow var(--duration) var(--ease);
text-align: left;
}
.custom-select__btn:hover { border-color: var(--ink-3); }
.custom-select__btn:focus {
outline: none;
border-color: var(--focus-ring);
box-shadow: 0 0 0 3px var(--focus-ring-alpha);
}
.custom-select__icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.custom-select__label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-select__chevron {
flex-shrink: 0;
font-size: 10px;
color: var(--text-muted);
transition: transform var(--duration) var(--ease);
}
.custom-select__btn[aria-expanded="true"] .custom-select__chevron,
.custom-select:has(.custom-select__pop:not([hidden])) .custom-select__chevron {
transform: rotate(180deg);
}
.custom-select__pop {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
box-shadow: var(--shadow-pop);
z-index: var(--z-dropdown);
max-height: 280px;
overflow-y: auto;
padding: 4px;
}
.custom-select__opt {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
font-size: var(--fz-body);
color: var(--text);
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--duration) var(--ease);
}
.custom-select__opt:hover { background: var(--paper-2); }
.custom-select__opt.is-selected {
background: color-mix(in srgb, var(--paper-2) 60%, var(--brand-3));
font-weight: 600;
}
.custom-select__opt-label { flex: 1; min-width: 0; }
.custom-select__opt-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: .02em;
}
.custom-select__opt.is-selected .custom-select__opt-meta { color: var(--ink-2); }
.custom-select__opt[hidden] { display: none; }
.custom-select__meta {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: .02em;
padding-right: 8px;
}
/* Search header inside .custom-select__pop (sticky so it stays put when
scrolling a long list — e.g. timezones). */
.custom-select__search {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
margin: -4px -4px 4px;
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.custom-select__search i { color: var(--ink-3); font-size: 11px; }
.custom-select__search input {
border: 0; outline: 0; background: transparent;
flex: 1; min-width: 0;
font-family: var(--font-sans); font-size: 13px;
color: var(--ink-2);
padding: 4px 0;
}
.custom-select__search input::placeholder { color: var(--text-placeholder); }
.custom-select__no-results {
padding: 16px 10px;
text-align: center;
font-size: 12px;
color: var(--ink-3);
}
/* Reusable status / column dots used inside custom selects */
.col-dot,
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.status-dot--active { background: var(--green); box-shadow: 0 0 0 2px rgba(77, 104, 64, .18); }
.status-dot--planning { background: var(--blue); box-shadow: 0 0 0 2px rgba(46, 90, 136, .18); }
.status-dot--under_review { background: var(--yellow); box-shadow: 0 0 0 2px rgba(181, 135, 30, .18); }
.status-dot--archived { background: var(--text-muted); }
/* ─── Color picker (input + square swatch) ───────────────────── */
.color-picker-row {
display: flex;
gap: var(--space-4);
align-items: stretch;
}
.color-picker-row .input { flex: 1; min-width: 0; font-family: var(--font-mono); }
.color-swatch {
width: 40px;
height: auto;
align-self: stretch;
aspect-ratio: 1 / 1;
border: 1px solid var(--rule-2);
border-radius: var(--radius-md);
cursor: pointer;
position: relative;
flex-shrink: 0;
overflow: hidden;
transition: border-color var(--duration) var(--ease);
}
.color-swatch:hover { border-color: var(--ink-3); }
.color-swatch input[type="color"] {
position: absolute;
inset: -4px;
width: calc(100% + 8px);
height: calc(100% + 8px);
opacity: 0;
cursor: pointer;
border: none;
padding: 0;
background: none;
}
/* Highlight pulse — matches assystant ticket-pulse */
.kanban-card.is-highlight { animation: ticket-pulse 1.6s ease-out; border-color: var(--accent) !important; }
@keyframes ticket-pulse {
0% { box-shadow: 0 0 0 0 var(--brand-3); }
50% { box-shadow: 0 0 0 6px var(--brand-3); }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* Quick-add footer */
/* Ensure [hidden] on quick-add button/form is respected even with display override */
.kanban-col__add[hidden],
.kanban-col__form[hidden] { display: none !important; }
.kanban-quickadd,
.kanban-col__footer {
padding: var(--space-4);
border-top: 1px solid var(--rule);
flex-shrink: 0;
}
.kanban-quickadd button,
.kanban-col__add {
width: 100%;
background: transparent;
border: 1px dashed var(--rule-2);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
padding: var(--space-4) var(--space-5);
cursor: pointer;
border-radius: var(--radius);
transition: all var(--duration) var(--ease);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
text-align: left;
}
.kanban-quickadd button:hover,
.kanban-col__add:hover { border-color: var(--accent); color: var(--accent); background: var(--brand-3); }
.kanban-quickadd input { width: 100%; margin-top: var(--space-3); }
.kanban-col__form { padding: var(--space-3) 0; }
.kanban-col__hint { font-family: var(--font-mono); font-size: var(--fz-micro); color: var(--text-muted); margin-top: var(--space-2); display: block; }
/* Column settings button (col-settings class used in tests) */
.col-settings {
width: 28px; height: 28px;
padding: 0;
display: inline-grid; place-items: center;
background: transparent;
color: var(--text-muted);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--duration) var(--ease);
font-size: 13px;
}
.col-settings:hover { color: var(--text); background: var(--paper); }
/* Add column button — self-stretches to full kanban height */
.add-column {
flex: 0 0 300px;
background: transparent;
border: 2px dashed var(--rule-2);
border-radius: var(--radius-md);
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
font-size: var(--fz-small);
font-family: var(--font-mono);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
align-self: stretch;
height: 100%;
min-height: 0;
}
.add-column:hover { border-color: var(--ink-3); color: var(--text); }
/* Kanban additions: tagbar scrollbar, search focus, card__due */
.kanban-tagbar::-webkit-scrollbar { height: 4px; }
.kanban-tagbar::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 2px; }
.kanban-search:focus-within {
border-color: var(--focus-ring);
box-shadow: 0 0 0 3px var(--focus-ring-alpha);
}
.kanban-card__due { display: inline-flex; align-items: center; gap: 4px; }
/* ─── §16 Comments ───────────────────────────────────────────── */
.comment-thread {
display: flex;
flex-direction: column;
gap: var(--space-4);
width: 100%;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.comment-thread__title {
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--ink-3);
margin: 0 0 var(--space-4);
}
.comment-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.comment-group { display: flex; flex-direction: column; gap: 4px; position: relative; }
/* Tree trunk — drawn on the group so it can start at the parent avatar's bottom edge.
Height is set via --tree-end (computed in JS from the last reply's avatar centre). */
.comment-group::before {
content: "";
position: absolute;
left: 11px;
/* parent avatar bottom ~ y=29 (4px padding + 1px margin + 24px avatar); start with a small gap. */
top: 33px;
width: 2px;
background: var(--rule);
height: var(--tree-end, 0);
pointer-events: none;
}
.comment {
display: grid;
grid-template-columns: 24px 1fr;
gap: 10px;
padding: 4px 0;
background: transparent;
border: 0;
border-radius: 0;
}
.comment__avatar { margin-top: 1px; }
.comment__main { min-width: 0; }
.comment-meta {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 12px;
color: var(--ink-3);
margin-bottom: 0;
line-height: 1.25;
}
.comment-meta__name { font-weight: 600; color: var(--ink-2); }
.comment-reply-btn { margin-left: auto; }
.comment-meta__time {
font-family: var(--font-mono);
font-size: 10px;
color: color-mix(in srgb, var(--ink-3) 65%, transparent);
letter-spacing: var(--ls-mono);
}
/* When Reply is absent (no canPost), still push time to the right */
.comment-meta:not(:has(.comment-reply-btn)) .comment-meta__time { margin-left: auto; }
.comment-body {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.45;
color: var(--text);
margin-top: 1px;
}
.comment-body p:first-child { margin-top: 0; }
.comment-body p:last-child { margin-bottom: 0; }
.comment-reply-btn {
background: none;
border: 0;
cursor: pointer;
color: var(--ink-3);
font-size: 11px;
padding: 0;
display: inline-flex;
align-items: center;
gap: 4px;
opacity: .55;
transition: opacity .12s ease, color .12s ease;
}
.comment:hover .comment-reply-btn,
.comment:focus-within .comment-reply-btn { opacity: 1; }
.comment-reply-btn:hover { color: var(--accent, var(--ink-2)); }
.comment-reply-btn i { font-size: 10px; }
.comment-replies {
margin-left: 0;
padding-left: 40px;
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.comment-replies[hidden] { display: none; }
.comment--reply { padding: 4px 0; position: relative; }
/* Horizontal connector from the vertical trunk into each reply's avatar */
.comment--reply::before {
content: "";
position: absolute;
left: -28px;
top: 17px;
width: 28px;
height: 0;
border-top: 2px solid var(--rule);
}
.comment-composer {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: var(--space-4);
}
.comment-composer__row { display: flex; justify-content: space-between; align-items: center; }
.comment-composer__attach { cursor: pointer; font-size: 12px; }
.comment-pending-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.comment-composer--reply {
margin: 6px 0 4px;
padding: 8px;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 4px;
}
.comment-composer--reply textarea { min-height: 60px; }
.comment-composer--reply .comment-composer__row { margin-top: 4px; }
/* ─── §17 Attachments ────────────────────────────────────────── */
.attach-grid {
display: grid;
grid-template-columns: repeat(4, 120px);
gap: var(--space-4);
}
.attach-img {
width: 120px; height: 90px;
object-fit: cover;
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--duration) var(--ease);
}
.attach-img:hover { border-color: var(--ink-2); transform: scale(1.02); }
.attach-file {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5) var(--space-6);
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
position: relative;
}
.attach-file .fname {
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: 0.06em;
color: var(--text);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attach-file .fsize {
font-family: var(--font-mono);
font-size: var(--fz-micro);
color: var(--text-muted);
}
.attach-file .fdel {
position: absolute;
top: var(--space-2); right: var(--space-2);
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 11px;
line-height: 1;
padding: 2px;
border-radius: var(--radius-xs);
transition: color var(--duration) var(--ease);
}
.attach-file .fdel:hover { color: var(--danger); }
/* ─── §11 Modal ──────────────────────────────────────────────── */
.modal-backdrop {
position: fixed;
inset: 0;
z-index: var(--z-modal);
background: rgba(26, 22, 18, 0.45);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-12);
animation: fade-in var(--duration) var(--ease);
}
.modal {
background: var(--bg-elevated);
border: 1px solid var(--rule-2);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-modal);
max-width: 600px;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
animation: pop-in var(--duration-slow) var(--ease);
}
.modal--lg { max-width: 920px; max-height: 90vh; }
.modal-head,
.modal__head {
padding: var(--space-8) var(--space-10) var(--space-6);
border-bottom: 1px solid var(--rule);
display: flex;
align-items: center;
gap: var(--space-6);
}
.modal-head .title,
.modal-head > h2,
.modal__head .title,
.modal__head > h2 { font-family: var(--font-sans); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--text); flex: 1; margin: 0; }
.modal-close { margin-left: auto; }
.modal-body,
.modal__body { padding: var(--space-8) var(--space-10); overflow-y: auto; max-height: 60vh; }
.modal-actions,
.modal__actions {
padding: var(--space-6) var(--space-10) var(--space-8);
border-top: 1px solid var(--rule);
display: flex;
gap: var(--space-4);
justify-content: flex-end;
}
.modal-close {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 16px;
cursor: pointer;
padding: var(--space-2);
line-height: 1;
border-radius: var(--radius-sm);
transition: color var(--duration) var(--ease);
}
.modal-close:hover { color: var(--text); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); } }
/* ─── §11 Toasts ─────────────────────────────────────────────── */
.toast-root {
position: fixed;
bottom: var(--space-8);
right: var(--space-8);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-4);
pointer-events: none;
}
.toast {
pointer-events: auto;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
padding: var(--space-5) var(--space-8);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
font-size: var(--fz-small);
color: var(--text);
display: flex;
align-items: center;
gap: var(--space-5);
animation: slide-in var(--duration-slow) var(--ease);
font-family: var(--font-mono);
letter-spacing: var(--ls-mono);
}
.toast--success { border-left-color: var(--success); }
.toast--warning { border-left-color: var(--warning); }
.toast--error { border-left-color: var(--danger); }
.toast--info { border-left-color: var(--info); }
@keyframes slide-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── §11 Lightbox ───────────────────────────────────────────── */
.lightbox-backdrop {
position: fixed;
inset: 0;
background: rgba(26, 22, 18, 0.92);
z-index: var(--z-lightbox);
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-img {
max-width: 90vw;
max-height: 88vh;
object-fit: contain;
border: 1px solid var(--rule);
box-shadow: 0 24px 80px -16px #000;
}
.lb-close {
position: fixed;
top: 20px; right: 24px;
background: transparent;
border: 1px solid rgba(255,255,255,.27);
color: var(--paper);
font-size: 18px;
width: 36px; height: 36px;
display: grid; place-items: center;
cursor: pointer;
border-radius: var(--radius-sm);
transition: all var(--duration) var(--ease);
}
.lb-close:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.lb-prev,
.lb-next {
position: fixed;
top: 50%; transform: translateY(-50%);
background: rgba(26, 22, 18, 0.8);
border: 1px solid rgba(255,255,255,.14);
color: var(--paper);
font-size: 20px;
width: 44px; height: 44px;
display: grid; place-items: center;
cursor: pointer;
border-radius: var(--radius-sm);
transition: all var(--duration) var(--ease);
}
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-prev:hover, .lb-next:hover { background: var(--ink); border-color: rgba(255,255,255,.27); }
/* ─── §12 Tags & chips ───────────────────────────────────────── */
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-5);
background: var(--paper-2);
color: var(--text-2);
border: 1px solid var(--rule);
border-radius: var(--radius-full);
font: 500 var(--fz-small)/1.2 var(--font-sans);
cursor: pointer;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease),
border-color var(--duration) var(--ease);
}
.chip:hover { background: var(--paper); border-color: var(--ink-3); }
.chip--active { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); }
.chip--active:hover { background: var(--ink-2); color: var(--text-on-dark); border-color: var(--ink-2); }
.chip--accent { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
/* Tag chip */
.tag {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 2px var(--space-4) 2px var(--space-3);
background: var(--tag-bg, var(--paper-3));
border: 1px solid var(--rule-2);
border-radius: var(--radius-full);
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono);
color: var(--tag, var(--text-2));
text-transform: uppercase;
}
.tag .x {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 10px;
padding: 0;
line-height: 1;
transition: color var(--duration) var(--ease);
}
.tag .x:hover { color: var(--danger); }
/* Tag picker dropdown */
.tag-picker {
position: relative;
display: block;
width: 100%;
}
.tag-picker .dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 180px;
background: var(--paper-2);
border: 1px solid var(--rule);
box-shadow: var(--shadow-pop);
z-index: var(--z-dropdown);
border-radius: var(--radius);
overflow: hidden;
}
.tag-picker .dropdown .tag-opt {
display: block;
padding: var(--space-4) var(--space-6);
font-family: var(--font-mono);
font-size: var(--fz-micro);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--text-2);
cursor: pointer;
transition: background var(--duration) var(--ease);
border-bottom: 1px solid var(--rule);
}
.tag-picker .dropdown .tag-opt:last-child { border-bottom: none; }
.tag-picker .dropdown .tag-opt:hover { background: var(--paper); color: var(--text); }
/* ─── §13 Top pills (legacy) ─────────────────────────────────── */
.top-pill {
display: inline-flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-5);
border: 1px solid var(--rule-2);
background: var(--paper);
border-radius: var(--radius-full);
color: var(--text-2);
font-size: var(--fz-micro);
cursor: pointer;
transition: all var(--duration) var(--ease);
font-family: var(--font-mono);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
}
.top-pill:hover { border-color: var(--ink-2); color: var(--text); }
.top-pill .count {
background: var(--accent);
color: var(--paper);
border-radius: var(--radius-full);
font-size: var(--fz-micro);
padding: 1px 6px;
font-weight: 700;
}
/* ─── §15 Utilities ──────────────────────────────────────────── */
.muted { color: var(--text-muted); }
.u-muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
.u-mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 2px; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.u-gap-4 { gap: var(--space-2); }
.u-gap-8 { gap: var(--space-4); }
.mt-8 { margin-top: var(--space-4); }
.mt-16 { margin-top: var(--space-8); }
.mt-24 { margin-top: var(--space-12); }
.mt-32 { margin-top: var(--space-16); }
.u-mt-8 { margin-top: var(--space-4); }
.hidden { display: none !important; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ─── §17 Empty state ────────────────────────────────────────── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-6);
padding: var(--space-24) var(--space-16);
text-align: center;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: var(--fz-xs);
letter-spacing: var(--ls-mono-strong);
text-transform: uppercase;
}
/* ─── Page-load reveal ───────────────────────────────────────── */
@keyframes rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.hero, .section-head, .cards-row, .stats-grid, .empty-state, .activity-list { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.hero { animation-delay: 0.05s; }
.stats-grid { animation-delay: 0.10s; }
.section-head { animation-delay: 0.18s; }
.cards-row, .empty-state, .activity-list { animation-delay: 0.22s; }
/* Stagger individual stat cards inside the grid */
.stats-grid .stat-card { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.stats-grid .stat-card:nth-child(1) { animation-delay: 0.10s; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 0.16s; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 0.22s; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 0.28s; }
/* ─── Responsive ─────────────────────────────────────────────── */
/* Hamburger toggle in the topbar — hidden on desktop, shown ≤960 px. */
.topbar__nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
padding: 6px 10px;
font-size: 16px;
color: var(--text);
cursor: pointer;
margin-right: var(--space-4);
align-items: center;
justify-content: center;
}
.topbar__nav-toggle:hover { border-color: var(--ink-3); background: var(--paper-2); }
/* Sidebar close button — desktop-hidden; the mobile media query gives it
real positioning + visibility once it lives inside the open drawer. */
.sidebar__close { display: none; }
/* Forms-data filter row (search + Form / Status selects). Desktop keeps
everything on one line; the mobile block stacks search above and puts
the two selects in a 2-column row. */
.forms-data-filters {
display: flex;
gap: var(--space-3);
align-items: center;
flex-wrap: wrap;
}
.forms-data-filters__selects {
display: flex;
gap: var(--space-3);
align-items: center;
}
/* Backdrop overlay that appears behind the slide-in sidebar. Click-through
is intentional — JS toggles `hidden` to close the drawer. */
.mobile-nav-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.32);
z-index: calc(var(--z-sticky) - 1);
animation: fade-in 0.18s ease;
}
@media (max-width: 960px) {
.shell {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
/* Drop the 6 px breathing strip used by the desktop curved-corner — on
mobile the sidebar is a fixed drawer, not a side column, so there's
no curve to cap. */
padding-top: 0;
/* Prevent the off-screen drawer from creating a phantom horizontal
scrollbar when it sits at translateX(-100%). */
overflow-x: hidden;
}
.topbar__nav-toggle { display: inline-flex; }
/* Sidebar becomes a slide-in drawer from the left. It's off-screen by
default; the [data-mobile-nav-open] state on .shell brings it in. The
z-index sits above the topbar so the drawer covers it (and over the
backdrop). */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: min(300px, 86vw);
height: 100vh;
padding: var(--space-6) var(--space-8) var(--space-10);
border-right: 1px solid var(--rule);
border-bottom: 0;
background: var(--bg-elevated);
/* No shadow in the closed state — translateX(-100%) puts the box
off-screen but its drop shadow still bleeds onto the right edge,
creating the "ghost stripe" effect on the left of the viewport. */
box-shadow: none;
transform: translateX(-100%);
transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
z-index: calc(var(--z-modal) + 1);
overflow-y: auto;
/* Brand row has a negative horizontal margin (pulls the logo into the
desktop sidebar's padding) which on a narrow drawer pushes content
past the right edge and turns the drawer into a horizontal-scroll
trap. Clip it so the drawer never scrolls sideways. */
overflow-x: hidden;
}
.shell[data-mobile-nav-open] .sidebar {
transform: translateX(0);
box-shadow: var(--shadow-modal);
}
.shell:not([data-mobile-nav-open]) .mobile-nav-backdrop {
display: none;
}
.mobile-nav-backdrop { z-index: var(--z-modal); }
.sidebar__foot { font-size: 11px; opacity: 0.7; }
/* Close button shown only inside the open drawer. Hidden at desktop via
`display: none` on the base rule above, made visible only on mobile via
the .shell[data-mobile-nav-open] state. */
.sidebar__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid var(--rule);
background: transparent;
color: var(--text-2);
cursor: pointer;
display: grid;
place-items: center;
font-size: 16px;
}
.sidebar__close:hover { color: var(--accent); border-color: var(--ink-3); background: var(--paper-2); }
/* Main column reclaims the full viewport width once the sidebar is fixed. */
.main {
height: 100vh;
border-top-left-radius: 0;
}
.topbar {
padding: var(--space-4) var(--space-6);
gap: var(--space-3);
}
.topbar__title { font-size: 18px; min-width: 0; }
.topbar__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Drop the user's name on phones — the avatar still identifies them and
the popover shows the full name + email. */
.topbar__user-name { display: none; }
.body-wrap { padding: var(--space-6) var(--space-6) var(--space-16); }
.cards-row { grid-template-columns: 1fr; }
.form-grid--2, .form-grid--3 { grid-template-columns: 1fr; }
.attach-grid { grid-template-columns: repeat(2, 1fr); }
.attach-img { width: 100%; }
.kanban { overflow-x: auto; height: calc(100vh - 240px); }
.kanban-col { flex: 0 0 280px; }
}
/* Project overview tab — main column + 280px sidebar on desktop. Moved
from an inline style so we can collapse to a single column on phones. */
.project-overview {
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--space-12);
align-items: start;
}
/* Task detail page — same shape: main column + 280px sidebar. */
.task-detail {
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--space-12);
align-items: start;
}
/* ─── Submission detail (/forms-data/{id}) ───────────────────────
Two continuous white cards side-by-side. Sections inside a card are
separated by a hairline rule rather than a gap between cards. */
.submission-detail {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--space-8);
align-items: start;
}
.submission-card { padding: 0; overflow: hidden; }
.submission-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-6);
padding: var(--space-8) var(--space-10);
border-bottom: 1px solid var(--rule);
}
.submission-card__title { font-size: 20px; font-weight: 600; margin: 0; }
.submission-card__sub { color: var(--ink-3); font-size: 13px; margin: var(--space-2) 0 0; }
.submission-card__meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: var(--ls-mono-strong);
white-space: nowrap;
align-self: flex-start;
}
.submission-card__section {
padding: var(--space-8) var(--space-10);
}
.submission-card__section + .submission-card__section {
border-top: 1px solid var(--rule);
}
.submission-card__section-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: var(--ls-mono-strong);
color: var(--ink-3);
margin: 0 0 var(--space-5);
}
.submission-card__hint { font-size: 11px; color: var(--ink-3); margin: var(--space-4) 0 0; }
.submission-card__section--danger { background: transparent; }
.submission-card__cta { width: 100%; }
.submission-card__delete {
width: 100%;
padding: var(--space-3) var(--space-4);
font-size: 12px;
letter-spacing: var(--ls-mono);
text-transform: uppercase;
}
.submission-aside { padding: 0; overflow: hidden; }
.submission-answers { margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.submission-answers__row { display: flex; flex-direction: column; gap: var(--space-1); }
.submission-answers__label {
font-size: 11px;
color: var(--ink-3);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: var(--ls-mono);
}
.submission-answers__value {
font-size: 14px;
line-height: 1.5;
word-break: break-word;
}
.submission-answers__value--empty { color: var(--ink-3); font-style: italic; }
/* ─── Tags admin — compact chip cards ────────────────────────────
Tags render as small inline cards that wrap to the next row instead
of stretching to fill the container. Each chip auto-sizes around its
content; the row uses flex-wrap with a gap so they tile neatly. */
.tag-chip-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.tag-chip {
flex: 0 0 auto;
display: inline-flex;
flex-direction: row;
align-items: center;
gap: var(--space-5);
min-height: auto;
padding: var(--space-4) var(--space-5);
background: var(--bg-elevated);
cursor: default;
}
.tag-chip:hover { transform: none; }
.tag-chip__name {
font-weight: 600;
font-size: 14px;
line-height: 28px;
outline: none;
border-bottom: 1px dashed transparent;
cursor: text;
white-space: nowrap;
/* Match the 28 px height of the swatch + delete button so contenteditable
doesn't shift the baseline when the user hovers or clicks. */
display: inline-flex;
align-items: center;
height: 28px;
}
.tag-chip__name:focus { border-bottom-color: var(--accent); }
.tag-chip__swatch {
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: 6px;
}
.tag-chip__usage {
font-size: 11px;
color: var(--ink-3);
letter-spacing: var(--ls-mono);
white-space: nowrap;
/* Same trick as the name — match the 28 px row height so all four
elements (swatch, name, usage, delete) sit on the same vertical
centre line. */
display: inline-flex;
align-items: center;
height: 28px;
}
.tag-chip__delete {
flex: 0 0 auto;
width: 28px;
height: 28px;
/* Override .btn-danger's min-height: 36px — otherwise the delete button
pushes the chip's content box taller than the swatch / name height
and the swatch ends up visually nearer the top edge. */
min-height: 0;
padding: 0;
font-size: 12px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.tag-chip__delete i { font-size: 12px; }
/* Phone-tight (≤600 px) — collapse / re-flow the components added by the
recent settings + profile + page-head work. */
@media (max-width: 600px) {
/* page-head: tabs row + side button. Stack the button under the tabs and
let the tabs scroll horizontally if they overflow. */
.page-head {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
.page-head .project-tabs {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: thin;
padding-bottom: 2px;
}
.page-head__btn {
align-self: flex-start;
margin-bottom: 0;
}
/* Profile card: avatar over fields, with the upload button next to the
avatar instead of below. */
.profile-card { padding: var(--space-6) var(--space-6); }
.profile-card__body--personal { gap: var(--space-5); }
.profile-avatar { flex-direction: row; align-items: center; }
.profile-avatar__controls { align-items: flex-start; }
.profile-avatar__hint { text-align: left; }
/* Brief & settings cards — drop the desktop padding so content gets more
of the small viewport. */
.brief, .brief--wide { padding: var(--space-6) var(--space-6); }
.profile-form { gap: var(--space-4); }
.profile-form__actions { flex-direction: column; align-items: stretch; }
/* Page actions row (search + new-X button on list pages): stack so the
search input gets full width. */
.page-actions {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
.page-actions > * { width: 100%; }
.search-field, .kanban-search { width: 100%; }
/* Data table — let the table scroll horizontally instead of squashing
columns. The wrap is already there; we just need to mark it scrollable. */
.data-table-wrap { overflow-x: auto; }
.data-table { min-width: 600px; }
/* Form builder: 2-col basics → 1 col, action toolbar stacks too. */
.builder-grid { grid-template-columns: 1fr; }
.builder-toolbar { flex-wrap: wrap; gap: var(--space-3); }
.builder-toolbar__right { width: 100%; }
/* Project overview & task detail & submission detail: collapse the
details sidebar under the main column. */
.project-overview,
.task-detail,
.submission-detail { grid-template-columns: 1fr; gap: var(--space-6); }
/* Submission card sections — tighten the padding so the content uses the
small viewport better and the head meta wraps cleanly. */
.submission-card__head { flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.submission-card__section { padding: var(--space-6); }
/* "Add X" CTA buttons on list/board pages — keep them visible (no full
hide) but compact: icon + minimal label. The narrowest pages can drop
the text entirely via a `.btn-add` modifier. */
.btn--add-mobile-icon { font-size: 0; padding: 6px 10px; }
.btn--add-mobile-icon i { font-size: 14px; }
.btn--add-mobile-icon::after { content: none; }
/* "Open Compass" link in /admin/settings page-head — keep only the icon. */
.page-head__btn { font-size: 0 !important; padding: 6px 10px !important; }
.page-head__btn i { font-size: 14px; margin: 0 !important; }
/* Forms-data filters: place the two custom-selects (Form / Status)
side-by-side as a 2-column grid below the search input. */
.forms-data-filters {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
.forms-data-filters .search-field { width: 100%; }
.forms-data-filters__selects {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.forms-data-filters__selects > .custom-select { width: auto !important; min-width: 0; }
/* Form builder toolbar on mobile: drop the "All forms" link entirely and
stretch the three action buttons (Add field / Open public / Save) into
a 3-column grid that fills the viewport width. Icons stay; labels are
hidden via font-size: 0. */
.builder-toolbar__left { display: none; }
.builder-toolbar__right {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
width: 100%;
}
.builder-toolbar__right .btn-secondary,
.builder-toolbar__right .btn--primary {
font-size: 0;
padding: 12px 0;
width: 100%;
justify-content: center;
}
.builder-toolbar__right .btn-secondary i,
.builder-toolbar__right .btn--primary i { font-size: 16px; margin: 0 !important; }
/* Kanban toolbar — search + filters must scroll horizontally inside the
toolbar rather than overflow the card edge. */
.kanban-toolbar {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: thin;
}
.kanban-toolbar > * { flex-shrink: 0; }
.kanban-search { min-width: 200px; }
/* page-actions row already stacks vertically at this breakpoint — make
the inner search-field expand to full width as a default. */
.page-actions { gap: var(--space-3); }
/* …unless the row is marked --inline (e.g. submission detail back-link +
status badge): keep it as a single horizontal row, with the badge on
the right edge. */
.page-actions--inline {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.page-actions--inline > * { width: auto; }
}
/* ═══════════════════════════════════════════════════════════════
§V4 — Hybrid baked in (locked 2026-05-29)
- Page bg = paper-2, elevated surfaces = paper (handled in §1 Layer B)
- Stat-cards: semantic colors per [data-metric]
- Cards: ambient resting shadow + hover lift
- Section heads: marker dot for .num
- Corner tag: muted by default, brand on card hover
- .spark: optional 7-day mini-bar series (markup-driven, no JS)
═══════════════════════════════════════════════════════════════ */
/* — Cards: subtle resting shadow + lighter corner-tag — */
.card {
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 1px 2px rgba(26, 22, 18, .04),
0 8px 20px -8px rgba(26, 22, 18, .08);
}
.card:hover {
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 2px 4px rgba(26, 22, 18, .05),
0 16px 28px -12px rgba(26, 22, 18, .14);
}
/* Corner-tag fades into paper; only colors up when the card is hovered.
Pinned cards keep accent (handled by .card.is-pinned earlier in the file). */
.card .corner-tag,
.card__tag {
background: var(--paper-3);
color: var(--ink-2);
}
.card:hover .corner-tag,
.card:hover .card__tag {
background: var(--accent);
color: var(--text-on-dark);
}
.card.is-pinned .corner-tag { background: var(--accent); color: var(--text-on-dark); }
/* — Section head .num becomes a marker dot — */
.section-head .num {
display: inline-grid;
place-items: center;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--bg-elevated);
border: 1px solid var(--rule);
font-size: 10px;
font-weight: 700;
color: var(--text-2);
letter-spacing: 0;
}
/* — Stat cards: semantic per data-metric, retain lift — */
.stat-card {
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 1px 2px rgba(26, 22, 18, .04),
0 8px 20px -8px rgba(26, 22, 18, .08);
background: var(--bg-elevated);
min-height: 130px;
}
.stat-card[data-metric] { position: relative; }
.stat-card[data-metric]::after {
content: '';
position: absolute;
inset: 0;
background: currentColor;
opacity: .08;
pointer-events: none;
border-radius: inherit;
}
.stat-card[data-metric] > * { position: relative; z-index: 1; }
.stat-card[data-metric="open"] { color: var(--blue); }
.stat-card[data-metric="closed"] { color: var(--green); }
.stat-card[data-metric="week-open"] { color: var(--accent); }
.stat-card[data-metric="week-closed"] { color: var(--yellow); }
/* Value stays as text color, not metric tint */
.stat-card[data-metric] .stat-card__value,
.stat-card--accent .stat-card__value,
.stat-card--green .stat-card__value { color: var(--text); }
/* — Sparkline (optional, used when 7-day series is available) — */
.spark {
display: flex;
align-items: flex-end;
gap: 3px;
height: 26px;
margin-top: 8px;
position: relative;
z-index: 1;
}
.spark > span {
flex: 1;
background: currentColor;
opacity: .35;
border-radius: 2px 2px 0 0;
min-width: 4px;
}
/* — Theme toggle in user-menu dropdown — */
.user-menu__theme {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
padding: var(--space-3) var(--space-5);
margin: var(--space-3) 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.user-menu__theme-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .1em;
}
.theme-toggle {
display: inline-flex;
background: var(--bg);
border: 1px solid var(--rule);
border-radius: var(--radius-full);
padding: 2px;
gap: 2px;
}
.theme-toggle__btn {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: var(--radius-full);
color: var(--text-muted);
font-size: 11px;
transition: background .15s ease, color .15s ease;
}
.theme-toggle__btn:hover { color: var(--text); }
.theme-toggle__btn.is-active {
background: var(--bg-elevated);
color: var(--accent);
box-shadow: 0 1px 2px rgba(26, 22, 18, .12);
}
/* — Brand color picker (settings page) — */
.color-picker {
display: inline-flex;
align-items: center;
gap: 8px;
}
.color-picker input[type="color"] {
appearance: none;
-webkit-appearance: none;
width: 44px;
height: 36px;
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--bg-elevated);
cursor: pointer;
padding: 2px;
}
.color-picker input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--radius-xs); }
/* — Unified toolbar controls — keep heights consistent across pages — */
/* Alias: .search-field is the semantic name (kanban-search predates this).
Keeping both selectors ensures legacy markup keeps working without churn. */
.search-field {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-5);
background: var(--bg-elevated);
border: 1px solid var(--rule-2);
border-radius: var(--radius);
min-width: 220px;
min-height: 36px;
}
.search-field input {
border: 0;
padding: var(--space-3) 0;
min-width: 0;
background: transparent;
flex: 1;
font: 400 var(--fz-body)/1.4 var(--font-sans);
color: var(--text);
}
.search-field input:focus { outline: none; }
.search-field input::placeholder { color: var(--text-muted); }
.search-field--with-submit { padding-right: 2px; }
.search-field__submit {
background: var(--ink);
color: var(--paper);
border: none;
width: 26px; height: 26px;
display: inline-grid; place-items: center;
border-radius: var(--radius-sm);
cursor: pointer;
flex-shrink: 0;
font-size: 11px;
transition: background var(--duration) var(--ease);
}
.search-field__submit:hover { background: var(--accent); }
.search-field:focus-within { border-color: var(--ink-3); }
/* Compact custom-select for filter toolbars — matches .search-field height. */
.custom-select--compact { margin-top: 0; }
.custom-select--compact .custom-select__btn {
padding: 0 var(--space-5);
border-radius: var(--radius);
font-size: var(--fz-small);
min-height: 36px;
background: var(--bg-elevated);
}
.custom-select--compact .custom-select__chevron { font-size: 10px; }
/* — Data table — used for /users and other admin catalogs.
Wrapped in .data-table-wrap so the card-style shell (paper bg, hairline
border, soft shadow) sits cleanly on cream while the table itself stays
light on rules. */
.data-table-wrap {
background: var(--bg-elevated);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 1px 2px rgba(26, 22, 18, .04),
0 8px 20px -8px rgba(26, 22, 18, .08);
/* No overflow:hidden — would clip dropdown popups (role selector etc.)
and cause spurious vertical scroll. Corner rounding is achieved with
per-cell radius below. */
}
.data-table {
width: 100%;
/* `separate` so per-cell border-radius actually applies (collapse breaks
it). `border-spacing: 0` keeps the grid flush. */
border-collapse: separate;
border-spacing: 0;
background: transparent;
}
.data-table thead th {
padding: 12px 16px;
background: var(--surface-soft);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-muted);
text-align: left;
border-bottom: 1px solid var(--rule);
white-space: nowrap;
}
/* Round only the outermost cells so the wrap's radius is preserved. */
.data-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-md); }
.data-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-md); }
.data-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-md); }
.data-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-md); }
.data-table tbody td {
padding: 12px 16px;
border-bottom: 1px solid var(--rule);
color: var(--text);
font-size: 14px;
vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--accent-tint) 35%, transparent); }
.data-table__cell--actions {
text-align: right;
white-space: nowrap;
}
.data-table__cell--user {
display: flex;
align-items: center;
gap: 12px;
min-width: 220px;
}
.data-table__name { font-weight: 600; font-size: 14px; }
.data-table__sub { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.data-table__meta-time {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: var(--ls-mono);
white-space: nowrap;
}
/* Important activity row — form submissions and similar customer touchpoints.
Thin accent rail on the left + brand-tinted background draws the eye
without making the whole row scream. */
.activity-row--important {
border-left: 3px solid var(--accent);
background: var(--accent-tint);
}
.activity-row--important .activity-row__icon { color: var(--accent); }
/* Honeypot field — invisible to humans (and screen readers via aria-hidden
on the wrapper), but kept in the DOM so naive bots fill it. We pull it
off-screen rather than display:none because some bot frameworks skip
`display:none` inputs. */
.pf-honeypot {
position: absolute;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}