/* ---------- components/header/header.css ---------- */
/* ===== header =====
   Page title row: logo (the Home button) + name (UMAR over CONNECT, same height as the logo) on the left, the hint line on the right. */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;position:relative}   /* relative: the reminders drop list is placed against this row */
.tp{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 8px;min-width:0;flex:1 1 auto}   /* takes the free space, so the icon buttons sit together at the right */
.tp .hint{margin:0;min-height:0;font-size:12px}
.tl{--lg:32px;display:flex;align-items:center;gap:8px;min-width:0}   /* --lg = the logo's height; the name beside it matches it */
.brand{margin:0;min-width:0}
/* UMAR centred above CONNECT (green): two lines whose heights together equal the logo's height */
.brand .bt{display:flex;flex-direction:column;align-items:center;height:var(--lg);font-size:14px;font-weight:700;letter-spacing:.06em;line-height:calc(var(--lg) / 2);white-space:nowrap}
.brand .bt span:last-child{color:var(--err)}
#connTxt{transition:color .25s}#connTxt[data-s="ok"]{color:var(--accent)}#connTxt[data-s="busy"]{color:#e0a800}#connTxt[data-s="bad"]{color:var(--err)}   /* CONNECT: green = connected to the database, yellow = saving / not yet saved, red = not connected */
.brand .bt{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}   /* the whole name is one refresh button */
#connTxt.trying{animation:connFlick .28s steps(1,end) infinite}   /* CONNECT flickers while the database is being checked */
@keyframes connFlick{0%{opacity:1}50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){#connTxt.trying{animation:none;opacity:.5}}
.brand .bt:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (max-width:420px){.tl{--lg:30px}}
/* logo: just the picture now (the bell has its own button next to the notepad) */
.tl .logo{width:var(--lg);height:var(--lg);flex:none;border-radius:6px;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .15s}   /* the logo is the Home button */
.tl .logo:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.tl .logo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* round-cornered icon buttons on the right: dark/light switch, then the bell (reminders), then the notepad */
.hbtn{--lg:32px;order:1;flex:none;width:var(--lg);height:var(--lg);padding:0;margin-right:-4px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.12);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .15s}
.hbtn svg{width:calc(var(--lg) - 12px);height:calc(var(--lg) - 12px);display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hbtn:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.hbtn:active{transform:scale(.94)}
.hbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:420px){.hbtn{--lg:30px}}
/* smooth dark / light switch. Main way: the browser cross-fades a picture of the old page into the new one. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s;animation-timing-function:ease}
/* fallback for browsers without that (e.g. Firefox): the main colours glide for a moment */
:root.theme-fade,:root.theme-fade *,:root.theme-fade *::before,:root.theme-fade *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease!important}
@media (prefers-reduced-motion:reduce){:root.theme-fade,:root.theme-fade *,:root.theme-fade *::before,:root.theme-fade *::after{transition:none!important}}
/* ---- the clock (sits between the bell and the notepad): the same size as the icon buttons, a green colon and the minutes only (the hours are in the tap/hover text). A thin bar at the bottom fills as the seconds pass. ---- */
.hclk{--lg:32px;order:3;flex:none;position:relative;overflow:hidden;width:var(--lg);height:var(--lg);margin-right:-4px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.12);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;user-select:none}
.hclk .co{color:var(--accent);font-weight:800;margin-right:1px;text-shadow:0 0 6px var(--accent),0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);animation:clkBlink 1s steps(1,end) infinite}   /* the colon dims once a second */
.hclk .d{display:inline-block}
.hclk .d.f{animation:clkSlide .45s cubic-bezier(.2,.8,.2,1)}   /* a changed minute digit slides down into place */
.hclk .cbar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);opacity:.9;box-shadow:0 0 6px var(--accent);transition:width .3s linear}
/* the glow: a soft green halo around the clock that slowly breathes */
.hclk{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));animation:clkGlow 2.4s ease-in-out infinite}
@keyframes clkGlow{0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 5px 0 color-mix(in srgb,var(--accent) 22%,transparent)}50%{box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 13px 1px color-mix(in srgb,var(--accent) 50%,transparent)}}
@keyframes clkBlink{0%{opacity:1}50%{opacity:.2}}
@keyframes clkSlide{0%{transform:translateY(-70%);opacity:0}100%{transform:translateY(0);opacity:1}}
@media (max-width:420px){.hclk{--lg:30px}}
@media (prefers-reduced-motion:reduce){.hclk,.hclk .co,.hclk .d.f{animation:none}.hclk{box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 8px color-mix(in srgb,var(--accent) 32%,transparent)}.hclk .cbar{transition:none}}

/* ---- CONNECT glow: the whole word glows in and out. green = calm glow, yellow = fast glow while saving, red = slow dim glow when not connected ---- */
#connTxt{--sp:2.4s;display:inline-block;animation:connGlow var(--sp) ease-in-out infinite}
#connTxt[data-s="busy"]{--sp:.8s}
#connTxt[data-s="bad"]{--sp:3.6s;animation-name:connGlowDim}
@keyframes connGlow{0%,100%{opacity:.4;text-shadow:none}50%{opacity:1;text-shadow:0 0 9px currentColor}}
@keyframes connGlowDim{0%,100%{opacity:.25;text-shadow:none}50%{opacity:.8;text-shadow:0 0 7px currentColor}}
#connTxt.trying{animation:connFlick .28s steps(1,end) infinite}   /* the quick flicker while the database is being checked wins over the glow */
@media (prefers-reduced-motion:reduce){#connTxt,#connTxt[data-s="bad"]{animation:none;opacity:1}#connTxt.trying{animation:none;opacity:.5}}

/* ---- clock as the Print List button (desktop only; the script adds .hp and the .hpr face only while accounts wait to be printed) ----
   the printer face (printer + count) sits over the clock and flips in and out like the bell; it pauses while the pointer is on the clock */
.hclk.hp{cursor:pointer}
.hclk.hp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hclk .hpr{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:inherit;background:var(--card);color:var(--accent);font-size:12px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;opacity:0;transform:scaleY(0);animation:hcf 4s ease-in-out infinite}
.hclk .hpr svg{flex:none;display:block}
.hclk .hpr b{font-weight:800}
.hclk.hp:hover .hpr,.hclk.hp[aria-expanded="true"] .hpr{animation-play-state:paused}
@keyframes hcf{0%,40%{transform:scaleY(0);opacity:0}50%,90%{transform:scaleY(1);opacity:1}100%{transform:scaleY(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.hclk .hpr{animation:hcfr 6s steps(1,end) infinite;transform:none}@keyframes hcfr{0%,49%{opacity:0}50%,100%{opacity:1}}}