/* schedule.css — the employee schedule page (/schedule).

   Mobile-FIRST: staff open this on their own phones from home. Base styles
   target a ~375px portrait phone; the shared .lobby cap (680px) keeps it
   civilized on desktop. Loads after neutral.css (the shared warm-neutral
   system + theme toggle — 2026-08-31 rework) and leans on its tokens.
   home.css (the kiosk's CRT sheet) is no longer loaded here. */

/* ---------------------------------------------------------------- login */
.sched-login { max-width: 340px; margin: 0 auto; }
.login-hint { font-size: 13.5px; margin-bottom: 18px; }

.pin-display { display: flex; justify-content: center; gap: 14px; margin: 8px 0 20px; }
.pin-display .slot {
  width: 44px; height: 54px; border: 1px solid var(--l); background: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 26px; color: var(--i);
}
.pin-display .slot.filled::after { content: "*"; margin-top: 10px; }
.pin-display.checking .slot { animation: slot-scan 1s linear infinite; }
@keyframes slot-scan { 50% { border-color: var(--a); } }
@media (prefers-reduced-motion: reduce) {
  .pin-display.checking .slot { animation: none; border-color: var(--a); }
}

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad .key {
  padding: 16px 0; font-size: 20px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  border: 1px solid var(--l); background: var(--r);
  color: var(--i); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s, transform .12s var(--ease-out);
}
.keypad .key:active { background: var(--i); color: var(--c); transform: scale(.96); }
.keypad .key-clear, .keypad .key-back { color: var(--a); font-size: 15px; }
.keypad .key-clear:active, .keypad .key-back:active { background: var(--a); color: var(--c); }
@media (prefers-reduced-motion: reduce) { .keypad .key:active { transform: none; } }

.login-msg { margin-top: 16px; font-size: 13.5px; text-align: center; }
.login-msg.err { color: var(--err); }
.login-msg.warn { color: var(--a); }

/* ----------------------------------------------------------- next shift */
/* Stacked, arrival time first: the panel answers "when do I leave the house",
   so BE HERE is the biggest thing in it and the showtime is supporting detail. */
.next-panel { margin-bottom: 14px; }
.next-body { font-size: 15px; }
.next-body .nb-when { display: block; color: var(--m); font-size: 13px; letter-spacing: 1px; }
.next-body .nb-call {
  display: block; color: var(--a); font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 21px; margin: 4px 0 3px;
}
.next-body .nb-line { display: block; }
.next-body .nb-title { color: var(--i); font-weight: 600; font-size: 16px; }
.next-body .nb-showtime { color: var(--m); font-size: 13px; margin-left: 7px; }

.sched-hint { color: var(--m); font-size: 13.5px; margin: 0 2px 14px; line-height: 1.65; }
.sched-hint .hint-cant, .sched-hint .hint-star { color: var(--a); }
.sched-hint .ph { width: 15px; height: 15px; vertical-align: -2px; }

.sched-banner {
  border: 1px solid var(--a); color: var(--a); background: var(--a-soft);
  padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px;
}

.cal-loading { padding: 20px 2px; }

/* ------------------------------------------------------------ day cards */
.day { border: 1px solid var(--l); background: var(--r); margin-bottom: 10px; }

.day-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
}
.day-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; letter-spacing: 2px; color: var(--m); font-weight: 500;
}
.day.has-items .day-date { color: var(--i); }
.day-date .today-tag {
  color: var(--a); border: 1px solid var(--a);
  font-size: 10.5px; padding: 0 5px; margin-left: 8px; letter-spacing: 1px;
}

/* ----------------------------------------------------------- shift rows */
.item { border-top: 1px solid var(--l-soft); padding: 13px 12px; }
/* Your own shift: a full green outline + tint — green is the "you" color.
   A full border, deliberately not a side-tab stripe: same call as the
   original CRT design (DESIGN.md §9, 2026-07-28 — "inset box-shadow border,
   NOT a side-tab accent"). */
.item.mine { background: var(--g-soft); box-shadow: inset 0 0 0 1px var(--g); }

.item-top { display: flex; align-items: baseline; gap: 10px; }
.item-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--a); font-weight: 500; white-space: nowrap; font-size: 15px;
}
.item-title { color: var(--i); font-weight: 600; font-size: 16px; min-width: 0; overflow-wrap: anywhere; flex: 1; }
.item-tix {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--g); white-space: nowrap; font-size: 12.5px;
}

.item-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 1px; padding: 0 5px; white-space: nowrap;
  border: 1px solid var(--l); color: var(--m);
}
.item-tag.event { border-color: var(--a); color: var(--a); }
.item-tag.tbc { border-color: var(--a); color: var(--a); }
.item-tag.cancel { border-color: var(--a); color: var(--a); font-weight: 700; }
/* A cancelled show reads dead at a glance: struck title, dimmed row. */
.item.cancelled .item-title { text-decoration: line-through; }
.item.cancelled .item-title, .item.cancelled .item-time { opacity: .55; }
/* Today's already-started items dim — no strike (that means cancelled). */
.item.past { opacity: .5; }

/* Add-to-calendar: amber = action, bordered chips so a thumb finds them.
   Monochrome Apple / Google marks keep both on ONE line (Phill, 2026-08-21). */
.cal-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 9px; }
.cal-row .lbl { color: var(--m); }
.cal-link {
  color: var(--a); border: 1px solid var(--a);
  width: 44px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-link .brand { width: 16px; height: 16px; display: block; }
.cal-link:active { background: var(--a); color: var(--c); }

/* Call time. Amber, because this is the number staff actually act on. */
.item-call { color: var(--a); font-size: 13.5px; margin-top: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; }
.item-call .call-lbl { color: var(--m); font-family: 'Libre Franklin', sans-serif; }
.item-call .call-prev { color: var(--a); font-size: 11px; }

.item-notes { color: var(--m); font-size: 13.5px; margin-top: 4px; }

.item-body { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; }
.item-people { flex: 1; min-width: 0; }

.workers { font-size: 14px; color: var(--i); }
.workers .lbl { color: var(--m); }
.workers .you { color: var(--i); font-weight: 700; }
.workers.none { color: var(--m); }

.youre-on {
  display: inline-block; margin-bottom: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--c); background: var(--g); font-weight: 700;
  font-size: 11px; letter-spacing: 2px; padding: 2px 7px;
}

/* WHO ELSE WANTS IT — folded away by default (Phill, 2026-08-31: useful when
   you need a cover, clutter the rest of the time). The button is the whole
   line; tapping unfolds the names. Rows nobody wants render nothing at all. */
.wants-line { margin-top: 9px; font-size: 13px; }
.wants-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--m); font-size: 13px; -webkit-tap-highlight-color: transparent;
}
.wants-btn .chev {
  display: inline-block; width: 0; height: 0; margin-right: 6px; vertical-align: 1px;
  border-left: 5px solid var(--m); border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .12s var(--ease-out);
}
.wants-line.open .wants-btn .chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .wants-btn .chev { transition: none; } }
.wants-names { display: none; color: var(--i); }
.wants-line.open .wants-names { display: inline; }

/* The two per-shift toggles: I WANT THIS ONE (star) + CAN'T WORK (ban).
   Same square chip, told apart by glyph; amber when on. */
.want-btn, .cant-btn {
  flex-shrink: 0; width: 46px; height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--l); background: transparent;
  color: var(--m); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s, transform .12s var(--ease-out);
}
.want-btn .ph, .cant-btn .ph { width: 22px; height: 22px; }
.want-btn:active, .cant-btn:active { transform: scale(.94); }
.want-btn.on, .cant-btn.on {
  border-color: var(--a); color: var(--a); background: var(--a-soft);
}
.want-btn[disabled], .cant-btn[disabled] { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .want-btn:active, .cant-btn:active { transform: none; }
}

/* The you-marked-it note under a row whose CAN'T WORK toggle is on. */
.item-cant-note { color: var(--a); font-size: 13px; margin-top: 8px; }

.retry-btn {
  font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--a); background: var(--a);
  color: var(--c); padding: 14px 18px; margin-top: 12px; cursor: pointer; width: 100%;
}
.retry-btn:active { opacity: .85; }

/* ------------------------------------------------------------- the crew */
/* Reference info, not news: the phone list lives at the bottom, after the
   agenda (Phill's placement pick, 2026-08-31). Names + tap-to-call numbers,
   straight from the roster; no number on file = not listed. */
.crew-panel { margin-top: 18px; }
.crew-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--l-soft); font-size: 14.5px;
}
.crew-row:first-child { border-top: none; }
.crew-name { font-weight: 600; }
.crew-tel {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px; color: var(--a); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.crew-note { font-size: 12.5px; margin-top: 10px; line-height: 1.5; }

/* --- Text reminders switch -------------------------------------------- */
/* A setting, not news — findable when someone goes looking, invisible the
   rest of the time. Sits below the crew list at the very bottom.

   TWO MODES (Phill, 2026-09-01). For somebody already enrolled — which after
   the manager enrolment is the whole crew — schedule.js hides the number field
   and the disclosure, leaving the tick, its label and one line of note. That
   is the common case, so the panel is usually three short lines. The full
   form below is what a NOT-yet-enrolled person sees, and it is the one the
   carrier reviewer checks; every rule in it still applies unchanged. */
.texts-panel { margin-top: 14px; }
/* The phone field the carrier checker requires on the SAME form as the
   consent box (2026-08-31, second objection): number + tick, one form, one
   person, one moment. Splitting them re-breaks the campaign — the template
   comment and a test both pin this. Mono digits; 16px so iOS never zooms;
   amber focus like every input in the system. */
.texts-phone-row { display: block; margin-bottom: 12px; }
.texts-phone-label {
  display: block; margin-bottom: 5px;
  font-weight: 600; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--m);
}
.texts-panel input[type="tel"] {
  display: block; width: 100%; padding: 9px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px;
  background: var(--c); border: 1px solid var(--l); color: var(--i);
}
.texts-panel input[type="tel"]:focus { outline: none; border-color: var(--a); }
.texts-panel input[type="tel"]::placeholder { color: var(--m); opacity: .6; }
.texts-err { color: var(--err); font-size: 13px; margin-bottom: 10px; }
.texts-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 0; }
.texts-row input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--g);
  flex: 0 0 auto; cursor: pointer;
}
/* A disabled switch means we have no number for this person — it must not
   read as "you turned this off", so the whole row dims together. */
.texts-row input[type="checkbox"]:disabled { cursor: default; opacity: .45; }
.texts-row:has(input:disabled) { cursor: default; }
.texts-row:has(input:disabled) .texts-label { color: var(--m); opacity: .7; }
.texts-label { font-size: 14.5px; }
.texts-note { margin-top: 8px; font-size: 13px; line-height: 1.5; }

/* Wider screens: same agenda, a little more breathing room. */
@media (min-width: 700px) {
  .day-head { padding: 12px 16px; }
  .item { padding: 14px 16px; }
  .item-time { font-size: 16px; }
  .item-title { font-size: 17px; }
}

/* The disclosure sits under the box whenever the box is a DECISION — it is the
   thing being agreed to, so it can't be behind a link or revealed only after
   ticking. It is hidden only for somebody already enrolled, for whom the box
   is an off switch rather than a decision, and it returns the instant they
   switch off. (Duplicate copy of this comment removed 2026-09-01.)
   No sibling links rule: policy/terms links were removed from this panel on
   2026-09-01 because any href outside /schedule ejects an installed
   home-screen app into Safari. */
.texts-disclosure { margin-top: 10px; font-size: 12.5px; line-height: 1.55; }