/* Base, shell, start page and settings drawer. Colours come from themes.css. */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #0f1115; }

/* Lowest priority (:where): the field standard below sets its own size, the rest takes the surrounding text. */
:where(button, input, select, textarea) { font: inherit; color: inherit; }

/* ---------- Form controls: Shani's one standard ----------
   Every text field, dropdown and text area looks like this, wherever it is; a new field needs nothing. :where()
   keeps it at the lowest priority, so a real exception (a borderless search bar, the pinboard's paper) still wins.
   Sizes come from the tokens in components.css (--control-h …). A place can change the look of all fields inside it
   with the variables below instead of restating the rule:
     --field-bg      the field's background (default: the page's, so a field in a card looks set in)
     --field-line    its border
   Smaller fields (a page number in a table, a filter in a toolbar): class "field-sm" on the field or anything
   around it. Labels above fields: <label class="field"><span>Name</span><input …></label>.                      */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="image"], [type="submit"], [type="button"], [type="reset"]), select, textarea) {
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--field-line, var(--line));
    border-radius: var(--radius-md, 10px);
    background: var(--field-bg, var(--bg));
    color: var(--ink);
    /* 16px, not less: phones zoom into a smaller field when it's tapped. */
    font-size: 1rem;
    line-height: 1.3;
    transition: border-color 0.15s, box-shadow 0.15s;
}
:where(textarea) { width: 100%; min-height: 4.5em; resize: vertical; line-height: 1.45; }
:where(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="range"])):hover:not(:disabled, :focus) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--field-line, var(--line)));
}
:where(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="range"])):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
:where(input, textarea)::placeholder { color: var(--ink-muted); opacity: 0.8; }
:where(input, select, textarea):disabled { opacity: 0.6; cursor: not-allowed; }
/* Something typed wrong (after leaving the field, not while typing). */
:where(input, select, textarea):user-invalid { border-color: var(--danger, var(--danger)); }

/* The small size: same look, less room (a class, so it wins over the plain size above and in components.css). */
.field-sm :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select),
:where(input, select).field-sm {
    min-height: var(--control-h-sm, 32px);
    padding: 5px 10px;
    border-radius: var(--radius-sm, 8px);
    font-size: var(--text-sm, 0.85rem);
}
/* On a touch screen small fields keep 16px text (no zooming in when tapped). */
@media (pointer: coarse) {
    .field-sm :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select),
    :where(input, select).field-sm { font-size: 1rem; }
}

/* Tick boxes and round choices: one size, the theme's accent. */
:where(input[type="checkbox"], input[type="radio"]) {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Sliders in the accent; a filled track (player, volume) sets --fill (0 … 100%) and gets class "slider". */
:where(input[type="range"]) { accent-color: var(--accent); cursor: pointer; }
:where(input[type="range"].slider) {
    appearance: none;
    width: 100%;
    height: 6px;
    margin: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--surface-2) var(--fill, 0%));
}
:where(input[type="range"].slider)::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
:where(input[type="range"].slider)::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); }

/* Choosing a file: the browser's button in Shani's secondary look. */
:where(input[type="file"]) { max-width: 100%; color: var(--ink-muted); font-size: var(--text-sm, 0.85rem); }
:where(input[type="file"])::file-selector-button {
    margin-right: 10px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 10px);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}
:where(input[type="file"])::file-selector-button:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }

/* ---------- Native form controls in the theme's look ----------
   The browser draws the dropdown arrow, number spinners and date icon itself (light grey boxes on Windows).
   Here they're replaced or toned down, so every field looks the same in every theme. */

.shani { accent-color: var(--accent); }

/* Own chevron, drawn in the theme's muted ink (two gradient triangles, so it follows the theme without an image). */
.shani select:not([multiple]):not([size]) {
    appearance: none;
    padding-right: 34px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
        linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.shani select:not([multiple]):not([size]):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.shani select option { background: var(--surface); color: var(--ink); }

/* The opened list in Shani's look too (rounded, the theme's colours, the picked one in the accent), where the browser
   lets it be styled (Chromium: Chrome, Edge, the desktop and Android apps). Elsewhere it stays the system's list. */
@supports (appearance: base-select) {
    .shani select:not([multiple]):not([size]),
    .shani select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
    /* The chevron is the background above; the browser's own arrow and tick go. */
    .shani select:not([multiple]):not([size])::picker-icon { display: none; }
    .shani select:not([multiple]):not([size]) option::checkmark { display: none; }
    .shani select:not([multiple]):not([size])::picker(select) {
        margin-top: 4px;
        padding: 4px;
        min-width: anchor-size(width);
        max-height: min(360px, 60vh);
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        color: var(--ink);
        box-shadow: 0 12px 32px rgb(0 0 0 / 22%);
    }
    .shani select:not([multiple]):not([size]) option {
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        background: transparent;
        cursor: pointer;
    }
    .shani select:not([multiple]):not([size]) option:hover,
    .shani select:not([multiple]):not([size]) option:focus-visible {
        outline: none;
        background: color-mix(in srgb, var(--accent) 14%, transparent);
    }
    .shani select:not([multiple]):not([size]) option:checked { color: var(--accent); font-weight: 600; }
    .shani select:not([multiple]):not([size]) option:disabled { opacity: 0.5; cursor: default; }
}

/* Numbers are typed (the phone shows its number pad); the tiny spin arrows only got in the way. */
.shani input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.shani input[type="number"]::-webkit-inner-spin-button,
.shani input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.shani :is(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.shani :is(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-calendar-picker-indicator:hover { opacity: 0.9; }
.shani input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

h1:focus { outline: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shani {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ---------- Top bar ---------- */

/* Pinned to the top while the page scrolls, on a frosted background so the content shows through faintly. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(16px, 4vw, 40px);
    padding-top: max(14px, env(safe-area-inset-top));
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Shani's mark: a glowing S, red into blonde, breathing softly (still when motion is reduced). */
.brand__mark {
    width: 26px;
    height: 26px;
    flex: none;
    overflow: visible;
    filter: drop-shadow(0 0 3px rgba(255, 59, 78, 0.75)) drop-shadow(0 0 9px rgba(255, 186, 110, 0.45));
    animation: brand-glow 3.2s ease-in-out infinite;
}

@keyframes brand-glow {
    50% { filter: drop-shadow(0 0 5px rgba(255, 59, 78, 0.95)) drop-shadow(0 0 16px rgba(255, 217, 138, 0.6)); }
}

/* It reacts: flares up with sparks for an achievement, pulses fast while something downloads, dims at night. */
.brand__mark.is-celebrating { animation: brand-flare 0.9s ease-out 0s 2 alternate, brand-glow 3.2s ease-in-out 1.8s infinite; }
.brand__mark.is-busy { animation: brand-busy 1.1s ease-in-out infinite; }
.brand__mark.is-sleepy { opacity: 0.6; animation: brand-sleepy 6s ease-in-out infinite; }

.brand__spark {
    fill: #ffd98a;
    transform-origin: 256px 256px;
    animation: brand-spark 1.1s ease-out both;
    --angle: calc(var(--i) * 45deg);
}

@keyframes brand-flare {
    0% { transform: scale(1); }
    40% { transform: scale(1.28) rotate(-8deg); filter: drop-shadow(0 0 6px #ff3b4e) drop-shadow(0 0 20px #ffd98a) brightness(1.4); }
    100% { transform: scale(1.1); filter: drop-shadow(0 0 5px rgba(255, 59, 78, 0.95)) drop-shadow(0 0 16px rgba(255, 217, 138, 0.6)); }
}

@keyframes brand-busy {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 59, 78, 0.6)) drop-shadow(0 0 6px rgba(255, 186, 110, 0.3)); }
    50% { filter: drop-shadow(0 0 6px rgba(255, 59, 78, 1)) drop-shadow(0 0 18px rgba(255, 217, 138, 0.75)); }
}

@keyframes brand-sleepy {
    0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 59, 78, 0.35)); }
    50% { filter: drop-shadow(0 0 4px rgba(255, 59, 78, 0.55)) drop-shadow(0 0 8px rgba(255, 186, 110, 0.2)); }
}

@keyframes brand-spark {
    0% { transform: rotate(var(--angle)) translateX(0) scale(1); opacity: 1; }
    100% { transform: rotate(var(--angle)) translateX(330px) scale(0.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .brand__mark, .brand__mark.is-celebrating, .brand__mark.is-busy, .brand__mark.is-sleepy { animation: none; }
    .brand__spark { display: none; }
}
.shani[data-motion="reduced"] .brand__spark { display: none; }

/* ---------- Shani's mascot (Persona/Mascot.razor) ---------- */

.brand__name { color: inherit; text-decoration: none; }

/* The mascot keeps its own type: the brand's display font and the small-phone rule (font-size 0) stay out. */
.mascot {
    position: relative;
    display: flex;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
}

.mascot__button {
    display: grid;
    place-items: center;
    padding: 2px;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: inherit;
    cursor: pointer;
    transition: background var(--dur) var(--ease-out);
}
.mascot__button:hover, .mascot__button.is-open { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mascot__button:focus-visible { outline: none; box-shadow: var(--ring); }
.mascot__face { width: 34px; height: 34px; }

/* The face: line style like the icons, tinted by the accent. */
.mascot-face { flex: none; overflow: visible; color: var(--accent); }
.mascot-face__body { fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); stroke: currentColor; stroke-width: 2; }
.mascot-face__curl { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.mascot-face__line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mascot-face__fill, .mascot-face__mouth { fill: var(--ink); }
.mascot-face__shine { fill: var(--surface); }
.mascot-face__cheek { fill: color-mix(in srgb, var(--danger) 40%, transparent); }
.mascot-face__drop { fill: color-mix(in srgb, var(--accent) 55%, var(--surface)); stroke: currentColor; stroke-width: 0.8; }
.mascot-face__dot, .mascot-face__pompom { fill: currentColor; }
.mascot-face__z { stroke: var(--ink-muted); stroke-width: 1.3; }
.mascot-face__ray, .mascot-face__sparks .mascot-face__line { stroke: var(--warning); }
.mascot-face__hat { fill: var(--second); stroke: var(--ink); stroke-width: 0.9; stroke-linejoin: round; }
.mascot-face__hat--witch { fill: var(--ink); }
.mascot-face__flower circle { fill: color-mix(in srgb, var(--danger) 55%, var(--surface)); stroke: color-mix(in srgb, var(--danger) 70%, var(--ink)); stroke-width: 0.5; }
.mascot-face__flower .mascot-face__flower-heart { fill: var(--warning); }
.mascot-face__leaf { fill: color-mix(in srgb, var(--danger) 70%, var(--warning)); stroke: color-mix(in srgb, var(--danger) 60%, var(--ink)); stroke-width: 0.8; stroke-linejoin: round; }

/* Alive, quietly: a slow bob and a blink now and then; each mood moves its own way. */
.mascot-face__all { animation: mascot-bob 4.2s ease-in-out infinite; }
.mascot-face__eyes { transform-box: fill-box; transform-origin: center; animation: mascot-blink 5.6s ease-in-out infinite; }
.mascot-face--sleepy .mascot-face__all { animation-duration: 7s; }
.mascot-face__z { animation: mascot-z 3.5s ease-in-out infinite; }
.mascot-face--cheering .mascot-face__all { animation: mascot-hop 0.55s ease-out 0s 4; }
.mascot-face__sparks { animation: mascot-twinkle 0.7s ease-in-out infinite alternate; }
.mascot-face__eyes--dart { animation: mascot-dart 1.6s ease-in-out infinite; }
.mascot-face__orbit { transform-origin: 20px 22px; animation: mascot-orbit 1.5s linear infinite; }
.mascot-face--worried .mascot-face__all { animation: mascot-tremble 0.35s ease-in-out 0s 4; }

@keyframes mascot-bob { 50% { transform: translateY(-1px); } }
@keyframes mascot-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes mascot-z { 0%, 100% { opacity: 0.25; transform: translate(0, 1px); } 50% { opacity: 1; transform: translate(1px, -1px); } }
@keyframes mascot-hop { 40% { transform: translateY(-3px); } }
@keyframes mascot-twinkle { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes mascot-dart { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1px); } }
@keyframes mascot-orbit { to { transform: rotate(360deg); } }
@keyframes mascot-tremble { 25% { transform: translateX(-0.5px); } 75% { transform: translateX(0.5px); } }

@media (prefers-reduced-motion: reduce) {
    .mascot-face *, .mascot__bubble { animation: none !important; }
}

/* The bubble: under the mascot, with a little tail; it goes by itself. */
.mascot__bubble {
    position: absolute;
    top: calc(100% + 10px);
    left: -6px;
    z-index: 13;
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    width: max-content;
    max-width: min(270px, calc(100vw - 32px));
    padding: var(--space-2) var(--space-1) var(--space-2) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    animation: mascot-bubble-in var(--dur-slow) var(--ease-out) both;
}
.mascot__bubble::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 18px;
    width: 12px;
    height: 12px;
    border-top: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    border-left: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    background: var(--bg);
    transform: rotate(45deg);
}
.mascot__bubble-text {
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.mascot__bubble-close {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
}
.mascot__bubble-close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mascot__bubble-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@keyframes mascot-bubble-in { from { opacity: 0; transform: translateY(-4px) scale(0.96); } }

/* The panel: today at a glance, a tip, how chatty. */
.mascot-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    z-index: 13;
    width: min(360px, calc(100vw - 24px));
    max-height: min(560px, 78vh);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
}
.mascot-panel h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-md); }
.mascot-panel__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); }
.mascot-panel__face { width: 56px; height: 56px; }
.mascot-panel__head strong { font-family: var(--font-display); font-size: var(--text-lg); }
.mascot-panel__mood { margin: 2px 0 0; font-size: var(--text-sm); }
.mascot-panel__today ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.mascot-panel__today li { display: flex; align-items: center; gap: var(--space-2); }
.mascot-panel__today li .icon { width: 18px; height: 18px; flex: none; color: var(--accent); }
.mascot-panel__today a { color: inherit; }
.mascot-panel__tip {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.mascot-panel__tip h3 .icon { color: var(--accent); }
.mascot-panel__tip p { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.mascot-panel__chatter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

/* Phones: the panel spans the screen under the top bar (like the bell's; the bar's backdrop-filter is its box). */
@media (max-width: 640px) {
    .mascot-panel { position: fixed; top: calc(100% + 6px); left: 12px; right: 12px; width: auto; }
}

/* A word from Shani on an empty page (EmptyState Says). */
.empty__says { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-size: var(--text-sm); }
.empty__mascot { width: 30px; height: 30px; }

/* ---------- Start page ---------- */

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 clamp(16px, 4vw, 40px) 56px;
}

.home {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.6vh, 24px);
    padding-top: clamp(8px, 4vh, 40px);
}

.greeting h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    text-shadow: var(--glow);
}

.greeting__date {
    margin: 6px 0 0;
    color: var(--ink-muted);
    font-size: 1.05rem;
    min-height: 1.5em;
}

.clock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
    justify-content: center;
    gap: clamp(28px, 4vw, 56px);
}

.clock-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.clock-card__caption {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

.clock-card__label, .clock-card__hint, .clock-card__rename {
    color: var(--ink-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.clock-card__label {
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    cursor: text;
    transition: border-color 0.15s, color 0.15s;
}

.clock-card__label:hover { color: var(--ink); border-color: var(--line); }

.clock-card__rename {
    width: 200px;
    padding: 6px 10px;
    text-align: center;
    color: var(--ink);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface);
    outline: none;
}

/* Pencil sits just right of the centred name and only shows on hover/focus. */
.clock-card__action {
    position: absolute;
    left: 100%;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background-color 0.15s;
}

.clock-card:hover .clock-card__action, .clock-card__action:focus-visible { opacity: 1; }
.clock-card__action:hover { background: var(--surface); color: var(--ink); }

.clock-card__action svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.clock-card__zone { margin-top: -14px; color: var(--ink-muted); font-size: 0.8rem; opacity: 0.75; }

.add-tile {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1.5px dashed var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.add-tile svg { width: 18%; height: 18%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.add-tile:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

.clock-card__hint { opacity: 0; transition: opacity 0.15s; }
.clock-card:hover .clock-card__hint { opacity: 1; }

.empty-state { text-align: center; color: var(--ink-muted); margin: auto; }
.empty-state h1 { color: var(--ink); font-weight: 300; }

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

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 35%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    /* Above the sticky top bar (20): it used to cover the drawer's close button. */
    z-index: 21;
}

.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100vw);
    overflow-y: auto;
    background: var(--bg);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 22;
    padding: 0 24px max(32px, env(safe-area-inset-bottom));
}

.drawer.is-open { transform: none; }

.drawer__header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* In the Android app the page runs under the status bar. */
    padding: max(20px, env(safe-area-inset-top)) 0 12px;
    background: var(--bg);
    z-index: 1;
}

.drawer__header h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }

.drawer__section { padding: 16px 0; border-top: 1px solid var(--line); }

.drawer__section h3 {
    margin: 0 0 14px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.theme-swatch, .style-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 10px;
    font-size: var(--text-sm);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.theme-swatch:hover, .style-tile:hover { transform: translateY(-1px); }

.theme-swatch.is-selected, .style-tile.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.theme-swatch__preview {
    width: 100%;
    height: 44px;
    border-radius: 9px;
    background: var(--swatch-bg);
    border: 1px solid rgb(128 128 128 / 25%);
    display: grid;
    place-items: center;
}

.theme-swatch__preview span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--swatch-ink);
    background: var(--swatch-accent);
}

.toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    cursor: pointer;
}

.toggle input {
    appearance: none;
    width: 40px;
    height: 24px;
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--line);
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}

.toggle input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ink-muted);
    transition: transform 0.2s, background-color 0.2s;
}

.toggle input:checked { background: var(--accent); border-color: var(--accent); }
.toggle input:checked::after { transform: translateX(16px); background: var(--bg); }

.clock-editor {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    margin-bottom: 10px;
    overflow: hidden;
}

.clock-editor__summary {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.clock-editor__thumb { width: 52px; flex: none; }

.clock-editor__title { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clock-editor__title small { color: var(--ink-muted); }

.chevron { color: var(--ink-muted); transition: transform 0.2s; }
.clock-editor.is-expanded .chevron { transform: rotate(180deg); }

.clock-editor__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 14px 14px;
}

.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); }
.field > span { color: var(--ink-muted); }
.field--spaced { margin-bottom: 8px; }


.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style-tile { padding: 10px 8px; background: var(--bg); }

/* ---------- Blazor error UI ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 20px;
    background: #fff4d6;
    color: #3b2f22;
    box-shadow: 0 -1px 4px rgb(0 0 0 / 20%);
    z-index: 1000;
}

#blazor-error-ui .dismiss { position: absolute; right: 16px; top: 8px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    .shani, .drawer, .drawer-backdrop, .theme-swatch, .style-tile { transition: none; }
}