/* ============================================================
   Oxford Social — staff.html page styles (loaded AFTER
   css/styles.css). Design v4: the dashboard is dark mono like
   the rest of the site — denser, functional UI on the same
   editorial system. Global classes (.nav, .tabs, .tbl, .btn…)
   live in styles.css and are only contextually adjusted here.
   Components consume the -c tokens so they read correctly on
   the dark shell. The nav needs no override — it is the
   canonical dark header.
   ============================================================ */

/* ----- Page shell (body already clears the fixed nav) ----- */
.staff {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.6rem clamp(1rem, 4vw, 2.5rem) 5rem;
  min-height: 72vh;
}

/* The display rules below (flex/grid/inline-block) must never
   beat the `hidden` attribute the JS toggles. */
.staff [hidden] { display: none !important; }

/* Small button variant used across the dashboard */
.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}
.btn--danger {
  border-color: rgba(201, 107, 90, 0.5);
  color: var(--bad);
}
.btn--danger:hover {
  border-color: var(--bad);
  color: var(--bad);
  background: rgba(201, 107, 90, 0.06);
}

/* ===== Sign-in screen — one door, one keypad =====
   Two things happen on this screen and they are not the same thing. Managers
   and staff both sign in through ONE email + password form (#signinForm) —
   the old two-door gate asked people to classify themselves before they were
   in, which was wayfinding nobody needed. Beside it sits the clock-in keypad
   (#clockPanel): no password, six digits, done. On a phone the keypad comes
   FIRST, because the phone case is somebody on the pavement about to start a
   shift, not a manager building a rota. */
.gate,
#gateView {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.2rem;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 1.6rem 0 3rem;
}
.gate__intro {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
}
.gate__intro h1,
#gateTitle {
  font-size: clamp(2rem, 6vw, 2.9rem);
  margin-bottom: 0.5rem;
  color: var(--ink-c);
}
.gate__intro .gate__lede { margin-bottom: 0; }
/* Session-level messages ("Signed out.") belong to the screen, not to either
   panel, so they sit under the title across the full width. */
.gate__notice,
#gateNotice {
  min-height: 1.3rem;
  margin: 0;
  font-size: 0.85rem;
  text-align: center;
  color: var(--accent-c);
}
.gate__foot,
#gateFoot {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  text-align: center;
}
.gate__role {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-c);
  margin: 0;
}
/* "Most people" beside the clock heading — a note about who this half is for,
   so it is outlined rather than filled. */
.gate__tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--line-2-c);
  color: var(--text-c);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

/* ----- The split -----
   Stacked by default, two columns from tablet up. The class rule and the
   :has() rule below say the same thing twice on purpose: the class rule
   styles the wrapper the markup actually uses, and the :has() rule catches
   whichever element holds both panels if that wrapper is ever renamed. They
   have to stay SEPARATE rules — a browser without :has() throws away an
   entire selector list that contains one. */
.gate__ways,
.gate__grid,
.gate__split,
.gate__cols,
.gate__doors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  width: 100%;
  align-items: stretch;
}
#gateView:has(> #signinForm):has(> #clockPanel),
#gateView *:has(> #signinForm):has(> #clockPanel) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  width: 100%;
  align-items: stretch;
}
/* Phone order: keypad, then the sign-in form. Title and notice stay on top,
   the footnote stays at the bottom. (Harmless no-ops on any of these that is
   not itself a flex or grid child.) */
#clockPanel { order: -1; }
.gate__intro,
#gateTitle,
#gateNotice { order: -2; }
#signinForm,
#setupForm { order: 0; }
#gateFoot { order: 9; }

/* ----- Panel shell — shared by the sign-in form, the keypad and setup ----- */
#signinForm,
#clockPanel,
#setupForm,
.gate__panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.8rem 1.5rem;
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  border-radius: var(--radius);
  text-align: left;
}
/* The panels set their own rhythm with the flex gap, so the elements dropped
   inside them do not also bring margins of their own. */
#signinForm > *,
#clockPanel > *,
#setupForm > *,
.gate__panel > * { margin-top: 0; margin-bottom: 0; }
#signinForm h1, #signinForm h2,
#clockPanel h1, #clockPanel h2,
#setupForm h1, #setupForm h2,
.gate__panel h1, .gate__panel h2 {
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  color: var(--ink-c);
  line-height: 1.05;
}

/* ----- The sign-in form ----- */
#signinForm { border-top: 3px solid var(--ink-c); }
#signinForm .field { text-align: left; }
/* 16px is the floor that stops iOS zooming the whole page in on focus. */
#signinEmail,
#signinPassword {
  width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-2-c);
  border-radius: var(--radius);
  background: var(--bg-c);
  color: var(--ink-c);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: normal;
  text-align: left;
  outline: none;
  transition: border-color 0.2s ease;
}
#signinEmail:focus,
#signinPassword:focus { border-color: var(--accent-c); }
/* Refusals hold their line whether or not there is anything to say, so the
   button underneath does not jump out from under a finger. */
.gate__msg,
#signinMsg,
#pinMsg {
  min-height: 1.4rem;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--bad);
}
.gate__btn,
#signinBtn,
#pinDone,
#setupBtn,
#setupCancel { width: 100%; }
/* Spelled out in full so the button looks right whether or not the markup
   also hands it the global .btn classes. */
#signinBtn,
#pinDone {
  appearance: none;
  -webkit-appearance: none;
  padding: 14px 22px;
  border: 2px solid var(--accent-c);
  border-radius: var(--radius);
  background: var(--accent-c);
  color: var(--on-accent-c);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s ease, border-color 0.2s ease;
}
#signinBtn:hover:not(:disabled),
#pinDone:hover:not(:disabled) {
  background: var(--accent-hover-c);
  border-color: var(--accent-hover-c);
}
#signinBtn:focus-visible,
#pinDone:focus-visible { outline: 2px solid var(--ink-c); outline-offset: 2px; }
#signinBtn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ----- The clock-in panel -----
   Sized off two numbers: a key is --pin-key tall and the pad is four rows of
   them. #pinResult borrows the same sum for its min-height, so swapping the
   pad for the confirmation does not resize the panel under somebody who is
   still reaching for it. */
#clockPanel {
  --pin-key: 68px;
  --pin-gap: 10px;
  --pin-pad-h: calc(var(--pin-key) * 4 + var(--pin-gap) * 3);
  border-top: 3px solid var(--accent-c);
}

/* Six squares, one per digit. Nothing in this design is round. */
#pinDots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.2rem 0 0.3rem;
  padding: 0;
  list-style: none;
}
.pin-dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-2-c);
  background: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pin-dot.is-on {
  background: var(--accent-c);
  border-color: var(--accent-c);
}

/* ----- The keypad -----
   A tablet behind a bar, in the dark, with wet hands: keys never go below
   64px, the numerals are display-sized, and a press fills the whole key amber
   rather than nudging a shadow about. */
#pinPad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--pin-key, 68px);
  gap: var(--pin-gap, 10px);
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
#pinPad button {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 64px;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid var(--line-2-c);
  border-radius: var(--radius);
  background: var(--bg-c);
  color: var(--ink-c);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.08s ease, color 0.08s ease, border-color 0.08s ease;
}
@media (hover: hover) {
  #pinPad button:hover { border-color: var(--accent-c); color: var(--accent-c); }
}
#pinPad button:active,
#pinPad button.is-down {
  background: var(--accent-c);
  border-color: var(--accent-c);
  color: var(--on-accent-c);
}
#pinPad button:focus-visible {
  outline: 2px solid var(--accent-c);
  outline-offset: 2px;
}
/* The two word keys are labels, not numerals, so they take the smaller size. */
#pinPad button[data-key="clear"],
#pinPad button[data-key="enter"] {
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#pinPad button[data-key="clear"] { color: var(--text-c); }
#pinPad button[data-key="enter"] {
  background: var(--accent-c);
  border-color: var(--accent-c);
  color: var(--on-accent-c);
}
@media (hover: hover) {
  #pinPad button[data-key="enter"]:hover {
    background: var(--accent-hover-c);
    border-color: var(--accent-hover-c);
    color: var(--on-accent-c);
  }
}
/* Enter is already amber, so its press has to go the other way to register. */
#pinPad button[data-key="enter"]:active,
#pinPad button[data-key="enter"].is-down {
  background: var(--ink-c);
  border-color: var(--ink-c);
  color: var(--bg-c);
}

/* ----- The confirmation -----
   Takes the place of the pad, in the footprint of the pad. */
#pinResult {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: var(--pin-pad-h, 302px);
  text-align: left;
}
#pinResultName {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2rem);
  line-height: 1.05;
  color: var(--ink-c);
}
#pinResultWhat {
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--ink-c);
  font-variant-numeric: tabular-nums;
}
#pinResultShift {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted-c);
  font-variant-numeric: tabular-nums;
}
/* Who else is on. A quiet list — it is context, not the thing somebody walked
   up to the screen to find out. */
#pinBoardTitle {
  margin-top: 0.3rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-c);
}
#pinBoard {
  margin: 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid var(--line-c);
  list-style: none;
  font-size: 0.82rem;
  color: var(--muted-c);
}
/* Nobody else on: the heading has nothing to head, so it goes too. */
#pinResult:has(#pinBoard:empty) #pinBoardTitle { display: none; }
#pinBoard:empty { display: none; }
#pinBoard li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.22rem 0;
}
#pinBoard li > :last-child {
  color: var(--text-c);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Pinned to the foot of the panel so Done is always in the same place. */
#pinDone { margin-top: auto; }

/* ----- First password -----
   Shown instead of the sign-in form on a first-ever sign-in, so it centres on
   its own rather than sitting in the sign-in column. */
#setupForm,
.gate__panel--setup {
  border-top: 3px solid var(--accent-c);
  max-width: 460px;
  margin-inline: auto;
}
#setupForm .field__hint { text-align: left; }
/* Same 16px floor as the sign-in fields, for the same iOS-zoom reason. */
#setupPassword,
#setupConfirm { font-size: 16px; }

/* Where somebody is up to with signing in, on the Team screen. */
.signin-state { font-size: 0.88rem; margin-bottom: 0.5rem; }
.signin-state.is-ok { color: var(--ok); }
.signin-state.is-waiting { color: var(--muted-c); }
.signin-state.is-blocked { color: var(--bad); }
.gate__lede { font-size: 0.92rem; margin-bottom: 1.6rem; }
#signinForm .gate__lede,
#clockPanel .gate__lede,
#setupForm .gate__lede,
.gate__panel .gate__lede { margin-bottom: 0; }

/* ----- Tablet and up: the two panels sit side by side ----- */
@media (min-width: 760px) {
  .gate__ways,
  .gate__grid,
  .gate__split,
  .gate__cols,
  .gate__doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #gateView:has(> #signinForm):has(> #clockPanel),
  #gateView *:has(> #signinForm):has(> #clockPanel) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* First sign-in: js hides the sign-in form and drops the choose-a-password
     panel in underneath. Without this the row keeps holding half of itself
     open for a form that is not there, and the clock sits off to one side. */
  #gateView :has(> #signinForm[hidden]):has(> #clockPanel) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
    margin-inline: auto;
  }
  /* Anything that is not one of the two panels runs the full width. */
  .gate__ways > *:not(#signinForm):not(#clockPanel),
  .gate__grid > *:not(#signinForm):not(#clockPanel),
  .gate__split > *:not(#signinForm):not(#clockPanel),
  .gate__cols > *:not(#signinForm):not(#clockPanel),
  .gate__doors > *:not(#signinForm):not(#clockPanel) { grid-column: 1 / -1; }
  #gateView:has(> #signinForm):has(> #clockPanel) > *:not(#signinForm):not(#clockPanel),
  #gateView *:has(> #signinForm):has(> #clockPanel) > *:not(#signinForm):not(#clockPanel) {
    grid-column: 1 / -1;
  }
  /* Reading order takes over from the phone clock-first order. */
  .gate__intro,
  #gateTitle,
  #gateNotice,
  #signinForm,
  #clockPanel,
  #setupForm,
  #gateFoot { order: 0; }
  #signinForm,
  #clockPanel,
  #setupForm,
  .gate__panel { padding: 2.2rem 2rem; }
  /* Bigger keys where there is room — this is the tablet behind the bar. */
  #clockPanel { --pin-key: 76px; --pin-gap: 12px; }
}

/* ===== Dashboard chrome ===== */
/* Wrapper for the whole dashboard view (shown/hidden against .gate by JS). */
.dash { display: block; }
.dash__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.dash__head .eyebrow { margin-bottom: 0.4rem; }
.dash__title { font-size: clamp(2.2rem, 6vw, 3.1rem); outline: none; }
.dash__tools { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.dash__tabs { margin-bottom: 1.6rem; }

.tab__count {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 0.55em;
  padding: 0.1em 0.4em;
  border: 1px solid var(--accent-c);
  border-radius: 2px;
  color: var(--accent-c);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: normal;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}
.panel__status { font-size: 0.85rem; color: var(--muted-c); }
.panel__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.panel__error { margin-bottom: 1.2rem; }
.panel__error .notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.panel__empty {
  padding: 2.2rem 1rem;
  text-align: center;
  color: var(--muted-c);
  font-size: 0.95rem;
}

/* Status chips — mono chips per DESIGN-V4 §1. Three tiers, and
   hierarchy comes from weight and fill, never from hue:
     solid ink   = happening now, act on it (seated)
     outlined    = live, nothing to do yet (confirmed)
     muted       = closed out (done, cancelled, no-show) */
.pill {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 2px;
  border: 1px solid var(--line-c);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-c);
  white-space: nowrap;
}
/* A card can carry a status pill plus a source pill — keep them apart. */
.pill + .pill { margin-left: 0.35rem; }

.pill--seated { color: var(--bg-c); border-color: var(--ink-c); background: var(--ink-c); }
.pill--confirmed { color: var(--ink-c); border-color: var(--ink-c); background: transparent; }
.pill--completed,
.pill--cancelled,
.pill--no_show { color: var(--muted-c); border-color: var(--line-c); background: transparent; }
/* Where the booking came from — dashed so it never competes with the status. */
.pill--src {
  color: var(--muted-c); border-color: var(--line-c); border-style: dashed;
  background: transparent;
}

/* ===== The day's diary ===== */

/* Date stepper in the panel bar */
.daynav { display: inline-flex; align-items: center; gap: 0.4rem; }
.daynav__date {
  background: transparent;
  color: var(--ink-c);
  border: 1px solid var(--line-c);
  border-radius: 2px;
  padding: 0.42rem 0.6rem;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  color-scheme: dark;
}
.daynav__date:focus {
  outline: none;
  border-color: var(--ink-c);
}

/* Covers-per-slot bar: one hairline column per slot, filled to the
   share of the arrivals cap it uses. Decorative — aria-hidden in the
   markup, and every number it encodes is also written out in the
   status line and on the cards. */
.daybar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 68px;
  margin: 0.2rem 0 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-c);
}
.daybar__col {
  position: relative;
  flex: 1 1 0;
  min-width: 4px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: rgba(242, 239, 232, 0.05);
}
.daybar__fill { width: 100%; background: var(--ink-c); min-height: 1px; }
.daybar__col.is-full .daybar__fill { background: var(--bad); }
.daybar__tick {
  position: absolute;
  left: 0;
  bottom: -1.05rem;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--muted-c);
}

/* One row per slot that has arrivals */
.day { display: flex; flex-direction: column; gap: 1.4rem; }
.day__slot {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.day__time { padding-top: 0.2rem; border-top: 1px solid var(--line-c); }
.day__hh {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--ink-c);
}
.day__covers {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.day__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.8rem;
}
.day__closed { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-c); }
.day__closedtitle {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-c);
  margin-bottom: 0.9rem;
}

/* One booking */
.bk-card {
  border: 1px solid var(--line-c);
  border-radius: 2px;
  padding: 0.9rem 1rem 0.85rem;
  background: var(--bg-alt-c);
}
.bk-card--seated { border-color: var(--ink-c); }
.bk-card--cancelled,
.bk-card--no_show,
.bk-card--completed { opacity: 0.55; }

.bk-card__top { display: flex; align-items: baseline; gap: 0.7rem; }
.bk-card__party {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-c);
  min-width: 1.4ch;
}
.bk-card__who { flex: 1 1 auto; min-width: 0; }
.bk-card__name {
  display: block;
  color: var(--ink-c);
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-card__ref {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--muted-c);
}
.bk-card__table {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink-c);
  border: 1px solid var(--line-c);
  border-radius: 2px;
  padding: 0.14rem 0.42rem;
  white-space: nowrap;
}
.bk-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.bk-card__dwell { font-size: 0.68rem; color: var(--muted-c); }
.bk-card__contact { margin-top: 0.55rem; font-size: 0.78rem; }
.bk-card__contact a { color: var(--ink-c); display: block; }
.bk-card__contact a:hover { color: var(--accent-c); }
.bk-card__notes {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-c);
  font-size: 0.82rem;
  color: var(--muted-c);
}
.bk-card__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }

/* Everything still to come, folded away under the day */
.upcoming { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line-c); }
.upcoming__summary {
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-c);
  margin-bottom: 1.1rem;
}
.upcoming__summary:hover { color: var(--ink-c); }
.upcoming__summary:focus-visible { outline: 2px solid var(--ink-c); outline-offset: 2px; }

/* A table cell that jumps the diary to that day */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-c);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { color: var(--accent-c); }

/* Add-booking dialog message line */
.addForm__msg { min-height: 1.2rem; font-size: 0.85rem; color: var(--bad); }

/* ===== Tables (bookings / mailing list) — hairline rows ===== */
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-c);
  border-radius: 2px;
}
.tbl-wrap .tbl { min-width: 760px; }
.tbl-wrap:has(.tbl tbody:empty) { display: none; }
.tbl .cell-contact { font-size: 0.8rem; color: var(--muted-c); }
.tbl .cell-contact a { color: var(--ink-c); display: block; }
.tbl .cell-contact a:hover { color: var(--accent-c); }
.tbl .cell-notes { max-width: 220px; font-size: 0.82rem; color: var(--muted-c); }
.tbl .cell-actions { white-space: nowrap; }
.tbl .cell-actions .btn + .btn { margin-left: 0.4rem; }
.tbl .cell-date { white-space: nowrap; }

/* Mailing list consent and campaign composer. */
.mailing__intro { margin-bottom: 1.25rem; }
.mailing__intro h2, .mailing__campaigns h2 { margin: 0 0 0.4rem; font-size: 1.7rem; }
.mailing__intro p, .mailing__campaigns p { color: var(--muted-c); font-size: 0.9rem; line-height: 1.5; }
.mailing__transport { padding: 0.65rem 0.85rem; border: 1px solid var(--line-c); }
.mailing__status { text-transform: capitalize; white-space: nowrap; }
.mailing__campaigns { margin-top: 2.5rem; }
.mailing__form { max-width: 720px; display: grid; gap: 0.65rem; margin: 1rem 0; }
.mailing__form label { color: var(--accent-c); font-size: 0.8rem; font-weight: 700; }
.mailing__form input, .mailing__form textarea { width: 100%; border: 1px solid var(--line-2-c); border-radius: 0; background: var(--panel-c); color: var(--ink-c); font: inherit; padding: 0.75rem; }
.mailing__form textarea { resize: vertical; line-height: 1.5; }
.mailing__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mailing__preview { max-width: 720px; margin: 1rem 0 1.5rem; border: 1px solid var(--line-c); background: var(--panel-c); padding: 1.25rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.mailing__campaigns h3 { margin: 1.5rem 0 0.75rem; font-size: 1.1rem; }
.mailing__exceptions { margin-top: 0.4rem; font-size: 0.8rem; }
.mailing__exceptions summary { cursor: pointer; color: var(--accent-c); }
.mailing__exceptions ul { margin: 0.35rem 0 0; padding-left: 1.2rem; overflow-wrap: anywhere; }

/* Skeleton rows/cards injected by JS */
.skel-block { min-height: 3.4rem; margin-bottom: 0.8rem; border-radius: 2px; }

/* ===== Events tab ===== */
.evt-list { display: flex; flex-direction: column; gap: 1.2rem; }
.evt {
  border: 1px solid var(--line-c);
  border-radius: 2px;
  padding: 1.2rem 1.3rem;
}
.evt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.4rem;
}
.evt__head h2 { font-size: 1.6rem; color: var(--ink-c); }
.evt__when {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.evt__totals { font-size: 0.85rem; color: var(--muted-c); margin-bottom: 0.8rem; }
.evt__totals strong { color: var(--ink-c); font-weight: 500; }
.evt__empty { font-size: 0.85rem; color: var(--muted-c); padding: 0.4rem 0; }
.evt .tbl-wrap { margin-top: 0.4rem; }
.evt .tbl { min-width: 520px; }

/* ----- What's On: public or private on the website (Events tab) ----- */
.won { margin-bottom: 2.2rem; }
.won__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-bottom: 1rem;
}
.won__intro h2 { font-size: 1.8rem; color: var(--ink-c); margin: 0.2rem 0 0.4rem; }
.won__lead { font-size: 0.85rem; color: var(--muted-c); max-width: 60ch; margin: 0; }
.won__lead strong { color: var(--ink-c); font-weight: 500; }
.won__count {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-c);
  margin: 0;
  white-space: nowrap;
}
.won__list { display: flex; flex-direction: column; gap: 0.6rem; }
.won__sub { margin: 0 0 0.8rem; }
.won-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 0.6rem 1.2rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-c);
  border-left-width: 3px;
  border-radius: 2px;
}
.won-row.is-public { border-left-color: var(--accent-c); }
.won-row__when { display: flex; flex-direction: column; gap: 0.25rem; }
.won-row__date {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.won-row__time { font-size: 0.85rem; color: var(--ink-c); }
.won-row__title { font-size: 1.25rem; line-height: 1.15; color: var(--ink-c); margin: 0 0 0.25rem; }
.won-row__desc { font-size: 0.85rem; color: var(--muted-c); margin: 0 0 0.4rem; }
.won-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted-c);
}
.won-chip {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--line-c);
  border-radius: 2px;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.won-row__by { font-size: 0.75rem; color: var(--muted-c); }
.won-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.85rem 0.45rem 0.5rem;
  border: 1px solid var(--line-c);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-c);
  cursor: pointer;
  font: inherit;
  text-align: left;
  justify-self: end;
}
.won-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: var(--line-c);
  transition: background 0.15s;
}
.won-switch__track::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--ink-c);
  transition: transform 0.15s;
}
.won-switch[aria-checked="true"] { border-color: var(--accent-c); color: var(--ink-c); }
.won-switch[aria-checked="true"] .won-switch__track { background: var(--accent-c); }
.won-switch[aria-checked="true"] .won-switch__track::after { transform: translateX(1rem); background: var(--bg-c, #121212); }
.won-switch__text { display: flex; flex-direction: column; line-height: 1.15; }
.won-switch__label { font-size: 0.85rem; font-weight: 500; }
.won-switch__sub { font-size: 0.66rem; color: var(--muted-c); }
.won-switch:disabled { opacity: 0.6; cursor: wait; }
.won-switch:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; }
/* The night's image for the website: a thumbnail with Change / Remove, or an "Add image" button. */
.won-img {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line-c);
}
.won-img__thumb {
  display: block;
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--line-c);
  background: var(--bg-c, #121212);
  overflow: hidden;
}
.won-img__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.won-img__thumb:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; }
.won-img__info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 12rem; }
.won-img__label { font-size: 0.8rem; color: var(--ink-c); }
.won-img__hint { font-size: 0.78rem; color: var(--muted-c); }
.won-img__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.won-img__msg { flex-basis: 100%; margin: 0; font-size: 0.78rem; color: var(--muted-c); min-height: 0; }
.won-img__msg:empty { display: none; }
.won-img.is-busy { opacity: 0.7; }
@media (max-width: 640px) {
  .won-row { grid-template-columns: minmax(0, 1fr); }
  .won-switch { justify-self: start; }
  .won-img__actions { flex-basis: 100%; }
}

/* ============================================================
   THE PORTAL — rota, checklists, team, pay and reports.

   Same system as everything above: dark mono, hairline borders,
   hierarchy from size and opacity rather than colour. Only three
   things earn a colour anywhere on this page — good, bad, and
   the accent — so when one appears it means something.
   ============================================================ */

/* ----- Who is signed in, and what is still missing ----- */
.dash__who {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted-c);
  max-width: 46ch;
}
.onboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  margin-bottom: 1.6rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(201, 107, 90, 0.5);
  border-left-width: 3px;
  border-radius: 2px;
  background: rgba(201, 107, 90, 0.06);
}
.onboard p { font-size: 0.88rem; color: var(--ink-c); margin: 0; }

/* Tabs scroll rather than wrap: a manager has nine of them. */
.dash__tabs { overflow-x: auto; scrollbar-width: thin; }
.dash__tabs .tab { white-space: nowrap; }
.dash__tabs .tab[hidden] { display: none !important; }

/* ----- Notices, shared by every panel ----- */
.notice--warn {
  border-color: rgba(242, 239, 232, 0.34);
  border-left-width: 3px;
}
.notice--good {
  border-color: rgba(125, 167, 123, 0.5);
  border-left-width: 3px;
}
.notice--good p:first-child { color: var(--ok); }
/* A standing statement of fact — the weekly send saying when it next runs.
   No left bar: it is not asking for anything and should not look like it is. */
.notice--plain { border-color: var(--line-c); }
.notice__sub { font-size: 0.8rem; color: var(--muted-c); }
.notice p + p { margin-top: 0.45rem; }
.notice .btn { margin-top: 0.7rem; }
.todo {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--muted-c);
}
.todo li { margin-bottom: 0.28rem; }
.todo li.is-blocked, .is-blocked { color: var(--bad); }

/* ----- A row of figures: the unit this dashboard is built from ----- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 1.4rem 0;
  background: var(--line-c);
  border: 1px solid var(--line-c);
  border-radius: 2px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  background: var(--bg-c);
}
.stat__value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--ink-c);
}
.stat__label {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.stat__sub { font-size: 0.76rem; color: var(--muted-c); }

.inline-field {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.inline-field select, .inline-field input { text-transform: none; letter-spacing: 0; }

.money-input { display: flex; align-items: center; gap: 0.4rem; }
.money-input span { color: var(--muted-c); }
.money-input input { flex: 1 1 auto; }

.check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.check input { width: auto; margin-top: 0.15rem; flex: 0 0 auto; }
.check span { font-size: 0.88rem; color: var(--ink-c); }

/* ===== MY SHIFTS ===== */
.myshifts { display: flex; flex-direction: column; gap: 1.2rem; }
.shift-card {
  border: 1px solid var(--line-c);
  border-radius: 2px;
  padding: 1.1rem 1.2rem 1.2rem;
}
/* Today's shift is the one thing on this screen anybody is looking for. */
.shift-card.is-today { border-color: var(--ink-c); border-left-width: 3px; }
.shift-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.shift-card__when { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.shift-card__day {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  color: var(--ink-c);
}
.shift-card__time { font-size: 0.95rem; color: var(--ink-c); }
.shift-card__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.shift-card__hours, .shift-card__break { font-size: 0.72rem; color: var(--muted-c); }
.shift-card__notes {
  margin-top: 0.7rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--line-c);
  font-size: 0.86rem;
  color: var(--muted-c);
}
.shift-card__nolist { margin-top: 0.8rem; font-size: 0.82rem; }

/* ----- The checklist somebody ticks off ----- */
.checks__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 1.1rem 0 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-c);
}
.checks__title {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.checks__count { font-size: 0.78rem; color: var(--muted-c); }
.checks { list-style: none; margin: 0; padding: 0; }
.check {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-c);
}
.checks .check:last-child { border-bottom: 0; }
.check__label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
}
/* A generous target: this gets pressed one-handed behind a bar. */
.check__label input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 0.05rem;
  accent-color: var(--ink-c);
  cursor: pointer;
}
.check__text { font-size: 0.95rem; color: var(--ink-c); line-height: 1.45; }
.check.is-done .check__text { color: var(--muted-c); text-decoration: line-through; }
.check__when {
  display: block;
  margin-left: 2.3rem;
  font-size: 0.7rem;
  color: var(--muted-c);
}

/* ===== THE CLOCK ===== */
.clock {
  border: 1px solid var(--line-c);
  border-left: 3px solid var(--muted-c);
  border-radius: 2px;
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 1.4rem;
  background: var(--bg-alt-c);
}
/* On the clock is the one state worth shouting about. */
.clock.is-on { border-left-color: var(--ok); }
.clock__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}
.clock__label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  color: var(--ink-c);
}
.clock.is-on .clock__label { color: var(--ok); }
.clock__since { font-size: 0.9rem; color: var(--muted-c); }
.clock__flag { margin-top: 0.5rem; font-size: 0.82rem; color: var(--bad); }
.clock__actions { margin-top: 1rem; }
/* A big target: this gets pressed on a phone with one hand, in a doorway. */
.clock__actions .btn { width: 100%; padding: 0.9rem 1rem; font-size: 0.78rem; }
.clock__note {
  margin-top: 0.9rem;
  font-size: 0.76rem;
  color: var(--muted-c);
  line-height: 1.5;
}

/* The camera dialog */
.shot {
  position: relative;
  margin: 1rem 0 0.6rem;
  border: 1px solid var(--line-c);
  border-radius: 2px;
  background: #000;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot__video, .shot__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mirrored, because a front camera that is not looks wrong to everybody. */
  transform: scaleX(-1);
}
.shot__fallback {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted-c);
}
#cameraModal .form-actions { flex-wrap: wrap; }

/* ===== DOCUMENTS ===== */
.docs-heading { margin: 0 0 1.2rem; }
.docs-heading__eyebrow, .docs-person__eyebrow {
  margin: 0 0 .25rem;
  color: var(--accent-c);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.docs-heading h2 { margin: 0; font-size: clamp(1.5rem, 2vw, 2rem); color: var(--ink-c); }
.docs-heading p:last-child { margin: .3rem 0 0; color: var(--muted-c); font-size: .9rem; }
.docs-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin: .75rem 0 1.25rem;
}
.docs-metric {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  padding: .65rem .85rem;
  border: 1px solid var(--line-c);
  background: var(--panel-c);
}
.docs-metric strong { color: var(--ink-c); font-size: 1.35rem; line-height: 1.1; }
.docs-metric span { color: var(--muted-c); font-size: .73rem; }
.docs-browse__tools { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.docs-groups { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.docs-groups__tab {
  border: 1px solid var(--line-c);
  border-radius: 3px;
  padding: .55rem .8rem;
  background: var(--panel-c);
  color: var(--ink-c);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.docs-groups__tab:hover { border-color: var(--accent-c); }
.docs-groups__tab[aria-selected="true"] { border-color: var(--accent-c); background: var(--accent-c); color: var(--on-accent-c); }
.docs-groups__tab:focus-visible, .docs-person-link:focus-visible, .docs-search input:focus-visible {
  outline: 2px solid var(--accent-c);
  outline-offset: 2px;
}
.docs-search { display: grid; gap: .25rem; min-width: min(100%, 14rem); color: var(--muted-c); font-size: .72rem; font-weight: 600; }
.docs-search input { width: 100%; min-height: 2.35rem; border: 1px solid var(--line-2-c); border-radius: 3px; padding: .4rem .65rem; background: var(--bg-c); color: var(--ink-c); font: inherit; font-size: .84rem; }
.docs-workspace { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); align-items: start; border: 1px solid var(--line-c); background: var(--panel-c); min-height: 22rem; }
.docs-people { min-width: 0; border-right: 1px solid var(--line-c); }
.docs-people__head { display: flex; justify-content: space-between; gap: .4rem; align-items: baseline; padding: .85rem 1rem; border-bottom: 1px solid var(--line-c); }
.docs-people__head h3 { margin: 0; color: var(--ink-c); font-size: .95rem; }
.docs-people__head span { color: var(--muted-c); font-size: .72rem; white-space: nowrap; }
.docs-people__list { max-height: 36rem; overflow-y: auto; }
.docs-person-link { display: grid; gap: .25rem; width: 100%; padding: .8rem 1rem; border: 0; border-bottom: 1px solid var(--line-c); border-left: 3px solid transparent; background: transparent; color: var(--ink-c); font: inherit; text-align: left; cursor: pointer; }
.docs-person-link:hover { background: var(--bg-alt-c); }
.docs-person-link[aria-current="true"] { border-left-color: var(--accent-c); background: var(--bg-alt-c); }
.docs-person-link strong { font-size: .86rem; line-height: 1.25; }
.docs-person-link__meta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; color: var(--muted-c); font-size: .72rem; }
.docs-person-link__alert { color: var(--bad); }
.docs-people__empty { margin: 0; padding: 1.2rem 1rem; color: var(--muted-c); font-size: .85rem; }
.docs-person { min-width: 0; scroll-margin-top: 5.5rem; }
.docs-person__inner { padding: 1.2rem 1.35rem 1.4rem; }
.docs-person__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-c); }
.docs-person__head h3 { margin: 0; color: var(--ink-c); font-size: 1.3rem; line-height: 1.2; }
.docs-person__email { margin: .3rem 0 0; color: var(--muted-c); font-size: .78rem; overflow-wrap: anywhere; }
.docs-person__sections, .docs-person__flags { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.docs-person__sections span { border: 1px solid var(--line-c); padding: .2rem .45rem; color: var(--muted-c); font-size: .7rem; }
.docs-person__flags { margin: .9rem 0 1.1rem; }
.docs-person__flags span { border: 1px solid var(--line-c); padding: .25rem .5rem; color: var(--muted-c); font-size: .72rem; }
.docs-person__flags .is-good { color: var(--ok); }
.docs-person__flags .is-warn { color: #8b5c00; }
.docs-person__flags .is-bad { color: var(--bad); }
.docs-person__missing { margin-bottom: 1.1rem; padding: .7rem .9rem; border-left: 3px solid var(--bad); background: var(--bg-alt-c); font-size: .78rem; }
.docs-person__missing strong { color: var(--ink-c); }
.docs-person__missing ul { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: .35rem 0 0; padding-left: 1.15rem; color: var(--muted-c); }
.docs-person__section-head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; margin-bottom: .55rem; }
.docs-person__section-head h4 { margin: 0; color: var(--ink-c); font-size: .92rem; }
.docs-person__section-head span { color: var(--muted-c); font-size: .72rem; }
.docs-person__empty { margin: 0; padding: 1.2rem; border: 1px dashed var(--line-c); color: var(--muted-c); font-size: .84rem; }
.docs-person__photos { margin-top: 1rem; border-top: 1px solid var(--line-c); padding-top: .7rem; }
.docs-person__photos summary, .docs-privacy summary { color: var(--ink-c); font-size: .8rem; font-weight: 600; cursor: pointer; }
.docs-person__photos p { margin: .4rem 0 .7rem; font-size: .75rem; }
.docs-person__actions { margin-top: 1.15rem; }
.docs-privacy { margin-top: 1.2rem; padding: .75rem .9rem; border: 1px solid var(--line-c); }
.docs-privacy p { margin: .55rem 0 0; color: var(--muted-c); font-size: .78rem; line-height: 1.5; }
@media (max-width: 900px) {
  .docs-workspace { grid-template-columns: 1fr; }
  .docs-people { border-right: 0; border-bottom: 1px solid var(--line-c); }
  .docs-people__list { max-height: 16rem; }
}
@media (max-width: 560px) {
  .docs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-groups, .docs-groups__tab { flex: 1 1 auto; }
  .docs-browse__tools, .docs-search { width: 100%; }
  .docs-person__inner { padding: 1rem; }
}
.folder {
  border: 1px solid var(--line-c);
  border-radius: 2px;
  margin-bottom: 0.8rem;
  padding: 0 1.1rem 0.2rem;
}
.folder.is-incomplete { border-left: 3px solid var(--bad); }
.folder__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}
.folder__summary::-webkit-details-marker { display: none; }
.folder__summary::before {
  content: '▸';
  margin-right: 0.6rem;
  color: var(--muted-c);
  font-size: 0.8rem;
}
.folder[open] > .folder__summary::before { content: '▾'; }
.folder__who { display: inline-flex; flex-direction: column; gap: 0.15rem; }
.folder__name { font-size: 1.05rem; color: var(--ink-c); }
.folder__email { font-size: 0.78rem; color: var(--muted-c); }
.folder__pills { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.folder__subhead {
  margin: 1.2rem 0 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.folder__tools { margin: 1rem 0 1.1rem; }
.folder .docs__list { margin-top: 0.4rem; }
.folder .notice { margin-bottom: 0.9rem; }

.shots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.shots__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-c);
  border-radius: 2px;
  background: var(--bg-c);
  color: var(--ink-c);
  font: inherit;
  cursor: pointer;
}
.shots__item:hover { border-color: var(--ink-c); }
.shots__date { font-size: 0.76rem; }
.shots__time { font-size: 0.66rem; color: var(--muted-c); }

/* ===== MY DETAILS ===== */
.me-pay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin: 1.4rem 0;
  background: var(--line-c);
  border: 1px solid var(--line-c);
}
.me-pay .stat { background: var(--bg-alt-c); }

.docs { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line-c); }
.docs__title {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-c);
  margin-bottom: 0.4rem;
}
.docs__lede { font-size: 0.85rem; max-width: 62ch; margin-bottom: 1rem; }
.docs__list { display: flex; flex-direction: column; gap: 0.6rem; }
.doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-c);
  border-radius: 2px;
}
.doc__about { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.doc__kind {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.doc__name { font-size: 0.92rem; color: var(--ink-c); word-break: break-word; }
.doc__meta { font-size: 0.74rem; color: var(--muted-c); }
.doc__tools { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.docs__add {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line-c);
}
.docs__add select, .docs__add input[type="file"] { flex: 1 1 200px; }
.docs__add input[type="file"] { font-size: 0.82rem; color: var(--muted-c); }

.filerows {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 0.5rem 1.2rem;
  margin: 1.2rem 0;
  font-size: 0.9rem;
}
.filerows dt {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-c);
  padding-top: 0.15rem;
}
.filerows dd { margin: 0; color: var(--ink-c); }
.filerows dd.muted { color: var(--muted-c); }

/* A label the screen reader reads and the eye does not need — the section
   picker in the rota bar sits next to a date field that already explains it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A heading over a group of checkboxes, matching `.field label`. The group is
   not one control, so it cannot be a <label> without lying to a screen reader. */
.field__label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-c);
  font-weight: 500;
}

/* Tick-a-few-of-these, laid out across rather than down. Deliberately not
   `.checks`, which is the shift checklist and carries its own dividers. */
.picks { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.picks .check { border: 0; padding: 0; }

/* ===== THE ROTA GRID ===== */
.rota-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-c);
  border-radius: 2px;
}
.rota { min-width: 900px; }
.rota__row {
  display: grid;
  grid-template-columns: 168px repeat(7, 1fr) 78px;
  border-bottom: 1px solid var(--line-c);
}
.rota__row:last-child { border-bottom: 0; }
.rota__row--head { background: var(--bg-alt-c); }
.rota__row--open { background: rgba(242, 239, 232, 0.03); }

/* The band that says "this is the kitchen". It spans the whole grid rather
   than sitting in the Who column, because the point of it is to break the
   week into two rotas the eye reads as separate things. */
.rota__band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  background: var(--bg-alt-c);
  border-bottom: 1px solid var(--line-c);
}
.rota__band-name {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-c);
}
.rota__band-sum { font-size: 0.72rem; color: var(--muted-c); }
/* "3 still in draft" is the one number on this line worth reading twice. */
.rota__band-sum .is-draft { color: var(--bad); }
/* The catch-all block at the bottom. Amber, not red: an unfiled shift is
   untidy rather than broken, and it is one click from being filed. */
.rota__band--none .rota__band-name { color: var(--muted-c); }
.rota__who {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  justify-content: center;
  padding: 0.7rem 0.9rem;
  border-right: 1px solid var(--line-c);
}
.rota__row--head .rota__who,
.rota__total {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.rota__name { font-size: 0.9rem; color: var(--ink-c); }
.rota__flag { font-size: 0.64rem; color: var(--bad); }
.rota__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.6rem;
  border-right: 1px solid var(--line-c);
}
.rota__dow {
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.rota__date { font-size: 0.82rem; color: var(--ink-c); }
.rota__cell {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem;
  min-height: 62px;
  border-right: 1px solid var(--line-c);
}
.rota__total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.7rem 0.9rem;
  color: var(--ink-c);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
}
.rota__row--head .rota__total { color: var(--muted-c); }

/* Every empty cell is a button, so adding a shift is one press on the
   day and the person you mean. It stays out of the way until hovered. */
.rota__add {
  border: 1px dashed var(--line-c);
  background: none;
  color: var(--muted-c);
  border-radius: 2px;
  padding: 0.25rem;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rota__cell:hover .rota__add,
.rota__add:focus-visible { opacity: 1; }
.rota__add:hover { border-color: var(--ink-c); color: var(--ink-c); }

.chip {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--line-c);
  border-radius: 2px;
  background: var(--bg-alt-c);
  color: var(--ink-c);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.chip:hover { border-color: var(--ink-c); }
.chip--live { border-left: 3px solid var(--ink-c); }
/* A draft is a manager thinking out loud — it must not look like a promise. */
.chip--draft { border-left: 3px dashed var(--muted-c); opacity: 0.72; }
.chip--absent { opacity: 0.45; text-decoration: line-through; }
.chip__time { font-size: 0.78rem; }
.chip__role { font-size: 0.66rem; color: var(--muted-c); }
.chip__tasks {
  margin-left: auto;
  font-size: 0.64rem;
  color: var(--muted-c);
  border: 1px solid var(--line-c);
  border-radius: 999px;
  padding: 0 0.35rem;
}

/* ===== Checklist editor, inside the shift dialog ===== */
.modal__panel--wide { max-width: 760px; }
.tasks { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line-c); }
.tasks__title {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.tasks__lede { font-size: 0.82rem; margin: 0.3rem 0 0.8rem; }
.tasks__list { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.task {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line-c);
  font-size: 0.88rem;
}
.task:last-child { border-bottom: 0; }
.task.is-done .task__text { color: var(--muted-c); text-decoration: line-through; }
.task__text { flex: 1 1 auto; color: var(--ink-c); }
.task__source, .task__done { font-size: 0.68rem; color: var(--muted-c); }
.task__tools { display: flex; gap: 0.7rem; }
.task__tools .linkish { font-size: 0.72rem; }
.tasks__add, .tasks__apply {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.6rem;
}
.tasks__add input, .tasks__apply select { flex: 1 1 180px; }

.clist {
  border: 1px solid var(--line-c);
  border-radius: 2px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.clist__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.clist__head h3 { font-size: 1.25rem; color: var(--ink-c); }
.clist__items {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--muted-c);
}
.clist__items li { margin-bottom: 0.2rem; }
.clist__tools { display: flex; gap: 0.5rem; }

/* ===== PAY ===== */
.payslip {
  border: 1px solid var(--line-c);
  border-radius: 2px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.4rem;
}
.payslip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-bottom: 0.9rem;
}
.payslip__head h3 { font-size: 1.5rem; color: var(--ink-c); }
.payslip__rate { font-size: 0.8rem; color: var(--muted-c); }
.payrows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.4rem;
  margin: 1rem 0 0;
  font-size: 0.9rem;
}
.payrows dt { color: var(--muted-c); white-space: pre; }
.payrows dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.8rem;
  color: var(--ink-c);
  font-variant-numeric: tabular-nums;
}
.payrows__note { font-size: 0.72rem; color: var(--muted-c); }
.payrows dt.is-total, .payrows dd.is-total {
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-c);
  color: var(--ink-c);
  font-weight: 500;
}
.payslip__hours { margin-top: 1.2rem; }
.payslip__hours summary {
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.payslip__hours summary:hover { color: var(--ink-c); }
.payslip__hours .tbl { min-width: 480px; }
.payslip__hours .tbl-wrap { margin-top: 0.8rem; }

/* ===== REPORTS ===== */
.chart__head { margin: 2rem 0 0.9rem; }
.chart__head h3 { font-size: 1.35rem; color: var(--ink-c); }
.chart__head p { font-size: 0.84rem; margin-top: 0.25rem; max-width: 68ch; }
.chart {
  border: 1px solid var(--line-c);
  border-radius: 2px;
  padding: 1rem 1.1rem;
}
.chart__row {
  display: grid;
  grid-template-columns: 110px 1fr 180px;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-c);
}
.chart__row:last-of-type { border-bottom: 0; }
.chart__label { font-size: 0.84rem; color: var(--ink-c); }
.chart__bars { display: flex; flex-direction: column; gap: 3px; }
.chart__bar { height: 9px; min-width: 1px; border-radius: 1px; }
/* Two series, told apart by fill rather than by hue: the palette is mono
   on purpose and adding a colour here would break the whole page's logic. */
.chart__bar--covers { background: var(--ink-c); }
.chart__bar--staff {
  background: repeating-linear-gradient(
    90deg, var(--muted-c) 0 2px, transparent 2px 4px
  );
}
.chart__figure {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 0.76rem;
  color: var(--ink-c);
  font-variant-numeric: tabular-nums;
}
.chart__key {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-c);
  font-size: 0.74rem;
  color: var(--muted-c);
}
.chart__swatch { width: 18px; height: 9px; display: inline-block; }
.chart__swatch--covers { background: var(--ink-c); }
.chart__swatch--staff {
  background: repeating-linear-gradient(90deg, var(--muted-c) 0 2px, transparent 2px 4px);
}
.chart__key span:not(.chart__swatch) { margin-right: 0.8rem; }
.daybar--wide { height: 96px; margin: 0.5rem 0 1.4rem; }

.tbl tr.is-archived { opacity: 0.5; }
.tbl .cell-tools { white-space: nowrap; }
.tbl .cell-tools .linkish + .linkish { margin-left: 0.7rem; }

/* ===== Semantic pills — the only three things that earn a colour =====
   good (approved, under target), bad (expired, over target, denied) and
   the warn treatment for "running out" — same border as .notice--warn, so
   amber-without-amber stays inside the mono system. */
.pill--ok { color: var(--ok); border-color: rgba(125, 167, 123, 0.5); background: transparent; }
.pill--bad { color: var(--bad); border-color: rgba(201, 107, 90, 0.5); background: transparent; }
.pill--warn { color: var(--ink-c); border-color: rgba(242, 239, 232, 0.34); background: transparent; }

/* ===== TIMESHEET ===== */
.ts-bulk { display: flex; justify-content: flex-end; margin: 0 0 0.8rem; }
/* Small marks beside a clock time: "late 12m", "auto", "manager". */
.ts-flag {
  margin-left: 0.5rem;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bad);
  white-space: nowrap;
}
.ts-flag--muted { color: var(--muted-c); }

/* ===== LEAVE ===== */
.lv-card {
  border: 1px solid var(--line-c);
  border-radius: 2px;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.4rem;
}
/* The queue is the one card asking for something. */
.lv-card--pending { border-left: 3px solid rgba(242, 239, 232, 0.34); }
.lv-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.lv-card__title {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-c);
  margin-bottom: 0.9rem;
}
.lv-card .stats { margin: 0.4rem 0 0.9rem; }
.lv-card .form-grid { margin-top: 0.4rem; }
.lv-list { display: flex; flex-direction: column; gap: 0.6rem; }
.lv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-c);
  border-radius: 2px;
}
.lv__about { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.lv__when { font-size: 0.92rem; color: var(--ink-c); }
.lv__note { font-size: 0.78rem; color: var(--muted-c); }
.lv__tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* The allowance's own words about what it is not. Small but readable. */
.lv-basis {
  font-size: 0.78rem;
  color: var(--muted-c);
  line-height: 1.55;
  max-width: 72ch;
}
.tbl .lv__note { display: block; margin-top: 0.25rem; }

/* ----- "on leave" on the week grid — background knowledge, not a chip ----- */
.rota__leave {
  align-self: stretch;
  text-align: center;
  padding: 0.14rem 0.3rem;
  border: 1px dashed var(--line-c);
  border-radius: 2px;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-c);
  background: rgba(242, 239, 232, 0.03);
}

/* ===== LOG ===== */
.logday {
  border: 1px solid var(--line-c);
  border-radius: 2px;
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 1rem;
}
.logday__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-bottom: 0.5rem;
}
.logday__date { font-size: 1.25rem; color: var(--ink-c); }
.logday__figures {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted-c);
}
.logday__sales {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.8rem;
}
.logday__sales input { width: 8.5rem; }
.logday__hint { font-size: 0.72rem; color: var(--muted-c); }
.lognote {
  display: flex;
  align-items: baseline;
  gap: 0.6rem 0.8rem;
  flex-wrap: wrap;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line-c);
  font-size: 0.86rem;
}
/* Multiline stays multiline — an incident report is written in sentences. */
.lognote__text { flex: 1 1 240px; color: var(--ink-c); white-space: pre-line; margin: 0; }
.lognote__who { font-size: 0.7rem; color: var(--muted-c); white-space: nowrap; }
.lognote .linkish { font-size: 0.72rem; }
.logday__add {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line-c);
}
.logday__add select { flex: 0 1 auto; }
.logday__add textarea { flex: 1 1 220px; min-height: 2.7rem; }

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .day__slot { grid-template-columns: 1fr; gap: 0.6rem; }
  .day__time {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding-top: 0.5rem;
  }
  .day__covers { margin-top: 0; }
  .daybar { height: 52px; }
  .chart__row { grid-template-columns: 90px 1fr; }
  /* The figures drop under the bar rather than being squeezed beside it. */
  .chart__figure { grid-column: 1 / -1; justify-content: flex-start; }
  .payrows { grid-template-columns: 1fr; gap: 0.15rem; }
  .payrows dd { justify-content: flex-start; margin-bottom: 0.5rem; }
}
@media (max-width: 480px) {
  .dash__head { align-items: flex-start; flex-direction: column; }
  .panel__actions { flex-wrap: wrap; }
  .bk-card__actions .btn { flex: 1; text-align: center; }
  .onboard { flex-direction: column; align-items: flex-start; }
  .doc { flex-direction: column; align-items: flex-start; }
  .shift-card__head { flex-direction: column; align-items: flex-start; }
  .lv { flex-direction: column; align-items: flex-start; }
  .logday__head { flex-direction: column; align-items: flex-start; }
}


/* ===== The two ways in, as tabs on a phone =====
   Above 760px both panels sit side by side and the tabs are not rendered at
   all. Below it they are, because stacking put the pin pad under a sign-in
   form that most phone users have no reason to touch.

   The switch works by a class on #gateWays rather than the hidden attribute:
   hidden would follow the page back up to desktop and leave one panel
   missing at a width where both should show. A class that only means
   anything inside this media query cannot do that. */
.gate__switch { display: none; }

@media (max-width: 759px) {
  .gate__switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-bottom: 1.1rem;
    border: 1px solid var(--line-2-c);
  }
  .gate__switch-tab {
    /* 56px, not the keypad's 64: this is a one-off choice, not a target
       somebody taps six times in the dark. */
    min-height: 56px;
    padding: 0.9rem 0.6rem;
    border: 0;
    background: transparent;
    color: var(--muted-c);
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .gate__switch-tab + .gate__switch-tab { border-left: 1px solid var(--line-2-c); }
  .gate__switch-tab.is-on {
    background: var(--accent-c);
    color: var(--on-accent-c);
  }
  .gate__switch-tab:focus-visible {
    outline: 2px solid var(--accent-c);
    outline-offset: -4px;
  }

  /* One panel at a time. Not [hidden] — see the note above. */
  .gate__ways.show-clock > #signinForm { display: none; }
  .gate__ways.show-signin > #clockPanel { display: none; }
}


/* ============================================================
   THE PORTAL SHELL — 03-portal-shell
   A header band, a tab rail, a notice. Nothing rounded, no
   gradients (the brief bans them, so the rail scrolls with solid
   arrow buttons rather than edge fades — and a button is tappable,
   which a fade is not).
   ============================================================ */

.shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 16px 22px;
  background: var(--bg-alt-c);
  border: 1px solid var(--line-c);
  border-bottom: 0;
}
.shell__left,
.shell__right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.shell__right { gap: 14px; }
.shell__brand,
.shell__active {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-c);
  margin: 0;
}
/* The active tab's name, in amber: the h1 of every screen is what you are
   looking at, not the word "Dashboard". */
.shell__active { color: var(--accent-c); letter-spacing: 0.02em; outline: none; }
.shell__sep { width: 1px; height: 26px; background: var(--line-c); display: block; }
.shell__who { font-size: 14px; color: var(--text-c); }
.shell__badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--line-2-c);
  color: var(--muted-c);
}
.shell__badge--admin { background: var(--accent-c); border-color: var(--accent-c); color: var(--on-accent-c); }
.shell__badge--manager { border-color: var(--ink-c); color: var(--ink-c); }
.shell__lock {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  border: 2px solid var(--ink-c);
  color: var(--ink-c);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.shell__lock:hover,
.shell__lock:focus-visible { border-color: var(--accent-c); color: var(--accent-c); outline: none; }

/* ----- the rail ----- */
.rail {
  display: flex;
  align-items: stretch;
  background: var(--bg-alt-c);
  border: 1px solid var(--line-c);
  margin-bottom: 1.6rem;
}
.rail__arrow {
  flex: 0 0 auto;
  width: 46px;
  min-height: 60px;
  background: var(--bg-alt-c);
  border: 0;
  color: var(--text-c);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.rail__arrow:first-child { border-right: 1px solid var(--line-c); }
.rail__arrow:not(:first-child) { border-left: 1px solid var(--line-c); }
.rail__arrow:hover,
.rail__arrow:focus-visible { color: var(--accent-c); outline: none; }
.rail__scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2-c) var(--bg-alt-c);
}
/* .tabs from styles.css wraps and boxes each tab; the rail does neither. */
.rail__tabs,
.dash__tabs.rail__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  overflow: visible;
  align-items: stretch;
}
.rail__tabs .tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 60px;
  padding: 0 18px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--text-c);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.rail__tabs .tab:hover { color: var(--accent-c); border-color: transparent; }
/* Active = a 3px amber underline AND ink-white text, never colour alone. */
.rail__tabs .tab.is-active,
.rail__tabs .tab[aria-selected="true"] {
  background: transparent;
  color: var(--ink-c);
  border-bottom-color: var(--accent-c);
}
.rail__tabs .tab:focus-visible { outline: 2px solid var(--accent-c); outline-offset: -4px; }
/* Count badges: amber on #101010 — 9.3:1, readable at 13px. */
.rail__tabs .tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: var(--accent-c);
  color: var(--on-accent-c);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
/* Hairlines break the rail into what is mine / the venue's / the money. */
.rail__sep {
  flex: 0 0 auto;
  width: 1px;
  margin: 12px 6px;
  background: var(--line-c);
}
.rail__sep[hidden] { display: none !important; }
/* The money tabs carry a padlock — a reminder to the owner, who is the only
   person who ever sees them. */
.tab__lock {
  width: 11px;
  height: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--lock-mask) center / contain no-repeat;
  mask: var(--lock-mask) center / contain no-repeat;
  opacity: 0.8;
}
.rail__menu { display: none; }

/* ----- the notice ----- */
.onboard {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 1.6rem;
  padding: 16px 22px;
  border: 0;
  border-radius: 0;
  background: var(--accent-c);
  color: var(--on-accent-c);
}
.onboard svg { flex: 0 0 auto; }
.onboard p { flex: 1 1 240px; margin: 0; font-size: 16px; font-weight: 500; color: var(--on-accent-c); }
.onboard__go {
  min-height: 44px;
  padding: 0 18px;
  background: var(--on-accent-c);
  border: 0;
  color: var(--accent-c);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.onboard__go:hover,
.onboard__go:focus-visible { color: var(--accent-hover-c); outline: none; }

/* ----- the phone: the rail becomes a sheet ----- */
.tabsheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.72);
}
.tabsheet__panel {
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  background: var(--panel-c);
  border-top: 1px solid var(--line-2-c);
  padding: 18px 18px 26px;
}
.tabsheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tabsheet__head .eyebrow { margin: 0; }
.tabsheet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-c);
  border: 1px solid var(--line-c);
}
.tabsheet__cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 64px;
  padding: 0 16px;
  background: var(--panel-c);
  border: 0;
  color: var(--text-c);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.tabsheet__cell.is-active { color: var(--accent-c); }
.tabsheet__cell:hover,
.tabsheet__cell:focus-visible { color: var(--ink-c); background: var(--bg-c); outline: none; }
.tabsheet__cell .tab__count { margin: 0; }
/* The 12th cell is empty rather than stretched: a full-width odd cell reads
   as more important than it is. */
.tabsheet__cell--empty { pointer-events: none; }

@media (max-width: 559px) {
  .shell { padding: 12px 14px; gap: 10px 14px; }
  .shell__brand { display: none; }
  .shell__sep { display: none; }
  .shell__who { display: none; }
  .rail__arrow { display: none; }
  .rail__sep { display: none; }
  /* Under about 560px the 13-tab rail stops being scannable, so it collapses
     to the current tab plus a Menu button. */
  .rail__tabs .tab:not(.is-active) { display: none !important; }
  .rail__menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    padding: 0 18px;
    margin-left: auto;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--line-c);
    color: var(--ink-c);
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .rail__menu-count {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    background: var(--accent-c);
    color: var(--on-accent-c);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
  }
}

/* ============================================================
   TEAM — 06-team
   Two columns that actually get used: whether their sign-in ever
   worked, and whether they have a PIN. Money is a separate band
   under the list for the owner, never a column inside it.
   ============================================================ */

.team-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 1.1rem;
}
.team-filters__group { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  min-height: 36px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--line-2-c);
  color: var(--text-c);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.filter-chip:hover { color: var(--ink-c); border-color: var(--ink-c); }
.filter-chip.is-on { background: var(--ink-c); border-color: var(--ink-c); color: var(--bg-c); }
.filter-chip:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; }
@media (max-width: 559px) {
  /* On a phone each group is a row you slide, not a stack you scroll past.
     nowrap on the container matters: with the desktop wrap left on, a column
     flexbox is MULTI-LINE and its line is sized to the chips' full width
     (535px), which widened a 390px phone's whole layout to 551px and pushed
     every dialog's Save row off the screen. */
  .team-filters { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
  .team-filters__group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; max-width: 100%; }
  .filter-chip { flex: 0 0 auto; white-space: nowrap; }
}

/* The chase: who cannot get in, said once above the list. */
.team-chase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  padding: 14px 18px;
  border: 1px solid var(--line-2-c);
  border-left: 3px solid var(--bad);
}
.team-chase p { margin: 0; font-size: 15px; color: var(--ink-c); }
.team-chase strong { font-weight: 700; color: var(--ink-c); }

.tbl--team th { white-space: nowrap; }
.tbl--team td { vertical-align: top; }
.cell-person .cell-person__name { display: block; color: var(--ink-c); font-weight: 500; }
.cell-person .cell-person__mail { display: block; font-size: 0.8rem; color: var(--muted-c); }
.cell-person .cell-person__mail:hover { color: var(--accent-c); }
/* Three sign-in states use three SHAPES as well as three colours. */
.state { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-c); white-space: nowrap; }
.state::before { content: ""; width: 10px; height: 10px; flex: none; border: 2px solid currentColor; }
.state--ok { color: var(--ok); }
.state--ok::before { background: currentColor; }
.state--wait { color: var(--text-c); }
.state--bad { color: var(--bad); }
.state--bad::before { border-color: currentColor; transform: rotate(45deg); }
.state--none { color: var(--muted-c); }
.state--none::before { border-style: dashed; }
.state__sub { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--muted-c); white-space: nowrap; }
.cell-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cell-actions .linkish { padding: 0; white-space: nowrap; }
.cell-actions .linkish--danger { color: var(--bad); }
/* Archived people stay on the list, greyed, because their timesheets and
   punches still exist and somebody will ask about them in November. */
.tbl--team tr.is-archived td { color: var(--muted-c); }
.tbl--team tr.is-archived .cell-person__name { color: var(--muted-c); text-decoration: line-through; }

/* Admin only: the rate band. Keyed by name, under the list, never a column. */
.rate-band {
  margin-top: 2rem;
  border: 1px solid var(--line-2-c);
  border-top: 3px solid var(--accent-c);
  padding: 18px 22px 8px;
  overflow-x: auto; /* four columns are wider than a phone; scroll the band, not the page */
}
.rate-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rate-band__head .eyebrow { margin: 0; }
.rate-band__head p { margin: 0; font-size: 13px; color: var(--muted-c); }
.rate-band .tbl { min-width: 0; }
.rate-band .tbl td:nth-child(2) { font-weight: 700; color: var(--ink-c); }

/* The one screen that shows a secret. */
.modal__panel--pin { max-width: 520px; text-align: center; }
.pin-once {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 10px;
}
.pin-once span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 78px;
  background: var(--bg-c);
  border: 1px solid var(--line-2-c);
  border-bottom: 3px solid var(--accent-c);
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--ink-c);
}
.pin-once__warn {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.pin-once__note { margin: 0 0 12px; font-size: 15px; color: var(--text-c); text-wrap: pretty; }
.pin-once__hush { margin: 0 0 18px; font-size: 13px; color: var(--muted-c); text-wrap: pretty; }
.modal__panel--pin .form-actions { justify-content: center; }
@media (max-width: 480px) {
  .pin-once { gap: 6px; }
  .pin-once span { width: 44px; height: 62px; font-size: 34px; }
}


/* ============================================================
   PAY + REPORTS — 08-reports-admin
   The owner's two money screens. An amber band first, so each
   reads as restricted before it reads as anything else; figures
   in Anton; the PAYE estimate boxed in --bad with its caveat
   ABOVE the numbers, never in small print beneath them. Nothing
   rounded, no gradients, no shadows.
   ============================================================ */

/* ----- the band: the first thing on the screen ----- */
.rp-band {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 20px;
  background: var(--accent-c);
  color: var(--on-accent-c);
}
.rp-band svg { flex: 0 0 auto; }
.rp-band__tag {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rp-band__what { flex: 1 1 260px; font-size: 15px; font-weight: 500; }
.rp-band__who {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--on-accent-c);
  white-space: nowrap;
}
.rp-lede { margin: 0 0 22px; max-width: 74ch; font-size: 16px; color: var(--text-c); text-wrap: pretty; }
/* The bar's controls are shared buttons; the tap target rule is ours to keep. */
.rp-actions .btn,
.rp-actions select,
.rp-actions input { min-height: 44px; }
.rp-loading { padding: 2.2rem 1rem; text-align: center; color: var(--muted-c); font-size: 0.95rem; }

/* ----- by day / by week / by month ----- */
.rp-grainbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding: 14px 18px;
  background: var(--bg-alt-c);
  border: 1px solid var(--line-c);
}
.rp-grain { display: flex; gap: 10px; flex-wrap: wrap; }
.rp-grain__btn {
  min-height: 48px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid var(--line-2-c);
  color: var(--text-c);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.rp-grain__btn:hover { color: var(--ink-c); border-color: var(--ink-c); }
/* On = amber fill AND aria-pressed; the fill is the loud one, the attribute the honest one. */
.rp-grain__btn.is-on { background: var(--accent-c); border-color: var(--accent-c); color: var(--on-accent-c); }
.rp-grain__btn:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; }
.rp-grainbar__range { font-size: 14px; color: var(--text-c); }

/* ----- the big figures ----- */
.rp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}
.rp-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  background: var(--panel-c);
  border: 1px solid var(--line-c);
}
/* Labour % is the one number on the screen anyone acts on; it gets the amber. */
.rp-card--key { border-color: var(--accent-c); }
.rp-card__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.rp-card__value {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--ink-c);
  font-variant-numeric: tabular-nums;
}
.rp-card--key .rp-card__value { color: var(--accent-c); }
.rp-card__note { margin-top: 8px; font-size: 14px; color: var(--text-c); text-wrap: pretty; }
.rp-card__note .linkish { font-size: inherit; }

/* ----- section heads: a tag, then the question ----- */
.rp-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 40px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-c);
}
.rp-head__tag {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-accent-c);
  background: var(--accent-c);
  padding: 5px 9px 3px;
}
.rp-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 27px;
  line-height: 0.96;
  color: var(--ink-c);
  text-transform: uppercase;
}
.rp-head__sub { margin: 0; flex-basis: 100%; max-width: 92ch; font-size: 14px; color: var(--text-c); }

/* ----- tables: hairline rows, figures in Anton, numbers right ----- */
.rp-scroll {
  overflow-x: auto;
  margin-bottom: 14px;
  border: 1px solid var(--line-c);
  background: var(--bg-c);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2-c) var(--bg-alt-c);
}
.rp-tbl { min-width: 900px; }
.rp-tbl th {
  padding: 13px 16px;
  background: var(--bg-alt-c);
  font-size: 13px;
  letter-spacing: 0.2em;
  border-bottom-color: var(--line-2-c);
  white-space: nowrap;
}
.rp-tbl td { padding: 14px 16px; font-size: 15px; color: var(--text-c); vertical-align: middle; }
.rp-tbl .rp-when { font-size: 16px; color: var(--ink-c); white-space: nowrap; }
.rp-tbl .rp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-tbl .rp-big { font-family: var(--font-display); font-size: 19px; color: var(--ink-c); }
.rp-tbl .muted { color: var(--muted-c); }
.rp-tbl tr.is-peak td { background: var(--panel-c); }
.rp-tbl tfoot td,
.rp-tbl tfoot tr:hover td { background: var(--bg-alt-c); border-top: 1px solid var(--line-2-c); border-bottom: 0; }
.rp-tbl tfoot .rp-big { font-size: 21px; }
.rp-tbl tfoot .rp-foot__key { color: var(--accent-c); }
.rp-tbl tfoot .rp-foot__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
  white-space: nowrap;
}
.rp-tbl tfoot .rp-foot__note { font-size: 14px; color: var(--text-c); }
.rp-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted-c);
}
/* Over the labour target: red, and the word "over" under the figure. */
.rp-tbl .is-over { color: var(--bad); }
.rp-over {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bad);
}
/* The bar per row, inside the table: it sorts and scans with the numbers it
   describes, and needs no legend, no axis and no SVG. */
.rp-shape { min-width: 180px; }
.rp-bar { display: block; height: 16px; min-width: 2px; background: var(--line-2-c); }
.rp-bar--hot { background: var(--accent-c); }
.rp-readcell { min-width: 280px; }
.rp-read { display: flex; align-items: flex-start; gap: 9px; max-width: 52ch; }
.rp-read svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent-c); }
.rp-read--short { color: var(--ink-c); }

/* ----- the estimate: --bad border, caveat above the figures ----- */
.rp-estimate { margin-bottom: 26px; border: 1px solid var(--bad); background: var(--bg-alt-c); }
.rp-estimate__warn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--bad);
}
.rp-estimate__warn > svg { flex: 0 0 auto; margin-top: 2px; color: var(--bad); }
.rp-estimate__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-c);
}
.rp-estimate__copy { margin: 10px 0 0; max-width: 88ch; font-size: 16px; line-height: 1.65; color: var(--text-c); }
.rp-estimate__copy strong { color: var(--ink-c); }
.rp-estimate__fine { margin: 8px 0 0; max-width: 88ch; font-size: 13px; color: var(--muted-c); }
.rp-estimate__fine.is-blocked { color: var(--bad); }
.rp-estimate .rp-scroll { margin: 0; border: 0; }
.rp-estimate .rp-tbl { min-width: 920px; }
.rp-estimate .panel__empty { margin: 0; }
.rp-estimate__cost { padding: 12px 20px 0; }
.rp-estimate__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid var(--bad);
}
.rp-estimate__csvnote { flex: 1 1 320px; font-size: 14px; color: var(--text-c); }
.rp-who__name { display: block; font-size: 16px; color: var(--ink-c); }
.rp-who__sub { display: block; margin-top: 3px; font-size: 13px; color: var(--muted-c); white-space: nowrap; }
.rp-tools { text-align: right; white-space: nowrap; }
.rp-tools .linkish { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
/* Warnings ride under the person, in full. Red only for the one that costs
   money — a rate under the minimum wage — and it says BELOW in capitals too. */
.rp-warnrow td { padding-top: 0; }
.rp-warn { margin: 0 0 6px; font-size: 14px; color: var(--text-c); }
.rp-warn::before { content: "Warning: "; font-weight: 700; color: var(--ink-c); }
.rp-warn.is-blocked,
.rp-warn.is-blocked::before { color: var(--bad); }
.rp-tbl tr.rp-detail td,
.rp-tbl tr.rp-detail:hover td { background: var(--panel-c); }
.rp-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px 40px;
}
.rp-detail__label {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-c);
}
.rp-detail .payrows { margin-top: 0; }
.rp-detail .rp-scroll { border: 1px solid var(--line-c); }
.rp-detail .tbl { min-width: 0; }
.rp-detail .tbl td { padding: 8px 12px; font-size: 14px; }

@media (max-width: 720px) {
  .rp-band { padding: 12px 14px; }
  .rp-band__who { white-space: normal; }
  .rp-card__value { font-size: 36px; }
  .rp-head__title { font-size: 22px; }
  .rp-estimate__title { font-size: 20px; }
}


/* ============================================================
   ROTA — 04-rota
   Two rotas on one page, one block per section, each in its own
   horizontal scroller so the manager can compare Kitchen's
   Saturday to Bar's without both moving. Nothing rounded, no
   gradients; the one hatch on a leave day is a pattern, not a
   fade, and it is there so "blocked" reads without colour.
   ============================================================ */

/* ----- the bar: week nav on the left, the week's figure on the right ----- */
.rg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: var(--bg-alt-c);
  border: 1px solid var(--line-c);
}
.rg-bar__nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rg-arrow {
  min-width: 48px;
  min-height: 48px;
  background: transparent;
  border: 1px solid var(--line-2-c);
  color: var(--ink-c);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.rg-arrow:hover,
.rg-arrow:focus-visible { border-color: var(--accent-c); color: var(--accent-c); outline: none; }
.rg-bar__week { min-width: 210px; }
.rg-bar__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-c);
}
/* The status line doubles as the date range: "Mon 14 – Sun 20 Sep 2026 · 39
   shifts". While the week loads it says so, in the same place. */
.rg-bar__range { margin: 4px 0 0; font-size: 13px; color: var(--text-c); }
.rg-date,
.rg-select {
  min-height: 48px;
  padding: 0 12px;
  background: var(--bg-c);
  border: 1px solid var(--line-2-c);
  color: var(--ink-c);
  font: inherit;
  font-size: 14px;
  color-scheme: dark;
}
.rg-date { color: var(--text-c); }
.rg-date:focus,
.rg-select:focus { border-color: var(--accent-c); outline: none; }
.rg-bar__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rg-bar__total { margin-right: 8px; }
.rg-bar__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.rg-bar__big {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--ink-c);
}

/* ----- buttons: Anton, uppercase, 48px, never rounded ----- */
.rg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--line-2-c);
  color: var(--ink-c);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.rg-btn:hover:not(:disabled),
.rg-btn:focus-visible { border-color: var(--accent-c); color: var(--accent-c); outline: none; }
.rg-btn:disabled { opacity: 0.55; cursor: default; }
.rg-btn--amber { border-color: var(--accent-c); color: var(--accent-c); }
.rg-btn--amber:hover:not(:disabled),
.rg-btn--amber:focus-visible { background: var(--accent-c); color: var(--on-accent-c); }
.rg-btn--ink { border: 2px solid var(--ink-c); }
.rg-btn--primary {
  padding: 0 26px;
  background: var(--accent-c);
  border-color: var(--accent-c);
  color: var(--on-accent-c);
  font-size: 17px;
}
.rg-btn--primary:hover:not(:disabled),
.rg-btn--primary:focus-visible {
  background: var(--accent-hover-c);
  border-color: var(--accent-hover-c);
  color: var(--on-accent-c);
}
.rg-btn--danger { border-color: var(--bad); }
.rg-btn--danger:hover:not(:disabled),
.rg-btn--danger:focus-visible { background: var(--bad); border-color: var(--bad); color: var(--on-accent-c); }
/* Author display rules would otherwise beat the UA's [hidden]. */
.rg-btn[hidden],
.rg-publish[hidden],
.rg-length[hidden],
.rg-weekly[hidden] { display: none !important; }

/* ----- the standing order: one line, one button ----- */
.rg-weekly {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 14px 18px;
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  border-left: 4px solid var(--accent-c);
}
/* Switched off: the rule goes dashed and grey, and the words say so. */
.rg-weekly.is-off { border-left-style: dashed; border-left-color: var(--muted-c); }
.rg-weekly__text { flex: 1 1 320px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-c); }
.rg-weekly__sub { flex-basis: 100%; order: 3; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted-c); }

/* ----- a block: one rota ----- */
.rg-block { margin-bottom: 22px; background: var(--bg-c); border: 1px solid var(--line-c); }
.rg-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--bg-alt-c);
  border-bottom: 1px solid var(--line-c);
}
.rg-block__name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-c);
}
.rg-block__name::before { content: ""; width: 28px; height: 2px; flex: none; background: var(--accent-c); }
/* The catch-all block for shifts with no rota: quieter, because it is a
   to-do list rather than a team. */
.rg-block--none .rg-block__name { color: var(--muted-c); }
.rg-block--none .rg-block__name::before { background: var(--muted-c); }
.rg-block__meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rg-block__count { font-size: 14px; color: var(--text-c); }
.rg-drafts {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-c);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-c);
}
/* Dashed AND amber AND the number: a draft count is never colour alone. */
.rg-drafts.is-draft { border: 1px dashed var(--accent-c); color: var(--accent-c); }
.rg-block__hours { font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--ink-c); }
.rg-block__note { margin: 0; padding: 14px 18px; border-top: 1px solid var(--line-c); font-size: 14px; color: var(--muted-c); }

/* ----- the grid: each row is its own grid, so the columns line up ----- */
.rg-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-2-c) var(--bg-alt-c); }
.rg-grid { min-width: 1160px; }
.rg-row {
  display: grid;
  grid-template-columns: 196px repeat(7, minmax(120px, 1fr)) 92px;
  border-bottom: 1px solid var(--line-c);
}
.rg-row:last-child { border-bottom: 0; }
.rg-row > * + * { border-left: 1px solid var(--line-c); }
.rg-row > :last-child { border-left-color: var(--line-2-c); }
.rg-row--head { background: var(--bg-alt-c); border-bottom-color: var(--line-2-c); }
.rg-row--open { background: var(--bg-alt-c); border-top: 1px solid var(--line-2-c); border-bottom-color: var(--line-2-c); }
.rg-row--sum { background: var(--bg-alt-c); }
.rg-th {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.rg-th--day { padding: 12px 10px; }
.rg-th__dow {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink-c);
}
.rg-th__date {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-c);
}
/* Today: amber day name AND the word "today" on the date line. */
.rg-th--day.is-today .rg-th__dow { color: var(--accent-c); }
.rg-th--total { text-align: right; letter-spacing: 0.14em; }
.rg-who { padding: 12px 14px; min-width: 0; }
.rg-who__name { display: block; font-size: 16px; color: var(--ink-c); overflow-wrap: anywhere; }
.rg-who__sub { display: block; margin-top: 3px; font-size: 13px; color: var(--text-c); }
.rg-who__flag { color: var(--bad); }
.rg-cell { display: flex; flex-direction: column; gap: 6px; padding: 7px; min-width: 0; }
.rg-cell.is-away { background: var(--bg-alt-c); }
.rg-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 10px;
  text-align: right;
}
.rg-total__n { font-family: var(--font-display); font-size: 20px; line-height: 1; color: var(--ink-c); }
/* Amber with a word under it ("all draft"): real to the manager, invisible
   to the person whose hours they are. Open shifts' hours go amber too. */
.rg-total.is-amber .rg-total__n { color: var(--accent-c); }
.rg-total__sub { margin-top: 3px; font-size: 13px; color: var(--text-c); }
.rg-sum { padding: 14px 10px; font-family: var(--font-display); font-size: 19px; line-height: 1; color: var(--ink-c); }
.rg-sum--label {
  padding: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.rg-sum--all { font-size: 21px; text-align: right; color: var(--accent-c); }

/* ----- chips: the five cell states ----- */
.rg-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 62px;
  padding: 8px 9px;
  background: var(--panel-c);
  border: 1px solid var(--line-2-c);
  border-left: 3px solid var(--accent-c);
  color: var(--ink-c);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
/* The floor's chip is a block, not a button: nothing to press. */
div.rg-chip { cursor: default; }
button.rg-chip:hover,
button.rg-chip:focus-visible { border-color: var(--ink-c); border-left-color: var(--accent-c); outline: none; }
.rg-chip__time { font-family: var(--font-display); font-size: 16px; line-height: 1; color: var(--ink-c); }
.rg-chip__job { margin-top: 5px; font-size: 13px; color: var(--text-c); }
.rg-chip__tasks { margin-top: 3px; font-size: 12px; color: var(--muted-c); }
.rg-chip__state {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-c);
}
/* Draft: dashed border and the word. */
.rg-chip--draft { background: var(--bg-c); border: 1px dashed var(--accent-c); }
button.rg-chip--draft:hover,
button.rg-chip--draft:focus-visible { border-color: var(--ink-c); }
/* Open: nobody's name on it, so the whole border is amber and so is the job. */
.rg-chip--open { border: 1px solid var(--accent-c); }
.rg-chip--open.rg-chip--draft { border-style: dashed; }
.rg-chip--open .rg-chip__job { color: var(--accent-c); }
/* Flagged: bordered in the warning colour AND the reason in words. */
.rg-chip--flag,
.rg-chip--flag.rg-chip--open { border: 1px solid var(--bad); border-left: 3px solid var(--bad); }
.rg-chip__flag { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 13px; color: var(--ink-c); }
.rg-chip__flag svg { flex: none; color: var(--bad); }
/* Absent: struck through AND labelled; it pays nothing and says so. */
.rg-chip--absent { border-left-color: var(--muted-c); }
.rg-chip--absent .rg-chip__time { color: var(--muted-c); text-decoration: line-through; }
.rg-chip__state--absent { color: var(--muted-c); }

/* ----- on leave: hatched so it reads as blocked out of focus ----- */
.rg-leave {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 62px;
  padding: 8px 9px;
  border: 1px solid var(--line-2-c);
  background-color: var(--bg-alt-c);
  background-image: repeating-linear-gradient(135deg, var(--panel-c) 0 6px, var(--bg-alt-c) 6px 12px);
}
.rg-leave__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-c);
}
.rg-leave__head svg { flex: none; color: var(--text-c); }
.rg-leave__sub { margin-top: 5px; font-size: 13px; color: var(--text-c); }

/* ----- the +: always faintly there, brighter under the pointer ----- */
.rg-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 62px;
  background: transparent;
  border: 1px dashed var(--line-c);
  color: var(--muted-c);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.rg-cell:hover .rg-add,
.rg-add:hover,
.rg-add:focus-visible { border-color: var(--line-2-c); color: var(--ink-c); background: var(--panel-c); outline: none; }
.rg-add:focus-visible { border-color: var(--accent-c); }
/* Under a shift the + is shorter: the cell already has its shape. */
.rg-chip + .rg-add { min-height: 44px; font-size: 18px; }

/* ----- the empty week ----- */
.rg-empty { padding: 56px 24px; text-align: center; }
.rg-empty__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--ink-c);
}
.rg-empty__copy { margin: 0 auto 30px; max-width: 52ch; font-size: 16px; line-height: 1.65; color: var(--text-c); }
.rg-empty__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.rg-empty__actions .rg-btn { min-height: 52px; padding: 0 24px; font-size: 17px; }
.rg-ghost {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  max-width: 900px;
  margin: 44px auto 0;
  background: var(--line-c);
  border: 1px solid var(--line-c);
}
.rg-ghost__dow {
  padding: 9px;
  background: var(--bg-alt-c);
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--muted-c);
}
.rg-ghost__cell { min-height: 56px; background: var(--bg-c); }

/* ----- the publish bar: the only amber-bordered band on the page ----- */
.rg-publish {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 18px;
  background: var(--bg-alt-c);
  border: 1px solid var(--line-c);
}
.rg-publish.is-live { border-color: var(--accent-c); }
/* Dashed amber square while something is in draft; a solid green one once
   everybody has been told. Shape and fill, not just hue. */
.rg-publish__mark { width: 14px; height: 14px; flex: none; border: 1px solid var(--ok); background: var(--ok); }
.rg-publish.is-live .rg-publish__mark { border: 1px dashed var(--accent-c); background: transparent; }
.rg-publish__text { flex: 1 1 300px; min-width: 0; }
.rg-publish__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-c);
}
.rg-publish__sub { margin: 6px 0 0; font-size: 14px; color: var(--text-c); }
.rg-publish__who-none { margin: 6px 0 0; font-size: 13px; color: var(--muted-c); }
.rg-publish__who { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--muted-c); }
.rg-publish__who li.is-blocked { color: var(--bad); }
.rg-publish__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.rg-publish__actions .rg-btn { min-height: 52px; }

/* ----- across rotas: people whose week is split ----- */
.rg-across { margin-bottom: 28px; padding: 16px 18px; border: 1px solid var(--line-c); }
.rg-across .rg-eyebrow { margin-bottom: 8px; }
.rg-across__lede { margin: 0 0 10px; font-size: 14px; color: var(--text-c); }
.rg-across__list { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-c); }
.rg-across__list strong { font-weight: 500; color: var(--ink-c); }

/* ----- the eyebrow with the amber dash ----- */
.rg-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.rg-eyebrow::before { content: ""; width: 28px; height: 2px; flex: none; background: var(--accent-c); }

/* ----- the shift editor and the copy dialog ----- */
.modal__panel.rg-modal { max-width: 620px; padding: 0; border-color: var(--line-2-c); }
.modal__panel--wide.rg-modal { max-width: 760px; }
.rg-modal__close.modal__close { top: 20px; right: 24px; width: 44px; height: 44px; }
.rg-modal__head { padding: 20px 84px 20px 24px; border-bottom: 1px solid var(--line-c); }
.rg-modal__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--ink-c);
}
.rg-modal__sub { margin: 8px 0 0; font-size: 14px; color: var(--text-c); }
.rg-form { max-width: none; }
.rg-form__grid { padding: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.rg-form .field label { font-size: 13px; letter-spacing: 0.28em; }
.rg-form .field input,
.rg-form .field select { min-height: 52px; padding: 0 13px; font-size: 16px; }
.rg-form .field textarea { min-height: 96px; padding: 12px 13px; font-size: 16px; }
.rg-length {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  background: var(--bg-c);
  border: 1px solid var(--line-2-c);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-c);
}
.rg-length.is-warn { border-color: var(--bad); }
.rg-length svg { flex: none; margin-top: 2px; color: var(--muted-c); }
.rg-length.is-warn svg { color: var(--bad); }
.rg-length strong { font-weight: 700; color: var(--ink-c); }
/* A checkbox with room to hit: the whole row is the target. */
.rg-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 56px;
  padding: 14px 15px;
  background: var(--bg-c);
  border: 1px solid var(--line-2-c);
  cursor: pointer;
}
.rg-check input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.rg-check__box { position: relative; width: 22px; height: 22px; flex: none; background: var(--bg-c); border: 2px solid var(--line-2-c); }
.rg-check:hover .rg-check__box { border-color: var(--ink-c); }
.rg-check input:checked + .rg-check__box { background: var(--accent-c); border-color: var(--accent-c); }
.rg-check input:checked + .rg-check__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--on-accent-c);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.rg-check input:focus-visible + .rg-check__box { outline: 2px solid var(--accent-c); outline-offset: 2px; }
.rg-check__title { display: block; font-size: 16px; color: var(--ink-c); }
.rg-check__sub { display: block; margin-top: 3px; font-size: 13px; color: var(--text-c); }
.rg-modal__foot {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 18px 24px;
  border-top: 1px solid var(--line-c);
}
.rg-modal__foot--end { justify-content: flex-end; }
.rg-modal__foot-right { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.rg-modal__foot .rg-btn { min-height: 52px; padding: 0 20px; }
.rg-tasks.tasks { margin: 0; padding: 20px 24px 24px; border-top: 1px solid var(--line-c); }

@media (max-width: 760px) {
  .rg-bar__title { font-size: 22px; }
  .rg-bar__tools { width: 100%; }
  .rg-empty__title { font-size: 30px; }
  .rg-modal__head { padding-right: 76px; }
  .rg-modal__foot-right { margin-left: 0; width: 100%; }
}


/* ============================================================
   THE DIARY — 09-diary
   One week of website bookings and venue events, a Google
   Calendar band above it, and the day board underneath when a
   day is opened. Every mark carries a word as well as a border,
   so a private hire says "Private hire" and is not merely amber.
   Nothing rounded, no gradients, no shadows.
   ============================================================ */

/* ----- the Google band ----- */
.dy-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: 1.2rem;
  padding: 18px 20px;
  background: var(--bg-alt-c);
  border: 1px solid var(--line-c);
}
.dy-band[hidden] { display: none; }
.dy-band--stale { border-color: var(--bad); }
.dy-band__state { display: flex; align-items: center; gap: 14px; flex: 1 1 340px; min-width: 0; }
/* Four states, four SHAPES: filled = live, outlined = never connected,
   a diamond = broken, a turning square = busy. The title says it in words. */
.dy-band__dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: block;
  border: 2px solid var(--muted-c);
}
.dy-band__dot--ok { background: var(--ok); border-color: var(--ok); }
.dy-band__dot--busy { background: var(--accent-c); border-color: var(--accent-c); animation: dy-spin 1.6s linear infinite; }
.dy-band__dot--bad { border-color: var(--bad); transform: rotate(45deg); }
.dy-band__dot--off { border-color: var(--muted-c); background: transparent; }
@keyframes dy-spin { to { transform: rotate(360deg); } }
.dy-band__text { min-width: 0; }
.dy-band__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-c);
}
.dy-band__line { margin: 6px 0 0; font-size: 14px; color: var(--text-c); text-wrap: pretty; }
.dy-band__side { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dy-band__kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.dy-band__cals { margin: 5px 0 0; font-size: 14px; color: var(--text-c); }
.dy-band__btn {
  min-height: 48px;
  padding: 0 18px;
  background: var(--accent-c);
  border: 0;
  color: var(--on-accent-c);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.dy-band__btn:hover,
.dy-band__btn:focus-visible { background: var(--accent-hover-c); outline: none; }
.dy-band__btn--ghost { background: transparent; border: 2px solid var(--ink-c); color: var(--ink-c); }
.dy-band__btn--ghost:hover,
.dy-band__btn--ghost:focus-visible { background: transparent; border-color: var(--accent-c); color: var(--accent-c); }
.dy-band__btn:disabled { background: var(--bg-alt-c); border: 1px solid var(--line-c); color: var(--muted-c); cursor: default; }

/* ----- the week's head: stepper on the left, two totals on the right ----- */
.dy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: 1.1rem;
}
.dy-weeknav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dy-weeknav__arrow {
  min-width: 48px;
  min-height: 48px;
  background: transparent;
  border: 1px solid var(--line-2-c);
  color: var(--ink-c);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.dy-weeknav__arrow:hover,
.dy-weeknav__arrow:focus-visible { border-color: var(--accent-c); color: var(--accent-c); outline: none; }
.dy-weeknav__label { min-width: 200px; padding: 0 4px; }
.dy-weeknav__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-c);
}
.dy-weeknav__title:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 4px; }
.dy-weeknav__range { display: block; margin-top: 4px; font-size: 13px; color: var(--muted-c); }
.dy-weeknav__today {
  min-height: 48px;
  padding: 0 16px;
  background: transparent;
  border: 2px solid var(--ink-c);
  color: var(--ink-c);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.dy-weeknav__today:hover,
.dy-weeknav__today:focus-visible { background: var(--accent-c); border-color: var(--accent-c); color: var(--on-accent-c); outline: none; }
/* Already on this week: the button stays (it is where the eye looks for
   "where am I") but reads as settled. aria-pressed says the same. */
.dy-weeknav__today.is-on { border-color: var(--line-2-c); color: var(--muted-c); }
.dy-weeknav__today.is-on:hover { background: transparent; border-color: var(--line-2-c); color: var(--muted-c); cursor: default; }
.dy-totals { display: flex; gap: 32px; }
.dy-total__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.dy-total__value {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--ink-c);
}

/* ----- the grid: seven columns, Monday first ----- */
.dy-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-c);
  border: 1px solid var(--line-c);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2-c) var(--bg-alt-c);
}
.dy-col { display: flex; flex-direction: column; min-width: 0; background: var(--bg-c); }
.dy-col--skel { padding: 10px; gap: 8px; min-height: 200px; }
.dy-col__head {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 12px 12px 10px;
  background: var(--bg-alt-c);
  border: 0;
  border-top: 3px solid transparent;
  border-bottom: 1px solid var(--line-c);
  color: var(--text-c);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dy-col__head:hover,
.dy-col__head:focus-visible { color: var(--accent-c); outline: none; }
.dy-col__head:hover .dy-col__day,
.dy-col__head:focus-visible .dy-col__day { color: var(--accent-c); }
.dy-col__day {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-c);
}
.dy-col__sub { display: block; margin-top: 5px; font-size: 13px; color: var(--muted-c); }
/* Today: an amber rule across the head AND the word "Today" in it. */
.dy-col.is-today .dy-col__head { border-top-color: var(--accent-c); }
.dy-col.is-today .dy-col__day { color: var(--accent-c); }
.dy-col.is-closed .dy-col__sub { font-style: italic; }
.dy-col__body { display: flex; flex-direction: column; gap: 8px; padding: 10px; flex: 1 1 auto; }
.dy-col__empty { margin: 0; padding: 12px 11px; font-size: 13px; color: var(--muted-c); }
.dy-col__gone { margin: auto 0 0; padding: 8px 11px 2px; font-size: 12px; color: var(--muted-c); }

/* One thing on a day. Booking = amber rule on the left; seated = ink rule;
   private hire = amber all round; event = no rule, amber kicker. */
.dy-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  background: var(--panel-c);
  border: 1px solid var(--line-2-c);
  color: var(--text-c);
  font: inherit;
  text-align: left;
}
button.dy-item { cursor: pointer; }
button.dy-item:hover,
button.dy-item:focus-visible { border-color: var(--ink-c); outline: none; }
.dy-item--booking { border-left: 3px solid var(--accent-c); }
.dy-item--seated { border-left: 3px solid var(--ink-c); }
.dy-item--hire { border-color: var(--accent-c); }
button.dy-item--hire:hover,
button.dy-item--hire:focus-visible { border-color: var(--accent-hover-c); }
.dy-item__kicker {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.dy-item--seated .dy-item__kicker { color: var(--ink-c); }
.dy-item__line {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.05;
  color: var(--ink-c);
  overflow-wrap: anywhere;
}
.dy-item__who,
.dy-item__note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-c);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dy-item__note { margin-top: 3px; font-size: 12px; color: var(--muted-c); }
.dy-more {
  min-height: 44px;
  padding: 0 11px;
  background: transparent;
  border: 1px dashed var(--line-2-c);
  color: var(--muted-c);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.dy-more:hover,
.dy-more:focus-visible { color: var(--ink-c); border-color: var(--ink-c); outline: none; }

/* ----- the legend ----- */
.dy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--text-c);
}
.dy-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.dy-key {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex: 0 0 auto;
  background: var(--panel-c);
  border: 1px solid var(--line-2-c);
}
.dy-key--booking { border-left: 3px solid var(--accent-c); }
.dy-key--seated { border-left: 3px solid var(--ink-c); }
.dy-key--hire { border-color: var(--accent-c); }

/* ----- the day, when opened ----- */
.dy-daynav[hidden] { display: none; }
.dy-dayhead { margin-bottom: 1rem; }
.dy-dayhead__kicker {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-c);
}
.dy-dayhead__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-c);
}
.dy-dayhead__title:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 4px; }
.dy-dayevents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin-bottom: 1.2rem;
}
.dy-dayevents[hidden] { display: none; }

/* ----- the phone: a strip of days, one column at a time ----- */
.dy-strip { display: none; }
@media (max-width: 759px) {
  .dy-head { flex-direction: column; align-items: stretch; }
  .dy-weeknav__label { flex: 1 1 auto; min-width: 0; }
  .dy-totals { justify-content: space-between; }
  .dy-strip {
    display: flex;
    overflow-x: auto;
    border: 1px solid var(--line-c);
    border-bottom: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2-c) var(--bg-alt-c);
  }
  .dy-strip__day {
    flex: 1 0 56px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--bg-alt-c);
    border: 0;
    border-right: 1px solid var(--line-c);
    color: var(--text-c);
    font: inherit;
    cursor: pointer;
  }
  .dy-strip__day:last-child { border-right: 0; }
  .dy-strip__day:focus-visible { outline: 2px solid var(--accent-c); outline-offset: -3px; }
  .dy-strip__name { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; }
  .dy-strip__num { font-size: 13px; color: var(--muted-c); }
  /* The pressed day is solid amber; today, when it is not pressed, is an
     amber name. Both are also said by aria-pressed and the column head. */
  .dy-strip__day.is-on { background: var(--accent-c); color: var(--on-accent-c); }
  .dy-strip__day.is-on .dy-strip__num { color: var(--on-accent-c); font-weight: 700; }
  .dy-strip__day.is-today:not(.is-on) .dy-strip__name { color: var(--accent-c); }
  .dy-grid { display: block; overflow: visible; }
  .dy-col { display: none; }
  .dy-col.is-focus { display: flex; }
  .dy-col--skel { display: flex; }
  .dy-col--skel ~ .dy-col--skel { display: none; }
  .dy-col__head { min-height: 56px; }
}

/* ===== TIMESHEET — 05-timesheet =====
   Rostered against clocked. The variance is the one number on a row that is
   allowed to be loud, so everything else sits back: body-weight names, Anton
   figures at 21px, and a zero gap that is words rather than a number. The
   sign-off cards and the cost band are built only for the owner, so there is
   nothing here that hides a column — the band is absent, not blank. */

/* --- the range bar: arrows, the shortcut select, the three totals --- */
.ts-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  background: var(--bg-alt-c);
  border: 1px solid var(--line-c);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.ts-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ts-arrow {
  min-width: 48px;
  min-height: 48px;
  background: transparent;
  border: 1px solid var(--line-2-c);
  border-radius: 0;
  color: var(--ink-c);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ts-arrow:hover { border-color: var(--accent-c); color: var(--accent-c); }
.ts-arrow:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; }
.ts-range { min-width: 200px; }
.ts-range__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-c);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ts-range__sub { margin: 4px 0 0; font-size: 13px; color: var(--text-c); }
.ts-select {
  min-height: 48px;
  background: var(--bg-c);
  border: 1px solid var(--line-2-c);
  border-radius: 0;
  color: var(--ink-c);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 0 13px;
}
.ts-select:focus { outline: none; border-color: var(--accent-c); }
.ts-custom { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ts-custom .daynav__date { min-height: 44px; }
.ts-totals { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.ts-total__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-c);
  text-transform: uppercase;
}
.ts-total__value {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--ink-c);
}
.ts-total__value .ts-var { font-size: 26px; }
.ts-total__value .ts-calm { font-size: 15px; line-height: 26px; }
.ts-actions { justify-content: flex-end; margin-bottom: 1.4rem; }
.ts-actions .btn { min-height: 44px; }

/* --- "3 rows need a look" --- */
.ts-look {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  border-left: 4px solid var(--accent-c);
  padding: 15px 18px;
  margin: 0 0 22px;
}
.ts-look p { flex: 1 1 320px; margin: 0; font-size: 15px; color: var(--text-c); line-height: 1.6; }
.ts-look strong { color: var(--ink-c); }
.ts-look .btn { min-height: 44px; }

/* --- the sheet: one row per person, expand for punches --- */
.ts-scroll {
  border: 1px solid var(--line-c);
  background: var(--bg-c);
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2-c) var(--bg-alt-c);
}
.ts-sheet { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 15px; }
.ts-sheet th {
  background: var(--bg-alt-c);
  border-bottom: 1px solid var(--line-2-c);
  padding: 13px 14px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-c);
  text-transform: uppercase;
}
.ts-sheet td {
  padding: 18px 14px;
  border-bottom: 1px solid var(--line-c);
  vertical-align: middle;
  color: var(--text-c);
}
.ts-sheet th.ts-num, .ts-sheet td.ts-num { text-align: right; white-space: nowrap; }
.ts-sheet td.ts-num { font-family: var(--font-display); font-size: 21px; color: var(--ink-c); }
.ts-sub { display: block; font-family: var(--font-body); font-size: 13px; color: var(--muted-c); margin-top: 3px; }
.ts-sub--bad { color: var(--bad); }
.ts-row { cursor: pointer; }
.ts-row:hover td { background: rgba(245, 241, 232, 0.04); }
.ts-row.is-open td { background: var(--panel-c); }
.ts-caretcell { width: 56px; padding: 8px 6px !important; text-align: center; }
.ts-caret {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--muted-c);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ts-caret:hover, .ts-row.is-open .ts-caret { color: var(--accent-c); }
.ts-caret:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; }
.ts-person__name { display: block; font-size: 16px; color: var(--ink-c); }
.ts-person__sub { display: block; font-size: 13px; color: var(--text-c); margin-top: 3px; }

/* The variance. Anton, amber in both directions, scaled by how much it
   matters: 26px for minutes, 32px for hours. Zero is calm body text. */
.ts-var { font-family: var(--font-display); color: var(--accent-c); line-height: 1; white-space: nowrap; }
.ts-var--m { font-size: 26px; }
.ts-var--h { font-size: 32px; }
.ts-calm { font-family: var(--font-body); font-size: 15px; color: var(--text-c); white-space: nowrap; }

.ts-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ts-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-2-c);
  padding: 5px 9px;
  font-size: 13px;
  color: var(--text-c);
  white-space: nowrap;
}
.ts-chip--bad { border-color: var(--bad); color: var(--ink-c); }
.ts-chip--bad svg { color: var(--bad); }
.ts-chip--warn { border-color: var(--accent-c); color: var(--ink-c); }
.ts-chip--ok { color: var(--text-c); }
.ts-chip--ok svg { color: var(--ok); }
.ts-chip svg, .ts-line svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.8; }

.ts-sheet tfoot td { background: var(--bg-alt-c); border-bottom: 0; }
.ts-count {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-c);
  text-transform: uppercase;
  white-space: nowrap;
}
.ts-sheet tfoot td.ts-num { font-size: 22px; }
.ts-sheet tfoot .ts-var--m { font-size: 28px; }
.ts-sheet tfoot .ts-var--h { font-size: 28px; }
.ts-pct { font-size: 14px; color: var(--text-c); }

/* --- every punch, inside the opened row --- */
.ts-punches td {
  padding: 22px 20px 24px;
  background: var(--bg-alt-c);
  border-bottom: 1px solid var(--line-2-c);
  cursor: default;
}
.ts-punches .eyebrow { margin-bottom: 16px; }
.ts-ptable { width: 100%; border-collapse: collapse; border: 1px solid var(--line-c); font-size: 15px; }
.ts-ptable th {
  background: var(--panel-c);
  border-bottom: 1px solid var(--line-c);
  padding: 11px 13px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-c);
  text-transform: uppercase;
}
.ts-ptable td {
  padding: 15px 13px;
  border-bottom: 1px solid var(--line-c);
  vertical-align: top;
  color: var(--text-c);
  background: transparent;
  cursor: default;
}
.ts-ptable tr:last-child td { border-bottom: 0; }
.ts-ptable td.ts-day { color: var(--ink-c); white-space: nowrap; }
.ts-ptable td.ts-time { font-family: var(--font-display); font-size: 19px; color: var(--ink-c); white-space: nowrap; }
.ts-ptable td.ts-time .ts-calm { font-size: 19px; }
.ts-ptable th.ts-num, .ts-ptable td.ts-num { text-align: right; white-space: nowrap; }
.ts-ptable td.ts-worked { font-family: var(--font-display); font-size: 19px; color: var(--ink-c); }
.ts-lines { display: flex; flex-direction: column; gap: 7px; }
.ts-line { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-c); }
.ts-line--bad { color: var(--ink-c); }
.ts-line--bad svg { color: var(--bad); }
.ts-line--warn { color: var(--ink-c); }
.ts-line--ok svg { color: var(--ok); }
.ts-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.ts-tools .btn { min-height: 44px; white-space: nowrap; }
.ts-punches__note { margin: 16px 0 0; font-size: 14px; color: var(--text-c); line-height: 1.7; max-width: 88ch; }

/* --- sign-off: owner only --- */
.ts-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.ts-card {
  background: var(--bg-alt-c);
  border: 1px solid var(--line-c);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ts-card--wait { border-color: var(--accent-c); }
.ts-card > svg { flex: 0 0 auto; fill: none; stroke: var(--ok); stroke-width: 3; }
.ts-card__body { flex: 1 1 200px; }
.ts-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-c);
  text-transform: uppercase;
}
.ts-card__sub { margin: 7px 0 0; font-size: 14px; color: var(--text-c); line-height: 1.5; }
.ts-card .btn { min-height: 52px; }

/* --- the cost band: one bordered region with its own amber header, so
   removing it for a manager takes the whole thing and leaves no gap --- */
.ts-band { border: 1px solid var(--accent-c); background: var(--bg-alt-c); margin: 0 0 24px; }
.ts-band__head {
  background: var(--accent-c);
  color: var(--on-accent-c);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}
.ts-band__head svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.6; }
.ts-band__title { font-family: var(--font-display); font-size: 19px; text-transform: uppercase; letter-spacing: 0.06em; }
.ts-band__warn { font-size: 14px; font-weight: 500; }
.ts-band__scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-2-c) var(--bg-alt-c); }
.ts-band table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.ts-band th {
  border-bottom: 1px solid var(--line-2-c);
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-c);
  text-transform: uppercase;
}
.ts-band td { padding: 15px 16px; border-bottom: 1px solid var(--line-c); color: var(--text-c); }
.ts-band th.ts-num, .ts-band td.ts-num { text-align: right; white-space: nowrap; }
.ts-band td.ts-name { color: var(--ink-c); font-size: 16px; }
.ts-band td.ts-cost { font-family: var(--font-display); font-size: 20px; color: var(--ink-c); }
.ts-band td.ts-vs { font-family: var(--font-display); font-size: 19px; color: var(--accent-c); }
.ts-band tfoot td { border-bottom: 0; }
.ts-band tfoot td.ts-cost { font-size: 24px; }
.ts-band tfoot td.ts-vs { font-size: 22px; }
.ts-band__foot {
  border-top: 1px solid var(--line-2-c);
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-c);
  margin: 0;
}
.ts-band__foot .btn { min-height: 44px; }
.ts-band__foot .linkish { font-size: 14px; }

.ts-note { margin: 0 0 18px; font-size: 14px; color: var(--muted-c); }
.ts-empty .btn { margin-top: 12px; min-height: 44px; }

@media (max-width: 759px) {
  .ts-range__title { font-size: 22px; }
  .ts-totals { width: 100%; justify-content: space-between; gap: 12px; }
  .ts-total__value { font-size: 22px; }
  .ts-total__value .ts-var { font-size: 22px; }
  .ts-card .btn { width: 100%; }
}


/* ============================================================
   MY SHIFTS — 07-my-shifts
   What somebody opens on their own phone at the start of a shift.
   The next shift is the only amber-bordered card on the page and
   the time is the largest thing on it (64px, 38px on a phone);
   then the week as seven rows, tonight's checklist, and hours.
   Hours, never money. Nothing rounded, no gradients, no shadows.
   ============================================================ */

.ms { display: flex; flex-direction: column; gap: 24px; }
.ms-top { margin-bottom: 24px; }
.ms-top .notice { margin: 0; }

/* ----- the card everything else hangs under ----- */
.ms-card {
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  padding: 26px 24px;
}
.ms-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ms-card__head--tight { margin-bottom: 8px; }
.ms-card__meta { font-size: 14px; color: var(--text-c); }
.ms-card__count {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--ink-c);
}
.ms-card__lede { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--text-c); }
.ms-card__lede:last-child { margin-bottom: 0; }

/* ----- the next shift: one amber border on the whole page ----- */
.ms-next { background: var(--panel-c); border: 1px solid var(--accent-c); }
.ms-next__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--accent-c);
  color: var(--on-accent-c);
}
.ms-next__kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; }
.ms-next__until { font-size: 14px; font-weight: 500; }
.ms-next__body { padding: 28px 24px; }
.ms-next__day {
  margin: 0;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-c);
}
.ms-next__time {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.96;
  color: var(--accent-c);
}
.ms-next__lede { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-c); }
.ms-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line-2-c);
  background: var(--bg-c);
  font-size: 16px;
  color: var(--ink-c);
}
/* The job carries the one amber mark; the rest are plain. */
.ms-chip--job::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--accent-c); }
.ms-chip--soft { color: var(--text-c); }
.ms-next__note {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--line-2-c);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-c);
  white-space: pre-line;
}
/* Words first, colour second: every flag says what is wrong. */
.ms-flag { margin: 14px 0 0; font-size: 14px; color: var(--bad); }
.ms-next__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.ms-next__actions:empty { display: none; }
.ms-next__go.btn,
.ms-next__cant.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 22px;
}
/* The one thing this page is opened to press. */
.ms-next__go.btn { flex: 1 1 220px; font-size: 24px; letter-spacing: 0.06em; }
.ms-next__cant.btn { flex: 0 1 auto; font-size: 17px; }
.ms-next__quiet { margin: 16px 0 0; font-size: 14px; color: var(--text-c); }
.ms-quiet.linkish { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-c); }
.ms-next__hint { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-c); }
.ms-next__photo { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted-c); }

/* ----- the week: seven rows, never a blank one ----- */
.ms-rows { display: flex; flex-direction: column; }
.ms-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-c);
}
.ms-row:last-child { border-bottom: 0; }
.ms-row__day {
  flex: 0 0 auto;
  width: 64px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-c);
}
.ms-row__day--long { width: 110px; }
.ms-row.is-past .ms-row__day,
.ms-row.is-absent .ms-row__day,
.ms-row.is-unknown .ms-row__day { color: var(--muted-c); }
.ms-row.is-now .ms-row__day { color: var(--accent-c); }
.ms-row__what {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.ms-row__time { font-family: var(--font-display); font-size: 21px; line-height: 1; color: var(--ink-c); }
.ms-row__sec,
.ms-row__off { font-size: 16px; color: var(--text-c); }
.ms-row__tag { flex: 0 1 auto; max-width: 100%; font-size: 14px; color: var(--text-c); }
.ms-row__tag--now {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--accent-c);
  color: var(--on-accent-c);
}
/* The current shift's row bleeds to the card edge: the one dark band. */
.ms-row.is-now {
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  background: var(--bg-c);
}

/* ----- the checklist ----- */
.ms-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ms-task__label {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 0 16px;
  background: var(--bg-c);
  border: 1px solid var(--line-2-c);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.ms-task__label:hover { border-color: var(--accent-c); }
/* Done is three signals — a filled box, a tick, a green border — because
   the phone gets used with one hand and colour alone is not a signal. */
.ms-task.is-done .ms-task__label { border-color: var(--ok); }
.ms-task__box {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  margin: 0;
  border: 2px solid var(--line-2-c);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.ms-task__box:checked {
  border-color: var(--ok);
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101010' stroke-width='3.4'%3E%3Cpath d='M4 13l5 5L20 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.ms-task__box:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; }
.ms-task__box:disabled { opacity: 0.6; cursor: wait; }
.ms-task__text { flex: 1 1 auto; font-size: 16px; line-height: 1.4; color: var(--ink-c); }
.ms-task__when { flex: 0 0 auto; font-size: 13px; color: var(--text-c); }
.ms-task__when:empty { display: none; }

/* ----- hours: hours only, whoever is looking ----- */
.ms-hours__grid { display: flex; flex-direction: column; }
.ms-hours__block { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line-c); }
.ms-hours__block:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.ms-hours__label { margin: 0; font-size: 14px; color: var(--text-c); }
.ms-hours__big {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 0.96;
  color: var(--ink-c);
}
.ms-hours__sub { margin: 8px 0 0; font-size: 14px; color: var(--text-c); }
.ms-hours__grid + .ms-card__lede { margin-top: 16px; }
.ms-hours__foot { margin: 22px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-c); }

/* ----- nothing this week ----- */
.ms-empty {
  margin-bottom: 24px;
  padding: 34px 22px;
  border: 1px solid var(--line-c);
  background: var(--panel-c);
  text-align: center;
}
.ms-empty__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--ink-c);
}
.ms-empty__lede { margin: 14px auto 0; max-width: 34ch; font-size: 15px; line-height: 1.65; color: var(--text-c); }
.ms-empty__foot { margin-top: 18px; font-size: 14px; color: var(--text-c); }
.ms-empty__foot:empty { display: none; }

/* ----- the camera dialog ----- */
.ms-cam__lede { line-height: 1.6; }
.ms-cam__actions .btn { min-height: 52px; }

/* ----- two columns from 900px: what is next on the left, hours on the
   right. The panel itself is the grid and #myShifts dissolves into it,
   so the hours card can sit beside the next-shift card without the two
   loaders having to share a container. Dense packing lets the hours
   card start on whatever row the left column is at. ----- */
@media (min-width: 900px) {
  .ms-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
    grid-auto-flow: row dense;
    gap: 24px;
    align-items: start;
  }
  .ms-panel > .panel__bar,
  .ms-panel > .panel__error { grid-column: 1 / -1; margin-bottom: 0; }
  .ms-panel > .ms-top,
  .ms-panel > .ms-empty { grid-column: 1; margin-bottom: 0; }
  .ms { display: contents; }
  .ms-week,
  .ms-list,
  .ms-later { grid-column: 1; }
  .ms-hours { grid-column: 2; grid-row: span 3; }
}

/* ----- the phone: one column, the time still the biggest thing ----- */
@media (max-width: 559px) {
  .ms { gap: 14px; }
  .ms-top,
  .ms-empty { margin-bottom: 14px; }
  .ms-card { padding: 14px; }
  .ms-card__head { margin-bottom: 12px; }
  .ms-next__bar { padding: 9px 14px; }
  .ms-next__kicker { letter-spacing: 0.2em; }
  .ms-next__body { padding: 16px 14px; }
  .ms-next__day { font-size: 24px; line-height: 1; }
  .ms-next__time { font-size: 38px; line-height: 1; margin-top: 8px; }
  .ms-chips { gap: 8px; margin-top: 10px; }
  .ms-chip { min-height: 36px; padding: 0 10px; font-size: 15px; }
  .ms-next__note { margin-top: 14px; }
  .ms-next__actions { margin-top: 16px; gap: 10px; }
  .ms-next__go.btn { flex-basis: 100%; font-size: 22px; }
  /* Quieter under the big button, as on the canvas, but still a button. */
  .ms-next__cant.btn {
    flex-basis: 100%;
    min-height: 48px;
    font-size: 15px;
    border-width: 1px;
    border-color: var(--line-2-c);
    color: var(--text-c);
  }
  .ms-row { gap: 12px; padding: 11px 0; }
  .ms-row__day { width: 58px; font-size: 15px; }
  .ms-row__day--long { width: 100px; }
  .ms-row__time { font-size: 17px; }
  .ms-row__sec,
  .ms-row__off,
  .ms-row__tag { font-size: 14px; }
  .ms-row.is-now { margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
  .ms-task__label { gap: 12px; padding: 0 13px; }
  .ms-task__box { width: 22px; height: 22px; }
  .ms-task__text { font-size: 15px; }
  /* Two figures side by side, as on the canvas. */
  .ms-hours__grid { flex-direction: row; flex-wrap: wrap; gap: 14px 28px; }
  .ms-hours__block { flex: 1 1 140px; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
  .ms-hours__label { font-size: 13px; }
  .ms-hours__big { font-size: 34px; line-height: 1; margin-top: 4px; }
  .ms-hours__sub { font-size: 13px; }
  .ms-empty { padding: 30px 18px; }
  .ms-empty__title { font-size: 26px; line-height: 1; }
  .ms-cam__actions .btn { flex: 1 1 100%; }
}

/* ---- Google Calendar: what came from there, and what disagrees with it ---- */
.dy-item--google { border-left: 3px solid var(--accent-c); }
.dy-item__clash,
.bk-card__clash {
  display: block;
  margin-top: 6px;
  padding: 4px 8px;
  font: 600 12px/1.35 var(--font-body);
  letter-spacing: .02em;
  color: var(--ink-c);
  background: var(--accent-c);
  text-align: left;
}
.bk-card__clash { margin: 8px 0 0; }
.gcal__lead,
.gcal__note { margin: 0 0 16px; color: var(--text-c); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.gcal__missing { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.gcal__missing:empty { display: none; }
.gcal__missing li { padding: 8px 12px; border: 1px solid var(--bad); color: var(--text-c); font-size: 14px; }
.gcal__missing li::before { content: 'Still to do · '; color: var(--bad); font-weight: 700; }
.gcal__steps { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 12px; color: var(--text-c); font-size: 15px; line-height: 1.5; }
.gcal__steps code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--bg-alt-c); padding: 1px 5px; }

/* ----- Show / hide on the password boxes (sign in, choose a password) -----
   The box keeps its full width; the button sits inside its right edge in the
   same small caps as the badges, and turns amber while the password is on
   show. js/staff.js flips the box and the button's label together. */
.field__secret { position: relative; }
.field__secret input { padding-right: 5.4rem; }
.field__reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 6px 10px;
  border: 1px solid var(--line-2-c);
  border-radius: 0;
  background: transparent;
  color: var(--muted-c);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.field__reveal:hover,
.field__reveal[aria-pressed="true"] { color: var(--accent-c); border-color: var(--accent-c); }
.field__reveal:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; }

/* ----- Payslips (§4.8j): paper on a dark screen, and the print -----
   The document itself is light on white so it reads the same on screen, in
   print and as a PDF; everything around it keeps the portal's dark chrome. */
.ps-viewer { margin-top: 26px; border: 1px solid var(--line-c); background: var(--bg-alt-c); }
.ps-viewer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line-c);
}
.ps-viewer__title { font-weight: 700; color: var(--ink-c); }
.ps-viewer__tools { display: flex; gap: 10px; }
.ps-issued { color: var(--ok); white-space: nowrap; }
.ps-void { color: var(--bad); }
.ps-doc {
  position: relative; max-width: 800px; margin: 20px auto; padding: 34px 38px;
  background: #fff; color: #111; font-family: var(--font-body); font-size: 14px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.ps-doc__head {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px solid #111;
}
.ps-doc__employer strong { display: block; font-size: 18px; color: #111; }
.ps-doc__employer div { color: #333; }
.ps-doc__title { text-align: right; }
.ps-doc__title h2 {
  margin: 0; font-family: var(--font-display); font-size: 34px; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase; color: #111;
}
.ps-doc__title p { margin: 4px 0 0; font-size: 13px; color: #333; }
.ps-doc__who { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 18px; }
.ps-kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 13px; }
.ps-kv dt { color: #555; }
.ps-kv dd { margin: 0; font-weight: 600; color: #111; overflow-wrap: anywhere; }
.ps-doc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 14px; }
.ps-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; color: #111; }
.ps-tbl th, .ps-tbl td { padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left; vertical-align: top; color: #111; }
.ps-tbl th { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #555; border-bottom: 1px solid #111; }
.ps-tbl .ps-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-tbl tfoot td { font-weight: 700; border-top: 2px solid #111; border-bottom: 0; }
.ps-net {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 6px 0 16px; padding: 12px 14px; background: #111; color: #fff;
}
.ps-net__label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.ps-net__value { font-family: var(--font-display); font-size: 30px; color: #fff; }
.ps-doc__section { margin-top: 12px; }
.ps-doc__section h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #555; }
.ps-hours { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #111; }
.ps-hours span { white-space: nowrap; }
.ps-doc__foot { margin-top: 18px; padding-top: 10px; border-top: 1px solid #ddd; font-size: 11.5px; color: #444; }
.ps-doc__foot p { margin: 0 0 6px; color: #444; }
.ps-doc__warn { color: #9a1b1b; font-weight: 600; }
.ps-stamp {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%) rotate(-6deg); padding: 6px 12px;
  border: 3px solid #9a1b1b; color: #9a1b1b; font-family: var(--font-display); font-size: 22px;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; pointer-events: none;
}
.ps-stamp--preview { border-color: #8a6d00; color: #8a6d00; }
.ps-print { display: none; }
@media (max-width: 640px) {
  .ps-doc { padding: 22px 18px; }
  .ps-doc__who, .ps-doc__grid { grid-template-columns: 1fr; }
  .ps-doc__title { text-align: left; }
}
@media print {
  body.is-printing-payslip > *:not(#payslipPrint) { display: none !important; }
  body.is-printing-payslip #payslipPrint { display: block !important; }
  .ps-print .ps-doc { box-shadow: none; margin: 0 auto; max-width: none; page-break-after: always; break-after: page; }
  .ps-print .ps-doc:last-child { page-break-after: auto; break-after: auto; }
  .ps-stamp { opacity: 1; }
  @page { margin: 12mm; }
}

/* ============================================================
   FORM DIALOG FOOTER — the Save row you cannot scroll away from
   ============================================================
   The Edit-member form is taller than .modal__panel at every size (a
   1366×768 laptop puts Save about 360px below the fold, a phone further),
   so after changing the Role the only button in view was the full-width
   "Send the invitation again" — an owner changed a role, closed the dialog
   and nothing was saved (2026-09-14). The message + button row is now
   .form-foot, stuck to the bottom of the scrolling panel while the fields
   scroll underneath it. Opt-in per form: the four .form-grid dialogs in
   staff.html (member, add booking, clock entry, leave) use it. */
.form-foot {
  grid-column: 1 / -1;
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 14px 0 24px;
  background: var(--panel-c);
  border-top: 1px solid var(--line-c);
}
.form-foot .addForm__msg { min-height: 0; margin: 0; }
.form-foot .addForm__msg:not(:empty) { margin-bottom: 10px; }
.form-foot .form-actions { margin-top: 0; }
/* The panel gives its bottom padding to the footer: Chromium pins a sticky
   box inside the scroll container's CONTENT box, so with the padding left on
   the panel the row stopped 32px short of the edge with fields scrolling past
   underneath it. And tabbing into the last field must scroll it into view
   ABOVE the footer, not underneath it. */
.modal__panel:has(.form-foot) { padding-bottom: 0; scroll-padding-bottom: 160px; }
@media (max-width: 480px) {
  /* Buttons share a row where they fit (Save | Cancel) and anything that
     does not fit takes the next row full-width — three stacked full-width
     buttons would pin a third of a phone screen. */
  .form-foot .form-actions button.btn { width: auto; flex: 1 1 auto; }
}

/* Open shift requests, shared by My shifts and the manager rota. */
.ms-offers, .rg-offers { margin-top: 24px; padding: 20px; border: 1px solid var(--line-c); border-radius: 12px; background: var(--panel-c); }
.ms-offers h3, .rg-offers h3 { margin: 0 0 10px; }
.ms-offers h4 { margin: 22px 0 10px; }
.shift-offer-card { margin-top: 10px; padding: 14px; border: 1px solid var(--line-c); border-radius: 8px; }
.shift-offer-card p { margin: 0 0 8px; }
.shift-offer-card__title { font-weight: 700; }
.shift-offer-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.shift-offer-setting { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.shift-offer-setting p { margin: 0; }


/* ---- Booking hours (Bookings tab, managers and the owner): the times the
   website sells, day by day, with the grid each row produces under it.
   Markup is built by js/staff.js (hoursRenderDays). ---- */
.hrs-lede { margin: 0 0 18px; color: var(--muted-c); font-size: 14px; line-height: 1.5; }
.hrs-lede #hoursMeta { color: var(--ink-c); }
.hrs-days { display: grid; gap: 0; margin-bottom: 14px; }
.hrs-row {
  display: grid;
  grid-template-columns: 150px repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: end;
  padding: 12px 0;
  border-top: 1px solid var(--line-c);
}
.hrs-row:first-child { border-top: 0; padding-top: 0; }
.hrs-row__day { align-self: center; min-width: 0; }
.hrs-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.hrs-toggle input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--accent-c); }
.hrs-toggle__words { display: flex; flex-direction: column; min-width: 0; }
.hrs-toggle__name { font-weight: 700; color: var(--ink-c); }
.hrs-toggle__state { font-size: 12px; color: var(--muted-c); }
.hrs-row.is-closed .hrs-toggle__state { color: var(--bad); }
.hrs-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hrs-cell__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-c); }
.hrs-cell input,
.hrs-date input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line-2-c);
  border-radius: 0;
  background: var(--panel-c);
  color: var(--ink-c);
  font: inherit;
  font-size: 16px;
  color-scheme: dark;
}
.hrs-cell input:focus-visible,
.hrs-date input:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 1px; }
.hrs-row.is-closed .hrs-cell { opacity: 0.4; }
.hrs-row__preview { grid-column: 2 / -1; margin: 0; font-size: 13px; color: var(--muted-c); }
.hrs-row__preview.is-bad { color: var(--bad); }
.hrs-help { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--muted-c); }
.hrs-help strong { color: var(--ink-c); }
.hrs-grid { margin-bottom: 8px; }
.hrs-closed { margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.hrs-closed legend { margin-bottom: 6px; padding: 0; font-weight: 700; color: var(--ink-c); }
.hrs-date { display: grid; grid-template-columns: 170px minmax(0, 1fr) 44px; gap: 8px; align-items: center; margin-bottom: 8px; }
.hrs-date__remove {
  min-height: 44px;
  border: 1px solid var(--line-2-c);
  background: transparent;
  color: var(--muted-c);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.hrs-date__remove:hover,
.hrs-date__remove:focus-visible { color: var(--bad); border-color: var(--bad); outline: none; }
@media (max-width: 720px) {
  .hrs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hrs-row__day,
  .hrs-row__preview { grid-column: 1 / -1; }
  .hrs-date { grid-template-columns: minmax(0, 1fr) 44px; }
  .hrs-date__reason { grid-column: 1 / -1; }
}