/* ═══════════════════════════════════════════════════════════════════
   FLAT EVERYWHERE
   ═══════════════════════════════════════════════════════════════════
   2026-09-07. Daryan: "make every page look and feel like the homepage."

   twf-flat-list.css wrote the pattern down and let a screen OPT IN with a
   class. That was the right first move - it touched nothing unreviewed.
   This file is the second move: the default flips. Every legacy primitive
   the 53 routes still render (.panel, .panel-header, .kpi-card, .stat-card,
   .elm-header, .twf-feature-card, .twf-card-action ...) takes the homepage's
   geometry without the screen being edited:

     no fill, no border, no shadow, no radius on containers
     a section label where a panel header was (11px, tracked, uppercase)
     15px body, 17px titles, sans everywhere - the display serif is the
       brand's, and it appears once per screen at most (a hub title), not
       on every card heading
     space separates, nothing is drawn between things

   Loaded LAST so it wins every specificity tie. Selectors are kept to one
   class where possible so a screen that later moves to the pattern proper
   (.twf-pt-row, .twf-pt-stat) overrides nothing here - it simply stops
   using these classes.

   What this cannot reach: inline style="" attributes in the render code.
   Those are stripped at the source in the same commit (see the
   "inline card recipe" note in COMMIT_MSG.txt); the census in
   tests/e2e/box-census.spec.js is what says whether it worked.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Containers lose their box ────────────────────────────────── */

html body .panel,
html body .kpi-card,
html body .stat-card,
html body .twf-card,
html body .twf-feature-card,
html body .twf-card-action,
html body .twf-kpi-card:not(.twf-pt-stat),
html body .avail-role-card,
html body .badge-card,
html body .contact-card,
html body .twf-card-info,
html body .card:not(.twf-pt-stat) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  animation: none;
}

/* The specific cards the census found on staff routes: availability's role
   cards, the badge wallet, the market's contact cards, the info callout.
   They keep their layout and lose their box; a selected state stays a
   tint, not a border. */
html body .avail-role-card,
html body .badge-card,
html body .contact-card { padding: 12px 2px; }
html body .avail-role-card.selected,
html body .avail-role-card.active,
html body .badge-card.earned { background: rgba(201, 168, 76, .10); border-radius: 12px; padding: 12px; }

/* A panel is a section now: space above, a label, then its rows. */
html body .panel { margin: 0 0 18px; }

html body .panel-header {
  padding: 18px 2px 6px;
  border-bottom: 0;
  align-items: baseline;
}

html body .panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(12, 18, 32, .45);
}

html body .panel-subtitle {
  font-size: 12px;
  color: var(--pt-faint, rgba(12, 18, 32, .4));
  margin-top: 0;
}

html body .panel-body { padding: 0 2px; }

/* ── 2. Numbers become tiles, not cards ──────────────────────────── */

/* The 3px gold gradient stripe along the top of every KPI card was the
   last drawn edge; with the card gone it read as a rule between blocks. */
html body .kpi-card::before,
html body .stat-card::before,
html body .panel::before { display: none; content: none; }

html body .kpi-card,
html body .stat-card {
  padding: 12px 2px 14px;
}

html body .kpi-label,
html body .stat-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(12, 18, 32, .45);
  margin-bottom: 4px;
}

html body .kpi-value,
html body .stat-card-value {
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pt-navy, #0C1220);
  animation: none;
}

/* ── 3. Titles: sans, on the scale, once ─────────────────────────── */

/* Page headers that were display-serif at 22px. The homepage names the
   screen in the nav strip; a page title is a 20px sans line at most. */
html body .elm-header { margin-bottom: 14px; }

html body .elm-header-title {
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pt-navy, #0C1220);
}

html body .elm-header-sub {
  font-size: 15px;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
  margin-top: 2px;
}

/* Section headings inside pages (h2/h3 with the cockpit utility classes). */
/* Headings the pattern already styles end in "-h" (.twf-pf-h, .twf-offer-h,
   .twf-su-h ...) and are left alone; this reaches the legacy ones. */
html body #pagesContainer h2:not([class$="-h"]),
html body #pagesContainer h3:not([class$="-h"]) {
  font-family: inherit;
  letter-spacing: -0.01em;
  color: var(--pt-navy, #0C1220);
}
html body #pagesContainer h2:not([class$="-h"]) { font-size: 20px; font-weight: 700; }
html body #pagesContainer h3:not([class$="-h"]) { font-size: 17px; font-weight: 700; }

/* The hub title (People, Compliance, Command) keeps the display face - the
   one brand moment on the screen - but sits on the scale and loses the
   weight that made it read as a document heading. */
html body .twf-section-header__title {
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
}
html body .twf-section-header__sub {
  font-size: 15px;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
  margin-top: 4px;
}
html body .twf-cockpit-header { margin-bottom: 8px; }

/* ── 4. Body copy on the scale ───────────────────────────────────── */

/* 13px and 12px paragraph text reads as fine print next to the homepage's
   15px rows. Paragraphs and list items inside a page come up to 15. Labels,
   pills and captions keep their own classes and are not touched. */
html body #pagesContainer p,
html body #pagesContainer li {
  font-size: 15px;
  line-height: 1.55;
}

/* ── 5. Tables: rows, not grids ──────────────────────────────────── */

html body #pagesContainer table {
  border-collapse: collapse;
  border: 0;
  background: none;
}
html body #pagesContainer th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(12, 18, 32, .45);
  background: none;
  border: 0;
  padding: 8px 2px;
  text-align: left;
}
html body #pagesContainer td {
  font-size: 15px;
  border: 0;
  background: none;
  padding: 12px 2px;
  vertical-align: middle;
}

/* ── 6. Forms: the input is the only thing drawn ─────────────────── */

/* Inputs keep a hairline - a field with no edge is not a field - but they
   sit on the canvas, 16px so iOS does not zoom.
   2026-10-07: on the control tokens (twf-premium.css): 48px, the control
   radius, the role colours. background-color, not the shorthand, so the
   select chevron in section 9 survives. Hover, focus, disabled and invalid
   are section 9, drawn once for every field kind. */
html body #pagesContainer input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html body #pagesContainer select,
html body #pagesContainer textarea {
  font-family: inherit;
  font-size: var(--control-font);
  min-height: var(--control-h);
  border: 1px solid var(--border-1);
  border-radius: var(--control-radius);
  background-color: var(--surface-1);
  color: var(--text-1);
}
html body #pagesContainer textarea { min-height: 96px; }

html body #pagesContainer label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
}

/* ── 7. Buttons ──────────────────────────────────────────────────── */
/* Deliberately nothing here. A blanket min-height/radius on every <button>
   would hit the avatar, the × on a sheet, the pin markers, the Remove link.
   The pattern classes carry their own geometry (twf-styles-cockpit.css) and
   their states are section 9. */

/* ── 8. Loading and empty ────────────────────────────────────────── */

html body .loading-spinner { border-color: rgba(12, 18, 32, .1); border-top-color: var(--pt-gold, #C9A84C); }
html body .page-loading,
html body .empty-state {
  background: none;
  border: 0;
  text-align: left;
  padding: 8px 2px 18px;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
  font-size: 15px;
}
html body .empty-state-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--pt-navy, #0C1220);
}

/* ═══════════════════════════════════════════════════════════════════
   9. ONE CONTROL SYSTEM (2026-10-07)
   ═══════════════════════════════════════════════════════════════════
   Daryan: "We have good features, they just are applied very weakly. No
   premium enhancement with how the buttons look, with how the dropdowns
   look."

   The pattern classes had no hover, no pressed state and no transition,
   and ux-polish.css turns the tap highlight off everywhere, so a tap on the
   most-used button in the app showed nothing until the network answered.
   This section is every state of every control, once, from the role tokens
   in twf-premium.css:

     buttons   hover (pointer devices only), pressed (scale + tint),
               disabled, busy (a spinner in place of the words, no
               layout shift)
     rows      a pressed tint that reaches past the row's own edge
     fields    hover, focus (the one ring, drawn on the edge), disabled,
               invalid; a select draws one chevron and keeps the native
               picker underneath (iOS and Android wheels stay)
     floating  the install nudge never covers a sticky Next or Accept

   It is loaded last, like the rest of this file, so a state here wins a
   specificity tie with the base rule in twf-styles-cockpit.css. Geometry
   stays with the base rule; nothing here moves a control.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 9a. Motion on the tokens ────────────────────────────────────── */
.twf-pt-cta, .twf-pt-quiet, .twf-pt-chip, .twf-su-go, .twf-su-day, .twf-su-opt,
button.twf-pt-row, a.twf-pt-row, .back-nav-btn, .twf-psc-back, .twf-nav-chrome .twf-bc-back {
  transition: background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease-out),
    transform var(--motion-fast) var(--motion-ease-out),
    opacity var(--motion-fast) var(--motion-ease);
}

/* ── 9b. Hover, for a pointer that can hover ─────────────────────── */
@media (hover: hover) {
  .twf-pt-cta:hover:not([disabled]):not([aria-busy="true"]) { background-color: var(--action-primary-hover); }
  .twf-pt-cta.stop:hover:not([disabled]) { background-color: var(--action-danger-hover); }
  .twf-pt-quiet:hover:not([disabled]),
  .twf-pt-cta.quiet:hover:not([disabled]),
  .twf-su-next.quiet:hover:not([disabled]) { background-color: var(--action-secondary-hover); border-color: var(--border-2); }
  .twf-pt-chip:hover:not(.on):not([disabled]) { border-color: var(--border-2); color: var(--text-1); }
  .twf-su-go:hover:not([disabled]) { background-color: var(--action-primary-hover); }
  .twf-su-day:hover:not(.on) { border-color: var(--border-2); }
  button.twf-pt-row:hover, a.twf-pt-row:hover { background-color: rgba(17,29,59,.03); box-shadow: 0 0 0 6px rgba(17,29,59,.03); border-radius: 10px; }
  .back-nav-btn:hover, .twf-psc-back:hover, .twf-nav-chrome .twf-bc-back:hover { background: var(--action-tint); }
}

/* ── 9c. Pressed: the answer to a tap, before the network answers ── */
.twf-pt-cta:active:not([disabled]):not([aria-busy="true"]) {
  background-color: var(--action-primary-pressed);
  transform: scale(var(--press-scale));
  box-shadow: 0 1px 2px rgba(17,29,59,.12);
  transition-duration: var(--motion-press);
}
.twf-pt-cta.stop:active:not([disabled]) { background-color: var(--action-danger-pressed); }
.twf-pt-quiet:active:not([disabled]),
.twf-pt-cta.quiet:active:not([disabled]),
.twf-su-next.quiet:active:not([disabled]) {
  background-color: var(--action-secondary-pressed);
  transform: scale(var(--press-scale));
  box-shadow: none;
  transition-duration: var(--motion-press);
}
.twf-pt-chip:active:not([disabled]) { transform: scale(.97); background-color: var(--surface-2); transition-duration: var(--motion-press); }
.twf-pt-chip.on:active:not([disabled]) { background-color: rgba(17,29,59,.14); }
.twf-su-chips .twf-pt-chip.on:active:not([disabled]) { background-color: var(--action-primary-pressed); }
.twf-su-go:active:not([disabled]) { background-color: var(--action-primary-pressed); transform: scale(var(--press-scale)); }
.twf-su-day:active { transform: scale(.97); }
.twf-su-opt:active { background: var(--action-tint); transform: scale(.985); }
/* a row is a door: it tints past its own edge, so the press reads as the
   whole line and not as a highlight behind the words */
button.twf-pt-row:active, a.twf-pt-row:active {
  background-color: var(--action-tint);
  box-shadow: 0 0 0 6px var(--action-tint);
  border-radius: 10px;
  transition-duration: var(--motion-press);
}
.back-nav-btn:active, .twf-psc-back:active, .twf-nav-chrome .twf-bc-back:active { background: var(--action-tint-strong); transform: scale(.97); }

/* ── 9d. Disabled and busy ───────────────────────────────────────── */
.twf-pt-quiet[disabled], .twf-pt-chip[disabled], .twf-su-go[disabled] { opacity: .45; cursor: not-allowed; }
/* busy: the words give way to a spinner in the same box. :where() keeps
   the specificity at zero so a sticky CTA (.twf-su-next, the accept card)
   stays sticky - sticky is already a containing block for the spinner. */
:where(.twf-pt-cta, .twf-pt-quiet, .twf-su-go):where([aria-busy="true"]) { position: relative; }
.twf-pt-cta[aria-busy="true"], .twf-pt-quiet[aria-busy="true"], .twf-su-go[aria-busy="true"] {
  color: transparent !important; pointer-events: none; opacity: 1;
}
/* busy is usually disabled too (twfAction): it keeps its own colour, not the disabled grey */
.twf-pt-cta[aria-busy="true"]:not(.quiet):not(.stop) { background: var(--action-primary); }
.twf-pt-cta.stop[aria-busy="true"] { background: var(--action-danger); }
/* a checkbox row stays a row on a phone (cockpit turns every label into a block under 480px) */
@media (max-width: 480px) { label.twf-check { display: flex !important; } }
.twf-pt-cta[aria-busy="true"]::after, .twf-pt-quiet[aria-busy="true"]::after, .twf-su-go[aria-busy="true"]::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: twf-spin .7s linear infinite;
}
.twf-pt-quiet[aria-busy="true"]::after, .twf-pt-cta.quiet[aria-busy="true"]::after {
  border-color: rgba(17,29,59,.18); border-top-color: var(--action-primary);
}

/* ── 9e. Back buttons: the plain icon button, with their words ───── */
.back-nav-btn, .twf-psc-back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--control-h-sm); padding: 0 12px 0 8px;
  border: 0; border-radius: var(--control-radius);
  background: transparent; color: var(--text-1);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: none;
}
.back-nav-btn:hover { box-shadow: none; transform: none; color: var(--text-1); }

/* ── 9f. Fields: one hover, one focus, one disabled, one invalid ──── */
@media (hover: hover) {
  html body #pagesContainer input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not(:disabled):not(:focus):hover,
  html body #pagesContainer select:not(:disabled):not(:focus):hover,
  html body #pagesContainer textarea:not(:disabled):not(:focus):hover,
  .twf-su-in:not(:disabled):not(:focus):hover, input.twf-fi:not(:disabled):not(:focus):hover, select.twf-fi:not(:disabled):not(:focus):hover,
  textarea.twf-fi:not(:disabled):not(:focus):hover, .twf-ch-sel:not(:disabled):not(:focus):hover, .twf-menu-field:hover {
    border-color: var(--border-2);
  }
}
/* the ring is index.html's global outline; on a field it sits ON the edge
   (offset -1px) so the hairline becomes the ring instead of a second line */
html body #pagesContainer input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus,
html body #pagesContainer select:focus,
html body #pagesContainer textarea:focus,
.twf-su-in:focus, input.twf-fi:focus, select.twf-fi:focus, textarea.twf-fi:focus, .twf-ch-sel:focus, .form-field:focus,
.login-field:focus, .elm-field:focus, .form-input:focus, .list-search input:focus, .twf-search-input:focus,
.manager-action-notes textarea:focus, .manager-action-escalate-select select:focus,
.twf-ob-input:focus, .twf-ob-textarea:focus,
#twfAgreementModal .twf-agr-initials-input:focus, #twfAgreementModal .twf-agr-name-input:focus {
  border-color: var(--focus-color);
  box-shadow: none;
  outline-offset: -1px;
}
/* 2026-10-08: any other field, wherever it is drawn (a sheet, a dialog
   appended to body, set password): the ring sits on its edge too, so a
   focused field is one line, never border + gap + ring */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):focus,
select:focus, textarea:focus { outline-offset: -1px; }
/* the ring for anything index.html's list does not name (a <summary>, an
   editable region); zero specificity, so every named rule still wins */
:where(:focus-visible) { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
/* tabindex=-1 is a programmatic landing spot (a page heading, a sheet
   panel), not a control: no ring. A real control with tabindex=-1 keeps
   index.html's !important ring. */
:where([tabindex="-1"]):focus { outline: none; }
html body #pagesContainer input:not([type="checkbox"]):not([type="radio"]):disabled,
html body #pagesContainer select:disabled,
html body #pagesContainer textarea:disabled,
.twf-su-in:disabled, input.twf-fi:disabled, select.twf-fi:disabled, textarea.twf-fi:disabled, .twf-ch-sel:disabled {
  background-color: var(--surface-0);
  color: var(--text-3);
  border-color: var(--border-1);
  cursor: not-allowed;
  opacity: 1;
}
html body #pagesContainer [aria-invalid="true"],
.twf-su-in[aria-invalid="true"], .twf-su-in.is-invalid, .twf-ch-sel[aria-invalid="true"] {
  border-color: var(--danger);
}
.twf-su-in::placeholder, html body #pagesContainer input::placeholder, html body #pagesContainer textarea::placeholder { color: var(--text-3); opacity: 1; }

/* A select: the native picker underneath (the iOS wheel, the Android
   list), one drawn chevron on top. !important because a dozen context
   rules use the background shorthand, which would otherwise wipe it. */
select:not([multiple]):not([size]), .twf-menu-field {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 12px !important;
  padding-right: 40px !important;
  cursor: pointer;
  text-overflow: ellipsis;
}
select:disabled { cursor: not-allowed; }

/* Field helpers, for the selects that used to carry their size inline. */
.twf-in-full { display: block; width: 100%; box-sizing: border-box; }
.twf-in-auto { width: auto; flex: 0 0 auto; }
.twf-in-narrow { max-width: 320px; }
.twf-in-lbl { margin-top: 6px; }
.twf-in-mb { margin-bottom: 16px; }

/* ── 9g. One bottom slot ─────────────────────────────────────────── */
/* The install nudge sat over the shift wizard's sticky Next. It waits while
   a sticky CTA is on screen and comes back when it is gone. twf-ui.js sets
   the body class for a browser without :has(). */
body:has(.twf-su-next) #twfInstallNudge,
body:has(.twf-accept-card) #twfInstallNudge,
body.twf-has-sticky-cta #twfInstallNudge { display: none; }

/* ── 9h. A row of chips that scrolls sideways fades at the edge it
   continues past (classes set by twf-ui.js only when it overflows) ── */
.twf-ui-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.twf-ui-fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.twf-ui-fade-l.twf-ui-fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

/* ── 9i. The pattern buttons in two inherited contexts (2026-10-08) ── */
/* the pattern primary keeps its colour inside orientation: "Save password and
   continue", the first thing a new hire presses. 2026-10-08 (package O): not
   the quiet one or the stop one, which the orientation shell draws in its
   footer (Continue goes quiet while the install or alerts step is open) */
.twf-orientation button.twf-pt-cta:not([disabled]):not(.quiet):not(.stop) { background: var(--action-primary); color: var(--action-primary-fg); }
.twf-orientation button.twf-pt-cta[disabled] { opacity: 1; }
/* the sidebar is navy: its quiet button (Sign out) is the inverse hairline */
.sidebar .twf-pt-quiet { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); background: transparent; color: #fff; border-color: rgba(255,255,255,.24); font-size: 14px; }
@media (hover: hover) { .sidebar .twf-pt-quiet:hover:not([disabled]) { background-color: rgba(255,255,255,.08); border-color: rgba(255,255,255,.36); } }
.sidebar .twf-pt-quiet:active:not([disabled]) { background-color: rgba(255,255,255,.14); }

@media (prefers-reduced-motion: reduce) {
  .twf-pt-cta, .twf-pt-quiet, .twf-pt-chip, .twf-su-go, .twf-su-day, .twf-su-opt,
  button.twf-pt-row, a.twf-pt-row, .back-nav-btn, .twf-psc-back, .twf-nav-chrome .twf-bc-back { transition: none; }
  .twf-pt-cta:active, .twf-pt-quiet:active, .twf-pt-chip:active, .twf-su-go:active, .twf-su-day:active, .twf-su-opt:active,
  .back-nav-btn:active, .twf-psc-back:active, .twf-nav-chrome .twf-bc-back:active { transform: none !important; }
  .twf-pt-cta[aria-busy="true"]::after, .twf-pt-quiet[aria-busy="true"]::after, .twf-su-go[aria-busy="true"]::after { animation-duration: 1.6s; }
}

/* ══ 10. ELEVATED TODAY (2026-10-08, Daryan approved StaffElevated and MgrElevated) ══
   The flat pass of 10-08 took the colour out of the four tiles and turned the
   next-shift card navy-and-white. He liked his original better. This is the
   elevated version of it: raised white tiles that carry their own colour, a
   gold-ringed greeting, a navy band for leadership, the coverage ring drawn
   per shift, and a floating thumb bar. Tokens: twf-premium.css (--hero-*,
   --gold-*, --elev-card). The hero card itself is in twf-premium.css. */

/* ── 10a. The brand row and its icon buttons ─────────────────────── */
.twf-topbar-brand .sh { width: 22px; height: 26px; }
.twf-topbar-brand .tx { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--text-2); }
@media (max-width: 359px) { .twf-topbar-brand .tx { display: none; } }
@media (max-width: 900px) {
  body.twf-lean-top .topbar .twf-topbar-brand { margin-right: auto; }
  body.twf-lean-top .topbar #notifBell,
  body.twf-lean-top .topbar #twfHintHelpBtn,
  body.twf-lean-top .topbar .twf-eb-act { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 14px; border-color: transparent; background: var(--surface-1); box-shadow: var(--elev-1); color: var(--text-1); }
}

/* ── 10b. The greeting: "Good evening, Jada", a gold ring round the face ── */
#todayContent .twf-today-head { align-items: center; gap: 16px; padding: 12px 0 18px; }
#todayContent .twf-today-avw { margin-top: 0; width: 64px; height: 64px; padding: 3px; border-radius: 50%; background: var(--gold-ring); box-sizing: border-box; }
#todayContent .twf-today-av { width: 58px; height: 58px; box-shadow: none; background: var(--hero-0); color: var(--gold-hi); font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 22px; letter-spacing: 0; }
#todayContent .twf-today-cam { border-color: var(--surface-0); }
#todayContent .twf-today-txt .nm { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: 26px; line-height: 1.1; letter-spacing: 0; white-space: normal; color: var(--text-1); margin-top: 0; }
#todayContent .twf-today-txt .w { font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* ── 10c. Leadership: the navy band, the tiles rise over its edge ── */
.twf-lead-band { position: relative; overflow: hidden; background: linear-gradient(170deg, var(--hero-1) 0%, var(--hero-0) 70%); color: #fff; border-radius: 26px; padding: 6px 18px 22px; margin: 0 0 14px; box-shadow: var(--gold-hairline); }
.twf-lead-band.has-lift { padding-bottom: 92px; margin-bottom: 0; }
.twf-lead-band-city, #todayContent .twf-lead-band .twf-today-head { position: relative; }
.twf-lead-band-city { padding-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hero-mute); }
#todayContent .twf-lead-band .twf-today-head { padding: 12px 0 0; }
#todayContent .twf-lead-band .twf-today-avw { width: 56px; height: 56px; }
#todayContent .twf-lead-band .twf-today-av { width: 50px; height: 50px; font-size: 20px; }
#todayContent .twf-lead-band .twf-today-cam { border-color: var(--hero-0); }
#todayContent .twf-lead-band .twf-today-txt .nm { color: #fff; font-size: 25px; }
#todayContent .twf-lead-band .twf-today-txt .w { color: var(--hero-mute); }
#todayContent .twf-lead-band .twf-today-txt .cta { color: var(--gold-hi); }
.twf-pt-grid.is-lifted { position: relative; margin-top: -72px; }
@media (max-width: 768px) {
  /* edge to edge on a phone, joined to the strip above it */
  .twf-lead-band { margin-left: -16px; margin-right: -16px; margin-top: -12px; border-radius: 0 0 30px 30px; box-shadow: none; }
  body.twf-mobile-cockpit:has(.twf-lead-band) .main { padding-top: 0; }
  body.twf-mobile-cockpit:has(.twf-lead-band) .topbar { background: var(--hero-1); -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: calc(var(--twf-safe-top, 0px) + 12px); }
  body.twf-mobile-cockpit:has(.twf-lead-band) #pagesContainer { padding-top: 0; }
  body.twf-mobile-cockpit:has(.twf-lead-band) .twf-lead-band { margin-top: 0; }
  body.twf-mobile-cockpit:has(.twf-lead-band) .topbar .twf-topbar-brand .tx { color: var(--hero-mute); }
  body.twf-mobile-cockpit:has(.twf-lead-band) .topbar #notifBell,
  body.twf-mobile-cockpit:has(.twf-lead-band) .topbar #twfHintHelpBtn,
  body.twf-mobile-cockpit:has(.twf-lead-band) .topbar .twf-eb-act { background: rgba(255,255,255,.08); box-shadow: none; color: #fff; }
  body.twf-mobile-cockpit:has(.twf-lead-band) .topbar #notifCount { box-shadow: 0 0 0 2px var(--hero-1) !important; }
}

/* ── 10d. The stat tiles: raised cards that carry their colour ───────
   A rail and a tinted icon chip in the tile's own hue, and the number in it.
   Hue by what the tile counts (renderers set .o .b .g .r; none is gold):
   open seats orange, events blue, confirmed green, to verify gold. Red stays
   the one state colour (.r: something unanswered). */
.twf-pt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; border: 0; }
.twf-pt-stat {
  --tile-hue: var(--gold-lo); --tile-ink: var(--text-1); --tile-icon: var(--intent-brand-strong); --tile-chip: var(--pt-gold-halo);
  position: relative; display: block; width: 100%; min-width: 0; min-height: 98px; padding: 16px 16px 14px 18px;
  background: var(--surface-1); border: 0; border-radius: 20px; color: var(--text-1);
  text-align: left; font-family: inherit; cursor: pointer; overflow: hidden; box-shadow: var(--elev-card);
  transition: transform var(--motion-fast) var(--motion-ease-out), box-shadow var(--motion-fast) var(--motion-ease);
}
.twf-pt-stat.o { --tile-hue: var(--pt-warn-stripe); --tile-ink: var(--pt-warn); --tile-icon: var(--pt-warn); --tile-chip: var(--pt-warn-bg); }
.twf-pt-stat.b { --tile-hue: var(--pt-info-stripe); --tile-ink: var(--pt-info); --tile-icon: var(--pt-info); --tile-chip: var(--pt-info-bg); }
.twf-pt-stat.g { --tile-hue: var(--pt-ok-stripe); --tile-ink: var(--pt-ok); --tile-icon: var(--pt-ok); --tile-chip: var(--pt-ok-bg); }
.twf-pt-stat.r { --tile-hue: var(--pt-late-stripe); --tile-ink: var(--pt-late); --tile-icon: var(--pt-late); --tile-chip: var(--pt-late-bg); }
.twf-pt-stat .rail { display: block; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tile-hue); }
.twf-pt-stat .i { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 10px; background: var(--tile-chip); color: var(--tile-icon); display: flex; align-items: center; justify-content: center; }
.twf-pt-stat .i svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.twf-pt-stat .v { position: relative; padding-right: 40px; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--tile-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.twf-pt-stat .k { position: relative; font-size: 14px; color: var(--text-2); margin-top: 6px; line-height: 1.3; }
button.twf-pt-stat:active { transform: scale(var(--press-scale)); }
@media (hover: hover) { button.twf-pt-stat:hover { box-shadow: var(--elev-3); } .twf-pt-stat.twf-kpi-card:hover { box-shadow: var(--elev-3); } }

/* ── 10e. A row that is a raised card (the requests, with a Review chip) ── */
.twf-pt-row.is-card { background: var(--surface-1); border-radius: 20px; padding: 14px; margin: 14px 0; gap: 14px; box-shadow: var(--elev-card); }
@media (hover: hover) { button.twf-pt-row.is-card:hover { background: var(--surface-1); box-shadow: var(--elev-3); border-radius: 20px; } }
.twf-pt-row.is-request .rail { width: 44px; height: 44px; border-radius: 14px; background: var(--hero-0); color: var(--gold-hi); }
.twf-pt-row.is-card .l1 { font-size: 15px; }
.twf-pt-row.is-card .l2 { font-size: 13px; color: var(--text-2); }
.twf-pt-row-chip { flex: none; font-size: 13px; font-weight: 700; color: var(--hero-0); background: var(--pt-gold-halo); padding: 6px 12px; border-radius: 12px; }

/* ── 10f. The coverage ring: one ring per shift (twf-ring.js) ─────── */
.twf-ring-card { display: flex; align-items: center; gap: 16px; width: 100%; box-sizing: border-box; background: var(--surface-1); border: 0; border-radius: 22px; padding: 16px; margin: 0 0 14px; box-shadow: var(--elev-card); text-align: left; font: inherit; color: var(--text-1); }
button.twf-ring-card { cursor: pointer; min-height: 44px; }
button.twf-ring-card:active { transform: scale(var(--press-scale)); }
.twf-ring-svg { flex: none; display: block; }
.twf-ring-track { stroke: var(--surface-2); }
.twf-ring-arc.is-ok, .twf-ring-check { stroke: var(--pt-ok-pill); }
.twf-ring-arc.is-short { stroke: var(--intent-caution); }
.twf-ring-arc.is-low { stroke: var(--pt-late); }
.twf-ring-num { fill: var(--text-1); }
.twf-ring-num.is-short { fill: var(--intent-caution-strong); }
.twf-ring-num.is-low { fill: var(--pt-late); }
.twf-ring-unit { fill: var(--text-2); }
.twf-ring-body { flex: 1; min-width: 0; display: block; }
.twf-ring-cap { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--intent-brand-strong); font-weight: 700; }
.twf-ring-ttl { display: block; font-size: 17px; font-weight: 700; color: var(--text-1); margin-top: 4px; line-height: 1.25; }
.twf-ring-sub { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.twf-ring-sub.is-ok { color: var(--pt-ok); }
.twf-ring-sub.is-short { color: var(--intent-caution-strong); }
.twf-ring-sub.is-low { color: var(--pt-late); }
.twf-ring-res { display: block; font-size: 12px; color: var(--text-2); margin-top: 6px; line-height: 1.4; }
.twf-ring-door { flex: none; display: block; background: none; border: 0; padding: 0; border-radius: 50%; cursor: pointer; min-width: 44px; min-height: 44px; }
.twf-ring-rows { display: grid; margin-top: 2px; }
.twf-ring-row { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 4px; margin: 0 -4px; background: none; border: 0; border-radius: 10px; font: inherit; font-size: 13px; color: var(--text-1); text-align: left; cursor: pointer; }
span.twf-ring-row { cursor: default; }
button.twf-ring-row:active { background: var(--action-tint); }
@media (hover: hover) { button.twf-ring-row:hover { background: var(--action-tint); } }
.twf-ring-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.twf-ring-row.is-ok .twf-ring-dot { background: var(--pt-ok-pill); }
.twf-ring-row.is-short .twf-ring-dot { background: var(--intent-caution); }
.twf-ring-row.is-low .twf-ring-dot { background: var(--pt-late); }
.twf-ring-row.is-undrawn .twf-ring-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--text-3); }
.twf-ring-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.twf-ring-ct { flex: none; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .twf-ring-arc { transition: stroke-dasharray .5s cubic-bezier(.22,1,.36,1); } }

/* ── 10g. The thumb bar floats (phones only; the rail is untouched) ──
   Same nav, same buttons, same data-bn-route: only its shape. Inset 12px,
   rounded 24, a soft shadow; the active item is a navy square with a gold
   glyph, which is also the shape cue the 3px bar used to be. */
@media (max-width: 768px) {
  #twfBottomNav:not(.twf-rail) {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px; border-top: 0; background: rgba(255,255,255,.94);
    box-shadow: 0 1px 2px rgba(12,18,32,.06), 0 12px 30px -12px rgba(12,18,32,.35);
    padding: 6px 4px !important;
    -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px);
  }
  body.twf-nav-off #twfBottomNav:not(.twf-rail) { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); }
  #twfBottomNav:not(.twf-rail) .twf-bn-btn { min-height: 58px; color: var(--text-3); }
  #twfBottomNav:not(.twf-rail) .twf-bn-btn.active { color: var(--text-1); }
  #twfBottomNav:not(.twf-rail) .twf-bn-btn.active::before { display: none; }
  #twfBottomNav:not(.twf-rail) .twf-bn-btn[data-bn-tint] .twf-bn-icon { background: transparent; color: inherit; border-radius: 11px; }
  #twfBottomNav:not(.twf-rail) .twf-bn-btn[data-bn-tint].active .twf-bn-icon { background: var(--hero-0); color: var(--gold-hi); }
  #twfBottomNav:not(.twf-rail) .twf-bn-btn .twf-bn-badge { border-color: #fff; }
}