: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-1: #22b573;
    --series-2: #d95926;
    --series-3: #3987e5;
    --series-4: #c98500;
    --series-5: #9085e9;
    --series-6: #d55181;

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

    --accent-deep: #0f8a62;
    --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(34, 181, 115, 0.10), transparent 62%),
        radial-gradient(700px 420px at 92% 4%, rgba(15, 138, 98, 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(34, 181, 115, 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(34, 181, 115, 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: #04140d;
    font-weight: 600;
}

.btn-primary:hover {
    background: #3fcb8b;
    border-color: #3fcb8b;
}

.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(34, 181, 115, 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; }
.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(34, 181, 115, 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: #04140d;
    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: #04140d;
    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: #04140d;
}

/* 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;
}

.dock-composer {
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    background: var(--surface-2);
}

.dock-input {
    width: 100%;
    resize: none;
    border: 0;
    background: transparent;
    padding: 4px 2px;
    font-size: 13px;
    line-height: 1.45;
    max-height: 130px;
}

.dock-input:focus { outline: none; }

.dock-composer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

/* Three pickers in a narrow dock — wrap rather than squeeze the send button */
.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-send {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 0;
    border-radius: 6px;
    background: var(--series-1);
    color: #04140d;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.dock-send:hover { background: #3fcb8b; }

@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; }

    button, .list-row, .dock-list-row, .tab { -webkit-tap-highlight-color: transparent; }
}


/* 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(34, 181, 115, 0.14), transparent 65%),
            radial-gradient(360px 280px at 100% 0%, rgba(15, 138, 98, 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; }

    .appbar-sync {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 8px;
        background: var(--surface-2);
        color: var(--text-secondary);
        cursor: pointer;
    }

    .appbar-sync svg { width: 19px; height: 19px; }
    .appbar-sync.is-syncing { color: var(--series-1); }
    .appbar-sync.is-syncing svg { animation: spin 900ms linear infinite; }

    .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%);
    }

    .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); }

    /* 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; }

    /* Today: the rings lead, full width, with the week's tiles paired beneath */
    .today-card { grid-column: 1 / -1; order: -1; }
    .today-card .rings { gap: 8px; }
    .today-card .ring-card { padding: 14px 4px; }
    .today-card .ring-figure { width: 84px !important; height: 84px !important; }
    .today-card .ring-svg { width: 100%; height: 100%; }
    .today-card .ring-value { font-size: 24px; }
    .today-card .ring-label { font-size: 11px; margin-top: 6px; }
    .today-card .ring-sub { font-size: 11px; line-height: 1.35; padding: 0 2px; }

    .week-strip {
        display: flex;
        gap: 10px;
        margin: 0 -16px;
        padding: 0 16px 2px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .week-strip::-webkit-scrollbar { display: none; }
    .week-day { flex: 0 0 44%; scroll-snap-align: start; }

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

    .row-exercise { grid-template-columns: 38px minmax(0, 1fr) auto auto !important; }
    .row-exercise > :nth-child(4) { display: none; }

    .row-session { grid-template-columns: 58px minmax(0, 1fr) auto !important; }
    .row-session > :nth-child(3) { display: none; }

    .row-routine { grid-template-columns: minmax(0, 1fr) auto auto !important; }
    .row-routine > :nth-child(2), .row-routine > :nth-child(3) { display: none; }

    .row-run { grid-template-columns: 52px minmax(0, 1fr) auto auto !important; gap: 10px; }
    .row-run > * { min-width: 0 !important; }

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

    .rpe-row { grid-template-columns: 110px minmax(0, 1fr) 36px; }
    .plan-day { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .map { height: 260px; }
    .mv-stage { gap: 10px; }
    .mv-figure { max-width: 46%; height: auto; }

    .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; }

    html:has(body.is-chat-open), body.is-chat-open { overflow: hidden; }

    /* 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; }

    /* Options above, then the message box with its send button beside it */
    .dock-composer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "options options" "input send";
        align-items: end;
        gap: 8px;
        padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px);
        background: rgba(10, 11, 15, 0.95);
    }

    .dock.has-keyboard .dock-composer { padding-bottom: 8px; }

    .dock-composer-row { display: contents; }
    .dock-options { grid-area: 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);
    }

    .dock-input {
        grid-area: input;
        min-height: 44px;
        max-height: 140px;
        padding: 10px 16px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-1);
        line-height: 1.4;
    }

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

    .dock-send {
        grid-area: send;
        width: 44px;
        height: 44px;
        font-size: 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); }


@media (max-width: 1080px) {
    .week-ahead { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 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; }
}