/*
 |----------------------------------------------------------------------------
 | Spec 14, applied
 |----------------------------------------------------------------------------
 |
 | RIGHT-TO-LEFT IS THE PRIMARY DIRECTION, declared once at the document root.
 | No screen overrides it. Every directional property below is LOGICAL —
 | inline-start and inline-end — never physical, so mirroring is automatic and
 | no layout hard-codes a left or a right.
 |
 | Every value is a token. Nothing here carries a raw hex.
 |
 | Served straight from public/ rather than through Vite: the application
 | container carries no node toolchain, so there is no build step to run.
 | resources/css/app.css remains the Vite entry, untouched, for when there is.
 |
 | fonts.css and tokens.css are LINKED ALONGSIDE this file rather than
 | imported into it, so each carries its own version stamp. Without that, a
 | browser holding a cached tokens.css would never see a token change — and
 | the Station-3 identity handover is exactly a token change.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Western Arabic digits system-wide, in Arabic and English alike. */
  font-variant-numeric: tabular-nums;
}

/* Latin-script data is marked left-to-right at the FIELD level, so digits and
   punctuation read correctly inside a right-to-left line. */
.ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }

/* ------------------------------------------------------------ typography -- */

.page-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.panel-title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.sub-heading { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.hint { font-size: 0.78rem; color: var(--muted); }
.meta { font-size: 0.76rem; color: var(--meta-ink); }
.kicker {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--muted); margin: 0;
}

/* Titles stand ALONE. No descriptive line ever renders beneath one — the rule
   is enforced by there being no class for it. */

/* ---------------------------------------------------------------- layout -- */

.shell { display: flex; min-height: 100vh; }

.side-nav {
  width: var(--nav-width);
  flex: 0 0 var(--nav-width);
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand-block {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px 14px;
  border-block-end: 1px solid var(--line);
  margin-block-end: 10px;
}

.brand-mark {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-weight: 600; color: var(--primary-ink);
  background: var(--primary-soft);
}

/* The platform identity's logo row: the mark AS SUPPLIED beside its
   controls. Nothing here resizes it beyond fitting the box. */
.identity-logo {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.identity-logo-preview {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 150px;
  min-height: 92px;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}

.identity-logo-img {
  max-width: 100%;
  max-height: 68px;
  object-fit: contain;
}

.identity-logo-controls {
  flex: 1 1 240px;
  display: grid;
  gap: 10px;
  justify-items: start;
}

/* The platform logo standing in the navigation's mark slot, at the same
   size the lettered tile occupies so the block never shifts. */
.brand-logo-tile {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-name { font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
/* The optional one-line slot carries DATA, never description. When empty,
   nothing renders — no placeholder and no reserved space. */
.brand-slot { font-size: 0.72rem; color: var(--muted); }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  min-height: var(--nav-item-height);
  padding-inline: 13px;
  border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: background var(--colour) var(--ease), color var(--colour) var(--ease);
}

.nav-item:hover { background: var(--surface-hover); color: var(--ink-soft); }

.nav-item.is-active {
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 600;
}

/* A 3px pill at the inline-start edge. Never a filled rectangle alone. */
.nav-item.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 3px; height: 24px;
  border-radius: var(--radius-pill);
  background: var(--primary);
}

/* A parent menu item: it heads its children and navigates nowhere itself —
   but it FOLDS them (owner instruction 2026-08-26), so it is a button and
   takes the hover treatment a control earns. */
.nav-parent {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem; font-weight: 500;
  text-align: start;
  cursor: pointer;
}

.nav-parent:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* The fold caret sits at the inline-end edge and turns with the state. */
.nav-caret {
  margin-inline-start: auto;
  display: grid; place-items: center;
  color: var(--muted);
  transition: transform var(--structural) var(--ease);
}

/* Closed, the caret points along the reading direction. */
[data-nav-tree]:not([data-open]) .nav-caret { transform: rotate(90deg); }

html[dir="ltr"] [data-nav-tree]:not([data-open]) .nav-caret { transform: rotate(-90deg); }

/* The children fold on the grid-rows trick: no measured heights, one
   structural curve. */
.nav-tree { display: flex; flex-direction: column; gap: 4px; }

.nav-children {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--structural) var(--ease);
}

.nav-children-inner {
  overflow: hidden;
  min-height: 0;
  display: flex; flex-direction: column; gap: 4px;
}

[data-nav-tree]:not([data-open]) .nav-children { grid-template-rows: 0fr; }

/* Children indent from the inline-start edge, so the tree mirrors in
   Arabic without a physical offset. */
.nav-sub { margin-inline-start: 24px; }

/* A disabled entry: the structure is visible before the screen behind it
   exists. Dimmed, inert, and never merely colour — it is a <span>, so
   there is nothing to follow. */
.nav-item.is-disabled { opacity: 0.45; cursor: default; }

.nav-item.is-disabled:hover { background: none; color: var(--muted); }

.nav-foot { margin-block-start: auto; border-block-start: 1px solid var(--line); padding-block-start: 10px; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* The top bar: one slim strip over the content column. The search is a
   disabled placeholder until the employees module lands; the clock is the
   browser's own time. */
.top-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 32px;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.top-search {
  display: flex; align-items: center; gap: 10px;
  flex: 0 1 560px;
  height: 40px;
  padding-inline: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  cursor: not-allowed;
}

.top-search input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; color: var(--ink);
  cursor: not-allowed;
}

.top-search input::placeholder { color: var(--muted); }

/* The reading-position badge, riding the bar's inline-end edge. It anchors
   the header's context menu, so it is a positioning context. */
.top-companies { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.top-companies .chip { padding: 6px 14px; font-size: 0.8rem; white-space: nowrap; }

/* The badge AS A SWITCHER: a real button when there is somewhere to switch
   to, carrying the fold caret. */
.chip-switch {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: filter var(--colour) var(--ease);
}

.chip-switch:hover { filter: brightness(0.96); }

.chip-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.chip-caret { display: grid; place-items: center; transition: transform var(--structural) var(--ease); }

.chip-switch[aria-expanded="true"] .chip-caret { transform: rotate(180deg); }

/* The header's context menu: the account menu's popover, dropping DOWN. */
.context-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 264px;
  padding: 5px;
  display: grid;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
}

.context-menu[hidden] { display: none; }

/* The shortcut chip: decorative until the search itself wakes up. */
.top-kbd {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 0.68rem; font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 1px 8px 2px;
  white-space: nowrap;
}

/* The header clock: time with seconds stacked over the date, beside a
   tinted tile. */
.top-clock { display: flex; align-items: center; gap: 11px; white-space: nowrap; }

.top-clock-tile {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--aqua-soft);
  color: var(--aqua-ink);
  border-radius: var(--radius-md);
}

.top-clock-lines { display: grid; line-height: 1.35; text-align: start; }

.top-time { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }

.top-date { font-size: 0.74rem; color: var(--muted); }

.content { flex: 1; padding: 28px 32px 60px; min-width: 0; }
.page-header { display: flex; align-items: center; gap: 12px; margin-block-end: 24px; }

/* =============================================== the home hero row ======= */
/* Owner mockup 2026-08-26: title and greeting, the news placeholder, then
   the live time and day cards on an aqua accent. */

.home-hero { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }

.home-hero-title { display: grid; gap: 6px; align-content: center; }

.home-greeting { margin: 0; color: var(--muted); font-size: 0.92rem; }

.home-news {
  flex: 1 1 260px;
  min-height: 92px;
  display: grid; align-content: center; justify-items: center; gap: 2px;
  padding: 14px 18px;
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}

.home-news-title { margin: 0; font-weight: 600; color: var(--ink-soft); }

.home-news-soon { margin: 0; font-size: 0.76rem; color: var(--muted); }

/* The clock cards: a hairline aqua ring, thicker at the inline-start edge. */
.hero-card {
  flex: 0 0 auto;
  display: grid; align-content: center; justify-items: center; gap: 2px;
  min-width: 150px;
  padding: 12px 22px;
  background: var(--surface);
  border: 1px solid var(--aqua);
  border-inline-start-width: 4px;
  border-radius: var(--radius-lg);
  text-align: center;
}

.hero-time { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }

.hero-weekday { font-size: 0.84rem; font-weight: 600; color: var(--aqua-ink); }

.hero-date-g { font-size: 1.02rem; font-weight: 700; }

.hero-date-h { font-size: 0.76rem; color: var(--muted); }

/* A glyph tile precedes every page and panel title. */
.glyph-tile {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.glyph-tile.is-panel { width: 30px; height: 30px; }
.glyph-tile.is-quiet { background: var(--surface-soft); color: var(--muted); }

/* ----------------------------------------------------------------- cards -- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.card + .card { margin-block-start: 16px; }

/* Side-by-side cards (owner instruction 2026-08-28): one row, shared
   height, compact padding — and the actions row pins to the card's foot,
   so no card trails empty space and every row starts and ends aligned. */
.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.card-row + .card-row,
.card-row + .card,
.card + .card-row { margin-block-start: 16px; }
.card-row > .card {
  margin: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.card-row > .card .form-actions { margin-block-start: auto; padding-block-start: 14px; }

.card-title-row {
  display: flex; align-items: center; gap: 10px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--line);
  margin-block-end: 14px;
}
.card-title-row .spacer { margin-inline-start: auto; }

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 9px 17px;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.89rem; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--colour) var(--ease), border-color var(--colour) var(--ease);
}

.btn:active { transform: translateY(1px); transition-duration: var(--press); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); }

.btn-ghost-danger { background: var(--surface); color: var(--danger); border-color: var(--line-strong); }
.btn-ghost-danger:hover:not(:disabled) { background: var(--surface-hover); }

.btn-destructive { background: var(--danger); color: var(--on-accent); }
.btn-destructive:hover:not(:disabled) { background: var(--danger-hover); }

.btn-sm { padding: 6px 13px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- fields -- */
/* THE FIELD ANATOMY IS CLOSED: label above, 6px gap, 44px control, 1px
   line-strong border, md radius, three named sizes. Screens have no
   field-design freedom, so there is exactly one set of rules here. */

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 0.88rem; font-weight: 600; color: var(--muted); }

.control {
  min-height: var(--control-height);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  width: 100%;
  transition: border-color var(--colour) var(--ease), box-shadow var(--colour) var(--ease);
}

.control:hover { border-color: var(--muted); }
.control:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.control::placeholder { color: var(--muted); opacity: 0.75; font-weight: 400; }

.control.is-prominent {
  min-height: var(--control-height-prominent);
  padding: 13px 16px;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em;
}

.control.is-compact { min-height: var(--control-height-compact); padding: 9px 12px; font-size: 0.9rem; }

select.control { appearance: auto; }

/* A READ-ONLY value standing in a control's place — the manager's phone,
   read from the person record. Same box, no affordance. */
.control-static {
  display: flex; align-items: center;
  margin: 0;
  background: var(--surface-soft);
  color: var(--ink-soft);
}

/* The EMPTY STATE (owner instruction 2026-08-27): a screen with nothing to
   read yet opens and explains, centred and calm — never a refusal. */
.empty-state {
  display: grid; justify-items: center; gap: 8px;
  text-align: center;
  padding: 44px 20px;
}

.empty-state-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  display: grid; place-items: center;
  background: var(--primary-soft);
  color: var(--primary-ink);
}

.empty-state-line { max-width: 46ch; margin: 0; }

/* The companies table's avatar: the uploaded logo, or the letter tile
   standing in — a company mark, not a person avatar. */
.company-avatar {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface);
}

.company-avatar-letter {
  display: grid; place-items: center;
  font-weight: 600;
  color: var(--primary-ink);
  background: var(--primary-soft);
}

/* The one multi-line variant of the closed control anatomy: same box, same
   border, same radius — it only grows downward. */
textarea.control.is-textarea { height: auto; min-height: 110px; resize: vertical; }

/* A stored secret's stand-in: a FIXED MASK, never a rendering of the value,
   which does not reach the page in any form. */
.key-mask { width: auto; display: inline-flex; align-items: center; color: var(--muted); letter-spacing: 0.12em; }

/* Tabs (spec 14): horizontal, 2px gaps, over a hairline. Item 9px/15px at
   0.89rem/500 muted with a 2px transparent underline; active turns
   primary-ink at 600 with a primary underline. */
.tabs {
  display: flex;
  gap: 2px;
  border-block-end: 1px solid var(--line);
  margin-block-end: 18px;
}

.tab-item {
  padding: 9px 15px;
  font-family: inherit;
  font-size: 0.89rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  cursor: pointer;
  transition: color var(--colour) var(--ease), border-color var(--colour) var(--ease);
}

.tab-item:hover { color: var(--ink-soft); }

.tab-item.is-active {
  color: var(--primary-ink);
  font-weight: 600;
  border-block-end-color: var(--primary);
}

/* Metric cards (spec 14): auto-fitting grid, an icon tile in primary-soft,
   then a value-over-label column. Read-only rest state — these do not lift,
   because they are not doors. */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.metric-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.metric-tile {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
}

.metric-lines { display: flex; flex-direction: column; min-width: 0; }

.metric-value {
  font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.metric-label {
  font-size: 0.76rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 15px;
}
.field-grid .is-wide { grid-column: 1 / -1; }

.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-block-start: 18px; }

.inline-field { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 500; }
.inline-field input { width: auto; min-height: 0; }

/* --------------------------------------------------------------- badges --- */
/* The pairing rule is absolute: soft tint behind, ink tone in front. Every
   badge carries its state NAME — a badge that is only a colour is not one. */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.73rem; font-weight: 600; letter-spacing: -0.01em;
  background: var(--surface-soft); color: var(--muted);
}

.badge.is-done { background: var(--success-soft); color: var(--success-ink); }
.badge.is-pending { background: var(--warning-soft); color: var(--warning-ink); }
.badge.is-late { background: var(--danger-soft); color: var(--danger-ink); }
.badge.is-new { background: var(--primary-soft); color: var(--primary-ink); }
.badge.is-time { background: var(--aqua-soft); color: var(--aqua-ink); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 0.76rem; font-weight: 600;
  background: var(--primary-soft); color: var(--primary-ink);
}

/* A COMPANY reading position rides the aqua family; the organization keeps
   the primary. The tint is never the sole carrier — the label names it. */
.chip.is-aqua { background: var(--aqua-soft); color: var(--aqua-ink); }

.flash {
  padding: 11px 16px; border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: 500;
  background: var(--primary-soft); color: var(--primary-ink);
  margin-block-end: 18px;
}
.flash.is-error { background: var(--danger-soft); color: var(--danger-ink); }

/* ---------------------------------------------------------------- tables -- */

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

.table thead th {
  background: var(--bg);
  color: var(--muted);
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.01em;
  text-align: start; white-space: nowrap;
  padding: 11px 16px;
  border-block-end: 1px solid var(--line);
}

.table tbody td { padding: 14px 16px; vertical-align: middle; font-size: 0.92rem; }
.table tbody tr + tr td { border-block-start: 1px solid var(--line); }
.table tbody tr:hover td { background: var(--bg); }

/* Suspension is expressed TWICE, so it survives a colour-blind read. */
.table tbody tr.is-suspended td { opacity: 0.55; background: var(--surface-soft); }

.table .actions { text-align: end; white-space: nowrap; }
.table-wrap { overflow-x: auto; }

/* --------------------------------------------------------------- avatars -- */
/* NO INITIAL LETTERS APPEAR IN ANY PERSON AVATAR, ANYWHERE. A person never
   appears as an empty circle: the fallback is a generated avatar. */

.avatar {
  border-radius: 50%;
  overflow: hidden;
  display: inline-grid; place-items: center;
  flex: 0 0 auto;
  background: var(--surface-soft);
}
.avatar svg { display: block; }

/* --------------------------------------------------------- empty states --- */
/* Glyph tile + short title + one action. NO supporting paragraph. */

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 60px 20px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}
.empty-state .tile {
  width: 50px; height: 50px; border-radius: var(--radius-lg);
  background: var(--surface-soft); color: var(--muted);
  display: grid; place-items: center;
}
.empty-state .title { font-size: 1.1rem; font-weight: 600; }

/* ------------------------------------------------------ the sign-in card -- */

.gate {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background: var(--bg);
}

.gate-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
  padding: 28px;
}

.gate-card.is-wide { max-width: 560px; }

.wordmark {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em;
  color: var(--primary-ink);
  text-align: center;
  margin-block-end: 22px;
}

.stack { display: flex; flex-direction: column; gap: 15px; }

/* An icon action (spec 14): 36px square, md radius, line border, muted;
   hover fills primary-soft and turns primary. */
.icon-action {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--colour) var(--ease), color var(--colour) var(--ease);
}

.icon-action:hover { background: var(--primary-soft); color: var(--primary); }

.icon-action:disabled { opacity: 0.5; cursor: default; }

/* A field with its suggestion button standing beside it, aligned to the
   control rather than the label. */
.suggest-wrap { display: flex; gap: 8px; align-items: flex-end; }

.suggest-wrap > .field { flex: 1; min-width: 0; }

.suggest-wrap > .icon-action { margin-block-end: 4px; }

/* A translation suggestion: a PROPOSAL, dashed like every add-affordance,
   waiting for the person's accept — or their dismissal, which costs
   nothing. It never writes itself into the field. */
.suggestion-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-block-start: 8px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
}

.suggestion-text { font-weight: 500; color: var(--ink); }

.suggestion-dismiss {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%;
  color: var(--muted); cursor: pointer;
  transition: background var(--colour) var(--ease), color var(--colour) var(--ease);
}

.suggestion-dismiss:hover { background: var(--surface-hover); color: var(--ink-soft); }

/* The provider's connection indicator: one colour standing, another not —
   and never colour alone: the chip names the state and its reason. */
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  font-size: 0.78rem; font-weight: 600;
  border-radius: var(--radius-pill);
}

.status-chip .status-dot { width: 8px; height: 8px; border-radius: 50%; }

.status-chip.is-on { background: var(--success-soft); color: var(--success-ink); }

.status-chip.is-on .status-dot { background: var(--success); }

.status-chip.is-off { background: var(--danger-soft); color: var(--danger-ink); }

.status-chip.is-off .status-dot { background: var(--danger); }

/* The selected provider's logo, standing beside its selector. A file the
   operator may replace; the languages glyph stands in when none exists. */
.provider-logo {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  overflow: hidden;
}

.provider-logo img { width: 30px; height: 30px; object-fit: contain; }

/* The money meter: the consumed against the whole, when a provider's API
   reports one. */
.meter {
  height: 10px;
  margin-block: 8px 6px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-pill);
}

/* A section heading INSIDE a dialog, carrying the panel title's own
   weight on a soft band of its own. */
.section-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface-soft);
  border-radius: var(--radius-md);
}

/* The founding owner's mark in the partners table: the crown, from the
   gold distinction family — never colour alone, the title names it too. */
.owner-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  margin-inline-end: 4px;
  border-radius: var(--radius-sm);
  background: var(--executive-gold-soft);
  color: var(--executive-gold);
  vertical-align: middle;
}
.row { display: flex; align-items: center; gap: 10px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.link-button {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--primary); cursor: pointer;
}
.link-button:hover { color: var(--primary-hover); }

/* A copyable link is Latin-script data: left-to-right, and it never wraps
   into an unreadable run. */
.token-link {
  display: block;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: nowrap;
}

.step-strip { display: flex; gap: 8px; margin-block-end: 20px; }
.step {
  flex: 1;
  border-block-start: 3px solid var(--line);
  padding-block-start: 10px;
  font-size: 0.81rem; font-weight: 500; color: var(--muted);
}
.step.is-active { border-block-start-color: var(--primary); color: var(--primary-ink); font-weight: 600; }

.section-gap { margin-block-start: 26px; }
.divider { border: none; border-block-start: 1px solid var(--line); margin-block: 20px; }

/* ================================================== the login screen ====== */
/* The two-panel login approved on 2026-08-24, with the polish pass of the
   same date. The brand panel sits at the INLINE END: right in English,
   mirrored to the left in Arabic. No layout here hard-codes a left or a
   right, and every colour below is a token. */

.gate.is-split {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* The card FLOATS on the canvas rather than filling the screen. */
.gate-split {
  width: 100%;
  max-width: 1000px;
  min-height: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
}

/* ---------------------------------------------------- the form panel ----- */

.gate-form-side {
  display: grid;
  place-items: center;
  padding: 48px 44px;
  background: var(--surface);
}

.gate-form { width: 100%; max-width: 340px; }

/* The identity block sits CENTRED in the white panel: mark above, name
   below, both larger than the old start-aligned wordmark. Mark and name are
   TEMPORARY — the real logo is still being drawn. */
.gate-head {
  text-align: center;
  margin-block-end: 30px;
}

.gate-logo {
  display: block;
  width: auto;
  max-width: 190px;
  max-height: 92px;
  margin: 0 auto 14px;
  object-fit: contain;
}

.gate-name {
  margin: 0 0 26px;
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--primary-ink);
}

.gate-heading {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em;
  margin: 0 0 5px;
}

/* ONE short welcome line, by DIRECT OWNER REQUEST of 2026-08-24 and recorded.
   Spec 14 otherwise keeps every title standing alone; this is the recorded
   single exception that rule allows for. */
.gate-welcome {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.gate-submit { margin-block-start: 6px; }
.gate-submit:hover:not(:disabled) { box-shadow: var(--shadow-hover); }

/* Owner request 2026-08-24, SCOPED TO THE GATE: a soft fill and a hairline
   border. The closed field anatomy is otherwise untouched — same box, same
   height, same radius, same focus ring. */
.gate-form .control {
  background: var(--surface-soft);
  border-color: var(--line);
}
.gate-form .control:hover { border-color: var(--line-strong); }
.gate-form .control:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* ------------------------------------------------- in-field affordances -- */
/* A leading glyph and a reveal live INSIDE the closed anatomy. They change
   nothing about the box: same height, same radius, same border, same ring. */

.control-wrap { position: relative; display: block; }

.control-icon {
  position: absolute;
  inset-inline-start: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  color: var(--muted);
  pointer-events: none;
}

.control-wrap.has-icon .control { padding-inline-start: 40px; }
.control-wrap.has-reveal .control { padding-inline-end: 42px; }

.control-reveal {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--colour) var(--ease), background var(--colour) var(--ease);
}
.control-reveal:hover { color: var(--ink-soft); background: var(--surface-hover); }
.control-reveal:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ------------------------------------------- the brand panel ------------- */

/* A two-stop diagonal gradient of OUR primary family. The angle is the one
   physical value here and it MIRRORS: a gradient carries no logical
   direction, so the right-to-left case is stated rather than inherited. */
.gate-brand-side {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 20px;
  padding: 40px;
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: var(--on-accent);
}

[dir="rtl"] .gate-brand-side {
  background-image: linear-gradient(225deg, var(--primary), var(--primary-hover));
}

.brand-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

/* THE RING. Centring is symmetric, so the offsets below express no direction
   and need no mirror. It is deliberately larger than the panel and crops. */
.brand-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 470px;
  height: 470px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ring-track {
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 1.25;
  opacity: 0.10;
}

.ring-spin,
.ring-breathe {
  transform-box: view-box;
  transform-origin: 200px 200px;
}

/* ONE slow revolution, and a gentle breath on the outermost. Calm motion:
   nothing bounces and nothing flashes. Both stop under a reduced-motion
   preference through the global rule at the foot of this file. */
.ring-spin { animation: ring-spin 78s linear infinite; }
.ring-breathe { animation: ring-breathe 8s var(--ease) infinite; }

/* The orbit mirrors with the layout. */
[dir="rtl"] .ring-spin { animation-direction: reverse; }

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ring-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

.orbit-dot.is-aqua { fill: var(--aqua); opacity: 0.85; }
.orbit-dot.is-lime { fill: var(--electric); opacity: 0.45; }
.orbit-dot.is-gold { fill: var(--executive-gold); opacity: 0.80; }

/* ------------------------------------------------ the product vignette --- */
/* A "today" card in our own tokens. NO stock photograph, NO third-party logo,
   NO screenshot. The rows carry abstract bars rather than invented copy. */

.vignette { position: relative; }

.vignette-card {
  width: 272px;
  padding: 14px;
  display: grid;
  gap: 11px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  animation: vignette-float 6.5s var(--ease) infinite;
}

@keyframes vignette-float {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}

.vignette-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-block-end: 11px;
  border-block-end: 1px solid var(--line);
}

.vignette-row { display: flex; align-items: center; gap: 9px; }

.vignette-avatar { flex: 0 0 auto; display: grid; }
.vignette-avatar .avatar { display: grid; }
.vignette-avatar svg { border-radius: 50%; background: var(--surface-soft); }

.vignette-lines { flex: 1 1 auto; display: grid; gap: 5px; min-width: 0; }

.bar {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
}
.bar-title { width: 76px; height: 7px; background: var(--line-strong); }
.bar-strong { width: 100%; background: var(--line-strong); }
.bar-weak { width: 56%; }

/* The finished row reads as done through an ICON AND A STRIKE. Colour is
   never the sole carrier of a state, here or anywhere. */
.bar.is-struck { position: relative; opacity: 0.5; }
.bar.is-struck::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-block-start: 1px solid var(--muted);
}

.vignette-check {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--success-soft);
  color: var(--success-ink);
}

.vignette-chip {
  flex: 0 0 auto;
  width: 34px; height: 14px;
  border-radius: var(--radius-pill);
}
.vignette-chip.is-success { background: var(--success-soft); }
.vignette-chip.is-warning { background: var(--warning-soft); }
.vignette-chip.is-aqua { background: var(--aqua-soft); }

/* ONE line. No carousel, and no dots to page through. It always sits ABOVE
   the ring, so a passing orbit dot never crowds the words. */
/* The phrases CROSSFADE one after another. They are STACKED in one grid
   cell, so the panel never reflows as the wording changes length, and the
   block keeps the height of the tallest phrase. */
.brand-line {
  position: relative;
  z-index: 1;
  margin: 0;
  display: grid;
  /* The PAGE-TITLE role from spec 14's scale, unaltered: 1.5rem / 600 /
     -0.025em. The line reads as a mark, so it takes the largest role the
     scale offers rather than a size invented for it. */
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35;
  text-align: center;
  color: var(--on-accent);
}

.brand-phrase {
  grid-area: 1 / 1;
  opacity: 0;
  /* Six phrases at 4s each. Only opacity and transform move, and the travel
     is a few pixels — calm, like the ring. */
  animation: brand-phrase 24s var(--ease) infinite;
}

.brand-phrase:nth-child(2) { animation-delay: 4s; }
.brand-phrase:nth-child(3) { animation-delay: 8s; }
.brand-phrase:nth-child(4) { animation-delay: 12s; }
.brand-phrase:nth-child(5) { animation-delay: 16s; }
.brand-phrase:nth-child(6) { animation-delay: 20s; }

@keyframes brand-phrase {
  0%     { opacity: 0; transform: translateY(7px); }
  2.5%   { opacity: 1; transform: translateY(0); }
  14.2%  { opacity: 1; transform: translateY(0); }
  16.7%  { opacity: 0; transform: translateY(-7px); }
  100%   { opacity: 0; transform: translateY(-7px); }
}

/* ------------------------------------------- the language dropdown ------- */
/* A DROPDOWN, not a row of toggles. Flags stay SVG assets beside the names —
   never emoji, which do not render as flags on Windows, and never Lucide,
   because a flag is imagery rather than a system glyph. */

.lang-menu {
  position: relative;
  margin-block-start: 30px;
  display: flex;
  justify-content: flex-start;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--control-height-compact);
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--colour) var(--ease), background var(--colour) var(--ease);
}

.lang-trigger:hover { background: var(--surface-hover); border-color: var(--muted); }
.lang-trigger:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }

/* The caret expresses OPEN and CLOSED state, not direction, so it rotates
   rather than mirrors. */
.lang-caret {
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform var(--structural) var(--ease);
}
.lang-trigger[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

/* The menu opens from the trigger's own inline edge, upward: the trigger sits
   at the foot of the form, so there is no room below it. */
.lang-list {
  position: absolute;
  inset-inline-start: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  min-width: 190px;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
}

.lang-list[hidden] { display: none; }

.lang-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: var(--nav-item-height);
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: start;
  cursor: pointer;
  transition: background var(--colour) var(--ease), color var(--colour) var(--ease);
}

.lang-item:hover { background: var(--surface-hover); }
.lang-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* The chosen language is carried by fill AND weight AND a CHECK — never by
   colour alone. */
.lang-item.is-active {
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 600;
}

.lang-item-name { flex: 1 1 auto; }

.lang-tick { display: grid; place-items: center; color: var(--primary-ink); }

/* The flag is imagery, not a system glyph: it never enters the Lucide set. */
.lang-flag {
  display: block;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  flex: 0 0 auto;
}

/* ------------------------------------------------------------- narrow ----- */
/* Below 900px the brand panel collapses to a SLIM TOP BAND: the ring stays
   and crops, the vignette stands down, and the form takes the width. */
@media (max-width: 900px) {
  .gate.is-split { padding: 0; align-items: stretch; }

  .gate-split {
    grid-template-columns: 1fr;
    min-height: 100vh;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }

  .gate-brand-side {
    order: -1;
    min-height: 132px;
    padding: 22px;
    gap: 0;
    grid-template-rows: auto;
    align-content: center;
  }

  /* The illustration stands down; the ring stays and crops. */
  .vignette { display: none; }
  .brand-ring { width: 340px; height: 340px; }

  .gate-form-side {
    padding: 36px 24px 40px;
    place-items: start center;
  }
  .gate-form { max-width: 380px; }
}

/* ================================================== the units tree ======= */
/* Children render INSIDE the parent's area, indented, with a connector on the
   card's INLINE-START edge — so the whole tree mirrors in Arabic without a
   single physical offset. Depth drives the colour through spec 14's depth
   palette, which cycles past five rather than running out. */

.nav-group {
  margin: 18px 0 6px;
  padding-inline: 12px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--muted);
}

.unit-tree { display: grid; gap: 14px; }

.unit-node { display: grid; gap: 10px; }

.unit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.unit-card.is-root { border-color: var(--executive-gold); }

.unit-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* The icon tile takes the depth tint; the ROOT takes gold instead, from the
   distinction family. */
.unit-tile {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
}

.unit-tile.is-crown {
  background: var(--executive-gold-soft);
  color: var(--executive-gold);
}

.unit-lines { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }

.unit-kicker {
  margin: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--muted);
}
.unit-company { color: var(--meta-ink); }

.unit-name { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }

.unit-meta {
  margin: 0;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--muted);
}
.unit-code { color: var(--meta-ink); font-variant-numeric: tabular-nums; }
.unit-dot { color: var(--line-strong); }

/* An ACTING head is a stand-in, and reads as one: the wording says so and the
   tone differs. Never colour alone — the label carries it. */
.unit-meta .is-acting { color: var(--warning-ink); }
.unit-unset { color: var(--meta-ink); }

.unit-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.unit-chip { background: var(--primary-soft); color: var(--primary-ink); }
.unit-chip.is-members { background: var(--aqua-soft); color: var(--aqua-ink); }

.unit-actions { display: flex; align-items: center; gap: 8px; }

.unit-fold {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--muted); cursor: pointer;
}
.unit-fold:hover { background: var(--surface-hover); }
.unit-fold:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* The chevron expresses OPEN and CLOSED, not direction, so it rotates. */
.unit-fold .is-folded { display: block; transform: rotate(-90deg); }

.unit-active { display: grid; place-items: center; color: var(--success); }

/* The child area: indented, and carrying the connector. */
.unit-children {
  display: grid;
  gap: 10px;
  margin-inline-start: 26px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--line);
}

/* Depth colours the connector and the tile together. */
.depth-1 > .unit-children { border-inline-start-color: var(--depth-1); }
.depth-2 > .unit-children { border-inline-start-color: var(--depth-2); }
.depth-3 > .unit-children { border-inline-start-color: var(--depth-3); }
.depth-4 > .unit-children { border-inline-start-color: var(--depth-4); }
.depth-5 > .unit-children { border-inline-start-color: var(--depth-5); }

.depth-1 > .unit-card .unit-tile { background: var(--depth-1-soft); color: var(--depth-1-ink); }
.depth-2 > .unit-card .unit-tile { background: var(--depth-2-soft); color: var(--depth-2-ink); }
.depth-3 > .unit-card .unit-tile { background: var(--depth-3-soft); color: var(--depth-3-ink); }
.depth-4 > .unit-card .unit-tile { background: var(--depth-4-soft); color: var(--depth-4-ink); }
.depth-5 > .unit-card .unit-tile { background: var(--depth-5-soft); color: var(--depth-5-ink); }

/* ONE contextual add per card. Its wording never names a level. */
.unit-add {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--control-height-compact);
  padding: 7px 13px;
  background: var(--success-soft);
  color: var(--success-ink);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 0.83rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--colour) var(--ease);
}
.unit-add:hover { background: var(--success-soft-hover); }
.unit-add:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ------------------------------------------------------------- the modal -- */

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}

/* Never taller than the screen: a modal that outgrows the viewport was
   CENTERED past its top edge, and the first row — the highest label — sat
   cut off above the screen with no way to scroll to it. The head and the
   foot stay pinned; the BODY is what scrolls. */
.modal {
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-popover);
  overflow: hidden;
}

.modal-head, .modal-foot { flex: 0 0 auto; }

.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px;
  background: var(--surface-soft);
}

.modal-close {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  flex: 0 0 auto;
}
.modal-close:hover { background: var(--surface-hover); }
.modal-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.modal-body {
  padding: 20px;
  display: grid; gap: 14px;
  align-content: start;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
}

.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 20px;
  border-block-start: 1px solid var(--line);
}

.add-row {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.add-row-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* ---------------------------------------------- the level-labels popup -- */
/* Each row wears its place in the pyramid: a rank number under an icon
   tile, and THE TOP RANK takes the crown from the gold distinction family. */
.level-row { display: flex; align-items: flex-start; gap: 12px; }
.level-row .add-row-grid { flex: 1 1 auto; min-width: 0; }

.level-row-head {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 3px;
  /* Sits beside the fields, aligned with their controls, not their labels. */
  padding-block-start: 22px;
}

.level-tile {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary-ink);
}

.level-tile.is-crown {
  background: var(--executive-gold-soft);
  color: var(--executive-gold);
}

.level-rank {
  font-size: 0.72rem; font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The ghost row that appends another. */
.ghost-row {
  width: 100%;
  min-height: var(--control-height);
  background: var(--primary-soft);
  color: var(--primary-ink);
  border: 1px dashed transparent;
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--colour) var(--ease);
}
.ghost-row:hover { background: var(--primary-soft-hover); }
.ghost-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The named-person option with nobody to name yet: informative, not silent. */
.is-disabled-row {
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
}

.link-button.is-danger { color: var(--danger); }
.link-button.is-danger:hover { color: var(--danger-hover); }

@media (max-width: 700px) {
  .unit-children { margin-inline-start: 10px; padding-inline-start: 12px; }
  .unit-actions { width: 100%; justify-content: flex-end; }
}


/* ------------------------------------------------- the account block ----- */
/* Spec 14: pinned to the foot above a hairline, its menu opening UPWARD as a
   popover. The line under the name carries DATA — the capacity the account
   holds — on the same footing as the brand block's organization line. */

.account-block { position: relative; }

.account-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: background var(--colour) var(--ease);
}
.account-trigger:hover { background: var(--surface-hover); }
.account-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The account avatar: CIRCULAR, on a two-colour identity ring with a
   surface gap (owner instruction 2026-08-26). The generated face itself is
   untouched — same person, same avatar, every screen. */
.account-avatar {
  flex: 0 0 auto;
  display: grid; place-items: center;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--aqua));
}

.account-avatar svg {
  display: block;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--surface-soft);
}
.account-lines { flex: 1 1 auto; display: grid; gap: 1px; min-width: 0; }

.account-name {
  font-size: 0.88rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The reading position, right under the name: the company being read, or
   the organization when "All" is chosen within it. */
.account-context {
  font-size: 0.74rem; font-weight: 500; color: var(--primary-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.account-capacity {
  font-size: 0.72rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.account-caret { display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; }
.account-trigger[aria-expanded="true"] .account-caret { transform: rotate(180deg); }

/* It opens UPWARD: the block is pinned to the foot, so there is nothing below. */
.account-menu {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + 6px);
  z-index: 30;
  padding: 5px;
  display: grid;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
}
.account-menu[hidden] { display: none; }

.account-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: none; border: none;
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 0.875rem; font-weight: 500;
  color: var(--ink-soft);
  text-align: start;
  cursor: pointer;
  transition: background var(--colour) var(--ease), color var(--colour) var(--ease);
}
.account-item:hover { background: var(--surface-hover); }
/* 17px glyphs in muted that turn primary on hover. */
.account-item .icon { color: var(--muted); }
.account-item:hover .icon { color: var(--primary); }
.account-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }


/* ------------------------------------------------ the context switcher -- */
/* A READING POSITION, not a subscription. Companies collapse under their
   organization, so the caller picks the organization then the company. */

.switcher-heading {
  margin: 4px 10px 4px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--meta-ink);
}

.switcher { display: grid; gap: 1px; margin-block-end: 4px; }

/* The row holds TWO buttons: the caret folds, the name CHOOSES the
   organization itself — "All" within it — so an organization with no
   companies yet is still selectable. */
.switcher-org {
  display: flex; align-items: center;
  width: 100%;
  border-radius: var(--radius-md);
}
.switcher-org:hover { background: var(--surface-hover); }
.switcher-org.is-current .switcher-org-choose { color: var(--primary-ink); }

.switcher-org-caret {
  display: grid; place-items: center;
  padding: 7px; padding-inline-end: 0;
  background: none; border: none;
  border-radius: var(--radius-md);
  color: inherit;
  cursor: pointer;
}
.switcher-org-caret:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.switcher-org-choose {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; padding-inline-start: 7px;
  background: none; border: none;
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 0.83rem; font-weight: 600;
  color: var(--ink-soft);
  text-align: start;
  cursor: pointer;
}
.switcher-org-choose:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.switcher-org-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-caret { display: grid; place-items: center; color: var(--muted); }
/* The chevron expresses OPEN and CLOSED, not direction, so it rotates. */
.switcher-caret.is-folded { transform: rotate(-90deg); }
.switcher-tick { display: grid; place-items: center; color: var(--primary); }

/* Collapsed under the organization, and set in from it. */
.switcher-companies {
  display: grid; gap: 1px;
  margin-inline-start: 20px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--line);
}

.switcher-company {
  width: 100%;
  padding: 6px 10px;
  background: none; border: none;
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.8rem; font-weight: 500;
  color: var(--muted);
  text-align: start;
  cursor: pointer;
}
.switcher-company:hover { background: var(--surface-hover); color: var(--ink-soft); }
.switcher-company.is-current { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.switcher-company:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }

  /* The rule above stops the phrase rotation, and every phrase rests at
     opacity 0 — so without this the tagline would vanish entirely. The FIRST
     phrase stays put instead, which is the whole sequence's static fallback. */
  .brand-phrase { opacity: 0; transform: none; }
  .brand-phrase:first-child { opacity: 1; }
}

/* ----------------------------------------------------------------------
   THE ENTITY CARD (owner ruling 2026-08-29, spec 14 — THE standing card):
   the framed, accent-striped card every entity screen composes and never
   re-implements. The accent is the entity's own (a person's role, one
   role one colour); the hierarchy's top person wears the executive gold
   as a full frame — the gold distinction family, extended by the ruling. */
.entity-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 18px; }

.entity-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 18px 16px 16px;
  box-shadow: 0 1px 2px rgb(17 21 34 / 4%), 0 10px 26px rgb(17 21 34 / 5%);
  transition: transform 0.18s var(--ease, ease), box-shadow 0.18s var(--ease, ease);
  overflow: hidden;
}
.entity-card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 4px;
  background: var(--card-accent, var(--line-strong));
}
.entity-card:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgb(17 21 34 / 6%), 0 16px 38px rgb(17 21 34 / 10%); }
.entity-card.is-dimmed { opacity: 0.62; }
.entity-card.is-gold { border: 1.5px solid var(--executive-gold); }
.entity-card.is-gold::before { background: var(--executive-gold); }

.entity-card-top { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.entity-card-code { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.entity-card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.entity-card-dot.is-off { background: var(--line-strong); }

.entity-card-center { text-align: center; }
.entity-card-face {
  width: 76px;
  height: 76px;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  border: 3px solid var(--card-accent, var(--line-strong));
  box-shadow: 0 0 0 4px var(--card-accent-soft, var(--surface-soft));
}
.entity-card.is-gold .entity-card-face { border-color: var(--executive-gold); box-shadow: 0 0 0 4px var(--executive-gold-soft); }
.entity-card-face img, .entity-card-face svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.entity-card-name { font-weight: 700; font-size: 1.02rem; margin: 10px 0 2px; letter-spacing: -0.01em; }
.entity-card-subtitle { margin: 0; font-weight: 600; font-size: 0.86rem; color: var(--card-accent, var(--ink-soft)); }
.entity-card-badge {
  display: inline-flex;
  margin-block-start: 7px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--card-accent-soft, var(--surface-soft));
  color: var(--card-accent, var(--ink-soft));
}
.entity-card.is-gold .entity-card-badge { background: var(--executive-gold-soft); color: var(--executive-gold); }

.entity-card-meta { margin-block-start: 12px; border-block-start: 1px solid var(--line); padding-block-start: 10px; display: grid; gap: 6px; }
.entity-card-meta-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-soft); margin: 0; min-width: 0; }
.entity-card-meta-row .icon { color: var(--muted); flex: none; }
.entity-card-meta-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.entity-card-link { display: flex; align-items: center; gap: 9px; margin-block-start: 10px; border-block-start: 1px solid var(--line); padding-block-start: 10px; }
.entity-card-link-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; background: var(--surface-soft); }
.entity-card-link-avatar img, .entity-card-link-avatar svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.entity-card-link-label { font-size: 0.68rem; color: var(--muted); margin: 0; }
.entity-card-link-name { font-size: 0.8rem; font-weight: 600; margin: 0; }

.entity-card-actions { display: flex; gap: 8px; margin-block-start: 12px; }
.entity-card-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s var(--ease, ease);
}
.entity-card-btn.is-primary { background: var(--primary-soft); color: var(--primary-ink); }
.entity-card-btn.is-primary:hover { background: var(--primary-soft-hover); }
.entity-card-btn.is-success { background: var(--success-soft); color: var(--success-ink); }
.entity-card-btn.is-success:hover { background: var(--success-soft-hover); }

/* The COMPACT entity card (owner instruction 2026-08-30): the same standing
   card — accent bar, code, chips, actions — tightened for face-less
   catalogue lists like the job titles and grades. */
.entity-card-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.entity-card.is-compact { padding: 12px 14px; }
.entity-card.is-compact .entity-card-top { min-height: 22px; }
.entity-card.is-compact .entity-card-name { font-size: 0.92rem; margin: 8px 0 0; }
.entity-card.is-compact .entity-card-badge { margin-block-start: 5px; }
.entity-card.is-compact .entity-card-meta { margin-block-start: 9px; padding-block-start: 8px; }
.entity-card.is-compact .entity-card-actions { margin-block-start: 9px; }
.entity-card.is-compact .entity-card-btn { padding: 6px 10px; font-size: 0.8rem; }

/* The reading-position chip's logo (owner instruction 2026-08-29): the
   real mark beside the name; the lettered tile stands in only without one. */
.chip-logo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }

/* Suspend/resume on the entity card (owner instruction 2026-08-29): a red
   stop and a green play — state-coloured, never a bare X. */
.icon-action.is-stop { color: var(--danger); }
.icon-action.is-stop:hover { background: var(--danger-soft); color: var(--danger); }
.icon-action.is-go { color: var(--success); }
.icon-action.is-go:hover { background: var(--success-soft); color: var(--success); }

/* The required marker — an affordance inside the closed field anatomy. */
.field-required { color: var(--danger); margin-inline-start: 3px; }

/* The avatar-picker popup's choices. */
.avatar-choice { border: none; border-radius: 50%; overflow: hidden; width: 56px; height: 56px; padding: 0; background: var(--surface-soft); cursor: pointer; }
.avatar-choice.is-chosen { box-shadow: 0 0 0 3px var(--primary); }

/* The empty badge keeps its line — one rhythm across every card. */
.entity-card-badge.is-empty { visibility: hidden; }

/* ---------------------------------------------------------------------------
   «معاينة المخطط» (owner approval 2026-08-29): the chart as connected cards.
   ONE LEVEL, ONE COLOUR — the rank classes walk the standing depth ladder,
   and the root wears the executive gold. The acting seat wears the warm
   tint, exactly as the reference drawing.
--------------------------------------------------------------------------- */
.chart-canvas { position: relative; display: flex; align-items: flex-start; gap: 22px; overflow-x: auto; padding: 18px 6px 30px; }
.chart-trunk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }

.chart-support { width: 240px; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 12px; box-shadow: var(--shadow-soft); }
.chart-support-head { display: flex; gap: 10px; align-items: center; }
.chart-support-head .tile { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.chart-support-title { margin: 0; font-weight: 700; font-size: 0.92rem; }
.chart-support-sub { margin: 0; color: var(--muted); font-size: 0.76rem; }

.chart-node { display: flex; flex-direction: column; align-items: center; }
.chart-node.is-linked::before { content: ''; width: 0; height: 18px; border-inline-start: 2px dotted var(--line-strong); }

.chart-stack { display: flex; flex-direction: column; align-items: center; }
.chart-row { display: flex; align-items: flex-start; justify-content: center; gap: 20px; margin-block-start: 14px; padding: 16px; border: 1px dashed var(--line); border-radius: 16px; background: var(--surface-soft); }

.chart-card { width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-soft); border-block-start: 3px solid var(--chart-accent, var(--line-strong)); }
.chart-card-head { display: flex; gap: 10px; align-items: center; padding: 10px 12px 8px; }
.chart-card-tile { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--chart-accent-soft, var(--surface-soft)); color: var(--chart-accent-ink, var(--muted)); }
.chart-card-kicker { margin: 0; color: var(--muted); font-size: 0.72rem; }
.chart-card-name { margin: 0; font-weight: 700; font-size: 0.9rem; line-height: 1.35; }

.chart-card-manager { display: flex; gap: 10px; align-items: center; padding: 8px 12px; }
.chart-card-manager.is-acting { background: var(--danger-soft); }
.chart-manager-name { margin: 0; font-size: 0.84rem; font-weight: 600; }
.chart-card-manager.is-acting .chart-manager-name { color: var(--danger-ink); }
.chart-manager-title { margin: 0; color: var(--muted); font-size: 0.74rem; }
.chart-manager-acting { margin: 0; color: var(--danger-ink); font-size: 0.74rem; font-weight: 700; }

.chart-card-foot { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; padding: 7px 12px; font: inherit; font-size: 0.8rem; font-weight: 600; background: var(--chart-accent-soft, var(--surface-soft)); color: var(--chart-accent-ink, var(--ink)); }
.chart-card-plus { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; background: var(--chart-accent, var(--line-strong)); color: var(--on-accent); }

.chart-rank-0 { --chart-accent: var(--executive-gold); --chart-accent-soft: var(--executive-gold-soft); --chart-accent-ink: var(--executive-gold); }
.chart-rank-1 { --chart-accent: var(--depth-1); --chart-accent-soft: var(--depth-1-soft); --chart-accent-ink: var(--depth-1-ink); }
.chart-rank-2 { --chart-accent: var(--depth-2); --chart-accent-soft: var(--depth-2-soft); --chart-accent-ink: var(--depth-2-ink); }
.chart-rank-3 { --chart-accent: var(--depth-3); --chart-accent-soft: var(--depth-3-soft); --chart-accent-ink: var(--depth-3-ink); }
.chart-rank-4 { --chart-accent: var(--depth-4); --chart-accent-soft: var(--depth-4-soft); --chart-accent-ink: var(--depth-4-ink); }
.chart-rank-5 { --chart-accent: var(--depth-5); --chart-accent-soft: var(--depth-5-soft); --chart-accent-ink: var(--depth-5-ink); }

.chart-member { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.chart-member-face { width: 44px; height: 44px; border-radius: 999px; overflow: hidden; flex: none; background: var(--surface-soft); display: grid; place-items: center; }
.chart-member-face img, .chart-member-face svg { width: 100%; height: 100%; object-fit: cover; }
.chart-member-name { margin: 0 0 2px; font-weight: 700; font-size: 0.9rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* The catalogue cards' danger action (job catalogue restyle 2026-08-29). */
.entity-card-btn.is-danger { background: var(--danger-soft); color: var(--danger-ink); }
.entity-card-btn.is-danger:hover { background: var(--danger); color: var(--on-accent); }