/* ============================================================================
 * NAWTT — portal design system
 * ----------------------------------------------------------------------------
 * Derived from "NAWTT · Phase 4 · Brand Visualization". The five parts:
 *
 *   LOGO        The Core — 21 modules (see shared/core.js)
 *   COLOUR      Qatar Burgundy · Off-White · Deep Green · Dark Neutral · Antique Gold
 *   TYPOGRAPHY  Manrope (Latin + figures) · Alexandria (Arabic) · Baloo 2 (wordmark only)
 *   IMAGERY     photography-led; not used in data screens
 *   BEHAVIOUR   the Core's five states (solid/outline/negative/masked/edge)
 *
 * Product rules carried over from the brand book:
 *   - One field, one headline, two actions per screen.
 *   - Off-white modules carry content; a burgundy or green module carries a
 *     MOMENT. In a page of eight modules, no more than two are brand-coloured.
 *   - Button radius 3 px — a quarter of the module radius (12 px).
 *   - Numeric hierarchy: tabular figures, currency at one third the figure.
 *   - Status is colour PLUS a word. Green is a state; gold marks tier only.
 *   - Icons: one solid module INSIDE each form, never beside it.
 *   - No gradients. One logo. Nothing repeated as decoration.
 *
 * Deliberate deviations (documented, not accidental):
 *   - Metadata type is 11 px rather than the book's 10 px: WCAG readability on
 *     desktop. Nothing else in the scale is changed.
 *   - Navigation order stays left-to-right while the interface is Latin; the
 *     book's right-to-left order applies when the Arabic UI ships (Alexandria).
 *   - The book has no red, so destructive actions use deep burgundy + an
 *     explicit verb ("Reject", "Cancel") instead of a danger red.
 * ========================================================================== */

/* --- 1. Typefaces (vendored locally — the portals stay offline) ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('../vendor/fonts/manrope-latin-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('../vendor/fonts/baloo2-latin-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Tokens ----------------------------------------------------------- */
:root {
  /* Colour — the five brand colours and nothing else */
  --nawtt-burgundy: #8a1538;
  --nawtt-burgundy-deep: #6d1030;
  --nawtt-burgundy-soft: #f3e7ea;
  --nawtt-offwhite: #f7f3ed;
  --nawtt-surface: #fffdfa;
  --nawtt-green: #10513c;
  --nawtt-green-deep: #0b3c2c;
  --nawtt-green-soft: #e6efeb;
  --nawtt-neutral: #211f1d;
  --nawtt-neutral-soft: #ece8e2;
  --nawtt-gold: #b58b4c; /* tier only — never a state, never decoration */

  /* Derived text + line colours */
  --nawtt-ink: var(--nawtt-neutral);
  --nawtt-muted: #6d6660;
  --nawtt-line: #e2dbd1;

  /* Shape — module radius 12, controls take a quarter of it */
  --nawtt-module-radius: 12px;
  --nawtt-control-radius: 3px;

  /* Type — Manrope for Latin and figures */
  --nawtt-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nawtt-font-wordmark: 'Baloo 2', var(--nawtt-font);

  /* Text-size scaling — the single lever the font widget changes (shared/font.js,
     section 15). Every type and space token below is rem-based, so one root
     size moves them all together. */
  --font-scale: 1;

  /* The book's product scale */
  --nawtt-hero: 2.625rem; /* 42 / 1.2 SemiBold — hero balance */
  --nawtt-title: 1.0625rem; /* 17 / 1.4 — page title */
  --nawtt-row: 0.875rem; /* 14 / 1.4 — row title */
  --nawtt-meta: 0.6875rem; /* 11 / 1.6 — metadata (book says 10) */
  --nawtt-button: 0.875rem; /* 14 / 1  — button label */

  /* Space — one scale, used rhythmically */
  --nawtt-space-1: 0.25rem;
  --nawtt-space-2: 0.5rem;
  --nawtt-space-3: 0.75rem;
  --nawtt-space-4: 1rem;
  --nawtt-space-6: 1.5rem;
  --nawtt-space-8: 2rem;

  --nawtt-shadow: 0 1px 2px rgba(33, 31, 29, 0.04);
}

/* --- 3. Field + base type ----------------------------------------------- */
/* The root font size every rem token resolves against — the ONE value the
   text-size widget changes (section 15). */
html {
  font-size: calc(100% * var(--font-scale));
}

body {
  background: var(--nawtt-offwhite);
  color: var(--nawtt-ink);
  font-family: var(--nawtt-font);
  font-size: var(--nawtt-row);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
.h1 {
  font-size: var(--nawtt-title);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h2,
.h2 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
}

/* Metadata voice — the small caps-ish label used above figures and in table heads */
.eyebrow,
.kpi-label,
.table > thead th {
  font-size: var(--nawtt-meta);
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nawtt-muted);
}

/* Wordmark — Baloo 2 appears here and nowhere else in the product */
.nawtt-wordmark {
  font-family: var(--nawtt-font-wordmark);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* --- 4. Topbar — a burgundy field, the Core once, at the head ----------- */
.nawtt-topbar,
.ews-navbar {
  background: var(--nawtt-burgundy);
  color: var(--nawtt-offwhite);
  padding: var(--nawtt-space-2) 0;
}
.nawtt-topbar .nawtt-brand,
.ews-navbar .navbar-brand {
  color: var(--nawtt-offwhite);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--nawtt-space-2);
}
.nawtt-topbar .nav-link,
.ews-navbar .nav-link {
  color: var(--nawtt-offwhite);
  opacity: 0.78;
  font-size: var(--nawtt-row);
  border-radius: var(--nawtt-control-radius);
  padding: var(--nawtt-space-2) var(--nawtt-space-3);
  text-decoration: none;
}
.nawtt-topbar .nav-link:hover,
.ews-navbar .nav-link:hover {
  opacity: 1;
  background: rgba(247, 243, 237, 0.12);
}
.nawtt-topbar .nav-link.active,
.ews-navbar .nav-link.active {
  opacity: 1;
  font-weight: 600;
  background: rgba(247, 243, 237, 0.16);
}
.nawtt-topbar .nawtt-portal-chip {
  font-size: var(--nawtt-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(247, 243, 237, 0.5);
  border-radius: var(--nawtt-control-radius);
  padding: 2px var(--nawtt-space-2);
  color: var(--nawtt-offwhite);
}
.nawtt-topbar .nawtt-identity {
  color: rgba(247, 243, 237, 0.72);
  font-size: var(--nawtt-meta);
  letter-spacing: 0.04em;
}

/* --- 5. Modules (Bootstrap cards) --------------------------------------- */
.card,
.module {
  background: var(--nawtt-surface);
  border: 1px solid var(--nawtt-line);
  border-radius: var(--nawtt-module-radius);
  box-shadow: var(--nawtt-shadow);
}
.card-header,
.card-footer {
  background: transparent;
  border-color: var(--nawtt-line);
}

/* A brand-coloured module carries a moment — use at most two per screen. */
.module--brand {
  background: var(--nawtt-burgundy);
  border-color: var(--nawtt-burgundy);
  color: var(--nawtt-offwhite);
}
.module--brand .kpi-label,
.module--brand .kpi-note,
.module--brand .eyebrow {
  color: rgba(247, 243, 237, 0.75);
}
.module--green {
  background: var(--nawtt-green);
  border-color: var(--nawtt-green);
  color: var(--nawtt-offwhite);
}
.module--green .kpi-label,
.module--green .kpi-note {
  color: rgba(247, 243, 237, 0.75);
}
.module--quiet {
  background: var(--nawtt-neutral-soft);
  border-color: var(--nawtt-line);
}

/* --- 6. Numeric hierarchy ---------------------------------------------- */
/* Figures are tabular and right-aligned; currency sits at one third the size. */
.money,
.amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.amount {
  font-weight: 600;
  line-height: 1.2;
}
.amount__currency {
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-left: 0.4em;
  color: var(--nawtt-muted);
}
.module--brand .amount__currency,
.module--green .amount__currency {
  color: rgba(247, 243, 237, 0.75);
}
.balance {
  font-size: var(--nawtt-hero);
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kpi-value {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kpi-value--hero {
  font-size: var(--nawtt-hero);
}
.kpi-note {
  font-size: var(--nawtt-meta);
  line-height: 1.6;
  color: var(--nawtt-muted);
}

/* --- 7. Controls -------------------------------------------------------- */
.btn {
  font-size: var(--nawtt-button);
  line-height: 1;
  border-radius: var(--nawtt-control-radius); /* a quarter of the module radius */
  padding: 0.625rem var(--nawtt-space-4);
  font-weight: 600;
}
.btn-sm {
  padding: 0.375rem var(--nawtt-space-3);
  font-size: var(--nawtt-meta);
  letter-spacing: 0.02em;
}

/* The one primary action on the screen */
.btn-ews,
.btn-nawtt {
  background: var(--nawtt-burgundy);
  border: 1px solid var(--nawtt-burgundy);
  color: var(--nawtt-offwhite);
}
.btn-ews:hover,
.btn-ews:focus,
.btn-nawtt:hover,
.btn-nawtt:focus {
  background: var(--nawtt-burgundy-deep);
  border-color: var(--nawtt-burgundy-deep);
  color: var(--nawtt-offwhite);
}

/* Secondary action */
.btn-outline-ews,
.btn-outline-nawtt {
  background: transparent;
  border: 1px solid var(--nawtt-burgundy);
  color: var(--nawtt-burgundy);
}
.btn-outline-ews:hover,
.btn-outline-nawtt:hover {
  background: var(--nawtt-burgundy);
  color: var(--nawtt-offwhite);
}

/* Destructive: the book has no red — deep burgundy plus an explicit verb. */
.btn-danger,
.btn-outline-danger {
  border: 1px solid var(--nawtt-burgundy-deep);
  color: var(--nawtt-burgundy-deep);
  background: transparent;
}
.btn-danger,
.btn-outline-danger:hover {
  background: var(--nawtt-burgundy-deep);
  color: var(--nawtt-offwhite);
}

/* Quiet / neutral */
.btn-outline-secondary,
.btn-outline-light {
  border: 1px solid var(--nawtt-line);
  color: var(--nawtt-ink);
  background: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-light:hover {
  background: var(--nawtt-neutral-soft);
  color: var(--nawtt-ink);
  border-color: var(--nawtt-line);
}

input.form-control,
select.form-select {
  border: 1px solid var(--nawtt-line);
  border-radius: var(--nawtt-control-radius);
  background: var(--nawtt-surface);
  color: var(--nawtt-ink);
  font-size: var(--nawtt-row);
}
input.form-control:focus,
select.form-select:focus {
  border-color: var(--nawtt-burgundy);
  box-shadow: 0 0 0 3px rgba(138, 21, 56, 0.14);
  background: var(--nawtt-surface);
}
.form-label {
  font-size: var(--nawtt-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nawtt-muted);
}
.form-text {
  font-size: var(--nawtt-meta);
  color: var(--nawtt-muted);
}

/* Nav pills used as filter chips — LIGHT chips.
   Brand rule (Navigation): "active item burgundy, the rest neutral". So these
   carry soft fills and hairline edges rather than heavy solid buttons; the
   current view is marked with the brand's own light tint, not a dark block.
   Contrast (measured): muted ink on surface 5.56:1, burgundy on burgundy-soft
   7.76:1, ink on neutral-soft 13.46:1 — all pass WCAG AA. */
.nav-pills .nav-link,
.filter-chip {
  background: var(--nawtt-surface);
  border: 1px solid var(--nawtt-line);
  border-radius: var(--nawtt-control-radius);
  color: var(--nawtt-muted);
  font-size: var(--nawtt-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.nav-pills .nav-link:hover,
.filter-chip:hover {
  background: var(--nawtt-neutral-soft);
  border-color: var(--nawtt-line);
  color: var(--nawtt-ink);
}
.nav-pills .nav-link.active,
.filter-chip.active,
.btn-ews.filter-chip {
  background: var(--nawtt-burgundy-soft);
  border-color: rgba(138, 21, 56, 0.32);
  color: var(--nawtt-burgundy);
}

/* --- 8. Status — colour plus a word; one solid module inside the form --- */
.status-badge,
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--nawtt-space-2);
  font-size: var(--nawtt-meta);
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--nawtt-control-radius);
  padding: 3px var(--nawtt-space-2);
  border: 1px solid transparent;
}
.status-badge::before,
.module-mark {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 2px; /* one solid module, inside the form */
  background: currentColor;
  flex: 0 0 auto;
}
/* In flight: requested or approved — the brand's own colour, quietly */
.status-badge--pending {
  background: var(--nawtt-burgundy-soft);
  border-color: rgba(138, 21, 56, 0.25);
  color: var(--nawtt-burgundy);
}
/* Money is out, not yet settled */
.status-badge--active {
  background: var(--nawtt-green-soft);
  border-color: rgba(16, 81, 60, 0.28);
  color: var(--nawtt-green);
}
/* Settled — green is a state */
.status-badge--settled {
  background: var(--nawtt-green);
  border-color: var(--nawtt-green);
  color: var(--nawtt-offwhite);
}
/* Closed without settling */
.status-badge--closed {
  background: var(--nawtt-neutral-soft);
  border-color: var(--nawtt-line);
  color: var(--nawtt-muted);
}

/* --- 9. Tables ---------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  color: var(--nawtt-ink);
  font-size: var(--nawtt-row);
  margin-bottom: 0;
}
.table > thead th {
  border-bottom: 1px solid var(--nawtt-line);
  padding: var(--nawtt-space-3) var(--nawtt-space-3);
  white-space: nowrap;
}
.table > tbody td {
  border-bottom: 1px solid var(--nawtt-line);
  padding: var(--nawtt-space-3);
  vertical-align: middle;
}
.table > tbody tr:hover td {
  background: rgba(226, 219, 209, 0.28);
}
.table caption {
  color: var(--nawtt-muted);
  font-size: var(--nawtt-meta);
  line-height: 1.6;
}
.table-responsive {
  border-radius: 0 0 var(--nawtt-module-radius) var(--nawtt-module-radius);
}

/* --- 10. Notes, alerts, rules ------------------------------------------ */
.alert {
  border-radius: var(--nawtt-control-radius);
  border: 1px solid var(--nawtt-line);
  background: var(--nawtt-surface);
  color: var(--nawtt-ink);
  font-size: var(--nawtt-row);
}
.alert-success {
  background: var(--nawtt-green-soft);
  border-color: rgba(16, 81, 60, 0.28);
  color: var(--nawtt-green-deep);
}
.alert-danger {
  background: var(--nawtt-burgundy-soft);
  border-color: rgba(138, 21, 56, 0.3);
  color: var(--nawtt-burgundy-deep);
}
.alert-warning,
.alert-info {
  background: var(--nawtt-neutral-soft);
  border-color: var(--nawtt-line);
  color: var(--nawtt-ink);
}
.modal-content {
  background: var(--nawtt-surface);
  border: 1px solid var(--nawtt-line);
  border-radius: var(--nawtt-module-radius);
}
.modal-header,
.modal-footer {
  border-color: var(--nawtt-line);
}

/* --- 11. Employee portal shell (phone-first, large print) ---------------- */
/* This portal is read at arm's length, in daylight, by eyes that are not 25 any
   more. So it runs its OWN reading scale, deliberately bigger than the product's
   desktop rhythm:
     - 18 px body text (desktop is 14 px), 19 px on the figures that matter;
     - labels/hints at 16 px and in SENTENCE CASE — tracked capitals cost
       legibility at small sizes and buy nothing here;
     - a 48 px balance, 22 px inside the amount field, a 64 px tab bar;
     - targets grew with the type: 48 px minimum, 56 px on the primary actions.
   The desktop portals keep the book's scale; only this shell pays the pixels.
   The layout stays COMPACT — blocks 12 px apart, cards padded 12 px — because
   bigger type plus loose spacing would just mean more scrolling.           */
.employee-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--nawtt-space-4) var(--nawtt-space-3)
           calc(116px + env(safe-area-inset-bottom, 0px));
  font-size: 1.125rem; /* 18 px — the reading size */
  line-height: 1.6;
  /* Local overrides of the product scale; nothing below 16 px survives on this
     page. `--nawtt-hero` is the balance at the top of the home view. */
  --nawtt-meta: 1rem; /* 16 px labels and hints (desktop: 11 px) */
  --nawtt-row: 1.125rem;
  --nawtt-button: 1.125rem;
  --nawtt-hero: 3rem; /* 48 px balance */
}
/* Bootstrap's `.small` is 0.875em, which would land at 15.75 px here — lift it,
   so nothing the user has to read is smaller than 16 px. */
.employee-shell .small,
.employee-shell .form-text,
.employee-shell .kpi-note {
  font-size: 1rem;
  line-height: 1.55;
}
/* Sentence case + normal tracking for every label on this page. `.kv__label`
   and `.kpi-label` are declared again further down for the desktop rhythm; the
   two-class selectors here win, which is why they can sit in one place. */
.employee-shell .kpi-label,
.employee-shell .kv__label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
/* Status words are read, not decoded: no capitals, and large enough to scan. */
.employee-shell .status-badge {
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

/* One vertical rhythm for the whole portal: #view (and any .stack) spaces its
   blocks 12 px apart and each block spaces its own rows. That is why the
   templates below carry no Bootstrap mb-* classes — spacing lives in one place
   and stays compact without fighting !important. */
.employee-shell #view,
.employee-shell .stack {
  display: flex;
  flex-direction: column;
  gap: var(--nawtt-space-3);
}
.employee-shell .card-body,
.employee-shell .module .card-body {
  padding: var(--nawtt-space-3);
}

/* The two lines at the head of a view: the title, then one quiet line under it. */
.page-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.employee-greeting {
  font-size: 1.75rem; /* 28 px — one step under the hero */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.page-head__meta {
  margin: 0;
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.5;
  color: var(--nawtt-muted);
}

/* Label/value rows — the one way this portal lists facts: stacked vertically
   (label left, value right, a hairline between rows). It reads far better on a
   phone than two side-by-side columns of small print, and it is the same markup
   inside a brand module (where the hairline turns light). */
.kv {
  --kv-line: var(--nawtt-line);
  margin: 0;
}
.module--brand .kv,
.module--green .kv {
  --kv-line: rgba(247, 243, 237, 0.22);
}
.kv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nawtt-space-3);
  padding: var(--nawtt-space-2) 0;
}
.kv__row + .kv__row {
  border-top: 1px solid var(--kv-line);
}
.kv__label {
  margin: 0;
  font-size: var(--nawtt-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nawtt-muted);
}
.module--brand .kv__label,
.module--green .kv__label {
  color: rgba(247, 243, 237, 0.8);
}
.kv__value {
  margin: 0;
  font-size: 1.1875rem; /* 19 px — the figure is the point of the row */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tap-target {
  min-height: 44px;
}
/* Buttons and fields: everything a thumb or a failing eye has to deal with. */
.employee-shell .btn {
  font-size: 1.125rem; /* 18 px */
  font-weight: 600;
  min-height: 48px;
}
.employee-shell .form-label {
  font-size: 1.0625rem; /* 17 px — the label belongs to the field, readably */
  font-weight: 600;
}
.employee-shell .form-control,
.employee-shell .form-select {
  font-size: 1.375rem; /* 22 px — the amount is the biggest thing you type */
  min-height: 60px;
}
/* Card headings must out-rank the body text they sit above, so they grow too
   (Bootstrap's `.h6` is 1rem, which would be SMALLER than this page's 18 px). */
.employee-shell .h6 {
  font-size: 1.25rem; /* 20 px */
  font-weight: 700;
  line-height: 1.3;
}
/* The two primary actions of this portal, bigger than every other target. */
.employee-shell .btn-ews,
.employee-shell .btn-outline-ews {
  min-height: 56px;
}
/* The history amount card: the figure people actually look for. */
.employee-shell .kpi-value {
  font-size: 2rem; /* 32 px */
}
/* The available-now value is the SAME size as every other figure in its module
   (owner request): the digits and the currency travel together as one value on
   one line, at the row-value size. Emphasis comes from the weight and the
   off-white on the brand field — not from a 48 px number. This one is a
   deliberate departure from the brand's "currency at one third of the figure"
   rule (docs/09 §5). */
.employee-shell .balance {
  font-size: 1.1875rem; /* 19 px — the same as .kv__value below */
  font-weight: 700;
  line-height: 1.5;
}
.employee-shell .balance .amount,
.employee-shell .balance .amount__currency {
  font-size: 1em; /* the currency rides at the figure's own size */
  font-weight: 700;
}
.employee-shell .balance .amount__currency {
  margin-left: 0.35em;
  color: rgba(247, 243, 237, 0.85); /* still a shade quieter than the figure */
}

/* History cards: tighter INSIDE, the same air BETWEEN them. The gap to the next
   card (.stack, 12 px) and the 12 px horizontal inset are untouched — only the
   inner padding and the row rhythm shrink, which is where the height was. */
.employee-shell .card--compact .card-body {
  padding: 6px var(--nawtt-space-3); /* 6 px top/bottom, 12 px sides */
}
.employee-shell .card--compact .kv__row {
  padding: 3px 0; /* was 8 px, then 5 px — the hairlines carry the separation */
}
/* The status-trail toggle is a secondary disclosure inside the card: 44 px keeps
   it a comfortable target without the 48 px the primary actions get. */
.employee-shell .card--compact .btn-link {
  min-height: 44px;
}

/* The filter grid's "All" chip spans the full width, so it reads as the reset row
   above the statuses rather than as one status among them. */
.chip-grid__all {
  grid-column: 1 / -1;
}

/* The amount field's label carries the ceiling on the SAME line ("Amount (QAR)
   … up to 2,300"), so the form needs no separate hint line. */
.employee-shell .form-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nawtt-space-2);
}
.employee-shell .form-label__hint {
  font-weight: 600;
  color: var(--nawtt-muted);
}

/* The fee: ONE line, directly under the field, so the button can follow it.
   A quiet tint marks it as a computed value rather than one more label. */
.employee-shell .fee-line {
  display: flex;
  align-items: baseline;
  gap: var(--nawtt-space-2);
  margin: var(--nawtt-space-2) 0;
  padding: var(--nawtt-space-2) var(--nawtt-space-3);
  background: var(--nawtt-neutral-soft);
  border-radius: var(--nawtt-control-radius);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap; /* it must never wrap onto a second line */
}
.employee-shell .fee-line__value {
  font-size: 1.1875rem; /* the money reads at row-value size */
  font-variant-numeric: tabular-nums;
}

/* The confirmation screen's message line (inside the brand module). */
.employee-shell .sent-summary {
  margin: 0;
  font-size: 1.1875rem; /* 19 px */
  line-height: 1.5;
}
/* A strip of chips that scrolls sideways instead of wrapping: used where the
   set can grow (status filters), so the page never reflows as it fills up. */
.chip-row {
  display: flex;
  gap: var(--nawtt-space-2);
  overflow-x: auto;
  padding-bottom: var(--nawtt-space-1);
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar {
  display: none;
}
.chip-row > * {
  flex: 0 0 auto;
}
/* A table row that opens its record (the admin Data browser). The hover tint is
   the affordance; the Edit button in the row is the keyboard/AT path in. */
.row-link {
  cursor: pointer;
}
.row-link:hover td {
  background: var(--nawtt-neutral-soft);
}

/* A set of chips that must ALL stay on screen: equal columns, two per row on a
   phone and four from 768 px up. It replaced a sideways-scrolling strip, whose
   last chip sat off the edge of the screen and read as broken. */
.chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nawtt-space-2);
}
.chip-grid > .btn {
  width: 100%;
}
@media (min-width: 768px) {
  .chip-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- 11b. Bottom tab bar — the phone's primary navigation ---------------- */
/* A brand field at the foot of the screen, mirroring the burgundy header: the
   brand bookends the page instead of floating a grey bar over it. Each tab is a
   BORDERED BUTTON with a line icon and its label, so the row reads as three
   tappable controls rather than three words.

   The active tab inverts — off-white fill, burgundy icon and label — which is
   the brand's negative treatment and carries weight + colour + aria-current
   together, never colour alone. From 768 px up the whole bar disappears and the
   header nav takes over: one destination list, the right affordance per size. */
.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--nawtt-space-2);
  padding: var(--nawtt-space-2) var(--nawtt-space-2)
           calc(var(--nawtt-space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--nawtt-burgundy);
  border-top: 1px solid var(--nawtt-burgundy-deep);
}
.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 64px; /* taller than before: the labels grew with the type */
  padding: var(--nawtt-space-1) var(--nawtt-space-1);
  border: 1px solid rgba(247, 243, 237, 0.3);
  border-radius: var(--nawtt-control-radius);
  color: rgba(247, 243, 237, 0.8);
  font-size: 1rem; /* 16 px, sentence case — see the §11 rationale */
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tabbar__icon {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tabbar__item:active {
  background: rgba(247, 243, 237, 0.14);
}
.tabbar__item[aria-current='page'] {
  background: var(--nawtt-offwhite);
  border-color: var(--nawtt-offwhite);
  color: var(--nawtt-burgundy);
  font-weight: 700;
}

/* On a phone the header carries the brand and nothing else: its nav pills would
   compete with the tab bar and sit outside the thumb arc. Sticky, so the
   burgundy field stays as the anchor while the content scrolls — and tightened,
   because a pinned bar spends the reader's screen on every scroll. */
body.portal-employee .nawtt-topbar {
  position: sticky;
  top: 0;
  z-index: 4;
}
body.portal-employee .nawtt-topbar__inner {
  padding: var(--nawtt-space-1) var(--nawtt-space-3);
}
body.portal-employee .nawtt-nav {
  display: none;
}

/* Tablet and up: the tab bar is gone, the header nav is back, and the shell no
   longer needs to reserve room at the bottom. */
@media (min-width: 768px) {
  .employee-shell {
    padding-bottom: var(--nawtt-space-8);
  }
  .tabbar {
    display: none;
  }
  body.portal-employee .nawtt-nav {
    display: flex;
  }
}

/* --- 12. Login: one field, one headline, one action -------------------- */
.login-field {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nawtt-space-6) var(--nawtt-space-4);
  position: relative;
  overflow: hidden;
}
/* The Core enters from the top-right and is cropped by the frame. */
.login-core {
  position: absolute;
  top: -18px;
  right: -18px;
  pointer-events: none;
}
.login-panel {
  width: 100%;
  max-width: 420px;
  position: relative;
}
.login-headline {
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- 13. Focus + motion ------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--nawtt-burgundy);
  outline-offset: 2px;
}
.nawtt-topbar :focus-visible {
  outline-color: var(--nawtt-offwhite);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
 * 14. Component bridge — the exact class names the pages use
 * ----------------------------------------------------------------------------
 * Sections 1–13 hold the system (tokens, type, modules, status, tables). This
 * section binds the concrete names used by login.html, layout.js and the portal
 * pages to those tokens, so no page ever carries a colour decision of its own.
 * ========================================================================== */

/* --- Page ground + the Core entry (login) ------------------------------- */
.nawtt-field {
  background: var(--nawtt-offwhite, #f7f3ed);
  min-height: 100vh;
}
.login-layout {
  min-height: 100vh;
  display: flex;
  align-items: flex-start; /* the form leads the screen — no hero above it */
  padding: clamp(2.5rem, 8vh, 4rem) var(--nawtt-space-4, 1rem) var(--nawtt-space-6, 3rem);
  position: relative;
  overflow: hidden; /* the frame crops the Core — the geometry never changes */
}
.login-column {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
/* The brand lockup on the sign-in page, top-left: its own Core (solid burgundy
   on the off-white field) + the Baloo 2 wordmark. A link home. */
.login-brand {
  position: absolute;
  top: var(--nawtt-space-3);
  left: var(--nawtt-space-4);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--nawtt-ink);
  text-decoration: none;
}
@media (max-width: 767.98px) {
  .login-brand {
    top: var(--nawtt-space-2);
    left: var(--nawtt-space-2);
  }
}
.login-sub {
  color: var(--nawtt-muted, #6d6660);
  margin: 0.75rem 0 2rem;
  max-width: 46ch;
}
.login-module {
  padding: var(--nawtt-space-5, 1.5rem);
  max-width: 420px;
}
.login-demo {
  margin-top: 1.5rem;
  font-size: var(--nawtt-meta, 0.6875rem);
  color: var(--nawtt-muted, #6d6660);
}
.login-demo summary {
  cursor: pointer;
}
.login-demo ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}
.login-foot {
  margin: 2.5rem 0 0;
  font-size: var(--nawtt-meta, 0.6875rem);
  letter-spacing: 0.02em;
  color: var(--nawtt-muted, #6d6660);
}
/* The sign-in page reads as sentence case — "User Name", "Password", and the
   lowercase footer — instead of the all-caps metadata voice the data-entry
   portals use. Its inputs also carry a leaner side padding. */
.login-column .field__label {
  text-transform: none;
  letter-spacing: 0.01em;
}
.login-column .field__input {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
/* The Core sits at the top-right, half outside the frame (EDGE behaviour). */
.core-entry {
  position: absolute;
  top: -70px;
  right: -70px;
  pointer-events: none;
}
@media (max-width: 991.98px) {
  /* Same mobile treatment as the landing Core (§14): pushed further into the
     corner and faded to a light tint so the artwork can never compete with
     the text. */
  .core-entry {
    top: -220px;
    right: -210px;
    opacity: 0.18;
    transform: scale(0.72);
    transform-origin: top right;
  }
}
@media (max-width: 575.98px) {
  /* A calmer mobile rhythm on the sign-in screen: the form sits high — clear
     of the text-size keys above it — and the module stays lean. */
  .login-layout {
    padding: 3rem 1rem 1.75rem;
  }
  .login-module {
    padding: 1.25rem;
  }
  .login-foot {
    margin-top: 1.5rem;
  }
  /* Older eyes: nothing on the sign-in screen stays in the metadata voice at
     phone size — the field labels and the foot step up. */
  .login-column .field__label,
  .login-column .login-foot {
    font-size: 0.8125rem;
  }
}

/* --- Brand fields ------------------------------------------------------- */
.field {
  margin-bottom: 1rem;
}
.field__label {
  display: block;
  font-size: var(--nawtt-meta, 0.6875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nawtt-muted, #6d6660);
  margin-bottom: 0.375rem;
}
.field__input {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  font: inherit;
  color: var(--nawtt-ink, #211f1d);
  background: var(--nawtt-surface, #fffdfa);
  border: 1px solid var(--nawtt-line, #e2dbd1);
  border-radius: var(--nawtt-control-radius, 3px);
}
.field__input:focus {
  border-color: var(--nawtt-burgundy, #8a1538);
}

/* --- Buttons (one primary per screen; radius = a quarter of a module) ---- */
.btn-primary-brand {
  background: var(--nawtt-burgundy, #8a1538);
  border: 1px solid var(--nawtt-burgundy, #8a1538);
  color: var(--nawtt-offwhite, #f7f3ed);
  border-radius: var(--nawtt-control-radius, 3px);
  font-weight: 600;
  padding: 0.625rem 1rem;
}
.btn-primary-brand:hover,
.btn-primary-brand:focus {
  background: var(--nawtt-burgundy-deep, #6d1030);
  border-color: var(--nawtt-burgundy-deep, #6d1030);
  color: var(--nawtt-offwhite, #f7f3ed);
}
.btn-primary-brand:disabled {
  opacity: 0.6;
}
.btn-on-brand {
  background: transparent;
  border: 1px solid rgba(247, 243, 237, 0.55);
  color: var(--nawtt-offwhite, #f7f3ed);
  border-radius: var(--nawtt-control-radius, 3px);
}
.btn-on-brand:hover,
.btn-on-brand:focus {
  background: rgba(247, 243, 237, 0.14);
  border-color: var(--nawtt-offwhite, #f7f3ed);
  color: var(--nawtt-offwhite, #f7f3ed);
}
.btn-block {
  display: block;
  width: 100%;
  min-height: 44px;
}

/* --- Topbar interior (the one Core + the wordmark live here) ------------ */
.nawtt-topbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  flex-wrap: wrap;
}
.nawtt-brand__portal {
  font-size: var(--nawtt-meta, 0.6875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 243, 237, 0.72);
  border-left: 1px solid rgba(247, 243, 237, 0.3);
  padding-left: 0.6rem;
}
.nawtt-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0 auto 0 0;
  padding: 0;
}
.nawtt-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.nawtt-identity {
  font-size: var(--nawtt-meta, 0.6875rem);
  color: rgba(247, 243, 237, 0.72);
}

/* --- Hero numeric + module headings ------------------------------------ */
.amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.balance .amount {
  font-size: var(--nawtt-hero, 2.625rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.balance .amount__currency {
  font-size: 0.34em; /* the brand's rule: currency at one third of the figure */
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-left: 0.4em;
  opacity: 0.75;
}
.module__title {
  font-size: var(--nawtt-title, 1.0625rem);
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
/* --- Landing page (web/index.html — served at /) ------------------------- */
/* The public website ground. The page itself carries no colour, radius or font
   decision — every value below resolves to a token from section 2 (docs/09 §6).
   REMINDER: the page is served at `/` but its assets live under `/ui/`, so its
   links and imports use absolute /ui/… paths (see the file header). */
.landing-hero {
  position: relative;
  overflow: hidden; /* the frame crops the Core — the geometry never changes */
  padding: 4.5rem 0 2.5rem;
}
/* The ONE Core of the screen, entering from the top-right — the same EDGE
   behaviour as the login page (the website pattern, docs/09 §3). */
.landing-core {
  position: absolute;
  top: -96px;
  right: -72px;
  pointer-events: none;
  z-index: 0;
}
.landing-hero .container {
  position: relative;
  z-index: 1; /* the copy sits above the Core; no balance ever overlaps it */
}
.landing-hero__copy {
  max-width: 44rem;
}
.landing-headline {
  font-size: 2.75rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 1rem;
}
.landing-sub {
  color: var(--nawtt-muted, #6d6660);
  font-size: 1.0625rem;
  margin: 0 0 1.5rem;
  max-width: 48ch;
}
.landing-section {
  padding: 1.5rem 0;
}
/* .module itself carries no padding (section 5) — modules on this page do. */
.landing-module {
  padding: 1.5rem;
}
.landing-foot {
  margin: 2.5rem 0 2rem;
  font-size: var(--nawtt-meta, 0.6875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nawtt-muted, #6d6660);
}
@media (max-width: 991.98px) {
  /* On small screens the Core would sit directly behind the hero copy — a
     solid burgundy shape under body text. Two moves turn it into a quiet
     background moment instead of an obstacle: it is pushed further into the
     top-right corner AND faded to a light tint that can never compete with
     the text (contrast stays on the off-white field, not the artwork). */
  .landing-core {
    top: -220px;
    right: -210px;
    opacity: 0.18;
    transform: scale(0.72);
    transform-origin: top right;
  }
}
@media (max-width: 575.98px) {
  /* A calmer mobile rhythm: tighter hero, slightly smaller headline, and
     leaner module padding — the same content, less chrome. */
  .landing-hero {
    padding: 2rem 0 1.75rem;
  }
  .landing-headline {
    font-size: 1.75rem;
  }
  .landing-sub {
    font-size: 1rem;
    margin-bottom: 1.25rem;
  }
  .landing-module {
    padding: 1.25rem;
  }
}

/* ============================================================================
 * 15. Text size — the levels, the mobile default, and the widget
 * ----------------------------------------------------------------------------
 * The owner's ask: on a phone nothing should read smaller than it does now,
 * and older eyes get a control they can find. One root value does the work
 * (section 3: `html { font-size: calc(100% * var(--font-scale)) }`) — every
 * rem-based token, page and Bootstrap default follows it.
 *
 *   - Mobile (< 768px) starts at +50% — the default for a phone.
 *   - `data-font` on <html> is the user's explicit choice (shared/font.js,
 *     persisted as `ews.font`) and wins at every screen size.
 *   - The widget's own labels are deliberately FIXED px: the control must not
 *     grow when the text does, or it would chase its own tail.
 * ========================================================================== */
@media (max-width: 767.98px) {
  :root:not([data-font]) {
    --font-scale: 1.5;
  }
}
:root[data-font='1'] {
  --font-scale: 1;
}
:root[data-font='1.25'] {
  --font-scale: 1.25;
}
:root[data-font='1.5'] {
  --font-scale: 1.5;
}
:root[data-font='1.75'] {
  --font-scale: 1.75;
}

.font-widget {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.font-widget__btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--nawtt-control-radius);
  padding: 4px 9px;
  line-height: 1;
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}
.font-widget__btn--1 {
  font-size: 14px;
}
.font-widget__btn--2 {
  font-size: 16px;
}
.font-widget__btn--3 {
  font-size: 18px;
}
.font-widget__btn--4 {
  font-size: 20px;
}
.font-widget__btn[aria-pressed='true'] {
  background: var(--nawtt-surface);
  color: var(--nawtt-burgundy);
}
/* On the burgundy field (the topbars) the quiet keys read as off-white,
   boxed in a visible pill so the control reads as a control. */
.font-widget--on-brand {
  color: var(--nawtt-offwhite);
  border: 1px solid rgba(247, 243, 237, 0.45);
  border-radius: calc(var(--nawtt-control-radius) + 3px);
  padding: 2px;
  background: rgba(247, 243, 237, 0.1);
}
.font-widget--on-brand .font-widget__btn:hover {
  border-color: rgba(247, 243, 237, 0.5);
}
/* The solo variant sits top-right on the sign-in page (the brand lockup owns
   the top-left); it is a standing card so older eyes can find it. */
.font-widget--solo {
  position: absolute;
  top: var(--nawtt-space-3);
  right: var(--nawtt-space-4);
  z-index: 5;
  border: 1px solid var(--nawtt-line);
  border-radius: calc(var(--nawtt-control-radius) + 3px);
  padding: 2px;
  background: var(--nawtt-surface);
  box-shadow: var(--nawtt-shadow);
}
.font-widget--solo .font-widget__btn {
  color: var(--nawtt-burgundy);
}
.font-widget--solo .font-widget__btn[aria-pressed='true'] {
  background: var(--nawtt-burgundy);
  color: var(--nawtt-offwhite);
}
/* Thumb-sized keys on a phone. Deliberately LAST in this section: the base
   .font-widget rules above share this specificity, so source order decides —
   an earlier media block (tried first) lost to them and the padding never
   changed. */
@media (max-width: 767.98px) {
  .font-widget__btn {
    padding: 14px 12px;
  }
  .font-widget--solo {
    top: var(--nawtt-space-2);
    right: var(--nawtt-space-2);
  }
}