:root {
    --base: #0E1114;
    --surface: #161B22;
    --surface-2: #1C232C;
    --border: #21272F;
    --cyan: #00E5CC;
    --cyan-dim: rgba(0, 229, 204, 0.12);
    --amber: #E87D3E;
    --red: #E84D4D;
    --green: #6FCF97;
    --magenta: #C470E8;     /* "things only you can do" hero tile - distinct from cyan/amber */
    --text: #E8EAF0;
    --text-muted: #7D8590;
    --text-dim: #484F58;
    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--base);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.55;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.85em; }
pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; overflow-x: auto; }

.layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 1.25rem 0;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}
.sidebar-brand .accent { color: var(--cyan); }
.nav-group-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.75rem 1.25rem 0.4rem;
}
.nav-link {
    display: block;
    padding: 0.5rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    border-left: 2px solid transparent;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav-link.active { color: var(--cyan); border-left-color: var(--cyan); background: var(--cyan-dim); }

.content { padding: 2rem 2.5rem; max-width: 1400px; }

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text); font-weight: 700; }
h1 { font-size: 1.75rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.subtitle { color: var(--text-muted); margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------
   /Triage page — keyboard-driven inbox-zero review for proposals.
   ------------------------------------------------------------------ */

.triage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.triage-stats { display: flex; align-items: center; gap: 0.75rem; }
.triage-count {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}
.triage-count-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.kbd-help-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 120ms ease, color 120ms ease;
}
.kbd-help-btn:hover { border-color: var(--cyan); color: var(--cyan); }
kbd {
    display: inline-block;
    background: var(--base);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text);
    box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.triage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .triage-grid { grid-template-columns: minmax(0, 1fr); }
}

.triage-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.triage-section h2 {
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.section-count {
    background: var(--base);
    color: var(--text);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

.triage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.triage-item {
    background: var(--base);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    outline: none;
    transition: border-color 120ms ease, transform 120ms ease, opacity 180ms ease;
}
.triage-item:hover { border-color: var(--text-muted); }
.triage-item.selected {
    border-color: var(--cyan);
    border-left-color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(0, 229, 199, 0.2);
}
.triage-item.triage-removing { opacity: 0; transform: translateX(8px); }

.triage-row { display: flex; flex-direction: column; gap: 0.25rem; }
.triage-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.78rem;
    font-family: var(--font-mono);
}
.triage-badge {
    background: var(--surface);
    color: var(--cyan);
    border: 1px solid var(--border);
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.triage-title {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.4;
    margin-top: 0.15rem;
}
.triage-detail {
    display: none;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--border);
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    white-space: pre-wrap;
}
.triage-item.expanded .triage-detail { display: block; }
.triage-edit-form {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--border);
}

.triage-empty { text-align: center; padding: 2rem; }
.muted { color: var(--text-muted); }

/* Keyboard help overlay */
.kbd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    outline: none;
}
.kbd-overlay-card {
    background: var(--surface);
    border: 1px solid var(--cyan);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    min-width: 360px;
    max-width: 560px;
}
.kbd-table { width: 100%; border-collapse: separate; border-spacing: 0 0.4rem; }
.kbd-table td:first-child { padding-right: 1.2rem; white-space: nowrap; }
.kbd-table td:last-child { color: var(--text-muted); font-size: 0.9rem; }

/* Hero row — Decision #15's two first-class concepts (Pending Proposals + Stale Claims).
   These are the calls-to-action; everything in .stats below is ops/inventory data. */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.hero-stat {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, transform 120ms ease;
}
.hero-stat:hover { border-color: var(--cyan); transform: translateY(-1px); }
.hero-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.hero-value {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    margin: 0.4rem 0 0.5rem;
}
.hero-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}
/* Attention treatment: pending proposals waiting for triage. */
.hero-stat.attention { border-color: var(--cyan); }
.hero-stat.attention .hero-value { color: var(--cyan); }
.hero-stat.attention:hover { box-shadow: 0 0 0 1px var(--cyan); }
/* Warning treatment: stale claims need reaper attention or human action. */
.hero-stat.warning { border-color: var(--amber); }
.hero-stat.warning .hero-value { color: var(--amber); }
.hero-stat.warning:hover { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
/* Todo treatment: human-only ready tasks - "your move" bucket. */
.hero-stat.todo { border-color: var(--magenta); }
.hero-stat.todo .hero-value { color: var(--magenta); }
.hero-stat.todo:hover { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); }

/* 3-up hero grid: lets all three first-class buckets share the top row. */
.hero-stats-3 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* 4-up hero grid: four first-class buckets (proposals, human-todos, stale claims,
   pending reconciliations). Tighter min-width so all four sit on one row at desktop
   and wrap to 2x2 on tablet (per the breakpoints below). */
.hero-stats-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    transition: border-color 120ms ease;
}
a.stat:hover { border-color: var(--cyan); }
.stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.stat-value { font-family: var(--font-heading); font-size: 1.85rem; font-weight: 700; color: var(--text); margin-top: 0.25rem; }
.stat-value.cyan { color: var(--cyan); }
.stat-value.amber { color: var(--amber); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.card-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--text);
}

table { width: 100%; border-collapse: collapse; }
thead th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
tbody td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:hover { background: var(--surface-2); }

.badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    background: rgba(125, 133, 144, 0.15);
    color: var(--text-muted);
    border: 1px solid rgba(125, 133, 144, 0.25);
}
.badge.cyan { background: var(--cyan-dim); color: var(--cyan); border-color: rgba(0, 229, 204, 0.3); }
.badge.amber { background: rgba(232, 125, 62, 0.12); color: var(--amber); border-color: rgba(232, 125, 62, 0.3); }
.badge.red { background: rgba(232, 77, 77, 0.12); color: var(--red); border-color: rgba(232, 77, 77, 0.3); }
.badge.green { background: rgba(111, 207, 151, 0.12); color: var(--green); border-color: rgba(111, 207, 151, 0.3); }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.btn {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.btn:hover { border-color: var(--text-dim); }
.btn-primary { background: var(--cyan); color: var(--base); border-color: var(--cyan); }
.btn-primary:hover { background: #00D4BD; }
.btn-danger { background: transparent; color: var(--red); border-color: rgba(232, 77, 77, 0.3); }
.btn-danger:hover { background: rgba(232, 77, 77, 0.1); }

.kv { display: grid; grid-template-columns: 160px 1fr; gap: 0.4rem 1rem; font-size: 0.9rem; }
.kv .k { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.75rem; padding-top: 0.15rem; }
.kv .v { color: var(--text); }

.event-row { display: grid; grid-template-columns: 150px 180px 1fr; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.event-row:last-child { border-bottom: none; }
.event-time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); }
.event-type { font-family: var(--font-mono); font-size: 0.75rem; color: var(--cyan); }
.event-summary { color: var(--text); }

.lineage-tree { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); }
.lineage-tree .arrow { color: var(--cyan); margin: 0 0.4rem; }
.lineage-tree .self { color: var(--cyan); font-weight: 700; }

.brief-md { font-size: 0.92rem; line-height: 1.65; color: var(--text); white-space: pre-wrap; }

.empty { color: var(--text-dim); font-style: italic; }

textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
select {
    width: 100%;
    background: var(--base);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 5px;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    box-sizing: border-box;
}
textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus { outline: none; border-color: var(--cyan); }
textarea { min-height: 80px; resize: vertical; }

/* select needs an explicit chevron because we removed appearance default */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2300E5C7' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 10px 6px;
    padding-right: 2rem;
    cursor: pointer;
}
select option { background: var(--base); color: var(--text); }

/* Filter rows that aren't in a card form: align inline with a label */
.filter-row { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-row label { font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; }
.filter-row select { width: auto; min-width: 200px; }

.form-row { margin-bottom: 0.75rem; }
.form-row label { display: block; font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; margin-bottom: 0.25rem; }

.row-actions { display: flex; gap: 0.5rem; }

.flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
.flash.success { background: rgba(111, 207, 151, 0.1); color: var(--green); border: 1px solid rgba(111, 207, 151, 0.3); }
.flash.error { background: rgba(232, 77, 77, 0.1); color: var(--red); border: 1px solid rgba(232, 77, 77, 0.3); }

.sidebar { display: flex; flex-direction: column; }
.account-bar { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.78rem; }
.account-email { font-family: var(--font-mono); color: var(--text-muted); word-break: break-all; }
.account-link { color: var(--text-muted); padding: 0; font-family: var(--font-body); }
.account-link:hover { color: var(--cyan); text-decoration: underline; }

/* ==================================================================
   Responsive: tablet (≤1024px) and phone (≤768px) (#44).
   No JS, no markup changes — pure CSS overrides.
   Acceptance: Dashboard, Tasks list/detail, BriefProposals, Triage all
   usable on a 390px-wide viewport with no horizontal scroll on
   primary actions.
   ================================================================== */

/* Tablet: tighter sidebar + content padding so 9-12" screens don't waste
   so much vertical real-estate on margins. */
@media (max-width: 1024px) and (min-width: 769px) {
    .layout { grid-template-columns: 180px 1fr; }
    .content { padding: 1.5rem 1.5rem; }
    .nav-link { padding: 0.45rem 1rem; font-size: 0.85rem; }
    .hero-stats, .hero-stats-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* Phone: sidebar becomes a wrapping top nav strip; everything stacks. */
@media (max-width: 768px) {
    /* Layout flips from horizontal (sidebar | content) to vertical (nav above content). */
    .layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        min-height: 100vh;
    }

    /* Sidebar → top nav. Loses sticky positioning, becomes a flex-wrap row.
       Inline-style overrides (margin-top: auto on the login partial) get neutralized
       below so the login row sits at the bottom of the bar instead of pushed off. */
    .sidebar {
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 0.5rem 0.5rem 0.75rem;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.15rem;
    }
    .sidebar-brand {
        width: 100%;
        padding: 0.25rem 0.75rem 0.5rem !important;  /* override inline */
        margin-bottom: 0.25rem !important;
        border-bottom: 1px solid var(--border) !important;
    }
    .sidebar-brand img {
        max-height: 2.4rem;
        width: auto !important;
    }
    .nav-group-label {
        width: 100%;
        padding: 0.6rem 0.75rem 0.2rem;
    }
    .nav-link {
        padding: 0.35rem 0.65rem;
        border-left: none;
        border-bottom: 2px solid transparent;
        font-size: 0.82rem;
    }
    .nav-link.active {
        border-left-color: transparent;
        border-bottom-color: var(--cyan);
    }
    /* The login partial container uses inline margin-top:auto for desktop bottom-pinning.
       On mobile it'd push to the right edge of the wrap — neutralize it. */
    .sidebar > div[style*="margin-top: auto"] {
        width: 100%;
        margin-top: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Content gets phone-sized padding. */
    .content {
        padding: 1rem 0.85rem;
        max-width: 100%;
    }

    /* Type scale tightens — h1 was 1.75rem on desktop, way too big on a phone. */
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.1rem; margin-top: 1.5rem; }
    .subtitle { font-size: 0.92rem; margin-bottom: 1rem; }

    /* Hero tiles single-column on phones so the value can breathe. */
    .hero-stats,
    .hero-stats-3 {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .hero-stat { padding: 1rem 1.1rem; }
    .hero-value { font-size: 2.4rem; }
    .hero-sub { font-size: 0.82rem; }

    /* Ops stats grid: 2 columns on phones (4-7 tiles fit nicely). */
    .stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .stat { padding: 0.75rem 0.9rem; }
    .stat-value { font-size: 1.5rem; }

    /* Cards: tables inside them often overflow on narrow screens. Make the card
       horizontally scrollable so the table preserves its column structure rather
       than reflowing into illegible mush. Other card content (brief markdown,
       forms, kv blocks) fits within the viewport so this rarely engages. */
    .card { overflow-x: auto; }

    /* The kv (key-value) blocks use grid-template-columns: 160px 1fr. On a 390px
       phone that's a third of the screen for a label. Stack instead. */
    .kv {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }
    .kv .k {
        margin-top: 0.6rem;
    }
    .kv .k:first-child { margin-top: 0; }

    /* Activity event rows use grid 150px / 180px / 1fr. Stack on phones. */
    .event-row {
        grid-template-columns: 1fr;
        gap: 0.1rem;
        padding: 0.5rem 0;
    }
    .event-time, .event-type { display: inline-block; margin-right: 0.5rem; }

    /* Filter rows already wrap; just tighten gap and font on phones. */
    .filter-row { gap: 0.4rem; font-size: 0.82rem; }

    /* Triage page already has a 1024px breakpoint that single-columns the grid;
       on phones tighten the section padding too. */
    .triage-section { padding: 0.75rem 0.85rem; }
    .triage-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .triage-count { font-size: 2rem; }
}