/* Beacon — Clean & Minimal */

/* --- Design tokens --- */
:root {
    --beacon-critical: #dc2626;
    --beacon-high: #ea580c;
    --beacon-medium: #ca8a04;
    --beacon-low: #16a34a;
    --beacon-overdue: #dc2626;
    --beacon-accent: #3b82f6;
    --beacon-subtle: #f8fafc;
    --beacon-border: #e2e8f0;
    --beacon-text-secondary: #64748b;
    --beacon-radius: 6px;
    --beacon-section-gap: 1.5rem;
}

[data-theme="dark"] {
    --beacon-subtle: #1e293b;
    --beacon-border: #334155;
    --beacon-text-secondary: #94a3b8;
}

/* --- Palette system --- */
/* Each palette sets accent, workspace bar, subtle bg, and border for both themes */

.palette-ocean {
    --beacon-accent: #3b82f6;
    --beacon-workspace-bar: #3b82f6;
}
[data-theme="dark"] .palette-ocean {
    --beacon-subtle: #172032;
    --beacon-border: #1e3a5f;
}

.palette-forest {
    --beacon-accent: #10b981;
    --beacon-workspace-bar: #10b981;
}
[data-theme="dark"] .palette-forest {
    --beacon-subtle: #0f2920;
    --beacon-border: #1a4034;
}

.palette-sunset {
    --beacon-accent: #f59e0b;
    --beacon-workspace-bar: #f59e0b;
}
[data-theme="dark"] .palette-sunset {
    --beacon-subtle: #2d1f0e;
    --beacon-border: #4a3520;
}

.palette-lavender {
    --beacon-accent: #8b5cf6;
    --beacon-workspace-bar: #8b5cf6;
}
[data-theme="dark"] .palette-lavender {
    --beacon-subtle: #1e1b2e;
    --beacon-border: #352f54;
}

.palette-rose {
    --beacon-accent: #f43f5e;
    --beacon-workspace-bar: #f43f5e;
}
[data-theme="dark"] .palette-rose {
    --beacon-subtle: #2e1a1e;
    --beacon-border: #4a2a32;
}

.palette-slate {
    --beacon-accent: #64748b;
    --beacon-workspace-bar: #64748b;
}
[data-theme="dark"] .palette-slate {
    --beacon-subtle: #1e2128;
    --beacon-border: #2d3340;
}

/* Light mode palette overrides */
.palette-forest { --beacon-subtle: #f0fdf4; --beacon-border: #bbf7d0; }
.palette-sunset { --beacon-subtle: #fffbeb; --beacon-border: #fde68a; }
.palette-lavender { --beacon-subtle: #f5f3ff; --beacon-border: #ddd6fe; }
.palette-rose { --beacon-subtle: #fff1f2; --beacon-border: #fecdd3; }
.palette-slate { --beacon-subtle: #f8fafc; --beacon-border: #e2e8f0; }
.palette-ocean { --beacon-subtle: #eff6ff; --beacon-border: #bfdbfe; }

/* Dark mode re-applies over light defaults (dark specificity wins) */

/* Palette swatch for selection UI */
.palette-swatch {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.4em;
    border: 2px solid var(--beacon-border);
}

/* --- Workspace bar — thin sticky strip above content --- */
.workspace-bar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--pico-background-color);
    border-bottom: 1px solid var(--beacon-border);
    padding: 0.25rem 1rem;
    display: flex;
    align-items: center;
}
.workspace-bar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    margin: 0;
    border-radius: var(--beacon-radius);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--beacon-text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: background 0.15s;
}
.workspace-bar-toggle:hover {
    background: var(--beacon-subtle);
    color: var(--beacon-text);
}
.workspace-bar-toggle svg {
    opacity: 0.5;
}
.workspace-bar-toggle:hover svg {
    opacity: 1;
}
.workspace-bar-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--beacon-text);
    margin-right: auto;
    display: flex;
    align-items: center;
    min-width: 0;
}
.workspace-bar-title:empty {
    display: none;
}
.workspace-bar-title:empty + .workspace-bar-hint {
    margin-left: auto;
}
/* Breadcrumb lifted into the workspace bar: drop the block layout and
   bottom margin the standalone version uses, scale the text up to
   match bar prominence, and let the last segment be the page title. */
.workspace-bar-title .breadcrumb {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--beacon-text);
    min-width: 0;
}
.workspace-bar-title .breadcrumb a {
    color: var(--beacon-text-secondary);
    font-weight: 500;
}
.workspace-bar-hint {
    color: var(--beacon-text-secondary);
    font-size: 0.72rem;
    margin-right: 0.6rem;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.workspace-bar-hint:hover {
    color: var(--beacon-text, var(--pico-color));
}
.workspace-bar-hint kbd {
    padding: 0.05rem 0.35rem;
    background: var(--beacon-subtle, var(--pico-secondary-background));
    border: 1px solid var(--beacon-border);
    border-radius: 3px;
    font-size: 0.7rem;
    color: var(--beacon-text, var(--pico-color));
    font-weight: 600;
}
@media (max-width: 700px) {
    .workspace-bar-hint { display: none; }
}
.workspace-bar-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--beacon-workspace-bar, var(--beacon-accent));
}

/* --- Base overrides --- */
/* Paint the html element itself with the theme background so the
   browser has something to show during cross-page navigation before
   body styles apply. An inline <head> script also sets this so we
   don't rely on the stylesheet being parsed. */
html {
    background: var(--pico-background-color);
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body {
    font-size: 15px;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.25rem; }
h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
hgroup { margin-bottom: var(--beacon-section-gap); }
hgroup p { color: var(--beacon-text-secondary); font-size: 0.9rem; margin: 0; }

/* =========================================================================
   Navigation — desktop top bar + mobile slide-out drawer
   -------------------------------------------------------------------------
   Structure:
     <div id="beacon-nav-root"> (Alpine scope)
       <div class="nav-backdrop">              (mobile only, when drawer open)
       <nav class="beacon-nav">                (the actual bar / drawer)
         <div class="nav-brand-row">           (brand + hamburger stacked row)
           <a class="brand">Beacon</a>
           <button class="nav-hamburger">      (mobile only)
         </div>
         <ul class="nav-links">                (primary + more + utilities)
   ========================================================================= */

.beacon-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pico-background-color);
    border-bottom: 1px solid var(--beacon-border);
    border-top: 3px solid var(--beacon-workspace-bar, var(--beacon-accent));
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: box-shadow 0.15s ease;
}
/* Subtle shadow when scrolled so the sticky nav has depth without
   a hard border artifact. */
.beacon-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 4px;
    background: linear-gradient(180deg, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.beacon-nav:has(~ main:not(:first-child))::after { opacity: 1; }

.nav-brand-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.beacon-nav .brand {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    padding: 0.4rem 0.5rem 0.4rem 0;
    color: var(--beacon-accent);
    opacity: 1;
}
.beacon-nav .brand:hover {
    background: transparent;
    opacity: 0.8;
}

/* --- Inline create button (replaces floating FAB) --- */
.nav-create-wrap {
    position: relative;
    margin-left: auto;
}
.nav-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--beacon-radius);
    border: 1px solid var(--beacon-border);
    background: transparent;
    color: var(--beacon-text-secondary);
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: background 0.15s, color 0.15s;
}
.nav-create-btn:hover {
    background: var(--beacon-subtle);
    color: var(--beacon-text);
}
.nav-create-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--pico-background-color);
    border: 1px solid var(--beacon-border);
    border-radius: var(--beacon-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 200;
    padding: 0.25rem 0;
}
nav .nav-create-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.75rem;
    margin: 0;
    background: none;
    border: none;
    color: var(--beacon-text);
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
nav .nav-create-menu button:hover {
    background: var(--beacon-subtle);
}

.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.nav-links li {
    margin: 0;
    padding: 0;
}

.nav-links li a {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    border-radius: var(--beacon-radius);
    color: var(--pico-color);
    opacity: 0.72;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
    position: relative;
}

.nav-links li a:hover {
    opacity: 1;
    background: var(--beacon-subtle);
    text-decoration: none;
}

/* Active page indicator — server-side .nav-active class */
.nav-links li a.nav-active {
    opacity: 1;
    color: var(--beacon-accent);
    background: var(--beacon-subtle);
    font-weight: 600;
}
.nav-links li a.nav-active::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -0.15rem;
    height: 2px;
    background: var(--beacon-accent);
    border-radius: 2px;
}

/* Hamburger button — mobile only */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--pico-color);
    padding: 0.4rem 0.6rem;
    width: auto;
    line-height: 1;
    border-radius: var(--beacon-radius);
    transition: background 0.15s;
}
.nav-hamburger:hover { background: var(--beacon-subtle); }

/* "More" dropdown for secondary items — desktop only */
.nav-more-wrap {
    position: relative;
}
.nav-more-wrap > a.nav-more-open {
    background: var(--beacon-subtle);
    opacity: 1;
}
.nav-more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--pico-background-color);
    border: 1px solid var(--beacon-border);
    border-radius: var(--beacon-radius);
    box-shadow: 0 12px 36px rgba(0,0,0,0.3);
    padding: 0.35rem 0;
    margin: 0.35rem 0 0;
    list-style: none;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nav-more-menu li { margin: 0; }
.nav-more-menu li a {
    display: block;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    opacity: 0.85;
    white-space: nowrap;
    border-radius: 0;
}
.nav-more-menu li a:hover {
    background: var(--beacon-subtle);
    opacity: 1;
}
.nav-more-menu li a.nav-active {
    opacity: 1;
    color: var(--beacon-accent);
    font-weight: 600;
    background: var(--beacon-subtle);
}

/* Separator: push utilities to the right edge on desktop */
.nav-utility:first-of-type {
    margin-left: auto;
}
.nav-utility a {
    font-size: 0.8rem;
    opacity: 0.6;
}
.nav-utility a:hover { opacity: 1; }

.beacon-nav #theme-toggle {
    font-size: 0.75rem;
    padding: 0.3em 0.65em;
    border-radius: var(--beacon-radius);
}

/* Theme toggle at the bottom of the nav list: show the icon of the
   mode the click will switch TO (moon in light mode, sun in dark).
   Centered horizontally so the icon+label group sits in the middle
   of the nav column rather than hugging the left edge like the other
   utility items. */
[data-theme="light"] .nav-theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .nav-theme-toggle .theme-icon-moon { display: none; }
.beacon-nav .nav-theme-toggle a { justify-content: center; }

/* Backdrop shown while the mobile drawer is open */
.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 99;
}

/* --- Cards / articles --- */
article {
    border: 1px solid var(--beacon-border);
    border-radius: var(--beacon-radius);
    box-shadow: none;
    margin-bottom: var(--beacon-section-gap);
}
article > header {
    border-bottom: 1px solid var(--beacon-border);
    padding: 0.75rem 1rem;
    background: var(--beacon-subtle);
}
article > header strong {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--beacon-text-secondary);
}
article > footer {
    border-top: 1px solid var(--beacon-border);
    padding: 0.5rem 1rem;
    background: var(--beacon-subtle);
}

/* --- Priority badges --- */
.priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    padding: 0.15em 0.45em;
    border-radius: var(--beacon-radius);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.priority-1 { background: var(--beacon-critical); }
.priority-2 { background: var(--beacon-high); }
.priority-3 { background: var(--beacon-medium); }
.priority-4 { background: var(--beacon-low); }

/* --- Status badges --- */
.status-badge {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: var(--beacon-radius);
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}
.status-todo { background: #f1f5f9; color: #475569; }
.status-in_progress { background: #eff6ff; color: #2563eb; }
.status-waiting { background: #fffbeb; color: #b45309; }
.status-done { background: #f0fdf4; color: #15803d; }
.status-cancelled { background: #f8fafc; color: #94a3b8; text-decoration: line-through; }
.status-archived { background: #f8fafc; color: #94a3b8; font-style: italic; }
.status-active { background: #f0fdf4; color: #15803d; }
.status-paused { background: #fffbeb; color: #b45309; }
.status-completed { background: #eff6ff; color: #2563eb; }

[data-theme="dark"] .status-todo { background: #1e293b; color: #cbd5e1; }
[data-theme="dark"] .status-in_progress { background: #172554; color: #93c5fd; }
[data-theme="dark"] .status-waiting { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .status-done { background: #052e16; color: #86efac; }
[data-theme="dark"] .status-cancelled { background: #0f172a; color: #64748b; }
[data-theme="dark"] .status-archived { background: #0f172a; color: #64748b; }
[data-theme="dark"] .status-active { background: #052e16; color: #86efac; }
[data-theme="dark"] .status-paused { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .status-completed { background: #172554; color: #93c5fd; }

/* --- Overdue --- */
.overdue { color: var(--beacon-overdue); font-weight: 600; }

/* --- Tags --- */
.tag {
    display: inline-block;
    padding: 0.1em 0.45em;
    border-radius: var(--beacon-radius);
    font-size: 0.68rem;
    font-weight: 400;
    background: var(--beacon-subtle);
    border: 1px solid var(--beacon-border);
    color: var(--beacon-text-secondary);
    margin-right: 0.2em;
    opacity: 0.85;
}

/* --- Dashboard hero grid: briefing left, stats right on desktop --- */
.dashboard-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--beacon-section-gap);
    align-items: stretch;
    margin-bottom: var(--beacon-section-gap);
    min-width: 0;
}
.dashboard-hero-grid > * {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.dashboard-hero-grid > * > article { flex: 1; }

/* Needs-your-reply card: stretch to the stats column's height and
   distribute rows so they fill the available vertical space instead
   of hugging the top with dead space below. */
.needs-reply-card {
    display: flex;
    flex-direction: column;
}
.needs-reply-body {
    flex: 1;
}
.needs-reply-newchat {
    display: block;
    width: calc(100% - 2rem);
    margin: 0.5rem 1rem 0.75rem;
    padding: 0.45rem 0.75rem;
    background: transparent;
    border: 1px dashed var(--beacon-border, rgba(255, 255, 255, 0.15));
    border-radius: var(--pico-border-radius, 0.375rem);
    color: var(--beacon-text-secondary);
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.needs-reply-newchat:hover {
    background: rgba(212, 135, 74, 0.08);
    border-color: var(--ba-accent, #d4874a);
    color: var(--ba-accent, #d4874a);
}

.dashboard-briefing-row {
    margin-bottom: var(--beacon-section-gap);
}

@media (min-width: 1100px) {
    .dashboard-hero-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
}

/* --- Task detail top grid --- */
.task-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--beacon-section-gap);
    align-items: start;
    margin-bottom: var(--beacon-section-gap);
}
.task-top-grid > * { min-width: 0; }
.task-top-grid p,
.task-top-grid li,
.task-top-grid dd { overflow-wrap: anywhere; }

/* Compact card — reduced padding for sidebar-style cards */
.compact-card {
    padding: 0.6rem 0.85rem;
    margin-bottom: 0;
    font-size: 0.8rem;
    line-height: 1.45;
}
.compact-card > header {
    padding: 0.4rem 0.85rem;
    margin: -0.6rem -0.85rem 0.5rem;
    font-size: 0.8rem;
}
.compact-card p, .compact-card div { margin-bottom: 0.25rem; }
.compact-card p:last-child, .compact-card div:last-child { margin-bottom: 0; }

/* Intake pending card — responsive header that wraps on narrow screens.
   The action button row is a primary victim on mobile: four buttons laid
   out inline with no wrap cause horizontal overflow and unreadable text. */
.intake-card {
    margin-bottom: 0.75rem;
}
.intake-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.intake-card-header > div:first-child {
    flex: 1 1 14rem;
    min-width: 0;
}
.intake-card-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}
button.intake-chevron {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--beacon-text, inherit) !important;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 3px;
    transition: background 0.15s;
}
button.intake-chevron:hover {
    background: rgba(0,0,0,0.06) !important;
}
.intake-chevron:focus,
.intake-chevron:focus-visible {
    outline: none;
    box-shadow: none;
}
.intake-chevron:focus-visible {
    outline: 2px solid var(--pico-primary, #4a6cf7);
    outline-offset: 1px;
}
.intake-chevron .chevron-glyph {
    display: inline-block;
    font-size: 0.7rem;
    line-height: 1;
}
@media (max-width: 640px) {
    .intake-card-header { gap: 0.5rem; }
    .intake-card-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .intake-card-actions button {
        flex: 1 1 auto;
        min-width: 3.5rem;
    }
    .intake-card pre {
        font-size: 0.78rem;
        overflow-x: auto;
        word-break: break-word;
    }
}

/* Compact note list in sidebar.
   Pico resets most <ul> styling but its base <li> can still render a
   ::marker under some themes, so we null it explicitly. */
.compact-notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.compact-notes-list li {
    position: relative;
    padding: 0.45rem 0.5rem 0.45rem 0.65rem;
    margin: 0 -0.5rem;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.35;
    transition: background-color 120ms ease, transform 120ms ease;
}
.compact-notes-list li::marker { content: ""; }
.compact-notes-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 2px;
    border-radius: 2px;
    background: var(--beacon-accent);
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity 140ms ease, transform 140ms ease;
}
.compact-notes-list li:hover {
    background: color-mix(in srgb, var(--beacon-accent) 8%, transparent);
}
.compact-notes-list li:hover::before {
    opacity: 1;
    transform: scaleY(1);
}
.compact-notes-list .note-title {
    font-weight: 500;
    font-size: 0.78rem;
    color: var(--beacon-text, var(--pico-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compact-notes-list .note-meta {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--beacon-text-secondary);
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}

/* Right sidebar spacing */
.right-sidebar { display: flex; flex-direction: column; gap: var(--beacon-section-gap); }

/* Compact inline search input for people/org chips */
input.compact-search {
    width: 80px;
    margin: 0;
    padding: 0.2rem 0.4rem;
    font-size: 0.72rem;
    height: auto;
    line-height: 1.3;
    border-radius: 4px;
}

/* Note modal — sits inside Pico's <dialog> backdrop and is the actual card.
   Structure: <dialog class="note-modal"><article class="note-modal-card">…</article></dialog>

   Pico's default dialog is a flex container with align-items/justify-content
   center. That fights `resize: both` on the article: any horizontal width
   change is recentered by the flex algorithm and the resize handle drifts
   away from the cursor (vertical happens to feel OK, horizontal is unusable).
   Override Pico to make the dialog a passive full-viewport box and anchor
   the card with fixed positioning so the bottom-right resize handle works
   freely on both axes. */
.note-modal {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    overflow: hidden;
}
.note-modal::backdrop {
    background: rgba(8, 12, 20, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.note-modal[open] .note-modal-card {
    animation: note-modal-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes note-modal-in {
    /* The final transform MUST match the resting translate(-50%, -50%)
       on .note-modal-card — with `both` fill mode the `to` value sticks
       after the animation and would otherwise override centering. */
    from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)) scale(0.985); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
.note-modal-card {
    /* Permanently centered via transform. Resize is driven by a custom
       JS grip (see .note-modal-grip and taskDetailLive.startGripDrag);
       the grip grows width/height symmetrically so the card stays
       centered throughout the drag without any recenter kludge. */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1040px, 92vw);
    min-width: 420px;
    max-width: 96vw;
    max-height: 90vh;
    margin: 0;
    padding: 1.5rem 1.65rem 1.35rem;
    border-radius: calc(var(--beacon-radius) + 4px);
    border: 1px solid var(--beacon-border);
    background: var(--pico-card-background-color, var(--pico-background-color));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03) inset,
        0 24px 48px -16px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.25);
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.note-modal-grip {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 22px;
    height: 22px;
    cursor: nwse-resize;
    touch-action: none;
    background-image:
        linear-gradient(135deg, transparent 0 45%, var(--beacon-text-secondary) 45% 55%, transparent 55% 100%),
        linear-gradient(135deg, transparent 0 65%, var(--beacon-text-secondary) 65% 75%, transparent 75% 100%);
    background-size: 100% 100%, 100% 100%;
    background-position: 3px 3px, 3px 3px;
    background-repeat: no-repeat;
    opacity: 0.45;
    transition: opacity 120ms ease;
    border-bottom-right-radius: calc(var(--beacon-radius) + 4px);
}
.note-modal-grip:hover,
.note-modal-card.resizing .note-modal-grip {
    opacity: 0.85;
}
.note-modal-card.resizing {
    user-select: none;
}
/* Edit/create wrapper inside the article — must be a flex column itself so
   the textarea (flex: 1 1 auto) can actually grow when the user resizes the
   card taller. Without this, the wrapper is plain block and the textarea
   stays at its min-height while empty space accumulates above the buttons. */
.note-modal-edit-body,
.note-modal-view-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.note-modal-view-body .rendered-md {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}
.note-modal-card > header.note-modal-header,
.note-modal-card > footer.note-modal-actions {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}
.note-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.15rem !important;
    padding-bottom: 0.85rem !important;
    border-bottom: 1px solid var(--beacon-border) !important;
}
.note-modal-title {
    font-size: 1.02rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--pico-color);
}
.note-modal-close {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.note-modal-textarea {
    display: block;
    width: 100%;
    /* min-height: 0 so the textarea can flex-shrink when the user
       resizes the card smaller; otherwise the footer (Save/Cancel)
       gets pushed past the card's overflow edge. The rows="10" attr
       in the template supplies a reasonable initial height. */
    min-height: 0;
    flex: 1 1 auto;
    font-size: 0.95rem;
    line-height: 1.55;
    font-family: var(--pico-font-family);
    resize: none;
    padding: 0.85rem 1rem;
    margin: 0;
    border-radius: var(--beacon-radius);
    border: 1px solid var(--beacon-border);
    background: var(--beacon-subtle);
    color: var(--pico-color);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.note-modal-textarea:focus {
    outline: none;
    border-color: var(--beacon-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--beacon-accent) 22%, transparent);
}
.note-modal-textarea::placeholder {
    color: var(--beacon-text-secondary);
    opacity: 0.85;
}
.note-modal-meta {
    display: block;
    margin-top: 0.9rem;
    color: var(--beacon-text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}
.note-modal-card .rendered-md {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--pico-color);
}
.note-modal-card .rendered-md > :first-child { margin-top: 0; }
.note-modal-card .rendered-md > :last-child { margin-bottom: 0; }
.note-modal-actions {
    display: flex !important;
    gap: 0.6rem;
    margin-top: 1.15rem !important;
    padding-top: 0 !important;
    border-top: none !important;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.note-modal-actions button {
    width: auto;
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    margin: 0;
    border-radius: var(--beacon-radius);
}
.note-modal-actions button:first-child {
    order: 2;
}
.note-modal-actions button:last-child {
    order: 1;
}

/* Current State card — replaces the old top-of-column Context Summary.
   Sits below the Checklist and is always visible, showing placeholder
   copy when there is nothing for the AI to summarize yet. */
.current-state-card { }
.current-state-body { padding: 0 1rem; }
.current-state-body .rendered-md > :first-child { margin-top: 0; }
.current-state-body .rendered-md > :last-child { margin-bottom: 0; }
.current-state-empty {
    padding: 0.75rem 1rem 0.85rem;
}
.current-state-placeholder {
    margin: 0;
    color: var(--beacon-text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}
.current-state-placeholder strong {
    color: var(--pico-color);
}
[x-cloak] { display: none !important; }

/* --- Chat app layout (conversations page) --- */
main.chat-page {
    padding: 0 !important;
    max-width: none !important;
    margin: 0;
}
.chat-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 48px);
    overflow: hidden;
}
.chat-sidebar {
    border-right: 1px solid var(--beacon-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pico-background-color);
}
.chat-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--beacon-border);
    flex-shrink: 0;
}
.chat-sidebar-header strong { font-size: 1rem; }
.chat-sidebar-close { display: none; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--pico-color); padding: 0; width: auto; margin: 0; }
.chat-sidebar-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--beacon-border);
    padding: 0.4rem 0.5rem;
    flex-shrink: 0;
}
.chat-sidebar-tabs a {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--beacon-radius);
    white-space: nowrap;
    text-decoration: none;
    color: var(--beacon-text-secondary);
}
.chat-sidebar-tabs a.active {
    background: var(--beacon-accent);
    color: #fff;
}
.chat-sidebar-tabs a:hover:not(.active) {
    background: var(--beacon-subtle);
}
.chat-sidebar-list {
    flex: 1;
    overflow-y: auto;
}
.chat-sidebar-item {
    display: block;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--beacon-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.1s;
}
.chat-sidebar-item:hover {
    background: var(--beacon-subtle);
}
.chat-sidebar-item-active {
    background: var(--beacon-subtle);
    border-left: 3px solid var(--beacon-accent);
    padding-left: calc(0.75rem - 3px);
}
.chat-sidebar-item-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.chat-sidebar-item-title {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pico-color);
    min-width: 0;
}
.chat-sidebar-item-time {
    font-size: 0.68rem;
    color: var(--beacon-text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}
.chat-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--beacon-accent);
    flex-shrink: 0;
}
.chat-sidebar-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-top: 1px solid var(--beacon-border);
    font-size: 0.75rem;
    flex-shrink: 0;
}
.chat-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pico-background-color);
}
.chat-main-header {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--beacon-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.chat-reply-bar {
    border-top: 1px solid var(--beacon-border);
    padding: 0.6rem 1rem;
    flex-shrink: 0;
}
.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--beacon-text-secondary);
    padding: 2rem;
    text-align: center;
}
.chat-sidebar-toggle { display: none; }

/* Mobile chat layout */
@media (max-width: 900px) {
    .chat-layout { grid-template-columns: 1fr; }
    .chat-sidebar {
        display: none;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 300px;
        z-index: 90;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    }
    .chat-sidebar-open { display: flex !important; }
    .chat-sidebar-close { display: block; }
    .chat-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.3);
        z-index: 89;
    }
    .chat-sidebar-toggle { display: inline-flex !important; }
}

/* --- Dashboard stat cards --- */
.stat-card {
    text-align: center;
    padding: 1.25rem 1rem;
    margin: 0;
}
.stat-card .number {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--pico-color);
}
/* Semantic stat card colors — numbers light up when there's data */
.stat-card .number.overdue { color: var(--beacon-critical); }
.stat-card .number.due-today { color: #d97706; }
[data-theme="dark"] .stat-card .number.due-today { color: #fbbf24; }
.stat-card .number.in-flight { color: #2563eb; }
[data-theme="dark"] .stat-card .number.in-flight { color: #60a5fa; }
.stat-card .label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--beacon-text-secondary);
    margin-top: 0.35rem;
}

/* --- Task rows --- */
.task-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--beacon-border);
    transition: background 0.1s;
}
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: var(--beacon-subtle); border-radius: var(--beacon-radius); }
.clickable-row { cursor: pointer; }

/* Keyboard focus indicators (WCAG 2.4.7). Uses :focus-visible so mouse
   clicks don't show the ring but keyboard tab navigation does. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.stat-card-link:focus-visible,
.nav-links a:focus-visible,
.clickable-row:focus-visible,
.triage-card:focus-visible,
.calendar-task:focus-visible {
    outline: 2px solid var(--beacon-accent) !important;
    outline-offset: 2px;
    border-radius: var(--beacon-radius);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--beacon-accent) !important;
    outline-offset: 1px;
}

/* Dense two-line task rows: title + meta on top, snippet/stakeholders/timeago below. */
.task-row-dense { align-items: flex-start; padding: 0.7rem 0; }
.task-row-dense .task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.task-row-dense .task-body-top { display: flex; gap: 0.6rem; align-items: center; min-width: 0; }
.task-row-dense .task-body-top .task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row-dense .task-body-sub {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.72rem;
    color: var(--beacon-text-secondary);
    flex-wrap: wrap;
    line-height: 1.3;
}
.task-row-dense .task-snippet {
    color: var(--beacon-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.task-row-dense .task-updated { margin-left: auto; opacity: 0.65; font-size: 0.7rem; }
.chip-sm { padding: 0.08em 0.45em; font-size: 0.7rem; }
.chip-more { opacity: 0.7; }

.task-row .task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row .task-title a {
    text-decoration: none;
    font-weight: 600;
    color: var(--pico-color);
}
.task-row .task-title a:hover { color: var(--beacon-accent); }
.task-row .task-meta {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--beacon-text-secondary);
    flex-shrink: 0;
}

/* --- Buttons --- */
button, [role="button"] {
    border-radius: var(--beacon-radius);
    font-size: 0.85rem;
    font-weight: 500;
    transition: filter 0.15s, opacity 0.15s;
}
button:hover, [role="button"]:hover {
    filter: brightness(1.1);
    opacity: 0.9;
}
button.outline:hover, [role="button"].outline:hover {
    background: var(--beacon-subtle);
}

/* Ghost/tertiary buttons — text-only, no background, for minor actions */
button.ghost, [role="button"].ghost {
    background: transparent;
    border: 0;
    color: var(--beacon-text-secondary);
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    opacity: 0.7;
}
button.ghost:hover, [role="button"].ghost:hover {
    opacity: 1;
    color: var(--beacon-accent);
    background: transparent;
    filter: none;
}

/* --- Clickable cards --- */
article[onclick], article[style*="cursor:pointer"] {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
article[onclick]:hover, article[style*="cursor:pointer"]:hover {
    border-color: var(--beacon-accent);
    box-shadow: 0 0 0 1px var(--beacon-accent);
}

/* --- Stat card links --- */
.stat-card-link {
    text-decoration: none;
    color: inherit;
}
.stat-card-link .stat-card {
    transition: border-color 0.15s;
}
.stat-card-link:hover .stat-card {
    border-color: var(--beacon-accent);
}

.stat-card-completed {
    background: linear-gradient(135deg, var(--beacon-subtle), transparent);
    border-left: 3px solid #16a34a;
}
.stat-card-completed .number {
    color: #16a34a;
}
[data-theme="dark"] .stat-card-completed .number {
    color: #4ade80;
}
.stat-card-completed .stat-split {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}
.stat-card-completed .stat-split > div { flex: 1; }

/* --- Calendar week view --- */
.calendar-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.calendar-toolbar a[role="button"] { margin: 0; }
.calendar-overdue {
    border-left: 3px solid var(--beacon-critical, #e11d48);
    margin-bottom: 1rem;
}
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.calendar-day {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    border: 1px solid var(--beacon-border);
    border-radius: var(--beacon-radius);
    background: var(--pico-background-color);
    overflow: hidden;
}
.calendar-day.is-weekend { background: var(--beacon-subtle); }
.calendar-day.is-today {
    border-color: var(--beacon-accent);
    box-shadow: 0 0 0 1px var(--beacon-accent);
}
.calendar-day > header {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--beacon-border);
    background: var(--beacon-subtle);
    margin: 0;
}
.calendar-day-head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.calendar-dow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--beacon-text-secondary);
    font-weight: 600;
}
.calendar-dom {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pico-color);
}
.calendar-today-pill {
    margin-left: auto;
    background: var(--beacon-accent);
    color: white;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    font-weight: 700;
}
.calendar-day-body {
    padding: 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}
.calendar-task {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    background: var(--beacon-subtle);
    text-decoration: none;
    color: var(--pico-color);
    font-size: 0.78rem;
    border-left: 3px solid var(--beacon-border);
    transition: background 0.1s, border-color 0.1s;
}
.calendar-task:hover { background: var(--pico-background-color); border-left-color: var(--beacon-accent); }
.calendar-task.priority-1 { border-left-color: #dc2626; }
.calendar-task.priority-2 { border-left-color: #ea580c; }
.calendar-task.priority-3 { border-left-color: #d97706; }
.calendar-task.priority-4 { border-left-color: #16a34a; }
.calendar-task.priority-5 { border-left-color: #6b7280; }
.calendar-task.status-done { opacity: 0.55; text-decoration: line-through; }
.calendar-task.status-cancelled { opacity: 0.4; text-decoration: line-through; }
.calendar-task-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-task .priority-badge {
    font-size: 0.6rem;
    padding: 0.1em 0.35em;
}
.calendar-empty {
    color: var(--beacon-text-secondary);
    opacity: 0.3;
    text-align: center;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

@media (max-width: 900px) {
    .calendar-week {
        grid-template-columns: 1fr;
    }
    .calendar-day { min-height: 0; }
    .calendar-day-body { min-height: 40px; }
}

/* --- Priority triage board --- */
.triage-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 1rem;
}
.triage-column {
    background: var(--pico-background-color);
    border: 1px solid var(--beacon-border);
    border-top: 3px solid var(--beacon-border);
    border-radius: var(--beacon-radius);
    display: flex;
    flex-direction: column;
    min-height: 300px;
    transition: background 0.1s, border-color 0.1s;
}
.triage-column.priority-1 { border-top-color: #dc2626; }
.triage-column.priority-2 { border-top-color: #ea580c; }
.triage-column.priority-3 { border-top-color: #d97706; }
.triage-column.priority-4 { border-top-color: #16a34a; }
.triage-column.priority-5 { border-top-color: #6b7280; }
.triage-column.drag-over {
    background: var(--beacon-subtle);
    box-shadow: 0 0 0 2px var(--beacon-accent);
}
.triage-col-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--beacon-border);
    background: var(--beacon-subtle);
}
.triage-col-title {
    font-weight: 600;
    font-size: 0.85rem;
    flex: 1;
}
.triage-col-count {
    color: var(--beacon-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--pico-background-color);
    padding: 0.1em 0.5em;
    border-radius: 999px;
}
.triage-col-body {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.triage-card {
    background: var(--beacon-subtle);
    border: 1px solid var(--beacon-border);
    border-radius: var(--beacon-radius);
    padding: 0.5rem 0.6rem;
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.1s, transform 0.05s, opacity 0.15s;
}
.triage-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.triage-card:active { cursor: grabbing; }
.triage-card.dragging { opacity: 0.4; transform: scale(0.98); }
.triage-card-title {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    line-height: 1.25;
}
.triage-card-meta {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.7rem;
    color: var(--beacon-text-secondary);
    flex-wrap: wrap;
}
.triage-card-link {
    margin-left: auto;
    text-decoration: none;
    color: var(--beacon-text-secondary);
    padding: 0 0.3rem;
}
.triage-card-link:hover { color: var(--beacon-accent); }
.triage-empty {
    text-align: center;
    color: var(--beacon-text-secondary);
    opacity: 0.4;
    font-size: 0.8rem;
    padding: 1rem 0;
}

@media (max-width: 900px) {
    .triage-board { grid-template-columns: 1fr; }
    .triage-column { min-height: 0; }
}

/* --- Dashboard conversation rows --- */
.conversation-row {
    transition: background 0.1s;
}
.conversation-row:hover {
    background: var(--beacon-subtle);
    border-radius: var(--beacon-radius);
}

/* --- Inline task actions --- */
.inline-action {
    padding: 0.15em 0.4em !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    width: auto !important;
    border: 1px solid var(--beacon-border) !important;
    background: transparent !important;
    color: var(--beacon-text-secondary) !important;
    border-radius: var(--beacon-radius) !important;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.inline-action:hover {
    opacity: 1 !important;
    color: var(--beacon-accent) !important;
    border-color: var(--beacon-accent) !important;
}

/* --- Section spacing --- */
section, .section-gap {
    margin-bottom: var(--beacon-section-gap);
}
hr {
    border: none;
    border-top: 1px solid var(--beacon-border);
    margin: var(--beacon-section-gap) 0;
}

/* --- Checklist --- */
.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--beacon-border);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item input[type="checkbox"] { cursor: pointer; }
.checklist-text { flex: 1; min-width: 0; }
.checklist-handle {
    cursor: grab;
    opacity: 0.3;
    font-size: 0.85rem;
    padding: 0.1em 0.25em;
    user-select: none;
}
.checklist-handle:hover { opacity: 0.7; }
.checklist-item:active .checklist-handle { cursor: grabbing; }
.checklist-action {
    padding: 0.25em 0.5em !important;
    font-size: 0.85rem !important;
    border: none !important;
    opacity: 0.4;
    line-height: 1;
    width: auto !important;
}
.checklist-action:hover { opacity: 1 !important; }

/* --- Note content in lists --- */
.note-content {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}

/* --- Markdown inside articles --- */
article ul, article ol {
    margin: 0.5rem 0 1rem;
    padding-left: 1.5rem;
    list-style: revert;
}
article ul { list-style-type: disc; }
article ol { list-style-type: decimal; }
article li {
    margin-bottom: 0.25rem;
    display: list-item;
}
article p:last-child {
    margin-bottom: 0;
}
article p + p {
    margin-top: 0.75rem;
}

/* --- Note cards --- */
.note-card {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--beacon-border);
}
.note-card:last-child { border-bottom: none; }
.note-card .note-header:hover strong {
    color: var(--beacon-accent);
}

/* --- Notes textarea --- */
.notes-textarea {
    min-height: 6rem;
    max-height: 24rem;
    resize: vertical;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --- Form button row --- */
.form-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.form-actions button,
.form-actions [role="button"],
.form-actions a[role="button"] {
    width: auto !important;
}

/* --- Chat inputs --- */
.chat-input {
    font-size: 0.85rem !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 !important;
    border: 1px solid var(--beacon-border) !important;
    border-radius: var(--beacon-radius) !important;
    background: var(--pico-background-color) !important;
}
.chat-input:focus {
    border-color: var(--beacon-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}
.chat-input::placeholder {
    color: var(--beacon-text-secondary);
    font-size: 0.85rem;
}

/* --- Chat messages --- */
.chat-message {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--beacon-radius);
    border: 1px solid var(--beacon-border);
}
.chat-message.assistant {
    border-left: 3px solid var(--beacon-accent);
}
.chat-message.user {
    border-left: 3px solid var(--beacon-text-secondary);
    margin-left: 1.5rem;
}
.chat-message .rendered-md p:last-child { margin-bottom: 0; }
.chat-message .rendered-md p:first-child { margin-top: 0; }
/* Suppress large headings inside chat bubbles — they're noise in conversational context */
.chat-message .rendered-md h1,
.chat-message .rendered-md h2 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
    border: none;
    padding: 0;
}
.chat-message .rendered-md h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.4rem 0 0.2rem;
}

/* Suggested reply chips — quick-tap answers offered by the AI */
.suggested-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.suggested-reply-chip {
    background: var(--beacon-subtle);
    border: 1px solid var(--beacon-border);
    color: var(--pico-color);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    width: auto;
    margin: 0;
    transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.suggested-reply-chip:hover {
    background: var(--beacon-accent);
    border-color: var(--beacon-accent);
    color: #fff;
}
.suggested-reply-chip:active { transform: scale(0.97); }
.suggested-reply-chip:disabled { opacity: 0.5; cursor: wait; }

/* Feedback buttons (thumbs up/down) */
.feedback-row { display: flex; gap: 0.25rem; margin-top: 0.35rem; align-items: center; }
.feedback-label {
    font-size: 0.8rem;
    color: var(--beacon-text-secondary);
    margin-right: 0.35rem;
}
.feedback-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.35;
    padding: 0.1rem 0.25rem;
    width: auto;
    margin: 0;
    transition: opacity 0.15s;
    line-height: 1;
}
.feedback-btn:hover { opacity: 0.7; }
.feedback-btn.active { opacity: 1; }

/* Pagination controls */
nav.pagination {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}
nav.pagination a[role="button"] { margin: 0; }

/* Workspace badge tint for briefing cards */
.tag.briefing-workspace-work {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.3);
    color: #0369a1;
}
[data-theme="dark"] .tag.briefing-workspace-work { color: #7dd3fc; }
.tag.briefing-workspace-personal {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #047857;
}
[data-theme="dark"] .tag.briefing-workspace-personal { color: #6ee7b7; }
.tag.tag-resolved {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #059669;
}
[data-theme="dark"] .tag.tag-resolved {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

/* Briefing pin star button */
.briefing-pin-btn {
    background: transparent;
    border: none;
    color: var(--beacon-text-secondary);
    font-size: 1.2rem;
    width: auto;
    padding: 0 0.35rem;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s, transform 0.1s;
}
.briefing-pin-btn:hover {
    opacity: 1;
    color: var(--beacon-accent);
    transform: scale(1.15);
}
.briefing-pin-btn.is-pinned {
    opacity: 1;
    color: var(--beacon-accent);
}

/* Briefing focus preview — compact bullet list on briefing cards */
.briefing-focus-preview {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.85rem;
    color: var(--beacon-text-secondary);
    list-style: disc;
}
.briefing-focus-preview li {
    margin: 0.15rem 0;
    line-height: 1.4;
}

/* Trash page rows — muted opacity + soft background */
.trash-row {
    opacity: 0.75;
    background: var(--beacon-subtle);
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.3rem;
    border-radius: var(--beacon-radius);
    border: 1px dashed var(--beacon-border);
}
.trash-row:hover { opacity: 1; }
.trash-countdown {
    color: var(--beacon-text-secondary);
    opacity: 0.85;
    font-style: italic;
}

/* Sample briefing — demo card for new users with no data */
.sample-briefing {
    border: 2px dashed var(--beacon-border);
    border-left: 3px solid var(--beacon-accent);
    position: relative;
}
.sample-briefing-badge {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--beacon-accent);
    color: #fff;
    letter-spacing: 0.04em;
}
.sample-briefing-banner {
    background: var(--beacon-subtle);
    border-bottom: 1px solid var(--beacon-border);
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--beacon-accent);
    text-align: center;
}
.sample-briefing-content {
    opacity: 0.75;
}

/* Welcome-back card — shown on dashboard after absence */
.welcome-back {
    border-left: 3px solid var(--beacon-accent);
    background: linear-gradient(135deg, var(--beacon-subtle), transparent);
    margin-bottom: var(--beacon-section-gap);
}
.welcome-back-body {
    padding: 0.5rem 1rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
.welcome-back-body p:first-child { margin-top: 0.25rem; }
.welcome-back-body p:last-child { margin-bottom: 0.25rem; }

/* Onboarding wizard */
.onboarding-wizard {
    border-left: 3px solid var(--beacon-accent);
    margin-bottom: var(--beacon-section-gap);
}
.onboarding-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
}
.onboarding-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--beacon-subtle);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--beacon-border);
}
.onboarding-progress-fill {
    height: 100%;
    background: var(--beacon-accent);
    transition: width 0.3s;
}
.onboarding-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.onboarding-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--beacon-border);
    border-radius: var(--beacon-radius);
    background: var(--beacon-subtle);
    transition: opacity 0.15s, border-color 0.15s;
}
.onboarding-step.is-done {
    opacity: 0.6;
    border-color: var(--beacon-accent);
}
.onboarding-check {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--pico-background-color);
    border: 1px solid var(--beacon-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--beacon-text-secondary);
    flex-shrink: 0;
}
.onboarding-step.is-done .onboarding-check {
    background: var(--beacon-accent);
    color: white;
    border-color: var(--beacon-accent);
}
.onboarding-step-body {
    flex: 1;
    min-width: 0;
}
.onboarding-step-body strong {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}
.onboarding-step-body small {
    color: var(--beacon-text-secondary);
    font-size: 0.72rem;
    display: block;
    line-height: 1.3;
}
.onboarding-step.is-done .onboarding-step-body strong { text-decoration: line-through; }

/* Alpine x-cloak: hide until Alpine initializes, then let x-show take over */
[x-cloak] { display: none !important; }

/* Inline form validation — replacement for browser-native required tooltips */
input.field-error,
textarea.field-error,
select.field-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.3);
}
small.field-error-msg {
    display: block;
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.2rem;
    font-weight: 500;
}

/* AI title proof-read suggestion (tasks/projects create forms) */
.title-suggestion {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    margin: -0.5rem 0 1rem;
    background: var(--beacon-surface-raised, rgba(99, 102, 241, 0.08));
    border: 1px solid var(--beacon-border);
    border-left: 3px solid var(--beacon-accent);
    border-radius: var(--beacon-radius);
    font-size: 0.85rem;
}
.title-suggestion-icon {
    flex: 0 0 auto;
    font-size: 1rem;
    color: var(--beacon-accent);
    line-height: 1.4;
}
.title-suggestion-body {
    flex: 1 1 auto;
    min-width: 0;
}
.title-suggestion-body > div { line-height: 1.35; }
.title-suggestion-body small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
}
.title-suggestion-label {
    color: var(--beacon-text-secondary);
    margin-right: 0.35rem;
}
.title-suggestion-actions {
    display: flex;
    gap: 0.4rem;
    flex: 0 0 auto;
}
.title-suggestion-actions button {
    margin: 0;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Confirm modal — styled replacement for browser confirm() */
.beacon-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(2px);
}
.beacon-modal-card {
    background: var(--pico-background-color);
    border: 1px solid var(--beacon-border);
    border-radius: var(--beacon-radius);
    padding: 1.25rem 1.5rem;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.beacon-modal-card.beacon-modal-danger {
    border-top: 3px solid var(--beacon-critical, #dc2626);
}
.beacon-modal-title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
}
.beacon-modal-message {
    margin: 0 0 1.25rem;
    color: var(--beacon-text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}
.beacon-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.beacon-modal-danger-btn {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: white !important;
}
.beacon-modal-danger-btn:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* Command palette (Ctrl+K / Cmd+K) — top-docked modal that jumps
   across tasks, projects, conversations, and app actions. */
.beacon-cmdk-overlay {
    align-items: flex-start;
    padding-top: 10vh;
}
.beacon-cmdk-card {
    background: var(--pico-background-color);
    border: 1px solid var(--beacon-border);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    max-width: 620px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
.beacon-cmdk-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--beacon-border);
    flex-shrink: 0;
}
.beacon-cmdk-icon {
    color: var(--beacon-text-secondary);
    flex-shrink: 0;
}
.beacon-cmdk-input {
    flex: 1;
    background: transparent;
    border: none !important;
    outline: none;
    font-size: 1rem;
    color: var(--pico-color);
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit;
    box-shadow: none !important;
    min-width: 0;
}
.beacon-cmdk-input:focus,
.beacon-cmdk-input:focus-visible {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}
.beacon-cmdk-input::placeholder {
    color: var(--beacon-text-secondary);
    opacity: 0.7;
}
.beacon-cmdk-esc {
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--beacon-border);
    border-radius: 4px;
    color: var(--beacon-text-secondary);
    background: var(--beacon-subtle);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex-shrink: 0;
}
.beacon-cmdk-results {
    overflow-y: auto;
    flex: 1;
    padding: 0.4rem 0 0.5rem;
    min-height: 80px;
}
.beacon-cmdk-section-header {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--beacon-text-secondary);
    padding: 0.6rem 1.25rem 0.25rem;
}
.beacon-cmdk-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    transition: background 0.08s ease;
    border-left: 3px solid transparent;
}
.beacon-cmdk-item.is-selected {
    background: var(--beacon-subtle);
    border-left-color: var(--beacon-accent);
}
.beacon-cmdk-item-icon {
    width: 20px;
    text-align: center;
    color: var(--beacon-text-secondary);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.beacon-cmdk-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}
.beacon-cmdk-item-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--pico-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.beacon-cmdk-item-subtitle {
    font-size: 0.72rem;
    color: var(--beacon-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.beacon-cmdk-empty {
    padding: 1.75rem 1.25rem;
    text-align: center;
    color: var(--beacon-text-secondary);
    font-size: 0.85rem;
}
.beacon-cmdk-footer {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.6rem 1.25rem;
    border-top: 1px solid var(--beacon-border);
    font-size: 0.68rem;
    color: var(--beacon-text-secondary);
    flex-shrink: 0;
}
.beacon-cmdk-footer kbd {
    font-size: 0.62rem;
    padding: 0.08rem 0.32rem;
    border: 1px solid var(--beacon-border);
    border-radius: 3px;
    background: var(--beacon-subtle);
    margin-right: 0.3rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--beacon-text-secondary);
}
@media (max-width: 640px) {
    .beacon-cmdk-overlay { padding-top: 5vh; padding-left: 0.75rem; padding-right: 0.75rem; }
    .beacon-cmdk-footer { display: none; }
}

/* Keyboard shortcuts help modal content */
.shortcuts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 0.5rem 0 1.25rem;
}
.shortcuts-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--beacon-text-secondary);
    margin-bottom: 0.4rem;
    font-weight: 600;
}
.shortcut-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    flex-wrap: nowrap;
}
.shortcut-row span {
    margin-left: 0.4rem;
    color: var(--pico-color);
}
.shortcut-row kbd {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    min-width: 1.5em;
    text-align: center;
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-color);
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--pico-muted-border-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pico-color);
    box-shadow: 0 1px 0 var(--beacon-border);
    min-width: 1.2rem;
    text-align: center;
}

@media (max-width: 600px) {
    .shortcuts-grid { grid-template-columns: 1fr; gap: 1rem; }
}
.chat-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: var(--beacon-text-secondary);
}
.chat-meta strong { color: var(--pico-color); }
.chat-time {
    float: right;
    font-size: 0.7rem;
    color: var(--beacon-text-secondary);
    margin-left: 0.5rem;
}

/* --- Filters --- */
details summary {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--beacon-text-secondary);
    cursor: pointer;
}

/* --- Empty states --- */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--beacon-text-secondary);
    font-size: 0.9rem;
}

/* --- Breadcrumbs --- */
.breadcrumb {
    display: block;
    font-size: 0.8rem;
    color: var(--beacon-text-secondary);
    margin-bottom: 0.5rem;
    /* Override Pico's nav flexbox */
    justify-content: flex-start;
}
.breadcrumb a {
    color: var(--beacon-text-secondary);
    text-decoration: none;
}
.breadcrumb a:hover {
    color: var(--beacon-accent);
}
.breadcrumb .separator {
    margin: 0 0.35rem;
    opacity: 0.5;
}

/* --- Ask Beacon global bar --- */
/* Legacy ask-beacon-bar — kept for backward compat selectors */
.ask-beacon-bar { display: none; }

/* --- Split-screen layout (chat left, content right) --- */
.beacon-split {
    display: flex;
    min-height: calc(100vh - 33px);
}
.beacon-split-chat {
    display: none; /* hidden on mobile, shown on desktop */
}
.beacon-split-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}
.beacon-assistant-mobile {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--ba-bg-bar, var(--pico-background-color));
    border-top: 1px solid var(--ba-border, var(--beacon-border));
}

/* Assistant panel styles are in assistant-chat.css */

/* --- Interview panel --- */
.interview-panel {
    border-left: 3px solid var(--beacon-accent);
    margin-bottom: var(--beacon-section-gap);
}
.interview-panel header {
    cursor: pointer;
    user-select: none;
}
.interview-panel .interview-body {
    max-height: 400px;
    overflow-y: auto;
}
.interview-panel .interview-messages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.interview-panel .interview-input {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--beacon-border);
}
.interview-panel .interview-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* --- Stakeholder chips --- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--beacon-subtle);
    border: 1px solid var(--beacon-border);
    color: var(--pico-color);
    text-decoration: none;
    transition: border-color 0.15s;
}
.chip:hover {
    border-color: var(--beacon-accent);
    text-decoration: none;
    color: var(--beacon-accent);
}
.chip-remove {
    cursor: pointer;
    opacity: 0.4;
    font-size: 0.85em;
    line-height: 1;
}
.chip-remove:hover { opacity: 1; }

/* --- Toast notifications --- */
.toast {
    padding: 0.6rem 1rem;
    border-radius: var(--beacon-radius);
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 200px;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.toast-success {
    background: #065f46;
    color: #d1fae5;
    border: 1px solid #10b981;
}
.toast-error {
    background: #7f1d1d;
    color: #fecaca;
    border: 1px solid #dc2626;
}
.toast-info {
    background: #1e3a5f;
    color: #bfdbfe;
    border: 1px solid #3b82f6;
}

/* --- Sidebar footer group (pinned to bottom of nav column) --- */
.sidebar-footer-group {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

/* --- PWA install (sidebar footer) --- */
.pwa-install-sidebar-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--beacon-border);
}

/* --- Version / uptime stamp (sidebar footer) --- */
.sidebar-version-footer {
    padding: 0.5rem 0.75rem 0.65rem;
    border-top: 1px solid var(--beacon-border);
    font-size: 0.65rem;
    color: var(--beacon-text-secondary);
    opacity: 0.55;
    line-height: 1.3;
    text-align: center;
}
.sidebar-collapsed .sidebar-version-footer {
    display: none;
}
.pwa-install-sidebar-footer .pwa-install-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    color: var(--beacon-text-secondary);
    text-decoration: none;
    font-size: 0.78rem;
    border-radius: var(--beacon-radius);
    transition: background 0.1s, color 0.1s;
}
.pwa-install-sidebar-footer .pwa-install-link:hover {
    background: var(--beacon-subtle);
    color: var(--beacon-accent);
}

/* --- Theme toggle (sidebar footer) ---
   Mirrors .pwa-install-sidebar-footer so the two footer rows share
   the same visual rhythm (padding, divider, link treatment). Lives
   inside .sidebar-footer-group, above the PWA install CTA. */
.sidebar-theme-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--beacon-border);
}
.sidebar-theme-footer .sidebar-theme-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    color: var(--beacon-text-secondary);
    text-decoration: none;
    font-size: 0.78rem;
    border-radius: var(--beacon-radius);
    transition: background 0.1s, color 0.1s;
}
.sidebar-theme-footer .sidebar-theme-link:hover {
    background: var(--beacon-subtle);
    color: var(--beacon-accent);
}
/* --- HTMX loading indicator --- */
.htmx-indicator {
    display: none;
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline;
    opacity: 1;
}

/* Mid-width nav tightening: shrink nav items at laptop widths where the
   full 14-item nav still fits horizontally but feels cramped. Hamburger
   only kicks in below 900px once we can't reasonably fit a horizontal bar
   anymore. Upper bound covers common laptop widths (1366, 1440, 1536) and
   any partial-width window on a larger display. */
@media (max-width: 1500px) and (min-width: 901px) {
    nav.container-fluid { padding: 0.4rem 1rem; }
    nav ul { gap: 0.05rem; }
    nav ul li a {
        font-size: 0.78rem;
        padding: 0.3rem 0.45rem;
        white-space: nowrap;
    }
    nav .brand { font-size: 1rem; }
}

/* --- Drawer nav (all viewport sizes) ---
   Originally gated behind @media (max-width: 900px) but the user's
   explicit ask was to remove the width gating entirely: a touch-
   enabled desktop / tablet / Chromebook should get the same slide-out
   drawer as a phone. Desktop mouse users still get the hamburger
   button and can tap or swipe to open.
*/
.beacon-nav {
    padding: 0.5rem 0.75rem !important;
    gap: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.nav-brand-row {
    flex: 1;
    justify-content: space-between;
    gap: 0.5rem;
}

.nav-hamburger {
    display: block;
}

/* Drawer-universal rules below. The @media wrapper is intentionally
   absent so they apply at every viewport width. */

    /* The drawer: fixed on the left, slides in via transform. Max
       width keeps some content visible on the right so the user
       can tap the backdrop to dismiss. */
    .beacon-nav .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 82%;
        max-width: 320px;
        background: var(--pico-background-color);
        border-right: 1px solid var(--beacon-border);
        box-shadow: 4px 0 24px rgba(0,0,0,0.35);
        padding: 1.25rem 0.75rem 6rem;
        margin: 0;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s;
        z-index: 200;
        flex: none;
    }

    .nav-drawer-open .nav-links {
        transform: translateX(0);
        visibility: visible;
    }

    .nav-backdrop {
        display: block;
    }

    .beacon-nav .nav-links li {
        width: 100%;
    }

    .beacon-nav .nav-links li a {
        display: block;
        width: 100%;
        padding: 0.85rem 1rem;
        font-size: 1rem;
        font-weight: 500;
        border-radius: var(--beacon-radius);
        opacity: 0.85;
    }

    .beacon-nav .nav-links li a.nav-active::after {
        display: none;
    }
    .beacon-nav .nav-links li a.nav-active {
        background: var(--beacon-subtle);
        color: var(--beacon-accent);
        border-left: 3px solid var(--beacon-accent);
        padding-left: calc(1rem - 3px);
    }

    /* More dropdown: on mobile, the dropdown ul stays open in-place
       inside the drawer rather than floating, so the secondary nav
       items are always reachable without an extra tap. */
    .beacon-nav .nav-more-wrap {
        display: block;
        width: 100%;
    }
    .beacon-nav .nav-more-wrap > a {
        display: none; /* hide the "More" toggle — not needed in drawer */
    }
    .beacon-nav .nav-more-menu {
        position: static;
        display: flex !important; /* override x-show="moreOpen" */
        flex-direction: column;
        border: 0;
        border-top: 1px solid var(--beacon-border);
        border-radius: 0;
        box-shadow: none;
        padding: 0.5rem 0 0;
        margin: 0.5rem 0 0;
        min-width: 0;
        background: transparent;
    }
    .beacon-nav .nav-more-menu li a {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    /* Utilities: stacked at the bottom of the drawer with a visual
       separator from the primary nav above them. */
    .nav-utility {
        width: 100%;
    }
    .nav-utility:first-of-type {
        margin-left: 0;
        margin-top: auto;
        padding-top: 0.75rem;
        border-top: 1px solid var(--beacon-border);
    }
    .beacon-nav .nav-utility a {
        font-size: 0.9rem;
        opacity: 0.8;
        padding: 0.65rem 1rem;
    }
    .beacon-nav #theme-toggle {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

/* End drawer-universal rules. Below this point, the remaining mobile
   layout rules (task row stacking, dashboard grid collapse, etc.)
   re-enter a max-width: 900px media query because they're genuinely
   width-dependent, not touch-dependent. */
@media (max-width: 900px) {
    .task-row {
        flex-wrap: wrap;
        gap: 0.35rem;
        padding: 0.5rem 0;
    }
    .task-row .task-title {
        flex-basis: 100%;
        order: -1;
    }
    .task-row .task-meta {
        flex-wrap: wrap;
        font-size: 0.75rem;
    }
    .task-row:hover { margin: 0; }

    .grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .task-top-grid {
        grid-template-columns: 1fr;
    }
    .task-top-grid .right-sidebar article { margin-bottom: var(--beacon-section-gap); }

    /* Override Pico's narrow max-width (510px/700px) on mobile so content
       fills the screen instead of sitting in a skinny centered column. */
    main.container,
    .ask-beacon-bar,
    .beacon-assistant {
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .chat-message.user { margin-left: 0.75rem; }
}

/* =========================================================================
   Icons inside nav links
   -------------------------------------------------------------------------
   Every nav link is structured as:
     <a><span class="nav-icon"><svg/></span><span class="nav-label">…</span></a>
   Icons use currentColor so they theme with the link color.
   ========================================================================= */

.nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.nav-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.nav-links li a {
    gap: 0.75rem;
}

/* Sidebar collapse toggle — hidden on mobile drawer, shown on desktop */
.nav-collapse-wrap {
    display: none;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--beacon-border);
}
.nav-collapse-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    color: var(--beacon-text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: var(--beacon-radius);
    margin: 0;
}
.nav-collapse-btn:hover {
    background: var(--beacon-subtle);
    color: var(--pico-color);
}
.nav-collapse-arrow {
    transition: transform 0.2s ease;
}

/* Pico styles <button> and [role="button"] as primary filled buttons
   by flipping --pico-color to --pico-primary-inverse (white) on both
   rest and hover. That white leaks into every rule on the element
   that reads var(--pico-color) — including beacon's own nav-link and
   collapse-button hover rules — making the theme toggle render as a
   filled blue pill (rest) and sidebar buttons go invisible on hover
   in light mode (white text on the light --beacon-subtle background).
   Pin the Pico primary tokens locally so sidebar buttons inherit our
   plain nav-link styling instead. !important is required because
   Pico's hover selector has specificity (0,2,0) matching ours. */
.beacon-nav button,
.beacon-nav a[role="button"] {
    --pico-background-color: transparent !important;
    --pico-border-color: transparent !important;
    --pico-color: inherit !important;
    --pico-box-shadow: none !important;
}

/* =========================================================================
   Persistent sidebar — desktop / large tablet (>= 1024px)
   -------------------------------------------------------------------------
   Overrides the slide-out drawer and pins the nav as a permanent
   sidebar on the left. Main content, footer, and Ask Beacon bar
   shift right. User can collapse to icons-only.
   ========================================================================= */
@media (min-width: 1024px) {
    :root {
        --beacon-sidebar-width: 240px;
        --beacon-sidebar-collapsed-width: 68px;
    }

    .nav-hamburger { display: none !important; }
    .nav-backdrop { display: none !important; }

    .beacon-nav {
        position: fixed !important;
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        width: var(--beacon-sidebar-width);
        height: 100vh;
        padding: 1rem 0.75rem !important;
        border-top: 0;
        border-right: 1px solid var(--beacon-border);
        border-left: 3px solid var(--beacon-workspace-bar, var(--beacon-accent));
        border-bottom: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        z-index: 100;
        transition: width 0.2s ease;
    }

    .beacon-nav .nav-brand-row {
        flex: none;
        justify-content: flex-start;
        padding: 0 0.5rem 0.5rem;
    }
    .beacon-nav .brand {
        font-size: 1.25rem;
        padding: 0.25rem 0;
        white-space: nowrap;
        overflow: hidden;
    }

    .beacon-nav .nav-links {
        position: static !important;
        top: auto;
        left: auto;
        bottom: auto;
        width: auto;
        max-width: none;
        transform: none !important;
        visibility: visible !important;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        flex: 1;
        z-index: auto;
    }
    .beacon-nav .nav-links::-webkit-scrollbar { display: none; }

    .beacon-nav .nav-links li {
        width: 100%;
        /* Pico's negative vertical margins on nav links make the <a>
           taller than the <li>. overflow:hidden clips the background
           highlight to the li bounds so adjacent highlights don't
           visually overlap, while keeping the compact spacing. */
        overflow: hidden;
    }

    .beacon-nav .nav-links li a,
    .beacon-nav .nav-collapse-btn {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: calc(100% + 1.5rem);
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding: 0.6rem 0.75rem;
        border-radius: 0;
        font-size: 0.9rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
    }

    .beacon-nav .nav-links li a.nav-active {
        background: var(--beacon-subtle);
        color: var(--beacon-accent);
        border-left: 3px solid var(--beacon-accent);
        /* Inset the highlight 8px from the sidebar edge for breathing
           room, while keeping icon/text aligned with non-active items.
           margin change: +8px from original (-0.75rem - 3px).
           padding change: -8px to compensate. */
        margin-left: calc(-0.75rem + 5px);
        padding-left: calc(0.75rem - 8px);
    }
    .beacon-nav .nav-links li a.nav-active::after {
        display: none;
    }

    .beacon-nav .nav-more-wrap {
        display: block;
        width: 100%;
        position: static;
    }
    .beacon-nav .nav-more-wrap > a {
        display: none !important;
    }
    .beacon-nav .nav-more-menu {
        position: static;
        display: flex !important;
        flex-direction: column;
        background: transparent;
        border: 0;
        border-top: 1px solid var(--beacon-border);
        border-radius: 0;
        box-shadow: none;
        padding: 0.5rem 0 0;
        margin: 0.5rem 0 0;
        min-width: 0;
        gap: 0.15rem;
    }
    .beacon-nav .nav-more-menu li a {
        padding: 0.6rem 0.75rem;
        font-size: 0.88rem;
        width: calc(100% + 1.5rem);
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        border-radius: 0;
    }
    .beacon-nav .nav-more-menu li a.nav-active {
        border-left: 3px solid var(--beacon-accent);
        margin-left: calc(-0.75rem + 5px);
        padding-left: calc(0.75rem - 8px);
    }

    .beacon-nav .nav-utility {
        width: 100%;
    }
    .beacon-nav .nav-utility:first-of-type {
        margin-left: 0;
        margin-top: auto;
        padding-top: 0.5rem;
        border-top: 1px solid var(--beacon-border);
    }
    .beacon-nav .nav-utility a {
        width: calc(100% + 1.5rem);
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding: 0.6rem 0.75rem !important;
        font-size: 0.9rem !important;
        border-radius: 0;
    }
    .nav-collapse-wrap {
        display: block;
    }

    .beacon-split,
    .workspace-bar {
        margin-left: var(--beacon-sidebar-width);
        transition: margin-left 0.2s ease;
    }

    /* Override Pico's fixed max-width */
    .beacon-split,
    .workspace-bar {
        max-width: none;
        width: auto;
    }

    main.container {
        padding-top: 1.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Lock the desktop viewport so the persistent chat bar never
       "wiggles" — body becomes a flex column, the workspace-bar takes
       its natural height, and .beacon-main fills the rest. This
       replaces the earlier calc(100vh - 33px) approach, which hard-
       coded a workspace-bar height that only matched a 16px root font
       size (Pico scales the root to ~21px, making the bar ~44px and
       leaving ~11px of leftover body scroll). */
    html, body {
        height: 100%;
        overflow: hidden;
    }
    body {
        display: flex;
        flex-direction: column;
    }
    .beacon-main {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Split-screen: show left chat panel, hide mobile bar */
    .beacon-split {
        flex: 1;
        min-height: 0;
        height: auto;
        overflow: hidden;
    }
    .beacon-split-chat {
        display: flex !important;
        flex-direction: column;
        width: 30%;
        min-width: 320px;
        max-width: 1000px;
        border-right: 1px solid var(--beacon-border);
        background: var(--ba-bg-panel, var(--pico-background-color));
        overflow: hidden;
    }
    .beacon-split-content {
        flex: 1;
        overflow-y: auto;
        min-width: 0;
    }
    .beacon-assistant-mobile {
        display: none !important;
    }

    .ask-beacon-bar,
    .beacon-assistant {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Collapsed state */
    .sidebar-collapsed .beacon-nav {
        width: var(--beacon-sidebar-collapsed-width);
        padding: 1rem 0.35rem !important;
    }
    .sidebar-collapsed .beacon-split,
    .sidebar-collapsed .workspace-bar {
        margin-left: var(--beacon-sidebar-collapsed-width);
    }
    .sidebar-collapsed .beacon-nav .nav-label,
    .sidebar-collapsed .beacon-nav .brand {
        display: none;
    }
    .sidebar-collapsed .beacon-nav .nav-links li a,
    .sidebar-collapsed .beacon-nav .nav-collapse-btn,
    .sidebar-collapsed .beacon-nav .nav-utility a,
    .sidebar-collapsed .sidebar-theme-footer .sidebar-theme-link,
    .sidebar-collapsed .pwa-install-sidebar-footer .pwa-install-link {
        justify-content: center;
        padding: 0.6rem 0;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .sidebar-collapsed .beacon-nav .nav-links li a.nav-active {
        padding-left: 0;
        border-left: 0;
        margin-left: 0 !important;
    }
    .sidebar-collapsed .beacon-nav .nav-brand-row {
        padding: 0.25rem 0;
        justify-content: center;
    }
    .sidebar-collapsed .beacon-nav .nav-brand-row::before {
        content: "B";
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--beacon-accent);
    }
    .sidebar-collapsed .nav-create-wrap {
        margin-left: 0;
        position: static;
    }
    .sidebar-collapsed .nav-create-menu {
        left: calc(var(--beacon-sidebar-collapsed-width) + 4px);
        right: auto;
        top: 0;
    }
    .sidebar-collapsed .nav-collapse-arrow {
        transform: rotate(180deg);
    }
}

/* Sidebar nav badge — pinned to the top-right of the nav icon so it
   displays identically whether the sidebar is expanded or collapsed.
   Any nav <li> that wants a pending count renders a `.nav-badge`
   inside its `.nav-icon`.

   Correct positioning depends on .nav-icon being the nearest
   positioned ancestor. Do not set position:relative + overflow:hidden
   on any element between .nav-icon and .nav-badge. */
.nav-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--beacon-accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
}

/* Briefing hero live-update affordances */
.briefing-fade {
    animation: briefing-fade 0.4s ease-in;
}
@keyframes briefing-fade {
    from { opacity: 0.7; }
    to   { opacity: 1; }
}
.briefing-updated-pill {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--beacon-surface-alt, #eef);
    color: var(--beacon-text-secondary, #555);
    margin-left: 0.5rem;
}