/* ============================================================
   GP Team Hub - base.css
   Design tokens, reset, and the application shell: sidebar, top bar,
   search, account panel, buttons, forms, page headings.
   Content patterns live in components.css.
   Per-page element rules live in pages.css.

   COLOR RULE: :root is the only place a literal color value appears.
   Every rule below references a token. Changing a token changes the
   site; nothing has to be hunted for.

   Built mobile first. The sidebar is a drawer until 900px, where it
   pins open. This is a field tool used on a phone more than a desk.
   ============================================================ */

:root{
  /* ---------- Brand source ----------
     Heartland Science Blue and the Global Payments navy, with the
     Heartland brand grey. Every other value here is derived from
     these three so the tool reads as company software. */
  --brand-blue:#0072ce;
  --brand-navy:#003b71;
  --brand-grey:#2f3a45;

  /* ---------- Surfaces ----------
     A five-step ramp on the brand grey hue. Surfaces get lighter as
     they come forward, which is what separates one block from the
     next now that nothing carries a drop shadow. */
  --surface-sunken:#0f141a;
  --surface-page:#151b22;
  --surface-raised:#1c232b;
  --surface-high:#252e39;
  --surface-hover:#2d3743;

  /* ---------- Lines ---------- */
  --line:#2f3a45;
  --line-strong:#3f4c5a;

  /* ---------- Type ----------
     Three weights of ink. Hierarchy comes from these steps plus size
     and weight, never from giving a heading its own hue. */
  --ink:#e9eef3;
  --ink-soft:#a9b5c2;
  --ink-faint:#78858f;
  --ink-inverse:#ffffff;

  /* ---------- Accent ----------
     The brand blue at full strength is too dark to read as type on a
     dark surface, so text and icons use a lightened step of the same
     hue and the true brand value stays on filled buttons, where white
     sits on top of it rather than beside it. */
  --accent:#3e9be8;
  --accent-strong:#0072ce;
  --accent-hover:#1183e2;
  --accent-wash:#1a2a3a;
  --accent-edge:#2c567c;
  --accent-ring:#3e9be866;
  --accent-ring-soft:#3e9be833;

  /* ---------- Danger ----------
     Fires only on real failure: errors, destructive actions,
     disqualifiers, unverified data. Never decoration. */
  --danger:#ef5f62;
  --danger-wash:#33212a;
  --danger-edge:#5e3038;
  --danger-ink:#f6ccd0;

  /* ---------- Overlays ---------- */
  --scrim:#0a0e13b3;
  --topbar-veil:#151b22f2;
  --shadow-overlay:0 16px 44px #00000085, 0 2px 6px #00000059;
  --shadow-drawer:0 0 48px #000000a6;

  /* ---------- Shell metrics ---------- */
  --sidebar-w:244px;
  --topbar-h:56px;
  --secbar-h:42px;
  --radius:10px;
  --radius-sm:7px;
  --radius-pill:999px;
}

/* ============================================================
   Light theme — opt in only.
   Dark above is the default and stays the default. This block does
   nothing until a reader turns it on, and the choice is remembered.
   It exists because the same person reading this in a parked car at
   2pm and at their desk at 9pm does not want the same screen.

   Only tokens are overridden. No rule anywhere else in the site is
   aware there is more than one theme.
   ============================================================ */
[data-theme="light"]{
  --surface-sunken:#e9edf2;
  --surface-page:#f5f7fa;
  --surface-raised:#ffffff;
  --surface-high:#eef1f6;
  --surface-hover:#e2e8ef;

  --line:#d7dde5;
  --line-strong:#b2bcc8;

  --ink:#16202b;
  --ink-soft:#4b5a68;
  --ink-faint:#67747f;
  --ink-inverse:#ffffff;

  /* On white the brand blue is dark enough to read as type, so the
     lightened step the dark theme needs is not used here. */
  --accent:#0063b1;
  --accent-strong:#0072ce;
  --accent-hover:#005ba6;
  --accent-wash:#e7f1fb;
  --accent-edge:#a9cdec;
  --accent-ring:#0072ce66;
  --accent-ring-soft:#0072ce33;

  --danger:#bf262c;
  --danger-wash:#fdeded;
  --danger-edge:#efb8b8;
  --danger-ink:#7a1a1e;

  --scrim:#16202ba6;
  --topbar-veil:#f5f7faf2;
  --shadow-overlay:0 16px 44px #16202b26, 0 2px 6px #16202b17;
  --shadow-drawer:0 0 48px #16202b3d;
}

/* ---------------- Reset ---------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--surface-page);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font:inherit;}
svg{display:block;}

/* Focus is visible everywhere and always the same shape, so keyboard
   users never have to guess where they are. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------------- Layout ---------------- */
.layout{min-height:100vh;}
.content{display:flex;flex-direction:column;min-height:100vh;}
.page{
  flex:1;
  width:100%;
  max-width:1060px;
  margin:0 auto;
  padding:20px 16px 72px;
}

/* ---------------- Sidebar ---------------- */
.sidebar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--surface-sunken);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  z-index:60;
  transform:translateX(-100%);
  transition:transform .2s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.sidebar.open{transform:translateX(0);box-shadow:var(--shadow-drawer);}

.side-brand{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;}
.side-logo svg{width:28px;height:28px;}
.side-title{font-weight:700;font-size:.98rem;letter-spacing:.2px;}

.side-nav{display:flex;flex-direction:column;gap:1px;padding:4px 8px;}

/* Grouping the nav by moment of need is the point of the whole
   ordering, so the group labels have to be legible rather than
   decorative whitespace. */
.side-group{
  font-size:.66rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-faint);
  padding:14px 11px 5px;
}
.side-group:first-child{padding-top:4px;}
.side-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 11px;
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
  font-size:.92rem;
  font-weight:500;
  transition:background .12s,color .12s;
}
.side-item:hover{background:var(--surface-raised);color:var(--ink);text-decoration:none;}

/* The active item is filled rather than tinted, so the current page is
   readable at a glance from across a phone screen. */
.side-item.active{background:var(--accent-strong);color:var(--ink-inverse);font-weight:600;}
.side-item.active:hover{background:var(--accent-hover);color:var(--ink-inverse);}
.side-item.active .side-ic{color:var(--ink-inverse);}
.side-ic{width:18px;height:18px;flex-shrink:0;}

.side-foot{
  margin-top:auto;
  padding:14px;
  color:var(--ink-faint);
  font-size:.73rem;
  line-height:1.5;
  border-top:1px solid var(--line);
}

.backdrop{position:fixed;inset:0;background:var(--scrim);z-index:55;}

/* ---------------- Top bar ---------------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:8px;
  height:var(--topbar-h);
  padding:0 10px;
  background:var(--topbar-veil);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:var(--radius-sm);
  color:var(--ink-soft);
  flex-shrink:0;
}
.icon-btn:hover{background:var(--surface-raised);color:var(--ink);}
.icon-btn svg{width:21px;height:21px;}

/* ---------------- Section bar ----------------
   Built by app.js from the current page's headings. It sits directly
   under the top bar and tracks scroll position, so a reader who has
   scrolled deep into a long page can still see where they are and jump
   without scrubbing back up. Scrolls horizontally on a phone. */
.secbar{
  position:sticky;
  top:var(--topbar-h);
  z-index:45;
  display:flex;
  gap:2px;
  align-items:center;
  height:var(--secbar-h);
  padding:0 8px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  background:var(--topbar-veil);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.secbar::-webkit-scrollbar{display:none;}
.secbar-item{
  flex:0 0 auto;
  padding:5px 11px;
  border-radius:var(--radius-pill);
  color:var(--ink-faint);
  font-size:.81rem;
  font-weight:500;
  white-space:nowrap;
  transition:color .12s,background .12s;
}
.secbar-item:hover{color:var(--ink);background:var(--surface-raised);text-decoration:none;}
.secbar-item.here{color:var(--ink);background:var(--surface-high);}

/* ---------------- Search ----------------
   Search is the fastest route to any fact on this site, so it takes
   the whole middle of the bar rather than sitting in a corner. */
.topbar-search{position:relative;flex:1;min-width:0;}
.search-ic{
  position:absolute;
  left:10px;top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;
  color:var(--ink-faint);
  pointer-events:none;
}
#searchInput{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  padding:8px 12px 8px 33px;
  font-size:.91rem;
  outline:none;
}
#searchInput::placeholder{color:var(--ink-faint);}
#searchInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

.search-results{
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:0;
  background:var(--surface-high);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  max-height:min(64vh,440px);
  overflow-y:auto;
  box-shadow:var(--shadow-overlay);
}
.sr-group{
  padding:9px 12px 3px;
  font-size:.67rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--ink-faint);
}
.sr-item{display:block;padding:9px 12px;color:var(--ink);font-size:.9rem;}
.sr-item .sr-d{
  color:var(--ink-faint);
  font-size:.78rem;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sr-item:hover,.sr-item.sel{background:var(--surface-hover);text-decoration:none;}
.sr-empty{padding:14px 12px;color:var(--ink-faint);font-size:.88rem;}

/* ---------------- Theme toggle ---------------- */
.theme-btn{
  display:flex;align-items:center;gap:7px;
  flex-shrink:0;
  padding:7px 11px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  color:var(--ink-soft);
  font-size:.85rem;
  font-weight:600;
}
.theme-btn:hover{background:var(--surface-raised);color:var(--ink);border-color:var(--line-strong);}

@media (max-width:760px){
  .theme-text{display:none;}
  .theme-btn{padding:7px 9px;}
}

/* ---------------- Stuck ----------------
   The job holds more facets than working memory can carry, and when it
   overflows the result is freeze. Freezing is not solved by better
   organized information, because the effort of going to look is the
   thing that has run out. So this is one tap from every screen, it
   never asks the reader to categorize their problem before helping,
   and it always ends in a phone number or two clicks. */
.stuck-btn{
  display:flex;align-items:center;gap:7px;
  flex-shrink:0;
  padding:7px 12px;
  border-radius:var(--radius);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.88rem;
  font-weight:700;
}
.stuck-btn:hover{background:var(--accent-hover);}
.stuck-btn i{font-size:.9rem;}

.stuck-sheet{
  position:fixed;inset:0;
  z-index:80;
  background:var(--scrim);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:14px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* An author display rule beats the browser's [hidden]{display:none},
   so without this the panel renders open and nothing can shut it. Any
   element that is both hidden by attribute and given a display value
   needs its own [hidden] rule. */
.stuck-sheet[hidden]{display:none;}

body.stuck-open{overflow:hidden;}

.stuck-panel{
  width:100%;
  max-width:620px;
  margin-top:6vh;
  background:var(--surface-high);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
  padding:15px;
}
.stuck-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.stuck-title{font-size:1.12rem;font-weight:700;flex:1;}

.stuck-search{position:relative;}
.stuck-ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:.92rem;pointer-events:none;
}
#stuckInput{
  width:100%;
  background:var(--surface-page);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  color:var(--ink);
  padding:12px 13px 12px 37px;
  font-size:1rem;
  outline:none;
}
#stuckInput::placeholder{color:var(--ink-faint);}
#stuckInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

/* Offered before any typing, because picking from six is cheaper than
   composing a search when your head is already full. */
.stuck-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.stuck-quick[hidden]{display:none;}
.stuck-chip{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  padding:7px 13px;
  font-size:.83rem;
  font-weight:600;
  color:var(--ink);
  background:var(--surface-raised);
}
.stuck-chip:hover{border-color:var(--accent-edge);background:var(--surface-hover);}

.stuck-list{display:flex;flex-direction:column;gap:7px;margin-top:12px;}

/* The floor of the panel. When nothing fits or the choice itself is the
   blocker, doors are the answer, because they need no decision and they
   are the activity that makes every other one possible. */
.stuck-floor{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.stuck-floor-label{
  font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ink-faint);
}
.stuck-floor-text{color:var(--ink-soft);font-size:.88rem;line-height:1.55;margin-top:5px;}
.stuck-floor-go{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:10px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:.92rem;
  padding:11px 15px;
  border-radius:var(--radius-sm);
}
.stuck-floor-go:hover{background:var(--accent-hover);text-decoration:none;}

@media (max-width:520px){
  .stuck-btn-text{display:none;}
  .stuck-btn{padding:7px 10px;}
  .stuck-panel{margin-top:0;}
}

/* ---------------- Account panel ---------------- */
.auth-area{position:relative;flex-shrink:0;}
.auth-btn{
  display:flex;align-items:center;gap:7px;
  padding:7px 10px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:.89rem;
  max-width:190px;
}
.auth-btn:hover{background:var(--surface-raised);}
.auth-btn .side-ic{color:var(--ink-faint);}
.auth-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.avatar{
  width:23px;height:23px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.76rem;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
  text-transform:uppercase;
  flex-shrink:0;
}
.chev{width:13px;height:13px;color:var(--ink-faint);flex-shrink:0;}

.auth-pop{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(280px,calc(100vw - 24px));
  background:var(--surface-high);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:9px;
  box-shadow:var(--shadow-overlay);
  z-index:70;
}
.pop-link{
  display:block;
  width:100%;
  text-align:left;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:.9rem;
}
.pop-link:hover{background:var(--surface-hover);text-decoration:none;}
.pop-danger{color:var(--danger);}
.pop-form{display:flex;flex-direction:column;gap:5px;padding:4px 4px 8px;}
.pop-label{font-size:.73rem;color:var(--ink-faint);margin-top:4px;}
.pop-input{
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:8px 10px;
  font-size:.91rem;
  outline:none;
}
.pop-input:focus{border-color:var(--accent);}
.pop-foot{
  padding:8px 4px 2px;
  color:var(--ink-faint);
  font-size:.77rem;
  text-align:center;
  border-top:1px solid var(--line);
  margin-top:4px;
  line-height:1.7;
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:var(--surface-high);
  color:var(--ink);
  font-size:.91rem;
  font-weight:600;
  transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--surface-hover);text-decoration:none;}

/* The one place the true brand blue appears at full strength. */
.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-danger{background:var(--danger-wash);border-color:var(--danger-edge);color:var(--danger-ink);}
.btn-danger:hover{background:var(--danger-edge);}
.btn-sm{padding:6px 11px;font-size:.82rem;}
.btn-block{width:100%;margin-top:8px;}

/* ---------------- Forms ---------------- */
.form-card{
  max-width:420px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}
.form-row{margin-bottom:13px;}
.form-label{display:block;font-size:.81rem;color:var(--ink-soft);margin-bottom:5px;}
.form-input{
  width:100%;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:10px 12px;
  font-size:.94rem;
  outline:none;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.form-hint{font-size:.76rem;color:var(--ink-faint);margin-top:4px;}

/* ---------------- Alerts ---------------- */
.alert{
  border-radius:var(--radius-sm);
  padding:11px 14px;
  font-size:.9rem;
  margin-bottom:16px;
  border:1px solid var(--line);
  background:var(--surface-high);
}
.alert-error{border-color:var(--danger-edge);background:var(--danger-wash);color:var(--danger-ink);}
.alert-ok{border-color:var(--accent-edge);background:var(--accent-wash);color:var(--ink);}

/* ---------------- Footer ---------------- */
.site-foot{
  padding:18px;
  text-align:center;
  color:var(--ink-faint);
  font-size:.77rem;
  border-top:1px solid var(--line);
}

/* ---------------- Page headings ----------------
   The old scale ran everything between .85rem and 1rem, so nothing
   led and nothing followed. These steps are far enough apart that a
   reader scanning mid-scroll can tell a section from a card title
   from body copy without reading any of them. */
.page-head{margin:6px 0 26px;}
.page-head h1{font-size:1.85rem;line-height:1.2;font-weight:700;letter-spacing:-.2px;}
.page-head .lead{color:var(--ink-soft);margin-top:8px;max-width:64ch;font-size:.97rem;line-height:1.6;}

h2{
  font-size:1.22rem;
  font-weight:700;
  letter-spacing:-.1px;
  margin:44px 0 6px;
  scroll-margin-top:calc(var(--topbar-h) + var(--secbar-h) + 12px);
}
h2:first-of-type{margin-top:0;}
.sub{color:var(--ink-soft);margin-bottom:16px;font-size:.92rem;line-height:1.6;max-width:70ch;}

/* ---------------- Skip link ---------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--surface-high);color:var(--ink);
  padding:8px 14px;border-radius:0 0 var(--radius-sm) 0;z-index:100;
}
.skip-link:focus{left:0;}

/* ---------------- Tablet ---------------- */
@media (min-width:640px){
  .page{padding:24px 24px 80px;}
  .topbar{padding:0 16px;gap:10px;}
  .topbar-search{max-width:460px;margin-right:auto;}
}

/* ---------------- Desktop ---------------- */
@media (min-width:900px){
  .sidebar{transform:none;box-shadow:none;}
  .content{margin-left:var(--sidebar-w);}
  .burger{display:none;}
  .backdrop{display:none !important;}
  .page{padding:30px 34px 88px;}
  .topbar{padding:0 22px;}
  .topbar-search{max-width:520px;}
}

/* ---------------- Small phones ---------------- */
@media (max-width:400px){
  .auth-name{display:none;}
  .auth-btn{padding:7px;}
  .chev{display:none;}
  .page-head h1{font-size:1.6rem;}
}