/* ================================================
   meds v2 — design system
   (ported from the tempo prototype, mobile-first)
   ================================================ */

:root {
    --bg: #08090b;
    --surface: #101116;
    --surface-2: #16181d;
    --surface-3: #1c1e24;
    --border: #1f2128;
    --border-strong: #2a2d35;
    --text: #e7e9ee;
    --text-2: #aeb2bd;
    --text-3: #8a8f9b;
    --text-4: #666a75;

    --accent: #5fc8c8;
    --accent-soft: rgba(95, 200, 200, 0.14);
    --accent-line: rgba(95, 200, 200, 0.35);
    --accent-ink: #0c2226;

    --success: #6fcf97;
    --success-soft: rgba(111, 207, 151, 0.14);
    --warn: #f0b955;
    --warn-soft: rgba(240, 185, 85, 0.14);
    --danger: #ed6b5e;
    --danger-soft: rgba(237, 107, 94, 0.14);

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --pad: 18px;
    --gap: 14px;

    --font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

    --bottom-nav-h: 0px;
}

[data-theme="light"] {
    --bg: #f7f7f5;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #f3f3f0;
    --border: #e5e5e0;
    --border-strong: #d4d4cf;
    --text: #18181b;
    --text-2: #52525b;
    --text-3: #71717a;
    --text-4: #a1a1aa;
    --accent-ink: #fff;
}

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

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "ss02", "cv01", "cv11";
    -webkit-font-smoothing: antialiased;
    font-size: 14.5px;
    line-height: 1.45;
    letter-spacing: -0.005em;
    min-height: 100vh;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
input, select, textarea { font-family: inherit; }
svg { width: 16px; height: 16px; flex: none; }
::selection { background: var(--accent-soft); color: var(--text); }

body.modal-open { overflow: hidden; }

/* ================================================
   SITE TOP BAR (matches the rest of rosestuffs.org)
   ================================================ */
.top-bar {
    background-color: #1a1a1a;
    padding: 8.5px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.nav-container { display: flex; justify-content: space-between; align-items: center; position: relative; }
.nav-links { list-style: none; display: flex; gap: 20px; }
.nav-links li a { text-decoration: none; color: #eee; font-weight: bold; }
.nav-links li a:hover, .nav-links li a.active-link { color: #4bc0c0; }
.nav-center { position: absolute; left: 50%; transform: translateX(-50%); }
.github-icon { display: block; margin: 0 auto; width: 32px; height: auto; }
.user-account { display: flex; gap: 10px; align-items: center; }
.user-account #userStatus { color: #ccc; font-size: 0.85em; }
.user-account #userStatus.logged-in { color: #4bc0c0; }
.user-account button {
    padding: 7px 12px;
    background-color: #333;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 0.85em;
}
.user-account button:hover { background-color: #444; }

@media (max-width: 720px) {
    .nav-center { display: none; }
    .user-account #userStatus { display: none; }
    .nav-links { gap: 12px; }
}

/* ================================================
   App layout
   ================================================ */
.app { min-height: calc(100vh - 50px); display: flex; flex-direction: column; }

.app-topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 49px;       /* below site top bar */
    z-index: 50;
}

.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; font-size: 15px; }
.brand-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); position: relative; }
.brand-dot::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--bg); }
.brand-dot::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--accent); z-index: 1; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav button {
    padding: 7px 12px;
    font-size: 13.5px;
    color: var(--text-2);
    border-radius: 7px;
    transition: background 120ms, color 120ms;
    font-weight: 450;
}
.nav button:hover, .nav button.active { color: var(--text); background: var(--surface-2); }

.topbar-spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.icon-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: var(--text-2);
    transition: background 120ms, color 120ms;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.xs { width: 24px; height: 24px; }
.icon-btn.xs svg { width: 12px; height: 12px; }

.sync-dot { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; }
.sync-dot.local { color: var(--text-4); }
.sync-dot.syncing { color: var(--warn); animation: pulse 1.2s infinite; }
.sync-dot.synced { color: var(--success); }
.sync-dot.error { color: var(--danger); }
@keyframes pulse { 50% { opacity: 0.4; } }

.main {
    flex: 1;
    padding: 20px 24px calc(28px + var(--bottom-nav-h));
    max-width: 1480px;
    width: 100%;
    margin: 0 auto;
}

/* mobile bottom nav */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav button {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px 8px;
    color: var(--text-3);
    font-size: 10.5px;
    letter-spacing: 0.01em;
}
.bottom-nav button svg { width: 19px; height: 19px; }
.bottom-nav button.active { color: var(--accent); }

@media (max-width: 720px) {
    :root { --bottom-nav-h: 62px; --pad: 14px; --gap: 11px; }
    .bottom-nav { display: flex; }
    .desktop-nav { display: none; }
    .app-topbar { padding: 10px 16px; top: 46px; }
    .main { padding: 14px 14px calc(20px + var(--bottom-nav-h)); }

    /* readability: phones get bigger type across the small data text */
    html, body { font-size: 15.5px; }
    .pill { font-size: 12.5px; }
    .pill.sm { font-size: 11.5px; }
    .dim-sm { font-size: 13px; }
    .card-title { font-size: 12.5px; }
    .card-eyebrow { font-size: 12px; }
    .meta-cell .k { font-size: 11.5px; }
    .meta-cell .v { font-size: 14.5px; }
    .meta-cell .vsub { font-size: 12.5px; }
    .when-sub { font-size: 13.5px; }
    .quick-btn .qsub { font-size: 13px; }
    .chart-sub { font-size: 14px; }
    .stat .stat-label { font-size: 12.5px; }
    .stat-delta { font-size: 13px; }
    .supply-cell .sc-dose { font-size: 12px; }
    .supply-cell .sc-sub { font-size: 11.5px; }
    .pen-foot { font-size: 13px; }
    .pen-foot .k { font-size: 11.5px; }
    .tbl td { font-size: 13.5px; }
    .tbl th { font-size: 11.5px; }
    .mc-facts { font-size: 13.5px; }
    .mc-facts .k { font-size: 11.5px; }
    .mc-generic { font-size: 12.5px; }
    .preset .p-meta { font-size: 12.5px; }
    .cal-day { font-size: 12.5px; }
    .cal-legend { font-size: 12px; }
    .tl-sub { font-size: 12.5px; }
    .field label, .field-label { font-size: 11.5px; }
    .sr-label { font-size: 11.5px; }
    .yaxis-label { font-size: 11px; }
}

/* ================================================
   Cards / pills / buttons
   ================================================ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
    position: relative;
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.card-head.wrap { flex-wrap: wrap; }
.card-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 500; }
.card-eyebrow { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 11.5px;
    background: var(--surface-3);
    color: var(--text-2);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.pill.sm { padding: 2px 8px; font-size: 10.5px; }
.pill.accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(240, 185, 85, 0.3); }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(237, 107, 94, 0.3); }
.pill.success { background: var(--success-soft); color: var(--success); border-color: rgba(111, 207, 151, 0.3); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.pill svg { width: 11px; height: 11px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
    transition: background 120ms, border-color 120ms;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { color: var(--danger); border-color: rgba(237, 107, 94, 0.3); background: transparent; }
.btn.danger:hover { background: var(--danger-soft); }
.btn.danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.small { padding: 5px 9px; font-size: 12px; border-radius: 6px; }
.btn svg { width: 14px; height: 14px; }
.btn.grow { flex: 1; }
.btn-row { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
.btn-row.bordered { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.btn-cluster { display: flex; gap: 6px; }
.push-right { margin-left: auto; }
.danger-text { color: var(--danger); }

button.link {
    font-size: 11px;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
    margin-left: 8px;
}
button.link:hover { color: var(--text); }
button.link.no-ml { margin-left: 0; }

.tabular-mono { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.dim { color: var(--text-3); }
.dim-sm { color: var(--text-3); font-size: 11.5px; font-family: var(--font-mono); }
.txt-accent { color: var(--accent); }
.txt-success { color: var(--success); }
.txt-danger { color: var(--danger); }
.error-text { color: var(--danger); font-size: 12.5px; min-height: 1.2em; margin-top: 4px; }
.confirm-text { color: var(--text-2); font-size: 13.5px; }

/* ================================================
   Med switcher
   ================================================ */
.med-switcher { display: flex; gap: 6px; margin-bottom: var(--gap); flex-wrap: wrap; }
.med-switcher.tabs-row { margin-bottom: 16px; }
.med-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 99px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-2);
    transition: border-color 120ms, background 120ms;
}
.med-pill:hover { border-color: var(--border-strong); color: var(--text); }
.med-pill.active { background: var(--surface-2); border-color: var(--accent-line); color: var(--text); }
.med-pill .pill-swatch { width: 9px; height: 9px; border-radius: 50%; }
.med-pill.add { color: var(--text-3); border-style: dashed; }
.med-pill svg { width: 13px; height: 13px; }

/* ================================================
   Banner
   ================================================ */
.banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--warn-soft);
    border: 1px solid rgba(240, 185, 85, 0.3);
    border-radius: var(--radius);
    margin-bottom: var(--gap);
    font-size: 13.5px;
}
.banner .b-icon { color: var(--warn); display: flex; }
.banner .b-text { flex: 1; min-width: 180px; }
.banner .b-text strong { font-weight: 500; }
.banner .b-text .b-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; font-family: var(--font-mono); }
.banner.danger { background: var(--danger-soft); border-color: rgba(237, 107, 94, 0.3); }
.banner.danger .b-icon { color: var(--danger); }

/* ================================================
   Hero grid / next dose
   ================================================ */
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.hero-grid.no-weight { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
    .hero-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .hero-grid, .hero-grid.no-weight { grid-template-columns: 1fr; } }

.next-dose {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.next-dose .pill-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; flex-wrap: wrap; }
.next-dose .when-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.next-dose .when-day { font-size: 34px; font-weight: 500; letter-spacing: -0.03em; }
.next-dose .when-day.dim { color: var(--text-3); }
.next-dose .when-time { font-family: var(--font-mono); font-size: 14px; color: var(--text-2); }
.next-dose .when-sub { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-bottom: 18px; }
.next-dose .dose-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
@media (max-width: 480px) { .next-dose .dose-meta { grid-template-columns: 1fr 1fr; } }
.meta-cell .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 4px; font-weight: 500; }
.meta-cell .k.k-flex { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.meta-cell .v { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.meta-cell .v.dim { color: var(--text-3); }
.meta-cell .vsub { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* stat values */
.stat-value { font-family: var(--font-mono); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; display: flex; align-items: baseline; gap: 6px; }
.stat-value.lg { font-size: 34px; }
.stat-value .unit { font-size: 13px; color: var(--text-3); font-weight: 400; }
.stat-delta { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.stat-delta.pos { color: var(--success); }
.stat-delta.neg { color: var(--danger); }
.stat-delta.warn { color: var(--warn); }
.stat-delta.neutral { color: var(--text-3); }

/* the "?" beside BMI — BMI is a rough population guide, so the way to read it is never
   more than one tap away from the number itself */
.bmi-info {
    margin-left: 6px; padding: 0 6px; min-width: 18px; line-height: 1.35;
    border: 1px solid var(--border); border-radius: 50%;
    font-size: 11px; color: var(--text-3); background: none; cursor: pointer;
}
.bmi-info:hover { color: var(--text-1); border-color: var(--text-3); }

/* BMI range bar — bands drawn to scale across 15–40 with a marker at the user's value */
.bmi-scale { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 10px 0 4px; }
.bmi-scale span { display: block; }
.bmi-scale .b-under { background: var(--warn); opacity: .55; }
.bmi-scale .b-healthy { background: var(--success); }
.bmi-scale .b-over { background: var(--warn); }
.bmi-scale .b-obese { background: var(--danger); }
.bmi-marker { position: relative; height: 0; }
.bmi-marker i {
    position: absolute; top: -13px; width: 2px; height: 14px;
    background: var(--text-1); transform: translateX(-1px);
}
.bmi-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }
.bmi-band-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.bmi-band-row.is-current { font-weight: 600; color: var(--text-1); }
.stat-delta svg { width: 12px; height: 12px; }

.progress-track { margin-top: 16px; height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width 400ms; }
.progress-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; font-family: var(--font-mono); color: var(--text-3); }

/* ================================================
   Supply card
   ================================================ */
.pen-card { display: flex; flex-direction: column; }
.supply-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.supply-cell {
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    display: flex; flex-direction: column; gap: 3px;
}
.supply-cell .sc-dose { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.supply-cell .sc-num { font-family: var(--font-mono); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.supply-cell .sc-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-4); }
.supply-cell.active { border-color: var(--accent-line); background: var(--accent-soft); }
.supply-cell.active .sc-dose { color: var(--accent); }

.pen-foot { display: flex; justify-content: space-between; font-size: 12px; font-family: var(--font-mono); padding-top: 12px; border-top: 1px solid var(--border); }
.pen-foot .k { color: var(--text-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.pen-foot .v { color: var(--text); }

/* ================================================
   Quick log row
   ================================================ */
.quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.quick-row.single { grid-template-columns: 1fr; }
@media (max-width: 640px) { .quick-row { grid-template-columns: 1fr; } }
.quick-btn {
    display: flex; align-items: center; gap: 14px;
    min-width: 0; /* grid item: let the nowrap subtitle truncate, not overflow */
    padding: 15px 17px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: left;
    transition: background 140ms, border-color 140ms, transform 80ms;
}
.quick-btn:hover { border-color: var(--accent-line); background: var(--surface-2); }
.quick-btn:active { transform: scale(0.995); }
.quick-btn .qicon { width: 38px; height: 38px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.quick-btn .qicon svg { width: 18px; height: 18px; }
.quick-btn .qtext { display: flex; flex-direction: column; min-width: 0; }
.quick-btn .qlabel { font-size: 14.5px; font-weight: 500; }
.quick-btn .qsub { font-size: 11.5px; color: var(--text-3); font-family: var(--font-mono); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-btn .qarrow { margin-left: auto; color: var(--text-4); }

/* ================================================
   Charts & sections
   ================================================ */
.sections { display: flex; flex-direction: column; gap: var(--gap); }
.main-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.chart-card { grid-column: span 8; }
.calendar-card { grid-column: span 4; }
@media (max-width: 1024px) { .chart-card, .calendar-card { grid-column: 1 / -1; } }

.chart-sub { margin-top: 6px; font-size: 13px; color: var(--text-2); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.big-num { color: var(--text); font-size: 22px; letter-spacing: -0.01em; }

.range-tabs {
    display: inline-flex;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px;
    gap: 1px;
    max-width: 100%;
    overflow-x: auto;
}
.range-tabs button { padding: 4px 9px; font-size: 11.5px; border-radius: 6px; color: var(--text-3); font-family: var(--font-mono); }
.range-tabs button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 0 var(--border); }

.chart-wrap { width: 100%; height: 230px; position: relative; touch-action: pan-y; }
.chart-wrap.tall { height: 260px; }
@media (max-width: 640px) { .chart-wrap { height: 200px; } .chart-wrap.tall { height: 220px; } }
.chart-wrap svg { width: 100%; height: 100%; display: block; }

.chart-tooltip {
    position: absolute;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 11.5px;
    font-family: var(--font-mono);
    pointer-events: none;
    transform: translate(-50%, -120%);
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.chart-tooltip .t-label { color: var(--text-3); font-size: 10.5px; margin-bottom: 2px; }
.chart-tooltip .t-val { font-size: 13px; }

/* multi-med chart bits */
.ml-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }
.ml-legend {
    position: absolute; top: 2px; right: 6px;
    display: flex; gap: 12px;
    font-size: 11px; font-family: var(--font-mono); color: var(--text-3);
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    padding: 2px 6px; border-radius: 6px;
    pointer-events: none;
}
.chart-scope { margin: -4px 0 10px; }
.chart-scope-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; flex-wrap: wrap;
    margin: -4px 0 10px;
}
.chart-scope-row .chart-scope { margin: 0; }
.yaxis-groups { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.yaxis-groups .chart-scope { margin: 0; }
.yaxis-ctl { align-items: center; }
.yaxis-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-right: 2px; }
.ystep-input {
    width: 86px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 11.5px;
    font-family: var(--font-mono);
    outline: none;
}
.ystep-input:focus { border-color: var(--accent); }
.ystep-input.active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }

/* overdue / late-dose guidance */
.when-day.overdue { color: var(--danger); }
.late-hint { margin-bottom: 16px; display: block; }
.late-hint .src-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.late-hint .disclaimer { display: block; margin-top: 4px; font-size: 10.5px; color: var(--text-4); }

/* ================================================
   Calendar
   ================================================ */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title { font-size: 13px; font-weight: 500; }
.cal-nav { display: flex; gap: 2px; align-items: center; }
.cal-nav button { min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-3); }
.cal-nav button:hover { background: var(--surface-3); color: var(--text); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: 10px; color: var(--text-4); text-align: center; padding: 4px 0; font-family: var(--font-mono); text-transform: uppercase; }
.cal-day {
    aspect-ratio: 1;
    max-height: 52px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-2);
    position: relative;
    border: 1px solid transparent;
}
.cal-day.out { color: var(--text-4); }
.cal-day[data-action] { cursor: pointer; }
.cal-day:hover { background: var(--surface-3); }
.cal-day.today { border-color: var(--border-strong); color: var(--text); }
.cal-day.dose { background: var(--accent-soft); color: var(--accent); }
.cal-day.predicted { border: 1px dashed var(--accent-line); color: var(--accent); }
.cal-day .dose-mark { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal-legend { display: flex; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-3); font-family: var(--font-mono); flex-wrap: wrap; }
.cal-legend .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: middle; }
.cal-legend .swatch.dose { background: var(--accent-soft); }
.cal-legend .swatch.predicted { background: transparent; border: 1px dashed var(--accent-line); }

.cal-full-btn { width: 100%; margin-top: 10px; justify-content: center; }
.cal-page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); }
@media (max-width: 900px) { .cal-page-grid { grid-template-columns: 1fr; } }

.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.tl-item:last-child { border-bottom: none; }
.tl-date { width: 44px; text-align: center; font-family: var(--font-mono); flex-shrink: 0; }
.tl-mon { font-size: 10px; color: var(--text-3); text-transform: uppercase; }
.tl-day { font-size: 18px; font-weight: 500; }
.tl-day.accent { color: var(--accent); }
.tl-body { flex: 1; min-width: 0; }
.tl-title { font-size: 13px; }
.tl-sub { font-size: 11.5px; color: var(--text-3); font-family: var(--font-mono); margin-top: 2px; }

/* ================================================
   Stats grid
   ================================================ */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: var(--gap); }
@media (max-width: 960px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat .stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 500; margin-bottom: 8px; }
.stat .stat-value { font-size: 24px; }
@media (max-width: 640px) { .stat .stat-value { font-size: 20px; } }

/* ================================================
   Tables (history)
   ================================================ */
.table-card { padding: 0; overflow: hidden; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-note {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12px; color: var(--text-3);
    flex-wrap: wrap;
}
.table-note svg { width: 13px; height: 13px; vertical-align: -2px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.tbl th {
    text-align: left; font-weight: 500;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-3);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--surface-3); }
/* action column stays pinned while the rest of a wide table scrolls past it */
.tbl th:last-child, .tbl td:last-child {
    position: sticky; right: 0;
    background: var(--surface);
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.35);
}
.tbl-actions { display: flex; gap: 4px; justify-content: flex-end; }
.tbl-actions button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-3); }
.tbl-actions button:hover { background: var(--surface-3); color: var(--text); }
.tbl-actions svg { width: 13px; height: 13px; }
.used-cells { display: inline-flex; align-items: center; gap: 8px; }

/* pen cells */
.pr-cells { display: inline-flex; gap: 3px; }
.pr-cell { width: 12px; height: 12px; border-radius: 3px; background: var(--surface-3); border: 1px solid var(--border); display: inline-block; }
.pr-cell.used { background: var(--accent); border-color: var(--accent); }

/* ================================================
   Meds page
   ================================================ */
.meds-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.meds-count { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; margin-top: 4px; }
.meds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--gap); }
@media (max-width: 480px) { .meds-grid { grid-template-columns: 1fr; } }

.med-card { display: flex; flex-direction: column; }

/* Stopped meds (T-14). Receded, not disabled — the card is still fully
   interactive, because its history, chart and supply are exactly what you
   came to look at. Opacity alone would make the text fail contrast, so the
   signal is a muted header and an explicit badge instead. */
.med-card.is-stopped { border-style: dashed; }
.med-card.is-stopped .mc-swatch { filter: saturate(0.35); }
.med-card.is-stopped .mc-name { color: var(--text-2); }
.pill.stopped {
    background: var(--surface-3);
    color: var(--text-3);
    border-color: var(--border);
    font-style: italic;
}
/* …and in the switcher, where space is tight enough to need a shorter tell. */
.med-pill.is-stopped { border-style: dashed; color: var(--text-3); }
.med-pill.is-stopped .pill-swatch { filter: saturate(0.35); }
.med-pill .pill-tag {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    font-family: var(--font-mono);
}
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 8px; }
.mc-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mc-swatch { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mc-swatch.sm { width: 22px; height: 22px; }
.mc-name { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-generic { font-size: 11.5px; color: var(--text-3); font-family: var(--font-mono); margin-top: 2px; }
.mc-facts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding-top: 12px; border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 12px;
}
.mc-facts .k { color: var(--text-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
/* T-19 — what a product actually delivers. The ONLY place base mass is shown, and
   it is always shown beside the label amount, because "5 mg" and "3.67 mg of base"
   are different numbers and both are true. */
/* T-23 — the corrected-preset prompt, and the side-by-side behind it. Both sides
   are buttons of equal weight on purpose: neither answer is the recommended one,
   and styling one as primary would be the app taking a position on a value
   somebody typed about their own medication. */
.recon-prompt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    margin-top: 12px; padding: 9px 12px; text-align: left;
    background: var(--warn-soft); border: 1px solid rgba(240, 185, 85, 0.3);
    border-radius: 9px; color: var(--text-1); font-size: 12.5px; cursor: pointer;
}
.recon-prompt:hover { border-color: var(--warn); }
.recon-prompt > span:nth-child(2) { flex: 1; }
.rp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }

.recon-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.recon-row:last-child { border-bottom: 0; }
.recon-row.is-done { opacity: 0.55; }
.recon-label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-3); margin-bottom: 7px; font-family: var(--font-mono);
}
.recon-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.recon-side {
    display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; text-align: left;
    background: var(--surface-3); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-1); cursor: pointer;
}
.recon-side:hover:not(:disabled) { border-color: var(--accent-line); }
.recon-side:disabled { cursor: default; }
.recon-side.chosen { border-color: var(--accent); background: var(--accent-soft); }
.recon-side .k {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3);
}
.recon-side .v { font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 480px) { .recon-sides { grid-template-columns: 1fr; } }

/* T-25 — the 24-hour ingredient warning, in the log-dose modal body.
   Deliberately NOT a confirmation dialog: it warns, it never blocks (D-28), and it
   sits where the dose is still being chosen. */
.ceil-panel {
    margin: 14px 0; padding: 12px 14px; border-radius: 10px;
    background: var(--warn-soft); border: 1px solid rgba(240, 185, 85, 0.35);
    font-size: 12.5px; line-height: 1.5;
}
.ceil-panel.is-over { background: var(--danger-soft); border-color: rgba(237, 107, 94, 0.45); }
.ceil-row + .ceil-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ceil-row.over > div:first-child { color: var(--danger); }
.ceil-when { margin-top: 6px; }
.ceil-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }

/* T-26 — "remind me when I can have another". The one reminder a PRN med can
   honestly send: not "take this", which it cannot know. */
.prn-remind {
    display: block; width: 100%; margin-top: 10px; padding: 8px 12px;
    background: var(--surface-3); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-2); font-size: 12px; font-family: var(--font-mono); cursor: pointer;
}
.prn-remind:hover { border-color: var(--accent-line); color: var(--text-1); }
.prn-remind.is-set { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.prn-remind svg { width: 12px; height: 12px; vertical-align: -2px; }
.txt-warn { color: var(--warn); }

/* T-64/T-66 — a limit, with who says so and what goes wrong past it. */
.limit-box {
    margin-top: 16px; padding: 12px 14px; border-radius: 10px;
    background: var(--surface-3); border: 1px solid var(--border);
}
.limit-box .k {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-3); font-family: var(--font-mono); margin-bottom: 8px;
}
.limit-figs { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 6px; }
.limit-harm, .ceil-harm {
    margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--warn);
    color: var(--text-2); font-size: 12px; line-height: 1.55;
}
.ceil-acts {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-top: 10px;
}

/* T-22 — brand names, behind a disclosure rather than strung beside the drug. */
.aka-disclosure { margin-top: 4px; font-size: 12px; }
.aka-disclosure summary { color: var(--text-3); cursor: pointer; }
.aka-disclosure summary:hover { color: var(--text-2); }
.aka-disclosure > div { padding: 6px 0 0 14px; }
.preset .p-aka { margin-top: 3px; font-size: 10.5px; }

/* T-63 — a substance that is deliberately NOT drawn by default. Visibly different
   from an ordinary toggle, because turning it on is a choice about a number the app
   does not stand behind (codeine -> morphine, D-30). */
.chip.sub-scope.opt-in { border-style: dotted; color: var(--text-3); }
.chip.sub-scope.opt-in.active { border-style: solid; border-color: var(--warn); color: var(--warn); }

/* T-21 — the two fills the med-level chart uses when a therapeutic threshold is
   known, and the legend that says which is which IN WORDS. Never hue alone. */
.ml-legend-band { flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.ml-swatch {
    display: inline-block; width: 16px; height: 10px; border-radius: 2px;
    margin-right: 6px; vertical-align: -1px; border: 1px solid var(--border);
}
.ml-swatch.solid { background: var(--accent); opacity: 0.55; }
.ml-swatch.hatch {
    background-image: repeating-linear-gradient(45deg,
        var(--accent) 0 1.4px, transparent 1.4px 5px);
    opacity: 0.7;
}

/* T-20 — a substance scope on the level chart, and the per-product breakdown
   inside its tooltip. */
.chip.sub-scope { border-style: dashed; }
.chip.sub-scope.active { border-style: solid; }
.t-sub {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 10.5px; color: var(--text-3); padding-left: 2px;
}

.mc-substances { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.mc-substances .k {
    color: var(--text-3); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: 7px; font-family: var(--font-mono);
}
.sub-chip {
    display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 0 6px 6px 0; padding: 6px 11px;
    background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px;
    color: var(--text-2); font-family: var(--font-mono); font-size: 11.5px;
    cursor: pointer; text-align: left;
}
.sub-chip:hover { border-color: var(--accent-line); color: var(--text-1); }
.sub-chip .sub-name { color: var(--text-1); font-weight: 500; }

.mc-pens { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.mc-pens-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mc-pens-head .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.pen-list {
    background: var(--surface-3); border-radius: 8px; border: 1px solid var(--border);
    max-height: 264px; overflow-y: auto;   /* long supply scrolls inside the card */
    scrollbar-gutter: stable;              /* scrollbar sits beside the buttons, not on them */
}
.pen-row > span:nth-child(2) { min-width: 0; overflow: hidden; }
.pr-actions { display: inline-flex; gap: 2px; }
.pr-used-txt { display: none; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
@media (max-width: 720px) {
    /* narrow screens: swap the decorative usage cells for a compact count,
       keep edit/delete always in reach */
    .pen-row { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 6px; }
    .pen-row .pr-cells { display: none; }
    .pen-row .pr-date { display: none; }
    .pr-used-txt { display: inline; }
    .pr-actions button { width: 30px; height: 30px; }
}
.pen-group + .pen-group { border-top: 1px solid var(--border); }

/* history pagination */
.pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 14px;
    border-top: 1px solid var(--border);
}
.pager-info { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }

/* settings drawer footer */
.drawer-foot {
    margin-top: 22px; padding: 14px 0 4px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.drawer-foot a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-3); text-decoration: none;
}
.drawer-foot a:hover { color: var(--text); }
.tbl .med-cell { white-space: nowrap; }
.tbl .med-cell .ml-dot { margin-right: 6px; }
.pen-group-head {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 9px 10px;
    color: var(--text-2); font-size: 12px; text-align: left;
    position: sticky; top: 0; background: var(--surface-3); z-index: 1;
}
.pen-group-head:hover { background: var(--surface-2); }
.pg-chev { display: inline-flex; color: var(--text-3); transition: transform 140ms; }
.pg-chev.open { transform: rotate(90deg); }
.pg-chev svg { width: 13px; height: 13px; }
.pg-label { font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: var(--text); }
.pg-sub { color: var(--text-3); font-size: 11.5px; }
.pen-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-family: var(--font-mono);
}
.pen-row:last-child { border-bottom: none; }
.pr-dose { display: inline-flex; padding: 3px 8px; border-radius: 99px; background: var(--surface); font-size: 11px; width: fit-content; }
.pr-status { font-size: 11px; color: var(--text-3); }
.pr-status.open { color: var(--accent); }
.pr-status.exhausted { color: var(--text-4); }
.pr-date { font-size: 10.5px; color: var(--text-4); }
.pr-note { display: block; font-size: 10.5px; color: var(--text-4); margin-top: 3px; }
.p-type {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-3); font-family: var(--font-mono);
    background: var(--surface); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border);
}
.add-med-card {
    border: 1px dashed var(--border-strong) !important;
    background: transparent !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 200px;
    color: var(--text-3);
    font-size: 13px;
}
.add-med-card:hover { border-color: var(--accent-line) !important; color: var(--text-2); }

.trash-list { display: flex; flex-direction: column; gap: 8px; }
.trash-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px 14px;
    flex-wrap: wrap;
}
.trash-name { font-weight: 500; }
.trash-row .btn { margin-left: auto; }
.trash-row .btn + .btn { margin-left: 0; }

/* ================================================
   Modals
   ================================================ */
.modal-back {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1400; /* above onboarding (1300): the sync-conflict modal must never hide behind the wizard */
    padding: 18px;
    animation: fadeIn 140ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    width: 100%;
    max-width: 480px;
    max-height: 90svh;
    overflow-y: auto;
    animation: slideUp 200ms cubic-bezier(.2, .7, .2, 1);
}
.modal.wide { max-width: 620px; }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 640px) {
    /* CENTERED on phones — bottom-sheet style fought the browser's own
       bottom URL bar (Firefox/Chrome mobile) and sat too low */
    .modal-back { padding: 14px; align-items: center; }
    .modal { max-width: 100%; border-radius: var(--radius-lg); max-height: 86svh; padding: 18px 16px; }
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 8px; }
.modal h2 { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.modal-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field.nomb { margin-bottom: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.field-row.nomb { margin-bottom: 0; }
.field label, .field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 500; }

/* A checkbox whose label is a sentence, not a field name (T-15's PRN toggle).
   `.field label` above uppercases and shrinks every label, which is right for
   "UNIT" and wrong for "Take only when needed" — so this opts back out. */
.field .check-line {
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px; text-transform: none; letter-spacing: 0;
    color: var(--text); font-weight: 400; cursor: pointer;
}
.field .check-line input[type="checkbox"] {
    width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer;
    flex: none;
}
/* The note sits under its own checkbox, aligned to the label text. It needs real
   flow height: the first version used `.field.nomb`, whose zero bottom margin let
   this text overlap the label of the field below it. */
.prn-note { margin-top: 5px; padding-left: 25px; line-height: 1.45; text-align: left; }
.prn-field { margin-bottom: 14px; }

/* A field switched off because another control contradicts it (PRN vs "how often").
   Greyed and inert, but still readable — hiding it entirely would make the interval
   look lost rather than inapplicable. */
.field.is-disabled label, .field.is-disabled .field-label { opacity: 0.45; }
.field.is-disabled input:disabled,
.field.is-disabled select:disabled {
    opacity: 0.45; cursor: not-allowed; background: var(--surface-2);
}
.field input, .field select, .field textarea, .freq-row input, .freq-row select, .bf-step input, .loc-add input {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    outline: none;
    transition: border-color 120ms;
    font-family: var(--font-mono);
    width: 100%;
    min-height: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field input[type="color"] { padding: 4px; height: 38px; }
.field input.file-input { padding: 7px; font-size: 12px; font-family: var(--font-sans); }
input[type="date"], input[type="time"] { color-scheme: dark; }
[data-theme="light"] input[type="date"], [data-theme="light"] input[type="time"] { color-scheme: light; }

.chip-grp { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 12.5px;
    font-family: var(--font-mono);
    transition: background 120ms, border-color 120ms, color 120ms;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.sm { padding: 4px 8px; font-size: 11.5px; }

.bodydiag { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 480px) { .bodydiag { grid-template-columns: repeat(3, 1fr); } }
.bd-loc {
    padding: 12px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    font-size: 11.5px;
    text-align: center;
    font-family: var(--font-mono);
    color: var(--text-2);
}
.bd-loc.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.bd-loc.next { border-style: dashed; border-color: var(--accent-line); }

.pen-hint {
    font-size: 12px;
    color: var(--text-3);
    font-family: var(--font-mono);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    line-height: 1.5;
}
.pen-hint.col { flex-direction: column; align-items: flex-start; gap: 4px; }
.pen-hint strong { color: var(--text); font-weight: 500; }
.pen-hint.warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(240, 185, 85, 0.3); }
.pen-hint.warn strong { color: var(--warn); }
.pen-hint svg { width: 13px; height: 13px; flex: none; }

.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.preset-grid.one-col { grid-template-columns: 1fr; }
@media (max-width: 420px) { .preset-grid { grid-template-columns: 1fr; } }
.preset {
    text-align: left;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    transition: border-color 120ms;
}
.preset:hover { border-color: var(--border-strong); }
.preset.active { border-color: var(--accent); background: var(--accent-soft); }
.preset.dim { opacity: 0.55; }
.preset .p-name { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.preset .p-meta { font-size: 11.5px; color: var(--text-3); font-family: var(--font-mono); margin-top: 3px; }
.preset-cat {
    grid-column: 1 / -1;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin: 8px 0 -2px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border);
}
.preset-cat:first-child { margin-top: 0; }

.dose-hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.dose-hl-cell {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface-3); border-radius: 6px; padding: 4px 8px;
    border: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
}
.dose-hl-cell input { padding: 4px 6px !important; min-height: 28px !important; font-size: 12px !important; }

.freq-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6px; }

.bf-step { display: grid; grid-template-columns: 70px 1fr 50px; gap: 8px; align-items: center; margin-bottom: 6px; }
.bf-dose { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }

.color-input { width: 70px !important; }

.conflict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .conflict-grid { grid-template-columns: 1fr; } }
.data-column { background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: 12px; }
.data-column h3 { font-size: 12px; margin-bottom: 8px; color: var(--accent); }
.data-column p { margin: 4px 0; color: var(--text-2); font-family: var(--font-mono); font-size: 11.5px; }
.data-column strong { color: var(--text-3); font-weight: 500; }

/* ================================================
   Settings drawer
   ================================================ */
.drawer-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); z-index: 1100; animation: fadeIn 140ms ease; }
.drawer {
    position: fixed;
    top: 0; right: 0;
    width: 380px;
    max-width: 94vw;
    height: 100dvh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 1110;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    overflow-y: auto;
    animation: slideIn 200ms cubic-bezier(.2, .7, .2, 1);
}
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.drawer h2 { font-size: 16px; font-weight: 500; }

.setting-block { padding: 14px 0; border-bottom: 1px solid var(--border); }
.setting-block:last-child { border-bottom: none; }
.sr-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 500; margin-bottom: 10px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; flex-wrap: wrap; }
.setting-row .sr-sub { font-size: 13px; color: var(--text-2); }
.setting-row .chip { padding: 5px 10px; font-size: 11.5px; }
.setting-input {
    background: var(--surface-3); border: 1px solid var(--border); color: var(--text);
    padding: 7px 10px; border-radius: 8px; font-family: var(--font-mono);
    width: 110px; font-size: 13px; outline: none;
}
.setting-input:focus { border-color: var(--accent); }
.slider-wrap { display: inline-flex; align-items: center; gap: 8px; }
.slider-wrap input[type="range"] { width: 130px; accent-color: var(--accent); }
.drawer-btn-col { display: flex; flex-direction: column; gap: 8px; }
.drawer-btn-col .btn { width: 100%; justify-content: flex-start; }

.toggle {
    width: 36px; height: 20px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 99px;
    position: relative;
    cursor: pointer;
    transition: background 140ms;
    flex: none;
}
.toggle::after {
    content: '';
    position: absolute;
    top: 1px; left: 1px;
    width: 16px; height: 16px;
    background: var(--text-2);
    border-radius: 50%;
    transition: transform 140ms, background 140ms;
}
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle.on::after { transform: translateX(16px); background: white; }

.swatch-row { display: flex; gap: 6px; }
.swatch-btn { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; transition: border-color 120ms; }
.swatch-btn.active { border-color: var(--text); }

.loc-list { margin-top: 6px; }
.loc-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 10px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-family: var(--font-mono);
}
.loc-btns { display: flex; gap: 2px; }
.loc-add { display: flex; gap: 6px; margin-top: 8px; }
.loc-add input { flex: 1; min-height: 32px; padding: 6px 10px; font-size: 12.5px; }

/* Recent sync actions — what sync did without being asked, and the way back */
.sync-action-list { display: flex; flex-direction: column; gap: 6px; }
.sync-action {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.sync-action .sa-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sync-action .sa-msg { font-size: 12.5px; color: var(--text); }
.sync-action .sa-when { font-size: 11.5px; color: var(--text-3); }

/* ================================================
   Onboarding
   ================================================ */
.onb-back {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1300;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    overflow-y: auto;
}
.onb {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 480px;
    width: 100%;
    padding: 28px;
    margin: auto;
    max-height: 90svh;
    overflow-y: auto;
}
@media (max-width: 640px) { .onb { padding: 22px 18px; } }
.onb-step { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.onb h1 { font-size: 23px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; }
.onb p { color: var(--text-2); margin-bottom: 20px; font-size: 13.5px; }
.onb-prog { display: flex; gap: 4px; margin-bottom: 20px; }
.onb-prog div { flex: 1; height: 3px; border-radius: 2px; background: var(--border); }
.onb-prog div.done { background: var(--accent); }
.onb-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}

/* ================================================
   Empty states & toasts
   ================================================ */
.empty { text-align: center; padding: 36px 20px; color: var(--text-3); }
.empty.pad-sm { padding: 16px 10px; }
.empty .em-title { color: var(--text-2); font-size: 14px; margin-bottom: 4px; }
.empty .em-sub { font-size: 12.5px; }

.toast-wrap {
    position: fixed;
    bottom: calc(18px + var(--bottom-nav-h));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1400;
    display: flex; flex-direction: column; gap: 8px;
    align-items: center;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms, transform 200ms;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast svg { width: 14px; height: 14px; color: var(--success); }
.toast.error svg { color: var(--danger); }

/* A toast that carries actions (Confirm / Revert). Ignoring it is always the
   harmless answer, so these are offers, not a decision the page waits on. */
.toast.has-actions { flex-wrap: wrap; max-width: min(92vw, 460px); cursor: pointer; }
.toast-acts { display: inline-flex; gap: 6px; margin-left: auto; }
.toast-act {
    font: inherit;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}
.toast-act:hover { color: var(--text); border-color: var(--accent); }
.toast-act.primary { color: var(--text); border-color: var(--accent); }

/* ================================================
   Mobile numbers — the big data values get big type
   (kept at end so it wins over earlier rules)
   ================================================ */
@media (max-width: 720px) {
    .stat .stat-value { font-size: 25px; }
    .stat-value { font-size: 28px; }
    .stat-value.lg { font-size: 38px; }
    .big-num { font-size: 26px; }
    .supply-cell .sc-num { font-size: 26px; }
    .meta-cell .v { font-size: 15px; }
    .meta-cell .vsub { font-size: 13px; }
    .pen-foot .v { font-size: 14px; }
    .next-dose .when-time { font-size: 15px; }
    .tl-title { font-size: 14.5px; }
    .chart-tooltip { font-size: 13px; }
    .chart-tooltip .t-val { font-size: 14.5px; }
    .chart-tooltip .t-label { font-size: 11.5px; }
}

/* ================================================
   Mobile: everything-else text scale-up — buttons,
   chips, inputs, modals, drawer, onboarding, nav
   ================================================ */
@media (max-width: 720px) {
    .btn { font-size: 14.5px; }
    .btn.small { font-size: 13px; }
    .chip { font-size: 13.5px; padding: 8px 13px; }
    .chip.sm { font-size: 12.5px; }
    .med-pill { font-size: 14.5px; padding: 9px 15px; }
    .banner { font-size: 14.5px; }
    .banner .b-text .b-sub { font-size: 13px; }
    .quick-btn .qlabel { font-size: 15.5px; }
    .next-dose .when-day { font-size: 32px; }
    button.link { font-size: 12.5px; }
    .table-note { font-size: 13px; }
    .cal-dow { font-size: 11px; }
    .cal-title { font-size: 14.5px; }
    .tl-mon { font-size: 11px; }
    .tl-day { font-size: 19px; }
    .mc-name { font-size: 16px; }
    .meds-count { font-size: 21px; }
    .trash-name { font-size: 15px; }
    .pen-row { font-size: 13px; }
    .pr-status, .pr-dose { font-size: 12.5px; }
    .empty .em-title { font-size: 15.5px; }
    .empty .em-sub { font-size: 13.5px; }
    .error-text { font-size: 13.5px; }
    .confirm-text { font-size: 14.5px; }
    .pen-hint { font-size: 13px; }
    .bd-loc { font-size: 13px; padding: 13px 8px; }
    .preset .p-name { font-size: 15px; }
    .preset .p-meta { font-size: 12.5px; }
    .preset-cat { font-size: 11.5px; }
    .modal h2 { font-size: 19.5px; }
    .modal-sub { font-size: 13.5px; }
    .drawer h2 { font-size: 17.5px; }
    .setting-row .sr-sub { font-size: 14.5px; }
    .sr-label { font-size: 12px; }
    .loc-row { font-size: 13.5px; }
    .onb h1 { font-size: 25px; }
    .onb p { font-size: 14.5px; }
    .onb-step { font-size: 12px; }
    .toast { font-size: 14.5px; }
    .bottom-nav button { font-size: 11.5px; }
    .dose-hl-cell { font-size: 13px; }
    .bf-dose { font-size: 13px; }

    /* 16px inputs also stop phones auto-zooming on focus */
    .field input, .field select, .field textarea,
    .freq-row input, .freq-row select,
    .bf-step input, .loc-add input,
    .setting-input, .ystep-input { font-size: 16px; }
}

/* multi-time schedule editor */
.time-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.time-item {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: 8px; padding: 3px 4px 3px 8px;
}
.time-item input { border: none !important; background: transparent !important; padding: 4px 2px !important; min-height: 28px !important; width: auto !important; }

/* backfill daily-plan rows */
.bf-plan-row {
    display: grid;
    grid-template-columns: auto 64px 14px 90px auto 26px;
    gap: 6px; align-items: center; margin-bottom: 6px;
}
.bf-plan-row input {
    min-height: 36px;
    background: var(--surface-3); border: 1px solid var(--border);
    color: var(--text); border-radius: 8px; padding: 6px 8px;
    font-size: 13.5px; font-family: var(--font-mono); outline: none; width: 100%;
}
.bf-plan-row input:focus { border-color: var(--accent); }
.time-item input[data-scheddose] { width: 70px !important; }
.time-item input[data-schedcount] { width: 50px !important; }
/* The anchor picker (T-16) sits inline with the time, and must stay visibly
   secondary to it — the time is the thing that fires, the name is the label. */
.time-item select[data-schedanchor] {
    border: none !important; background: transparent !important;
    padding: 4px 2px !important; min-height: 28px !important;
    max-width: 118px; font-size: 12.5px; color: var(--text-2);
}
.time-item select[data-schedanchor]:hover { color: var(--text); }

/* ================================================
   All-meds overview card
   ================================================ */
.overview-card { grid-column: 1 / -1; }
.hero-grid.ov-grid { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) { .hero-grid.ov-grid { grid-template-columns: 1fr; } }
.ov-rows { display: flex; flex-direction: column; }
.ov-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.1fr) 1fr 1.4fr 1.8fr 0.8fr auto;
    gap: 10px; align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.ov-row:last-child { border-bottom: none; }
.ov-med { font-weight: 500; font-size: 14px; display: flex; align-items: center; }
.ov-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-cell .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
.ov-cell .v { font-size: 12.5px; font-family: var(--font-mono); color: var(--text); }
@media (max-width: 720px) {
    .ov-row { grid-template-columns: 1fr 1fr; }
    .ov-med { grid-column: 1 / -1; }
    .ov-row .btn { grid-column: 1 / -1; }
    .ov-cell .v { font-size: 13.5px; }
    .ov-cell .k { font-size: 11px; }
}

/* ================================================
   Mobile text zoom (Settings → Mobile text size)
   Large is the default; XL for max readability.
   Everything the app renders scales together.
   ================================================ */
@media (max-width: 720px) {
    /* zoomed static containers get compensated widths so the scaled result
       still fits the real viewport; full-screen overlays (inset-pinned)
       self-solve, so we zoom the BACKDROPS rather than the dialogs */
    html[data-ts="lg"] .main, html[data-ts="lg"] .app-topbar { zoom: 1.18; width: calc(100vw / 1.18); }
    html[data-ts="xl"] .main, html[data-ts="xl"] .app-topbar { zoom: 1.38; width: calc(100vw / 1.38); }
    html[data-ts="lg"] .main, html[data-ts="xl"] .main { max-width: none; }

    html[data-ts="lg"] .modal-back, html[data-ts="lg"] .onb-back { zoom: 1.18; }
    html[data-ts="xl"] .modal-back, html[data-ts="xl"] .onb-back { zoom: 1.38; }
    html[data-ts="lg"] .bottom-nav { zoom: 1.18; left: 0; right: auto; width: calc(100vw / 1.18); }
    html[data-ts="xl"] .bottom-nav { zoom: 1.38; left: 0; right: auto; width: calc(100vw / 1.38); }

    /* dvh units ignore zoom, so cap dialog heights in real-viewport terms */
    html[data-ts="lg"] .modal { max-height: calc(86svh / 1.18); }
    html[data-ts="xl"] .modal { max-height: calc(86svh / 1.38); }
    html[data-ts="lg"] .onb { max-height: calc(90svh / 1.18); }
    html[data-ts="xl"] .onb { max-height: calc(90svh / 1.38); }

    html[data-ts="lg"] .drawer { zoom: 1.18; width: calc(100vw / 1.18); max-width: none; height: calc(100dvh / 1.18); }
    html[data-ts="xl"] .drawer { zoom: 1.38; width: calc(100vw / 1.38); max-width: none; height: calc(100dvh / 1.38); }

    html[data-ts="lg"] .toast-wrap, html[data-ts="xl"] .toast-wrap {
        left: 0; right: auto; transform: none;
    }
    html[data-ts="lg"] .toast-wrap { zoom: 1.18; width: calc(100vw / 1.18); bottom: calc((18px + var(--bottom-nav-h)) / 1.18); }
    html[data-ts="xl"] .toast-wrap { zoom: 1.38; width: calc(100vw / 1.38); bottom: calc((18px + var(--bottom-nav-h)) / 1.38); }
}

/* ================================================
   Clean mobile: no site top bar, centre Log button
   ================================================ */
@media (max-width: 720px) {
    .top-bar { display: none; }           /* login etc. live in Settings */
    .app-topbar { display: none; }        /* theme/sync/settings live in Settings via bottom bar */
    .quick-row { display: none; }         /* replaced by the centre Log button */

    .nav-log { position: relative; overflow: visible; color: var(--text-3); }
    .nav-log-circle {
        width: 46px; height: 46px;
        margin-top: -22px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--accent-ink);
        display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 5px var(--bg);
    }
    .nav-log-circle svg { width: 22px; height: 22px; }
}
@media (min-width: 721px) {
    .nav-log { display: none; }           /* desktop keeps the quick-log row */
}

/* log mini-menu rows */
.sheet-rows { display: flex; flex-direction: column; gap: 8px; }
.sheet-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: left;
    font-size: 14.5px;
}
.sheet-row:active { background: var(--surface-2); }
.sheet-row .sheet-main { font-weight: 500; }
.sheet-row .sheet-sub { margin-left: auto; font-size: 11.5px; color: var(--text-3); font-family: var(--font-mono); }
.sheet-row .qicon.sm { width: 28px; height: 28px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }

/* live stats strip on med cards */
.mc-live { margin-bottom: 10px; }
.mc-live > div > div:last-child { font-size: 12px; }

/* ------------------------------------------------
   Missed-slot catch-up (T-13)
   ------------------------------------------------ */
.cu-list { margin-top: 12px; max-height: 46vh; overflow-y: auto; }
.cu-day { margin-bottom: 14px; }
.cu-day-head {
    display: flex; align-items: baseline; gap: 8px;
    padding: 0 0 6px; border-bottom: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-2);
}
.cu-day-head .link { margin-left: auto; font-size: 11.5px; }
.cu-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 2px; border-bottom: 1px solid var(--border);
    cursor: pointer; font-size: 13.5px;
}
.cu-row:last-child { border-bottom: none; }
.cu-row:hover { background: var(--surface-2); }
.cu-row input[type="checkbox"] {
    width: 16px; height: 16px; margin: 0; accent-color: var(--accent);
    cursor: pointer; flex: none;
}
.cu-time { color: var(--text); }
/* the dose sits right, so a column of them is scannable */
.cu-dose { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); }