/* ============================================================================
   v0.19.15 - ПОГОДА: the chronometer's weather layer.

   Three surfaces, one file: the drawn glyph set (WeatherIcon.razor - sun, all
   eight moons, clouds, animated rain/snow, the bolt), the detailed weather
   card (WeatherModal.razor - the phone-weather-app reference: hero, hourly
   strip with sunrise/sunset chips and rain odds, seven-day list), and the
   Settings block that configures the spot.

   The card is ALWAYS dark, like the Pit and the profile card - a weather hero
   is a sky, and the glass reads as night-window in both themes, so there is
   no dark-theme override block. The Settings block by contrast lives inside
   the token-driven settings panel and paints only through --chronos-* tokens.

   Motion budget: precipitation FALLS (transform+opacity loop, compositor) on
   the chip and the hero icon only - three dozen looping minis on one card is
   churn, and the razor never sets Animated on them. The thunder bolt does not
   flicker: a repeating luminance envelope belongs to the Upgrade pulse alone.
   Reduced motion freezes drops mid-fall - a stopped drop still reads as rain.

   Fixed-height card, internal scroll (the no-resize house law): the hourly
   strip scrolls sideways in its own box, the day list scrolls vertically,
   the card itself never changes size. Mobile first: base rules ARE the phone
   card; the one media step only widens the desktop breathing room.
   ============================================================================ */

/* ---- the glyph set -------------------------------------------------------- */
/* overflow visible is the belt to the composition's braces: nothing SHOULD leave
   the viewBox (the celestial transform keeps the ray tips inside), but a glyph
   that drifts half a unit must blur past the edge, never guillotine (the owner's
   prod screenshot of the clipped cloud is why this line exists). */
.wxi { display: block; flex: 0 0 auto; overflow: visible; }

.wxi .wxi-sun { fill: #FDE047; }
.wxi .wxi-rays {
    stroke: #FDE047;
    stroke-width: 1.6;
    stroke-linecap: round;
    fill: none;
}
.wxi .wxi-moon-dark {
    fill: #2B3350;
    stroke: rgba(148, 163, 184, 0.45);
    stroke-width: 0.6;
}
.wxi .wxi-moon-lit { fill: #E2E8F0; }
.wxi .wxi-cloud { fill: #C7CDE4; }
.wxi .wxi-cloud-back { fill: #8E96B8; }
.wxi .wxi-fog-lines {
    stroke: #AEB6D3;
    stroke-width: 1.5;
    stroke-linecap: round;
    fill: none;
}
.wxi .wxi-drop {
    stroke: #7DC4FD;
    stroke-width: 1.5;
    stroke-linecap: round;
    fill: none;
}
/* v0.19.17: flakes are six-arm stars now (paths, stroked), not dots - dots read
   as drizzle at chip size (owner report). The freezing-rain face keys its icier
   tint off the root class so its two flakes and two drops read as one mixed sky. */
.wxi .wxi-flake {
    stroke: #E0F2FE;
    stroke-width: 1;
    stroke-linecap: round;
    fill: none;
}
.wxi.wxi-freeze .wxi-flake { stroke: #A5F3FC; }
.wxi.wxi-freeze .wxi-drop { stroke: #A5F3FC; }
.wxi .wxi-bolt { fill: #FDE047; }

/* Falling precipitation - the animated faces. Negative delays start each drop
   mid-flight, so the loop never "pops" on mount. */
.wxi-anim .wxi-drop { animation: wxi-fall 1s linear infinite; }
.wxi-anim .wxi-flake { animation: wxi-fall 2.2s linear infinite; }
.wxi-anim .wxi-fall-1 { animation-delay: -0.33s; }
.wxi-anim .wxi-fall-2 { animation-delay: -0.66s; }
@keyframes wxi-fall {
    0%   { transform: translateY(-2.6px); opacity: 0; }
    18%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { transform: translateY(3.4px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wxi-anim .wxi-drop,
    .wxi-anim .wxi-flake { animation: none; }
}

/* ---- the weather card ------------------------------------------------------ */
.wx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 8, 20, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.wx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    height: min(620px, 88dvh);
    padding: 16px 14px 8px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(139, 92, 246, 0.40);
    color: #F1ECFF;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(180deg, #1B1730 0%, #120F22 55%, #171329 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
/* The sky wash behind the hero: day = high blue, night = deep indigo. */
.wx-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 180px;
    background: linear-gradient(180deg, var(--wx-sky, rgba(49, 46, 129, 0.50)), transparent);
    pointer-events: none;
}
.wx-card.wx-day { --wx-sky: rgba(56, 189, 248, 0.26); }
.wx-card.wx-night { --wx-sky: rgba(49, 46, 129, 0.55); }

.wx-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #F1ECFF;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.wx-close:hover { background: rgba(255, 255, 255, 0.12); }

.wx-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 4px 12px;
}
.wx-hero-icon { flex: 0 0 auto; }
.wx-hero-main { min-width: 0; }
.wx-place {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wx-temp {
    font-family: var(--chronos-font-mono);
    font-size: 46px;
    font-weight: var(--weight-black);
    line-height: 1.05;
    text-shadow: 0 0 14px rgba(167, 139, 250, 0.35);
}
.wx-kind { font-size: 15px; font-weight: 600; }
.wx-feels { font-size: 12px; opacity: 0.7; }

.wx-facts {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 0 4px 12px;
    font-size: var(--text-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.wx-fact { white-space: nowrap; opacity: 0.92; }
/* v0.19.18.1: the fact's NAME - sunrise, sunset, wind - set quieter than its value, so a
   row of words still reads as a row of readings. */
.wx-fact-name {
    opacity: 0.62;
    font-size: var(--text-xs);
}

/* v0.19.18.1: a band label above each list. The strip and the week used to run into each
   other as two anonymous rows of numbers. */
.wx-hours-head {
    padding: 10px 4px 0;
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
}
.wx-days-head { border-top: 1px solid rgba(255, 255, 255, 0.10); margin-top: 2px; }

/* Hourly strip - sideways scroll INSIDE its own box, per the house rule. */
.wx-hours {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    overflow-x: auto;
    padding: 8px 2px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    /* v0.19.18.1: press and pull with a mouse (js/drag-scroll.js reads the data attribute
       on the element). The cursor is the whole affordance - there is no other hint that a
       strip can be grabbed - and .is-dragging is what the script swaps in mid-gesture. */
    cursor: grab;
}
.wx-hours.is-dragging {
    cursor: grabbing;
    /* Mid-drag the pointer is a hand, not a caret: without this the pull paints a
       selection across every hour label it crosses. */
    user-select: none;
}

/* v0.19.16 (owner report from prod): the stock Windows scrollbar cut a glaring
   white rail across the dark card. Both scroll boxes wear the house thin bar -
   violet thumb, no track; Firefox via scrollbar-*, WebKit via the pseudos. */
.wx-hours,
.wx-days {
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.35) transparent;
}
.wx-hours::-webkit-scrollbar { height: 5px; }
.wx-days::-webkit-scrollbar { width: 5px; }
.wx-hours::-webkit-scrollbar-track,
.wx-days::-webkit-scrollbar-track { background: transparent; }
.wx-hours::-webkit-scrollbar-thumb,
.wx-days::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.35);
    border-radius: 999px;
}
.wx-hours::-webkit-scrollbar-thumb:hover,
.wx-days::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.55); }
.wx-hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 48px;
    padding: 8px 5px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.wx-hour-sun { background: rgba(251, 191, 36, 0.10); }
/* v0.19.18.1: the sunrise/sunset cells say the WORD (owner: no emoji for these). The mark
   is the horizon the emoji was drawing badly - a warm line with the sun's half above it,
   in 26px so the cell keeps the same rhythm as its icon-bearing neighbours. */
.wx-hour-sunmark {
    position: relative;
    display: block;
    width: 26px;
    height: 26px;
}
.wx-hour-sunmark::before {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 7px;
    height: 1.5px;
    border-radius: 1px;
    background: #FDE047;
}
.wx-hour-sunmark::after {
    content: '';
    position: absolute;
    left: 7px;
    bottom: 8px;
    width: 12px;
    height: 6px;
    border-radius: 12px 12px 0 0;
    background: #FDE047;
}
.wx-hour-sunword {
    font-family: var(--chronos-font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.wx-hour-t { font-size: var(--text-xs); opacity: 0.75; white-space: nowrap; }
.wx-hour-temp {
    font-family: var(--chronos-font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wx-hour-rain { font-size: 10px; color: #7DC4FD; white-space: nowrap; }
.wx-rain-quiet { opacity: 0.38; }

/* Seven-day list - the card's scrolling body. */
.wx-days {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 2px 4px;
}
.wx-day-row {
    display: grid;
    grid-template-columns: 62px 46px 1fr 34px 34px;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 10px;
}
.wx-day-row:hover { background: rgba(255, 255, 255, 0.045); }
.wx-day-name { font-size: var(--text-base); font-weight: 600; text-transform: capitalize; }
.wx-day-rain { font-size: 11px; color: #7DC4FD; }
.wx-day-icons { display: inline-flex; justify-content: center; gap: 10px; }
.wx-day-hi {
    font-family: var(--chronos-font-mono);
    font-weight: 700;
    font-size: var(--text-base);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.wx-day-lo {
    font-family: var(--chronos-font-mono);
    font-weight: 600;
    font-size: var(--text-base);
    opacity: 0.55;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 721px) {
    .wx-card { padding: 20px 18px 10px; }
    .wx-hour { min-width: 52px; }
}

/* ---- Settings: the spot block ---------------------------------------------
   Inside the token-driven settings panel - tokens only, correct in both
   themes. The hit list caps its own height and scrolls internally, so a fat
   search result can never grow the panel (the v0.19.13.2 law). */
/* v0.19.18: the .settings-wx-toggle pill is GONE with the two labelled rows it dressed -
   both switches are .settings-chip now (26-settings-menu.css) and print their value in
   .settings-chip-mono. The rule was removed rather than left orphaned. */
.settings-wx-spot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 2px;
}
.settings-wx-place {
    min-width: 0;
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-wx-clear {
    flex: 0 0 auto;
    padding: 2px 4px;
    border: none;
    background: none;
    color: var(--chronos-red);
    font-size: 12px;
    cursor: pointer;
}
/* v0.19.18: the two doors share a row instead of stacking. */
.settings-wx-doors {
    display: grid;
    /* minmax(0, 1fr), а не 1fr: голое 1fr это minmax(AUTO, 1fr), и нижняя граница
       колонки - её min-content. Слово «местоположение» длиннее любого слова справа,
       поэтому левая колонка отжимала себе лишнее и кнопки выходили 131.6 и 128.4
       вместо ровных 130. Ноль в минимуме снимает этот пол. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    margin-top: 6px;
}
/* v0.20.0.0: правило было написано на .settings-cal-btn, а в разметке у обеих
   дверей стоит .settings-btn - элементов с тем классом в панели ноль. Значит ни
   nowrap, ни ellipsis, ни компактный паддинг не применялись никогда, и подписи
   молча переносились на две строки. */
.settings-wx-doors .settings-btn {
    margin: 0;
    padding: 7px 6px;
    font-size: 12px;
    /* Перенос РАЗРЕШЁН, и это правка правки. Оживив правило, я включил вместе с ним
       nowrap + ellipsis - и «Определить местоположение» тут же вылезло за кнопку с
       обеих сторон обрезанным огрызком: .settings-btn центрирует содержимое флексом,
       текст в нём становится анонимным флекс-элементом, многоточие к такому не
       применяется, а overflow: hidden просто срезает края. Русская подпись в 130px
       не помещается ни при каких настройках, поэтому две строки - это ответ, а не
       поражение. Дефектом была не двустрочность, а неравные колонки, и её лечит
       minmax(0, 1fr) выше. */
    white-space: normal;
}

/* The typed-coordinates fallback, one click deep. */
.settings-wx-coords { margin-top: 6px; }
.settings-wx-coords > summary {
    list-style: none;
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--chronos-fg-muted);
    padding: 2px 0;
}
.settings-wx-coords > summary::-webkit-details-marker { display: none; }
.settings-wx-coords > summary::before { content: "± "; opacity: 0.7; }
.settings-wx-coords > summary:hover { color: var(--chronos-violet); }
.settings-wx-coords .settings-wx-search { margin-top: 4px; }

/* v0.19.18: the chip strip's mono face - the clock/degree switches print VALUES
   (24, °C), and a value in the panel's sans reads as a word. */
.settings-chip-mono {
    font-family: var(--chronos-font-mono);
    font-size: 13px;
    font-weight: var(--weight-black);
    color: var(--chronos-fg-primary);
}
.settings-chips-2 { grid-template-columns: 1fr 1fr; }
.settings-wx-search {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.settings-wx-input {
    flex: 1 1 auto;
    min-width: 0;
    /* 32px, а не 30: ровно min-height кнопки «Найти» рядом. Две пиксельные
       ступеньки по нижнему краю строки поиска были видны невооружённым глазом. */
    height: 32px;
    padding: 0 9px;
    border-radius: 8px;
    border: 1px solid var(--chronos-outline);
    background: var(--chronos-card-bg);
    color: var(--chronos-fg-primary);
    font-size: var(--text-sm);
}
.settings-wx-input:focus-visible {
    outline: 2px solid var(--chronos-violet);
    outline-offset: 1px;
}
.settings-wx-hits {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    max-height: 150px;
    overflow-y: auto;
}
.settings-wx-hit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 6px 9px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    text-align: left;
}
.settings-wx-hit:hover { background: rgba(124, 58, 237, 0.10); }
.settings-wx-hit-name { font-size: 13px; font-weight: 600; color: var(--chronos-fg-primary); }
.settings-wx-hit-region { font-size: 11px; color: var(--chronos-fg-muted); }
.settings-wx-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--chronos-red);
}

/* ---- v0.19.18: the deadline's own sky --------------------------------------
   One line under every deadline field (create, AI confirm, task detail, reopen).
   The layer's FIRST token-driven surface: everything above paints its own dark
   glass because it lives on the capsule or on an always-dark card, but this sits
   inside light modals, so it reads through --chronos-* like the fields around it.
   Nothing here has a background - it is a caption with a glyph, not a chip, and a
   second boxed thing under the input would compete with the input. */
.deadline-wx {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    /* Never wraps: at 375px the four parts are ~190px, and a caption that folds
       under its own field reads as a layout accident. */
    white-space: nowrap;
    font-size: 12px;
    color: var(--chronos-fg-muted);
}
.deadline-wx-temps {
    display: inline-flex;
    gap: 5px;
    font-family: var(--chronos-font-mono);
    font-variant-numeric: tabular-nums;
}
.deadline-wx-hi { font-weight: 700; color: var(--chronos-fg-primary); }
.deadline-wx-lo { font-weight: 600; opacity: 0.75; }
.deadline-wx-kind {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The odds keep the modal's water blue in both themes - the muted token would make
   them read as a disabled control rather than as rain. */
.deadline-wx-rain { color: #2563EB; font-weight: 600; }
[data-theme="dark"] .deadline-wx-rain { color: #7DC4FD; }

/* v0.20.2.2 (owner ask): the sky sits to the RIGHT of the field, not under it. The picker's
   panel is 300px of absolute dropdown anchored to the trigger's left edge, so a caption on
   the next line was simply covered every time the calendar opened - the forecast you came to
   read disappeared behind the days you were reading it for. To the right of a field that
   stops at 300px there is always slack in a modal, and the panel never reaches it.

   It wraps rather than squeezes: under 720px the panel is a bottom sheet (50-datetime-field.css)
   and covers nothing, so a second line there costs the reader nothing. margin-left: auto keeps
   the line hard right even when it does wrap, which is the one place the 300px panel cannot go.
   The detail sidebar keeps the old stacked line: its column is 204px and nothing fits beside
   the field there. */
.deadline-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
}
/* Shrinks before it wraps: the trigger already ellipsises its own text. */
.deadline-row .dtf { flex: 0 1 300px; min-width: 170px; }
.deadline-row .deadline-wx { margin-top: 0; margin-left: auto; min-width: 0; }

/* ---- v0.19.18: weather on the month card ------------------------------------
   Seven of forty-two cells can ever carry a dot, and that is the honest scope: it
   marks the days the forecast actually reaches. The month grid is a RANGE picker,
   not a deadline picker, so the dot says nothing about tasks - it is a glance at
   the week, and the deadline surfaces above are where a due date meets its sky.

   Theme-aware, unlike everything else in this file: a .calday is a light surface in
   the light theme, and the glyph set's bright hexes clear ~1.3:1 on white - not a
   dot, a rumour. The dark values ARE the glyph set's own. */
:root {
    --wx-dot-clear:  #D97706;
    --wx-dot-cloud:  #64748B;
    --wx-dot-precip: #2563EB;
}
:root[data-theme="dark"] {
    --wx-dot-clear:  #FDE047;  /* == .wxi-sun */
    --wx-dot-cloud:  #8E96B8;  /* == .wxi-cloud-back */
    --wx-dot-precip: #7DC4FD;  /* == .wxi-drop */
}
/* The containing block for the dot. Feature-scoped here rather than added to the
   base .calday in 02-main-layout.css: the cell only needs to be positioned because
   the weather layer exists, and this file loads after it. */
.calday { position: relative; }
/* v0.19.18.1 (owner): twice the size - 4px was a speck on a 38px cell. At 8px it reads as
   a deliberate mark from across the board, and the cell's round silhouette still has room
   for it at the bottom without touching the number. */
/* v0.19.18.21: a glyph, not a dot (owner: "точки странные"). Three dots that differ
   only by hue force the reader to learn a colour key before the grid says anything, and
   the key is nowhere on the page. A sun, a cloud and a drop are already known - shape
   carries the meaning and colour is free to do the quieter job below.

   The svg is 12px in a 38px round cell, sitting under the number rather than beside it:
   the bottom of a circle is the only spot with clearance, and the cell is still exactly
   as tall as one with no forecast because the mark is out of flow. Markup in
   Components/CalDayWeather.razor. */
.calday-wx {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    pointer-events: none;
    display: block;
}
/* One inherited `color` per tone drives the fill, so the endpoint override below is a
   single declaration instead of three. */
.calday-wx > path { fill: currentColor; }
/* The owner's alpha ask: the tone mixed down to a tint rather than laid on at full
   strength. At 100% these glyphs are stickers on a date picker - three saturated marks
   pulling harder than the numbers, which are the thing being picked. At 78% the sky is
   legible and the digit still wins the cell. */
.calday-wx-clear  { color: color-mix(in srgb, var(--wx-dot-clear)  78%, transparent); }
.calday-wx-cloud  { color: color-mix(in srgb, var(--wx-dot-cloud)  78%, transparent); }
.calday-wx-precip { color: color-mix(in srgb, var(--wx-dot-precip) 78%, transparent); }
/* On a filled cell (the selected endpoint is near-black, the range wash is violet)
   the dot keeps its hue but needs to stop competing with the number above it. */
/* On a filled endpoint the cell is near-black and already carries colour of its own;
   a 78% #2563EB drop there is a hole. The glyph drops its hue and keeps its shape, which
   is the half that was doing the work. In-range cells keep their tint - the violet wash
   is light enough to read all three against. */
.calday.endpoint .calday-wx { color: rgba(255, 255, 255, 0.82); }

/* ---- v0.19.16: the map picker ("точка на карте") ---------------------------
   A fixed-size dark card around a hand-rolled OSM slippy canvas (js/weather-map.js
   builds everything inside .wx-map-canvas; Blazor renders only the shell). The
   canvas is the one surface in the app with touch-action: none - the drag IS the
   feature there, so the browser must not claim the gesture for page scroll. */
.wx-map-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, 100%);
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(139, 92, 246, 0.40);
    color: #F1ECFF;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(180deg, #1B1730 0%, #120F22 55%, #171329 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.wx-map-head {
    display: flex;
    align-items: center;
    padding: 0 30px 0 4px;
    min-height: 26px;
}
.wx-map-title { font-weight: 700; font-size: var(--text-md); }
/* v0.19.18: the picker's own search row + its hit list. The controls are the settings block's
   (.settings-wx-input / .settings-cal-btn) so there is one field style in the feature, but the
   card is dark glass, so the input's token colours are re-inked here for this ground only. */
.wx-map-search {
    display: flex;
    gap: 6px;
}
.wx-map-card .settings-wx-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: #F1ECFF;
}
.wx-map-card .settings-wx-input::placeholder { color: rgba(241, 236, 255, 0.45); }
.wx-map-card .settings-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 12px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #F1ECFF;
    font-size: var(--text-sm);
    cursor: pointer;
}
.wx-map-card .settings-btn:hover { background: rgba(124, 58, 237, 0.45); border-color: rgba(255, 255, 255, 0.28); }
.wx-map-hits {
    max-height: 132px;
    margin-top: 0;
    border-radius: 10px;
    background: rgba(10, 8, 20, 0.55);
}
.wx-map-card .settings-wx-hit:hover { background: rgba(124, 58, 237, 0.35); }
.wx-map-card .settings-wx-hit-name { color: #F1ECFF; }
.wx-map-card .settings-wx-hit-region { color: rgba(241, 236, 255, 0.55); }

.wx-map-frame { position: relative; }
.wx-map-canvas {
    position: relative;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    background: #10142A;
    touch-action: none;
    cursor: crosshair;
}
.wx-map-tiles { position: absolute; inset: 0; }
.wx-map-tile {
    position: absolute;
    top: 0;
    left: 0;
    width: 256px;
    height: 256px;
    user-select: none;
    pointer-events: none;
    /* A breath less saturation so the light OSM palette sits inside the dark card
       without shouting; still plainly a map. */
    filter: saturate(0.85);
}
.wx-map-pin {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--chronos-violet);
    border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.8);
    pointer-events: none;
}
.wx-map-zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wx-map-zoom button {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(10, 8, 20, 0.75);
    color: #F1ECFF;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.wx-map-zoom button:hover { background: rgba(124, 58, 237, 0.45); }
.wx-map-attr {
    position: absolute;
    right: 6px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 6px;
    font-size: var(--text-2xs);
    color: rgba(15, 23, 42, 0.78);
    background: rgba(255, 255, 255, 0.68);
    pointer-events: none;
}
.wx-map-hint { font-size: var(--text-xs); opacity: 0.7; padding: 0 4px; }
.wx-map-confirm {
    width: 100%;
    min-height: 34px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--chronos-violet);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.wx-map-confirm:hover { background: var(--chronos-lavender); }
.wx-map-confirm:disabled { opacity: 0.55; cursor: default; }

/* ---- /studio helpers (раздел 33) ------------------------------------------
   The icon strips get their own dark ground - the glyphs are drawn for the
   dark surfaces they live on (capsule, card), and the board must show them on
   that ground in the light theme too. The scope class re-anchors the modal's
   fixed backdrop into the page flow so the LIVE component can stand in a
   section instead of covering the whole board. */
.studio-wx-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #1B1730 0%, #14111F 100%);
    border: 1px solid rgba(139, 92, 246, 0.30);
}
.studio-wx-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 74px;
}
.studio-wx-cap {
    font-size: var(--text-xs);
    color: #B9B3D6;
    letter-spacing: 0.02em;
}
/* v0.19.18: the deadline strip and the calendar-dot swatches. The deadline line is a
   token surface, so its cells keep the studio's own ground rather than the dark strip. */
.studio-wx-deadlines {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}
.studio-wx-deadlines .studio-wx-cell { align-items: flex-start; min-width: 150px; }
.studio-calday-demo {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--chronos-hover-bg);
}
.studio-wx-scope .wx-backdrop {
    position: static;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}