/* ==========================================================================
   PHANTASM CRM — Shared Design System
   Two themes: obsidian (dark) and studio (light)
   Toggle by setting [data-theme] on <html>
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap");

/* ============ RESET ============ */
*,
*::before,
*::after {
    box-sizing: border-box;
}
/* Force ONE font family and ONE size across the entire app — matching
   the sidebar's IBM Plex Sans at 14px. Every element (including browser
   defaults for <code>, <pre>, <kbd>, <samp>, <input>, <textarea>) and
   every component-level font-size declaration is pulled onto the same
   baseline. Headings still differentiate themselves via weight. SVG icons
   are excluded so their internal sizing (viewBox math) isn't disturbed. */
*:not(svg):not(svg *),
code,
pre,
kbd,
samp,
tt,
input,
textarea,
select,
button {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
}
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition:
        background 0.3s ease,
        color 0.3s ease;
    min-height: 100vh;
    min-height: 100dvh;
    /* Base size — single source of truth for every page. Matches the
       sidebar's .sb-link size so body text reads consistently with the
       nav rail. The --text-* scale below tunes the named sizes. */
    font-size: 14px;
    line-height: 1.55;
}
button {
    font-family: inherit;
}
a {
    color: inherit;
    text-decoration: none;
}
/* Allow opt-in underlines on long-form prose links by adding .has-underline. */
a.has-underline {
    text-decoration: underline;
}
img,
svg {
    display: block;
    max-width: 100%;
}
input,
textarea,
select,
button {
    font: inherit;
    color: inherit;
}

/* ============ THEMES ============ */

/* Default to dark (Obsidian) — violet accent on near-black blue surfaces.
   Matches the design mock: purple-pink primary, deep cool dark backgrounds. */
:root,
html[data-theme="obsidian"] {
    --bg: #0d0e15;
    --surface: #15161f;
    --surface-2: #1d1e2a;
    --surface-3: #272836;
    --surface-hover: #2f3142;
    --border: #2a2b3a;
    --border-strong: #3a3c50;
    /* Sidebar sits deeper than the rest so the rail reads as a separate
       chrome surface — matches the design mock where the menu column is
       the darkest element on screen. Text inside the sidebar defaults to
       white so the deep background reads cleanly without the user having
       to touch the appearance picker. */
    --sidebar-bg: #07080e;
    --sidebar-border: rgba(255,255,255,0.06);
    --sidebar-fg: #ffffff;
    --sidebar-fg-muted: rgba(255,255,255,0.72);
    --sidebar-fg-dim: rgba(255,255,255,0.50);
    --sidebar-hover-bg: rgba(255,255,255,0.08);
    /* Topbar follows the same light-on-dark default so the chrome
       reads as a single piece. */
    --topbar-fg: #ffffff;
    --topbar-fg-muted: rgba(255,255,255,0.72);
    --topbar-fg-dim: rgba(255,255,255,0.50);
    --topbar-border: rgba(255,255,255,0.06);
    --text: #ededf0;
    --text-muted: #8a8a93;
    --text-dim: #5d5d68;
    --accent: #a855f7;
    --accent-soft: rgba(168, 85, 247, 0.14);
    --accent-hover: #c084fc;
    --accent-fg: #ffffff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
    --grid-line: rgba(255, 255, 255, 0.03);
    --overlay: rgba(0, 0, 0, 0.6);

    /* Single body font used everywhere — headings, body, sidebar, topbar,
       and even places that historically wanted a mono accent. Display and
       mono variables are both aliased to the body family so every
       component picks up the same look regardless of which token it
       references. Headings differentiate via weight, not a separate font. */
    --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: var(--font-body);
    --font-mono: var(--font-body);

    /* Status palette tuned for dark — mapped onto the canonical 5-family scheme:
       backlog=grey, todo/review=amber (waiting), progress=blue (in-flight),
       approved/done=green (success), blocked/reopened=red (bad outcome). */
    --st-backlog-bg: rgba(148, 148, 158, 0.16);
    --st-backlog-fg: #b4b4be;
    --st-todo-bg: rgba(245, 158, 11, 0.18);
    --st-todo-fg: #fbbf24;
    --st-progress-bg: rgba(59, 130, 246, 0.20);
    --st-progress-fg: #93c5fd;
    --st-review-bg: rgba(245, 158, 11, 0.18);
    --st-review-fg: #fbbf24;
    --st-approved-bg: rgba(34, 197, 94, 0.18);
    --st-approved-fg: #4ade80;
    --st-blocked-bg: rgba(239, 68, 68, 0.18);
    --st-blocked-fg: #f87171;
    --st-reopened-bg: rgba(239, 68, 68, 0.18);
    --st-reopened-fg: #f87171;
    --st-done-bg: rgba(34, 197, 94, 0.14);
    --st-done-fg: #4ade80;

    --pri-low: #6b7280;
    --pri-med: #3884ff;
    --pri-high: #f59e0b;
    --pri-urg: #ef4444;

    --radius: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* ============ TYPE SCALE ============
       Single source of truth for font sizes used across pages. Components
       use these tokens so every page picks up the same visual rhythm. */
    --text-2xs: 12.5px;
    --text-xs: 14px;
    --text-sm: 15.5px;
    --text-base: 16.5px;
    --text-md: 18.5px;
    --text-lg: 22px;
    --text-xl: 27px;
    --text-2xl: 34px;
    --text-3xl: 44px;

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-base: 1.5;
    --leading-relaxed: 1.65;

    /* ============ SPACING SCALE ============ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
}

html[data-theme="studio"] {
    --bg: #fafafa;
    --surface: #ffffff;
    --surface-2: #f4f4f5;
    --surface-3: #ebebed;
    --surface-hover: #f0f0f2;
    --border: #e4e4e7;
    --border-strong: #d4d4d8;
    --text: #0a0a0f;
    --text-muted: #6e6e78;
    --text-dim: #a1a1aa;
    --accent: #4338ca;
    --accent-soft: rgba(67, 56, 202, 0.08);
    --accent-hover: #5b4fd6;
    --accent-fg: #ffffff;
    --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05);
    --shadow-md: 0 4px 12px rgba(20, 20, 30, 0.08);
    --shadow-lg: 0 16px 48px rgba(20, 20, 30, 0.12);
    --grid-line: rgba(20, 20, 30, 0.04);
    --overlay: rgba(20, 20, 30, 0.4);

    --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: var(--font-body);
    --font-mono: var(--font-body);

    /* Light-theme status palette mirrors the canonical 5-family scheme. */
    --st-backlog-bg: #f1f5f9;
    --st-backlog-fg: #475569;
    --st-todo-bg: #fef3c7;
    --st-todo-fg: #b45309;
    --st-progress-bg: #dbeafe;
    --st-progress-fg: #1d4ed8;
    --st-review-bg: #fef3c7;
    --st-review-fg: #b45309;
    --st-approved-bg: #dcfce7;
    --st-approved-fg: #15803d;
    --st-blocked-bg: #fee2e2;
    --st-blocked-fg: #b91c1c;
    --st-reopened-bg: #fee2e2;
    --st-reopened-fg: #b91c1c;
    --st-done-bg: #dcfce7;
    --st-done-fg: #15803d;

    --pri-low: #6e6e78;
    --pri-med: #1d4ed8;
    --pri-high: #b45309;
    --pri-urg: #b91c1c;

    --radius: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* ============ TYPOGRAPHY UTILITIES ============ */
.font-display {
    font-family: var(--font-display);
}
.font-mono {
    font-family: var(--font-mono);
}
h1,
h2,
h3,
h4,
h5 {
    margin: 0;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}

.muted {
    color: var(--text-muted);
}
.dim {
    color: var(--text-dim);
}

/* ============ WIREFRAME PAGE LAYOUT ============ */
/* This is the "document" wrapper around each wireframe flow */
body.wf-doc {
    background: var(--bg);
    padding-bottom: 80px;
}

.wf-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.wf-toolbar-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.wf-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wf-brand-mark {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wf-brand-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.wf-brand-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
html[data-theme="obsidian"] .wf-brand-name {
    font-style: italic;
}
html[data-theme="studio"] .wf-brand-name {
    font-weight: 600;
}
.wf-brand-sub {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-left: 1px solid var(--border-strong);
    padding-left: 12px;
}
.wf-flow-info {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    text-align: right;
}
.wf-flow-info .num {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    color: var(--text-dim);
    text-transform: uppercase;
}
.wf-flow-info .name {
    font-weight: 500;
}

.wf-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Theme toggle */
.theme-toggle {
    display: flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
}
.theme-toggle button {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.18s;
}
.theme-toggle button.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.theme-toggle svg {
    width: 13px;
    height: 13px;
}

/* ============ WIREFRAME HERO ============ */
.wf-hero {
    max-width: 1480px;
    margin: 0 auto;
    padding: 60px 32px 40px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.wf-hero-num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wf-hero-num::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--accent);
}
.wf-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 16px;
}
html[data-theme="studio"] .wf-hero h1 {
    font-weight: 600;
}
.wf-hero p {
    font-size: 16px;
    color: var(--text-muted);
    max-width: 700px;
    line-height: 1.6;
    margin: 0 0 28px;
}
.wf-hero-meta {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 13px;
}
.wf-hero-meta > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wf-hero-meta .label {
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.wf-hero-meta .value {
    color: var(--text);
    font-weight: 500;
}

/* ============ WIREFRAME SCREENS ============ */
.wf-section {
    max-width: 1480px;
    margin: 0 auto;
    padding: 60px 32px;
    border-bottom: 1px solid var(--border);
}
.wf-section-head {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
}
.wf-section-head .left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wf-section-num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.wf-section-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
html[data-theme="studio"] .wf-section-title {
    font-weight: 600;
}
.wf-section-desc {
    font-size: 15.5px;
    color: var(--text-muted);
    max-width: 420px;
    line-height: 1.55;
}

/* The screen + annotations layout */
.wf-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1080px) {
    .wf-stage {
        grid-template-columns: 1fr;
    }
}

/* The frame around each screen mockup */
.wf-frame {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.wf-frame-chrome {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wf-chrome-dots {
    display: flex;
    gap: 6px;
}
.wf-chrome-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-strong);
    opacity: 0.5;
}
.wf-chrome-url {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
}
.wf-chrome-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.wf-frame-body {
    position: relative;
    min-height: 200px;
}
.wf-frame.mobile {
    max-width: 380px;
    margin: 0 auto;
}
.wf-frame.mobile .wf-chrome-url {
    max-width: 200px;
}

/* Annotations panel */
.wf-notes {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    font-size: 14px;
    position: sticky;
    top: 100px;
}
.wf-notes h4 {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
    font-weight: 500;
}
.wf-notes ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: notes;
}
.wf-notes ol li {
    counter-increment: notes;
    padding: 10px 0 10px 32px;
    position: relative;
    border-bottom: 1px solid var(--border);
    line-height: 1.55;
}
.wf-notes ol li:last-child {
    border-bottom: 0;
}
.wf-notes ol li::before {
    content: counter(notes);
    position: absolute;
    left: 0;
    top: 10px;
    width: 22px;
    height: 22px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wf-notes ol li strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
}
.wf-notes ol li code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--text);
}
.wf-notes ol li .note-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    margin-right: 6px;
}

/* In-screen numbered markers (overlay on the mockup) */
.marker {
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow:
        0 0 0 3px var(--bg),
        var(--shadow-md);
    pointer-events: none;
}

/* ============ APP SHELL (USED INSIDE MOCKUPS) ============ */
.app-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--bg);
}
.app-shell.no-sidebar {
    grid-template-columns: 1fr;
}

.sidebar {
    background: var(--sidebar-bg, var(--surface));
    border-right: 1px solid var(--sidebar-border, var(--border));
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Thin sidebar scrollbar — the default chrome scrollbar takes ~17px
       of horizontal space and dominates the rail. These rules ship a
       thin/subtle rail on both Firefox (`scrollbar-*`) and WebKit
       (`::-webkit-scrollbar`). The thumb only shows on hover so the
       sidebar reads clean at rest. */
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.sidebar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
}
.sidebar:hover::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
.sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 20px;
    border-bottom: 1px solid var(--sidebar-border, var(--border));
    margin-bottom: 16px;
}
.sb-brand-mark {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sb-brand-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--sidebar-fg, inherit);
}
html[data-theme="obsidian"] .sb-brand-name {
    font-style: italic;
}
html[data-theme="studio"] .sb-brand-name {
    font-weight: 600;
}

/* Sidebar text uses three opacity-derived tokens so the picker can swap
   the whole rail to white or black text with one variable. */
.sb-section {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sidebar-fg-dim, var(--text-dim));
    padding: 14px 12px 6px;
    font-weight: 500;
}
.sb-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--sidebar-fg-muted, var(--text-muted));
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}
.sb-link:hover {
    background: var(--sidebar-hover-bg, var(--surface-2));
    color: var(--sidebar-fg, var(--text));
}
.sb-link.active {
    background: var(--accent-soft);
    color: var(--accent);
}
.sb-link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.sb-link .badge-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--surface-2);
    color: var(--text-muted);
    padding: 1px 7px;
    border-radius: 999px;
}
.sb-link.active .badge-count {
    background: var(--accent);
    color: var(--accent-fg);
}

.sb-user {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid var(--sidebar-border, var(--border));
    display: flex;
    align-items: center;
    gap: 10px;
}
.sb-user-info {
    flex: 1;
    min-width: 0;
}
.sb-user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--sidebar-fg, inherit);
}
.sb-user-role {
    font-size: 12px;
    color: var(--sidebar-fg-muted, var(--text-muted));
}

/* Topbar inside the app */
.topbar {
    height: 56px;
    background: var(--topbar-bg, var(--surface));
    border-bottom: 1px solid var(--topbar-border, var(--border));
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--topbar-fg, inherit);
}
.topbar .crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--topbar-fg-muted, var(--text-muted));
}
.topbar .crumbs strong {
    color: var(--topbar-fg, var(--text));
    font-weight: 500;
}
.topbar .crumb-sep {
    color: var(--topbar-fg-dim, var(--text-dim));
}
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: var(--radius);
    width: 280px;
    color: var(--text-muted);
    font-size: 13.5px;
}
.search-box svg {
    width: 13px;
    height: 13px;
}
.search-box .kbd {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    border: 1px solid var(--border);
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--surface);
}

.icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
    position: relative;
}
.icon-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
}
.icon-btn svg {
    width: 15px;
    height: 15px;
}
.icon-btn .pip {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--surface);
}

.app-content {
    padding: 28px 32px;
    background: var(--bg);
    min-height: calc(100% - 56px);
}

.page-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(
        120deg,
        var(--accent) 0%,
        var(--accent-hover) 45%,
        var(--accent) 100%
    );
    background-size: 220% 220%;
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    box-shadow: var(--shadow-sm);
    color: var(--accent-fg);
    overflow: hidden;
    animation:
        page-head-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both,
        page-head-shift 14s ease-in-out infinite;
}
.page-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 60%,
        transparent 100%
    );
    background-size: 220% 100%;
    animation: page-head-shimmer 6s linear infinite;
    pointer-events: none;
}
.page-head > * {
    position: relative;
    z-index: 1;
}
.page-head .left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-eyebrow {
    /* Hidden globally — kicker text was duplicating the heading; keep the
       markup in place so every page template keeps working, just don't paint it. */
    display: none !important;
}
/* Same logic for the per-page subtitle line that sits under the title. */
.page-head .left > .muted,
.page-head .left > .panel-sub {
    display: none !important;
}
/* Page heading uses Title Case visually so casual ALL-CAPS / lower-case
   copy in templates still reads as a proper heading. */
.page-title {
    text-transform: capitalize;
}
.page-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    color: var(--accent-fg);
    margin: 0;
}
html[data-theme="studio"] .page-title {
    font-weight: 600;
}
.page-head .muted,
.page-head .panel-sub,
.page-head a:not(.btn) {
    color: var(--accent-fg) !important;
    opacity: 0.85;
}

/* ---- Buttons inside the primary page-head card (inverted look) ---- */
.page-head .btn-primary {
    background: var(--accent-fg);
    color: var(--accent);
    border-color: var(--accent-fg);
}
.page-head .btn-primary:hover {
    background: transparent;
    color: var(--accent-fg);
    border-color: var(--accent-fg);
}
.page-head .btn-secondary,
.page-head .btn-ghost {
    background: rgba(255, 255, 255, 0.14);
    color: var(--accent-fg);
    border-color: rgba(255, 255, 255, 0.35);
}
.page-head .btn-secondary:hover,
.page-head .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.26);
    color: var(--accent-fg);
    border-color: rgba(255, 255, 255, 0.55);
}
.page-head .btn-destructive {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-fg);
    border-color: rgba(255, 255, 255, 0.4);
}
.page-head .btn-destructive:hover {
    background: var(--st-blocked-fg);
    color: #fff;
    border-color: var(--st-blocked-fg);
}
html[data-theme="studio"] .page-head .btn-secondary,
html[data-theme="studio"] .page-head .btn-ghost,
html[data-theme="studio"] .page-head .btn-destructive {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

@keyframes page-head-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes page-head-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes page-head-shimmer {
    0% {
        background-position: -120% 0;
    }
    100% {
        background-position: 220% 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-head,
    .page-head::before {
        animation: none;
    }
}
.page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ============ BUTTONS ============ */
.btn {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    letter-spacing: -0.005em;
    border-radius: var(--radius);
    white-space: nowrap;
}
.btn svg {
    width: 13px;
    height: 13px;
}
.btn-primary {
    background: var(--accent);
    color: var(--accent-fg);
}
.btn-primary:hover {
    background: var(--accent-hover);
}
.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-secondary:hover {
    background: var(--surface-2);
    border-color: var(--text-muted);
}
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--text);
}
.btn-destructive {
    background: transparent;
    color: var(--st-blocked-fg);
    border-color: var(--st-blocked-bg);
}
.btn-destructive:hover {
    background: var(--st-blocked-bg);
}
.btn-sm {
    padding: 5px 10px;
    font-size: 13px;
}
.btn-lg {
    padding: 11px 20px;
    font-size: 15.5px;
}

/* ============ FORMS ============ */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.field-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
}
.field-hint {
    font-size: 12.5px;
    color: var(--text-muted);
}
.field-error {
    font-size: 12.5px;
    color: var(--st-blocked-fg);
    display: flex;
    align-items: center;
    gap: 4px;
}
.input,
.select,
.textarea {
    font-size: 14.5px;
    padding: 9px 11px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius);
    outline: none;
    transition: all 0.18s;
    width: 100%;
}
.input::placeholder,
.textarea::placeholder {
    color: var(--text-dim);
}
.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.input.error {
    border-color: var(--st-blocked-fg);
}
.input.error:focus {
    box-shadow: 0 0 0 3px var(--st-blocked-bg);
}
.textarea {
    min-height: 80px;
    resize: vertical;
}

.checkbox-row,
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}
.checkbox {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
}
.checkbox.checked {
    background: var(--accent);
    border-color: var(--accent);
}
.checkbox.checked::after {
    content: "";
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--accent-fg);
    border-bottom: 2px solid var(--accent-fg);
    transform: rotate(-45deg) translate(1px, -1px);
}
.toggle {
    width: 32px;
    height: 18px;
    background: var(--border-strong);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle.on {
    background: var(--accent);
}
.toggle::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}
.toggle.on::after {
    transform: translateX(14px);
}

/* ============ STATUS BADGES ============ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: -0.005em;
    white-space: nowrap;
    text-transform: capitalize; /* status values come in lowercase ("active", "in progress") — show First-Letter form everywhere. */
}
.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}
.badge.no-dot::before {
    display: none;
}
.st-backlog {
    background: var(--st-backlog-bg);
    color: var(--st-backlog-fg);
}
.st-todo {
    background: var(--st-todo-bg);
    color: var(--st-todo-fg);
}
.st-progress {
    background: var(--st-progress-bg);
    color: var(--st-progress-fg);
}
.st-review {
    background: var(--st-review-bg);
    color: var(--st-review-fg);
}
.st-approved {
    background: var(--st-approved-bg);
    color: var(--st-approved-fg);
}
.st-blocked {
    background: var(--st-blocked-bg);
    color: var(--st-blocked-fg);
}
.st-reopened {
    background: var(--st-reopened-bg);
    color: var(--st-reopened-fg);
}
.st-done {
    background: var(--st-done-bg);
    color: var(--st-done-fg);
}

/* ============================================================================
   CANONICAL STATUS PALETTE — one colour per status, across the whole app.
   Every existing status-pill class (.q-status, .lv-status, .ex-status,
   .aq-status, .cl-status, .ea-recent .badge, .badge) maps to the same family.
   Add a new pill class to the comma-list to inherit the palette.
   ──────────────────────────────────────────────────────────────────────────
   AMBER  → waiting / not-yet-acted-on   (pending, prospect, open, requested)
   GREEN  → success / live               (active, approved, resolved, done, paid, completed)
   RED    → bad outcome                  (rejected, at_risk, blocked, failed)
   BLUE   → in-flight / paused           (in_progress, on_hold, review, progress)
   GREY   → ended / inert                (cancelled, archived, closed)
   ========================================================================= */
.q-status.pending,    .lv-status.pending,    .ex-status.pending,
.aq-status.pending,   .cl-status.pending,    .badge.pending,
.q-status.prospect,   .lv-status.prospect,   .ex-status.prospect,
.aq-status.prospect,  .cl-status.prospect,   .badge.prospect,
.q-status.open,       .lv-status.open,       .ex-status.open,
.aq-status.open,      .cl-status.open,       .badge.open,
.q-status.requested,  .badge.requested {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #b45309 !important;
}
.q-status.active,     .lv-status.active,     .ex-status.active,
.aq-status.active,    .cl-status.active,     .badge.active,
.q-status.approved,   .lv-status.approved,   .ex-status.approved,
.aq-status.approved,  .cl-status.approved,   .badge.approved,
.q-status.resolved,   .lv-status.resolved,   .ex-status.resolved,
.aq-status.resolved,  .cl-status.resolved,   .badge.resolved,
.q-status.done,       .lv-status.done,       .ex-status.done,
.aq-status.done,      .cl-status.done,       .badge.done,
.q-status.paid,       .lv-status.paid,       .ex-status.paid,
.aq-status.paid,      .cl-status.paid,       .badge.paid,
.q-status.completed,  .lv-status.completed,  .ex-status.completed,
.aq-status.completed, .cl-status.completed,  .badge.completed {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #15803d !important;
}
.q-status.rejected,   .lv-status.rejected,   .ex-status.rejected,
.aq-status.rejected,  .cl-status.rejected,   .badge.rejected,
.q-status.at_risk,    .lv-status.at_risk,    .ex-status.at_risk,
.aq-status.at_risk,   .cl-status.at_risk,    .badge.at_risk,
.q-status.blocked,    .lv-status.blocked,    .ex-status.blocked,
.aq-status.blocked,   .cl-status.blocked,    .badge.blocked,
.q-status.failed,     .badge.failed {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #b91c1c !important;
}
.q-status.in_progress,  .lv-status.in_progress,  .ex-status.in_progress,
.aq-status.in_progress, .cl-status.in_progress,  .badge.in_progress,
.q-status.on_hold,      .lv-status.on_hold,      .ex-status.on_hold,
.aq-status.on_hold,     .cl-status.on_hold,      .badge.on_hold,
.q-status.review,       .lv-status.review,       .ex-status.review,
.aq-status.review,      .cl-status.review,       .badge.review,
.q-status.progress,     .lv-status.progress,     .ex-status.progress,
.aq-status.progress,    .cl-status.progress,     .badge.progress {
    background: rgba(59, 130, 246, 0.14) !important;
    color: #1d4ed8 !important;
}
.q-status.cancelled,  .lv-status.cancelled,  .ex-status.cancelled,
.aq-status.cancelled, .cl-status.cancelled,  .badge.cancelled,
.q-status.archived,   .lv-status.archived,   .ex-status.archived,
.aq-status.archived,  .cl-status.archived,   .badge.archived,
.q-status.closed,     .lv-status.closed,     .ex-status.closed,
.aq-status.closed,    .cl-status.closed,     .badge.closed {
    background: rgba(100, 116, 139, 0.14) !important;
    color: #475569 !important;
}

/* ============ PRIORITY ============ */
.priority {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
}
.priority-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 11px;
}
.priority-bars span {
    width: 3px;
    background: var(--border-strong);
    border-radius: 1px;
}
.priority-bars span:nth-child(1) {
    height: 4px;
}
.priority-bars span:nth-child(2) {
    height: 7px;
}
.priority-bars span:nth-child(3) {
    height: 11px;
}
.pri-low .priority-bars span:nth-child(1) {
    background: var(--pri-low);
}
.pri-med .priority-bars span:nth-child(1),
.pri-med .priority-bars span:nth-child(2) {
    background: var(--pri-med);
}
.pri-high .priority-bars span {
    background: var(--pri-high);
}
.pri-urg .priority-bars span {
    background: var(--pri-urg);
}
.pri-urg {
    color: var(--pri-urg);
}
.pri-high {
    color: var(--pri-high);
}
.pri-med {
    color: var(--pri-med);
}
.pri-low {
    color: var(--pri-low);
}

/* ============ TAGS ============ */
.tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    border-radius: var(--radius);
}

/* ============ AVATARS ============ */
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15.5px;
    font-weight: 600;
    border: 2px solid var(--surface);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.avatar > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 13px;
}
.avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 18px;
}
.avatar-group {
    display: inline-flex;
}
.avatar-group .avatar + .avatar {
    margin-left: -12px;
}
.av-1 {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}
.av-2 {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
}
.av-3 {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
}
.av-4 {
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: #fff;
}
.av-5 {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
}
.av-6 {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
}
.av-7 {
    background: linear-gradient(135deg, #06b6d4, #0e7490);
    color: #fff;
}
.av-more {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--surface);
}

/* ============ TABLES ============ */
.table-wrap {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
}
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data thead,
.panel > .table-wrap > table > thead,
.panel > table > thead,
.table-wrap > table > thead {
    /* --table-header-bg is set by the appearance picker (mirrors the
       sidebar color) so the chrome stays consistent. The fallback is
       the original purple gradient. */
    background: var(--table-header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    border-bottom: 1px solid var(--border);
}
.data thead tr,
.data thead th,
.panel > .table-wrap > table > thead tr,
.panel > .table-wrap > table > thead th,
.panel > table > thead tr,
.panel > table > thead th,
.table-wrap > table > thead tr,
.table-wrap > table > thead th {
    background: transparent;
}
/* Make column headings inside any panel/table-wrap legible on the gradient.
   The text color is dynamic so a white/light sidebar selection doesn't make
   the headings invisible — the head script sets --table-header-fg to match
   the sidebar's chosen text mode. */
.panel > .table-wrap > table > thead th,
.panel > table > thead th,
.table-wrap > table > thead th {
    color: var(--table-header-fg, #ffffff) !important;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.data th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--table-header-fg, #ffffff);
    font-weight: 600;
    padding: 12px 16px;
    white-space: nowrap;
}
.panel > .table-wrap > table.data thead th:first-child,
.panel .table-wrap table.data thead th:first-child,
.table-wrap table.data thead th:first-child {
    border-top-left-radius: var(--radius-md);
}
.panel > .table-wrap > table.data thead th:last-child,
.panel .table-wrap table.data thead th:last-child,
.table-wrap table.data thead th:last-child {
    border-top-right-radius: var(--radius-md);
}
.data td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.data tr:last-child td {
    border-bottom: 0;
}
.data tr:hover td {
    background: var(--surface-2);
    cursor: pointer;
}
.data .id {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-muted);
}
.data .title {
    font-weight: 500;
    color: var(--text);
}
.data .sub {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============ CARDS ============ */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
}
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
    gap: 12px;
}
.panel-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.005em;
}
html[data-theme="studio"] .panel-title {
    font-weight: 600;
}
.panel-sub {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ============ KPI TILES ============ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    /* Surface-coloured background fills the gap between tiles, so the
       coloured tiles always sit on a clean white (light theme) /
       dark-card (dark theme) divider regardless of the page background. */
    background: var(--surface);
    padding: 6px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.kpi {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    width: 5px;
    background: var(--accent);
}
.kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Rotating accent palette so each card gets a distinct color.
   Uses the existing semantic status tokens so it stays themed.
   Solid pale tint (no fade) so the gap between cards stays a clean line. */
/* .kpi-grid > .kpi:nth-child(6n + 1) { background: var(--st-todo-bg); } */
.kpi-grid > .kpi:nth-child(6n + 1)::before {
    background: var(--st-todo-fg);
}

/* .kpi-grid > .kpi:nth-child(6n + 2) { background: var(--st-progress-bg); } */
.kpi-grid > .kpi:nth-child(6n + 2)::before {
    background: var(--st-progress-fg);
}

/* .kpi-grid > .kpi:nth-child(6n + 3) { background: var(--st-review-bg); } */
.kpi-grid > .kpi:nth-child(6n + 3)::before {
    background: var(--st-review-fg);
}

/* .kpi-grid > .kpi:nth-child(6n + 4) { background: var(--st-blocked-bg); } */
.kpi-grid > .kpi:nth-child(6n + 4)::before {
    background: var(--st-blocked-fg);
}

/* .kpi-grid > .kpi:nth-child(6n + 5) { background: var(--st-approved-bg); } */
.kpi-grid > .kpi:nth-child(6n + 5)::before {
    background: var(--st-approved-fg);
}

/* .kpi-grid > .kpi:nth-child(6n + 6) { background: var(--accent-soft); } */
.kpi-grid > .kpi:nth-child(6n + 6)::before {
    background: var(--accent);
}
.kpi-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.kpi-value {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
html[data-theme="studio"] .kpi-value {
    font-weight: 600;
}
.kpi-trend {
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}
.kpi-trend.up {
    color: var(--st-approved-fg);
}
.kpi-trend.down {
    color: var(--st-blocked-fg);
}
.kpi-spark {
    height: 28px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    margin-top: 6px;
}
.kpi-spark span {
    flex: 1;
    background: var(--accent);
    opacity: 0.7;
    min-height: 2px;
}

/* ============ CHARTS ============ */
.chart {
    height: 200px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.chart::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px);
    background-size: 100% 25%;
    pointer-events: none;
}
.chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}
.chart-bar > span {
    display: block;
}
.bar-done {
    background: var(--accent);
}
.bar-progress {
    background: var(--accent);
    opacity: 0.5;
}
.bar-blocked {
    background: var(--st-blocked-fg);
    opacity: 0.7;
}
.chart-labels {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.chart-labels > span {
    flex: 1;
    text-align: center;
}

/* ============ KANBAN ============ */
.kanban {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    overflow-x: auto;
}
@media (max-width: 1080px) {
    .kanban {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .kanban {
        grid-template-columns: 1fr;
    }
}
.kb-col {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    min-height: 280px;
}
.kb-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}
.kb-col-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
}
.kb-col-name .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.kb-col-count {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    background: var(--surface);
    padding: 1px 7px;
    border-radius: 999px;
}
.kb-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 8px;
    cursor: grab;
    transition: all 0.18s;
}
.kb-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.kb-card:active {
    cursor: grabbing;
}
.kb-card-id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.kb-card-title {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 10px;
}
.kb-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.kb-card-meta-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.kb-deadline {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
}
.kb-card.dragging {
    opacity: 0.5;
    border-style: dashed;
}
.kb-drop-zone {
    border: 1.5px dashed var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius);
    height: 60px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ============ MODAL / SHEET ============ */
.modal-backdrop {
    position: relative;
    background: var(--overlay);
    padding: 40px;
    border-radius: var(--radius-md);
}
.modal {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    max-width: 480px;
    margin: 0 auto;
    padding: 24px;
    box-shadow: var(--shadow-lg);
}
.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}
.modal-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
html[data-theme="studio"] .modal-title {
    font-weight: 600;
}

/* ============ TOAST ============ */
.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-size: 13.5px;
}
.toast.success {
    border-left-color: var(--st-approved-fg);
}
.toast.warn {
    border-left-color: var(--st-progress-fg);
}
.toast.danger {
    border-left-color: var(--st-blocked-fg);
}
.toast-body {
    flex: 1;
}
.toast-title {
    font-weight: 600;
    margin-bottom: 2px;
}
.toast-msg {
    color: var(--text-muted);
    line-height: 1.45;
}
.toast-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}

/* ============ EMPTY STATE ============ */
.empty {
    text-align: center;
    padding: 48px 24px;
}
.empty-icon {
    width: 48px;
    height: 48px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.empty h4 {
    font-size: 15px;
    margin-bottom: 6px;
}
.empty p {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 320px;
    margin: 0 auto 16px;
    line-height: 1.5;
}

/* ============ BREADCRUMB IN MOCKUP ============ */
.bc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12.5px;
}
.bc a {
    color: var(--text-muted);
    text-decoration: none;
}
.bc a:hover {
    color: var(--text);
}
.bc strong {
    color: var(--accent);
    font-weight: 500;
}
.bc .sep {
    color: var(--text-dim);
}

/* ============ FOOTER NAV BETWEEN FLOWS ============ */
.wf-foot-nav {
    max-width: 1480px;
    margin: 60px auto 0;
    padding: 40px 32px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    border-top: 1px solid var(--border);
}
.wf-foot-nav a {
    display: block;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    transition: all 0.18s;
}
.wf-foot-nav a:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.wf-foot-nav .label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.wf-foot-nav .name {
    font-size: 16px;
    font-weight: 500;
}
.wf-foot-nav a.next {
    text-align: right;
}

/* ============ AUTH-SPECIFIC LAYOUT ============ */
.auth-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg);
}
@media (max-width: 800px) {
    .auth-wrap {
        grid-template-columns: 1fr;
    }
    .auth-side {
        display: none;
    }
}
.auth-side {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.auth-side > *:last-child {
    position: absolute;
    bottom: 48px;
    left: 48px;
    right: 48px;
    text-align: center;
}
.auth-side > div {
    text-align: center;
}
.auth-logo {
    display: block;
    width: 140px;
    max-width: 60%;
    height: auto;
    margin: 0 auto 24px;
}
.auth-lede {
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto;
}
.sb-brand {
    justify-content: center;
}
.sb-brand-logo {
    display: block;
    max-width: 140px;
    height: auto;
}
.auth-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.auth-side > * {
    position: relative;
}
.auth-headline {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 24px 0 16px;
}
html[data-theme="obsidian"] .auth-headline em {
    font-style: italic;
    color: var(--accent);
    font-weight: 600;
}
html[data-theme="studio"] .auth-headline em {
    font-style: normal;
    color: var(--accent);
    font-weight: 700;
}
html[data-theme="obsidian"] .auth-headline {
    font-weight: 600;
}
html[data-theme="studio"] .auth-headline {
    font-weight: 600;
}
.auth-form-wrap {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.auth-form {
    max-width: 360px;
    width: 100%;
}
.auth-form h2 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
html[data-theme="studio"] .auth-form h2 {
    font-weight: 600;
}
.auth-form p.lede {
    color: var(--text-muted);
    font-size: 14.5px;
    margin: 0 0 28px;
    line-height: 1.5;
}
.auth-form .field {
    margin-bottom: 16px;
}
.auth-form .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 11px;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-foot {
    margin-top: 28px;
    font-size: 13.5px;
    color: var(--text-muted);
    text-align: center;
}
.auth-foot a {
    color: var(--accent);
    text-decoration: none;
}
.auth-foot a:hover {
    text-decoration: underline;
}

/* ============ LOGIN-PAGE CONTACT-ADMIN MODAL ============ */
/* Opens from "Contact your admin" on /login. Uses the global
   .modal-overlay / .modal-card primitives; overrides below tune the
   card width and add a close button row + a 2-column header. */
.lq-modal-card {
    max-width: 560px;
    width: 100%;
    padding: 24px 26px 22px;
}
.lq-modal-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 2px;
}
.lq-modal-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600;
    letter-spacing: -0.01em;
}
.lq-close {
    background: transparent; border: 0; padding: 6px;
    color: var(--text-muted); cursor: pointer; border-radius: var(--radius);
    line-height: 0;
}
.lq-close:hover { color: var(--text); background: var(--surface-2); }
.lq-modal-sub {
    font-size: 13.5px; color: var(--text-muted);
    line-height: 1.5; margin: 4px 0 16px;
}
.lq-modal-card .field { margin-bottom: 12px; }
.lq-modal-card .field:last-of-type { margin-bottom: 16px; }
.lq-modal-card textarea.input { resize: vertical; min-height: 96px; }
.lq-modal-card .modal-actions { margin-top: 18px; }

.lq-row-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 12px;
}
.lq-row-2 .field { margin-bottom: 0; }
@media (max-width: 560px) {
    .lq-row-2 { grid-template-columns: 1fr; }
}

.lq-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(34,197,94,0.12);
    color: #15803d;
    font-size: 13.5px;
    line-height: 1.45;
    border: 1px solid rgba(34,197,94,0.3);
}
html[data-theme="obsidian"] .lq-flash { color: #4ade80; }
.lq-error {
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 6px;
    background: var(--st-blocked-bg);
    color: var(--st-blocked-fg);
    font-size: 13.5px;
    border: 1px solid var(--st-blocked-fg);
}
.lq-fielderr {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--st-blocked-fg);
}

/* ============ TIMELINE / ACTIVITY ============ */
.activity {
    display: flex;
    flex-direction: column;
}
.activity-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.activity-row:last-child {
    border-bottom: 0;
}
.activity-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 2px;
}
.activity-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.activity-msg {
    font-size: 14px;
}
.activity-msg strong {
    font-weight: 600;
}
.activity-meta {
    font-size: 12.5px;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ============ TIMER WIDGET ============ */
.timer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.timer-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
}
.timer-time {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
}
.timer-label {
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ============ TASK DETAIL SPECIFIC ============ */
.td-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
@media (max-width: 1080px) {
    .td-grid {
        grid-template-columns: 1fr;
    }
}
.td-main {
    padding: 28px;
    border-right: 1px solid var(--border);
}
@media (max-width: 1080px) {
    .td-main {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
}
.td-side {
    padding: 24px;
    background: var(--surface-2);
}
.td-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 8px 0 14px;
}
html[data-theme="studio"] .td-title {
    font-weight: 600;
}
.td-section-head {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 24px 0 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.td-section-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.td-meta-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.td-meta-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.td-meta-value {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============ CHAT BUBBLES (TASK COMMENTS) ============ */
.comment {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.comment-body {
    flex: 1;
    min-width: 0;
}
.comment-meta {
    font-size: 13px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.comment-meta strong {
    font-weight: 600;
}
.comment-time {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
}
.comment-text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-muted);
}
.comment-text strong {
    color: var(--text);
    font-weight: 500;
}

/* ============ HELPERS ============ */
.row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.gap-2 {
    gap: 8px;
}
.gap-3 {
    gap: 12px;
}
.gap-4 {
    gap: 16px;
}
.flex-col {
    display: flex;
    flex-direction: column;
}
.center {
    text-align: center;
}
.divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}
.list-clean {
    list-style: none;
    padding: 0;
    margin: 0;
}
hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 800px) {
    .wf-toolbar-inner {
        padding: 12px 16px;
    }
    .wf-hero {
        padding: 40px 16px 30px;
    }
    .wf-section {
        padding: 40px 16px;
    }
    .app-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .sidebar {
        display: none;
    }
    .app-content {
        padding: 18px;
    }
    .topbar {
        padding: 0 16px;
    }
    .search-box {
        display: none;
    }
    .wf-brand-sub {
        display: none;
    }
}

/* ============================================================ */
/* SHARED ADMIN-SHELL COMPONENTS                                */
/* Notification popover · user menu · logout modal              */
/* Used across every authenticated admin screen.                */
/* ============================================================ */

/* --- Notification bell wrapper + popover --- */
.tn-wrap {
    position: relative;
}
.tn-bell {
    position: relative;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}
.tn-bell:hover {
    color: var(--text);
    border-color: var(--border-strong);
}
.tn-bell svg {
    width: 14px;
    height: 14px;
}
.tn-bell .tn-pip {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--st-blocked-fg);
    box-shadow: 0 0 0 2px var(--surface);
}

.tn-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    display: none;
    overflow: hidden;
}
.tn-wrap.tn-open .tn-popover {
    display: block;
}

.tn-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tn-head .t {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
html[data-theme="studio"] .tn-head .t {
    font-weight: 600;
}
.tn-head .mark {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.tn-head .mark:hover {
    color: var(--accent);
}

.tn-tabs {
    display: flex;
    padding: 0 8px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.tn-tab {
    background: transparent;
    border: 0;
    padding: 10px 12px;
    font-size: 13.5px;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-body);
}
.tn-tab.tn-on {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.tn-tab .ct {
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--surface-2);
    color: var(--text-muted);
    padding: 1px 6px;
    border-radius: 999px;
}
.tn-tab.tn-on .ct {
    background: var(--accent-soft);
    color: var(--accent);
}

.tn-list {
    max-height: 380px;
    overflow-y: auto;
}
.tn-list[data-tab-pane] {
    display: none;
}
.tn-list[data-tab-pane].tn-pane-on {
    display: block;
}

.tn-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s;
}
.tn-item:last-child {
    border-bottom: 0;
}
.tn-item:hover {
    background: var(--surface-2);
}
.tn-item.tn-unread {
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
}
.tn-item.tn-unread:hover {
    background: var(--accent-soft);
}

.tn-item .ic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--surface-2);
    color: var(--text-muted);
}
.tn-item .ic svg {
    width: 13px;
    height: 13px;
}
.tn-item .ic.acc {
    background: var(--accent-soft);
    color: var(--accent);
}
.tn-item .ic.warn {
    background: var(--st-progress-bg);
    color: var(--st-progress-fg);
}
.tn-item .ic.danger {
    background: var(--st-blocked-bg);
    color: var(--st-blocked-fg);
}
.tn-item .ic.success {
    background: var(--st-approved-bg);
    color: var(--st-approved-fg);
}

.tn-item .body {
    flex: 1;
    min-width: 0;
}
.tn-item .body .msg {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text);
}
.tn-item .body .msg strong {
    font-weight: 500;
}
.tn-item .body .time {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.04em;
}
.tn-item .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 8px;
    visibility: hidden;
}
.tn-item.tn-unread .dot {
    visibility: visible;
}

.tn-foot {
    padding: 10px 16px;
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.tn-foot a {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}
.tn-foot a:hover {
    color: var(--accent-hover);
}

/* --- User menu pill + popover --- */
.um-wrap {
    position: relative;
}

.um-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--text);
    transition: all 0.15s;
}
.um-button:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.um-button .nm {
    font-size: 13.5px;
    font-weight: 500;
}
.um-button .ch {
    width: 12px;
    height: 12px;
    opacity: 0.5;
    transition: transform 0.15s;
}
.um-wrap.um-open .um-button .ch {
    transform: rotate(180deg);
    opacity: 1;
}

.um-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    display: none;
    overflow: hidden;
}
.um-wrap.um-open .um-popover {
    display: block;
}

.um-head {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Wrapper around the role badge between the head and the menu list.
   Only rendered when the role label has content, and uses a tight
   padding so it doesn't leave a tall empty gap. */
.um-role-wrap {
    padding: 8px 16px 6px;
}
.um-head .body {
    min-width: 0;
}
.um-head .nm {
    font-size: 14px;
    font-weight: 500;
}
.um-head .em {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.um-head .role-tag {
    margin-top: 6px;
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--st-blocked-bg);
    color: var(--st-blocked-fg);
}

.um-list {
    padding: 4px 0 6px;
}
.um-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    text-decoration: none;
}
.um-item:hover {
    background: var(--surface-2);
}
.um-item svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}
.um-item .kbd {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 3px;
}
.um-item.danger {
    color: var(--st-blocked-fg);
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 11px;
}
.um-item.danger:hover {
    background: var(--st-blocked-bg);
}
.um-item.danger svg {
    opacity: 1;
}

/* --- Modal (used for logout confirmation) --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.modal-overlay.modal-open {
    display: flex;
}

.modal-card {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-width: 460px;
    width: 100%;
    padding: 24px;
}
.modal-card .modal-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--st-blocked-bg);
    color: var(--st-blocked-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.modal-card .modal-icon svg {
    width: 20px;
    height: 20px;
}
.modal-card h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
html[data-theme="studio"] .modal-card h2 {
    font-weight: 600;
}
.modal-card p {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 8px;
}
.modal-card .modal-callout {
    background: var(--surface-2);
    border-left: 3px solid var(--st-progress-fg);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 14px 0 20px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.modal-card .modal-callout svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--st-progress-fg);
}
.modal-card .modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ============================================================ */
/* RESPONSIVE — TABLET / MOBILE                                 */
/* ============================================================ */

/* Sidebar toggle burger — visible on every breakpoint.
   On desktop, collapses the sidebar to zero width via body.sidebar-collapsed
   below; on mobile it drives the slide-in drawer (body.sidebar-open). */
.mobile-nav-btn {
    display: inline-flex;
    width: 36px;
    height: 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.mobile-nav-btn svg {
    width: 16px;
    height: 16px;
}
.mobile-nav-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
}

/* Desktop "collapse the sidebar" state — sidebar shrinks to an icon rail.
   We narrow the grid track and squash every label / badge / user-info text
   so only the SVG icon (and the brand mark) remain visible. The text nodes
   inside .sb-link are direct children of the <a> with no wrapper span, so
   `font-size: 0` is the cheapest way to make them disappear; the SVG keeps
   an explicit pixel size and stays visible. */
body.sidebar-collapsed .app-shell {
    grid-template-columns: 64px 1fr;
}
body.sidebar-collapsed .sidebar {
    padding: var(--space-5) var(--space-2);
    gap: var(--space-1);
    align-items: center;
    overflow: hidden;
}
body.sidebar-collapsed .sb-brand {
    padding: 0 0 var(--space-4);
    margin-bottom: var(--space-3);
    justify-content: center;
    width: 100%;
}
body.sidebar-collapsed .sb-brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
body.sidebar-collapsed .sb-section {
    display: none;
}
body.sidebar-collapsed .sb-link {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
    /* !important needed to beat the global "force everything to 14px" reset.
       Setting size to 0 collapses the bare text node + .badge-count so only
       the SVG (which has its own explicit width/height) stays visible. */
    font-size: 0 !important;
    border-radius: var(--radius);
    flex-shrink: 0;
}
body.sidebar-collapsed .sb-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
body.sidebar-collapsed .sb-link .badge-count {
    display: none;
}
body.sidebar-collapsed .sb-user {
    padding: var(--space-3) 0;
    justify-content: center;
    gap: 0;
}
body.sidebar-collapsed .sb-user-info {
    display: none;
}

/* Sidebar drawer backdrop */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 89;
    display: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
body.sidebar-open .sidebar-backdrop {
    display: block;
}

/* Tablet (≤1080px) */
@media (max-width: 1080px) {
    .app-shell {
        grid-template-columns: 200px 1fr;
    }
    .app-content {
        padding: 22px 22px;
    }
    .search-box {
        width: 200px;
    }
    .topbar {
        padding: 0 16px;
    }
    .data th,
    .data td {
        padding: 10px 12px;
    }
}

/* Phone (≤800px) */
@media (max-width: 800px) {
    .app-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .app-content {
        padding: 16px;
    }
    .topbar {
        padding: 0 12px;
        gap: 10px;
    }
    .search-box {
        display: none;
    }
    .um-button .nm {
        display: none;
    }

    /* Sidebar becomes a slide-in drawer */
    .sidebar {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 80vw;
        z-index: 90;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
    }
    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .page-head {
        gap: 10px;
        margin-bottom: 16px;
        padding: 10px 14px;
        align-items: flex-start;
    }
    .page-title {
        font-size: 18px;
    }
    .page-actions {
        width: 100%;
    }
    .page-actions .btn {
        flex: 1;
        justify-content: center;
    }

    /* KPI grid → 2 columns */
    .kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
    .kpi {
        padding: 12px 14px;
    }
    .kpi-value {
        font-size: 20px !important;
    }

    /* Tables — let parent scroll horizontally; .table-wrap should already do this */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data th,
    .data td {
        padding: 10px 12px;
        white-space: nowrap;
    }

    /* Notification popover sticks to viewport on phones */
    .tn-popover {
        width: calc(100vw - 24px);
        right: -8px;
        max-width: 360px;
    }
    .um-popover {
        width: calc(100vw - 24px);
        right: -8px;
        max-width: 320px;
    }

    /* Modal sheets fill the screen */
    .modal-card {
        max-width: 100%;
        padding: 18px;
    }
    .modal-actions {
        flex-direction: column-reverse;
    }
    .modal-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Forms in modals — collapse 2-col grids */
    .modal-card form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Floating theme/back pill — shrink */
    .pt-back {
        bottom: 12px;
        left: 12px;
        padding: 6px 10px;
        font-size: 11px;
    }
    .pt-theme-pill.floating {
        bottom: 12px;
        right: 12px;
    }
}

/* Small phones (≤480px) */
@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    .page-title {
        font-size: 17px;
    }
    .um-button .ch {
        display: none;
    }
}

/* ============================================================
   RESPONSIVE LAYER — phone (≤640) / tablet (641–1024) / desktop.
   Adds the bits that weren't already covered above:
     1. Page-level 2-column inline grids (1fr/320px, 320px/1fr,
        280px/1fr) collapse to single column on tablet.
     2. Filter cards stack on phone (each control 100% width).
     3. Topbar buttons text hides on phone (already at 900px;
        kept here for the smaller phone refinements).
   These rules don't change desktop layout.
   ============================================================ */

/* Tablet: collapse page-level 2-col inline grids without needing
   to touch every blade file. Targets the inline `style="..."`
   patterns used by task-detail, employee-detail, settings, etc. */
@media (max-width: 1024px) {
    .app-content [style*="grid-template-columns: 1fr 320px"],
    .app-content [style*="grid-template-columns: 320px 1fr"],
    .app-content [style*="grid-template-columns: 280px 1fr"],
    .app-content [style*="grid-template-columns: 1fr 280px"] {
        grid-template-columns: 1fr !important;
    }
}

/* Phone: filter card → vertical stack so each control is full width
   instead of squashed inline. Apply button also fills the row. */
@media (max-width: 640px) {
    .al-toolbar,
    .att-filter-bar,
    .sh-toolbar,
    .mt-toolbar,
    .dept-toolbar,
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .al-toolbar > *,
    .att-filter-bar > *,
    .sh-toolbar > *,
    .mt-toolbar > *,
    .dept-toolbar > *,
    .toolbar > * {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100%;
    }
    /* Search box loses its capped width and fills the column. */
    .al-toolbar .search,
    .att-filter-bar .search,
    .sh-toolbar .search,
    .mt-toolbar .search,
    .dept-toolbar .search,
    .toolbar .search {
        max-width: none !important;
    }
    /* Apply button fills full width, sits at the bottom of the stack. */
    .al-toolbar button[type="submit"],
    .att-filter-bar button[type="submit"],
    .sh-toolbar button[type="submit"],
    .mt-toolbar button[type="submit"],
    .dept-toolbar button[type="submit"],
    .toolbar button[type="submit"] {
        justify-content: center;
    }
}

/* Tablet: lighten the gap on filter cards so they read tighter when
   the row is medium-width. */
@media (max-width: 900px) and (min-width: 641px) {
    .al-toolbar,
    .att-filter-bar,
    .sh-toolbar,
    .mt-toolbar,
    .dept-toolbar,
    .toolbar {
        padding: 10px 12px;
    }
}

/* Phone: shrink kanban card text slightly so the 1-col stack reads
   tighter (kb-grid already collapses to a single column at ≤600px
   via per-page rules in kanban-board.blade.php). */
@media (max-width: 640px) {
    .kb-card {
        font-size: 13.5px;
    }
}

/* ============ RICH FORMS (project / task creation) ============ */
.form-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    align-items: start;
}
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 1080px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}

.id-display {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 8px 12px;
    gap: 10px;
}
.id-display .pid {
    font-family: var(--font-mono);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.06em;
    background: transparent;
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0;
}
.id-display .auto {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    padding: 2px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.priority-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.priority-options label {
    flex: 1 1 90px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 10px;
    font-size: 13.5px;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}
.priority-options label:hover {
    border-color: var(--text-muted);
}
.priority-options input {
    display: none;
}
.priority-options input:checked + label,
.priority-options label.on {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.status-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.status-options label {
    flex: 1 1 140px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transition: all 0.15s;
}
.status-options label:hover {
    border-color: var(--text-muted);
}
.status-options input {
    display: none;
}
.status-options label .radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
}
.status-options input:checked + label,
.status-options label.on {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.status-options input:checked + label .radio,
.status-options label.on .radio {
    border-color: var(--accent);
}
.status-options input:checked + label .radio::after,
.status-options label.on .radio::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
}
.status-options label .body .t {
    font-size: 14px;
    font-weight: 500;
}
.status-options label .body .s {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px 4px 4px;
    font-size: 13px;
}
.picker-chip .x {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    cursor: pointer;
}
.picker-chip .x:hover {
    opacity: 1;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}
.tag-chip .x {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    cursor: pointer;
}
.tag-chip .x:hover {
    opacity: 1;
}

.chip-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.info-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.info-row:last-child {
    border-bottom: 0;
}
.info-row .ix {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 1px;
}
.info-row .body .t {
    font-size: 13.5px;
    font-weight: 500;
}
.info-row .body .s {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.template-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--surface-2);
    cursor: pointer;
    margin-bottom: 6px;
    transition: all 0.15s;
}
.template-card:hover {
    border-color: var(--text-muted);
}
.template-card.on {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.template-card .t {
    font-size: 13.5px;
    font-weight: 500;
}
.template-card .s {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.45;
}

.form-action-bar {
    position: sticky;
    bottom: 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px -28px -24px;
    gap: 12px;
    flex-wrap: wrap;
}
.form-action-bar .meta {
    font-size: 13px;
    color: var(--text-muted);
}
.form-action-bar .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============ TYPE & SPACING SCALE ============
   Project-wide rhythm. Maps the shared chrome components (sidebar, topbar,
   page-head, panel, kpi, table, kanban card, button, input) onto the type +
   spacing tokens defined in :root so every page picks up the same sizes and
   gaps. Edit a token at the top — every page updates. */
body {
    font-size: var(--text-md);
    line-height: var(--leading-base);
}

/* ---------- Sidebar ---------- */
.sidebar {
    padding: var(--space-6) var(--space-4);
    gap: var(--space-1);
}
.sb-brand {
    padding: 0 var(--space-3) var(--space-5);
    margin-bottom: var(--space-4);
    gap: var(--space-3);
}
.sb-brand-name {
    font-size: var(--text-lg);
}
.sb-section {
    font-size: var(--text-2xs);
    padding: var(--space-4) var(--space-3) var(--space-2);
}
.sb-link {
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-3);
}
.sb-link .badge-count {
    font-size: var(--text-2xs);
    padding: 1px var(--space-2);
}
.sb-user {
    padding: var(--space-3);
    gap: var(--space-3);
}
.sb-user-name {
    font-size: var(--text-sm);
}
.sb-user-role {
    font-size: var(--text-xs);
}

/* ---------- Pill tab strip ----------
   Segmented control used wherever a page or panel switches between
   sibling views (Leave management top tabs, Leave approvals status
   sub-tabs, Attendance Records/Monthly, notification All/Critical).
   Single source so the active pill, hover state, and density stay
   consistent across the whole app.
   Markup:
     <div class="pill-tabs">
       <a class="pill-tab is-active" href="…">
         <svg class="pill-icon">…</svg>
         <span>Label</span>
         <span class="pill-count">3</span>   {{-- optional --}}
       </a>
     </div>
*/
.pill-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    margin-bottom: 0;
}
.pill-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.pill-tab:hover {
    color: var(--text);
    background: var(--surface-2);
}
.pill-tab.is-active,
.pill-tab[aria-selected="true"] {
    background: var(--accent);
    color: var(--accent-fg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.pill-tab.is-active:hover,
.pill-tab[aria-selected="true"]:hover {
    background: var(--accent-hover, var(--accent));
    color: var(--accent-fg);
}
.pill-tab .pill-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.pill-tab .pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 6px;
    height: 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.pill-tab.is-active .pill-count,
.pill-tab[aria-selected="true"] .pill-count {
    background: rgba(255, 255, 255, 0.25);
}
.pill-tab .pill-count.is-alert {
    background: #ef4444;
    color: #fff;
}
.pill-tab.is-active .pill-count.is-alert {
    background: #fff;
    color: #b91c1c;
}

/* ---------- Topbar ---------- */
.topbar {
    font-size: var(--text-base);
    height: 60px;
    padding: 0 var(--space-7);
    gap: var(--space-4);
}
.topbar .crumbs {
    gap: var(--space-2);
    font-size: var(--text-sm);
}
.topbar .crumbs strong {
    font-size: var(--text-md);
}
.topbar-actions {
    gap: var(--space-2);
}
.search-box {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
}

/* ---------- Page head ---------- */
.app-content {
    padding: var(--space-7) var(--space-8);
}
.page-head {
    padding: var(--space-3) var(--space-5);
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}
.page-head .left {
    gap: var(--space-1);
}
.page-title {
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
}
.page-eyebrow {
    font-size: var(--text-2xs);
}
.page-actions {
    gap: var(--space-2);
}

/* ---------- Panel ---------- */
.panel {
    padding: var(--space-5);
}
.panel-head {
    margin-bottom: var(--space-4);
    gap: var(--space-3);
}
.panel-title {
    font-size: var(--text-md);
}
.panel-sub {
    font-size: var(--text-xs);
}

/* ---------- KPI tiles / stats ---------- */
.kpi-label {
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
}
.kpi-value {
    font-size: var(--text-2xl);
}

/* ---------- Forms ---------- */
.field-label {
    font-size: var(--text-sm);
}
.field-hint {
    font-size: var(--text-xs);
}
.input,
.select,
.textarea {
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-3);
}

/* ---------- Tables ---------- */
table.data {
    font-size: var(--text-base);
}
table.data th {
    font-size: var(--text-xs);
}
.data td {
    padding: var(--space-3) var(--space-4);
}

/* ---------- Buttons / badges ---------- */
.btn {
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
}
.btn-sm {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
}
.btn-lg {
    font-size: var(--text-md);
    padding: var(--space-3) var(--space-5);
}
.badge {
    font-size: var(--text-xs);
}

/* ---------- Misc ---------- */
.muted,
.text-muted {
    font-size: var(--text-sm);
}

/* Kanban cards (compact card chrome — keeps the same density as Zepteck cards) */
.kb-card .title {
    font-size: var(--text-base);
}
.kb-card .meta {
    font-size: var(--text-sm);
}
.kb-col-head .name {
    font-size: 14px;
}