/* tokens.css is deliberately NOT @import-ed here.
   The page links it itself, one line ahead of this file, so that it carries
   the same ?v= cache-busting query every other asset gets. An @import cannot:
   the query lands on this file's URL and is never passed on, so a change to
   the palette alone would sit invisible behind a cached copy until something
   else in this file happened to change. The Lit components already load the
   two sheets separately for the same reason — CSSStyleSheet.replaceSync
   discards @import outright — so this keeps both paths consistent. */

/* Material Symbols, subset to the icons this app actually renders.
   Regenerate with scripts/build-icon-font.mjs after adding an icon; leaving it
   stale shows the icon's name as words, which is loud and obvious rather than
   silently blank. */
@font-face {
  font-family: "NJ Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("nj-icons.woff2") format("woff2");
}

/* Icon names are written as text — <i>forum</i> — and the font's ligatures
   turn them into glyphs. The app has no other use for <i>, so this styles the
   element rather than adding a class to every one of them. */
i {
  font-family: "NJ Icons";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
/* Any `display` from a class beats the UA sheet's `[hidden]`, which silently
   un-hides anything the auth gate is trying to keep hidden. */
[hidden] {
  display: none !important;
}

body {
  font-family: var(--nj-font);
  font-size: var(--nj-text-base);
  color: var(--nj-text);
  background: var(--nj-surface-sunken);
}

/* Numeric columns: tabular figures keep digits on a shared grid so a column of
   phone numbers or durations reads as a column. */
.num,
.e164,
.duration {
  font-family: var(--nj-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.e164 {
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.duration {
  text-align: right;
  white-space: nowrap;
}

.nj-card {
  background: var(--nj-surface-raised);
  border: 1px solid var(--nj-border);
  border-radius: var(--nj-radius);
  padding: var(--nj-space-6);
}

.nj-muted {
  color: var(--nj-text-muted);
}

.nj-table {
  width: 100%;
  border-collapse: collapse;
}

.nj-table th,
.nj-table td {
  padding: var(--nj-space-3) var(--nj-space-2);
  border-bottom: 1px solid var(--nj-border);
  text-align: left;
  vertical-align: middle;
}

.nj-table th {
  font-size: var(--nj-text-sm);
  font-weight: 600;
  color: var(--nj-text-muted);
}

.nj-table tr:last-child td {
  border-bottom: none;
}

/* Chips are styled here rather than in the component because every component
   renders into the light DOM. */
.nj-chip {
  display: inline-block;
  padding: var(--nj-space-1) var(--nj-space-3);
  border-radius: var(--nj-radius-pill);
  font-size: var(--nj-text-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--nj-ended);
  background: var(--nj-ended-surface);
}

.nj-chip[data-state="ringing"] {
  color: var(--nj-ringing);
  background: var(--nj-ringing-surface);
}

.nj-chip[data-state="answered"] {
  color: var(--nj-answered);
  background: var(--nj-answered-surface);
}

.nj-chip[data-state="failed"] {
  color: var(--nj-failed);
  background: var(--nj-failed-surface);
}

.nj-empty {
  padding: var(--nj-space-8) var(--nj-space-4);
  text-align: center;
  color: var(--nj-text-muted);
}

/* Avatars live here for the same reason chips do: the component renders into
   the light DOM, so it has no stylesheet of its own. */
.nj-avatar {
  --nj-avatar-size: 2.5rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--nj-avatar-size);
  block-size: var(--nj-avatar-size);
  border-radius: var(--nj-radius-pill);
  overflow: hidden;
  background: var(--nj-surface-sunken);
  color: var(--nj-text-muted);
  font-size: calc(var(--nj-avatar-size) * 0.36);
  font-weight: 600;
  /* Initials are centred by the flexbox; without this a tall line-height
     pushes them off-centre in the circle. */
  line-height: 1;
  user-select: none;
}

.nj-avatar[data-size="sm"] {
  --nj-avatar-size: 2rem;
}

.nj-avatar[data-size="lg"] {
  --nj-avatar-size: 4.5rem;
}

.nj-avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Left alone, form controls land on the UA defaults: Arial or monospace, and
   a white background. The white is the dangerous half — text colour inherits
   from the dark theme, so a filled input reads as near-white on white, worst
   on the fields that arrive already populated. */
input,
textarea,
select {
  font: inherit;
  color: var(--nj-text);
  background: var(--nj-surface-raised);
  border: 1px solid var(--nj-border);
  border-radius: var(--nj-radius);
  padding: var(--nj-space-2) var(--nj-space-3);
}

input::placeholder,
textarea::placeholder {
  color: var(--nj-text-muted);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
}

/* Wide content — a table, a code block — scrolls inside its own box so the
   page itself never scrolls sideways. */
.nj-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* Focus must stay visible on every interactive control, including the ones
   rendered inside islands. */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--nj-focus);
  outline-offset: 2px;
  border-radius: var(--nj-radius);
}

/* ── Navigating between pages ──────────────────────────────────────────── */

/* Each console page is its own document, so every menu click is a real
   navigation. Telling the browser which palette the page uses stops it
   painting a white frame between the old page and the new one. */
:root {
  color-scheme: light dark;
}

html {
  background: var(--nj-surface-sunken);
  /* Hold the scrollbar's space whether or not one is needed. Every menu click
     is a real navigation, and a page that needs a scrollbar landing on one that
     did not shifts the whole layout sideways as it arrives — which reads as a
     flicker rather than as a scrollbar. Opening a nav group is enough to cross
     that line on a short window. */
  scrollbar-gutter: stable;
}

/* Cross-document view transitions turn the remaining hard cut into a short
   cross-fade. Browsers without support simply navigate as before. */
@view-transition {
  navigation: auto;
}

/* Chrome's default blend mode for view-transitions is `plus-lighter`, which
   performs additive blending and blows out light-colored backgrounds to pure
   white during the cross-fade. `normal` blend mode and isolated image pairs
   prevent that white flash. */
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

::view-transition-image-pair(root) {
  isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* The shell is identical on every page, so it should not appear to move.
   Naming it keeps it still while only the content cross-fades. */
.nj-shell-header {
  view-transition-name: nj-header;
}

.nj-shell-nav {
  view-transition-name: nj-nav;
}

/* Painted before the session check returns, from a flag the last page left
   behind. Without this the nav and the page vanish and reappear on every
   click while two network round trips complete.

   Each region gets its display named explicitly rather than reverting: the
   account badge is a flex row, and reverting would hand it the UA default. */
html.nj-auth-known [data-signed-in] {
  display: block !important;
}

html.nj-auth-known .nj-shell-account[data-signed-in] {
  display: flex !important;
}

html.nj-auth-known [data-auth-pending] {
  display: none !important;
}