/*
 * Screen styles for the roster. Everything measurable comes from the Broadsheet
 * tokens in styles.css; this file only arranges them into the eight screens.
 * Written 390px-first, centred with a max-width once there is room.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* The browser's own [hidden] rule loses to any class that sets display, which
   every control here does. Without this, "hidden until the script reveals it"
   would show the control to people with no JavaScript at all. */
[hidden] { display: none !important; }

.phone {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Room for the fixed tab bar, which is no longer in the flow. Screens without
   one — the setup pages — keep their own footing. */
.phone:has(.tabbar) {
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 8px var(--space-4) 0;
  font-size: 11px;
  color: var(--color-neutral-700);
}

/* The roster's name is the heading of every screen. */
.statusbar-name {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Week / Month, on its own line now the heading sits above it. Right-aligned
   so it stays put when the month view shows it beside a heading. */
.view-switch {
  display: flex;
  justify-content: flex-end;
  padding: 12px var(--space-4) 0;
}

/* The way in to editing. Accent means this phone is already unlocked. */
.statusbar-admin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 34px;
  margin-right: -10px;
  color: var(--color-neutral-700);
}

.statusbar-admin.is-unlocked { color: var(--color-accent); }

.page {
  flex: 1;
  padding: 0 var(--space-4);
}

/* — datelines and headings — */

.kicker {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.kicker-2 { color: var(--color-accent-2-700); }

.dateline-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-4) 12px;
  /* The dateline can be long ("… · PUBLISHED"); let the control drop to its
     own line rather than pushing the page wider than the phone. */
  flex-wrap: wrap;
}

.dateline-row > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.kicker { overflow-wrap: anywhere; }

.page-title {
  font-size: 29px;
  margin: 2px 0 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.page-title-sm { font-size: 27px; }

.lede {
  font-size: 13px;
  margin: 6px 0 0;
  color: var(--color-neutral-800);
}

/* — week navigation — */

.week-rail {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px var(--space-4) 2px;
}

/* Borderless: the arrows read as quiet navigation next to the label, and the
   hover and press tints still show where the tap target is. */
.week-rail .btn {
  padding: 5px 10px;
  font-size: 12px;
  min-width: 44px;
  min-height: 34px;
  border-color: transparent;
}

/* With the heading above it gone, this label is the title of the screen, so it
   takes the heading face rather than sitting quietly between the arrows. */
.week-rail-label {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  color: var(--color-text);
  flex: 1;
  text-align: center;
}

.seg-full {
  display: flex;
  margin: 11px var(--space-4) 12px;
  font-size: 12px;
}

.seg-full .seg-opt {
  flex: 1;
  justify-content: center;
  min-height: 44px;
}

/* The design draws the segmented controls as radios; as navigation between
   server-rendered screens they are links, so the selected state is a class
   rather than :has(input:checked). */
a.seg-opt { text-decoration: none; color: inherit; }
.seg-opt.is-active { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(.is-active):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* — group headings — */

.group-head {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 4px;
}

.group-head + .slot { border-top: 0; }

.group-head-bschool {
  color: var(--color-accent-2-700);
  margin-top: var(--space-4);
}

/* — the task rows that make up a meeting — */

.slot {
  display: flex;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--color-divider);
  min-height: 44px;
  width: 100%;
  text-align: left;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  font: inherit;
  color: inherit;
}

.slot:last-of-type { border-bottom: 1px solid var(--color-divider); }

button.slot { cursor: pointer; }
button.slot:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.slot-icon {
  flex: none;
  color: var(--color-neutral-700);
  align-self: center;
  line-height: 1;
}

.spine {
  width: 3px;
  height: 40px;
  flex: none;
  align-self: flex-start;
  border-radius: 2px;
  background: var(--color-neutral-400);
}

.slot-body { flex: 1; min-width: 0; }

.slot-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

.slot-person {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 5px;
}

.slot-person + .slot-person { margin-top: 7px; }

/* Small, because it is reassurance rather than news. */
.slot-confirmed {
  font-size: 13px;
  color: var(--color-accent);
  flex: none;
}

.slot-name { font-size: 18px; }

.slot-open .slot-name {
  color: var(--color-accent-2-700);
  font-style: italic;
}

.slot-refill {
  font-size: 12px;
  color: var(--color-accent-2-700);
  margin-top: 3px;
}

/* — person chips — */

.chip {
  width: var(--chip-size, 26px);
  height: var(--chip-size, 26px);
  flex: none;
  border-radius: 50%;
  background: var(--chip-color, var(--color-neutral-500));
  color: var(--chip-ink, var(--color-bg));
  display: grid;
  place-items: center;
  font-size: calc(var(--chip-size, 26px) * 0.42);
  line-height: 1;
  letter-spacing: 0.01em;
}

.chip-open {
  background: transparent;
  border: 1px dashed var(--color-accent-2-600);
  color: var(--color-accent-2-700);
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* — footnotes — */

.hint {
  font-size: 12px;
  color: var(--color-neutral-700);
  margin: 14px 0 16px;
}

.hint-warn { color: var(--color-accent-2-700); }

.flash {
  font-size: 13px;
  margin: 0 0 var(--space-3);
  padding: 9px 11px;
  border-radius: var(--radius-md);
}

.flash-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.flash-warn { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }

/* — bottom tab bar — */

/* A floating island: pinned to the viewport so switching screens never means
   scrolling to the bottom first, but hugging its two tabs rather than spanning
   the width, so the roster stays visible either side of it. Sits below the
   picker's backdrop (z-index 20) so a bottom sheet still covers it. The full
   rounding is a deliberate departure from the design's 1–4px radii. */
.tabbar {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}

.tab {
  flex: none;
  /* Four of these have to fit across a 390px phone when a volunteer is being
     asked to confirm: Roster, Me, and the two answers. */
  min-width: 76px;
  font-size: 12px;
  color: var(--color-neutral-700);
  text-decoration: none;
  padding: 6px 0;
  min-height: 44px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.tab.is-active {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* Actions rather than destinations, but they sit in the island so they wear the
   same shape as their neighbours. */
button.tab {
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Once someone has confirmed, the button stops asking and starts reporting. */
.tab-yes.is-answered {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.tab-no:hover { color: var(--color-accent-2-700); }

/* The three sets draw at different weights; nudge them to look even. */
.tab-icon { display: block; }
.tab-label { line-height: 1; }

/* — proof sheet (generate) — */

.proof-group {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 5px;
  margin-top: var(--space-4);
}

.proof-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-divider);
}

.proof-row-bschool {
  background: var(--color-accent-2-100);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
}

.proof-row-bschool .proof-reason { color: var(--color-accent-2-700); }
.proof-row-open .proof-reason { color: var(--color-accent-2-700); }

.proof-main { flex: 1; min-width: 0; }
.proof-name { font-size: 15px; }
.proof-reason { font-size: 12px; color: var(--color-neutral-700); }

.proof-action {
  font-size: 12px;
  color: var(--color-accent);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 4px;
  min-height: 44px;
  font-family: inherit;
}

.sheet-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 0 16px;
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-3);
}

.sheet-actions .btn { min-height: 44px; }
.sheet-actions form:first-child { flex: 1; }
.sheet-actions form:first-child .btn { width: 100%; }

/* — month view — */

.week-block {
  padding: 13px 0;
  border-top: 1px solid var(--color-divider);
  display: block;
  text-decoration: none;
  color: inherit;
}

.week-block-current { border-top: 1px solid var(--color-text); }

.week-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.week-block-title {
  font-size: 17px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.week-block-dates { font-size: 12px; color: var(--color-neutral-700); }
.week-block-note { font-size: 12px; color: var(--color-neutral-700); margin-top: 7px; }
.week-block-note-diff { color: var(--color-accent-2-700); }


/* — quarter — */

.q-summary {
  font-size: 12px;
  color: var(--color-neutral-700);
  margin: 0 0 2px;
}

.q-summary-open { color: var(--color-accent-2-700); }

.q-month { margin-top: 18px; }

.q-month-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 4px;
  text-decoration: none;
}

.q-month-open { color: var(--color-accent-2-700); letter-spacing: 0.04em; }

/* One line per week: the label column is fixed so the chips of every week
   start on the same vertical, which is what makes the run readable. */
.q-week {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--color-divider);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}

.q-week:first-of-type { border-top: 0; }

/* Colour rather than a rule: a border here would read as another row divider. */
.q-week-current .q-week-no { color: var(--color-accent); }

.q-week-label { flex: none; width: 88px; }
.q-week-no { font-size: 14px; display: block; }

.q-week-b {
  display: inline-block;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--color-neutral-700);
  color: var(--color-bg);
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  vertical-align: 2px;
}

.q-week-dates {
  font-size: 11px;
  color: var(--color-neutral-700);
  display: block;
}

.q-week-team {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.q-week-empty {
  font-size: 12px;
  color: var(--color-neutral-700);
  font-style: italic;
}


/* — me — */

.me-head {
  padding: 12px var(--space-4) 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.me-name { font-size: 25px; margin: 0; letter-spacing: -0.02em; }
.me-trained { font-size: 12px; color: var(--color-neutral-700); }

.month-head {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 4px;
  margin: var(--space-4) 0 0;
}

.month-head:first-of-type { margin-top: 0; }

.duty {
  border-top: 1px solid var(--color-divider);
  padding: 12px 0;
  display: flex;
  gap: 12px;
  align-items: center;
}

.duty-rail { width: 52px; flex: none; }
.duty-day { font-size: 16px; }
.duty-weekday { font-size: 11px; color: var(--color-neutral-700); letter-spacing: 0.04em; }
.duty-body { flex: 1; min-width: 0; }
.duty-task { font-size: 16px; }
.duty-detail { font-size: 12px; color: var(--color-neutral-700); }
.duty-detail-bschool { color: var(--color-accent-2-700); }
.duty-icon { flex: none; color: var(--color-neutral-700); }

.stack {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.stack .btn { margin: 0; min-height: 44px; }

/* — away dates — */

.away-month {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 4px;
  margin: var(--space-4) 0 10px;
}

.away-sub { font-size: 11px; color: var(--color-neutral-700); margin: 0 0 7px; }

.away-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.away-chip {
  position: relative;
  min-width: 56px;
  min-height: 56px;
  padding: 10px 11px;
  border-radius: var(--radius-md);
  text-align: center;
  border: 1px solid var(--color-divider);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: block;
}

.away-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.away-chip-date { display: block; font-size: 18px; line-height: 1.1; }
.away-chip-state { font-size: 10px; color: var(--color-neutral-700); }

.away-chip:has(input:checked) {
  background: var(--color-accent-2-600);
  border-color: var(--color-accent-2-600);
  color: var(--color-bg);
}

.away-chip:has(input:checked) .away-chip-state { color: var(--color-bg); }

.away-chip:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.away-chip.is-past { opacity: 0.5; cursor: not-allowed; }

/* — admin — */

.person-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 0;
  border-top: 1px solid var(--color-divider);
  min-height: 44px;
}

.person-row:first-of-type { border-top: 1px solid var(--color-text); }

.person-id {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}

.person-dot {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--dot);
}

/* Load across the quarter, kept to initials and a count so twenty-four people
   fit in a few lines rather than a table the coordinator has to scroll. */
.turns {
  border-top: 1px solid var(--color-divider);
  padding-top: 12px;
  margin-top: 4px;
}

.turns-head {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  margin-bottom: 8px;
}

.turns-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 11px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.turn { white-space: nowrap; color: var(--color-neutral-700); }

.turn-initials {
  font-weight: 600;
  color: var(--ink);
  margin-right: 3px;
}

/* Nobody should sit at zero for a whole quarter. */
.turn-zero .turn-count { color: var(--color-accent-2-700); }

.person-name {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-name-inactive { color: var(--color-neutral-500); text-decoration: line-through; }

.skill-toggles { display: flex; gap: 4px; }

.skill-toggle {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  background: none;
  color: var(--color-neutral-400);
  cursor: pointer;
  padding: 0;
}

.skill-toggle.is-on {
  background: var(--color-accent-100);
  border-color: var(--color-accent-100);
  color: var(--color-accent-700);
}

/* The 27px square the design calls for is below the 44px touch minimum, so the
   tap area is widened beyond the painted box rather than the box being grown. */
.skill-toggle::after {
  content: "";
  position: absolute;
  inset: -9px -2px;
}

.skill-toggle { position: relative; }

.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 0;
  border-top: 1px solid var(--color-divider);
  flex-wrap: wrap;
}

.task-row-main { flex: 1; min-width: 140px; }
.task-row-label { font-size: 15px; }
.task-row-meta { font-size: 12px; color: var(--color-neutral-700); }
.task-row-fields { display: flex; gap: 6px; align-items: center; }
.task-row-fields .input { width: auto; min-width: 62px; }

/* — unlock — */

.dimmed { opacity: 0.35; pointer-events: none; }

.dim-line {
  border-top: 1px solid var(--color-divider);
  padding: 11px 0;
  font-size: 16px;
}

.sheet {
  position: sticky;
  bottom: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 22px var(--space-4) 20px;
  margin-top: auto;
}

.sheet h3 { font-size: 23px; margin: 4px 0 8px; letter-spacing: -0.02em; }
.sheet p { font-size: 13px; margin: 0 0 16px; color: var(--color-neutral-800); }
.sheet .btn { min-height: 44px; }
.sheet-note { font-size: 11px; color: var(--color-neutral-700); margin: 14px 0 0; }

/* — reassign picker — */

.picker-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
}

.picker {
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px var(--space-4);
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  overflow-y: auto;
}

.picker h3 { font-size: 20px; margin: 4px 0 12px; }

.picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--color-divider);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  min-height: 48px;
}

.picker-option:disabled { opacity: 0.45; cursor: not-allowed; }
.picker-option-name { flex: 1; font-size: 16px; }
.picker-option-meta { font-size: 12px; color: var(--color-neutral-700); }

/* — misc — */

.icon { display: block; }

.list-plain { list-style: none; margin: 0; padding: 0; }

@media print {
  .tabbar, .week-rail, .seg, .btn, .proof-action { display: none !important; }
  .phone { max-width: none; }
}