/* KADGIS shared theme — tokens, type and browser surfaces used by the office app and the survey app.
   Colours come from the KADGIS seal: deep navy and amber, on cool register paper. */

@font-face {
  font-family: 'Public Sans';
  src: url('/common/fonts/public-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+20A6;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/common/fonts/public-sans-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* brand */
  --navy-950: #00003a;
  --navy-900: #00004f;
  --navy: #000068;
  --navy-700: #171b86;
  --navy-600: #2c319c;
  --navy-300: #9aa0dd;
  --navy-200: #c3c7ee;
  --navy-100: #e1e3f6;
  --navy-50: #f1f2fb;
  --amber: #f8a82c;
  --amber-700: #9a5f00; /* amber as text on light grounds */
  --amber-100: #fde9c7;
  --amber-50: #fff6e6;

  /* paper and ink */
  --ground: #eef0f6;
  --sheet: #ffffff;
  --sheet-2: #f7f8fc;
  --ink: #14172e;
  --ink-2: #464b6b;
  --ink-3: #62678a;
  --rule: #d5d8e6;
  --rule-2: #e6e8f1;
  --rule-strong: #14172e;

  /* states (printed-stamp tints) */
  --ok: #17663f;   --ok-bg: #eaf6ef;   --ok-line: #a3d2b8;
  --info: #1d4f99; --info-bg: #ecf2fc; --info-line: #a8c1e8;
  --warn: #8f5300; --warn-bg: #fff4e2; --warn-line: #ecc68a;
  --bad: #a3221a;  --bad-bg: #fcefed;  --bad-line: #ecb0a9;
  --mute: #4f5474; --mute-bg: #f0f1f6; --mute-line: #cfd2e0;

  --radius: 3px;
  --hair: 1px solid var(--rule);
  --shadow-sheet: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-pop: 0 12px 28px -8px rgba(0, 0, 0, .24), 0 2px 6px rgba(0, 0, 0, .08);
  --shadow-file: -18px 0 40px -18px rgba(0, 0, 0, .35);
  --ease: cubic-bezier(.16, 1, .3, 1);

  --font: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; text-wrap: balance; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
::selection { background: var(--amber-100); color: var(--ink); }
input, textarea { caret-color: var(--navy); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Standard scrollbar styling only where the ::-webkit-scrollbar rules are unsupported (Chromium ignores those
   rules once scrollbar-width is set, which would bring back its default arrow buttons). */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--navy-200) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--navy-200); border: 3px solid transparent; background-clip: content-box; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--navy-300); }

/* ---------------------------------------------------------------- the seal loader
   Twelve amber dots around a navy ring, lighting in sequence like the seal's border. */
.seal-loader { --s: 44px; position: relative; width: var(--s); height: var(--s); display: inline-block; }
.seal-loader::before {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  border: 2px solid var(--navy); opacity: .9;
}
.seal-loader i {
  position: absolute; left: 50%; top: 50%; width: 12%; height: 12%; margin: -6% 0 0 -6%;
  border-radius: 50%; background: var(--amber); opacity: .25;
  transform: rotate(calc(var(--n) * 30deg)) translateY(calc(var(--s) * -.44));
  animation: seal-dot 1.2s linear infinite; animation-delay: calc(var(--n) * .1s - 1.2s);
}
@keyframes seal-dot { 0% { opacity: 1; } 60%, 100% { opacity: .2; } }

.spin {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .seal-loader i { animation: none; opacity: .7; }
}
::-webkit-scrollbar-button, ::-webkit-scrollbar-button:single-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }