/* Supervisor app — a field tool.
 *
 * Used outdoors at a festival: one-handed, in direct sun, often with paint on
 * your hands. That drives every choice here and is why this looks nothing like
 * the admin area, which is a desktop tool used at a table.
 *
 * - Single high-contrast light scheme, NOT theme-reactive. A dark theme is
 *   actively harder to read in bright sunlight, so this commits to one look
 *   and paints every colour explicitly.
 * - System fonts only. A webfont CDN is one more thing to fail in a dead spot.
 * - Touch targets at least 48px, generously spaced.
 * - Bottom navigation, within thumb reach.
 */

:root {
  /* The application form's palette, so a volunteer who filled that in and the
     supervisor running their team are looking at one thing. Every token keeps
     the lightness it had under the old green-grey scheme — only the hue moves
     — so the contrast relationships the layouts were built on still hold. */
  --ground:   #FFFFFF;
  --surface:  #F2F8FD;
  --sunken:   #DFEAF5;
  --ink:      #12232E;
  --muted:    #55707F;
  --faint:    #869AA8;
  --rule:     #CBD9E4;
  /* The poster purple and its pink offset — the title's colours, not a third
     scheme invented for the app. */
  --accent:   #2D1147;
  --accent-ink: #FFFFFF;
  --pink:     #EC4A86;
  --sky:      #CFE3F5;
  --sky-lift: #DDEDFB;
  --warn:     #A8420E;
  --warn-soft:#FDF0E8;

  --tap: 48px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; background: var(--sky); }

/* The application form's tent. Rays fan from a point above the page so they
   spread as they come down; fixed, so scrolling moves the content across the
   backdrop instead of dragging the tent with it. A negative z-index puts it
   behind every element but still in front of the canvas. */
html::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(125% 85% at 50% 0%, rgba(255,255,255,.55) 0%,
                    rgba(255,255,255,0) 52%, rgba(21,64,94,.13) 100%),
    repeating-conic-gradient(from 178deg at 50% -6%,
      var(--sky-lift) 0deg 6deg, var(--sky) 6deg 12deg);
}

body {
  margin: 0;
  background: transparent;      /* the tent above shows through */
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  /* Was 64px to clear a fixed tab bar. That bar is gone — navigation is the
     home screen and the back button — so only the device inset is left. */
  padding-bottom: var(--safe-b);
}

/* ---- header ---- */
/* The bar is a positioning context, and the title is centred against the BAR
   rather than against whatever happens to sit either side of it. Laying it out
   as flex siblings would shift the title whenever the right-hand label changed
   length — "25 Aug" versus "12 people" — which reads as the heading wobbling
   as you move around. The side padding keeps a long title from running under
   the controls. */
.appbar {
  position: relative;
  position: sticky; top: 0; z-index: 20;
  background: var(--sky); color: var(--ink);
  border-bottom: 1px solid rgba(21,64,94,.14);
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px));
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: center; min-height: var(--tap);
}
/* The page heading is the poster, shrunk to bar height: same face, same purple,
   same hard pink offset as the title on the form and the launch screen. The
   rotation is the poster's, kept small — at this size any more would fight the
   bar it sits in. */
.appbar h1 {
  margin: 0;
  font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900; text-transform: uppercase;
  font-size: 1.2rem; letter-spacing: .015em; line-height: 1.15;
  color: var(--accent);
  /* Lighter than the poster's 3px/4px: that offset is sized for a title
     filling a screen, and at bar height it closes up the counters and turns
     the word into a smudge. */
  text-shadow: 1.5px 2px 0 var(--pink);
  transform: rotate(-1.2deg);
  text-align: center; padding: 0 52px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.appbar .sub {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  margin-top: calc(env(safe-area-inset-top, 0px) / 2);
  font-size: 0.82rem; color: var(--muted); pointer-events: none;
}

/* A display rule beats the hidden attribute, and .back sets one — so the home
   page's back button, hidden because it would point at itself, was showing
   anyway. Said once here rather than remembered per element. */
[hidden] { display: none !important; }

.back {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  margin-top: calc(env(safe-area-inset-top, 0px) / 2);
  background: none; border: none; color: inherit; font: inherit;
  min-width: var(--tap); min-height: var(--tap);
  cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
}
.back:active { opacity: 0.6; }

/* ---- offline / status strip ---- */
.strip {
  display: none; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: 0.9rem; font-weight: 550;
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px solid var(--rule);
}
.strip.show { display: flex; }

/* ---- content ---- */
main { padding: 12px 12px 24px; }

.team {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.team.mine { border-color: var(--accent); border-width: 2px; }

.team-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px;
  background: var(--sunken);
}
.team.mine .team-head { background: var(--accent); color: var(--accent-ink); }
.team-head .name { font-weight: 650; font-size: 1.05rem; }
.team-head .count { margin-left: auto; font-size: 0.88rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.badge-mine {
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(255,255,255,0.22); padding: 3px 7px; border-radius: 4px;
}

/* ---- people ---- */
.people { list-style: none; margin: 0; padding: 0; }
.people li { border-top: 1px solid var(--rule); }
.people li:first-child { border-top: none; }

.person {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--tap);
  padding: 12px 14px; background: none; border: none;
  font: inherit; color: inherit; text-align: left;
}
button.person { cursor: pointer; }
button.person:active { background: var(--sunken); }

.avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  object-fit: cover; background: var(--sunken);
  display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 0.95rem; color: var(--muted);
}
.person .who { min-width: 0; }
.person .who .n { font-weight: 600; }
.person .who .m { font-size: 0.85rem; color: var(--muted); }
.person .chev { margin-left: auto; color: var(--faint); font-size: 1.2rem; }

.pairtag {
  display: inline-block; font-size: 0.75rem; color: var(--accent);
  background: #E3F1EB; border-radius: 4px; padding: 1px 6px; margin-top: 2px;
}

.empty { padding: 24px 14px; color: var(--muted); text-align: center; }

/* ---- notice ---- */
.notice {
  margin: 16px 12px; padding: 18px 16px;
  border: 1px solid var(--rule); border-left: 4px solid var(--warn);
  background: var(--warn-soft); border-radius: 8px;
}
.notice h2 { margin: 0 0 6px; font-size: 1rem; }
.notice p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* ---- detail view ---- */
.detail { padding: 0 0 24px; }
.detail-hero { display: flex; gap: 14px; align-items: center; padding: 16px 14px; background: var(--surface); }
.detail-hero .avatar { width: 68px; height: 68px; font-size: 1.3rem; }
.detail-hero .n { font-size: 1.2rem; font-weight: 650; }

.callrow { display: flex; gap: 10px; padding: 12px 14px; }
.callrow a {
  flex: 1; min-height: var(--tap);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 10px; text-decoration: none; font-weight: 600;
}
.callrow a.alt { background: var(--sunken); color: var(--ink); }

.section-title {
  margin: 20px 14px 6px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}
.fields { margin: 0; padding: 0 14px; }
.fields div { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.fields dt { font-size: 0.8rem; color: var(--muted); }
.fields dd { margin: 2px 0 0; font-size: 1rem; overflow-wrap: anywhere; }

.skel { padding: 28px 14px; color: var(--faint); text-align: center; }

/* ---- timesheets ---- */
.daybar {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}
.daybar::-webkit-scrollbar { display: none; }
.daybar button {
  flex: none; min-height: var(--tap); min-width: 68px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--ground); color: var(--ink); font: inherit; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15; cursor: pointer; padding: 6px 10px;
}
.daybar button .dow { font-size: 0.7rem; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; }
.daybar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.daybar button[aria-pressed="true"] .dow { color: rgba(255,255,255,0.85); }

.sheet { list-style: none; margin: 0; padding: 0; }
.sheet > li { border-bottom: 1px solid var(--rule); padding: 12px 12px 14px; }

.sheet .who-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sheet .who-row .n { font-weight: 650; }

.slot { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.slot > .lbl {
  width: 34px; flex: none; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--muted);
}
.states { display: flex; gap: 6px; flex: 1; }
.states button {
  flex: 1; min-height: var(--tap);
  border: 1.5px solid var(--rule); border-radius: 10px;
  background: var(--ground); color: var(--muted);
  font: inherit; font-size: 0.82rem; font-weight: 650; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.states button[aria-pressed="true"] { color: var(--accent-ink); border-color: transparent; }
.states button[data-s="present"][aria-pressed="true"] { background: #0B6E4F; }
.states button[data-s="late"][aria-pressed="true"]    { background: #A8710E; }
.states button[data-s="absent"][aria-pressed="true"]  { background: #A8280E; }
.states button[data-s="excused"][aria-pressed="true"] { background: #4A5754; }

.note-field {
  width: 100%; min-height: 44px; margin-top: 4px;
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 0.95rem;
  background: var(--ground); color: var(--ink); resize: vertical;
}

.syncbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(72px + var(--safe-b));
  z-index: 25; display: none;
  background: var(--ink); color: #fff; border-radius: 10px;
  padding: 10px 14px; font-size: 0.88rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}
.syncbar.show { display: block; }

/* ---- landing ---- */


.news {
  margin: 12px; padding: 14px 16px;
  background: #FFF6E3; border: 1px solid #E8D9AE; border-left: 4px solid #A8710E;
  border-radius: 10px;
}
.news .lbl {
  display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #A8710E; margin-bottom: 5px;
}
.news p { margin: 0; font-size: 0.98rem; line-height: 1.5; white-space: pre-wrap; }
.news .when { display: block; margin-top: 8px; font-size: 0.76rem; color: var(--muted); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 6px; min-height: 116px; padding: 16px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  text-decoration: none; color: var(--ink);
}
.tile:active { background: var(--sunken); }
.tile .ic { font-size: 1.7rem; line-height: 1; }
.tile .t { font-weight: 700; font-size: 1.02rem; }
.tile .d { font-size: 0.8rem; color: var(--muted); line-height: 1.3; }
/* Five tiles do not divide into two columns, so the primary one spans the full
   width rather than leaving a half-width orphan on the last row. */
.tile.primary { grid-column: 1 / -1; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tile.primary .d { color: rgba(255,255,255,0.85); }

.hello { padding: 16px 12px 0; }
.hello .h { font-size: 1.25rem; font-weight: 700; }
.hello .s { font-size: 0.9rem; color: var(--muted); margin-top: 2px; }

/* ---- all-teams roster ----
 *
 * Built for ~100 names on one screen, so photos are gone and the rows are
 * tight. These rows are not tappable — the all-teams view is deliberately
 * read-only with no drill-through — so they are exempt from the 48px target
 * rule that governs everything you can actually press. The team headers ARE
 * pressable and keep the full height.
 */
.rosterbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px; background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.rosterbar input {
  flex: 1; min-width: 0; min-height: var(--tap);
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 8px 12px; font: inherit; font-size: 1rem;
  background: var(--surface); color: var(--ink);
}
.rosterbar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rosterbar button {
  flex: none; min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: 0.8rem; font-weight: 650; cursor: pointer;
}
.rosterbar button:active { background: var(--sunken); }

.rcount { padding: 8px 14px 2px; font-size: 0.8rem; color: var(--faint); }

details.team2 { border-bottom: 1px solid var(--rule); }
details.team2 > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 8px 14px;
  background: var(--surface); cursor: pointer; list-style: none;
  font-weight: 650;
}
details.team2 > summary::-webkit-details-marker { display: none; }
details.team2 > summary .caret {
  flex: none; width: 16px; color: var(--faint); font-size: 0.9rem;
  transition: transform 0.15s;
}
details.team2[open] > summary .caret { transform: rotate(90deg); }
details.team2 > summary .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.team2 > summary .c {
  margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
details.team2.mine > summary { background: var(--accent); color: var(--accent-ink); }
details.team2.mine > summary .caret,
details.team2.mine > summary .c { color: rgba(255,255,255,0.85); }

ul.names { list-style: none; margin: 0; padding: 2px 0 6px; }
ul.names li {
  padding: 5px 14px 5px 38px;      /* indented under the team header */
  font-size: 0.97rem; line-height: 1.3;
}
ul.names li + li { border-top: 1px solid #EDF1F0; }
ul.names .pw { font-size: 0.78rem; color: var(--accent); }
ul.names mark { background: #FFECB3; color: inherit; border-radius: 2px; padding: 0 1px; }
.noresults { padding: 26px 14px; text-align: center; color: var(--muted); }

/* ---- coverage ---- */

/* AM / PM. Always visible, never inferred silently: a team still painting at
   12:30 must be able to see which half their work is going into, and move it. */
.slotbar { display: flex; gap: 8px; padding: 12px 12px 4px; }
.slotbar button {
  flex: 1; min-height: var(--tap); border: 1px solid var(--rule); border-radius: 10px;
  background: var(--ground); color: var(--muted); font: inherit; font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.04em; cursor: pointer;
}
.slotbar button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}

details.area { margin: 12px; border: 1px solid var(--rule); border-radius: 12px;
               background: var(--ground); overflow: hidden; }
details.area > summary {
  list-style: none; cursor: pointer; padding: 12px 14px; min-height: var(--tap);
  display: flex; flex-direction: column; gap: 8px;
}
details.area > summary::-webkit-details-marker { display: none; }
details.area > summary .top { display: flex; align-items: center; gap: 10px; }
details.area > summary .n { font-weight: 650; font-size: 1.05rem; }
details.area > summary .pc {
  margin-left: auto; font-size: 0.9rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
details.area > summary .caret { color: var(--faint); transition: transform 0.15s; }
details.area[open] > summary .caret { transform: rotate(90deg); }

/* A finished area is still readable — greyed, not hidden. It sorts to the
   bottom in the markup rather than by CSS, so the DOM order matches. */
details.area.done { background: var(--surface); border-color: var(--rule); }
details.area.done > summary .n { color: var(--muted); }
details.area.done .tick { color: var(--accent); font-weight: 700; }

/* Fills left to right. The percentage is always written next to it — colour
   is not a number, and some of the people reading this are colour-blind. */
.bar { height: 9px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; transition: width 0.2s, background 0.2s; }

.arealist { list-style: none; margin: 0; padding: 0 14px 14px; }
.arealist > li + li { border-top: 1px solid var(--rule); }
.arealist > li { padding: 12px 0; }
.metric-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.metric-top .mn { font-weight: 650; }
.metric-top .site {
  margin-left: auto; font-size: 0.85rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.metric-pc { font-size: 0.8rem; color: var(--muted); margin-top: 5px;
             font-variant-numeric: tabular-nums; }

/* The stepper is what THIS team did THIS session, starting at zero each
   session. Minus and plus because that is what a hand with paint on it can
   hit, and because "I just did five more" is the real unit of work. */
/* Wraps rather than overflowing: "Finished" and "Update" side by side are
   wider than a small phone once the label has had its share. */
.stepper { display: flex; align-items: center; gap: 8px; margin-top: 10px;
           flex-wrap: wrap; }
.stepper .lbl { font-size: 0.78rem; color: var(--faint); }
/* The controls travel together. On a narrow phone "Update" and "Finished"
   plus the count will not sit beside the label, and wrapping them one at a
   time strands a lone button on its own line — so they wrap as one block. */
.stepper .ctrls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.stepper button {
  min-width: var(--tap); min-height: var(--tap); border: 1px solid var(--rule);
  border-radius: 10px; background: var(--ground); color: var(--ink);
  font: inherit; font-size: 1.3rem; font-weight: 700; cursor: pointer;
}
.stepper button:active { background: var(--sunken); }
.stepper button:disabled { opacity: 0.4; cursor: default; }
.stepper .val {
  min-width: 44px; text-align: center; font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Update carries the ordinary weight; Done is the accented one, because it is
   the one that finishes a job off. */
/* The day's note sits under the hours as its own panel: it is about the day
   rather than about any one session, and hanging it off the last row would
   read as a note on that row. */
.daynote { margin-top: 14px; }
.daynote .dn-hint { font-size: 0.82rem; color: var(--faint); margin: 0 0 10px; line-height: 1.4; }
.daynote textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--ground); color: var(--ink); resize: vertical; min-height: 88px;
}
.daynote textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.stepper .upd { min-width: 0; padding: 0 14px; font-size: 0.9rem; font-weight: 650; }
.stepper .fin {
  min-width: 0; padding: 0 14px; font-size: 0.9rem; font-weight: 650;
  border-color: var(--accent); color: var(--accent);
}

/* Admin -> supervisors. Theme ideas, access, what to know before starting. */
.areanote {
  margin: 0 14px 12px; padding: 10px 12px; border-radius: 10px;
  background: #FFF6E3; border: 1px solid #E8D9AE; border-left: 4px solid #A8710E;
  font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap;
}

/* ---- supervisor's own hours ---- */

.hours { margin: 12px; border: 1px solid var(--rule); border-radius: 12px;
         background: var(--ground); padding: 12px 14px 14px; }
.hours h2 { margin: 0 0 2px; font-size: 1rem; }
.hours .when { font-size: 0.82rem; color: var(--muted); margin-bottom: 10px; }
.hrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.hrow > .lbl {
  width: 46px; flex-shrink: 0; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--muted);
}
.hrow input[type="time"] {
  flex: 1; min-width: 0; min-height: var(--tap); border: 1px solid var(--rule);
  border-radius: 10px; background: var(--ground); color: var(--ink);
  font: inherit; font-size: 1rem; padding: 0 10px;
}
.hrow .arrow { color: var(--faint); }
.hours .addextra {
  margin-top: 12px; min-height: var(--tap); width: 100%; border: 1px dashed var(--rule);
  border-radius: 10px; background: none; color: var(--accent);
  font: inherit; font-weight: 650; cursor: pointer;
}
.hours .extranote {
  width: 100%; margin-top: 8px; min-height: 44px; border: 1px solid var(--rule);
  border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 0.95rem;
  resize: vertical; background: var(--ground); color: var(--ink);
}