/* ============================================================================
   gsCore.css - the design-system primitives that BOTH surfaces need.

   Loaded by gsMaster.jspf (operator console + portal, immediately ABOVE
   master.css) and by gsPublicSide.jspf (the public /v /m /l /a SMS-link pages,
   which deliberately do NOT load master.css - see that file). It exists so
   those two surfaces stop keeping hand-synced copies of the same rules: the
   token set, the button, the tooltip, the running-man loader and the
   GSMultiSelect control are declared here ONCE and every page inherits the
   same one.

   Nothing in here may assume a body class. master.css owns everything scoped to
   body.gs-app / body.gs-portal, the dark-theme TOKEN redefinition, and every
   console-only component (the few html[data-theme="dark"] rules that live here
   belong to GSMultiSelect and are simply inert on the public pages, which never
   set data-theme); gsPublicSide.jspf owns the public chrome (.gslc-*, .gsps-warn,
   .gs-public-frame-*, .gs-input) and the public-only page behaviour. Adding a
   rule here ships it to all 65 pages - if it is not genuinely shared, it
   belongs in one of those two files instead.

   gsCore.css loads BEFORE master.css, so any master.css rule of equal
   specificity still wins - that ordering is what lets master.css keep
   overriding these primitives for the console.
   ============================================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/Inter/InterVariable.woff2") format("woff2");}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/Inter/InterVariable-Italic.woff2") format("woff2");}

:root{
    /* ONE global token set. --gs-* are the single source of truth (LIGHT here; DARK in
       master.css's html[data-theme="dark"] block, which the public pages never trigger).
       The older --bg/--line/--text/--accent names are kept as thin aliases to --gs-* so
       every rule and every page reads one vocabulary. */
    --gs-amber-bg:#FCF1DC; --gs-amber-tx:#92600A; --gs-bg:#FFFFFF; --gs-blue-bg:#E7EFF9; --gs-blue-tx:#1D4F91;
    --gs-border:#D7DBE0; --gs-border-light:#E8EAEE; --gs-card:#FFFFFF; --gs-card-bg:#F3F4F6; --gs-faint:#9AA1AC; --gs-green-bg:#E5F4E8;
    --gs-green-tx:#1E7B34; --gs-grey-bg:#EEF0F3; --gs-grey-tx:#4B5563; --gs-ink:#0F1117; --gs-muted:#6B7280;
    --gs-purple-bg:#EFEAF8; --gs-purple-tx:#5B3E96; --gs-red:#D00000; --gs-red-dark:#A80000; --gs-red-tint:#FBEAEA;
    --gs-redpill-bg:#FBEAEA; --gs-redpill-tx:#B42318; --gs-text:#3D434F; --gs-text-2:#3D434F; --gs-topnav-bg:#0f1117;
    --gs-input-bg:#FFFFFF;
    --gs-font:'Inter';
    --accent:var(--gs-red); --accent-bg:var(--gs-red-tint); --accent-deep:var(--gs-red-dark);
    --text:var(--gs-ink); --text-mute:var(--gs-muted); --text-light:var(--gs-faint);
    --line:var(--gs-border-light); --line-strong:var(--gs-border);
    --bg:var(--gs-bg); --bg-card:var(--gs-card); --bg-elev:var(--gs-card); --bg-popover:var(--gs-card);
    --bg-soft:var(--gs-grey-bg); --bg-input:var(--gs-input-bg); --bg-input-soft:var(--gs-grey-bg);
    --hover-bg:var(--gs-grey-bg); --th-bg:var(--gs-grey-bg); --chart-tick:var(--gs-muted);
    --accent-soft:#e85a5a; --slate:#D00000; --slate-soft:#bb1f1f;
    --nav-bg:#0f1117; --nav-bg-darker:#0f1117; --chart-grid:rgba(0,0,0,0.05);
    --shadow-card:0 1px 3px rgba(0,0,0,0.04);
    --shadow-modal:0 20px 60px rgba(0,0,0,0.18), 0 6px 20px rgba(0,0,0,0.08);
    --shadow-popover:0 10px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
}

/* THE button. 36px is the standard control height; .gs-big is the taller 44px hero
   variant for the primary call-to-action on public / logged-out forms. Size only -
   the page sets width. The element-qualified selectors keep a.btn-u / button.btn-u at
   their historic (0,1,1) specificity so existing page overrides still land the same way.
   font-family is declared explicitly and must stay: a <button> does NOT inherit it - the
   UA stylesheet sets a specified control font (-webkit-control / -moz-button) that beats
   inheritance - so without this line every button.btn-u falls off Inter.
   border-radius is !important because the public pages include this sheet from <head>
   ABOVE their own <style> block; no master.css rule sets a competing non-important
   .btn-u border-radius, so it is inert on the console. */
.btn-u,
a.btn-u,
button.btn-u,
input.btn-u{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    height:auto; min-height:36px; padding:8px 16px; border:1px solid var(--gs-red);
    border-radius:8px !important; background:var(--gs-red); color:#fff !important; font-family:'Inter'; font-size:13px;
    font-weight:600; line-height:1.2; text-decoration:none !important; cursor:pointer;
    box-shadow:none; transition:background .15s, border-color .15s, box-shadow .15s, transform .05s; box-sizing:border-box;
}
.btn-u:hover,
a.btn-u:hover,
button.btn-u:hover{ background:var(--gs-red-dark); border-color:var(--gs-red-dark); color:#fff !important; box-shadow:0 2px 8px rgba(208,0,0,0.18); text-decoration:none !important; transform:none; }
.btn-u:active{ transform:translateY(0.5px); }
.btn-u[disabled], .btn-u:disabled{ opacity:.5; cursor:not-allowed; }
.btn-u.gs-ghost{ background:var(--gs-card); color:var(--gs-text-2) !important; border-color:var(--gs-border); }
.btn-u.gs-ghost:hover{ background:var(--gs-grey-bg); color:var(--gs-ink) !important; border-color:var(--gs-muted); box-shadow:none; }
.btn-u.gs-big{ min-height:44px; padding:0 22px; font-size:14px; }

/* Shared hover/tap tooltip. `gs-tip` is THE one tooltip class: put it on ANY
   element (control, map toggle, status pill, info icon) and the engine in
   gsCore.js gives it a single body-appended, viewport-clamped bubble
   (.gs-tip-bubble) that reads the host's aria-label and auto-flips to whichever
   side has room - priority up > right > down > left. Callers pass NO direction.
   z-index clears app modals and body-append means no overflow/scroll/modal
   container can clip it. */
.gs-tip{ display:inline-block; cursor:pointer; }
/* gs-tip-info: the info-icon preset - a gs-tip that also renders the standalone
   red "i" glyph (drop an inline <svg> inside). Focusable + tap-to-pin for touch. */
.gs-tip-info{ position:relative; top:-1.5px; display:inline-flex; vertical-align:middle; width:16px; height:16px;
              flex:none; margin-left:6px; color:var(--gs-red); cursor:pointer;
              -webkit-tap-highlight-color:transparent; }
.gs-tip-info svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
                  stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.gs-tip-bubble{
  position:absolute; left:0; top:0; z-index:2147483000;
  max-width:240px; padding:9px 12px;
  background:var(--gs-ink); color:#fff; text-align:center;
  font:400 12px/1.4 'Inter';
  border-radius:10px; box-shadow:0 8px 24px rgba(15,17,23,0.28);
  white-space:normal; pointer-events:none;
  opacity:0; visibility:hidden; transform:translateY(2px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s; }
.gs-tip-bubble.is-on{ opacity:1; visibility:visible; transform:none; }

/* The canonical GoodSAM running-man loader - a 36px white "coin": a disc with a red ring
   border; ::before is the runner (a clean TRANSPARENT run-cycle sprite - gsRunner.png,
   28 frames - so it is perfectly centred with room around it, NOT the GIF clipped into the
   circle); ::after is the sweeping red loading arc. Centre the coin by placing it in a
   flex/grid parent. The console's full-page veil (#gsmLoading / body.loading) lives in
   master.css; the public pages each own their own veil geometry.
   border-radius is !important for the same reason as .btn-u above. */
.gsrm{ position:relative; box-sizing:border-box; display:block; flex:none; width:36px; height:36px;
    border-radius:50% !important; background:#fff; border:2px solid #e79a9a;
    box-shadow:0 4px 12px -4px rgba(15,17,23,.28), 0 0 0 1px rgba(15,17,23,.05); }
.gsrm::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:26px; height:26px; background:url(/assets/img/gsRunner.png) 0 50%/calc(28 * 26px) 26px no-repeat;
    animation:gsRun 1.15s steps(28) infinite; }
.gsrm::after{ content:""; position:absolute; inset:-2px; border-radius:50%;
    background:conic-gradient(from 0deg,#D00000,rgba(208,0,0,0) 60%);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
    animation:gsCoinSpin 1s linear infinite; }
@keyframes gsRun{ to{ background-position-x:calc(-28 * 26px); } }
@keyframes gsCoinSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .gsrm::before{ animation:none; background-position-x:calc(-14 * 26px); } .gsrm::after{ animation:none; } }

/* ==========================================================================
   GSMultiSelect - GoodSAM's own multi-select control (replaces bootstrap-select).
   Shared because consultationPublic.jsp's responder mode renders the invite
   phonebook picker and does not load master.css. Behaviour lives in gsCore.js.
   ========================================================================== */
.gsms{ position:relative; display:block; width:100%; }
select.gsms-native{ display:none !important; }
.gsms-toggle{ display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; height:36px; padding:0 11px; margin:0; font-family:inherit; font-size:13px; text-align:left; color:var(--gs-ink); background:var(--gs-input-bg); border:0.5px solid var(--gs-border); border-radius:8px; cursor:pointer; touch-action:manipulation; transition:border-color .12s, box-shadow .12s; }
.gsms-toggle:focus{ outline:none; border-color:var(--gs-red); box-shadow:0 0 0 2px rgba(208,0,0,0.12); }
.gsms-label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gsms:not(.gsms-has-value) .gsms-label{ color:var(--gs-muted); }
.gsms-caret{ flex:none; width:16px; height:16px; fill:none; stroke:var(--gs-muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; }
.gsms-open .gsms-caret{ transform:rotate(180deg); }
.gsms-disabled{ opacity:.55; }
.gsms-disabled .gsms-toggle{ cursor:not-allowed; }

/* position:fixed (JS sets left/top/width from the toggle rect) so the menu escapes
   any ancestor overflow - modals (showMessage), the fixed-height tier panel, cards.
   High z-index to sit above modal chrome. gsCore.js repositions on scroll/resize. */
.gsms-menu{ position:fixed; z-index:100000; display:none; flex-direction:column; box-sizing:border-box; padding:4px; background:var(--gs-card); border:0.5px solid var(--gs-border); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.18); }
.gsms-open .gsms-menu{ display:flex; }
html[data-theme="dark"] .gsms-menu{ box-shadow:0 12px 34px rgba(0,0,0,0.55); }

.gsms-search{ padding:2px 2px 5px; }
.gsms-search-input{ width:100%; box-sizing:border-box; height:32px; padding:0 9px; font-family:inherit; font-size:13px; color:var(--gs-ink); background:var(--gs-input-bg); border:0.5px solid var(--gs-border); border-radius:6px; outline:none; touch-action:manipulation; }
.gsms-search-input:focus{ border-color:var(--gs-red); }

.gsms-list{ list-style:none; margin:0; padding:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--gs-border) transparent; }
.gsms-list::-webkit-scrollbar{ width:10px; }
.gsms-list::-webkit-scrollbar-track{ background:transparent; }
.gsms-list::-webkit-scrollbar-thumb{ background:var(--gs-border); border-radius:6px; border:2px solid var(--gs-card); }
.gsms-list::-webkit-scrollbar-thumb:hover{ background:var(--gs-muted); }
.gsms-opt{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; cursor:pointer; color:var(--gs-ink); font-size:13px; touch-action:manipulation; }
.gsms-opt:hover{ background:rgba(0,0,0,0.05); }
html[data-theme="dark"] .gsms-opt:hover{ background:rgba(255,255,255,0.07); }
.gsms-opt.gsms-active{ background:rgba(0,0,0,0.05); }
html[data-theme="dark"] .gsms-opt.gsms-active{ background:rgba(255,255,255,0.07); }
.gsms-opt.gsms-selected{ background:rgba(208,0,0,0.10); }
html[data-theme="dark"] .gsms-opt.gsms-selected{ background:rgba(208,0,0,0.22); }
.gsms-opt-text{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.gsms-check{ flex:none; width:16px; height:16px; opacity:0; }
.gsms-opt.gsms-selected .gsms-check{ opacity:1; }
.gsms-check svg{ display:block; width:16px; height:16px; fill:none; stroke:var(--gs-red); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.gsms-opt-disabled{ opacity:.5; cursor:not-allowed; }
/* the [hidden] attr (used by live-search) must beat .gsms-opt's display:flex */
.gsms-opt[hidden], .gsms-noresults[hidden]{ display:none !important; }
.gsms-noresults{ padding:8px 10px; color:var(--gs-muted); font-size:12.5px; }

.gsms-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; padding:8px 10px 3px; border-top:1px solid var(--gs-border); }
.gsms-single .gsms-footer{ display:none; }
.gsms-count{ font-size:12px; font-weight:500; color:var(--gs-muted); white-space:nowrap; }
.gsms-done{ display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 16px; flex:none; font-family:inherit; font-size:12px; font-weight:600; line-height:1; color:#fff; background:var(--gs-red); border:0; border-radius:6px; cursor:pointer; transition:background .15s ease; }
.gsms-done:hover{ background:var(--gs-red-dark); }
.gsms-done:active{ transform:translateY(1px); }
.gsms-done:focus{ outline:none; box-shadow:0 0 0 2px rgba(208,0,0,.28); }