/* Amerray Hub — the shell.
   A tool people sign into a dozen times a day. It should read as equipment:
   neutral greys, one restrained accent, no gradients, no glow, no decoration
   that isn't carrying information. Sized for a screen at arm's length behind a
   counter: nothing informative under 13px, nothing tappable under 48px. */

/* The shell wears the confirmation desk's palette, so the hub and the four
   tools are visibly one place. The tokens changed; not one rule below did -
   everything here was already written against these names. */
:root {
  --bg: #E3E8F0;
  --surface: #E7EBF3;
  --surface-2: #DDE3EC;
  --surface-3: #D4DBE6;
  --line: #CDD5E1;
  --line-2: #BFC7D6;

  --text: #333C50;
  --text-2: #5C6784;
  --text-3: #8B94A8;

  --accent: #6C63C7;          /* the desk's iris, for what is chosen */
  --focus: #544CA8;
  --bad: #A31E3F;
  --good: #147A55;

  /* soft UI: light from the top-left, shadow to the bottom-right */
  --neo-out: 6px 6px 12px #C0C7D4, -6px -6px 12px #FFFFFF;
  --neo-sm:  4px 4px 8px #C4CBD8, -4px -4px 8px #FFFFFF;
  --neo-in:  inset 5px 5px 10px #BFC6D3, inset -5px -5px 10px #FFFFFF;
  --iris-grad: linear-gradient(135deg, #7B72D9 0%, #544CA8 100%);

  --ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --ar: 'Segoe UI', 'Tahoma', system-ui, sans-serif;
  --num: 'Segoe UI', system-ui, sans-serif;

  --r: 6px;
  --r-lg: 10px;
  --rail-w: 212px;
}

* { box-sizing: border-box; }

/* hidden means hidden: several rules here set display, which otherwise beats
   the browser's own [hidden] and leaves the element on screen */
[hidden] { display: none !important; }

html, body { height: 100%; }

body.hub {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ar);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════ wordmark */

.mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}

.mark__hex { display: none; }

.mark__letter {
  font-family: var(--ui);
  font-size: 17px; font-weight: 600; color: var(--text);
  line-height: 1;
}

.mark__word {
  margin: 14px 0 3px;
  font-family: var(--ui);
  font-size: 15px; font-weight: 600; letter-spacing: .30em;
  color: var(--text);
}

.mark__sub {
  margin: 0;
  font-size: 12.5px; color: var(--text-3);
}

/* ══════════════════════════════════════════════════ sign-in */

.login {
  min-height: 100dvh;
  display: grid; grid-template-rows: 1fr auto;
  place-items: center;
  padding: 40px 20px 22px;
}

.login__glow { display: none; }

.card {
  width: min(100%, 380px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px 24px;
  text-align: center;
}

.card__head { margin-bottom: 26px; display: grid; justify-items: center; }

/* ── who is signing in ── */

.agents {
  border: 0; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.agent { cursor: pointer; }
.agent input { position: absolute; opacity: 0; pointer-events: none; }

.agent__box {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  min-height: 52px;
  text-align: start;
  background: var(--surface-2);
  transition: background 140ms linear;
}

/* an initial, not a mascot */
.agent__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-family: var(--ui); font-size: 12px; font-weight: 600;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: 3px;
}

.agent__name {
  font-family: var(--ui);
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-2);
  display: block;
}

.agent__sub { font-size: 11.5px; color: var(--text-3); display: block; }

.agent:hover .agent__box { background: var(--surface-3); }

.agent input:checked + .agent__box { background: var(--surface-3); }
.agent input:checked + .agent__box .agent__name { color: var(--text); }
.agent input:checked + .agent__box .agent__icon {
  color: var(--bg); background: var(--accent); border-color: var(--accent);
}

.agent input:focus-visible + .agent__box { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ── the four digits ── */

.pin__dots {
  display: flex; justify-content: center; gap: 12px;
  margin: 0 0 18px;
  direction: ltr;
}

.pin__dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line-2);
  transition: background 120ms linear, border-color 120ms linear;
}

.pin__dots span.on { background: var(--accent); border-color: var(--accent); }
.pin__dots.err span { border-color: var(--bad); animation: nudge 260ms; }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  70% { transform: translateX(4px); }
}

.pin__field {
  width: 100%; height: 48px;
  text-align: center; letter-spacing: .7em; font-size: 19px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r);
  direction: ltr;
}

.pin__field:focus { outline: 2px solid var(--focus); outline-offset: -1px; }


.pad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  direction: ltr;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.pad__key {
  height: 54px;
  font-family: var(--num); font-size: 19px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-2);
  border: 0;
  cursor: pointer;
  transition: background 100ms linear;
}

.pad__key:hover { background: var(--surface-3); }
.pad__key:active { background: var(--line-2); }
.pad__key:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pad__key--soft { font-size: 14px; color: var(--text-3); }

/* ── feedback ── */

.msg {
  margin: 16px 0 14px; min-height: 20px;
  font-size: 12.5px; color: var(--text-3);
}

/* colour is never the only signal - the wording changes too */
.msg--err { color: var(--bad); }
.msg--err::before { content: '— '; }

.submit {
  width: 100%; height: 46px;
  font-family: var(--ar); font-size: 14px; font-weight: 600;
  color: var(--bg); text-decoration: none;
  display: grid; place-items: center;
  background: var(--accent);
  border: 0; border-radius: var(--r);
  cursor: pointer;
}

.submit:hover { background: #fff; }
.submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }


.fineprint { margin: 18px 0 0; font-size: 11.5px; color: var(--text-3); }
.fineprint a { color: var(--text-3); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.fineprint a:hover { color: var(--text-2); }

.alert {
  margin: 0 0 16px; padding: 10px 12px;
  border-radius: var(--r); font-size: 13px; text-align: start;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--text-2);
}

/* ══════════════════════════════════════════════════ dashboard */

/* The rail lives on the left, in every language.

   Left to itself the grid follows the writing direction, so switching to
   Arabic threw the rail across to the right and the whole screen changed
   shape. Muscle memory is worth more than that symmetry: the shell lays out
   left-to-right always, and the two columns put their own contents back into
   the reading direction. */
.shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100dvh; direction: ltr; }
[dir="rtl"] .rail, [dir="rtl"] .main { direction: rtl; }

/* ── the rail ──
   Built like the loyalty card's sidebar: a panel that floats inside the page
   with air around it, a brand block at the top, and one full pill per tool -
   its mark beside its name, not stacked above 9px of text. */

.rail {
  margin: 14px; padding: 16px 12px 14px;
  background: var(--surface);
  border-inline-end: 0;
  border-radius: 22px;
  box-shadow: var(--neo-sm);
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  position: sticky; top: 14px; height: calc(100dvh - 28px);
  transition: padding 260ms cubic-bezier(.4, 0, .2, 1);
}

.rail__brand {
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 6px 16px;
  text-decoration: none; color: inherit;
}

.rail__badge {
  width: 46px; height: 46px; display: grid; place-items: center;
  margin-bottom: 8px;
  font-family: var(--ui); font-size: 17px; font-weight: 600;
  color: #FFFFFF; background: var(--iris-grad);
  border-radius: 15px; box-shadow: var(--neo-sm);
}

.rail__word {
  font-family: var(--ui); font-size: 15px; font-weight: 700; letter-spacing: .16em;
  color: var(--accent);
}
.rail__sub {
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3);
}

.rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }

.rail__item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border-radius: 14px;
  text-decoration: none; color: var(--text-2);
  background: var(--surface);
  box-shadow: var(--neo-sm);
  transition: box-shadow 160ms ease, transform 160ms ease, color 140ms linear;
}

.rail__icon {
  flex: 0 0 auto;
  width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  color: #FFFFFF; background: var(--iris-grad);
  border-radius: 10px;
}

/* the same tints the launcher gives each tool, so the two screens agree */
.rail__item--store   .rail__icon { background: linear-gradient(135deg, #7B72D9, #544CA8); }
.rail__item--confirm .rail__icon { background: linear-gradient(135deg, #2FA07A, #147A55); }
.rail__item--profit  .rail__icon { background: linear-gradient(135deg, #4B7BC7, #2D5FA8); }
.rail__item--traffic .rail__icon { background: linear-gradient(135deg, #C79A3B, #B07C10); }
.rail__item--gift     .rail__icon { background: linear-gradient(135deg, #B06BC7, #7A3E9D); }
.rail__item--oldstock .rail__icon { background: linear-gradient(135deg, #C77B6B, #9D4E3E); }
.rail__item--reports  .rail__icon { background: linear-gradient(135deg, #5EA3A3, #2D6E6E); }
/* the trail sits beside the team panel and belongs to the same pair of hands,
   so it wears a slate close to TM's rather than a colour of its own */
.rail__item--monitor  .rail__icon { background: linear-gradient(135deg, #6C7A93, #3E4763); }
.rail__item--team    .rail__icon,
.rail__item--foot    .rail__icon { background: var(--surface-3); color: var(--text-3); }

.rail__label { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }

a.rail__item:hover { box-shadow: var(--neo-out); transform: translateY(-1px); color: var(--text); }
a.rail__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the tool you are inside: the pill itself is lit, and its mark goes quiet */
a.rail__item.is-on {
  background: var(--iris-grad); color: #FFFFFF;
  box-shadow: var(--neo-sm);
}
a.rail__item.is-on .rail__icon {
  background: rgba(255, 255, 255, .22); color: #FFFFFF;
}

.rail__item.is-soon { cursor: default; opacity: .45; box-shadow: none; background: var(--surface-2); }
.rail__item--foot { margin-top: auto; }
.main { display: flex; flex-direction: column; min-width: 0; }

/* ── folding the rail ──
   The checkbox sits before .shell, so one rule can drive the whole grid: the
   column narrows to a strip and every label inside slides away. Width is the
   only animated property here - the pills keep their shape, they just lose the
   room their words were using. */

/* 92, not 74 - and the arithmetic matters. --rail-w is the GRID COLUMN; the rail
   pill inside it keeps its 14px margin on both sides, so the pill is 28px
   narrower than the column. A 44px tile with the pill's 10px padding on each
   side needs a 64px pill, and 64 + 28 = 92. At 74 the pill was 46px wide and
   every tile hung 9px past its edges - measured in the browser, not guessed. */
.rail__fold:checked ~ .shell { --rail-w: 92px; }

.shell { transition: grid-template-columns 260ms cubic-bezier(.4, 0, .2, 1); }

.rail__collapse {
  position: absolute; inset-block-start: 14px; inset-inline-end: 12px;
  /* above the brand link, which is a full-width block starting at the same
     height - without this the arrow shows through it and the click lands on
     the link, which goes home */
  z-index: 5;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 9px; cursor: pointer;
  color: var(--text-3); background: var(--surface-2);
  box-shadow: var(--neo-sm);
  transition: color 140ms linear, background 140ms linear, transform 260ms cubic-bezier(.4, 0, .2, 1);
}
.rail__collapse svg { width: 15px; height: 15px; }
.rail__collapse:hover { color: var(--text); background: var(--surface-3); }
.rail__fold:checked ~ .shell .rail__collapse { transform: rotate(180deg); }
[dir="rtl"] .rail__collapse svg { transform: scaleX(-1); }
.rail__fold:focus-visible ~ .shell .rail__collapse { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Text that goes when the rail folds. Fading and sliding together reads as one
   movement; collapsing the width as well stops the pill from holding a gap. */
.rail__word, .rail__sub, .rail__label, .rail__outLabel {
  transition: opacity 160ms linear, transform 220ms cubic-bezier(.4, 0, .2, 1);
}
.rail__fold:checked ~ .shell :is(.rail__word, .rail__sub, .rail__label, .rail__outLabel) {
  opacity: 0; transform: translateX(-6px);
  width: 0; overflow: hidden; white-space: nowrap; pointer-events: none;
}
[dir="rtl"] .rail__fold:checked ~ .shell :is(.rail__word, .rail__sub, .rail__label, .rail__outLabel) {
  transform: translateX(6px);
}

.rail__fold:checked ~ .shell .rail { padding-inline: 10px; }

/* Folded, a pill has no words, so it stops being a pill. Each tool becomes a
   44px square with its mark centred - the same shape as the badge above it,
   one size down - and the column reads as one set of buttons rather than ten
   marks floating in rings that are nearly as wide as the rail. */
.rail__fold:checked ~ .shell .rail__list { gap: 8px; justify-items: center; }
.rail__fold:checked ~ .shell .rail__item {
  width: 44px; height: 44px; padding: 0; gap: 0;
  justify-content: center; margin-inline: auto;
  border-radius: 14px;
}
/* Settings stops floating on its own. Folded, it joins the tool column as the
   last tile, behind a short rule, and the column's slack moves below it - to
   sit above the account cluster, where every sidebar puts it. (Open, WP keeps
   its own place at the foot of the list.) */
.rail__fold:checked ~ .shell .rail__item--foot { margin-top: 9px; position: relative; }
.rail__fold:checked ~ .shell .rail__item--foot::before {
  content: ''; position: absolute; top: -9px; left: 5px;
  width: 34px; height: 1px; background: var(--line);
}

/* Folded, the arrow and the badge would share the same corner. The arrow
   takes the top row alone, centred, and the badge moves down under it - at
   the tools' own 44px, so the column reads as one set from top to bottom. */
.rail__fold:checked ~ .shell .rail__collapse {
  inset-inline: 0; margin-inline: auto;
  width: 28px; height: 28px;
  transform: rotate(180deg);
}
.rail__fold:checked ~ .shell .rail__brand { padding: 36px 0 8px; gap: 0; }
.rail__fold:checked ~ .shell .rail__badge {
  margin-bottom: 0;
  width: 44px; height: 44px; border-radius: 14px; font-size: 16px;
}
/* The two lines of text under the badge fade out with the other labels, but
   fading leaves their line-height behind - a hundred pixels of nothing between
   the badge and the first tool. Folded, they take no height either. */
.rail__fold:checked ~ .shell :is(.rail__word, .rail__sub) { height: 0; line-height: 0; margin: 0; }

/* The foot becomes a column of three equal marks - language, who, out - so it
   reads as one set rather than three leftovers of different sizes. It also
   takes the slack the settings tile gave up, and sits at the bottom. */
.rail__fold:checked ~ .shell .rail__foot { flex-direction: column; align-items: center; gap: 8px; margin-top: auto; }
.rail__fold:checked ~ .shell .rail__foot .langs__now,
.rail__fold:checked ~ .shell .rail__foot .chip,
.rail__fold:checked ~ .shell .rail__foot .rail__out {
  /* one step under the 44px tools, two under the 46px badge */
  width: 36px; height: 36px; min-height: 36px; min-width: 36px;
  padding: 0; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
}
.rail__fold:checked ~ .shell .rail__out svg { width: 16px; height: 16px; }
.rail__fold:checked ~ .shell .langs__menu { inset-inline-start: 50%; }

/* Folded, a pill has no words - so it says its name on hover instead. */
.rail__fold:checked ~ .shell .rail__item { position: relative; }
.rail__fold:checked ~ .shell .rail__item::after {
  content: attr(title);
  position: absolute; inset-inline-start: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) scale(.94);
  transform-origin: left center;
  padding: 5px 9px; border-radius: 8px;
  font-size: 11.5px; white-space: nowrap;
  color: #FFFFFF; background: #1B1D26;
  opacity: 0; pointer-events: none;
  transition: opacity 130ms linear, transform 130ms ease;
  z-index: 30;
}
[dir="rtl"] .rail__fold:checked ~ .shell .rail__item::after { transform-origin: right center; }
.rail__fold:checked ~ .shell .rail__item:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }

/* ── the rail's foot: language, who, and out ── */
.rail__foot {
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}

.rail__out {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  min-height: 32px; padding-inline: 10px;
  border-radius: 11px;
  font-size: 12px; text-decoration: none;
  color: var(--text-3); background: var(--surface-2);
  box-shadow: var(--neo-sm);
  transition: color 140ms linear, background 140ms linear;
}
.rail__out svg { width: 15px; height: 15px; flex: none; }
.rail__out:hover { color: #C2503C; background: var(--surface-3); }
.rail__out:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ── the page bar: only what changes per screen ── */
.pagebar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 22px 10px;
}
.pagebar__crumb { font-size: 11px; color: var(--text-3); display: block; letter-spacing: .04em; }
.pagebar__name { font-family: var(--ui); font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.pagebar__side { display: flex; align-items: center; gap: 8px; }

.chip {
  width: 32px; height: 32px; display: grid; place-items: center;
  font-family: var(--ui); font-size: 12px; font-weight: 600;
  color: var(--text-2);
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-radius: var(--r);
}

.ghost {
  min-height: 32px; display: grid; place-items: center;
  padding: 0 12px; border-radius: var(--r);
  font-size: 12.5px; text-decoration: none;
  color: var(--text-2);
  border: 1px solid var(--line-2);
  transition: background 120ms linear, color 120ms linear;
}

.ghost:hover { background: var(--surface-3); color: var(--text); }
.ghost:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* three letters, not three flags - a flag says country, not language.
   Only the one you are in is shown; the other two rise out of it when reached
   for. Three permanent buttons for a choice made once is three buttons of noise
   on every screen. */
.langs { position: relative; direction: ltr; flex: none; }

.langs__now {
  display: grid; place-items: center;
  min-width: 34px; height: 32px; padding: 0 8px;
  font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-2); background: var(--surface-2);
  border-radius: 11px; box-shadow: var(--neo-sm);
  cursor: default;
  transition: color 140ms linear, background 140ms linear;
}
.langs:hover .langs__now, .langs:focus-within .langs__now { color: var(--text); background: var(--surface-3); }

.langs__menu {
  position: absolute; inset-inline-start: 50%; bottom: calc(100% + 8px);
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--neo-md, var(--neo-sm));
  border: 1px solid var(--line);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(6px) scale(.96);
  transform-origin: bottom center;
  transition: opacity 150ms linear, transform 200ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 200ms;
  z-index: 40;
}
.langs:hover .langs__menu, .langs:focus-within .langs__menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 0s, 0s, 0s;
}

.langs__pick {
  min-width: 40px; min-height: 28px;
  display: grid; place-items: center;
  padding: 0 8px; border-radius: 8px;
  font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-3); text-decoration: none;
  background: transparent;
  transition: background 120ms linear, color 120ms linear;
}

.langs__pick:hover { background: var(--surface-3); color: var(--text-2); }
.langs__pick.is-on { background: var(--surface-3); color: var(--text); }
.langs__pick:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }


.board { padding: 24px 22px 32px; }

.board__title {
  margin: 0 0 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  color: var(--text-3);
}

/* ── the day, and who is holding it ── */

.hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  max-width: 1180px; margin: 0 auto 22px;
}

.hero__hi {
  margin: 0;
  font-family: var(--ui); font-size: 22px; font-weight: 600; letter-spacing: .01em;
  color: var(--text);
}
.hero__day { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); }

.hero__facts { display: flex; align-items: center; gap: 10px; }

.fact {
  display: grid; justify-items: center; gap: 1px;
  min-width: 74px; padding: 9px 14px;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--neo-sm);
}
.fact__n {
  font-family: var(--ui); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.fact__k { font-size: 10.5px; color: var(--text-3); }

.hero__team { min-height: 44px; padding: 0 16px; }

/* ── the tools ──
   Squarer cards on a grid that stops growing: across a 1800px monitor the old
   row stretched into five thin ribbons, which is a worse target than a smaller
   card. The number each tool reports is the point of the card, so it is set
   large and sits on its own line rather than squeezed at the end of a row. */

.grid {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1180px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.tile {
  background: var(--surface);
  border: 0; border-radius: var(--r-lg);
  box-shadow: var(--neo-sm);
  overflow: hidden;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.tile__hit, .tile:not(:has(.tile__hit)) {
  display: grid; grid-template-rows: auto 1fr auto;
  gap: 14px; padding: 20px 20px 18px; min-height: 178px;
}
.tile__hit { text-decoration: none; color: inherit; }

.tile:has(.tile__hit):hover { box-shadow: var(--neo-out); transform: translateY(-2px); }
.tile:has(.tile__hit):active { box-shadow: var(--neo-in); transform: none; }
.tile__hit:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: var(--r-lg); }

/* the two letters, in the tool's own tint - the one place colour carries
   information here, so the hand learns the grid before the eye reads it */
.tile__icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: #FFFFFF; background: var(--iris-grad);
  border: 0; border-radius: 12px;
  box-shadow: var(--neo-sm);
}
.tile--store   .tile__icon { background: linear-gradient(135deg, #7B72D9, #544CA8); }
.tile--confirm .tile__icon { background: linear-gradient(135deg, #2FA07A, #147A55); }
.tile--profit  .tile__icon { background: linear-gradient(135deg, #4B7BC7, #2D5FA8); }
.tile--traffic .tile__icon { background: linear-gradient(135deg, #C79A3B, #B07C10); }
.tile--gift     .tile__icon { background: linear-gradient(135deg, #B06BC7, #7A3E9D); }
.tile--oldstock .tile__icon { background: linear-gradient(135deg, #C77B6B, #9D4E3E); }
.tile--reports  .tile__icon { background: linear-gradient(135deg, #5EA3A3, #2D6E6E); }

.tile__body { display: grid; align-content: start; gap: 3px; min-width: 0; }
.tile__title { font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.tile__note { font-size: 12px; color: var(--text-3); line-height: 1.45; }

.tile__stat { display: flex; align-items: baseline; gap: 7px; }

.tile__value {
  font-family: var(--ui); font-size: 26px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.tile__label { font-size: 11px; color: var(--text-3); }

.badge {
  display: inline-block; padding: 3px 8px;
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 3px;
}

.tile--soon { opacity: .6; box-shadow: none; background: var(--surface-2); }

.board__foot { margin: 20px 0 0; font-size: 12px; color: var(--text-3); }

/* ══════════════════════════════════════════════════════════════════════════
   ON A PHONE

   The rule every block below obeys: nothing may be wider than the screen.
   When something is, the browser does not shrink it - it widens the page and
   lets the rest hang off the edge, and because the page then never scrolls
   sideways it is easy to believe all is well. It is not: on a 390px phone
   this shell laid itself out at 498px and a fifth of every screen was simply
   gone. So each row here is either allowed to wrap, allowed to scroll inside
   its own box, or told it may shrink - never left to set its own width.
   ══════════════════════════════════════════════════════════════════════════ */

/* The phone rules used to sit here, and half of them did nothing.
   CSS of equal weight is settled by whichever comes last, and the team
   panel's own rules are six hundred lines further down - so .tmx__name kept
   its 10.5px no matter what this block asked for. They now live at the very
   bottom of this file, after everything they have to override.
   ⟦hub:phone⟧ */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════════ soft UI

   The tokens above turned the shell pale. On a dark ground a one-pixel line
   was enough to separate two surfaces; on this one it is not - things need to
   sit slightly proud of the page, or the screen reads as one flat sheet. That
   is all this section does: it gives the pieces their light and shadow, and
   changes nothing about layout or behaviour. */

body.hub { background: var(--bg); }

/* the rail: a raised plate, its current tool pressed into it */

.mark { background: var(--surface); border-color: transparent; box-shadow: var(--neo-sm); }
.mark__letter { color: var(--accent); }

/* the bar across the top belongs to the same sheet, so it gets a line, not a box */
/* The page bar carries no rule under it any more - the work below already sits
   on its own surface, and a line there only boxed in a title. */
.pagebar { border-bottom: 0; }

/* cards, tiles, panels */
.card { border-color: transparent; box-shadow: var(--neo-out); }

/* the pad: keys you can feel */
.pad { background: transparent; border: 0; gap: 10px; }
.pad__key { background: var(--surface); border-radius: var(--r); box-shadow: var(--neo-sm);
            transition: box-shadow 90ms ease; }
.pad__key:hover { background: var(--surface); }
.pad__key:active { background: var(--surface); box-shadow: var(--neo-in); }
.pad__key--soft { color: var(--text-3); }

.pin__field { background: var(--surface); border-color: transparent; box-shadow: var(--neo-in); }
.pin__dots span { background: var(--line-2); }
.pin__dots span.on { background: var(--accent); }

/* who is signing in */
.agents { background: transparent; border: 0; gap: 10px; }
.agent__box { background: var(--surface); border-radius: var(--r); box-shadow: var(--neo-sm); }
.agent input:checked + .agent__box { box-shadow: var(--neo-in); color: var(--accent); }
.agent__icon { background: var(--surface-2); color: var(--accent); }

/* the one strong action on any screen */
.submit { background: var(--iris-grad); color: #FFFFFF; box-shadow: var(--neo-sm); }
.submit:hover { background: var(--iris-grad); filter: brightness(1.06); }

.use { background: var(--iris-grad); color: #FFFFFF; box-shadow: var(--neo-sm); }
.use:hover:not(:disabled) { background: var(--iris-grad); filter: brightness(1.06); }
.use:disabled { background: var(--surface-2); color: var(--text-3); box-shadow: none; }

.ghost { border-color: transparent; background: var(--surface); box-shadow: var(--neo-sm); }
.ghost:hover { background: var(--surface); box-shadow: var(--neo-out); color: var(--text); }

.chip { background: var(--iris-grad); color: #FFFFFF; border-color: transparent; box-shadow: var(--neo-sm); }

/* The switcher is a popover now, not a row of three. Only the marks inside it
   need the soft treatment; the trigger already carries its own. */
.langs__now { background: var(--surface); box-shadow: var(--neo-sm); }
.langs__menu { background: var(--surface); }
.langs__pick { background: transparent; border-radius: 8px; box-shadow: none; }
.langs__pick:hover { background: var(--surface-2); }
.langs__pick.is-on { background: var(--iris-grad); color: #FFFFFF; }

.alert { background: var(--surface); border-color: transparent; box-shadow: var(--neo-sm); }

/* ══════════════════════════════════════════════════ controls

   The panel below needed a button, a field and a small label, and the shell
   had never had to draw one - the four tools bring their own. These are those
   three, in the same soft language as everything above. */

.use {
  min-height: 38px; padding: 0 18px;
  display: inline-grid; place-items: center;
  border: 0; border-radius: var(--r);
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: filter 120ms linear, box-shadow 140ms ease;
}
.use--sm { min-height: 34px; padding: 0 15px; font-size: 12.5px; }
.use:focus-visible, .ghost:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.use:disabled { cursor: default; }

button.ghost { font-family: var(--ui); font-weight: 600; cursor: pointer; }
.ghost--bad { color: var(--bad); }
.ghost--bad:hover { color: var(--bad); background: rgba(163, 30, 63, .07); }

.fld { display: grid; gap: 6px; min-width: 0; }
.fld__k { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--text-3); }
.fld__v {
  width: 100%; height: 38px; padding: 0 12px;
  border: 0; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--neo-in);
  color: var(--text); font-family: inherit; font-size: 13.5px;
}
.fld__v::placeholder { color: var(--text-3); }
.fld__v:focus { outline: none; box-shadow: var(--neo-in), 0 0 0 3px rgba(108, 99, 199, .18); }

.tag {
  display: inline-block; padding: 3px 8px;
  font-size: 10.5px; letter-spacing: .04em;
  color: var(--text-3); background: var(--surface-2);
  border-radius: 99px;
}
.tag--own { color: var(--accent); background: rgba(108, 99, 199, .13); }
.tag--warn { color: var(--bad); background: rgba(163, 30, 63, .10); }

.alert--good { color: var(--good); }


/* ── who has been in today ──
   Only the owner sees this. A dot of iris on the face means they are in today;
   the time or the date sits under the name, so the answer is one glance. */

.board__title--mid { max-width: 1180px; margin: 30px auto 12px; }

.who {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1180px;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.who__one {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--neo-sm);
  opacity: .62;
}
.who__one--in { opacity: 1; }

.face--sm { width: 34px; height: 34px; border-radius: 10px; font-size: 11.5px; }
.who__one--in .face--sm { color: #FFFFFF; background: var(--iris-grad); }

.who__id { display: grid; gap: 1px; min-width: 0; }
.who__name {
  font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who__when { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.who__one--in .who__when { color: var(--accent); }
/* ══════════════════════════════════════════════════ the door

   Two fields where a pad of faces used to be. The card keeps its size, so the
   screen a person has opened a hundred times still looks like itself. */

.door__fld { margin-bottom: 16px; text-align: start; }
.door__fld .fld__v { height: 44px; font-size: 15px; }

.door__pass { display: flex; gap: 8px; }
.door__eye { width: 44px; min-height: 44px; padding: 0; font-size: 15px; flex: 0 0 44px; }

.login .card { min-width: min(360px, 88vw); }
.login .msg { margin: 2px 0 16px; }

/* ══════════════════════════════════════════════════ the team panel

   One card per person. The table this replaced made you look up at a header
   row to learn what a tick meant; here every switch says its own name, and the
   five things you can do to somebody sit together under their card. */

/* The bar stays with you: the one Save lives here, so it has to be reachable
   from anywhere on a long page. */
.tmbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin: 0 0 16px; padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 20px -14px rgba(51, 60, 80, .55);
}

.tmbar__act { display: flex; align-items: center; gap: 10px; }

.tmbar__save { min-height: 40px; white-space: nowrap; }
.tmbar__save:disabled { background: var(--surface-2); color: var(--text-3); box-shadow: none; cursor: default; }

.tmbar__dirty {
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  color: var(--bad); background: rgba(163, 30, 63, .10);
}

/* a card with something unsaved in it */
.pcard.is-dirty { box-shadow: var(--neo-sm), 0 0 0 2px rgba(108, 99, 199, .45); }
.tag--dirty { color: var(--accent); background: rgba(108, 99, 199, .13); }

.pcard__quick { display: none; gap: 6px; margin-inline-start: auto; }
.team.is-live .pcard__quick { display: inline-flex; }
.pcard__quick button { min-height: 26px; padding: 0 9px; font-size: 11px; }

.tmbar__tally { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tmbar__n { font-size: 12px; color: var(--text-3); }
.tmbar__n b {
  font-family: var(--ui); font-size: 16px; color: var(--text);
  margin-inline-end: 6px;
}

.tmbar__pip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 99px;
  font-family: var(--ui); font-size: 12.5px; color: var(--text-2);
  background: var(--surface); box-shadow: var(--neo-sm);
}
.tmbar__pip b { font-size: 10px; letter-spacing: .1em; color: var(--text-3); }

.tmbar__find { display: none; width: min(300px, 100%); height: 34px; }
.team.is-live .tmbar__find { display: block; }

/* start, not stretch: a locked card has no buttons under it and should not be
   padded out with empty sheet to match the tallest card in its row */
/* ── the switch ──
   A real checkbox wearing a track and a knob. Used bare in the matrix, where
   the column above says what it is, and with its name beside it in the form
   that creates a person. */

.sw { display: flex; align-items: center; gap: 10px; padding: 6px 2px; cursor: pointer; }
.sw input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* Contrast, not decoration.
   The soft look had the OFF track at #DDE3EC on a #E7EBF3 row - about four
   percent apart, which on a counter screen at arm's length is invisible. The
   track is now clearly darker than whatever it sits on, the knob is pure white
   with a real shadow, and ON is solid iris rather than a gradient dulled by an
   inset shadow. Same language, legible across the room. */
.sw__track {
  position: relative; flex: 0 0 46px; width: 46px; height: 26px;
  border-radius: 99px;
  background: #C6CEDC;
  box-shadow: inset 2px 2px 4px rgba(51, 60, 80, .26),
              inset -2px -2px 4px rgba(255, 255, 255, .55);
  transition: background 180ms linear, box-shadow 180ms linear;
}
.sw__knob {
  position: absolute; top: 4px; inset-inline-start: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(51, 60, 80, .38);
  transition: transform 180ms cubic-bezier(.3, 1.4, .5, 1), background 180ms linear;
}

.sw input:checked + .sw__track {
  background: linear-gradient(135deg, #6C63C7 0%, #4C449A 100%);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .22),
              0 2px 6px rgba(84, 76, 168, .38);
}
.sw input:checked + .sw__track .sw__knob {
  transform: translateX(20px); background: #FFFFFF;
  box-shadow: 0 2px 5px rgba(40, 34, 90, .45);
}
[dir="rtl"] .sw input:checked + .sw__track .sw__knob { transform: translateX(-20px); }
.sw input:focus-visible + .sw__track { outline: 2px solid var(--focus); outline-offset: 2px; }

.sw__txt { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-2); }
.sw__code {
  padding: 2px 6px; border-radius: 4px;
  font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--text-3); background: var(--surface-2);
}
.sw input:checked ~ .sw__txt { color: var(--text); }
.sw input:checked ~ .sw__txt .sw__code { color: var(--accent); background: rgba(108, 99, 199, .13); }

.sw--off { cursor: default; }
.sw--off .sw__track { background: #D6DCE7; box-shadow: inset 2px 2px 4px rgba(51, 60, 80, .16); }
.sw--off .sw__knob { background: #F2F5F9; box-shadow: 0 1px 3px rgba(51, 60, 80, .22); }
.sw--off input:checked + .sw__track { background: #A9A2DC; }

/* money is the one switch whose OFF state is worth seeing from across the room */
.sw--money input:not(:checked) ~ .sw__txt .sw__code { color: var(--bad); background: rgba(163, 30, 63, .12); }

/* initials, as a disc */
.face {
  width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 12px;
  font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--accent); background: var(--surface); box-shadow: var(--neo-sm);
}
.face--own { color: #FFFFFF; background: var(--iris-grad); }

.pcard__foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }

/* the switches on the "new person" form, which is still a form and not a grid
   of people - they keep their names beside them */
.swset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.swset--new { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
/* ══════════════════════════════════════════════════ the matrix

   People down, tools across. Every heading is a button: a column hands a tool
   to everyone on screen (or takes it back), a face hands one person the lot.
   The rare per-person actions fold into the ⋯ menu at the end of the line. */

.tmx {
  display: grid; gap: 8px;
  --who: minmax(230px, 1.4fr);
}

.tmx__head, .tmx__row {
  display: grid;
  grid-template-columns: var(--who) repeat(var(--cols), minmax(64px, 1fr)) 56px;
  align-items: center; gap: 6px;
}

.tmx__head {
  position: sticky; top: 66px; z-index: 30;
  padding: 8px 14px;
  background: var(--bg);
}

.tmx__head .tmx__who {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3);
}

.tmx__col {
  width: 100%; display: grid; justify-items: center; gap: 3px;
  padding: 7px 4px; border: 0; border-radius: 12px;
  background: transparent; cursor: pointer;
  transition: background 140ms linear;
}
.tmx__col:hover { background: var(--surface-2); }
.tmx__col:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.tmx__mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 10px;
  font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: .06em;
  color: #FFFFFF; background: var(--iris-grad);
}
.tmx__mark--store   { background: linear-gradient(135deg, #7B72D9, #544CA8); }
.tmx__mark--confirm { background: linear-gradient(135deg, #2FA07A, #147A55); }
.tmx__mark--profit  { background: linear-gradient(135deg, #4B7BC7, #2D5FA8); }
.tmx__mark--traffic { background: linear-gradient(135deg, #C79A3B, #B07C10); }
.tmx__mark--gift     { background: linear-gradient(135deg, #B06BC7, #7A3E9D); }
.tmx__mark--oldstock { background: linear-gradient(135deg, #C77B6B, #9D4E3E); }
.tmx__mark--reports  { background: linear-gradient(135deg, #5EA3A3, #2D6E6E); }
.tmx__mark--money   { background: var(--surface-3); color: var(--text-2); }
.tmx__mark--settings{ background: var(--surface-3); color: var(--text-2); }

.tmx__name { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.tmx__n {
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}

/* one person */
.tmx__row {
  padding: 10px 14px;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--neo-sm);
  transition: box-shadow 160ms ease;
}
.tmx__row--locked { background: var(--surface-2); box-shadow: none; }
.tmx__row--locked .tmx__nm, .tmx__row--locked .tmx__sub { color: var(--text-3); }
.tmx__row.is-dirty { box-shadow: var(--neo-sm), 0 0 0 2px rgba(108, 99, 199, .45); }

.tmx__who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tmx__id { display: grid; gap: 1px; min-width: 0; }
.tmx__nm {
  font-family: var(--ui); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tmx__sub {
  font-size: 11px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tmx__tags { display: flex; flex-wrap: wrap; gap: 4px; }

button.face.tmx__rowbtn { border: 0; cursor: pointer; font-family: var(--ui); }
button.face.tmx__rowbtn:hover { box-shadow: var(--neo-out); }

.tmx__cell { display: grid; place-items: center; }
.tmx__cell--guard { background: var(--surface-2); border-radius: 10px; padding: 4px 0; }
.tmx__head .tmx__cell--guard { background: transparent; }

/* a switch with no words: the column above says what it is */
.sw--bare { gap: 0; padding: 4px; }
.sw--bare .tmx__k { display: none; }

.tmx__more { display: grid; place-items: center; }

/* the rare things, folded away */
.menu { position: relative; }
.menu__btn {
  list-style: none; width: 34px; min-height: 34px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  font-size: 16px; letter-spacing: .1em;
}
.menu__btn::-webkit-details-marker { display: none; }
.menu[open] .menu__btn { box-shadow: var(--neo-in); }

.menu__pop {
  position: absolute; z-index: 60; inset-inline-end: 0; top: calc(100% + 8px);
  width: 240px; padding: 12px;
  display: grid; gap: 8px;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--neo-out);
}
.menu__row { display: flex; gap: 6px; margin: 0; }
.menu__row .fld__v { height: 34px; font-size: 12.5px; }
/* 40px is for the icon-only button BESIDE a field (🔑 next to the new-pin
   box). Unqualified it also caught the full-width buttons that happen to sit
   inside a row - two classes beat .menu__wide's one, and the 2FA controls
   painted "مفتاح جديد (القديم كيموت)" down a 40px sliver, one word a line. */
.menu__row .ghost:not(.menu__wide) { width: 40px; padding: 0; }
.menu__wide { width: 100%; min-height: 34px; }

/* Each action wears a quiet colour of its own, so the menu reads as five
   different things and not five grey bars: the eye finds "view the key"
   without reading the row above it. Soft washes of the hub's own accents -
   the iris for the tabs, amber for a key that kills its predecessor, blue
   for reading one back, ember for taking the second code away, green for
   looking round the shop as someone else. The remove button keeps its red,
   washed to match. Text stays the darkest thing on every one of them. */
.menu__pop .menu__act--tabs   { background: #E5E2F5; color: #544CA8; }
.menu__pop .menu__act--rotate { background: #F2EAD7; color: #7D5A0F; }
.menu__pop .menu__act--show   { background: #E0EAF6; color: #2D5FA8; }
.menu__pop .menu__act--off    { background: #F2E3D9; color: #96511D; }
.menu__pop .menu__act--view   { background: #DFEDE6; color: #147A55; }
.menu__pop .ghost--bad        { background: #F4DEE3; color: var(--bad); }
.menu__pop .menu__act--tabs:hover   { background: #DBD7F0; color: #443C97; }
.menu__pop .menu__act--rotate:hover { background: #EDE2C6; color: #6A4C0B; }
.menu__pop .menu__act--show:hover   { background: #D4E2F2; color: #234E90; }
.menu__pop .menu__act--off:hover    { background: #EDD8CA; color: #814314; }
.menu__pop .menu__act--view:hover   { background: #D2E6DB; color: #0F6647; }
.menu__pop .ghost--bad:hover        { background: #F0D2DA; color: #8A1834; }

.tmx .pgrid__none { display: none; margin: 6px 14px; font-size: 13px; color: var(--text-3); }
.tmx.is-empty .pgrid__none { display: block; }

/* under 980px a matrix is the wrong shape: each line becomes a card again */
@media (max-width: 980px) {
  .tmx__head { display: none; }
  .tmx__row {
    grid-template-columns: 1fr 1fr;
    gap: 10px; padding: 14px;
  }
  .tmx__who { grid-column: 1 / -1; }
  .tmx__cell { justify-items: start; }
  .sw--bare { gap: 10px; }
  .sw--bare .tmx__k {
    display: inline; font-size: 12px; font-weight: 500; color: var(--text-2);
  }
  .tmx__cell--guard { padding: 4px 8px; }
  .tmx__more { grid-column: 1 / -1; justify-items: end; }
}
.tmnote { margin: 18px 2px 0; font-size: 12.5px; color: var(--text-3); }
.tmnew__title { margin-top: 28px; }

.tmnew {
  display: grid; gap: 16px; max-width: 620px;
  padding: 18px 20px 20px;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--neo-sm);
}
.tmnew__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tmnew__fields--three { grid-template-columns: 1fr 1fr 1fr; }
.act--pin .act__pin { width: 150px; }
.tmnew__pin { display: flex; gap: 6px; }
.tmnew__roll { width: 38px; min-height: 38px; padding: 0; font-size: 15px; }

/* one person's tabs */
.parts { display: grid; gap: 14px; max-width: 900px; }
.partset { padding: 14px 18px 16px; background: var(--surface);
           border: 0; border-radius: var(--r-lg); box-shadow: var(--neo-sm); margin: 0; }
.partset__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.partset__name { display: flex; align-items: center; gap: 9px;
                 font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.partset__quick { display: none; gap: 6px; }
.parts.is-live .partset__quick { display: flex; }
.partset__quick button { min-height: 28px; padding: 0 10px; font-size: 11.5px; }

@media (max-width: 900px) {
  .pgrid { grid-template-columns: 1fr; }
  .tmnew__fields, .tmnew__fields--three { grid-template-columns: 1fr; }
  .swset { grid-template-columns: 1fr; }
  .act--end { margin-inline-start: 0; }
}

@media (max-width: 760px) {
  /* One column, and the rows named: the shell is at least a screen tall, and
     a grid with two rows of "auto" shares the leftover height between them -
     which stretched a 60px bar into 343px of empty glass. The bar takes what
     it needs; the work takes the rest. */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  /* ── the rail becomes a burger ──
     Nine tools laid flat need 498px, and folding them onto two rows still
     spent a fifth of the screen on bare initials before a single figure of
     the tool itself appeared. Behind one button they cost a line - and when
     opened they come back with their names, which the flat row had no room
     for. The bar stays stuck to the top, so leaving is always one tap away
     however far down the page you have scrolled. */
  .rail {
    position: sticky; top: 0; z-index: 60;
    height: auto; margin: 0; padding: 8px 10px;
    border-radius: 0;
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px;
    min-width: 0;
  }

  .rail__burger {
    display: grid; place-content: center; gap: 4px;
    width: 44px; height: 44px; flex: none;
    border-radius: 12px; background: var(--surface);
    box-shadow: var(--neo-sm); cursor: pointer;
  }
  .rail__burger span {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--text-2);
    transition: transform 160ms ease, opacity 120ms linear;
  }
  /* the same button says "close" while it is open */
  .rail__toggle:checked ~ .rail .rail__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .rail__toggle:checked ~ .rail .rail__burger span:nth-child(2) { opacity: 0; }
  .rail__toggle:checked ~ .rail .rail__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .rail__toggle:focus-visible ~ .rail .rail__burger { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* the mark keeps its place in the bar; the wordmark's caption does not */
  /* the wordmark is a link home, so it is a target too */
  .rail__brand { display: flex; align-items: center; gap: 9px; padding: 0 6px 0 0; min-height: 44px; }
  .rail__badge { width: 34px; height: 34px; margin: 0; font-size: 13px; border-radius: 11px; }
  .rail__word { font-size: 13px; letter-spacing: .12em; }
  .rail__sub { display: none; }

  /* shut by default; two columns when opened, so nine tools are one glance
     rather than a scroll */
  .rail__list, .rail__item--foot { display: none; }
  .rail__toggle:checked ~ .rail .rail__list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    width: 100%; margin-top: 4px; padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .rail__toggle:checked ~ .rail .rail__item--foot {
    display: flex; width: 100%; margin-top: 8px;
  }
  .rail__item { padding: 10px 12px; min-height: 44px; justify-content: flex-start; }
  .rail__icon { width: 30px; height: 30px; }
  .rail__label { display: block; font-size: 13px; }

  /* ── the bar above keeps only what belongs to the screen ──
     Language, initials and sign-out live at the foot of the rail now, on every
     size. The bar is left with the name of what you are looking at and this
     screen's own tools - and on a phone it may wrap. */
  .pagebar { flex-wrap: wrap; gap: 10px; padding: 10px 14px 8px; }
  .pagebar__side { flex-wrap: wrap; gap: 6px; }

  /* Folding is a computer's idea: on a phone the rail is already a burger, and
     a strip of icons over the top of the screen would just be a second menu. */
  .rail__collapse { display: none; }
  .rail__fold:checked ~ .shell { --rail-w: 212px; }

  /* The foot rides inside the burger, like the tools do. */
  .rail__foot { display: none; }
  .rail__toggle:checked ~ .rail .rail__foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    width: 100%; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .rail__foot .rail__out { margin-inline-start: auto; flex: 0 0 auto; }

  /* The initials come out of the burger. Beside FR AR EN, in the same pill
     and the same accent, "AM" read as a fourth language - and the panel it
     sits in is headed AMERRAY already, so it was answering a question
     nobody had. */
  .rail__foot .chip { display: none; }

  /* A hover menu has no hover here: the choices sit out in the open instead. */
  .langs__now { display: none; }
  .langs__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    flex-direction: row; gap: 6px; padding: 0;
    background: transparent; border: 0; box-shadow: none;
  }
  .langs__pick { background: var(--surface); box-shadow: var(--neo-sm); }

  .board { padding: 16px 12px 26px; }
  .board__title, .board__title--mid { margin-top: 18px; }

  .hero { align-items: flex-start; gap: 12px; }
  .hero__hi { font-size: 19px; }
  .hero__facts { width: 100%; flex-wrap: wrap; }
  .fact { min-width: 0; flex: 1 1 92px; }
  .hero__team { width: 100%; }

  /* min(…,100%) is the whole trick: a track may ask for 150px, but never
     more than the space it actually has */
  .grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
  .tile__hit, .tile:not(:has(.tile__hit)) { padding: 15px 14px 14px; min-height: 0; gap: 10px; }
  .tile__icon { width: 38px; height: 38px; }
  .tile__title { font-size: 15px; }

  .agents { grid-template-columns: 1fr; }
  .stats, .pgrid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  .swset, .swset--new { grid-template-columns: 1fr; }
  .tmnew__fields, .tmnew__fields--three { grid-template-columns: 1fr; }

  /* Anything genuinely two-dimensional - the permissions matrix, a report
     table - cannot be folded into 390px without losing its meaning. Those
     scroll inside their own box, so the PAGE still never scrolls sideways. */
  .tmx, .table, .tbl, table { min-width: 0; }
  .scroll-x, .tmx__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── reach ──
     A fingertip covers about 44px. Every one of these was measured on the
     painted page at 390px and came back smaller: the language pills at 34x30,
     the monitor's filter chips at 80x27, the team panel's menu rows at 34
     tall. Written as one list because they are one problem.
     .menu__wide and .fld__v are named here rather than left to the .ghost
     rule above them - they carry their own min-height, and a rule with two
     classes beats a rule with one. */
  .ghost, .btn, .chip, .act__pin,
  .menu__wide, .ghost.menu__wide,
  .langs__pick, .use, .use--sm,
  .sw, .sw--bare, .sw--money,
  .mo__chip, .mo__range, .mo__live, .mo__more,
  input, select, textarea, .fld__v, .fld input, .fld select {
    min-height: 44px;
  }
  .chip, .ghost, .langs__pick { min-width: 44px; }

  /* 16px is the size under which iOS zooms the page the moment a field takes
     focus - the layout lurches sideways mid-tap, which reads as a bug.

     A floor, not a suggestion. Written politely this lost to its own
     stylesheet: `.door__fld .fld__v { font-size: 15px }` carries two classes
     where `.fld__v` carries one, so the door's own password box was 15px and
     tapping it zoomed the login screen. The apps inside the frames get the
     identical rule from Phone.php - one rule, every screen. */
  input, select, textarea, [contenteditable="true"],
  .fld__v, .fld input, .fld select { font-size: 16px !important; }

  /* ── reading ──
     Nothing carrying words drops under 12px. The two-letter tool marks (ST,
     CF) stay at 10.5px on purpose - they are a badge, not a sentence, and
     they sit inside their own coloured square. */
  .tile__note, .fact__k, .rail__sub, .pagebar__crumb,
  .tile__label, .board__foot, .who__when, .badge,
  .board__title--mid, .tmx__name, .tmx__n, .tmx__sub, .sw__code, .sw__txt,
  .tag, .mo__time, .mo__d, .mo__meta,
  .langs__pick, .fld__k, .tmbar__dirty, .partset__quick button,
  .tmx__head .tmx__who {
    font-size: 12px;
  }

  /* The two-letter marks - ST, CF, PF - stay as they are. They are not text
     to be read but a shape to be recognised, each inside its own coloured
     square, and enlarging them only breaks the squares. */
}

/* the very small ones - a 360px Android, or a phone held in a case */
@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; }
  .hero__hi { font-size: 18px; }
}

/* On a real computer there is no burger - the rail is always open and the
   checkbox that drives it must not be able to close it by mistake. The fold
   control is the desktop's own way to reclaim the width, and the foot stays
   visible: it is where language, initials and sign-out live now. */
@media (min-width: 761px) {
  .rail__burger, .rail__toggle { display: none; }
}

/* ══════════════════════════ the walkie-talkie ══════════════════════════
   One 🎙 in the chrome. It dresses like the chip and the ghost beside it -
   equipment, not an app icon - and only ever says three things: idle,
   recording (red breath), a note waiting (iris glow). */

.talk-btn {
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: var(--r-lg); cursor: pointer;
  background: var(--surface); box-shadow: var(--neo-sm);
  font-size: 17px; line-height: 1; color: var(--text-2);
}
.talk-btn:active { box-shadow: var(--neo-in); }
.talk-btn.is-rec { background: var(--bad); color: #fff; animation: talkBreath 1.1s ease-in-out infinite; }
.talk-btn.has-note { background: var(--iris-grad); color: #fff; animation: talkBreath 1.6s ease-in-out infinite; }
@keyframes talkBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* the phone's copy sits beside the burger; the desktop's in the topbar.
   Never both - one radio per screen. */
.talk-btn--rail { flex: none; }
@media (min-width: 761px) { .talk-btn--rail { display: none; } }
@media (max-width: 760px) { .talk-btn--top  { display: none; } }

/* ── the panel: pick a name, or watch yourself record ── */
.talkpop {
  position: fixed; top: 64px; inset-inline-end: 14px; z-index: 90;
  width: min(320px, calc(100vw - 20px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--neo-out);
  padding: 10px; font-family: var(--ar);
}
/* the phone's radio lives at the START of its bar, so the panel follows it */
@media (max-width: 760px) { .talkpop { top: 60px; inset-inline-start: 10px; inset-inline-end: 10px; width: auto; } }

.talkpop__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--text); padding: 2px 4px 8px;
}
.talkpop__x {
  border: 0; background: none; cursor: pointer; color: var(--text-3);
  font-size: 18px; min-width: 32px; min-height: 32px; border-radius: var(--r);
}
.talkpop__x:hover { background: var(--surface-3); }

.talkpop__row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 0 12px; margin: 4px 0;
  border: 0; border-radius: var(--r-lg); cursor: pointer;
  background: var(--surface-2); color: var(--text);
  font-family: var(--ui); font-size: 14px; font-weight: 700; text-align: start;
}
.talkpop__row:hover { background: var(--surface-3); }
.talkpop__dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--line-2);
}
.talkpop__dot.is-on { background: var(--good); box-shadow: 0 0 0 3px rgba(20, 122, 85, .18); }
.talkpop__name { flex: 1 1 auto; }
.talkpop__hint { font-size: 11px; font-weight: 400; color: var(--text-3); }

.talkpop__last, .talkpop__sent {
  width: 100%; margin-top: 6px; padding: 8px 12px;
  font-size: 12px; color: var(--text-3); text-align: start;
}
.talkpop__last { border: 0; border-radius: var(--r); background: var(--surface-2); cursor: pointer; }
.talkpop__last:hover { background: var(--surface-3); color: var(--text-2); }

.talkpop__live {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 0; font-family: var(--num); font-size: 26px; font-weight: 700;
}
.talkpop__pulse {
  width: 14px; height: 14px; border-radius: 50%; background: var(--bad);
  animation: talkBreath .9s ease-in-out infinite;
}
.talkpop__acts { display: flex; gap: 8px; }
.talkpop__send, .talkpop__cancel {
  flex: 1 1 0; min-height: 48px; border: 0; border-radius: var(--r-lg);
  cursor: pointer; font-family: var(--ar); font-size: 15px; font-weight: 700;
}
.talkpop__send { background: var(--iris-grad); color: #fff; }
.talkpop__cancel { background: var(--surface-2); color: var(--text-2); }
.talkpop__err { padding: 8px 4px 4px; font-size: 13px; color: var(--bad); line-height: 1.6; }

/* ── "someone is talking": one line, bottom centre, tap to hear ── */
.talkbar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 95;
  max-width: calc(100vw - 24px); min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--iris-grad); color: #fff;
  font-family: var(--ar); font-size: 14px; font-weight: 700;
  box-shadow: 0 10px 24px -8px rgba(84, 76, 168, .55);
}