/* ============================================================================
   eabassets - kit/tokens.css
   The EAB palette and the primitives. Every colour in the app is one of these
   variables; no component stylesheet may carry a hard-coded colour.
   Brand (EAB Branding Guidelines 4/2024):
     287  #002F87 navy, the brand surface        293  #0055B8 links, primary
     3517 #BB0012 red, destructive and alerts    299  #00A0DF light blue accent
     446  #454649 body text                      10 C #636569 muted text
     636  #E5E1E6 light grey                     2767 #12284C deep navy (dark)
   Headings Optima (Candara / Gill Sans / Poppins fall back), body Open Sans.
   ==========================================================================*/

/* ---------------------------------------------------------------- 1. light */
:root{
  --sat:env(safe-area-inset-top, 0px);   /* the iOS status bar / notch inset, read by kit/ui.js safeTop() for anything placed by script */
  --sab:env(safe-area-inset-bottom, 0px);
  /* brand, raw */
  --brand:#002F87;         /* 287  */
  --brand-deep:#12284C;    /* 2767 */
  --brand-dark:#002248;    /* 287 shaded, the login gradient floor */
  --brand-grey:#E5E1E6;    /* 636  */

  /* surfaces */
  --bg:#F4F5F8;            /* the page */
  --panel:#ffffff;         /* cards, popovers, the grid */
  --panel2:#F7F7F7;        /* a second surface inside a card (table heads) */
  --bg2:#EDF0F6;           /* row hover, inset wells */
  --line:#D9DDE6;          /* every hairline */
  --line2:#E9E9E9;         /* the quieter hairline */

  /* type */
  --txt:#454649;           /* 446 C */
  --heading:#002F87;       /* 287 */
  --muted:#636569;         /* 10 C */
  --faint:#9095A0;

  /* brand roles */
  --accent:#0055B8;        /* 293: links, primary buttons */
  --accent-hover:#00448F;
  --accent-soft:rgba(0,85,184,.09);
  --accent-txt:#ffffff;
  --sky:#00A0DF;           /* 299 */
  --sky-soft:rgba(0,160,223,.13);
  --red:#BB0012;    --red-soft:rgba(187,0,18,.09);
  --green:#1B8A4B;  --green-soft:rgba(27,138,75,.11);
  --amber:#A76E00;  --amber-soft:rgba(167,110,0,.12);
  --teal:#0E7C8B;   --teal-soft:rgba(14,124,139,.12);
  --purple:#6B3FA0; --purple-soft:rgba(107,63,160,.12);
  --pink:#B8347E;   --pink-soft:rgba(184,52,126,.12);
  --orange:#C25E12; --orange-soft:rgba(194,94,18,.12);
  --grey:#636569;   --grey-soft:rgba(99,101,105,.12);

  /* row 1: the navy bar */
  --bar-bg:#002F87;
  --bar-txt:#ffffff;
  --bar-muted:rgba(255,255,255,.80);
  --bar-line:rgba(255,255,255,.20);
  --bar-hover:rgba(255,255,255,.14);
  --bar-grad:linear-gradient(90deg,#002F87 0%,#00327F 55%,#12284C 100%);

  /* row 2: the white submenu */
  --sub-bg:#ffffff;
  --sub-txt:#636569;
  --sub-on:#0055B8;
  --sub-line:#D9DDE6;

  /* login */
  --login-grad:linear-gradient(150deg,#002F87 0%,#00307E 45%,#12284C 100%);

  /* depth */
  --shadow:0 1px 1px rgba(18,40,76,.04),0 4px 14px rgba(18,40,76,.06);
  --shadow-md:0 2px 6px rgba(18,40,76,.08),0 12px 28px rgba(18,40,76,.10);
  --shadow-lg:0 24px 64px rgba(18,40,76,.24);
  --backdrop:rgba(18,40,76,.45);
  --backdrop-light:rgba(18,40,76,.15);   /* drawers: a hint of a scrim, not a blackout */

  /* geometry */
  --radius-card:8px;
  --radius-ctl:6px;
  --pill:100px;
  --gutter:24px;
  --bar-h:56px;
  --sub-h:44px;
  --chrome-h:100px;        /* bar + submenu, for sticky offsets */
  --cell-y:9px;
  --cell-x:14px;

  /* motion */
  --t:.16s;
  --ease:cubic-bezier(.4,0,.2,1);

  /* type */
  --font:"Open Sans",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-head:Optima,"URW Classico",Candara,"Gill Sans","Gill Sans MT",Poppins,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  color-scheme:light;
}

/* ----------------------------------------------------------------- 2. dark */
/* Neutral dark surfaces, with color reserved for actions and status. */
html[data-theme="dark"]{
  --bg:#101010;
  --panel:#1A1A1A;
  --panel2:#222222;
  --bg2:#292929;
  --line:#424242;
  --line2:#303030;

  --txt:#EDEDED;
  --heading:#ffffff;
  --muted:#B8B8B8;
  --faint:#929292;

  --accent:#4FB4EE;
  --accent-hover:#7CCAF5;
  --accent-soft:rgba(79,180,238,.16);
  --accent-txt:#101010;
  --sky:#00A0DF;
  --sky-soft:rgba(0,160,223,.18);
  --red:#FF6B77;    --red-soft:rgba(255,107,119,.16);
  --green:#4CC98A;  --green-soft:rgba(76,201,138,.16);
  --amber:#E5B152;  --amber-soft:rgba(229,177,82,.16);
  --teal:#3FC2D4;   --teal-soft:rgba(63,194,212,.16);
  --purple:#B197E4; --purple-soft:rgba(177,151,228,.18);
  --pink:#F080C2;   --pink-soft:rgba(240,128,194,.18);
  --orange:#F0955A; --orange-soft:rgba(240,149,90,.18);
  --grey:#B8B8B8;   --grey-soft:rgba(184,184,184,.16);

  --bar-bg:#000000;
  --bar-txt:#ffffff;
  --bar-muted:rgba(255,255,255,.72);
  --bar-line:rgba(255,255,255,.14);
  --bar-hover:rgba(255,255,255,.10);
  --bar-grad:linear-gradient(90deg,#000000 0%,#1A1A1A 100%);

  --sub-bg:#1A1A1A;
  --sub-txt:#B8B8B8;
  --sub-on:#4FB4EE;
  --sub-line:#424242;

  --login-grad:linear-gradient(#000000,#000000);

  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.35);
  --shadow-md:0 2px 6px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.4);
  --shadow-lg:0 30px 90px rgba(0,0,0,.6);
  --backdrop:rgba(0,0,0,.66);
  --backdrop-light:rgba(0,0,0,.22);

  color-scheme:dark;
}

/* -------------------------------------------------------------- 3. reset  */
*{box-sizing:border-box}
html{height:100%}
/* Paint the entire document, not just the initial viewport. The root has a
   separate phone-chrome color, which must never leak through long pages. */
body{min-height:100%;height:auto;display:flow-root}
/* The native-feel rules, all in one place so no screen has to remember them:
   - overscroll-behavior:none stops the whole page rubber-banding past its ends, which is the
     plainest "this is a web page" giveaway on an iPhone. Page panels hand vertical movement back to the page at their limits;
     dialog and menu surfaces contain it so the page behind them stays still.
   - text-size-adjust stops iOS quietly inflating type.
   - touch-action:manipulation drops the 300 ms double-tap-to-zoom wait on anything you tap.
     Pinch zoom is untouched, and the things meant to be pinched (an image or PDF preview, the
     crop editor, the signature pad) keep the browser's own gestures through .zoomable. */
html{background:var(--bar-bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none}
a,button,input,select,textarea,summary,label,[role=button],[tabindex]{touch-action:manipulation}
a,button,input,select,textarea,[role=button]{-webkit-tap-highlight-color:rgba(0,85,184,.12)}
.zoomable,.zoomable img,img.zoomable,embed,iframe,object{touch-action:auto}
/* every inner scroller keeps its own scrolling and its momentum */
/* Page panels must hand vertical swipes back to the page at their limits.
   Only the outer dialog/menu surface contains scrolling, so nested panels can
   hand off to their dialog without moving the underlying page. */
.scrollx,.dg-scroll,.dg-colsetup,.legend,.tablewrap,.dual .dl,.subbar,.tabs,.mailtext,.rec .rail,.frail,.manualtoc,.codeblock{
  overscroll-behavior-x:contain;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;
}
.drawer .dbody,.modal .mbody,.pop .list,.picklist{
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
body{
  overscroll-behavior:none;
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:13px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-head);font-weight:600;line-height:1.25;color:var(--heading);letter-spacing:.005em}
p{margin:0 0 10px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{font-family:var(--font-head)}
table{border-collapse:collapse;width:100%}

/* The UA enforces [hidden] at the lowest specificity, so any author
   display: rule beats it and overlays ship permanently painted. */
[hidden]{display:none!important}

/* ------------------------------------------------------------- 4. focus   */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
::selection{background:var(--accent-soft);color:var(--txt)}

/* --------------------------------------------------------- 5. scrollbars  */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
html{scrollbar-color:var(--line) var(--bg)}
html::-webkit-scrollbar-track,html::-webkit-scrollbar-corner{background:var(--bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border:3px solid transparent;background-clip:content-box;border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ------------------------------------------------------------ 6. helpers  */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.nowrap{white-space:nowrap}
.grow{flex:1}
.right{text-align:right}
.head{font-family:var(--font-head)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* On a phone the ribbon gradient runs top to bottom, so the strip behind the iOS status bar (which the system paints from
   theme-color, the same 287 blue the ribbon starts with) and the ribbon read as one surface. Sideways, the strip and the
   bar would part company at the right edge. */
@media (max-width:760px){
  :root{--bar-grad:linear-gradient(180deg,#002F87 0%,#002F87 35%,#0A2C72 100%)}
  :root[data-theme="dark"]{--bar-grad:linear-gradient(180deg,#000000 0%,#000000 35%,#1A1A1A 100%)}
}