/* LineDrive Team, the team app for Old Line Tailgate co. - phone first, one column.
   10/15 (Pat, 10/14 11:58 PM): a white app with the Old Line colors as its accents and the
   LineDrive Team logotype in the header. Chrome = the logotype's ground #0F0F0D (top bar,
   primary button, the desk sidebar); accent = the shirt yellow #eaaa00, Maryland flag gold (Pat 10/15 1:01 AM) for rings, bars and
   edges, deepened to #8C6600 where it carries words (5.2:1 on white). The base and the four
   state tiers below are unchanged.

   Colors (10/09/2026; the chrome and accent tokens changed 10/15, see above). Pat: "color scheme for this needs to be like the pipeline app",
   then: "I want the pipeline colors used together, not one color at a time with
   different color schemes, the same way that they're used together in the pipeline
   app." So this is the Pipeline's color system, role for role, from
   cost_pipeline_desktop: the base (src/App.css), the shell (the green top bar in
   src/App.tsx, the light sidebar in src/components/Sidebar.tsx) and Menu Health's
   four tiers (src/screens/MenuHealth.tsx TIER_STYLES), each used as a set:
   the tier ground, its text color, its edge, and its accent bar.
     Healthy        approved, posted, active, signed and reviewed, current, passed
     Watch          pending, draft, up for grabs, invite sent, expiring, needs you
     Underperformer denied, expired, revoked, refused, failed, errors
     Star           not used: nothing in this app is the Pipeline's top quartile
   Every text color is 4.5:1 or better on its own ground. */

:root {
  /* base: src/App.css and the shell */
  --brand: #0F0F0D;      /* the top bar and the primary button: the logotype's ground */
  --on-brand: #D9CBB3;   /* words on the top bar: the lockup's sand, 11:1 on the ground */
  --ink: #1a1a1a;
  --ground: #ffffff;
  --card: #ffffff;
  --line: #e5e5e5;       /* card edges and rules */
  --control: #cfcfcf;    /* button and input edges */
  --muted: #6b7280;
  --label: #444444;      /* table heads */
  --link: #8C6600;       /* the shirt yellow deepened for words: 5.2:1 on white, 4.6:1 on the selected tint */
  --focus: #eaaa00; --focus-ground: #FDF6E6; --pressed: #FCF1D6;   /* the shirt yellow itself (Maryland flag gold, SwagDog order 37654): rings, bars, edges */
  --panel: #F8F6F2;      /* notes, read-only lines, a row under the finger */
  --nav: #ffffff; --nav-line: #e5e5e5; --nav-ink: #333333; --nav-hover: #FCF5E0;   /* the Menu */
  --bar: #f4f4f4; --bar-line: #e0e0e0;   /* the bottom bar's body: the Pipeline Sidebar's ground and edge (Sidebar.tsx 44-45).
                                            10/16: white on the white page, the bar had no body under its icons and the
                                            inset read as a gap (Pat: "floating higher"); a grey slab runs to the glass. */
  --select: #FBF0D1;     /* the item you are on: with --link words and a --focus bar */
  --neutral: #666666; --neutral-ground: #eef2f6; --neutral-line: #d8dfe6;   /* a plain tag */
  --ground-muted: #EDEAE4;   /* a closed day, a day note on the month */
  --muted-on-tint: #5B574F;  /* muted words on a tinted ground: 6:1 on --ground-muted */
  /* the four tiers: Menu Health's TIER_STYLES, used as whole sets */
  --star: #5a2ca0; --star-ground: #f3ecff; --star-line: #b694e0; --star-accent: #7a3fc2;
  --ok: #1f6f15; --ok-ground: #e8f7e8; --ok-line: #99cc99; --ok-accent: #2a7a2a;
  --warn: #7a5e00; --warn-ground: #fef9e8; --warn-line: #d9c466; --warn-accent: #a07020;
  --err: #a02525; --err-ground: #ffeeee; --err-line: #f5b5b5; --err-accent: #cc3333;
  --radius: 8px;         /* cards (Home.tsx); buttons and inputs take 6px (App.css) */
  --gutter: 16px;

  /* the scale */
  --fs-body: 15px;
  --lh-body: 1.35;
  --fs-h1: 22px;
  --fs-h2: 17px;
  --fs-h3: 15px;
  --fs-meta: 13px;       /* meta lines, hints, asides */
  --fs-small: 12px;      /* chips, tags, blurbs */
  --fs-input: 16px;      /* never lower */
  --fs-grid: 13px;       /* shift chips in the grid */
  --card-pad: 12px;
  --stack-gap: 10px;
  --cell-pad: 6px;
  --control-h: 42px;     /* buttons and inputs */
  --nav-h: 52px;         /* the bottom bar */
  --col: 480px;          /* the reading column */
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 11/01 (Pat 8:41 PM: To do, Clock and My schedule "still float about a centimeter from the bottom
   of the screen ... a comprehensive fix for the entire bottom segment"). Measured on Pat's phone
   (852 px screen, 59 px top inset, app on the Home Screen): a page shorter than the screen got a
   window 59 px short (793), so the fixed bar ended 59 px above the glass; a page taller than the
   screen got the full 852 and the bar sat on the glass. Every page is now at least the screen
   tall, whatever its body class or wrapper. */
html { min-height: calc(100% + env(safe-area-inset-top, 0px)); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

.wrap {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---------------------------------------------------------------- focus */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.top :focus-visible { outline-color: #fff; }

.skip {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 40;
  background: var(--focus-ground);
  color: var(--link);
  border: 2px solid var(--focus);
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
}
.skip:focus { top: calc(8px + env(safe-area-inset-top)); }

/* --------------------------------------------------------------- header */
.top {
  position: relative;
  z-index: 30;   /* 10/15 (Pat): the open Menu panel paints over main; view-transition-name made the header a stacking context */
  background: var(--brand);
  color: #fff;
  padding-top: env(safe-area-inset-top);
}
.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}
.brand img { display: block; height: 36px; width: auto; }
/* the signed-out and first-run header: the whole logo, byline and all (base.html, hero) */
.top-hero .top-inner { min-height: 104px; padding-top: 14px; padding-bottom: 14px; }
.top-hero .brand img { height: 76px; }
.brand-text { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.brand-word {
  color: var(--on-brand);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 12px;
}
.who { color: var(--on-brand); font-size: var(--fs-meta); margin-left: auto; min-width: 0; text-align: right; }

/* the Menu: a details/summary on phones, a row under the header at 900px */
.menu { position: relative; flex: none; }
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icon { width: 20px; height: 20px; }
.menu[open] > summary { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 15;
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: 8px 12px 12px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.menu-group { padding: 4px 0; }
.menu-group + .menu-group { border-top: 1px solid var(--line); }
.menu-title, .region-label {
  margin: 4px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.menu-group a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.menu-group a:hover { background: var(--nav-hover); }
.menu-group a[aria-current="page"] { background: var(--select); color: var(--link); border-color: var(--focus); }
.menu-row { display: none; }

/* ----------------------------------------------------------------- main */
main {
  padding-top: 12px;
  padding-bottom: 32px;
}
main:focus { outline: none; }
.signed-in main {
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px);
}

h1 { font-size: var(--fs-h1); line-height: 1.2; margin: 2px 0 10px; }
h2 { font-size: var(--fs-h2); line-height: 1.25; margin: 18px 0 8px; }
h3 { font-size: var(--fs-h3); margin: 12px 0 4px; }
p { margin: 0 0 8px; }
a { color: var(--link); text-underline-offset: 3px; }
/* the accent is for actions; a card, a name or a pill that is a link reads as text, as the Pipeline's rows do */
.person-card, .card-link, .tile, .announcement-title, .event-title, .request-who, .shift-who, .my-shift,
.shift-open, .grid-shift, .day-note, .post-author, .daily-text a, .menu-group a, .jump a, .places a { color: var(--ink); }
.h-meta { color: var(--muted); font-size: var(--fs-meta); font-weight: 600; margin-left: 6px; }
.h-link { font-size: var(--fs-meta); font-weight: 600; margin-left: 6px; }
.small-link { font-size: var(--fs-meta); font-weight: 600; }

.lede { color: var(--muted); font-size: 14px; }
.aside { color: var(--muted); font-size: var(--fs-meta); margin-top: 12px; }
.meta { color: var(--muted); font-size: var(--fs-meta); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-pad);
  margin: 0 0 var(--stack-gap);
  min-width: 0;
}
.stack > * + * { margin-top: var(--stack-gap); }

.jump { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 10px; }
.jump a { font-size: var(--fs-small); font-weight: 600; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--card); }
.jump a:hover { border-color: var(--focus); background: var(--focus-ground); }

/* -------------------------------------------------------------- flashes */
.flash {
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 0 0 10px;
  font-weight: 600;
  border: 1px solid;
  font-size: 14px;
}
.flash-ok { background: var(--ok-ground); color: var(--ok); border-color: var(--ok-line); box-shadow: inset 6px 0 0 var(--ok-accent); }
.flash-err { background: var(--err-ground); color: var(--err); border-color: var(--err-line); box-shadow: inset 6px 0 0 var(--err-accent); }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--control-h);
  padding: 8px 14px;
  border: 2px solid var(--control);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.btn:active { transform: scale(0.985); }
.btn:hover { border-color: var(--focus); background: var(--focus-ground); }
.btn:active { background: var(--pressed); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand); border-color: var(--focus); }
.btn-dark { background: var(--card); border-color: var(--brand); color: var(--brand); }
.btn-ghost:hover { background: var(--focus-ground); }
.btn-danger { border-color: var(--err-line); color: var(--err); }
.btn-danger:hover { background: var(--err-ground); border-color: var(--err-accent); }
.btn-row { display: grid; gap: 8px; margin: 10px 0; }
.btn-row-tight { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row-tight .btn { width: auto; }
.btn-row form { margin: 0; }

/* ---------------------------------------------------------------- forms */
label, legend, .label { display: block; font-weight: 600; margin: 0 0 4px; padding: 0; font-size: 14px; }
.hint { display: block; color: var(--muted); font-size: var(--fs-meta); font-weight: 400; margin: 0 0 4px; }
.error { color: var(--err); font-size: var(--fs-meta); font-weight: 600; margin: 4px 0 0; }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"], input[type="datetime-local"], input[type="month"], textarea {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 8px 10px;
  border: 1.5px solid var(--control);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-input);  /* never under 16px, so iOS does not zoom */
  -webkit-appearance: none;
  appearance: none;
}
select {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 8px 10px;
  border: 1.5px solid var(--control);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-input);  /* never under 16px, so iOS does not zoom */
}
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.has-error select { border-color: var(--err); border-width: 2px; }
textarea { min-height: 72px; resize: vertical; }
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
  border-radius: 8px;
}
.has-error input, .has-error textarea { border-color: var(--err); border-width: 2px; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.group { margin: 0 0 6px; }
.group > legend { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 6px; }
.group-title { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 8px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.two-narrow { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }

/* read-only line inside a form (legal name for a non-owner) */
.fixed-value {
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: var(--panel);
  margin: 0;
}

/* segmented control: real radio buttons, drawn as one row of large segments */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1.5px solid var(--control);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 4px 2px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  border-left: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.seg label:first-of-type { border-left: 0; }
/* the segmented toggle: the chosen option is filled with the chrome ground */
.seg input:checked + label { background: var(--brand); color: #fff; border-left-color: var(--brand); }
/* two-tone ring so it shows on the white segment and on the dark one */
.seg input:focus-visible + label {
  box-shadow: inset 0 0 0 3px var(--focus);
}

.day { padding: 10px 0; border-top: 1px solid var(--line); }
.day:first-of-type { border-top: 0; padding-top: 0; }
.day legend { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.day details { margin-top: 6px; }
.day summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-meta);
  cursor: pointer;
}
.day summary { list-style: none; gap: 8px; }
.day summary::-webkit-details-marker { display: none; }
.day summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
}
.day details[open] summary::before { content: "-"; }
.day details[open] summary { margin-bottom: 4px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 40px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.check:first-of-type { border-top: 0; }
.check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--brand);
}
.check label { flex: 1; margin: 0; padding: 3px 0; min-height: 28px; font-weight: 600; cursor: pointer; }
.check .hint { margin: 2px 0 0; }
/* 10/14: the work-texts words under the number; body size, full ink (never small or faint) */
.consent-words { margin: 8px 0 0; font-size: var(--fs-body); color: var(--ink); line-height: 1.45; }
.consent-words a { font-weight: 600; }

/* ------------------------------------------------------ read-only lists */
.facts { margin: 0; }
.facts > div { padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; }
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts > div:last-child { padding-bottom: 0; }
.facts dt { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.facts dd { margin: 1px 0 0; white-space: pre-line; }
.empty { color: var(--muted); }
.plain-rows { list-style: none; margin: 0; padding: 0; }
.plain-rows li { padding: 6px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.plain-rows li:first-child { border-top: 0; padding-top: 0; }
.plain-rows .btn-small { min-height: 34px; }

/* ---------------------------------------------------------------- tiles */
/* Home: a compact icon grid, two across on a phone, four on a desktop */
.tiles { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tiles li { min-width: 0; }
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  height: 100%;
  min-width: 0;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 120ms ease;
}
.tile:hover { border-color: var(--focus); background: var(--focus-ground); }
.tile-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--neutral-ground);
  color: var(--brand);
}
.tile-icon .icon { width: 18px; height: 18px; }
.tile-text { display: grid; gap: 1px; min-width: 0; }
.tile-label { font-size: 14px; font-weight: 700; line-height: 1.2; }
.tile-blurb { color: var(--muted); font-size: var(--fs-small); line-height: 1.3; }
.signout { margin-top: 16px; }
.signout .btn { width: auto; }

/* ----------------------------------------------------------------- team */
.people { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.person-card {
  display: block;
  padding: 10px 12px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}
.person-card:hover { border-color: var(--focus); background: var(--panel); }
.card-link { display: block; color: inherit; text-decoration: none; }
.card-sublink { display: inline-block; padding: 4px 0 2px; font-size: var(--fs-meta); }
.person-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.person-name { font-size: 15px; font-weight: 700; }
.person-sub { color: var(--muted); font-size: var(--fs-meta); margin: 1px 0 6px; display: block; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--neutral-ground);
  color: var(--neutral);
  box-shadow: inset 0 0 0 1px var(--neutral-line);
  font-size: var(--fs-small);
  font-weight: 600;
}
.chip-unbuilt { background: transparent; color: var(--muted); border: 1px dashed var(--control); box-shadow: none; }

.status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 700;
  border: 1.5px solid;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* a state is its tier's whole set: ground, words, edge (the accent marks rows and banners) */
.status-active, .status-invite_used { color: var(--ok); background: var(--ok-ground); border-color: var(--ok-line); }
.status-setup_pending, .status-invite_pending { color: var(--warn); background: var(--warn-ground); border-color: var(--warn-line); }
.status-code_expired, .status-deactivated,
.status-invite_expired, .status-invite_revoked { color: var(--err); background: var(--err-ground); border-color: var(--err-line); }

.code-box {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 12px;
  margin: 0 0 12px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.12em;
  user-select: all;
  -webkit-user-select: all;
}
.code-box-small { font-size: 22px; padding: 10px; letter-spacing: 0.08em; }

/* ----------------------------------------------------------- bottom nav */
.bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--bar);
  border-top: 1px solid var(--bar-line);
  /* 10/16 1:20 AM (Pat: "still floating higher ... anchored at the bottom of the screen"): the
     bottom inset (34 px on an iPhone with the home indicator) used to be the nav's own padding,
     so the tab fill and the press fill stopped 34 px above the glass on a white strip. The inset
     now lives inside each tab: the fill runs to the edge and the icons and words stay where they
     were, above the home indicator. */
}
.bottom ul {
  display: flex;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.bottom ul::-webkit-scrollbar { display: none; }
.bottom li { flex: 1 0 64px; min-width: 0; }
.bottom a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
  color: var(--nav-ink);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  border-top: 3px solid transparent;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bottom a[aria-current="page"] { color: var(--link); background: var(--select); border-top-color: var(--focus); }
.bottom .icon { display: block; width: 20px; height: 20px; }

@media (min-width: 600px) {
  main { padding-top: 16px; }
  .facts-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
  .facts-two > div:nth-child(2) { border-top: 0; padding-top: 0; }
  .facts-two > .facts-wide { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}

/* test entry (only rendered when TEAM_TEST_DOOR=1) */
.test-door { border-style: dashed; margin-top: 12px; }
.test-door h2 { margin-top: 0; }
.test-door form { margin: 0; }
.test-door form + form { margin-top: 8px; }
.test-door .btn { width: 100%; }

/* time off */
.requests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.request { display: grid; gap: 6px; min-width: 0; }
.request p { margin: 0; }
.request form { margin: 0; }
.request-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.request-who, .request-days { font-weight: 700; font-size: 15px; line-height: 1.3; }
.request .request-days:not(.request-head *) { font-weight: 600; }
.request-note { color: var(--muted); }
.request-done { opacity: 0.85; }
.status-to-pending { color: var(--warn); background: var(--warn-ground); border-color: var(--warn-line); }
.status-to-approved { color: var(--ok); background: var(--ok-ground); border-color: var(--ok-line); }
.status-to-denied { color: var(--err); background: var(--err-ground); border-color: var(--err-line); }
.status-to-cancelled { color: var(--neutral); background: var(--neutral-ground); border-color: var(--neutral-line); }
/* a card in a state carries its tier's whole set, as Menu Health's tier cards do:
   the tier ground, the tier edge and the tier accent as a bar down the left */
.card.state-ok, .card.request-approved, .card.flag-resolved {
  background: var(--ok-ground); border-color: var(--ok-line); box-shadow: inset 4px 0 0 var(--ok-accent); }
.card.state-watch, .card.request-pending, .card.flag-open, .card.flag-seen {
  background: var(--warn-ground); border-color: var(--warn-line); box-shadow: inset 4px 0 0 var(--warn-accent); }
.card.state-err, .card.request-denied {
  background: var(--err-ground); border-color: var(--err-line); box-shadow: inset 4px 0 0 var(--err-accent); }
.card.request-cancelled {
  background: var(--neutral-ground); border-color: var(--neutral-line); box-shadow: inset 4px 0 0 var(--neutral-line); }
/* quiet words inside a tier's ground take that tier's own text color: the muted grey
   falls under 4.5:1 on the Healthy and Underperformer grounds */
:is(.banner-posted, .flash-ok, .graded-pass, .off-approved, .state-ok, .request-approved, .flag-resolved)
  :is(.meta, .lede, .hint, .aside, .empty, .request-note) { color: var(--ok); }
:is(.banner-draft, .warn-card, .off-waiting, .state-watch, .request-pending, .flag-open, .flag-seen)
  :is(.meta, .lede, .hint, .aside, .empty, .request-note) { color: var(--warn); }
:is(.flash-err, .graded-fail, .state-err, .request-denied)
  :is(.meta, .lede, .hint, .aside, .empty, .request-note) { color: var(--err); }
.request-cancelled :is(.meta, .lede, .hint, .aside, .empty, .request-note) { color: var(--neutral); }
.count { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--warn); background: var(--warn-ground); border: 1.5px solid var(--warn-line); vertical-align: middle; }

.hours { border: 0; padding: 0; margin: 0; min-width: 0; }
.stack > .hours { margin-top: 12px; }
.hours legend { font-weight: 700; padding: 0; margin-bottom: 2px; }
.hours .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 6px; }
.hours .pair .field { margin: 0; min-width: 0; }
.hours input[type="time"] { width: 100%; min-width: 0; }

/* --------------------------------------------------------------- schedule */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.btn-small { width: auto; min-height: 36px; padding: 4px 12px; font-size: 14px; justify-self: start; }

/* Job colors: eight fixed swatches. Dark text on every one (7:1 or better), a
   darker edge so the chip still reads on a white card, and the job name always
   written on it - the color is never the only signal. */
.job {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1.5px solid;
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1.3;
}
/* a job's color is a category, not a state: eight fills from the Pipeline's own palette, each
   with the job name in dark text at 7:1 or better and an edge at 3:1 or better on a card */
.job-gold  { background: var(--warn-line); border-color: var(--warn-accent); }
.job-sky   { background: var(--select); border-color: var(--link); }
.job-mint  { background: var(--ok-line); border-color: var(--ok-accent); }
.job-rose  { background: var(--err-line); border-color: var(--err-accent); }
.job-sand  { background: var(--warn-ground); border-color: var(--warn); }
.job-lilac { background: var(--star-ground); border-color: var(--star-accent); }
.job-teal  { background: var(--on-brand); border-color: var(--brand); }
.job-slate { background: var(--neutral-line); border-color: var(--muted); }

/* large radio rows: job, color, saved times, deadline, reasons, locations */
.choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices > legend { font-weight: 700; margin-bottom: 2px; }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}
.choice:first-of-type { border-top: 0; }
.choice input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--brand); }
.choice label { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; min-height: 32px; font-weight: 600; cursor: pointer; }
.choice .hint { margin: 0; }
.places-choices .region-label { margin-top: 8px; }
.places-choices .region-label + .choice { border-top: 0; }
.choice-edit { align-items: flex-start; }
.choice-edit input[type="radio"] { margin-top: 26px; }
.choice-field { flex: 1; min-width: 0; }
.choice-field label { font-weight: 600; font-size: var(--fs-meta); }
.question > legend { margin-bottom: 4px; }
.question-row > legend { font-size: 15px; }

/* owner's location picker (grouped by region) and the week stepper */
.places { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; }
.places-region { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.places-region .region-label { margin: 0 2px 0 0; }
.places a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 12px;
  border: 2px solid var(--control);
  border-radius: 999px;
  background: var(--card);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.places a[aria-current="true"] { background: var(--focus); color: var(--ink); border-color: var(--focus); }   /* 10/15: a filled control is the yellow with dark words, as the logo bar is */
.week-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0 0 10px; }
.week-nav .btn { width: 100%; }

.banner { border: 2px solid; border-radius: var(--radius); padding: 10px 12px; margin: 0 0 8px; display: grid; gap: 8px; }
.banner p, .banner form { margin: 0; }
.banner-draft { border-style: dashed; border-color: var(--warn-line); background: var(--warn-ground); box-shadow: inset 6px 0 0 var(--warn-accent); }
.banner-posted { border-color: var(--ok-line); background: var(--ok-ground); box-shadow: inset 6px 0 0 var(--ok-accent); }

.today-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--select);
  color: var(--link);
  box-shadow: inset 0 0 0 1px var(--focus);
  font-size: var(--fs-small);
  font-weight: 700;
  vertical-align: middle;
}
.day-card { display: grid; gap: 8px; scroll-margin-top: 12px; }
.day-card.is-today, .my-day.is-today { border-color: var(--focus); box-shadow: inset 4px 0 0 var(--focus); }
.day-title { font-size: 16px; margin: 0; }
.day-card p { margin: 0; }

.shift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.shift { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.shift:first-child { border-top: 0; padding-top: 0; }
.shift-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.shift-who { font-size: 15px; font-weight: 700; }
a.shift-who { text-decoration: none; }
a.shift-who:hover { text-decoration: underline; }
.open-tag { padding: 0 8px; border: 2px dashed var(--warn-accent); background: var(--warn-ground); color: var(--warn); border-radius: 6px; font-size: 14px; }
.shift-time { font-weight: 600; }
.shift-open { font-size: var(--fs-meta); font-weight: 600; margin-left: 6px; }
.shift-note { color: var(--muted); font-size: var(--fs-meta); }
.warn {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--warn-line);
  background: var(--warn-ground);
  color: var(--warn);
  font-size: var(--fs-meta);
}
.warn-card { border: 1px solid var(--warn-line); box-shadow: inset 6px 0 0 var(--warn-accent); background: var(--warn-ground); color: var(--warn); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 8px; }
.warn-card p { margin: 0 0 6px; }
.warn-card form { margin: 0; }
.plain-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* who is off: three groups, each told apart by its heading text and its edge */
.off-groups { display: grid; gap: 6px; }
.off-group { padding: 6px 8px 6px 10px; border-radius: 6px; border: 1.5px solid; border-left-width: 6px; font-size: var(--fs-meta); }
.off-group h3 { margin: 0 0 2px; font-size: var(--fs-meta); }
.off-group ul { margin: 0; padding-left: 16px; }
.off-approved { border-color: var(--ok-accent); border-style: solid; background: var(--ok-ground); color: var(--ok); }
.off-waiting { border-color: var(--warn-accent); border-style: dashed; background: var(--warn-ground); color: var(--warn); }
.off-unavailable { border-color: var(--muted); border-style: dotted; background: var(--neutral-ground); color: var(--neutral); }

/* my schedule */
.my-days { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.my-day { display: grid; gap: 4px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.my-day p { margin: 0; }
.my-day-date { font-weight: 700; }
.my-shift { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; text-decoration: none; min-height: 32px; }
.my-shift:hover .shift-time { text-decoration: underline; }
.my-shift .shift-note { flex-basis: 100%; }
.my-off { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* settings lists */
.setting-list { list-style: none; margin: 0 0 8px; padding: 0; }
.setting-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.setting-list li:first-child { border-top: 0; }
.setting-what { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.setting-list .btn-small { flex: none; }
.card > .btn { margin-top: 4px; }

/* -------------------------------------------- unit 6: the shift-level flows */
.shift-card .shift-main { margin-bottom: 6px; }
.shift-notes { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.shift-notes li { padding: 4px 8px; border-left: 4px solid var(--line); background: var(--panel); border-radius: 4px; font-size: 14px; }
.shift-note-who { font-weight: 700; }
.chip-shift-note { border-left: 3px solid var(--line); padding-left: 4px; color: var(--ink); }
.from-tag, .grabs-tag, .cant-tag, .pickup-tag, .lock-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  border: 1.5px solid;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.from-tag { border-color: var(--neutral-line); background: var(--neutral-ground); color: var(--neutral); }
.grabs-tag { border-color: var(--warn-accent); background: var(--warn-ground); color: var(--warn); border-style: dashed; }
.cant-tag { border-color: var(--warn-accent); background: var(--warn-ground); color: var(--warn); }
.pickup-tag { border-color: var(--warn-accent); background: var(--warn-ground); color: var(--warn); }
.lock-tag { border-color: var(--neutral-line); background: var(--neutral-ground); color: var(--neutral); }
.status-flag-open, .status-flag-seen { color: var(--warn); background: var(--warn-ground); border-color: var(--warn-line); }
.status-flag-resolved { color: var(--ok); background: var(--ok-ground); border-color: var(--ok-line); }

/* the owner's full record */
.person-notes li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.person-notes .note-text { white-space: pre-line; }
.chip-praise { background: var(--ok-ground); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.chip-warning { background: var(--warn-ground); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.chip-write_up { background: var(--err-ground); color: var(--err); box-shadow: inset 0 0 0 1px var(--err-line); }
.activity li { font-size: var(--fs-meta); }
.is-inactive { opacity: 0.7; border-style: dashed; }
.region-head { margin-top: 14px; font-size: var(--fs-small); }

/* training */
.train-not_started { color: var(--neutral); background: var(--neutral-ground); border-color: var(--neutral-line); border-style: dashed; }
.train-read, .train-passed { color: var(--ok); background: var(--ok-ground); border-color: var(--ok-line); }
.train-failed { color: var(--err); background: var(--err-ground); border-color: var(--err-line); }
.lesson-body p { margin: 0 0 10px; }
.lesson-body p:last-child { margin-bottom: 0; }
.graded-pass { border: 1px solid var(--ok-line); box-shadow: inset 6px 0 0 var(--ok-accent); background: var(--ok-ground); color: var(--ok); }
.graded-fail { border: 1px solid var(--err-line); box-shadow: inset 6px 0 0 var(--err-accent); background: var(--err-ground); color: var(--err); }
.test-form .question { padding: 8px 0 0; border-top: 1px solid var(--line); }
.test-form .question:first-of-type { border-top: 0; padding-top: 0; }

/* ------------------------------------------------------ wide screens */
@media (min-width: 900px) {
  :root { --col: 680px; }
  /* the Menu becomes a row under the header; the bottom bar goes away */
  .menu { display: none; }
  .menu-row { display: block; background: var(--nav); border-bottom: 1px solid var(--nav-line); }
  .menu-row .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
  .menu-row .menu-group { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; }
  .menu-row .menu-title { margin: 0; color: var(--muted); }
  .menu-row .menu-group a { border-color: transparent; color: var(--nav-ink); min-height: 30px; padding: 2px 8px; font-size: 13px; }
  .menu-row .menu-group a:hover { background: var(--nav-hover); }
  .menu-row .menu-group a[aria-current="page"] { background: var(--select); color: var(--link); border-color: var(--focus); }
  .bottom { display: none; }
  .signed-in main { padding-bottom: 32px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .wide .wrap { max-width: 1320px; }
  /* On a wide screen only the week grid spans the page; everything else stays
     in the same centred column as the rest of the app and stacks downward. */
  .wide main > *:not(.views):not(.grid-scroll):not(.cal-stage) { max-width: var(--col); margin-left: auto; margin-right: auto; }
  .wide .view-days { max-width: var(--col); margin-left: auto; margin-right: auto; }
  .wide .flash { max-width: var(--col); margin-left: auto; margin-right: auto; }
  .wide .banner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .wide .banner .btn, .wide .week-nav .btn, .wide .btn-row .btn { width: auto; }
  .wide .week-nav { display: flex; }
  .wide .btn-row { display: flex; flex-wrap: wrap; }
  .btn-row { display: flex; flex-wrap: wrap; }
  .btn-row .btn { width: auto; }
}

/* ------------------------------------------ unit 4: the week grid, everywhere */
/* Grid | By day and Print. The row is hidden until static/schedule.js wakes it;
   with no script both views show, the grid first. */
.view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.view-tools[hidden] { display: none; }
.view-tools .btn-small { justify-self: auto; }
.view-toggle { display: inline-flex; border: 2px solid var(--control); border-radius: 8px; overflow: hidden; background: #fff; }
.view-toggle button {
  min-height: 36px;
  padding: 4px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button[aria-pressed="true"] { background: var(--focus); color: var(--ink); }
.view-toggle button:focus-visible { outline-offset: -3px; }
.views[data-view="grid"] .view-days { display: none; }
.views[data-view="days"] .view-grid { display: none; }

/* the day's notes on a day card and on My schedule */
.day-notes { display: grid; gap: 6px; }
.day-notes h3 { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.day-notes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.day-note {
  display: block;
  padding: 3px 6px;
  border-left: 4px solid var(--focus);
  border-radius: 4px;
  background: #fff;
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.3;
}
.my-day .day-note { background: var(--panel); }
.day-notes li { padding: 3px 6px; border-left: 4px solid var(--focus); background: var(--panel); border-radius: 4px; font-size: var(--fs-meta); font-weight: 600; }
.day-notes li a { text-decoration: none; }
.day-notes li a:hover { text-decoration: underline; }

/* The grid scrolls sideways on a phone (a name column and about two days in
   view) and fills the width on a wide screen. Names and the day headers stay
   put; the box has a ceiling so they stay in reach on a long roster. */
.grid-scroll {
  position: relative;   /* the cells' sr-only spans are absolute; contained here they no longer widen the page (accessibility-1) */
  overflow: auto;
  max-height: min(80vh, 1100px);
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}
.week-grid {
  display: grid;
  grid-template-columns: 96px repeat(7, minmax(132px, 1fr)) 64px;
  width: max(100%, 1120px);
}
.grid-row { display: contents; }
.grid-corner, .grid-dayhead, .grid-who, .grid-cell, .grid-hours {
  padding: var(--cell-pad);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  min-width: 0;
  background: var(--card);
}
.grid-corner, .grid-who { position: sticky; left: 0; z-index: 2; border-left: 0; font-weight: 700; font-size: var(--fs-meta); }
.grid-corner, .grid-dayhead { position: sticky; top: 0; z-index: 3; border-top: 0; border-bottom: 2px solid var(--line); background: var(--card); color: var(--label); font-size: var(--fs-meta); font-weight: 700; }
.grid-corner { z-index: 4; }
.grid-dayhead.is-today { color: var(--link); background: var(--select); box-shadow: inset 0 -3px 0 var(--focus); }
.grid-dayhead .today-tag { margin-left: 0; }
.grid-hours-head { text-align: right; }
.grid-cell { display: grid; gap: 4px; align-content: start; }
.grid-hours { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid-notes .grid-who, .grid-notes .grid-cell, .grid-notes .grid-hours { background: var(--panel); }
.grid-open .grid-who, .grid-open .grid-cell, .grid-open .grid-hours { border-bottom: 2px solid var(--line); }
.grid-totals .grid-who, .grid-totals .grid-cell, .grid-totals .grid-hours { border-top: 2px solid var(--line); background: var(--panel); }
.grid-total { gap: 2px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.week-grid .grid-cell.is-today { background: var(--focus-ground); }
.grid-shift { display: grid; gap: 2px; justify-items: start; min-height: 40px; padding: 5px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; font-size: var(--fs-grid); background: #fff; max-width: 100%; min-width: 0; }
a.grid-shift:hover { border-color: var(--focus); }
.grid-shift .job { font-size: var(--fs-small); padding: 1px 6px; }
.grid-shift .shift-note, .grid-cell .day-note { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-shift .shift-note { font-size: var(--fs-small); }
.grid-cell .day-note { font-size: var(--fs-small); }
a.day-note { text-decoration: none; }
a.day-note:hover { text-decoration: underline; }
.warn-tag { padding: 0 5px; border-radius: 6px; border: 1.5px solid var(--warn-line); background: var(--warn-ground); color: var(--warn); font-size: 12px; font-weight: 700; }
.off-tag { padding: 2px 5px; border-radius: 6px; border: 1.5px solid; border-left-width: 5px; font-size: 12px; font-weight: 700; line-height: 1.25; }
.grid-add { display: flex; align-items: center; justify-content: center; min-height: 34px; border: 1.5px dashed var(--control); border-radius: 6px; color: var(--muted); font-size: var(--fs-meta); font-weight: 700; text-decoration: none; }
.grid-add:hover { border-color: var(--focus); color: var(--link); background: var(--focus-ground); }

/* Print: the grid alone, one landscape page, black on white. A job's color
   stays as a thin left edge on its chip so the page still reads in black and white. */
@media print {
  @page { size: landscape; margin: 8mm; }
  body { background: #fff; color: #000; font-size: 11px; }
  .top, .bottom, .skip, .flash, .week-nav, .btn, .btn-row, .banner, .places, .view-tools,
  .view-days, .meta, form, .grid-add, .sr-only, .warn-tag, .menu, .menu-row { display: none !important; }
  main, .signed-in main { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  h1 { font-size: 16px; margin: 0 0 2px; }
  .lede { color: #000; font-size: 12px; margin: 0 0 6px; }
  .views .view-grid { display: block !important; }
  .grid-scroll { overflow: visible; max-height: none; border: 1px solid #000; border-radius: 0; margin: 0; }
  .week-grid { width: 100%; grid-template-columns: 72px repeat(7, minmax(0, 1fr)) 40px; }
  .grid-corner, .grid-dayhead, .grid-who, .grid-cell, .grid-hours {
    position: static;
    padding: 3px 4px;
    border-color: #000;
    background: #fff !important;
    color: #000 !important;
    font-size: 9px;
  }
  .grid-corner, .grid-dayhead { border-bottom: 2px solid #000; }
  .grid-open .grid-who, .grid-open .grid-cell, .grid-open .grid-hours,
  .grid-totals .grid-who, .grid-totals .grid-cell, .grid-totals .grid-hours { border-color: #000; }
  .grid-cell { gap: 2px; }
  .grid-shift { min-height: 0; padding: 0 0 2px; gap: 0; border: 0; border-bottom: 1px dotted #999; border-radius: 0; font-size: 9px; break-inside: avoid; }
  .grid-shift:last-child { border-bottom: 0; }
  .job { background: #fff !important; color: #000; border-width: 0 0 0 3px; border-radius: 0; padding: 0 0 0 4px; font-size: 9px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .shift-time { font-weight: 600; }
  .grid-shift .shift-note, .grid-cell .day-note { white-space: normal; overflow: visible; color: #000; font-size: 9px; }
  .grid-cell .day-note { border-left-color: #000; padding: 0 0 0 4px; }
  .today-tag { background: #fff; color: #000; border: 1px solid #000; font-size: 8px; padding: 0 4px; }
  .off-tag, .from-tag, .grabs-tag, .cant-tag, .pickup-tag, .lock-tag { border-color: #000; background: #fff; color: #000; }
  .grid-total { color: #000; }
}

/* ------------------------------------------- unit 3: skeletons, people, push */
/* an owner control that is on the screen but not built yet */
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }
.btn[disabled]:hover { background: inherit; }
.btn-primary[disabled]:hover { background: var(--brand); border-color: var(--brand); }

/* the announcements area sits above the tiles on Home */
.announce { margin: 0 0 12px; }
.announce h2 { margin-top: 0; }

/* notifications */
#push-status { font-weight: 600; margin: 0; }
#push [hidden] { display: none; }

/* ------------------------------------------- unit 5: the modules made real */
/* the daily line: tonight's 86'd items and specials, at the very top of Home */
.daily { border: 1px solid var(--line); border-left: 6px solid var(--brand); }
.daily p { margin: 0; }
.daily-kicker { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.daily-text { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 2px 0 4px; }
.daily-text a { text-decoration: none; }
.daily-text a:hover { text-decoration: underline; }
.daily-body { white-space: pre-line; margin-bottom: 4px; }

/* announcement cards */
.announcement.is-pinned { box-shadow: inset 4px 0 0 var(--focus); }
.announcement-title { font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.announcement-title:hover { text-decoration: underline; }
.announcement { min-width: 0; max-width: 100%; gap: 3px; }
.announcement-chips { margin: 1px 0 2px; }
.announcement-preview { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 14px; }
.home-announcements .announcement-preview { -webkit-line-clamp: 1; }
.home-announcements .meta { font-size: var(--fs-small); }
.announcement-body .body-text { white-space: pre-line; }
.chip-new { background: var(--select); color: var(--link); box-shadow: inset 0 0 0 1px var(--focus); }
.chip-daily { background: var(--card); color: var(--brand); border: 1.5px solid var(--brand); box-shadow: none; }
.chip-place { background: var(--neutral-ground); color: var(--neutral); box-shadow: inset 0 0 0 1px var(--neutral-line); }

/* what needs an owner, on Home */
.needs-you { margin: 0 0 12px; }
.needs-you .group-title { margin-bottom: 2px; }
.count-list { list-style: none; margin: 0; padding: 0; }
.count-list li { border-top: 1px solid var(--line); }
.count-list li:first-child { border-top: 0; }
.count-list a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 3px 0; text-decoration: none; font-size: 14px; }
.count-list a:hover span:last-child { text-decoration: underline; }
.count-n { flex: none; min-width: 34px; padding: 1px 8px; border-radius: 999px; background: var(--warn-ground); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--fs-meta); }

/* the staff calendar: weeks, then events; the kind rides on a job color */
.week-block .group-title { font-size: 15px; }
.events { list-style: none; margin: 0; padding: 0; }
.event { padding: 6px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; min-width: 0; }
.event:first-child { border-top: 0; padding-top: 0; }
.event p { margin: 0; }
.event-when { font-weight: 600; font-size: var(--fs-meta); }
.event.is-today .event-when { color: var(--link); }
.event-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.event-title { font-size: 15px; font-weight: 700; }
a.event-title { text-decoration: none; }
a.event-title:hover { text-decoration: underline; }
.event-note { color: var(--muted); font-size: var(--fs-meta); }
/* event kinds are categories too: the same fills as the jobs */
.kind-event    { background: var(--star-ground); border-color: var(--star-accent); }
.kind-catering { background: var(--ok-line); border-color: var(--ok-accent); }
.kind-closure  { background: var(--err-line); border-color: var(--err-accent); }
.kind-meeting  { background: var(--select); border-color: var(--link); }
.kind-other    { background: var(--neutral-line); border-color: var(--muted); }
/* a closure pointer on the schedule builder's day */
.closed-tag { display: inline-block; padding: 2px 6px; border-radius: 6px; border: 1.5px solid var(--neutral-line); border-left: 5px solid var(--err-accent); background: var(--neutral-ground); color: var(--neutral); font-size: 12px; font-weight: 700; line-height: 1.25; max-width: 100%; }

/* people: initials avatar and the row layout */
.avatar { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--select); color: var(--link); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.avatar-big { width: 52px; height: 52px; font-size: 20px; }
.person-row { display: flex; align-items: center; gap: 10px; }
.person-text { display: grid; gap: 1px; min-width: 0; }
.person-row .person-sub { margin: 0; }
.profile-head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.profile-head h1 { margin: 0; }
.profile-title { color: var(--muted); font-weight: 600; margin: 1px 0 0; }

/* posts */
.house-rules { font-weight: 600; }
.post-author { font-size: 15px; font-weight: 700; text-decoration: none; }
.post-author:hover { text-decoration: underline; }
.post-body { white-space: pre-line; }
.post.is-removed { border-style: dashed; background: var(--panel); }
.post.is-removed .post-body { color: var(--muted); }

/* documents: the four certificate states, each told apart by its word */
.doc-current  { color: var(--ok); background: var(--ok-ground); border-color: var(--ok-line); }
.doc-expiring { color: var(--warn); background: var(--warn-ground); border-color: var(--warn-line); }
.doc-expired  { color: var(--err); background: var(--err-ground); border-color: var(--err-line); }
.doc-missing  { color: var(--warn); background: var(--warn-ground); border-color: var(--warn-line); border-style: dashed; }
.doc-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.doc-line .request-who { text-decoration: none; }
.doc-line .request-who:hover { text-decoration: underline; }

/* company: a small text table */
.plain-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.plain-table th, .plain-table td { text-align: left; padding: 5px 6px; border-top: 1px solid var(--line); }
.plain-table th { font-size: var(--fs-small); color: var(--muted); border-top: 0; }
.plain-table td:not(:first-child), .plain-table th:not(:first-child) { text-align: right; }
.total-line { border: 1px solid var(--line); box-shadow: inset 6px 0 0 var(--brand); }

/* ------------------------------------------------- Section 2 document photos */
.doc-photos { display: grid; gap: 8px; margin: 8px 0 12px; }
.doc-photo { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }

/* 10/10: owner looking at the app as crew */
.as-crew { background: var(--accent, #c9a227); color: #111; font-size: 14px; padding: 6px 0; }
.as-crew a { color: inherit; font-weight: 700; }
/* 10/31: Pat's View as banner - the return is a POST button that reads as the link did */
.viewing-as .wrap { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.viewing-as .inline-form { display: inline; margin: 0; }
.viewing-as .linkbtn { color: inherit; font-size: inherit; font-weight: 700; }

.todo-list .card-link { display: grid; gap: 4px; }
.todo-list .person-name { font-weight: 700; }

/* 10/10: the staff calendar as the month - the den-schedule page's format, one chip per
   shift. 10/11 (Pat, from his own phone): the seven columns fill the width and never
   scroll sideways. 10/15 (Pat): the chip month is the 600px and up state (a tablet, a
   laptop, the desk); a phone no longer sees it, upright or turned. Under 600px the same
   page shows the marks calendar instead (R3:marks at the end of this file): a number and
   marks per day, never a name, and a tap opens the day page. A turned phone gets the marks
   calendar with wider cells (R3:landscape). The two are in the HTML together; CSS picks
   one by width.
     600px and up (a tablet, a desk) is the designed state: the page leaves the reading
       column and the seven columns fill the width. A chip is the first name over the
       shift's times; the cell keeps the day number and hours, the Lunch and Dinner lines,
       Closed on a posted day, the day's notes.
   Every chip carries the name, the initials and the times; the CSS shows what fits.
   The popover is position: fixed and static/cal.js keeps it inside the viewport. */
.cal-stage { width: 100%; }
.cal-wrap { width: 100%; }
.cal-nav { margin: 0 0 8px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dh { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 4px; font-weight: 600; }
.cal .day { background: var(--card, #fff); border: 1px solid var(--line, #d6dbe2); border-radius: 6px; padding: 6px 6px 7px; min-height: 118px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cal .day.closed { background: var(--ground-muted, #e9ecf0); border-style: dashed; }
.cal .day.out { background: transparent; border: 1px dashed var(--line, #d6dbe2); opacity: .55; min-height: 0; }
.cal .day.today { outline: 2px solid var(--focus); outline-offset: 1px; }
.cal .day.draft { border-color: var(--focus); }
.cal .num { font-weight: 700; font-size: 17px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.cal .num .n { white-space: nowrap; }
.cal .num .dow { display: none; font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal .num .hrs { margin-left: auto; font-weight: 600; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.cal .t { white-space: nowrap; }   /* one end of a span of hours never breaks inside; a narrow column breaks after the hyphen */
.cal .out .num { font-size: 12px; color: var(--muted); font-weight: 500; }
.cal .out .num .dow { display: inline; font-size: inherit; letter-spacing: 0; text-transform: none; }
.cal .closedlbl { font-size: 12px; color: var(--muted-on-tint); margin-top: auto; }
.cal .slot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: start; border-top: 1px solid var(--line, #d6dbe2); padding-top: 4px; }
.cal .lbl { font-weight: 700; font-size: 10px; letter-spacing: .02em; color: var(--muted); }
.cal .who { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; margin: 0; color: inherit; font-size: inherit; text-align: left; }   /* .who is also the header's name; this one is the chips */
.cal .closedam { font-size: 12px; color: var(--muted-on-tint); }
.cal .closedam .brief { display: none; }
.cal .ev { font-size: 11px; font-weight: 700; background: var(--ground-muted, #e9ecf0); border-radius: 4px; padding: 2px 6px; }
.cal .chip { display: block; position: relative; max-width: 100%; font-size: 12px; font-weight: 600; line-height: 1.25; padding: 2px 7px 3px; border-radius: 8px; white-space: nowrap; cursor: pointer; }
.cal .chip .nm { display: block; }
.cal .chip .ini { display: none; }
.cal .chip em, .cal .chip .tm { display: block; font-style: normal; font-weight: 400; font-size: 11px; white-space: normal; }
.cal .chip.need { color: #b3261e; background: #fde9e7; border: 1px dashed #b3261e; }
.cal .chip.fill { border: 1px dashed currentColor; }
.cal .chip.c0 { background: var(--p0-ground); color: var(--p0); } .cal .chip.c1 { background: var(--p1-ground); color: var(--p1); }
.cal .chip.c2 { background: var(--p2-ground); color: var(--p2); } .cal .chip.c3 { background: var(--p3-ground); color: var(--p3); }
.cal .chip.c4 { background: var(--p4-ground); color: var(--p4); } .cal .chip.c5 { background: var(--p5-ground); color: var(--p5); }
.cal .chip.c6 { background: var(--p6-ground); color: var(--p6); } .cal .chip.c7 { background: var(--p7-ground); color: var(--p7); }
.cal .chip .pop { display: none; position: fixed; left: 0; top: 0; z-index: 60; min-width: 170px; max-width: calc(100vw - 16px); white-space: normal; font-weight: 400; font-size: 12px; line-height: 1.35; color: var(--ink, #15181d); background: var(--card, #fff); border: 1px solid var(--line, #d6dbe2); border-radius: 6px; padding: 6px 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.cal .chip.show .pop { display: block; }
.cal .chip:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
/* training (owner_walkthrough-2): the chip keeps its person's color like any chip; a dashed edge marks it, and the popover
   carries a neutral Training tag after the job name. Red stays for errors. */
.cal .chip.training { border: 1.5px dashed currentColor; padding: 1px 6px 2px; }
.tag-neutral { display: inline-block; padding: 0 5px; border-radius: 6px; border: 1px solid var(--neutral-line); background: var(--neutral-ground); color: var(--neutral); font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.key { font-size: 13px; color: var(--muted); margin-top: 10px; }
form.inline { display: inline; }
/* the name chips keep one set of colors in light and dark (Pat 10/10) */
/* the designed state on a screen narrower than the 900px desk rule: a phone turned
   sideways or a tablet. The whole page leaves the reading column (the 900px rule does
   the same for .wide), the heading and the lines stay in it, the grid takes the width.
   The Lunch and Dinner words sit over their chips at every width, so a chip gets the
   whole column. */
@media (min-width: 600px) and (max-width: 899px) {
  .month .wrap { max-width: none; }
  .month main > *:not(.cal-stage) { max-width: var(--col); margin-left: auto; margin-right: auto; }
  .cal { gap: 4px; }
  .cal .day { min-height: 0; padding: 4px 5px 5px; gap: 4px; }
  .cal .num { font-size: 15px; }
  .cal .num .hrs { font-size: 10px; }
  .cal .slot { gap: 2px; }
  .cal .chip { font-size: 11px; padding: 2px 5px 3px; }
  .cal .chip.training { padding: 1px 4px 2px; }
  .cal .ev { font-size: 10px; padding: 1px 5px; }
}

/* ------------------------------------------------ information rows (10/10) */
/* Pat 10/10: the crew screens read like a schedule app, not a menu of boxes. One
   bold value per row, labels small and grey, the day in a gutter, totals on the
   section line, hairlines instead of cards, navigation in the bars and in text
   links, never in buttons stacked under the content. The month calendar keeps
   its own rules above. */
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.head h1 { margin: 2px 0 6px; min-width: 0; }
.head .hl { font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
.links { font-size: var(--fs-meta); color: var(--muted); margin: 0 0 8px; }
.links a { font-weight: 600; }
.rows { list-style: none; margin: 0 0 4px; padding: 0; }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; }
.row.plain { grid-template-columns: minmax(0, 1fr) auto; }
.row.off { padding: 6px 0; min-height: 46px; align-items: center; }
/* a past row stays a link, so it fades by color (accessibility-5): the time to --label (9.7:1), the lines stay --muted (4.8:1) */
.row.is-past .l1, .row.is-past .gut .num { color: var(--label); }
.row.is-past .l1 .dur { color: var(--muted); }
.rows > .row:first-child { border-top: 0; }
.gut { display: grid; line-height: 1.05; padding-top: 1px; }
.gut .dow { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.gut .num { font-size: 20px; font-weight: 700; color: var(--ink); }
.row.today .gut .dow, .row.today .gut .num { color: var(--link); }
.row-main { min-width: 0; display: grid; gap: 2px; align-content: start; }
.row-main a { color: inherit; text-decoration: none; }
.row-main a:hover .l1 { text-decoration: underline; }
.shift + .shift { margin-top: 8px; }
.l1 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.l1 .dur { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.l2 { font-size: var(--fs-meta); color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.35; }
.l3 { font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-aside { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); text-align: right; white-space: nowrap; padding-top: 2px; }
.row-aside a { font-weight: 600; }
.row-aside .btn-small { min-height: 34px; }
.chev { color: var(--muted); font-size: 18px; line-height: 1; padding-top: 1px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-gold { background: var(--warn-accent); } .dot-sky { background: var(--link); } .dot-mint { background: var(--ok-accent); }
.dot-rose { background: var(--err-accent); } .dot-sand { background: var(--warn); } .dot-lilac { background: var(--star-accent); }
.dot-teal { background: var(--brand); } .dot-slate { background: var(--muted); }
.dot-open { background: transparent; border: 1.5px dashed var(--warn-accent); }
.off-word { font-size: var(--fs-meta); color: var(--muted); }
.train { font-weight: 600; }   /* owner_walkthrough-2: a training job reads like any job; red is for errors */
.ok-word { color: var(--ok); font-weight: 600; } .warn-word { color: var(--warn); font-weight: 600; }
.err-word { color: var(--err); font-weight: 600; } .neutral-word { color: var(--neutral); font-weight: 600; }
.open-line { font-size: var(--fs-meta); color: var(--warn); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.open-line a { color: inherit; text-decoration: none; }
.open-line a:hover { text-decoration: underline; }
.day-line { font-size: var(--fs-meta); color: var(--ink); background: var(--panel); border-left: 3px solid var(--focus); padding: 2px 8px; border-radius: 0 4px 4px 0; margin-top: 2px; }
.sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--line); min-width: 0; }
.sec h2 { margin: 0; font-size: 15px; font-weight: 700; min-width: 0; }
.sec .when { font-size: var(--fs-meta); color: var(--muted); font-weight: 400; margin-left: 6px; }
.sec .tot { font-size: var(--fs-meta); font-weight: 600; color: var(--ink); white-space: nowrap; }
.sec .tot.quiet { color: var(--muted); font-weight: 400; }
.sec + .rows > .row:first-child, .sec + .kv { border-top: 0; }
.now { position: relative; height: 0; border-top: 2px solid var(--focus); margin: -1px 0; }
.now::before { content: ""; position: absolute; left: 0; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--focus); }
.kv { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; grid-template-columns: minmax(0, 1fr) auto; }
.kv .k { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); grid-column: 1; }
.kv .v { font-size: 15px; white-space: pre-line; grid-column: 1; min-width: 0; }
.kv .v.empty-v, .kv .v .empty { color: var(--muted); }
.kv .ka { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
.hero { padding: 10px 0 12px; }
.hero .big { font-size: 24px; font-weight: 700; line-height: 1.15; margin: 0; }
.hero .big .lead { font-weight: 600; color: var(--muted); }
.hero .sub { font-size: var(--fs-meta); color: var(--muted); margin: 3px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero .btn { margin-top: 12px; }
.none { font-size: var(--fs-meta); color: var(--muted); padding: 10px 0; margin: 0; }
.signout { margin-top: 22px; }
.signout .btn { width: auto; }
.form-rows .day { padding: 10px 0; border-top: 1px solid var(--line); }
.form-rows .day:first-child { border-top: 0; }
.read-form { margin: 0; }
.dot.kind-event { background: var(--star-accent); } .dot.kind-catering { background: var(--ok-accent); }
.dot.kind-closure { background: var(--err-accent); } .dot.kind-meeting { background: var(--link); } .dot.kind-other { background: var(--muted); }
.dot.kind-event, .dot.kind-catering, .dot.kind-closure, .dot.kind-meeting, .dot.kind-other { border: 0; }
.event .l3, .announcement .l3, .daily .l2 { white-space: normal; }
.sec .tot.ok-word { color: var(--ok); } .sec .tot.warn-word { color: var(--warn); } .sec .tot.err-word { color: var(--err); } .sec .tot.neutral-word { color: var(--neutral); }
.row.needs-you > a { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 700; }
.row.needs-you .count-n { color: var(--warn); font-weight: 700; min-width: 22px; }
.row.needs-you .count-words { font-weight: 600; }
.row.needs-you > a:hover .count-words { text-decoration: underline; }
/* 10/10 QA (Delmarva): the menu is plain rows, not pills; Sign out is its last line */
.menu-group ul { display: block; }
.menu-group a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; border: 0; border-radius: 0; border-top: 1px solid var(--line); font-size: 15px; }
.menu-group li:first-child a { border-top: 0; }
.menu-group a:hover { background: none; text-decoration: underline; }
.menu-group a[aria-current="page"] { background: none; border-color: var(--line); color: var(--link); }
.menu-signout { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.menu-row .menu-signout { display: inline-block; border: 0; margin: 0 0 0 12px; padding: 0; }
.linkbtn { background: none; border: 0; padding: 0; margin: 0; color: var(--link); font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.row.is-pinned, .announcement.is-pinned { box-shadow: none; }
/* the whole row is the link: the grid sits on the anchor so a screen reader meets a link, not a layout box */
.row:has(> a.cover) { display: block; padding: 0; }
.row > a.cover { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 10px 0; color: inherit; text-decoration: none; }
.row.plain > a.cover { grid-template-columns: minmax(0, 1fr) auto; }
.row > a.cover:hover .l1 { text-decoration: underline; }

/* ---------------------------------------------------------- avatars (10/10 round 2) */
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--select); color: var(--link); font-size: 13px; font-weight: 700; letter-spacing: .02em; flex: none; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.avatar.lg { width: 44px; height: 44px; font-size: 16px; }
.avatars { display: flex; flex-wrap: wrap; gap: 6px; }
.gut .avatar { margin-top: 2px; }

/* ===== R2 ===== every round-2 builder appends below this line, under its own marker comment */

/* R2:strip - My schedule: the week strip and the week stepper (10/10 R2, study
   fact 13). The stepper is one 13px line of text links: Previous at the left,
   Next at the right, Today between them only when the shown week is not the
   current one. Under it the seven days of the shown week: weekday over day
   number in the gutter's own type, today in --link, a 5px dot under each day
   with a shift of mine. Every day is an anchor to its row, so the strip works
   with scripts off. Past days fade the way past rows do. */
.strip { margin: 0 0 6px; }
.strip-nav { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: var(--fs-meta); }
.strip-nav a { font-weight: 600; white-space: nowrap; }
.strip-nav .strip-prev { margin-right: auto; }
.strip-nav .strip-next { margin-left: auto; }
.strip-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; border-bottom: 1px solid var(--line); }
.sday > a, .sday > span { display: grid; justify-items: center; align-content: start; gap: 1px; min-height: 48px; padding: 5px 0 6px; border-radius: 6px; color: var(--ink); text-decoration: none; line-height: 1.05; }
.sday > a:hover { background: var(--panel); }
.sday > a:active { background: var(--pressed); }
.sday .sd { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sday .sn { font-size: 17px; font-weight: 700; color: var(--ink); }
.sday .sdot { display: block; width: 5px; height: 5px; margin-top: 3px; border-radius: 50%; background: transparent; }
.sday.on .sdot { background: var(--ink); }
.sday.today .sd, .sday.today .sn { color: var(--link); }
.sday.today.on .sdot { background: var(--link); }
.sday.is-past .sn { color: var(--label); }   /* past days fade by color, not opacity (accessibility-5) */
/* a strip anchor lands the row with a breath of room above it */
.my-days > .row[id] { scroll-margin-top: 8px; }
@media print { .strip-nav { display: none; } }


/* R2:shiftpage */
/* The shift page: who else works that day as information rows (avatar initials
   in the gutter, the name bold, "5:00 PM - 9:30 PM · Floor" under it), the
   owner's Not working line, and the three actions as one row of buttons that
   open bottom sheets. A sheet is a <dialog class="sheet">. The markup leaves it
   open, so with no script it sits on the page as a plain section and the
   buttons are links that jump to it; static/sheet.js closes them and opens
   each as a modal sheet from the bottom. */
.coworkers .gut { padding-top: 0; }
.coworkers .l1 { font-size: 15px; }
.coworkers .l2 + .l2 { margin-top: 1px; }
.open-count { padding: 6px 0 10px; }
.open-count a { color: var(--warn); font-weight: 600; text-decoration: none; }
.open-count a:hover { text-decoration: underline; }
.not-working .v { font-size: 14px; }
.act-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 4px; }
.act-row .btn-small { flex: 1 1 auto; min-height: 40px; justify-self: auto; }
.act-row:empty { display: none; }
/* the sheet in the two states it can be in */
.sheet { color: var(--ink); background: var(--card); }
.sheet .sheet-sec { margin-top: 0; display: block; }           /* the title keeps its line; the state words sit under it */
.sheet .sheet-sec .tot { display: block; margin-top: 2px; white-space: normal; }
.sheet .sheet-body { padding: 8px 0 0; }
.sheet .sheet-body > .kv:first-child { border-top: 0; }
.sheet .sheet-body form { margin: 0; }
.sheet .sheet-body .stack > :first-child { margin-top: 0; }
.sheet-handle, .sheet-cancel { display: none; }
/* open on the page (no script): a plain section in the flow of the page */
.sheet[open]:not(:modal) { position: static; display: block; width: auto; max-width: none; height: auto; max-height: none; margin: 18px 0 0; padding: 0; border: 0; overflow: visible; }
/* with the script: a sheet from the bottom, one reading column wide */
.sheet:modal {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: var(--col);
  max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: 16px 16px 0 0;
  padding: 6px max(var(--gutter), env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  box-shadow: 0 -8px 32px rgba(26, 26, 26, 0.18);
  animation: sheet-up 200ms ease-out;
}
.sheet::backdrop { background: rgba(26, 26, 26, 0.45); animation: sheet-fade 200ms ease-out; }
.sheet:modal .sheet-handle { display: block; position: relative; width: 36px; height: 4px; border-radius: 2px; background: var(--control); margin: 4px auto 12px; touch-action: none; cursor: grab; }
.sheet:modal .sheet-handle::before { content: ""; position: absolute; top: -12px; bottom: -12px; left: -40px; right: -40px; }   /* a finger-wide target around the 4px bar, positioned so no margin collapses into the bar */
.sheet:modal .sheet-cancel { display: block; text-align: center; font-size: var(--fs-meta); font-weight: 600; padding: 14px 0 0; }
.sheet:modal .btn { width: 100%; }
.sheet.is-dragging { animation: none; transition: none; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet:modal, .sheet::backdrop { animation: none; } }
/* no flash of the open forms before sheet.js closes them: browsers that know the
   scripting query hide the no-script state when scripts run at all */
@media (scripting: enabled) { .sheet[open]:not(:modal) { display: none; } }
html.sheet-open { overflow: hidden; }
@media (min-width: 900px) { .sheet:modal { inset: auto 0 24px 0; border-radius: 16px; } }
@media print { .sheet, .act-row { display: none !important; } }


/* R2:owner1 - the owner side in the row language: Team, the record, Hours, Shift problems */
/* the person's initials in the gutter of a whole-row link */
.row > a.cover .gut .avatar { margin-top: 0; }
.team-rows .l2, .hours-rows .l2 { display: block; white-space: normal; }
.team-rows .l3 { font-size: var(--fs-small); }
/* Hours: the hours are the one bold value at the right */
.hours-aside { font-size: 16px; font-weight: 700; color: var(--ink); padding-top: 1px; }
.hours-aside.zero { color: var(--muted); font-weight: 600; }
/* the record's head: initials, the name, the state word */
.record-head { align-items: center; }
.record-head h1 { flex: 1; margin: 0; }
.record-head .avatar.lg { margin-right: 2px; }
.owner-actions { line-height: 1.7; }
.owner-actions .inline-form { display: inline; margin: 0; }
.owner-actions .err-word { color: var(--err); }
.jump-links a { color: var(--muted); font-weight: 600; }
.jump-links a:hover { color: var(--link); }
/* label-over-value rows: a POST that reads as the action link at the right */
.kv form.ka { margin: 0; }
.kv .v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; user-select: all; -webkit-user-select: all; }
.sec a.tot { color: var(--link); }
/* rows whose second or third line is allowed to wrap: a note, a reason, a request */
.l2.wrap, .l3.wrap { display: block; white-space: normal; overflow: visible; }
.row-aside .ink { color: var(--ink); }
.punch-no { color: var(--muted); font-weight: 600; }
.row.punch.open .l1 { color: var(--ok); }
.activity-action { font-size: 14px; font-weight: 600; word-break: break-word; }
/* a form on hairlines: the one small button sits under the last field */
.form-rows > .btn-small { margin-top: 10px; }
.form-rows .day > .btn-small { margin-top: 8px; }
/* Shift problems: the person is the bold line, the shift sits under it in its own voice */
.problem .l1 a { color: var(--link); }
.problem .shift { display: grid; gap: 2px; }
.problem .shift .l1 { font-size: 15px; font-weight: 600; }
.problem-aside { display: grid; gap: 6px; justify-items: end; align-content: start; }
.problem-aside form { margin: 0; }
.problem-aside .btn-small { min-width: 86px; min-height: 34px; }
.problem-aside .small-link { padding-top: 2px; }
@media (max-width: 420px) {
  .problem { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .problem-aside .btn-small { min-width: 74px; padding-left: 8px; padding-right: 8px; }
}


/* R2:clockplus */
/* the distance line under a punch and under the clocked-in hero: a fact, grey, never the coordinates */
.where { color: var(--muted); }
.hero .sub.where { margin-top: 2px; }
/* the calendar link is shown as text a person can select; it is long, so it wraps anywhere */
.cal-link { word-break: break-all; overflow-wrap: anywhere; font-size: var(--fs-meta); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.kv form.ka { margin: 0; }


/* R2:passkeys - Face ID sign-in (WebAuthn). The sign-in button and the Add button are
   hidden until static/passkeys.js finds a platform authenticator; the rows and the
   Remove forms work without it. */
#passkey-login[hidden], #passkey-login [hidden], #passkeys [hidden] { display: none; }
.passkey-login { margin: 0 0 var(--stack-gap); }
.btn-faceid { gap: 8px; }
.btn-faceid .icon { width: 22px; height: 22px; flex: none; }
.passkey-note { font-size: var(--fs-meta); color: var(--muted); margin: 6px 0 0; }
.passkey-note:empty { display: none; }
#passkeys .passkey-note { padding: 6px 0 0; }
.or-line { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; color: var(--muted); font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
#passkeys .row-aside { padding-top: 4px; }
#passkeys .row-aside form, #passkeys form { margin: 0; }
#passkeys .l2 .sep { color: var(--control); }
#passkeys .btn { margin-top: 10px; }
#passkeys { margin: 0 0 14px; }


/* R2:homeclock */
/* Home (10/10 round 2): the clock rides on the crew hero when it is time to punch
   (the countdown line, then one primary button), and the owner's Home opens on
   the Today board: avatar in the gutter, name bold, hours and job in grey, the
   punch state as the aside. Rows, hairlines, one button - nothing else new. */
.hero .clock-line { font-size: var(--fs-meta); color: var(--muted); font-weight: 600; margin: 10px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.hero .clock-line .countdown { color: var(--ink); font-size: 15px; }
.hero .clock-line .countdown.warn-word { color: var(--warn); }
.hero .clock-line .elapsed { color: var(--ink); }
.hero .alerts-line { font-size: var(--fs-meta); margin: 8px 0 0; }
.hero .alerts-line a { color: var(--muted); font-weight: 600; text-decoration: none; }
.hero .alerts-line a:hover { text-decoration: underline; }
.hero .clock-form { margin: 0; }
.hero .clock-form .btn { margin-top: 12px; }
.today-sec { margin-top: 6px; }
.today-board .today-row > a.cover { align-items: center; }
.today-board .today-row .gut { padding-top: 0; }
.today-board .today-row .gut .avatar { margin-top: 0; }
.today-board .today-row .l2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-board .today-row .l2 .dot { vertical-align: -1px; }
/* the aside is two unbreakable chunks (words, time); on a phone it may stack them so the
   main line keeps its hours and job. The cap is in em, not %, because a % max-width on a
   grid item resolves against its own track and collapses it. */
.today-board .today-row .row-aside { white-space: normal; max-width: 7.5em; line-height: 1.3; }
.today-board .today-row .row-aside .nw { white-space: nowrap; }
@media (min-width: 700px) { .today-board .today-row .row-aside { max-width: none; } }
.today-board .today-open { padding: 8px 0; }
.quiet-word { color: var(--muted); font-weight: 600; }
.today-week .row-aside { font-variant-numeric: tabular-nums; }


/* R2:crewforms */
/* Crew forms and the last crew screens in the row language (10/10 round 2). A form
   is plain fieldsets: the legend is the section line, every field sits on a
   hairline, labels stay above their inputs, one primary button at the end with
   Cancel as a text link beside it. No card boxes anywhere on these screens. */
.fs { margin: 0; padding: 0; min-width: 0; }
.fs > legend { display: block; width: 100%; margin: 18px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.fs > legend .when { font-size: var(--fs-meta); color: var(--muted); font-weight: 400; margin-left: 6px; }
.fs > legend a.when { float: right; margin: 0; color: var(--link); font-weight: 600; }
.fs-form > .fs:first-of-type > legend { margin-top: 6px; }
.fs > * + * { border-top: 1px solid var(--line); }
.fs > legend + *, .fs > .hint + *, .fs > .error { border-top: 0; }
.fs > .field, .fs > .segfield, .fs > .two-narrow, .fs > .pair, .fs > .form-text, .fs > .choices, .fs > .pick, .fs > .fixed { padding: 10px 0; margin: 0; }
.fs > .hint { padding: 8px 0 2px; margin: 0; }
.fs > .error { padding: 0 0 8px; margin: -4px 0 0; }
.fs > .check { padding: 8px 0; }
.fs .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fs .pair .field { margin: 0; min-width: 0; }
.fs .pair input[type="time"] { width: 100%; min-width: 0; }
.fs .fixed-value { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 15px; }
.fs .fixed .hint { margin: 2px 0 0; }
.fs .pick > legend { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.fs .pick .check { min-height: 36px; }
.fs .choices > legend { margin-bottom: 2px; }
.form-text { font-size: 15px; line-height: 1.45; color: var(--ink); }
.form-text p { margin: 0 0 8px; }
.form-text p:last-child { margin-bottom: 0; }
.form-text .hint { margin: 6px 0 0; }
.form-text.intro { padding: 2px 0 8px; }
.form-text.notes { margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); font-weight: 600; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin: 18px 0 0; }
.actions .btn { width: auto; flex: 1 1 200px; max-width: 300px; }
.actions .cancel { font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
.actions + .none { padding-top: 10px; }
.read-form .actions { margin-top: 12px; }
/* rows that carry text links inside the grey lines (tax steps, training, posts) */
.l3.wrap { white-space: normal; }
.step .l2 a, .step .l3 a, .training-item .l2 a, .feed-post .l3 a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.step .row-aside, .training-item .row-aside, .result-row .row-aside { white-space: nowrap; }
.steps { counter-reset: none; }
/* posts: the composer on a hairline, each post a row with the author's initials in the gutter */
.composer { padding: 2px 0 14px; margin: 0 0 4px; border-bottom: 1px solid var(--line); }
.composer .field { margin: 0 0 8px; }
.composer .btn-small { min-height: 38px; padding: 4px 18px; }
.feed-post .l1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.feed-post .l1 .err-word { font-size: var(--fs-meta); }
.post-text { font-size: 15px; line-height: 1.4; color: var(--ink); white-space: pre-line; }
.feed-post.is-removed .post-text, .feed-post.is-removed .l1 .post-author { color: var(--muted); }
/* the coworker page: initials, name and title on one line, Edit at the right */
.profile-top { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.profile-top .profile-words { min-width: 0; flex: 1 1 auto; }
.profile-top h1 { margin: 0; }
.profile-top .profile-title { color: var(--muted); font-weight: 600; margin: 1px 0 0; font-size: var(--fs-meta); }
.profile-top .hl { font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
/* training: the graded result is a state band, the lesson is plain text, the counts sit on the section line */
.hero.graded { padding: 10px 12px 12px; margin: 6px 0 10px; border-left: 4px solid; border-radius: 0 4px 4px 0; }
.graded-ok { border-color: var(--ok-accent); background: var(--ok-ground); }
.graded-ok .big, .graded-ok .sub { color: var(--ok); }
.graded-err { border-color: var(--err-accent); background: var(--err-ground); }
.graded-err .big, .graded-err .sub { color: var(--err); }
.lesson-body { padding: 10px 0 4px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.sec .tot.counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; white-space: normal; }
.test-form .question { padding: 10px 0 2px; }


/* R2:owner2 - time-off answer, announcements, calendar event form, everyone's documents, training admin */
.btn-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.form-rows .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.form-rows .pair .field { margin: 0; min-width: 0; }
.form-rows .pair input { width: 100%; min-width: 0; }
.form-rows .day > .hint:last-child { margin: 4px 0 0; }
.form-rows .day > .field, .form-rows .day > .segfield, .form-rows .day > .choices, .form-rows .day > .check { margin: 0; }
.form-rows .day > .check { border-top: 0; padding: 0; min-height: 0; }
.form-rows .segfield legend { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.form-rows .segfield .hint { margin: 0 0 6px; }
.form-rows + .btn { margin-top: 12px; }
.seg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.seg-kinds label { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 12px; min-height: 48px; }
.seg-kinds .seg-word { line-height: 1.1; }
.seg-kinds input:checked + label .dot { box-shadow: 0 0 0 2px #fff; }
.links form { display: inline; margin: 0; }
.links .linkbtn { font-size: inherit; }
.links a.err-word, .linkbtn.err-word { color: var(--err); }
.end-links { margin-top: 16px; }
.owner-links { margin-top: 10px; }
.hero h1.big { margin: 0; }
.announcement-hero { padding-top: 4px; }
.prose p { margin: 0 0 10px; white-space: pre-line; }
.prose p:last-child { margin-bottom: 0; }
.prose { padding: 8px 0 2px; }
.readers .row-aside { padding-top: 8px; }
.readers .row-main { align-self: center; }
.request-rows .l2 { white-space: normal; }
.request-rows .request-note { color: var(--ink); }
.doc-rows .l2, .doc-rows .l3 { white-space: normal; }
.doc-rows .row-aside { line-height: 1.4; }
.doc-rows .row-aside .small-link { font-weight: 600; }
.h-who { font-weight: 400; color: var(--muted); font-size: var(--fs-h2); }
.head .hl.meta { font-weight: 400; color: var(--muted); }
.result-rows .row-main { align-self: center; }
.crossing .row-aside { padding-top: 3px; }


/* R2:motion */
/* Motion and feel (10/10 round 2): cross-document view transitions, pressed
   states, toasts above the bottom bar, busy submit buttons. No framework, no
   inline script: static/app.js is the only file, loaded from base.html.
   Every duration here sits between 60 and 220 ms; prefers-reduced-motion turns
   the page transition off and the global rule above flattens the rest. */

/* -- the page transition: main fades and lifts, the bars hold still ------ */
/* 10/31 (Pat 12:36 PM: "any tab other than home has that link floating about a centimeter up
   from the bottom of the screen"): Home is the one screen the installed app opens onto without a
   cross-document transition; every other tab arrived through one, and on the phone the fixed
   bottom bar came out of it lifted off the glass. The transition is off, so every tab reaches
   the screen the way Home does. The names below stay for the in-page pieces that use them. */
@view-transition { navigation: none; }
header.top { view-transition-name: top; }
nav.bottom { view-transition-name: bottom; }
main#main { view-transition-name: main; }
.toasts { view-transition-name: toasts; }
::view-transition-group(*) { animation-duration: 200ms; animation-timing-function: ease; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(top), ::view-transition-new(top),
::view-transition-old(bottom), ::view-transition-new(bottom) { animation: none; mix-blend-mode: normal; }
::view-transition-group(top), ::view-transition-group(bottom) { animation: none; }
::view-transition-old(main) { animation: r2-page-out 160ms ease-in both; mix-blend-mode: normal; }
::view-transition-new(main) { animation: r2-page-in 200ms cubic-bezier(.2, .8, .2, 1) both; mix-blend-mode: normal; }
@keyframes r2-page-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes r2-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(main), ::view-transition-new(main) { animation: none; }
}

/* -- pressed states: a row goes --panel under the finger, a button dips --- */
a, button, summary, label, [role="button"], .row, .seg label, .check label {
  -webkit-tap-highlight-color: transparent;
}
a { transition: opacity 150ms ease; }
a:active { opacity: .55; transition: none; }
.brand:active, .bottom a:active, .row > a.cover:active, .row.needs-you > a:active,
.row-main > a.shift:active, .menu-group a:active, .jump a:active, .tile:active,
.person-card:active, .open-line a:active, .toast:active { opacity: 1; }
.btn, .linkbtn, .menu > summary { transition: opacity 150ms ease, background-color 120ms ease, transform 120ms ease; }
.btn:active, .btn-primary:active, .linkbtn:active, .menu > summary:active { opacity: .72; transition: opacity 0ms; }
.btn:active { background: var(--pressed); }
.btn-primary:active { background: var(--brand); }
.btn-danger:active { background: var(--err-ground); }
.row > a.cover, .row.needs-you > a { position: relative; isolation: isolate; }
.row > a.cover::before, .row.needs-you > a::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--gutter));
  z-index: -1;
  background: var(--panel);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}
.row > a.cover:active::before, .row.needs-you > a:active::before { opacity: 1; transition: none; }
.row-main > a.shift { border-radius: 6px; transition: background-color 150ms ease, box-shadow 150ms ease; }
.row-main > a.shift:active { background: var(--panel); box-shadow: 0 0 0 6px var(--panel); transition: none; }
.menu-group a:active, .jump a:active, .tile:active, .person-card:active { background: var(--panel); }
.seg label:active { background: var(--pressed); }
.seg input:checked + label:active { background: var(--brand); }
.check label:active { opacity: .7; }
.menu-panel { transform-origin: top right; animation: r2-menu-in 160ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes r2-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* -- the bottom bar: the current tab is filled, a tap scales lightly ------ */
.bottom a { transition: background-color 120ms ease, color 120ms ease; }
.bottom a > * { transition: transform 60ms ease; }
.bottom a:active { background: var(--nav-hover); }
.bottom a[aria-current="page"]:active { background: var(--select); }
.bottom a:active > * { transform: scale(.94); }
.bottom .icon { fill: currentColor; fill-opacity: 0; transition: fill-opacity 160ms ease; }
.bottom a[aria-current="page"] .icon { fill-opacity: .18; }
.bottom a[aria-current="page"] .icon { stroke-width: 2.25; }

/* -- toasts: flashes live above the bottom bar, not at the top of main ---- */
.toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  z-index: 12;
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  pointer-events: none;
}
.signed-in .toasts { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); }
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid;
  border-radius: var(--radius);
  animation: r2-toast-in 220ms cubic-bezier(.2, .8, .2, 1) both;
}
.toast.flash-ok { box-shadow: inset 6px 0 0 var(--ok-accent), 0 8px 24px rgba(0, 0, 0, .16); }
.toast.flash-err { box-shadow: inset 6px 0 0 var(--err-accent), 0 8px 24px rgba(0, 0, 0, .16); }
.toast.can-tap { cursor: pointer; }
.toast.is-gone { opacity: 0; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.toast-x {
  flex: none;
  margin-left: auto;
  padding: 6px 0 6px 10px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@keyframes r2-toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .signed-in .toasts { bottom: 20px; }
}

/* -- busy buttons: "Saving..." and nothing else runs until the page comes back */
.btn:disabled, .linkbtn:disabled { cursor: default; }
.btn.is-busy, .linkbtn.is-busy { opacity: .72; cursor: progress; }
.btn.is-busy:active { transform: none; }
.btn.is-busy::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: r2-spin 700ms linear infinite;
}
@keyframes r2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::after { display: none; }
  .toast { animation: none; }
  .menu-panel { animation: none; }
}

/* R2:pwa - the installed app: the offline line, the Notifications screen in rows, and a
   few native touches in standalone mode. 10/15: the Add to Home Screen walkthrough on Home
   and on Notifications is gone (the setup screen below carries the drawn one); the
   .install-steps rows stay for the orientation and payroll completion pages. */
.install-steps .gut .num { font-size: 18px; color: var(--link); }
.install-steps .row { padding: 9px 0; }
.push-need { font-size: var(--fs-meta); font-weight: 600; color: var(--warn); margin: 8px 0 2px; }
.push .state-line { font-size: 15px; margin: 10px 0 8px; }
.push .btn { width: auto; min-width: 200px; margin: 6px 0 4px; }
.push-off-line { margin: 4px 0 8px; }
.push-off-line .linkbtn[hidden] { display: none; }
.owner-test .links { margin: 10px 0; }
.none-word { color: var(--muted); font-weight: 400; }
.phone .row-aside .read-form { margin: 0; }
.offline-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 8px 0; margin: 0 0 4px; border-bottom: 1px solid var(--line); color: var(--warn); font-weight: 600; }
.offline-line .offline-when { color: var(--muted); font-weight: 400; }
.offline-line .offline-reload { margin-left: auto; font-weight: 600; white-space: nowrap; }
.offline-shell h1 { margin-top: 10px; }
@media (display-mode: standalone) {
  html { -webkit-tap-highlight-color: transparent; }
  .bottom a, .row > a.cover, .brand, .menu summary { -webkit-user-select: none; user-select: none; }
}

/* 10/15 (Pat, 12:56 PM): the phone setup gate (templates/setup_phone.html, teamapp/setup.py).
   Three information rows with the state in the aside; the drawn walkthrough spans the row
   under step 1. Inside the installed app (install.js marks <html> standalone) the walkthrough
   is hidden, and so is the open-the-app row until it reads Done: the beacon is on its way and
   the rows read Done after the reload. The Install button's box is rendered hidden and shown
   by install.js only when Chrome offers its prompt, so its display rule must not beat [hidden]. */
.setup-steps .gut .num { font-size: 18px; color: var(--link); }
.setup-step .setup-walk { grid-column: 1 / -1; min-width: 0; padding-top: 2px; }
.setup-step .setup-other { margin: 8px 0 2px; text-align: center; }
.setup-prompt { display: grid; justify-items: center; gap: 2px; margin: 10px 0 2px; }
.setup-prompt[hidden] { display: none; }
.setup-prompt .btn { justify-self: center; }
.setup-prompt .hint { margin: 0; }
.setup-push { margin: 4px 0 0; }
.setup-push .state-line { margin: 6px 0 6px; }
.setup-continue { margin-top: 18px; }
.standalone .setup-browser:not(.is-done), .standalone .setup-walk { display: none; }

/* R2 QA 10/11 (Delmarva): fixes across the round-2 screens */
.l2 { display: block; }
.l2 .dot { display: inline-block; vertical-align: -1px; margin-right: 5px; }
.l2 .avatar { vertical-align: middle; }
.sec .when { margin-left: 4px; }
.sec .when::before, legend .when::before { content: "\00a0"; }   /* a spoken space before the when words: "Next week, Oct 12 - 18" */
.rows.tonight { border: 0; }
.rows.tonight .l2 { white-space: pre-line; }
.l2.wrap, .l3.wrap { padding-left: 0; margin-left: 0; text-indent: 0; }
.row.needs-you .count-n { background: none; box-shadow: none; padding: 0; border-radius: 0; min-width: 22px; font-size: 16px; }
.punch-note { margin: 6px 0 0; }


/* R2:pickups - 10/11 (Pat): "available for shift pickups as needed" on the Availability
   screen. The hint under the yes/no shows while Yes is picked - CSS only, no script. */
.pickups-hint { display: none; margin: 6px 0 0; }
.pickups .segfield:has(input[value="1"]:checked) + .pickups-hint { display: block; }
.open-rows .row-aside { padding-top: 3px; }


/* R2:nudges */
/* The clock-out choice (10/11): after the shift's end, a tap far from the location
   asks which time, as one segmented row of two times on an fs-form. Each label is
   two short lines ("9:30 PM, your shift end"), so the segments get a little height.
   The reminder hint under the clock controls is the punch-note hint with a link. */
.seg-when label { min-height: 48px; padding: 6px 4px; }
.nudge-note a { color: var(--link); font-weight: 600; }
/* "closed at shift end" / "set to shift end" on a punch row: in the voice of the length beside it */
.l1 .punch-how { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }


/* R2:outbox - 10/11 (Pat): texts to the crew from the company number. LineDrive drafts,
   an owner sends. The list is two sections of rows, the message is the words, the names
   it goes to and one button, the composer is an fs-form. The composer shows only the
   picker that fits the audience picked (CSS :has; a browser without it shows all three,
   and only the matching one is read). No script. */
.outbox-rows .l2 { white-space: normal; }
.outbox-body { white-space: pre-line; }
.edit-words { padding-top: 8px; }
.outbox-send { margin-top: 6px; }
.outbox-send > .hint { padding: 8px 0 0; }
.outbox-send .actions { margin-top: 12px; }
.goes-to .row-main, .deliveries .row-main { align-self: center; }
.deliveries .row-aside { padding-top: 8px; }
.deliveries .l3.wrap { color: var(--err); }
.fs > .aud-person, .fs > .aud-location { padding: 10px 0; margin: 0; }
.fs > .aud-person .field, .fs > .aud-location .choices { margin: 0; }
.fs > .aud-everyone { padding: 10px 0 2px; margin: 0; }
.outbox-compose:has(#audience_kind_person:checked) .aud-location,
.outbox-compose:has(#audience_kind_person:checked) .aud-everyone,
.outbox-compose:has(#audience_kind_location:checked) .aud-person,
.outbox-compose:has(#audience_kind_location:checked) .aud-everyone,
.outbox-compose:has(#audience_kind_everyone:checked) .aud-person,
.outbox-compose:has(#audience_kind_everyone:checked) .aud-location { display: none; }

/* R2:month-landscape (10/11) - the desk menu row at 900px and up, which an iPhone Pro
   Max turned sideways (932px) also gets. The Menu sheet's rows ("the menu is plain
   rows, not pills", above) land after the 900px block and so turned the row into a
   tall column of links. These give the row back its one line of 13px links. */
@media (min-width: 900px) {
  .menu-row .menu-group ul { display: flex; flex-wrap: wrap; gap: 4px 6px; }
  .menu-row .menu-group a { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; }
  .menu-row .menu-group li:first-child a { border-top: 1px solid transparent; }
  .menu-row .menu-group a:hover { background: var(--nav-hover); text-decoration: none; }
  .menu-row .menu-group a[aria-current="page"] { background: var(--select); color: var(--link); border-color: var(--focus); }
}

/* ------------------------------------------- launch morning (10/12): hit areas */
/* accessibility-2 and -7: the standalone text links and the small buttons get a 44 px hit area without
   moving a baseline. A text link that is a flex item takes 14 px of padding top and bottom and the same
   negative margin, so its margin box (and the line it sits on) is the size it was; the sides take 10 px
   of padding and -10 px of margin, so the words stay where they were and Next stays flush right inside
   the 16 px gutter. A button keeps its look and gains an invisible 44 px band (::after). */
.strip-nav a, .head .hl, .sec a.tot, .actions .cancel {
  display: inline-block;
  padding: 14px 10px;
  margin: -14px -10px;
}
.menu-signout .linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: 0 -10px; }
.menu-row .menu-signout .linkbtn { min-height: 0; margin: 0; padding: 0; }
.btn-small, .day summary { position: relative; }
.btn-small:not(.is-busy)::after, .day summary::after {   /* a busy button's ::after is its spinner (below); it is disabled then */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  min-height: 100%;
  transform: translateY(-50%);
}
/* menu-title on the 900px row sits on --nav: the darker muted (accessibility-4) */
@media (min-width: 900px) {
  .menu-row .menu-title { color: var(--muted-on-tint); }
}

/* owner_walkthrough-14: the phone builder turned sideways fits the whole week. In landscape from 700 px the
   grid leaves the 480 px reading column (the month does the same at 600 px) and takes the width: at 844 the
   box is 810 px inside, the name column 84 px, the hours 52 px and each day (810 - 136) / 7 = 96 px. The words
   above and below stay in the column. A phone held upright keeps the 132 px columns and the sideways scroll. */
@media (min-width: 700px) and (orientation: landscape) and (max-width: 899px) {
  .builder .wrap { max-width: none; }
  .builder main > *:not(.views) { max-width: var(--col); margin-left: auto; margin-right: auto; }
  .builder .view-days, .builder .view-tools { max-width: var(--col); margin-left: auto; margin-right: auto; }
  .grid-scroll.is-builder .week-grid { width: 100%; grid-template-columns: 84px repeat(7, minmax(0, 1fr)) 52px; }
  .grid-scroll.is-builder .grid-shift { padding: 4px; }
  .grid-scroll.is-builder .grid-shift .job { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


/* R3:teamlist (10/15) - everyone's week as information rows (Pat 10/15 8:01 PM): a day is a
   totals row with the day in the gutter, the shifts under it with an empty gutter, empty days
   kept, the second week under its own section line. The person's color is the month chip's:
   the eight pairs the chips have always had, as tokens so the list, the chips and the
   landscape week read one set. */
:root { --p0: #1f5fa8; --p0-ground: #e3edf9; --p1: #0f766e; --p1-ground: #d9f2ef; --p2: #b42318; --p2-ground: #fde3df; --p3: #86407f; --p3-ground: #f4e4f2;
        --p4: #9a5300; --p4-ground: #fbecd8; --p5: #1f6f3f; --p5-ground: #dff3e6; --p6: #4b3fa8; --p6-ground: #e8e5fa; --p7: #76640a; --p7-ground: #f5eecb; }
.strip-nav .strip-month { margin-left: 12px; }
.team-weeks .row.day-tot > a.cover { padding: 8px 0; align-items: center; min-height: 50px; }
.team-weeks .day-tot .tot { font-size: var(--fs-meta); font-weight: 600; color: var(--ink); }
.team-weeks .day-tot .tot.quiet { color: var(--muted); font-weight: 400; }
.team-weeks .day-tot .tot.err-word { color: var(--err); }
.team-weeks .day-tot .row-aside { font-weight: 400; }
.team-weeks .row.same { padding: 8px 0; }
.team-weeks .row.same .gut { visibility: hidden; }   /* the 44 px column stays so the lines align under the day */
.team-days > .row[id] { scroll-margin-top: 8px; }
/* the shift row's middle column is the link itself (a.row-main), not a link inside it; the
   day-card .shift rule (padding, a hairline above a second shift) does not apply to it, the
   row's own hairline and padding do */
.team-weeks a.row-main, .day-shifts a.row-main { color: inherit; text-decoration: none; }
.team-weeks .row.same > a.row-main.shift, .day-shifts .row.plain > a.row-main.shift { padding: 0; border-top: 0; gap: 2px; }
.team-weeks a.row-main:hover .l1, .day-shifts a.row-main:hover .l1 { text-decoration: underline; }
.l2 .nm { color: var(--ink); font-weight: 600; }
.dot.pc0 { color: var(--p0); } .dot.pc1 { color: var(--p1); } .dot.pc2 { color: var(--p2); } .dot.pc3 { color: var(--p3); }
.dot.pc4 { color: var(--p4); } .dot.pc5 { color: var(--p5); } .dot.pc6 { color: var(--p6); } .dot.pc7 { color: var(--p7); }
.dot[class*="pc"] { background: currentColor; }
.dot[class*="pc"].fill { background: transparent; border: 1.5px dashed currentColor; }
.dot[class*="pc"].dot-open { background: transparent; border: 1.5px dashed var(--warn-accent); }
.sday.is-here > a { background: var(--panel); }
/* the day page (section 5): plain rows for the shifts and the rest of the day */
.day-shifts .row.plain, .day-also .row.plain { padding: 8px 0; }
.day-also .note .l1 { font-size: 15px; font-weight: 600; }
.day-also .note .l1 a { color: inherit; }
.day-shifts .tags:empty { display: none; }
.day-nav { margin: 0 0 6px; }
/* the one link each on My schedule (the day number) and Everyone's week (the day header) */
.gut a.num { color: inherit; text-decoration: none; }
.grid-dayhead a { color: inherit; text-decoration: none; }

/* R3:marks (10/15) - the month on a phone: a number and marks per day, never a name (the
   study: When I Work's month navigator and Connecteam's strip marks, scaled to be read).
   At 375 px: 343 px of width over seven 49 px cells, 60 px tall; the day number top left,
   the shift count in an 18 px badge top right, the marks (5 px dots) along the bottom. */
.marks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin: 0 0 8px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.marks .mh { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marks .mday { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-height: 60px; min-width: 0; padding: 4px 3px 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.marks a.mday:active { background: var(--pressed); }
.marks .n { font-size: 15px; font-weight: 700; line-height: 20px; }
.marks .cnt { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--select); color: var(--link); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.marks .closedlbl { font-size: 10px; line-height: 12px; color: var(--muted-on-tint); }
.marks .draftlbl { font-size: 9px; line-height: 11px; font-weight: 600; color: var(--warn); }
.marks .mk { display: flex; flex-wrap: wrap; gap: 3px; min-height: 6px; }
.marks .dot, .marks-key .dot { width: 5px; height: 5px; }
.marks .mk-note, .marks-key .mk-note { background: var(--ink); }
.marks .mk-pay, .marks-key .mk-pay { width: 6px; height: 6px; background: transparent; border: 1.5px solid var(--ink); }
.marks-key .dot { vertical-align: middle; margin: 0 2px; }
.marks .mday.today { outline: 2px solid var(--focus); outline-offset: -2px; }
.marks .mday.today .n { color: var(--link); }
.marks .mday.out { opacity: .55; }
.marks .mday.out .n { font-size: 12px; font-weight: 500; color: var(--muted); }
.marks .mday.closed { background: var(--ground-muted); }
.marks .mday.draft .cnt { background: var(--warn-ground); color: var(--warn); }
/* which calendar shows: the marks under 600 px, the chips from 600 px, the marks again on a turned phone (R3:landscape) */
@media (max-width: 599px) { .month .cal-stage, .month .cal-key { display: none; } }
@media (min-width: 600px) { .month .marks, .month .marks-key { display: none; } }

/* R3:landscape (10/15) - the week on one screen when the phone is turned (Pat 10/15 8:07 PM).
   Laid out for the landscape viewport, never rotated. The app header and the bottom bar stay.
   Seven columns of 24 px lines; the number of lines a column may hold is set per viewport
   height below (the bands), and the server's "+N more" line takes the last slot when a day
   holds more. Colors are the month chips' pairs (the --pN tokens). A line is the first name
   (11 px, bold) over the times (10 px, proportional digits, drawn in by .2 px): measured in
   Chrome with the app's font stack, "10:30 AM-4:30 PM" is 101 px at 11 px and 86 px this
   way, and a line's inside is 94 px on an 812 px phone once the 44 px side insets are paid
   (852: 95, 844: 97, 740: 91). Under 700 px (667, the SE) the inside is 81 px, so the times
   go to 9 px (78 px). The wbr inside the span is hidden here: a span that still cannot fit
   ends in an ellipsis instead of hiding a second row. */
.lw { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .teamlist .head, .teamlist .places, .teamlist .strip, .teamlist .links, .teamlist .team-weeks { display: none; }
  /* a 932 px phone turned sideways is also the 900 px desk state (the Menu row under the header, no
     bottom bar), which the height below does not budget: the team list keeps the phone chrome */
  .teamlist .menu-row { display: none; }
  .teamlist .menu { display: block; }
  .teamlist .bottom { display: block; }
  /* 10/15 11:42 PM (Pat: "scrolls a bit", white space under the shifts): the page is the
     viewport on this screen and nothing else. The body is a column the height of the viewport
     with its overflow hidden (the class is on the team list only); the week box takes what the
     56 px header and the bar leave, the bar counted as its 52 px, its 1 px top border and the
     home indicator (--sab: the bottom inset, 21 px on an iPhone turned sideways). The side
     insets stay as the .wrap's padding, so no column sits under the Dynamic Island. */
  body.teamlist { --sab: env(safe-area-inset-bottom, 0px); height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .teamlist .top { flex: none; }
  .teamlist main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: 0; padding-bottom: calc(var(--nav-h) + 1px + var(--sab)); }
  .teamlist .bottom a { min-height: calc(var(--nav-h) + var(--sab)); padding-bottom: calc(4px + var(--sab)); }
  .teamlist .wrap { max-width: none; }
  .lw { display: flex; flex-direction: column; overflow: hidden; flex: 1 1 auto; min-height: 0;
        height: calc(100vh - 56px - var(--nav-h) - 1px - var(--sab));
        height: calc(100dvh - 56px - var(--nav-h) - 1px - var(--sab)); }
  .lw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 24px; font-size: 12px; flex: none; }
  .lw-head a { font-weight: 600; white-space: nowrap; padding: 0; margin: 0; }   /* the 44 px hit-area rule on .strip-nav a does not apply: these are not inside .strip-nav */
  .lw-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .lw-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 0 2px; flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid var(--line); }
  .lw-col { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
  .lw-col.today { background: var(--focus-ground); }
  .lw-day { height: 22px; border-bottom: 1px solid var(--line); flex: none; }   /* a div, so the .ln anchors are the first <a> siblings and :nth-of-type counts them from 1 */
  .lw-day a { display: flex; align-items: baseline; gap: 4px; height: 22px; line-height: 22px; padding: 0 3px; font-size: 11px; color: var(--ink); text-decoration: none; }
  .lw-day .dow { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .lw-day .num { font-size: 14px; font-weight: 700; }
  .lw-day .cnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--link); font-variant-numeric: tabular-nums; }
  .lw-col.today .lw-day .dow, .lw-col.today .lw-day .num { color: var(--link); }
  /* 10/15 11:42 PM: a line grows to share the column (flex: 1 1 auto between 24 and 72 px), so two
     shifts read large and nine shrink to the 24 px minimum with the "+N more" line; the lines stack
     from the top with no gap and nothing centered in the column. The line is a size container: at
     44 px and up the words step up and the times may break after the hyphen; at 60 px and up they
     step up again (a phone without container queries keeps the 11 px words in the taller line). */
  .ln { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; flex: 1 1 auto; min-height: 24px; max-height: 72px; container-type: size; margin: 0; padding: 0 3px; border: 1px solid transparent; border-radius: 4px; font-size: 11px; line-height: 11px; text-decoration: none; overflow: hidden; }
  .ln .nm, .ln .tm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ln .nm { font-weight: 700; }
  .ln .tm { color: var(--ink); font-weight: 400; font-size: 10px; letter-spacing: -.2px; word-spacing: -1px; }
  .ln .tm .t { white-space: nowrap; }
  .ln .tm wbr { display: none; }
  /* the two taller states (after the 11 and 10 px lines above, so they win by order) */
  @container (min-height: 44px) {
    .ln .nm { font-size: 13px; line-height: 1.2; }
    .ln .tm { font-size: 11px; line-height: 1.2; letter-spacing: 0; word-spacing: 0; white-space: normal; }
    .ln .tm wbr { display: inline; }
  }
  @container (min-height: 60px) {
    .ln .nm { font-size: 15px; }
    .ln .tm { font-size: 13px; }
  }
  .ln.pc0 { background: var(--p0-ground); color: var(--p0); } .ln.pc1 { background: var(--p1-ground); color: var(--p1); }
  .ln.pc2 { background: var(--p2-ground); color: var(--p2); } .ln.pc3 { background: var(--p3-ground); color: var(--p3); }
  .ln.pc4 { background: var(--p4-ground); color: var(--p4); } .ln.pc5 { background: var(--p5-ground); color: var(--p5); }
  .ln.pc6 { background: var(--p6-ground); color: var(--p6); } .ln.pc7 { background: var(--p7-ground); color: var(--p7); }
  .ln.need { color: #b3261e; background: #fde9e7; border: 1px dashed #b3261e; }   /* the month's need chip */
  .ln.fill, .ln.training { border-style: dashed; border-color: currentColor; }     /* the month's fill and training chips */
  .lw .more { display: none; height: 24px; line-height: 22px; padding: 0 3px; font-size: 11px; font-weight: 600; color: var(--link); text-decoration: none; white-space: nowrap; flex: none; }
  .lw-closed { font-size: 10px; color: var(--muted-on-tint); padding: 2px 3px; }
}
@media (orientation: landscape) and (max-width: 700px) and (max-height: 500px) {
  .ln .tm { font-size: 9px; }
}
/* the bands: S slots per column at each viewport height (worst case: a 21 px home indicator) */
@media (orientation: landscape) and (max-height: 319px) { .lw-col.over-5 .ln:nth-of-type(n+5) { display: none; } .lw .more-5 { display: block; } }
@media (orientation: landscape) and (min-height: 320px) and (max-height: 343px) { .lw-col.over-6 .ln:nth-of-type(n+6) { display: none; } .lw .more-6 { display: block; } }
@media (orientation: landscape) and (min-height: 344px) and (max-height: 367px) { .lw-col.over-7 .ln:nth-of-type(n+7) { display: none; } .lw .more-7 { display: block; } }
@media (orientation: landscape) and (min-height: 368px) and (max-height: 391px) { .lw-col.over-8 .ln:nth-of-type(n+8) { display: none; } .lw .more-8 { display: block; } }
@media (orientation: landscape) and (min-height: 392px) and (max-height: 415px) { .lw-col.over-9 .ln:nth-of-type(n+9) { display: none; } .lw .more-9 { display: block; } }
@media (orientation: landscape) and (min-height: 416px) and (max-height: 439px) { .lw-col.over-10 .ln:nth-of-type(n+10) { display: none; } .lw .more-10 { display: block; } }
@media (orientation: landscape) and (min-height: 440px) and (max-height: 463px) { .lw-col.over-11 .ln:nth-of-type(n+11) { display: none; } .lw .more-11 { display: block; } }
@media (orientation: landscape) and (min-height: 464px) and (max-height: 487px) { .lw-col.over-12 .ln:nth-of-type(n+12) { display: none; } .lw .more-12 { display: block; } }
@media (orientation: landscape) and (min-height: 488px) and (max-height: 500px) { .lw-col.over-13 .ln:nth-of-type(n+13) { display: none; } .lw .more-13 { display: block; } }
/* the month on a turned phone: the marks calendar with wider cells; the chip month stays for 600 px and up in portrait (a tablet) and 900 px and up */
@media (orientation: landscape) and (max-height: 500px) {
  .month .marks { display: grid; }
  .month .marks-key { display: block; }
  .month .cal-stage, .month .cal-key { display: none; }
  .month .marks .mday { min-height: 40px; }
  .month .marks .n { font-size: 14px; line-height: 18px; }
}

/* R4:polish (10/15 11:42 PM, Pat: "zoomed in or crowded", "a lot of negative space", "pop up
   relevant information about that shift") - the upright team list drops to three lines above
   the first day, the turned week's lines grow to fill the column (R3:landscape above), and a
   tap on a shift opens a popover before the shift page (the chip month's .pop, redrawn for a
   list row and filled by static/schedule.js from the link's data- attributes). */
/* the title line: Today, Month and One / Two weeks at its right. The 44 px hit areas (14 and
   10 px of padding, the same negative margin) sit 20 px apart, so they touch and never overlap. */
.teamlist .head { margin: 0 0 2px; }
.teamlist .head h1 { margin: 2px 0 4px; }
.teamlist .hl-row { display: inline-flex; align-items: baseline; gap: 20px; flex: none; }
/* the place picker as one 32 px line */
.teamlist .places { gap: 4px 10px; margin: 0 0 4px; min-height: 32px; align-items: center; }
.teamlist .places-region { gap: 4px; }
.teamlist .places .region-label { margin: 0 4px 0 0; }
.teamlist .places a { min-height: 28px; padding: 2px 10px; font-size: 13px; border-width: 1.5px; }
/* the strip: Previous and Next are arrows at its ends (28 px columns, a 48 px hit area), Month
   sits on the title line; the stepper line above the strip is gone */
.teamlist .strip { margin: 0; }
.teamlist .strip-days { grid-template-columns: 28px repeat(7, minmax(0, 1fr)) 28px; }
.teamlist .sarrow > a { display: grid; place-items: center; min-height: 48px; border-radius: 6px; color: var(--link); }
.teamlist .sarrow > a:active { background: var(--pressed); }
.teamlist .sarrow .icon { width: 22px; height: 22px; }
/* the section line: My schedule at its right; on a narrow phone it drops under the totals, still at the right */
.teamlist .team-weeks > .sec:first-child { margin-top: 8px; }
.teamlist .sec { flex-wrap: wrap; row-gap: 2px; }
.teamlist .sec .mine { margin-left: auto; font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
/* a day row is 46 px; an empty day (nobody on, or closed) is one 36 px row with no inner padding */
.team-weeks .row.day-tot > a.cover { padding: 6px 0; min-height: 46px; }
.team-weeks .row.day-tot.empty > a.cover { padding: 0; min-height: 36px; }
/* More: a plain details line at the bottom of the list, the rest of the schedule's links under it */
.teamlist .links-more { margin: 10px 0 0; border-top: 1px solid var(--line); }
.teamlist .links-more > summary { display: flex; align-items: center; min-height: 44px; list-style: none; cursor: pointer; font-size: var(--fs-meta); font-weight: 600; color: var(--link); }
.teamlist .links-more > summary::-webkit-details-marker { display: none; }
.teamlist .links-more > summary::after { content: "+"; margin-left: 6px; font-weight: 700; }
.teamlist .links-more[open] > summary::after { content: "-"; }
.teamlist .links-more .links { margin: 0 0 8px; }
@media (orientation: landscape) and (max-height: 500px) { .teamlist .links-more { display: none; } }
/* the shift popover: the chip month's .pop (.cal .chip .pop, static/cal.js) as one box the script
   fills from the tapped link's data- attributes; fixed, above both bars, at most 280 px wide;
   the script flips it above the chip when it would run off the bottom. Its height is capped at
   the room above the bar (the bar, its 1 px border, the home indicator and 8 px each side) and
   scrolls inside: a 500 character note (the shift page's limit) stood 390 px tall and ran under
   the bar on a phone turned sideways (verified 10/16). --sab is the team list's bottom inset. */
.shift-pop { position: fixed; left: 0; top: 0; z-index: 60; display: grid; gap: 2px; min-width: 200px; max-width: min(280px, calc(100vw - 16px)); max-height: calc(100vh - var(--nav-h) - 1px - 16px - var(--sab, env(safe-area-inset-bottom, 0px))); max-height: calc(100dvh - var(--nav-h) - 1px - 16px - var(--sab, env(safe-area-inset-bottom, 0px))); overflow-y: auto; font-size: var(--fs-meta); line-height: 1.35; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.shift-pop[hidden] { display: none; }
.shift-pop:focus { outline: none; }
.shift-pop .sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.shift-pop .sp-name { font-size: 15px; font-weight: 700; min-width: 0; }
.shift-pop .sp-state { font-size: var(--fs-small); font-weight: 600; color: var(--muted); white-space: nowrap; }
.shift-pop .sp-state.warn-word { color: var(--warn); }
.shift-pop .sp-day { color: var(--muted); }
.shift-pop .sp-time { font-size: 15px; font-weight: 700; }
.shift-pop .sp-time .dur { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); margin-left: 6px; }
.shift-pop .sp-job { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.shift-pop .sp-place { color: var(--muted); }
.shift-pop .sp-note { color: var(--ink); }
.shift-pop .sp-links { display: flex; gap: 16px; margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); font-weight: 600; }
.shift-pop .sp-links a { display: inline-block; padding: 4px 0; }
[data-pop][aria-expanded="true"] .l1, [data-pop][aria-expanded="true"] .nm { text-decoration: underline; }

/* ------------------------------------------------ kitchen (10/31) */
/* Pat 10/31: the kitchen inventory. On a phone: list tabs across the top, one row per item
   with the number boxes on the right at thumb height (numeric keypad, 48 px tall). At a
   computer's width the count spreads its sections into columns. */
.ktabs { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 6px; padding-bottom: 2px; scrollbar-width: none; }
.ktabs::-webkit-scrollbar { display: none; }
.ktabs a { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 12px;
  border: 1.5px solid var(--line); border-radius: 22px; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.ktabs a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.ktab-n { font-weight: 600; font-size: 12px; opacity: .8; }
.krow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.krow .l1 { font-size: 15px; }
.krow.is-counted .l1::after { content: " ✓"; color: var(--ok); font-weight: 700; }
.kin { display: flex; gap: 6px; align-items: center; flex: none; }
.konhand { color: var(--ink-2, inherit); font-weight: 600; font-variant-numeric: tabular-nums; }   /* 10/31: dictation mode reads the count, no boxes */
.krow .kfield { display: grid; justify-items: center; gap: 2px; margin: 0; padding: 0; font-weight: 400; }
.krow input.kqty { display: block; width: 64px; max-width: 64px; min-height: 48px; padding: 6px 4px; font: inherit; font-size: 20px; font-weight: 700; text-align: center;
  border: 2px solid var(--control); border-radius: 8px; background: var(--card); color: var(--ink); }
.krow input.kqty:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.kunit { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.ksaved { font-size: 12px; font-weight: 600; }
.kcount-actions { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); background: var(--ground); padding: 8px 0; z-index: 2; }
.kfinish { margin: 14px 0 24px; }
.kfilter { margin: 4px 0 10px; } .kfilter input { width: 100%; font-size: 16px; }
.kreq-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.kreq-actions .inline-form { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.kreq-actions input.kqty { width: 56px; font-size: 16px; }
.kcopy { display: grid; gap: 6px; margin: 6px 0 4px; }
.kcopy-text { width: 100%; font: inherit; font-size: 14px; padding: 8px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); resize: vertical; }
@media (min-width: 1080px) {
  .kitchen-count-page .kcols { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); column-gap: 28px; align-items: start; }
  .kitchen-count-page .kgroup { break-inside: avoid; }
  .kitchen-count-page .kcount-actions { position: static; }
}

.ksaved:not(:empty) { margin-left: 6px; }

/* 10/31 unit 5: Pat's Texts list - the message as sent, line breaks kept */
.texts .text-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.texts .text-note { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85em; }

/* ------------------------------------------------ kitchen, Pass 4 (11/01): numbers on the section line, the feed, the table */
/* APP_UI_SPEC 10/31 C3 and B1. The strip is the When I Work Attendance summary strip (app/clock.png): label and
   number inline on the section line, no tiles. The feed is kitchen D: dated day lines over plain rows. The
   table on a computer is the Attendance table: numeric columns right-aligned, a Total row pinned. */
.kstrip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 10px 0 0; padding: 0 0 8px; justify-content: flex-start; font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; }
.kstrip h2 { margin-right: 4px; }
.ks { white-space: nowrap; }
.ks b { color: var(--ink); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.ks-l { font-weight: 600; }
.sec.kmoved, .sec.ktruck { margin-top: 22px; }
/* 11/01 9:00 AM (Pat): the truck's state on the Kitchen page, count-sheet rows: the quantity on the right in the ink */
.ktruck-rows .row.plain { padding: 8px 0; align-items: center; }
.ktruck-rows .l1 { font-size: 15px; }
.ktruck-rows .row-aside.ink { color: var(--ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 0; }
.ktruck-rows .row-aside .neutral-word { font-size: var(--fs-meta); }
.sec.kday { margin: 12px 0 0; padding-bottom: 4px; border-bottom-color: transparent; }
.sec.kday h2 { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.kfeed .row.plain { padding: 8px 0; }
.kfeed .l1 { font-size: 15px; }
.kfeed .row-aside { font-weight: 400; }
.kreq { display: block; }   /* the request lines wrap as one running line, each with its state word */
.kreq-line { white-space: nowrap; }
/* the table (On hand on a computer, and beside the feed on Pat's Kitchen page) */
.tbl-wrap { min-width: 0; max-width: 100%; overflow: hidden; }
.ktbl { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.ktbl th, .ktbl td { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.ktbl thead th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ktbl td { height: 40px; padding: 0 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.ktbl th:first-child, .ktbl td:first-child { padding-left: 0; }
.ktbl th:last-child, .ktbl td:last-child { padding-right: 0; }
.ktbl tbody tr:hover td { background: var(--panel); }   /* colour only, never size (10/11) */
.ktbl .t-main { font-weight: 600; color: var(--ink); }
.ktbl .t-muted { color: var(--muted); }
.ktbl .t-num { text-align: right; font-variant-numeric: tabular-nums; }
.ktbl tr.ksec th { padding: 14px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.ktbl tfoot .ktot th, .ktbl tfoot .ktot td { border-top: 2px solid var(--ink); font-weight: 700; color: var(--ink); height: 40px; padding-top: 0; padding-bottom: 0; }
.ktbl col.w40 { width: 40%; } .ktbl col.w12 { width: 12%; } .ktbl col.w8 { width: 8%; } .ktbl col.w28 { width: 28%; }
.ktbl td.t-when { padding-top: 6px; padding-bottom: 6px; line-height: 1.4; }   /* one line per shelf; a row with both counts grows */
.konhand-page .kfilter { margin-top: 10px; }
/* Pat's Kitchen page on a computer: the rows and the feed on the left, the On hand table beside them */
.kwide { display: block; }
@media (min-width: 900px) {
  /* .wide main > *:not(...) caps every child at --col (680 px); these two pages spread, so the rule is
     restated at the same specificity (four classes + main) after it */
  .signed-in.kitchen-page.kitchen-home.wide main > .head, .signed-in.kitchen-page.kitchen-home.wide main > .kwide { max-width: 1320px; }
  .signed-in.kitchen-page.konhand-page.wide main > * { max-width: 1000px; }
}
@media (min-width: 1080px) {
  .kitchen-home.wide .kwide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: start; }
  .kitchen-home.wide .kwide-side .konhand-strip { margin-top: 10px; }
}

/* ------------------------------------------------ kitchen page, the v2 grammar (Pat "build it" 11/01 12:46 PM) */
/* KITCHEN_KINDS_2026-11-01.md + Chief of Staff 9:26 AM: the warm grey page ground (--ground-app, scoped to the Kitchen page
   until the grammar carries into the Home pages), every kind in its own white panel (radius 12, hairline), the section
   header above its panel, hairline rows inside; the strip = Shopify home metric strip; tasks = Craftable stores-and-audits
   rows; vendor panels = Toast Now locations; the truck's below-par list = Sortly alerts; ways in = MarginEdge chevron titles. */
:root { --ground-app: #f1f1ef; }
body.kitchen-home { --ground: var(--ground-app); background: var(--ground-app); }
.mk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 6px; padding: 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mk-h .mk-t { white-space: nowrap; }
.mk-h .mk-tot { font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mk-panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; overflow: hidden; }
.mk-panel + .mk-panel { margin-top: 12px; }
/* NUMBERS: the first panel, no header; label over a 28 px number */
.mk-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; padding: 14px 16px 12px; margin-top: 8px; }
.mk-m { min-width: 0; }
.mk-m .mk-l { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.3; min-height: 2.6em; }
.mk-m .mk-n { display: block; font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mk-m .mk-n.is-warn { color: var(--warn); }
/* TASKS: Craftable rows inside the To do panel */
.mk-tasks { list-style: none; margin: 0; padding: 0; }
.mk-task { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 64px; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.mk-tasks > li:first-child .mk-task { border-top: 0; }
.mk-sq { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; }
.mk-sq .icon { width: 18px; height: 18px; stroke: currentColor; }
.mk-sq.kitchen { background: var(--focus); color: var(--brand); }
.mk-sq.prep { background: var(--brand); color: var(--on-brand); }
.mk-task .mk-name { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.mk-task .mk-state { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 2px; white-space: nowrap; }
.mk-task .mk-act { font-size: 15px; font-weight: 600; color: var(--link); white-space: nowrap; }
.mk-task .mk-act.is-warn { color: var(--warn); }
.mk-task:hover .mk-act { text-decoration: underline; }
/* OUTPUTS: each vendor its own white panel on the ground (Toast Now) */
.mk-block { display: block; text-decoration: none; color: inherit; padding: 14px 16px; }
.mk-block:hover { background: var(--panel); }
.mk-block .mk-vendor { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.mk-block .mk-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.mk-block .mk-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; margin-top: 10px; }
.mk-block .mk-num { min-width: 0; }
.mk-block .mk-num b { display: block; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.mk-block .mk-num b.is-date { font-size: 15px; line-height: 1.6; }
.mk-block .mk-num span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* DATA: Sortly alerts form - only what is below par on the truck, then one way in to the whole sheet */
.mk-alerts { list-style: none; margin: 0; padding: 0; }
.mk-alert { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); position: relative; }
.mk-alerts > li:first-child .mk-alert { border-top: 0; }
.mk-alert::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 4px; background: var(--warn-accent); }
.mk-alert .mk-aname { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.mk-alert .mk-aline { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.mk-alert .mk-aq { font-size: 17px; font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-alert .mk-aq .u { font-size: 13px; font-weight: 600; margin-left: 3px; }
.mk-none { min-height: 44px; display: flex; align-items: center; font-size: 15px; color: var(--muted); }
/* WAYS IN: chevron titles in the secondary ink (also the last row of the truck panel) */
.mk-more { list-style: none; margin: 0; padding: 0; }
.mk-more a, .mk-way { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15px; font-weight: 600; color: var(--label); text-decoration: none; border-top: 1px solid var(--line); }
.mk-more > li:first-child a { border-top: 0; }
.mk-more a .mk-c, .mk-way .mk-c { color: var(--muted); font-weight: 500; }
.mk-more a:hover, .mk-way:hover { color: var(--link); }
.mk-chev { color: var(--muted); font-size: 18px; line-height: 1; }
/* desktop: the panels left, the On hand table in one white panel right */
.mk-side .mk-panel { padding: 4px 16px 12px; }
@media (min-width: 900px) {
  .signed-in.kitchen-page.kitchen-home.wide main > .mk-wide { max-width: 1320px; }
}
@media (min-width: 1080px) {
  .kitchen-home.wide .mk-wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; align-items: start; }
  .kitchen-home.wide .mk-side { margin-top: 8px; }
}
/* 11/01: everyone's schedule from today and My schedule as a list - a section line per day */
.day-sec h2 a { color: inherit; text-decoration: none; }
.day-sec h2 a:hover { text-decoration: underline; }
.day-sec.today h2 { color: var(--link); }
.week-jump .links { margin: 0 0 6px; }
.shift-place { color: var(--muted); }
/* the day list gives way to the landscape week on a turned phone, as the week list does (R3:landscape) */
@media (orientation: landscape) and (max-height: 500px) {
  .teamlist .week-jump, .teamlist .team-days-ahead, .teamlist .no-schedule { display: none; }
}

/* 11/07: one-time work-texts card on Home */
.sms-prompt-wrap { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sms-prompt { max-width: 420px; width: 100%; margin: 0; }
.sms-prompt h2 { margin: 0 0 8px; }
.sms-prompt-q { font-weight: 600; margin: 0; }
.sms-prompt-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.sms-prompt-actions .btn { width: 100%; }