/* ===========================================================================
   TIYOL — the signed-in surface: /app and the auth pages.

   Loaded INSTEAD of style.css by app.html and the login/signup/welcome shell.
   /console, /org and /org/new keep style.css, so nothing in the back office
   moves because of a change here.

   HOW THIS RE-SKINS WITHOUT TOUCHING THE DASHBOARD.
   app.html styles its own components in an inline <style> block — .card, .dial,
   .callbtn, .ring, .modes, .keys, .meter, .state and the rest — and every one of
   those rules reads its colours from custom properties rather than literals.
   So the whole dashboard re-skins by redefining the tokens, and the markup, the
   softphone JavaScript, the i18n table and the toggles are all left alone. The
   legacy token block below is that mapping, and it is the entire trick.

   This sheet therefore defines ONLY: the palette, the base typography, the
   masthead and a handful of utilities. It deliberately does not restyle any
   selector the page already owns — a second opinion on .card would just be a
   specificity fight nobody wins.
   =========================================================================== */

:root{
  color-scheme: dark;

  /* the indigo fade, matching the public pages */
  --ind-000:#212B57; --ind-100:#1A2245; --ind-200:#141B34;
  --ind-300:#0E1428; --ind-400:#0A0E20;

  --ink:#F3F0EA; --ink-muted:#A6AFCB; --ink-faint:#8E98B4;
  --aqua:#4FD8C4; --aqua-hi:#7FE8D8;
  --gold:#FFC24D; --gold-hi:#FFD489;

  --hair:rgba(243,240,234,.13);
  --hair-strong:rgba(243,240,234,.26);
  --glass:rgba(243,240,234,.055);
  --glass-hi:rgba(243,240,234,.10);

  --sans:'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --serif:'Source Serif 4', ui-serif, Georgia, serif;
  --r1:10px; --r2:18px; --r3:28px; --r-full:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.3,.64,1);

  /* ---- legacy names the dashboard's inline CSS reads ---------------------
     Renaming these in app.html would mean editing the file that also holds the
     call logic, so the names stay and only the values move. */

  /* SOLID on purpose. `.callbtn[disabled]` uses this as its TEXT colour against
     --border-strong, so a gradient or a transparent value here would make the
     disabled label vanish. It is also the dial-pad key background, where a flat
     fill is what separates the keys from the page behind them. */
  --surface:#141B34;
  /* Cards and the selected mode chip: glass, so the page gradient reads through
     them the way the panels on the public pages do. */
  --surface-raised:var(--glass);
  /* Anything inset — inputs, the usage meter track, the mode switch, top-up
     buttons. Darker than the page at every depth of the fade. */
  --surface-sunken:rgba(8,11,26,.55);

  --primary:var(--aqua);
  --primary-ink:var(--aqua-hi);
  --primary-hover:var(--aqua-hi);
  --primary-tint:rgba(79,216,196,.16);

  --border-hairline:var(--hair);
  --border-strong:var(--hair-strong);
  --focus-ring:var(--gold);

  /* Gold is the "a person has to check this" colour across the whole product,
     which is exactly what the flagged-value rows and the warning call state
     mean here. */
  --attention-border:var(--gold);
  --attention-ink:var(--gold-hi);
  --attention-fill:rgba(255,194,77,.12);

  --critical-border:#FF8A7A;
  --critical-ink:#FFB3A6;
  --critical-fill:rgba(255,138,122,.12);

  --pad:24px;
}

/* The `hidden` attribute only gets display:none from the UA stylesheet, so any
   author rule that sets display outranks it. This is what keeps the incoming
   call banner and the flagged-values card hidden until they are wanted. */
[hidden]{display:none !important}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ind-200); -webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  /* 21px, as everywhere a caller reads: derived from reading distance and
     presbyopic acuity, not from taste. */
  font:400 21px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
  background:
    radial-gradient(120% 620px at 82% 0, rgba(79,216,196,.10) 0%, transparent 70%),
    radial-gradient(90% 520px at 4% 140px, rgba(255,194,77,.055) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--ind-000) 0%, var(--ind-100) 24%, var(--ind-200) 52%,
      var(--ind-300) 80%, var(--ind-400) 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;   /* the dashboard is short; keep the fade whole */
}

h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; color:var(--ink);
  letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(30px,5vw,40px); line-height:1.1; margin:0 0 10px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
a{color:var(--aqua); text-underline-offset:.2em; text-decoration-color:rgba(79,216,196,.45)}
a:hover{color:var(--aqua-hi)}
:focus-visible{outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px}

.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.small{font-size:16px; line-height:1.45; color:var(--ink-muted)}
.tnum{font-variant-numeric:tabular-nums}

/* Standalone attention block (the flagged-value callout). Gold, bordered, never
   filled loudly — it marks something a person must confirm, not an error. */
.attention{
  border:1px solid var(--attention-border); border-left-width:4px;
  border-radius:var(--r1); background:var(--attention-fill);
  color:var(--attention-ink); padding:14px 16px; font-size:17px; line-height:1.5;
}
.attention b{display:block; margin-bottom:6px}

/* ---------- masthead ----------
   A pill in normal flow rather than a fixed overlay: the dashboard is a working
   surface and a bar that follows you down it just eats room on a handset. */
.nav{
  max-width:62rem; margin:14px auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 12px 10px 20px; border-radius:var(--r-full);
  background:rgba(14,20,40,.72);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--hair); box-shadow:0 12px 38px -18px rgba(4,7,20,.9);
}
@media (max-width:900px){ .nav{margin-inline:var(--pad)} }
.nav a{text-decoration:none}
.brand{display:inline-flex; align-items:baseline; gap:11px; min-width:0; color:var(--ink)}
.wm{font:700 clamp(22px,2.3vw,26px)/1 var(--sans); letter-spacing:-.012em;
  display:inline-flex; align-items:baseline; white-space:nowrap; color:var(--ink)}
.wm svg{height:1em; width:auto; display:inline-block; vertical-align:baseline}
.wmi{margin-right:.012em}
/* cool dot = the person, warm dot = the institution. The two-dot logic is the
   part of the brand that survives every palette, so it is never restyled. */
.wm .d1{fill:var(--aqua-hi)} .wm .d2{fill:var(--gold)}
.say{font:700 10px/1 var(--sans); letter-spacing:.2em; color:var(--ink-faint);
  text-transform:uppercase}
@media (max-width:620px){ .say{display:none} }

.langlink{
  font:400 16px/1 var(--sans); color:var(--ink-muted); text-decoration:none;
  padding:10px 13px; border-radius:var(--r-full);
  transition:color .25s, background .25s;
}
.langlink:hover{color:var(--ink); background:var(--glass-hi)}

/* ---------- auth pages ----------
   The shell in app_routes.py brings its own .auth rules and reads the same
   tokens, so only the descriptor beside the wordmark needs anything here. */
.navleft{display:flex; align-items:center; gap:14px; min-width:0}
.what{font-size:13px; line-height:1.35; color:var(--ink-muted);
  padding-left:14px; border-left:1px solid var(--border-hairline)}
@media (max-width:560px){ .what{display:none} }

/* ---------- cross-document view transitions ----------
   Signing in should feel like the same site continuing, not a different one
   starting. Ignored where unsupported. */
@view-transition{ navigation:auto; }
.brand .wm{ view-transition-name:wordmark; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.32s; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}