/* ─────────────────────────────────────────────────────────────────────────────
   CallMatrix — design tokens + self-hosted fonts
   Ported from the 112-optx-new prototype (2026-07-16), font switched to
   Montserrat per user request 2026-07-17.

   Fonts are self-hosted. Nothing here may reference fonts.googleapis.com: the
   site is IP-locked and must work with no outbound internet.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Scrollbars: invisible everywhere, scrolling still works ──────────────────
   Applied to every element, not just body, because the panels that scroll are
   nested (lists, chat, tables, the map layer box). Content still scrolls with
   wheel, touch, keyboard and programmatic scrollTo — only the visible track is
   removed, so nothing becomes unreachable. */
* {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge/IE */
}
*::-webkit-scrollbar {            /* Chrome, Edge, Safari */
  width: 0;
  height: 0;
  display: none;
}

/* ── Montserrat — variable, self-hosted ────────────────────────────────────────
   One variable woff2 per Google subset (weight 100–900 in each). Montserrat's
   cyrillic-ext subset natively covers Uzbek Қ/Ғ/Ҳ (verified 146 glyphs), so
   unlike Onest it needs no patching. Files downloaded from Google Fonts at build
   time; runtime never touches the CDN.
   ───────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  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;
}

/* ── Material Symbols Rounded — subset ─────────────────────────────────────────
   187 icons, subset from the 5.2 MB full face. Ligatures live in rlig/rclt.
   Add an icon → append to scripts/icons.txt and re-run scripts/subset_icons.py;
   it will not simply appear (an unsubset name renders as its literal text).
   ─────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-subset.woff2') format('woff2');
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.material-symbols-rounded.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --page-bg: #eef0f8;
  --card-bg: #ffffff;
  --chip-bg: #f1f2fa;
  --input-bg: #f1f2fa;
  --th-bg: #f7f8fd;
  --border: #f2f3fa;
  --border-strong: #e3e5f0;

  --text: #161829;
  --sub: #6f7591;
  --mut: #a6abc4;
  --row-text: #454a63;
  --link: #2374c4;
  --link-hover: #0a3358;

  --acc: #3b8ede;
  --acc-deep: #1f5fae;
  --acc-grad: linear-gradient(135deg, #3b8ede, #1f5fae);
  --acc-soft: #e9f1fe;
  --on-acc: #ffffff;

  --red: #e8506a;
  --orange: #f08a3c;
  --green: #2fb98a;
  --yellow: #e8a13c;
  --purple: #8a5cf5;
  --cyan: #22b8c9;

  --shadow: 0 2px 10px rgba(80, 80, 140, .05);
  --shadow-lg: 0 8px 30px rgba(80, 80, 140, .12);

  --r-pill: 999px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-lg: 18px;
  --fs-md: 15px;
  --fs-base: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;

  --sidebar: 272px;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --page-bg: #1c2532;
  --card-bg: #25303f;
  --chip-bg: rgba(255, 255, 255, .07);
  --input-bg: rgba(255, 255, 255, .07);
  --th-bg: #2c3a4c;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);

  --text: #dde6f0;
  --sub: #9db0c5;
  --mut: #71839a;
  --row-text: #c3d0de;
  --link: #6fb0ee;
  --link-hover: #a8cff6;

  --acc-soft: rgba(59, 142, 222, .16);

  --shadow: 0 2px 10px rgba(0, 0, 0, .22);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .38);
}

/* Clock: tap the header clock to blow it up over a blurred backdrop. The
   overlay is always mounted and toggled via display, so these replay on show. */
@keyframes cmScrimIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cmClockPop {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: 1; transform: scale(1); }
}