/* =====================================================================================
   TOPWX18 (18 Sep 2026) - the topbar's live weather + digital clock (TopbarWeather.razor).
   Scenes are 64x64 SVGs animated here: the sun's rays turn and its glow breathes, clouds
   drift, rain and snow fall, fog slides, lightning flashes, stars twinkle. Every animation
   stops under prefers-reduced-motion. Plain hyphens and quotes only.
   ===================================================================================== */
.mh-app .topbar .mhwx{display:flex;align-items:center;gap:12px;min-width:0;flex:none;cursor:default;user-select:none}

/* ---- the scene ---- */
.mhwx .wx-ico{width:62px;height:62px;margin:-6px -4px;flex:none;filter:drop-shadow(0 4px 8px rgba(30,55,48,.16))}
.mhwx .wx-ico svg{width:100%;height:100%;overflow:visible}
.mhwx .wx-ico *{transform-box:fill-box;transform-origin:center}

.mhwx .wx-sun-core{fill:#FDB813}
.mhwx .wx-sun-glow{fill:rgba(253,184,19,.22);animation:wxBreath 3.2s ease-in-out infinite}
.mhwx .wx-rays line{stroke:#FDB813;stroke-width:3;stroke-linecap:round}
.mhwx .wx-rays{animation:wxSpin 16s linear infinite}

.mhwx .wx-moon-body{fill:#F3E7B3;stroke:#E2CF86;stroke-width:1}
.mhwx .wx-moon-glow{fill:rgba(243,231,179,.18);animation:wxBreath 4s ease-in-out infinite}
.mhwx .wx-star{fill:#F3E7B3;animation:wxTwinkle 2.6s ease-in-out infinite}
.mhwx .wx-star.s2{animation-delay:.9s}
.mhwx .wx-star.s3{animation-delay:1.7s}

.mhwx .wx-cloud{fill:#FFFFFF;stroke:#C9D3DC;stroke-width:1.4}
.mhwx .wx-cloud.back{fill:#E3E9EF;stroke:#C2CCD6}
.mhwx .wx-cloud.rainy{fill:#EEF2F6;stroke:#AEBBC8}
.mhwx .wx-cloud.dark{fill:#9AA7B4;stroke:#7D8B99}
.mhwx .wx-drift{animation:wxDrift 5.5s ease-in-out infinite alternate}
.mhwx .wx-drift-back{animation:wxDrift 7s ease-in-out infinite alternate-reverse}

.mhwx .wx-drop{stroke:#3E9BE0;stroke-width:2.6;stroke-linecap:round;animation:wxFall 1.05s linear infinite}
.mhwx .wx-drop.thin{stroke-width:1.8;animation-duration:1.4s}
.mhwx .wx-flake{fill:#FFFFFF;stroke:#A9C4DA;stroke-width:1;animation:wxSnow 2.6s linear infinite}
.mhwx .d2{animation-delay:.35s}
.mhwx .d3{animation-delay:.7s}
.mhwx .d4{animation-delay:.2s}
.mhwx .wx-flake.d2{animation-delay:.9s}
.mhwx .wx-flake.d3{animation-delay:1.7s}

.mhwx .wx-fog{stroke:#AEBBC8;stroke-width:3;stroke-linecap:round;animation:wxFog 3.6s ease-in-out infinite alternate}
.mhwx .wx-fog.f2{animation-delay:.8s}
.mhwx .wx-fog.f3{animation-delay:1.6s}

.mhwx .wx-bolt{fill:#FFC83D;stroke:#E8A400;stroke-width:1;animation:wxFlash 3.4s ease-in-out infinite}

@keyframes wxSpin{to{transform:rotate(360deg)}}
@keyframes wxBreath{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes wxTwinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@keyframes wxDrift{from{transform:translateX(-2.5px)}to{transform:translateX(2.5px)}}
@keyframes wxFall{0%{transform:translateY(-3px);opacity:0}15%{opacity:1}100%{transform:translateY(11px);opacity:0}}
@keyframes wxSnow{0%{transform:translate(0,-3px);opacity:0}15%{opacity:1}50%{transform:translate(2px,6px)}100%{transform:translate(-1px,14px);opacity:0}}
@keyframes wxFog{from{transform:translateX(-4px);opacity:.55}to{transform:translateX(4px);opacity:1}}
@keyframes wxFlash{0%,62%,70%,100%{opacity:.18}64%,68%{opacity:1}}

/* ---- the reading ---- */
.mhwx .wx-read{display:flex;flex-direction:column;justify-content:center;min-width:0}
.mhwx .wx-temp{font-family:var(--mh-font-head);font-size:24px;font-weight:700;line-height:1;letter-spacing:-.5px;color:var(--mh-ink,#1C2733)}
.mhwx .wx-deg{font-size:13px;font-weight:700;margin-left:1px;vertical-align:top;position:relative;top:2px;color:var(--mh-muted,#6B7785)}
.mhwx .wx-lbl{font-size:12px;font-weight:600;color:var(--mh-muted,#6B7785);margin-top:4px;white-space:nowrap}
.mhwx .wx-sep{width:1px;height:34px;background:var(--mh-line,rgba(30,55,48,.14));margin:0 4px}

/* ---- the digital clock ---- */
.mhwx .wx-clock{display:flex;flex-direction:column;justify-content:center;min-width:0}
.mhwx .clk-time{display:flex;align-items:baseline;gap:3px;font-variant-numeric:tabular-nums;line-height:1}
.mhwx .clk-hm{font-family:var(--mh-font-head);font-size:24px;font-weight:700;letter-spacing:.5px;color:var(--mh-ink,#1C2733);min-width:4.2ch}
.mhwx .clk-hm .clk-colon{display:inline-block;margin:0 1px;animation:clkBlink 1s steps(1,end) infinite}
.mhwx .clk-s{font-size:13px;font-weight:700;color:#2F6B57;min-width:2.2ch}
.mhwx .clk-ap{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--mh-muted,#6B7785);margin-left:2px}
.mhwx .clk-date{font-size:12px;font-weight:600;color:var(--mh-muted,#6B7785);margin-top:4px;white-space:nowrap}
@keyframes clkBlink{0%{opacity:1}50%{opacity:.25}}

/* ---- dark ---- */
body.dark .mhwx .wx-temp, body.dark .mhwx .clk-hm{color:var(--mh-ink)}
body.dark .mhwx .clk-s{color:#8FBBA5}
body.dark .mhwx .wx-cloud{fill:#DCE3EA;stroke:#9AA8B6}
body.dark .mhwx .wx-cloud.back{fill:#B8C3CE}
body.dark .mhwx .wx-ico{filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}

/* ---- narrow screens: drop the words, keep the scene, the degrees and the time ---- */
@media (max-width:1100px){ .mhwx .wx-lbl, .mhwx .clk-date{display:none} .mhwx .wx-ico{width:52px;height:52px} }
@media (max-width:760px){ .mhwx .wx-sep, .mhwx .wx-clock{display:none} }

@media (prefers-reduced-motion:reduce){
  .mhwx .wx-ico *, .mhwx .clk-colon{animation:none !important}
}

/* TRIAL (18 Sep 2026) - owner: "turn the topbar pure water ... like mirror, I just want to check."
   A clear mirror-glass bar: mostly see-through, the page behind it blurred and brightened as it
   scrolls under, a bright glass rim along the bottom, a top highlight, and a soft diagonal
   reflection. Light mode only; delete this block to go back to the 72% frosted bar. */
body:not(.dark) .mh-app .topbar{
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06);
  backdrop-filter:blur(22px) saturate(185%) brightness(1.06);
  border-bottom:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(30,55,48,.06),0 10px 28px -20px rgba(30,55,48,.45);
}
body:not(.dark) .mh-app .topbar::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;   /* the sticky bar (z 20) is its own stacking context, so -1 paints over its glass but under every control */
  background:linear-gradient(105deg,transparent 0%,transparent 34%,rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1))) 44%,rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))) 52%,transparent 60%,transparent 100%);
  opacity:.8;
}

/* TRIAL (18 Sep 2026) - owner: "turn the global search box to [mirror glass] too, but make sure it's
   recognizable." Clear glass like the bar, but it keeps an unmistakable edge: a pine hairline ring,
   a bright top highlight, a soft drop shadow and darker placeholder text, so it still reads as the
   search field. Focus turns it solid white with the pine focus ring, as before. Light mode only. */
body:not(.dark) .mh-app .topbar .gsearch .bigbar.b14{
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.30*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(47,107,87,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.06),0 6px 18px -10px rgba(30,55,48,.35);
}
body:not(.dark) .mh-app .topbar .gsearch .bigbar.b14:hover{border-color:rgba(47,107,87,.42);background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.40*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%)}
body:not(.dark) .mh-app .topbar .gsearch .bigbar.b14:focus-within{
  /* his follow-up: "the background of the global search is white, turn that too like that" - no
     solid white on focus either; the pine ring and a slightly denser glass say "you are typing here". */
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.48*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.26*var(--tg-k,1))) 100%);border-color:rgba(47,107,87,.55);
  box-shadow:0 0 0 3px rgba(47,107,87,.14),0 10px 26px -12px rgba(30,55,48,.35);
}
body:not(.dark) .mh-app .topbar .gsearch .bigbar.b14 .divider{background:rgba(47,107,87,.22)}
body:not(.dark) .mh-app .topbar .gsearch .bigbar.b14 input::placeholder{color:#6F7D89}

/* =====================================================================================
   GSEARCH18 (18 Sep 2026) - THE GLOBAL SEARCH FOLDS AWAY TO THE LOGO.
   Owner: "by default the global search must only show the Matthew House logo; when the user
   clicks it, it opens to the right and takes its current size; when the mouse is gone and staff
   are working on something else it closes itself back to the logo - with a cool animation."
   gsearch.js stamps #gSearch[data-open="1"] (open on focus / click; close when focus has left
   AND the pointer is off it - never while someone is typing). Blazor never renders data-open,
   so a re-render cannot fight it. The .gsearch box keeps its 440px place in the topbar, so
   nothing around it shifts; the bar grows from its LEFT edge to the right.
   Motion: open = a spring (slight overshoot) + the logo turns a full circle + the divider grows
   + the words slide in + one light sweep across the glass; close = a quicker glide back.
   Collapsed hover = a soft pine halo that breathes. All of it off under reduced motion.
   ===================================================================================== */
.mh-app .topbar .gsearch .bigbar{
  position:relative;overflow:hidden;cursor:text;
  width:100%;margin:0;          /* anchored LEFT (the base .bigbar centres itself) - so it grows to the right */
  transition:width .52s cubic-bezier(.34,1.32,.5,1), margin-left .52s cubic-bezier(.34,1.32,.5,1), padding .4s ease, gap .4s ease,
             background .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.mh-app .topbar .gsearch .bigbar .mh{transition:transform .62s cubic-bezier(.34,1.3,.5,1);transform:rotate(360deg) scale(1)}
.mh-app .topbar .gsearch .bigbar .divider{transition:height .35s ease .12s, opacity .3s ease .12s, width .3s ease}
.mh-app .topbar .gsearch .bigbar input{transition:opacity .3s ease .16s, transform .38s cubic-bezier(.2,.7,.25,1) .14s}

/* ---- folded: only the logo, in a glass circle ---- */
.mh-app .topbar .gsearch:not([data-open="1"]) .bigbar{
  /* owner: "center the global search icon when it's on standby" - the circle sits in the MIDDLE
     of the search's 440px place, and glides to the left edge as the bar opens (and back). */
  width:42px;margin-left:calc(50% - 21px);padding:0;gap:0;justify-content:center;cursor:pointer;
  transition:width .38s cubic-bezier(.4,0,.2,1), margin-left .38s cubic-bezier(.4,0,.2,1), padding .3s ease, gap .3s ease,
             background .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.mh-app .topbar .gsearch:not([data-open="1"]) .bigbar .mh{width:24px;height:24px;transform:rotate(0deg) scale(1.04)}
.mh-app .topbar .gsearch:not([data-open="1"]) .bigbar .divider{width:0;height:0;opacity:0;transition-delay:0s}
.mh-app .topbar .gsearch:not([data-open="1"]) .bigbar input{
  flex:0 0 0;width:0;min-width:0;padding:0;opacity:0;transform:translateX(-10px);transition-delay:0s;
}
.mh-app .topbar .gsearch:not([data-open="1"]) .bigbar:hover{animation:gsHalo 2.2s ease-in-out infinite}
@keyframes gsHalo{0%,100%{box-shadow:0 0 0 0 rgba(47,107,87,.0),0 6px 16px -10px rgba(30,55,48,.35)}
                  50%{box-shadow:0 0 0 6px rgba(47,107,87,.12),0 6px 16px -10px rgba(30,55,48,.35)}}
.mh-app .topbar .gsearch:not([data-open="1"]) .search-pop{display:none}

/* ---- opening: one light sweep across the glass ---- */
.mh-app .topbar .gsearch .bigbar::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(var(--tg-rgb,255,255,255),calc(.75*var(--tg-k,1))),transparent);opacity:0;
}
.mh-app .topbar .gsearch[data-open="1"] .bigbar::after{animation:gsSweep .9s ease .18s 1}
@keyframes gsSweep{0%{left:-40%;opacity:0}20%{opacity:1}100%{left:110%;opacity:0}}
body.dark .mh-app .topbar .gsearch .bigbar::after{background:linear-gradient(100deg,transparent,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))),transparent)}

@media (prefers-reduced-motion:reduce){
  .mh-app .topbar .gsearch .bigbar, .mh-app .topbar .gsearch .bigbar *{transition:none !important;animation:none !important}
  .mh-app .topbar .gsearch .bigbar::after{display:none}
}

/* GSEARCH18 - owner: "hide the scroller in the search results menu - but the mouse wheel must still
   scroll up and down." Only the BAR is hidden: the list keeps overflow-y:auto, so the wheel,
   trackpad and the arrow keys (which move the highlight) all still scroll it. */
.mh-app .search-pop{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
.mh-app .search-pop::-webkit-scrollbar{width:0;height:0;display:none}

/* =====================================================================================
   TOPWX18b (19 Sep 2026) - THE TOPBAR'S OWN BUTTONS JOIN THE GLASS
   Owner: "apply the water style like you did on the topbar to the topbar icons - Planner,
   Dark/Light mode, notification and the user menu - the background only."
   So: the same small-control recipe the global search already wears (30%/10% white, blur 14,
   saturate 170, a bright inset top edge and a soft float shadow) - and NOTHING else. Each
   button keeps its own size, radius, hairline, glyph and badge exactly as they were; only
   what was painted behind them changes. Light mode only, like the rest of the trial: dark
   keeps its own fill.
   The four: #plannerBtn, #darkBtn, #bellBtn (all .icon-btn) and .tb-user, the account chip.
   ===================================================================================== */
body:not(.dark) .mh-app .topbar :is(.icon-btn,.tb-user){
  /* SECOND PASS (his check): the first version used the search box's 30%/10% fill, and over a
     white page a white fill reads as... white. He was right - "still white". These now take the
     BAR'S OWN recipe (42%/18%, blur 22, saturate 185, brightness 1.06) plus the bar's diagonal
     reflection, carried as a background layer so it clips to each button's own radius without a
     pseudo-element that could crop the bell's badge. The reflection is what makes glass read as
     glass when there is nothing colourful behind it. */
  background:
    linear-gradient(112deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 26%,rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))) 42%,rgba(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1))) 54%,rgba(255,255,255,0) 66%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.42*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.06);
  backdrop-filter:blur(22px) saturate(185%) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.45),
             inset 0 -1px 0 rgba(30,55,48,.07),0 6px 18px -10px rgba(30,55,48,.35);
}
/* hover was a solid cream fill - it becomes denser glass with a brighter sweep */
body:not(.dark) .mh-app .topbar :is(.icon-btn,.tb-user):hover{
  background:
    linear-gradient(112deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 24%,rgba(var(--tg-rgb,255,255,255),.88) 42%,rgba(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1))) 56%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.56*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))) 100%);
}
/* the bell's unread dot ringed itself in solid white to sit off the old opaque button;
   on glass that ring reads as a hole, so it takes the same glass instead. Colour of the
   dot itself is untouched - it is the one thing on these buttons that carries meaning. */
body:not(.dark) .mh-app .topbar .icon-btn .badge{border-color:rgba(255,255,255,.75)}