/* ── CalorieTracker — printed-ledger design system ────────────────────────────
   Ink on paper. Hairline rules instead of cards. Monospaced numerals, condensed
   display type. Density is the point. There is no dark mode.
   Ported from the design handoff (design_handoff_calorietracker).            */

:root {
    /* Core palette */
    --ink: #232019;             /* masthead, primary text, rules */
    --paper: #F5F2E9;           /* body background, text on ink */
    --gold: #D8A03C;            /* primary accent, action buttons, active tab */
    --red: #B4452C;             /* destructive, over-limit, progress fill */

    --ink-muted: #9B937F;       /* eyebrow text, inactive tabs (on ink) */
    --muted: #8B8474;           /* labels, secondary mono (on paper) */
    --body-muted: #6E6759;      /* macro values in rows */
    --faint: #B4A98C;           /* section counts */

    --hairline: rgba(35, 32, 25, 0.12);
    --hairline-strong: rgba(35, 32, 25, 0.22);
    --rule: rgba(35, 32, 25, 0.25);     /* stats-band / progress underline */
    --row-hover: #EDE8DA;

    /* Rules and control borders drawn *on* ink (header, sidebar) */
    --on-ink-hairline: rgba(245, 242, 233, 0.14);

    /* Aliases kept so existing markup inherits the new language unchanged */
    --accent: var(--gold);
    --accent-ink: var(--ink);
    --surface: var(--paper);            /* no cards — surface *is* paper */
    --chip: #EDE8DA;
    --glyph-bg: #EDE8DA;
    --eaten-bg: rgba(216, 160, 60, 0.10);

    /* Macro colours, retuned to the ledger palette */
    --cal: #232019;
    --protein: #B4452C;
    --carbs: #D8A03C;
    --fat: #6E6759;

    /* Type */
    --display: 'Anton', system-ui;                  /* titles, uppercase */
    --body: 'Archivo', system-ui;                   /* body + inputs */
    --mono: 'IBM Plex Mono', ui-monospace, monospace; /* numerals + labels */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font-family: inherit; }
::selection { background: rgba(216, 160, 60, 0.32); }

#app *::-webkit-scrollbar { width: 0; height: 0; }
#app * { scrollbar-width: none; }

/* Numerals are always mono — !important so the many inline `font-family:var(--display)`
   numeric spans across the pages resolve to mono rather than Anton. */
.num {
    font-family: var(--mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
}

.boot-splash {
    min-height: 100vh;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-family: var(--mono);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* ── Ledger primitives ─────────────────────────────────────────────────────── */

/* Mono label: the 9–11px uppercase tracking-wide text used for every label. */
.led-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
}

.led-eyebrow {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* Section header: label · optional P·C·F column head · total, on a 1.5px ink rule. */
.led-sec {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 17px 8px 6px;
    border-bottom: 1.5px solid var(--ink);
}

.led-sec-label {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink);
}

.led-sec-spacer { flex: 1; }

.led-sec-cols {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    color: var(--muted);
}

.led-sec-total {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Count on the right of a library section header (FOODS / LIFTS). */
.led-sec-count {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--faint);
}

/* Entry row: badge · name(+qty) · macros · kcal. Never a card. */
.led-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hairline);
    padding: 9px 8px 10px;
    cursor: pointer;
    font-family: var(--body);
    color: var(--ink);
}

/* Translucent so it layers over a meal group's colour wash instead of erasing it. */
.led-row:hover { background: rgba(35, 32, 25, 0.05); }

.led-badge {
    flex: none;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
}

.led-name {
    flex: 1;
    min-width: 0;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ink);
}

.led-qty {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    /* Razor strips the leading space inside this span, so the gap off the name is set here. */
    margin-left: 5px;
}

.led-macros {
    flex: none;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--body-muted);
    font-variant-numeric: tabular-nums;
}

.led-kcal {
    flex: none;
    font-family: var(--mono);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Sub-line under a row name (lift history, session meta). */
.led-sub {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

/* ── Swipe-to-delete ───────────────────────────────────────────────────────── */
.swipe {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline);
}

.swipe > .led-row { border-bottom: none; }

.swipe-del {
    position: absolute;
    inset: 0;
    background: var(--red);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    padding-right: 16px;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    border: none;
    cursor: pointer;
    width: 100%;
}

.swipe-face {
    position: relative;
    background: var(--paper);
    touch-action: pan-y;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.swipe-face.dragging { transition: none; }

/* ── Progress: segmented dotted track ──────────────────────────────────────── */
.dot-track {
    flex: 1;
    height: 8px;
    background: repeating-linear-gradient(90deg,
        rgba(35, 32, 25, 0.14) 0 4px, transparent 4px 8px);
    position: relative;
}

.dot-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--red);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.dot-fill.gold { background: var(--gold); }

/* ── In-app loading indicator ──────────────────────────────────────────────── */
.loading-wrap {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 24px;
    text-align: center;
}

.loading-bar {
    width: 180px;
    height: 8px;
    background: repeating-linear-gradient(90deg,
        rgba(35, 32, 25, 0.14) 0 4px, transparent 4px 8px);
    overflow: hidden;
    position: relative;
}

.loading-bar span {
    position: absolute;
    top: 0;
    height: 100%;
    width: 40%;
    background: var(--gold);
    animation: loading-slide 1.15s ease-in-out infinite;
}

@keyframes loading-slide {
    0% { left: -40%; }
    100% { left: 100%; }
}

.loading-text {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── Responsive visibility (breakpoint 880px) ──────────────────────────────── */
.mob-only { display: block; }

@media (min-width: 880px) {
    .mob-only { display: none !important; }
}

/* ── App shell ─────────────────────────────────────────────────────────────── */
/* Mobile: full-bleed ink masthead pinned to the top, paper body scrolling under.
   Desktop (≥880px): the restyled sidebar returns alongside the same paper body. */
.shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
}

.main-area { min-width: 0; flex: 1; display: flex; flex-direction: column; }
/* The bottom padding clears the fixed mobile tab bar. It belongs here rather than on
   .screen-pad so a page that doesn't use that class (Workouts, the Citadel's own body)
   still can't strand its last row underneath the bar. Desktop resets it below. */
.main-content { margin: 0 auto; width: 100%; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

@media (min-width: 880px) {
    .shell { flex-direction: row; }

    .main-area {
        flex: 1;
        height: 100vh;
        overflow-y: auto;
    }

    .main-content { padding: 0 40px 72px; }
    /* Today drives its own two-column grid, so it takes the full width and pads itself. */
    .main-content.w-today { max-width: none; padding: 0; }
    /* Foods and Meals are full-bleed: their rails and panes run to the window edges. */
    .main-content.w-foods, .main-content.w-meals, .main-content.w-plans,
    .main-content.w-log, .main-content.w-lifts,
    .main-content.w-account, .main-content.w-citadel,
    .main-content.w-walls, .main-content.w-record { max-width: none; padding: 0; }
    .main-content.w-wide { max-width: 1240px; }
}

/* Bottom padding: the masthead is at the top, so this is just breathing room. The fixed tab
   bar's own clearance lives on .main-content, so every page clears it — not just the ones
   that opt into this class. */
.screen-pad { padding-bottom: 56px; }

/* Mobile gutters — 24px per the handoff, collapsing on desktop */
.gutter { padding-left: 24px; padding-right: 24px; }

@media (min-width: 880px) {
    .gutter { padding-left: 0; padding-right: 0; }
}

/* ── Masthead (mobile chrome) ──────────────────────────────────────────────── */
.masthead {
    background: var(--ink);
    color: var(--paper);
    /* The bottom bar took the tab row's job, so the masthead closes itself off. A group that still
       has a sub-tab row adds .has-tabs and hands the padding back to it. */
    padding: 22px 24px 20px;
    padding-top: calc(22px + env(safe-area-inset-top));
    flex: none;
    position: sticky;
    top: 0;
    z-index: 60;
    transition: opacity 0.25s ease;
}

/* A group with children ends on its sub-tab row, which brings its own bottom space. */
.masthead.has-tabs { padding-bottom: 0; }

/* Desktop-only masthead slots — on mobile these controls live in the page body. */
.mast-control, .mast-status, .mast-spacer, .mast-action-label { display: none; }

@media (min-width: 880px) {
    /* The whole masthead collapses to one 52px bar: eyebrow · rule · title · control ·
       spacer · status · action, all on a single baseline. */
    .masthead {
        /* Sticky, not static: the bar holds while the body scrolls under it. */
        position: sticky;
        top: 0;
        height: 52px;
        padding: 0 22px;
        display: flex;
        align-items: center;
        gap: 16px;
        border-bottom: 1px solid var(--on-ink-hairline);
    }

    .masthead .led-eyebrow {
        flex: none;
        font-size: 10px;
        letter-spacing: 1px;
        white-space: nowrap;
    }
}

/* ── Desktop header controls ───────────────────────────────────────────────── */
/* Date stepper (Today) and search line (Foods) share the on-ink outline. */
.hdr-stepper {
    display: flex;
    align-items: center;
    height: 26px;
    border: 1px solid rgba(245, 242, 233, 0.2);
    flex: none;
}

.hdr-stepper button {
    width: 26px;
    height: 100%;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--paper);
    display: grid;
    place-items: center;
    padding: 0;
}

.hdr-stepper button:disabled { color: #4E483C; cursor: default; }

.hdr-stepper .label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--paper);
    padding: 0 10px;
    white-space: nowrap;
}

.hdr-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 28px;
    flex: 1;
    min-width: 0;
    max-width: 460px;
    border: 1px solid rgba(245, 242, 233, 0.2);
    padding: 0 11px;
    color: var(--ink-muted);
}

.hdr-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    color: var(--paper);
}

.hdr-search input::placeholder { color: var(--ink-muted); }

/* Sync dot + label */
.hdr-sync {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}

.hdr-sync-dot { width: 5px; height: 5px; flex: none; }
.hdr-sync-dot.ok { background: #7FA05A; }
.hdr-sync-dot.busy { background: var(--gold); }
.hdr-sync-dot.off { background: var(--red); }

.mast-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 8px 0 0;
    min-height: 50px;
}

.mast-title {
    font-family: var(--display);
    font-size: 29px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--paper);
    text-wrap: pretty;
    min-width: 0;
}

.mast-title .accent { color: var(--gold); }

/* Editable title (active workout session) */
.mast-title-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    outline: none;
    font-family: var(--display);
    font-size: 29px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--paper);
}

.mast-title-input::placeholder { color: var(--ink-muted); }

.mast-action {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: var(--gold);
    color: var(--ink);
    display: grid;
    place-items: center;
    flex: none;
    padding: 0;
}

/* Gold pill in the masthead (FINISH) */
.mast-pill {
    flex: none;
    background: var(--gold);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    padding: 8px 16px 9px;
}

/* Tab row */
.mast-tabs {
    display: flex;
    align-items: stretch;
    gap: 13px;
    margin-top: 12px;
    overflow-x: auto;
}

.mast-tabs::-webkit-scrollbar { display: none; }

.mast-tabs a {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 0 11px;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
}

.mast-tabs a.on {
    color: var(--paper);
    border-bottom-color: var(--gold);
}

/* Everything here overrides a base masthead rule declared above, so the block has to sit after
   them — equal specificity, last one wins. */
@media (min-width: 880px) {
    /* Desktop navigates from the sidebar, so the tab row retires. The bottom bar is retired
       next to its own rules further down — it's declared after this block, and equal
       specificity means the later declaration would win from here. */
    .mast-tabs { display: none; }

    /* The title row becomes the bar's horizontal track. */
    .mast-title-row {
        flex: 1;
        min-width: 0;
        margin: 0;
        min-height: 0;
        gap: 16px;
        justify-content: flex-start;
    }

    /* Hairline between the eyebrow and the title. */
    .mast-title-row::before {
        content: '';
        flex: none;
        width: 1px;
        height: 18px;
        background: rgba(245, 242, 233, 0.18);
    }

    .mast-title {
        flex: none;
        min-width: 0;
        max-width: 46%;
        font-size: 19px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mast-title-input { font-size: 19px; flex: none; width: 260px; }

    .mast-spacer { display: block; flex: 1; min-width: 0; }
    .mast-control { display: flex; align-items: center; min-width: 0; }
    .mast-status { display: flex; align-items: center; gap: 7px; flex: none; }

    /* The action grows a label and squares off at desktop size. */
    .mast-action {
        width: auto;
        height: 28px;
        border-radius: 0;
        padding: 0 12px;
        gap: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .mast-action-label { display: inline; }
    .mast-action svg { width: 12px; height: 12px; }

    .mast-pill { font-size: 12px; padding: 6px 14px 7px; }
}

/* ── Today: stats band ─────────────────────────────────────────────────────── */
.stats-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--rule);
}

.stat-col {
    padding: 15px 0 12px;
    border-right: 1px solid rgba(35, 32, 25, 0.15);
}

.stat-col + .stat-col { padding-left: 13px; }
.stat-col:last-child { border-right: none; }

.stat-l {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--body-muted);
}

.stat-v {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat-t {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--body-muted);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

.progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
}

.progress-row .pct {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    flex: none;
    font-variant-numeric: tabular-nums;
}

/* ── Ink action bar (multi-select) ─────────────────────────────────────────── */
.ink-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: var(--ink);
    padding: 15px 24px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 11px;
    box-shadow: 0 -8px 30px rgba(35, 32, 25, 0.35);
}

.ink-bar .count {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--ink-muted);
    flex: 1;
    min-width: 0;
}

.ink-bar .pill-clear {
    background: none;
    border: 1px solid rgba(245, 242, 233, 0.35);
    border-radius: 999px;
    cursor: pointer;
    color: var(--paper);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 15px 9px;
}

.ink-bar .pill-go {
    background: var(--gold);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: var(--ink);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 17px 9px;
    white-space: nowrap;
}

.ink-bar input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(245, 242, 233, 0.35);
    outline: none;
    color: var(--paper);
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    padding: 6px 0;
}

.ink-bar input::placeholder { color: var(--ink-muted); }

/* ── Desktop sidebar (restyled: ink rail, mono nav) ────────────────────────── */
.sidebar {
    display: none;
    width: 200px;
    flex-shrink: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    background: var(--ink);
    color: var(--paper);
    flex-direction: column;
    padding: 0;
}

@media (min-width: 880px) {
    .sidebar { display: flex; }
}

/* Logo block is 52px so it lines up with the header bar beside it. */
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    flex: none;
    padding: 0 16px;
    border-bottom: 1px solid var(--on-ink-hairline);
}

.sidebar-logo-tile {
    width: 26px;
    height: 26px;
    background: var(--gold);
    color: var(--ink);
    display: grid;
    place-items: center;
    flex: none;
}

.sidebar-logo-name {
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--paper);
    white-space: nowrap;
}

.sidebar-logo-sub {
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--gold);
}

.sidebar nav { display: flex; flex-direction: column; overflow-y: auto; }

/* Group label sits over a rule that runs the full width. */
.nav-group {
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 14px 16px 6px;
    border-bottom: 1px solid var(--on-ink-hairline);
}

.nav-group:first-child { padding-top: 12px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 18px;
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav-item:hover { color: var(--paper); }

.nav-item.on {
    color: var(--paper);
    padding-left: 16px;
    border-left-color: var(--gold);
    background: rgba(245, 242, 233, 0.07);
}

.nav-item .nav-label { flex: 1; min-width: 0; }

/* Trailing count / state marker */
.nav-count {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.nav-item.on .nav-count { color: var(--gold); }
.nav-count.live { color: var(--red); }

.sidebar-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    flex: none;
    padding: 0 14px 0 16px;
    border-top: 1px solid var(--on-ink-hairline);
}

/* ── Mobile bottom tab bar ─────────────────────────────────────────────────── */
/* Five grouped destinations in thumb reach: Today · Library · Train · Build · You.
   Replaces the masthead's all-destinations row, which now carries only the current
   group's children. Desktop retires it — the sidebar lists everything.

   z-index sits below .ink-bar (fixed-bottom ink at 95) so it covers the bar rather than
   fighting it, which is the behaviour the tab row had. */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--ink);
    border-top: 1px solid var(--on-ink-hairline);
    padding: 10px 8px 6px;
    /* The inset clears the iPhone home indicator (index.html opts in with viewport-fit=cover);
       the 9px base lifts the labels off it rather than leaving them flush against it. */
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
}

.tabbar a {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 5px;
    min-height: 44px;
    padding: 0 2px;
    text-decoration: none;
    color: var(--ink-muted);
    transition: color 0.15s ease;
}

.tabbar a.on { color: var(--gold); }

.tabbar a span {
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Has to sit here rather than in the shared 880px block above: that block is declared before
   .tabbar, and at equal specificity the later declaration would win and keep the bar visible. */
@media (min-width: 880px) {
    .tabbar { display: none; }
}

/* ── Offline indicator ─────────────────────────────────────────────────────── */
.offline-pill {
    position: sticky;
    top: 0;
    z-index: 55;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gold);
    padding: 6px 14px 7px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink);
}

.offline-pill .dot {
    width: 6px;
    height: 6px;
    background: var(--ink);
    flex-shrink: 0;
}

.offline-pill .dot.pulse { animation: pill-pulse 1.2s ease-in-out infinite; }

@keyframes pill-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}


/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--body);
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 999px;
    padding: 13px 20px 14px;
    font-size: 14px;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.btn:disabled { opacity: 0.4; cursor: default; }

.btn-lg { padding: 14px 22px 15px; font-size: 15px; }
.btn-full { width: 100%; }

.btn-primary { background: var(--red); color: var(--paper); }
.btn-soft { background: none; border: 1px solid var(--hairline-strong); color: var(--ink); }
.btn-danger { background: none; border: 1px solid var(--red); color: var(--red); }

.icon-btn {
    width: 28px;
    height: 28px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    padding: 0;
    transition: color 0.15s;
}

.icon-btn:hover { color: var(--ink); }
.icon-btn.danger { color: var(--red); }

/* Mono text action (DONE / CANCEL / APPLY) */
.text-btn {
    border: none;
    background: none;
    color: var(--red);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
}

.text-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Cards: flattened to plain paper blocks with a hairline top rule ───────── */
.card {
    background: var(--paper);
    border: none;
    box-shadow: none;
    border-radius: 0 !important;
}

/* ── Search field: a mono ledger line, not a box ───────────────────────────── */
.search-box {
    display: flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hairline-strong);
    border-radius: 0;
    padding: 12px 0;
    height: auto;
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--mono);
    font-size: 16px;   /* not smaller — under 16px iOS zooms the page on focus */
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--ink);
    min-width: 0;
}

.search-box input::placeholder {
    color: var(--muted);
    text-transform: uppercase;
}

.search-box .clear-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted);
    padding: 2px;
    display: grid;
    place-items: center;
}


/* ── Form fields: underlined ledger inputs ─────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }

.field-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
}

.field-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--hairline-strong);
    border-radius: 0;
    padding: 0;
    height: 42px;
}

.field-box:focus-within { border-bottom-color: var(--ink); }

.field-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--body);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    min-width: 0;
    width: 100%;
}

.field-box input.center { text-align: center; font-family: var(--mono); }

.field-suffix {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
}

/* Brand, set as an eyebrow over the food name. Takes .led-eyebrow's shape, but not its colour:
   that one is --ink-muted for the masthead's dark ground, which washes out on paper. */
.food-brand {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 0 0 5px;
    background: none;
    border: none;
    outline: none;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--body-muted);
}

.food-brand::placeholder { color: var(--muted); font-weight: 500; text-transform: none; }

/* Confirms a serving text was read as a weight, so "1 Rice Cake (9g)" visibly differs from
   "1 Rice Cake" — the difference decides whether the food can be logged by weight at all. */
.serv-note {
    padding: 9px 0 2px;
    font-family: var(--body);
    font-size: 12px;
    line-height: 1.5;
    color: var(--body-muted);
}

/* Four-up macro grid (add-food sheet): labels over centred numeric inputs */
.macro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.macro-grid > * {
    padding: 12px 6px;
    border-right: 1px solid var(--hairline);
    text-align: center;
}

.macro-grid > *:last-child { border-right: none; }

.macro-grid input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
    font-family: var(--mono);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 5px;
}

/* Nutrition-label panel (add-food sheet): the label lines past the four macros, collapsed
   behind a toggle so the sheet still opens on a single screen. */
.lbl-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 0 13px;
    border: none;
    border-bottom: 1px solid var(--hairline);
    background: none;
    cursor: pointer;
    text-align: left;
}

.lbl-toggle .led-label { flex: 1; }

.lbl-count {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--paper);
    background: var(--ink);
    border-radius: 999px;
    padding: 1px 6px 2px;
}

.lbl-caret {
    font-size: 9px;
    color: var(--muted);
    line-height: 1;
}

.lbl-panel { padding: 4px 0 2px; }

.lbl-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--hairline);
}

.lbl-name {
    flex: 1;
    min-width: 0;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

/* Sub-lines of the label sit indented under their parent, as the printed panel sets them. */
.lbl-name.in {
    padding-left: 14px;
    font-weight: 500;
    color: var(--body-muted);
}

.lbl-row input {
    width: 72px;
    flex: none;
    border: none;
    outline: none;
    background: transparent;
    text-align: right;
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.lbl-row input::placeholder { color: var(--muted); font-weight: 500; }

.lbl-unit {
    flex: none;
    width: 26px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

/* ── Pills / chips ─────────────────────────────────────────────────────────── */
.pill-btn {
    padding: 6px 13px 7px;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--hairline-strong);
    background: transparent;
    color: var(--ink);
}

.pill-btn.on {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}

.pill-btn:disabled { opacity: 0.4; cursor: default; }

.time-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 4px;
    cursor: pointer;
    border: 1px solid var(--hairline-strong);
    background: transparent;
    color: var(--muted);
}

.time-btn.on {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}

.time-btn span {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* ── Quantity field (typed, not tapped) ────────────────────────────────────── */
/* The ledger's underlined field, sized down to a number you type: no +/- buttons. */
.qty-field {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    flex: none;
    border-bottom: 1.5px solid var(--hairline-strong);
    padding: 2px 2px 4px;
}

.qty-field:focus-within { border-bottom-color: var(--ink); }

.qty-field input {
    width: 58px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-family: var(--mono);
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.qty-suffix {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.qty-field.lg { padding-bottom: 2px; }
.qty-field.lg input {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 400;
    width: 82px;
}

/* ── Amount field (a quantity plus the unit it was typed in) ───────────────── */
/* The unit strip sits under the number rather than beside it: beside, it competes with the
   underlined field for the same baseline and the row stops reading as one control. */
.amount-field {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: none;
}

.amount-units {
    display: inline-flex;
    gap: 2px;
    background: var(--chip);
    border-radius: 8px;
    padding: 2px;
}

.amount-unit {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 3px 7px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--muted);
    cursor: pointer;
    line-height: 1.4;
}

.amount-unit.on {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.10);
}

.amount-field.lg .amount-unit {
    font-size: 12px;
    padding: 4px 10px;
}

/* One ingredient line in the recipe builder. On a phone the name and the amount stack: side by
   side at 375px the name is left with ~120px, which wraps a real food name to three lines, and
   the unit buttons shrink to about 21px square — too small to hit with a thumb. */
.recipe-ing {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--chip);
    border-radius: 14px;
    padding: 9px 10px 9px 13px;
}

.recipe-ing-main {
    flex: 1;
    min-width: 0;
}

.recipe-ing-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}

.recipe-ing-sub {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

.recipe-ing-del {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: none;
    background: var(--surface);
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: none;
}

@media (max-width: 880px) {
    .recipe-ing { flex-wrap: wrap; row-gap: 10px; }
    .recipe-ing-main { flex: 1 0 100%; }
    /* Amount left, delete pushed to the right edge of the second line. */
    .recipe-ing .amount-field { margin-right: auto; }

    .amount-unit {
        padding: 8px 14px;
        font-size: 11px;
    }

    /* Matched on specificity, not just order — the base .lg rule is (0,3,0) and would otherwise
       keep its tighter desktop padding here, leaving the logging sheet's units the hardest to
       hit of the lot. */
    .amount-field.lg .amount-unit {
        padding: 9px 16px;
        font-size: 12px;
    }
}

/* ── Toggle switch (account settings) ──────────────────────────────────────── */
.toggle {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: var(--hairline-strong);
    cursor: pointer;
    padding: 0;
    position: relative;
    flex: none;
    transition: background 0.2s ease;
}

.toggle.on { background: var(--ink); }

.toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--paper);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.toggle.on::after { transform: translateX(18px); }

/* ── Goal rows ─────────────────────────────────────────────────────────────── */
/* Plan "TO HIT YOUR GOALS" rows: label  value / target ————— +N LEFT */
.goal-row { padding: 11px 0 12px; }

.goal-row-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.goal-row-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink);
    min-width: 42px;
}

.goal-row-val {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.goal-row-target {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.goal-row-left {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.dot { border-radius: 50%; flex-shrink: 0; }

/* ── Sheet: square, ink-topped, rising from the bottom ─────────────────────── */
.sheet-root { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: flex-end; }

.sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(35, 32, 25, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sheet-panel {
    position: relative;
    background: var(--paper);
    border-radius: 0;
    border-top: 2px solid var(--ink);
    max-height: 88%;
    display: flex;
    flex-direction: column;
    transform: translateY(102%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -12px 40px rgba(35, 32, 25, 0.3);
    padding-bottom: env(safe-area-inset-bottom);
}

.sheet-root.show .sheet-scrim { opacity: 1; }
.sheet-root.show .sheet-panel { transform: translateY(0); }

.sheet-grab {
    display: grid;
    place-items: center;
    padding: 10px 0 2px;
    flex: none;
}

.sheet-grab span {
    width: 40px;
    height: 4px;
    border-radius: 0;
    background: var(--hairline-strong);
}

.sheet-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 24px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ink);
    flex: none;
}

.sheet-head h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink);
}

.sheet-close {
    width: auto;
    height: auto;
    border-radius: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--red);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    display: grid;
    place-items: center;
}

/* Search sheets open tall so the input + results sit above the iOS keyboard. */
.sheet-panel.tall { min-height: min(72dvh, 640px); }

.sheet-body {
    overflow: auto;
    /* --kb-inset = soft-keyboard height (set from visualViewport in index.html) */
    padding: 4px 24px calc(20px + var(--kb-inset, 0px));
    -webkit-overflow-scrolling: touch;
}

.sheet-foot {
    padding: 12px 24px 20px;
    border-top: 1px solid var(--hairline);
    flex: none;
}

@media (min-width: 880px) {
    .sheet-root {
        align-items: center;
        justify-content: center;
        flex-direction: row;
        padding: 28px;
    }

    .sheet-panel {
        width: min(520px, 100%);
        max-height: min(86vh, 760px);
        overflow: hidden;
        border: 2px solid var(--ink);
        transform: translateY(8px);
        opacity: 0;
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
        box-shadow: 0 24px 70px rgba(35, 32, 25, 0.30);
        padding-bottom: 0;
    }

    .sheet-root.show .sheet-panel { transform: translateY(0); opacity: 1; }
    .sheet-panel.tall { min-height: 0; }
    .sheet-grab { display: none; }
    .sheet-head { margin-top: 16px; }
}

/* ── Misc shared bits ──────────────────────────────────────────────────────── */
.empty-note {
    text-align: center;
    color: var(--muted);
    padding: 46px 24px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    line-height: 1.8;
    text-transform: uppercase;
}

.empty-note b { color: var(--red); font-weight: 700; }

/* ── Drag-to-reorder ───────────────────────────────────────────────────────── */
.drag-handle {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    align-self: stretch;
    color: var(--hairline-strong);
    cursor: grab;
    touch-action: none;
    transition: color 0.15s;
}

.drag-handle:active { cursor: grabbing; }

.sortable-ghost { opacity: 0.35; }
.sortable-drag { cursor: grabbing; }

/* ── Segmented control ─────────────────────────────────────────────────────── */
.segmented {
    display: flex;
    gap: 0;
    background: transparent;
    border: 1px solid var(--hairline-strong);
    border-radius: 0;
    padding: 0;
}

.segmented button {
    flex: 1;
    border: none;
    border-right: 1px solid var(--hairline-strong);
    cursor: pointer;
    border-radius: 0;
    padding: 9px 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    background: transparent;
    transition: background 0.18s, color 0.18s;
}

.segmented button:last-child { border-right: none; }
.segmented button.on { background: var(--ink); color: var(--paper); }

/* Narrower variant for the desktop Foods rail, where the control shares a
   column with the category list rather than spanning the screen. */
.segmented.sm button {
    padding: 7px 6px;
    font-size: 9px;
    letter-spacing: 0.8px;
}

/* ── Recipes ───────────────────────────────────────────────────────────────── */
/* Capped rather than full-bleed: the rows are short, and a recipe name stranded
   at one end of a 1600px row is harder to read than the same list held together. */
.recipes-pane {
    max-width: 760px;
    margin: 0 auto;
}

.recipes-note {
    margin: 18px 2px 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.9;
}

/* Marks a food the recipe owns, so it's clear why editing it opens the recipe. */
.fdk-recipe-tag {
    margin-left: 7px;
    padding: 1px 5px;
    border: 1px solid var(--hairline-strong);
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--muted);
    vertical-align: middle;
}

/* ── Auth screens (login / register) ───────────────────────────────────────── */
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--ink);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--paper);
    border: none;
    border-top: 4px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
    padding: 26px 24px 24px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--ink);
}

.auth-brand-tile {
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: var(--ink);
    color: var(--gold);
    display: grid;
    place-items: center;
    flex: none;
}

.auth-brand-name {
    font-family: var(--display);
    font-size: 19px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
}

.auth-brand-sub {
    font-family: var(--display);
    font-size: 19px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1;
    margin-top: 1px;
}

.auth-title {
    margin: 0;
    font-family: var(--display);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ink);
}

.auth-sub {
    margin: 6px 0 20px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted);
}

.auth-fields { display: flex; flex-direction: column; gap: 16px; }

.auth-error {
    margin-top: 14px;
    background: none;
    border-left: 3px solid var(--red);
    color: var(--red);
    border-radius: 0;
    padding: 8px 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

.auth-switch {
    margin: 20px 0 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
}

.auth-switch a { color: var(--red); font-weight: 700; text-decoration: none; }

/* ── Account rows ──────────────────────────────────────────────────────────── */
.acct-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hairline);
    padding: 12px 2px 13px;
    cursor: pointer;
    font-family: var(--body);
    color: var(--ink);
}

.acct-row.static { cursor: default; }
.acct-row-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }

.acct-row-val {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.acct-row-unit {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted);
}

.acct-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--gold);
    display: grid;
    place-items: center;
    flex: none;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Sidebar account box (desktop) */
.account-box { display: flex; align-items: center; gap: 8px; width: 100%; }

.account-link {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

/* Square outlined avatar — the sidebar foot is one 42px line. */
.account-avatar {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: none;
    border: 1px solid rgba(245, 242, 233, 0.3);
    color: var(--gold);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.account-email {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-signout {
    border: none;
    background: none;
    color: var(--ink-muted);   /* full-strength: any dimmer fails contrast on ink */
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

.account-signout:hover { color: var(--gold); }

#blazor-error-ui {
    background: var(--red);
    color: var(--paper);
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 999;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

#blazor-error-ui a { color: var(--paper); }

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Training: session ledger + set rows ───────────────────────────────────── */
/* Saved-session list */
.wk-session {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hairline);
    padding: 11px 2px 12px;
    cursor: pointer;
    font-family: var(--body);
}

.wk-session:hover { background: var(--row-hover); }

.wk-session-main { flex: 1; min-width: 0; }

.wk-session-name {
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ink);
}

.wk-session-stub {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
    flex: none;
    padding-top: 3px;
    white-space: nowrap;
}

/* Week grouping header in the training history */
.wk-week {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 17px 2px 6px;
    border-bottom: 1.5px solid var(--ink);
}

/* Builder chrome */
.wk-date { flex: none; width: 148px; }

/* Mobile session chrome: Cancel at one end, Delete at the other, both drawn as buttons. */
.wk-cancel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 4px;
}

.wk-cancel-m, .wk-delete-m {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    background: none;
    border: 1.5px solid var(--hairline-strong);
    border-radius: 0;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
}

.wk-delete-m { border-color: var(--red); color: var(--red); }

.wk-editor { flex: 1; min-width: 0; }

.wk-hint {
    text-align: center;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 14px;
    line-height: 1.8;
}

/* One exercise block inside a session */
.wk-ex-list { display: flex; flex-direction: column; }
.wk-ex-card { border-radius: 0; padding: 0 0 10px; }

.wk-ex-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 16px 2px 6px;
    border-bottom: 1.5px solid var(--ink);
}

.wk-ex-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; cursor: grab; touch-action: none; }
.wk-ex-title:active { cursor: grabbing; }

.wk-ex-name {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wk-pr {
    flex: none;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    background: none;
    border-radius: 0;
    padding: 0;
}

.wk-ex-x { width: 22px; height: 22px; flex: none; border: none; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; }

/* Set grid: set# / lb / reps / done — ledger lines, mono numerals */
.wk-grid { display: grid; grid-template-columns: 18px 1fr 1fr 26px; gap: 8px; align-items: center; }
.swipe .wk-row { border-bottom: none; }

.wk-colhead { padding: 6px 0 4px; border-bottom: 1px solid var(--hairline); }

.wk-col {
    text-align: center;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--muted);
    text-transform: uppercase;
}

.wk-row { padding: 4px 0; border-bottom: 1px solid var(--hairline); }

.wk-setnum {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.wk-input {
    width: 100%;
    height: 30px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    outline: none;
}

.wk-input:focus { border-bottom-color: var(--ink); }
.wk-input::placeholder { color: var(--faint); font-weight: 500; }

/* Completed set = filled ink square with a gold check */
.wk-accept-cell { justify-self: center; }

.wk-accept {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--ink);
    background: none;
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: transparent;
}

.wk-accept.done { background: var(--ink); color: var(--gold); }

.wk-x { width: 16px; height: 16px; justify-self: center; border: none; background: none; color: var(--faint); display: grid; place-items: center; cursor: pointer; padding: 0; }

.wk-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 2px;
}

.wk-addset {
    background: none;
    border: none;
    color: var(--red);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wk-vol {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.wk-vol.empty { color: var(--faint); }

.wk-add-ex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 16px;
    background: transparent;
    border: 1px solid var(--hairline-strong);
    color: var(--ink);
    border-radius: 0;
    padding: 12px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
}

/* Picker sheet rows */
.wk-pick-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--hairline);
    cursor: pointer;
    padding: 9px 2px 10px;
}

.wk-pick-row:hover { background: var(--row-hover); }
.wk-pick-main { flex: 1; min-width: 0; }

.wk-pick-name {
    display: block;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wk-pick-meta {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}

/* Saved toast */
.wk-toast { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 300; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; }
.wk-toast.show { opacity: 1; transform: translateY(0); }

.wk-toast-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 0;
    padding: 11px 18px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.wk-toast-check { width: 16px; height: 16px; background: var(--gold); color: var(--ink); display: grid; place-items: center; }

/* ── Exercise progress sheet ───────────────────────────────────────────────── */
.exps-stats { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.exps-stat { flex: 1; min-width: 0; background: none; border-radius: 0; padding: 0 8px 12px 0; text-align: left; border-right: 1px solid var(--hairline); }
.exps-stat:last-child { border-right: none; }
.exps-stat + .exps-stat { padding-left: 12px; }
.exps-stat .n { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exps-stat .l { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

.exps-toggle { display: flex; gap: 0; border: 1px solid var(--hairline-strong); border-radius: 0; padding: 0; margin-bottom: 14px; }
.exps-toggle button { flex: 1; border: none; border-right: 1px solid var(--hairline-strong); background: transparent; border-radius: 0; padding: 8px 0; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.exps-toggle button:last-child { border-right: none; }
.exps-toggle button.on { background: var(--ink); color: var(--paper); }

.exps-chart-card { border-radius: 0; padding: 0; }
.trend-chart { width: 100%; display: block; }
.trend-axis { font-family: var(--mono); font-size: 9px; font-weight: 600; fill: var(--muted); }

.exps-list-head { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 18px 0 0; padding-bottom: 6px; border-bottom: 1.5px solid var(--ink); }
.exps-list { display: flex; flex-direction: column; }
.exps-row { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--hairline); border-radius: 0; cursor: pointer; padding: 9px 2px 10px; font-family: var(--body); }
.exps-row.sel { background: var(--eaten-bg); }
.exps-row-main { flex: 1; min-width: 0; }
.exps-row-main .d { font-family: var(--body); font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.exps-row-main .s { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exps-row-val { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exps-pr { display: inline-block; margin-left: 6px; padding: 0; border-radius: 0; background: none; color: var(--gold); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 1px; }

/* ── Meal grouping list (Today / plan detail) ──────────────────────────────── */
.meal-list { display: flex; flex-direction: column; }
.meal-group, .meal-ungrouped { display: flex; flex-direction: column; }
.meal-head { display: flex; align-items: baseline; gap: 10px; padding: 17px 8px 6px; border-bottom: 1.5px solid var(--ink); }
.meal-grip { display: grid; place-items: center; color: var(--hairline-strong); flex-shrink: 0; cursor: grab; touch-action: none; align-self: center; }
.meal-grip:active { cursor: grabbing; }

.meal-role {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.meal-meta {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ══ Today · desktop ═══════════════════════════════════════════════════════ */
/* Everything below applies only at ≥880px; mobile Today is untouched. */

.today-desk { display: none; }

@media (min-width: 880px) {
    .today-mob { display: none; }

    .today-desk {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 336px;
        gap: 40px;
        align-items: stretch;
        max-width: 1560px;
        margin: 0 auto;
        padding: 18px 28px 24px;
    }

    /* ── Left column: the meal log ── */
    .tdk-log { min-width: 0; }

    .tdk-group { margin-bottom: 14px; }

    /* No flex gap: the rows have none, so a gap here walks the P/C/F/total heads out of line with
       the numbers under them. The left-hand items carry their own spacing instead. */
    .tdk-head {
        display: flex;
        align-items: center;
        padding: 6px 8px 8px;
        border-bottom: 1.5px solid var(--ink);
        cursor: grab;
    }

    .tdk-head > .tdk-grip,
    .tdk-head > .tdk-grip-spacer,
    .tdk-head > .tdk-role { margin-right: 9px; }

    .tdk-head:active { cursor: grabbing; }

    .tdk-grip { color: var(--faint); display: grid; place-items: center; flex: none; }

    .tdk-role {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
    }

    .tdk-count {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        color: var(--faint);
        font-variant-numeric: tabular-nums;
    }

    .tdk-spacer { flex: 1; min-width: 0; }

    /* P / C / F column heads and their cells share one width so they line up. */
    .tdk-col {
        width: 56px;
        text-align: right;
        flex: none;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .tdk-total {
        width: 74px;
        text-align: right;
        flex: none;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 700;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .tdk-row {
        display: flex;
        align-items: center;
        height: 34px;
        padding: 0 8px;
        border-bottom: 1px solid var(--hairline);
        width: 100%;
        background: transparent;
        border-left: none;
        border-right: none;
        border-top: none;
        text-align: left;
        cursor: pointer;
        font-family: var(--body);
    }

    .tdk-row:hover { background: rgba(35, 32, 25, 0.05); }

    /* Selected for grouping — the same ink inversion the mobile list uses. */
    .tdk-row.picked, .tdk-row.picked:hover { background: var(--ink); }
    .tdk-row.picked .tdk-name, .tdk-row.picked .tdk-kcal { color: var(--paper); }
    .tdk-row.picked .tdk-macro { color: var(--ink-muted); }
    .tdk-row.picked .tdk-x { color: var(--ink-muted); opacity: 1; }
    .tdk-row.picked .tdk-x:hover { color: var(--paper); }

    .tdk-x-spacer { width: 20px; margin-left: 6px; flex: none; }

    .tdk-hint {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--faint);
        margin-right: 10px;
    }

    /* Removing is the explicit control; it rests invisible so the day reads as a printed list. */
    .tdk-x {
        width: 20px;
        flex: none;
        margin-left: 6px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: grid;
        place-items: center;
        color: var(--faint);
        opacity: 0;
    }

    .tdk-row:hover .tdk-x, .tdk-x:focus-visible { opacity: 1; }
    .tdk-x:hover { color: var(--red); }

    .tdk-name {
        flex: 1;
        min-width: 0;
        font-family: var(--body);
        font-size: 13.5px;
        font-weight: 500;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tdk-macro {
        width: 56px;
        text-align: right;
        flex: none;
        font-family: var(--mono);
        font-size: 12px;
        color: var(--body-muted);
        font-variant-numeric: tabular-nums;
    }

    .tdk-kcal {
        width: 74px;
        text-align: right;
        flex: none;
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    /* Ungrouped: same rows, no wash, no grip (a spacer keeps the label aligned). */
    .tdk-head.plain { cursor: default; }
    .tdk-head.plain .tdk-role { color: var(--muted); }
    .tdk-grip-spacer { width: 14px; flex: none; }

    .tdk-foot {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 14px 8px 0;
    }

    .tdk-newday {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
        border-bottom: 1px solid var(--hairline-strong);
    }

    .tdk-logged {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* ── Drag to reorder groups ── */
    .tdk-group.dragging {
        opacity: 0.4;
        outline: 1px dashed rgba(35, 32, 25, 0.45);
        box-shadow: 0 10px 22px rgba(35, 32, 25, 0.18);
    }

    /* Drop line with a square cap, drawn above the hovered group. */
    .tdk-group.drop-over { position: relative; }

    .tdk-group.drop-over::before,
    .tdk-group.drop-over::after {
        content: '';
        position: absolute;
        top: -8px;
        background: var(--gold);
        pointer-events: none;
    }

    .tdk-group.drop-over::before { left: 0; right: 0; height: 2px; }
    .tdk-group.drop-over::after { left: 0; width: 6px; height: 6px; top: -10px; }

    /* ── Right column: the day rail ── */
    .tdk-rail {
        border-left: 1px solid var(--hairline);
        padding-left: 26px;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .tdk-rail-block {
        padding: 16px 0 18px;
        border-bottom: 1px solid var(--hairline);
    }

    .tdk-rail-block:first-child { padding-top: 0; }

    .tdk-rail-label {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* Remaining figure */
    .tdk-remain {
        display: flex;
        align-items: baseline;
        gap: 9px;
        margin-top: 6px;
    }

    .tdk-remain-v {
        font-family: var(--mono);
        font-size: 46px;
        font-weight: 600;
        letter-spacing: -2px;
        line-height: 1;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .tdk-remain-v.over { color: var(--red); }

    .tdk-remain-g {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }

    /* Progress */
    .tdk-prog {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--rule);
    }

    .tdk-prog-track {
        flex: 1;
        height: 6px;
        background: rgba(35, 32, 25, 0.14);
        min-width: 0;
    }

    /* Ticking a meal moves the day's totals, so the rail eases to the new figure rather than
       jumping — the change is the feedback that the tick registered. */
    .tdk-prog-fill {
        height: 100%;
        background: var(--gold);
        transition: width 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .tdk-prog-fill.over { background: var(--red); }

    .tdk-prog-pct {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 700;
        color: var(--ink);
        flex: none;
        font-variant-numeric: tabular-nums;
    }

    .tdk-prog-pct.over { color: var(--red); }

    /* By meal: stacked bar + two-column legend */
    .tdk-stack {
        display: flex;
        height: 10px;
        margin-top: 9px;
        overflow: hidden;
    }

    .tdk-stack > * { transition: width 620ms cubic-bezier(0.22, 0.61, 0.36, 1); }

    .tdk-legend {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px 12px;
        margin-top: 10px;
    }

    .tdk-legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        color: var(--body-muted);
        min-width: 0;
    }

    .tdk-swatch { width: 6px; height: 6px; flex: none; }
    .tdk-legend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tdk-legend-v { font-variant-numeric: tabular-nums; }

    /* Macro bars */
    .tdk-macro-row { margin-top: 12px; }
    .tdk-macro-row:first-child { margin-top: 0; }

    .tdk-macro-top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .tdk-macro-l {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .tdk-macro-v {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .tdk-macro-v.over { color: var(--red); }
    .tdk-macro-v .goal { color: var(--muted); }

    .tdk-macro-track { height: 4px; background: var(--hairline); }
    .tdk-macro-fill { height: 100%; transition: width 620ms cubic-bezier(0.22, 0.61, 0.36, 1); }

    /* This week */
    .tdk-week {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
        align-items: end;
        height: 58px;
        margin-top: 12px;
    }

    .tdk-week-bar {
        background: rgba(35, 32, 25, 0.18);
        width: 100%;
        transition: height 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .tdk-week-bar.hit { background: var(--red); }
    .tdk-week-bar.today { background: var(--gold); }

    .tdk-week-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
        margin-top: 6px;
    }

    .tdk-week-day {
        text-align: center;
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        color: var(--faint);
    }

    .tdk-week-day.now { color: var(--ink); }

    /* Weigh-in prompt */
    .tdk-weigh {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        background: none;
        border: none;
        border-bottom: 1px solid var(--hairline);
        padding: 16px 0 18px;
        cursor: pointer;
    }

    .tdk-weigh-l {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--red);
    }

    .tdk-weigh-r {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
    }

    /* Pinned actions */
    .tdk-actions {
        margin-top: auto;
        display: flex;
        gap: 10px;
        padding-top: 22px;
    }

    .tdk-actions button {
        flex: 1;
        height: 30px;
        background: none;
        border: 1px solid var(--hairline-strong);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--ink);
    }

    .tdk-actions button:hover { background: var(--row-hover); }
    .tdk-actions button:disabled { opacity: 0.4; cursor: default; }
}

/* ══ Foods · desktop ═══════════════════════════════════════════════════════ */
/* Category rail 168 + table (fills) + detail pane 288, all full-bleed. */

.foods-desk { display: none; }

@media (min-width: 880px) {
    .foods-mob { display: none; }

    .foods-desk {
        display: flex;
        align-items: stretch;
        /* Fill the viewport below the 52px header so the rails run edge to edge. */
        min-height: calc(100vh - 52px);
    }

    /* ── Category rail ── */
    .fdk-rail {
        width: 168px;
        flex: none;
        border-right: 1px solid var(--hairline);
        padding: 20px 0;
    }

    .fdk-rail-head {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
        padding: 0 20px 8px;
    }

    .fdk-cat {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 28px;
        padding: 0 22px;
        background: none;
        border: none;
        border-left: 2px solid transparent;
        cursor: pointer;
        text-align: left;
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--body-muted);
    }

    .fdk-cat:hover { background: var(--row-hover); }

    .fdk-cat.on {
        padding-left: 20px;
        background: var(--row-hover);
        border-left-color: var(--ink);
        color: var(--ink);
        font-weight: 700;
    }

    .fdk-cat-name { flex: 1; min-width: 0; }

    .fdk-cat-count {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        color: var(--faint);
        font-variant-numeric: tabular-nums;
    }

    .fdk-cat.on .fdk-cat-count { color: var(--muted); }

    .fdk-rail-note {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        color: var(--faint);
        padding: 14px 20px 0;
        line-height: 1.7;
    }

    /* ── Table ── */
    /* Thirteen columns don't fit a narrow desktop, so the table scrolls sideways inside its own
       column rather than squeezing the name to nothing. The header and rows share one scroll
       container, so they stay locked together. */
    .fdk-table { flex: 1; min-width: 0; padding: 20px 24px 0; overflow-x: auto; }

    .fdk-thead, .fdk-row { min-width: 952px; }

    .fdk-thead {
        display: flex;
        align-items: baseline;
        padding: 0 4px 8px;
        border-bottom: 1.5px solid var(--ink);
    }

    .fdk-th {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        text-align: left;
        white-space: nowrap;
    }

    .fdk-th.sorted { color: var(--ink); }
    .fdk-th .caret { font-size: 8px; opacity: 0.25; margin-left: 4px; }
    .fdk-th.sorted .caret { opacity: 1; color: var(--gold); }
    .fdk-th.r { text-align: right; }

    /* The label headers have to fit a 44px column, so they set tighter than the macro headers. */
    .fdk-th.fdk-c-lab { font-size: 8px; letter-spacing: 0.5px; }
    .fdk-th.fdk-c-lab .caret { margin-left: 2px; }

    .fdk-row {
        display: flex;
        align-items: center;
        height: 34px;
        padding: 0 4px;
        border-bottom: 1px solid var(--hairline);
        width: 100%;
        background: transparent;
        border-left: none;
        border-right: none;
        border-top: none;
        cursor: pointer;
        text-align: left;
        font-family: var(--body);
    }

    .fdk-row:hover, .fdk-row.sel { background: var(--row-hover); }

    /* Shared column widths — header and body use the same classes so they line up. */
    .fdk-c-name { flex: 1; min-width: 130px; }
    /* Wide enough for the longest brand in a real library ("Shady Brook Farms" measures 107px). */
    .fdk-c-brand { width: 122px; flex: none; padding-right: 10px; }
    .fdk-c-serv { width: 88px; flex: none; }
    .fdk-c-num { width: 54px; flex: none; text-align: right; }
    /* Label columns run seven abreast, so they're tighter than the macros. */
    .fdk-c-lab { width: 44px; flex: none; text-align: right; }
    .fdk-c-act { width: 58px; flex: none; text-align: right; }

    .fdk-name {
        font-family: var(--body);
        font-size: 13.5px;
        font-weight: 500;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The brand qualifies the food, so it sits quieter than the name it sits beside. */
    .fdk-brand {
        font-family: var(--body);
        font-size: 12px;
        font-weight: 500;
        color: var(--body-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fdk-serv { font-family: var(--mono); font-size: 11px; color: var(--muted); }

    .fdk-kcal {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 700;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .fdk-macro {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--body-muted);
        font-variant-numeric: tabular-nums;
    }

    .fdk-macro .g { color: var(--faint); }

    /* Label columns sit a step back from the macros — they're reference detail, not the headline. */
    .fdk-lab {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--body-muted);
        font-variant-numeric: tabular-nums;
    }

    .fdk-lab .g { font-size: 8.5px; color: var(--faint); margin-left: 1px; }
    .fdk-lab .none { color: var(--faint); }

    .fdk-acts { display: inline-flex; gap: 8px; justify-content: flex-end; }

    .fdk-acts button {
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        color: var(--faint);
        display: grid;
        place-items: center;
    }

    .fdk-acts button:hover { color: var(--ink); }
    .fdk-acts button.del:hover { color: var(--red); }

    /* ── Detail pane ── */
    .fdk-detail {
        width: 288px;
        flex: none;
        background: var(--row-hover);
        border-left: 1px solid var(--hairline);
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
        /* The label block can run to eleven rows — scroll the pane rather than push the
           actions off the bottom. */
        overflow-y: auto;
    }

    .fdk-detail-label {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .fdk-detail-name {
        font-family: var(--display);
        font-size: 23px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        line-height: 1.08;
        color: var(--ink);
        margin-top: 6px;
    }

    .fdk-detail-name .accent { color: var(--red); }

    /* Maker's mark under the product name — mono and tracked out, like a stamp. */
    .fdk-detail-brand {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--gold);
        margin-top: 7px;
    }

    .fdk-detail-meta {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 10px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--hairline-strong);
    }

    .fdk-chip {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--ink);
        border: 1px solid rgba(35, 32, 25, 0.28);
        padding: 2px 7px;
    }

    .fdk-detail-serv { font-family: var(--mono); font-size: 11px; color: var(--muted); }

    /* 4-up macro grid: 1px gaps let the pane background read as the rules. */
    .fdk-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--hairline);
        margin-top: 18px;
    }

    .fdk-grid > div { background: var(--row-hover); padding: 9px 6px 10px; }

    .fdk-grid-l {
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .fdk-grid-v {
        font-family: var(--mono);
        font-size: 18px;
        font-weight: 600;
        color: var(--ink);
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
    }

    .fdk-split { margin-top: 20px; }
    .fdk-split-bar { display: flex; height: 8px; margin-top: 9px; overflow: hidden; }

    .fdk-split-legend {
        display: flex;
        gap: 14px;
        margin-top: 9px;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        color: var(--body-muted);
    }

    .fdk-split-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .fdk-split-sw { width: 6px; height: 6px; flex: none; }

    /* Nutrition-label lines under the macro grid — only the filled ones render. */
    .fdk-label { margin-top: 20px; }

    .fdk-label-row {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 6px 0;
        border-bottom: 1px solid var(--hairline);
    }

    .fdk-label-row:first-of-type { border-top: 1px solid var(--hairline); margin-top: 9px; }

    .fdk-label-n {
        flex: 1;
        min-width: 0;
        font-family: var(--body);
        font-size: 12px;
        font-weight: 600;
        color: var(--ink);
    }

    /* Sub-lines sit indented under their parent, as the printed panel sets them. */
    .fdk-label-n.in { padding-left: 11px; font-weight: 500; color: var(--body-muted); }

    .fdk-label-v {
        flex: none;
        font-family: var(--mono);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ink);
    }

    .fdk-label-v .g { font-size: 9px; color: var(--muted); margin-left: 2px; }

    .fdk-detail-actions { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: 22px; }

    .fdk-detail-actions button {
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: none;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .fdk-edit { background: var(--gold); color: var(--ink); }
    .fdk-del { background: none; border: 1px solid rgba(180, 69, 44, 0.5) !important; color: var(--red); }

    .fdk-empty {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--faint);
        line-height: 1.8;
        margin-top: 10px;
    }
}

/* ══ Meals · desktop ═══════════════════════════════════════════════════════ */
/* Time-of-day rail 160 + sortable table (fills) + persistent builder pane 320.
   The builder sheet is mobile-only above this breakpoint, except for the row pencil,
   which still opens it for the fields the pane doesn't carry (name, time, quantities). */

.meals-desk { display: none; }

@media (min-width: 880px) {
    .meals-mob { display: none; }

    .meals-desk {
        display: flex;
        align-items: stretch;
        min-height: calc(100vh - 52px);
    }

    /* ── Facet rail ── */
    .mdk-rail {
        width: 160px;
        flex: none;
        border-right: 1px solid var(--hairline);
        padding: 20px 0;
        display: flex;
        flex-direction: column;
    }

    .mdk-rail-head {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
        padding: 0 18px 8px;
    }

    .mdk-facet {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 28px;
        padding: 0 20px;
        background: none;
        border: none;
        border-left: 2px solid transparent;
        cursor: pointer;
        text-align: left;
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--body-muted);
    }

    .mdk-facet:hover { background: var(--row-hover); }

    .mdk-facet.on {
        padding-left: 18px;
        background: var(--row-hover);
        border-left-color: var(--ink);
        color: var(--ink);
        font-weight: 700;
    }

    .mdk-facet-name { flex: 1; min-width: 0; }

    .mdk-facet-count {
        font-size: 10px;
        font-weight: 600;
        color: var(--faint);
        font-variant-numeric: tabular-nums;
    }

    .mdk-facet.on .mdk-facet-count { color: var(--muted); }

    /* The meal's colour, carried by the rail row, the table's time cell and the pane chip. */
    .mdk-sq { width: 6px; height: 6px; flex: none; }

    .mdk-rail-note {
        margin-top: auto;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        color: var(--faint);
        padding: 14px 18px 0;
        line-height: 1.6;
    }

    /* ── Table ── */
    .mdk-table { flex: 1; min-width: 0; padding: 20px 22px 0; }

    .mdk-thead {
        display: flex;
        align-items: baseline;
        padding: 0 4px 8px;
        border-bottom: 1.5px solid var(--ink);
    }

    .mdk-th {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        text-align: left;
        white-space: nowrap;
    }

    .mdk-th.sorted { color: var(--ink); }
    .mdk-th .caret { font-size: 8px; opacity: 0.25; margin-left: 4px; }
    .mdk-th.sorted .caret { opacity: 1; color: var(--gold); }
    .mdk-th.r { text-align: right; }

    /* One notch taller than Foods — these rows are the primary selection target. */
    .mdk-row {
        display: flex;
        align-items: center;
        height: 36px;
        padding: 0 4px;
        border-bottom: 1px solid var(--hairline);
        cursor: pointer;
        font-family: var(--body);
    }

    .mdk-row:hover { background: var(--row-hover); }
    .mdk-row.sel { background: var(--row-hover); box-shadow: inset 2px 0 0 0 var(--ink); }

    /* Shared column widths — header and body use the same classes so they line up. */
    .mdk-c-name { flex: 1; min-width: 0; }
    .mdk-c-time { width: 96px; flex: none; }
    .mdk-c-n { width: 58px; flex: none; text-align: right; }
    .mdk-c-cal { width: 62px; flex: none; text-align: right; }
    .mdk-c-m { width: 52px; flex: none; text-align: right; }
    .mdk-c-act { width: 56px; flex: none; text-align: right; }

    .mdk-name {
        font-size: 13.5px;
        font-weight: 500;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mdk-time {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .mdk-num {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--body-muted);
        font-variant-numeric: tabular-nums;
    }

    .mdk-num .g { color: var(--faint); }
    .mdk-plans { font-family: var(--mono); font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

    .mdk-kcal {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 700;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .mdk-acts { display: inline-flex; gap: 6px; justify-content: flex-end; }

    .mdk-acts button {
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        color: var(--faint);
        display: grid;
        place-items: center;
    }

    .mdk-acts button:hover { color: var(--ink); }
    .mdk-acts button.del:hover { color: var(--red); }

    .mdk-foot { display: flex; align-items: center; padding: 12px 4px 0; }

    .mdk-foot-count {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* ── Builder pane ── */
    .mdk-pane {
        width: 320px;
        flex: none;
        background: var(--row-hover);
        border-left: 1px solid var(--hairline);
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
    }

    .mdk-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

    .mdk-label {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .mdk-pane-name {
        font-family: var(--display);
        font-size: 23px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        line-height: 1.08;
        color: var(--ink);
        margin-top: 6px;
    }

    .mdk-pane-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--hairline-strong);
    }

    .mdk-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        border: 1px solid rgba(35, 32, 25, 0.28);
        padding: 2px 7px;
    }

    .mdk-usage { font-family: var(--mono); font-size: 11px; color: var(--muted); }

    /* 4-up macro grid: 1px gaps let the pane background read as the rules. */
    .mdk-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: var(--hairline);
        margin: 16px 0 18px;
    }

    .mdk-grid > div { background: var(--row-hover); padding: 8px 6px 9px; }

    .mdk-grid-l {
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .mdk-grid-v {
        font-family: var(--mono);
        font-size: 18px;
        font-weight: 600;
        color: var(--ink);
        margin-top: 3px;
        font-variant-numeric: tabular-nums;
    }

    .mdk-items-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 7px;
        border-bottom: 1.5px solid var(--ink);
    }

    .mdk-items-count { font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--faint); }
    .mdk-items-spacer { flex: 1; }

    .mdk-items-qty, .mdk-items-cal {
        width: 44px;
        flex: none;
        text-align: right;
        font-family: var(--mono);
        font-variant-numeric: tabular-nums;
    }

    .mdk-items-head .mdk-items-qty,
    .mdk-items-head .mdk-items-cal {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .mdk-item {
        display: flex;
        align-items: center;
        height: 32px;
        border-bottom: 1px solid var(--hairline);
    }

    .mdk-grip { display: grid; place-items: center; width: 16px; flex: none; color: var(--faint); cursor: grab; }
    .mdk-grip:active { cursor: grabbing; }

    .mdk-item-name {
        flex: 1;
        min-width: 0;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mdk-item .mdk-items-qty { font-size: 11px; color: var(--body-muted); }
    .mdk-item .mdk-items-cal { font-size: 12px; font-weight: 600; color: var(--ink); }

    .mdk-add {
        display: flex;
        align-items: center;
        gap: 7px;
        height: 32px;
        width: 100%;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .mdk-add:hover { color: var(--ink); }

    .mdk-split { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline-strong); }
    .mdk-split-bar { display: flex; height: 8px; margin-top: 8px; overflow: hidden; }

    .mdk-split-legend {
        display: flex;
        gap: 14px;
        margin-top: 8px;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.6px;
        color: var(--body-muted);
    }

    .mdk-split-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .mdk-split-sw { width: 6px; height: 6px; flex: none; }

    .mdk-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
    .mdk-actions-row { display: flex; gap: 8px; }

    .mdk-flash {
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--body-muted);
        border-left: 3px solid var(--gold);
        padding: 4px 0 4px 8px;
    }

    .mdk-primary {
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: none;
        background: var(--gold);
        color: var(--ink);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .mdk-outline {
        flex: 1;
        height: 30px;
        display: grid;
        place-items: center;
        background: none;
        border: 1px solid var(--hairline-strong);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--ink);
    }

    .mdk-outline:hover { background: rgba(35, 32, 25, 0.06); }

    .mdk-trash {
        width: 38px;
        height: 30px;
        flex: none;
        display: grid;
        place-items: center;
        background: none;
        border: 1px solid rgba(180, 69, 44, 0.5);
        color: var(--red);
        cursor: pointer;
    }

    .mdk-primary:disabled, .mdk-outline:disabled { opacity: 0.4; cursor: default; }

    .mdk-pane-empty {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--faint);
        line-height: 1.8;
        margin-top: 10px;
    }
}

/* A picker row inside a sheet: the food and plan choosers behind the Meals pane's
   "+ Add food" and "Add to plan". Ledger rules, no card chrome. */
.picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 2px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--hairline);
    cursor: pointer;
    text-align: left;
}

.picker-row:disabled { opacity: 0.45; cursor: default; }

/* ══ Plans · desktop ═══════════════════════════════════════════════════════ */
/* Plan rail 240 + target day (fills) + goal rail 320. The mobile drill-down is
   retired here: the list and the day it opens both stay on screen. */

.plans-desk { display: none; }
.pdk-act-desk { display: none !important; }

@media (min-width: 880px) {
    .plans-mob { display: none; }
    .pdk-act-mob { display: none !important; }
    .pdk-act-desk { display: inline-flex !important; }

    /* "New plan" beside the gold action — the Status slot is already desktop-only. */
    .pdk-newplan {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--ink-muted);
    }

    .pdk-newplan:hover { color: var(--paper); }

    .plans-desk {
        display: flex;
        align-items: stretch;
        min-height: calc(100vh - 52px);
    }

    /* ── Plan rail ── */
    .pdk-rail {
        width: 240px;
        flex: none;
        border-right: 1px solid var(--hairline);
        padding: 20px 0;
        display: flex;
        flex-direction: column;
    }

    .pdk-rail-head {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
        padding: 0 18px 10px;
    }

    .pdk-card {
        padding: 11px 18px 12px;
        border-top: 1px solid var(--hairline);
        cursor: pointer;
    }

    .pdk-card:hover { background: var(--row-hover); }
    .pdk-card.sel { background: var(--row-hover); box-shadow: inset 2px 0 0 0 var(--ink); }

    .pdk-card-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }

    .pdk-card-sub {
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 3px;
    }

    .pdk-card-nums { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; }

    .pdk-card-kcal {
        font-family: var(--mono);
        font-size: 15px;
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .pdk-card-kcal.over { color: var(--red); }
    .pdk-card-goal { font-family: var(--mono); font-size: 10px; color: var(--muted); }

    .pdk-card-track { height: 4px; background: var(--hairline); margin-top: 7px; }
    .pdk-card-track > div { height: 100%; background: var(--ink); }
    .pdk-card-track > div.over { background: var(--red); }

    .pdk-newrow {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
        border: none;
        border-top: 1px solid var(--hairline);
        background: none;
        padding: 12px 18px;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .pdk-newrow:hover { color: var(--ink); }

    .pdk-rail-note {
        margin-top: auto;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        color: var(--faint);
        padding: 14px 18px 0;
        line-height: 1.6;
    }

    /* ── Target day ── */
    .pdk-day { flex: 1; min-width: 0; padding: 18px 22px 24px; }

    .pdk-day-head {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        padding-bottom: 12px;
        border-bottom: 1.5px solid var(--ink);
    }

    .pdk-day-name {
        font-family: var(--display);
        font-size: 24px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        color: var(--ink);
        line-height: 1.05;
    }

    .pdk-day-sub {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.9px;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 5px;
    }

    .pdk-link {
        background: none;
        border: none;
        padding: 0 0 1px;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
        border-bottom: 1px solid var(--hairline-strong);
    }

    .pdk-link.danger { color: var(--red); border-bottom-color: rgba(180, 69, 44, 0.4); }

    .pdk-slot { margin-bottom: 12px; }
    .pdk-slot:first-of-type { margin-top: 14px; }
    .pdk-loose { margin-top: 2px; }

    .pdk-slot-head {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 6px 8px 8px;
        border-bottom: 1.5px solid var(--ink);
    }

    /* Drag handle for a whole meal block. Sits in the block header, mirroring .pdk-grip on the loose
       rows, but stays faint until the block is hovered — a grip per meal is a lot of furniture on a
       page whose job is reading the day. */
    .pdk-slot-grip {
        display: grid;
        place-items: center;
        width: 14px;
        flex: none;
        margin-left: -4px;
        color: var(--faint);
        cursor: grab;
        opacity: 0;
        transition: opacity 120ms ease;
    }

    .pdk-slot:hover .pdk-slot-grip,
    .pdk-slot-grip:focus-visible { opacity: 1; }
    .pdk-slot-grip:active { cursor: grabbing; }

    /* The block being dragged keeps its grip: the pointer has left the header by then, and with
       forceFallback the :hover above stops applying. Written on the classes Sortable sets rather than
       with :has(), which this stylesheet uses nowhere. */
    .pdk-slot.sortable-chosen .pdk-slot-grip,
    .pdk-slot.sortable-drag .pdk-slot-grip { opacity: 1; }

    .pdk-sq { width: 6px; height: 6px; flex: none; }
    .pdk-sq.hollow { border: 1px solid rgba(35, 32, 25, 0.35); }

    .pdk-slot-name {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
    }

    .pdk-slot-count { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--faint); }

    .pdk-hint {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--faint);
    }

    /* Column heads and cells share these widths so the numbers stack. */
    .pdk-c-m {
        width: 48px;
        flex: none;
        text-align: right;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }

    .pdk-c-k {
        width: 66px;
        flex: none;
        text-align: right;
        font-family: var(--mono);
        font-variant-numeric: tabular-nums;
    }

    .pdk-slot-total { font-size: 11px; font-weight: 700; color: var(--ink); }

    .pdk-row {
        display: flex;
        align-items: center;
        height: 34px;
        padding: 0 8px;
        border-bottom: 1px solid var(--hairline);
    }

    .pdk-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pdk-nm { font-size: 13.5px; font-weight: 500; color: var(--ink); }

    .pdk-meta {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.4px;
        color: var(--muted);
    }

    .pdk-row .pdk-c-m { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--body-muted); }
    .pdk-kcal { font-size: 13px; font-weight: 600; color: var(--ink); }

    /* The remove control rests invisible so the day reads as a printed list, not a toolbar. */
    .pdk-x {
        width: 20px;
        flex: none;
        margin-left: 4px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: grid;
        place-items: center;
        color: var(--faint);
        opacity: 0;
    }

    .pdk-row:hover .pdk-x, .pdk-x:focus-visible { opacity: 1; }
    .pdk-x:hover { color: var(--red); }

    .pdk-loose-row { cursor: pointer; }
    .pdk-loose-row.picked { background: var(--ink); }
    .pdk-loose-row.picked .pdk-nm, .pdk-loose-row.picked .pdk-kcal { color: var(--paper); }
    .pdk-loose-row.picked .pdk-meta, .pdk-loose-row.picked .pdk-c-m { color: var(--ink-muted); }

    .pdk-grip { display: grid; place-items: center; width: 16px; flex: none; color: var(--faint); cursor: grab; }
    .pdk-grip:active { cursor: grabbing; }

    .pdk-day-foot { display: flex; align-items: center; gap: 16px; padding: 14px 8px 0; }

    .pdk-add {
        display: flex;
        align-items: center;
        gap: 7px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--ink);
    }

    .pdk-add.muted { color: var(--muted); }
    .pdk-add:hover { color: var(--ink); }

    .pdk-empty {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--faint);
        line-height: 1.8;
        margin-top: 16px;
    }

    /* ── Goal rail ── */
    .pdk-goals {
        width: 320px;
        flex: none;
        background: var(--row-hover);
        border-left: 1px solid var(--hairline);
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
    }

    .pdk-label {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .pdk-gap { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }

    .pdk-gap-v {
        font-family: var(--mono);
        font-size: 42px;
        font-weight: 600;
        letter-spacing: -1.8px;
        color: var(--ink);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .pdk-gap-v.over { color: var(--red); }
    .pdk-gap-l { font-family: var(--mono); font-size: 12px; color: var(--muted); }

    .pdk-prog {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--rule);
    }

    .pdk-prog-track { flex: 1; height: 6px; background: rgba(35, 32, 25, 0.14); }
    .pdk-prog-track > div { height: 100%; background: var(--ink); }
    .pdk-prog-track > div.over { background: var(--red); }

    .pdk-prog-pct {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 700;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .pdk-prog-pct.over { color: var(--red); }

    .pdk-macros {
        display: flex;
        flex-direction: column;
        gap: 11px;
        padding: 16px 0 18px;
        border-bottom: 1px solid var(--hairline);
    }

    .pdk-macro-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }

    .pdk-macro-l {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .pdk-macro-v {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .pdk-macro-v.over { color: var(--red); }
    .pdk-macro-v .goal { color: var(--muted); }

    .pdk-macro-track { height: 4px; background: var(--hairline); }
    .pdk-macro-track > div { height: 100%; }

    .pdk-block { padding: 16px 0 18px; border-bottom: 1px solid var(--hairline); }

    .pdk-split-bar { display: flex; height: 10px; margin-top: 10px; overflow: hidden; }

    .pdk-split-legend {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px 14px;
        margin-top: 10px;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: var(--body-muted);
    }

    .pdk-split-legend span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
    .pdk-split-sw { width: 6px; height: 6px; flex: none; }

    .pdk-contents { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
    .pdk-contents .v { font-family: var(--mono); font-size: 11px; color: var(--ink); }
    .pdk-contents .k { font-family: var(--mono); font-size: 11px; color: var(--muted); }

    .pdk-goals-foot { margin-top: auto; padding-top: 16px; }

    .pdk-note {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.4px;
        color: var(--muted);
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .pdk-apply {
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: none;
        background: var(--gold);
        color: var(--ink);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .pdk-apply:disabled { opacity: 0.4; cursor: default; }
}

/* ══ Log · desktop ═════════════════════════════════════════════════════════ */
/* History rail 262 + live builder (fills) + summary rail 300. One DOM serves both
   breakpoints: below 880px the page still swaps history for the builder, so the
   column the mode hides carries .wko-swap and only mobile honours it. */

.wko { display: block; padding-bottom: 56px; }
.wko-swap { display: none; }
.wko-rail, .wko-rail-head, .wko-live, .wk-meta-desk, .wk-week-rule,
.wk-ex-last, .wk-last, .wk-samehead, .wk-ph-hint, .wk-date-icon,
.wk-add-hint, .wk-ex-grip, .wk-cancel-d, .wk-live-dot { display: none; }

@media (min-width: 880px) {
    .wko {
        display: flex;
        align-items: stretch;
        min-height: calc(100vh - 52px);
        padding-bottom: 0;
    }

    /* Both columns stay on screen; only mobile swaps them. */
    .wko-swap { display: block; }

    .wk-meta-mob { display: none; }
    .wk-meta-desk { display: block; }
    .wk-cancel-row { display: none; }
    .wk-hint { display: none; }

    /* The live dot beside the masthead eyebrow, and Cancel in the desktop Status slot. */
    .wk-live-dot {
        display: inline-block;
        width: 5px;
        height: 5px;
        background: var(--red);
        margin-right: 7px;
        vertical-align: middle;
    }

    .wk-cancel-d {
        display: inline-block;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--ink-muted);
    }

    .wk-cancel-d:hover { color: var(--paper); }

    /* ── History rail ── */
    .wko-history {
        width: 262px;
        flex: none;
        border-right: 1px solid var(--hairline);
        padding: 20px 0 24px;
        overflow: hidden;
    }

    .wko-rail-head {
        display: block;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
        padding: 0 18px 10px;
    }

    .wko-live {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 30px;
        padding: 0 18px;
        background: var(--row-hover);
        box-shadow: inset 2px 0 0 0 var(--red);
    }

    .wko-live-sq { width: 5px; height: 5px; flex: none; background: var(--red); }

    .wko-live-name {
        flex: 1;
        min-width: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wko-live-tag {
        flex: none;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--red);
    }

    .wko-weeks { padding: 0; }

    .wko-history .wk-week {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 18px 6px;
        border-bottom: none;
    }

    .wk-week-rule { display: block; flex: 1; height: 1px; background: var(--hairline); }

    /* Both spans stay on one line — the rail is too narrow for either to wrap. */
    .wko-history .wk-week .led-sec-label,
    .wko-history .wk-week .led-sec-count { flex: none; white-space: nowrap; }
    .wko-history .wk-week .led-sec-count { color: var(--faint); }

    .wko-history .wk-session {
        padding: 8px 18px 9px;
        border-bottom: none;
        border-top: 1px solid var(--hairline);
        gap: 0;
    }

    .wko-history .wk-session-name { font-size: 13px; font-weight: 600; }

    .wk-session-deskmeta {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.7px;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wk-session-deskmeta .stub { font-weight: 700; color: var(--faint); }

    /* ── Builder ── */
    .wko-main { flex: 1; min-width: 0; }
    .wko-main .wk-editor { padding: 18px 22px 24px; }

    .wko-idle { padding: 40px 22px; max-width: 420px; }

    .wko-idle-note {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .wko-idle-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 32px;
        margin-top: 12px;
        padding: 0 14px;
        border: none;
        background: var(--gold);
        color: var(--ink);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .wko-idle-hint {
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        color: var(--faint);
        line-height: 1.7;
        margin-top: 14px;
    }

    /* Date field + the placeholder hint on one baseline, over a section rule. */
    .wk-daterow {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-bottom: 12px;
        border-bottom: 1.5px solid var(--ink);
        margin-bottom: 14px;
    }

    .wko-main .wk-date { width: auto; flex: none; margin: 0; }
    .wko-main .wk-date .field-label { font-size: 8.5px; letter-spacing: 1.2px; }

    .wko-main .wk-date .field-box {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 28px;
        padding: 0 10px;
        border: 1px solid var(--hairline-strong);
        background: none;
    }

    .wk-date-icon { display: grid; place-items: center; color: var(--muted); flex: none; }

    .wko-main .wk-date input {
        border: none;
        background: none;
        font-family: var(--mono);
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ink);
        padding: 0;
    }

    .wk-ph-hint {
        display: block;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.4px;
        color: var(--muted);
    }

    /* Exercise card: a bordered block with an ink-ruled head strip. */
    .wko-main .wk-ex-card {
        border: 1px solid rgba(35, 32, 25, 0.16);
        margin-bottom: 12px;
        padding: 0 0 8px;
    }

    .wko-main .wk-ex-head {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 36px;
        padding: 0 10px;
        background: var(--row-hover);
        border-bottom: 1.5px solid var(--ink);
    }

    .wk-ex-grip { display: grid; place-items: center; color: var(--faint); flex: none; }

    .wko-main .wk-ex-name {
        font-family: var(--body);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
    }

    .wko-main .wk-pr {
        background: var(--ink);
        color: var(--gold);
        padding: 2px 5px;
        font-size: 8.5px;
        letter-spacing: 1.2px;
    }

    .wk-ex-last {
        display: block;
        flex: none;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
        white-space: nowrap;
    }

    /* Last time takes the slack, so the column reads as the spacer the frame draws. */
    .wko-main .wk-grid {
        grid-template-columns: 30px 88px 88px 1fr 30px;
        gap: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .wko-main .wk-colhead { border-bottom: none; padding: 8px 10px 4px; }
    .wko-main .wk-col { text-align: left; }
    .wko-main .wk-colhead .wk-setnum, .wko-main .wk-col:nth-child(2),
    .wko-main .wk-col:nth-child(3) { text-align: left; }

    .wk-last, .wk-samehead { display: block; }
    .wk-samehead { text-align: center !important; }

    .wk-last-v {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--faint);
        font-variant-numeric: tabular-nums;
    }

    .wko-main .wk-row { padding-top: 3px; padding-bottom: 3px; border-bottom: none; }
    .wko-main .wk-setnum { font-size: 12px; font-weight: 600; text-align: left; }

    /* Typed values sit in a filled-looking box; empty ones stay faint. */
    .wko-main .wk-input {
        height: 28px;
        border: 1px solid rgba(35, 32, 25, 0.18);
        text-align: left;
        padding: 0 9px;
        font-size: 12.5px;
        font-weight: 500;
    }

    .wko-main .wk-input:not(:placeholder-shown) { border-color: rgba(35, 32, 25, 0.32); }
    .wko-main .wk-input:focus { border-color: var(--ink); }
    .wko-main .wk-input::placeholder { color: var(--faint); }

    .wko-main .wk-accept {
        width: 20px;
        height: 20px;
        border: 1px solid rgba(35, 32, 25, 0.3);
        color: var(--faint);
    }

    .wko-main .wk-accept.done { background: var(--ink); border-color: var(--ink); color: var(--paper); }

    .wko-main .wk-foot { padding: 6px 10px 0; margin-top: 4px; }
    .wko-main .wk-addset { color: var(--ink); }

    .wko-main .wk-add-ex {
        justify-content: flex-start;
        gap: 8px;
        height: 34px;
        padding: 0 12px;
        border: 1px dashed rgba(35, 32, 25, 0.3);
        font-size: 10px;
        margin-top: 0;
    }

    .wk-add-hint {
        display: block;
        margin-left: auto;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: none;
        color: var(--muted);
    }

    /* ── Summary rail ── */
    .wko-rail {
        display: flex;
        flex-direction: column;
        width: 300px;
        flex: none;
        background: var(--row-hover);
        border-left: 1px solid var(--hairline);
        padding: 20px 22px;
        position: static;
    }

    .wko-label {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .wko-vol { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }

    .wko-vol .n {
        font-family: var(--mono);
        font-size: 42px;
        font-weight: 600;
        letter-spacing: -1.8px;
        color: var(--ink);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .wko-vol .u { font-family: var(--mono); font-size: 12px; color: var(--muted); }

    .wko-delta {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-top: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--rule);
    }

    .wko-delta .v {
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .wko-delta .v.up { color: #6E6A3A; }
    .wko-delta .v.down { color: var(--red); }
    .wko-delta .v.flat { color: var(--muted); }

    .wko-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--hairline);
        margin: 16px 0 0;
    }

    .wko-stats > div { background: var(--row-hover); padding: 9px 6px 10px; }

    .wko-stats .l {
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .wko-stats .n {
        font-family: var(--mono);
        font-size: 18px;
        font-weight: 600;
        color: var(--ink);
        margin-top: 3px;
        font-variant-numeric: tabular-nums;
    }

    .wko-block { padding: 16px 0 18px; border-bottom: 1px solid var(--hairline); }

    .wko-lift { margin-top: 10px; }
    .wko-lift-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }

    .wko-lift-top .l {
        font-family: var(--mono);
        font-size: 9.5px;
        color: var(--body-muted);
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wko-lift-top .v {
        font-family: var(--mono);
        font-size: 10.5px;
        color: var(--ink);
        flex: none;
        font-variant-numeric: tabular-nums;
    }

    .wko-lift-track { height: 4px; background: var(--hairline); }
    .wko-lift-track > div { height: 100%; }

    .wko-week-line {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--ink);
        margin-top: 8px;
        font-variant-numeric: tabular-nums;
    }

    .wko-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
    .wko-foot-row { display: flex; gap: 8px; }

    .wko-primary {
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: none;
        background: var(--gold);
        color: var(--ink);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .wko-primary:disabled { opacity: 0.4; cursor: default; }

    .wko-outline, .wko-danger {
        flex: 1;
        height: 30px;
        display: grid;
        place-items: center;
        background: none;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .wko-outline { border: 1px solid var(--hairline-strong); color: var(--ink); }
    .wko-danger { border: 1px solid rgba(180, 69, 44, 0.5); color: var(--red); }
}

/* ══ Lifts · desktop ═══════════════════════════════════════════════════════ */
/* Muscle rail 160 + table (fills) + progress pane 340. ExerciseProgressSheet
   becomes the pane here; on mobile it stays a sheet. */

.lifts-desk { display: none; }

@media (min-width: 880px) {
    .lifts-mob { display: none; }

    .lifts-desk {
        display: flex;
        align-items: stretch;
        min-height: calc(100vh - 52px);
    }

    /* ── Muscle rail ── */
    .ldk-rail {
        width: 160px;
        flex: none;
        border-right: 1px solid var(--hairline);
        padding: 20px 0;
        display: flex;
        flex-direction: column;
    }

    .ldk-rail-head {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
        padding: 0 18px 8px;
    }

    .ldk-facet {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 28px;
        padding: 0 18px;
        background: none;
        border: none;
        box-shadow: none;
        cursor: pointer;
        text-align: left;
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--body-muted);
    }

    .ldk-facet:hover { background: var(--row-hover); }
    .ldk-facet.on { background: var(--row-hover); box-shadow: inset 2px 0 0 0 var(--ink); color: var(--ink); font-weight: 700; }

    .ldk-check { width: 9px; height: 9px; flex: none; border: 1px solid rgba(35, 32, 25, 0.3); }
    .ldk-check.on { background: var(--ink); border-color: var(--ink); }

    .ldk-facet-name { flex: 1; min-width: 0; }

    .ldk-facet-count {
        font-size: 10px;
        font-weight: 600;
        color: var(--faint);
        font-variant-numeric: tabular-nums;
    }

    .ldk-facet.on .ldk-facet-count { color: var(--muted); }

    .ldk-rail-note {
        margin-top: auto;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        color: var(--faint);
        padding: 14px 18px 0;
        line-height: 1.6;
    }

    /* ── Table ── */
    .ldk-table { flex: 1; min-width: 0; padding: 20px 22px 0; }

    .ldk-thead {
        display: flex;
        align-items: baseline;
        padding: 0 4px 8px;
        border-bottom: 1.5px solid var(--ink);
    }

    .ldk-th {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
        white-space: nowrap;
    }

    .ldk-th.sorted { color: var(--ink); }
    .ldk-th .caret { font-size: 8px; margin-left: 4px; color: var(--gold); }
    .ldk-th.r { text-align: right; }

    /* 32px rows — the full 24-item catalog fits without scrolling. */
    .ldk-row {
        display: flex;
        align-items: center;
        height: 32px;
        padding: 0 4px;
        border-bottom: 1px solid var(--hairline);
        cursor: pointer;
        font-family: var(--body);
    }

    .ldk-row:hover { background: var(--row-hover); }
    .ldk-row.sel { background: var(--row-hover); box-shadow: inset 2px 0 0 0 var(--ink); }

    /* Shared column widths — header and body use the same classes so they line up. */
    .ldk-c-name { flex: 1; min-width: 0; }
    .ldk-c-type { width: 96px; flex: none; }
    .ldk-c-last { width: 104px; flex: none; }
    .ldk-c-best { width: 86px; flex: none; text-align: right; }
    .ldk-c-act { width: 54px; flex: none; text-align: right; }

    .ldk-name {
        font-size: 13.5px;
        font-weight: 500;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ldk-type { font-family: var(--mono); font-size: 11px; color: var(--body-muted); }
    .ldk-last { font-family: var(--mono); font-size: 11px; color: var(--muted); }
    .ldk-last.never { color: var(--faint); }

    .ldk-best {
        font-family: var(--mono);
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .ldk-acts { display: inline-flex; gap: 8px; justify-content: flex-end; }

    .ldk-acts button {
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        color: var(--faint);
        display: grid;
        place-items: center;
    }

    .ldk-acts button:hover { color: var(--ink); }
    .ldk-acts button.del:hover { color: var(--red); }

    .ldk-foot { display: flex; align-items: baseline; padding: 12px 4px 0; }

    .ldk-foot-l {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .ldk-foot-link {
        background: none;
        border: none;
        padding: 0 0 1px;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.4px;
        color: var(--muted);
        border-bottom: 1px solid var(--hairline-strong);
    }

    .ldk-foot-link.on { color: var(--ink); border-bottom-color: var(--ink); }

    /* ── Progress pane ── */
    .ldk-pane {
        width: 340px;
        flex: none;
        background: var(--row-hover);
        border-left: 1px solid var(--hairline);
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
    }

    .ldk-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

    .ldk-label {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .ldk-pane-name {
        width: 100%;
        margin-top: 6px;
        padding: 0 0 4px;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(35, 32, 25, 0.28);
        outline: none;
        font-family: var(--display);
        font-size: 22px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        color: var(--ink);
    }

    .ldk-pane-name:focus { border-bottom-color: var(--ink); }

    .ldk-chips { display: flex; align-items: center; gap: 7px; margin-top: 12px; }

    .ldk-chip {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--ink);
        background: rgba(35, 32, 25, 0.1);
        border: 1px solid rgba(35, 32, 25, 0.28);
        padding: 3px 8px;
    }

    .ldk-variation {
        background: none;
        border: none;
        padding: 0 0 1px;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.6px;
        color: var(--red);
        border-bottom: 1px solid rgba(180, 69, 44, 0.4);
        white-space: nowrap;
    }

    /* 3-up stat grid: 1px gaps let the pane background read as the rules. */
    .ldk-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--hairline);
        margin: 16px 0 18px;
    }

    .ldk-stats > div { background: var(--row-hover); padding: 9px 6px 10px; }

    .ldk-stats .l {
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .ldk-stats .n {
        font-family: var(--mono);
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
        margin-top: 3px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ldk-toggle { display: flex; border: 1px solid rgba(35, 32, 25, 0.28); }

    .ldk-toggle button {
        flex: 1;
        height: 26px;
        border: none;
        border-right: 1px solid rgba(35, 32, 25, 0.28);
        background: none;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .ldk-toggle button:last-child { border-right: none; }
    .ldk-toggle button.on { background: var(--ink); color: var(--paper); }

    .ldk-chart { margin-top: 14px; }

    .ldk-hist-head {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-top: 16px;
        padding-bottom: 6px;
        border-bottom: 1.5px solid var(--ink);
    }

    .ldk-hist { display: flex; flex-direction: column; }

    .ldk-hist-row {
        display: flex;
        align-items: baseline;
        gap: 8px;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        border-bottom: 1px solid var(--hairline);
        cursor: pointer;
        padding: 7px 2px;
    }

    .ldk-hist-row.sel { background: rgba(35, 32, 25, 0.06); }

    .ldk-hist-row .d {
        width: 74px;
        flex: none;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--ink);
    }

    .ldk-hist-row .pr {
        flex: none;
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--gold);
        background: var(--ink);
        padding: 2px 5px;
    }

    .ldk-hist-row .s {
        flex: 1;
        min-width: 0;
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ldk-hist-row .v {
        flex: none;
        font-family: var(--mono);
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .ldk-pane-foot { margin-top: auto; display: flex; gap: 8px; padding-top: 18px; }

    .ldk-save {
        flex: 1;
        height: 32px;
        border: none;
        background: var(--gold);
        color: var(--ink);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .ldk-save:disabled { opacity: 0.4; cursor: default; }

    .ldk-trash {
        width: 38px;
        height: 32px;
        flex: none;
        display: grid;
        place-items: center;
        background: none;
        border: 1px solid rgba(180, 69, 44, 0.5);
        color: var(--red);
        cursor: pointer;
    }

    .ldk-pane-empty {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.6px;
        color: var(--faint);
        line-height: 1.9;
        margin-top: 10px;
    }

    .ldk-pane-link { color: var(--red); border-bottom: 1px solid rgba(180, 69, 44, 0.4); text-decoration: none; }
}

/* ══ Account · desktop ═════════════════════════════════════════════════════ */
/* Main column (goals 290 + weigh-in history) + data rail 300. GoalsEditor and
   WeightSheet are mobile-only above this breakpoint — both edit in place here. */

.acct-desk { display: none; }
.acc-act { display: none !important; }

@media (min-width: 880px) {
    .acct-mob { display: none; }
    .acc-act { display: inline-flex !important; }

    .acct-desk {
        display: flex;
        align-items: stretch;
        min-height: calc(100vh - 52px);
    }

    .acc-main { flex: 1; min-width: 0; padding: 20px 26px 24px; }

    /* ── Identity bar, full width above the split ── */
    .acc-ident {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-bottom: 16px;
        border-bottom: 1.5px solid var(--ink);
    }

    .acc-mono {
        width: 44px;
        height: 44px;
        flex: none;
        display: grid;
        place-items: center;
        background: var(--ink);
        color: var(--gold);
        font-family: var(--display);
        font-size: 17px;
        letter-spacing: 0.5px;
    }

    .acc-email {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.2px;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .acc-ident-sub {
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 3px;
    }

    .acc-split { display: flex; align-items: flex-start; gap: 36px; padding-top: 20px; }

    .acc-label {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .acc-head {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding-bottom: 7px;
        border-bottom: 1.5px solid var(--ink);
    }

    .acc-head-sub { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--faint); }

    .acc-head-range {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }

    /* ── Daily goals ── */
    .acc-goals { width: 290px; flex: none; }

    .acc-goal-row {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        border-bottom: 1px solid var(--hairline);
    }

    .acc-goal-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); }

    .acc-goal-box {
        width: 84px;
        flex: none;
        height: 28px;
        border: 1px solid var(--hairline-strong);
        background: #FFFDF7;
        outline: none;
        text-align: right;
        padding: 0 8px;
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .acc-goal-box:focus { border-color: var(--ink); }

    .acc-goal-unit {
        width: 34px;
        flex: none;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .acc-goal-actions { display: flex; gap: 9px; margin-top: 16px; }

    .acc-primary, .acc-outline, .acc-danger-out {
        flex: 1;
        height: 30px;
        display: grid;
        place-items: center;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .acc-primary { border: none; background: var(--gold); color: var(--ink); }
    .acc-outline { border: 1px solid var(--hairline-strong); background: none; color: var(--ink); }
    .acc-danger-out { border: 1px solid rgba(180, 69, 44, 0.5); background: none; color: var(--red); }
    .acc-primary:disabled { opacity: 0.4; cursor: default; }

    .acc-note {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        color: var(--faint);
        line-height: 1.8;
        margin-top: 16px;
    }

    /* ── Body weight ── */
    .acc-weight { flex: 1; min-width: 0; }

    .acc-stat-row { display: flex; align-items: flex-end; gap: 22px; padding: 14px 0 4px; }

    .acc-latest {
        font-family: var(--mono);
        font-size: 34px;
        font-weight: 600;
        letter-spacing: -1.4px;
        color: var(--ink);
        line-height: 1;
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
    }

    .acc-latest .u {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0;
        color: var(--muted);
        margin-left: 7px;
    }

    .acc-vslast .v {
        font-family: var(--mono);
        font-size: 17px;
        font-weight: 600;
        margin-top: 6px;
        font-variant-numeric: tabular-nums;
    }

    /* Weight is the one number where down is the good direction. */
    .acc-vslast .v.down, .acc-wdelta.down { color: #6E6A3A; }
    .acc-vslast .v.up, .acc-wdelta.up { color: var(--red); }
    .acc-vslast .v.flat, .acc-wdelta.flat { color: var(--muted); }

    .acc-since {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }

    .acc-chart { padding: 12px 0 8px; }

    .acc-table-head {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-top: 14px;
        padding: 0 2px 7px;
        border-bottom: 1.5px solid var(--ink);
    }

    .acc-c-w { width: 80px; flex: none; text-align: right; }
    .acc-c-d { width: 70px; flex: none; text-align: right; }
    .acc-c-e { width: 30px; flex: none; text-align: right; }

    .acc-wrow {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 38px;
        padding: 0 2px;
        border-bottom: 1px solid var(--hairline);
        cursor: pointer;
    }

    .acc-wrow:hover { background: var(--row-hover); }
    .acc-wrow.sel { background: var(--row-hover); box-shadow: inset 2px 0 0 0 var(--ink); }

    .acc-wdate {
        font-family: var(--mono);
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ink);
    }

    .acc-wval {
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .acc-wdelta { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }

    .acc-c-e button {
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        color: var(--faint);
        display: inline-grid;
        place-items: center;
    }

    .acc-c-e button:hover { color: var(--ink); }

    .acc-empty {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.6px;
        color: var(--faint);
        line-height: 1.9;
        margin-top: 14px;
    }

    /* ── Data rail ── */
    .acc-rail {
        width: 300px;
        flex: none;
        background: var(--row-hover);
        border-left: 1px solid var(--hairline);
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
    }

    .acc-navrow {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 42px;
        background: none;
        border: none;
        border-bottom: 1px solid var(--hairline);
        padding: 0;
        cursor: pointer;
        text-align: left;
    }

    .acc-navrow .n { font-size: 14px; font-weight: 500; color: var(--ink); }

    .acc-navrow .u {
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .acc-rail-block { padding-top: 20px; }

    .acc-sel { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }

    .acc-sel-box {
        width: 84px;
        flex: none;
        height: 30px;
        border: 1px solid var(--hairline-strong);
        background: #FFFDF7;
        outline: none;
        text-align: right;
        padding: 0 8px;
        font-family: var(--mono);
        font-size: 18px;
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .acc-sel-box:focus { border-color: var(--ink); }
    .acc-sel-unit { font-family: var(--mono); font-size: 11px; color: var(--muted); }
    .acc-sel-actions { display: flex; gap: 8px; margin-top: 12px; }

    .acc-rail-note {
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        color: var(--faint);
        line-height: 1.7;
        margin-top: 8px;
    }

    .acc-session {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--body-muted);
    }

    .acc-session .sq { width: 5px; height: 5px; flex: none; background: #6E6A3A; }

    .acc-rail-foot { margin-top: auto; padding-top: 20px; }

    .acc-signout {
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        background: none;
        border: 1px solid rgba(180, 69, 44, 0.5);
        color: var(--red);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }
}

/* ══ Inner Citadel · desktop ═══════════════════════════════════════════════ */
/* Delivery rail 236 + message pool (fills) + Today-hero preview 320. The mobile
   page describes the 51-character rule; here the preview shows it. */

.icd-desk { display: none; }

@media (min-width: 880px) {
    .icd-mob { display: none; }

    .icd-desk {
        display: flex;
        align-items: stretch;
        min-height: calc(100vh - 52px);
    }

    .icd-label {
        display: block;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* ── Delivery rail ── */
    .icd-rail {
        width: 236px;
        flex: none;
        border-right: 1px solid var(--hairline);
        padding: 20px 20px 24px;
        display: flex;
        flex-direction: column;
    }

    .icd-toggle-row {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        border-bottom: 1px solid var(--hairline);
    }

    .icd-toggle-row .n { font-size: 14px; font-weight: 500; color: var(--ink); }

    .icd-toggle-row .u {
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* Square, not pill — the design system has no radii. */
    .icd-toggle {
        width: 30px;
        height: 17px;
        flex: none;
        border: none;
        border-radius: 0;
        background: var(--hairline-strong);
        cursor: pointer;
        padding: 0;
        position: relative;
    }

    .icd-toggle::after {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        width: 14px;
        height: 15px;
        background: var(--paper);
        transition: left 0.16s ease;
    }

    .icd-toggle.on { background: var(--ink); }
    .icd-toggle.on::after { left: 15px; }
    .icd-toggle:disabled { opacity: 0.4; cursor: default; }

    .icd-block { padding-top: 20px; }

    /* The 1px gaps are the container showing through, so inactive cells must be opaque. */
    .icd-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: rgba(35, 32, 25, 0.28);
        border: 1px solid rgba(35, 32, 25, 0.28);
        margin-top: 9px;
    }

    .icd-grid button {
        height: 30px;
        border: none;
        background: var(--paper);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--ink);
    }

    .icd-grid button.on { background: var(--ink); color: var(--paper); }
    .icd-grid button:disabled { opacity: 0.5; cursor: default; }

    .icd-times {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--ink);
        margin-top: 11px;
    }

    .icd-sends {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--faint);
        line-height: 1.7;
        margin-top: 6px;
    }

    .icd-reach {
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        color: var(--muted);
        line-height: 1.7;
        margin-top: 8px;
    }

    .icd-reach a { color: var(--red); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(180, 69, 44, 0.4); }

    .icd-reach-n {
        display: flex;
        align-items: center;
        gap: 7px;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        color: var(--body-muted);
        margin-top: 10px;
    }

    .icd-reach-n .sq { width: 5px; height: 5px; flex: none; background: #6E6A3A; }

    .icd-rail-note {
        margin-top: auto;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        color: var(--faint);
        line-height: 1.7;
        padding-top: 20px;
    }

    /* ── Pool ── */
    .icd-pool { flex: 1; min-width: 0; padding: 20px 22px 24px; }

    .icd-composer {
        border: 1px solid var(--hairline-strong);
        background: #FFFDF7;
        padding: 14px 16px 12px;
    }

    .icd-composer textarea {
        width: 100%;
        margin-top: 10px;
        padding: 0 0 10px;
        background: none;
        border: none;
        border-bottom: 1.5px solid var(--ink);
        outline: none;
        resize: none;
        font-family: var(--body);
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.3px;
        line-height: 1.25;
        color: var(--ink);
    }

    .icd-composer textarea::placeholder { color: var(--faint); }

    .icd-composer-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

    .icd-count {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .icd-count.over { color: var(--red); }

    .icd-add {
        height: 30px;
        flex: none;
        padding: 0 16px;
        border: none;
        background: var(--gold);
        color: var(--ink);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .icd-add:disabled { opacity: 0.4; cursor: default; }

    .icd-pool-head {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-top: 22px;
        padding: 0 4px 7px;
        border-bottom: 1.5px solid var(--ink);
    }

    .icd-pool-count { font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--faint); }

    .icd-pool-fit {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* These are sentences — the rows wrap rather than truncate. */
    .icd-row {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 46px;
        padding: 8px 4px;
        border-bottom: 1px solid var(--hairline);
        cursor: pointer;
    }

    .icd-row:hover { background: var(--row-hover); }
    .icd-row.sel { background: var(--row-hover); box-shadow: inset 2px 0 0 0 var(--ink); }

    .icd-badge { width: 16px; flex: none; text-align: center; font-size: 12px; }

    .icd-text {
        flex: 1;
        min-width: 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--ink);
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .icd-chars {
        width: 74px;
        flex: none;
        text-align: right;
        font-family: var(--mono);
        font-size: 10.5px;
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }

    .icd-fit {
        width: 116px;
        flex: none;
        text-align: right;
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .icd-fit.no { color: var(--faint); }

    .icd-acts { width: 52px; flex: none; display: inline-flex; gap: 8px; justify-content: flex-end; }

    .icd-acts button {
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        color: var(--faint);
        display: grid;
        place-items: center;
    }

    .icd-acts button:hover { color: var(--ink); }
    .icd-acts button.del:hover { color: var(--red); }
    .icd-acts button:disabled { opacity: 0.4; cursor: default; }

    .icd-pool-foot { display: flex; align-items: baseline; padding: 14px 4px 0; }

    .icd-legend {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .icd-legend .s { color: var(--gold); }
    .icd-legend .d { color: var(--faint); }

    .icd-foot-link {
        background: none;
        border: none;
        padding: 0 0 1px;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.4px;
        color: var(--muted);
        border-bottom: 1px solid var(--hairline-strong);
    }

    .icd-foot-link:disabled { opacity: 0.4; cursor: default; }

    .icd-empty {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.6px;
        color: var(--faint);
        line-height: 1.9;
        margin-top: 12px;
    }

    /* ── Preview pane ── */
    .icd-preview {
        width: 320px;
        flex: none;
        background: var(--row-hover);
        border-left: 1px solid var(--hairline);
        padding: 20px 22px;
        display: flex;
        flex-direction: column;
    }

    .icd-sel-text {
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -0.2px;
        line-height: 1.3;
        color: var(--ink);
        margin-top: 8px;
        overflow-wrap: anywhere;
    }

    .icd-sel-meta {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-top: 10px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--hairline-strong);
    }

    .icd-sel-meta .n {
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 700;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .icd-sel-meta .n.over { color: var(--red); }

    .icd-sel-meta .w {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* A real hero card on ink: the character limit read as a length, not a number. */
    .icd-hero { background: var(--ink); padding: 14px 16px 16px; margin-top: 10px; }

    .icd-hero .d {
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--ink-muted);
    }

    .icd-hero .t {
        font-family: var(--display);
        font-size: 21px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        line-height: 1.12;
        color: var(--paper);
        margin-top: 8px;
    }

    .icd-hero .r { width: 26px; height: 2px; background: var(--gold); margin-top: 12px; }

    .icd-hero-note {
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        color: var(--muted);
        line-height: 1.7;
        margin-top: 10px;
    }

    .icd-flash {
        border-left: 3px solid var(--gold);
        padding: 8px 12px;
        margin-top: 8px;
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.6;
        color: var(--body-muted);
    }

    .icd-preview-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; }

    .icd-primary {
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: none;
        background: var(--gold);
        color: var(--ink);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .icd-danger-out {
        height: 30px;
        display: grid;
        place-items: center;
        background: none;
        border: 1px solid rgba(180, 69, 44, 0.5);
        color: var(--red);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .icd-primary:disabled, .icd-danger-out:disabled { opacity: 0.4; cursor: default; }
}

/* ══ Inner Citadel · shared masonry ═══════════════════════════════════════════ */
/* Habit walls in running bond. The four virtues each carry three tones, handed to
   CSS as --v-accent / --v-tint / --v-ink so a virtue change is one declaration on a
   wrapper and every rule beneath it transitions on its own. Brick geometry is one
   block for all four walls: the size arrives as --b-h / --b-gap / --b-half, which is
   the only thing that differs between 16px Today mobile, 13px Today desktop and
   History mobile, and 9px History desktop.                                    */

:root {
    --mortar: #DCD4BF;      /* the bed the bricks sit in */
    --footing: #8A8069;     /* the strip of ground under every wall */
    --olive: #8A7A4A;       /* earned / pinned readouts */
    --rust-tint: #E4886B;   /* a day that lost bricks */
    --green: #4F6350;       /* held */
    --pale: #B0A890;        /* hints, "since" notes */
}

.cit-wall { display: flex; flex-direction: column; gap: var(--b-gap); }

.cit-course { display: flex; gap: var(--b-gap); flex: 1; min-width: 0; }

.cit-brick {
    display: block;
    height: var(--b-h);
    flex: 1;
    min-width: 0;
    border: none;
    padding: 0;
    transition: background 0.3s ease;
}

/* Bottom shading is the only depth the design system allows. */
.cit-brick.set, .cit-brick.today,
.cit-half.set { box-shadow: inset 0 calc(-1 * var(--b-shadow)) 0 rgba(0, 0, 0, 0.16); }

.cit-brick.open { background: rgba(35, 32, 25, 0.09); }
.cit-brick.none { background: transparent; }
.cit-brick.pick { cursor: pointer; }

/* Odd courses are inset by half a brick and close their ends with these. */
.cit-half {
    display: block;
    height: var(--b-h);
    flex: none;
    width: var(--b-half);
}

.cit-half.open { background: rgba(35, 32, 25, 0.09); }
.cit-half.none { background: transparent; }

.cit-bed { background: var(--mortar); padding: 6px; overflow: hidden; }

.cit-footing { height: 6px; background: var(--footing); margin-top: 4px; }
.cit-footing.thin { height: 5px; margin-top: 0; }

/* Per-brick attribution on the History wall. Fixed, so the chip is never clipped by
   the wall viewport it rises out of. */
.cit-tip {
    position: fixed;
    z-index: 60;
    transform: translate(-50%, -100%);
    background: var(--ink);
    color: var(--paper);
    padding: 5px 9px 6px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 0 rgba(35, 32, 25, 0.25);
    pointer-events: none;
}

/* Carousel: a 400%-wide track shifted a quarter per virtue, bottom-aligned so all
   four walls stand on one ground line even though only one is in frame. */
.cit-carousel { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; }

.cit-track {
    display: flex;
    align-items: flex-end;
    width: 400%;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.cit-slide { flex: none; width: 25%; padding: 0 1px; }

.cit-dots { display: flex; align-items: center; gap: 7px; margin-top: 14px; }

.cit-dots button {
    width: 8px;
    height: 8px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(35, 32, 25, 0.18);
    transition: all 0.3s ease;
}

.cit-dots button.on { width: 22px; }

.cit-hint {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── The habit row: its appearance IS the day's record ─────────────────────── */
/* Build is hatched until laid, then solid in the virtue's clay. Break sits outlined
   in rust while it is being held and turns solid rust the moment a slip is reported. */
.cit-hrow {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 6px 10px 7px;
    text-align: left;
    border: none;
    cursor: pointer;
    background: repeating-linear-gradient(135deg, rgba(35, 32, 25, 0.14) 0 3px, transparent 3px 6px);
    transition: background 0.3s ease;
}

.cit-hrow.sm { min-height: 36px; padding: 6px 9px 7px; }

.cit-hrow .n {
    flex: 1;
    min-width: 0;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.cit-hrow.sm .n { font-size: 11.5px; }

.cit-hrow .t {
    flex: none;
    font-family: var(--mono);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--muted);
}

.cit-hrow.bld.on .n { color: var(--paper); }
.cit-hrow.bld.on .t { color: var(--v-tint); }

.cit-hrow.brk {
    border: 1.5px solid rgba(180, 69, 44, 0.4);
    background: none;
}

.cit-hrow.brk .t { color: var(--red); }

.cit-hrow.brk.on {
    border: none;
    background: var(--red);
}

.cit-hrow.brk.on .n, .cit-hrow.brk.on .t { color: var(--paper); }

.cit-col-head {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 7px;
    border-bottom: 1.5px solid var(--ink);
    margin-bottom: 7px;
}

.cit-rows { display: flex; flex-direction: column; gap: 2px; }

.cit-col-empty {
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pale);
    padding: 8px 0;
}

.cit-add {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 18px 2px 0;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--v-ink);
}

.cit-add .sq {
    width: 18px;
    height: 18px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--ink);
}

.cit-add.small { font-size: 9.5px; gap: 8px; padding: 12px 0 0; }
.cit-add.small .sq { width: 15px; height: 15px; font-size: 11px; }

/* ── Desktop masthead stats ────────────────────────────────────────────────── */
/* .mast-status is already desktop-only, so these need no breakpoint of their own. */
.cit-mast-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 15px;
}

.cit-mast-stat .n {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--paper);
}

.cit-mast-stat .n.gold { color: var(--gold); }
.cit-mast-stat .n.lost { color: var(--rust-tint); }

.cit-mast-stat .u {
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* ── New-habit sheet ───────────────────────────────────────────────────────── */
.cit-new-block { margin-top: 22px; }
.cit-new-block .led-label { display: block; margin-bottom: 9px; }

.cit-new-note {
    margin: 10px 2px 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.8;
}

.cit-new-virtues { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }

.cit-new-virtues button {
    padding: 10px 11px 11px;
    text-align: left;
    border: 1px solid var(--hairline-strong);
    background: none;
    cursor: pointer;
    transition: background 0.25s ease;
}

.cit-new-virtues button.on { background: var(--ink); border-color: var(--ink); }

.cit-new-virtues .n {
    display: block;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
}

.cit-new-virtues .g {
    display: block;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}

.cit-new-virtues button.on .g { color: var(--ink-muted); }

/* ══ Inner Citadel · Today, mobile ════════════════════════════════════════════ */
/* One virtue at a time, swiped between, with the skyline at the foot as the balance
   view. The handoff gave the virtue its own ink band below the masthead; that stacked
   three ink blocks deep on a phone, so the virtue is the masthead's own hero instead
   and the app's tab row gets that space back. */

.cit-desk { display: none; }

/* The masthead carries the virtue in frame: name, epithet and wall total. The old separate ink
   virtue band and its four-tab virtue switcher are gone, which hands that vertical space back to
   the app's own tab row. Virtues are reached by swiping the wall, the dots, or the skyline. */
.cit-hero { display: flex; align-items: flex-end; gap: 12px; flex: 1; min-width: 0; }

.cit-hero .h { min-width: 0; }

.cit-hero .n {
    font-family: var(--display);
    font-size: 29px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--v-tint);
    transition: color 0.35s ease;
}

.cit-hero .g {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cit-hero .b { flex: none; text-align: right; }

.cit-hero .b .v {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--paper);
}

.cit-hero .b .u {
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* The day tally rides the eyebrow on mobile; desktop has it in the status slot already. */
.cit-eyebrow-tally { color: var(--v-tint); transition: color 0.35s ease; }
.cit-eyebrow-tally.lost { color: var(--rust-tint); }

/* Desktop stands all four virtues side by side, so there is no single virtue to lead with. */
.cit-title-desk { display: none; }

@media (min-width: 880px) {
    .cit-hero, .cit-eyebrow-tally { display: none; }
    .cit-title-desk { display: block; }
}

/* The virtue's tint carries on under the masthead, where the old band's border used to sit. */
.cit-mob { border-top: 4px solid var(--v-tint); transition: border-color 0.35s ease; }

.cit-body { padding-top: 18px; padding-bottom: 26px; }

.cit-cols { display: flex; gap: 10px; padding-top: 20px; align-items: flex-start; }

.cit-col { flex: 1; min-width: 0; }

.cit-sky-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 26px 0 10px;
    border-bottom: 1.5px solid var(--ink);
}

.cit-sky-head .l {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink);
}

.cit-sky-head .r {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
}

.cit-sky { display: flex; align-items: flex-end; gap: 6px; height: 78px; padding-top: 12px; }

.cit-sky button {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.cit-sky .bar {
    display: block;
    width: 100%;
    background: rgba(35, 32, 25, 0.22);
    transition: all 0.3s ease;
}

.cit-sky .l {
    display: block;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 6px;
    color: var(--muted);
}

.cit-sky .l.on { color: var(--ink); }

/* ══ Inner Citadel · Today, desktop ═══════════════════════════════════════════ */
/* No swiping and no skyline: all four walls standing side by side on one ground IS
   the balance view, which is what the width buys. */

@media (min-width: 880px) {
    .cit-mob { display: none; }

    .cit-desk {
        display: flex;
        align-items: stretch;
        gap: 14px;
        padding: 22px 28px 28px;
    }

    .cit-column {
        flex: 1;
        min-width: 0;
        border: 1px solid rgba(35, 32, 25, 0.18);
        display: flex;
        flex-direction: column;
    }

    .cit-column-head {
        background: var(--ink);
        padding: 12px 14px 11px;
        border-bottom: 3px solid var(--v-tint);
    }

    .cit-column-head .t { display: flex; align-items: baseline; gap: 8px; }

    .cit-column-head .n {
        font-family: var(--display);
        font-size: 18px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        line-height: 1;
        color: var(--v-tint);
    }

    .cit-column-head .c {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--paper);
    }

    .cit-column-head .g {
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--ink-muted);
        margin-top: 4px;
    }

    .cit-column-wall { padding: 12px 12px 0; }
    .cit-column-wall .cit-bed { padding: 5px; }

    .cit-column-lists {
        padding: 12px 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
    }

    .cit-column-lists .cit-col-head { font-size: 8.5px; letter-spacing: 1.2px; padding-bottom: 6px; margin-bottom: 5px; }
    .cit-column-lists .cit-col-head.spaced { padding: 10px 0 6px; }
}

/* ══ The Record · desktop ═══════════════════════════════════════════════════ */
/* Main column + a 300px day-replay rail. The scrubber moves the ledger and the
   replay through the last 26 weeks; the walls never move — they are always all-time. */

.rec-desk { display: none; }

@media (min-width: 880px) {
    .rec-mob { display: none; }

    .rec-desk {
        display: flex;
        align-items: stretch;
        min-height: calc(100vh - 52px);
    }

    .rec-main { flex: 1; min-width: 0; padding: 22px 28px 28px; }

    /* ── Timeline scrubber ── */
    .rec-scrub { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

    .rec-scrub-range, .rec-scrub-today {
        flex: none;
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .rec-scrub-today { color: var(--pale); letter-spacing: 1px; }

    .rec-track {
        flex: 1;
        height: 9px;
        background: rgba(35, 32, 25, 0.08);
        position: relative;
        cursor: grab;
        touch-action: none;
    }

    /* Overhangs the track top and bottom so the window reads as a grip on it. */
    .rec-win {
        position: absolute;
        top: -2px;
        bottom: -2px;
        background: var(--gold);
        cursor: grab;
        transition: left 0.06s linear;
    }

    .rec-jump {
        flex: none;
        border: none;
        cursor: pointer;
        padding: 4px 8px 5px;
        font-family: var(--mono);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        background: var(--gold);
        color: var(--ink);
    }

    /* ── The walls panel ── */
    .rec-walls { border: 1px solid rgba(35, 32, 25, 0.18); position: relative; }

    .rec-walls-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px 10px; }

    .rec-walls-head .l {
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--ink);
    }

    .rec-walls-head .h {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .rec-walls-head .h.pin { color: var(--olive); }

    /* Anchored at the ground: column-reverse makes scroll position zero the bottom,
       so the walls stand on the floor and you scroll up for their tops. */
    .rec-viewport {
        height: 252px;
        overflow-y: auto;
        display: flex;
        flex-direction: column-reverse;
        background: var(--mortar);
        margin: 0 14px;
    }

    .rec-walls-row { display: flex; align-items: flex-end; gap: 14px; padding: 14px 10px 0; }

    .rec-wall { flex: 1; min-width: 0; }

    .rec-ground { height: 6px; background: var(--footing); margin: 0 14px; }

    .rec-wall-labels { display: flex; gap: 14px; padding: 9px 24px 12px; }

    .rec-wall-label {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: baseline;
        gap: 7px;
        justify-content: center;
    }

    .rec-wall-label .chip { display: block; width: 9px; height: 9px; flex: none; }

    .rec-wall-label .n {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--ink);
    }

    .rec-wall-label .c {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--muted);
    }

    /* ── The ledger ── */
    .rec-ledger-head {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-top: 26px;
        padding-bottom: 10px;
        border-bottom: 1.5px solid var(--ink);
    }

    .rec-ledger-head .l {
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--ink);
    }

    .rec-legend {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .rec-legend span { display: flex; align-items: center; gap: 4px; }
    .rec-legend i { width: 10px; height: 10px; display: block; }
    .rec-legend i.void { box-shadow: inset 0 0 0 1px rgba(35, 32, 25, 0.18); }

    /* Offset by the label column (149) + its padding (10) + one cell gap. */
    .rec-axis { display: flex; gap: 1px; padding: 12px 0 6px; margin-left: 160px; }

    .rec-axis button {
        flex: none;
        width: 13px;
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
        text-align: left;
        overflow: visible;
        white-space: nowrap;
        font-family: var(--mono);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .rec-axis button.on { color: var(--ink); }

    .rec-group { display: flex; align-items: center; gap: 8px; padding: 9px 0 5px; }
    .rec-group .chip { display: block; width: 9px; height: 9px; flex: none; }

    .rec-group .n {
        font-family: var(--mono);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--body-muted);
    }

    .rec-row { display: flex; align-items: center; gap: 1px; padding: 1px 0; }

    /* 159, not 149: box-sizing is border-box app-wide, so the 10px gutter has to be inside the
       width for the label column to measure the handoff's 149px + 10px and line the cells up
       under the date axis's 160px offset. */
    .rec-row-label {
        flex: none;
        width: 159px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        padding-right: 10px;
        overflow: hidden;
    }

    .rec-row-label .n {
        font-family: var(--body);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.1;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rec-row-label .s {
        font-family: var(--mono);
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--pale);
        line-height: 1;
        white-space: nowrap;
    }

    .rec-cell {
        flex: none;
        width: 13px;
        height: 13px;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: box-shadow 0.15s ease;
    }

    .rec-cell.laid { background: var(--gold); }
    .rec-cell.held { background: var(--ink); }
    .rec-cell.slipped { background: var(--red); }
    .rec-cell.missed { background: rgba(35, 32, 25, 0.10); }
    .rec-cell.pre { background: transparent; }

    /* A paper hairline then an ink ring — the selected column reads down the ledger. */
    .rec-cell.sel { box-shadow: inset 0 0 0 1.5px var(--paper), inset 0 0 0 3px var(--ink); }

    /* ── Day replay rail ── */
    .rec-panel {
        flex: none;
        width: 300px;
        border-left: 1px solid rgba(35, 32, 25, 0.18);
        padding: 22px 22px 28px;
        background: rgba(35, 32, 25, 0.03);
    }
}

.rec-panel-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
}

.rec-panel-date {
    font-family: var(--display);
    font-size: 23px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--ink);
    margin-top: 6px;
}

.rec-panel-sum {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 6px;
}

.rec-panel-hint {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--pale);
    margin-top: 10px;
}

.rec-compare {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--olive);
    padding: 0 14px 10px;
}

/* ── Day replay rows (both breakpoints) ───────────────────────────────────── */
.rep-group {
    padding: 10px 0 3px;
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.rep-group.sm { padding: 8px 0 2px; }

.rep-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    padding: 7px 10px;
    margin-top: 4px;
    background: rgba(35, 32, 25, 0.045);
    transition: background 0.25s ease;
}

.rep-row.sm { padding: 6px 9px; }
.rep-row.slipped { background: rgba(180, 69, 44, 0.10); }

.rep-row .n {
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
}

.rep-row.sm .n { font-size: 12px; }
.rep-row.missed .n { color: var(--muted); }

.rep-row .t {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.rep-row.laid .t { color: var(--olive); }
.rep-row.held .t { color: var(--green); }
.rep-row.slipped .t { color: var(--red); }
.rep-row.missed .t { color: var(--pale); }

/* ══ The Record · mobile ════════════════════════════════════════════════════ */
/* Swipeable full-height walls, range tabs over a draggable fortnight strip, then the
   same editable replay. No per-brick attribution — there is no hover on a phone. */

/* The Today screen opens on its own ink virtue band; this one opens straight onto paper, so it
   needs the gutter's top breathing room or the first rule hugs the masthead. */
.rec-mob { padding-top: 18px; }

.rec-sec {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 9px;
    border-bottom: 1.5px solid var(--ink);
}

.rec-sec.spaced { margin-top: 20px; }

.rec-sec .l {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink);
}

.rec-sec .r {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.rec-sec .r.muted { color: var(--muted); font-size: 9px; letter-spacing: 1.1px; }

.rec-compare.mob {
    padding: 0;
    margin-top: 9px;
    font-size: 8.5px;
    letter-spacing: 0.8px;
    line-height: 1.7;
}

.rec-carousel { margin-top: 12px; }

/* Bottom-anchored with a normal-direction scroller: you land on the crown and scroll
   down to the ground. column-reverse would anchor it too, but it breaks wheel scrolling. */
.rec-mob-scroll {
    height: 216px;
    overflow-y: auto;
    background: var(--mortar);
    scrollbar-width: none;
}

.rec-mob-scroll::-webkit-scrollbar { display: none; }

.rec-mob-stack {
    padding: 12px 8px 0;
    min-height: 204px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.rec-tabs { display: flex; gap: 3px; padding-top: 12px; }

.rec-tabs button {
    flex: 1;
    min-width: 0;
    border: none;
    cursor: pointer;
    padding: 6px 2px 7px;
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    background: rgba(35, 32, 25, 0.07);
    color: var(--body-muted);
    transition: all 0.25s ease;
}

.rec-tabs button.on { background: var(--ink); color: var(--gold); }

.rec-strip {
    display: flex;
    gap: 2px;
    margin-top: 12px;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.rec-strip button {
    flex: 1;
    min-width: 0;
    border: none;
    cursor: pointer;
    padding: 6px 0 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: rgba(35, 32, 25, 0.06);
    transition: background 0.25s ease;
}

.rec-strip .wd { font-family: var(--mono); font-size: 7.5px; font-weight: 700; color: var(--muted); }

.rec-strip .num {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.rec-strip .dot { display: block; width: 5px; height: 5px; background: var(--muted); }
.rec-strip .dot.slip { background: var(--red); }
.rec-strip .dot.good { background: var(--gold); }

.rec-strip button.on { background: var(--ink); }
.rec-strip button.on .wd { color: var(--ink-muted); }
.rec-strip button.on .num { color: var(--paper); }

.rec-strip-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; }

.rec-strip-foot .h {
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}

.rec-mob-replay { margin-top: 22px; }

.rec-mob-replay-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 4px;
}

.rec-mob-replay-head .d {
    font-family: var(--display);
    font-size: 23px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--ink);
}

.rec-mob-replay-head .s {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ══ Admin · all accounts ══════════════════════════════════════════════════ */
/* Owner-only console. Cards on mobile, a ledger table on desktop — same split as Foods. */

.adm-desk { display: none; }

.adm-error {
    margin: 14px 0 4px;
    padding: 10px 12px;
    border-left: 2px solid var(--red);
    background: var(--row-hover);
    font-family: var(--body);
    font-size: 13px;
    color: var(--ink);
}

.adm-card {
    padding: 13px 0 14px;
    border-bottom: 1px solid var(--hairline);
}

/* The signed-in account is marked rather than hidden — it's the one row with no delete. */
.adm-card.you { border-left: 2px solid var(--gold); padding-left: 10px; }

.adm-card-top { display: flex; align-items: center; gap: 8px; }

.adm-email {
    font-family: var(--body);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-tag {
    flex: none;
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--gold);
    padding: 2px 6px 3px;
    margin-left: 8px;
}

.adm-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 7px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--muted);
}

.adm-del {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 11px;
    padding: 6px 12px 7px;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: none;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--red);
}

.adm-del:hover { background: var(--red); color: var(--paper); }

.adm-note {
    margin: 18px 0 8px;
    font-family: var(--body);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
}

@media (min-width: 880px) {
    .adm-mob { display: none; }
    .adm-desk { display: block; }

    .adm { padding: 22px 32px 40px; }

    /* The gap matters: a right-aligned ID butting straight into a left-aligned date reads as one
       run-together field ("13 Jun 2026" for id 1). */
    .adm-thead, .adm-row { gap: 16px; }

    .adm-thead {
        display: flex;
        align-items: baseline;
        padding: 0 4px 8px;
        border-bottom: 1.5px solid var(--ink);
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--muted);
    }

    .adm-row {
        display: flex;
        align-items: center;
        height: 38px;
        padding: 0 4px;
        border-bottom: 1px solid var(--hairline);
    }

    .adm-row:hover { background: var(--row-hover); }
    .adm-row.you { box-shadow: inset 2px 0 0 var(--gold); }

    /* Shared widths — header and body use the same classes so they line up. */
    .adm-c-email { flex: 1; min-width: 0; display: flex; align-items: center; }
    .adm-c-id { width: 48px; flex: none; }
    .adm-c-date { width: 104px; flex: none; }
    .adm-c-num { width: 62px; flex: none; }
    .adm-c-act { width: 44px; flex: none; text-align: right; }
    .adm-thead .r, .adm-row .r { text-align: right; }

    .adm-mono {
        font-family: var(--mono);
        font-size: 11.5px;
        color: var(--body-muted);
        font-variant-numeric: tabular-nums;
    }

    .adm-c-act .del {
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        color: var(--faint);
        display: inline-grid;
        place-items: center;
    }

    .adm-c-act .del:hover { color: var(--red); }
}

/* ══ Today's board ═════════════════════════════════════════════════════════ */
/* The active plan's meal groups, rendered as the Plans page's slot blocks so a meal on Today reads
   the same as a meal slot on Plans. Colour arrives only on tick: a block is plain ink on paper
   until it's eaten, which keeps the day's progress legible instead of every block shouting. */

.board { margin-top: 18px; }

.board-blk {
    margin-bottom: 12px;
    background: transparent;
    transition: background 260ms ease;
}

/* No flex gap here on purpose: a gap would walk the head's kcal column out of line with the item
   rows beneath it. The leading items carry their own margin-right instead (same trick as .tdk-head). */
.board-head {
    display: flex;
    align-items: center;
    padding: 6px 8px 8px;
    border-bottom: 1.5px solid var(--ink);
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
}

.board-chev {
    flex: none;
    width: 14px;
    height: 14px;
    margin-right: 9px;
    display: grid;
    place-items: center;
    color: var(--muted);
    transform: rotate(0deg);
    transition: transform 200ms ease;
}

.board-chev.open { transform: rotate(90deg); }

.board-sq {
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 9px;
    background: var(--hairline-strong);
    transition: background 260ms ease;
}

.board-nm {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink);
    transition: color 260ms ease;
}

.board-nm.on { text-decoration: line-through; }

.board-ct {
    flex: none;
    margin-right: 9px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--faint);
}

/* Every numeric cell is flex:none in both head and rows — that's what keeps the columns stacked
   when the log column is narrow. Making them shrinkable de-aligns them immediately. */
.board-tot {
    flex: none;
    width: 52px;
    text-align: right;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.board-tick {
    flex: none;
    width: 15px;
    height: 15px;
    margin-left: 12px;
    padding: 0;
    border: 1.5px solid rgba(35, 32, 25, 0.3);
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--paper);
    transition: background 260ms ease;
}

.board-x {
    flex: none;
    width: 20px;
    margin-left: 6px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--faint);
    display: grid;
    place-items: center;
}

.board-x:hover { color: var(--red); }

/* ── Item rows (the group's foods), shown when expanded ── */
.board-item {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 8px;
    border-bottom: 1px solid var(--hairline);
    min-width: 0;
    overflow: hidden;
}

.board-item-nm {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}

.board-item-meta {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--muted);
}

.board-item-n {
    flex: none;
    width: 38px;
    text-align: right;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--body-muted);
    font-variant-numeric: tabular-nums;
}

.board-item-k {
    flex: none;
    width: 52px;
    text-align: right;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Head tick (15+12) + skip (20+6). Keeps the group total stacked over this column. */
.board-item-pad { flex: none; width: 53px; }

/* On a phone the three macro cells cost 114px and leave the food name 107px, at which point every
   name clips — "Rolled Oats · 1 serving" alone needs 148px. Drop them below the breakpoint and keep
   name + kcal. The widths themselves are untouched: shrinking them would de-align the columns. */
@media (max-width: 879.98px) {
    .board-item-n { display: none; }
}

.board-skipped { padding: 14px 0 4px; }

.board-back {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 8px 2px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--body);
    font-size: 13.5px;
    color: var(--muted);
}

.board-back-add {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
}

/* ── No active plan ── */
.noplan { padding-top: 40px; max-width: 460px; margin: 0 auto; }

.noplan-head {
    font-family: var(--display);
    font-size: 26px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ink);
}

.noplan-body {
    margin: 12px 0 22px;
    font-family: var(--body);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--body-muted);
}

/* ── Plan bits ── */
.plan-active-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px 3px;
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--gold);
    vertical-align: middle;
}

.plan-target { margin-top: 16px; }
.plan-target-head { margin-bottom: 8px; }

.acct-note, .acc-empty {
    padding: 10px 2px 4px;
    font-family: var(--body);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

.acc-goal-fixed {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 880px) {
    .pdk-card.live { border-left: 2px solid var(--gold); }

    .pdk-live {
        margin-top: 10px;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--gold);
    }

    .pdk-activate {
        margin-top: 12px;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--ink);
        background: transparent;
        cursor: pointer;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--ink);
    }

    .pdk-activate:hover { background: var(--ink); color: var(--paper); }
}