:root {
    color-scheme: dark;

    --bg: #08090d;
    --surface-1: #12141a;
    --surface-2: #191c24;
    --surface-3: #22262f;
    --border: #232733;
    --border-soft: #1b1e27;

    --text-primary: #eceef4;
    --text-secondary: #a2a8b8;
    --text-muted: #6f7686;

    --series-2: #d95926;
    --series-4: #c98500;
    --series-5: #9085e9;
    --series-6: #d55181;

    --good: #0ca30c;
    --warning: #fab219;
    --serious: #ec835a;
    --critical: #d03b3b;

    --grid: #1e222c;
    --radius: 8px;
    --radius-sm: 6px;
    --rail-width: 232px;
}


* {
    box-sizing: border-box;
}

/* Author display rules outrank the hidden attribute — this keeps hidden meaning hidden */
[hidden] {
    display: none !important;
}

html, body {
    height: 100%;
}

/* Hold the scrollbar's space open always — otherwise locking the page for the drawer widens the
   viewport and shoves every fixed element, the console dock included, sideways */
html {
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 12% -8%, rgba(var(--accent-rgb), 0.10), transparent 62%),
        radial-gradient(700px 420px at 92% 4%, rgba(var(--accent-deep-rgb), 0.07), transparent 60%);
    z-index: 0;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
}

p {
    margin: 0;
}

button {
    font: inherit;
    color: inherit;
}

a {
    color: var(--series-1);
}


/* Shell */

.shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    min-height: 100%;
}

.rail {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 18px;
    border-right: 1px solid var(--border-soft);
    background: rgba(10, 11, 15, 0.72);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
}

.brand-mark {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(140deg, var(--series-1), var(--accent-deep));
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55);
}

.brand-text {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.nav button:hover {
    background: var(--surface-1);
    color: var(--text-primary);
}

.nav button.is-active {
    background: var(--surface-2);
    color: var(--text-primary);
}

.nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
}

.nav button.is-active .nav-dot {
    background: var(--series-1);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
}

.rail-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sync-note {
    font-size: 11px;
    color: var(--text-muted);
    padding: 0 4px;
}

.main {
    min-width: 0;
    padding: 26px 30px 60px;
}

.topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.topbar h1 {
    font-size: 26px;
}

.topbar .subtitle {
    color: var(--text-secondary);
    margin-top: 4px;
}


/* Primitives */

.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}

.card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.card-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.card-note {
    font-size: 12px;
    color: var(--text-muted);
}

.grid {
    display: grid;
    gap: 16px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-tight { display: flex; flex-direction: column; gap: 2px; }

.tile-value {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.tile-unit {
    font-size: 14px;
    color: var(--text-muted);
    margin-left: 4px;
    font-weight: 400;
}

.tile-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.tile-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.btn {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    font-size: 13px;
}

.btn:hover {
    background: var(--surface-3);
    border-color: var(--surface-3);
}

.btn-primary {
    background: var(--series-1);
    border-color: var(--series-1);
    color: var(--on-accent);
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-ghost {
    background: transparent;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-secondary);
}

.chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
}

input, select, textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-primary);
    font: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(var(--accent-rgb), 0.5);
    outline-offset: -1px;
}

label.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
}

.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.empty { color: var(--text-muted); font-size: 13px; padding: 18px 0; text-align: center; }


/* Insights — severity reads from a tinted badge and a faint wash, never a coloured edge */

.insight {
    --tone: var(--text-muted);
    position: relative;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--tone) 7%, transparent), transparent 46%),
        var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 140ms ease;
}

.insight:hover { border-color: color-mix(in srgb, var(--tone) 35%, var(--border)); }

.insight[data-severity="critical"] { --tone: var(--critical); }
.insight[data-severity="warn"] { --tone: var(--warning); }
.insight[data-severity="info"] { --tone: var(--series-1); }
.insight[data-severity="good"] { --tone: var(--good); }

.insight-body { padding: 16px 18px; }

.insight-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    min-width: 0;
}

.insight-tag {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--tone) 15%, transparent);
    color: color-mix(in srgb, var(--tone) 70%, var(--text-primary));
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.insight-area {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.insight h3 {
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 6px;
}

.insight p {
    color: var(--text-secondary);
    font-size: 13.5px;
}

.insight-evidence {
    margin: 11px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.insight-evidence li {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    padding-left: 13px;
    position: relative;
}

.insight-evidence li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 8px;
    width: 4px;
    height: 4px;
    background: var(--border);
}

.insight-action {
    margin-top: 12px;
    padding: 8px 11px 8px 28px;
    position: relative;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--text-primary);
}

.insight-action::before {
    content: '→';
    position: absolute;
    left: 10px;
    top: 7px;
    color: var(--text-muted);
}


/* Paged insight deck — three across at a fixed height on wide screens, so paging never moves what sits below.
   Narrower screens stack the cards and let each one grow to its text, so nothing is clipped or overlaps */

.insight-deck {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    height: 236px;
}

.insight-compact { display: flex; overflow: hidden; }

.insight-compact .insight-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 15px 16px;
}

.insight-compact h3 { font-size: 14px; margin-bottom: 5px; }

.insight-compact h3,
.insight-compact p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pinned to the bottom so every card in a page lines up */
.insight-compact .insight-action {
    margin-top: auto;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.insight-compact p { font-size: 12.5px; margin-bottom: 12px; }

.deck-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

/* Rows sit at the top of the reserved height rather than stretching to fill it */
.paged-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

.paged-body > * { flex: 0 0 auto; }

/* One line per field, so every row is the same height and a page never outgrows what it reserved */
.paged-body .list-title,
.paged-body .list-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dock-icon:disabled { opacity: 0.28; cursor: default; }
.dock-icon:disabled:hover { background: transparent; color: var(--text-secondary); }


/* Lists and tables */

.list {
    display: flex;
    flex-direction: column;
}

.list-row {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background 100ms ease;
    border-radius: 4px;
}

.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-2); }
.list-row.is-static { cursor: default; }
.list-row.is-static:hover { background: transparent; }

.list-title { font-weight: 500; }
.list-meta { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 10px 9px 0;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 8px 10px 8px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
}

tr:last-child td { border-bottom: 0; }
td.right, th.right { text-align: right; padding-right: 0; padding-left: 14px; }
.pr-flag { color: var(--warning); font-weight: 600; }


/* Charts */

.chart { width: 100%; display: block; }
.chart-axis text { font-size: 10.5px; fill: var(--text-muted); }
.chart-grid line { stroke: var(--grid); stroke-width: 1; }
.chart-target-band { fill: var(--surface-3); }

.tooltip {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    background: rgba(15, 17, 23, 0.97);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 11px;
    font-size: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    font-variant-numeric: tabular-nums;
    max-width: 260px;
}

.tooltip-title { font-weight: 600; margin-bottom: 4px; }
.tooltip-row { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); }
.tooltip-swatch { width: 8px; height: 8px; border-radius: 2px; }

.legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
}

.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 9px; height: 9px; border-radius: 3px; }


/* Drawer */

.drawer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    justify-content: flex-end;
}

/* Must beat the display above, or the hidden attribute leaves the scrim covering the page */
.drawer[hidden] {
    display: none;
}

.drawer-scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 8, 0.7);
    backdrop-filter: blur(2px);
}

/* Set while a drawer is open — the page behind must not scroll */
body.is-locked {
    overflow: hidden;
}

.drawer-panel {
    position: relative;
    width: min(760px, 94vw);
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    border-left: 1px solid var(--border);
    padding: 24px 26px 60px;
}

.drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.set-table td { padding: 6px 10px 6px 0; }
.set-index { color: var(--text-muted); width: 34px; }


/* Console widget */

.console-launcher {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.console-launcher:hover { background: var(--surface-3); }
.console-launcher.is-open { opacity: 0; pointer-events: none; }

.console-launcher-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--series-1), var(--accent-deep));
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7);
}

.console-widget {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: 330px;
    height: 420px;
    max-height: calc(100vh - 44px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.console-widget.is-chat {
    width: 460px;
    height: 640px;
}

.console-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-soft);
}

.console-head-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-icon-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.console-icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }

.console-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.console-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.console-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.console-list-row:hover { background: var(--surface-2); }
.console-list-row.is-active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--series-1); }

.console-list-title {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-list-meta {
    font-size: 11.5px;
    color: var(--text-muted);
}

.console-chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.console-transcript {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 6px;
}

.console-msg {
    max-width: 88%;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.55;
}

.console-msg-user {
    align-self: flex-end;
    background: var(--series-1);
    color: var(--on-accent);
    border-bottom-right-radius: 3px;
}

.console-msg-agent {
    align-self: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-bottom-left-radius: 3px;
}

.console-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.console-tool {
    align-self: flex-start;
    width: 100%;
    border: 1px solid var(--border-soft);
    border-left: 2px solid var(--series-5);
    border-radius: 0 4px 4px 0;
    background: rgba(25, 28, 36, 0.6);
    overflow: hidden;
}

.console-tool.is-error { border-left-color: var(--critical); }

.console-tool-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 11px;
    cursor: pointer;
    font-size: 12px;
}

.console-tool-head:hover { background: var(--surface-2); }

.console-tool-name {
    color: var(--series-5);
    font-weight: 600;
    flex-shrink: 0;
}

.console-tool-headline {
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.console-tool-body {
    margin: 0;
    padding: 10px 12px;
    border-top: 1px solid var(--border-soft);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
}

.console-permission {
    align-self: stretch;
    padding: 13px 14px;
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    background: rgba(250, 178, 25, 0.07);
}

.console-meta {
    align-self: center;
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.console-meta-error { color: var(--critical); }

.console-thinking {
    align-self: flex-start;
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 4px 2px;
}

.console-thinking::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--series-1);
    animation: console-pulse 1.1s ease-in-out infinite;
}

@keyframes console-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

.console-composer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.console-composer textarea {
    width: 100%;
    resize: none;
}

.console-mode {
    max-width: 160px;
    font-size: 12px;
}

.console-welcome {
    margin: auto 0;
    padding: 20px 6px;
    text-align: center;
}

.console-welcome h3 { font-size: 15px; margin-bottom: 6px; }

@media (max-width: 760px) {
    .console-widget, .console-widget.is-chat {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        height: calc(100vh - 24px);
    }
}


/* Console dock */

.dock {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.dock-launcher {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    transition: transform 130ms ease, border-color 130ms ease;
}

.dock-launcher:hover { transform: translateY(-1px); border-color: var(--series-1); }

.dock-spark {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: linear-gradient(140deg, var(--series-1), var(--accent-deep));
}

.dock-launcher.is-running .dock-spark { animation: dock-pulse 1.1s ease-in-out infinite; }

.dock-badge {
    min-width: 17px;
    padding: 0 5px;
    border-radius: 4px;
    background: var(--series-1);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.dock-panel {
    display: flex;
    flex-direction: column;
    width: 380px;
    height: 460px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transition: width 160ms ease, height 160ms ease;
}

/* Opening a chat gives it room to actually work in */
.dock.is-chat .dock-panel {
    width: min(560px, calc(100vw - 44px));
    height: min(680px, calc(100vh - 60px));
}

.dock-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.dock-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.dock-icon:hover { background: var(--surface-3); color: var(--text-primary); }

.dock-icon-danger:hover { color: var(--critical); }

.dock-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 13px;
}

.dock-empty {
    margin: auto;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.dock-list { display: flex; flex-direction: column; gap: 2px; }

.dock-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.dock-list-row:hover { background: var(--surface-2); }
.dock-list-row:hover .dock-list-delete { opacity: 1; }

.dock-list-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease;
}

.dock-list-delete:hover { background: var(--surface-3); color: var(--critical); }

.dock-list-title {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-list-meta { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

.dock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--series-1);
    animation: dock-pulse 1.1s ease-in-out infinite;
}

.dock-msg { line-height: 1.55; }

.dock-msg-user {
    align-self: flex-end;
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 8px;
    border-bottom-right-radius: 2px;
    background: var(--series-1);
    color: var(--on-accent);
}

/* Keep the message exactly as it was typed — newlines and runs of spaces included */
.dock-msg-user { white-space: pre-wrap; }

.dock-answer {
    font-size: 13.5px;
    color: var(--text-primary);
    word-break: break-word;
}

/* A rule only where the working actually ends — no stray line on an answer with no steps before it */
.dock-body > :is(.dock-tool, .dock-result) + .dock-answer {
    margin-top: 5px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.dock-body > :is(.dock-tool, .dock-result) {
    border-left: 2px solid var(--border);
    padding-left: 10px;
    margin-left: 2px;
}

/* Tighten consecutive steps so the rail reads as one continuous block of work */
.dock-body > :is(.dock-tool, .dock-result) + :is(.dock-tool, .dock-result) { margin-top: -5px; }


/* Rendered markdown — the chat's prose system */

.md { line-height: 1.62; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }

.md-p { margin: 0 0 10px; }

.md-h {
    font-weight: 600;
    line-height: 1.3;
    margin: 18px 0 8px;
    color: var(--text-primary);
}

.md-h1 { font-size: 17px; }
.md-h2 { font-size: 15.5px; }
.md-h3 { font-size: 14px; }
.md-h4, .md-h5, .md-h6 { font-size: 13px; }

.md-list {
    margin: 0 0 10px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.md-list .md-list { margin: 4px 0 0; }
.md-list li::marker { color: var(--text-muted); }

.md-inline {
    padding: 1.5px 5px;
    border-radius: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    word-break: break-all;
}

.md-code {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.md-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre;
    color: var(--text-primary);
}

.md-quote {
    margin: 0 0 10px;
    padding: 2px 0 2px 12px;
    border-left: 2px solid var(--series-1);
    color: var(--text-secondary);
}

.md-rule {
    margin: 14px 0;
    border: 0;
    border-top: 1px solid var(--border);
}

.md-link { color: var(--series-1); text-decoration: none; }
.md-link:hover { text-decoration: underline; }

/* Wide tables scroll inside the message rather than stretching the dock */
.md-table-wrap {
    margin: 0 0 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.md-table {
    border-collapse: collapse;
    font-size: 12.5px;
    width: 100%;
}

.md-table th,
.md-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.md-table th {
    font-weight: 600;
    color: var(--text-primary);
    background: var(--surface-2);
}

.md-table td { color: var(--text-secondary); }
.md-table tr:last-child td { border-bottom: 0; }

.dock-tool, .dock-result {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dock-tool-icon { color: var(--series-5); flex-shrink: 0; }
.dock-tool-name { color: var(--text-primary); font-weight: 600; flex-shrink: 0; }

.dock-tool-arg {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-result { padding-left: 8px; color: var(--text-muted); cursor: default; }
.dock-result .dock-tool-icon { color: var(--border); }
.dock-result.is-error .dock-result-text { color: var(--critical); }

.dock-result-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-result.is-open .dock-result-text { white-space: pre-wrap; word-break: break-word; }
.dock-more { color: var(--series-1); cursor: pointer; flex-shrink: 0; }

.dock-permission {
    padding: 11px 12px;
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    background: rgba(250, 178, 25, 0.08);
    font-size: 12.5px;
}

.dock-permission-head { display: flex; flex-direction: column; gap: 3px; }

.dock-meta { font-size: 11.5px; color: var(--text-muted); }
.dock-meta.is-error { color: var(--critical); }

.dock-working { font-size: 12px; color: var(--text-muted); }

.dock-working::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--series-1);
    animation: dock-pulse 1.1s ease-in-out infinite;
}

/* The pickers, then one box holding the message and its send button, the same on every screen */
.dock-composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    background: var(--surface-2);
}

/* Three pickers in a narrow dock — wrap rather than squeeze */
.dock-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dock-mode {
    width: auto;
    min-width: 0;
    padding: 4px 8px;
    font-size: 11.5px;
    border-radius: 4px;
    background: var(--surface-1);
}

.dock-field {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-1);
    transition: border-color 150ms ease;
}

.dock-field:focus-within { border-color: var(--series-1); }

/* Line height and padding add up to the send button's height, so one line sits level with it */
.dock-input {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 28px;
    max-height: 130px;
    margin: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    resize: none;
    overflow-y: hidden;
    font-size: 13px;
    line-height: 20px;
}

.dock-input:focus { outline: none; }
.dock-input::placeholder { color: var(--text-muted); opacity: 1; }

.dock-send {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--series-1);
    color: var(--on-accent);
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease;
}

.dock-send svg { width: 16px; height: 16px; stroke-width: 2.4; }
.dock-send:hover { background: var(--accent-hover); }
.dock-send:active { transform: scale(0.94); }
.dock-send.is-stop { background: var(--surface-3); color: var(--text-primary); }

@keyframes dock-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}


/* Phone chrome — the app bar, tab bar and More sheet only exist below 760px */

.appbar,
.tabbar {
    display: none;
}

.sheet {
    position: fixed;
    inset: 0;
    z-index: 55;
}

.sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    animation: fade-in 180ms ease;
}

.sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 12px calc(env(safe-area-inset-bottom) + 12px);
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    background: var(--surface-1);
    animation: sheet-up 260ms cubic-bezier(0.2, 0.85, 0.25, 1);
}

.sheet-grabber {
    width: 38px;
    height: 5px;
    margin: 2px auto 14px;
    border-radius: 3px;
    background: var(--surface-3);
}

.sheet-group {
    margin-bottom: 12px;
    border-radius: 8px;
    background: var(--surface-2);
    overflow: hidden;
}

.sheet-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sheet-row:last-child { border-bottom: 0; }
.sheet-row:active { background: var(--surface-3); }
.sheet-icon { display: flex; color: var(--series-1); }
.sheet-label { flex: 1; display: flex; flex-direction: column; }
.sheet-sub { font-size: 12.5px; color: var(--text-muted); }
.sheet-chevron { display: flex; color: var(--text-muted); }

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes sheet-up {
    from { transform: translateY(100%); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* Touch screens zoom into any field set below 16px, so every field is 16px there */

@media (hover: none), (max-width: 760px) {

    input, select, textarea, .dock-input, .dock-mode {
        font-size: 16px;
    }

    /* Nothing to hover on touch, so the chat-list delete stays visible rather than hiding until hover */
    .dock-list-delete { opacity: 0.7; }
}


/* Phones — laid out like a native health app: large titles, a tab bar, full-screen sheets */

@media (max-width: 760px) {

    :root {
        --radius: 10px;
        --tabbar-height: 54px;
    }

    html { scrollbar-gutter: auto; }

    body {
        font-size: 15px;
        background: #000;
    }

    body::before {
        background:
            radial-gradient(420px 320px at 10% -6%, rgba(var(--accent-rgb), 0.14), transparent 65%),
            radial-gradient(360px 280px at 100% 0%, rgba(var(--accent-deep-rgb), 0.10), transparent 60%);
    }

    .shell { display: block; }
    .rail { display: none; }

    .appbar {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
        background: rgba(0, 0, 0, 0.78);
        backdrop-filter: saturate(170%) blur(20px);
        -webkit-backdrop-filter: saturate(170%) blur(20px);
    }

    .appbar .brand { padding: 0; }
    .appbar .brand-text { font-size: 15px; }

    .main {
        padding: 6px 16px calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 84px);
    }

    /* Large title, iOS style; header actions scroll sideways rather than stacking */
    .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 18px;
    }

    .topbar h1 { font-size: 30px; line-height: 1.12; letter-spacing: -0.035em; }
    .topbar .subtitle { font-size: 14px; }
    .topbar > .row-between { flex-direction: column; align-items: stretch; gap: 12px; }

    .topbar .row.wrap {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .topbar .row.wrap::-webkit-scrollbar { display: none; }
    .topbar .row.wrap > * { flex-shrink: 0; }

    /* Tab bar: a floating pill of dark glass, iOS 26 style, with the active tab lit from within */

    .tabbar {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: max(10px, calc(env(safe-area-inset-bottom) - 8px));
        z-index: 45;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 2px;
        padding: 5px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%),
            rgba(10, 11, 16, 0.62);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            inset 0 -1px 0 rgba(255, 255, 255, 0.03),
            0 12px 32px rgba(0, 0, 0, 0.55),
            0 2px 8px rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(26px) saturate(180%);
        -webkit-backdrop-filter: blur(26px) saturate(180%);
    }

    /* Cards and grids */

    .card { padding: 16px; }
    .stack { gap: 14px; }
    .grid { gap: 12px; }

    .grid-2, .grid-3, .grid-wide { grid-template-columns: minmax(0, 1fr); }
    .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .tile-value { font-size: 28px; }

    /* List rows drop their least useful column so the title keeps room */
    .list-row { padding: 12px 4px; }
    .list-row:active { background: var(--surface-2); }

    .table-scroll table { min-width: 100%; }
    .table-scroll th, .table-scroll td { white-space: nowrap; }

    .btn { min-height: 40px; padding: 9px 16px; font-size: 14px; border-radius: 6px; }
    .btn-sm { min-height: 36px; padding: 7px 13px; font-size: 13px; }
    .btn:active { transform: scale(0.97); }

    input, select, textarea { padding: 11px 12px; border-radius: 6px; }

    /* Detail drawers become full-screen pages that slide up */
    .drawer-panel {
        width: 100%;
        border-left: 0;
        padding: 0 16px calc(env(safe-area-inset-bottom) + 40px);
        animation: sheet-up 280ms cubic-bezier(0.2, 0.85, 0.25, 1);
    }

    .drawer-head {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 -16px 16px;
        padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
        background: rgba(8, 9, 13, 0.9);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--border-soft);
    }

    .drawer-head h2 { font-size: 20px; }

    .tooltip { max-width: calc(100vw - 24px); }

    /* Ask Claude: a floating button above the tab bar, then a full-screen chat */

    .dock {
        right: 16px;
        bottom: calc(max(10px, env(safe-area-inset-bottom) - 8px) + var(--tabbar-height) + 26px);
    }

    .dock-launcher {
        height: 46px;
        padding: 0 18px;
        font-size: 14px;
        font-weight: 600;
        background: var(--surface-2);
        border-color: var(--surface-3);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
    }

    .dock-spark { width: 11px; height: 11px; }

    /* Out of the way while a drawer or the More sheet owns the screen */
    body.is-locked .dock:not(.is-open) { display: none; }

    /* Pinned to the visible viewport, which shrinks when the keyboard opens */
    .dock.is-open {
        top: var(--vv-top, 0px);
        left: 0;
        right: 0;
        bottom: auto;
        height: var(--vv-height, 100dvh);
        gap: 0;
    }

    .dock.is-open .dock-panel,
    .dock.is-open.is-chat .dock-panel {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
        background: #000;
        box-shadow: none;
        animation: sheet-up 280ms cubic-bezier(0.2, 0.85, 0.25, 1);
    }

    .dock-head {
        gap: 4px;
        min-height: 56px;
        padding: calc(env(safe-area-inset-top) + 6px) 8px 6px;
        background: rgba(10, 11, 15, 0.92);
        border-bottom-color: var(--border-soft);
    }

    .dock-title { font-size: 16px; text-align: center; }

    .dock-icon { width: 40px; height: 40px; border-radius: 6px; }
    .dock-icon svg { width: 20px; height: 20px; }

    .dock-body { padding: 16px; gap: 12px; font-size: 15px; }
    .dock-answer { font-size: 15px; }
    .dock-msg-user { max-width: 82%; padding: 10px 14px; border-radius: 10px; border-bottom-right-radius: 3px; }

    .dock-list-row { min-height: 56px; padding: 12px; font-size: 15px; }
    .dock-list-title { font-size: 15px; }
    .dock-list-delete { width: 36px; height: 36px; font-size: 20px; }

    .dock-tool, .dock-result { font-size: 12.5px; }

    .dock-composer {
        gap: 8px;
        padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px);
        background: rgba(10, 11, 15, 0.95);
    }

    .dock-options { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .dock-options::-webkit-scrollbar { display: none; }

    .dock-mode {
        flex-shrink: 0;
        padding: 5px 10px;
        border-radius: 4px;
        background: var(--surface-2);
        color: var(--text-secondary);
    }

    /* 22px line + 9px top and bottom = the 40px button, so the text, the hint and the button share a centre line */
    .dock-field { gap: 8px; padding: 3px 3px 3px 14px; border-radius: 22px; }

    .dock-input {
        min-height: 40px;
        max-height: 140px;
        padding: 9px 0;
        border-radius: 0;
        line-height: 22px;
    }

    .dock-send { width: 40px; height: 40px; border-radius: 50%; }
    .dock-send svg { width: 18px; height: 18px; }
}

/* Polish — a faint top light on every card, and a calmer section title */

.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 120px), var(--surface-1);
}

.card-title {
    font-size: 11.5px;
    letter-spacing: 0.08em;
}

.list-row:hover, .advice-row:hover { background: rgba(255, 255, 255, 0.03); }

.chart-grid line { stroke-dasharray: 2 4; }
.chart-grid line.chart-baseline { stroke-dasharray: none; stroke: var(--border); }

/* Sign-in — the dashboard's own page, on its own domain */

.signin-page {
    min-height: 100vh;
    min-height: 100dvh;
}

.signin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

.signin-brand { font-size: 16px; }

.signin-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 380px;
    padding: 24px;
}

.signin-title {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.signin-note { margin: 0; font-size: 13px; }

.signin-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 16px stops iOS zooming in on the field */
.signin-card input { font-size: 16px; padding: 10px 12px; }

.signin-wide {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
}

.signin-wide:disabled { opacity: 0.6; cursor: default; }

.signin-or {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
}

.signin-or::before, .signin-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.signin-message {
    margin: 0;
    min-height: 1.5em;
    font-size: 13px;
    color: var(--text-secondary);
}

.signin-message:empty { display: none; }
.signin-message.is-error { color: var(--critical); }

.signin-link {
    align-self: center;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.signin-link:hover { color: var(--text-primary); }


/* Loading — a shimmering outline of the page, then the real one fades in over it */

.sk {
    border-radius: 5px;
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s ease-in-out infinite;
}

@keyframes sk-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.sk-card { display: flex; flex-direction: column; gap: 10px; }
.sk-tile { min-height: 150px; }
.sk-banner { height: 64px; border-radius: var(--radius); }
.sk-ring-card { align-items: center; justify-content: center; min-height: 190px; }
.sk-ring { width: 104px; height: 104px; border-radius: 50%; margin-bottom: 4px; }
.sk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sk-day { height: 120px; border-radius: var(--radius-sm); }
.sk-chart { height: 200px; border-radius: var(--radius-sm); }
.sk-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.sk-row:last-child { border-bottom: 0; }

.view-enter { animation: view-enter 0.25s ease-out; }

@keyframes view-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
    .sk-week { grid-template-columns: minmax(0, 1fr); }
    .sk-day { height: 44px; }
    .sk-day:nth-child(n + 4) { display: none; }
    .sk-ring-card { min-height: 150px; }
    .sk-ring { width: 84px; height: 84px; }
    .sk-tile { min-height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
    .sk, .view-enter { animation: none; }
}
.card.is-link:hover { border-color: var(--text-muted); }

.table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}


/* Coaching — notes from Hevy and the advice built on them */

.note-quote {
    margin: 6px 0 0;
    padding: 6px 10px;
    border-left: 2px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    font-style: italic;
}

/* Notes — Claude's short read, newest first at the top of the overview */

.notes-banner {
    background: linear-gradient(135deg, rgba(var(--accent-deep-rgb), 0.10), rgba(var(--accent-rgb), 0.05) 60%, transparent), var(--surface-1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-deep);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.notes-toggle {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.notes-banner.is-open .note-item + .note-item {
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}

.note-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.note-kind {
    color: var(--accent-label);
    font-weight: 600;
}

.note-kind.kind-wake { color: var(--accent-label); }

.note-kind.kind-day { color: var(--series-4); }

.note-kind.kind-lift { color: var(--series-1); }

.note-kind.kind-activity { color: var(--series-2); }

.note-title {
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

.note-body {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.note-review-hint {
    display: inline-block;
    margin-top: 8px;
    color: var(--series-1);
    font-size: 13px;
    font-weight: 600;
}

.note-review {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}

.note-review-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.review-went_well .note-review-label { color: var(--series-2); }

.review-didnt_go_well .note-review-label { color: var(--critical); }

.review-next_time .note-review-label { color: var(--series-1); }

.note-review ul {
    margin: 4px 0 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.note-review li + li {
    margin-top: 4px;
}

.notes-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}

.notes-more {
    margin-left: auto;
    color: var(--series-5);
}

.note-writing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.note-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--series-5);
    animation: note-pulse 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .note-pulse { animation: none; }
}


/* Phones — the tab bar and the rest of the chrome only phones have */

@media (hover: none), (max-width: 760px) {
    button, .list-row, .dock-list-row, .tab { -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 760px) {
    .tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        height: var(--tabbar-height);
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.01em;
        cursor: pointer;
        transition: background-color 200ms ease, color 200ms ease;
    }
    .tab.is-active {
        background: rgba(255, 255, 255, 0.09);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .tab-icon { display: flex; transition: transform 160ms ease; }
    .tab:active .tab-icon { transform: scale(0.88); }
    .tab.is-active, .tab.is-open { color: var(--text-primary); }
    .tab.is-active .tab-icon, .tab.is-open .tab-icon { color: var(--series-1); }
    html:has(body.is-chat-open), body.is-chat-open { overflow: hidden; }
    .dock.has-keyboard .dock-composer { padding-bottom: 8px; }
}

@media (max-width: 640px) {
    /* A table that scrolls sideways keeps its first column in view */
    .table-scroll:not(.table-cards) th:first-child,
    .table-scroll:not(.table-cards) td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--surface-1);
        box-shadow: 1px 0 0 var(--border-soft);
        padding-left: 0;
    }
    .table-scroll:not(.table-cards) th:nth-child(2),
    .table-scroll:not(.table-cards) td:nth-child(2) { padding-left: 10px; }
    /* Transactions stack into two-line cards: what and how much, then when, where and the balance after */
    .table-cards thead { display: none; }
    .table-cards table, .table-cards tbody { display: block; min-width: 0; }
    .table-cards tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 3px 12px;
        padding: 11px 0;
        border-bottom: 1px solid var(--border-soft);
    }
    .table-cards tr:last-child { border-bottom: 0; }
    .table-cards td { display: block; padding: 0; border: 0; white-space: normal; }
    .table-cards td.col-date, .table-cards td.col-account { display: none; }
    .table-cards td.col-details { grid-column: 1; grid-row: 1 / span 2; min-width: 0; overflow-wrap: anywhere; }
    .table-cards td.col-amount { grid-column: 2; grid-row: 1; font-weight: 500; white-space: nowrap; }
    .table-cards td.col-balance { grid-column: 2; grid-row: 2; font-size: 12px; white-space: nowrap; }
}