/* ==========================================================================
   Component styles.
   ========================================================================== */

/* ---------- Header ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-height);
}
.app-header__left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.app-header__title { font-size: 17px; font-weight: 600; color: var(--text); }
.app-header__store {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header__right { display: flex; align-items: center; gap: 10px; }

/* Avatar */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.avatar:hover { text-decoration: none; }
.avatar--lg { width: 56px; height: 56px; font-size: 20px; }

/* Theme toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
}
.theme-toggle__icon { font-size: 16px; line-height: 1; }
[data-theme="dark"] .theme-toggle__icon--light,
[data-theme="light"] .theme-toggle__icon--dark { display: none; }

/* ---------- Bottom nav ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text-subtle);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 4px;
}
.nav-item:hover { text-decoration: none; }
.nav-item__icon svg { width: 22px; height: 22px; display: block; }
.nav-item--active { color: var(--accent-blue-ink); font-weight: 600; }
.nav-item--active svg { stroke: var(--accent-blue-ink); }

@media (min-width: 1200px) {
  /* Desktop: leave bottom nav in place for consistency; Phase 11 can
     graduate this to a sidebar if we want. */
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--accent-blue);
  color: #fff;
}
[data-theme="light"] .btn--primary { background: var(--accent-blue); color: #fff; }
.btn--primary:hover { filter: brightness(1.1); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--danger {
  background: var(--accent-red-soft);
  color: var(--accent-red-ink);
  border-color: var(--accent-red);
}

/* ---------- Panels / cards ---------- */
.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.panel--muted { background: var(--bg-surface-2); }

.placeholder__hero { padding: 8px 2px 16px; }
.placeholder__hero h2 { font-size: 22px; font-weight: 700; }
.placeholder__role { color: var(--text-muted); margin-top: 2px; font-size: 13px; }

.check-list { padding-left: 18px; }
.check-list li { list-style: disc; margin: 4px 0; }

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.menu-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  text-decoration: none;
  color: var(--text);
}
.menu-tile__label { font-weight: 600; }
.menu-tile__desc  { font-size: 12px; color: var(--text-muted); }
.menu-tile__phase { font-size: 10px; color: var(--text-subtle); margin-top: 4px; }

.link-list li { padding: 6px 0; }

.me-header { display: flex; align-items: center; gap: 14px; }
.me-name   { font-size: 18px; font-weight: 600; }
.me-role   { color: var(--text-muted); font-size: 13px; }

/* ---------- Forms / fields ---------- */
.form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
.form-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
.form-card__error,
.login__error {
  color: var(--accent-red-ink);
  font-size: 13px;
  min-height: 18px;
  margin: 6px 0;
}

.field { display: block; margin-bottom: 12px; }
.field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.field__input,
.field__select {
  width: 100%;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 15px;
}
.field__input:focus,
.field__select:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(12,68,124,0.25);
}

/* ---------- Login ---------- */
.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  max-width: 420px;
  margin: 0 auto;
  gap: 20px;
}
.login__brand { text-align: center; }
.login__brand-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}
.login__brand-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 4px;
}
.login__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.pin-display {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 10px;
}
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: transparent;
  transition: background 80ms ease, border-color 80ms ease, transform 80ms ease;
}
.pin-dot.filled {
  background: var(--accent-blue-ink);
  border-color: var(--accent-blue-ink);
  transform: scale(1.05);
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}
.key {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  font-size: 22px;
  font-weight: 600;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  user-select: none;
}
.key:active { background: var(--bg-surface-2); transform: scale(0.98); }
.key--primary {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}
.key--ghost {
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
}

/* ---------- Store select ---------- */
.store-select {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  max-width: 480px;
  margin: 0 auto;
  gap: 20px;
}
.store-select__header { text-align: center; }
.store-select__header h1 { font-size: 22px; font-weight: 700; }
.store-select__sub { color: var(--text-muted); margin-top: 4px; font-size: 14px; }

.store-select__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.store-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: left;
  color: var(--text);
}
.store-card:hover { border-color: var(--accent-blue-ink); }
.store-card__name { font-weight: 600; font-size: 16px; }
.store-card__addr { font-size: 12px; color: var(--text-muted); }

.store-select__empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.store-select__footer { margin-top: 8px; font-size: 13px; color: var(--text-muted); }

/* ---------- Change PIN ---------- */
.change-pin {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 24px 16px;
  max-width: 420px;
  margin: 0 auto;
  gap: 20px;
}
.change-pin__header { text-align: center; }
.change-pin__header h1 { font-size: 22px; font-weight: 700; }
.change-pin__sub { color: var(--text-muted); margin-top: 4px; font-size: 14px; }
.change-pin__footer { text-align: center; font-size: 13px; color: var(--text-muted); }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
  max-width: calc(100% - 24px);
}
.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  font-size: 14px;
  color: var(--text);
  pointer-events: auto;
}
.toast--success { border-left: 4px solid var(--accent-green); }
.toast--error   { border-left: 4px solid var(--accent-red); }
.toast--info    { border-left: 4px solid var(--accent-blue-ink); }

/* ---------- Button size variant ---------- */
.btn--sm {
  padding: 6px 10px;
  font-size: 12px;
  min-height: 32px;
}

/* ---------- Admin page shell ---------- */
.admin-page { padding: 4px 2px 20px; }
.admin-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.admin-page__crumbs {
  font-size: 12px;
  color: var(--text-subtle);
  margin-bottom: 2px;
}
.admin-page__crumbs a { color: var(--text-muted); }
.admin-page__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

/* ---------- Admin table ---------- */
.admin-table__wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--bg-surface-2); }
.admin-table__actions-col { width: 1%; white-space: nowrap; text-align: right; }
.admin-table__actions-col .btn + .btn { margin-left: 4px; }
.admin-table__address,
.admin-table__stores { min-width: 180px; }
.admin-table__empty,
.admin-table__loading td { text-align: center; padding: 22px 12px; }

@media (max-width: 560px) {
  .admin-table__address { display: none; }
  .admin-table th, .admin-table td { padding: 10px 8px; }
  .admin-table__actions-col { text-align: left; }
  .admin-table__actions-col .btn { display: inline-block; margin: 2px 4px 2px 0; }
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  line-height: 1.6;
}
.badge--ok {
  background: var(--accent-green-soft);
  color: var(--accent-green-ink);
  border-color: color-mix(in srgb, var(--accent-green) 35%, transparent);
}
.badge--muted {
  background: var(--bg-surface-2);
  color: var(--text-muted);
  border-color: var(--border);
}
.badge--warn {
  background: var(--accent-amber-soft);
  color: var(--accent-amber-ink);
  border-color: color-mix(in srgb, var(--accent-amber) 35%, transparent);
}

/* ---------- Modal (native <dialog>) ---------- */
/*
 * Our dialogs are opened via a JS shim (see `normalizeDialogs` in
 * assets/js/app.js) that calls `.show()` instead of `.showModal()`
 * so the dialog stays in the normal document tree — essential for
 * browser-automation screenshot tools, which skip the native top
 * layer. The `.is-modal` class is applied by that shim on open;
 * fixed-centered positioning and the backdrop/body lock below take
 * over from what `showModal()` used to provide.
 */
.modal {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text);
  padding: 0;
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-md);
}
/* Kept for older browsers that might still use native showModal(). */
.modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

/* Shimmed modal positioning (non-top-layer, screenshot-friendly). */
dialog.is-modal[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1001;
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
/* Manual backdrop, rendered in the normal document so screenshots
   show the dimmed overlay behind the dialog. `pointer-events: none`
   keeps clicks reaching the dialog on top. */
body.has-modal-dialog {
  overflow: hidden;
}
body.has-modal-dialog::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1000;
  pointer-events: none;
}
/* Variant darkenings, mirroring the old `.modal--camera::backdrop`
   and `.modal--lightbox::backdrop` rules. */
body.has-modal-dialog.modal-backdrop--dark::before {
  background: rgba(0, 0, 0, 0.85);
}
body.has-modal-dialog.modal-backdrop--darkest::before {
  background: rgba(0, 0, 0, 0.9);
}
.modal__form { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -4px -4px 0;
}
.modal__title { font-size: 17px; font-weight: 600; }
.modal__subtitle { font-size: 13px; color: var(--text-muted); }
.modal__close {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.modal__close:hover { background: var(--bg-surface-2); color: var(--text); }
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ---------- Form field ---------- */
.form-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.form-field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-field__help {
  font-size: 12px;
  color: var(--text-muted);
}
.form-field .required { color: var(--accent-red-ink); font-weight: 700; }
.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="tel"],
.form-field select {
  width: 100%;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 15px;
}
.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(12, 68, 124, 0.25);
}
.form-field--chips { border: 0; padding: 0; }
.form-field--chips legend { padding: 0; margin-bottom: 6px; }

.form-error {
  color: var(--accent-red-ink);
  font-size: 13px;
  background: var(--accent-red-soft);
  border: 1px solid color-mix(in srgb, var(--accent-red) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.form-error[hidden] { display: none; }

/* ---------- Chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 180px;
  overflow: auto;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.chip input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid var(--border-strong);
  background: var(--input-bg);
  display: inline-block;
  position: relative;
}
.chip input[type="checkbox"]:checked {
  background: var(--accent-blue-ink);
  border-color: var(--accent-blue-ink);
}
.chip input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 1px 3px;
  border-right: 2px solid #0c1620;
  border-bottom: 2px solid #0c1620;
  transform: rotate(45deg) translate(-1px, -2px);
  width: 3px;
  height: 7px;
}
.chip:has(input[type="checkbox"]:checked) {
  background: var(--accent-blue-soft);
  border-color: var(--accent-blue-ink);
  color: var(--accent-blue-text);
}
.chip--static {
  background: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 8px;
  cursor: default;
}

/* ---------- Banner ---------- */
.banner {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
}
.banner--warn {
  background: var(--accent-amber-soft);
  border-color: color-mix(in srgb, var(--accent-amber) 35%, transparent);
  color: var(--accent-amber-ink);
}
.banner a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   Store picker (small inline control used on admin list/tasks pages).
   ========================================================================== */
.store-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.store-picker__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.store-picker select {
  background: transparent;
  color: var(--text);
  border: 0;
  padding: 2px 4px;
  font-size: 14px;
  font-weight: 600;
}
.store-picker select:focus { outline: none; }
.store-picker--fixed strong { font-size: 14px; color: var(--text); }

/* ==========================================================================
   Lists grid (admin editor + employee read view).
   Stacks on mobile, two columns on wide screens.
   ========================================================================== */
.lists-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px) {
  .lists-grid { grid-template-columns: 1fr 1fr; }
}

.list-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.list-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.list-panel__title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.list-panel__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-panel__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.6;
  border: 1px solid transparent;
}
.list-panel__badge--open {
  background: var(--accent-blue-soft);
  color: var(--accent-blue-text);
  border-color: color-mix(in srgb, var(--accent-blue-ink) 40%, transparent);
}
.list-panel__badge--close {
  background: var(--accent-amber-soft);
  color: var(--accent-amber-ink);
  border-color: color-mix(in srgb, var(--accent-amber) 40%, transparent);
}

.list-panel__items {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.list-panel__empty {
  padding: 8px 4px 4px;
}

.list-panel__add {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.list-panel__add input[type="text"] {
  flex: 1;
  min-width: 0;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 14px;
}
.list-panel__add input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(12, 68, 124, 0.25);
}

/* ==========================================================================
   List item row.
   ========================================================================== */
.list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
}
.list-item + .list-item { border-top: 1px solid var(--border); border-radius: 0; }
.list-item:hover { background: var(--bg-surface-2); }
.list-item--placeholder:hover { background: transparent; }

.list-item__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}
.list-item__edit {
  width: 100%;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-focus);
  border-radius: var(--radius-xs);
  padding: 6px 8px;
  font-size: 14px;
}
.list-item__edit:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(12, 68, 124, 0.25);
}

.list-item__reorder,
.list-item__actions {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-shrink: 0;
}
.list-item__btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
}
.list-item__btn:hover {
  background: var(--bg-sunken);
  color: var(--text);
  border-color: var(--border);
}
.list-item__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.list-item__btn:disabled:hover {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.list-item__btn--danger:hover {
  background: var(--accent-red-soft);
  color: var(--accent-red-ink);
  border-color: color-mix(in srgb, var(--accent-red) 40%, transparent);
}

/* ==========================================================================
   List read view (employee-facing /list page).
   ========================================================================== */
.list-view { display: flex; flex-direction: column; gap: 12px; }
.list-view__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.list-view__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.list-view__sub { margin-top: 2px; }
.list-view__note { margin: 0 2px; }

.list-panel__items--read { gap: 4px; }
/* Read-view rows stack vertically: title on its own line, then an action
   row below. Keeps the title readable even when there are many chips + 
   buttons hanging off the right. */
.list-item--read {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 6px;
}
.list-item--read:hover { background: transparent; }
.list-item--read + .list-item--read { border-top: 1px solid var(--border); border-radius: 0; }

.list-item__check {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  cursor: pointer;
}
.list-item__check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--accent-blue-ink);
}
.list-item--done .list-item__text {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Action row: assignee chip + buttons + completion metadata all flow on
   one line under the title, wrapping as needed. Indent to visually align
   under the item text (past the 20px checkbox + 10px gap). */
.list-item__meta,
.list-item__completion {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 30px;
  margin: 0;
}
.list-item__meta { row-gap: 6px; }
.list-item__completion {
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
}
.list-panel__progress {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Chips (assignee + generic choice chips for recurrence picker).
   ========================================================================== */
.chip--assignee {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-sunken);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 12px;
  padding: 3px 6px 3px 10px;
  border-radius: var(--radius-pill);
}
.chip--me {
  background: var(--accent-blue-soft);
  color: var(--accent-blue-text);
  border-color: color-mix(in srgb, var(--accent-blue-ink) 40%, transparent);
}
.chip__label { line-height: 1.4; }
.chip__x {
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  font-size: 13px;
  line-height: 1;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.chip__x:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }

.chip--choice {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: 13px;
}
.chip--choice input[type="radio"],
.chip--choice input[type="checkbox"] {
  display: none;
}
.chip--choice:has(input:checked) {
  background: var(--accent-blue-soft);
  color: var(--accent-blue-text);
  border-color: color-mix(in srgb, var(--accent-blue-ink) 50%, transparent);
}
.chip--choice:hover { background: var(--bg-sunken); }

.chip--open {
  background: var(--bg-sunken);
  color: var(--text-muted);
  border: 1px dashed var(--border);
  padding: 2px 8px;
  font-size: 12px;
  border-radius: var(--radius-pill);
}
.chip--global {
  background: var(--accent-amber-soft);
  color: var(--accent-amber-ink);
  border: 1px solid color-mix(in srgb, var(--accent-amber) 35%, transparent);
  padding: 2px 8px;
  font-size: 11px;
  border-radius: var(--radius-pill);
}
.chip--recur {
  background: transparent;
  border: 1px dashed var(--border);
  padding: 2px 8px;
  font-size: 12px;
  border-radius: var(--radius-pill);
}
.chip--overdue {
  background: var(--accent-red-soft);
  color: var(--accent-red-ink);
  border: 1px solid color-mix(in srgb, var(--accent-red) 45%, transparent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.chip--overdue .chip__label {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* ==========================================================================
   Tiny button variant for inline actions inside list items / task cards.
   ========================================================================== */
.btn--xs {
  padding: 3px 8px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  min-height: 26px;
}

/* ==========================================================================
   Admin actions row (store picker + primary CTA side by side).
   ========================================================================== */
.admin-page__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Admin tasks table.
   ========================================================================== */
.admin-table--tasks .admin-table__title-col {
  min-width: 180px;
}
.admin-table--tasks .admin-table__actions-col {
  white-space: nowrap;
  text-align: right;
}
.badge--flag {
  color: var(--accent-red-ink);
  background: var(--accent-red-soft);
  border: 1px solid color-mix(in srgb, var(--accent-red) 35%, transparent);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}
.badge--muted {
  background: var(--bg-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: 11px;
}

/* ==========================================================================
   Form rows + inline form fields (used in the task editor).
   ========================================================================== */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-field--inline {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-field--inline .form-field__label {
  margin-bottom: 0;
  min-width: 120px;
}
.form-field--inline input {
  max-width: 120px;
}

/* ==========================================================================
   Recurrence picker (inside task editor modal).
   ========================================================================== */
.recurrence-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recurrence-picker__type {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recurrence-picker__detail {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dow-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dow-chip { min-width: 48px; justify-content: center; }

/* Wider task editor modal. */
.modal--task .modal__form {
  max-width: 560px;
}

/* ==========================================================================
   Tasks Today view (/tasks).
   ========================================================================== */
.tasks-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tasks-view__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tasks-view__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.tasks-view__sub { margin-top: 2px; }

.task-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.task-section__count { font-weight: 500; text-transform: none; letter-spacing: 0; }
.task-section__flag { color: var(--accent-red-ink); font-size: 15px; }
.task-section--flagged .task-section__title { color: var(--accent-red-ink); }

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.task-card--flagged {
  border-color: color-mix(in srgb, var(--accent-red) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-red) 25%, transparent);
}
.task-card--overdue {
  border-left: 3px solid var(--accent-red-ink);
}
.task-card--overdue.task-card--flagged {
  /* Both flagged + overdue: keep the red ring but add a bolder left rail. */
  border-left-width: 4px;
}
.task-card--done {
  opacity: 0.72;
}
.task-card--done .task-card__title {
  text-decoration: line-through;
  color: var(--text-muted);
}
.task-card--placeholder {
  border-style: dashed;
  background: transparent;
  text-align: center;
  padding: 16px;
}
.task-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.task-card__flag {
  color: var(--accent-red-ink);
  font-size: 15px;
}
.task-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.task-card__desc {
  margin: 0;
}
.task-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.task-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.task-card__done-meta {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
   More page — store switcher.
   ========================================================================== */
.store-switcher {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.store-switcher__btn {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.store-switcher__btn:hover:not(:disabled):not(.is-current) {
  background: var(--bg-sunken);
}
.store-switcher__btn.is-current {
  border-color: var(--accent-blue-ink);
  background: color-mix(in srgb, var(--accent-blue-ink) 10%, transparent);
  cursor: default;
}
.store-switcher__btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.store-switcher__btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid var(--accent-blue-ink);
  border-top-color: transparent;
  animation: store-switch-spin 0.7s linear infinite;
}
@keyframes store-switch-spin {
  to { transform: rotate(360deg); }
}
.store-switcher__name {
  font-weight: 600;
  font-size: 15px;
}
.store-switcher__addr {
  font-size: 12px;
}
.store-switcher__tag {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-blue-ink);
  background: color-mix(in srgb, var(--accent-blue-ink) 18%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Camera modal (Phase 6) — multi-photo capture on photo-required items.
   ========================================================================== */
.modal--camera::backdrop {
  background: rgba(0, 0, 0, 0.85);
}
.modal--camera {
  width: min(100vw, 720px);
  max-width: 100vw;
  max-height: 100dvh;
  border: 0;
  background: var(--bg-surface);
  color: var(--text);
  padding: 0;
  margin: 0 auto;
}
.camera-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 12px;
  max-width: none;
  width: 100%;
}
.camera-head {
  margin-bottom: 0;
}
.camera-head .modal__title {
  font-size: 18px;
}
.camera-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.camera-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.camera-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.camera-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.65);
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.camera-status {
  text-align: center;
  padding: 4px 0;
}
.camera-error {
  margin: 0;
}

/* Thumbnail strip */
.camera-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.camera-strip__empty {
  padding: 6px 2px;
}
.camera-strip__item {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
}
.camera-strip__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camera-strip__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-strip__remove:hover {
  background: var(--accent-red-ink);
}
.camera-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.camera-actions .btn--primary:last-child {
  margin-left: auto;
}

/* ==========================================================================
   Photo-required affordances in admin UIs.
   ========================================================================== */
.badge--photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent-blue-soft, color-mix(in srgb, var(--accent-blue-ink) 18%, transparent));
  color: var(--accent-blue-ink);
  font-size: 13px;
  line-height: 1;
}
.list-item__btn--toggle {
  position: relative;
  opacity: 0.5;
}
.list-item__btn--toggle.is-on {
  opacity: 1;
  color: var(--accent-blue-ink);
}
.list-item__btn--toggle.is-on::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-blue-ink);
}
.list-item__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--accent-blue-ink);
  opacity: 0.85;
  font-size: 14px;
  margin-left: 4px;
}

/* ==========================================================================
   Photo feed (admin) — grid of completion thumbnails.
   ========================================================================== */
.admin-page__toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.form-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.form-field--inline .form-field__label {
  min-width: 46px;
}
.photo-feed__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.photo-feed__tile {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.photo-feed__btn {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.photo-feed__btn:hover {
  background: var(--bg-sunken);
}
.photo-feed__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
}
.photo-feed__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
}
.photo-feed__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-feed__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-feed__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 14px 0 4px;
}

/* Lightbox dialog */
.modal--lightbox::backdrop {
  background: rgba(0, 0, 0, 0.9);
}
.modal--lightbox {
  width: min(100vw, 960px);
  max-width: 100vw;
  max-height: 100dvh;
  border: 0;
  background: var(--bg-surface);
  color: var(--text);
  padding: 0;
  margin: 0 auto;
}
.lightbox-form {
  position: relative;
  padding: 14px;
  max-width: none;
  width: 100%;
}
.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lightbox-image {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: #000;
  border-radius: var(--radius-md);
}
.lightbox-caption {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.lightbox-note {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--bg-sunken);
  border-left: 3px solid var(--accent-blue-ink);
  border-radius: var(--radius-xs);
  font-size: 13px;
}
.modal__close {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.modal__close:hover {
  color: var(--text);
}

/* ==========================================================================
   Phase 7 — Operational tools
   ========================================================================== */

/* Shared status pills (used by equipment + suggestions) */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.status-pill--open,
.status-pill--alert {
  background: color-mix(in srgb, var(--accent-red-ink) 20%, transparent);
  color: var(--accent-red-ink);
  border-color: transparent;
}
.status-pill--in_progress {
  background: color-mix(in srgb, var(--accent-yellow-ink, #c78116) 20%, transparent);
  color: var(--accent-yellow-ink, #c78116);
  border-color: transparent;
}
.status-pill--resolved,
.status-pill--ok {
  background: color-mix(in srgb, var(--accent-green-ink, #1d9e75) 20%, transparent);
  color: var(--accent-green-ink, #1d9e75);
  border-color: transparent;
}

/* Pagination footer reused by notes, logs, issues, suggestions */
.note-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 14px 0 4px;
}

/* Shared 2-column form row (e.g. min/max temp) */
.form-row {
  display: flex;
  gap: 10px;
}
.form-row--2col > .form-field {
  flex: 1 1 0;
  min-width: 0;
}

/* ---------- Shift notes ---------- */
.note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.note-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.note-card--pinned {
  border-color: var(--accent-blue-ink);
  background: color-mix(in srgb, var(--accent-blue-ink) 8%, var(--bg-surface));
}
.note-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.note-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge--pin {
  font-size: 13px;
}
.note-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.note-card__body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}
.note-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.chip--role {
  font-size: 11px;
  padding: 1px 6px;
  background: var(--bg-sunken);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}

/* ---------- Temps: station cards + log list ---------- */
.temps-stations {
  margin-bottom: 20px;
}
.temps-stations__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.temps-station {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.temps-station__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.temps-station__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.temps-station__last {
  font-weight: 600;
  color: var(--accent-green-ink, #1d9e75);
}
.temps-station__last.is-flagged {
  color: var(--accent-red-ink);
}
.temps-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.temps-log {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.temps-log__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.temps-log__value {
  font-size: 18px;
  font-weight: 700;
}
.temps-log__station {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-muted);
}
.temps-log__meta { margin-top: 2px; }
.temps-log__note {
  margin: 6px 0 0;
  padding: 6px 10px;
  background: var(--bg-sunken);
  border-left: 3px solid var(--accent-blue-ink);
  border-radius: var(--radius-xs);
  font-size: 13px;
}
.temps-log__photos {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.temps-log__thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.temps-log__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 6px;
}
.temps-prompt {
  margin: 6px 0 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent-red-ink) 12%, transparent);
  color: var(--accent-red-ink);
  border-left: 3px solid var(--accent-red-ink);
  border-radius: var(--radius-xs);
  font-size: 13px;
}
.temps-photos {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

/* ---------- Admin station list ---------- */
.admin-station-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-station {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.admin-station--archived { opacity: 0.65; }
.admin-station__reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-station__body {
  flex: 1;
  min-width: 0;
}
.admin-station__name {
  font-weight: 600;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.admin-station__range { margin-top: 2px; }
.admin-station__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.badge--muted {
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-weight: 500;
}

/* ---------- Equipment issues ---------- */
.issue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.issue-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.issue-card__btn {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.issue-card__btn:hover { background: var(--bg-sunken); }
.issue-card__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.issue-card__label { font-weight: 600; }
.issue-card__body { font-size: 14px; line-height: 1.4; color: var(--text); }
.issue-card__meta { margin-top: 4px; }
.modal--issue-detail,
.modal--suggestion-detail {
  width: min(100vw, 720px);
  max-width: 100vw;
  max-height: 100dvh;
  border: 0;
  background: var(--bg-surface);
  color: var(--text);
  padding: 0;
  margin: 0 auto;
}
.issue-detail,
.suggestion-detail {
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.issue-detail__head,
.suggestion-detail__head {
  padding-right: 32px;
}
.issue-detail__desc,
.suggestion-detail__body {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.55;
}
.issue-detail__photos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.issue-detail__transitions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.issue-events {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.issue-events > li {
  padding: 8px 10px;
  border-left: 2px solid var(--border);
  background: var(--bg-sunken);
  border-radius: var(--radius-xs);
  font-size: 13px;
}
.issue-events__when { margin-right: 4px; }
.issue-events__note {
  margin-top: 4px;
  font-style: italic;
  color: var(--text-muted);
}

/* ---------- Suggestions ---------- */
.suggestion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.suggestion-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.suggestion-card__btn {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.suggestion-card__btn:hover { background: var(--bg-sunken); }
.suggestion-card__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.suggestion-card__title { font-weight: 600; }
.suggestion-card__body { font-size: 14px; line-height: 1.4; }
.suggestion-card__meta { margin-top: 4px; }
.suggestion-detail__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.reply-thread {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reply {
  padding: 10px 12px;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border);
}
.reply__head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.reply__body {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.reply-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* ==========================================================================
   Phase 8 — Tutorials
   ========================================================================== */

/* Form helper used on the tutorials library toolbar */
.form-field--grow { flex: 1 1 auto; min-width: 140px; }

/* Category chip used on tutorial cards + detail header */
.chip--cat {
  background: color-mix(in srgb, var(--accent-blue-ink) 14%, var(--bg-sunken));
  color: var(--accent-blue-ink);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* "How to" chip used on task cards + list items */
.chip--howto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  background: color-mix(in srgb, var(--accent-blue-ink) 12%, transparent);
  color: var(--accent-blue-ink);
  border: 1px solid color-mix(in srgb, var(--accent-blue-ink) 25%, transparent);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  max-width: 100%;
}
.chip--howto:hover {
  background: color-mix(in srgb, var(--accent-blue-ink) 20%, transparent);
  text-decoration: none;
}
.chip--howto__icon { font-size: 13px; }
.task-card__howto,
.list-item__howto {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 2px;
}
.list-item__howto {
  margin-left: 30px; /* line up under the text, past the checkbox */
}

/* Tutorials library grid */
.tutorial-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.tutorial-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.tutorial-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}
.tutorial-card--archived { opacity: 0.6; }
.tutorial-card__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
}
.tutorial-card__head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tutorial-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.tutorial-card__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.tutorial-card__foot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tutorial-card__bar {
  height: 4px;
  background: var(--bg-sunken);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.tutorial-card__bar > span {
  display: block;
  height: 100%;
  background: var(--accent-blue-ink);
  transition: width 0.2s ease;
}

/* Tutorial detail view */
.tutorial-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tutorial-detail__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tutorial-detail__head-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tutorial-detail__title {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.25;
}
.tutorial-detail__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}
.tutorial-detail__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
}
.tutorial-detail__progress .tutorial-card__bar { margin-top: 0; }
.tutorial-detail__admin {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tutorial-detail__linked {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip--link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  font-size: 12px;
}
.chip-remove {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.chip-remove:hover { color: var(--accent-red-ink); }

/* Video list */
.video-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: vidnum;
}
.video-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.video-item__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.video-item__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.video-item__admin {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.video-item__player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.video-item__mp4,
.video-item__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-item__poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a, #333);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 14px;
}
.video-item__play {
  font-size: 42px;
  line-height: 1;
  opacity: 0.85;
}
.video-item__poster:hover .video-item__play { opacity: 1; }
.video-item__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   Tutorial body (Phase 8.6) — rich rendered content + editor chrome.
   The `.prose` namespace isolates typographic defaults so they don't
   leak into the admin chrome above/below the body.
   ========================================================================== */

.tutorial-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.tutorial-body--empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
}

/* Typography inside rendered tutorial bodies. Only applies when the
   .prose modifier is on the section so empty/placeholder states keep
   their own styling. */
.tutorial-body.prose > * + * { margin-top: 0.75em; }
.tutorial-body.prose h2 {
  margin-top: 1.4em;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.tutorial-body.prose h3 {
  margin-top: 1.25em;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.tutorial-body.prose p { margin: 0; }
.tutorial-body.prose ul,
.tutorial-body.prose ol {
  margin: 0;
  padding-left: 1.4em;
}
.tutorial-body.prose ul { list-style: disc; }
.tutorial-body.prose ol { list-style: decimal; }
.tutorial-body.prose li + li { margin-top: 0.25em; }
.tutorial-body.prose a {
  color: var(--accent-blue-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tutorial-body.prose a:hover { color: var(--accent-blue); }
.tutorial-body.prose blockquote {
  margin: 0;
  padding: 6px 12px;
  border-left: 3px solid var(--border-strong, var(--border));
  color: var(--text-muted);
  background: var(--bg-sunken);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tutorial-body.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.tutorial-body.prose pre,
.tutorial-body.prose pre.ql-syntax {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}
.tutorial-body.prose pre code { padding: 0; border: 0; background: transparent; }

/* Images are constrained to container width; captions (if any) wrap
   below via <figure>. Click hook is wired by the JS lightbox; fall
   back to an inline "click to view" cursor so it reads as interactive. */
.tutorial-body.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  display: block;
}

/* Body-embedded video figure: poster/iframe on top, caption with
   title + duration + mark-watched underneath. Keeps the same 16:9 box
   the sidebar video list uses so switching between panels feels
   consistent. */
.tutorial-body__video {
  margin: 1.2em 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tutorial-body__video > .tutorial-body__video-poster,
.tutorial-body__video > .video-item__poster,
.tutorial-body__video > .tutorial-body__video-el,
.tutorial-body__video > iframe.video-item__iframe {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  border: 0;
}
.tutorial-body__video .video-item__poster {
  /* Override the absolute-positioning preset inherited from the
     sidebar-video-list styles; body embeds are their own block. */
  position: relative;
  inset: auto;
}
.tutorial-body__video-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}
.tutorial-body__video-title { color: var(--text); font-weight: 600; }
.tutorial-body__video-mark { margin-left: auto; }

/* Mark-as-read completion chip / button row */
.tutorial-detail__markread {
  display: flex;
  justify-content: center;
  padding: 14px 0;
}

.tutorial-detail__videos-panel {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tutorial-detail__videos-panel .section-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Tutorial body editor (Quill, managers only).
   ========================================================================== */

/* Wider modal for the body editor so prose has breathing room. */
.modal--wide {
  width: min(100vw, 760px);
}
@media (min-width: 900px) {
  .modal--wide { width: min(100vw, 820px); }
}

.form-field--body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field--body > .form-field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tutorial-body-editor {
  min-height: 280px;
  max-height: 55vh;
  display: flex;
  flex-direction: column;
}
/* Quill's snow theme assumes a light background — nudge surface colors
   toward the app tokens so the editor reads correctly under dark
   theme without replacing Quill's own CSS file. */
.tutorial-body-editor .ql-toolbar.ql-snow,
.tutorial-body-editor .ql-container.ql-snow {
  border-color: var(--border);
  background: var(--bg-surface);
  color: var(--text);
}
.tutorial-body-editor .ql-toolbar.ql-snow {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}
.tutorial-body-editor .ql-container.ql-snow {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  flex: 1;
  overflow: auto;
  font-size: 15px;
  line-height: 1.55;
}
.tutorial-body-editor .ql-editor {
  min-height: 240px;
  color: var(--text);
}
.tutorial-body-editor .ql-snow .ql-stroke { stroke: var(--text); }
.tutorial-body-editor .ql-snow .ql-fill   { fill: var(--text); }
.tutorial-body-editor .ql-snow .ql-picker-label { color: var(--text); }
.tutorial-body-editor .ql-snow .ql-picker-options {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text);
}
.tutorial-body-editor .ql-editor.ql-blank::before {
  color: var(--text-muted);
  font-style: normal;
}

/* Custom toolbar buttons: video + image. Quill renders a <button
   class="ql-tutorialVideo"> when a toolbar entry uses that key; we
   inject a simple label because Quill only bundles SVGs for its own
   built-ins. */
.tutorial-body-editor .ql-toolbar .ql-tutorialVideo::before { content: "\25B6 Video"; }
.tutorial-body-editor .ql-toolbar .ql-tutorialImage::before { content: "\1F5BC Image"; }
.tutorial-body-editor .ql-toolbar .ql-tutorialVideo,
.tutorial-body-editor .ql-toolbar .ql-tutorialImage {
  width: auto !important;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text);
}

/* Video placeholder chip inside the editor (what the TutorialVideoBlot
   renders). Mirrors the `.tut-video-chip` class the JS blot emits. */
.tut-video-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  user-select: none;
}
.tut-video-chip__icon { font-size: 22px; }
.tut-video-chip__title { font-weight: 600; color: var(--text); }
.tut-video-chip__meta  { color: var(--text-muted); font-size: 12px; }

/* Dialog-style picker the editor pops up when the admin clicks the
   Video button. Positioned absolutely within the editor field. */
.tut-video-picker {
  position: absolute;
  z-index: 1000;
  min-width: 260px;
  max-width: 340px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tut-video-picker__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.tut-video-picker__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.tut-video-picker__item {
  text-align: left;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.tut-video-picker__item:hover {
  background: var(--bg-sunken);
  border-color: var(--border);
}
.tut-video-picker__empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 2px;
}
.tut-video-picker__foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* Lightweight toast used for "+1 point" / "+5 completed" flashes */
.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -10px);
  background: var(--text);
  color: var(--bg-surface);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ==========================================================================
   Home view (Phase 5).
   ========================================================================== */
.home-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 4px;
}
.home-hero__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.home-hero__sub { margin: 0; }

.home-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.home-card__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.home-card__flag {
  color: var(--accent-red-ink);
  font-size: 15px;
}
.home-card__body {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
}
.home-card__byline { margin: 0; }
.home-card__empty {
  font-size: 14px;
  margin: 0;
  padding: 4px 0 2px;
}

/* Filled accent cards (motivation + daily focus). In dark mode the token
   values match the reference mock (blue #0c447c / amber #633806 with their
   matching "text" tokens); in light mode they resolve to the soft tinted
   surfaces so the cards stay readable in both themes. */
.home-card--motivation {
  background: var(--accent-blue);
  border: none;
  color: var(--accent-blue-text);
}
.home-card--focus {
  background: var(--accent-amber);
  border: none;
  color: var(--accent-amber-ink);
}
.home-card--motivation .home-card__title,
.home-card--focus .home-card__title,
.home-card--motivation .home-card__body,
.home-card--focus .home-card__body,
.home-card--motivation .home-card__byline,
.home-card--focus .home-card__byline,
.home-card--motivation .home-card__empty,
.home-card--focus .home-card__empty {
  color: inherit;
}
.home-card--motivation .home-card__title,
.home-card--focus .home-card__title {
  font-size: 11px;
  letter-spacing: 0.5px;
  opacity: 0.92;
}
.home-card--motivation .home-card__byline,
.home-card--focus .home-card__byline,
.home-card--motivation .home-card__empty,
.home-card--focus .home-card__empty {
  opacity: 0.75;
}
/* Ghost button sits cleanly on the fill — borrows the card's text color. */
.home-card--motivation .btn--ghost,
.home-card--focus .btn--ghost {
  color: inherit;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  background: transparent;
}
.home-card--motivation .btn--ghost:hover,
.home-card--focus .btn--ghost:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
/* Motivation has no visible label, so the lone button right-aligns. */
.home-card__head--actions-only { justify-content: flex-end; }

.home-card--flagged {
  border-left: 3px solid var(--accent-red-ink);
}
.home-card--leaderboard .home-card__head { align-items: center; }

/* Flagged preview list */
.home-flagged {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-flagged__item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.home-flagged__item + .home-flagged__item {
  border-top: 1px solid var(--border);
}
.home-flagged__title {
  font-size: 14px;
  color: var(--text);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* Progress grid — tiles for Mine / Open / Done / Overdue */
.progress-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.progress-grid:has(> .progress-tile:nth-child(4)) {
  grid-template-columns: repeat(4, 1fr);
}
.progress-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
.progress-tile:hover {
  background: var(--bg-surface-2);
}
.progress-tile__value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.progress-tile__value--done { color: var(--accent-green-ink, var(--accent-blue-ink)); }
.progress-tile__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.progress-tile--overdue {
  background: var(--accent-red-soft);
  border-color: color-mix(in srgb, var(--accent-red) 40%, transparent);
}
.progress-tile--overdue .progress-tile__value,
.progress-tile--overdue .progress-tile__label {
  color: var(--accent-red-ink);
}

/* List progress bars — opening + closing */
.list-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.list-progress__row {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  color: var(--text);
  text-decoration: none;
}
.list-progress__row:hover { background: var(--bg-sunken); border-radius: var(--radius-xs); }
.list-progress__label {
  font-size: 13px;
  color: var(--text-muted);
}
.list-progress__bar {
  height: 8px;
  background: var(--bg-sunken);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.list-progress__bar > span {
  display: block;
  height: 100%;
  background: var(--accent-blue-ink);
  transition: width 200ms ease-out;
}
.list-progress__count { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Assignee picker list (inside the list-view assignee dialog).
   ========================================================================== */
.assignee-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow: auto;
}
.assignee-list__btn {
  width: 100%;
  text-align: left;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.assignee-list__btn:hover {
  background: var(--bg-sunken);
  border-color: color-mix(in srgb, var(--accent-blue-ink) 30%, transparent);
}
.assignee-list__btn.is-current {
  background: var(--accent-blue-soft);
  color: var(--accent-blue-text);
  border-color: color-mix(in srgb, var(--accent-blue-ink) 40%, transparent);
}
.assignee-list__role {
  text-transform: capitalize;
}

/* ==========================================================================
   Phase 9 — Gamification surfaces.

   Covers the Me page (profile header + rank bar + badges grid +
   leaderboard + activity), the home-card top-5 leaderboard, the
   milestone popup stack, and the Admin badge manager table polish.
   All rules are additive; nothing here overrides Phase 3–8 selectors.
   ========================================================================== */

/* --- Leaderboard (shared between home card + Me full view) ---------- */
.leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.leaderboard__row {
  display: grid;
  grid-template-columns: 36px 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md, 10px);
  background: var(--bg-surface-alt, rgba(255,255,255,0.03));
  transition: background 0.15s ease;
}
.leaderboard__row.is-me {
  background: var(--accent-blue-bg, #0c447c);
  color: var(--text-on-accent, #f6f9ff);
}
.leaderboard__row.is-first {
  background: linear-gradient(90deg, rgba(235,184,78,0.18), transparent 70%);
  border-left: 3px solid #ebb84e;
  padding-left: 7px;
}
.leaderboard__row.is-second { border-left: 3px solid #c6c6c6; padding-left: 7px; }
.leaderboard__row.is-third  { border-left: 3px solid #c08457; padding-left: 7px; }
.leaderboard__pos {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
.leaderboard__row.is-me .leaderboard__pos,
.leaderboard__row.is-first .leaderboard__pos { color: inherit; }
.leaderboard__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard__points {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.leaderboard--compact .leaderboard__row { padding: 6px 8px; }
.leaderboard__self {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md, 10px);
  background: var(--bg-surface-alt, rgba(255,255,255,0.03));
}

/* Home-card variant inherits .leaderboard base but keeps the split head */
.home-card--leaderboard .home-card__head--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chip--link {
  cursor: pointer;
  text-decoration: none;
}

/* --- Me page header + rank bar -------------------------------------- */
.me-view { display: flex; flex-direction: column; gap: 14px; }
.me-view .panel { padding: 16px; }
.me-header-card { display: flex; flex-direction: column; gap: 12px; }
.me-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.me-header__ident { min-width: 0; }
.me-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-role { margin: 2px 0 0; }
.me-header__stats {
  display: flex;
  gap: 14px;
  text-align: right;
}
.me-stat { display: flex; flex-direction: column; }
.me-stat__label { text-transform: uppercase; letter-spacing: 0.04em; }
.me-stat__value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.me-rank-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-surface-alt, rgba(255,255,255,0.07));
  overflow: hidden;
}
.me-rank-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #1d9e75, #4ade80);
  transition: width 0.4s ease;
}
.me-rank-caption { margin: 0; }

/* --- Badges grid ---------------------------------------------------- */
.me-badges-panel .panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.badge-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: var(--bg-surface-alt, rgba(255,255,255,0.03));
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  color: inherit;
  font: inherit;
}
.badge-chip:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.12); }
.badge-chip.is-locked { opacity: 0.45; filter: grayscale(0.4); }
.badge-chip.is-earned { border-color: rgba(74,222,128,0.35); }
.badge-chip__icon { font-size: 26px; line-height: 1; }
.badge-chip__name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.badge-popover {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elevated, rgba(255,255,255,0.05));
  border-radius: var(--radius-md, 10px);
  margin: -4px 0 6px;
  position: relative;
}
.badge-popover__icon { font-size: 26px; line-height: 1; }
.badge-popover__body { flex: 1; min-width: 0; }
.badge-popover__body strong { font-size: 14px; }
.badge-popover__body p { margin: 2px 0 0; }
.badge-popover__close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  align-self: flex-start;
  padding: 2px 6px;
}

/* --- Leaderboard filters on Me page -------------------------------- */
.me-leaderboard-panel .panel__head--split {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.leaderboard-filters { display: flex; gap: 6px; }
.form-select--sm {
  padding: 4px 8px;
  font-size: 13px;
  min-height: 32px;
}

/* --- Recent activity feed ------------------------------------------ */
.me-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.me-activity__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.me-activity__row:last-child { border-bottom: 0; }
.me-activity__points {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 16px;
  text-align: right;
  color: var(--accent-green, #4ade80);
}
.me-activity__row.is-reversed .me-activity__points {
  text-decoration: line-through;
  color: var(--text-muted);
}
.me-activity__meta { min-width: 0; font-size: 14px; line-height: 1.4; }

/* --- Admin tools panel --------------------------------------------- */
.me-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Milestone popup stack ----------------------------------------- */
.milestone-host {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}
.milestone {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  background: var(--bg-elevated, #1b2534);
  color: var(--text, #e8edf3);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border-left: 4px solid #4ade80;
  transform: translateX(110%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.2,.8,.25,1), opacity 0.35s ease;
}
.milestone.is-in  { transform: translateX(0); opacity: 1; }
.milestone.is-out { transform: translateX(110%); opacity: 0; }
.milestone--rank_up { border-left-color: #ebb84e; }
.milestone--badge   { border-left-color: #4ade80; }
.milestone__icon { font-size: 28px; line-height: 1; }
.milestone__body strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.milestone__body p { margin: 2px 0 0; font-size: 15px; line-height: 1.3; }
.milestone__close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  align-self: flex-start;
  padding: 2px 6px;
}

/* --- Admin badge manager table -------------------------------------- */
.admin-table--badges .admin-table__icon { font-size: 22px; text-align: center; width: 54px; }
.form-field--narrow { max-width: 120px; }
.chip--ok     { background: rgba(74,222,128,0.2);  color: #86efac; }
.chip--muted  { background: rgba(255,255,255,0.08); color: var(--text-muted); }

/* ==========================================================================
   Phase 10 — Dashboards, detail drilldown, history browser, reports.

   Rules are additive. Shares `.panel`, `.admin-table`, `.chip--*`
   primitives with earlier phases.
   ========================================================================== */

/* --- Detail drilldown (/task, /list_item) --------------------------- */
.detail-view { display: flex; flex-direction: column; gap: 14px; }
.detail-view__head { display: flex; flex-direction: column; gap: 4px; }
.detail-view__crumbs { display: flex; gap: 6px; font-size: 14px; }
.detail-view__title { font-size: 22px; font-weight: 700; margin: 2px 0; }
.detail-view__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-view__meta { margin: 0; }
.detail-view__kv {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 6px;
  column-gap: 10px;
  margin: 0 0 10px;
}
.detail-view__kv-row { display: contents; }
.detail-view__kv dt {
  color: var(--text-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.detail-view__kv dd { margin: 0; font-weight: 500; }
.detail-view__desc { white-space: pre-wrap; margin: 4px 0 0; }
.detail-view__tutorials { margin-top: 12px; }
.detail-view__tut-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.detail-view__note {
  margin: 4px 0 0;
  padding: 6px 8px;
  background: var(--bg-surface-alt, rgba(255,255,255,0.03));
  border-left: 3px solid var(--accent-blue-ink, #1d9e75);
  border-radius: 4px;
  white-space: pre-wrap;
}
.detail-view__photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.detail-view__photos--sm { gap: 4px; }
.detail-view__photo { display: inline-block; border-radius: 8px; overflow: hidden; }
.detail-view__photo img { width: 80px; height: 80px; object-fit: cover; display: block; }
.detail-view__photo--sm img { width: 48px; height: 48px; }
.detail-view__history-wrap { overflow-x: auto; }
.detail-view__history { width: 100%; border-collapse: collapse; font-size: 14px; }
.detail-view__history th,
.detail-view__history td {
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.detail-view__history th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.detail-view__history-foot { display: flex; justify-content: center; padding: 10px 0; }
.detail-view__ledger { list-style: none; margin: 0; padding: 0; }
.detail-view__ledger li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
  font-size: 14px;
}
.detail-view__ledger li:last-child { border-bottom: 0; }
.detail-view__alerts { list-style: none; margin: 0; padding: 0; }
.detail-view__alerts li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.task-card__title-link {
  color: inherit;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.task-card__title-link:hover .task-card__title { text-decoration: underline; }
.list-item__details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  margin-left: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  border-radius: 4px;
}
.list-item__details:hover { color: var(--text); background: var(--bg-surface-alt, rgba(255,255,255,0.05)); }

/* --- Admin dashboard ----------------------------------------------- */
.dashboard-filters { display: flex; gap: 6px; align-items: center; }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.dashboard-tile {
  padding: 14px;
  background: var(--bg-surface, #1b2534);
  border-radius: var(--radius-md, 10px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid transparent;
}
.dashboard-tile--warn { border-left-color: #ebb84e; }
.dashboard-tile--ok   { border-left-color: #4ade80; }
.dashboard-tile__label {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.dashboard-tile__value {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dashboard-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-surface-alt, rgba(255,255,255,0.07));
  overflow: hidden;
  margin-top: 6px;
}
.dashboard-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1d9e75, #4ade80);
  transition: width 0.3s ease;
}
.dashboard-recent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.dashboard-feed { list-style: none; margin: 0; padding: 0; }
.dashboard-feed li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
  font-size: 14px;
}
.dashboard-feed li:last-child { border-bottom: 0; }
.dashboard-alerts { list-style: none; margin: 0; padding: 0; }
.dashboard-alerts__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.dashboard-alerts__row:last-child { border-bottom: 0; }
.dashboard-alerts__actions { flex-shrink: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--bg-surface-alt, rgba(255,255,255,0.03)); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- History browser ----------------------------------------------- */
.history-filters {
  background: var(--bg-surface, #1b2534);
  border-radius: var(--radius-md, 10px);
  padding: 12px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.history-filters__group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.history-filters__group legend { padding: 0; margin-right: 6px; }
.history-filters__group label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.history-filters__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.history-filters__row--toggles { justify-content: space-between; }
.history-filters__buttons { display: flex; gap: 6px; }
.form-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.history-table th, .history-table td { vertical-align: top; padding: 10px 8px; }
.history-row__note {
  font-size: 13px;
  line-height: 1.3;
  max-width: 40ch;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.history-row--completion { border-left: 3px solid #4ade80; }
.history-row--temp       { border-left: 3px solid #60a5fa; }
.history-row--equipment  { border-left: 3px solid #ebb84e; }
.history-row--suggestion { border-left: 3px solid #c084fc; }
.history-row--shift_note { border-left: 3px solid #94a3b8; }
.history-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

/* --- Reports page -------------------------------------------------- */
.report-form { display: flex; flex-direction: column; gap: 10px; }

/* --- Temp review grid ---------------------------------------------- */
.temp-review-table { min-width: 100%; }
.temp-review-table__station { position: sticky; left: 0; background: var(--bg-surface, #1b2534); min-width: 160px; }
.temp-review-table th { white-space: nowrap; }
.temp-review-cell { min-width: 72px; padding: 8px; }
.temp-review-cell--empty { color: var(--text-muted); }
.temp-review-cell--flagged {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}
.temp-review-cell--flagged strong { color: #fecaca; }
.admin-table tr.is-archived { opacity: 0.55; }

/* ==========================================================================
   Mobile scale-up pass.

   The base tokens were drawn for a 375px mockup that looks appropriately
   sized in a design file but comes out undersized on a real high-DPR
   phone. This block bumps tap targets, nav labels, body text, keypad
   buttons, and form controls on narrow viewports. Desktop styles are
   unchanged.
   ========================================================================== */
@media (max-width: 767px) {
  html { font-size: 17px; }

  /* Token overrides so toasts / page padding stay in sync with the taller
     mobile header and nav. */
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --header-height: 56px;
    --nav-height: 72px;
  }

  /* --- App header ------------------------------------------------------- */
  .app-header {
    padding: 10px 14px;
  }
  .app-header__title { font-size: 19px; }
  .app-header__store { font-size: 13px; }
  .avatar { width: 36px; height: 36px; font-size: 13px; }
  .theme-toggle { width: 40px; height: 40px; }

  /* --- Bottom nav (bigger labels, bigger icons, bigger tap area) -------- */
  .bottom-nav {
    padding: 8px 0 calc(12px + env(safe-area-inset-bottom));
  }
  .nav-item {
    font-size: 12px;
    gap: 4px;
    padding: 4px 4px;
  }
  .nav-item__icon svg { width: 26px; height: 26px; }

  /* --- Page content ----------------------------------------------------- */
  .app-main {
    padding: 14px 14px calc(var(--nav-height) + 32px);
  }
  .panel { padding: 16px; margin-bottom: 14px; }
  .panel p, .panel li { font-size: 15px; line-height: 1.5; }
  .check-list li { margin: 6px 0; }
  .section-title { font-size: 14px; margin: 16px 2px 10px; }

  /* --- Placeholder hero (home/list/tasks/more landing text) ------------- */
  .placeholder__hero h2 { font-size: 26px; }
  .placeholder__role { font-size: 14px; }

  /* --- Buttons (bigger tap targets system-wide) ------------------------- */
  .btn { min-height: 44px; padding: 12px 18px; font-size: 15px; }
  .btn--sm { min-height: 36px; padding: 8px 12px; font-size: 13px; }

  /* --- Login ------------------------------------------------------------ */
  .login {
    justify-content: flex-start;
    padding: 10vh 18px calc(24px + env(safe-area-inset-bottom));
    gap: 22px;
  }
  .login__brand-title { font-size: 32px; }
  .login__brand-sub { font-size: 15px; margin-top: 6px; }
  .pin-display { gap: 14px; padding: 12px; }
  .pin-dot { width: 16px; height: 16px; }
  .keypad { gap: 12px; }
  .key { height: 70px; font-size: 28px; }
  .key--ghost { font-size: 15px; }

  /* --- Store select ----------------------------------------------------- */
  .store-select {
    justify-content: flex-start;
    padding-top: 10vh;
  }
  .store-select__header h1 { font-size: 26px; }
  .store-select__sub { font-size: 15px; }
  .store-card { padding: 18px; }
  .store-card__name { font-size: 17px; }
  .store-card__addr { font-size: 13px; }

  /* --- Change PIN ------------------------------------------------------- */
  .change-pin {
    justify-content: flex-start;
    padding-top: 8vh;
  }
  .change-pin__header h1 { font-size: 26px; }
  .change-pin__sub { font-size: 15px; }

  /* --- Forms (prevent iOS zoom-on-focus: >= 16px font-size) ------------- */
  .field__input,
  .field__select,
  .form-field input[type="text"],
  .form-field input[type="number"],
  .form-field input[type="tel"],
  .form-field select { font-size: 16px; padding: 12px; }
  .field__label { font-size: 12px; }

  /* --- Me page --------------------------------------------------------- */
  .avatar--lg { width: 64px; height: 64px; font-size: 22px; }
  .me-name { font-size: 20px; }
  .me-role { font-size: 14px; }

  /* --- Menu tiles (More) ----------------------------------------------- */
  .menu-grid { gap: 12px; }
  .menu-tile { padding: 16px; gap: 6px; }
  .menu-tile__label { font-size: 16px; }
  .menu-tile__desc { font-size: 13px; }
  .menu-tile__phase { font-size: 11px; }

  /* --- Admin pages ----------------------------------------------------- */
  .admin-page__title { font-size: 24px; }
  .admin-page__crumbs { font-size: 13px; }
  .admin-table { font-size: 15px; }
  .admin-table thead th { font-size: 12px; }
  .admin-table th, .admin-table td { padding: 12px 10px; }

  /* --- Modal ----------------------------------------------------------- */
  .modal__title { font-size: 19px; }
  .modal__subtitle { font-size: 14px; }
  .form-field__label { font-size: 13px; }
  .form-field__help { font-size: 13px; }
  .chip { font-size: 13px; padding: 6px 12px; }

  /* --- Toasts ---------------------------------------------------------- */
  .toast { font-size: 15px; padding: 12px 16px; }

  /* --- Lists (admin editor + read view) -------------------------------- */
  .list-view__title { font-size: 24px; }
  .list-panel { padding: 16px 14px 12px; }
  .list-panel__title { font-size: 17px; }
  .list-panel__badge { font-size: 11px; padding: 3px 9px; }
  .list-item__text { font-size: 15px; }
  .list-item__btn { width: 36px; height: 36px; font-size: 16px; }
  .list-panel__add input[type="text"] { font-size: 16px; padding: 10px 12px; }
  .list-item--read { padding: 12px 4px; }
  .list-item__check input[type="checkbox"] { width: 22px; height: 22px; }

  /* --- Tasks (admin editor + Today view) ------------------------------- */
  .tasks-view__title { font-size: 24px; }
  .task-section__title { font-size: 13px; }
  .task-card { padding: 14px; }
  .task-card__title { font-size: 16px; }
  .task-card__actions .btn--sm { min-height: 38px; padding: 7px 12px; }
  .chip--choice { font-size: 14px; padding: 8px 12px; min-height: 38px; }
  .dow-chip { min-width: 58px; }
  .modal--task .modal__form { max-width: none; }
  .admin-table--tasks .admin-table__actions-col .btn { margin: 2px 4px 2px 0; }

  /* --- Home view ------------------------------------------------------- */
  .home-hero__title { font-size: 26px; }
  .home-card { padding: 16px; }
  .home-card__body { font-size: 17px; }
  .home-card__title { font-size: 13px; }
  .progress-tile { padding: 12px 6px; }
  .progress-tile__value { font-size: 24px; }

  /* --- Camera modal (Phase 6) ----------------------------------------- */
  .modal--camera {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .camera-form {
    height: 100dvh;
    justify-content: space-between;
    gap: 10px;
  }
  .camera-stage {
    flex: 1;
    aspect-ratio: auto;
  }
  .camera-countdown { font-size: 120px; }
  .camera-strip__item { width: 64px; height: 64px; }
  .camera-actions .btn { min-height: 44px; }

  /* --- Photo feed ------------------------------------------------------ */
  .photo-feed__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lightbox-image { max-height: 60vh; }
}