/* ============================================================================
   DTTASA Portal — responsive.css
   ----------------------------------------------------------------------------
   Centralised mobile-compatibility rules and shared interaction patterns.
   Loaded from every page via the standard `<link>` block alongside
   `utilities.css` and `style-shim.css`.

   Anything that should look the SAME across pages goes here:
     • Mobile breakpoints + touch-target sizing rules
     • Shared interaction patterns (chat rows, modal sheets, etc.)
     • Pointer/hover capability gates
     • Safe-area insets for iOS standalone PWA

   Anything PAGE-SPECIFIC stays in the page's own `css/<page>.css`.
   Anything PER-ELEMENT-INLINE that was extracted by tools/extract-inline-styles
   lives in `css/style-shim.css` (auto-generated, do not hand-edit).

   Rule of thumb: if the same selector would be useful on three or more pages,
   it belongs here.
   ============================================================================ */


/* ──────────────────────────────────────────────────────────────────────────
   Motion design tokens — enterprise animation vocabulary
   ──────────────────────────────────────────────────────────────────────────
   DTTASA's animation system is built on TWO curves only:
     • --ease-out    : the canonical entrance/exit curve. Decelerates into
                       its final position. Used for every UI entrance,
                       hover lift, sidebar slide, modal open, section
                       transition. If you're animating motion into view,
                       use this.
     • --ease-pulse  : the canonical breathing curve. Symmetric, smoother
                       than browser `ease-in-out` at the same endpoints.
                       Used for every infinite pulse, glow, attention
                       indicator, splash orb drift.

   Duration tokens are reference values. Existing tuned durations may stay
   inline; new code should prefer these tokens. Pulse durations should
   inherit --dur-pulse so we have one place to slow them all down.

   These tokens are declared globally on :root so every page (and every
   per-page css/<page>.css) inherits them. Per-page CSS may override the
   pulse duration locally if a specific surface needs faster/slower
   breathing, but the easing curves should NEVER be overridden — one
   curve vocabulary across the whole portal. */
:root{
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-pulse:  cubic-bezier(.4,0,.6,1);
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    480ms;
  --dur-pulse:   2400ms;
}

/* ──────────────────────────────────────────────────────────────────────────
   Accessibility — prefers-reduced-motion (WCAG 2.3.3 / vestibular safety)
   ──────────────────────────────────────────────────────────────────────────
   GLOBAL, canonical rule. responsive.css loads on 61/62 pages (incl. the
   public applicant forms that don't load shared-ui.css), so this is the one
   place that guarantees the WHOLE portal honours the OS "Reduce Motion"
   setting. Near-zero (0.01ms, not 0) keeps animationend/transitionend
   listeners + GSAP-adjacent flows firing — so behaviour is preserved, only
   the motion is removed. iteration-count:1 stops the ~380 infinite pulses/
   shimmers. Decorative motion → static; nothing functional breaks. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Battery + perf — pause every running animation while tab is hidden
   ──────────────────────────────────────────────────────────────────────────
   When the user switches tab or backgrounds the app on iOS, infinite pulses
   keep running and burn CPU/GPU/battery for no benefit. We toggle this class
   on <html> via the `visibilitychange` listener wired in `js/early-init.js`
   (loaded on every page). The * selector is only paid for when the class is
   present — on a visible tab the rule never matches. */
html.dttasa-tab-hidden *,
html.dttasa-tab-hidden *::before,
html.dttasa-tab-hidden *::after {
  animation-play-state: paused !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   audit A1 — Re-animation jank guard.
   ──────────────────────────────────────────────────────────────────────────
   Board lists render items with a staggered entry animation applied inline
   (`animation:wgIn|pIn|scIn .3s … ${i*.05}s both`). Because the list is rebuilt
   via innerHTML inside every onSnapshot callback, those entry animations REPLAY
   on each data change — the whole list flickers/re-staggers. There is no shared
   render layer to gate, so once the page has settled we neutralise ONLY those
   staggered list-item entry keyframes (a stylesheet `!important` overrides the
   non-important inline `animation`). Newly-arriving rows then just appear without
   the stagger replay. Scope is deliberately narrow: modal/overlay entrances
   (fadeIn/slideIn/mIn) and every infinite pulse (blink/obActionPulse/…) are
   untouched, and the first paint (before `anims-settled`) animates normally.
   The class is added ~1.2s after load by js/early-init.js. */
body.dttasa-anims-settled [style*="animation:wgIn"],
body.dttasa-anims-settled [style*="animation: wgIn"],
body.dttasa-anims-settled [style*="animation:pIn"],
body.dttasa-anims-settled [style*="animation: pIn"],
body.dttasa-anims-settled [style*="animation:scIn"],
body.dttasa-anims-settled [style*="animation: scIn"] {
  animation: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Navigation-trail chip (audit R4) — "‹ Back to «prior page»"
   ──────────────────────────────────────────────────────────────────────────
   Injected into .hdr-left by js/nav-trail.js when the user arrived from a
   known non-dashboard same-origin page. Complements the Home button; glass/
   token styling to match .hdr-back-btn. Label hides at ≤640px (icon-only),
   matching the portal's existing header-compaction convention. */
.nav-trail-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:8px;
  background:var(--panel); border:1px solid var(--border);
  font:inherit; font-size:12px; color:var(--t3); cursor:pointer;
  white-space:nowrap; max-width:220px;
  transition:background .25s var(--ease-out,ease), border-color .25s, color .25s;
}
.nav-trail-chip:hover{ background:var(--panel2); border-color:var(--bord2,var(--border)); color:var(--text); }
.nav-trail-chip span{ overflow:hidden; text-overflow:ellipsis; }
.nav-trail-chip i{ font-size:11px; opacity:.8; }
@media (max-width:640px){ .nav-trail-chip span{ display:none; } .nav-trail-chip{ max-width:none; } }

/* ──────────────────────────────────────────────────────────────────────────
   Keyboard focus ring — accessibility + design-system parity
   ──────────────────────────────────────────────────────────────────────────
   Browser default focus rings (blue Chrome outline) clash with the gold/glass
   visual language. Use `:focus-visible` so the ring appears ONLY when the
   user is keyboard-navigating, never on mouse clicks. The outline-offset +
   transition give the same gold-glow feel as hover, animated in 180ms.

   `outline` is used (not `box-shadow`) so it never clips at container edges
   and never shifts layout. Applies to every interactive surface used by the
   portal — buttons, nav items, form fields, anything tabbable. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.mi:focus-visible,
.gi:focus-visible,
.gi-ta:focus-visible,
.ig:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold, #f0c832);
  outline-offset: 2px;
  transition: outline-offset 180ms var(--ease-out, cubic-bezier(.16,1,.3,1)),
              outline-color  180ms var(--ease-out, cubic-bezier(.16,1,.3,1));
}

/* Remove the legacy non-visible focus ring so mouse clicks don't trigger it. */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
  outline: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   View Transition API — cross-page navigation cross-fade
   ──────────────────────────────────────────────────────────────────────────
   `js/early-init.js` `_navWithTransition` wraps every `dttasaNav.go/home/
   pageHome/back` call with `document.startViewTransition` on supporting
   browsers (Chrome 111+, iOS Safari 18+). These pseudo-elements style the
   outgoing/incoming root snapshots — same easing token used throughout the
   portal so cross-page nav feels native instead of "flash to white".

   Unsupported browsers skip the wrapper and behave identically to before
   (hard navigation) — graceful degradation. */
/* R5 (2026-05-30) — MODERN cross-document View Transitions. The single
   line below opts every same-origin full-page navigation (links, raw
   location.href, back/forward) into a native browser cross-fade — the
   Vercel/Linear page-fade aesthetic, NO JS wrapper. responsive.css loads
   in <head> on 61/62 pages, so the opt-in is present on both the outgoing
   and incoming document (required for cross-doc VT). Unsupported browsers
   (Firefox, Safari <18.2) ignore this at-rule and hard-cut exactly as
   before — pure progressive enhancement. */
@view-transition { navigation: auto; }

@supports (view-transition-name: root) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: var(--ease-out, cubic-bezier(.16,1,.3,1));
  }
}

/* Reduced-motion: the global `*` reduced-motion rule does NOT match the
   ::view-transition-* pseudo-elements (they're outside the document tree),
   so the page-fade must be disabled explicitly here for users who request
   reduced motion (WCAG 2.3.3 / vestibular safety). Navigation still works —
   it just hard-cuts instead of cross-fading. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Skel → content arrival fade-up via @starting-style
   ──────────────────────────────────────────────────────────────────────────
   When async data lands and JS replaces a skeleton placeholder with the real
   element (typically activity-stream rows, applicant cards, recruitment
   pipeline tiles, EOM cards, broadcast list items, etc.) the new node
   should not snap in — it should fade up to feel "settled".

   `@starting-style` defines the initial-render values for a freshly inserted
   element. The browser then transitions to the rule's normal values using
   the listed `transition` properties. Pure CSS — fires automatically the
   moment the element enters the DOM. No JS observers, no MutationObserver,
   no per-callsite changes.

   Support: Chrome 117+ (Sept 2023), Firefox 129+ (Aug 2024), Safari 17.5+
   (May 2024). Older browsers ignore the rule and elements appear instantly
   — graceful degradation, no broken state.

   Convention: any new content surface that should arrive-fade-up adds the
   `.dttasa-arrive` class on its child elements (or use one of the named
   selectors below for surfaces already in production). */
@supports (transition-behavior: allow-discrete) {
  .ab-item,
  .dttasa-arrive {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 240ms var(--ease-out, cubic-bezier(.16,1,.3,1)),
                transform 240ms var(--ease-out, cubic-bezier(.16,1,.3,1));
  }
  @starting-style {
    .ab-item,
    .dttasa-arrive {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   Touch-target minimums
   ──────────────────────────────────────────────────────────────────────────
   CLAUDE.md mandate: every tappable element must have a ≥44×44 hit area
   on touch devices. Use `.touch-target` as a wrapper class on small icons
   that don't naturally meet that size — invisible padding extends the tap
   zone without growing the visible footprint. */
.touch-target{
  min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
}


/* ──────────────────────────────────────────────────────────────────────────
   Chat message row, delete control, and read-receipt meta line
   ──────────────────────────────────────────────────────────────────────────
   Used by the dashboard chat on index.html. Defined here (not in
   `css/index.css`) so the same look applies to any other future page that
   reuses these classes (e.g. an HR-Ops chat side-panel, a comms inbox). */
.chat-msg-row{padding:3px 0;}
.chat-msg-meta{
  display:flex;align-items:center;gap:4px;
  font-size:9px;color:var(--t3);margin-top:3px;
}
.chat-msg-meta .fa-check,
.chat-msg-meta .fa-check-double{font-size:10px;}
.chat-msg-del{
  /* Visually small (icon ~11px) but the button itself is a 44×44 touch
     target via padding — meets the touch-target rule above. The
     transparent excess area is invisible. */
  appearance:none;background:transparent;border:0;cursor:pointer;
  color:var(--red);opacity:.55;
  width:44px;height:44px;padding:0;margin:-12px -10px -12px 2px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;transition:opacity .15s,color .15s;
}
.chat-msg-del:hover,.chat-msg-del:focus{opacity:1;color:var(--red);outline:none;}

/* Desktop with a real pointer: keep the original "appears on hover" feel so
   the chat doesn't look cluttered. Mobile / touch always shows it. */
@media (hover:hover) and (pointer:fine){
  .chat-msg-del{opacity:0;transition:opacity .15s;}
  .chat-msg-row:hover .chat-msg-del{opacity:.7;}
  .chat-msg-row:hover .chat-msg-del:hover{opacity:1;}
}


/* ──────────────────────────────────────────────────────────────────────────
   Safe-area insets — iOS standalone PWA
   ──────────────────────────────────────────────────────────────────────────
   Pages can opt-in by adding `.safe-bottom` to a sticky footer or
   `.safe-top` to a sticky header. Avoids the iOS home-indicator overlap. */
.safe-bottom{padding-bottom:max(12px,env(safe-area-inset-bottom));}
.safe-top{padding-top:max(0px,env(safe-area-inset-top));}


/* ──────────────────────────────────────────────────────────────────────────
   Mobile readability — minimum legible font sizes on phones
   ──────────────────────────────────────────────────────────────────────────
   Users reported text was straining their eyes on mobile (2026-05-18).
   The CLAUDE.md tokens (13/14/15/18 px) are reasonable on desktop but feel
   tight on a 320–540 px phone screen. We bump common small-text patterns
   up by 1–2 px below the 540 px breakpoint, and force inputs to 16 px so
   iOS Safari stops auto-zooming when a field is focused.

   Targeted bumps only — we don't blanket-resize the document, which would
   knock card layouts off their grids. Selectors aim at the small-text
   classes used across pages.

   Cascade: these rules carry `!important` because the inline shim classes
   (`.s-…`) generated by `tools/extract-inline-styles.mjs` ALSO carry
   `!important` (they had to, to preserve the original inline-style
   priority). Without `!important` here the per-element shim wins and our
   mobile-readability bumps silently fail. */

@media (max-width:540px){
  /* Base body text — bump conservatively. */
  body{font-size:14px !important;}

  /* Form inputs — 16 px is the iOS Safari threshold below which Safari
     auto-zooms when the field receives focus. That zoom is jarring on a
     PWA where the viewport is meta-locked. 16 px on textareas + inputs
     stops it cold. */
  input, textarea, select, button{font-size:16px !important;}

  /* Common small-text utility / pattern classes used across pages. */
  .u-fs9-13, .u-fs10, .u-fs11{font-size:13px !important;}
  .u-fs12, .u-fs13{font-size:14px !important;}

  /* Labels, captions, helper text. */
  label, .label, .mlbl, .form-label, .field-label,
  .form-hint, .form-help, .helper-text, .helper, small{font-size:13px !important;}

  /* Table cells and key/value pair rows. */
  td, th, .dtbl td, .dtbl th, .cell, .row-meta{font-size:13px !important;}

  /* Badges and pill chips can stay slightly smaller but not tiny. */
  .pip, .sbadge, .pill, .chip, .tag{font-size:12px !important;}

  /* Section / panel headings. */
  .sec-head, .panel-title, .card-title{font-size:16px !important;}
  h1{font-size:22px !important;}
  h2{font-size:19px !important;}
  h3{font-size:17px !important;}
  h4, h5, h6{font-size:15px !important;}

  /* Chat message bubbles + meta line (centralised above) — keep readable. */
  .chat-msg-meta{font-size:11px !important;}
  .chat-msg-meta .fa-check,
  .chat-msg-meta .fa-check-double{font-size:12px !important;}
}

@media (max-width:400px){
  /* Slightly more aggressive on very small phones. */
  body{font-size:14.5px !important;}
  h1{font-size:21px !important;}
  h2{font-size:18px !important;}
}


/* ──────────────────────────────────────────────────────────────────────────
   Apply Credit to Cell — published shift action (SA / Head of HR only)
   ──────────────────────────────────────────────────────────────────────────
   Small gold "hand holding dollar" icon in the corner of every published
   timed-shift cell. Opens a modal that draws N hours from the user's
   banked credit and shortens the published shift by N hours. */
.cell-apply-credit-btn{
  position:absolute;top:4px;right:4px;z-index:3;
  width:22px;height:22px;border-radius:6px;
  appearance:none;cursor:pointer;
  background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.35);
  color:var(--gold,#f0c832);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;transition:.15s;opacity:.0;
}
.alloc-cell{position:relative;}
.alloc-cell:hover .cell-apply-credit-btn,
.cell-apply-credit-btn:focus{opacity:1;}
.cell-apply-credit-btn:hover{background:rgba(212,175,55,.28);border-color:var(--gold,#f0c832);}
@media (hover:none){
  /* Touch devices — always-visible at lower opacity so admins can tap. */
  .cell-apply-credit-btn{opacity:.85;width:26px;height:26px;font-size:12px;}
}

.cellc-modal-overlay{
  position:fixed;inset:0;z-index:99999;
  background:rgba(10,14,8,.85);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  font-family:'DM Sans',sans-serif;
}
.cellc-modal-card{
  background:#172213;border:1px solid var(--gold,#f0c832);border-radius:14px;
  max-width:540px;width:100%;color:var(--text,#f2f7ee);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.cellc-modal-head{padding:22px 24px 14px;border-bottom:1px solid var(--border,rgba(255,255,255,.21));}
.cellc-modal-title{font-family:'Cinzel',serif;font-size:15px;letter-spacing:2.5px;color:var(--gold,#f0c832);margin-bottom:8px;}
.cellc-modal-sub{font-size:13px;color:var(--t2,rgba(242,247,238,.88));line-height:1.55;}
.cellc-modal-body{padding:18px 24px;}
.cellc-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;}
.cellc-row span:first-child{color:var(--t3,rgba(242,247,238,.62));}
.cellc-mono{font-family:'IBM Plex Mono',monospace;color:var(--text,#f2f7ee);}
.cellc-credit{color:var(--green,#4cd657);font-weight:700;}
.cellc-dim{color:var(--t3,rgba(242,247,238,.62));font-weight:400;}
.cellc-input-row{margin:14px 0 8px;display:flex;flex-direction:column;gap:6px;}
.cellc-input-row label{font-size:12px;color:var(--t2,rgba(242,247,238,.88));font-weight:600;}
.cellc-input-row input{
  appearance:none;background:rgba(255,255,255,.08);border:1px solid var(--border,rgba(255,255,255,.21));
  border-radius:8px;padding:10px 12px;font-size:16px;color:var(--text,#f2f7ee);
  font-family:'IBM Plex Mono',monospace;
}
.cellc-input-row input:focus{outline:none;border-color:var(--gold,#f0c832);background:rgba(212,175,55,.08);}
.cellc-preview{
  background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.3);
  border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.5;
  color:var(--text,#f2f7ee);margin-bottom:14px;
}
.cellc-label{display:block;font-size:12px;color:var(--t2,rgba(242,247,238,.88));font-weight:600;margin-bottom:6px;}
.cellc-modal-body textarea{
  width:100%;background:rgba(255,255,255,.06);border:1px solid var(--border,rgba(255,255,255,.21));
  border-radius:8px;padding:10px 12px;font-size:14px;color:var(--text,#f2f7ee);
  font-family:'DM Sans',sans-serif;resize:vertical;min-height:60px;
  box-sizing:border-box;
}
.cellc-modal-body textarea:focus{outline:none;border-color:var(--gold,#f0c832);}
.cellc-err{color:var(--red,#ff4848);font-size:12px;margin-top:8px;min-height:18px;}
.cellc-modal-actions{
  padding:14px 24px 20px;border-top:1px solid var(--border,rgba(255,255,255,.21));
  display:flex;gap:12px;justify-content:flex-end;
}
.cellc-modal-actions .btn{min-width:120px;}

/* ──────────────────────────────────────────────────────────────────────────
   Required-field error shake — reusable highlight for inputs/textareas
   that fail validation. The shake makes the warning unmissable; the red
   border + tinted background is applied inline so it stays visible after
   the animation ends (until the user starts typing again). */
.field-error-shake{
  animation: dttasa-shake-x 0.45s cubic-bezier(.36,.07,.19,.97);
}
@keyframes dttasa-shake-x {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* Cell-credit modal error text — keep loud + bold so the warning isn't
   easily missed under the textarea. */
.cellc-err{font-weight:600;}

/* ──────────────────────────────────────────────────────────────────────────
   HR-view back button — visible only when public referee/HR-detail forms
   open in Capacitor PWA (window.open(_blank) routes to the same view in
   iOS WebView, leaving the HR user stranded without a navigation chrome).
   The button is positioned top-left, gold-on-dark, easy to thumb-tap. */
.rf-hr-back-btn{
  position:fixed;top:max(16px,env(safe-area-inset-top));left:16px;z-index:9999;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:10px;
  background:rgba(212,175,55,.18);color:var(--gold,#f0c832);
  text-decoration:none;font-weight:700;font-size:13px;
  border:1px solid rgba(212,175,55,.4);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  font-family:'DM Sans',sans-serif;
  transition:.15s;
}
.rf-hr-back-btn:hover,.rf-hr-back-btn:focus{
  background:rgba(212,175,55,.32);
  outline:none;
  transform:translateY(-1px);
}
@media (max-width:540px){
  .rf-hr-back-btn{padding:9px 12px;font-size:12px;}
  .rf-hr-back-btn span{display:none;}
}

/* ──────────────────────────────────────────────────────────────────────────
   HR-decision radio rows — applicant-ref-details-form
   The labels have class `.s-rpubrhw` (hashed from Phase 4 extractor).
   When a radio inside is checked, highlight the parent label so the user
   has clear visual feedback for their selection. Uses :has() — supported
   on all modern Chromium / Safari / Firefox versions on the target users'
   devices (iOS Safari ≥ 15.4). */
label.s-rpubrhw:has(input[type="radio"]:checked){
  background:rgba(212,175,55,.10) !important;
  border-color:rgba(212,175,55,.55) !important;
  box-shadow:0 0 0 2px rgba(212,175,55,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
label.s-rpubrhw:has(input[type="radio"]:checked) strong{
  text-shadow:0 0 8px rgba(212,175,55,.25);
}
label.s-rpubrhw:has(input[type="radio"][value="approve"]:checked){
  background:rgba(34,197,94,.12) !important;
  border-color:rgba(34,197,94,.5) !important;
  box-shadow:0 0 0 2px rgba(34,197,94,.18) !important;
}
label.s-rpubrhw:has(input[type="radio"][value="reject"]:checked){
  background:rgba(239,68,68,.12) !important;
  border-color:rgba(239,68,68,.5) !important;
  box-shadow:0 0 0 2px rgba(239,68,68,.18) !important;
}
label.s-rpubrhw:has(input[type="radio"][value="more-info"]:checked){
  background:rgba(245,158,11,.12) !important;
  border-color:rgba(245,158,11,.5) !important;
  box-shadow:0 0 0 2px rgba(245,158,11,.18) !important;
}
label.s-rpubrhw{transition:background .2s, border-color .2s, box-shadow .2s;}

/* "Credit already applied" status pill — replaces the Apply Credit button
   on a draft-week row once a credit application is on file for this week.
   Non-interactive (no button), green-tinted to communicate "done". */
.rec-applied-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;
  background:rgba(76,214,87,.10);
  border:1px solid rgba(76,214,87,.32);
  color:var(--green,#4cd657);
  padding:5px 10px;border-radius:6px;
}
.rec-applied-status i{font-size:11px;}
@media (max-width:540px){
  .cellc-modal-card{max-width:calc(100vw - 32px);}
  .cellc-modal-actions{flex-direction:column-reverse;}
  .cellc-modal-actions .btn{width:100%;}
}

/* ════════════════════════════════════════════════════════════════
   Centralised mobile button sizing.
   ════════════════════════════════════════════════════════════════
   Per-page CSS had a habit of bricking every action button to
   width:100% + min-height:44px on small viewports, which produced
   the "really big buttons" feel — three actions per card became
   three full-width 50px-tall blocks.

   Standardise: on ≤640px, action buttons flex-fit their content,
   wrap to a second line only when they overflow, and have a
   comfortable but not oversized min-height. Pages can still force
   width:100% on specific containers (modal CTAs, hero buttons)
   where it's the right call.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  /* Default touch sizing — 38px clears Apple HIG 44pt minimum once
     padding is added. Use !important sparingly: only on the size to
     beat per-page 44px overrides that drove the oversized feel.
     Padding + font-size also tighten because the base portal-wide
     `.btn` is a chunky pill (padding:13px 26px; letter-spacing:2px)
     that reads too large on iPhone. */
  body .btn:not(.btn-xs):not(.btn-sm){
    min-height:38px;
    padding:8px 16px!important;
    font-size:11px!important;
    letter-spacing:1.2px!important;
  }
  body .btn-sm{
    min-height:32px;
    padding:6px 12px!important;
    font-size:10.5px!important;
    letter-spacing:.9px!important;
  }
  body .btn-xs{
    min-height:26px;
    padding:4px 9px!important;
    font-size:10px!important;
    letter-spacing:.6px!important;
  }
  /* Section header utility classes use `.sec-lbl` for the title and a
     hashed flex-row container. Tighten the title font on mobile so the
     "ADD NOTE" gold button doesn't look bigger than the heading. */
  body .sec-lbl{font-size:13px;letter-spacing:1.2px;}

  /* Generic action-row pattern across the portal: any flex/grid row
     of buttons that previously forced full-width stacking gets a
     side-by-side flex-wrap behaviour instead. Buttons grow but never
     stretch to the full row alone. */
  body .card-actions:not(.btn-full-row),
  body .action-row:not(.btn-full-row),
  body .row-actions:not(.btn-full-row),
  body .actions:not(.btn-full-row),
  body .action-bar:not(.btn-full-row){
    display:flex!important;
    flex-wrap:wrap;
    gap:6px;
  }
  body .card-actions:not(.btn-full-row) .btn,
  body .action-row:not(.btn-full-row)  .btn,
  body .row-actions:not(.btn-full-row) .btn,
  body .actions:not(.btn-full-row)     .btn{
    flex:1 1 auto;
    min-width:fit-content;
    width:auto;
    justify-content:center;
  }
  /* Rota-style action bars: don't let buttons grow to fill the row —
     they look oversized on mobile when only 1–2 buttons are visible.
     Keep content-width so the "Publish" / "Save Draft" pills sit at
     their natural compact size. */
  body .action-bar:not(.btn-full-row) .btn{
    flex:0 1 auto;
    min-width:fit-content;
    width:auto;
    justify-content:center;
  }
}

/* ════════════════════════════════════════════════════════════════
   Centralised notification-panel overflow guard.
   Header bells across the portal (#notif-panel on IT board, .sys-
   notif-panel on dashboards, etc.) are absolute-positioned to the
   bell button itself. The bell typically sits mid-header on mobile,
   so a 310-320px panel extending in either direction overflows the
   viewport — half the panel is off-screen and the user can't read
   it. Switch to `position:fixed` on small viewports so the panel
   docks to the viewport edge with a viewport-wide max-width.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  body .notif-panel,
  body #notif-panel,
  body .sys-notif-panel,
  body #sys-notif-panel{
    position:fixed!important;
    top:calc(var(--hdh, 66px) + 8px)!important;
    right:10px!important;
    left:10px!important;
    width:auto!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100vh - var(--hdh, 66px) - 24px)!important;
    overflow-y:auto;
  }
}

/* ════════════════════════════════════════════════════════════════
   PORTAL-WIDE SCROLLBAR — wider, contrasting, never-disappearing
   ────────────────────────────────────────────────────────────────
   Default macOS / iOS scrollbars are 5–8px wide and auto-hide, which
   made the page scrollbar nearly invisible and hard to grab. These
   rules apply to every page that uses the document scroll plus any
   overflow:auto container that doesn't explicitly opt out via
   `scrollbar-width: none`. Pages that hide scrollbars on purpose
   (eg. .ac-nav, hidden chat lists) keep their override because
   inline `scrollbar-width: none` has higher specificity than these
   defaults.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* Reusable tokens so individual pages can theme via these vars */
  --diag-scroll-w:        12px;
  --scroll-thumb-bg:      rgba(240,200,50,0.32);
  --scroll-thumb-hover:   rgba(240,200,50,0.55);
  --scroll-thumb-active:  rgba(240,200,50,0.78);
  --scroll-track-bg:      rgba(0,0,0,0.20);
}
/* Firefox + future-standard */
*{
  scrollbar-width: auto;
  scrollbar-color: var(--scroll-thumb-bg) var(--scroll-track-bg);
}
/* Honour explicit hide-the-scrollbar opt-outs */
[style*="scrollbar-width: none"],
[style*="scrollbar-width:none"]{ scrollbar-width: none; }

/* WebKit (Chrome / Safari / Edge / Capacitor WKWebView) */
*::-webkit-scrollbar{
  width:  var(--diag-scroll-w);
  height: var(--diag-scroll-w);
}
*::-webkit-scrollbar-track{
  background: var(--scroll-track-bg);
  border-radius: 12px;
}
*::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb-bg);
  border-radius: 12px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .25s ease;
  min-height: 40px;     /* prevents a single tiny page from giving a 12px-tall thumb */
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
/* Touch / mobile — slightly narrower so it doesn't cover content but still grabbable */
@media (max-width: 540px){
  :root{ --diag-scroll-w: 10px; }
}
@media (hover: none){
  /* On touch devices the thumb defaults higher-contrast since hover never fires */
  *::-webkit-scrollbar-thumb{ background: var(--scroll-thumb-hover); background-clip: padding-box; }
}

/* ════════════════════════════════════════════════════════════════
   MODAL CLOSE (X) BUTTON — enterprise 44×44 touch target
   ────────────────────────────────────────────────────────────────
   Page-level CSS sized close buttons at 30/32/34px which is below
   Apple/Material's 44px minimum target. The result: users often
   missed the X and clicked the backdrop, or the press had no
   visible feedback. These rules apply portal-wide AND override
   smaller per-page rules via :not() / higher specificity where
   needed (the `body &` prefix wins the cascade for stand-alone
   class selectors of equal weight).
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   X-button overlap protection — every modal title / sub-title in
   the portal must clear the absolute-positioned close button on
   the top-right (44px wide, 14px from the right edge → reserve
   66px clear). Without this rule the title text extends under the
   X and clicks on the title's right edge can register on the X.
   Applies portal-wide so any new modal automatically gets the
   protection. Universal — no per-page exceptions.
   ════════════════════════════════════════════════════════════════ */
/* 2026-05-28 — bumped reserve from 72px → 88px. The X is 44px wide at
   right:16px → occupies 60px of right-edge real estate. 72px gave only
   12px of breathing room; on the coordinator volunteer drawer the modal
   title shows the user's full name with a leading icon and that 12px gap
   wasn't enough. 88px gives a comfortable 28px buffer that visibly clears
   on every modal in the portal. Mobile bumps to 76px (X grows to 46×46
   per the rule at line 637 → 62px of edge real estate). */
body .modal-box .modal-title,
body .modal-box .modal-sub,
body .modal-box .mhr-modal-title,
body .modal-box .mhr-modal-sub,
body .modal-box .pres-modal-title,
body .modal-box .sd-modal-title,
body .modal-box .hpr-modal-title,
body .modal-box .ov-modal-title,
body .modal-box [data-modal-title],
body .modal-overlay .modal-title,
body .modal-overlay .modal-sub,
body .modal-box .modal-hd,
body .modal-box .drawer-title,
body .modal-box .drawer-sub {
  padding-right: 88px;
  box-sizing: border-box;
}
/* Defensive body-content protection — any first-child inside the modal
   bodies that might extend a hero / banner up to where the X sits gets
   the same right-edge reserve. Coordinator + VMEM detail drawers have
   hero blocks with names + avatars + status pips that can otherwise
   crowd the X on narrow widths. */
body #coord-vd-body, body #coord-td-body, body #vm-td-body,
body #coord-vd-body > .vd-hero, body #coord-vd-body > .vd-hero:first-child,
body .modal-box .vd-hero:first-child,
body .modal-box [class*="-hero"]:first-child {
  box-sizing: border-box;
}
body .modal-box .vd-hero:first-child,
body .modal-box [class*="-hero"]:first-child {
  padding-right: 72px;
}
/* X close button — explicit z-index so any scrolling body content or
   absolutely-positioned hero pip can never overlap on top of it. */
body .modal-close,
body .mhr-modal-close,
body .pres-modal-close,
body .sd-close,
body .hpr-close,
body .ov-close,
body .diag-detail-modal-close,
body .x-close,
body .modal-x,
body [data-modal-close],
body .btn-close,
body .close-btn {
  z-index: 6;
}
/* Body content tables — ensure the first row in the training-detail modal
   never sits flush against the title row where the X lives. */
body #coord-td-body table.coord-td-table,
body #vm-td-body table.coord-td-table {
  margin-top: 4px;
}
@media (max-width: 540px) {
  body .modal-box .modal-title,
  body .modal-box .modal-sub,
  body .modal-box .mhr-modal-title,
  body .modal-box .mhr-modal-sub,
  body .modal-box .pres-modal-title,
  body .modal-box .sd-modal-title,
  body .modal-box .hpr-modal-title,
  body .modal-box .ov-modal-title,
  body .modal-box [data-modal-title],
  body .modal-overlay .modal-title,
  body .modal-overlay .modal-sub,
  body .modal-box .modal-hd,
  body .modal-box .drawer-title,
  body .modal-box .drawer-sub {
    padding-right: 76px;
  }
  body .modal-box .vd-hero:first-child,
  body .modal-box [class*="-hero"]:first-child {
    padding-right: 60px;
  }
}

/* Position DEFAULT — low specificity (0,1,0), deliberately NOT `body`-prefixed.
   Read-audit 2026-05-30: `position: relative` previously lived INSIDE the
   high-specificity `body .modal-close{}` block below (0,1,1) and overrode every
   page's own `.modal-close{position:absolute;top;right}` (0,1,0), so corner-X
   buttons across the whole portal dropped into normal flow and collided with the
   modal title (VMEM, comms, exec, hr-ops, leave, ops-dashboard, sa-control,
   it-board, grant, sggrant, all-org-doc, …). Declaring the default here at
   (0,1,0) lets each page's own absolute placement win the specificity tie (page
   CSS loads after responsive.css), fixing every corner modal at once — while
   flex-header X buttons that set NO page position (safeguarding `.modal-hdr`,
   volunteer-board welfare drawer) keep `relative` and stay correct in their flex
   row. The ::after touch-pad has a positioned parent either way. */
.modal-close,
.mhr-modal-close,
.pres-modal-close,
.sd-close,
.hpr-close,
.ov-close,
.diag-detail-modal-close,
.x-close,
.modal-x,
[data-modal-close],
.btn-close,
.close-btn {
  position: relative;
}

body .modal-close,
body .mhr-modal-close,
body .pres-modal-close,
body .sd-close,
body .hpr-close,
body .ov-close,
body .diag-detail-modal-close,
body .x-close,
body .modal-x,
body [data-modal-close],
body .btn-close,
body .close-btn{
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .12s ease, border-color .2s ease;
}
/* Invisible touch-pad that extends the hit-box another 4px each side so
   tapping near (not on) the X still registers. Doesn't expand visible
   chrome, only the hit area. */
body .modal-close::after,
body .mhr-modal-close::after,
body .pres-modal-close::after,
body .sd-close::after,
body .hpr-close::after,
body .ov-close::after,
body .diag-detail-modal-close::after,
body .x-close::after,
body .modal-x::after,
body [data-modal-close]::after,
body .btn-close::after,
body .close-btn::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
}
/* Press feedback so the user knows the tap landed even on slow networks */
body .modal-close:active,
body .mhr-modal-close:active,
body .pres-modal-close:active,
body .sd-close:active,
body .hpr-close:active,
body .ov-close:active,
body .diag-detail-modal-close:active,
body .x-close:active,
body .modal-x:active,
body [data-modal-close]:active,
body .btn-close:active,
body .close-btn:active{
  transform: scale(0.92);
  background: rgba(255,72,72,0.18);
  color: #ff5773;
}
/* Hover state on devices that have one */
@media (hover: hover){
  body .modal-close:hover,
  body .mhr-modal-close:hover,
  body .pres-modal-close:hover,
  body .sd-close:hover,
  body .hpr-close:hover,
  body .ov-close:hover,
  body .diag-detail-modal-close:hover,
  body .x-close:hover,
  body .modal-x:hover,
  body [data-modal-close]:hover,
  body .btn-close:hover,
  body .close-btn:hover{
    background: rgba(255,72,72,0.14);
    color: #ff7088;
    border-color: rgba(255,72,72,0.45);
  }
}
/* Mobile — slightly bigger so it's unmissable on small screens */
@media (max-width: 540px){
  body .modal-close,
  body .mhr-modal-close,
  body .pres-modal-close,
  body .sd-close,
  body .hpr-close,
  body .ov-close,
  body .diag-detail-modal-close,
  body .x-close,
  body .modal-x,
  body [data-modal-close],
  body .btn-close,
  body .close-btn{
    min-width: 46px;
    min-height: 46px;
    width: 46px;
    height: 46px;
    font-size: 19px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   WEATHER CHIP — shared component for index + dept dashboard headers.
   Source: js/weather-chip.js (calls getWeather Cloud Function).
   ──────────────────────────────────────────────────────────────────────── */
.weather-chip-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.wch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 11px;
  background: rgba(212,175,55,.08);
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 999px;
  color: #f0c832;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .25s cubic-bezier(.16,1,.3,1), border-color .25s, transform .25s;
  -webkit-tap-highlight-color: transparent;
}
.wch-pill:hover {
  background: rgba(212,175,55,.16);
  border-color: rgba(212,175,55,.55);
  transform: translateY(-1px);
}
.wch-pill i { font-size: 13px; }
.wch-temp { line-height: 1; }
.wch-pill-error {
  background: rgba(255,72,72,.08);
  border-color: rgba(255,72,72,.3);
  color: #ff4848;
  cursor: default;
}
.wch-pill-loading {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
  color: rgba(242,247,238,.6);
  cursor: default;
}
.wch-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  max-width: 280px;
  background: #0d150c;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 20px 48px rgba(0,0,0,.55);
  z-index: 1200;
  display: none;
  animation: wchPopIn .22s cubic-bezier(.16,1,.3,1);
}
.wch-pop.open { display: block; }
@keyframes wchPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.wch-pop-loc {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(240,200,50,.85);
  margin-bottom: 10px;
}
.wch-pop-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 11px;
  margin-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.wch-pop-icon {
  font-size: 28px;
  color: #f0c832;
  width: 32px; text-align: center;
}
.wch-pop-temp {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #f2f7ee;
  line-height: 1;
}
.wch-pop-cond {
  font-size: 12px;
  color: rgba(242,247,238,.7);
  margin-top: 4px;
}
.wch-pop-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11.5px;
  color: rgba(242,247,238,.7);
  margin-bottom: 9px;
}
.wch-pop-meta i { color: rgba(212,175,55,.7); margin-right: 4px; }
.wch-pop-foot {
  font-size: 10.5px;
  color: rgba(242,247,238,.45);
  letter-spacing: .3px;
}

@media (max-width: 640px) {
  .wch-pill {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }
  .wch-pop {
    right: -8px;
    min-width: 220px;
    max-width: calc(100vw - 28px);
  }
}
@media (max-width: 400px) {
  /* Tighten further on tiny phones — keep just the temp visible */
  .wch-pill { padding: 0 9px; }
}

/* ════════════════════════════════════════════════════════════════════
   WEATHER ANIMATIONS — shared across index.html dashboard widget AND
   hr-assistant.html World Clock tiles. Pure CSS keyframes.
   ════════════════════════════════════════════════════════════════════ */
.wx-fx {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.wx-fx-sun {
  position: absolute; top: -22px; right: -22px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe27a 0%, #ffb830 55%, transparent 72%);
  box-shadow: 0 0 50px rgba(255,184,48,.55), 0 0 80px rgba(255,184,48,.28);
  animation: wxSunPulse 5s ease-in-out infinite, wxSunDrift 28s linear infinite;
}
@keyframes wxSunPulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.07); filter: brightness(1.12); } }
@keyframes wxSunDrift { 0% { transform-origin: center; } 100% { transform: rotate(360deg); } }
.wx-fx-moon {
  position: absolute; top: 10px; right: 14px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f4f4ff 0%, #b6bdd5 60%, #5a608a 100%);
  box-shadow: inset -8px -4px 0 #303759, 0 0 30px rgba(180,200,255,.35);
}
.wx-fx-star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255,255,255,.7);
  animation: wxTwinkle 2.4s ease-in-out infinite;
}
@keyframes wxTwinkle { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
.wx-fx-cloud {
  position: absolute;
  background: radial-gradient(ellipse 50% 60% at 50% 60%, #f4f6fa 0%, #c3ccd9 65%, transparent 75%);
  border-radius: 50%;
  filter: blur(.3px);
  opacity: .82;
}
.wx-fx-cloud-1 { width: 120px; height: 42px; top: 18px; left: -50px;  animation: wxCloudDrift 22s linear infinite; }
.wx-fx-cloud-2 { width: 90px;  height: 34px; top: 52px; left: -40px;  animation: wxCloudDrift 32s linear infinite; }
.wx-fx-cloud-3 { width: 150px; height: 50px; top: 84px; left: -80px;  animation: wxCloudDrift 26s linear infinite reverse; }
@keyframes wxCloudDrift { 0% { transform: translateX(0); } 100% { transform: translateX(340px); } }
.wx-fx-rain { background: linear-gradient(180deg, transparent, rgba(8,18,35,.10)); }
.wx-fx-drop {
  position: absolute;
  width: 1.6px; height: 12px;
  background: linear-gradient(to bottom, rgba(180,210,250,0), rgba(180,210,250,.85));
  border-radius: 1px;
  animation: wxRainFall 0.9s linear infinite;
}
.wx-fx-drop.heavy { width: 2.2px; height: 18px; }
@keyframes wxRainFall {
  0%   { transform: translate(0, -20px); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-4px, 130%); opacity: .6; }
}
.wx-fx-flake {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255,255,255,.85);
  opacity: .9;
  animation: wxFlakeFall 6s linear infinite;
}
@keyframes wxFlakeFall {
  0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(-30px, 140%) rotate(360deg); opacity: .7; }
}
.wx-fx-thunder-cloud {
  position: absolute; top: 0; right: -30px;
  width: 180px; height: 80px;
  background: radial-gradient(ellipse 70% 80% at 50% 70%, #4b5374 0%, #2b314e 65%, transparent 75%);
  border-radius: 50%;
  opacity: .85;
}
.wx-fx-flash {
  position: absolute;
  inset: 0;
  background: rgba(255,235,160,0);
  animation: wxFlash 6s steps(1) infinite;
}
@keyframes wxFlash {
  0%, 9%, 11%, 14%, 100% { background: rgba(255,235,160,0); }
  10%, 13%              { background: rgba(255,235,160,.65); }
}
.wx-fx-fog { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(220,225,235,.12) 35%, rgba(220,225,235,.10) 55%, transparent 100%); }
.wx-fx-fog-band {
  position: absolute;
  left: -40%; width: 180%; height: 22px;
  background: linear-gradient(90deg, transparent, rgba(220,225,235,.32), transparent);
  filter: blur(2px);
}
.wx-fx-fog-band.b1 { top: 30%; animation: wxFogDrift 18s linear infinite; }
.wx-fx-fog-band.b2 { top: 55%; animation: wxFogDrift 24s linear infinite reverse; }
.wx-fx-fog-band.b3 { top: 75%; animation: wxFogDrift 30s linear infinite; }
@keyframes wxFogDrift { 0% { transform: translateX(0); } 100% { transform: translateX(40%); } }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD WEATHER CARD (index.html — after the welcome section)
   Big animated card showing the signed-in user's local weather.
   ════════════════════════════════════════════════════════════════════ */
.dash-weather-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  align-items: stretch;
  padding: 22px 24px;
  margin: 16px 0 18px;
  background: linear-gradient(155deg, rgba(91,170,255,.18), rgba(255,255,255,.04) 60%, rgba(0,0,0,.16));
  border: 1px solid rgba(91,208,255,.30);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 48px rgba(0,0,0,.25), 0 0 0 1px rgba(91,208,255,.08) inset;
  min-height: 180px;
  animation: dwcIn .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes dwcIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.dash-weather-card.is-night { background: linear-gradient(155deg, rgba(30,45,90,.50), rgba(0,0,0,.36) 70%, rgba(0,0,0,.50)); border-color: rgba(120,150,220,.30); }
.dash-weather-card.wx-Rain, .dash-weather-card.wx-Drizzle { background: linear-gradient(155deg, rgba(60,100,150,.26), rgba(0,0,0,.30)); }
.dash-weather-card.wx-Thunderstorm { background: linear-gradient(155deg, rgba(60,60,110,.35), rgba(0,0,0,.40)); }
.dash-weather-card.wx-Snow { background: linear-gradient(155deg, rgba(170,200,240,.22), rgba(0,0,0,.18)); }
.dash-weather-card .dwc-left, .dash-weather-card .dwc-right { position: relative; z-index: 1; }

.dwc-loc {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .5px;
  color: rgba(255,255,255,.78);
  margin-bottom: 12px;
}
.dwc-loc i { color: #5bd0ff; margin-right: 5px; }
.dwc-temp-row { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.dwc-icon { font-size: 46px; color: #ffd55e; filter: drop-shadow(0 4px 12px rgba(255,213,94,.4)); }
.dash-weather-card.is-night .dwc-icon { color: #cad9ff; filter: drop-shadow(0 4px 12px rgba(200,217,255,.4)); }
.dwc-temp { font-family: 'IBM Plex Mono', monospace; font-size: 46px; font-weight: 700; color: #fff; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.dwc-cond { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.82); margin-top: 4px; }
.dwc-hilo { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: rgba(255,255,255,.78); margin-top: 6px; }
.dwc-hilo .hi { color: #ff9e7a; }
.dwc-hilo .lo { color: #7ec3ff; }
.dwc-hilo .precip { color: #b6dcff; margin-left: 8px; }

.dwc-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  align-content: center;
}
.dwc-stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.dwc-stat i { color: #5bd0ff; font-size: 12px; }
.dwc-stat-uv { grid-column: span 2; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.10); margin-top: 4px; }
.dwc-stat-uv i { color: #ffd55e; }
.dwc-updated {
  grid-column: span 2;
  font-size: 10.5px;
  color: rgba(255,255,255,.45);
  margin-top: 6px;
  letter-spacing: .3px;
}

@media (max-width: 640px) {
  .dash-weather-card { grid-template-columns: 1fr; padding: 18px 18px; min-height: 0; gap: 14px; }
  .dwc-temp { font-size: 38px; }
  .dwc-icon { font-size: 38px; }
  .dwc-right { grid-template-columns: 1fr 1fr 1fr; gap: 8px 12px; }
  .dwc-stat-uv { grid-column: span 3; }
  .dwc-updated { grid-column: span 3; }
}

/* ── Dashboard weather card — click-to-expand forecast ─────────── */
.dash-weather-card {
  grid-template-areas:
    "left right"
    "expanded expanded";
  cursor: pointer;
}
.dash-weather-card .dwc-left  { grid-area: left; }
.dash-weather-card .dwc-right { grid-area: right; }
.dash-weather-card .dwc-expanded {
  grid-area: expanded;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .35s cubic-bezier(.16,1,.3,1), margin-top .4s ease, padding-top .4s ease;
  position: relative;
  z-index: 1;
}
.dash-weather-card.is-expanded { cursor: default; }
.dash-weather-card.is-expanded .dwc-expanded {
  max-height: 900px;
  opacity: 1;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.dwc-toggle {
  position: absolute;
  top: 12px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.78);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s, transform .35s cubic-bezier(.16,1,.3,1), color .25s;
  z-index: 2;
}
.dwc-toggle:hover { background: rgba(255,255,255,.16); color: #fff; }
.dash-weather-card.is-expanded .dwc-toggle { transform: rotate(180deg); background: rgba(91,208,255,.20); color: #fff; }

.dwc-strip-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  margin: 12px 0 10px;
}
.dwc-strip-head:first-child { margin-top: 0; }

/* Hourly strip — 12 cells horizontally scrollable */
.dwc-hourly {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.dwc-hourly::-webkit-scrollbar { height: 4px; }
.dwc-hourly::-webkit-scrollbar-track { background: transparent; }
.dwc-hourly::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 2px; }
.dwc-h-cell {
  flex: 0 0 68px;
  text-align: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 0 8px;
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, background .25s;
}
.dwc-h-cell:hover { transform: translateY(-2px); border-color: rgba(91,208,255,.35); background: rgba(91,208,255,.10); }
.dwc-h-cell .h-time   { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,.7); letter-spacing: .3px; }
.dwc-h-cell .h-icon   { font-size: 17px; color: #ffd55e; margin: 6px 0 2px; }
.dash-weather-card.is-night .dwc-h-cell .h-icon { color: #cad9ff; }
.dwc-h-cell .h-temp   { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 700; color: #fff; }
.dwc-h-cell .h-precip { font-size: 10px; color: #7ec3ff; margin-top: 3px; }

/* 7-day strip — rows with hi-lo gradient */
.dwc-daily {
  display: flex; flex-direction: column; gap: 6px;
}
.dwc-d-row {
  display: grid;
  grid-template-columns: 78px 26px 1fr 46px 14px 46px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  transition: background .2s, border-color .2s;
}
.dwc-d-row:hover { background: rgba(255,255,255,.08); border-color: rgba(91,208,255,.20); }
.dwc-d-row .d-day   { font-size: 13px; font-weight: 600; color: #fff; }
.dwc-d-row .d-icon  { font-size: 15px; color: #ffd55e; text-align: center; }
.dash-weather-card.is-night .dwc-d-row .d-icon { color: #ffd55e; }
.dwc-d-row .d-range {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, #7ec3ff 0%, #ffd55e 50%, #ff9e7a 100%);
  opacity: .55;
}
.dwc-d-row .d-lo, .dwc-d-row .d-hi {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
}
.dwc-d-row .d-lo { color: #7ec3ff; text-align: right; }
.dwc-d-row .d-hi { color: #ff9e7a; }
.dwc-d-row .d-precip {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #b6dcff;
  padding-left: 90px;
  margin-top: -3px;
}

/* Sun / moon / wind summary line at the bottom of the expanded panel */
.dwc-sunline {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.dwc-sunline i { color: #ffd55e; margin-right: 5px; }
.dwc-sunline b { font-family: 'IBM Plex Mono', monospace; color: #fff; font-weight: 600; }

@media (max-width: 640px) {
  .dash-weather-card { grid-template-areas: "left" "right" "expanded"; }
  .dwc-toggle { top: 10px; right: 10px; width: 28px; height: 28px; }
  .dwc-h-cell { flex: 0 0 60px; }
  .dwc-d-row { grid-template-columns: 60px 20px 1fr 36px 12px 36px; gap: 8px; }
  .dwc-d-row .d-precip { padding-left: 64px; }
}

/* ── Live dot next to the location label ───────────────────────── */
.dwc-loc .dwc-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: #4ee598;
  box-shadow: 0 0 0 0 rgba(78,229,152,.55);
  animation: dwcLivePulse 2.4s cubic-bezier(.16,1,.3,1) infinite;
  vertical-align: middle;
}
@keyframes dwcLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(78,229,152,.55); transform: scale(.92); }
  70%  { box-shadow: 0 0 0 9px rgba(78,229,152,0); transform: scale(1.18); }
  100% { box-shadow: 0 0 0 0 rgba(78,229,152,0); transform: scale(.92); }
}

/* ── Next-hour precipitation banner ────────────────────────────── */
.dwc-nexthour {
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(91,208,255,.18), rgba(91,208,255,.04));
  border: 1px solid rgba(91,208,255,.32);
  border-radius: 12px;
  font-size: 13px;
  color: #e0f1ff;
  margin-bottom: 14px;
}
.dwc-nexthour i { color: #7ec3ff; margin-right: 8px; }
.dwc-nexthour b { color: #fff; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }

/* ── Active weather alerts ─────────────────────────────────────── */
.dwc-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dwc-alert {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid;
  font-size: 13px;
  line-height: 1.5;
}
.dwc-alert-extreme  { background: rgba(255,89,115,.20); border-color: rgba(255,89,115,.55); color: #ffd2db; }
.dwc-alert-severe   { background: rgba(255,89,115,.15); border-color: rgba(255,89,115,.40); color: #ffd2db; }
.dwc-alert-moderate { background: rgba(255,179,71,.18); border-color: rgba(255,179,71,.42); color: #ffe7c5; }
.dwc-alert-minor,
.dwc-alert-unknown,
.dwc-alert-advisory { background: rgba(91,208,255,.14); border-color: rgba(91,208,255,.36); color: #d8efff; }
.dwc-alert-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
}
.dwc-alert-head i { color: inherit; }
.dwc-alert-sev {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 2px 7px;
  background: rgba(0,0,0,.18);
  border-radius: 5px;
}
.dwc-alert-title { flex: 1; }
.dwc-alert-area, .dwc-alert-src {
  font-size: 11.5px;
  opacity: .8;
  margin-top: 4px;
  padding-left: 24px;
}

/* Warn variant of the live dot — shown when weather feed is unavailable */
.dwc-live-dot.dwc-live-dot-warn { background: #ffb347; box-shadow: 0 0 0 0 rgba(255,179,71,.55); animation: dwcLiveWarnPulse 2.4s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes dwcLiveWarnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,179,71,.55); transform: scale(.92); }
  70%  { box-shadow: 0 0 0 9px rgba(255,179,71,0); transform: scale(1.18); }
  100% { box-shadow: 0 0 0 0 rgba(255,179,71,0); transform: scale(.92); }
}

/* ── Weather chip popover — RICH version (matches dashboard widget) ── */
.wch-pop.wch-pop-rich {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: min(320px, calc(100vw - 16px));
  background: linear-gradient(155deg, rgba(91,170,255,.20), rgba(11,18,24,.92) 70%);
  border: 1px solid rgba(91,208,255,.36);
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 22px 56px rgba(0,0,0,.6), 0 0 0 1px rgba(91,208,255,.08) inset;
  z-index: 1200;
  overflow: hidden;
  isolation: isolate;
}
.wch-pop.wch-pop-rich.is-night { background: linear-gradient(155deg, rgba(30,45,90,.50), rgba(0,0,0,.85)); border-color: rgba(120,150,220,.40); }
.wch-pop.wch-pop-rich.wx-Rain, .wch-pop.wch-pop-rich.wx-Drizzle { background: linear-gradient(155deg, rgba(60,100,150,.30), rgba(0,0,0,.85)); }
.wch-pop.wch-pop-rich.wx-Thunderstorm { background: linear-gradient(155deg, rgba(60,60,110,.40), rgba(0,0,0,.90)); }
.wch-pop.wch-pop-rich.wx-Snow { background: linear-gradient(155deg, rgba(170,200,240,.28), rgba(0,0,0,.85)); }
.wch-pop.wch-pop-rich .wx-fx { position: absolute; inset: 0; z-index: 0; border-radius: 18px; }
.wch-pop-inner { position: relative; z-index: 1; padding: 14px 16px; }
.wch-pop-loc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.wch-pop-loc-text { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: rgba(255,255,255,.82); letter-spacing: .3px; }
.wch-pop-loc-text i { color: #5bd0ff; margin-right: 5px; }
.wch-pop-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ee598; box-shadow: 0 0 0 0 rgba(78,229,152,.55); animation: dwcLivePulse 2.4s cubic-bezier(.16,1,.3,1) infinite; }
.wch-pop-rich .wch-pop-row { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.10); }
.wch-pop-rich .wch-pop-icon { font-size: 36px; color: #ffd55e; filter: drop-shadow(0 3px 9px rgba(255,213,94,.35)); }
.wch-pop-rich.is-night .wch-pop-icon { color: #cad9ff; filter: drop-shadow(0 3px 9px rgba(200,217,255,.35)); }
.wch-pop-rich .wch-pop-temp { font-family: 'IBM Plex Mono', monospace; font-size: 32px; font-weight: 700; color: #fff; line-height: 1; }
.wch-pop-rich .wch-pop-cond { font-size: 12px; color: rgba(255,255,255,.78); margin-top: 4px; }
.wch-pop-hilo { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 4px; }
.wch-pop-hilo .hi { color: #ff9e7a; }
.wch-pop-hilo .lo { color: #7ec3ff; }
.wch-pop-nh { padding: 8px 12px; background: rgba(91,208,255,.16); border: 1px solid rgba(91,208,255,.30); border-radius: 10px; font-size: 11.5px; color: #d8efff; margin-bottom: 12px; }
.wch-pop-nh i { color: #7ec3ff; margin-right: 6px; }
.wch-pop-nh b { color: #fff; font-family: 'IBM Plex Mono', monospace; }
.wch-pop-hourly { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 4px; scrollbar-width: none; }
.wch-pop-hourly::-webkit-scrollbar { display: none; }
.wch-h-cell { flex: 0 0 50px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: 9px; padding: 6px 0 5px; }
.wch-h-time { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: rgba(255,255,255,.65); }
.wch-h-icon { font-size: 13px; color: #ffd55e; margin: 3px 0 1px; }
.wch-pop-rich.is-night .wch-h-icon { color: #cad9ff; }
.wch-h-temp { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; color: #fff; }
.wch-pop-rich .wch-pop-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: rgba(255,255,255,.7); padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10); }
.wch-pop-rich .wch-pop-meta i { color: #5bd0ff; margin-right: 4px; }
.wch-pop-rich .wch-pop-foot { font-size: 10px; color: rgba(255,255,255,.45); margin-top: 7px; letter-spacing: .3px; }
.wch-alert { padding: 7px 10px; border-radius: 9px; border: 1px solid; font-size: 11.5px; margin-bottom: 10px; line-height: 1.4; }
.wch-alert i { margin-right: 6px; }
.wch-alert-extreme, .wch-alert-severe { background: rgba(255,89,115,.18); border-color: rgba(255,89,115,.42); color: #ffd2db; }
.wch-alert-moderate { background: rgba(255,179,71,.18); border-color: rgba(255,179,71,.42); color: #ffe7c5; }
.wch-alert-minor, .wch-alert-unknown, .wch-alert-advisory { background: rgba(91,208,255,.14); border-color: rgba(91,208,255,.36); color: #d8efff; }

/* ──────────────────────────────────────────────────────────────────
   Universal modal-title / modal-sub padding so the absolute-positioned
   .modal-close X button never overlaps the text. Applies on every page
   that uses .modal-overlay / .modal-box (every modal in the portal).
   Higher specificity than individual page CSS, no !important needed.
   ────────────────────────────────────────────────────────────────── */
.modal-overlay .modal-title,
.modal-overlay .modal-sub,
.modal-box     .modal-title,
.modal-box     .modal-sub {
  padding-right: 56px;
}
@media (max-width: 540px) {
  .modal-overlay .modal-title,
  .modal-overlay .modal-sub,
  .modal-box     .modal-title,
  .modal-box     .modal-sub {
    padding-right: 48px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Shared header clock + temperature chip — `.hdr-wclock`.
   Mounted on every page that includes `js/hdr-wclock.js`. WAT time
   + Benin-City temperature via Open-Meteo. Glass design language.
   ────────────────────────────────────────────────────────────────── */
.hdr-wclock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(242,247,238,.88);
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  user-select: none;
}
.hdr-wclock i { color: var(--gold, #f0c832); font-size: 11px; }
.hdr-wclock-sep { color: rgba(242,247,238,.35); margin: 0 2px; }

@media (max-width: 820px) {
  .hdr-wclock { padding: 6px 10px; font-size: 11px; }
}
@media (max-width: 540px) {
  /* On narrow phones the chip collapses to time-only — temp hidden. */
  .hdr-wclock .hdr-wclock-sep,
  .hdr-wclock .hdr-wclock-temp,
  .hdr-wclock > i.fa-cloud-sun { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   SCROLL PERFORMANCE (2026-05-26)
   ────────────────────────────────────────────────────────────────
   Momentum scrolling on touch devices + scroll-chaining containment
   on nested scroll containers. No visual change. Pairs with the
   per-page backdrop-filter removals on sticky chrome (hr-ops-monitor
   header / section-nav / KPI tiles) that eliminated the per-frame
   re-blur that caused "page hangs while scrolling".
   ════════════════════════════════════════════════════════════════ */
html, body { -webkit-overflow-scrolling: touch; }

/* Nested scroll regions: momentum + don't chain the scroll to the page
   behind them (stops the "stuck/rubber-banding" feel inside drawers,
   modals, notification panels, and wide tables). */
.snp-body, .snp-hr-body, .modal-body, .pres-modal-box,
[id$="-drawer"], [id$="-drawer-body"],
.grid-scroll, .rota-scroll, .table-scroll, .dtbl-wrap, .tz-combo-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ============================================================================
   DTTASA AI Assistant — enterprise chat panel (js/support-assistant.js)
   Glassmorphism + gold treatment + cubic-bezier(.16,1,.3,1) motion. Tokens:
   --gold/--gold2/--gglow/--gdim/--void/--panel/--text/--t2/--t3/--border.
   ============================================================================ */
.dsa-panel{position:fixed;right:24px;bottom:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:9001;width:400px;max-width:calc(100vw - 32px);height:580px;max-height:calc(100vh - 100px);display:none;flex-direction:column;border:1px solid rgba(240,200,50,.22);border-radius:20px;overflow:hidden;background:linear-gradient(165deg,rgba(30,46,27,.97),rgba(12,17,9,.985));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 30px 80px -12px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05),0 0 50px -10px var(--gglow,rgba(212,175,55,.3))}
.dsa-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold,#f0c832),var(--gold2,#f7d94e),var(--gold,#f0c832),transparent);opacity:.85;z-index:2}
.dsa-panel.show{display:flex;animation:dsaIn .42s cubic-bezier(.16,1,.3,1) both}
@keyframes dsaIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
.dsa-head{position:relative;display:flex;align-items:center;gap:11px;padding:15px 14px 14px;border-bottom:1px solid rgba(240,200,50,.14);background:linear-gradient(180deg,rgba(240,200,50,.10),transparent)}
.dsa-av{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%,rgba(30,46,27,.9),rgba(12,17,9,.97));border:1.5px solid var(--gold,#f0c832);box-shadow:0 0 0 1px rgba(240,200,50,.28),0 0 18px -2px var(--gglow,rgba(212,175,55,.5));animation:dsaPulse 3s ease-in-out infinite;overflow:visible}
.dsa-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.dsa-av i{font-size:17px;color:var(--gold,#f0c832)}
.dsa-av::before{content:'';position:absolute;top:-7px;left:50%;width:2px;height:7px;transform:translateX(-50%);background:var(--gold,#f0c832);border-radius:1px}
.dsa-av::after{content:'';position:absolute;top:-11px;left:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;background:var(--gold2,#f7d94e);box-shadow:0 0 8px var(--gold,#f0c832);animation:blink 2s ease infinite}
@keyframes dsaPulse{0%,100%{box-shadow:0 0 0 1px rgba(240,200,50,.4),0 0 16px -2px var(--gglow,rgba(212,175,55,.45))}50%{box-shadow:0 0 0 1px rgba(240,200,50,.6),0 0 26px 1px var(--gglow,rgba(212,175,55,.65))}}
.dsa-head-meta{flex:1;min-width:0}
.dsa-head-title{font-family:var(--disp,'Cinzel',serif);font-size:15px;font-weight:700;letter-spacing:.3px;color:var(--text,#f2f7ee);line-height:1.1}
.dsa-head-sub{font-family:var(--body,'DM Sans',sans-serif);font-size:10.5px;color:var(--t3,rgba(242,247,238,.6));margin-top:3px;display:flex;align-items:center;gap:5px}
.dsa-pip{width:6px;height:6px;border-radius:50%;background:var(--green,#4cd657);box-shadow:0 0 0 2px rgba(76,214,87,.25);animation:blink 2.4s ease infinite}
.dsa-head-actions{display:flex;align-items:center;gap:6px}
.dsa-ticket-link{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.06);border:1px solid var(--border,rgba(255,255,255,.21));color:var(--t2,rgba(242,247,238,.85));font-family:var(--body,'DM Sans',sans-serif);font-size:11px;font-weight:600;padding:6px 10px;border-radius:9px;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1)}
.dsa-ticket-link:hover{border-color:var(--gold,#f0c832);color:var(--gold,#f0c832);background:var(--gdim,rgba(212,175,55,.12))}
.dsa-close{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:none;border-radius:50%;color:var(--t2,rgba(242,247,238,.7));font-size:18px;line-height:1;cursor:pointer;transition:all .25s ease}
.dsa-close:hover{background:rgba(255,72,72,.2);color:#ff4848}
.dsa-notice{padding:9px 15px;font-size:10.5px;color:var(--t3,rgba(242,247,238,.55));background:rgba(0,0,0,.18);border-bottom:1px solid rgba(255,255,255,.06);display:flex;gap:7px;align-items:center}
.dsa-notice i{color:var(--gold,#f0c832)}
.dsa-msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:rgba(240,200,50,.3) transparent}
.dsa-msgs::-webkit-scrollbar{width:6px}.dsa-msgs::-webkit-scrollbar-thumb{background:rgba(240,200,50,.3);border-radius:3px}
.dsa-msg{max-width:86%;padding:10px 13px;font-family:var(--body,'DM Sans',sans-serif);font-size:13px;line-height:1.55;word-break:break-word;animation:dsaMsgIn .4s cubic-bezier(.16,1,.3,1) both}
@keyframes dsaMsgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dsa-user{align-self:flex-end;background:linear-gradient(135deg,rgba(240,200,50,.28),rgba(247,217,78,.13));border:1px solid rgba(240,200,50,.42);color:var(--text,#f2f7ee);border-radius:15px 15px 4px 15px}
.dsa-bot{align-self:flex-start;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);color:var(--t2,rgba(242,247,238,.92));border-radius:15px 15px 15px 4px}
.dsa-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dsa-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:20px;background:var(--gdim,rgba(212,175,55,.12));border:1px solid rgba(240,200,50,.4);color:var(--gold,#f0c832);font-size:11px;font-weight:600;text-decoration:none;transition:all .25s cubic-bezier(.16,1,.3,1)}
.dsa-chip:hover{background:rgba(240,200,50,.22);transform:translateY(-1px)}
.dsa-esc{margin-top:7px;font-size:11.5px;color:var(--t3,rgba(242,247,238,.6))}
.dsa-esc-btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(240,200,50,.2),rgba(247,217,78,.1));border:1px solid var(--gold,#f0c832);color:var(--gold,#f0c832);font-family:var(--body,'DM Sans',sans-serif);font-size:12px;font-weight:600;padding:8px 12px;border-radius:10px;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1)}
.dsa-esc-btn:hover{background:rgba(240,200,50,.28);transform:translateY(-1px)}
.dsa-dots{display:inline-flex;gap:5px;padding:2px 0}
.dsa-dots i{width:7px;height:7px;border-radius:50%;background:var(--gold,#f0c832);display:inline-block;animation:dsaBounce 1.3s infinite ease-in-out both}
.dsa-dots i:nth-child(1){animation-delay:-.24s}.dsa-dots i:nth-child(2){animation-delay:-.12s}
@keyframes dsaBounce{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
.dsa-input{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,transparent,rgba(0,0,0,.25))}
.dsa-q{flex:1;padding:11px 14px;border-radius:12px;border:1px solid var(--border,rgba(255,255,255,.21));background:rgba(255,255,255,.05);color:var(--text,#f2f7ee);font-family:var(--body,'DM Sans',sans-serif);font-size:14px;transition:border-color .25s,box-shadow .25s}
.dsa-q:focus{outline:none;border-color:var(--gold,#f0c832);box-shadow:0 0 0 3px var(--gdim,rgba(212,175,55,.14))}
.dsa-send{flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--gold2,#f7d94e),var(--gold,#f0c832));color:#19230a;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.dsa-send:hover{transform:translateY(-2px);box-shadow:0 6px 18px -4px var(--gglow,rgba(212,175,55,.6))}
.dsa-send:disabled{opacity:.5;cursor:not-allowed;transform:none}
.dsa-tf-title{font-family:var(--disp,'Cinzel',serif);font-size:13px;font-weight:700;color:var(--gold,#f0c832);display:flex;align-items:center;gap:7px;margin-bottom:9px}
.dsa-tf-lbl{display:block;font-size:11px;color:var(--t3,rgba(242,247,238,.6));margin:7px 0 3px}
.dsa-tf-in,.dsa-tf-ta{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid var(--border,rgba(255,255,255,.21));border-radius:10px;padding:9px 11px;color:var(--text,#f2f7ee);font-family:var(--body,'DM Sans',sans-serif);font-size:13px;resize:none;transition:border-color .25s,box-shadow .25s}
.dsa-tf-in:focus,.dsa-tf-ta:focus{outline:none;border-color:var(--gold,#f0c832);box-shadow:0 0 0 3px var(--gdim,rgba(212,175,55,.14))}
.dsa-tf-row{display:flex;gap:8px;margin-top:10px}
.dsa-tf-cancel{flex:0 0 auto;background:transparent;border:1px solid var(--border,rgba(255,255,255,.21));color:var(--t2,rgba(242,247,238,.85));border-radius:10px;padding:9px 13px;font-size:12px;cursor:pointer;font-family:var(--body,'DM Sans',sans-serif);transition:all .25s ease}
.dsa-tf-cancel:hover{border-color:rgba(255,255,255,.4)}
.dsa-tf-submit{flex:1;background:linear-gradient(135deg,var(--gold2,#f7d94e),var(--gold,#f0c832));border:none;color:#19230a;border-radius:10px;padding:9px 13px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--body,'DM Sans',sans-serif);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.dsa-tf-submit:hover{transform:translateY(-1px)}
.dsa-tf-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.dsa-tf-ok{color:var(--green,#4cd657);font-size:13px;line-height:1.5;text-align:center;padding:6px 0}
.dsa-tf-ok i{font-size:26px;display:block;margin-bottom:7px}
.dsa-tf-ref{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:12px;color:var(--gold,#f0c832);margin-top:6px}
@media(max-width:540px){.dsa-panel{right:8px;left:8px;width:auto;bottom:8px;height:calc(100vh - 76px);border-radius:18px}}

/* ── Contract Renewal v2 — signing-chain stepper + in-flight panel (centralised; used on HR monitor + signing page) ── */
.renew-stepper{display:inline-flex;align-items:center;gap:0;margin-top:4px;vertical-align:middle}
.renew-stepper .rs-node{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;letter-spacing:.2px;border:1.5px solid var(--border,rgba(255,255,255,.21));background:rgba(255,255,255,.06);color:var(--t3,rgba(242,247,238,.62));position:relative}
.renew-stepper .rs-node:not(:last-child){margin-right:18px}
.renew-stepper .rs-node:not(:last-child)::after{content:"";position:absolute;left:100%;top:50%;width:18px;height:2px;background:var(--border,rgba(255,255,255,.21));transform:translateY(-50%)}
.renew-stepper .rs-done{background:var(--green,#4cd657);border-color:var(--green,#4cd657);color:#0c1109}
.renew-stepper .rs-done:not(:last-child)::after{background:var(--green,#4cd657)}
.renew-stepper .rs-active{background:var(--gold,#f0c832);border-color:var(--gold,#f0c832);color:#0c1109;animation:rsPulse 1.6s cubic-bezier(.16,1,.3,1) infinite}
@keyframes rsPulse{0%,100%{box-shadow:0 0 0 0 rgba(240,200,50,.5)}50%{box-shadow:0 0 0 5px rgba(240,200,50,0)}}
.renew-panel{background:rgba(240,200,50,.06);border:1px solid var(--gglow,rgba(212,175,55,.3));border-radius:12px;padding:14px 16px;margin-bottom:14px}
.renew-panel-title{font-size:13px;font-weight:700;color:var(--gold,#f0c832);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.renew-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--border,rgba(255,255,255,.14))}
.renew-row:first-of-type{border-top:0}
.renew-row-name{font-size:13px;font-weight:600;color:var(--text,#f2f7ee);min-width:160px;flex:1}
.renew-row-status{font-size:11px;font-weight:700;color:var(--gold,#f0c832);text-transform:uppercase;letter-spacing:.4px}

/* Contract-renewal in-flight panel — staggered row entrance (enterprise polish) */
.renew-panel .renew-row{animation:cvIn .4s cubic-bezier(.16,1,.3,1) both;}
.renew-panel .renew-row:nth-child(2){animation-delay:.05s}
.renew-panel .renew-row:nth-child(3){animation-delay:.10s}
.renew-panel .renew-row:nth-child(4){animation-delay:.15s}
.renew-panel .renew-row:nth-child(n+5){animation-delay:.2s}

/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM UI KIT (2026-06-07) — reusable enterprise glass / facet / diamond
   surfaces + entrance animations, distilled from the Recruitment Pipeline
   redesign. Use on ANY page; design tokens (--gold,--gdim,--gglow,--panel,
   --border,--t3,--disp,--ease) resolve from that page's own :root.

   Atoms:   .pm-glass · .pm-facet · .pm-dia (hover sheen)
   Cards:   .pm-card (glass facet + hover lift + sheen)
   KPIs:    .pm-kpis (grid) > .pm-kpi  (.pm-kn number · .pm-kl label · .pm-ki icon)
   Drawer:  #x{...} + .pm-drawer / .pm-scrim  (use pmSlideIn / pmScrimIn)
   Motion:  .pm-anim-rise · .pm-anim-card · .pm-stagger>*  ·  keyframes pm*
   Easing:  always cubic-bezier(.16,1,.3,1)
   ════════════════════════════════════════════════════════════════════════════ */
.pm-glass{background:var(--panel);border:1px solid var(--border);border-radius:18px;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 10px 34px -8px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10)}
.pm-facet{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);border:1px solid rgba(255,255,255,.22)}
.pm-dia{position:relative;overflow:hidden}
.pm-dia::after{content:"";position:absolute;top:-60%;left:-70%;width:42%;height:220%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),rgba(255,255,255,.03),transparent);transform:rotate(9deg);transition:left .75s cubic-bezier(.16,1,.3,1)}
.pm-dia:hover::after{left:150%}

.pm-card{position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);
  border:1px solid rgba(255,255,255,.20);border-radius:16px;
  box-shadow:0 8px 26px -12px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.pm-card::after{content:"";position:absolute;top:-60%;left:-70%;width:42%;height:220%;pointer-events:none;z-index:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),rgba(255,255,255,.03),transparent);transform:rotate(9deg);transition:left .75s cubic-bezier(.16,1,.3,1)}
.pm-card:hover{border-color:var(--gglow);transform:translateY(-3px);box-shadow:0 18px 44px -12px rgba(0,0,0,.5),0 0 0 1px var(--gglow) inset}
.pm-card:hover::after{left:150%}
.pm-card > *{position:relative;z-index:1}

.pm-kpis{display:grid;gap:12px}
.pm-kpi{position:relative;overflow:hidden;padding:15px 16px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,var(--panel)),linear-gradient(320deg,var(--gdim),transparent 60%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:pmKpiIn .5s cubic-bezier(.16,1,.3,1) both}
.pm-kpi:nth-child(2){animation-delay:.05s}.pm-kpi:nth-child(3){animation-delay:.1s}
.pm-kpi:nth-child(4){animation-delay:.15s}.pm-kpi:nth-child(5){animation-delay:.2s}
.pm-kn{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1}
.pm-kl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);font-weight:700;margin-top:6px}
.pm-ki{position:absolute;top:12px;right:13px;font-size:15px;opacity:.5}

/* Right-side slide-in drawer + scrim (apply pm-drawer to the panel, pm-scrim to the overlay) */
.pm-scrim{background:rgba(5,9,5,.52);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:pmScrimIn .32s cubic-bezier(.16,1,.3,1) both}
.pm-drawer{background:linear-gradient(165deg,var(--base),var(--deep));border-left:1px solid var(--border);box-shadow:-28px 0 80px rgba(0,0,0,.6);will-change:transform;animation:pmSlideIn .52s cubic-bezier(.16,1,.3,1) both}

/* Entrance helpers + keyframes */
.pm-anim-rise{animation:pmRise .6s cubic-bezier(.16,1,.3,1) both}
.pm-anim-card{animation:pmCardIn .5s cubic-bezier(.16,1,.3,1) both}
.pm-stagger > *{animation:pmCardIn .5s cubic-bezier(.16,1,.3,1) both}
.pm-stagger > *:nth-child(1){animation-delay:.06s}.pm-stagger > *:nth-child(2){animation-delay:.12s}.pm-stagger > *:nth-child(3){animation-delay:.18s}.pm-stagger > *:nth-child(4){animation-delay:.24s}.pm-stagger > *:nth-child(5){animation-delay:.30s}.pm-stagger > *:nth-child(n+6){animation-delay:.36s}
@keyframes pmKpiIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pmCardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pmRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pmSlideIn{from{transform:translateX(102%);opacity:.55}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes pmScrimIn{from{opacity:0}to{opacity:1}}
@keyframes pmSecIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ════ Premium overlay-modal depth (centralised, 2026-06-08) ════
   Every page's overlay modal gets premium glass depth + a refined border/radius.
   Background is NOT changed here (preserves light/dark readability); the major dark
   pages already carry the full facet modal bg. The X-clearance + z-index rules above
   already stop the close (X) button overlapping the title text. */
.modal-overlay .modal-card, .modal-box, .modal-sheet {
  box-shadow:0 32px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08) !important;
  border-radius:20px !important;
}
.modal-overlay .modal-card { border:1px solid rgba(255,255,255,.18) !important; }
@media (max-width:640px){ .modal-overlay .modal-card, .modal-box, .modal-sheet { border-radius:16px !important; } }

/* ════ MAIL ENGINE live panel (me-*) — shared SA Control + IT Board (2026-06-10) ════
   Premium provider counters for the mail router (Resend → Trigger Email).
   Used by js/mail-engine-panel.js. Mobile-first to 320px. */
.me-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:14px}
.me-card{padding:16px 18px 14px;border-radius:16px}
.me-card.me-active{border-color:var(--gglow);box-shadow:0 14px 40px -14px rgba(0,0,0,.5),0 0 0 1px var(--gglow) inset}
.me-card-top{display:flex;align-items:center;gap:9px;min-width:0}
.me-name{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.6px;color:var(--text)}
.me-active-chip{margin-left:auto;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:1.5px;color:var(--gold);background:var(--gdim);border:1px solid var(--gglow);border-radius:20px;padding:3px 9px;text-shadow:0 0 8px var(--gglow);white-space:nowrap}
.me-sub{font-size:11px;color:var(--t3);margin:3px 0 12px;letter-spacing:.3px}
.me-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.me-bar-lbl{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);width:44px;flex:none}
.me-bar{flex:1;height:7px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden;min-width:0}
.me-bar-fill{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.16,1,.3,1)}
.me-fill-green{background:linear-gradient(90deg,#2e8d3a,var(--green));box-shadow:0 0 10px rgba(76,214,87,.4)}
.me-fill-gold{background:linear-gradient(90deg,#b08d1e,var(--gold));box-shadow:0 0 10px var(--gglow)}
.me-fill-red{background:linear-gradient(90deg,#8d1e1e,var(--red));box-shadow:0 0 10px rgba(255,72,72,.4)}
.me-bar-num{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--t2);flex:none;min-width:54px;text-align:right}
.me-foot{margin-top:6px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px;min-height:18px}
.me-ok{font-size:11px;color:var(--t3)}
.me-err{font-size:11px;color:var(--red);display:inline-flex;align-items:flex-start;gap:6px;line-height:1.4;word-break:break-word}
.me-empty{padding:18px;text-align:center;color:var(--t3);font-size:13px}
.me-log-wrap{border-radius:16px;padding:14px 16px}
.me-log-hdr{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.me-log-sub{margin-left:auto;color:var(--t3);font-weight:400;letter-spacing:.6px;text-transform:none}
.me-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.me-tbl th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);padding:6px 10px;border-bottom:1px solid var(--border)}
.me-tbl td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--t2);vertical-align:top}
.me-tbl tr:hover td{background:var(--gdim)}
.me-subj{word-break:break-word}
.me-st{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:12px;padding:2px 8px;white-space:nowrap}
.me-st-sent{color:var(--green);background:rgba(76,214,87,.12);border:1px solid rgba(76,214,87,.3)}
.me-st-error{color:var(--red);background:rgba(255,72,72,.12);border:1px solid rgba(255,72,72,.3)}
.me-st-queued{color:var(--gold);background:var(--gdim);border:1px solid var(--gglow)}
@media(max-width:540px){
  .me-grid{grid-template-columns:1fr}
  .me-tbl thead{display:none}
  .me-tbl tr{display:block;border-bottom:1px solid var(--border);padding:8px 0}
  .me-tbl td{display:flex;gap:10px;border-bottom:none;padding:3px 6px}
  .me-tbl td::before{content:attr(data-l);font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);width:64px;flex:none;padding-top:2px}
}