/*
 * PepVault web app, styled after the phone app (Flutter, lib/theme.dart and
 * lib/widgets/*). Self-contained: the sign-in pages, the web app and the admin
 * panel load only this file. Light and dark follow the system, as the app does.
 */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url("/fonts/poppins-800.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 900; font-display: swap; src: url("/fonts/poppins-900.woff2") format("woff2"); }
/* The app draws a few things (segmented buttons, vial labels, chart axes) in the platform font, Roboto. */
@font-face { font-family: "PV Roboto"; font-weight: 500; font-display: swap; src: local("Roboto Medium"), local("Roboto-Medium"), url("/fonts/roboto-500.woff2") format("woff2"); }
@font-face { font-family: "PV Roboto"; font-weight: 700; font-display: swap; src: local("Roboto Bold"), local("Roboto-Bold"), url("/fonts/roboto-700.woff2") format("woff2"); }

:root {
    color-scheme: light dark;
    /* Brand (theme.dart) */
    --teal: #2dd4bf; --blue: #38bdf8; --violet: #8b5cf6; --pink: #f472b6;
    --amber: #fbbf24; --green: #4ade80; --orange: #fb923c; --red: #f87171;
    --brand: #14b8a6;
    /* Light surfaces (Ctx extension) */
    --bg: #f2f5fa; --card: #ffffff; --card2: #ebeff7;
    --line: rgba(0, 0, 0, .07); --muted: #64748b; --ink: #0f172a;
    --primary: #0d9488; --tonal: #cde8e2; --on-tonal: #1c2b29; --icon: #3f4947;
    --seg-line: rgba(0, 0, 0, .1); --outline: #79747e;
    --error: #ba1a1a; --ring-card: #d9f7f2; --snack: #1e293b;
    --shadow: 0 6px 18px rgba(0, 0, 0, .05);
    --nav-bg: rgba(255, 255, 255, .9);
    --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    --roboto: "PV Roboto", Roboto, "Segoe UI", system-ui, sans-serif;
    --r-card: 22px;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #070b14; --card: #111827; --card2: #1a2236;
        --line: rgba(255, 255, 255, .08); --muted: #94a3b8; --ink: #f1f5f9;
        --primary: #2dd4bf; --tonal: #2c4a46; --on-tonal: #cde8e2; --icon: #bec9c6;
        --seg-line: rgba(255, 255, 255, .1); --outline: #938f99;
        --error: #ffb4ab; --ring-card: #123b3a; --snack: #243049;
        --shadow: none; --nav-bg: rgba(17, 24, 39, .78);
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 14px/1.43 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p { margin: 0; }
a { color: var(--primary); }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; }
[hidden] { display: none !important; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.prewrap { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }
.i { flex: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.skip:focus { left: 8px; }

/* Screen ------------------------------------------------------------------ */

.screen { width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 18px 40px; }
.webapp--tabs .screen { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
.screen > * + * { margin-top: 14px; }
.screen > .section-title { margin-top: 0; }
.screen > .section-title + * { margin-top: 0; }

/* Header row on a tab page: big 900 title and round buttons. */
.top { display: flex; align-items: center; gap: 8px; min-height: 56px; }
.top h1, .h1 { flex: 1; min-width: 0; font-size: 22px; line-height: 28px; font-weight: 900; letter-spacing: -.5px; }
.top__date { color: var(--muted); font-weight: 700; }
.top__sub { color: var(--muted); font-weight: 600; margin-top: 0 !important; }
.top + .top__sub { margin-top: -6px !important; }
.greet { flex: 1; min-width: 0; }
.greet h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

/* App bar on pushed pages (vial, settings): back arrow and a 22/700 title. */
.appbar { display: flex; align-items: center; gap: 4px; min-height: 56px; margin: 0 -10px; }
.appbar h1 { flex: 1; min-width: 0; font: 700 22px/28px var(--roboto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px; }

.icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent; color: var(--icon); text-decoration: none; flex: none; }
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.icon-btn--tonal { width: 40px; height: 40px; margin: 4px; background: var(--tonal); color: var(--on-tonal); }
.icon-btn--tonal:hover { background: color-mix(in srgb, var(--tonal) 88%, var(--ink)); }
.icon-btn--muted { color: var(--muted); }

/* Section titles (SectionTitle) */
.section-title { display: flex; align-items: center; gap: 12px; padding: 22px 4px 10px; }
.section-title h2 { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 800; letter-spacing: -.2px; }
.section-title a, .section-title .link { color: var(--primary); font-weight: 700; text-decoration: none; }
.section-title a:hover { text-decoration: underline; }

/* Cards (AppCard) --------------------------------------------------------- */

.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px; color: inherit; text-decoration: none; position: relative; }
a.card, .card--tap { transition: background-color .15s; }
a.card:hover, .card--tap:hover { background: color-mix(in srgb, var(--card) 96%, var(--ink)); }
.card + .card { margin-top: 10px; }
.card--flush { padding: 6px; }
.card > :last-child { margin-bottom: 0; }
.stack > * + * { margin-top: 10px; }
.empty-card { color: var(--muted); line-height: 1.35; }
.card-row { display: flex; align-items: center; gap: 12px; }
.card-row > .grow { flex: 1; min-width: 0; }
.strong { font-weight: 800; }

/* Tinted round/square icon holders */
.ico { display: inline-grid; place-items: center; flex: none; color: var(--c, var(--primary)); background: color-mix(in srgb, var(--c, var(--primary)) 16%, transparent); }
.ico--circle { border-radius: 50%; }
.ico--40 { width: 40px; height: 40px; }
.ico--44 { width: 44px; height: 44px; }
.ico--36 { width: 36px; height: 36px; }
.ico--box { border-radius: 12px; padding: 9px; }
.ico--box14 { border-radius: 14px; padding: 10px; }
.ico--box10 { border-radius: 10px; padding: 7px; }
.ico--box8 { border-radius: 12px; padding: 8px; }
.ico--solid { background: var(--c, var(--primary)); color: #fff; }
.ico--card2 { background: var(--card2); }

/* Chips and pills --------------------------------------------------------- */

.chip { --c: var(--primary); display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 6px 10px; border-radius: 20px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 12px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.chip span { overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.badge { --c: var(--muted); display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 20px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font-size: 11.5px; font-weight: 800; line-height: 1.4; max-width: 100%; white-space: nowrap; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* Pills: selectable rounded options (radios, checkboxes or links). */
.pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pills--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding: 0 18px 2px; }
.pills--scroll::-webkit-scrollbar { display: none; }
.pill { --c: var(--primary); position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 7px 12px; border-radius: 30px; background: var(--card2); border: 1.4px solid transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1.43; text-decoration: none; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pill:hover { color: var(--ink); }
.pill.is-on, .pill:has(input:checked), .pill[aria-current="page"], .pill[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); color: var(--c); }
.pill:has(input:focus-visible) { outline: 2.5px solid var(--primary); outline-offset: 2px; }
.pill--chip { padding: 8px 14px; font-size: 14px; font-weight: 800; line-height: 20px; }
.pill--chip.is-on, .pill--chip[aria-current="page"] { background: color-mix(in srgb, var(--c) 20%, transparent); }
.pill--fx { --c: var(--red); padding: 6px 12px; font-size: 12px; }
.pill--plain { color: var(--c); }

/* Segmented buttons (SegmentedButton, Material 3) */
.seg { display: flex; border: 1px solid var(--seg-line); border-radius: 999px; overflow: hidden; min-height: 32px; }
.seg > * { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 4px 10px; border: 0; background: transparent; color: var(--ink); font: 500 13px/1.2 var(--roboto); text-decoration: none; text-align: center; cursor: pointer; }
.seg > * + * { border-left: 1px solid var(--seg-line); }
.seg > [aria-current="page"], .seg > .is-on, .seg > :has(input:checked), .seg > [aria-pressed="true"] { background: var(--tonal); color: var(--on-tonal); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg > :has(input:focus-visible) { outline: 2.5px solid var(--primary); outline-offset: -3px; }
.seg--tall { min-height: 40px; }
.seg--fit { display: inline-flex; flex: none; }
.seg--fit > * { flex: none; min-width: 56px; padding-inline: 14px; }
.seg .i { width: 18px; height: 18px; }

/* Buttons ------------------------------------------------------------------ */

/* GradientButton: solid primary, 50 tall, radius h/2.6, coloured glow. */
.btn { --c: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 50px; padding: 0 22px; border: 0; border-radius: 19.2px; background: var(--c); color: #fff; font-size: 15px; font-weight: 800; line-height: 1; text-decoration: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 35%, transparent); cursor: pointer; transition: filter .15s; }
.btn:hover { filter: brightness(1.06); color: #fff; }
.btn .i { width: 18px; height: 18px; }
.btn--48 { height: 48px; border-radius: 18.5px; }
.btn--fit { width: auto; }
.btn--danger { --c: #dc2626; }
.btn--ghost { background: var(--card2); color: var(--ink); box-shadow: none; }
.btn--ghost:hover { color: var(--ink); }

/* FilledButton "Take", tinted with the peptide colour */
.take { --c: var(--brand); display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--c); color: rgba(0, 0, 0, .87); font-weight: 900; font-size: 14px; flex: none; }
.take:hover { filter: brightness(1.05); }

.text-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: transparent; color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.text-btn:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.text-btn--muted { color: var(--muted); font-weight: 700; }
.text-btn--danger { color: #dc2626; font-weight: 700; }
.center { display: flex; justify-content: center; }

/* Legacy names used by the admin pages */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--brand); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: 0 6px 16px rgba(20, 184, 166, .3); cursor: pointer; }
.button:hover { filter: brightness(1.06); color: #fff; }
.button--small { min-height: 34px; padding: 0 12px; border-radius: 12px; font-size: 12.5px; box-shadow: none; }
.button--ghost { background: var(--tonal); color: var(--on-tonal); box-shadow: none; }
.button--ghost:hover { color: var(--on-tonal); }
.button--danger { background: #dc2626; box-shadow: none; }

/* Forms (InputDecoration: filled card2, radius 12, no border) -------------- */

.form { display: grid; gap: 8px; }
.form-row { display: flex; gap: 12px; align-items: flex-start; }
.form-row > * { flex: 1 1 0; min-width: 0; }
.form-row > .seg--fit { flex: none; margin-top: 8px; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.three-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 420px) { .three-up { grid-template-columns: 1fr 1fr; } .three-up > :first-child { grid-column: 1 / -1; } }
.label { color: var(--muted); font-weight: 700; font-size: 12px; margin: 4px 0 -4px; }
.label-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.label-row .label { flex: 1; margin: 0; }
.subhead { font-weight: 800; font-size: 14px; margin-top: 2px; }

/* Text field with a floating label */
.tf { position: relative; display: flex; align-items: center; min-height: 48px; background: var(--card2); border-radius: 12px; border: 1.6px solid transparent; transition: border-color .15s; margin-top: 6px; }
.tf:focus-within { border-color: var(--primary); }
.tf__label { position: absolute; left: 12.4px; top: 50%; transform: translateY(-50%); max-width: calc(100% - 28px); color: var(--muted); font-size: 13.5px; line-height: 1.2; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: top .15s, font-size .15s, transform .15s; }
.tf__label small { font-size: inherit; }
.tf--icon .tf__label { left: 50.4px; }
.tf input, .tf select, .tf textarea { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; padding: 12px 12.4px; font-size: 16px; line-height: 1.5; color: var(--ink); border-radius: 12px; appearance: none; -webkit-appearance: none; }
.tf textarea { resize: vertical; min-height: 72px; padding-top: 14px; }
.tf select { cursor: pointer; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.tf select option { background: var(--card); color: var(--ink); }
.tf input::placeholder, .tf textarea::placeholder { color: transparent; }
.tf__icon { margin-left: 12px; color: var(--muted); }
.tf--icon input { padding-left: 14px; }
.tf__suffix { padding: 0 14px 0 0; color: var(--muted); font-size: 16px; white-space: nowrap; }
.tf__clear { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); border-radius: 50%; margin-right: 4px; }
/* Float the label onto the top edge once there is something in the field. */
.tf:focus-within .tf__label, .tf--float .tf__label, .tf:has(input:not(:placeholder-shown)) .tf__label, .tf:has(textarea:not(:placeholder-shown)) .tf__label, .tf:has(select) .tf__label {
    top: 0; transform: translateY(-58%); font-size: 11px; color: var(--muted); max-width: calc(100% - 24px);
}
.tf:focus-within .tf__label { color: var(--primary); }
.tf--icon:focus-within .tf__label, .tf--icon:has(input:not(:placeholder-shown)) .tf__label { left: 12.4px; }
.tf--area .tf__label { top: 24px; }
.tf--error { border-color: var(--error); }
.tf--error .tf__label { color: var(--error) !important; }
.ff { display: block; min-width: 0; }
.ff__hint { color: var(--muted); font-size: 12px; margin: 4px 14px 0; line-height: 1.35; }
.ff__error, .field-error { color: var(--error); font-size: 12.5px; font-weight: 600; margin: 6px 0 0 14px; line-height: 1.3; }
input[type="date"], input[type="time"], input[type="datetime-local"] { min-height: 1.5em; }
input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
.tf input[list]::-webkit-calendar-picker-indicator { display: none !important; }
/* Date and time pills: the whole pill opens the picker, and with JS the value reads like the app's ("Today", "6:39 PM"). */
.picker input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.picker__pretty { display: none; font-size: 13.5px; font-weight: 700; line-height: 1.43; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker--pretty .picker__pretty { display: block; }
.picker--pretty input { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; opacity: 0; }
.picker--pretty:focus-within .picker__pretty { display: none; }
.picker--pretty:focus-within input { position: static; height: auto; opacity: 1; }
.js .site-select:not(:focus-within) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-color-scheme: dark) { input::-webkit-calendar-picker-indicator { filter: invert(1); } }

/* PickerTile: date and time pills (wrap a native input) */
.picker { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 12px; min-height: 52px; background: var(--card2); border-radius: 12px; border: 1.6px solid transparent; }
.picker:focus-within { border-color: var(--primary); }
.picker > .i { color: var(--primary); width: 17px; height: 17px; }
.picker__body { flex: 1; min-width: 0; display: grid; }
.picker__label { color: var(--muted); font-size: 10.5px; font-weight: 600; line-height: 1.35; }
.picker input { border: 0; outline: 0; background: transparent; padding: 0; width: 100%; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.43; color: var(--ink); }
.picker--error { border-color: var(--error); }

/* Switch (Material 3) on a checkbox */
.switch-row { display: flex; align-items: center; gap: 16px; padding: 8px 0; cursor: pointer; }
.switch-row__text { flex: 1; min-width: 0; }
.switch-row__title { font-weight: 800; font-size: 16px; line-height: 1.4; }
.switch-row__sub { color: var(--muted); font-size: 12px; line-height: 1.35; }
.switch { position: relative; flex: none; width: 52px; height: 32px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 16px; background: var(--card2); border: 2px solid var(--outline); cursor: pointer; transition: background-color .2s, border-color .2s; }
.switch::after { content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--outline); transform: translateY(-50%); transition: left .2s, width .2s, height .2s, background-color .2s; }
.switch:checked { background: var(--primary); border-color: var(--primary); }
.switch:checked::after { left: 22px; width: 24px; height: 24px; background: #fff; }
.switch:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 3px; }
button.switch { padding: 0; }
button.switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
button.switch[aria-checked="true"]::after { left: 22px; width: 24px; height: 24px; background: #fff; }

/* Stepper (protocol form) */
.stepper { display: grid; justify-items: center; padding: 6px 4px; background: var(--card2); border-radius: 12px; }
.stepper__label { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.stepper__row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.stepper__row button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); }
.stepper__row button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.stepper__row button[disabled] { opacity: .38; cursor: default; }
.stepper input { width: 3.6em; text-align: center; border: 0; background: transparent; font-weight: 800; font-size: 15px; padding: 2px 0; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: 2px solid var(--primary); border-radius: 6px; }

/* Weekday circles */
.days { display: flex; justify-content: space-between; gap: 4px; }
.day { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--card2); color: var(--muted); font-weight: 800; font-size: 13px; cursor: pointer; transition: background-color .16s; }
.day input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day:has(input:checked) { background: var(--brand); color: #fff; }
.day:has(input:focus-visible) { outline: 2.5px solid var(--primary); outline-offset: 2px; }

/* Time chips (InputChip) */
.times { display: flex; flex-wrap: wrap; gap: 7px; }
.time-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 8px; background: var(--card2); border-radius: 8px; }
.time-chip .i { color: var(--primary); width: 16px; height: 16px; }
.time-chip input { border: 0; outline: 0; background: transparent; font-size: 13px; font-weight: 700; width: 6.6em; padding: 0; color: var(--ink); }
.time-chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); border-radius: 50%; padding: 0; }
.time-chip { position: relative; }
.time-chip:focus-within { outline: 2px solid var(--primary); }
.time-chip .picker__pretty { font-size: 13px; padding-right: 2px; }
.time-chip--pretty .picker__pretty { display: block; }
.time-chip--pretty input { position: absolute; inset: 0; width: 100%; opacity: 0; }
.time-chip--pretty input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.time-chip--pretty:focus-within .picker__pretty { visibility: hidden; }
.time-chip--pretty:focus-within input { opacity: 1; position: absolute; background: var(--card2); border-radius: 8px; padding-left: 30px; }
.time-chip button { position: relative; z-index: 1; }

/* Colour swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { position: relative; display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2.2px solid transparent; cursor: pointer; transition: border-color .16s; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch:has(input:checked) { border-color: var(--ink); }
.swatch:has(input:focus-visible) { outline: 2.5px solid var(--primary); outline-offset: 2px; }

/* Rating rows (check-in) */
.rating { display: flex; align-items: center; padding: 4px 0; border: 0; margin: 0; min-width: 0; }
.rating legend { float: left; width: 58px; padding: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rating__opts { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; }
.rate { --c: var(--primary); position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--card2); color: var(--muted); border: 1.5px solid transparent; cursor: pointer; transition: background-color .18s, border-color .18s; }
.rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate .i { width: 19px; height: 19px; }
.rate:has(input:checked) { background: color-mix(in srgb, var(--c) 20%, transparent); border-color: var(--c); color: var(--c); }
.rate:has(input:focus-visible) { outline: 2.5px solid var(--primary); outline-offset: 2px; }

/* Bottom sheet pages ------------------------------------------------------- */

.webapp--sheet { background: color-mix(in srgb, #000 54%, var(--bg)); }
.webapp--sheet .screen { padding: 12px 0 0; max-width: 620px; }
.sheet { background: var(--card); border-radius: 30px 30px 0 0; min-height: calc(100vh - 12px); display: flex; flex-direction: column; }
.sheet__grab { width: 42px; height: 4.5px; border-radius: 9px; background: color-mix(in srgb, var(--muted) 40%, transparent); margin: 10px auto 0; }
.sheet__head { display: flex; align-items: center; gap: 8px; padding: 16px 12px 0 22px; }
.sheet__head h1 { flex: 1; min-width: 0; font-size: 22px; line-height: 28px; font-weight: 800; }
.sheet__body { flex: 1; padding: 16px 22px 16px; }
.sheet__foot { position: sticky; bottom: 0; z-index: 2; background: var(--card); border-top: 1px solid var(--line); padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); display: grid; gap: 4px; }
.sheet__note { color: var(--muted); font-size: 11.5px; text-align: center; line-height: 1.35; }
.sheet .disclaimer { padding: 6px 22px 18px; background: var(--card); }
@media (min-width: 700px) {
    .webapp--sheet .screen { padding-top: 48px; }
    .sheet { min-height: calc(100vh - 48px); }
}

/* Bottom navigation (shell.dart _NavBar) ---------------------------------- */

.tabbar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); pointer-events: none; }
.tabbar__inner { position: relative; max-width: 528px; height: 84px; margin: 0 auto; }
.tabbar__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 68px; display: flex; border-radius: 28px; border: 1px solid var(--line); background: var(--nav-bg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); pointer-events: auto; }
.tabbar__gap { flex: none; width: 70px; }
.tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; line-height: 1.45; border-radius: 28px; }
.tab__pill { display: grid; place-items: center; padding: 4px 8px; border-radius: 20px; transition: padding .24s cubic-bezier(.34, 1.56, .64, 1), background-color .24s; }
.tab[aria-current="page"] { color: var(--primary); font-weight: 900; }
.tab[aria-current="page"] .tab__pill { padding: 4px 16px; background: color-mix(in srgb, var(--primary) 16%, transparent); }
.tab:hover .tab__pill { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.fab { position: absolute; top: 0; left: 50%; width: 64px; height: 64px; margin-left: -32px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; border: 5px solid var(--bg); box-shadow: 0 8px 22px rgba(20, 184, 166, .5); pointer-events: auto; text-decoration: none; }
.fab:hover { filter: brightness(1.06); }
.fab .i { width: 28px; height: 28px; }

/* Toast (floating SnackBar) and alerts ------------------------------------ */

.toast { position: fixed; z-index: 30; left: 15px; right: 15px; bottom: 16px; max-width: 610px; margin: 0 auto !important; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--snack); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); animation: toast-in .3s ease-out; }
.webapp--tabs .toast { bottom: calc(118px + env(safe-area-inset-bottom)); }
.toast p { flex: 1; }
.toast button { border: 0; background: transparent; color: var(--teal); font-weight: 700; padding: 4px 6px; }
.toast.is-gone { opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; pointer-events: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

.alert { border-radius: 22px; padding: 14px 16px; border: 1px solid; background: var(--card); }
.alert p, .alert ul { margin: 0; }
.alert ul { padding-left: 1.2rem; margin-top: 4px; }
.alert--ok { border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.alert--error { border-color: color-mix(in srgb, var(--red) 55%, transparent); color: var(--ink); }
.alert--error strong { color: var(--error); }
.sheet .alert { margin: 12px 22px 0; }
.secret { font: 700 1.1rem/1.4 ui-monospace, Consolas, monospace; background: var(--card2); padding: 2px 8px; border-radius: 6px; user-select: all; }

.disclaimer { color: color-mix(in srgb, var(--muted) 80%, transparent); font-size: 11.5px; line-height: 1.4; text-align: center; padding-top: 18px; }
.disclaimer strong { font-weight: 600; }
.disclaimer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin-top: 6px; }
.disclaimer a { color: inherit; font-weight: 600; padding: 4px 0; }
.disclaimer a:hover { color: var(--primary); }

/* Home ---------------------------------------------------------------------- */

.ring-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--ring-card); }
.ring { position: relative; flex: none; width: 118px; height: 118px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { stroke: rgba(0, 0, 0, .07); }
@media (prefers-color-scheme: dark) { .ring__track { stroke: rgba(255, 255, 255, .09); } }
.ring__value { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.33, 1, .68, 1); }
.ring__text { position: relative; text-align: center; }
.ring__big { font-size: 24px; line-height: 32px; font-weight: 900; }
.ring__small { color: var(--muted); font-size: 12px; font-weight: 700; }
.ring-card__body { flex: 1; min-width: 0; }
.ring-card__title { font-size: 16px; line-height: 24px; font-weight: 900; }
.ring-card__sub { color: var(--muted); font-weight: 600; line-height: 1.35; margin-top: 4px; }
.ring-card .chips { margin-top: 12px; }
@media (max-width: 359px) { .ring { width: 92px; height: 92px; } }

.compounds__head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15.5px; }
.compounds__head .i { color: var(--primary); width: 18px; height: 18px; }
.compounds__lede { color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.compounds ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.compounds li { display: flex; align-items: center; gap: 10px; }
.dot { --c: var(--teal); flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.compounds__main { flex: 1; min-width: 0; }
.compounds__line { display: flex; gap: 8px; }
.compounds__name { flex: 1; min-width: 0; font-weight: 800; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compounds__dose { font-weight: 700; font-size: 12.5px; }
.compounds__when { color: var(--muted); font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.alert-tile { --c: var(--amber); display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-color: color-mix(in srgb, var(--c) 35%, transparent); }
.alert-tile .ico { padding: 8px; border-radius: 12px; }
.alert-tile .ico .i { width: 20px; height: 20px; }
.alert-tile__title { font-weight: 800; }
.alert-tile__msg { color: var(--muted); font-size: 13px; line-height: 1.3; margin-top: 2px; }

/* Dose rows (_DoseRow) and log tiles (_LogTile) */
.dose { --c: var(--teal); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; }
.dose--overdue { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.dose__link { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.dose__link:focus-visible { outline-offset: -2px; }
.dose > :not(.dose__link) { position: relative; z-index: 1; pointer-events: none; }
.dose > form, .dose > .take, .dose > a:not(.dose__link) { pointer-events: auto; }
.dose__main { flex: 1; min-width: 0; }
.dose__name { font-weight: 800; font-size: 15.5px; line-height: 1.4; }
.dose--skipped .dose__name, .log--skipped .log__name { text-decoration: line-through; }
.dose__sub { color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.dose__flag { color: var(--red); font-size: 12px; font-weight: 800; }
.dose__flag--taken { color: var(--c); }
.dose__chev { color: var(--muted); }
.dose .take { --c: inherit; background: var(--c); }
.dose form { margin: 0; }

.log { --c: var(--teal); display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.card.log + .card.log, .card.dose + .card.dose { margin-top: 8px; }
.dose + .dose { margin-top: 10px !important; }
.log__main { flex: 1; min-width: 0; }
.log__name { font-weight: 800; }
.log__sub { color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.log__note { color: color-mix(in srgb, var(--muted) 80%, transparent); font-size: 12px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log__time { color: var(--muted); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.day-head { display: flex; align-items: baseline; padding: 18px 4px 8px; }
.day-head h2 { flex: 1; font-weight: 900; font-size: 15px; }
.day-head span { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.screen > .day-head { margin-top: 0; }
.screen > .day-head + .card { margin-top: 0; }

/* Vial carousel */
.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -18px !important; padding: 0 18px 22px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex: none; }
.vial-mini { width: 150px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vial-mini__name { font-weight: 800; margin-top: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vial-mini__left { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.vial-add { width: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 248px; font-weight: 800; }
.vial-add .ico { width: 52px; height: 52px; background: var(--card2); color: var(--primary); }
.vial-add .i { width: 28px; height: 28px; }
.vial { overflow: visible; }
.vial__name { font-family: var(--roboto); font-weight: 700; fill: #0f172a; letter-spacing: -.12px; }
.vial__sub { font-family: var(--roboto); font-weight: 500; fill: #475569; }

/* Adherence card and quick tools */
.metrics { display: flex; }
.metric { flex: 1; min-width: 0; }
.metric b { display: block; font-size: 22px; line-height: 28px; font-weight: 900; color: var(--c); }
.metric span { color: var(--muted); font-size: 12px; font-weight: 600; }
.bars { display: flex; align-items: flex-end; height: 110px; margin-top: 16px; }
.bars__col { flex: 1 1 0; min-width: 0; height: 100%; padding: 0 3px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.bars__track { flex: 1; display: flex; align-items: flex-end; }
.bars__bar { width: 100%; border-radius: 8px; background: var(--c, var(--teal)); min-height: 6%; }
.bars__bar--none { background: var(--card2); }
.bars__bar--today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 70%, transparent); }
.bars__label { height: 22px; padding-top: 6px; text-align: center; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 16px; }
.bars__label--today { color: var(--ink); font-weight: 800; }

.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tools .card { margin: 0; display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 14px; font-weight: 800; line-height: 1.3; }
.tools .ico { padding: 9px; border-radius: 12px; }
.feedback { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.feedback b { display: block; font-weight: 800; font-size: 13.5px; }
.feedback span { color: var(--muted); font-size: 12px; }

/* Vials ------------------------------------------------------------------- */

.vial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px !important; }
@media (min-width: 560px) { .vial-grid { grid-template-columns: repeat(3, 1fr); } }
.vial-card { padding: 14px 12px; display: flex; flex-direction: column; align-items: center; margin: 0 !important; }
.vial-card__name { align-self: stretch; margin-top: 12px; font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vial-card .thinbar { align-self: stretch; margin-top: 6px; }
.vial-card__nums { align-self: stretch; display: flex; justify-content: space-between; margin: 8px 0; font-size: 12.5px; font-weight: 700; }
.vial-card__nums span:last-child { color: var(--muted); }

.thinbar { height: 7px; border-radius: 7px; background: var(--card2); overflow: hidden; }
.thinbar span { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--teal)); }
.thinbar--9 { height: 9px; }
.thinbar--8 { height: 8px; }

.vial-hero { --c: var(--teal); padding: 22px 0; display: flex; flex-direction: column; align-items: center; text-align: center; background: color-mix(in srgb, var(--c) 12%, var(--card)); }
.vial-hero__title { font-size: 22px; line-height: 28px; font-weight: 900; margin-top: 16px; }
.vial-hero__sub { color: var(--muted); font-weight: 600; }
.vial-hero .btn { margin-top: 16px; width: calc(100% - 40px); }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stat { --c: var(--blue); margin: 0 !important; padding: 14px; min-height: 152px; display: flex; flex-direction: column; align-items: flex-start; }
.stat .ico { padding: 7px; border-radius: 10px; }
.stat .ico .i { width: 18px; height: 18px; }
.stat__value { margin-top: 10px; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.4px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat__label { color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.stat__sub { color: var(--c); font-size: 11.5px; font-weight: 700; }

.kv { display: flex; gap: 8px; padding: 7px 0; }
.kv dt { flex: none; width: 112px; color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
dl { margin: 0; }

.list-tile { display: flex; align-items: center; gap: 16px; padding: 8px 10px; border-radius: 16px; color: inherit; text-decoration: none; }
a.list-tile:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.list-tile__main { flex: 1; min-width: 0; }
.list-tile__title { font-weight: 800; font-size: 14px; }
.list-tile__sub { color: var(--muted); font-size: 12px; }
.list-tile__trail { color: var(--muted); font-size: 12px; text-align: right; }
.list-tile .i { color: var(--c, var(--teal)); }

/* Track: schedules */
.sched { --c: var(--teal); }
.sched--paused { opacity: .55; }
.sched__head { display: flex; align-items: center; gap: 12px; }
.sched__name { font-weight: 900; font-size: 16.5px; line-height: 1.35; }
.sched__dose { color: var(--c); font-weight: 800; }
.sched__label { color: var(--muted); font-weight: 600; line-height: 1.35; margin-top: 12px; }
.sched__next { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; font-size: 13px; }
.sched__next > .i { color: var(--muted); width: 16px; height: 16px; }
.sched__next span { flex: 1; }
.sched form { margin: 0; }
.sched .icon-btn { width: 40px; height: 40px; color: var(--muted); }

/* Progress -------------------------------------------------------------------- */

.metric-head { display: flex; align-items: flex-end; gap: 6px; margin-top: 16px; }
.metric-head__value { font-size: 36px; line-height: 44px; font-weight: 900; letter-spacing: -1px; }
.metric-head__unit { color: var(--muted); font-weight: 800; padding-bottom: 8px; }
.metric-head .chip { margin-left: auto; align-self: center; font-size: 13px; font-weight: 900; }
.chart { margin: 12px 0 0; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__label { font: 500 10.5px var(--roboto); fill: var(--muted); }
.chart__area { opacity: .16; }
.chart__line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart__dot { fill: var(--card); stroke-width: 2; }
.chart__goal { stroke: var(--amber); stroke-opacity: .8; stroke-width: 1.2; stroke-dasharray: 4 4; }
.chart__goal-label { font: 500 10px var(--roboto); fill: var(--amber); }
.chart__none { height: 200px; display: grid; place-items: center; color: var(--muted); }
.range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.range .avg { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.goal-note { color: var(--amber); font-weight: 800; font-size: 13px; margin-top: 10px; }
@media (prefers-color-scheme: light) { .goal-note { color: #b45309; } }
.values summary { cursor: pointer; color: var(--primary); font-weight: 700; font-size: 12.5px; margin-top: 10px; }
.values table { margin-top: 8px; }

.feel { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.feel > .i { color: var(--c); width: 22px; height: 22px; }
.feel__name { width: 72px; font-weight: 800; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feel .thinbar { flex: 1; --c: inherit; }
.feel .thinbar span { background: var(--c); }
.feel__num { font-weight: 900; min-width: 1.8em; text-align: right; }
.feel__trend { width: 26px; display: grid; place-items: center; }
.feel__trend .i { width: 16px; height: 16px; }
.fx { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.fx__name { width: 130px; flex: none; font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx .thinbar { flex: 1; }
.fx__n { color: var(--muted); font-weight: 800; min-width: 2em; text-align: right; }
.totals__title { font-weight: 900; margin-bottom: 8px; }
.totals__row { display: flex; padding: 4px 0; font-weight: 700; }
.totals__row span { flex: 1; }
.totals__row b { color: var(--primary); font-weight: 900; }

.ci { display: flex; align-items: flex-start; gap: 12px; padding: 14px; }
.ci__date { width: 46px; flex: none; padding: 6px 0; text-align: center; background: var(--card2); border-radius: 12px; }
.ci__date small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 800; line-height: 1.4; }
.ci__date b { display: block; font-weight: 900; font-size: 18px; line-height: 1.3; }
.ci__main { flex: 1; min-width: 0; }
.ci__title { font-weight: 800; }
.ci__fx { color: var(--red); font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.ci__note { color: var(--muted); font-size: 12.5px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Log-dose extras: syringe card and body map */
.draw { padding: 10px 12px 6px; }
.draw__text { font-weight: 700; font-size: 13px; }
.draw svg { width: 100%; height: 84px; }
.draw--over .draw__text { color: #ef4444; }
.warn-note { color: #b45309; font-weight: 600; font-size: 12.5px; }
@media (prefers-color-scheme: dark) { .warn-note { color: var(--amber); } }
.site-head { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.site-head .label { flex: 1; margin: 0; }
.site-head__name { color: var(--primary); font-weight: 800; font-size: 12.5px; }
.site-head button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--primary); }
.bodymap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bodymap .seg { width: 150px; }
.bodymap svg { width: 85px; height: 170px; touch-action: manipulation; }
.bodymap__fig { fill: var(--card2); stroke: color-mix(in srgb, var(--muted) 55%, transparent); stroke-width: 1.1; }
.bodymap__site { cursor: pointer; outline: none; }
.bodymap__site:focus-visible .bodymap__ring { stroke: var(--primary); stroke-width: 1.6; fill: none; }
.legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.site-select { max-width: 260px; margin: 0 auto; }

.recon { padding: 2px 14px; }
.recon > .switch-row { padding: 12px 0; }
.recon__more { border-top: 1px solid var(--line); padding: 12px 0 10px; display: grid; gap: 10px; }
.conc { --c: var(--teal); display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, transparent); font-weight: 700; font-size: 12.5px; }
.conc .i { color: var(--c); width: 17px; height: 17px; }
.vial-preview { display: flex; justify-content: center; }

/* Settings ----------------------------------------------------------------- */

.settings-card { padding: 16px; }
.settings-card .form { gap: 12px; }
.settings-card .btn { margin-top: 4px; }
.profile { display: flex; align-items: center; gap: 16px; }
.profile .ico { width: 48px; height: 48px; }
.profile b { display: block; font-weight: 800; font-size: 16px; }
.profile > span:last-child > span { display: block; color: var(--muted); }
.downloads { list-style: none; margin: 0; padding: 0; }
.downloads li + li { border-top: 1px solid var(--line); }
.downloads a { display: flex; align-items: center; gap: 16px; padding: 14px 4px; color: var(--ink); text-decoration: none; font-weight: 800; }
.downloads a:hover { color: var(--primary); }
.downloads a span { flex: 1; }
.downloads small { color: var(--muted); font-weight: 700; }
.downloads .i { color: var(--primary); }
.danger { border-color: color-mix(in srgb, var(--red) 45%, transparent); }

/* Pager ("Show older") */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pager a { color: var(--primary); font-weight: 700; text-decoration: none; padding: 10px 12px; border-radius: 20px; }
.pager a:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.pager span[aria-hidden] { opacity: .45; padding: 10px 12px; }

/* Empty state */
.empty-state { padding: 36px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.empty-state .ico { width: 84px; height: 84px; }
.empty-state .ico .i { width: 38px; height: 38px; }
.empty-state h2 { margin-top: 16px; font-size: 16px; font-weight: 800; }
.empty-state p { color: var(--muted); line-height: 1.4; margin-top: 6px; }
.empty-state .btn { margin-top: 18px; }

/* Sign-in pages ---------------------------------------------------------- */

.auth { max-width: 440px; margin: 0 auto; padding-top: 28px; }
.auth__logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; color: var(--ink); text-decoration: none; }
.auth__logo img { width: 40px; height: 40px; border-radius: 12px; }
.auth h1 { margin-top: 28px; font-size: 26px; line-height: 1.25; font-weight: 900; letter-spacing: -.5px; }
.auth__lede { color: var(--muted); font-weight: 600; margin-top: 6px; }
.auth .card { margin-top: 18px; padding: 20px; }
.auth .form { gap: 12px; }
.auth__alt { margin-top: 18px; text-align: center; font-weight: 600; }
.auth__alt a { font-weight: 800; text-decoration: none; }
.auth__note { margin-top: 8px; text-align: center; color: var(--muted); font-size: 12.5px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.4; font-size: 13px; color: var(--ink); }
.check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); cursor: pointer; }
.check--error span { color: var(--error); font-weight: 600; }

/* Admin panel (kept functional on the same tokens) ------------------------- */

.admin-bar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.admin-bar__row { max-width: 1240px; margin: 0 auto; padding: 8px 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.admin-bar .auth__logo { font-size: 16px; }
.admin-bar .auth__logo img { width: 32px; height: 32px; border-radius: 9px; }
.admin-bar nav { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.admin-bar form { margin: 0; }
.webapp--admin .screen { max-width: 1240px; }
.app-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--ink); color: var(--bg); padding: 3px 6px; border-radius: 6px; vertical-align: 2px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px; }
.panel > h2, .panel__head h2 { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.panel > :last-child { margin-bottom: 0; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.page-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; padding-top: 12px; }
.page-top h1 { font-size: 22px; line-height: 28px; font-weight: 900; letter-spacing: -.5px; }
.empty { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 18px; margin: 0; }
.stats dt { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.stats dd { margin: 0; font-size: 22px; font-weight: 900; }
.stats dd small { font-size: 12px; font-weight: 600; color: var(--muted); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row__main { flex: 1; min-width: 0; display: grid; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 20px; background: var(--card2); color: var(--muted); white-space: nowrap; }
.tag--taken { background: color-mix(in srgb, var(--teal) 16%, transparent); color: var(--primary); }
.tag--overdue { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--error); }
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.filter .ff { flex: 1 1 260px; max-width: 420px; }
.disclose summary { cursor: pointer; font-weight: 700; color: var(--primary); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; min-width: 14rem; max-width: 22rem; }
.actions form { margin: 0; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
tbody th { font-weight: 700; }
.data td:not(:last-child) { white-space: nowrap; }
.chart__axis { display: flex; justify-content: space-between; font-size: 12px; }
.bars__on { fill: var(--brand); }
.bars__off { fill: var(--card2); }
svg.bars { width: 100%; height: 9rem; display: block; }

/* Wider screens: keep the app's phone column, as the app does on a tablet. -- */

@media (min-width: 720px) {
    .screen { padding-inline: 24px; }
    .carousel { margin: 0 -24px !important; padding-inline: 24px; }
    .pills--scroll { margin-inline: -24px; padding: 0 24px 2px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Sign in with Google (resources/views/auth/partials/google-button.blade.php). -- */

.gsi { display: grid; gap: 12px; margin-bottom: 16px; }
.no-js .gsi { display: none; }
.gsi__button { display: flex; justify-content: center; min-height: 44px; }
/* Space for Google's 40px button while its script loads. */
.gsi__button:empty::before { content: ""; width: min(100%, 320px); height: 40px; border-radius: 20px; background: var(--card2); }
.gsi__button iframe { color-scheme: light; }
.gsi__note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; }
.gsi__or { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.gsi__or::before, .gsi__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.settings-card .gsi { margin-bottom: 0; }