/* ═══════════════════════════════════════════════════════════════════
   THE FLAT LIST
   ═══════════════════════════════════════════════════════════════════
   2026-09-07.

   Daryan: "i want the handbook page to look just as sleek as the homepage."

   The homepage reads well because its lists are INVISIBLE - .twf-pt-row is
   background:none, border:0, and the content sits directly on the canvas
   with a rail icon and a chevron. Nothing is boxed. The eye follows a single
   column of text.

   The handbook does the opposite. Every one of its 113 items is an
   .accordion-item: a 1px border, a radius, a white fill, and an 8px gap to
   the next one. That is 113 boxes stacked vertically, each announcing its
   own edges, and it is why the page feels heavy and dated next to Today.

   The counts across the app, at render sites:

       panel        788
       card         223
       twf-pt-row    25

   So the flat pattern exists and is used in 25 places, against roughly a
   thousand boxed ones. This file is the pattern written down as something
   reusable, rather than restyling one screen and leaving the next person to
   guess.

   ── WHY A SEPARATE FILE AND A SCOPED SELECTOR ───────────────────────
   .accordion-item is used outside the handbook. Restyling it globally would
   silently change screens nobody looked at, which is the exact habit that
   produced the current inconsistency. Everything here is scoped to
   .twf-flat, applied per container, so a screen opts in.

   The shift screens (task #85) and the glossary want this same treatment.
   When they take it, they add the class - they do not get their own copy.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   THE RAIL: hints of colour, one rule
   ═══════════════════════════════════════════════════════════════════
   Daryan: "some things colored, some not... the outline of the icons should
   be colored for groupings and just brightness."

   That was not a taste problem, it was a missing stylesheet. The markup
   already asks for seven rail variants:

       r-info  r-person  r-mute  r-warn  r-ok  r-late  r-gold

   and exactly one of them had a rule - .rail.r-gold. The other six rendered
   with no tint and no stroke colour, which is precisely why some icons
   looked deliberate and others looked forgotten.

   THE RULE, stated once so it can be checked:
     stroke  carries the GROUPING  - which kind of thing this row is
     tint    carries the same hue at ~10%, so the shape reads at a glance
     nothing else colours. No filled tiles, no per-icon decisions.

   Brightness, not hue, is what changes for state: a muted row drops to
   --pt-mute, it does not change colour. That keeps hue meaningful - if
   everything can be any colour, colour stops being information.

   The tokens already existed (--pt-ok, --pt-warn, --pt-late, --pt-info,
   --pt-gold, --pt-mute) and are used by pills elsewhere, so a green rail and
   a green pill are the same green by construction rather than by memory.
   ═══════════════════════════════════════════════════════════════════ */

.rail {
  color: var(--pt-ink-soft, rgba(12, 18, 32, .7));
  background: rgba(12, 18, 32, .05);
}

.rail.r-ok      { color: var(--pt-ok);    background: var(--pt-ok-bg,   rgba(46, 125, 82, .10)); }
.rail.r-warn    { color: var(--pt-warn);  background: var(--pt-warn-bg, rgba(168, 133, 42, .12)); }
.rail.r-late    { color: var(--pt-late);  background: var(--pt-late-bg, rgba(179, 38, 30, .10)); }
.rail.r-info    { color: var(--pt-info);  background: var(--pt-info-bg, rgba(37, 99, 235, .10)); }
.rail.r-gold    { color: var(--pt-gold-strong, #A8852A); background: rgba(201, 168, 76, .12); }
.rail.r-person  { color: var(--pt-navy, #0C1220);        background: rgba(12, 18, 32, .06); }
/* Muted is the one that drops brightness rather than changing hue - it is a
   state, not a category. */
.rail.r-mute    { color: var(--pt-mute, rgba(12, 18, 32, .45)); background: rgba(12, 18, 32, .04); }

/* The icon inherits the rail's colour, so the STROKE is what carries it -
   there is no separate fill to keep in sync.

   2026-09-07: one stroke, stated once. Two per-context rules in the cockpit
   CSS (.twf-pt-row .rail svg, .twf-su-opt .rail svg) each restated
   stroke-width 2 and round caps; the registry draws 3 and square. So a
   registry icon in a rail was redrawn by whichever rule was nearest. Inside
   a rail, every icon is 2.2 with round caps - the weight that reads as
   quiet next to 15px text. The registry's heavier stroke is for icons
   standing alone (the thumb bar, a header control). Those two rules now
   set only size. */
.rail svg,
.rail svg.twf-i {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── The More sheet's icons ──────────────────────────────────────────
   Same rail, same rule. They were gradient chips with a white stroke. */
.twf-sheet-tile-icon.rail {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.twf-sheet-tile-icon.rail svg { width: 20px; height: 20px; }

/* ── The thumb bar ───────────────────────────────────────────────────
   Daryan: "the outline of the icons should be colored for groupings and
   just brightness. at the thumb nav row and the 'more' drawer."

   Each tab carries its group's hue on the stroke. Rest is the hue at 45%,
   active is the hue at full - brightness is the state, hue is the group,
   and the 20px bar above the active tab stays for anyone who cannot see
   hue. Labels stay ink: the words are not the grouping, the icons are. */
@media (max-width: 768px) {
  .twf-bn-btn[data-nav-bucket="today"]       { --bn-hue: var(--pt-gold-strong, #A8852A); }
  .twf-bn-btn[data-nav-bucket="shifts"],
  .twf-bn-btn[data-nav-bucket="clock"],
  .twf-bn-btn[data-nav-bucket="tools"]       { --bn-hue: var(--pt-info, #2563EB); }
  .twf-bn-btn[data-nav-bucket="chat"]        { --bn-hue: var(--pt-ok, #2E7D52); }
  .twf-bn-btn[data-nav-bucket="reviews"],
  .twf-bn-btn[data-nav-bucket="alerts"]      { --bn-hue: var(--pt-warn, #A8852A); }
  .twf-bn-btn[data-nav-bucket="voice"]       { --bn-hue: var(--pt-late, #B3261E); }
  .twf-bn-btn[data-nav-bucket="people"],
  .twf-bn-btn[data-nav-bucket="leaderboard"] { --bn-hue: var(--pt-navy, #0C1220); }

  .twf-bn-btn .twf-bn-icon {
    color: color-mix(in srgb, var(--bn-hue, var(--pt-mute)) 45%, transparent);
  }
  .twf-bn-btn .twf-bn-icon svg { stroke: currentColor; }
  .twf-bn-btn.active .twf-bn-icon { color: var(--bn-hue, var(--twf-nav-active)); }
  .twf-bn-btn.active::before { background: var(--bn-hue, currentColor); }
}

/* ── Command's seven-day strip ───────────────────────────────────────
   Seven numbers under seven day names. Was a white card holding seven
   tinted boxes; now seven quiet cells on the canvas, the busy days a little
   darker - brightness for state, the same rule as everything else. */
.twf-cmd-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 0 0 18px;
}
.twf-cmd-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0 12px;
  border-radius: 10px;
  background: rgba(12, 18, 32, .03);
}
.twf-cmd-day .d {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--pt-mute, rgba(12, 18, 32, .45));
}
.twf-cmd-day .n {
  font-size: 17px;
  font-weight: 700;
  color: rgba(12, 18, 32, .3);
  font-variant-numeric: tabular-nums;
}
.twf-cmd-day.is-on  { background: rgba(201, 168, 76, .12); }
.twf-cmd-day.is-on  .n { color: var(--pt-navy, #0C1220); }
.twf-cmd-day.is-busy { background: rgba(201, 168, 76, .22); }
.twf-cmd-day.is-busy .n { color: var(--pt-navy, #0C1220); }

/* ── Stat tile sub-label (Command's "All cleared" / "Need staffing") ── */
.twf-pt-stat .k .s { display: block; margin-top: 2px; color: var(--pt-faint, rgba(12, 18, 32, .4)); }

/* A rail inside a flat accordion header (the Playbook) takes the same box
   the homepage rows use, so the two lists read as one family. */
.twf-flat .accordion-header .rail {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Today's identity block ──────────────────────────────────────────
   Name and pins on one line, pins optically aligned to the text baseline
   rather than the box - which is what made them read as an eyebrow
   floating above the name instead of belonging to it. */

/* The pins sit on their own line under the name, flush left with it. */
.twf-today-pins {
  display: block;
  line-height: 0;
  margin-top: 6px;
}

/* "Add a photo" is a real button now, so it needs to stop looking like one
   in the browser's default sense and go back to looking like the quiet link
   it was drawn as. */
.twf-today-txt .cta {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.twf-today-txt .cta:focus-visible {
  outline: 2px solid var(--pt-gold, #C9A84C);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── The Related strip ───────────────────────────────────────────────
   Was a white box of beige emoji pills at the top of the handbook and the
   hours tracker. Now a label and text links, on the canvas, with registry
   icons carrying the stroke. Wraps on a phone; each link keeps 44px. */

.twf-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  margin: 0 0 12px;
  padding: 0 2px;
}

/* The label takes its own line. Inline, it shared the first row with one
   link and pushed the rest to a second - a ragged split on every phone. */
.twf-related-k {
  flex: 0 0 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(12, 18, 32, .45);
  margin-bottom: 2px;
}


.twf-related-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pt-gold-strong, #A8852A);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
}

.twf-related-link .twf-i { stroke-width: 2.2; }

.twf-related-link:hover { color: var(--pt-navy, #0C1220); }

.twf-related-link:focus-visible {
  outline: 2px solid var(--pt-gold, #C9A84C);
  outline-offset: 2px;
}

/* ── Progress toward the next pin ────────────────────────────────────
   The one line on Today for the days nothing is booked. Quiet by design:
   it is a standing fact, not an alert. The bar is the only place in the
   app where gold means "you", rather than "the brand". */

.twf-pin-prog {
  padding: 4px 2px 18px;
  margin: 0 0 4px;
}

.twf-pin-prog-t {
  font-size: 15px;
  font-weight: 700;
  color: var(--pt-navy, #0C1220);
  letter-spacing: -0.01em;
}

.twf-pin-bar {
  position: relative;
  height: 6px;
  margin: 8px 0 6px;
  border-radius: 999px;
  background: rgba(12, 18, 32, .07);
  overflow: hidden;
}

.twf-pin-bar > span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--pt-gold, #C9A84C);
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.twf-pin-prog-b {
  font-size: 13px;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .twf-pin-bar > span { transition: none; }
}

/* ── Today's zero state ──────────────────────────────────────────────
   Replaces the four stat tiles when every count is 0. Not a card: it sits
   on the canvas like the rest of Today. One title, one line, one action. */

.twf-pt-zero {
  padding: 8px 2px 18px;
  margin: 0 0 14px;
}

.twf-pt-zero-t {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pt-navy, #0C1220);
}

.twf-pt-zero-b {
  font-size: 15px;
  line-height: 1.5;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
  margin-top: 4px;
}

.twf-pt-zero-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--pt-gold, #C9A84C);
  color: var(--pt-navy, #0C1220);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.twf-pt-zero-cta:focus-visible {
  outline: 2px solid var(--pt-gold, #C9A84C);
  outline-offset: 2px;
}

/* ── The empty state, everywhere ─────────────────────────────────────
   twfEmptyState() is called from 17 screens (swap approvals, shift
   history, cover board, fill-in...). It drew a centred white card with a
   gold circle, a display-serif heading, and gold-filled CTA blocks - the
   loudest thing on a screen whose whole message is "nothing here".

   Same shape as Today's zero state now: left-aligned text on the canvas,
   and the CTAs become the same flat rows as everything else. One override,
   17 screens. The markup did not change. */

html body .twf-empty-state-v2 {
  text-align: left;
  padding: 8px 2px 18px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html body .twf-empty-state-v2 .twf-empty-icon { display: none; }

html body .twf-empty-state-v2 h3 {
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pt-navy, #0C1220);
  margin: 0;
}

html body .twf-empty-state-v2 p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
  margin: 4px 0 6px;
  max-width: none;
}

html body .twf-empty-state-v2 .twf-empty-ctas {
  display: block;
  max-width: none;
  margin: 0;
}

html body .twf-empty-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--pt-navy, #0C1220);
  cursor: pointer;
}

html body .twf-empty-cta::after {
  content: "\203A";
  margin-left: auto;
  color: rgba(12, 18, 32, .32);
  font-size: 20px;
  line-height: 1;
}

html body .twf-empty-cta-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(201, 168, 76, .12);
  color: var(--pt-gold-strong, #A8852A);
}

html body .twf-empty-cta-title { font-size: 15px; font-weight: 600; }
html body .twf-empty-cta-sub { font-size: 13px; }

/* ── The cover board ─────────────────────────────────────────────────
   Each cover request was a white card. Now a block of text on the canvas,
   18px rhythm, with its Claim button inline. */

.twf-cover-list { display: block; }
.twf-cover-item { padding: 18px 2px; }
.twf-cover-item + .twf-cover-item { padding-top: 0; }

/* ── The list itself ─────────────────────────────────────────────────
   NO rule between rows. None.

   The first version of this kept a 1px hairline between items - a box
   around each replaced by a line between each. That is still a drawn break
   on every row, and it was still the thing that made the page feel ruled
   and heavy. .twf-pt-row on the homepage is border:0 and nothing else;
   the rows are held apart by space and by the left rail, not by lines.

   Invisible means invisible. */

.twf-flat .accordion-item {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  background: none;
  overflow: visible;
}

/* ── The row ─────────────────────────────────────────────────────────
   Edge to edge, no fill. 56px min so it clears the 44px tap target with
   room to breathe - the homepage rows are 12px vertical padding on a
   ~20px line, which lands in the same place. */

/* With no rules between rows, space does the separating - so it gets more
   of it. 18px vertical (the rhythm bans 17 and 22) on a 15px line reads as
   distinct items without anything being drawn. */
.twf-flat .accordion-header {
  background: none;
  padding: 18px 2px;
  min-height: 56px;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  align-items: center;
}

.twf-flat .accordion-header > span:first-child {
  line-height: 1.35;
}

.twf-flat .accordion-item.open .accordion-header {
  color: var(--pt-gold-strong, #A8852A);
}

/* Keyboard focus has to survive losing the box. */
.twf-flat .accordion-header:focus-visible {
  outline: 2px solid var(--pt-gold, #C9A84C);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── The chevron ─────────────────────────────────────────────────────
   The markup ships a ▼ character. Rotating a glyph is not the same as a
   drawn chevron, so it is scaled down, muted, and turned 90 degrees to
   point right when closed - the iOS convention for "there is more here" -
   then down when open. */

.twf-flat .accordion-header .chevron {
  font-size: 11px;
  color: rgba(12, 18, 32, .32);
  transform: rotate(-90deg);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), color .2s;
  flex-shrink: 0;
  line-height: 1;
}

.twf-flat .accordion-item.open .chevron {
  transform: rotate(0deg);
  color: var(--pt-gold-strong, #A8852A);
}

/* ── The opened body ─────────────────────────────────────────────────
   No grey fill. The answer is just text under its question, indented
   enough to read as subordinate without a box drawing the relationship. */

.twf-flat .accordion-body {
  background: none;
}

.twf-flat .accordion-content {
  padding: 0 2px 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--pt-ink-soft, rgba(12, 18, 32, .74));
}

.twf-flat .accordion-content p:last-child,
.twf-flat .accordion-content ul:last-child { margin-bottom: 0; }

/* ── Section headers ─────────────────────────────────────────────────
   The 2px gold rule under every section title was doing the work of
   separating content that the hairlines now do. Reduced to a label: small,
   uppercase, tracked - the same treatment the homepage uses above "This
   week" and "Waiting on you". */

.twf-flat .twf-hb-section-header {
  margin: 30px 0 4px;
  padding-bottom: 0;
  border-bottom: 0;
}

.twf-flat .twf-hb-section-header > div {
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(12, 18, 32, .45);
}

/* The first section should not push a big gap under the page title. */
.twf-flat .twf-hb-section-header:first-of-type { margin-top: 12px; }

.twf-flat .twf-hb-intro {
  padding: 0 2px 6px;
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pt-ink-soft, rgba(12, 18, 32, .74));
}
.twf-flat .twf-hb-intro p { margin: 0 0 10px; }
.twf-flat .twf-hb-intro p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════
   CHAT ON THE FLAT SYSTEM
   ═══════════════════════════════════════════════════════════════════
   2026-09-07. twf-chat.js carried 111 box constructs and zero flat rows -
   the conversation list had been rebuilt on the iMessage pattern back on
   09-04, but every sheet and modal around it was still hand-styled.

   43 of those constructs were in one function. The new-channel modal drew
   a centred card on a blurred dark backdrop and pasted the same
   180-character pill style eight times for eight preset buttons.

   These classes are the small amount of CSS the rebuild needs that the
   system did not already have. Everything else it uses - .twf-su,
   .twf-pt-row, .twf-pt-sh, .twf-seg, .rail, .twf-su-in, .twf-su-go - was
   already there and unreferenced by this file.
   ═══════════════════════════════════════════════════════════════════ */

/* The sheet host. A full-bleed canvas surface rather than a card floating
   on a dark scrim: the system has no cards, so a modal cannot be one. */
.twf-ch-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--pt-canvas, #F4F6FB);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: twfChSheetIn .22s cubic-bezier(.32, .72, 0, 1);
}

@keyframes twfChSheetIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .twf-ch-sheet { animation: none; }
}

/* Selection is the row tinting, not a control beside the name. The input
   still exists and still carries the value - createChatChannel reads
   .channel-member-cb:checked, and the broadcast submit reads the radio - it
   is simply not the thing you look at.

   .twf-pick is the shared behaviour: any flat row holding a hidden checkbox
   or radio. Written once here rather than per screen, because the second
   place that needed it turned up ten minutes after the first. */
.twf-pt-row.twf-pick { cursor: pointer; border-radius: 12px; padding-left: 8px; padding-right: 8px; }
.twf-pt-row.twf-pick > input[type="checkbox"],
.twf-pt-row.twf-pick > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.twf-pt-row.twf-pick:has(> input:checked) { background: var(--pt-info-bg, rgba(37, 99, 235, .10)); }
.twf-pt-row.twf-pick .twf-ch-tick {
  flex-shrink: 0;
  padding-right: 4px;
  font-size: 17px;
  color: var(--pt-info, #2563EB);
  opacity: 0;
  transition: opacity .12s ease;
}
.twf-pt-row.twf-pick:has(> input:checked) .twf-ch-tick { opacity: 1; }

/* :has() is iOS 15.4+. Below that the tick and tint never appear, so the
   control comes back rather than leaving selection invisible. */
@supports not selector(:has(*)) {
  .twf-pt-row.twf-pick > input[type="checkbox"],
  .twf-pt-row.twf-pick > input[type="radio"] {
    position: static;
    opacity: 1;
    width: 20px;
    height: 20px;
    accent-color: var(--pt-gold, #C9A84C);
    pointer-events: auto;
  }
  .twf-pt-row.twf-pick .twf-ch-tick { display: none; }
}

/* Audience picker: the same row, two up. */
.twf-ch-aud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.twf-ch-aud .twf-pt-row { padding-top: 10px; padding-bottom: 10px; }
.twf-ch-aud .twf-pt-row .l1 { font-size: 13px; }

.twf-ch-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* A field keeps its edge - a select with no border is not a select - but it
   sits on the canvas and is 44px so a thumb can hit it. */
.twf-ch-sel {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 12px;
  font: inherit;
  font-size: var(--control-font);
  color: var(--text-1);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--control-radius);
  box-sizing: border-box;
}

.twf-pt-sh.twf-ch-people { justify-content: space-between; }
.twf-pt-sh.twf-ch-people #chSelectedCount {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pt-gold-strong, #A8852A);
}

.twf-ch-bulk { display: flex; gap: 6px; padding: 0 0 6px; }
.twf-ch-bulk .twf-seg-btn { background: rgba(12, 18, 32, .05); border-radius: 8px; }

/* The sheet's own footer, sticky to the bottom so Create is reachable
   without scrolling a 30-person list to the end. */
.twf-ch-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--pt-canvas, #F4F6FB) 62%, rgba(244, 246, 251, 0));
}
.twf-ch-cancel {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: rgba(12, 18, 32, .06);
  color: var(--pt-ink, #0C1220);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* Inline validation. Red text on the canvas, not a red box: the system draws
   nothing, and an error is not the one place to make an exception. */
.twf-inline-err {
  display: none;
  margin-top: 10px;
  padding: 0 2px;
  color: var(--pt-late, #B3261E);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

/* Thread replies. The body scrolls, the composer sits in the sticky footer
   the sheet already provides. */
.twf-ch-thread-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 8px; }
.twf-ch-reply {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  max-height: 120px;
  padding: 14px;
  line-height: 1.4;
  resize: none;
}

/* ═══════════════════════════════════════════════════════════════════
   PRESENCE AND FACES
   ═══════════════════════════════════════════════════════════════════
   2026-09-07. 2 of 59 active staff have a headshot, so a messaging list
   today is 57 sets of initials and 2 faces. The code was always ready for
   photos; nobody has uploaded one. That is a first-run prompt, not a
   feature - but the avatar has to be right for the day it changes.

   The dot means active in the last five minutes and nothing else. There is
   deliberately no "last seen 3 hours ago" anywhere in this app: the dot
   answers "can I reach them", a timestamp answers "what were you doing at
   eleven at night", and the second question is not one a staffing app
   should help anyone ask.
   ═══════════════════════════════════════════════════════════════════ */

.rail.twf-av { position: relative; overflow: visible; }
.rail.twf-av img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
.rail.twf-av { font-size: 13px; font-weight: 700; letter-spacing: .02em; }

.rail.twf-av.is-active::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pt-ok, #2E7D52);
  /* The ring is the canvas colour, not white, so the dot reads as cut out of
     the page rather than stuck on top of the avatar. */
  box-shadow: 0 0 0 2.5px var(--pt-canvas, #F4F6FB);
}

/* Presence is colour-only, which fails for anyone who cannot see the green.
   The name carries a screen-reader-only "(active now)" alongside it. */
.twf-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;
}

.twf-pt-row.twf-dm-picker-row { cursor: pointer; border-radius: 12px; padding-left: 8px; padding-right: 8px; }
.twf-pt-row.twf-dm-picker-row:active { background: rgba(12, 18, 32, .04); }

/* ── Faces, at the size a phone draws them ───────────────────────────
   The conversation list already used 48px; the picker was on the generic
   40px flat-row rail. Messaging is where faces earn their keep, so both
   sit at 48 and only there - Today's rows stay 40, because a rail carrying
   an icon is not a portrait. */
.twf-pt-row.twf-dm-picker-row .rail.twf-av {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: 15px;
}
.twf-pt-row.twf-dm-picker-row .rail.twf-av.is-active::after {
  width: 13px;
  height: 13px;
  right: -1px;
  bottom: -1px;
}
.twf-pt-row.twf-dm-picker-row .l1 { font-size: 15px; }
.twf-pt-row.twf-dm-picker-row .l2 { font-size: 13px; }

/* A group is the people in it. Three faces, overlapping, first on top. */
.twf-gstack {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding-left: 6px;
}
.twf-gstack .twf-gf {
  position: relative;
  width: 30px;
  height: 30px;
  margin-left: -10px;
  border-radius: 10px;
  background: rgba(12, 18, 32, .06);
  color: var(--pt-navy, #0C1220);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Cut out of the canvas, so the overlap reads as depth rather than mud. */
  box-shadow: 0 0 0 2px var(--pt-canvas, #F4F6FB);
}
.twf-gstack .twf-gf:first-child { margin-left: 0; }
.twf-gstack .twf-gf img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* An action attached to a message. Sits under the bubble like a Messages
   rich-link tap target, navy on the canvas so it reads as the one thing to
   do without becoming a second bubble. */
.twf-msg-action {
  margin-top: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--pt-navy, #0C1220);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
  -webkit-tap-highlight-color: transparent;
}
.twf-msg-action:active { opacity: .85; }

/* ── The clock ───────────────────────────────────────────────────────
   2026-09-08. The one surface on the Clock screen that earns being drawn:
   it is the reason people open it, and it gets read at arm's length in a
   loading dock with a tray in one hand.

   Navy, because a number that large on the canvas would fight Today for
   the top of the screen. Everything else on this screen is a row. */
.twf-clock {
  background: var(--pt-navy, #0C1220);
  border-radius: 20px;
  padding: 22px 20px 18px;
  margin: 4px 0 18px;
  text-align: center;
}
.twf-clock-t {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--pt-gold, #C9A84C);
  font-variant-numeric: tabular-nums;
}
.twf-clock-d {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
@media (max-width: 380px) { .twf-clock-t { font-size: 38px; } }

/* ── Review detail ───────────────────────────────────────────────────
   2026-09-08. A review is richer than a row: it carries what went well,
   what did not, coaching, and a manager's note. That hangs under the row,
   indented to the rail's width so it reads as belonging to it, in the
   second-line voice rather than as a card of its own. */
.twf-rv-detail {
  padding: 0 4px 14px 52px;
  margin-top: -6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pt-mute, rgba(12, 18, 32, .55));
}
.twf-rv-detail > div + div { margin-top: 4px; }
.twf-rv-good { color: var(--pt-ok, #2E7D52); }
.twf-rv-bad { color: var(--pt-late, #B3261E); }
.twf-rv-line strong { color: var(--pt-navy, #0C1220); font-weight: 700; }
.twf-rv-note {
  padding-left: 10px;
  border-left: 2px solid rgba(12, 18, 32, .12);
  border-radius: 0;
  font-style: italic;
}

/* A count, where a chevron would be on a row that does not navigate. */
.twf-rv-count {
  flex-shrink: 0;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--pt-navy, #0C1220);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

/* ── Availability ────────────────────────────────────────────────────
   2026-09-08. A day is a label and three choices. Written as a row so it
   sits in the same rhythm as everything else, but the three chips get the
   full width underneath rather than being squeezed beside the name - on a
   390px screen "Afternoon" does not fit next to "Wednesday". */
.twf-av-day { padding: 10px 2px 12px; }
.twf-av-dayname {
  font-size: 13px;
  font-weight: 700;
  color: var(--pt-navy, #0C1220);
  margin-bottom: 8px;
}
.twf-seg.twf-av-slots { display: flex; width: 100%; }
.twf-seg.twf-av-slots .twf-seg-btn { flex: 1; min-height: 44px; }

/* The picked-role detail: confidence and a note, indented to the rail. */
.twf-av-detail { padding: 2px 4px 14px 52px; }
.twf-av-detail .twf-seg { width: 100%; }
.twf-av-detail .twf-seg .twf-seg-btn { flex: 1; }
.twf-av-detail .avail-notes { min-height: 44px; font-size: 15px; }

/* The role row has no chevron, so the tick needs the trailing space. */
.avail-role-card .twf-pt-row { padding-top: 10px; padding-bottom: 10px; }

/* ============================================================================
   FORM PRIMITIVES  (2026-09-08)
   ----------------------------------------------------------------------------
   The review form had sixteen inline style strings repeated up to ten times
   each: ten section wrappers drawing a bordered panel, twenty inputs each
   restating the same border and radius, and eighteen labels restating the
   same 13px. 55KB of markup, most of it the same six declarations typed out
   again.

   These are those declarations, named. Nothing here is new design - it is the
   flat system's own tokens applied to the controls that were still styling
   themselves.

   .twf-fsec   a section. No fill, no border, no shadow. The heading and the
               space around it do the grouping, the way every other screen
               does it since the boxes came off.
   .twf-fl     a field label.
   .twf-fi     input, select and textarea. One edge, because a field you type
               into has to show you where it is - that is the exception the
               flat pattern always made for controls.
   ========================================================================= */
.twf-fsec { padding: 4px 0 18px; }
.twf-fsec + .twf-fsec { border-top: 1px solid var(--pt-line); padding-top: 16px; }
.twf-fsec-h { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pt-mute); margin: 0 0 12px; }
.twf-fsec-sub { font-size: 12px; color: var(--pt-faint); margin: -8px 0 12px; line-height: 1.4; }

.twf-fld { margin-bottom: 14px; }
.twf-fl { display: block; font-size: 13px; font-weight: 600; color: var(--pt-ink); margin-bottom: 6px; }
.twf-fl .opt { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--pt-faint); }

.twf-fi { width: 100%; box-sizing: border-box; min-height: var(--control-h); padding: 12px 14px;
  border: 1px solid var(--border-1); border-radius: var(--control-radius); background: var(--surface-1);
  color: var(--text-1); font-size: var(--control-font); font-family: inherit; }
textarea.twf-fi { min-height: 88px; resize: vertical; line-height: 1.45; }
/* 2026-10-07: focus and disabled are drawn once for every field kind in
   twf-flat-everywhere.css section 9 (the blue halo here was a second focus) */

/* A row of tick boxes or radios. Same picked-tint behaviour as .twf-pick. */
.twf-fchk { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  user-select: none; font-size: 15px; color: var(--pt-ink); padding: 0 4px; border-radius: 10px; }
.twf-fchk input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--pt-navy); }
.twf-fchk .sub { display: block; font-size: 12px; color: var(--pt-faint); margin-top: 1px; }
@supports selector(:has(*)) {
  .twf-fchk:has(input:checked) { background: var(--pt-info-bg); }
}
.twf-fchk-grid { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* The five review paths. One choice, so they read as one control. */
.twf-fpath { display: flex; flex-direction: column; }
.twf-fpath .twf-fchk { padding: 6px 8px; }

/* The tappable star row. NOT .twf-stars - that is the small inline glyph run
   in twf-styles-cockpit.css, and reusing the name would have shrunk these to
   1px gaps and pulled them off the baseline. */
.twf-star-row { display: flex; gap: 4px; align-items: center; }
.twf-star-row .star-btn { min-width: 44px; min-height: 44px; }

/* ============================================================================
   NOTIFICATIONS  (2026-09-08)
   The row and its acknowledge button are siblings, not nested. They used to
   be a <button> inside a <button>, which is invalid and needed a data-stop
   to keep the outer one from firing.
   ========================================================================= */
.twf-nt { display: flex; align-items: stretch; gap: 8px; }
.twf-nt-main { flex: 1; min-width: 0; }
.twf-nt-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.twf-nt-ago { font-size: 11px; color: var(--pt-faint); }
.twf-nt-ack { align-self: center; min-width: 56px; min-height: 44px; padding: 0 12px;
  border: 0; background: none; color: var(--pt-info); font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; border-radius: 12px; flex-shrink: 0; }
.twf-nt-ack:hover { background: var(--pt-info-bg); }
.twf-nt-ack:disabled { color: var(--pt-ok); cursor: default; background: none; }
/* The count inside a segmented tab. Blank when the bucket is empty. */
.twf-nt-n { font-variant-numeric: tabular-nums; }
.twf-nt-n:not(:empty) { margin-left: 6px; color: var(--pt-faint); font-weight: 700; }
.twf-seg-btn.active .twf-nt-n:not(:empty) { color: inherit; }
.twf-nt-checked { font-size: 12px; color: var(--pt-faint); line-height: 1.6; padding: 0 2px 8px; }

/* ── Notifications that carry weight (2026-09-09) ─────────────────────
   Daryan: "notifications in the app should look and feel more assertive
   and stronger."

   They read like a log: 13px lines, faint timestamps, everything the same
   size whether it was a badge someone sent or a shift starting in an hour.
   A list where nothing is louder than anything else asks the reader to do
   the triage, every time, and the reliable outcome is that they stop
   opening it.

   Three changes, no new colours:
     - the headline is 16px and 700, so it is a statement and not a row
     - unread carries a solid gold bar and real weight; read recedes
     - anything requiring an answer keeps a live left edge until answered

   The palette is unchanged: this is weight and space doing the work. */
#notifDropdown .twf-nt { padding-top: 14px; padding-bottom: 14px; }
/* 17 and 15, on the scale. The first draft used 16 and 14, which are not
   steps - the scale is 11/12/13/15/17/20/26/34/72. type-scale.test.js only
   reads twf-styles-cockpit.css, so nothing would have caught these two here;
   they are on the scale because the scale is the point, not because a test
   made them. */
#notifDropdown .twf-nt .l1,
#notifDropdown .twf-nt-main > :first-child {
  font-size: 17px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.15px; color: var(--pt-ink, #0C1220);
}
#notifDropdown .twf-nt-main .l2 { font-size: 15px; line-height: 1.45; color: var(--pt-sub, #5A6478); }
#notifDropdown .twf-nt-ago { font-size: 12px; font-weight: 600; color: var(--pt-sub, #5A6478); }

/* Unread is a state you can see from arm's length, not a tint you squint at. */
#notifDropdown .twf-nt.is-unread,
#notifDropdown .twf-nt[data-unread="1"] {
  box-shadow: inset 3px 0 0 0 var(--pt-gold, #C9A84C);
  padding-left: 11px;
  background: rgba(201, 168, 76, .05);
}
#notifDropdown .twf-nt.is-read .l1,
#notifDropdown .twf-nt[data-unread="0"] .l1 { font-weight: 600; color: var(--pt-sub, #5A6478); }

/* Something is waiting on you. Stays lit until it is answered. */
#notifDropdown .twf-nt[data-priority="action"],
#notifDropdown .twf-nt[data-priority="critical"] {
  box-shadow: inset 3px 0 0 0 var(--pt-late, #B91C1C);
  padding-left: 11px;
}

/* The sheet's own header, so the count is the first thing read. */
#notifDropdown .twf-nt-head { padding: 4px 2px 10px; }
/* 20, not 22. Third off-scale value I reached for in one sitting - 14, then
   16, then this - and all three were even numbers on a scale that runs
   11/12/13/15/17/20/26/34/72. The habit is reaching for a round number
   instead of the next step up. A sheet header is 20; 26 is a page title. */
#notifDropdown .twf-nt-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; margin: 0; }

/* ============================================================================
   THE RATING STARS  (2026-09-08)
   ----------------------------------------------------------------------------
   These were <span>&#9733;</span> - a text glyph at font-size:32px, greyed to
   #ccc, with the selected state painted by setStarRating writing
   star.style.color inline.
   Three things wrong with that on a control a manager uses to score a person:
   a span is not reachable by keyboard and has no focus ring, the glyph
   renders differently on every platform and counted 99 times against the
   emoji ratchet in one form, and inline colour is the one thing the design
   system says an active state must never be.
   Drawn star from the registry, real button, 44px target, class-driven fill.
   ========================================================================= */
.star-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--pt-line); border-radius: 12px; -webkit-tap-highlight-color: transparent;
  transition: color .12s ease, transform .08s ease; }
.star-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
.star-btn.is-on { color: var(--pt-gold, #C9A84C); }
.star-btn.is-on svg { fill: currentColor; }
.star-btn:active { transform: scale(.92); }
.star-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pt-info-bg); }
.star-label { font-size: 13px; font-weight: 700; color: var(--pt-ink); margin-left: 8px; }

/* The pin on My Ratings. Centred, because on this screen the mark is the
   subject rather than a detail beside a name. */
.twf-rv-pins { display: flex; justify-content: center; padding: 6px 0 14px; }

/* ============================================================================
   TURN ON NOTIFICATIONS  (2026-09-08)
   ----------------------------------------------------------------------------
   The one screen in the app that is allowed to be loud. Everything else is
   flat rows on a canvas; this one has a hero, because it is the difference
   between a shift offer reaching somebody and a shift offer sitting in a
   database until the event is over.
   ========================================================================= */
.twf-push-hero { text-align: center; padding: 26px 18px 22px; margin: 4px 0 18px;
  border-radius: 22px; background: var(--pt-canvas); }
.twf-push-hero.is-on   { background: var(--pt-ok-bg); }
.twf-push-hero.is-todo { background: var(--pt-info-bg); }
.twf-push-hero.is-off  { background: var(--pt-late-bg); }
.twf-push-mark { display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 24px; background: #fff; margin-bottom: 14px; }
.twf-push-hero.is-on   .twf-push-mark { color: var(--pt-ok); }
.twf-push-hero.is-todo .twf-push-mark { color: var(--pt-info); }
.twf-push-hero.is-off  .twf-push-mark { color: var(--pt-late); }
.twf-push-mark svg { width: 40px; height: 40px; }
.twf-push-hero-t { font-size: 24px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.3px; color: var(--pt-ink); margin-bottom: 8px; }
.twf-push-hero-s { font-size: 15px; line-height: 1.5; color: var(--pt-mute);
  max-width: 34ch; margin: 0 auto; }

/* The steps. Numbered, large, one instruction per line - this is read by
   somebody holding the phone they are being told to change. */
.twf-push-steps { list-style: none; counter-reset: twfstep; margin: 0; padding: 0; }
.twf-push-steps li { counter-increment: twfstep; position: relative;
  padding: 12px 0 12px 52px; min-height: 44px; }
.twf-push-steps li::before { content: counter(twfstep); position: absolute; left: 0; top: 10px;
  width: 34px; height: 34px; border-radius: 12px; background: var(--pt-navy); color: #fff;
  font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.twf-push-steps li b { display: block; font-size: 17px; font-weight: 700;
  color: var(--pt-ink); line-height: 1.3; }
.twf-push-steps li span { display: block; font-size: 14px; color: var(--pt-mute);
  line-height: 1.45; margin-top: 3px; }
.twf-push-steps-p { font-size: 16px; line-height: 1.55; color: var(--pt-ink); padding: 2px 2px 14px; }
.twf-push-note { text-align: center; font-size: 14px; color: var(--pt-mute); padding: 10px 12px 4px; }

/* The nudge that carries this screen everywhere else. */
.twf-push-nudge .l1 { color: var(--pt-late); }

/* ═══════════════════════════════════════════════════════════════
   PASSWORD FIELD: REVEAL + LIVE REQUIREMENT CHECKLIST
   2026-09-08 (M2)

   The wall people could not get through. The rule was stated once in 13px
   grey above the field, checked properly only on the server, and reported
   one failure at a time after a network round trip. On a phone, blind,
   between service, that is four or five attempts before somebody stops.

   Two additions. Show, because typing fourteen characters twice without
   seeing them is the actual failure. And a checklist that answers while
   they type rather than after they submit.
   ═══════════════════════════════════════════════════════════════ */

.twf-pwfield { position: relative; }

/* Sits inside the field's right edge. 44px tall so it is a real target, and
   padded off the edge so it never collides with the iOS strong-password key
   or a browser reveal control. */
.twf-pwreveal {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 44px;
  padding: 0 12px;
  background: none;
  border: 0;
  font: 600 13px/1 var(--font-body, 'DM Sans', sans-serif);
  color: var(--text-muted, #717378);
  cursor: pointer;
  border-radius: 8px;
}
.twf-pwreveal:hover { color: var(--navy, #0C1220); }
.twf-pwreveal:focus-visible { outline: 2px solid var(--gold, #C9A84C); outline-offset: 2px; }
.twf-pwreveal[aria-pressed="true"] { color: var(--navy, #0C1220); }

/* Room for the button so a long password never runs underneath it. */
.twf-pwfield .login-field { padding-right: 72px; }

/* No box. The checklist is text under a field, in the same flat idiom as
   every other list in the app - the rule reads as guidance, not as a second
   form the person has to fill in. */
.twf-pwmeter {
  margin: -6px 0 14px;
  text-align: left;
}

.twf-pwreq {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted, #717378);
  padding: 3px 0;
}
.twf-pwreq b { font-weight: 600; color: var(--navy, #0C1220); }

.twf-pwreq-mk {
  flex: 0 0 14px;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
}

/* Green only on satisfied. A checklist that is green before you have done
   anything teaches people to stop reading it. */
.twf-pwreq.is-on { color: var(--green, #2e7d32); }
.twf-pwreq.is-on b { color: inherit; }
.twf-pwreq.is-bad { color: var(--red, #c62828); }

/* ═══════════════════════════════════════════════════════════════
   STAFF HOME: THE STANDING LINE
   2026-09-08 (L4)

   Replaces a 24px-padded navy gradient card carrying a 44px glow-shadowed
   star glyph, the person's name at 28px, and a "Next Milestone" column.

   Standing is one fact. It does not need a billboard, and the name was
   already at the top of the screen in the header - the card printed it a
   second time, larger, twelve pixels below.

   Three stars and a label. Unrated shows three hollow ones and says "Not yet
   rated", because an absent rating is not a low rating.
   ═══════════════════════════════════════════════════════════════ */
.twf-hs-standing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 16px;
}
.twf-hs-stars { display: inline-flex; gap: 3px; line-height: 0; }
.twf-hs-star { color: rgba(12, 18, 32, .18); display: inline-flex; }
.twf-hs-star svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.twf-hs-star.is-on { color: var(--pt-gold, #C9A84C); }
.twf-hs-t {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pt-mute, #63604F);
}

/* ═══════════════════════════════════════════════════════════════
   THE SHIFT CHECK-IN WIZARD
   2026-09-08 (L4)

   Four screens a person runs at the top of every shift, often standing in a
   loading dock on a phone. Was eight drawn boxes: 2px-bordered event cards,
   bordered role buttons, a green-washed notice panel and bordered Back
   buttons. Rows and shelves now, same as everywhere else.
   ═══════════════════════════════════════════════════════════════ */
.twf-wz-head { padding: 2px 0 14px; }
.twf-wz-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pt-faint, rgba(12, 18, 32, .4));
  margin-bottom: 6px;
}
.twf-wz-h { font-size: 24px; line-height: 1.15; margin: 0 0 4px; color: var(--pt-navy, #0C1220); }
.twf-wz-sub { font-size: 14px; line-height: 1.5; margin: 0; color: var(--pt-mute, #63604F); }

.twf-wz-checks { margin: 4px 0 18px; }

/* A checkbox row is a target, not a tick with a caption beside it. 52px so a
   gloved thumb finds it. */
.twf-fchk--two label { align-items: flex-start; }
.twf-fchk--two span { display: block; }
.twf-fchk--two b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pt-navy, #0C1220);
}
.twf-fchk--two em {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.45;
  color: var(--pt-mute, #63604F);
}

/* ── Standing, as a one-line subtitle on a person's row ──────────────────
   2026-09-08. Position is not identity here: we cross-train and people work
   whatever the night needs. What was under names before this was a job title
   - "Banquet Server" as a pill in the directory, "role · venue" in the
   teammate picker, "name · Server" in the rate-your-crew list.
   Standing is the thing a person earned and keeps. */
.twf-std { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.twf-std-s { display: inline-flex; color: rgba(12, 18, 32, .20); }
.twf-std-s svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.twf-std-s.is-on { color: var(--pt-gold, #C9A84C); }
.twf-std--new {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--pt-faint, rgba(12, 18, 32, .42));
}

/* ── Settings, Security: the inline result messages ──────────────────────
   2026-09-08. Were two always-present divs toggled with style.display, both
   drawing a filled box. Hidden by default via a class now, so a re-render
   cannot leave one showing, and flat like everything else. */
.twf-pw-msg { display: none; margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; }
.twf-pw-msg.is-shown { display: block; }
.twf-pw-msg.is-bad { color: var(--pt-late, #9a1c1c); }
.twf-pw-msg.is-ok  { color: var(--pt-ok, #2e7d32); }

/* ── Hands up ──────────────────────────────────────────────────
   The screen where a manager commits a person to a night's work.
   It replaced a three-column grid inside a 1100px container whose
   third column - the Confirm button - collapsed to about forty
   pixels on a phone. The decision is the most consequential one a
   manager makes in this app and it was the hardest thing in it to
   tap. Everything here is sized for a thumb in a loading dock. */
/* 2026-09-10 (BB6c): the page is .twf-sp; the head is the pattern's h1 and
   sub. .twf-hu keeps only the bottom room. .twf-hu-head is gone. */
.twf-hu { padding-bottom: 96px; }

.twf-hu-ev { margin-top: 18px; }
.twf-hu-evh {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; background: none; border: 0;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.twf-hu-evh .m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.twf-hu-evh .l1 { font-size: 17px; font-weight: 700; color: var(--pt-ink, #0C1220); }
.twf-hu-evh .l2 { font-size: 13px; color: var(--pt-sub, #5A6478); }
.twf-hu-evh .chev { color: var(--pt-sub, #5A6478); font-size: 20px; }
.twf-hu-evh:active { background: rgba(12, 18, 32, .04); }

.twf-hu-why { padding: 0 16px 8px; font-size: 12px; line-height: 1.45; color: var(--pt-sub, #5A6478); }

/* The row is tall on purpose. A name, what they have earned, and why
   they sit where they sit - then one control that is impossible to miss. */
.twf-hu-row { align-items: center; min-height: 76px; padding-top: 12px; padding-bottom: 12px; }
.twf-hu-row .m { gap: 3px; }
.twf-hu-row .l3 { display: block; font-size: 12px; line-height: 1.4; color: var(--pt-sub, #5A6478); }
.twf-hu-row .twf-hu-flag { color: var(--pt-warn, #B45309); font-weight: 600; }
.twf-hu-row.is-on .l1 { color: var(--pt-sub, #5A6478); }
/* 2026-09-21: the rail override went with the hand-rolled initials it dressed;
   this row draws twfFace now, which the module sizes. */

/* 2026-10-02 (R1-requests): the primary green, white text. The olive with
   dark text read as a button that was switched off. */
.twf-hu-yes {
  flex-shrink: 0; min-height: 44px; min-width: 116px; padding: 0 18px;
  background: var(--pt-ok-pill, #0A7A53); color: #fff;
  border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.twf-hu-yes:active { transform: scale(.97); }
.twf-hu-yes:focus-visible { outline: 2px solid var(--pt-ink, #0C1220); outline-offset: 2px; }

@media (max-width: 400px) {
  .twf-hu-yes { min-width: 92px; padding: 0 12px; font-size: 14px; }
}

/* Reviews: Prototype 2.0 flat workspace with progressively disclosed feedback. */
.twf-review-hub{max-width:1120px;margin:0 auto;padding:24px 20px;color:var(--pt-ink);min-width:0}
.twf-review-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}
.twf-review-heading p,.twf-review-followup p{color:var(--pt-mute);font-size:14px;line-height:1.55;margin:8px 0 0}
.twf-review-heading .twf-pt-cta{flex-shrink:0}
.twf-review-tools{display:flex;align-items:center;gap:12px;margin:28px 0 20px;font-size:13px;color:var(--pt-mute)}
.twf-review-tools .twf-su-in{width:auto;min-width:150px}
.twf-review-tools .twf-pt-quiet{margin-left:auto}
.twf-review-hub .twf-pt-quiet{min-height:44px}
.twf-review-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:22px 0 28px;border-bottom:1px solid var(--pt-line)}
.twf-review-overview strong{display:block;font-size:36px;line-height:1.2;font-weight:650;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.twf-review-overview small{font-size:16px;color:var(--pt-mute);letter-spacing:0;font-weight:400}
.twf-review-overview span{display:block;color:var(--pt-mute);font-size:13px;margin-top:7px}
.twf-review-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:40px;margin-top:28px}
.twf-review-grid h2{font-size:18px;letter-spacing:-.3px;margin:0;font-weight:650}
.twf-review-grid h3{font-size:15px;margin:0 0 8px}
.twf-review-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.twf-review-section-title>span,.twf-review-byline{font-size:12px;color:var(--pt-mute);line-height:1.5}
.twf-review-entry{border-bottom:1px solid var(--pt-line);min-width:0}
.twf-review-entry summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;padding:17px 0;min-height:44px}
.twf-review-entry summary::-webkit-details-marker{display:none}
.twf-review-entry summary:focus-visible{outline:2px solid var(--pt-info);outline-offset:4px;border-radius:4px}
.twf-review-person{min-width:0;flex:1}.twf-review-person strong{display:block;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.twf-review-person>span{display:block;font-size:12px;color:var(--pt-mute);margin-top:5px;line-height:1.4;overflow-wrap:anywhere}
.twf-review-result{text-align:right;flex:0 0 auto;max-width:105px}.twf-review-result strong{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.twf-review-result>span{display:block;font-size:11px;line-height:1.4;margin-top:3px;color:var(--pt-mute)}
.twf-review-hub .good{color:var(--pt-ok)}.twf-review-hub .attention{color:var(--pt-late)}.twf-review-hub .neutral{color:var(--pt-ink)}
.twf-review-chevron{color:var(--pt-mute);font-size:20px;flex:0 0 16px;text-align:center;transition:transform .15s}
.twf-review-entry[open] .twf-review-chevron{transform:rotate(180deg)}
.twf-review-detail{padding:0 0 18px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}.twf-review-detail>p:not(.twf-review-byline){white-space:pre-wrap}
.twf-review-distribution{margin:20px 0}.twf-review-distribution>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--pt-ink)}
.twf-review-track{height:5px;background:var(--pt-line);border-radius:8px;overflow:hidden;margin-top:9px}.twf-review-track>span{display:block;height:100%;background:currentColor;border-radius:8px}
.twf-review-followup{border-top:1px solid var(--pt-line);padding-top:22px;margin-top:28px;margin-bottom:16px}.twf-review-followup .twf-pt-row{width:100%;margin-top:8px;text-align:left}
.twf-review-empty{padding:24px 0;color:var(--pt-mute);line-height:1.6}.twf-review-empty h2,.twf-review-empty h3{color:var(--pt-ink)}
@media(max-width:800px){.twf-review-grid{grid-template-columns:minmax(0,1fr);gap:30px}.twf-review-team{padding-top:24px;border-top:1px solid var(--pt-line)}}
@media(max-width:480px){.twf-review-hub{padding:20px 16px}.twf-review-heading{align-items:stretch;flex-direction:column;gap:18px}.twf-review-heading .twf-pt-cta{width:100%}.twf-review-tools{gap:8px;margin-top:22px}.twf-review-tools>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.twf-review-overview{gap:10px;padding-top:12px}.twf-review-overview strong{font-size:29px}.twf-review-overview span{font-size:11px}.twf-review-result{max-width:88px}.twf-review-entry summary{gap:8px}}
.twf-review-heading>div{flex:1;min-width:0}.twf-review-heading .twf-pt-cta{width:auto;min-width:170px;padding-left:24px;padding-right:24px}
.twf-review-tools .twf-pt-quiet{width:auto;padding:8px 18px;flex:0 0 auto}.twf-review-tools>label{flex-shrink:0}
@media(max-width:480px){.twf-review-heading .twf-pt-cta{width:100%}}
.twf-review-tools .twf-su-in{flex:0 1 180px}
.twf-review-activity,.twf-review-team{min-width:0}

/* ══ REVIEWS, FLAT (2026-09-16) ═══════════════════════════════════════════
   Reviews and its forms brought onto the Home/Shifts canvas: space groups
   content, lines do not; analytics tables become disclosures on a phone;
   the team list sorts and searches. Written by Codex as twf-review-polish.css
   (Build 80) and linked fifteenth of sixteen stylesheets; the tripwire in
   tests/design-tokens.test.js holds the render-blocking count at 15 and
   calls that a debt, so the rules live here instead, at the same cascade
   position (this sheet was linked immediately before that one), byte for
   byte. Nothing below was reworded. */
/* Reviews share Home/Shifts' flat canvas. Space groups content; lines do not. */
.twf-review-hub .twf-review-overview,.twf-review-hub .twf-review-entry,
.twf-review-hub .twf-review-followup,.twf-review-hub .twf-review-team{border:0}
.twf-review-hub{padding-top:8px}
.twf-review-entry{border:0;margin-bottom:8px}
.twf-review-entry summary{border-radius:12px;padding:14px 8px;gap:12px}
.twf-review-entry summary:hover{background:var(--pt-canvas)}
.twf-review-entry[open]{margin-bottom:20px}
.twf-review-entry[open] summary{background:var(--pt-canvas)}
.twf-review-detail{padding:8px 12px 16px}
.twf-review-sort-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--pt-mute);margin:0 0 14px}
.twf-review-sort-label .twf-su-in{width:auto;flex:0 1 180px;min-width:0}
.twf-review-team>.twf-pt-quiet{margin-top:10px}
.twf-review-analytics{max-width:1120px;margin:0 auto;min-width:0;color:var(--pt-ink);padding:8px 12px 32px}
.twf-review-back{width:auto!important;padding:8px 12px;min-height:44px;margin-bottom:18px}
.twf-review-analytics-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
.twf-review-analytics-heading>div{min-width:0}
.twf-review-analytics-heading>div:first-child>div:first-child{font-size:32px!important;font-weight:700!important;letter-spacing:-.7px;line-height:1.2}
.twf-review-analytics #perfWindowTabs{flex-wrap:wrap!important;flex-shrink:0;max-width:100%}
.twf-review-analytics #perfTabs{border:0;display:flex;flex-wrap:wrap;gap:6px;overflow:visible;margin-bottom:24px}
.twf-review-analytics #perfTabs .tab-item{border:0!important;border-radius:12px;min-height:44px;white-space:normal;padding:10px 14px}
.twf-review-analytics #perfTabs .tab-item.active{background:var(--pt-info-bg,#e7efff);color:var(--pt-info);box-shadow:none}
.twf-review-analytics .panel,.twf-review-analytics .kpi-card{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;min-width:0}
.twf-review-analytics .panel-header{border:0!important;padding:14px 0;gap:12px;flex-wrap:wrap}
.twf-review-analytics .panel-body{padding:12px 0!important;min-width:0}
.twf-review-analytics .panels{gap:32px}
.twf-review-analytics .kpi-grid{gap:20px;margin-bottom:28px!important}
.twf-review-analytics .kpi-card{padding:12px 0!important}
.twf-review-analytics .kpi-value{font-size:30px}
.twf-review-analytics th,.twf-review-analytics td,.twf-review-analytics tr{border:0!important;white-space:normal!important;overflow-wrap:anywhere}
.twf-review-analytics table{width:100%;table-layout:fixed;min-width:0!important}
.twf-review-analytics .data-table th{padding:12px 8px;background:transparent}
.twf-review-analytics .data-table td{padding:16px 8px}
.twf-review-analytics .data-table tbody tr{background:transparent!important}
.twf-review-analytics .data-table tbody tr:hover{background:var(--pt-canvas)!important}
.twf-review-analytics .badge{white-space:normal;max-width:100%}
.twf-review-people{min-width:0}
.twf-review-people-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,240px);gap:16px;margin:4px 0 14px}
.twf-review-people-tools label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--pt-mute);min-width:0}
.twf-review-people-tools .twf-su-in{width:100%;min-width:0}
.twf-review-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin:12px 0 20px}
.twf-review-facts>div{min-width:0}.twf-review-facts dt{font-size:12px;color:var(--pt-mute);text-transform:none;overflow-wrap:anywhere}
.twf-review-facts dd{margin:4px 0 0;font-size:14px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.twf-review-mobile-records{display:none}
/* The wrap and every embedded step keep the same flat container. */
.twf-wr{max-width:820px;margin:0 auto;min-width:0}
.twf-wr .twf-wr-body{margin-top:20px}
.twf-wr .twf-wr-why{background:transparent;padding:12px 0}
.twf-wr .panel,.twf-wr .panel-header,.twf-wr .panel-body{background:transparent!important;border:0!important;box-shadow:none!important}
.twf-wr input:not([type=checkbox]):not([type=radio]),.twf-wr select,.twf-wr textarea{font-size:16px!important;max-width:100%;min-width:0}
.twf-wr button{min-height:44px;max-width:100%;overflow-wrap:anywhere}
.twf-wr .twf-ex-rule,.twf-wr .twf-ex-fact,.twf-wr .twf-ex-rules{border:0!important;background:transparent!important;box-shadow:none!important}
.twf-co-surface{max-width:560px;margin:0 auto;min-width:0;background:transparent}
.twf-co-heading{padding:16px 0;color:var(--pt-ink)}
.twf-wr .twf-co-heading{display:none}
/* 2026-09-17: the callout screen's hero (date, hours, shift, venue) repeats
   the wrap's own header when it is the teammates step. */
.twf-wr .twf-review-callout-heading{display:none!important}
.twf-co-person{padding:12px 0 20px;text-align:center;background:transparent}
.twf-co-confirm{padding:16px 0;background:transparent}
.twf-co-person>.twf-staff-name{overflow-wrap:anywhere}
.twf-co-person [data-att],.twf-co-person .twf-co-star{min-width:0;min-height:52px}
.twf-review-hours{max-width:820px;margin:0 auto;padding:8px 0;min-width:0}
.twf-review-hours-row{background:transparent!important;border:0!important;border-radius:0!important;padding:16px 0!important;margin-bottom:12px!important}
/* decision V2-shift-screens: the phone rule label{display:block!important} (max-width 480px) put the box on a line of its own above the name; the row is a flex row again, box beside name, hours on the right; two classes outrank [style*=display:flex][style*=gap]{flex-wrap:wrap!important} */
.twf-review-hours .twf-review-hours-row label{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:12px;width:auto!important;min-width:0!important;flex:1 1 180px!important;overflow-wrap:anywhere}
.twf-review-hours-row{padding:12px 0!important;margin-bottom:8px!important}
.twf-review-hours-footer{position:static;padding:12px 0 8px;margin-top:8px;background:var(--pt-canvas,#f4f5f8)}
/* once a row is marked, the Verify button stays in reach above the bottom bar */
.twf-review-hours-footer.live{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px));z-index:2}
@media (max-width:768px){.twf-review-hours-footer.live{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
.twf-hv-nav{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.twf-hv-nav button{min-height:44px;padding:8px 14px;background:#fff;border:1px solid rgba(12,18,32,.14);border-radius:8px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--pt-ink,#0c1220)}.twf-hv-nav button:disabled{opacity:.45;cursor:not-allowed}
.twf-review-callouts{max-width:620px;margin:0 auto;padding:8px 0;min-width:0}
.twf-review-callouts #srSubmit{margin:14px 0 10px} /* 2026-10-08: the pattern button, with the room its inline style used to give it */
.twf-review-callout-heading{background:transparent!important;color:var(--pt-ink)!important;border-radius:0!important;padding:8px 0 20px!important}
.twf-review-callout-heading div{color:var(--pt-ink)!important}
.twf-review-personal .twf-pt-sh,.twf-review-personal .twf-pt-row{border:0!important}
@media(max-width:1000px){
 .twf-review-analytics-heading{flex-direction:column;gap:18px}
 .twf-review-analytics .twf-review-desktop-table{display:none}
 .twf-review-mobile-records{display:block;min-width:0}
 .twf-review-analytics .panel-body{overflow:visible!important}
 .twf-review-analytics .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:600px){
 .twf-review-hub{padding:8px 4px 24px}
 .twf-review-analytics{padding:8px 4px 24px}
 .twf-review-analytics .panels{grid-template-columns:minmax(0,1fr)!important}
 .twf-review-analytics #perfTabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .twf-review-analytics #perfTabs .tab-item{font-size:13px;text-align:center}
 .twf-review-analytics #perfWindowTabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
 .twf-review-analytics #perfWindowTabs button{min-width:0;min-height:44px}
 .twf-review-people-tools{grid-template-columns:minmax(0,1fr)}
 .twf-review-facts{gap:12px 16px}
 .twf-review-sort-label{align-items:flex-start;flex-direction:column;gap:6px}
 .twf-review-sort-label .twf-su-in{width:100%;flex:auto}
 .twf-wr .twf-wr-ask{font-size:23px}
 .twf-wr-rail{flex-wrap:wrap}
 .twf-wr .twf-sp-h{overflow-wrap:anywhere}
 .twf-co-surface>div{padding-left:0!important;padding-right:0!important}
}
.twf-review-mobile-controls{display:none}
.twf-review-analytics .twf-review-back{background:transparent;border:0;padding-left:0}
.twf-review-analytics #perfTabs .tab-item::after{display:none!important}
@media(max-width:1000px){.twf-review-analytics #perfContent table.twf-review-desktop-table{display:none!important}}
@media(max-width:600px){
 .twf-review-analytics #perfWindowTabs,.twf-review-analytics #perfTabs{display:none!important}
 .twf-review-mobile-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 24px}
 .twf-review-mobile-controls label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--pt-mute);min-width:0}
 .twf-review-mobile-controls select{width:100%;min-width:0;font-size:16px}
 .twf-review-people-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .twf-review-people-tools select{padding-right:22px}
}
.twf-review-self{padding:8px 0;max-width:900px;min-width:0}
.twf-review-self-pending{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:16px 0;background:transparent}
.twf-review-self-scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;font-size:12px;margin-bottom:8px}
#selfReviewOverlay,#upwardReviewOverlay{padding:16px!important;overflow-y:auto}
#selfReviewOverlay>div,#upwardReviewOverlay>div{padding:24px!important;max-height:calc(100dvh - 32px)!important;min-width:0;overscroll-behavior:contain}
#selfReviewOverlay button,#upwardReviewOverlay button{min-width:44px;min-height:44px}
#selfReviewOverlay input,#selfReviewOverlay textarea,#upwardReviewOverlay input,#upwardReviewOverlay textarea{font-size:16px!important;max-width:100%}
@media(max-width:400px){.twf-review-self-scores{grid-template-columns:repeat(2,minmax(0,1fr))}#selfReviewOverlay>div,#upwardReviewOverlay>div{padding:18px!important}}
.twf-co-progress{font-size:12px;color:var(--pt-mute);text-align:right;margin:0 0 12px}
.twf-wr .twf-wr-dot{width:7px;height:7px;border-radius:50%}
.twf-wr .twf-wr-why summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.twf-wr .twf-wr-why p{padding:0 0 12px;line-height:1.6}

/* ── THE SHIFT PAGE FOLD (2026-09-16) ──────────────────────────────────────
   Everything that is not the shift, the crew or an injury sits under one
   "More", the disclosure Home uses for past shifts. The chevron turns. */
.twf-sp-more{margin-top:14px}
.twf-sp-more>summary{list-style:none;cursor:pointer;min-height:44px;align-items:center}
.twf-sp-more>summary::-webkit-details-marker{display:none}
.twf-sp-more>summary .chev{display:inline-block;transition:transform .15s;color:var(--pt-mute)}
.twf-sp-more[open]>summary .chev{transform:rotate(90deg)}

/* 2026-09-17: the wrap hides its own Next while a crew card is up. The CTA
   class sets display:block, which beats the hidden attribute, so on the
   live card both Next buttons showed. The attribute wins here. */
.twf-wr .twf-wr-next[hidden]{display:none}

/* ── THE TEAMMATE CARD (2026-09-17) ──────────────────────────────────────
   Staff score a teammate on the four premiums; rows stay collapsed and one
   card opens at a time. .twf-scale is the shared Below / Met / Exceeded row
   (crew card, teammate card, self review, rate your lead). */
.twf-sr-row{display:flex;align-items:center;gap:11px;padding:12px 0;min-height:56px}
.twf-sr-row[data-open]{cursor:pointer}
.twf-sr-row.is-picked{background:rgba(201,168,76,.09)}
.twf-sr-row[aria-expanded=true]{padding-bottom:4px}
.twf-sr-card{padding:0 0 18px 45px}
.twf-scale button{min-width:0}
@media(max-width:600px){.twf-sr-card{padding-left:0}}

/* ── 44px TARGETS (2026-09-17, interface audit finding 5) ─────────────────
   Two controls measured under the floor: Add a team member in the People
   top bar (32px) and Add a photo under the Today avatar (26px). */
.twf-sp-top .twf-pe-add{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
/* 2026-09-28: gold like every other primary action; p-info blue made it the
   one blue button in a navy-and-gold app */
.twf-sp-top .twf-pe-add.twf-pt-pill{background:var(--action-primary);color:var(--action-primary-fg);font-size:13px;font-weight:700} /* 2026-10-07: an action is navy, not gold */
.twf-today-head button.cta{min-height:44px;padding:10px 14px;margin:-10px 0}

/* ── THE 17 SEPTEMBER AUDIT, POLISH (findings 6 to 10) ─────────────────── */
/* 7. Reviews: less air before the first row; the sort beside its heading. */
.twf-review-tools{margin:16px 0 12px}
.twf-review-overview{padding:14px 0 18px}
.twf-review-section-title .twf-review-sort-label{margin:0;flex:0 1 200px;min-width:0}
@media(max-width:480px){.twf-review-tools{margin-top:14px}.twf-review-overview{padding-top:8px}}
@media(max-width:600px){.twf-review-section-title .twf-review-sort-label{flex:0 1 170px}.twf-review-section-title .twf-review-sort-label .twf-su-in{width:100%}}
/* 8. More: groups that fold, with a count on the closed ones. */
.twf-more-group>summary .a{display:inline-flex;align-items:center;gap:8px}
.twf-more-group .twf-more-n{font-size:12px;color:var(--pt-mute);font-weight:600}
.twf-more-group[open] .twf-more-n{display:none}
/* 9. Documents: the binder catalogue folded under the library heading. */
.twf-doc-binders{margin:0 0 18px}
/* 9. Scheduled Reports as flat rows. */
.twf-rp-item{padding:14px 0 18px}
.twf-rp-name{font-size:15px;font-weight:700;color:var(--pt-ink)}
.twf-rp-when{font-size:12px;color:var(--pt-mute);margin-top:2px}
.twf-rp-scope{font-size:13px;color:var(--pt-mute);line-height:1.5;margin-top:8px}
.twf-rp-acts{display:flex;gap:8px;margin-top:12px}
.twf-rp-acts .twf-pt-quiet{width:auto;flex:1;min-height:44px;padding:0 14px}
/* 10. The brand line has no room in a phone header; the mark stays. */
/* 2026-10-08 (elevated Today): the brand line reads THE WILKINSON FIRM on a phone too; it fits beside the bell. */
/* 2026-09-17: Rename the shift, under More on the shift page. */

/* ── FORMS ON THE FLAT PAGE (2026-09-17) ──────────────────────────────────
   File a concern and Time off were the last two staff forms on the old
   boxed vocabulary. One grid, one label style, one input style. */
.twf-form{display:grid;gap:16px;max-width:640px;margin:8px 0 24px}
.twf-form-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.twf-form .twf-su-in{width:100%}
.twf-form textarea.twf-su-in{min-height:120px;resize:vertical;line-height:1.5}
.twf-check{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--pt-ink);min-height:44px;cursor:pointer}
.twf-check input{width:22px;height:22px;accent-color:var(--action-primary);flex-shrink:0}
.twf-grv-pending{flex-wrap:wrap;margin-top:8px}
.twf-pto-row{cursor:default}
.twf-pto-acts{display:flex;gap:8px;margin:-4px 0 14px}
.twf-pto-acts .twf-pt-quiet{width:auto;flex:1;min-height:44px}
@media(max-width:480px){.twf-form-2{grid-template-columns:1fr}}
.twf-grv,.twf-pto{min-width:0}
/* 2026-09-17: Referrals, Mentorship, Goals on the flat page. */
.twf-ref,.twf-mnt,.twf-goals{min-width:0}
.twf-ref-row{cursor:default}
.twf-row-acts{display:flex;gap:8px;margin:-4px 0 14px;flex-wrap:wrap}
.twf-row-acts .twf-pt-quiet{width:auto;flex:1 1 30%;min-height:44px}
/* 2026-10-02 (decision R3-growth-shell). Refer a friend: Mark paid fits its
   pill (the label ran past both edges of a 73px button); the person beside
   it takes the room that is left. */
.twf-ref-fee>.twf-person{flex:1 1 auto;min-width:0}
.twf-ref-fee .rr .twf-ref-pay{width:auto;min-height:44px;padding:0 16px;font-size:14px;white-space:nowrap}
/* the cities' goals on one line, Change goals in its heading, the city chips
   and the form under it; Show everyone in the hire picker */
.twf-ref-goals .l1{line-height:1.45}
.twf-ref-goal-edit{scroll-margin-bottom:96px}
.twf-ref-goal-edit .twf-pt-chips{margin:4px 0 10px}
.twf-ref-goal-edit .twf-form>.twf-pt-quiet{margin-top:8px}
.twf-ref-hire .twf-ref-hire-scope{margin:8px 0 2px}
.twf-ref-hire .twf-ref-hire-all{width:auto;min-height:44px;padding:0 16px;margin:6px 0 10px}
.twf-ref-hire select.twf-su-in{display:block;width:100%}
/* 2026-10-02 (decision G1-referral-game). The referrals to approve: each one
   a person and one line of context, Approve (the primary colour) beside Not right; the
   reason box takes the whole row. The progress bars sit on the page's own
   gutter; the push form reuses the goal form's spacing. Who referred you: the
   search results are rows to tap, the pick is marked, the two other answers
   are chips. */
.twf-ref-asks{margin:0 0 6px}
.twf-ref-ask .twf-row-acts{margin-top:2px}
.twf-ref-ask .twf-row-acts .twf-ref-approve{background:var(--pt-ok-pill,#0F7B4F);color:#fff;border-color:transparent;font-weight:800}
.twf-ref-ask .twf-row-acts .twf-su-in,.twf-ref-ask .twf-row-acts .twf-fl{flex:1 1 100%}
.twf-ref-ask .twf-person,.twf-ref-claim .m{min-width:0}
.twf-ref-claim .rr .twf-ref-claim-btn{width:auto;min-height:44px;padding:0 16px;white-space:nowrap}
.twf-ref-prog{padding-left:2px;padding-right:2px}
.twf-obref .twf-su-in{display:block;width:100%;box-sizing:border-box;margin-bottom:8px}
.twf-obref-list .twf-pt-row,.twf-obref-picked{width:100%;text-align:left}
.twf-obref-pick.on,.twf-obref-picked{background:rgba(201,168,76,.10);border-radius:12px}
.twf-obref-picked .rr{color:var(--pt-gold,#C9A84C)}
.twf-obref-or{margin:12px 0 6px}
.twf-obref-choices{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.twf-obref-change,.twf-obref .twf-ob-cta-ghost{margin-top:8px}
.twf-obref-skip{display:block;margin-left:auto;margin-right:auto}
/* Company's composer: a send button with nothing to send waits at the end of
   the form instead of floating over the Message box; once the title and the
   message are written it follows the thumb on a full-width band of the page
   colour, from 12px above it to the bottom of the screen, so it reads as the
   foot of the screen rather than a button laid over what is being written.
   The band is the button's own shadow, clipped: a shadow never widens the
   page, so nothing scrolls sideways. */
.twf-co .twf-co-send[disabled]{position:static;box-shadow:none}
/* and a field brought into view while typing stops clear of that foot */
.twf-co .twf-co-in,.twf-co .twf-su-note{scroll-margin-bottom:96px}
.twf-co .twf-co-send:not([disabled]){box-shadow:0 0 0 100vmax var(--pt-canvas,#F4F6FB);
  clip-path:inset(-12px -100vmax calc(-14px - env(safe-area-inset-bottom,0px)) -100vmax)}
/* ── SEND RECOGNITION IS A SCREEN (2026-09-17) ───────────────────────── */
.twf-rcg{min-width:0}
.twf-rcg-row.on{background:rgba(201,168,76,.10);border-radius:12px}
.twf-rcg-row .rail{font-size:12px;font-weight:700}
.twf-rcg-tiers{display:flex;gap:8px;margin:0 0 4px}
.twf-rcg-tier{flex:1;min-height:56px;border-radius:12px;border:1px solid #DDD8CC;background:#fff;font-family:inherit;cursor:pointer;color:var(--pt-ink);padding:8px 6px}
.twf-rcg-tier[aria-pressed=true]{border-color:#C9A84C;background:#FBF6E7}
.twf-rcg-tier .t{display:block;font-weight:700;font-size:14px}
.twf-rcg-tier .s{display:block;font-size:11.5px;color:var(--pt-mute);margin-top:2px}
.twf-rcg-tier[disabled]{opacity:.45;cursor:default}
.twf-rcg textarea.twf-su-in{width:100%;min-height:96px;line-height:1.5;resize:vertical}
.twf-rcg-count{font-size:12px;color:var(--pt-mute);text-align:right;margin:6px 0 14px}
.twf-rcg-preview{background:var(--pt-canvas);border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:13px;color:var(--pt-ink);line-height:1.5}
.twf-recognition-cta-primary{scroll-margin-top:80px}
/* ── THE LEADERBOARD, FLAT (2026-09-17) ───────────────────────────────── */
.twf-lb{min-width:0}
.twf-lb .twf-seg{margin:6px 0 4px}
.twf-lb-filters .twf-form{margin:4px 0 8px}
.twf-lb-you,.twf-lb-main{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0}
.twf-lb-you .rail,.twf-lb-main .rail{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.twf-lb-you .m,.twf-lb-main .m{flex:1;min-width:0}
.twf-lb-main .l1{display:block;font-size:15px;font-weight:700;color:var(--pt-ink);overflow-wrap:anywhere}
.twf-lb-main .l2,.twf-lb-you .l2{display:block;font-size:12px;color:var(--pt-mute);margin-top:2px}
.twf-lb-you .l1{display:block;font-size:14px;font-weight:700;color:var(--pt-ink)}
.twf-lb-star{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.twf-lb-star .n{font-size:12px;font-weight:700;color:var(--pt-ink)}
.twf-lb-toggle{width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:var(--pt-mute);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.twf-lb-toggle[aria-expanded=true]{transform:rotate(180deg);color:var(--pt-ink)}
.twf-lb-row.is-red .rail{box-shadow:inset 0 0 0 2px rgba(198,40,40,.35)}
.twf-lb-detail{padding:4px 0 18px 48px}
.twf-lb-cps{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.twf-lb-cps .k{font-size:11px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:var(--pt-mute)}
.twf-lb-cps strong{font-size:18px}
.twf-lb-k{font-size:11px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:var(--pt-mute);margin:10px 0 6px}
.twf-lb-bar{display:flex;align-items:center;gap:10px;font-size:12px;margin:0 0 5px}
.twf-lb-bar .k{width:84px;color:var(--pt-mute)}
.twf-lb-bar .track{flex:1;height:6px;background:rgba(12,18,32,.06);border-radius:3px;overflow:hidden}
.twf-lb-bar .track>span{display:block;height:100%;background:var(--pt-gold-stripe,#C9A84C)}
.twf-lb-bar .v{width:32px;text-align:right;font-weight:700;color:var(--pt-ink)}
.twf-lb-lanes{display:flex;flex-wrap:wrap;gap:6px}
.twf-lb-rates{font-size:12px;color:var(--pt-mute);margin:10px 0 12px;line-height:1.6}
.twf-lb-rates strong{color:var(--pt-ink)}
@media(max-width:480px){.twf-lb-detail{padding-left:0}}
/* 2026-09-17: the profile's goals and media sections, flat. */
.twf-check-2{align-items:flex-start;line-height:1.4}
.twf-check-2 input{margin-top:2px}
.twf-check-2 .twf-s01{display:block;color:var(--pt-mute);font-size:12px;margin-top:2px}
/* 2026-09-17: Awards and Timesheets on the flat page, on the one row. */
.twf-aw,.twf-ts{min-width:0}
.twf-aw-medal{display:inline-flex;width:36px;justify-content:center;flex-shrink:0}
.twf-aw-row .twf-lb-star,.twf-ts-row .twf-lb-star{display:inline-flex;align-items:center;gap:6px}
.twf-ts-row{cursor:default}
.twf-ts .twf-pt-quiet{margin-top:18px}
/* 2026-09-17: the fill-in request on the flat page. The lane's colour is the
   hero's rail and eyebrow, nothing else. */
.twf-fi{min-width:0;padding-bottom:24px}
.twf-fi-hero{--fi-accent:var(--pt-gold);border-left:4px solid var(--fi-accent);padding:6px 0 6px 14px;margin:4px 0 8px}
.twf-fi-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--fi-accent)}
.twf-fi-title{font-size:24px;font-weight:700;line-height:1.15;color:var(--pt-ink);margin-top:4px}
.twf-fi-sub{font-size:13px;color:var(--pt-mute);margin-top:4px;line-height:1.45}
.twf-fi-row{cursor:default}
.twf-fi-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.twf-fi-ico.ok{color:var(--pt-ok)}
.twf-fi-ico.late{color:var(--pt-late)}
.twf-fi-p{font-size:15px;line-height:1.5;color:var(--pt-ink);margin:0 0 8px}
.twf-fi-list{list-style:none;margin:0 0 8px;padding:0}
.twf-fi-list li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px;line-height:1.45;color:var(--pt-ink)}
.twf-fi-list li .twf-fi-ico{margin-top:2px}
.twf-fi-binder{margin-top:18px}
/* 2026-09-17: the Notifications and Reminders tabs, the SMS consent card, the
   Uniform request and the Mentorship thread on the flat vocabulary. */
.twf-notif-lead{margin:0 0 12px}
.twf-notif,.twf-rem{gap:4px}
.twf-notif .twf-check{padding:6px 0}
.twf-notif-l{display:block;font-weight:600}
.twf-notif-h{display:block;font-size:12px;color:var(--pt-mute);margin-top:2px}
.twf-notif .twf-pt-cta{margin-top:14px}
.twf-notif .twf-pt-quiet{margin-top:10px}
.twf-status-ok{color:var(--pt-ok);font-weight:600}
.twf-react-grid{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.twf-react-btn{min-width:48px;min-height:48px;font-size:22px;background:#fff;border:2px solid var(--pt-line);border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.twf-react-btn[aria-pressed=true]{border-color:#C9A84C;background:#FBF6E7}
.twf-sms{margin:0 0 24px}
.twf-sms .twf-check-2{padding:8px 0}
.twf-sms .twf-check-2 span{font-size:13px;line-height:1.55;color:var(--pt-mute)}
.twf-sms-need{color:var(--pt-late)}
.twf-sms-status{display:none;font-size:13px;font-weight:600;margin-top:8px}
.twf-sms-status.ok{display:block;color:var(--pt-ok)}
.twf-sms-status.err{display:block;color:var(--pt-late)}
.twf-sms a{color:var(--pt-gold)}
.twf-uni{min-width:0}
.twf-uni-row{cursor:default}
.twf-mnt-thread{min-width:0}
.twf-msgs{display:flex;flex-direction:column;gap:8px;max-height:52vh;min-height:160px;overflow-y:auto;padding:8px 0 12px}
.twf-msg{display:flex;flex-direction:column;align-self:flex-start;max-width:78%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--pt-canvas);color:var(--pt-ink)}
.twf-msg.own{align-self:flex-end;border-radius:16px 16px 4px 16px;background:#FBF6E7}
.twf-msg .who{font-size:11px;font-weight:700;color:var(--pt-mute);margin-bottom:2px}
.twf-msg .txt{font-size:15px;line-height:1.4;word-wrap:break-word}
.twf-msg .when{font-size:10.5px;color:var(--pt-faint);margin-top:4px;align-self:flex-end}
.twf-composer{display:flex;gap:8px;align-items:stretch;margin-top:4px}
.twf-composer-send{flex:0 0 auto;min-width:76px;min-height:52px;border:0;border-radius:14px;background:var(--pt-ink);color:#fff;font-weight:800;font-size:15px;font-family:inherit;cursor:pointer}
.twf-mnt-end{margin-top:18px}
/* 2026-09-17: the Action Required banner, the Documents library and the
   leadership Concerns queue on the flat vocabulary. */
.twf-ar{margin:0 0 20px}
.twf-ar-head{margin:0 0 4px}
.twf-ar-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--pt-warn)}
.twf-ar.sev-block .twf-ar-eyebrow{color:var(--pt-late)}
.twf-ar.sev-info .twf-ar-eyebrow{color:var(--pt-mute)}
.twf-ar-title{font-size:17px;font-weight:700;color:var(--pt-ink);line-height:1.3;margin-top:2px}
.twf-ar-sub{font-size:13px;color:var(--pt-mute);margin-top:2px}
.twf-ar-row{cursor:default}
.twf-ar-cta{flex-shrink:0;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--pt-ink);color:#fff;font-weight:800;font-size:13px;font-family:inherit;cursor:pointer}
.twf-docs{min-width:0}
.twf-docs-upload{margin:0 0 16px}
.twf-docs-clear{display:flex;align-items:center;gap:8px;color:var(--pt-ok);font-weight:600;margin:0 0 12px}
.twf-doc-row{cursor:default}
a.twf-doc-row,button.twf-doc-row{cursor:pointer;text-decoration:none;color:inherit}
.twf-doc-dl{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--pt-line);background:#fff;color:var(--pt-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.twf-doc-dl[disabled]{opacity:.55;cursor:default}
/* 2026-09-28: a signed copy is one row, the reader and the receipt download side by side (a button cannot hold a button) */
.twf-doc-open{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0;background:none;border:0;text-align:left;font-family:inherit;color:inherit;cursor:pointer}
.twf-doc-focus{box-shadow:inset 0 0 0 2px var(--pt-gold-stripe);border-radius:12px}
.twf-doc-lane .a{font-size:12px;color:var(--pt-mute);font-weight:600;text-transform:none;letter-spacing:0}
.twf-concerns{min-width:0}
.twf-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 16px}
.twf-stat{display:flex;flex-direction:column;min-width:0}
.twf-stat .v{font-size:22px;font-weight:800;color:var(--pt-ink);line-height:1.1;font-variant-numeric:tabular-nums}
.twf-stat .k{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pt-mute);margin-top:2px}
.twf-concerns-tools{align-items:end;margin:0 0 8px}
.twf-concerns-export{min-height:52px}
.twf-cn-row .rr{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.twf-cn-date{font-size:11px;color:var(--pt-faint)}
.twf-cn-detail{padding:4px 0 16px}
.twf-cn-facts{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:0 0 10px;font-size:13px}
.twf-cn-facts dt{color:var(--pt-mute);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.twf-cn-facts dd{margin:0;color:var(--pt-ink)}
.twf-cn-desc{font-size:15px;line-height:1.5;color:var(--pt-ink);margin:0 0 10px;white-space:pre-wrap}
.twf-cn-res{font-size:14px;line-height:1.5;color:var(--pt-ok);margin:0 0 10px}
.twf-cn-focus{box-shadow:inset 0 0 0 2px var(--pt-gold-stripe);border-radius:12px}
/* 2026-09-17: Review insights, the four tabs on the flat vocabulary. */
.twf-perf{min-width:0}
.twf-perf-content{min-height:200px}
.twf-perf-pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.twf-perf-pills-k{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pt-mute);margin-right:4px}
.twf-perf .twf-lb-bar .k{width:120px}
.twf-lb-bar .track>span.b-info{background:var(--pt-info)}
.twf-lb-bar .track>span.b-ok{background:var(--pt-ok-stripe)}
.twf-lb-bar .track>span.b-warn{background:var(--pt-warn)}
.twf-lb-bar .track>span.b-late{background:var(--pt-late-stripe)}
.twf-perf-hint{margin:-4px 0 8px}
.twf-perf-cps{font-size:12px;font-weight:700;color:var(--pt-ink);margin-left:6px}
.twf-perf-act{cursor:default}
.twf-perf-row{cursor:pointer}
.twf-cmp-head,.twf-cmp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--pt-line)}
.twf-cmp-head{font-weight:800;color:var(--pt-ink)}
.twf-cmp-head .f,.twf-cmp-row .f{text-align:right}
.twf-cmp-row .f,.twf-cmp-row .b{font-weight:700;font-size:16px;color:var(--pt-ink);font-variant-numeric:tabular-nums}
.twf-cmp-row .win{color:var(--pt-gold)}
.twf-cmp-row .l{font-size:12px;color:var(--pt-mute);text-align:center}
/* 2026-09-17: Certifications, Missed shifts and the Audit log on the flat page. */
.twf-cert,.twf-msa,.twf-audit{min-width:0}
.twf-stat-row-auto{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
.twf-cert-tools,.twf-msa-tools,.twf-audit-tools{margin-bottom:16px}
.twf-cert-tools .twf-row-acts{margin-top:0}
.twf-row-btns{display:inline-flex;gap:6px;flex-shrink:0}
.twf-row-btn{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--pt-line);background:#fff;color:var(--pt-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.twf-row-btn.danger{color:var(--pt-late)}
.twf-cert-row,.twf-audit-row{cursor:default}
.twf-msa-row .rail{font-size:12px;font-weight:800}
.twf-audit-export{min-height:52px}
/* 2026-09-17: the Operations hub on the flat page. */
.twf-ops{min-width:0}
.twf-ops-row .rail{font-size:12px;font-weight:800}
.twf-stat .s{font-size:11px;color:var(--pt-faint);margin-top:2px}
/* 2026-09-17: Live Events on the flat page. */
.twf-le{min-width:0}
.twf-le-event{margin-top:8px}
.twf-le-meta{margin:-4px 0 6px}
.twf-le-meta [data-person]{font-weight:600;color:var(--pt-ink)}
.twf-le-row .rail{display:inline-flex;align-items:center;justify-content:center}
.twf-le-lead{color:var(--pt-gold-stripe);vertical-align:middle}
.twf-le-open{cursor:default}
.twf-pt-row .rail.r-open{background:transparent;border:1.5px dashed var(--pt-warn);color:var(--pt-warn)}
/* 2026-09-17: the Pre-shift protocol on the flat page. */
.twf-psp{min-width:0}
.twf-psp-step{cursor:default}
.twf-psp-step .rail{font-size:12px;font-weight:800}
.twf-psp-step .l2{white-space:normal;line-height:1.4}
.twf-psp-form{margin-top:4px}
/* 2026-09-17: the Positions tab on the flat form. */
.twf-pos{gap:6px}
.twf-pos-row{display:grid;grid-template-columns:1fr 150px;gap:10px;align-items:center}
.twf-pos-row .twf-check{min-height:44px}
.twf-pos-row .twf-su-in{min-height:44px;font-size:16px;padding:0 10px;border-radius:var(--control-radius)}
.twf-pos .twf-pt-cta{margin-top:14px}
/* 2026-09-17: the Calendar on the flat page; the grid keeps its own rules. */
.twf-cal{min-width:0}
.twf-cal-nav{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.twf-cal-month{flex:1;text-align:center;font-size:17px;font-weight:800;color:var(--pt-ink)}
.twf-cal-today{width:auto;min-height:44px;padding:0 14px;font-size:14px}
.twf-cal .cal-grid{margin-top:4px}
.twf-cal .cal-legend{margin:10px 0 6px}
.twf-cal-row{cursor:default}
/* 2026-09-21: a tapped day opens a panel under the grid instead of a
   toast. The pop rules below are kept only because the legend still uses
   the dot; nothing builds a pop string any more. */
/* 2026-09-21: the Hands up screen names the shift it is about, so a
   manager arriving from one shift can tell it is still that shift. Reads
   as identity, above the sentence that reads as instruction. */
.twf-sp-sub.twf-hu-which{font-weight:700;color:#0C1220;margin-bottom:2px}
/* 2026-09-21: the queue proposes. Reads as a question the manager is
   being asked, not as a banner announcing a decision already taken. */
/* 2026-10-07: no gold-bordered cream box. The navy Accept all is the emphasis.
   2026-10-08 (flat iOS): no hairlines either; the proposal is a white grouped
   inset on the canvas, as the prototypes draw a group. */
.twf-hu-propose{border:0;background:var(--surface-1,#fff);border-radius:18px;padding:14px 16px;margin:10px 0 14px}
/* 2026-10-02 (P5-accept-all): the button first, where a manager looks
   first; who it puts on and why underneath. */
.twf-hu-propose-q{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:4px}
.twf-hu-propose-w{font-size:13px;color:var(--text-2);line-height:1.45}
.twf-hu-propose .twf-pt-cta{width:100%;margin:10px 0 8px}
.twf-hu-propose .twf-su-hint{margin-top:8px}
/* 2026-10-02 (P5-accept-all): people are waiting and nobody can be offered.
   One line where the button would be, so it is never missing silently. */
.twf-hu-held{border:1px solid rgba(180,83,9,.35);background:rgba(180,83,9,.06);border-radius:10px;padding:10px 14px;margin:10px 0 14px;font-size:14px;font-weight:600;line-height:1.4;color:var(--pt-warn,#B45309)}
.twf-sp-held{color:var(--pt-warn,#B45309);font-weight:600}
/* A first time in the role: a plain tag, not a warning. */
.twf-hu-tag{display:inline-block;font-size:11px;font-weight:700;line-height:1.5;padding:1px 8px;border-radius:999px;background:rgba(12,18,32,.06);color:var(--pt-ink,#0C1220)}
/* 2026-10-02 (R1-requests): each shift folded to what decides it. The
   names, Accept all, the counts, "How this works" folded, and "See N
   requests" opening the rows. */
.twf-hu-take.is-gone{text-decoration:line-through;color:var(--pt-sub,#5A6478)}
.twf-hu-how{margin-top:6px}
.twf-hu-how>summary{display:inline-block;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--pt-info,#1A5FC8);padding:6px 0}
.twf-hu-how>summary::-webkit-details-marker{display:none}
.twf-hu-how>p{margin:2px 0 0;font-size:13px;line-height:1.45;color:#6B6558}
.twf-hu-ev>.twf-hu-how{padding:0 16px}
.twf-hu-reqs>summary{list-style:none}
.twf-hu-reqs>summary::-webkit-details-marker{display:none}
.twf-hu-more{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:4px 0 6px;padding:0 16px;border-radius:10px;background:rgba(12,18,32,.05);font-size:14px;font-weight:700;color:var(--pt-ink,#0C1220);cursor:pointer;-webkit-tap-highlight-color:transparent}
.twf-hu-more::after{content:'\203A';font-size:20px;line-height:1;color:var(--pt-sub,#5A6478);transform:rotate(90deg)}
.twf-hu-reqs[open]>.twf-hu-more::after{transform:rotate(-90deg)}
.twf-hu-more .o{display:none}
.twf-hu-reqs[open]>.twf-hu-more .o{display:inline}
.twf-hu-reqs[open]>.twf-hu-more .c{display:none}
.twf-hu-seeall{display:inline-block;margin-top:8px;padding:6px 0;font-size:13px;font-weight:600}
.twf-sp-propose{margin:12px 0 14px}
/* the record and this role, on one line */
.twf-hu-row .twf-hu-stats .twf-hu-tag{vertical-align:baseline}
/* the counts an answer changes in place keep their width steady */
.twf-hu-wait{white-space:nowrap;font-variant-numeric:tabular-nums}
.twf-sp-sub.twf-hu-count{font-variant-numeric:tabular-nums}
.twf-hu-nw{white-space:nowrap}
/* 2026-10-02 (R1-requests): an answered row stays where it was, marked,
   until the next refresh; the card takes no taps while it settles. */
.twf-hu-row.is-answered .m{opacity:.6}
.twf-hu-ev.is-settling,.twf-hu-ev.is-busy{pointer-events:none}
/* Week rows: requests waiting open them; a second ask is armed first. */
.twf-wk-asked{flex-shrink:0;min-height:44px;padding:0 14px;border:1px solid rgba(154,84,9,.35);border-radius:var(--radius-pill,999px);background:var(--pt-warn-bg,#FEF1DE);color:var(--pt-warn,#935108);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.twf-wk-asked:active{transform:scale(.97)}
.twf-wk-ask.armed{max-width:138px;white-space:normal;line-height:1.2;font-size:13px;padding:6px 12px;border-color:var(--pt-warn,#935108);color:var(--pt-warn,#935108)}
/* 2026-09-21: the name wrapper is a door, and must not disturb a line.
   display:contents would drop it from the box tree entirely, which also
   drops the hit target, so it is an inline span that inherits everything. */
.twf-nm{display:inline;font:inherit;color:inherit}
/* the door is not a decoration: no underline, no colour shift, because a
   name that looks like a link in ninety places would read as ninety
   links. The affordance is the hold, and the contact sheet is the reward. */
.twf-nm{-webkit-tap-highlight-color:transparent}
.twf-cal-day-panel{margin:10px 0 2px}
.twf-cal-day-panel:empty{display:none}
/* the day you are reading, marked on the grid you tapped it from */
.cal-day.is-open{outline:2px solid #C9A84C;outline-offset:-2px;border-radius:6px}
/* a fact on a day is not a door, so it does not look like one */
.twf-pt-row.twf-pt-quiet-row{cursor:default;opacity:.75}
.twf-cal-pop-h{font-weight:800;font-size:15px;margin:0 0 8px}
.twf-cal-pop-i{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px}
.twf-cal-pop-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
/* 2026-09-17: Payroll on the flat page. */
.twf-pay{min-width:0}
.twf-pay .twf-seg{margin:4px 0 14px}
.twf-pay-row{cursor:default}
.twf-pay-row .rail{font-size:12px;font-weight:800}
.twf-pay-bars{margin:0 0 8px}
.twf-pay .twf-lb-bar .k{width:96px}
.twf-pay .twf-lb-bar .v{width:auto;min-width:56px}
.twf-pay-total{display:flex;justify-content:space-between;align-items:center;padding:10px 0 4px;font-size:15px;color:var(--pt-ink)}
/* 2026-09-17: Admin on the flat page. */
.twf-admin{min-width:0}
.twf-adm-tool{cursor:pointer;text-decoration:none;color:inherit}
.twf-adm-form{margin:0 0 12px}
.twf-adm-msg:empty{display:none}
.twf-adm-user{cursor:default}
.twf-adm-user .l1 .twf-pt-pill{margin-left:6px;vertical-align:middle}
.twf-adm-fact{cursor:default}
.twf-adm-fact .l2{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pt-mute)}
.twf-adm-ann{padding:12px 0;border-bottom:1px solid var(--pt-line)}
.twf-adm-ann-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.twf-adm-ann-h .t{font-weight:700;font-size:15px;color:var(--pt-ink)}
.twf-adm-ann-b{font-size:14px;line-height:1.5;color:var(--pt-ink);margin:4px 0 0;white-space:pre-wrap}
.twf-adm-ann-d{font-size:11px;color:var(--pt-faint);margin-top:4px}
/* 2026-09-17: Workforce intel on the flat page. */
.twf-wf{min-width:0}
.twf-wf-row .rail{font-size:11px;font-weight:800}
.twf-wf-row .l2{white-space:normal;line-height:1.35}
.twf-wf-bars{margin:0 0 8px}
.twf-wf .twf-lb-bar .k{width:150px}
.twf-wf .twf-lb-bar .v{width:auto;min-width:28px}
/* 2026-09-18: the classic shift form on the flat vocabulary. */
.twf-cls{min-width:0}
.twf-cls .twf-form{margin-bottom:8px}
.twf-cls-tier{grid-template-columns:1fr 1fr;margin:4px 0 6px}
.twf-cls-tier .s{white-space:normal;line-height:1.35}
.twf-cls-time{cursor:default}
.twf-cls-time .rail{font-size:12px;font-weight:800}
.twf-cls-pos{padding:10px 0;border-bottom:1px solid var(--pt-line)}
.twf-cls-pos-line{display:grid;grid-template-columns:1fr 72px 1fr 44px;gap:8px;align-items:center}
.twf-cls-pos-line .twf-su-in{min-height:44px;font-size:16px;padding:0 10px;border-radius:var(--control-radius)}
.twf-cls-noms{margin-top:10px}
.twf-cls-nom{display:grid;grid-template-columns:1fr 44px;gap:8px;align-items:center;margin:6px 0}
.twf-cls-nom .twf-su-in{min-height:44px;font-size:16px;padding:0 10px;border-radius:var(--control-radius)}
.twf-cls-add,.twf-cls-add-nom{margin-top:10px}
.twf-cls-add-nom{min-height:44px;font-size:14px}
.twf-cls .twf-pt-cta{margin-top:18px}
@media (max-width:480px){.twf-cls-pos-line{grid-template-columns:1fr 64px 44px}.twf-cls-pos-line .sh-pos-hold{grid-column:1 / -1}}

/* the wrapped banner on the shift page (2026-09-18) */
.twf-sp-wrapped{margin:6px 0 10px;padding:12px 14px;border-radius:var(--radius-md);background:var(--pt-canvas);border-left:4px solid var(--pt-gold-stripe)}
.twf-sp-wrapped .t{font-size:15px;font-weight:700;color:var(--pt-ink)}
.twf-sp-wrapped .s{font-size:13px;color:var(--pt-mute);margin-top:2px;line-height:1.5}

/* my goals and growth, on the profile (2026-09-18) */
.twf-pf-goals{margin:0 0 4px}
.twf-pf-goalcard{padding:4px 0 8px}
.twf-pf-goal{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--pt-line)}
.twf-pf-goal .k{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--pt-mute);font-weight:700}
.twf-pf-goal .v{font-size:15px;line-height:1.5;color:var(--pt-ink);white-space:pre-wrap}
.twf-pf-goal-none{color:var(--pt-mute);font-style:italic}
.twf-pf-goalcard .twf-pt-cta{margin-top:12px}

/* the timeline section of the event page (2026-09-18) */
.twf-tl-stages{display:flex;width:100%;margin:2px 0 6px}
.twf-tl-stages .twf-seg-btn{flex:1;min-height:44px}
.twf-tl-stages .twf-seg-btn.twf-tl-done:not(.active){color:var(--pt-ok-stripe)}
.twf-tl-sub{margin:0 0 10px}
.twf-tl-stats{margin-bottom:8px}
.twf-tl-prep{padding:10px 0;border-bottom:1px solid var(--pt-line)}
.twf-tl .rail.r-info:not(:has(svg)){font-size:10px;font-weight:800;letter-spacing:.4px}
.twf-tl-who{font-weight:400;color:var(--pt-mute)}
.twf-tl-trig .l2{font-style:italic}

/* the war room section of the event page (2026-09-18) */
.twf-wr-stats{margin-bottom:8px}
.twf-wr .twf-stat.ok .v{color:var(--pt-ok-stripe)}
.twf-wr .twf-stat.warn .v{color:var(--pt-warn)}
.twf-wr .twf-stat.late .v{color:var(--pt-late-stripe)}
.twf-wr-exc .l2{white-space:normal}
.twf-wr-when,.twf-tl-act .twf-tl-who{color:var(--pt-faint)}

/* policy triggers (2026-09-18) */
.twf-trg-stats{margin-bottom:6px}
.twf-trg-filter{display:flex;width:100%;margin:0 0 6px}
.twf-trg-filter .twf-seg-btn{flex:1;min-height:44px}
.twf-trg-row{padding-bottom:6px;border-bottom:1px solid var(--pt-line)}
.twf-trg-row .twf-pt-row{border-bottom:0}
.twf-trg-why{font-style:italic;margin:0 0 6px 56px}
.twf-trg-row .twf-row-acts{margin-left:56px}
.twf-trg-who{font-weight:400;color:var(--pt-mute)}
.twf-trg .twf-stat.late .v{color:var(--pt-late-stripe)}
.twf-trg .twf-stat.ok .v{color:var(--pt-ok-stripe)}

/* the chat bubble's menu and reply link (2026-09-18) */
/* 2026-09-28: the strip starts at the bubble's inner edge and grows toward
   the middle of the pane: theirs from the left, mine from the right. It was
   the other way round, so on a short message it ran off the pane's edge and
   its last buttons could not be reached (mine "ok": only Reply). */
.twf-msg-menu{position:absolute;top:-20px;left:-8px;right:auto;display:none;align-items:center;background:#fff;border:1px solid var(--pt-line);border-radius:24px;padding:2px 4px;box-shadow:0 2px 8px rgba(12,18,32,.10);z-index:5}
.twf-msg-menu.me{left:auto;right:-8px}
/* 2026-09-28: 40px, up from 32 ("too small to tap on reliably") */
.twf-msg-mi{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 6px;background:none;border:0;border-radius:20px;cursor:pointer;color:var(--pt-ink)}
.twf-msg-mi svg{width:15px;height:15px}
.twf-msg-mi:active{background:rgba(12,18,32,.06)}
.twf-msg-mi.danger{color:var(--pt-late-stripe)}
.twf-msg-mi.on{color:var(--pt-gold-stripe)}
.twf-msg-replies{display:inline-flex;align-items:center;min-height:36px;margin-top:0;font-size:13px;font-weight:600;color:var(--gold-on-white);background:none;border:0;cursor:pointer;padding:0 8px}

/* reaction chips (2026-09-28): one height, centred, a 44px tap area.
   The pill sits 10px over the bubble's foot, so its extra tap area goes
   below it, never up into the words: grown both ways it took a third of the
   taps on a one-line bubble and on a link in its last line. min-height:0
   because the phone rule button{min-height:44px} drew it as a 44px box. No
   z-index: the pill still paints over its own bubble (it is positioned, the
   bubble is not), and the next message paints over the tap area, so a tap
   on that message is that message's. */
.twf-rx-row{display:flex;flex-wrap:wrap;gap:10px 6px;margin-top:-10px;padding:0 8px;position:relative}
.twf-rx-row.me{justify-content:flex-end}
.twf-rx{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:28px;min-height:0;min-width:36px;padding:0 9px;border-radius:14px;background:#fff;border:1.5px solid var(--pt-line);box-shadow:0 1px 2px rgba(17,29,59,.10);font:inherit;font-size:13px;line-height:1;color:var(--pt-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s ease-out}
.twf-rx::before{content:'';position:absolute;inset:0 -3px -16px}
.twf-rx-row + .twf-msg-replies{margin-top:16px}
.twf-rx.me{background:var(--pt-info-bg);border-color:var(--pt-info-stripe);color:var(--pt-info)}
.twf-rx .e{font-size:15px;line-height:1}
.twf-rx .n{font-weight:700;font-variant-numeric:tabular-nums}
.twf-rx:active{transform:scale(.92)}

/* The message sheet (2026-09-28). Hold a message, or right-click it on a
   desktop: the reactions as 44px targets, then every action as a row. On a
   phone the hover strip is not drawn at all; a tap used to raise it as a
   sticky hover, six small icons over the words. Holding a message to act on
   it is left to the sheet, so the text in a bubble does not also start a
   selection under the same finger (Copy is in the sheet). */
@media (hover:none){
  .twf-msg-menu{display:none !important}
  .twf-chat-msg .twf-bubble{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}
.twf-chat-msg.is-gone{display:none !important}
/* a hidden message that carried its sender's name keeps just the name while
   the rest of that run is on screen (_twfChatKeepNames, twf-chat.js) */
.twf-chat-msg.is-gone.keep-name{display:flex !important;margin-bottom:0 !important}
.twf-chat-msg.is-gone.keep-name > :not(.twf-chat-sender){display:none !important}
.twf-msheet{position:fixed;inset:0;z-index:10020;display:flex;align-items:flex-end;justify-content:center}
.twf-msheet-bd{position:absolute;inset:0;background:rgba(17,29,59,.45);opacity:0;transition:opacity .18s}
.twf-msheet-card{position:relative;width:100%;max-width:520px;box-sizing:border-box;background:#fff;border-radius:22px 22px 0 0;padding:6px 12px calc(12px + env(safe-area-inset-bottom,0px));transform:translateY(24px);opacity:0;transition:transform .22s ease,opacity .18s;color:var(--pt-ink);outline:none;touch-action:pan-x}
.twf-msheet.open .twf-msheet-bd{opacity:1}
.twf-msheet.open .twf-msheet-card{transform:none;opacity:1}
.twf-msheet-grab{width:36px;height:5px;border-radius:3px;background:var(--pt-line);margin:4px auto 8px}
.twf-msheet-rx{display:flex;justify-content:space-between;gap:4px;padding:2px 0 10px;border-bottom:1px solid var(--pt-line)}
.twf-msheet-e{flex:1 1 0;min-width:44px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:26px;line-height:1;background:none;border:0;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s ease-out}
.twf-msheet-e.on{background:var(--pt-info-bg)}
.twf-msheet-e:active{transform:scale(.9)}
.twf-msheet-list{display:flex;flex-direction:column;padding-top:6px}
.twf-msheet-row{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 10px;background:none;border:0;border-radius:12px;font:inherit;font-size:17px;color:var(--pt-ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.twf-msheet-row svg{width:20px;height:20px;flex-shrink:0;color:var(--pt-faint)}
.twf-msheet-row:active{background:rgba(12,18,32,.06)}
.twf-msheet-row.danger,.twf-msheet-row.danger svg{color:var(--pt-late-stripe)}
@media (min-width:769px){.twf-msheet{align-items:center}.twf-msheet-card{border-radius:22px;padding-bottom:12px}}
@media (prefers-reduced-motion:reduce){.twf-msheet-bd,.twf-msheet-card,.twf-msheet-e{transition:none}.twf-msheet-card{transform:none}}

/* A toast's one action (showToast opts.action, 2026-09-28): Undo, after a
   chat message is deleted. Gold on the navy info toast, 44px to hit. */
.toast-container .toast-action{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:auto;padding:0 12px;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;pointer-events:auto;white-space:nowrap}
.toast-container .toast--info .toast-action{color:var(--gold,#C9A84C)}
.toast-container .toast-action + .toast-close{margin-left:0}

/* the install nudge (2026-09-18) */
.twf-install-nudge{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 80px);z-index:var(--z-float);display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md);background:var(--pt-ink);color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.twf-install-nudge .rail{width:36px;height:36px;border-radius:50%;background:rgba(201,168,76,.18);color:var(--pt-gold-stripe);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.twf-install-nudge .m{display:flex;flex-direction:column;min-width:0;flex:1}
.twf-install-nudge .t{font-weight:700;font-size:14px;line-height:1.2}
.twf-install-nudge .s{font-size:12px;color:rgba(255,255,255,.7);margin-top:2px;line-height:1.4}
.twf-install-nudge .a{display:flex;gap:6px;flex-shrink:0}
.twf-install-nudge .twf-pt-cta,.twf-install-nudge .twf-pt-quiet{width:auto;margin:0;padding:10px 14px;min-height:44px;font-size:13px}
.twf-install-nudge .twf-pt-quiet{color:rgba(255,255,255,.85);background:transparent;border:1px solid rgba(255,255,255,.3)}
/* 2026-10-07: the primary is navy and so is the nudge, so here it is the
   inverse pair (white, navy words), in every state */
#twfInstallNudge .twf-pt-cta,#twfInstallNudge .twf-pt-cta:hover,#twfInstallNudge .twf-pt-cta:active{background:var(--action-on-dark);color:var(--action-on-dark-fg);box-shadow:none}
#twfInstallNudge .twf-pt-quiet:active{background:rgba(255,255,255,.12)}
@media (max-width:480px){.twf-install-nudge{flex-wrap:wrap}.twf-install-nudge .a{width:100%;justify-content:flex-end}}

/* the compact Action Required banner's second button, and the privacy line (2026-09-18) */
.twf-ar-more{margin:-6px 0 12px}
.twf-privacy-line{margin:8px 0 16px;padding:10px 14px;background:rgba(12,18,32,.03);border-left:3px solid rgba(12,18,32,.2);border-radius:6px;font-size:12px;color:var(--pt-ink);line-height:1.5}
.twf-privacy-line strong{font-weight:700}

/* the soft agreements banner and the badge detail glyph (2026-09-18) */
.twf-agr-soft{position:relative;z-index:90;padding:4px 16px 0;background:var(--pt-canvas);border-bottom:1px solid var(--pt-line)}
.twf-agr-soft .twf-action-required{margin:8px 0 10px}
.twf-agr-soft-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--pt-mute);font-size:20px;line-height:1;cursor:pointer}
.twf-bdm-ic{width:56px;height:56px;border-radius:14px;background:rgba(201,168,76,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--pt-gold-stripe)}

/* recognition (2026-09-18) */
.twf-rc-standing{margin-bottom:10px}
.twf-rc-lead .k{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--pt-mute)}
.twf-rc .twf-recognition-cta-primary{margin:4px 0 12px}
.twf-rc-wallet{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:4px 0 10px}
.twf-rc-badge{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:var(--pt-canvas);border:0;border-radius:var(--radius-md);cursor:pointer;color:var(--pt-ink);font:inherit;min-height:44px}
.twf-rc-badge .n{font-size:11px;font-weight:700;line-height:1.2;text-align:center}
.twf-rc-badge .c{position:absolute;top:4px;right:4px}
.twf-rc-rank{font-size:14px;font-weight:800}
.twf-rc-what{font-weight:400;color:var(--pt-mute)}
.twf-rc-feed .l2 q{font-style:italic;quotes:'\201C' '\201D'}

/* client intel (2026-09-18) */
.twf-ci-stats{margin-bottom:8px}
.twf-ci .twf-stat.ok .v{color:var(--pt-ok-stripe)}
.twf-ci .twf-stat.warn .v{color:var(--pt-warn)}
.twf-ci .twf-stat.late .v{color:var(--pt-late-stripe)}
.twf-ci-code{font-size:11px;font-weight:800;letter-spacing:.4px}
.twf-ci-sum .chev{transition:transform .15s}
.twf-ci-sum.on .chev{transform:rotate(90deg)}
.twf-ci-detail{padding:0 0 8px 12px;border-left:2px solid var(--pt-line);margin:0 0 8px 20px}
.twf-ci-fact .l1{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--pt-mute)}
.twf-ci-fact .l2{color:var(--pt-ink);font-size:14px}
.twf-ci-note{font-style:italic}
.twf-ci-scores{margin-bottom:4px}
.twf-ci-venue{margin-bottom:2px}
.twf-ci-contact .l2 a{font-size:13px}

/* the context chip, the tour tooltip, the activity rail (2026-09-18) */
.twf-ctx-chip{font-size:10px;letter-spacing:.2px;white-space:nowrap}
.twf-spot-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.twf-spot-ic{width:44px;height:44px;border-radius:12px;background:var(--pt-ink);color:var(--pt-gold-stripe);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}
.twf-spot-m{display:flex;flex-direction:column;min-width:0}
.twf-spot-t{font-weight:800;font-size:17px;color:var(--pt-ink);line-height:1.2}
.twf-spot-n{font-size:11px;color:var(--pt-mute);margin-top:2px}
.twf-spot-p{font-size:13.5px;color:var(--pt-ink);line-height:1.6;margin:0 0 14px}
.twf-spot-acts{display:flex;gap:8px;align-items:center}
.twf-spot-acts .twf-pt-cta{flex:1;margin:0}
.twf-spot-acts .twf-pt-quiet{width:auto;margin:0;padding:10px 12px}
.twf-act-wrap{position:relative;padding-left:18px}
.twf-act-line{position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--pt-line)}
/* 2026-09-28: on a phone the strip carries Add a team member; the page's own
   copy is for wide screens only */
@media (max-width: 900px) { .twf-sp-top .twf-pe-add.twf-wide-only { display: none } }
/* 2026-09-28: shift requests, two final answers per person */
.twf-hu-acts{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.twf-hu-no{min-height:40px;padding:0 12px;border-radius:10px;border:1px solid rgba(12,18,32,.14);background:transparent;color:rgba(12,18,32,.7);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.twf-hu-no.armed{border-color:var(--pt-late,#C0392B);color:var(--pt-late,#C0392B)}
/* 2026-10-02 (R1-requests): the answers keep one width, so "Tap again to
   tell them" wraps inside the row instead of pushing the row's text over. */
.twf-hu-acts{width:116px}
.twf-hu-acts>button{width:100%;min-width:0}
.twf-hu-no.armed{white-space:normal;line-height:1.25;min-height:44px;padding:4px 8px}
.twf-hu-acts>.twf-hu-done{align-self:center;white-space:nowrap}
@media (max-width:400px){.twf-hu-acts{width:104px}.twf-hu-no{padding:0 8px}}
.twf-hu-row.is-busy{opacity:.55;pointer-events:none}
/* the experience chip is nowrap everywhere; beside two answer buttons it ran under Assign */
.twf-hu-row .twf-xp{white-space:normal;flex-wrap:wrap;max-width:100%}
.twf-hu-on summary{cursor:pointer;list-style:none}
/* 2026-09-28: twfAlive, the big moments. A check that draws itself; gold burst on full and wrap */
.twf-alive{position:fixed;left:50%;top:42%;width:72px;height:72px;margin:-36px 0 0 -36px;z-index:10050;pointer-events:none;animation:twfAliveIn .95s ease forwards}
.twf-alive.is-big{width:92px;height:92px;margin:-46px 0 0 -46px;animation-duration:1.5s}
.twf-alive svg{position:relative;width:100%;height:100%;border-radius:50%;background:#0C1220;box-shadow:0 10px 30px rgba(12,18,32,.3)}
.twf-alive .r{fill:none;stroke:#C9A84C;stroke-width:3;stroke-dasharray:145;stroke-dashoffset:145;animation:twfAliveDraw .42s ease-out forwards}
.twf-alive .c{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:twfAliveDraw .26s .2s ease-out forwards}
.twf-alive i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#C9A84C;opacity:0;animation:twfAliveBurst .75s .28s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes twfAliveDraw{to{stroke-dashoffset:0}}
@keyframes twfAliveIn{0%{transform:scale(.6);opacity:0}14%{transform:scale(1.06);opacity:1}24%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(.96)}}
@keyframes twfAliveBurst{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.4)}}
@media (prefers-reduced-motion:reduce){.twf-alive{display:none}}
/* 2026-09-29: the shift flow in fewer taps. The answer lands on the card
   (You're on, Declined, Called out), a request and a withdrawal carry Undo,
   and Running late sends on the time tap. */
.twf-offer-on{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;margin-top:6px;border-radius:var(--radius-lg,14px);background:var(--pt-ok-bg,#DCF6EC);color:var(--pt-ok,#07704B);font-size:16px;font-weight:800}
.twf-offer-on.no{background:var(--pt-late-bg,#FDECEA);color:var(--pt-late,#C0392B)}
.twf-offer-on .twf-i{flex-shrink:0}
.twf-offer.is-no .twf-arrive,.twf-offer.is-no .twf-venue-photo{opacity:.5}
.twf-offer .twf-stdc{margin-top:4px}
.twf-offer .twf-ask-more{margin:4px 0 0;padding:12px;border-radius:14px}
.twf-offer .twf-ask-more .q{font-size:13px}
.twf-ms-item.is-no .stripe{background:var(--pt-late-stripe,#C0392B)}
.twf-req-state{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:10px;color:var(--pt-ok,#07704B);font-size:14px;font-weight:800}
.twf-req-state:empty{display:none}
.twf-pt-card.is-withdrawn{opacity:.55}
.twf-late-note{font-size:13px;color:var(--pt-mute,rgba(12,18,32,.62));font-weight:600;margin:0 0 10px}
.twf-late-etas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.twf-late-eta{min-height:48px;padding:0 6px;border-radius:12px;border:2px solid var(--pt-line,rgba(12,18,32,.12));background:#fff;color:var(--pt-ink,#0C1220);font:inherit;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
.twf-late-eta.on{border-color:var(--pt-navy,#0C1220);background:var(--pt-navy,#0C1220);color:#fff}
/* the optional reason sits above the times it rides with (one report) */
.twf-late-whys{margin:0 0 16px}
/* no Next shift tile while a shift card shows it: three tiles, the first full width */
.twf-pt-grid.is-three>.twf-pt-stat:first-child{grid-column:1/-1}
/* 2026-09-29: a person's number, one hold away (openContactSheet). For
   leadership, Call and Text come first, side by side, with the number under
   the name and Copy beside it. The pair is drawn at its final size while the
   number is fetched, dimmed and inert, so the answer lands without moving
   anything. The sheet is always light (#fff), so these are too. */
.twf-cs-num{display:flex;align-items:center;gap:8px;min-height:36px;margin-top:4px;font-size:15px;font-weight:700;color:#0C1220;font-variant-numeric:tabular-nums}
.twf-cs-num .w{font-size:13px;font-weight:600;color:rgba(12,18,32,.58)}
.twf-cs-copy{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(12,18,32,.16);background:transparent;color:#0C1220;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.twf-cs-ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:4px}
.twf-cs-call{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 10px;border-radius:12px;background:#0C1220;color:#fff;font-size:16px;font-weight:800;text-decoration:none;-webkit-tap-highlight-color:transparent}
.twf-cs-call:active{transform:scale(.98)}
.twf-cs-call.is-wait{opacity:.35;pointer-events:none}
/* 2026-09-29, review: nothing to dial. The pair keeps its place so the sheet
   does not drop under the thumb; grey and inert, the line above says why */
.twf-cs-call.is-off{background:rgba(12,18,32,.06);color:rgba(12,18,32,.4);pointer-events:none}
.twf-cs-call .twf-i{flex-shrink:0}
/* the profile: the number is a door, Text sits beside it */
.twf-pe-reach{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.twf-pe-tel,.twf-pe-sms{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:800;text-decoration:none;-webkit-tap-highlight-color:transparent}
.twf-pe-tel{background:var(--pt-ink,#0C1220);color:#fff;font-variant-numeric:tabular-nums}
.twf-pe-sms{border:1px solid var(--pt-line,rgba(12,18,32,.16));color:var(--pt-ink,#0C1220)}
.twf-pe-reach .w{color:var(--pt-mute,rgba(12,18,32,.58));font-weight:600}
/* 2026-10-01 (P1-people): every number a person keeps. On the sheet, the
   others sit under the header with their label and their own Call and Text
   (the sheet is always light). On the Profile, each line carries its label.
   People's Group by and Sort under the chips; the details form; My Profile's
   numbers and home city. Here, not in the cockpit sheet, which is at its budget. */
.twf-cs-more:empty{display:none}
.twf-cs-more{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.twf-cs-alt{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:700;color:#0C1220;font-variant-numeric:tabular-nums}
.twf-cs-alt .lb,.twf-pe-reach-more .lb{min-width:52px;font-size:12px;font-weight:700;color:rgba(12,18,32,.58)}
.twf-cs-alt .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.twf-cs-alt-a{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid rgba(12,18,32,.16);color:#0C1220;font-size:13px;font-weight:800;text-decoration:none;-webkit-tap-highlight-color:transparent}
.twf-pe-reach-more .lb{color:var(--pt-mute,rgba(12,18,32,.58))}
.twf-pe-ec{min-height:36px;padding:0 12px}
/* 2026-10-02 (R2-people): People, denser on a phone. Group by and Sort open
   under the list's header from one Arrange chip, each on its own line wide
   enough for "Last place worked"; the filter chips are one line that scrolls
   sideways; a header's count is a number, not a 44px button. The contact
   sheet's Call and Text sit under the primary number, the others below. */
.twf-pe .twf-pt-sh .a{min-height:0}
.twf-pe-listh{align-items:center;margin:10px 0 0}
.twf-pe-listh .a{margin-left:8px}
.twf-pe-grp{margin:12px 0 0}
#_twfContactSheet>.twf-cs-ph{margin:0 0 12px}
.twf-cs-more-h{font-size:12px;font-weight:700;color:rgba(12,18,32,.58)}
.twf-pe-details .twf-su-in{width:100%;margin-bottom:6px}
.twf-pe-edph{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:6px;align-items:center;margin:4px 0 8px}
.twf-pe-edph .twf-su-in{margin-bottom:0}
.twf-pe-edph .twf-pt-pill{justify-self:start}
.twf-pe-edphadd,.twf-pf-phgo,.twf-pf-phmk,.twf-pf-phrm{border:0;font-family:inherit;cursor:pointer;min-height:36px}
.twf-pe-edphadd{margin:2px 0 10px}
.twf-pf-home{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:8px}
.twf-pf-phones,.twf-pe-edphs{display:flex;flex-direction:column}
.twf-pf-ph .rr{display:flex;gap:6px;flex-shrink:0}
.twf-pf-phadd{display:grid;grid-template-columns:minmax(0,1fr) 128px auto;gap:8px;align-items:center}
/* 2026-09-30: VIEW AS A MARKET (twf-markets.js), for the CEO and the CHRO.
   The control sits in the top strip beside the eyebrow actions; while a
   market is chosen a slim line under the strip says which, so nobody reads
   one market's screens as the company's. Markets are "City, ST", never a code. */
.twf-mk-switch{display:inline-flex;align-items:center;gap:4px;min-height:36px;max-width:44vw;padding:0 10px;border:1px solid var(--pt-line,rgba(12,18,32,.12));border-radius:999px;background:transparent;color:var(--pt-ink,#0C1220);font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.twf-mk-switch .t{overflow:hidden;text-overflow:ellipsis}
.twf-mk-switch .v{display:inline-flex;color:var(--pt-mute,rgba(12,18,32,.58))}
.twf-mk-switch.on{border-color:var(--pt-gold,#C9A84C);background:var(--pt-info-bg,rgba(59,130,246,.08))}
.twf-mk-viewing{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:6px 12px;border-radius:10px;background:var(--pt-info-bg,rgba(59,130,246,.08));color:var(--pt-ink,#0C1220);font-size:13px;font-weight:700}
.twf-mk-viewing .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.twf-mk-all{flex-shrink:0;min-height:32px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--pt-info,#2563EB);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
/* the chip on a person, shift or venue row: small, one line, never wraps */
.twf-mk-chip{display:inline-block;vertical-align:middle;margin:0 6px 0 4px;padding:1px 7px;border-radius:999px;border:1px solid var(--pt-line,rgba(12,18,32,.12));color:var(--pt-mute,rgba(12,18,32,.62));font-size:11px;font-weight:700;line-height:16px;white-space:nowrap}
.twf-mk-chip[hidden]{display:none}
.twf-mk-sheet{position:fixed;inset:0;z-index:10020;display:flex;align-items:flex-end;justify-content:center}
.twf-mk-bd{position:absolute;inset:0;background:rgba(17,29,59,.45)}
.twf-mk-card{position:relative;width:100%;max-width:520px;box-sizing:border-box;max-height:80vh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:16px 12px calc(12px + env(safe-area-inset-bottom,0px));color:var(--pt-ink,#0C1220)}
.twf-mk-h{font-size:20px;font-weight:800;padding:0 6px}
.twf-mk-sub{font-size:13px;color:var(--pt-mute,rgba(12,18,32,.62));padding:4px 6px 10px}
.twf-mk-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.twf-mk-opt.on{background:var(--pt-info-bg,rgba(59,130,246,.08))}
.twf-mk-opt .m{display:flex;flex-direction:column;flex:1;min-width:0}
.twf-mk-opt .l1{font-size:16px;font-weight:700}
.twf-mk-opt .l2{font-size:12px;color:var(--pt-mute,rgba(12,18,32,.62))}
.twf-mk-opt .ck{color:var(--pt-ok,#16A34A);font-weight:800}
.twf-mk-cancel{display:block;width:100%;min-height:48px;margin-top:6px;border:0;border-radius:12px;background:transparent;color:var(--pt-mute,rgba(12,18,32,.62));font:inherit;font-size:15px;font-weight:700;cursor:pointer}
/* 2026-09-30: the private event's own place (twf-shift-setup.js, place step) */
.twf-su-field{margin:0 0 14px}
.twf-su-field .twf-su-in{width:100%;box-sizing:border-box}
.twf-su-optl{font-weight:600;color:var(--pt-mute,rgba(12,18,32,.58));text-transform:none;letter-spacing:0}
.twf-su-err{margin:-6px 0 14px;font-size:13px;font-weight:700;color:var(--pt-late,#C0392B)}
.twf-su-err[hidden]{display:none}
.twf-su-norate .twf-su-hint{margin-top:4px}
/* 2026-10-01 (chat stage 2, twf-chat.js): "Seen" under my latest read message,
   "Seen by 3" opening the names, and who is typing above the composer */
.twf-chat-seen{font-size:11px;color:var(--pt-faint,rgba(12,18,32,.5));padding:0 6px;margin-top:1px;text-align:right}
.twf-chat-seen-btn{min-height:44px;margin:-6px 0;padding:0 6px;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.twf-chat-seen-names{font-size:12px;color:var(--pt-mute,rgba(12,18,32,.62));padding:0 6px 2px;max-width:260px;margin-left:auto}
.twf-chat-seen-names[hidden]{display:none}
.twf-chat-typing{font-size:12px;font-style:italic;color:var(--pt-mute,rgba(12,18,32,.62));padding:6px 16px 0}
.twf-chat-typing[hidden]{display:none}
/* 2026-10-03: Import people (twf-person.js, route import-people). The file
   and paste box, the preview, the confirm sheet (the market sheet's own
   classes) and the ledger. Phone first: every control is 44px or more. */
.twf-ip .twf-ip-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0}
.twf-ip .twf-ip-pick,.twf-ip .twf-ip-go,.twf-ip .twf-ip-copy,.twf-ip .twf-ip-again{min-height:44px;padding:0 18px;border:0;font-weight:700;cursor:pointer}
.twf-ip .twf-ip-go{background:var(--pt-gold,#C9A84C);color:#0C1220}
.twf-ip .twf-ip-go[disabled]{opacity:.45;cursor:default}
.twf-ip .twf-ip-pick,.twf-ip .twf-ip-copy,.twf-ip .twf-ip-again{background:var(--pt-info-bg,rgba(59,130,246,.08));color:inherit}
.twf-ip .twf-ip-text{display:block;width:100%;box-sizing:border-box;min-height:120px;margin:4px 0 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.45;resize:vertical}
.twf-ip .twf-ip-flag{color:var(--pt-late,#C0392B);font-weight:700}
.twf-ip .twf-ip-sum{margin:12px 0}
.twf-ip-sheet .twf-ip-go{display:block;width:100%;min-height:52px;border:0;border-radius:12px;background:var(--pt-gold,#C9A84C);color:#0C1220;font-weight:800;font-size:16px;cursor:pointer}
.twf-pe-import .m{min-width:0}
/* 2026-10-07: Sign-in links (twf-person.js, route sign-in-links). The four
   counts, the market chips, the two sends, the people, the ledger and the
   confirm sheet (the market sheet's own classes). Phone first: two counts a
   row, full-width buttons, every control 44px or more. */
.twf-sil .twf-sil-counts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.twf-sil .twf-sil-tile{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;background:var(--pt-info-bg,rgba(59,130,246,.08));min-width:0}
.twf-sil .twf-sil-tile .n{font-size:24px;font-weight:800;line-height:1.1}
.twf-sil .twf-sil-tile .t{font-size:12.5px;color:var(--pt-mute,rgba(12,18,32,.62));line-height:1.3}
.twf-sil .twf-sil-acts{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.twf-sil .twf-sil-go{width:100%;min-height:48px;padding:0 16px;border:0;border-radius:12px;background:var(--pt-gold,#C9A84C);color:#0C1220;font-weight:800;font-size:15px;cursor:pointer}
.twf-sil .twf-sil-go[disabled],.twf-sil .twf-sil-remove[disabled]{opacity:.45;cursor:default}
.twf-sil .twf-sil-list{display:flex;flex-direction:column}
.twf-sil .twf-sil-row{display:flex;align-items:center;min-height:52px;padding:6px 0}
.twf-sil .twf-sil-row .twf-person{min-width:0}
.twf-sil .twf-sil-remove{display:block;width:100%;min-height:44px;margin:12px 0 4px}
.twf-sil .twf-sil-ledger{margin:12px 0;padding:12px;border-radius:12px;border:1px solid var(--pt-line,rgba(12,18,32,.12))}
.twf-sil .twf-sil-ledger-l{display:flex;gap:16px;margin:8px 0;padding:0;list-style:none;font-size:14px}
.twf-sil .twf-sil-fail{font-size:13.5px;padding:6px 0;color:var(--pt-late,#C0392B)}
.twf-sil .twf-sil-done{min-height:44px;padding:0 18px;border:0;margin-top:8px;cursor:pointer}
.twf-sil-sheet .twf-sil-sendgo{display:block;width:100%;min-height:52px;border:0;border-radius:12px;background:var(--pt-gold,#C9A84C);color:#0C1220;font-weight:800;font-size:16px;cursor:pointer}
.twf-sil-sheet .twf-sil-sendgo.danger{background:var(--pt-late,#C0392B);color:#fff}
.twf-pe-sil .m{min-width:0}

/* 2026-10-02: notifications and settings that take fewer taps.
   The Notifications header carries Clear all; a cleared row slides out;
   the bell tray's View all and the switches reach 44px; the profile's
   "Saved" sits in the section's status line, whose space is reserved so
   the page does not jump when it shows and fades. */
.twf-nt-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.twf-nt-bar .twf-sp-h{margin:0;min-width:0}
.twf-nt-clear{min-height:44px;padding:0 14px;border:0;background:none;color:var(--pt-info);font:inherit;font-size:14px;font-weight:700;border-radius:12px;cursor:pointer;flex-shrink:0}
.twf-nt-clear:hover{background:var(--pt-info-bg)}
.twf-nt-clear[hidden],.twf-pt-sh[hidden]{display:none}
.twf-nt{touch-action:pan-y;transition:opacity .18s ease,transform .18s ease}
.twf-nt.is-leaving{opacity:0;transform:translateX(-28px)}
@media (prefers-reduced-motion:reduce){.twf-nt{transition:none}.twf-nt.is-leaving{transform:none}}
#notifDropdown .twf-notif-view-all{min-height:44px;padding:0 12px;border:0;background:none;font:inherit;cursor:pointer}
#notifMarkAll{min-height:44px;padding:0 12px!important}
.twf-sw{touch-action:manipulation}
.twf-sw::before{content:"";position:absolute;inset:-7px -4px}
.twf-se-pwrow[aria-expanded="true"] .chev{transform:rotate(90deg)}
.twf-pf-stat:empty{display:block;min-height:18px;visibility:hidden}
.twf-pf-stat.is-ok{color:var(--pt-ok,#2E7D52);font-weight:700;opacity:1;transition:opacity .6s ease}
.twf-pf-stat.is-ok.is-fading{opacity:0}
@media (prefers-reduced-motion:reduce){.twf-pf-stat.is-ok{transition:none}}
.twf-nt-empty{padding:18px 0;text-align:center}

/* ── 2026-10-07 (P1, the people funnel) ──────────────────────────────────
   Sign-in links: a pick box on every row, Select all in this stage, stage
   chips with their counts, a search, and Send again on one row. People: the
   "Alerts off" pill and the Nudge bar on No alerts. The box is a button with
   role=checkbox: the delegated click handler cancels a native checkbox's
   toggle. */
.twf-sil .twf-sil-row{gap:10px}
.twf-sil .twf-sil-who{flex:1;min-width:0}
.twf-sil .twf-sil-pick{flex:0 0 auto;position:relative;box-sizing:border-box;width:26px;height:26px;min-width:26px;min-height:0;padding:0;border:2px solid var(--pt-line-strong,rgba(12,18,32,.32));border-radius:8px;background:transparent;cursor:pointer}
.twf-sil .twf-sil-pick::before{content:"";position:absolute;inset:-9px}
.twf-sil .twf-sil-pick.on{background:var(--pt-gold,#C9A84C);border-color:var(--pt-gold,#C9A84C)}
.twf-sil .twf-sil-pick.on::after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;box-sizing:border-box;border:solid var(--pt-ink,#0C1220);border-width:0 3px 3px 0;transform:rotate(45deg)}
.twf-sil .twf-sil-pick:focus-visible{outline:2px solid var(--pt-gold,#C9A84C);outline-offset:2px}
.twf-sil .twf-sil-row.on{background:var(--pt-gold-bg,rgba(201,168,76,.08))}
.twf-sil .twf-sil-again{flex:0 0 auto;min-height:36px;padding:0 12px;border:0;cursor:pointer;white-space:nowrap}
.twf-sil .twf-sil-again[disabled],.twf-sil .twf-sil-pick[disabled]{opacity:.45;cursor:default}
.twf-sil .twf-sil-pickbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:8px 0 4px}
.twf-sil .twf-sil-pickbar .twf-pt-quiet{width:auto;min-height:40px;padding:0 12px;font-size:14px}
.twf-sil .twf-sil-npick{font-size:14px;font-weight:700}
.twf-pe-noalerts{white-space:nowrap}
.twf-pe-nudgebar{margin:8px 0 12px}
.twf-pe-nudgebar .twf-pt-cta[disabled]{opacity:.45;cursor:default}
.twf-pe-nudgebar .twf-su-hint{margin-top:6px}
.twf-pe-nudgesheet .twf-sil-sendgo{display:block;width:100%;min-height:52px;border:0;border-radius:12px;background:var(--pt-gold,#C9A84C);color:#0C1220;font-weight:800;font-size:16px;cursor:pointer}
/* ── P2a-arrange (2026-10-07): group, sort and filter a list of shifts ──────
   twf-arrange.js (the control itself is round 2's sort-filter block, at the
   end of this file). A group header can narrow the list to itself ("Only
   this").
   Then the screens that use it: the leadership Shifts tab (rows done or
   called off), staff Open shifts (one card per shift, position chips), Pick
   Up (cards on classes), the calendar's venue chips (the legend for the
   dots), and Verify Hours (a header per shift; every inline style moved here). */
.twf-ar{margin:2px 0 6px}
.twf-ar-row{display:flex;align-items:center;gap:6px}
.twf-pt-chip .n{font-size:12px;font-weight:800;opacity:.75}
.twf-ar-listh{align-items:center;margin:16px 0 6px}
.twf-ar-listh .a{margin-left:auto}
.twf-ar-gh{align-items:center;margin:20px 0 4px}
.twf-ar-gh .t{font-size:14px;color:var(--pt-ink,#111D3B)}
.twf-ar-gh .a{margin-left:8px;min-height:0;padding:0;font-size:12px;font-weight:700;color:var(--pt-mute,#5A6076)}
.twf-ms-open>.twf-pt-sh .a,.twf-hv-shift .a{min-height:0}
.twf-ar-one{margin-left:auto;min-height:36px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--pt-info,#1A5FC8);font:inherit;font-size:13px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.twf-ar-one:active{background:var(--pt-info-bg,#E3EDFD)}
/* the Shifts tab: the four doors as a two-by-two above the list, so the list
   starts on the first screen; then a shift that is over, and one called off */
.twf-sh-doors{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.twf-sh-doors .twf-pt-row{padding:8px 0;min-width:0}
.twf-sh-doors .twf-pt-row .l2,.twf-sh-doors .twf-pt-row .chev{display:none}
.twf-sh-doors .twf-pt-row .l1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){.twf-sh-doors{grid-template-columns:repeat(4,1fr)}}
.twf-wk-done .stripe{background:#C3C7D2}
.twf-wk-done.is-no .stripe{background:var(--pt-late-stripe,#E02424)}
.twf-wk-done.is-no .n{color:var(--pt-mute,#5A6076)}
/* staff Open shifts: one card per shift */
.twf-ms-open{margin:0 0 8px}
.twf-os-pos{margin:10px 0 0;gap:6px}
.twf-os-pos .twf-pt-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;font-size:14px}
.twf-pt-card .twf-os-go{margin-top:10px;min-height:46px;font-size:14px}
.twf-pt-card .twf-os-quiet{margin-top:8px;min-height:44px;font-size:14px}
/* Pick Up, on classes */
.twf-cv-lede{margin:0 0 12px}
.twf-cv-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.twf-cv-n{font-weight:700;font-size:15px;color:var(--pt-ink,#111D3B);min-width:0}
.twf-cv-d{font-size:14px;font-weight:600;color:var(--pt-info,#1A5FC8);margin-bottom:4px}
.twf-cv-s{font-size:14px;color:var(--pt-mute,#5A6076);margin-bottom:6px}
.twf-cv-s.ok{color:var(--pt-ok,#2E7D52);font-weight:700}
.twf-cv-s.info{color:var(--pt-info,#1A5FC8)}
.twf-cv-why{font-size:13px;font-style:italic;color:var(--pt-faint,#60667A);margin-bottom:6px}
.twf-cv-lock{margin:0 0 6px}
.twf-cover-item .twf-cv-go{margin-top:8px;min-height:46px;font-size:14px}
/* the calendar: eight venue colours, and a legend that says which is which */
/* none of the five type colours (payroll, anniversary, holiday, new hire,
   time off), and the types are squares, the venues round */
.twf-vh-0{background:#C9A84C}.twf-vh-1{background:#1E3A8A}.twf-vh-2{background:#0E9F9A}.twf-vh-3{background:#DB2777}
.twf-vh-4{background:#7C3AED}.twf-vh-5{background:#8D6E63}.twf-vh-6{background:#475569}.twf-vh-7{background:#65A30D}
.cal-dot.is-type,.cal-legend-dot.is-type{border-radius:2px}
.cal-dot.is-off{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--pt-late-stripe,#E02424)}
/* a legend is read whole, so these wrap rather than scroll */
.twf-cal-venues{margin:10px 0 8px;flex-wrap:wrap;gap:6px;overflow:visible;padding-right:0;-webkit-mask-image:none;mask-image:none}
.twf-cal-vd{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
/* Verify Hours: a header per shift; the screen's inline styles, as classes */
.twf-hv-head{margin-bottom:16px}
.twf-hv-week{color:var(--pt-ink,#0C1220);margin:0 0 2px;font-size:clamp(20px,3vw,26px);font-weight:600}
.twf-hv-lede{color:#6B6558;margin:0;font-size:13px}
.twf-hv-warn{background:rgba(201,168,76,.12);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.twf-hv-warn-t{font-size:12.5px;font-weight:700;color:#8A7434;margin-bottom:4px}
.twf-hv-warn-b{font-size:13px;color:#5A5449;line-height:1.5}
.twf-hv-count{font-size:11px;font-weight:700;color:#8A8578;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px}
.twf-hv-shift{align-items:baseline;margin:16px 0 0}
.twf-hv-shift .a{margin-left:8px;font-size:12px;font-weight:700;color:var(--pt-mute,#5A6076)}
.twf-hv-shift-d{font-size:13px;font-weight:600;color:var(--pt-info,#1A5FC8);margin:0 0 2px}
.twf-review-hours-row.on .twf-hv-nm{color:#8A7434}
.twf-hv-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.twf-hv-who{cursor:pointer}
.twf-hv-box{width:20px;height:20px;accent-color:#C9A84C;cursor:pointer;flex-shrink:0}
.twf-hv-m{min-width:0}
.twf-hv-nm{display:block;font-size:14.5px;font-weight:700;color:#0C1220}
.twf-hv-sub{display:block;font-size:11.5px;color:#8A8578;margin-top:1px}
.twf-hv-hrs{display:flex;align-items:center;gap:6px;flex-shrink:0}
.twf-hv-hrs .twf-hv-in{width:76px;padding:8px 10px;border:1px solid rgba(12,18,32,.14);border-radius:8px;font-family:inherit;font-size:14px;font-weight:700;text-align:right;color:#0C1220}
.twf-hv-hrs .twf-hv-in.is-missing{border-color:rgba(180,60,60,.45)}
.twf-hv-hrs .twf-hv-in.is-flag{border-color:rgba(201,168,76,.55)}
.twf-hv-unit{font-size:12px;color:#8A8578}
.twf-hv-note{font-size:11.5px;color:#6B6558;margin-top:7px}
.twf-hv-note.late{color:#9A3B3B}
.twf-hv-note.warn{color:#8A7434}
.twf-hv-go{display:block;width:100%;padding:14px 18px;border:none;border-radius:11px;font-weight:700;font-size:14.5px;font-family:inherit;background:#C9A84C;color:#0C1220;cursor:pointer}
.twf-hv-go:disabled{background:rgba(12,18,32,.10);color:#8A8578;cursor:not-allowed}
.twf-hv-foot{font-size:11.5px;color:#8A8578;text-align:center;margin-top:7px}
.twf-hv-empty{padding:28px;text-align:center}
.twf-hv-empty .t{font-size:15px;font-weight:700;color:#0C1220;margin-bottom:4px}
.twf-hv-empty .b{font-size:13px;color:#6B6558}
.twf-hv-loading{padding:32px;text-align:center;color:#6B6558}
.twf-hv-err{padding:24px;color:#9A3B3B}
.twf-hv-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#0C1220;color:#fff;padding:12px 20px;border-radius:10px;font-size:13.5px;font-weight:600;z-index:9999;max-width:90vw;text-align:center}
.twf-hv-toast.err{background:#7A2E2E}
/* ── end P2a-arrange ── */
/* 2026-10-07 (P2b): everything at a venue, everything for a client.
   venue/<code> and client/<id> (twf-venue.js), the venue sheet that links a
   venue to its client (chips, not a native select), and the venue named as
   a door on the shift page, the Shifts rows and the calendar rows. */
.twf-vn .twf-vn-stats{margin-top:12px}
.twf-vn .twf-vn-shift .m,.twf-vn .twf-vn-venue .m,.twf-vn .twf-vn-client .m{min-width:0}
.twf-vn .twf-vn-client .l1{font-weight:800}
.twf-vn .twf-vn-crew .twf-person{min-width:0;flex:1}
.twf-vn .twf-vn-contact .l2 .twf-su-link{min-height:44px;display:inline-flex;align-items:center}
.twf-vn .twf-vn-fact .l1{font-size:13px;color:var(--pt-mute)}
.twf-vn .twf-vn-fact .l2{font-size:15px;color:var(--pt-ink)}
.twf-vn .twf-vn-venue .l2,.twf-vn .twf-vn-shift .l2{overflow-wrap:anywhere}
.twf-cl .twf-sp-d{margin-bottom:4px}
.twf-ci .twf-ci-open .l1{font-weight:800}
.twf-ci .twf-ci-client .l2{color:var(--pt-info);font-weight:700}
.twf-vn-restrict[hidden]{display:none}
.twf-vn-restrict{margin:0}
.twf-vn-sheet .twf-vn-form{gap:18px}
.twf-vn-sheet .twf-vn-field{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
.twf-vn-sheet .twf-vn-field legend{padding:0;margin-bottom:10px;font-size:14px}
.twf-vn-sheet .twf-vn-clients{gap:8px}
.twf-vn-sheet .twf-vn-clients .twf-pt-chip{white-space:normal;text-align:left;max-width:100%}
.twf-vn-sheet .twf-vn-contract{display:flex;width:100%}
.twf-vn-sheet .twf-vn-contract .twf-seg-btn{flex:1}
.twf-vn-sheet .twf-vn-addclient{margin-top:0}
.twf-vn-sheet .twf-vn-close{font-weight:700}
.twf-vn-sheet .twf-vn-msg,.twf-vn-sheet .twf-vn-clientmsg{font-weight:600}
.twf-vn-sheet .twf-vn-msg:empty,.twf-vn-sheet .twf-vn-clientmsg:empty{display:none}
/* the venue, as a door: "at Hilton Greenville" on the shift page, and the
   venue words inside a Shifts or calendar row (a tap there opens the venue;
   anywhere else on the row opens the shift) */
.twf-sp-at{display:inline;min-height:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--pt-line,rgba(12,18,32,.25))}
.twf-sp-at:hover{color:var(--pt-info)}
.twf-sp-at:focus-visible{outline:2px solid var(--pt-gold,#C9A84C);outline-offset:2px;border-radius:4px}
.twf-wk-venue,.twf-cal-venue{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:var(--pt-line,rgba(12,18,32,.25));cursor:pointer}
/* 2026-10-07 (P3): Hours this week (twf-hours-week.js). The meter on My
   Shifts (verified, then scheduled, a marker at 40), the one line under an
   offer or a Pick Up row ("Accepting puts you at 38.5 of 40 this week"), the
   shifts that make a week, and the leaders' screen (route hours-week). Phone
   first: rows wrap, every control 44px or more. Tokens only, so dark mode
   follows. */
.twf-hw-slot:empty{display:none}
.twf-hw-meter{margin:4px 0 14px}
.twf-hw-total{margin:2px 0 8px;font-size:15px;color:var(--pt-ink)}
.twf-hw-total strong{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.twf-hw-bar{position:relative;display:flex;height:12px;border-radius:999px;background:var(--pt-line,rgba(12,18,32,.08))}
.twf-hw-seg{display:block;height:100%}
.twf-hw-seg.v{background:var(--pt-ok-stripe,var(--pt-ok));border-radius:999px 0 0 999px}
.twf-hw-seg.s{background:var(--pt-info);opacity:.55}
.twf-hw-meter.is-over .twf-hw-seg.s,.twf-hw-bar.is-over .twf-hw-seg.s{background:var(--pt-warn);opacity:.8}
.twf-hw-mark{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--pt-ink);border-radius:1px}
.twf-hw-scale{position:relative;height:16px;margin-top:4px;font-size:11px;color:var(--pt-mute)}
.twf-hw-scale span{position:absolute;left:0}
.twf-hw-scale .f{transform:translateX(-50%);font-weight:700;color:var(--pt-ink)}
.twf-hw-key{margin:4px 0 0;font-size:13.5px;color:var(--pt-mute)}
.twf-hw-key .v{color:var(--pt-ok);font-weight:700}
.twf-hw-key .s{color:var(--pt-info);font-weight:700}
.twf-hw-note{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--pt-mute)}
.twf-hw-note.warn,.twf-hw-proj.warn{color:var(--pt-warn);font-weight:600}
.twf-hw-proj{margin:8px 0 10px;font-size:14px;line-height:1.45;color:var(--pt-ink)}
.twf-hw-proj[hidden]{display:none}
.twf-hw-break{margin:8px 0 12px}
.twf-hw-break-h{margin:0 0 6px;font-weight:700}
.twf-hw-shifts{list-style:none;margin:6px 0 0;padding:0}
.twf-hw-shifts li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:36px;padding:4px 0;border-bottom:1px solid var(--pt-line,rgba(12,18,32,.08));font-size:14px}
.twf-hw-shifts li:last-child{border-bottom:0}
.twf-hw-shifts .w{flex:1 1 160px;min-width:0;overflow-wrap:anywhere;color:var(--pt-ink)}
.twf-hw-shifts .n{flex-shrink:0;font-variant-numeric:tabular-nums;color:var(--pt-mute)}
.twf-hw-shifts li.is-this .w,.twf-hw-shifts li.is-this .n{font-weight:700;color:var(--pt-ink)}
.twf-hw-shifts li.is-missing .n{color:var(--pt-late);font-weight:700}
.twf-hw .twf-pt-chip{background:var(--pt-info-bg,rgba(37,99,235,.10));color:var(--pt-info)}
.twf-hw .twf-hw-when{flex:1 1 180px;min-width:0;font-size:15px;font-weight:700;color:var(--pt-ink);overflow-wrap:anywhere}
.twf-hw .twf-hw-people{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.twf-hw .twf-hw-people .twf-person{min-width:0}
.twf-hw .twf-hw-hole .twf-hw-row-h{align-items:flex-start}
.twf-hw .twf-hw-row{padding:10px 0 12px;margin-bottom:4px;min-width:0}
.twf-hw .twf-hw-row-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.twf-hw .twf-hw-row-h .twf-person{min-width:0}
.twf-hw .twf-hw-why{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--pt-mute)}
.twf-hw .twf-hw-row .twf-pt-chips{margin-top:8px}
.twf-hw .twf-hw-row .twf-pt-chip{min-height:44px}
.twf-hw .twf-hw-foot{margin:16px 0 8px;font-size:13px;line-height:1.5;color:var(--pt-mute)}
/* ── GET THERE (twf-directions.js, 2026-10-08) ─────────────────────────
   The way to the shift, front and centre: Leave by, the venue and its
   street address (a tap opens directions), the parking and entrance note,
   Directions and Calendar. Two variants: --dark sits inside the near-black
   hero card (gold on navy), --light sits on the canvas (the shift page).
   Tokens from twf-premium.css; the one lighter gold is the hero's own. */
.twf-gt{--gt-gold:var(--pt-gold-stripe,#C9A84C);--gt-gold-hi:#E3C46F;--gt-navy:var(--pt-navy,#111D3B);margin:14px 0 4px;min-width:0}
.twf-gt-card{border-radius:var(--radius-xl,18px);overflow:hidden;min-width:0}
.twf-gt-leave{display:flex;align-items:center;gap:14px;padding:14px;min-width:0}
.twf-gt-tile{width:52px;height:52px;border-radius:16px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;background:linear-gradient(180deg,var(--gt-gold-hi),var(--gt-gold));color:var(--gt-navy)}
.twf-gt-tile .k{font-size:10px;font-weight:700;letter-spacing:.08em}
.twf-gt-tile .t{font-size:15px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.twf-gt-lm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.twf-gt-l1{font-size:17px;font-weight:700;line-height:1.25}
.twf-gt-l2{font-size:13px;line-height:1.4;margin-top:2px;overflow-wrap:anywhere}
.twf-gt-l2t{overflow-wrap:anywhere}
.twf-gt-change{display:inline-flex;align-items:center;vertical-align:middle;min-height:var(--tap-min,44px);min-width:var(--tap-min,44px);margin:-12px 0 -12px 2px;padding:0 6px;border:0;background:none;font:inherit;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:12px}
.twf-gt-leave.is-soon .twf-gt-tile{animation:twfGtPulse 1.8s var(--motion-ease,ease-in-out) infinite}
.twf-gt-leave.is-now .twf-gt-tile{box-shadow:0 0 0 3px var(--pt-gold-halo,rgba(201,168,76,.18))}
@keyframes twfGtPulse{0%,100%{box-shadow:0 0 0 0 var(--pt-gold-glow,rgba(201,168,76,.26))}50%{box-shadow:0 0 0 8px rgba(201,168,76,0)}}
.twf-gt-place{display:flex;gap:12px;align-items:flex-start;width:100%;min-height:var(--tap-min,44px);padding:12px 14px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
.twf-gt-ic{flex:none;width:20px;height:20px;margin-top:2px;color:var(--gt-gold)}
.twf-gt-go svg,.twf-gt-cal svg{flex:none}
.twf-gt-ic svg,.twf-gt-go svg,.twf-gt-cal svg,.twf-gt-app-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.twf-gt-pm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.twf-gt-venue{font-size:15px;font-weight:700;line-height:1.3}
.twf-gt-addr{font-size:13.5px;line-height:1.4;text-decoration:underline;text-decoration-color:rgba(201,168,76,.55);text-underline-offset:3px;overflow-wrap:anywhere}
.twf-gt-place.is-none{cursor:default}
.twf-gt-place.is-none .twf-gt-addr{text-decoration:none}
.twf-gt-note{display:flex;gap:12px;padding:12px 14px;font-size:13px;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.twf-gt-acts{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-top:12px}
.twf-gt-go,.twf-gt-cal{min-height:var(--control-h-lg,56px);border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;cursor:pointer;padding:0 12px;min-width:0}
.twf-gt-go{font-size:16px;border:0}
.twf-gt-go svg{width:18px;height:18px;stroke-width:2.2}
.twf-gt-cal{font-size:14px;font-weight:600;background:none}
.twf-gt-cal svg{width:16px;height:16px;stroke-width:2}
.twf-gt-go:active,.twf-gt-cal:active,.twf-gt-place:active,.twf-gt-link:active{transform:scale(var(--press-scale,.98))}
/* dark: inside the navy hero */
.twf-gt--dark{color:#fff}
.twf-gt--dark .twf-gt-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.twf-gt--dark .twf-gt-l2,.twf-gt--dark .twf-gt-addr,.twf-gt--dark .twf-gt-note{color:#C3C9D6}
.twf-gt--dark .twf-gt-change{color:var(--gt-gold-hi)}
.twf-gt--dark .twf-gt-ic{color:var(--gt-gold-hi)}
.twf-gt--dark .twf-gt-go{background:linear-gradient(180deg,var(--gt-gold-hi),var(--gt-gold));color:var(--gt-navy);box-shadow:0 8px 18px -8px rgba(201,168,76,.8)}
.twf-gt--dark .twf-gt-cal{border:1px solid rgba(255,255,255,.18);color:#fff}
/* light: on the canvas */
.twf-gt--light{color:var(--pt-ink,#111D3B)}
.twf-gt--light .twf-gt-card{background:var(--surface-0,#fff);border:0;box-shadow:var(--elev-1,0 1px 2px rgba(17,29,59,.06))}
.twf-gt--light .twf-gt-l2,.twf-gt--light .twf-gt-addr,.twf-gt--light .twf-gt-note{color:var(--pt-mute,#5A6076)}
.twf-gt--light .twf-gt-change{color:var(--pt-gold,#7A6530)}
.twf-gt--light .twf-gt-ic{color:var(--pt-gold,#7A6530)}
.twf-gt--light .twf-gt-go{background:var(--action-primary,#111D3B);color:var(--action-primary-fg,#fff)}
.twf-gt--light .twf-gt-go svg{color:var(--gt-gold-hi)}
.twf-gt--light .twf-gt-cal{border:1px solid var(--action-secondary-border,rgba(17,29,59,.18));color:var(--pt-ink,#111D3B);background:var(--surface-0,#fff)}
/* the address as one line (Pick Up, offers, the arrival rows) */
.twf-gt-link{display:flex;gap:8px;align-items:flex-start;width:100%;min-height:var(--tap-min,44px);margin:4px 0 2px;padding:10px 0;border:0;background:none;font:inherit;font-size:13.5px;line-height:1.4;color:var(--pt-ink,#111D3B);text-align:left;cursor:pointer;min-width:0}
.twf-gt-link .twf-gt-ic{width:18px;height:18px;margin-top:1px;color:var(--pt-gold,#7A6530)}
.twf-gt-link .twf-gt-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}
.twf-gt-link-t{min-width:0;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:rgba(201,168,76,.6);text-underline-offset:3px}
button.twf-arrive-row.twf-gt-addrrow{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.twf-arrive-row.twf-gt-addrrow .l1{text-decoration:underline;text-decoration-color:rgba(201,168,76,.6);text-underline-offset:3px}
button.twf-arrive-row.twf-gt-addrrow .twf-gt-dir{flex:none;margin-left:auto;font-size:13px;font-weight:700;color:var(--pt-gold,#7A6530)}
/* the chooser sheet */
.twf-gt-apps{display:grid;gap:8px;margin-top:4px}
.twf-gt-app{min-height:56px;border-radius:16px;border:1.5px solid var(--pt-line,#E3E7EE);background:var(--surface-0,#fff);display:flex;align-items:center;gap:12px;padding:0 14px;font:inherit;font-size:16px;font-weight:600;color:var(--pt-ink,#111D3B);cursor:pointer;text-align:left}
.twf-gt-app.is-on{border-color:var(--pt-ink,#111D3B)}
.twf-gt-app-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:7px;box-sizing:border-box;flex:none;background:var(--pt-mute-pill-bg,#E7E9F0);color:var(--pt-ink,#111D3B)}
.twf-gt-app-ic.is-google{background:var(--pt-ok-bg,#E3F1E8);color:var(--pt-ok,#0A7A53)}
.twf-gt-app-ic.is-waze{background:var(--pt-info-bg,#E3EEFC);color:var(--pt-info,#1D4ED8)}
.twf-gt-app-n{flex:1 1 auto;min-width:0}
.twf-gt-app-s{margin-left:auto;font-size:12px;font-weight:500;color:var(--pt-mute,#5A6076)}
.twf-gt-seg{display:flex;width:100%;margin:2px 0 10px}
.twf-gt-seg .twf-seg-btn{flex:1;min-height:var(--tap-min,44px);font-variant-numeric:tabular-nums}
.twf-gt-settings .rail svg{fill:none;stroke:currentColor;stroke-width:1.8}
.twf-gt-hidden-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.twf-gt-leave.is-soon .twf-gt-tile{animation:none;box-shadow:0 0 0 3px var(--pt-gold-halo,rgba(201,168,76,.18))}.twf-gt-go:active,.twf-gt-cal:active,.twf-gt-place:active,.twf-gt-link:active{transform:none}}
/* 2026-10-08: on a card whose own primary is Accept, Directions steps down to the outline look */
.twf-gt--quiet .twf-gt-go{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.22);box-shadow:none}
.twf-gt--light.twf-gt--quiet .twf-gt-go{border-color:var(--border-1,#D9DEE7);color:var(--text-1,#0C1220)}
/* 2026-10-08: the shift's name stays on the card above the Get there panel */
.twf-hero-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.twf-hero-title .twf-hero-name{font-size:18px}
/* === slice 3: transit and venue notes === */
/* the shared sheet X (twf-ui.js twfSheet): a 44px target, a round 30px grey glyph, top right */
.twf-ui-sheet-x{position:absolute;top:8px;right:8px;width:44px;height:44px;min-height:44px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;color:var(--text-2,#5A6076)}
.twf-ui-sheet-x-g{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pt-mute-pill-bg,#E7E9F0)}
.twf-ui-sheet-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.twf-ui-sheet-x:focus-visible{outline:2px solid var(--action-primary,#0C1220);outline-offset:-2px}
.twf-ui-sheet.has-x .twf-ui-sheet-title,.twf-ui-sheet.has-x .twf-ui-sheet-msg:first-child .twf-ui-sheet-lead,.twf-ui-sheet.has-x .twf-ui-sheet-hm{padding-right:40px}
@media (min-width:768px){.twf-ui-sheet-x{top:12px;right:12px}}
/* Get there: the quiet "No car? Other ways there" row under Directions and Calendar */
.twf-gt-other{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap-min,44px);margin-top:8px;padding:6px 4px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:inherit;text-align:left;cursor:pointer;border-radius:12px;min-width:0}
.twf-gt-other-ic{flex:none;width:18px;height:18px}
.twf-gt-other-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.twf-gt-other-t{flex:1 1 auto;min-width:0}
.twf-gt-other-chev{flex:none;font-size:20px;line-height:1;opacity:.6}
.twf-gt--dark .twf-gt-other{color:#C3C9D6}
.twf-gt--dark .twf-gt-other-ic{color:var(--gt-gold-hi)}
.twf-gt--light .twf-gt-other{color:var(--pt-mute,#5A6076)}
.twf-gt--light .twf-gt-other-ic{color:var(--pt-info,#1D4ED8)}
.twf-gt-other:active{transform:scale(var(--press-scale,.98))}
/* the Other ways there sheet: rows separated by space, no lines */
.twf-gt-ways{display:grid;gap:14px;margin-top:16px}
.twf-gt-way{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:0;border:0;background:none;font:inherit;color:var(--text-1,#0C1220);text-align:left;cursor:pointer;border-radius:14px;min-width:0}
.twf-gt-way-ic{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.twf-gt-way-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.twf-gt-way-ic.is-transit{background:var(--pt-info-bg,#E5EDFB);color:var(--pt-info,#1D4ED8)}
.twf-gt-way-ic.is-uber,.twf-gt-way-ic.is-lyft{background:var(--pt-gold-wash,#F6EFDB);color:var(--pt-gold,#7A6530)}
.twf-gt-way-m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.twf-gt-way-n{font-size:16px;font-weight:700;line-height:1.3}
.twf-gt-way-s{font-size:13px;line-height:1.4;color:var(--text-2,#5B6378);overflow-wrap:anywhere}
.twf-gt-way-s.is-warn{color:var(--pt-warn-deep,#B4580F);font-weight:600}
.twf-gt-way-chev{flex:none;font-size:22px;line-height:1;color:var(--text-3,#A5ABB8)}
.twf-gt-way:active{transform:scale(var(--press-scale,.98))}
.twf-gt-nocar{margin-top:20px;padding:14px 16px;border-radius:16px;background:var(--sheet-well,#F2F3F7)}
.twf-gt-nocar-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2,#5B6378)}
.twf-gt-nocar-t{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--text-1,#0C1220);white-space:pre-wrap;overflow-wrap:anywhere}
.twf-gt-disclaimer{margin:18px 0 2px;font-size:12.5px;line-height:1.45;color:var(--text-2,#5B6378)}
@media (prefers-reduced-motion:reduce){.twf-gt-other:active,.twf-gt-way:active{transform:none}}
/* the venue page: Getting here without a car, and its editor */
.twf-vn-nocar-t .l2{white-space:pre-wrap;overflow-wrap:anywhere}
.twf-vn-nocar-l{display:block;margin-top:16px}
.twf-vn-nocar-k{display:block;font-size:13px;font-weight:600;color:var(--text-2,#5B6378);margin-bottom:6px}
.twf-vn-nocar-in{width:100%;box-sizing:border-box;min-height:112px;resize:vertical}
.twf-vn-nocar-n{margin-top:6px;font-size:12.5px;color:var(--text-2,#5B6378);text-align:right;font-variant-numeric:tabular-nums}
.twf-vn-nocar-save{width:100%;margin-top:14px}
.twf-vn-nocar{min-width:0}
.twf-vn-nocar-c{font-weight:600}
.twf-vn-nocar-msg{margin:8px 0 0;min-height:0}

/* === slice 4: ride board === */
/* 2026-10-08 (shift-experience round). twf-rides.js: the "Share a ride" row
   on the shift page and its sheet. Flat iOS: rows separated by space, never
   by lines; 44px targets; one navy primary; green only for "riding with";
   amber only for an ask waiting on you. No raw z-index. */

/* the row on the shift page: the house row, its car in the rail */
.twf-rb-row[hidden]{display:none}
.twf-rb-row .l2{overflow-wrap:anywhere}

/* the sheet */
.twf-rb-sheet .twf-ui-sheet-body{padding-bottom:4px}
.twf-rb-load,.twf-rb-empty{padding:14px 2px;font-size:14px;line-height:1.45;color:var(--text-2)}
.twf-rb-said{margin:12px 0 2px;padding:12px 14px;border-radius:16px;font-size:14px;font-weight:600;line-height:1.4;background:var(--pt-info-bg);color:var(--pt-info)}
.twf-rb-said.is-ok{background:var(--pt-ok-bg);color:var(--pt-ok)}
.twf-rb-said.is-late{background:var(--pt-late-bg);color:var(--pt-late)}
.twf-rb-card{margin:12px 0 0;padding:14px;border-radius:18px;background:var(--surface-0,#F4F6FB)}
.twf-rb-card .twf-rb-two{margin-top:12px}
.twf-rb-qh,.twf-rb-t{font-size:16px;font-weight:700;line-height:1.3;color:var(--text-1)}
.twf-rb-qs,.twf-rb-s{margin-top:2px;font-size:13px;line-height:1.4;color:var(--text-2)}
.twf-rb-seg{display:flex;gap:6px;margin-top:12px;padding:4px;border-radius:14px;background:var(--surface-2,#E9EDF5)}
.twf-rb-segb{flex:1 1 0;min-width:0;min-height:44px;border:0;border-radius:11px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--text-1);cursor:pointer;font-variant-numeric:tabular-nums}
.twf-rb-segb.is-on{background:var(--surface-1,#fff);box-shadow:0 1px 3px rgba(12,18,32,.12)}
.twf-rb-note,.twf-rb-with,.twf-rb-mine{display:flex;align-items:center;gap:12px}
.twf-rb-note{align-items:flex-start}
.twf-rb-note .rail,.twf-rb-with .rail,.twf-rb-mine .rail{flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.twf-rb-note .rail svg,.twf-rb-with .rail svg,.twf-rb-mine .rail svg{width:22px;height:22px}
.twf-rb-nm{flex:1 1 auto;min-width:0}
.twf-rb-nt{font-size:13.5px;line-height:1.45;color:var(--text-1)}
.twf-rb-link{min-height:44px;margin:2px 0 -10px;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--pt-info);cursor:pointer}
.twf-rb-two{display:flex;gap:8px}
.twf-rb-two .twf-rb-btn{flex:1 1 0}
.twf-rb-btn{min-height:48px;padding:0 16px;white-space:nowrap;border:0;border-radius:16px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;line-height:1.2}
.twf-rb-btn.is-primary{background:var(--action-primary,#0C1220);color:var(--action-primary-fg,#fff)}
.twf-rb-btn.is-quiet{background:var(--surface-2,#E9EDF5);color:var(--text-1)}
.twf-rb-btn.is-wide{display:block;width:100%;margin-top:10px}
.twf-rb-btn[disabled]{opacity:.5;cursor:default}
.twf-rb-sh{margin:20px 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.twf-rb-post{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 0}
.twf-rb-post .twf-person{flex:1 1 auto;min-width:0}
.twf-rb-post .twf-person-m{min-width:0}
.twf-rb-post .twf-person-nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.twf-rb-post .twf-person-sub{display:block;white-space:normal;overflow-wrap:anywhere}
.twf-rb-post.is-standing{margin-top:8px}
.twf-rb-pill{flex:none;min-width:72px;min-height:44px;padding:0 16px;border:0;border-radius:22px;background:var(--surface-2,#E9EDF5);color:var(--text-1);font:inherit;font-size:14px;font-weight:700;cursor:pointer;line-height:1;text-align:center;white-space:nowrap}
.twf-rb-pill.is-quiet{background:var(--surface-2,#E9EDF5);color:var(--text-1)}
.twf-rb-with .twf-rb-pill{background:var(--surface-1,#fff);color:var(--text-1)}
.twf-rb-state{flex:none;font-size:13px;font-weight:700;color:var(--text-2)}
.twf-rb-state.is-wait{color:var(--pt-warn)}
.twf-rb-state.is-ok{color:var(--pt-ok)}
.twf-rb-mine{margin-top:16px}
.twf-rb-acts{margin-top:14px}
.twf-rb-leave{display:block;width:100%;min-height:48px;margin-top:10px;border:0;border-radius:16px;background:transparent;font:inherit;font-size:15px;font-weight:700;color:var(--pt-late,#C42121);cursor:pointer}
.twf-rb-fine{margin:14px 2px 2px;font-size:12px;line-height:1.45;color:var(--text-2);text-align:center}
@media (hover:hover){.twf-rb-btn.is-primary:hover{filter:brightness(1.15)}.twf-rb-pill:hover{filter:brightness(.96)}.twf-rb-btn.is-quiet:hover,.twf-rb-segb:hover{filter:brightness(.97)}}
@media (prefers-reduced-motion:reduce){.twf-rb-pill,.twf-rb-btn{transition:none}}
.twf-rb-q .twf-rb-seg{margin-top:12px}
.twf-rb-in{background:var(--pt-warn-bg)}
.twf-rb-in .twf-rb-line{min-width:0}
.twf-rb-with{background:var(--pt-ok-bg)}
.twf-rb-pair .twf-rb-s{margin-bottom:2px}
.twf-rb-compose .twf-rb-btn.is-wide:first-of-type{margin-top:14px}
.twf-rb-post.is-near .twf-person-sub{color:var(--text-1)}
/* === slice 5: role library === */
/* "You're the Server": one disclosure on the shift screen and the accept receipt (twf-roles.js). Opens inline, never a sheet. */
.twf-rl{margin:16px 0 0}
.twf-rl-head{display:flex;align-items:center;gap:14px;min-height:var(--tap-min,44px);list-style:none;cursor:pointer;color:var(--pt-ink,#111D3B)}
.twf-rl-head::-webkit-details-marker{display:none}
.twf-rl-ic{width:44px;height:44px;border-radius:12px;background:var(--pt-night,#0C1220);color:var(--pt-gold-hi,#E3C46F);display:flex;align-items:center;justify-content:center;flex:none}
.twf-rl-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.twf-rl-m{flex:1 1 auto;min-width:0}
.twf-rl-t{display:block;font-size:18px;font-weight:700;line-height:1.25}
.twf-rl-s{display:block;font-size:13px;color:var(--pt-mute,#5A6076);margin-top:2px}
.twf-rl-chev{flex:none;width:16px;height:16px;color:var(--pt-mute,#5A6076);transition:transform .18s ease}
.twf-rl-chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.twf-rl[open] .twf-rl-chev{transform:rotate(180deg)}
.twf-rl-body{margin:14px 0 0 58px;display:grid;gap:18px;min-width:0}
.twf-rl-sum{margin:0;font-size:15px;line-height:1.55;color:var(--text-2,#5A6076)}
.twf-rl-sec{min-width:0}
.twf-rl-k{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pt-gold-deep,#8A6D1F)}
.twf-rl-list{list-style:none;margin:6px 0 0;padding:0;font-size:15px;line-height:1.55;color:var(--pt-ink,#111D3B);overflow-wrap:anywhere}
.twf-rl-list li+li{margin-top:6px}
.twf-rl-ask{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap-min,44px);padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:700;color:var(--pt-night,#0C1220);cursor:pointer;justify-self:start;text-align:left}
.twf-rl-ask svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.twf-rl-wait{display:none}
@media (prefers-reduced-motion:reduce){.twf-rl-chev{transition:none}}
/* the accept receipt: the disclosure under You're on */
.twf-offer .twf-rl{margin-top:14px}
/* the editor: Handbook > Roles, the CHRO and the CEO */
.twf-rle{padding-bottom:24px}
.twf-rle-intro{margin:4px 0 14px;font-size:14px;line-height:1.5;color:var(--pt-mute,#5A6076)}
.twf-rle-rows{display:grid;gap:6px}
.twf-rle-rows .rail svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.twf-rle-sec{margin:22px 0 0;display:grid;gap:10px}
.twf-rle-line{display:grid;gap:6px}
textarea.twf-su-in.twf-rle-in{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:10px 12px;font-size:16px;line-height:1.45;resize:vertical}
/* the app-wide 96px textarea floor (twf-flat-everywhere.css) is for free text; a role line is one sentence */
html body #pagesContainer textarea.twf-rle-in{min-height:48px}
.twf-rle-ctl{display:flex;align-items:center;gap:8px}
.twf-rle-draft{min-height:var(--tap-min,44px);padding:0 16px;border-radius:22px;border:0;background:var(--pt-mute-pill-bg,#E7E9F0);color:var(--pt-mute,#5A6076);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.twf-rle-draft[aria-pressed="true"]{background:var(--pt-warn-bg,#FEF1DE);color:var(--pt-warn,#935108)}
.twf-rle-del{margin-left:auto;width:44px;height:44px;min-height:var(--tap-min,44px);border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.twf-rle-del span{width:30px;height:30px;border-radius:50%;background:var(--pt-mute-pill-bg,#E7E9F0);color:var(--pt-mute,#5A6076);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.twf-rle-add{justify-self:start;min-height:var(--tap-min,44px)}
input.twf-su-in.twf-rle-alias{display:block;width:100%;box-sizing:border-box}
.twf-rle-hint{margin:0;font-size:13px;line-height:1.45;color:var(--pt-mute,#5A6076)}
.twf-rle-src{margin:22px 0 0;font-size:13px;color:var(--pt-mute,#5A6076)}
.twf-rle-src summary{min-height:var(--tap-min,44px);display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--pt-ink,#111D3B)}
.twf-rle-src ul{margin:4px 0 0;padding-left:18px;line-height:1.5;overflow-wrap:anywhere}
.twf-rle-save{margin-top:24px}
/* === slice 1: moment-aware shift screen (2026-10-08, shift-experience round) === */
/* The crew's shift screen, one moment at a time (twf-shift-page.js renderStaff).
   Flat: rows separated by space, never by lines. One navy action, one green. */
.twf-sm,.twf-sm-sheet{--sm-navy:var(--pt-night,#0C1220);--sm-second:#E8EBF0;--sm-tile:#ECEEF3}
.twf-sm{display:flex;flex-direction:column;min-height:calc(100dvh - 190px - env(safe-area-inset-bottom,0px));box-sizing:border-box;padding-left:4px;padding-right:4px;padding-bottom:24px}
.twf-sm .twf-sp-top{padding-top:8px}
.twf-sm .twf-sp-top .twf-su-back{border-radius:12px}
.twf-sm .twf-sp-h{margin-top:14px;overflow-wrap:anywhere}
.twf-sm-pill{display:inline-flex;align-items:center;gap:6px;max-width:72%;font-size:13px;font-weight:700;line-height:1.25;padding:6px 12px;border-radius:14px;background:var(--pt-mute-pill-bg);color:var(--pt-ink)}
.twf-sm-pill .dot{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.twf-sm-pill.is-ok{background:var(--pt-ok-bg);color:var(--pt-ok-pill)}
.twf-sm-pill.is-warn{background:var(--pt-warn-bg);color:var(--pt-warn-pill)}
.twf-sm-pill.is-warn .dot{background:var(--pt-warn-stripe)}
.twf-sm-pill.is-info{background:var(--pt-info-bg);color:var(--pt-info-pill)}
.twf-sm-when{margin-top:6px;font-size:16px;font-weight:600;color:var(--pt-mute)}
.twf-sm-when.is-warn{color:var(--pt-warn-pill)}
.twf-sm-rows{display:grid;gap:16px;margin-top:20px}
.twf-sm-row{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;box-sizing:border-box}
.twf-sm-row.is-tap,.twf-sm-row.is-door{cursor:pointer}
.twf-sm-row.is-tap:active,.twf-sm-row.is-door:active{transform:scale(var(--press-scale,.98))}
.twf-sm-ic{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--sm-tile);color:var(--pt-ink)}
.twf-sm-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.twf-sm-ic.t-gold{background:var(--pt-gold-wash);color:var(--pt-gold-deep)}
.twf-sm-ic.t-info{background:var(--pt-info-bg);color:var(--pt-info-pill)}
.twf-sm-ic.t-faces{background:none;justify-content:flex-start}
.twf-sm-face{width:28px;height:28px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--sm-navy);color:var(--pt-gold-hi);border:2px solid var(--pt-canvas,#F4F6FB)}
.twf-sm-face.is-more{margin-left:-12px;background:var(--pt-mute);color:#fff}
.twf-sm-m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.twf-sm-m .l1{font-size:16px;font-weight:700;line-height:1.3;color:var(--pt-ink);overflow-wrap:anywhere}
.twf-sm-m .l2{margin-top:1px;font-size:13px;line-height:1.4;color:var(--pt-mute);overflow-wrap:anywhere}
.twf-sm-chev{flex:none;font-size:22px;line-height:1;color:var(--pt-faint);transition:transform .15s}
.twf-sm-tag{display:inline-block;margin-left:6px;font-size:12px;font-weight:600;color:var(--pt-mute)}
.twf-sm-tag.is-warn{color:var(--pt-warn-pill)}
/* Get there, on this screen: the leave tile, the address, the door; no card, no lines, no button row (the dock has Directions) */
.twf-sm-gt .twf-gt{margin:20px 0 0}
.twf-sm-gt .twf-gt--light .twf-gt-card{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.twf-sm-gt .twf-gt-leave{padding:0}
.twf-sm-gt .twf-gt-l1{font-size:18px}
.twf-sm-gt .twf-gt--light .twf-gt-place,.twf-sm-gt .twf-gt--light .twf-gt-note{border-top:0;padding:0;margin-top:16px;gap:14px;align-items:center}
.twf-sm-gt .twf-gt-place .twf-gt-ic,.twf-sm-gt .twf-gt-note .twf-gt-ic{width:44px;height:44px;margin-top:0;padding:12px;box-sizing:border-box;border-radius:12px;background:var(--sm-tile);color:var(--pt-ink)}
.twf-sm-gt .twf-gt-venue{font-size:16px}
.twf-sm-gt .twf-gt-acts{display:none}
/* the crew, folded under its row */
.twf-sm-crew>summary{list-style:none}
.twf-sm-crew>summary::-webkit-details-marker{display:none}
.twf-sm-crew[open]>summary .twf-sm-chev{transform:rotate(90deg)}
.twf-sm-crewlist{margin-top:8px}
/* one-tap notes to the lead */
.twf-sm-notes-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pt-faint)}
.twf-sm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.twf-sm-chip{min-height:44px;padding:0 16px;border:0;border-radius:22px;background:var(--sm-second);font:inherit;font-size:15px;font-weight:600;color:var(--pt-ink);cursor:pointer}
.twf-sm-chip:disabled{opacity:.55}
/* the dock: the moment's one navy button, the quiet pair under it */
/* the dock stays above the tab bar while the page scrolls under it, like an iOS toolbar */
.twf-sm-dock{position:sticky;bottom:calc(88px + env(safe-area-inset-bottom,0px));margin-top:auto;padding:16px 0 8px;display:grid;gap:10px;background:var(--pt-canvas,#F4F6FB)}
.twf-sm-pair{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px}
.twf-sm-quiet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.twf-sm-btn{min-height:54px;min-width:0;padding:0 12px;border:0;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:17px;font-weight:700;cursor:pointer;box-sizing:border-box}
.twf-sm-btn svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.twf-sm-btn.is-wide{width:100%}
.twf-sm-btn.is-primary{background:var(--sm-navy);color:#fff}
.twf-sm-btn.is-primary svg{color:var(--pt-gold-hi)}
.twf-sm-btn.is-second{background:var(--sm-second);color:var(--pt-ink)}
.twf-sm-quiet .twf-sm-btn{min-height:48px;font-size:15px}
.twf-sm-pair .twf-sm-btn.is-second svg{display:none}
/* the page scrolls under the dock: a short fade, never a line */
.twf-sm-dock::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px;background:linear-gradient(to bottom,rgba(244,246,251,0),var(--pt-canvas,#F4F6FB));pointer-events:none}
.twf-sm-btn.is-stop{color:var(--pt-late)}
/* a plain line of text that is still a 44px button (Message instead) */
.twf-sm-btn.is-text{min-height:44px;background:transparent;color:var(--pt-ink);font-size:15px;font-weight:600}
.twf-sm-dm{margin-top:4px}
/* the fix for a refused offer (Wrap that shift), above the greyed Accept */
.twf-sm-fix{margin-bottom:0}
.twf-sm-btn:disabled{cursor:default}
.twf-sm-btn.is-primary:disabled{background:var(--pt-mute-pill-bg);color:var(--pt-faint)}
.twf-sm-btn.is-second:disabled{background:transparent;color:var(--pt-faint)}
.twf-sm-btn:active:not(:disabled){transform:scale(var(--press-scale,.98))}
.twf-sm-transit{margin:0;font-size:14px;font-weight:600;text-align:center;color:var(--pt-warn-pill)}
.twf-sm-week{margin:0;font-size:14px;text-align:center;color:var(--pt-mute)}
.twf-sm-week.warn{color:var(--pt-warn-pill)}
/* More about this shift */
.twf-sm-fold{margin-top:14px}
.twf-sm-more{margin-top:0}
.twf-sm-more>summary.twf-sm-moresum{display:flex;justify-content:center;gap:6px;font-size:14px;font-weight:600;color:var(--pt-mute)}
.twf-sm-moreinner{display:grid;gap:14px;margin-top:8px}
/* After */
.twf-sm-after{margin:18px 0 0;font-size:14px;line-height:1.5;color:var(--pt-mute)}
.twf-sm-link{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle;margin:-12px 0;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--pt-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* this screen's sheets: a small centred title, as in the prototypes */
.twf-ui-sheet.has-x.twf-sm-sheet .twf-ui-sheet-title{font-family:inherit;font-size:17px;text-align:center;padding:0 44px}
.twf-sm-sheet .twf-ui-sheet-msg{margin:10px 0 4px;font-size:14px;text-align:center;color:var(--pt-mute)}
.twf-sm-callout .twf-ui-sheet-msg{text-align:left;color:var(--pt-ink);line-height:1.5}
.twf-sm-mins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.twf-sm-min{min-height:64px;min-width:0;border:0;border-radius:16px;background:var(--sm-second);font:inherit;font-size:20px;font-weight:700;color:var(--pt-ink);cursor:pointer}
.twf-sm-min.is-other{width:100%;min-height:54px;margin-top:10px;font-size:16px}
.twf-sm-min.on{background:var(--sm-navy);color:#fff}
.twf-sm-otherin{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:13px;color:var(--pt-mute)}
.twf-sm-otherin[hidden]{display:none}
.twf-sm-otherin .twf-su-in{width:100%;box-sizing:border-box}
.twf-sm-send{margin-top:18px}
.twf-sm-sub{margin:6px 0 0;font-size:13px;text-align:center;color:var(--pt-mute)}
.twf-sm-reach{margin-top:10px}
.twf-sm-reasons{display:grid;gap:4px;margin-top:18px}
.twf-sm-radio{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:16px;font-weight:600;color:var(--pt-ink);text-align:left;cursor:pointer}
.twf-sm-radio .o{flex:none;width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:2px solid var(--pt-faint);display:flex;align-items:center;justify-content:center}
.twf-sm-radio .o svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;opacity:0}
.twf-sm-radio.on .o{background:var(--sm-navy);border-color:var(--sm-navy)}
.twf-sm-radio.on .o svg{opacity:1}
.twf-sm-out{margin-top:14px}
.twf-sm-calopts{display:grid;gap:14px;margin-top:10px}
.twf-sm-calopt{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.twf-sm-calopt .twf-sm-ic{background:var(--surface-0,#fff)}
/* === slice 6: teaching (moment tips, practice shift) === */
/* Moment tips (twf-spotlight-hints.js, MOMENT TIPS): one or two short
   sentences pointing at the control, a 44px X, no title. Blue is info. */
.twf-mt{position:fixed;z-index:var(--z-spotlight,20000);box-sizing:border-box;width:calc(100vw - 32px);max-width:320px;display:flex;align-items:flex-start;gap:2px;padding:4px 4px 4px 16px;background:var(--surface-0,#fff);border-radius:16px;box-shadow:0 18px 40px -12px rgba(12,18,32,.38),0 2px 8px rgba(12,18,32,.08);font-family:'DM Sans',-apple-system,sans-serif;animation:twfMtIn .22s cubic-bezier(.2,.8,.2,1)}
.twf-mt-t{flex:1 1 auto;min-width:0;margin:0;padding:11px 0 11px;font-size:15px;line-height:1.4;font-weight:500;color:var(--pt-ink,#111D3B)}
.twf-mt-x{flex:none;width:44px;height:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;color:var(--pt-mute,#5A6076)}
.twf-mt-xg{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pt-mute-pill-bg,#E7E9F0);color:var(--pt-mute,#5A6076)}
.twf-mt-arrow{position:absolute;left:var(--twf-mt-ax,50%);width:14px;height:14px;background:var(--surface-0,#fff);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.twf-mt[data-arrow="bottom"] .twf-mt-arrow{bottom:-6px}
.twf-mt[data-arrow="top"] .twf-mt-arrow{top:-6px}
.twf-mt[data-arrow="none"] .twf-mt-arrow{display:none}
.twf-mt-ring{position:fixed;z-index:var(--z-spotlight,20000);pointer-events:none;box-sizing:border-box;border:2.5px solid var(--pt-info-pill,#1D4ED8);border-radius:20px;box-shadow:0 0 0 5px var(--pt-info-bg,#E3EDFD)}
@keyframes twfMtIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.twf-mt{animation:none}}

/* Try a practice shift (twf-practice-shift.js): the real moment screens,
   flat, marked Practice in a blue pill, a 44px X, one primary. */
.twf-ps{position:fixed;inset:0;z-index:var(--z-spotlight,20000);overflow-y:auto;overflow-x:hidden;background:var(--pt-canvas,#F4F6FB);color:var(--pt-ink,#111D3B);font-family:'DM Sans',-apple-system,sans-serif;-webkit-overflow-scrolling:touch}
.twf-ps-in{box-sizing:border-box;max-width:430px;min-height:100%;margin:0 auto;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom))}
.twf-ps-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.twf-ps-pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:14px;background:var(--pt-info-bg,#E3EDFD);color:var(--pt-info-pill,#1D4ED8);font-size:13px;font-weight:700;letter-spacing:.01em}
.twf-ps-x{width:44px;height:44px;min-height:44px;margin-right:-7px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}
.twf-ps-xg{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pt-mute-pill-bg,#E7E9F0);color:var(--pt-mute,#5A6076)}
.twf-ps-status{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:6px 12px;border-radius:14px;font-size:13px;font-weight:700}
.twf-ps-status.is-wait{background:var(--pt-warn-bg,#FEF1DE);color:var(--pt-warn,#935108)}
.twf-ps-status.is-on{background:var(--pt-ok-bg,#DCF6EC);color:var(--pt-ok,#07704B)}
.twf-ps-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.twf-ps-status.is-wait .twf-ps-dot{background:var(--pt-warn-stripe,#E8830C)}
.twf-ps-h{margin:14px 0 0;font-size:26px;font-weight:700;line-height:1.2;color:var(--pt-ink,#111D3B);outline:none}
.twf-ps-at{color:var(--pt-mute,#5A6076)}
.twf-ps-when{margin-top:6px;font-size:16px;font-weight:600;color:var(--pt-ink,#111D3B)}
.twf-ps-when.is-wait{color:var(--pt-warn,#935108)}
.twf-ps-rows{display:grid;gap:16px;margin-top:24px}
.twf-ps-row,.twf-ps-leave{display:flex;align-items:center;gap:14px}
.twf-ps-ic{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center}
.twf-ps-ic.is-clock{background:var(--pt-gold-wash,#F6EED8);color:var(--pt-gold-deep,#8A6D1F)}
.twf-ps-ic.is-plain{background:var(--pt-mute-pill-bg,#E7E9F0);color:var(--pt-ink,#111D3B)}
.twf-ps-ic.is-info{background:var(--pt-info-bg,#E3EDFD);color:var(--pt-info-pill,#1D4ED8)}
.twf-ps-rw{flex:1 1 auto;min-width:0}
.twf-ps-l1{display:block;font-size:16px;font-weight:700;line-height:1.3}
.twf-ps-l1.is-big{font-size:18px}
.twf-ps-l2{display:block;margin-top:1px;font-size:13px;line-height:1.35;color:var(--pt-mute,#5A6076)}
.twf-ps-tile{width:58px;height:58px;border-radius:14px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--pt-gold-hi,#E3C46F),var(--pt-gold-stripe,#C9A84C));color:var(--pt-night,#0C1220)}
.twf-ps-tile-k{font-size:9px;font-weight:700;letter-spacing:.12em}
.twf-ps-tile-n{font-size:18px;font-weight:700;line-height:1.1}
.twf-ps-foot{margin-top:auto;padding-top:28px}
.twf-ps-coach{margin:0 0 10px;text-align:center;font-size:14px;font-weight:600;color:var(--pt-info-pill,#1D4ED8)}
.twf-ps-coach.is-nudge{color:var(--pt-ink,#111D3B)}
.twf-ps-acts{display:grid;gap:10px}
.twf-ps-acts.is-pair{grid-template-columns:2fr 1fr}
.twf-ps .twf-ps-go,.twf-ps .twf-ps-alt{margin:0;min-height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:700}
.twf-ps .twf-ps-alt{border:0;background:var(--pt-mute-pill-bg,#E7E9F0);color:var(--pt-ink,#111D3B);font-size:16px}
.twf-ps-under{margin:8px 0 0;text-align:center;font-size:13px;color:var(--pt-mute,#5A6076)}
.twf-ps-end{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 8px 0}
.twf-ps-check{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pt-ok-bg,#DCF6EC);color:var(--pt-ok,#07704B)}
.twf-ps-h.is-end{margin-top:20px}
.twf-ps-sub{margin:8px 0 0;font-size:16px;color:var(--pt-mute,#5A6076)}
/* === round2: markets === */
/* Markets (twf-market-admin.js): the cities we run. Flat rows separated by
   space, one navy primary (Add a market), 44px targets, nothing wider than
   the phone. The add and edit sheets are twfSheet with their own form. */
.twf-mkt .twf-mkt-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin:16px 0 4px}
.twf-mkt-list{display:grid;gap:8px}
.twf-mkt-row{min-height:64px}
.twf-mkt-row .m{min-width:0}
.twf-mkt-row .l1,.twf-mkt-row .l2{overflow-wrap:anywhere}
.twf-mkt-row .l2.twf-mkt-tl{margin-top:4px;color:var(--pt-mute,#5A6076)}
.twf-mkt-et{margin:20px 0 8px}
.twf-mkt-sheet .twf-ui-sheet-body{padding-bottom:4px}
.twf-mkt-form{display:grid;gap:14px;min-width:0;margin-top:10px}
.twf-mkt-f{min-width:0}
.twf-mkt-f .twf-su-in{width:100%;box-sizing:border-box;min-height:44px}
.twf-mkt-fh{margin:-6px 0 0;font-size:13px;line-height:1.4;color:var(--pt-mute,#5A6076)}
.twf-mkt-f .twf-mkt-fh{margin:6px 0 0}
.twf-mkt-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.twf-mkt-times{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.twf-mkt-code{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.twf-mkt-swrow,.twf-mkt-fact{padding-left:0;padding-right:0;background:transparent}
.twf-mkt-swrow .rr{flex:none}
.twf-mkt-transit{min-height:56px}
.twf-mkt-msg{margin:0;min-height:0;font-size:14px;line-height:1.4;color:var(--pt-mute,#5A6076)}
.twf-mkt-msg:empty{display:none}
.twf-mkt-msg.is-bad{color:var(--pt-late,#C42121);font-weight:600}
.twf-mkt-form .twf-mkt-save{width:100%;min-height:52px;margin:0}
.twf-mkt-form .twf-mkt-clear{width:100%;min-height:44px;margin:0}
/* the header's View a market sheet (twf-markets.js) wears the same 44px X; its heading clears it */
.twf-mk-card .twf-mk-h{padding-right:48px}

/* === round2: crew privacy === */
/* A coworker the viewer may not see yet: a count, or on the day a first name with no door. */
.twf-cp-anon .l2{overflow-wrap:anywhere}
.twf-cp-first .rail{font-size:13px;font-weight:700}
.twf-rb-count{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:14px;border-radius:18px;background:var(--surface-0,#F4F6FB)}
.twf-rb-count .rail{flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.twf-rb-count .rail svg{width:22px;height:22px}
.twf-rb-anon{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px}
.twf-rb-av{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2,#E9EDF5);color:var(--text-2);font-size:15px;font-weight:700}
.twf-rb-av svg{width:20px;height:20px}
.twf-rb-anon .twf-rb-t,.twf-rb-anon .twf-rb-s{display:block}

/* === round2: groups === */
/* Property groups (twf-restrictions.js, twf-venue.js). Rows separate by
   space, never a line; the open chevron beside a person chip is its own 44px
   target so the chip stays the door to the contact sheet. The count above
   the preview is information, so it is blue. */
.twf-vn-groups:empty{display:none}
.twf-pg-entry{margin-top:12px}
.twf-pg-link{margin-top:4px}
.twf-pg-person{display:flex;align-items:center;gap:8px}
.twf-pg-person .twf-person{flex:1 1 auto;min-width:0}
.twf-pg-open{flex:none;width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:22px;background:transparent;color:var(--pt-mute,#5A6076);font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.twf-pg-open:focus-visible{outline:2px solid var(--pt-info-pill,#1D4ED8);outline-offset:2px}
.twf-pg-count{display:flex;align-items:flex-start;gap:12px;margin:4px 0 8px;padding:12px 14px;border-radius:14px;background:var(--pt-info-bg,#E3EDFD);color:var(--pt-ink,#111D3B)}
.twf-pg-count .n{flex:none;min-width:28px;font-size:26px;font-weight:700;line-height:1.1;color:var(--pt-info-pill,#1D4ED8)}
.twf-pg-count .t{font-size:14px;line-height:1.4}
.twf-pg-new,.twf-pg-edit{margin:12px 0 20px}
.twf-pg-save{margin-top:16px}
.twf-pg-end{margin-top:20px}
.twf-pg-form .twf-su-in{width:100%;box-sizing:border-box}
.twf-pg-form .twf-pt-chips{margin-bottom:12px}

/* === round2: foundation (flat iOS, 2026-10-08) ===
   One X, nothing clipped, 44px targets. The hairlines this pass removed were
   taken out where they were set, not overridden here. */
/* THE X (twfCloseX in twf-ui.js): in a header row it is the row's last item */
.twf-ui-sheet-x.twf-ui-x-inline{position:relative;top:auto;right:auto;flex:none;margin:-6px -10px -6px auto}
@media (min-width:768px){.twf-ui-sheet-x.twf-ui-x-inline{top:auto;right:auto}}
/* the tour: over the picture panel, a white glyph well; on the bare navy card a faint one */
.twf-tour-card .twf-ui-sheet-x-g{background:rgba(255,255,255,.8);color:var(--text-2,#5A6076)}
.twf-tour-card.is-compact .twf-ui-sheet-x-g,.twf-tour-card:not(:has(.twf-tour-art)) .twf-ui-sheet-x-g{background:rgba(255,255,255,.12);color:var(--action-primary-fg,#fff)}
.twf-tour-card.is-compact .twf-tour-top,.twf-tour-card:not(:has(.twf-tour-art)) .twf-tour-top{padding-right:40px}
/* a tip: the X at its corner, the eyebrow clear of it, every button 44px */
.twf-hint-popover .twf-ui-sheet-x{top:4px;right:4px}
.twf-hint-popover-eyebrow{padding-right:40px}
.twf-hint-popover-dismiss,.twf-hint-popover-next,.twf-hint-popover-skip{min-height:44px}
/* the legacy contact card and the More sheet: the same round grey glyph */
.twf-contact-sheet .twf-ui-sheet-x{align-self:flex-start;margin-top:-10px}
.twf-sheet-close-btn{border:0;background:radial-gradient(circle,var(--pt-mute-pill-bg,#E7E9F0) 15px,transparent 15.5px);color:var(--text-2,#5A6076)}
.twf-sheet-close-btn:hover,.twf-sheet-close-btn:focus-visible{background:radial-gradient(circle,rgba(12,18,32,.12) 15px,transparent 15.5px)}
.twf-sheet-close-btn svg{width:14px;height:14px;stroke-width:2.6}
/* the setup wizard's typed X: a 44px target drawing the same glyph well */
.twf-ob-close{width:44px;height:44px;line-height:44px;border-radius:50%;background:radial-gradient(circle,var(--pt-mute-pill-bg,#E7E9F0) 15px,transparent 15.5px)}
/* the .twf-mk-sheet family: twf-ui.js adds the X; the heading clears it */
.twf-mk-card>.twf-ui-sheet-x+.twf-mk-h,.twf-mk-card>.twf-ui-sheet-x~.twf-mk-h{padding-right:44px}
/* the catalog sheets (venue edit, add a venue): grey, not the head's gold link colour */
.twf-catalog-head .twf-ui-sheet-x{color:var(--text-2,#5A6076)}
/* First Days: the standard glyph, still pinned on a phone (M40.27) */
#twfJourneyOverlay .twf-jr-close.twf-ui-sheet-x{background:none!important;box-shadow:none!important}
/* First Days: on a phone the chapters are a row of numbered marks that fits,
   not a strip that scrolls sideways (each keeps its title for a screen reader) */
@media (max-width:880px){
  .twf-jr-rail-item{flex:1 1 0;min-width:0;max-width:48px;min-height:44px;justify-content:center;padding:0;gap:0}
  .twf-jr-rail-item.is-active,.twf-jr-rail-item:hover{background:none}
  .twf-jr-rail-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Settings > Change password: [hidden] beats the form's display:flex */
.twf-pf-f[hidden],.twf-se-pw[hidden]{display:none}
/* the top strip never wraps; beside the market picker the brand is the shield alone */
.topbar>.twf-topbar-brand+div{flex-wrap:nowrap!important;min-width:0}
.topbar:has(#twfMarketSwitch) .twf-topbar-brand .tx{display:none}
/* small visuals, 44px targets: the hit area reaches past the drawn pill */
button.twf-pt-pill,a.twf-pt-pill,.twf-pe-sms,.twf-cs-copy,.twf-mk-switch,.twf-sp-at{position:relative}
button.twf-pt-pill::before,a.twf-pt-pill::before,.twf-pe-sms::before,.twf-cs-copy::before,.twf-mk-switch::before{content:"";position:absolute;inset:-5px -2px}
.twf-sp-at::before{content:"";position:absolute;inset:-8px -2px}
.twf-su-link{min-width:44px;justify-content:center}
/* === round2: sort-filter === */
/* 2026-10-08. One Sort & filter per list (twf-arrange.js; prototypes
   ios-ShiftsList and ios-SortSheet). Daryan: "menus and sorting need to be
   re-engineered to be smarter ... no horizontal scrolls." Shifts, Open
   shifts, the calendar, Shift requests, People and Sign-in links each draw
   the list's search (where it has one) and one button beside it: an icon
   and "Sort & filter", or what is set ("Venue · Short on people"); navy with
   a gold count while a filter is on, and a round clear beside it. Nothing
   here scrolls sideways; the button's words end in an ellipsis instead. */
.twf-sf{display:flex;align-items:center;gap:8px;min-width:0;margin:10px 0 4px}
.twf-sf-q{flex:1 1 0;min-width:0}
.twf-sf-q .twf-su-in{display:block;width:100%;min-height:44px;margin:0;box-sizing:border-box}
.twf-sf-btn{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;max-width:100%;min-height:44px;margin:0;padding:0 14px;box-sizing:border-box;
  border:0;border-radius:14px;background:var(--pt-mute-pill-bg,#E7E9F0);color:var(--pt-ink,#111D3B);font:inherit;font-size:15px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.twf-sf.has-q .twf-sf-btn{max-width:56%}
.twf-sf-btn .ic{display:inline-flex;flex:none}
.twf-sf-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.twf-sf-btn .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.twf-sf-btn.is-on{background:var(--pt-night,#0C1220);color:#fff}
.twf-sf-btn .b{flex:none;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:var(--pt-gold-hi,#E3C46F);color:var(--pt-night,#0C1220);font-size:12px;font-weight:700;line-height:20px;text-align:center}
.twf-sf-btn:focus-visible,.twf-sf-clear:focus-visible{outline:2px solid var(--action-primary,#0C1220);outline-offset:2px}
.twf-sf-clear{flex:none;width:44px;height:44px;min-height:44px;margin:0 -6px 0 -4px;padding:0;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--pt-mute,#5A6076)}
.twf-sf-clear .g{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pt-mute-pill-bg,#E7E9F0)}
.twf-sf-clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.twf-sf-sum{margin:2px 4px 6px;font-size:13px;color:var(--pt-mute,#5A6076)}
.twf-ar-listh+.twf-sf{margin-top:2px}
.twf-sil-where{margin:6px 0 0}
/* the sheet: twfSheet (twf-ui.js) with its grab handle and its 44px X, on
   the prototype's grey, white rows on it; Reset, the title and the X on one
   line; the segmented Group by; the rows; "Show N" at the foot */
.twf-ui-sheet.twf-sf-sheet .twf-ui-sheet-panel{background:var(--pt-canvas-sheet,#F2F3F7);padding:0 16px 16px}
.twf-ui-sheet.twf-sf-sheet .twf-ui-sheet-x{top:34px;right:10px}
.twf-sf-sheet .twf-ui-sheet-body{padding:2px 4px 4px}
.twf-sf-body{min-width:0}
.twf-sf-top{display:flex;align-items:center;min-height:44px;margin:0 0 2px}
.twf-sf-reset,.twf-sf-back,.twf-sf-gap{flex:0 0 60px}
.twf-sf-reset{height:44px;min-height:44px;padding:0 4px;border:0;background:transparent;font:inherit;font-size:16px;font-weight:600;color:var(--pt-mute,#5A6076);text-align:left;cursor:pointer}
.twf-sf-reset[disabled]{opacity:.4;cursor:default}
.twf-sf-back{height:44px;min-height:44px;padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:flex-start;color:var(--pt-ink,#111D3B);cursor:pointer}
.twf-sf-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.twf-sf-title{flex:1 1 auto;min-width:0;margin:0;font-size:17px;font-weight:700;line-height:1.2;text-align:center;color:var(--pt-ink,#111D3B)}
.twf-sf-lab{margin:16px 4px 8px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--pt-mute,#6E7385)}
.twf-sf-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--pt-seg-track,#E3E5EB)}
.twf-sf-seg.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.twf-sf-seg.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.twf-sf-seg.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.twf-sf-sb{min-width:0;height:44px;min-height:44px;margin:0;padding:0 4px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:14px;font-weight:600;color:#3E4658;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.twf-sf-sb.is-on{background:#fff;color:var(--pt-ink,#0C1220);font-weight:700;box-shadow:0 1px 3px rgba(12,18,32,.12)}
.twf-sf-list{display:grid;gap:6px}
.twf-sf-opt,.twf-sf-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;margin:0;padding:0 16px;box-sizing:border-box;border:0;border-radius:16px;
  background:#fff;font:inherit;font-size:16px;font-weight:600;color:var(--pt-ink,#0C1220);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.twf-sf-opt .l,.twf-sf-row .l{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.twf-sf-opt .n{flex:none;color:var(--pt-mute,#6E7385);font-weight:500;font-variant-numeric:tabular-nums}
.twf-sf-opt .ck{flex:none;width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:2px solid #D5D8E0;display:flex;align-items:center;justify-content:center}
.twf-sf-opt.is-on .ck{border:0;background:var(--pt-night,#0C1220)}
.twf-sf-opt .ck svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.twf-sf-opt.is-zero{opacity:.45;cursor:default}
.twf-sf-row .v{flex:0 1 auto;min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pt-mute,#6E7385);font-weight:500}
.twf-sf-row .cv{display:inline-flex;flex:none;margin-left:-6px;color:#B8BCC7}
.twf-sf-row .cv svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.twf-sf-opt:focus-visible,.twf-sf-row:focus-visible,.twf-sf-sb:focus-visible,.twf-sf-reset:focus-visible,.twf-sf-back:focus-visible{outline:2px solid var(--action-primary,#0C1220);outline-offset:2px}
.twf-sf-dot{flex:none;width:10px;height:10px;border-radius:50%}
.twf-sf-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.twf-sf-sheet .twf-ui-sheet-acts{margin-top:16px}
.twf-sf-sheet .twf-ui-sheet-acts .twf-pt-cta{min-height:54px;border-radius:16px}
.twf-sf-sheet .twf-ui-sheet-acts .twf-pt-cta[disabled]{opacity:.5;cursor:default}
/* the calendar: the venue colours, words that wrap under the grid */
.cal-legend.twf-cal-venues{display:flex;flex-wrap:wrap;gap:6px 14px;margin:4px 0 10px}
.cal-legend.twf-cal-venues .cal-legend-item{display:inline-flex;align-items:center;gap:6px}
@media (min-width:768px){.twf-sf.has-q .twf-sf-btn{max-width:320px}}
/* === end round2: sort-filter === */

/* === round2: client roster === */
/* 2026-10-08: Send roster to the client, the client's requests and review
   (twf-client-roster.js). Flat: rows separated by spacing, never a line.
   Approve is a tinted button, not a second navy primary on the shift page. */
.twf-cr-slot{margin-top:6px}
.twf-cr-slot:empty{display:none}
.twf-cr-open{margin-left:auto}
.twf-cr-row .twf-pt-pill{margin-left:auto;flex:none}
.twf-cr-req .m{flex:1 1 auto;min-width:0}
.twf-cr-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.twf-cr-yes{min-height:44px;padding:0 20px;border:0;border-radius:22px;background:var(--pt-mute-pill-bg,#E7E9F0);color:var(--pt-ink,#111D3B);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.twf-cr-no{min-height:44px;padding:0 14px;border:0;border-radius:22px;background:transparent;color:var(--pt-mute,#5A6076);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.twf-cr-yes:disabled,.twf-cr-no:disabled{opacity:.5}
.twf-cr-loading{padding:28px 0;text-align:center;color:var(--pt-mute,#5A6076);font-size:15px}
.twf-cr-lede{margin:0 0 12px;font-size:15px;line-height:1.45;color:var(--pt-mute,#5A6076)}
.twf-cr-note{margin:0 0 12px;padding:12px 14px;border-radius:14px;font-size:14.5px;line-height:1.45}
.twf-cr-note.is-warn{background:var(--pt-warn-bg,#FEF1DE);color:var(--pt-warn,#935108)}
.twf-cr-note.is-late{background:var(--pt-late-bg,#FDE7E7);color:var(--pt-late,#A61B1B)}
.twf-cr-tos{display:grid}
.twf-cr-to{width:100%;text-align:left}
.twf-cr-to .l2,.twf-cr-contact .l2{overflow-wrap:anywhere}
.twf-cr-check{position:relative;flex:none;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--pt-faint,#9AA0B2)}
.twf-cr-check.on{background:var(--action-primary);box-shadow:none}
.twf-cr-check.on::after{content:'';position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid var(--action-primary-fg,#fff);border-width:0 2px 2px 0;transform:rotate(45deg)}
.twf-cr-manage{margin-left:auto}
.twf-cr-preview{max-width:100%;overflow:hidden;border-radius:18px;background:var(--pt-canvas,#EEF1F7)}
.twf-cr-preview img{max-width:100%}
.twf-cr-preview table[width]{width:100%!important;max-width:100%!important;table-layout:fixed}
.twf-cr-preview td{white-space:normal!important;overflow-wrap:anywhere}
.twf-cr-msg{min-height:20px;margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--pt-late,#A61B1B)}
.twf-cr-go{margin-top:12px}
.twf-cr-go:disabled{opacity:.5}
.twf-cr-contact{width:100%;text-align:left}
.twf-cr-gets{color:var(--pt-info,#1D4ED8)}
.twf-cr-add{margin-top:18px}
.twf-cr-f{display:block}
.twf-cr-f .twf-su-in,.twf-cr-set-sheet .twf-su-in{display:block;width:100%;box-sizing:border-box}
.twf-cr-k{display:block;margin:14px 0 6px;font-size:13px;font-weight:700;color:var(--pt-mute,#5A6076)}
.twf-cr-roles{margin-bottom:4px}
.twf-cr-role.on{background:var(--action-primary);color:var(--action-primary-fg);border-color:transparent}
.twf-cr-tg{width:100%;text-align:left}
.twf-cr-tg .twf-sw{margin-left:auto;flex:none}
.twf-cr-save{margin-top:18px}
.twf-cr-back{margin-top:10px}
.twf-cr-remove{margin-top:8px;color:var(--pt-late,#A61B1B)}
.twf-cr-page .twf-sp-d{margin-bottom:6px}
.twf-cr-stars{display:inline-flex;gap:1px;font-size:17px;letter-spacing:0}
.twf-cr-stars span{color:var(--pt-line,#D5D9E3)}
.twf-cr-stars span.on{color:var(--pt-gold,#C9A84C)}
.twf-cr-flag{padding-bottom:6px}
.twf-cr-flag.is-dns .twf-person-sub{color:var(--pt-late,#A61B1B)}
.twf-cr-said{margin:0 0 6px 50px;font-size:15px;line-height:1.45;color:var(--pt-ink,#111D3B)}
.twf-cr-said .by{display:block;margin-top:3px;font-size:13px;color:var(--pt-mute,#5A6076)}
.twf-cr-q{margin:6px 0 6px 50px}
.twf-cr-q .twf-cr-k{margin-top:4px}
.twf-cr-pq{gap:8px}
.twf-cr-review{margin:0 0 12px;padding:14px 16px;border-radius:16px;background:var(--surface-1,#fff)}
.twf-cr-rh{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.twf-cr-rh .who{font-size:15px;font-weight:700}
.twf-cr-review p{margin:10px 0 0;font-size:15px;line-height:1.45}
.twf-cr-review p .twf-cr-k{margin:0 0 2px}
.twf-cr-pp{margin-top:10px}
.twf-cr-pp.is-flag .twf-person-sub{color:var(--pt-late,#A61B1B)}
.twf-cr-revoke{margin-top:16px}
.twf-cr-set{width:100%;text-align:left}
.twf-cr-val{overflow-wrap:anywhere}
.twf-cr-quote{padding:12px 0}
.twf-cr-quote p{margin:0;font-size:15.5px;line-height:1.5}
.twf-cr-quote .by{margin-top:6px;font-size:13px;color:var(--pt-mute,#5A6076)}
.twf-cr-export{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.twf-cr-dl{display:flex;align-items:center;justify-content:center;text-decoration:none}
.twf-cr-send-sheet .twf-ui-sheet-body,.twf-cr-contacts-sheet .twf-ui-sheet-body,.twf-cr-set-sheet .twf-ui-sheet-body{overflow-x:hidden}
/* === round2: referrals === */
/* Refer a friend (twf-app-prompts.js, 2026-10-08). One navy button (Share
   your link), raised white cards separated by space, never a line. Gold is
   achievement only: the milestones reached, the first shift, the money. Blue
   is a person on the way. The confetti is decoration and is not drawn for
   reduced motion. */
.twf-rf-share-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin:0;border-radius:16px;font-size:17px;font-weight:700;background:var(--sheet-cta);box-shadow:var(--sheet-cta-shadow)}
.twf-rf-share-go svg{flex:none;width:20px;height:20px;color:var(--pt-gold-hi)}
.twf-rf-link{display:flex;align-items:center;gap:8px;margin-top:10px;padding:4px 4px 4px 14px;border-radius:14px;background:var(--surface-1,#fff);box-shadow:var(--elev-1)}
.twf-rf-link .twf-ref-share-url{flex:1 1 auto;min-width:0;font-size:13px;color:var(--pt-mute)}
.twf-rf-link .twf-ref-share-copy{flex:none;width:auto;min-height:44px;margin:0;padding:0 18px}
.twf-rf-link-b{margin:8px 2px 0;font-size:13px;line-height:1.4;color:var(--pt-mute)}
/* the scoreboard */
.twf-rf-score{margin:18px 0 8px;padding:18px 14px 16px;border-radius:22px;background:var(--surface-1,#fff);box-shadow:var(--elev-3)}
.twf-rf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.twf-rf-stat .n{display:block;font-size:30px;font-weight:800;line-height:1.1;color:var(--pt-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.twf-rf-stat .l{display:block;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--pt-mute)}
.twf-rf-stat.is-gold .n{color:var(--pt-gold-deep)}
.twf-rf-miles{display:flex;justify-content:space-between;gap:8px;margin:18px 2px 0}
.twf-rf-mile{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.twf-rf-mile .medal{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2,#E9EDF5);color:var(--pt-mute);font-size:16px;font-weight:800}
.twf-rf-mile .medal svg{width:22px;height:22px}
.twf-rf-mile.is-on .medal{background:var(--tour-go);color:var(--pt-night);box-shadow:var(--tour-go-shadow)}
.twf-rf-mile.is-next .medal{background:var(--pt-gold-wash);color:var(--pt-gold-deep);box-shadow:inset 0 0 0 2px var(--pt-gold-stripe)}
.twf-rf-mile .cap{font-size:12px;font-weight:600;color:var(--pt-mute)}
.twf-rf-miles-b{margin-top:12px;font-size:13.5px;line-height:1.4;color:var(--pt-mute);text-align:center}
/* a card per person */
.twf-rf-cards{display:grid;gap:12px}
.twf-rf-card{padding:14px;border-radius:18px;background:var(--surface-1,#fff);box-shadow:var(--elev-2)}
.twf-rf-card.is-done{box-shadow:var(--elev-brand),var(--elev-2)}
.twf-rf-top{display:flex;align-items:center;gap:12px}
.twf-rf-mono{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pt-night);color:var(--pt-gold-hi);font-size:15px;font-weight:700}
.twf-rf-mono.is-sm{width:36px;height:36px;font-size:14px}
.twf-rf-card.is-stop .twf-rf-mono{background:var(--surface-2,#E9EDF5);color:var(--pt-mute)}
.twf-rf-m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.twf-rf-name{font-size:16px;font-weight:700;line-height:1.3;color:var(--pt-ink);overflow-wrap:anywhere}
.twf-rf-sub{margin-top:1px;font-size:12.5px;color:var(--pt-mute)}
.twf-rf-pill{flex:none;max-width:46%;white-space:normal;text-align:center;line-height:1.25}
.twf-pt-pill.p-gold{background:var(--pt-gold-wash);color:var(--pt-gold)}
.twf-rf-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:14px 0 0}
.twf-rf-track .seg{height:8px;border-radius:4px;background:var(--surface-2,#E9EDF5)}
.twf-rf-track .seg.on{background:var(--pt-info-stripe)}
.twf-rf-track .seg.now{animation:twfRfNow 1.8s ease-in-out infinite}
.twf-rf-track.is-done .seg.on{background:var(--tour-go)}
.twf-rf-track.is-stop .seg.on{background:var(--pt-mute-pill-bg)}
.twf-rf-track.is-mini{display:grid;width:100%;max-width:170px;gap:3px;margin:6px 0 2px}
.twf-rf-track.is-mini .seg{height:5px}
.twf-rf-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:6px}
.twf-rf-steps span{font-size:11px;font-weight:600;line-height:1.2;text-align:center;color:var(--pt-faint);overflow-wrap:anywhere}
.twf-rf-steps span.on{color:var(--pt-mute)}
.twf-rf-steps span.now{color:var(--pt-ink);font-weight:800}
.twf-rf-note{margin-top:10px;font-size:14px;line-height:1.4;color:var(--pt-ink)}
.twf-rf-card.is-done .twf-rf-note{color:var(--pt-gold);font-weight:700}
.twf-rf-card.is-stop .twf-rf-note{color:var(--pt-mute)}
.twf-rf-wait{margin-top:4px;font-size:13px;line-height:1.4;color:var(--pt-warn-pill)}
.twf-rf-empty{padding:24px 18px;border-radius:18px;background:var(--surface-1,#fff);box-shadow:var(--elev-1);text-align:center}
.twf-rf-empty-ic{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pt-gold-wash);color:var(--pt-gold-deep)}
.twf-rf-empty-ic svg{width:24px;height:24px}
.twf-rf-empty-t{font-size:16px;font-weight:700;color:var(--pt-ink)}
.twf-rf-empty-b{margin-top:4px;font-size:14px;line-height:1.45;color:var(--pt-mute)}
/* the city board */
.twf-pt-sh .twf-rf-count{margin-left:auto;padding-left:12px;font-size:13px;font-weight:600;color:var(--pt-mute);white-space:nowrap}
.twf-rf-board{display:grid;gap:8px;margin-bottom:6px}
.twf-rf-rank{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:16px;background:var(--surface-1,#fff);box-shadow:var(--elev-1)}
.twf-rf-rank .pos{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2,#E9EDF5);font-size:14px;font-weight:800;color:var(--pt-ink)}
.twf-rf-rank.is-first .pos{background:var(--tour-go);color:var(--pt-night)}
.twf-rf-rank .who{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;color:var(--pt-ink);overflow-wrap:anywhere}
.twf-rf-rank .cnt{flex:none;font-size:18px;font-weight:800;color:var(--pt-ink);font-variant-numeric:tabular-nums}
.twf-rf-rank.is-you{background:var(--pt-info-bg)}
/* a friend by name, folded */
.twf-rf-add{margin:22px 0 8px}
.twf-rf-add>summary{list-style:none}
.twf-rf-add>summary::-webkit-details-marker{display:none}
.twf-rf-add-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 16px;border-radius:14px;background:var(--surface-1,#fff);font-size:15px;font-weight:600;color:var(--pt-ink);cursor:pointer}
.twf-rf-chev{flex:none;font-size:22px;line-height:1;color:var(--pt-faint);transition:transform .15s}
.twf-rf-add[open] .twf-rf-chev{transform:rotate(90deg)}
.twf-rf-add .twf-form{margin-top:12px}
.twf-rf-add .twf-rf-send{width:100%;min-height:48px}
/* Who referred you: the typed search's answers */
.twf-obref-pick .twf-rf-mono,.twf-obref-picked .twf-rf-mono{margin-right:2px}
.twf-obref-pick .m,.twf-obref-picked .m{min-width:0}
.twf-obref-msg{color:var(--pt-warn-pill)}
.twf-obref-none{line-height:1.45}
/* the first shift, celebrated once */
.twf-rf-cele-art{position:relative;height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:4px 0 0}
.twf-rf-cele-medal{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tour-go);color:var(--pt-night);box-shadow:var(--tour-go-shadow);animation:twfRfPop .55s cubic-bezier(.2,1.4,.4,1) both}
.twf-rf-cele-medal svg{width:36px;height:36px}
.twf-rf-cele-art .bit{position:absolute;top:50%;left:50%;width:8px;height:12px;border-radius:2px;opacity:0;animation:twfRfBurst 1.2s ease-out forwards}
.twf-rf-cele-art .bit.b0{background:var(--pt-gold-hi)}
.twf-rf-cele-art .bit.b1{background:var(--pt-gold-stripe)}
.twf-rf-cele-art .bit.b2{background:var(--pt-night-3)}
.twf-rf-cele-art .bit.b3{background:var(--pt-info-stripe)}
.twf-rf-cele-art .bit.b4{background:var(--pt-gold-deep)}
.twf-rf-cele-art .bit.b5{background:var(--pt-info-bg)}
.twf-rf-cele-art .bit:nth-child(1){--dx:-150px;--dy:-40px;--r:200deg}
.twf-rf-cele-art .bit:nth-child(2){--dx:-120px;--dy:30px;--r:-160deg;animation-delay:.04s}
.twf-rf-cele-art .bit:nth-child(3){--dx:-90px;--dy:-55px;--r:120deg;animation-delay:.08s}
.twf-rf-cele-art .bit:nth-child(4){--dx:-60px;--dy:45px;--r:-90deg}
.twf-rf-cele-art .bit:nth-child(5){--dx:-40px;--dy:-60px;--r:240deg;animation-delay:.06s}
.twf-rf-cele-art .bit:nth-child(6){--dx:-20px;--dy:55px;--r:-200deg;animation-delay:.1s}
.twf-rf-cele-art .bit:nth-child(7){--dx:20px;--dy:-58px;--r:180deg;animation-delay:.02s}
.twf-rf-cele-art .bit:nth-child(8){--dx:40px;--dy:52px;--r:-140deg;animation-delay:.07s}
.twf-rf-cele-art .bit:nth-child(9){--dx:60px;--dy:-48px;--r:100deg}
.twf-rf-cele-art .bit:nth-child(10){--dx:90px;--dy:40px;--r:-220deg;animation-delay:.05s}
.twf-rf-cele-art .bit:nth-child(11){--dx:120px;--dy:-30px;--r:160deg;animation-delay:.09s}
.twf-rf-cele-art .bit:nth-child(12){--dx:150px;--dy:35px;--r:-120deg;animation-delay:.03s}
.twf-rf-cele-art .bit:nth-child(13){--dx:-135px;--dy:5px;--r:90deg;animation-delay:.12s}
.twf-rf-cele-art .bit:nth-child(14){--dx:135px;--dy:-5px;--r:-90deg;animation-delay:.12s}
.twf-rf-cele-art .bit:nth-child(15){--dx:-75px;--dy:-20px;--r:300deg;animation-delay:.15s}
.twf-rf-cele-art .bit:nth-child(16){--dx:75px;--dy:20px;--r:-300deg;animation-delay:.15s}
.twf-rf-cele-art .bit:nth-child(17){--dx:-105px;--dy:58px;--r:45deg;animation-delay:.18s}
.twf-rf-cele-art .bit:nth-child(18){--dx:105px;--dy:-58px;--r:-45deg;animation-delay:.18s}
@keyframes twfRfBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.6) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(1) rotate(var(--r,0deg))}}
@keyframes twfRfPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes twfRfNow{0%,100%{opacity:1}50%{opacity:.55}}
.twf-rf-cele .twf-ui-sheet-title{text-align:center;padding:0 44px}
.twf-rf-cele .twf-ui-sheet-msg{text-align:center}
.twf-rf-cele-art.is-still .bit{display:none}
@media (prefers-reduced-motion: reduce){
  .twf-rf-cele-medal,.twf-rf-track .seg.now{animation:none}
  .twf-rf-cele-art .bit{display:none}
}
/* === round2: recognition === */
/* The note under a badge (twf-shift-review.js, twf-review-one.js, the Quick
   Badge popup): a labelled field with a live count, amber until it is long
   enough for the server, then quiet. */
.twf-sr-note,.twf-ro-note{margin:14px 0 0;min-width:0}
.twf-sr-note-l,.twf-ro-note-l{display:block;margin:0 0 6px;font-size:15px;font-weight:700;color:var(--pt-ink,#111D3B)}
.twf-sr-note-in,.twf-ro-note-in{display:block;width:100%;box-sizing:border-box;min-height:88px;padding:12px 14px;font-size:16px;line-height:1.4;resize:vertical}
.twf-sr-note-c,.twf-ro-note-c{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--pt-warn,#935108)}
.twf-sr-note-c.is-met,.twf-ro-note-c.is-met{color:var(--pt-mute,#5A6076);font-weight:500}

/* The one Review screen (twf-review-one.js). Flat: sections separate by
   space, rows by space, never a line. One navy primary at a time. */
.twf-ro{min-width:0}
.twf-ro-sec{margin:22px 0 0;min-width:0}
.twf-ro-h{margin:0 0 8px;font-size:20px;font-weight:700;line-height:1.2;color:var(--pt-ink,#111D3B)}
.twf-ro-sh{margin:16px 0 8px;font-size:15px;font-weight:700;color:var(--pt-ink,#111D3B)}
.twf-ro-opt{margin-left:6px;font-size:13px;font-weight:500;color:var(--pt-mute,#5A6076)}
.twf-ro-limit{margin:-2px 0 10px;font-size:14px;color:var(--pt-mute,#5A6076)}
.twf-ro-muted{margin:6px 0;font-size:15px;line-height:1.45;color:var(--pt-mute,#5A6076)}
.twf-ro-empty{display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;background:var(--surface-1,#fff);font-size:15px;line-height:1.4;color:var(--pt-mute,#5A6076)}
.twf-ro-empty svg{flex:none}
.twf-ro-shift{margin:14px 0 4px}
.twf-ro-shift-t{font-size:16px;font-weight:700;color:var(--pt-ink,#111D3B);overflow-wrap:anywhere}
.twf-ro-shift-s{font-size:13px;color:var(--pt-mute,#5A6076)}
.twf-ro-row{display:flex;align-items:center;gap:6px;min-width:0}
.twf-ro-rowbtn,.twf-ro-pick{flex:1 1 auto;display:flex;align-items:center;gap:12px;min-width:0;min-height:60px;padding:8px 0;border:0;background:transparent;text-align:left;font-family:inherit;color:inherit;cursor:pointer}
.twf-ro-pick{width:100%}
.twf-ro-av{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2,#E9EDF5);color:var(--pt-ink,#111D3B);font-size:14px;font-weight:700}
.twf-ro-m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.twf-ro-name,.twf-ro-l1{font-size:16px;font-weight:700;color:var(--pt-ink,#111D3B);overflow-wrap:anywhere}
.twf-ro-l1 .twf-ro-name{font-size:inherit}
.twf-ro-sub{font-size:13px;line-height:1.35;color:var(--pt-mute,#5A6076);overflow-wrap:anywhere}
.twf-ro-quote{font-size:14px;line-height:1.4;color:var(--pt-ink,#111D3B);overflow-wrap:anywhere}
.twf-ro-hint{flex:none;font-size:14px;font-weight:700;color:var(--pt-ink,#111D3B)}
.twf-ro-done{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--pt-mute,#5A6076)}
.twf-ro-stars{flex:none;display:inline-flex}
.twf-ro-kudos{flex:none;width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:22px;background:var(--surface-2,#E9EDF5);color:var(--pt-mute,#5A6076);display:flex;align-items:center;justify-content:center;cursor:pointer}
.twf-ro-kudos.on{background:var(--surface-1,#fff);color:var(--pt-ink,#111D3B);box-shadow:inset 0 0 0 2px var(--pt-ink,#111D3B)}
.twf-ro-card{margin:2px 0 12px;padding:4px 14px 14px;border-radius:16px;background:var(--surface-1,#fff);min-width:0}
.twf-ro-prem{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:10px 0;min-width:0}
.twf-ro-prem-l{font-size:14px;font-weight:600;color:var(--pt-ink,#111D3B)}
.twf-ro-seg{flex:1 1 auto;display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--surface-2,#E9EDF5);min-width:0}
.twf-ro-segb{flex:1 1 0;min-width:0;min-height:44px;padding:0 2px;border:0;border-radius:9px;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--pt-mute,#5A6076);cursor:pointer}
.twf-ro-segb.on{background:var(--surface-1,#fff);color:var(--pt-ink,#111D3B);box-shadow:0 1px 3px rgba(17,29,59,.14)}
.twf-ro-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.twf-ro-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:44px;padding:4px 14px 4px 6px;border:1px solid var(--border-1,#D8DEEA);border-radius:22px;background:var(--surface-1,#fff);font-family:inherit;font-size:14px;font-weight:600;color:var(--pt-ink,#111D3B);cursor:pointer;text-align:left}
.twf-ro-chip span{overflow-wrap:anywhere}
.twf-ro-chip.on{border-color:var(--pt-ink,#111D3B);box-shadow:inset 0 0 0 1px var(--pt-ink,#111D3B)}
.twf-ro-chip[disabled]{opacity:.4;cursor:default}
.twf-ro-tier{padding-left:14px;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;border-radius:14px}
.twf-ro-pts{font-size:12px;font-weight:500;color:var(--pt-mute,#5A6076)}
.twf-ro-actions{margin:14px 0 0}
.twf-ro .twf-ro-primary{position:static;box-shadow:none;width:100%;margin:16px 0 0}
.twf-ro-actions .twf-ro-primary{margin-top:0}
.twf-ro .twf-ro-quiet{margin:8px 0 0}
.twf-ro-why{margin:6px 0 0;font-size:13px;color:var(--pt-mute,#5A6076)}
.twf-ro-why:empty{display:none}
.twf-ro-close{width:100%}
.twf-ro-more{display:block;width:100%;min-height:44px;margin:2px 0 6px;padding:0;border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:700;color:var(--pt-info-pill,#1D4ED8);text-align:left;cursor:pointer}
.twf-ro-who{display:flex;align-items:center;gap:12px;min-height:60px;min-width:0}
.twf-ro-change{flex:none;min-height:44px;padding:0 6px;border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:700;color:var(--pt-info-pill,#1D4ED8);cursor:pointer}
.twf-ro-q{display:block;width:100%;box-sizing:border-box;min-height:44px;font-size:16px}
.twf-ro-people{margin:4px 0 0}
.twf-ro-feed,.twf-ro-next{display:flex;align-items:flex-start;gap:12px;padding:10px 0;min-width:0}
.twf-ro-feed .twf-bd,.twf-ro-next .twf-bd{flex:none}
.twf-ro-next .twf-bd{opacity:.5;filter:grayscale(1)}
.twf-ro-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px 10px;margin:4px 0 0}
.twf-ro-tile{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.twf-ro-tile-n{font-size:13px;font-weight:700;line-height:1.25;color:var(--pt-ink,#111D3B);overflow-wrap:anywhere}
.twf-ro-tile-s{font-size:12px;color:var(--pt-mute,#5A6076)}
.twf-ro-bar{display:block;height:6px;margin:6px 0 2px;border-radius:3px;background:var(--surface-2,#E9EDF5);overflow:hidden}
.twf-ro-bar span{display:block;height:100%;border-radius:3px;background:var(--pt-gold,#7A6530)}
.twf-ro-link{width:100%;margin-top:10px}
.twf-review-hub.is-embedded{margin-top:4px}
/* === round 2: phone bar (Review on the staff bar; Pick Up folds into Shifts) ===
   Pick up a shift is the first section of My Shifts (_twfPickUpHtml): the
   open shifts cards, then the cover board's cards drawn on the same card so
   the section reads as one list. Nothing open is one quiet line. The section
   clears the header when swap-board scrolls to it (open=pick). */
.twf-ms-pick{margin:0 0 8px;scroll-margin-top:84px}
.twf-ms-pick>.twf-pt-sh .a{min-height:0}
.twf-ms-pick-none{margin:4px 0 16px}
.twf-ms-pick-sub{margin:16px 0 8px;font-size:14px;font-weight:700;color:var(--pt-ink,#111D3B)}
/* one navy a screen: in a list (more than one card, or an offer above) every
   Request this shift / Cover this shift is the grey secondary of Sort &
   filter, 44px+; a lone card keeps the navy. Hover, press and busy are held
   to the grey too (twf-flat-everywhere.css would paint them navy). */
.twf-ms-pick.is-list .twf-pt-cta,.twf-ms-pick.is-list .twf-pt-cta.twf-pt-cta:hover:not([disabled]),.twf-ms-pick.is-list .twf-pt-cta.twf-pt-cta[aria-busy="true"]{min-height:46px;border:0;background:var(--pt-mute-pill-bg,#E7E9F0);color:var(--pt-ink,#111D3B);box-shadow:none}
.twf-ms-pick.is-list .twf-pt-cta.twf-pt-cta:active:not([disabled]){background:var(--action-secondary-pressed,#DADDE6);box-shadow:none}
.twf-ms-covers .twf-cover-item,.twf-ms-covers .twf-cover-item+.twf-cover-item{background:#fff;border-left:5px solid var(--pt-warn-stripe,#E0911F);border-radius:0 var(--radius-md,14px) var(--radius-md,14px) 0;padding:12px 14px;margin-bottom:12px}