/* ============================================================================
   v0.19.14 - МЕСТНОЕ ВРЕМЯ: the top bar's second chronometer (.local-clock).

   The bar already carries one instrument - the streak device on the far left, a
   dark bezel with a violet cast and a flame. This is its sibling on the OTHER
   side of the pet: same bezel language (the triple-layer face, the pill radius,
   the mono glowing digits from 01-topbar.css:193), no flame and no day segment,
   and its cast sits at the LEFT end, over the orb - so the two devices' glows
   face each other across the pet between them.

   Told apart from the streak clock by silhouette, not by squinting: the streak
   counts DOWN as HH:MM:SS behind a day counter and a flame; this one reads
   HH:MM large with small trailing seconds behind a sun/moon orb, and its face
   follows the day - morning amber, day sky, evening violet, night indigo. The
   phase is one lc-ph-* class set by Scripts/local-clock.ts (the boundaries live
   ONLY there); each phase writes custom properties and this file paints them.
   The var() fallbacks below are the pre-JS resting face - neutral violet, so a
   blocked script degrades to "a quiet second device", never to a broken one.

   Digits: two stacked spans per cell. The script swaps textContent and flips
   .lc-roll; the transform/opacity transition here is the entire motion, so the
   roll rides the compositor (TypeScript drives behaviour, CSS paints). No
   colon blink and no repeating glow - the ticking seconds are this device's
   heartbeat, and the Upgrade pulse owns the app's one luminance beat.

   Static glows only, same budget note as 01-topbar.css:191.

   Layout contract: fixed height, 1ch fixed-width cells - the device can NEVER
   change size while ticking (the no-resize house rule), which is also why
   topnav-collapse.ts may safely ignore every mutation inside it.

   Placement lives elsewhere, deliberately: the desktop bar order is DOM order
   (a flex row, Home.razor mounts it after the pet), and the phone grid hands it
   the "time" row in 02-main-layout.css beside the other grid-area assignments.
   Not in the /design arrange system yet - it carries no --arr-* token, so the
   overlay simply cannot move it; wire a token in 00-tokens-base.css the day the
   owner wants to.

   Mobile first, per the house doctrine: the base rules ARE the phone face
   (32px, 17px digits, the date line lit - the phone row has the width for it);
   min-width: 981px lifts it to the 38px desktop bar height and trades the date
   line for the once-a-minute tooltip, because on the desktop row every pixel
   competes with the topnav labels.
   ============================================================================ */

.local-clock {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    /* v0.19.18: the top 5px are the engraved nameplate's (see .lc-plate). The HEIGHT is
       unchanged - the padding only pushes the readout down inside the same box, so the
       bar's geometry is exactly what it was. */
    padding: 5px 12px 0 9px;
    border-radius: var(--radius-pill);
    flex: 0 0 auto;
    cursor: default;
    user-select: none;
    white-space: nowrap;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 40%),
        radial-gradient(130% 100% at 12% 30%, var(--lc-cast, rgba(168, 85, 247, 0.24)), transparent 62%),
        linear-gradient(180deg, #241F35 0%, #14121F 58%, #1A1728 100%);
    border: 1px solid var(--lc-rim, rgba(139, 92, 246, 0.40));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 5px rgba(0, 0, 0, 0.35),
        0 2px 10px var(--lc-glow, rgba(124, 58, 237, 0.18));
    /* The face crossfades when the day turns (a handful of times per session);
       background gradients cannot transition, so the rim and glow carry it. */
    transition: border-color 0.9s ease, box-shadow 0.9s ease;
}

/* ---- the nameplate: TIME, on the top of the capsule -----------------------
   v0.19.18, owner ask: the streak device and this one had drifted into looking
   like the same instrument, so the clock says what it is - the way a real
   chronometer carries its maker's line above the numerals rather than beside
   them. It sits inside the rim (the capsule reserves its 5px), so it changes no
   geometry and nothing can move.

   v0.19.18.2, owner: the first pass was ENGRAVED - the face's own colour dropped
   to a whisper - and at 30% alpha on a near-black bezel that is not subtle, it is
   invisible. It is LACQUERED now: white, with a gloss. The gloss is a real
   gradient down the glyphs (paper-white through the top half, cooling to lilac at
   the baseline) clipped to the text, which is what enamel and polished metal do
   with a light source above them - a flat white would read as a sticker. Under it
   two drop-shadows: a tight dark one that separates the word from the bezel, and a
   soft bloom in the PHASE's own ink colour, so the plate warms at dawn and cools
   at night with the rest of the instrument.

   drop-shadow, not text-shadow: with the fill turned transparent for the clip, a
   text-shadow paints a solid blob THROUGH the letters, while a filter follows the
   glyph's alpha. `color` stays white as the fallback for an engine without
   background-clip: text - it loses the gloss, never the word.

   The word is a literal and stays English in every locale, same policy as the
   FREE/PLUS/PRO tier badges: it is a mark on an instrument, not UI copy. */
.lc-plate {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--chronos-font-sans);
    font-size: 7px;
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: 0.34em;
    /* The tracking is symmetric, so the trailing letter-space would push the word
       half a step left of centre without this. */
    text-indent: 0.34em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 42%, #CFC7EC 78%, #A9A0CF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 5px var(--lc-ink-glow, rgba(167, 139, 250, 0.35)));
    pointer-events: none;
    user-select: none;
}

/* ---- the tooltip: ours, not the browser's --------------------------------
   v0.19.18, owner ask. The full localized date used to ride the native `title`,
   which means a system-styled box, a second of delay and no relation to the
   device it describes. This one is the capsule's own plate: same dark glass,
   same violet rim, appearing under it. Written by the TS engine (never Blazor),
   so it costs no render; absolutely positioned and pointer-events: none, so it
   can neither move the bar nor eat a click meant for the capsule. */
.lc-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 40;
    padding: 5px 9px;
    border-radius: 9px;
    border: 1px solid var(--lc-rim, rgba(139, 92, 246, 0.40));
    background: linear-gradient(180deg, #241F35 0%, #14121F 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    color: #E8E3FA;
    font-family: var(--chronos-font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -4px);
    transition: opacity 0.16s var(--e-quart, ease-out), transform 0.16s var(--e-quart, ease-out);
    pointer-events: none;
}
.lc-tip:empty { display: none; }
@media (hover: hover) {
    .local-clock:hover > .lc-tip {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* Keyboard reaches it too - the capsule is a button whenever weather is on. */
.local-clock:focus-visible > .lc-tip {
    opacity: 1;
    transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
    .lc-tip { transition: none; }
}

/* ---- the orb: sun by day, moon by night ---------------------------------
   v0.19.17 (owner order, design pass): the sun is an INSTRUMENT now, not a dot.
   A ray disc rides ::before - eight spokes cut from a repeating conic gradient,
   masked to a ring band - and ROTATES once per ~26s. Rotation is the one motion
   a sun can honestly make: it is transform-only on the compositor, so the pulse
   budget stays untouched (nothing changes luminance - the Upgrade CTA keeps the
   app's only beat), and the continuous-decorative precedent is the streak flame
   looping two elements to the left. The moon does not spin: night unmounts the
   disc entirely. Reduced motion freezes the spokes in place - a still sun with
   rays is still a sun. */
.lc-orb {
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--lc-orb, radial-gradient(circle at 35% 30%, #E9D5FF, #A855F7 62%, #7C3AED));
    box-shadow: var(--lc-orb-halo, 0 0 7px rgba(168, 85, 247, 0.45));
}
.lc-orb::before {
    content: '';
    position: absolute;
    inset: -4.5px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
        var(--lc-ray, rgba(196, 181, 253, 0.75)) 0deg 10deg,
        transparent 10deg 45deg);
    -webkit-mask: radial-gradient(circle, transparent 54%, #000 60%, #000 86%, transparent 93%);
    mask: radial-gradient(circle, transparent 54%, #000 60%, #000 86%, transparent 93%);
    animation: lc-sunspin 26s linear infinite;
    pointer-events: none;
}
@keyframes lc-sunspin {
    to { transform: rotate(360deg); }
}
.local-clock.lc-ph-night .lc-orb::before { display: none; }
@media (prefers-reduced-motion: reduce) {
    .lc-orb::before { animation: none; }
}

/* ---- digits ------------------------------------------------------------- */
.lc-time {
    display: inline-flex;
    align-items: center;
    font-family: var(--chronos-font-mono);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: #F1ECFF;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px var(--lc-ink-glow, rgba(167, 139, 250, 0.35));
}

/* One character per cell, clipped: the roll happens inside this window. 1ch is
   exact for the mono face, so a tick can never nudge a neighbour. */
.lc-cell {
    position: relative;
    display: inline-block;
    width: 1ch;
    height: 1em;
    overflow: hidden;
}
.lc-a,
.lc-b {
    position: absolute;
    inset: 0;
    text-align: center;
}
.lc-b {
    transform: translateY(112%);
    opacity: 0;
}
.lc-cell.lc-roll .lc-a {
    transform: translateY(-112%);
    opacity: 0;
}
.lc-cell.lc-roll .lc-b {
    transform: none;
    opacity: 1;
}
/* Transitions exist ONLY in the rolling state: when the script drops the class
   to land a roll, both spans snap home with no reverse animation to fight. */
.lc-cell.lc-roll .lc-a,
.lc-cell.lc-roll .lc-b {
    transition: transform var(--d2) var(--e-quart), opacity var(--d2) var(--e-quart);
}

/* -0.08em, measured, not eyeballed: JetBrains Mono's colon ink centres 1.5px
   below the digits' ink centre at 19px (canvas actualBoundingBox probe, design
   review v0.19.14.1) - this raise lands both centres on the same axis, and the
   em unit keeps it true at the 15/17px steps. */
.lc-colon {
    display: inline-block;
    margin: 0 1px;
    opacity: 0.55;
    transform: translateY(-0.08em);
}

/* Small trailing seconds - the chronograph subdial, and the silhouette that
   keeps this device from ever being misread as the streak countdown (which is
   uniform HH:MM:SS). Sized in em so every media step below scales it for free.
   0.16em drops the small digits onto the BIG digits' baseline exactly (same
   canvas probe: centre-aligned cells put the small baseline 2px above the big
   one at 19px) - seconds must stand on the shared line like type, not float
   like a badge. Opacity only steadies the ink: the size is what subordinates. */
.lc-sec {
    display: inline-flex;
    margin-left: 5px;
    font-size: 0.66em;
    font-weight: 600;
    opacity: 0.75;
    transform: translateY(0.16em);
}

/* ---- v0.19.15: the AM/PM word of the 12-hour face ------------------------
   Fed by the TS engine off data-lc-am / data-lc-pm (the culture's own words,
   latin fallback). Empty on the 24-hour face - and an empty word must not
   hold a gap. */
.lc-ampm {
    margin-left: 4px;
    font-size: 0.6em;
    font-weight: 700;
    opacity: 0.8;
    letter-spacing: 0.04em;
}
.lc-ampm:empty { display: none; }

/* ---- v0.19.15: the weather chip ------------------------------------------
   Icon + temperature behind the same hairline divider the date line uses.
   Blazor-rendered (it carries report data and refreshes with it), unlike the
   TS-ticked digits beside it - the engine's rebind absorbs those renders. */
.lc-wx {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 3px;
    padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.lc-wx-t {
    font-family: var(--chronos-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: #E8E3FA;
    text-shadow: 0 0 7px var(--lc-ink-glow, rgba(167, 139, 250, 0.30));
}
/* v0.19.17: the pre-fetch skeleton - same geometry, dimmed, so the capsule holds
   its width from the first paint and only the CONTENT sharpens when data lands. */
.lc-wx.lc-wx-wait { opacity: 0.5; }

/* ---- v0.19.15: with a weather spot the capsule is a real button ----------
   (opens the weather card; without a spot it stays the inert instrument).
   The hover is a quiet rim lift - no transform, nothing moves. */
.local-clock[role="button"] { cursor: pointer; }
@media (hover: hover) {
    .local-clock[role="button"]:hover {
        /* v0.19.19.8: the same two tokens as every other hover in the app. This element is
           where the house hover came from, so leaving it on a hardcoded white mix made the
           reference the one thing not following the rule - and any later tuning of the knobs
           would have drifted it away from the surfaces it is meant to match. */
        border-color: color-mix(in srgb, var(--hover-ink) var(--hover-lift), var(--lc-rim, rgba(139, 92, 246, 0.40)));
    }
}
.local-clock[role="button"]:focus-visible {
    outline: 2px solid var(--chronos-violet);
    outline-offset: 2px;
}

/* ---- the date line (phone row only - see the min-width block) ----------- */
.lc-date {
    margin-left: 3px;
    padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    font-family: var(--chronos-font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #CDC6E8;
    letter-spacing: 0.01em;
}
/* Pre-JS the line is empty; an empty span must not draw a dangling divider. */
.lc-date:empty { display: none; }

/* ---- the four faces ------------------------------------------------------
   Each phase is one custom-property pack; the rules above consume them. Same
   literal-colour policy as the streak bezel: the face is dark in BOTH themes,
   so these are component-local literals, not theme tokens. */
.local-clock.lc-ph-morning {
    --lc-cast: rgba(251, 146, 60, 0.26);
    --lc-rim: rgba(251, 146, 60, 0.42);
    --lc-glow: rgba(251, 146, 60, 0.22);
    --lc-ink-glow: rgba(253, 186, 116, 0.38);
    --lc-orb: radial-gradient(circle at 38% 32%, #FFFBEB, #FDBA74 48%, #F97316 88%);
    --lc-orb-halo: 0 0 8px rgba(251, 146, 60, 0.55);
    --lc-ray: rgba(251, 191, 36, 0.80);
}
.local-clock.lc-ph-day {
    --lc-cast: rgba(56, 189, 248, 0.24);
    --lc-rim: rgba(125, 211, 252, 0.40);
    --lc-glow: rgba(56, 189, 248, 0.20);
    --lc-ink-glow: rgba(147, 197, 253, 0.35);
    --lc-orb: radial-gradient(circle at 38% 32%, #FFFDE7, #FDE047 45%, #F59E0B 92%);
    --lc-orb-halo: 0 0 9px rgba(250, 204, 21, 0.60);
    --lc-ray: rgba(253, 224, 71, 0.85);
}
.local-clock.lc-ph-evening {
    --lc-cast: rgba(192, 132, 252, 0.30);
    --lc-rim: rgba(168, 85, 247, 0.50);
    --lc-glow: rgba(168, 85, 247, 0.26);
    --lc-ink-glow: rgba(192, 132, 252, 0.42);
    --lc-orb: radial-gradient(circle at 38% 32%, #FFEDD5, #F472B6 48%, #A855F7 90%);
    --lc-orb-halo: 0 0 8px rgba(236, 72, 153, 0.50);
    --lc-ray: rgba(244, 114, 182, 0.70);
}
.local-clock.lc-ph-night {
    --lc-cast: rgba(99, 102, 241, 0.22);
    --lc-rim: rgba(129, 140, 248, 0.38);
    --lc-glow: rgba(99, 102, 241, 0.20);
    --lc-ink-glow: rgba(165, 180, 252, 0.38);
    --lc-orb: radial-gradient(circle at 35% 35%, #F8FAFC, #CBD5E1 58%, #94A3B8 95%);
    /* The inset crescent is what turns the pale disc into a moon. */
    --lc-orb-halo: inset -3px -2px 4px rgba(15, 23, 42, 0.60), 0 0 7px rgba(148, 163, 184, 0.40);
}

/* ---- reduced motion: freeze, not delete ---------------------------------
   The digits still change - that is the substantive signal - they just snap.
   The script reads the same preference live and skips the roll classes too;
   this rule is the belt for a roll already in flight when the setting flips. */
@media (prefers-reduced-motion: reduce) {
    .lc-cell.lc-roll .lc-a,
    .lc-cell.lc-roll .lc-b {
        transition: none;
    }
    .local-clock { transition: none; }
}

/* ---- ultra-narrow phones (Fold covers, ~344px) --------------------------- */
@media (max-width: 360px) {
    .local-clock { height: 30px; padding: 4px 10px 0 8px; gap: 6px; }
    .lc-time { font-size: 15px; }
    .lc-orb { width: 13px; height: 13px; }
    .lc-date { font-size: var(--text-xs); padding-left: 7px; }
    /* The plate is the first thing to yield on a Fold cover screen: at 6px it is a
       texture rather than a word, and the digits are what the row is for. */
    .lc-plate { display: none; }
}

/* ---- the desktop bar ------------------------------------------------------
   981 is the app's own "this is the desktop bar" line (02-main-layout.css
   swaps the grid at max-width 980). Here the device stands in the flex row
   beside the pet: streak-clock height (38px), streak-clock digit size (19px),
   and the date line yields to the tooltip - the row's width belongs to the
   topnav labels. */
@media (min-width: 981px) {
    .local-clock { height: 38px; padding: 6px 13px 0 10px; gap: 8px; }
    .lc-time { font-size: 19px; }
    .lc-orb { width: 16px; height: 16px; }
    .lc-plate { top: 4px; font-size: 8px; } /* deliberately below the --text-* ladder: a
       decorative TIME plate, not readable copy. Integer so it does not rasterise at a
       half-pixel, which is worst exactly at this size. */
    /* Scoped to the bar, not the viewport: it is the BAR's width budget the date
       yields to (topnav labels live there). /studio has no .topbar, so its cells
       keep the date line at any width - the board shows the fuller face. */
    .topbar .local-clock .lc-date { display: none; }
}

/* ============================================================================
   v0.19.18.9 - the streak countdown borrows these drums.

   Home.razor renders it as the same six .lc-cell shells and local-clock.ts rolls
   them off data-lc-mirror instead of the system clock (the remaining time is
   domain logic and stays on the server - see the note in the TS).

   The cell mechanics above are already generic. Two things it needs on top:
   .timer has to become a line the cells can sit on, and the box has to be a
   little taller than 1em. Mono numerals carry no descender, so at 1em the
   overflow: hidden crops the top of the glyph the moment the size goes up -
   visible immediately at the phone's 28px. 1.2em gives the roll its travel
   without moving the resting baseline.
   ============================================================================ */
.streak-clock .timer {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.streak-clock .timer .lc-cell {
    height: 1.2em;
    line-height: 1.2em;
}
.streak-clock .timer .lc-colon {
    line-height: 1.2em;
    opacity: 0.55;
}