/*
  pwa-base.css -- promoter PWA shell (17-05): navy topbar, light body, icon
  bottom nav, cards, buttons, badges, skeleton loaders, banners and motion.

  Consumes custom properties declared by static/css/tokens.css (colour, type,
  spacing, radius, shadow, motion). Declares no top-level custom-property
  block of its own -- a second copy of the token set is the exact drift
  this phase exists to kill. Every colour below is a var() reference (or a
  color-mix() derived from one); there is no raw hex literal in this file.

  Covers two audiences:
    1. The shell markup this plan owns directly (base_pwa.html's topbar,
       bottom nav, banners) -- built to the D-approved mockups.
    2. Back-compat class names (.pwa-container, .pwa-card, .btn-primary,
       .pwa-badge, badge-*, status-*, the mt-*, mb-* and text-* utility set)
       that every existing PWA screen template still renders with, so
       17-07 through 17-12 inherit a consistent look instead of a blank
       unstyled page until each of those plans lands.

  Accent discipline (see DESIGN.md): brand green and orange are hairlines,
  ticks, dots, strokes, focus rings and one small CTA -- never fills or
  large blocks. Where earlier markup used a green fill for a primary
  button, this file corrects it to the approved navy fill; that is a
  deliberate, in-scope fix, not scope creep -- see 17-05-SUMMARY.md.
*/

/* ------------------------------------------------------------------ */
/* 1. Reset                                                            */
/* ------------------------------------------------------------------ */

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

body.pwa-body {
  background: var(--slate-50);
  font-family: var(--font-body);
  color: var(--slate-900);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ------------------------------------------------------------------ */
/* 2. Topbar -- navy, carries the myDM mark, safe-area aware            */
/* ------------------------------------------------------------------ */

.pwa-topbar {
  background: var(--color-cobalt);
  color: var(--color-white);
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top, 0) var(--space-4) 0;
  height: 56px;
  flex-shrink: 0;
}

.pwa-topbar .mydm-mark { display: block; }

/* ------------------------------------------------------------------ */
/* 3. Container                                                        */
/* ------------------------------------------------------------------ */

.pwa-container {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) calc(var(--space-12) + var(--space-6));
}

/* ------------------------------------------------------------------ */
/* 4. Cards, hero numbers, list rows                                   */
/* ------------------------------------------------------------------ */

.pwa-card {
  background: var(--color-white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-card);
}

.eyebrow {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-ink);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.hero-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-hero);
  color: var(--color-cobalt);
  line-height: 1;
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--slate-200);
}

.list-row:last-child { border-bottom: none; }

/* ------------------------------------------------------------------ */
/* 5. Typography (legacy class names, restyled onto canon tokens)      */
/* ------------------------------------------------------------------ */

.pwa-title {
  font-family: var(--font-heading);
  color: var(--color-cobalt);
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-3);
}

.pwa-subtitle { color: var(--slate-600); font-size: var(--text-small); }

.pwa-label {
  display: block;
  color: var(--slate-600);
  font-size: var(--text-small);
  margin-bottom: var(--space-1);
}

/* ------------------------------------------------------------------ */
/* 6. Buttons -- one navy-fill primary per screen, quiet secondary.    */
/*    Accent green/orange never fill a button; .btn-primary.accent's   */
/*    2px green border is the one small-CTA exception DESIGN.md allows */
/* ------------------------------------------------------------------ */

.btn-primary,
.btn-secondary,
.btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap-target);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.btn-primary {
  background: var(--color-cobalt);
  color: var(--color-white);
  border: none;
  font-family: var(--font-heading);
}

.btn-primary:active { transform: scale(0.98); background: var(--color-cobalt-dark); }

/* The one small CTA per DESIGN.md accent discipline -- green border only, never a fill */
.btn-primary.accent {
  background: var(--color-white);
  color: var(--color-cobalt);
  border: 2px solid var(--color-green);
}

.btn-primary.accent:active { background: color-mix(in srgb, var(--color-green) 8%, var(--color-white)); }

.btn-secondary {
  background: var(--color-white);
  color: var(--color-cobalt);
  border: 1.5px solid var(--slate-200);
  font-weight: 600;
  font-size: var(--text-small);
  margin-top: var(--space-3);
}

.btn-secondary:active { transform: scale(0.98); }

.btn-danger {
  background: var(--color-danger);
  color: var(--color-white);
  border: none;
}

.btn-danger:active { transform: scale(0.98); }

.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-small); width: auto; min-height: 36px; }
.btn-lg { padding: var(--space-5) var(--space-8); font-size: 20px; font-weight: 700; }

.btn-clock-out {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-cobalt);
  color: var(--color-cobalt);
  background: var(--color-white);
  font-weight: 700;
  text-decoration: none;
  min-height: var(--tap-target);
}

.btn-logout {
  border: 1.5px solid var(--slate-200);
  background: var(--color-white);
  color: var(--slate-600);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  font-weight: 600;
  font-size: var(--text-small);
  cursor: pointer;
  min-height: 40px;
}

.btn-logout:hover, .btn-logout:active { border-color: var(--color-cobalt); color: var(--color-cobalt); }

/* ------------------------------------------------------------------ */
/* 7. Inputs                                                            */
/* ------------------------------------------------------------------ */

.pwa-input {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-3);
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-family: var(--font-body);
  background: var(--color-white);
  color: var(--slate-900);
}

.pwa-input:focus {
  border-color: var(--color-green);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-green) 18%, transparent);
}

.pwa-checkbox { width: 24px; height: 24px; accent-color: var(--color-green); }

/* ------------------------------------------------------------------ */
/* 8. Bottom nav -- 5 items, outline sprite icons, 48px+ tap targets    */
/* ------------------------------------------------------------------ */

.pwa-bottom-nav,
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--color-white);
  border-top: 1px solid var(--slate-200);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 100;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-target);
  padding: var(--space-2) 0 var(--space-3);
  text-decoration: none;
  color: var(--slate-600);
  font-size: 10.5px;
  font-weight: 600;
}

.nav-item .icon { width: 22px; height: 22px; }

/* Legacy emoji-span nav icon, pre-existing in the untouched certification
   PWA templates (out of scope for this plan) -- kept sized, not restyled. */
.nav-item .nav-icon { font-size: 20px; line-height: 1.2; }
.nav-item .nav-label { margin-top: 2px; }

.nav-item.active { color: var(--green-ink); }

/* ------------------------------------------------------------------ */
/* 9. Badges / status blocks -- dark text on a light tint, never a      */
/*    solid accent fill                                                */
/* ------------------------------------------------------------------ */

.pwa-badge {
  display: inline-block;
  font-size: var(--text-small);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.badge-success { background: color-mix(in srgb, var(--color-success) 15%, var(--color-white)); color: color-mix(in srgb, var(--color-success) 65%, var(--color-navy)); }
.badge-info { background: color-mix(in srgb, var(--color-info) 15%, var(--color-white)); color: color-mix(in srgb, var(--color-info) 65%, var(--color-navy)); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }

.pwa-status {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  border: 1px solid transparent;
}

.status-success { background: color-mix(in srgb, var(--color-success) 15%, var(--color-white)); color: color-mix(in srgb, var(--color-success) 65%, var(--color-navy)); border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-white)); }
.status-info { background: color-mix(in srgb, var(--color-info) 15%, var(--color-white)); color: color-mix(in srgb, var(--color-info) 65%, var(--color-navy)); border-color: color-mix(in srgb, var(--color-info) 35%, var(--color-white)); }
.status-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.status-error { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.status-copy { color: var(--slate-600); }

/* ------------------------------------------------------------------ */
/* 10. Empty / error state -- outline icon + one line + one action      */
/* ------------------------------------------------------------------ */

.empty-state { text-align: center; padding: var(--space-8) var(--space-4); color: var(--slate-600); }
.empty-state svg, .empty-state .icon { color: var(--slate-400); margin-bottom: var(--space-3); }
.empty-state p { font-size: var(--text-body); margin: 0 0 var(--space-5); }

/* ------------------------------------------------------------------ */
/* 11. Shared step indicator (capture flow + registration)             */
/* ------------------------------------------------------------------ */

.step-indicator { margin-bottom: var(--space-8); }
.step-track { display: flex; align-items: center; }
.step-hairline { flex: 1; height: 2px; background: var(--slate-200); }
.step-hairline.done { background: var(--color-green); }

.step-dot {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-200);
  color: transparent;
}

.step-dot.done { background: var(--color-green); color: var(--color-navy); }
.step-dot.current { background: var(--color-orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-orange) 16%, transparent); }

.step-current-label {
  text-align: center;
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-cobalt);
  font-size: 15px;
}

.step-current-label .step-count { color: var(--slate-600); font-weight: 500; font-size: var(--text-small); }

/* ------------------------------------------------------------------ */
/* 12. Banners -- offline / update-available                           */
/* ------------------------------------------------------------------ */

#update-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--color-cobalt);
  color: var(--color-white);
  padding: var(--space-3);
  text-align: center;
  z-index: 9999;
  font-size: var(--text-small);
}

#update-banner button {
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid var(--color-white);
  background: transparent;
  color: var(--color-white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
}

/* Offline banner (Phase 18, D-14): no signal, or something saved on the phone is
   waiting to send. It can now carry several short lines (waiting, how many, the
   iPhone and home-screen lines), so it sits in the flow above the topbar and
   sticks there, pushing the page down instead of covering it. */
#offline-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  position: sticky;
  top: 0;
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-bottom: 1px solid var(--color-warning-border);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  z-index: 9998;
  font-size: var(--text-small);
}

#offline-banner .icon { flex-shrink: 0; }
#offline-banner-lines { text-align: left; }
.offline-status__line { margin: 0 0 var(--space-1); }
.offline-status__line:last-child { margin-bottom: 0; }
/* The capture page's send line (capture-offline.js): orange while anything waits, green once the office has it. */
.offline-status__line--pending { color: var(--orange-ink); font-weight: 600; }
.offline-status__line--done { color: var(--green-ink); font-weight: 600; }
/* A refused or conflicted line with its "Remove from my phone" button (outbox-page.js withRemove). */
.offline-status__item { margin: 0 0 var(--space-2); }
.offline-status__item:last-child { margin-bottom: 0; }
.offline-status__remove { margin-top: var(--space-1); }
/* The receipt for a clock-in or clock-out that was sent (D, 1 Nov 2026: "Promoters might not notice that"): big,
   centred, bold, green. Used by the phone's receipt (clock-offline.js showResult) and the Clocked in page. */
.clock-sent {
  display: block;
  text-align: center;
  font-size: var(--text-h2, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--green-ink);
  padding: var(--space-4) var(--space-3);
}
.pwa-status.clock-sent {
  background: color-mix(in srgb, var(--color-success) 15%, var(--color-white));
  border-radius: var(--radius-md, 12px);
}
/* The clock pages' way out when myDM cannot be reached (clock-offline.js): Try again, the normal way, Log in. */
.offline-status__action { margin-top: var(--space-2); }

/* ------------------------------------------------------------------ */
/* 13. Skeleton loaders -- neutral slate blocks, cheap shimmer          */
/*     Transform-only animation: safe on low-end Android, and the      */
/*     reduced-motion block in tokens.css silences it in one place.    */
/* ------------------------------------------------------------------ */

.skeleton {
  background: var(--slate-200);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-white) 60%, transparent), transparent);
  animation: pwa-shimmer calc(var(--dur-base) * 6) linear infinite;
}

@keyframes pwa-shimmer {
  100% { transform: translateX(100%); }
}

/* ------------------------------------------------------------------ */
/* 14. Motion -- step transitions, success tick, focus rings            */
/* ------------------------------------------------------------------ */

.fade-slide-in { animation: pwa-fade-slide-in var(--dur-base) var(--ease-out); }

@keyframes pwa-fade-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-dot.done .icon { animation: pwa-tick-in var(--dur-base) var(--ease-out); }

@keyframes pwa-tick-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 15. Utilities (legacy names, unchanged spacing/size values so       */
/*     nothing shifts on pages this plan does not touch)               */
/* ------------------------------------------------------------------ */

.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-1); }
.mt-8 { margin-top: var(--space-2); }
.mt-12 { margin-top: var(--space-3); }
.mt-16 { margin-top: var(--space-4); }
.mt-24 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-1); }
.mb-8 { margin-bottom: var(--space-2); }
.mb-12 { margin-bottom: var(--space-3); }
.mb-16 { margin-bottom: var(--space-4); }
.mb-24 { margin-bottom: var(--space-6); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.gap-8 { gap: var(--space-2); }
.gap-12 { gap: var(--space-3); }
.text-navy { color: var(--color-cobalt); }
.text-green { color: var(--green-ink); }
.text-muted { color: var(--slate-600); }
.text-sm { font-size: var(--text-small); }
.text-xs { font-size: var(--text-eyebrow); }
.text-base { font-size: var(--text-body); }
.text-lg { font-size: 18px; }
.text-xl { font-size: 24px; }
.text-3xl { font-size: 48px; }
.text-bold { font-weight: 700; }
.text-uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 1px; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.inline-block { display: inline-block; }
.d-none { display: none; }
.no-resize { resize: none; }

/* ------------------------------------------------------------------ */
/* 16. Home / Shifts screen elements (17-07)                           */
/*     Hero shift card, off-day widgets, sign-in footer, skeleton      */
/*     shift-list rows. Sized/coloured onto tokens.css same as         */
/*     everything above; none of it is a duplicate token block.        */
/* ------------------------------------------------------------------ */

.shift-brand {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  color: var(--color-cobalt);
  font-size: var(--text-h1);
  margin: 0 0 var(--space-1);
}

.shift-store {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--slate-600);
  font-size: var(--text-small);
  margin-bottom: var(--space-4);
}

.shift-store .icon { flex-shrink: 0; color: var(--slate-400); }

.hero-time { margin-bottom: var(--space-6); }

.hero-time .num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-hero);
  color: var(--color-cobalt);
  line-height: 1;
}

.clock-out-zone {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--slate-200);
}

.clock-out-label { font-size: var(--text-small); color: var(--slate-600); margin-bottom: var(--space-2); }

.needs-attention { border-left: 4px solid var(--color-warning); background: var(--color-warning-bg); }

.attention-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}

.attention-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  min-height: var(--tap-target);
  border-top: 1px solid color-mix(in srgb, var(--color-warning) 25%, var(--color-white));
  text-decoration: none;
  color: var(--color-cobalt);
  font-size: var(--text-small);
}

.attention-go { color: var(--color-warning); font-weight: 700; white-space: nowrap; }

.signed-in-as { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.signed-in-label { font-size: var(--text-eyebrow); text-transform: uppercase; color: var(--slate-600); }
.signed-in-name { color: var(--color-cobalt); font-weight: 700; }

/* Skeleton shift-list row -- shown instead of a blank area while the
   API-loaded shift list is in flight. */
.skeleton-line { height: 12px; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.skeleton-line.w-30 { width: 30%; height: 10px; margin-bottom: 0; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }

/* ------------------------------------------------------------------ */
/* 17. Pending / activation-status screen (17-07)                      */
/*     Standalone page (not base_pwa.html -- see pending.html's own    */
/*     comment on why), but styled onto the same token set.            */
/* ------------------------------------------------------------------ */

.pending-screen {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-4) var(--space-8);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-headline {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  color: var(--color-cobalt);
  font-size: var(--text-h1);
  margin-bottom: var(--space-1);
}

.page-subhead { color: var(--slate-600); font-size: var(--text-small); margin-bottom: var(--space-6); }

.pnumber-card {
  background: var(--color-cobalt);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.pnumber-label {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
  margin-bottom: var(--space-2);
}

.pnumber-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-hero);
  letter-spacing: 0.02em;
  line-height: 1;
}

.pnumber-hint { font-size: var(--text-small); opacity: 0.85; margin-top: var(--space-3); }

.remind-wait { font-size: var(--text-eyebrow); color: var(--slate-600); margin-top: var(--space-2); }

/* ------------------------------------------------------------------ */
/* 18. Me cluster (17-08) -- profile hero, entry-row nav rows, details  */
/*     form field groups, pay-history hero amount, doc/sales rows       */
/* ------------------------------------------------------------------ */

.profile-card {
  background: var(--color-cobalt);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  box-shadow: var(--shadow-card);
}

.profile-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-h2);
  margin: 0 0 4px;
}

.profile-pnum { font-size: var(--text-small); opacity: 0.75; }

.profile-stat { text-align: center; flex-shrink: 0; }
.profile-stat-n { font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1; }
.profile-stat-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; margin-top: var(--space-1); }

.me-section {
  font-size: var(--text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-cobalt);
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
}

/* Tappable navigation row inside a .pwa-card -- Me's entry points into
   details, profile, pay history, docs, sales history. */
.entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--slate-100);
  text-decoration: none;
  color: inherit;
  min-height: var(--tap-target);
}

.entry-row:first-of-type { border-top: none; }
.entry-left { display: flex; align-items: center; gap: var(--space-3); }
.entry-left .icon { color: var(--slate-400); flex-shrink: 0; }
.entry-label { color: var(--color-cobalt); font-weight: 600; font-size: 15px; }
.entry-sub { color: var(--slate-600); font-size: var(--text-eyebrow); }
.entry-chevron { color: var(--slate-400); flex-shrink: 0; }

/* "What we still need from you" -- named fields, not a percentage. */
.missing-card { border-left: 4px solid var(--color-cobalt); background: var(--slate-50); }
.missing-head { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--color-cobalt); margin-bottom: var(--space-2); }
.missing-list { margin: 0; padding-left: 20px; font-size: var(--text-body); color: var(--color-cobalt); }
.missing-list li { margin: 3px 0; }

/* Pay history hero amount */
.pay-hero-card { text-align: center; }
.pay-hero-amount {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-hero);
  color: var(--color-cobalt);
  line-height: 1;
  margin-bottom: var(--space-1);
}
.pay-hero-period { color: var(--slate-600); font-size: var(--text-small); margin-bottom: var(--space-4); }

/* Self-service edit forms (Me details, Profile) -- field groups separated
   by a hairline, label above input, inline errors, no raw Django dump. */
.details-field { margin-bottom: var(--space-4); }
.details-field:last-of-type { margin-bottom: 0; }
.details-label {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-cobalt);
  margin-bottom: var(--space-2);
}
.details-error { color: var(--color-danger); font-size: var(--text-small); margin-top: var(--space-1); }
.details-note { border-left: 4px solid var(--color-cobalt); background: var(--slate-50); font-size: var(--text-small); color: var(--color-cobalt); }
.details-cancel { display: block; text-align: center; margin-top: var(--space-3); color: var(--slate-600); font-size: var(--text-small); }

/* Advance request (Me -> Ask for an advance): one row per worked shift to pick. */
fieldset.advance-shifts { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.advance-shift {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); min-height: var(--tap-target);
  border: 1.5px solid var(--slate-200); border-radius: var(--radius-sm);
  margin-bottom: var(--space-2); cursor: pointer;
}
.advance-shift:has(input:checked) { border-color: var(--color-green); }
.advance-shift input { flex: none; margin: 2px 0 0; }
.advance-shift-when { display: block; font-weight: 600; color: var(--slate-900); }
.advance-shift-sub { display: block; color: var(--slate-600); font-size: var(--text-small); }
.advance-error { margin-bottom: var(--space-4); }
.advance-form .btn-primary { margin-top: var(--space-4); }
.advance-list { list-style: none; margin: 0; padding: 0; }
.advance-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--slate-200); }
.advance-item:first-child { border-top: 0; }

/* ------------------------------------------------------------------ */
/* 19. Registration flow (17-12) — every rule here is scoped under      */
/*     .register-shell so it cannot leak onto any other page that loads */
/*     this stylesheet (capture flow, portal, dashboards all do).       */
/*     Was templates/accounts/register/base.html's own inline <style>   */
/*     block — moved here per 17-12 Task 1 so registration stops       */
/*     carrying a private copy of the token set.                        */
/* ------------------------------------------------------------------ */

.register-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-16);
  min-height: 100vh;
}

.register-brand {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: var(--space-8);
  color: var(--color-cobalt);
}

.register-brand .mydm-mark { display: block; width: 120px; height: auto; }

.register-title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  color: var(--color-cobalt);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-2);
}

.register-intro { color: var(--slate-600); margin: 0 0 var(--space-5); }

.register-checklist { padding-left: 20px; margin: var(--space-4) 0 var(--space-8); color: var(--slate-600); }
.register-checklist li { margin-bottom: var(--space-2); }

.register-field { margin-bottom: var(--space-5); }
.register-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--color-cobalt);
  margin-bottom: var(--space-2);
}

.register-shell input[type="text"], .register-shell input[type="tel"],
.register-shell input[type="date"], .register-shell input[type="password"],
.register-shell input[type="number"], .register-shell select, .register-shell textarea {
  width: 100%;
  font-size: var(--text-body); /* 16px+ stops iOS auto-zoom on focus */
  padding: var(--space-3);
  min-height: var(--tap-target);
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--slate-900);
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

/* Softer input: green focus GLOW (ring), never a fill — DESIGN.md accent discipline. */
.register-shell input[type="text"]:focus, .register-shell input[type="tel"]:focus,
.register-shell input[type="date"]:focus, .register-shell input[type="password"]:focus,
.register-shell input[type="number"]:focus, .register-shell select:focus, .register-shell textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-green) 16%, transparent);
}

.register-hint { font-size: var(--text-small); color: var(--slate-600); margin-top: var(--space-2); }
.register-error { font-size: var(--text-small); color: var(--color-danger); margin-top: var(--space-2); }
.register-errors-banner {
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body);
  margin-bottom: var(--space-5);
}

.register-shell .btn-secondary {
  display: inline-block;
  width: auto;
  background: none;
  border: none;
  color: var(--slate-600);
  font-size: var(--text-small);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--space-2) 0;
  min-height: var(--tap-target);
}

.register-shell .radio-row, .register-shell .checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  min-height: var(--tap-target);
}
.register-shell .radio-row label, .register-shell .checkbox-row label { font-size: 15px; }
.register-shell input[type="radio"], .register-shell input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--color-green);
  flex-shrink: 0;
}

.register-footer {
  margin-top: var(--space-10);
  font-size: var(--text-small);
  color: var(--text-faint);
  text-align: center;
}

/* Small outline icon per step, echoing the step indicator's own iconography */
.step-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1.5px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cobalt);
  margin-bottom: var(--space-4);
}

/* Review step — one card per section, work areas as hairline chips (never
   a filled accent block, per DESIGN.md accent discipline). */
.review-section {
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--color-white);
}
.review-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.review-section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  font-size: var(--text-eyebrow);
}
.review-section p { color: var(--slate-600); font-size: var(--text-small); margin: 2px 0; }
.register-shell .btn-edit {
  background: none;
  border: none;
  color: var(--color-cobalt);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--color-green); border-radius: var(--radius-full);
  padding: 6px 12px; font-size: var(--text-small); font-weight: 600; color: var(--color-cobalt);
  background: var(--color-white);
}
.chip .icon { color: var(--green-ink); flex-shrink: 0; }
.chip.unlisted { border-color: var(--slate-200); color: var(--slate-600); }
.chip.unlisted .icon { color: var(--slate-400); }

.register-shell .selfie-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto var(--space-4);
  border: 2px solid var(--color-green);
}

/* place_picker.js structure — markup owned by static/js/place_picker.js,
   restyled by class only, no id/structure change. */
.place-picker-label { display: block; font-weight: 600; font-size: var(--text-small); color: var(--color-cobalt); margin-bottom: var(--space-2); }
.place-picker-input { width: 100%; }
.place-picker-status { font-size: var(--text-small); color: var(--slate-600); margin-top: var(--space-2); min-height: 16px; }
.place-picker-results {
  list-style: none;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
  max-height: 220px;
  overflow-y: auto;
}
.place-picker-results li {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  cursor: pointer;
  border-bottom: 1px solid var(--slate-100);
}
.place-picker-results li:last-child { border-bottom: none; }
.place-picker-results li[aria-selected="true"] { background: var(--slate-100); }
.place-picker-chosen { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.place-picker-chosen-label { font-weight: 600; color: var(--color-cobalt); }
.place-picker-change, .place-picker-chip-remove {
  background: none;
  border: none;
  color: var(--color-cobalt);
  text-decoration: underline;
  cursor: pointer;
  font-size: var(--text-small);
  padding: var(--space-1) 0;
}
.place-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--slate-100);
  border-radius: var(--radius-full);
  padding: 6px 10px 6px 12px;
  font-size: var(--text-small);
}

.gps-block {
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-5) 0;
}
.register-shell .gps-button {
  display: block;
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-3);
  background: var(--slate-50);
  border: 1.5px solid var(--color-cobalt);
  color: var(--color-cobalt);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: var(--font-heading);
}
.register-shell .gps-button:disabled { opacity: 0.6; cursor: wait; }
.gps-status { font-size: var(--text-small); color: var(--slate-600); margin-top: var(--space-2); min-height: 16px; }

.attribution { font-size: var(--text-eyebrow); color: var(--text-faint); margin-top: var(--space-2); }
.attribution a { color: var(--text-faint); }

/* Success page (17-12) — P-number hero card reuses .pnumber-card/-label/
   -value/-hint from section 17 above (same look, one definition). */
.success-tick {
  width: 72px; height: 72px; border-radius: 50%; background: var(--color-green);
  display: flex; align-items: center; justify-content: center; color: var(--color-navy);
  margin: 0 auto var(--space-6);
  animation: tick-pop var(--dur-base) var(--ease-out);
}
@keyframes tick-pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.success-title { text-align: center; font-size: var(--text-h1); margin: 0 0 var(--space-2); }
.success-sub { text-align: center; color: var(--slate-600); font-size: var(--text-body); margin: 0 auto var(--space-8); max-width: 300px; }

.success-action-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); }
.btn-copy, .btn-whatsapp {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-target); border-radius: var(--radius-md); font-weight: 700; font-size: 14px;
  cursor: pointer; text-decoration: none; font-family: var(--font-heading); border: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn-copy { background: var(--color-white); color: var(--color-cobalt); border: 1.5px solid var(--slate-200); }
.btn-whatsapp { background: #25D366; color: var(--color-navy); }
.btn-copy:active, .btn-whatsapp:active { transform: scale(0.98); }
.btn-copy[data-copied="true"] { border-color: var(--color-green); color: var(--green-ink); }

.password-reminder {
  text-align: left; background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-6);
  display: flex; gap: var(--space-3);
}
.password-reminder .icon { color: var(--orange-ink); flex-shrink: 0; margin-top: 1px; }
.password-reminder p { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--slate-900); }
.password-reminder strong { color: var(--color-cobalt); }

.success-status-line { font-size: var(--text-small); color: var(--slate-600); margin-bottom: var(--space-6); text-align: center; }

/* ------------------------------------------------------------------ */
/* 21. Clock in / clock out (17-15) — shift hero reuses section 16's   */
/*     .shift-brand/.shift-store/.hero-time (home.html) rather than     */
/*     duplicating them. Everything below is .clock-* or the bare       */
/*     .gps-dot/.gps-message/.photo-* and .clockout-warning class names     */
/*     static/js/gps_capture.js writes directly — restyled by class    */
/*     only, no id or JS-owned class renamed.                           */
/* ------------------------------------------------------------------ */

/* GPS status block. Base look lives on .clock-gps-status; state colour
   comes from the gps-status--loading/success/error modifier gps_capture.js
   toggles on the same element (id="gps-status"). Green/red are a dot only,
   never a fill, per DESIGN.md accent discipline. */
.clock-gps-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  color: var(--slate-600);
  font-size: var(--text-small);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.clock-gps-status.gps-status--success {
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-white));
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-white));
  color: color-mix(in srgb, var(--color-success) 65%, var(--color-navy));
}

.clock-gps-status.gps-status--error {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.gps-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--slate-400);
}

.gps-status--loading .gps-dot { animation: clock-gps-pulse 1.2s infinite; }
.gps-status--success .gps-dot { background: var(--color-green); }
.gps-status--error .gps-dot { background: var(--color-danger); }

@keyframes clock-gps-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.gps-message { flex: 1; }

.gps-retry-btn {
  font-size: var(--text-eyebrow);
  padding: 4px 10px;
  min-height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-danger-border);
  background: var(--color-white);
  color: var(--color-danger);
  cursor: pointer;
  font-family: var(--font-body);
}

#gps-accuracy-preview {
  font-size: var(--text-small);
  color: var(--slate-600);
  margin-bottom: var(--space-4);
}

.clock-form-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-small);
  margin-bottom: var(--space-4);
}

.clock-section-label {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: var(--space-3);
}

.clock-camera-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 140px;
  border: 2px dashed var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--slate-50);
  cursor: pointer;
  padding: var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.clock-camera-label:hover, .clock-camera-label:focus-within { border-color: var(--color-green); }

.clock-camera-icon { color: var(--slate-400); }
.clock-camera-text { font-size: var(--text-body); font-weight: 600; color: var(--slate-900); }
.clock-camera-sub { font-size: var(--text-small); color: var(--text-faint); text-align: center; }

/* Real file input kept in the accessibility tree — clipped, not display:none. */
.clock-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.clock-photo-preview { display: none; width: 100%; border-radius: var(--radius-md); overflow: hidden; }

/* Bare class names below are written directly by gps_capture.js's
   initPhotoPreview() — restyled here, never renamed. */
.photo-thumb { display: inline-block; margin: 6px 6px 0 0; text-align: center; }
.photo-thumb .photo-preview-img { display: block; max-width: 92px; border-radius: var(--radius-sm); }
.photo-remove {
  background: none;
  border: none;
  color: var(--color-danger);
  font-size: var(--text-eyebrow);
  padding: 4px 0;
  min-height: 28px;
  cursor: pointer;
}
.photo-count { font-size: var(--text-small); color: var(--color-cobalt); font-weight: 600; margin-bottom: var(--space-2); }
.photo-preview-img { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius-md); }

.btn-primary:disabled { background: var(--slate-200); color: var(--slate-600); cursor: not-allowed; }

/* Early-clock-out warning (id="clockout-warning"; the confirm script in
   clock_out.html hides it once nothing in it is outstanding). Hairline amber left border + light tint
   background, matching section 16's .needs-attention pattern — dark
   readable warning text, never a filled block, never white-on-light. */
.clockout-warning {
  border-left: 4px solid var(--color-warning);
  background: var(--color-warning-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  color: var(--color-warning);
  font-size: var(--text-small);
}
.clockout-warning-head { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; margin-bottom: var(--space-2); }
.clockout-warning ul { margin: var(--space-2) 0 0 20px; padding: 0; }
.clockout-warning li { margin-bottom: var(--space-1); }
.clockout-warning-note { margin: var(--space-3) 0 0; font-size: var(--text-eyebrow); opacity: 0.9; }

/* ------------------------------------------------------------------ */
/* 22. Consent fields (phase 17 merge blocker 5) — 17-11's ticks, moved */
/*     here from consents.html's inline block when the first-login      */
/*     consent screen became their second host. Scoped under            */
/*     .consent-fields: capture_form.css owns unscoped .check-group /   */
/*     .check-option rules for the sales feedback step.                  */
/* ------------------------------------------------------------------ */

.consent-fields .check-group { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-2); }
.consent-fields .check-option {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border: 1.5px solid var(--slate-200); border-radius: var(--radius-md);
  background: var(--color-white); min-height: var(--tap-target);
}
.consent-fields .check-option input[type="checkbox"] {
  width: 22px; height: 22px; accent-color: var(--color-green); flex-shrink: 0; margin-top: 1px;
}
.consent-fields .check-option-label { font-size: 15px; line-height: 1.4; color: var(--slate-900); }

.consent-fields .terms-accept-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-5); font-size: var(--text-small); color: var(--slate-600);
}
.consent-fields .terms-accept-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--color-green); flex-shrink: 0;
}
.consent-fields .terms-link-row { margin: calc(-1 * var(--space-2)) 0 var(--space-6); text-align: center; }
.consent-fields .terms-link-row a { color: var(--slate-600); font-size: var(--text-small); text-decoration: underline; }

/* First-login consent screen (templates/pwa/consent.html) */
.consent-screen { text-align: left; }
.consent-intro { color: var(--slate-600); font-size: var(--text-body); margin: var(--space-2) 0 var(--space-5); }
.consent-decline { margin-top: var(--space-3); text-align: center; }
.consent-declined { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); font-weight: 600; }
.consent-declined svg { flex-shrink: 0; margin-top: 1px; }

/* Cancellation line on a confirmed shift (templates/pwa/shifts.html) */
.shift-cancel-note { margin: var(--space-3) 0 0; font-size: var(--text-small); line-height: 1.45; color: var(--slate-600); }

/* ------------------------------------------------------------------ */
/* 17. One next button (promoter flow B2, D 27 Oct 2026)              */
/*     Tokens only. Clock in is ~15% bigger; the secondary buttons    */
/*     under it are a little darker so they read as buttons.          */
/* ------------------------------------------------------------------ */

.btn-clock-in-big {
  min-height: calc(var(--tap-target) * 1.15);
  font-size: calc(var(--text-body) * 1.15);
}

.btn-step {
  border-color: var(--slate-400);
  border-width: 2px;
  background: var(--slate-100);
  font-weight: 700;
}

.next-wait,
.done-today {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  border-radius: var(--radius-md);
  background: var(--slate-100);
  border: 2px solid var(--slate-200);
  color: var(--color-cobalt);
  font-family: var(--font-heading);
  font-weight: 700;
}

.shift-date {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--color-cobalt);
  margin-bottom: var(--space-1);
}

.more-actions { margin-top: var(--space-4); }
.more-actions summary {
  cursor: pointer;
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
  color: var(--color-cobalt);
  font-weight: 700;
}

/* In-page "Clock out now?" question (replaces the native dialog, D 27 Oct 2026) */
.clockout-confirm {
  border: 2px solid var(--color-cobalt);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
.clockout-confirm-head { font-family: var(--font-heading); font-weight: 800; color: var(--color-cobalt); margin-bottom: var(--space-2); }
.clockout-confirm ul { margin: 0 0 var(--space-2) 20px; padding: 0; }
.clockout-confirm #clockout-confirm-note { margin: 0 0 var(--space-4); }   /* was tight against Yes (training video #14) */
.clockout-confirm .btn-step { margin-top: var(--space-2); }
.clockout-fix { color: var(--color-cobalt); font-weight: 700; text-decoration: underline; margin-left: var(--space-1); }