/* ==============================================================
   Workforce - design system
   Light, flat, card-based. Single indigo accent, amber reserved
   for pay-rate and urgency. Manrope for display type, Inter for
   body and UI. Dark mode via [data-theme="dark"] on <html>.
   ============================================================== */

:root {
  --bg:        #F6F7FA;
  --bg-deep:   #EEF0F5;
  --surface:   #FFFFFF;
  --surface-2: #EEF0F5;

  --ink:   #171923;
  --ink-2: #6B7280;
  --ink-3: #9CA3AF;

  --accent:   #FBA70F;
  --accent-2: #FFBC3F;

  /* Amber is bright: it works as a fill but not as text on a pale
     background. --accent-deep is the readable version for type and
     outlines, --accent-ink the dark colour that sits on an amber fill. */
  --accent-deep: #8A5300;
  --accent-ink:  #2A1A00;

  /* Availability marking: a solid block in the brand colour. */
  --avail:     #FBA70F;
  --avail-ink: #2A1A00;

  /* Solid app bar behind the page title. */
  --appbar:     #FBA70F;
  --appbar-ink: #2A1A00;

  /* Reserved for things that must stand out against the brand colour,
     currently the admin comment highlight. */
  --flag: #7C3AED;

  --good: #16A34A;
  --warn: #D97706;
  --bad:  #DC2626;

  --border: rgba(15, 23, 42, .08);

  --shadow-d: rgba(15, 23, 42, .08);
  --shadow-l: rgba(15, 23, 42, 0);

  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --r:    20px;
  --r-sm: 16px;
  --r-xs: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0F1115;
    --bg-deep:   #0A0B0E;
    --surface:   #171A21;
    --surface-2: #1F232C;

    --ink:   #F3F4F6;
    --ink-2: #9CA3AF;
    --ink-3: #6B7280;

    --accent:   #FBA70F;
    --accent-2: #FFC24F;

    --accent-deep: #FBBF4D;
    --accent-ink:  #241600;

    --avail:     #FBA70F;
    --avail-ink: #241600;

    --appbar:     #FBA70F;
    --appbar-ink: #241600;

    --flag: #A78BFA;

    --good: #22C55E;
    --warn: #F59E0B;
    --bad:  #EF4444;

    --border: rgba(255, 255, 255, .08);

    --shadow-d: rgba(0, 0, 0, .5);
    --shadow-l: rgba(0, 0, 0, 0);
  }
}

[data-theme="light"] {
  --bg:        #F6F7FA;
  --bg-deep:   #EEF0F5;
  --surface:   #FFFFFF;
  --surface-2: #EEF0F5;
  --ink:   #171923;
  --ink-2: #6B7280;
  --ink-3: #9CA3AF;
  --accent:   #FBA70F;
  --accent-2: #FFBC3F;

  /* Amber is bright: it works as a fill but not as text on a pale
     background. --accent-deep is the readable version for type and
     outlines, --accent-ink the dark colour that sits on an amber fill. */
  --accent-deep: #8A5300;
  --accent-ink:  #2A1A00;

  /* Availability marking: a solid block in the brand colour. */
  --avail:     #FBA70F;
  --avail-ink: #2A1A00;

  /* Solid app bar behind the page title. */
  --appbar:     #FBA70F;
  --appbar-ink: #2A1A00;

  /* Reserved for things that must stand out against the brand colour,
     currently the admin comment highlight. */
  --flag: #7C3AED;
  --good: #16A34A;
  --warn: #D97706;
  --bad:  #DC2626;
  --border: rgba(15, 23, 42, .08);
  --shadow-d: rgba(15, 23, 42, .08);
  --shadow-l: rgba(15, 23, 42, 0);
}

[data-theme="dark"] {
  --bg:        #0F1115;
  --bg-deep:   #0A0B0E;
  --surface:   #171A21;
  --surface-2: #1F232C;
  --ink:   #F3F4F6;
  --ink-2: #9CA3AF;
  --ink-3: #6B7280;
  --accent:   #FBA70F;
  --accent-2: #FFC24F;

  --accent-deep: #FBBF4D;
  --accent-ink:  #241600;

  --avail:     #FBA70F;
  --avail-ink: #241600;

  --appbar:     #FBA70F;
  --appbar-ink: #241600;

  --flag: #A78BFA;
  --good: #22C55E;
  --warn: #F59E0B;
  --bad:  #EF4444;
  --border: rgba(255, 255, 255, .08);
  --shadow-d: rgba(0, 0, 0, .5);
  --shadow-l: rgba(0, 0, 0, 0);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg-deep); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: 112px;      /* clears the floating tab bar */
  transition: background .15s ease, color .15s ease;
}

body.plain { padding-bottom: 32px; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- neumorphic primitives (kept for compatibility, now flat) ---------- */

.neu {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px var(--shadow-d), 0 8px 20px var(--shadow-d);
}

.neu-sm {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px var(--shadow-d);
}

.neu-in {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.neu-well {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* ---------- layout ---------- */

.wrap { max-width: 480px; margin: 0 auto; padding: 0 22px; }
.wrap-wide { max-width: 760px; }

.stack   > * + * { margin-top: 14px; }
.stack-s > * + * { margin-top: 10px; }

/* ---------- header ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 0;
}

.greet-sm { font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }
.greet-lg { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin-top: 3px; }

.icon-btn {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--ink-2);
  position: relative;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px var(--shadow-d);
  cursor: pointer;
  font-size: 18px;
}

.icon-btn:active { background: var(--surface-2); }

.dot {
  position: absolute; top: 10px; right: 11px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

/* ---------- typography ---------- */

.eyebrow {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}

.display {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

h1 { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
h2 { font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -.005em; }

.muted   { color: var(--ink-2); }
.muted-3 { color: var(--ink-3); }
.small   { font-size: 12px; }
.tiny    { font-size: 11px; }

.sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 26px 0 13px;
}
.sec span { font-size: 12px; color: var(--accent-deep); font-weight: 600; }

/* ---------- cards ---------- */

.card {
  border-radius: var(--r);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px var(--shadow-d), 0 8px 20px var(--shadow-d);
}

.card-tight { padding: 13px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row-top { align-items: flex-start; }

/* ---------- stat tiles ---------- */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.stat {
  border-radius: var(--r-sm);
  padding: 14px 10px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
}

.stat b { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.stat span { font-size: 10.5px; color: var(--ink-3); font-weight: 600; }

/* ---------- pills and badges ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
}

.pill.good { background: rgba(22,163,74,.12); color: var(--good); }
.pill.warn { background: rgba(217,119,6,.12); color: var(--warn); }
.pill.bad  { background: rgba(220,38,38,.12); color: var(--bad); }
.pill.info { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-deep); }

.pills { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s ease;
}

.btn:hover { text-decoration: none; }
.btn:active { background: var(--surface-2); }

.btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}

.btn.primary:active { background: var(--accent-2); }

.btn.sm { height: 38px; padding: 0 16px; font-size: 13px; border-radius: var(--r-xs); }
.btn.block { width: 100%; }
.btn.ghost { background: none; border-color: transparent; color: var(--ink-2); }
.btn.ghost:active { background: var(--surface-2); }

.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn.primary[disabled] { background: var(--surface-2); color: var(--ink-3); border-color: var(--border); }

.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }

/* ---------- forms ---------- */

.field { display: block; margin-bottom: 14px; }

.field > .lbl {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 8px;
}

.input, .select, .textarea {
  width: 100%;
  height: 50px;
  padding: 0 17px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
}

.textarea { height: auto; padding: 14px 17px; resize: vertical; line-height: 1.5; }

.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.input[disabled] { color: var(--ink-3); background: var(--surface-2); }

.select { appearance: none; cursor: pointer; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Date and time inputs need their picker icon adjusted per theme. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator,
  :root:not([data-theme="light"]) input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(.8);
  }
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Grid children default to min-width:auto, so a datetime-local input - whose
   intrinsic minimum is wider than half a phone screen - blows out of its
   column instead of shrinking. This is what keeps it inside the card. */
.grid-2 > * { min-width: 0; }
.input, .select, .textarea { max-width: 100%; }
.grid-2 .field { margin-bottom: 0; }
.span-2 { grid-column: 1 / -1; }

/* ---------- segmented control (appearance switcher etc.) ---------- */

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.seg button {
  flex: 1;
  height: 38px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.seg button.on {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
}

/* ---------- toggle ---------- */

.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }

.switch i {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background .18s ease;
}

.switch i::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-d);
  transition: transform .18s ease, background .18s ease;
}

.switch input:checked + i { background: var(--accent); border-color: var(--accent); }
.switch input:checked + i::after { transform: translateX(20px); background: #fff; }
.switch input:disabled + i { opacity: .5; }

/* ---------- alerts ---------- */

.alert {
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}

.alert i { font-size: 17px; flex: none; margin-top: 1px; }
.alert.good { color: var(--good); border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.08); }
.alert.warn { color: var(--warn); border-color: rgba(217,119,6,.25); background: rgba(217,119,6,.08); }
.alert.bad  { color: var(--bad); border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.08); }
.alert.info { color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.alert a { color: inherit; text-decoration: underline; }

/* ---------- empty state ---------- */

.empty {
  border-radius: var(--r);
  padding: 44px 22px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
}

.empty i { font-size: 32px; color: var(--ink-3); display: block; margin-bottom: 10px; }
.empty b { display: block; font-family: var(--font-display); font-weight: 800; margin-bottom: 4px; }
.empty p { color: var(--ink-3); font-size: 13px; }

/* ---------- shift card ---------- */

.shift-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.shift-title { font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -.005em; }
.shift-venue { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.shift-rate  { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--accent-deep); white-space: nowrap; }

.meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
  padding: 13px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.meta .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.meta .v { font-size: 13px; font-weight: 700; margin-top: 4px; }

/* ---------- progress timeline ---------- */

.track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.track .node { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; }
.track .bead { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex: none; }
.track .line { height: 2px; flex: 1; background: var(--border); border-radius: 2px; }
.track .on .bead { background: var(--accent); }
.track .on .line { background: var(--accent); opacity: .5; }
.track .k { font-size: 10px; color: var(--ink-3); }
.track .v { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.track .on .k { color: var(--ink-2); }
.track .on .v { color: var(--ink); }

/* ---------- calendar ---------- */

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-head b { font-family: var(--font-display); font-size: 15px; font-weight: 800; }

.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px; text-align: center;
  font-size: 10px; color: var(--ink-3); font-weight: 700;
  letter-spacing: .06em; margin-bottom: 8px;
}

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.cal button {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  transition: background .12s ease;
}

.cal button[data-state="available"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.cal button[data-state="unavailable"] {
  background: var(--surface-2);
  color: var(--ink-3);
}

.cal button[disabled] { opacity: .35; cursor: default; background: none; border-color: transparent; }

/* Past days stay tappable so their shifts can be read back, but they look
   spent and their availability cannot be changed. */
.cal button[data-past] { opacity: .5; }
.cal button.sel { border-color: var(--ink); }

.cal .mark {
  position: absolute; bottom: 5px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--good);
}

.cal button[data-state="available"] .mark { background: var(--accent-ink); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 11px; color: var(--ink-3); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend em { width: 10px; height: 10px; border-radius: 3px; font-style: normal; }

/* ---------- list rows ---------- */

.item {
  border-radius: var(--r-sm);
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.item .b { font-size: 13.5px; font-weight: 700; }
.item .s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.item .grow { min-width: 0; flex: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- avatar ---------- */

.avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar i { font-size: 32px; color: var(--ink-3); }

/* ---------- horizontal rail ---------- */

.rail {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 22px 8px;
  margin: 0 -22px;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 clamp(260px, 80vw, 300px); }

/* ---------- tab bar ---------- */

.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  width: min(420px, calc(100% - 44px));
  height: 68px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px var(--shadow-d);
}

.tab {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: 20px;
  position: relative;
}

.tab:hover { text-decoration: none; }

.tab.on {
  color: var(--accent-ink);
  background: var(--accent);
}

/* ---------- misc ---------- */

.hidden { display: none !important; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.center { text-align: center; }
.mt   { margin-top: 14px; }
.mt-s { margin-top: 8px; }
.mb   { margin-bottom: 14px; }

video { width: 100%; border-radius: var(--r-sm); background: #000; display: block; }

/* ==============================================================
   Shift detail: artwork, distance, comments
   ============================================================== */

/* Hero image on shift.php. Fixed aspect so a tall photo cannot push
   the whole page down before the reader reaches the times and pay. */
.hero {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 16 / 9;
}

.hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card thumbnail on shifts.php. Shallower than the hero so the list
   stays scannable. Pulled to the card edges. */
.thumb {
  display: block;
  margin: -16px -16px 14px;
  aspect-ratio: 21 / 9;
  background: var(--surface-2);
  overflow: hidden;
  border-radius: var(--r) var(--r) 0 0;
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The card header doubles as the link into the detail page, so it must
   not pick up any of the browser's default anchor styling. */
.plain-link,
.plain-link:hover,
.plain-link:visited {
  color: inherit;
  text-decoration: none;
}

.plain-link:active { opacity: .7; }

.pill.xs {
  font-size: 10px;
  padding: 2px 7px;
  vertical-align: middle;
}

/* --- Comments ------------------------------------------------- */

.comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.comment-av {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}

/* Fallback initial when a staff member has no photo. */
.comment-av.init {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.comment-by {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.comment-when {
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-3);
}

.comment .small {
  overflow-wrap: anywhere;
}

/* Admin comments are highlighted so official replies are obvious against
   ordinary staff comments. Violet rather than amber, so the highlight is
   still distinct now the brand colour is amber. */
.comment.admin {
  padding: 10px;
  border-radius: var(--r-xs);
  border-left: 3px solid var(--flag);
  background: color-mix(in srgb, var(--flag) 14%, transparent);
}

.comment.admin .comment-by {
  color: var(--flag);
}

.comment.admin .pill.xs {
  color: #FFFFFF;
  background: var(--flag);
  border-color: var(--flag);
}

.icon-btn.sm {
  width: 30px;
  height: 30px;
  font-size: 15px;
}

/* Rows that navigate. .item already carries the layout, .plain-link kills
   the anchor styling, this just adds the press feedback. */
a.item.plain-link:active {
  background: var(--surface-2);
}

a.item .ti-chevron-right {
  flex: none;
  font-size: 16px;
}

/* ==============================================================
   Multi-day runs: date badge and the day picker
   ============================================================== */

.thumb { position: relative; }

/* Sits on the artwork so the "this is a run, not one shift" signal is
   visible before any text is read. */
.thumb-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(6px);
}

.day {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Days already applied for or confirmed, so a long run reads at a glance. */
.day.on {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.day-date {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.day-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.day-act { flex: none; }
.day-act .btn { white-space: nowrap; }

/* Slot counts are admin-only, so staff see a two-column meta strip rather
   than a three-column one with a hole where the numbers used to be. */
.meta.two { grid-template-columns: repeat(2, 1fr); }

/* Date pairs. min-width:0 stops the overflow, but a full "25/09/2026 03:30 PM"
   plus a picker icon still crowds half a phone screen, so below this width the
   two fields stack instead of squeezing. */
@media (max-width: 460px) {
  .grid-2.dates { grid-template-columns: 1fr; }
  .grid-2.dates .field { margin-bottom: 0; }
  .grid-2.dates > *:first-child { margin-bottom: 12px; }
}

/* Shrink the horizontal padding on date inputs so the value has more room
   before the browser starts clipping it. */
input[type="datetime-local"].input,
input[type="date"].input { padding: 0 12px; }

/* ==============================================================
   Admin web view
   Admin work gets done on a desktop as often as a phone, so admin
   pages spread out above 900px. Staff pages stay phone-width on
   purpose: that is the shape the PWA and the TWA are built around.
   Opt out with data-view="mobile" via the header toggle.
   ============================================================== */

@media (min-width: 900px) {
  html:not([data-view="mobile"]) body.admin .wrap {
    max-width: 1180px;
    padding: 0 32px 40px;
  }

  /* Two columns of rows instead of one long list. */
  html:not([data-view="mobile"]) body.admin .stack-s {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
  }

  /* Forms have room for three fields across. */
  html:not([data-view="mobile"]) body.admin .grid-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Date pairs stay paired, so start and end read together. */
  html:not([data-view="mobile"]) body.admin .grid-2.dates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Submit buttons look absurd stretched across 1180px. */
  html:not([data-view="mobile"]) body.admin .btn.block {
    display: inline-flex;
    width: auto;
    min-width: 220px;
  }

  /* Hero and thumbnail artwork gets very tall at this width. */
  html:not([data-view="mobile"]) body.admin .hero { aspect-ratio: 32 / 9; }

  /* .wrap carries 32px of side padding here, so the full-bleed app bar
     has to pull out by the same amount or it leaves a sliver either side. */
  html:not([data-view="mobile"]) body.admin .appbar {
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

.view-toggle { flex: none; }

/* Hidden until the script decides the viewport is wide enough to offer it. */
.view-toggle[hidden] { display: none; }

/* ==============================================================
   Text size
   Set from Profile > Appearance, stored as wf-fs, applied as
   data-fs on <html> before first paint.

   This scales the whole interface rather than font sizes alone,
   and that is deliberate. Every size in this stylesheet is in px,
   and buttons, inputs and pills carry fixed heights - .btn is 48px,
   .input is 50px. Growing the text inside a fixed-height control
   clips descenders and pushes labels out of pills, so text-only
   scaling would look broken at the sizes that actually help someone
   who needs them. Scaling the container keeps every proportion
   intact, which is what the browser's own page zoom does.

   Applied to .wrap and .tabbar rather than to body, so the fixed
   tab bar is scaled explicitly instead of relying on how each
   browser resolves fixed positioning inside a zoomed ancestor.
   ============================================================== */

html[data-fs="sm"] .wrap,
html[data-fs="sm"] .tabbar { zoom: 0.92; }

html[data-fs="lg"] .wrap,
html[data-fs="lg"] .tabbar { zoom: 1.12; }

html[data-fs="xl"] .wrap,
html[data-fs="xl"] .tabbar { zoom: 1.28; }

/* The tab bar is fixed and scaled, so it needs more clearance underneath the
   content. That clearance is body padding, which sits outside the zoomed
   element and therefore has to be raised separately. Pages without a tab bar
   (.plain, i.e. sign in and register) are left alone. */
html[data-fs="sm"] body:not(.plain) { padding-bottom: 104px; }
html[data-fs="lg"] body:not(.plain) { padding-bottom: 130px; }
html[data-fs="xl"] body:not(.plain) { padding-bottom: 150px; }

/* The size buttons sit four across on a phone, which is tight for
   "Default" and "Largest". Let them shrink rather than overflow. */
#fs-seg button { padding-left: 4px; padding-right: 4px; min-width: 0; }

/* ==============================================================
   App bar, tabs and calendars
   The staff-facing screens follow the reference app: a solid teal
   bar at the top of every page, an underlined tab strip on the
   shift detail page, a block calendar for setting availability
   and a dot calendar for reading it back.
   ============================================================== */

/* ---------- app bar ---------- */

/* Full bleed inside .wrap, which carries 22px of side padding. */
.appbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin: 0 -22px 16px;
  padding: 10px 16px;
  background: var(--appbar);
  color: var(--appbar-ink);
}

.appbar h1,
.appbar .appbar-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--appbar-ink);
  min-width: 0;
}

.appbar .appbar-sub {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--appbar-ink) 70%, transparent);
  margin-top: 1px;
}

/* Icon buttons sitting on the bar lose their card styling. */
.appbar .icon-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--appbar-ink);
  font-size: 22px;
}

.appbar .icon-btn:active { background: color-mix(in srgb, var(--appbar-ink) 12%, transparent); }
.appbar .dot { background: var(--bad); top: 8px; right: 9px; }

/* The bar reaches the top of the viewport, so the safe area has to be
   paid for here rather than on the body. */
.appbar { padding-top: calc(10px + env(safe-area-inset-top)); }

/* ---------- tab strip ---------- */

.tabs {
  display: flex;
  gap: 6px;
  margin: 0 -22px 18px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.tabs::-webkit-scrollbar { display: none; }

.tabs button {
  flex: none;
  height: 46px;
  padding: 0 14px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.tabs button.on {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

.tabpane[hidden] { display: none; }

/* ---------- hero with the title laid over it ---------- */

.hero.titled { position: relative; }

.hero.titled .hero-title {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}

.hero.titled::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}

.hero.titled .hero-title { z-index: 1; }

/* ---------- quick pickers on the availability screen ---------- */

.pick-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.pick-row::-webkit-scrollbar { display: none; }

.pick-row button {
  flex: none;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ink-3);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.pick-row.weeks button {
  border-radius: var(--r-xs);
  min-width: 78px;
}

.pick-row button:active,
.pick-row button.on {
  background: var(--avail);
  border-color: var(--avail);
  color: var(--avail-ink);
}

/* ---------- block calendar (setting availability) ---------- */

.calx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 14px;
}

.calx-head b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--accent-deep);
}

.calx-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-deep);
  background: none;
  color: var(--accent-deep);
  font-size: 18px;
  cursor: pointer;
}

.calx-dow,
.calx {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calx-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .04em;
  margin-bottom: 6px;
}

/* No gap between cells: contiguous available days join into one green
   band, which is what makes a week of availability readable at a glance. */
.calx { row-gap: 8px; }

.calx button {
  aspect-ratio: 1 / 1;
  border: 0;
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
}

.calx button[data-state="available"] {
  background: var(--avail);
  color: var(--avail-ink);
}

.calx .blank { background: none; }
.calx button[data-past] { opacity: .45; cursor: default; }

.calx button.today::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-deep);
}

.calx button.sel { outline: 2px solid var(--ink); outline-offset: -2px; }

/* A booked shift on the day. */
.calx .mark {
  position: absolute;
  bottom: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}

.calx button[data-state="available"] .mark { background: var(--accent-ink); }

/* ---------- dot calendar (reading availability back) ---------- */

.dotcal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 12px;
  text-align: center;
}

.dotcal button {
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 0;
  position: relative;
}

.dotcal .pip {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 4px auto 0;
  background: var(--ink);
}

.dotcal button[data-state="available"] .pip { background: var(--avail); }

.dotcal button.today .num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-deep);
}

.dotcal button.sel .num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2196F3;
  border: 0;
  color: #fff;
}

.dotcal button.sel .pip { background: #111; }

/* Day summary under the dot calendar. */
.day-note {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--avail);
}

.day-note .d { text-align: center; font-weight: 700; font-size: 15px; }
.day-note .d span { display: block; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.day-note .sep { width: 1px; background: var(--border); }
.day-note .txt { font-size: 17px; font-weight: 600; align-self: center; }

/* ---------- explore cards ---------- */

.ex-card {
  display: block;
  flex: 0 0 clamp(160px, 46vw, 200px);
  color: inherit;
}

.ex-card:hover { text-decoration: none; }

.ex-card .shot {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--surface-2);
}

.ex-card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-card .t { font-size: 14px; font-weight: 700; margin-top: 10px; line-height: 1.3; }
.ex-card .d { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

/* Next shift card: thumbnail on the left, details on the right,
   actions along the bottom. */
.next-card {
  flex: 0 0 clamp(280px, 88vw, 340px);
  border-radius: var(--r-sm);
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px var(--shadow-d), 0 8px 20px var(--shadow-d);
}

.next-card .body { display: flex; gap: 12px; }

.next-card .shot {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--surface-2);
}

.next-card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.next-card .ln { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.next-card .ln + .ln { margin-top: 6px; }
.next-card .ln i { font-size: 15px; flex: none; margin-top: 1px; }
.next-card .ln.big { font-size: 14px; font-weight: 700; color: var(--ink); }
.next-card .acts { display: flex; gap: 10px; margin-top: 14px; }
.next-card .acts > * { flex: 1; }

/* ---------- floating action button ---------- */

/* Sits above the tab bar, right-hand side, as in the reference app. */
.fab {
  position: fixed;
  right: max(22px, calc(50% - 210px));
  bottom: 100px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 24px;
  box-shadow: 0 6px 18px var(--shadow-d);
  z-index: 45;
}

.fab:hover { text-decoration: none; }
.fab:active { background: var(--accent-2); }