/* ============================================
   Muster Mate — Crew Companion App Styles
   ============================================ */

:root {
  /* Brand */
  --primary: #F9522E;            /* Coral — brand */
  --primary-dark: #E04419;
  --accent: #1A3A5C;             /* Deep navy — secondary accent (was teal) */
  --accent-dark: #112942;

  /* ── Card-tab kit (design system for home-feed cards) ──
     Shared corner-notch tab header. Brand coral/navy reuse the app's
     --primary/--accent; the rest are added from the kit. */
  --coral: var(--primary);
  --coral-press: var(--primary-dark);
  --coral-tint: #FEEDE8;
  --teal: #35B8B2;
  --teal-press: #2A9A95;
  --teal-tint: #E2F4F2;
  --gold: #D4A53A;
  --gold-press: #B8861E;
  --gold-tint: #FBF1D6;
  --ink-2: var(--accent);
  --line-2: #EEF2F6;
  /* Per-card identity colours — feed is scannable by tab colour alone. */
  --tab-watch:    var(--coral);
  --tab-tender:   var(--ink-2);
  --tab-muster:   var(--teal);
  --tab-isps:     var(--teal);
  --tab-hours:    var(--ink-2);
  --tab-delivery: #7A5AF8;
  --tab-eng:      var(--ink-2);

  /* Surfaces */
  --bg: #EEF0F3;                 /* Variant B — half-shade darker than card so .mm-sections lift */
  --card: #FFFFFF;
  --surface-1: #F5F5F4;          /* Stone 100 */
  --surface-2: #EDEBE9;
  --surface-3: #D6D3D1;          /* Stone 300 — empty bars / dots */

  /* Text */
  --text: #1C1917;               /* Stone 900 */
  --text-secondary: #57534E;     /* Stone 600 */
  --text-muted: #78716C;         /* Stone 500 */

  /* Lines */
  --border: #E7E5E4;             /* Stone 200 */

  /* Status */
  --danger: #EF4444;
  --warning: #F59E0B;
  --success: #10B981;            /* Emerald (compliance) */

  /* INVIOLABLE — port/starboard reserved */
  --port-red: #DC2626;
  --starboard-green: #16A34A;

  /* Geometry */
  --radius: 14px;
  --radius-lg: 20px;
  --nav-height: 72px;
  --header-height: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  letter-spacing: -0.01em;
}

.hidden { display: none !important; }
/* Force the HTML `hidden` attribute to actually hide. Without this,
   class rules like `.mm-section { display: block }` (no !important)
   tie on specificity with the UA `[hidden] { display: none }` rule
   and the later one wins — so `el.hidden = true` from JS becomes
   a no-op. Bites the Topic Brief card on yachts without the flag. */
[hidden] { display: none !important; }

/* Soft overlay shown while the yacht switcher swaps state under us.
   Fades in over the existing app UI (no full page reload, no iOS
   WebView tear-down), the data refreshes underneath, then fades out. */
.yacht-switch-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(250, 250, 249, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-out;
}
.yacht-switch-splash--shown {
  opacity: 1;
  pointer-events: auto;
}
.yacht-switch-splash__logo {
  width: 88px;
  height: auto;
  opacity: 0.92;
}
.yacht-switch-splash__name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1c1917;
  letter-spacing: -0.01em;
}
.yacht-switch-splash__spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2.5px solid rgba(28, 25, 23, 0.12);
  border-top-color: #f9522e;
  animation: yacht-switch-spin 0.9s linear infinite;
}
@keyframes yacht-switch-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   Screens
   ============================================ */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================
   Auth Screen
   ============================================ */
.auth-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Was justify-content:center, which clipped tall forms (the scan screen)
     off both ends with no way to reach the bottom. Now the container
     scrolls and the form centres via its own auto margins — short forms
     still sit centred, tall ones scroll. Applies to every auth screen. */
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
  padding-top: calc(24px + var(--safe-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
}

/* iOS-style top-left back chevron — only shown when there's an app to go
   back to (user already has an approved yacht and reached the auth screen
   via "Join another yacht" or a pending re-check). */
.auth-nav-back {
  position: absolute;
  top: calc(12px + var(--safe-top));
  left: 12px;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.1s ease;
}
.auth-nav-back:active {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(0.96);
}

.auth-logo {
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin-top: 16px;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 4px;
}

.auth-form {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Auto vertical margins centre the form when the container has spare
     room, and collapse to let it scroll when the form is taller than the
     viewport (so the bottom button is always reachable). */
  margin: auto 0;
}

.auth-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s ease;
}

.auth-input::placeholder { color: rgba(255,255,255,0.35); }
.auth-input:focus { border-color: var(--primary); }

/* Password field wrapper */
.auth-password-wrap {
  position: relative;
  width: 100%;
}

.auth-password-wrap .auth-input {
  padding-right: 48px;
}

.auth-password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
}

.auth-password-toggle:active { opacity: 0.7; }

.auth-input--code {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.auth-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.auth-btn:active { opacity: 0.85; }

.auth-btn--primary {
  background: var(--primary);
  color: #fff;
}

/* Cream variant — warm off-white (--bg) with dark text, so the primary
   action on post-auth flows (Join Yacht) reads as a soft pill against
   the navy background without re-using the brand coral from sign-in. */
.auth-btn--cream {
  background: var(--bg);
  color: var(--text);
}

/* Extra breathing room between a code input and its submit button —
   the tall centred input visually touched the button otherwise. */
.auth-input--code + .auth-btn {
  margin-top: 12px;
}

.auth-btn--ghost {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Secondary button for LIGHT surfaces (menu panels) — auth-btn--ghost is
   white-on-transparent for the dark auth screens and vanishes on white. */
.auth-btn--quiet {
  background: #fff;
  color: var(--text, #1C1917);
  border: 1.5px solid var(--border, #E7E5E4);
}
.auth-btn--quiet:active { background: #f5f5f4; }

.auth-btn--apple {
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.auth-btn--apple .auth-btn__apple-logo {
  display: block;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.auth-btn--google {
  background: #fff;
  color: #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid rgba(31, 31, 31, 0.12);
  margin-bottom: 14px;
}

.auth-btn--google .auth-btn__google-logo {
  display: block;
  flex-shrink: 0;
}

.auth-forgot {
  text-align: right;
  margin-top: -4px;
  margin-bottom: 4px;
}

.auth-forgot a {
  color: rgba(255,255,255,0.45);
  font-size: 0.8rem;
  text-decoration: none;
}

.auth-switch {
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  margin-top: 4px;
}

.auth-switch a { color: #fff; text-decoration: none; font-weight: 600; }

.auth-switch--muted { margin-top: 14px; }
.auth-switch--muted a { color: rgba(255,255,255,0.55); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.auth-welcome {
  text-align: center;
  margin: 8px 0 20px;
}
.auth-welcome__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.auth-welcome__sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.4;
}
.auth-welcome-cta {
  text-align: center;
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  margin: 2px 0 10px;
}
.auth-welcome-cta a {
  color: var(--primary, #F9522E);
  font-weight: 600;
  text-decoration: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 12px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.auth-divider span {
  flex: 0 0 auto;
}

.auth-legal {
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 0.68rem;
  line-height: 1.5;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.auth-legal a {
  color: rgba(255,255,255,0.4);
  text-decoration: underline;
}

.auth-info {
  text-align: center;
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.join-intro {
  text-align: center;
  color: #fff;
  margin-bottom: 8px;
}

.join-intro h2 {
  font-size: 1.5rem;
  margin: 0 0 6px;
  font-weight: 700;
}

.join-intro p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.join-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 14px;
  text-align: center;
}

.join-card__yacht {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
}

.join-card__crew {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.join-card__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  font-size: 1.2rem;
  font-weight: 600;
}

.join-card__crew-text {
  text-align: left;
  min-width: 0;
}

.join-card__name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.join-card__role {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}

.join-card__q {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.auth-pending {
  text-align: center;
  color: #fff;
}

.auth-pending h2 {
  margin: 16px 0 8px;
  font-size: 1.3rem;
}

.auth-pending p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.password-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
}

.password-strength__bars {
  display: flex;
  gap: 4px;
  flex: 1;
}

.password-strength__bar {
  height: 4px;
  border-radius: 2px;
  flex: 1;
  background: rgba(255,255,255,0.1);
  transition: background 0.2s ease;
}

.password-strength__label {
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 44px;
  text-align: right;
}

.auth-invite-name {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
}

.auth-error {
  color: var(--danger);
  text-align: center;
  font-size: 0.85rem;
  margin-top: 12px;
}

/* ============================================
   App Header
   ============================================ */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  padding-top: calc(12px + var(--safe-top));
  height: calc(var(--header-height) + var(--safe-top));
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.app-header__yacht-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  cursor: pointer;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}

.app-header__yacht-btn:active { opacity: 0.7; }

.app-header__yacht-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header__avatar {
  position: relative;   /* anchors the photo overlay */
  overflow: hidden;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.app-header__avatar:active { opacity: 0.85; }

/* ============================================
   Offline Banner
   ============================================ */
.offline-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1e293b;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 16px;
  text-align: center;
}

/* ============================================
   App Content
   ============================================ */
.app-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
}

.tab-content {
  padding: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 1.2rem;
  font-weight: 700;
}

.btn-icon {
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.empty-state {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 40px 20px;
  line-height: 1.5;
}

/* Floating Action Button */
.fab {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 20px);
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(86, 178, 187, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 50;
}

.fab:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(86, 178, 187, 0.3);
}

/* ============================================
   Pull to Refresh
   ============================================ */
.pull-refresh {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.pull-refresh--pulling {
  height: 48px;
}

.pull-refresh--refreshing {
  height: 48px;
}

.pull-refresh__spinner {
  color: var(--accent);
  opacity: 0.5;
  transition: opacity 0.2s;
}

.pull-refresh--pulling .pull-refresh__spinner {
  opacity: 1;
}

.pull-refresh--refreshing .pull-refresh__spinner {
  opacity: 1;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   Duties Sub-tabs
   ============================================ */
.duties-subtabs {
  display: flex;
  gap: 0;
  background: var(--bg);
  border-radius: 12px;
  padding: 3px;
  margin-bottom: 16px;
}

.duties-subtab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
}

.duties-subtab--active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* All three tabs (Emergencies / Watch / Abandon Ship) share the same
   weight + treatment. The Watch tab used to get an off-colour teal
   accent to signal "Plus/Pro feature", but it made the strip look
   uneven against Abandon Ship's wrap-prone label. Equal sizing reads
   cleaner; the tab's just hidden entirely when the flag's off. */
.duties-subtab {
  white-space: nowrap;       /* "Abandon Ship" stays on one line */
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 10px 8px;         /* tighter so three labels fit comfortably */
  font-size: 0.8rem;
  min-width: 0;              /* lets flex actually shrink labels */
}

.duties-subtab-content {}

/* MCA / MAIB segmented control inside the Marine Safety card.
   Compact, centered control matching the card's navy identity tab:
   light --line-2 track, navy (--ink-2) active segment. Kept small and
   centered so it reads as part of the card, not a bolted-on add-on. */
.mm-safety-tabs {
  display: flex;            /* block-level so margin:auto centers it (parent is display:block) */
  gap: 3px;
  padding: 3px;
  background: var(--line-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: fit-content;
  margin: 12px auto 16px;
}
.mm-safety-tab {
  padding: 6px 16px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.mm-safety-tab:not(.mm-safety-tab--active):active { background: rgba(15, 23, 42, 0.05); }
.mm-safety-tab--active {
  background: var(--ink-2);
  color: #fff;
  box-shadow: 0 1px 2px rgba(26, 58, 92, 0.25);
}

.muster-rank-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 6px auto 18px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid rgba(11, 27, 43, 0.08);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(11, 27, 43, 0.05);
}
.muster-rank-badge__label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
}
.muster-rank-badge__divider {
  width: 1px;
  height: 11px;
  background: rgba(11, 27, 43, 0.14);
}
.muster-rank-badge__value {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #0B1B2B;
}

/* ============================================
   Abandon Ship Card
   ============================================ */
.abandon-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
}

.abandon-card__header {
  padding: 16px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
}

.abandon-card__station {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.abandon-card__type {
  font-size: 0.78rem;
  opacity: 0.85;
  margin-top: 2px;
}

.abandon-card__body {
  padding: 16px;
}

.abandon-card__row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.abandon-card__row:last-child { border-bottom: none; }

.abandon-card__label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.abandon-card__value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.abandon-card__leader {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  margin-top: 8px;
}

.abandon-card__instructions {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg);
  border-radius: 10px;
}

.abandon-card__instruction {
  font-size: 0.85rem;
  color: var(--text);
  padding: 4px 0;
  line-height: 1.4;
}

.abandon-card__instruction + .abandon-card__instruction {
  border-top: 1px solid var(--border);
}

/* ============================================
   Muster Duties Cards
   ============================================ */
.duties-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.duty-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
}

.duty-card__header {
  padding: 14px 16px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.duty-card__header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.duty-card__chevron {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.duty-card--expanded .duty-card__chevron {
  transform: rotate(180deg);
}

.duty-card__scenario {
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.duty-card__alarm {
  font-size: 0.78rem;
  opacity: 0.85;
  font-weight: 500;
}

/* "Updated" pill on a changed duty card — solid white with a coral dot
   so it reads clearly on any scenario header colour. Cleared on expand,
   or once the Emergencies view has been seen. */
.duty-card__new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  color: #0f172a;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.duty-card__new-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F9522E;
  flex: none;
}

.duty-card__cadence {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.cadence-beat {
  height: 5px;
  border-radius: 2.5px;
  background: rgba(255,255,255,0.7);
  flex-shrink: 0;
}

.cadence-beat--S { width: 14px; }
.cadence-beat--L { width: 40px; }
.cadence-beat--C { flex: 1; min-width: 60px; }

.duty-card__body {
  padding: 14px 16px;
  display: none;
}

.duty-card--expanded .duty-card__body {
  display: block;
}

.duty-card__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
}

.duty-card__label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.duty-card__value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.duty-card__duties-list {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 10px;
}

.duty-card__duty-item {
  font-size: 0.85rem;
  color: var(--text);
  padding: 4px 0;
  line-height: 1.4;
}

.duty-card__duty-item + .duty-card__duty-item {
  border-top: 1px solid var(--border);
}

/* ============================================
   Bottom Navigation
   ============================================ */
.app-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
}

.app-nav__item {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 8px 12px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
  flex: 1;
}

.app-nav__item--active {
  color: var(--primary);
}

.app-nav__item--active svg {
  stroke: var(--primary);
}

/* Centre raised + button (Quick Add) */
.app-nav__center {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 29px;
  background: var(--primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px 26px;
  box-shadow: 0 6px 14px rgba(249, 82, 46, 0.35), 0 2px 4px rgba(0,0,0,0.08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.app-nav__center:active {
  transform: scale(0.94);
  box-shadow: 0 3px 8px rgba(249, 82, 46, 0.4);
}
.app-nav__center svg {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-nav__center.is-open svg {
  transform: rotate(45deg); /* plus rotates to an ✕ while the sheet is open */
}

/* ============================================
   Quick Add bottom sheet
   ============================================ */
.quickadd {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}
.quickadd.is-open { pointer-events: auto; }
.quickadd__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.quickadd.is-open .quickadd__backdrop { opacity: 1; }

.quickadd__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card);
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(16px + var(--safe-bottom, 0px));
  max-width: 640px;
  margin: 0 auto;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.25);
  will-change: transform;
}
.quickadd.is-open .quickadd__sheet { transform: translateY(0); }

.quickadd__grabber {
  width: 42px;
  height: 4px;
  background: rgba(100, 116, 139, 0.3);
  border-radius: 2px;
  margin: 4px auto 10px;
}
.quickadd__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 14px;
}
.quickadd__header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.quickadd__close {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  border: none;
  background: var(--surface-1);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}
.quickadd__close:active { background: var(--border); }

.quickadd__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* === Sign In / Sign Out card — status info + pill action === */
.quickadd__signin {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px 14px 22px;
  border-radius: 14px;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e5e7eb);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 2px 6px rgba(15, 23, 42, 0.04);
  margin-bottom: 6px;
}
.quickadd__signin-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #F9522E; /* coral when OUT */
}
.quickadd__signin--in .quickadd__signin-strip {
  background: #2DBDC6; /* teal when IN */
}

.quickadd__signin-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.quickadd__signin-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #64748b);
}
.quickadd__signin-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text, #0f172a);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.quickadd__signin-since {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  margin-left: 6px;
  font-weight: 500;
}
.quickadd__signin-name + .quickadd__signin-since { /* keep on same row visually via flex when space allows */ }

.quickadd__signin {
  /* 3D perspective for the pill flip */
  perspective: 600px;
}
.quickadd__signin-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: #2DBDC6;       /* teal CTA when OUT (signing IN) */
  color: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
  box-shadow: 0 1px 0 rgba(45, 189, 198, 0.25), 0 2px 6px rgba(45, 189, 198, 0.28);
  transform-origin: center;
  backface-visibility: hidden;
}
.quickadd__signin-action:active:not(.is-flipping-out):not(.is-flipping-in) {
  transform: scale(0.97);
}
.quickadd__signin--in .quickadd__signin-action {
  background: #F9522E;        /* coral CTA when IN (signing OUT) */
  box-shadow: 0 1px 0 rgba(249, 82, 46, 0.25), 0 2px 6px rgba(249, 82, 46, 0.28);
}
.quickadd__signin.is-busy .quickadd__signin-action {
  pointer-events: none;
}
/* During the cooldown the pill stays at full opacity (no dimming) so
   the new state reads clearly — pointer-events:none is what blocks
   the second tap. */

/* === Flip animation === */
.quickadd__signin-action.is-flipping-out {
  animation: signinPillFlipOut 240ms ease-in forwards;
}
.quickadd__signin-action.is-flipping-in {
  animation: signinPillFlipIn 240ms ease-out forwards;
}
@keyframes signinPillFlipOut {
  from { transform: rotateX(0deg);   }
  to   { transform: rotateX(90deg);  }
}
@keyframes signinPillFlipIn {
  from { transform: rotateX(-90deg); }
  to   { transform: rotateX(0deg);   }
}
@media (prefers-reduced-motion: reduce) {
  .quickadd__signin-action.is-flipping-out,
  .quickadd__signin-action.is-flipping-in { animation: none; }
}

/* Slight name + since alignment — put 'since' next to name where space permits */
.quickadd__signin-text {
  /* two visual rows: eyebrow (small caps) on top, name + since on the second */
}
.quickadd__signin-name-row {
  display: flex;
  align-items: baseline;
  gap: 0;
}

.quickadd__card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  text-align: left;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.quickadd__card:active {
  transform: scale(0.98);
  background: var(--card);
  border-color: rgba(249, 82, 46, 0.3);
}
.quickadd__card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(249, 82, 46, 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quickadd__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.quickadd__card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.quickadd__card-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}
.quickadd__card-chev {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ============================================
   Menu Panel (Full Screen)
   ============================================ */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--card);
  display: flex;
  flex-direction: column;
  animation: menuSlideIn 0.25s ease-out;
}

@keyframes menuSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.menu-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  padding-top: calc(16px + var(--safe-top));
  border-bottom: 1px solid var(--border);
}

.menu-panel__header h2 {
  font-size: 1.1rem;
  font-weight: 700;
}

.menu-panel__close,
.menu-panel__back {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
}

.menu-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  padding-bottom: calc(20px + var(--safe-bottom));
}

/* Profile card at top */
.menu-profile {
  text-align: center;
  margin-bottom: 28px;
}
/* Own profile photo — wrap is relative so the camera badge can ride the
   avatar's corner; the <img> fills the circle over the initials. */
.menu-profile__avatarwrap { position: relative; display: inline-block; }
.menu-profile__avatar { position: relative; overflow: hidden; }
.menu-profile__avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.menu-profile__editphoto {
  position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--text-secondary, #57534E);
  border: 1.5px solid var(--border, #E7E5E4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12); cursor: pointer;
}
.menu-profile__editphoto:disabled { opacity: 0.5; }
.menu-profile__removephoto {
  margin-top: 6px; border: none; background: none; cursor: pointer;
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted, #78716C);
  text-decoration: underline; font-family: inherit;
}
.app-header__avatarimg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; pointer-events: none;
}

.menu-profile__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.menu-profile__name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}

.menu-profile__role {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Menu groups */
.menu-group {
  margin-bottom: 20px;
}

.menu-group--bottom {
  margin-top: auto;
}

/* Menu items */
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: none;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  margin-bottom: 4px;
  -webkit-tap-highlight-color: transparent;
}

.menu-item:active { opacity: 0.85; }

.menu-item svg:first-child {
  color: var(--accent);
  flex-shrink: 0;
}

.menu-item span { flex: 1; text-align: left; }

.menu-item__chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}

.menu-item--danger {
  color: var(--danger);
}

.menu-item--danger svg:first-child {
  color: var(--danger);
}

/* Version */
.menu-version {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 16px;
}

/* Sub-panels */
.menu-subpanel {
  position: absolute;
  inset: 0;
  background: var(--card);
  z-index: 10;
  display: flex;
  flex-direction: column;
  animation: menuSlideIn 0.2s ease-out;
}

.menu-detail {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.menu-detail__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.menu-detail__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* Section eyebrow inside the Account subpanel — separates the
   per-yacht crew identity (top) from the constant Login section
   (email, sign out, delete). */
.account-section-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 18px 0 6px;
}
.account-section-eyebrow:first-child { padding-top: 6px; }
.account-section-eyebrow--secondary {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

/* About & Sources panel */
.about-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.about-section:last-of-type { border-bottom: none; }
.about-section__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.about-section p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 10px;
}
.about-section p:last-child { margin-bottom: 0; }
.about-section a { color: var(--primary); text-decoration: none; }
.about-section a:active { opacity: 0.7; }
.about-meta { font-size: 0.78rem; color: var(--text-muted); }

.about-source-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.about-source-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.about-source-list__badge {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(26, 58, 92, 0.1);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.about-source-list__body { display: flex; flex-direction: column; min-width: 0; }
.about-source-list__name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.about-source-list__sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.about-attribution {
  padding: 12px 14px;
  background: rgba(26, 58, 92, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
  font-style: italic;
}

.about-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.about-links li a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text) !important;
}
.about-links li:last-child a { border-bottom: none; }

.about-copyright {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 20px 0 8px;
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.contact-select,
.contact-input,
.contact-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
}

.contact-select:focus,
.contact-input:focus,
.contact-textarea:focus {
  border-color: var(--accent);
}

.contact-textarea {
  resize: none;
}

.contact-status {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 4px;
}

.contact-status--success { color: var(--success); }
.contact-status--error { color: var(--danger); }

/* Keep profile-panel class for yacht switcher */
.profile-panel {
  position: fixed;
  inset: 0;
  z-index: 500;
}

.profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.profile-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  max-height: 70vh;
  padding-bottom: calc(20px + var(--safe-bottom));
  animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.profile-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.profile-sheet__header h2 {
  font-size: 1.1rem;
  font-weight: 700;
}

.profile-sheet__close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
}

.profile-sheet__body {
  padding: 20px;
}

.profile-delete {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  -webkit-tap-highlight-color: transparent;
}

.profile-delete:active { opacity: 0.85; }

.yacht-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.yacht-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.yacht-list-item--active {
  background: #f0fdfa;
  border: 1.5px solid var(--accent);
}

.yacht-list-item:active { opacity: 0.85; }

.yacht-list-item__name {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.yacht-list-item__star {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px;
  -webkit-tap-highlight-color: transparent;
}

.yacht-list-item__status {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--text-muted);
}

.yacht-list-item__status--approved { color: var(--success); }
.yacht-list-item__status--pending { color: var(--warning); }

.yacht-join-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.yacht-join-btn:active { background: var(--bg); }

.profile-delete-hint {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================
   OCR Match Banner (on camera)
   ============================================ */
.ocr-match-banner {
  position: absolute;
  bottom: calc(120px + var(--safe-bottom));
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  background: var(--bg);
  color: var(--text);
  padding: 14px 16px 14px 18px;
  border-radius: 18px;
  border-left: 4px solid var(--primary);
  pointer-events: auto;
  animation: matchBannerSlideUp 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.ocr-match-banner.hidden {
  display: none;
}

/* Thumbnail preview of the captured photo. Sits on the left of the
   card so the user can see what would be kept before confirming. */
.ocr-match-banner__preview {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 12px;
  background: var(--surface-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Camera overlay lock state — applied while the OCR match card is up.
   Shutter + Done fade and become inert so the only way forward is to
   accept or reject the match. */
.camera-overlay.is-ocr-pending .camera-overlay__shutter,
.camera-overlay.is-ocr-pending .camera-overlay__done,
.camera-overlay.is-ocr-pending .camera-thumb-stack {
  opacity: 0.35;
  pointer-events: none;
}

.ocr-match-banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ocr-match-banner__text strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ocr-match-banner__text span {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes matchBannerSlideUp {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* OCR confirm/reject buttons */
.ocr-match-banner__actions {
  display: flex;
  gap: 8px;
  margin-left: 12px;
  flex-shrink: 0;
}

.ocr-match-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, background 0.15s ease;
}

.ocr-match-btn:active { transform: scale(0.88); }

.ocr-match-btn--confirm {
  background: var(--primary);
  box-shadow: 0 2px 6px rgba(249, 82, 46, 0.35);
}
.ocr-match-btn--confirm:active { background: var(--primary-dark); }

.ocr-match-btn--reject {
  background: var(--surface-1);
  color: var(--text-secondary);
}
.ocr-match-btn--reject:active { background: var(--surface-2); }

/* Crew name tag on review thumbnails */
.delivery-thumb__tag {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  background: rgba(34, 197, 94, 0.85);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 6px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   Delivery Review Modal
   ============================================ */
/* ============================================================
   Security Search slide-up sheet
   Shown on push-tap when an HoD needs to clear an ISPS search at
   the kiosk. Full-screen backdrop + slide-up panel from the bottom.
   ============================================================ */
.sec-sheet {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sec-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  animation: sec-sheet-fade 180ms ease-out;
}
.sec-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(20px + var(--safe-bottom));
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.25);
  animation: sec-sheet-slide 260ms cubic-bezier(0.22, 0.8, 0.36, 1);
}
@keyframes sec-sheet-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sec-sheet-slide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.sec-sheet__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: var(--surface-1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sec-sheet__close:active { background: var(--surface-2); }

.sec-sheet__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
/* Warmer variant for visitor-arrival (non-urgent, welcoming). */
.sec-sheet__badge--arrival {
  background: #ecfdf5;
  color: #047857;
}
.sec-sheet__title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.sec-sheet__visitor {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-1);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.sec-sheet__visitor-photo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--surface-2) center/cover no-repeat;
  border: 2px solid var(--card);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.sec-sheet__visitor-photo--empty {
  background-image: none;
  position: relative;
}
.sec-sheet__visitor-photo--empty::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 999px;
  background: var(--surface-3);
}
.sec-sheet__visitor-info {
  flex: 1;
  min-width: 0;
}
.sec-sheet__visitor-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sec-sheet__visitor-company,
.sec-sheet__visitor-host {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sec-sheet__visitor-company:empty,
.sec-sheet__visitor-host:empty { display: none; }

.sec-sheet__action {
  text-align: center;
  padding: 18px 12px;
  background: linear-gradient(180deg, rgba(249, 82, 46, 0.06), rgba(249, 82, 46, 0.02));
  border: 1px solid rgba(249, 82, 46, 0.18);
  border-radius: 14px;
  margin-bottom: 18px;
}
/* Arrival variant — emerald-tinted, non-alarming. */
.sec-sheet__action--arrival {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
  border-color: rgba(16, 185, 129, 0.22);
}
.sec-sheet__action--arrival .sec-sheet__action-device {
  color: #047857;
}
.sec-sheet__action-label,
.sec-sheet__action-sub {
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.sec-sheet__action-device {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
  margin: 4px 0;
}
.sec-sheet__dismiss {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--text);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sec-sheet__dismiss:active { opacity: 0.85; }


/* ============================================================
   Global toast — small, quiet, bottom-anchored. Used for
   fire-and-forget confirmations like AI briefing feedback.
   ============================================================ */
.mm-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + 16px + var(--safe-bottom));
  transform: translate(-50%, 20px);
  max-width: min(85vw, 360px);
  padding: 10px 18px;
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 3000;
  transition: transform 0.22s cubic-bezier(0.22, 0.8, 0.36, 1),
              opacity 0.22s ease-out;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}


/* ============================================================
   Month-complete celebration (HoR)
   Centered card, spring-bounced ring, drawn-in tick. Matches the
   iPad app's visitor-sign-in confirmation aesthetic (vrs-pop with
   cubic-bezier(0.34, 1.56, 0.64, 1) overshoot easing).
   ============================================================ */
.mm-mc-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(8, 14, 22, 0);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: background 0.22s ease-out;
  padding: 24px;
}
.mm-mc-overlay.is-visible {
  pointer-events: auto;
  background: rgba(8, 14, 22, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mm-mc-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 32px 28px;
  text-align: center;
  width: min(82vw, 320px);
  box-shadow: 0 12px 40px rgba(8, 14, 22, 0.25);
  transform: scale(0.85);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease-out;
}
.mm-mc-overlay.is-visible .mm-mc-card {
  transform: scale(1);
  opacity: 1;
}

.mm-mc-ring {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--primary-soft, rgba(45, 189, 198, 0.16));
  color: var(--primary, #2dbdc6);
  display: grid; place-items: center;
  margin: 0 auto 18px;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s;
}
.mm-mc-overlay.is-visible .mm-mc-ring {
  transform: scale(1);
}
.mm-mc-tick {
  width: 38px; height: 38px;
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.22, 0.8, 0.36, 1) 0.32s;
}
.mm-mc-overlay.is-visible .mm-mc-tick {
  stroke-dashoffset: 0;
}

.mm-mc-title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #0f172a;
  margin: 0 0 4px;
}
.mm-mc-subtitle {
  font-size: 0.92rem;
  color: #64748b;
  margin: 0;
  letter-spacing: -0.005em;
}


/* ============================================================
   Thanks toast — big thumbs-up confirmation with spring physics.
   Replaces the native alert() on a Safety Observation submit. Same
   overshoot easing as the HoR month-complete celebration. Auto-
   dismisses; fully in-app (no iOS prompt). Sizes use clamp() per the
   companion relative-sizing rule so it fits every phone.
   ============================================================ */
.mm-thanks {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8, 14, 22, 0);
  pointer-events: none;
  transition: background 0.22s ease-out;
}
.mm-thanks.is-visible {
  pointer-events: auto;
  background: rgba(8, 14, 22, 0.34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mm-thanks__card {
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 3.4vw, 18px);
  transform: scale(0.82);
  opacity: 0;
  transition:
    transform 0.46s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.22s ease-out;
}
.mm-thanks.is-visible .mm-thanks__card { transform: scale(1); opacity: 1; }
.mm-thanks__ring {
  width: clamp(96px, 28vw, 132px);
  height: clamp(96px, 28vw, 132px);
  border-radius: 50%;
  background: var(--primary, #2dbdc6);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 18px 44px rgba(45, 189, 198, 0.5);
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.04s;
}
.mm-thanks.is-visible .mm-thanks__ring { transform: scale(1); }
.mm-thanks__thumb {
  width: clamp(46px, 13vw, 60px);
  height: clamp(46px, 13vw, 60px);
  transform: scale(0);
}
.mm-thanks.is-visible .mm-thanks__thumb {
  animation: mmThanksPop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) 0.14s forwards;
}
@keyframes mmThanksPop {
  0%   { transform: scale(0) rotate(-22deg); }
  55%  { transform: scale(1.22) rotate(9deg); }
  74%  { transform: scale(0.92) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); }
}
.mm-thanks__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 5.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.32);
}
@media (prefers-reduced-motion: reduce) {
  .mm-thanks__card, .mm-thanks__ring { transition: opacity 0.2s ease-out; transform: none; }
  .mm-thanks.is-visible .mm-thanks__thumb { animation: none; transform: scale(1); }
}


/* ============================================================
   App update banner — shown at the top of the viewport when the
   bundled build is behind the server's latest_companion_build.
   Mirrors the iPad app's update-banner pattern.
   ============================================================ */
.mm-update-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--safe-top)) 18px 10px;
  background: linear-gradient(180deg, #f97316, #ea580c);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.mm-update-banner:not([hidden]) { display: flex; }
.mm-update-banner__icon {
  flex-shrink: 0;
  opacity: 0.95;
}
.mm-update-banner__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-update-banner__cta {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.15s;
}
.mm-update-banner__cta:hover,
.mm-update-banner__cta:active {
  background: rgba(255, 255, 255, 0.32);
}
/* When the banner is visible, body content shifts down so it doesn't
   slide under the banner. Pages already account for safe-top + header. */
body.has-mm-update-banner {
  padding-top: calc(56px + var(--safe-top));
}


/* ============================================================
   Weather briefing sheet — opens when the home weather tile is
   tapped. AI-generated one-line briefing + structured tile grid.
   ============================================================ */
.wx-sheet {
  position: fixed;
  inset: 0;
  z-index: 710;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.wx-sheet.hidden { display: none; }
.wx-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  animation: sec-sheet-fade 180ms ease-out;
}
.wx-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  padding: 8px 22px calc(20px + var(--safe-bottom));
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.25);
  animation: sec-sheet-slide 280ms cubic-bezier(0.22, 0.8, 0.36, 1);
  -webkit-overflow-scrolling: touch;
}
.wx-sheet__grabber {
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.16);
  margin: 4px auto 12px;
}
.wx-sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wx-sheet__close:active { background: rgba(15, 23, 42, 0.12); }

/* Metadata row — small serif, navy, all-caps first tag */
.wx-sheet__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 4px 2px 10px;
  font-variant-numeric: tabular-nums;
}
.wx-sheet__meta-label {
  font-weight: 700;
  letter-spacing: 0.16em;
}
.wx-sheet__meta-dot {
  color: var(--text-muted);
  opacity: 0.5;
  font-weight: 400;
}

.wx-sheet__rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0 -4px 16px;
}

/* Briefing block — gold section label + serif-ish lead paragraph */
.wx-sheet__briefing-block {
  margin-bottom: 18px;
}
.wx-sheet__section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #D4A53A;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.wx-sheet__briefing {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Feedback row — thumbs up / thumbs down under the briefing. Quiet by
   default, active state uses the brand coral to match the emphasis
   inside the sentence itself. */
.wx-sheet__feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.wx-sheet__feedback-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-right: 2px;
}
.wx-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.wx-thumb:active { transform: scale(0.92); }

/* Brief confirmation pulse on the button the user actually tapped —
   coral flash + scale bump, just long enough to register. */
.wx-thumb.is-just-pressed {
  animation: wxThumbPulse 0.45s ease-out;
}
@keyframes wxThumbPulse {
  0%   { transform: scale(1); background: #fff; color: var(--text-muted); border-color: var(--border); }
  40%  { transform: scale(1.12); background: var(--primary); color: #fff; border-color: var(--primary); }
  100% { transform: scale(1); background: #fff; color: var(--text-muted); border-color: var(--border); }
}

/* After submission the whole row dims + goes inert — prevents spam
   double-tap and signals "we got it". Reset when the sheet re-opens
   on a new briefing. */
.wx-sheet__feedback.is-submitted .wx-thumb {
  opacity: 0.45;
  pointer-events: none;
}
/* Emphasis spans within the briefing (coral) — applied by JS if the
   sentence contains specific tokens worth pulling forward. Kept
   minimal so we don't over-highlight. */
.wx-sheet__briefing em,
.wx-sheet__briefing .wx-emph {
  font-style: italic;
  color: var(--primary);
  font-weight: 600;
}

/* 2-col tile grid */
.wx-sheet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
.wx-tile {
  padding: 14px 14px 16px;
  border-bottom: 1px solid var(--border);
}
.wx-tile:nth-child(odd) { border-right: 1px solid var(--border); }
.wx-tile:last-child,
.wx-tile:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--border); }
.wx-tile__head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  margin-bottom: 8px;
}
.wx-tile__icon { flex-shrink: 0; opacity: 0.8; }
.wx-tile__label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.wx-tile__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text);
  line-height: 1;
}
.wx-tile__value strong {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.wx-tile__unit {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.wx-tile__sub {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}
/* Coral accent on pressure-trend sub when rising/falling (applied by JS) */
.wx-tile__sub.wx-trend-rising,
.wx-tile__sub.wx-trend-falling {
  color: var(--primary);
  font-weight: 500;
}

/* Forecast strip — sampled every 3h from the cached 48h forecast.
   Sits between the metric tiles and the footer in the briefing sheet. */
.wx-forecast {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.wx-forecast__title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wx-forecast__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
}
.wx-forecast__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  font-variant-numeric: tabular-nums;
}
.wx-forecast__time {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.wx-forecast__temp {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.wx-forecast__wind {
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.wx-sheet__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Home weather tile — make it feel tappable now that it opens the modal */
.mm-weather-mini {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.mm-weather-mini:active { opacity: 0.7; }


/* ============================================================
   Tier gating — locked states + upsell sheet
   Core-tier yachts see Plus features as greyed-out entry points
   (with a PLUS tag) that open an upsell sheet on tap, instead of
   the feature being hidden entirely.
   ============================================================ */

/* Inline "PLUS" chip embedded in quickadd card titles — only visible
   when the parent card is marked locked, so yachts already on Plus/Pro
   don't see a redundant tag. */
.tier-badge {
  display: none;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  margin-left: 6px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8a5a12;
  background: #fde68a;
  border-radius: 4px;
  vertical-align: middle;
  line-height: 1;
}
.quickadd__card.is-tier-locked .tier-badge { display: inline-flex; }

/* Small "+" dot on the Hours bottom-nav icon */
.app-nav__item-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-nav__lock-dot {
  position: absolute;
  top: -4px;
  right: -8px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fde68a;
  color: #8a5a12;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.app-nav__item.is-tier-locked .app-nav__lock-dot { display: inline-flex; }
.app-nav__item.is-tier-locked { opacity: 0.55; }
.app-nav__item.is-tier-locked:active { opacity: 0.55; }

/* Pending-sync dot on the Hours nav item — shown when one or more HoR
   intents are queued offline and waiting to drain. Coral so it reads as
   "needs attention" without being alarming. */
.app-nav__queued-dot {
  position: absolute;
  top: -2px;
  right: -6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #F9522E;
  box-shadow: 0 0 0 2px var(--app-bg, #fff);
  pointer-events: none;
}
.app-nav__queued-dot.hidden { display: none; }

/* "Syncing N changes…" pill at the top of the Hours landing while the
   offline queue is still draining. Tucked above the calendar, muted. */
.hor-sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 12px 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(249, 82, 46, 0.08);
  color: #92400E;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hor-sync-chip.hidden { display: none; }
.hor-sync-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #F9522E;
  animation: hor-sync-chip-pulse 1.4s ease-in-out infinite;
}
.hor-sync-chip.is-pending .hor-sync-chip__dot {
  animation: none;
  opacity: 0.55;
}
@keyframes hor-sync-chip-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Locked quickadd card — greyed-out body, faded chevron, PLUS badge
   still readable. Still clickable so it opens the upsell sheet. */
.quickadd__card.is-tier-locked .quickadd__card-icon,
.quickadd__card.is-tier-locked .quickadd__card-sub,
.quickadd__card.is-tier-locked .quickadd__card-chev {
  opacity: 0.5;
}
.quickadd__card.is-tier-locked .quickadd__card-title {
  color: var(--text-secondary);
}

/* Upsell sheet — same slide-up pattern as sec-sheet, neutral colour. */
.tier-upsell {
  position: fixed;
  inset: 0;
  z-index: 720;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tier-upsell.hidden { display: none; }
.tier-upsell__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  animation: sec-sheet-fade 180ms ease-out;
}
.tier-upsell__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 28px 22px calc(22px + var(--safe-bottom));
  text-align: center;
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.25);
  animation: sec-sheet-slide 260ms cubic-bezier(0.22, 0.8, 0.36, 1);
}
.tier-upsell__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: var(--surface-1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tier-upsell__close:active { background: var(--surface-2); }
.tier-upsell__badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #8a5a12;
  background: #fde68a;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.tier-upsell__title {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.tier-upsell__body {
  margin: 0 0 22px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.tier-upsell__dismiss {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--text);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tier-upsell__dismiss:active { opacity: 0.85; }

/* Non-conformities breakdown sheet */
.hor-nc-sheet {
  position: fixed;
  inset: 0;
  z-index: 720;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hor-nc-sheet.hidden { display: none; }
.hor-nc-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  animation: sec-sheet-fade 180ms ease-out;
}
.hor-nc-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.25);
  animation: sec-sheet-slide 260ms cubic-bezier(0.22, 0.8, 0.36, 1);
  display: flex;
  flex-direction: column;
}
.hor-nc-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.hor-nc-sheet__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--hor-bad);
  text-transform: uppercase;
}
.hor-nc-sheet__title {
  margin: 4px 0 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hor-nc-sheet__close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: var(--surface-1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.hor-nc-sheet__close:active { background: var(--surface-2); }
.hor-nc-sheet__body {
  overflow-y: auto;
  padding: 14px 20px calc(22px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-overflow-scrolling: touch;
}
.hor-nc-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hor-nc-day__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  padding: 4px 2px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-nc-day__date {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hor-nc-day__edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

/* Make the summary cell tappable when there are breaches */
.hor-month-summary__cell--clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 80ms, background 120ms;
}
.hor-month-summary__cell--clickable:active {
  transform: scale(0.97);
  background: var(--surface-1);
}


.delivery-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.delivery-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.delivery-modal__header h2 {
  font-size: 1.1rem;
  font-weight: 700;
}

.delivery-modal__close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
}

.delivery-modal__gallery {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}

.delivery-thumb {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}

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

.delivery-thumb__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delivery-thumb__num {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
}

.delivery-modal__add-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 20px;
  padding: 12px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.delivery-modal__add-more:active { background: var(--bg); }

.delivery-modal__note {
  margin: 12px 20px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
}

.delivery-modal__note:focus { border-color: var(--accent); }

.delivery-modal__actions {
  padding: 12px 20px;
}

.delivery-modal__status {
  text-align: center;
  color: var(--danger);
  font-size: 0.85rem;
  padding: 0 20px;
}

/* ============================================
   Deliveries Week Nav
   ============================================ */
.deliveries-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.deliveries-week-nav__btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}

.deliveries-week-nav__btn:active { background: var(--bg); }

.deliveries-week-nav__btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.deliveries-week-nav__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

/* ============================================
   Deliveries Day Headers
   ============================================ */
.deliveries-day-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 12px 0 6px;
}

.deliveries-day-header--today {
  color: var(--accent);
}

.deliveries-day-none {
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.5;
  padding: 0 0 4px;
}

/* ============================================
   Delivery Cards (list view)
   ============================================ */
.deliveries-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.delivery-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.delivery-card:active { opacity: 0.85; }

.delivery-card__photo {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
}

.delivery-card__photo--empty {
  background: var(--border);
}

.delivery-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.delivery-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.delivery-card__by {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.delivery-card__time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.delivery-card__note {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-card__count {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 600;
}

/* ============================================
   Delivery Lightbox
   ============================================ */
.delivery-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 700;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delivery-lightbox__close {
  position: absolute;
  bottom: calc(24px + var(--safe-bottom));
  right: 24px;
  background: rgba(255,107,107,0.2);
  border: none;
  cursor: pointer;
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.delivery-lightbox__close:active {
  background: rgba(255,107,107,0.4);
}

.delivery-lightbox__counter {
  position: absolute;
  bottom: calc(32px + var(--safe-bottom));
  left: 24px;
  color: #ff6b6b;
  font-size: 1.1rem;
  font-weight: 800;
  z-index: 10;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.delivery-lightbox__scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.delivery-lightbox__scroll::-webkit-scrollbar { display: none; }

.delivery-lightbox__img {
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  object-fit: contain;
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ============================================
   Camera Loading Curtain
   ============================================ */
.camera-curtain {
  position: fixed;
  inset: 0;
  z-index: 750;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: curtainIn 0.2s ease;
}

.camera-curtain--out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.camera-curtain__content {
  opacity: 0.5;
  animation: curtainPulse 1s ease-in-out infinite;
}

@keyframes curtainIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes curtainPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* ============================================
   Camera Overlay (CameraPreview)
   ============================================ */
body.camera-active {
  background: transparent !important;
}

body.camera-active #appScreen,
body.camera-active #authScreen {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#appScreen,
#authScreen {
  transition: opacity 0.25s ease;
}

.camera-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.camera-overlay > * { pointer-events: auto; }

.camera-overlay__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  padding-top: calc(16px + var(--safe-top));
}

.camera-overlay__cancel {
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.camera-overlay__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 24px 32px;
  padding-bottom: calc(24px + var(--safe-bottom));
}

.camera-overlay__bottom .camera-thumb-stack {
  justify-self: start;
}

.camera-overlay__bottom .camera-overlay__shutter {
  justify-self: center;
}

.camera-overlay__bottom .camera-overlay__done {
  justify-self: end;
}

.camera-overlay__shutter {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255,255,255,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.camera-overlay__shutter:active {
  transform: scale(0.75);
  transition: transform 0.08s ease;
}

.camera-overlay__shutter-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.1);
}

.camera-overlay__done {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 12px rgba(249, 82, 46, 0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.camera-overlay__done:active {
  background: var(--primary-dark);
  box-shadow: 0 2px 6px rgba(249, 82, 46, 0.3);
}

/* Thumbnail stack (bottom-left, like iOS screenshot) */
.camera-thumb-stack {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.camera-thumb-item {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.camera-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.camera-thumb-item:nth-last-child(2) {
  transform: translate(-3px, -3px) scale(0.92);
  opacity: 0.7;
}

.camera-thumb-item:nth-last-child(3) {
  transform: translate(-6px, -6px) scale(0.84);
  opacity: 0.4;
}

.camera-thumb-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 5;
  background: var(--primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(249, 82, 46, 0.3);
}

.camera-thumb-animate {
  animation: thumbSlideIn 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes thumbSlideIn {
  0% { transform: scale(1.3) translate(40px, -20px); opacity: 0; }
  100% { transform: scale(1) translate(0, 0); opacity: 1; }
}

/* ============================================
   Camera Gallery
   Opens from the thumb stack during a delivery capture. Shows every
   photo taken so far with a delete control, and a back-to-camera
   button. Fullscreen over the camera preview.
   ============================================ */
.camera-gallery {
  position: fixed;
  inset: 0;
  z-index: 2100;   /* above camera overlay (1000) and OCR match card */
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  animation: cameraGalleryIn 0.22s ease-out;
}
.camera-gallery.hidden { display: none; }

@keyframes cameraGalleryIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.camera-gallery__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.camera-gallery__close {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.camera-gallery__close:active { background: rgba(255, 255, 255, 0.18); }
.camera-gallery__title {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.camera-gallery__count {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
}

.camera-gallery__grid {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}
.camera-gallery__item {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: #151515;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.camera-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.camera-gallery__tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  right: 42px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: rgba(249, 82, 46, 0.92);
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.camera-gallery__delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.camera-gallery__delete:active { background: rgba(220, 38, 38, 0.85); }

/* ============================================
   Emergency Overlay
   ============================================ */
.emergency-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, #7f1d1d 0%, #dc2626 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: emergency-pulse 2s ease-in-out infinite;
}

@keyframes emergency-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}

.emergency-content {
  text-align: center;
  color: #fff;
  padding: 24px;
}

.emergency-icon {
  margin-bottom: 20px;
  animation: emergency-bounce 1s ease infinite;
}

@keyframes emergency-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.emergency-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.emergency-subtitle {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 24px;
}

.emergency-duties {
  background: rgba(0,0,0,0.2);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
}

/* ============================================
   Home Tab — v2 redesign
   ============================================ */
#homeTab { padding: 0 20px 20px; }

/* Hero greeting + wind compass */
.mm-hero { padding: 8px 0 20px; }
.mm-hero__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.mm-hero__date { flex: 1; min-width: 0; }
.mm-hero__greeting {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.mm-hero__weekday {
  font-size: 30px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.8px;
  line-height: 1.1;
}
.mm-hero__daymonth {
  font-size: 46px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -2.5px;
  line-height: 1.1;
  margin-top: -2px;
}
.mm-hero__compass {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 14px;
}
.mm-compass {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 44px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.mm-compass__n {
  position: absolute;
  top: 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.mm-compass__dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}
.mm-compass__dot--s { bottom: 10px; left: 50%; margin-left: -2px; }
.mm-compass__dot--e { right: 10px; top: 50%; margin-top: -2px; }
.mm-compass__dot--w { left: 10px; top: 50%; margin-top: -2px; }
/* Compass v3 — 24-tick ring, diamond needle, spec-accurate */
.mm-compass-v3 {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Smoothing is done in JS (EMA + rAF coalescing). A CSS transition
     here fights the JS updates — at 60Hz, every new transform restarts
     the 500ms animation from the in-flight value, so on a noisy
     magnetometer (steel hull, indoors) the dial wobbles continuously.
     Keep this no-transition. */
  will-change: transform;
}
.mm-compass-v3:active { box-shadow: 0 0 0 2px var(--primary-soft, rgba(86, 178, 187, 0.15)); }
.mm-compass-v3__tick {
  position: absolute;
  border-radius: 1px;
}
.mm-compass-v3__label {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 700;
  transform: translate(-50%, -50%);
  user-select: none;
}
.mm-compass-v3__needle-wrap {
  position: absolute;
  inset: 0;
  /* No CSS transition — see .mm-compass-v3 above. JS smooths via EMA
     + rAF; CSS transitions on top double up and cause stutter. */
  will-change: transform;
}
.mm-compass-v3__needle-n,
.mm-compass-v3__needle-s {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
}
.mm-compass-v3__needle-n {
  top: 50%;
  margin-top: -36px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 36px solid var(--primary);
}
.mm-compass-v3__needle-s {
  top: 50%;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 28px solid var(--surface-3);
}
.mm-compass-v3__cap {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--border);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.mm-compass-v3__readout {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 6px;
}
.mm-compass-v3__deg {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
}
.mm-compass-v3__unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.mm-compass-v3__card {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  margin-left: 4px;
}
.mm-compass__speed {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin-top: 8px;
  text-align: right;
  color: var(--text);
}
.mm-compass__speed-unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}
.mm-compass__dir {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-top: 2px;
  text-align: right;
  color: var(--text-muted);
}

/* Vessel pill */
.mm-vessel-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 12px;
}
.mm-vessel-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--success);
}
.mm-vessel-pill__text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.mm-vessel-pill__div {
  width: 1px;
  height: 12px;
  background: var(--border);
}

/* Hours nudge */
.mm-nudge {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.27);
  background: rgba(245, 158, 11, 0.09);
  padding: 12px 14px;
  margin-bottom: 12px;
  color: var(--warning);
  font-family: var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mm-nudge__text { flex: 1; text-align: left; font-size: 13px; font-weight: 500; }
.mm-nudge__cta { font-size: 13px; font-weight: 700; }

/* Watch / Next-watch card (shared) */
.mm-watch-card {
  display: flex;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  margin-bottom: 12px;
  overflow: hidden;
}
.mm-watch-card__bar {
  width: 4px;
  background: var(--primary);
  flex-shrink: 0;
}
.mm-watch-card--next .mm-watch-card__bar { background: var(--accent); }
.mm-watch-card__inner { flex: 1; min-width: 0; }
.mm-watch-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 10px;
  gap: 8px;
}
.mm-watch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(249, 82, 46, 0.25);
  background: rgba(249, 82, 46, 0.10);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.mm-watch-badge--accent {
  border-color: rgba(26, 58, 92, 0.27);
  background: rgba(26, 58, 92, 0.10);
  color: var(--accent);
}
.mm-watch-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: currentColor;
}
.mm-watch-card__hours {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.mm-watch-card__countdown { padding: 0 18px 14px; }
.mm-watch-card__big {
  font-size: 62px;
  font-weight: 700;
  letter-spacing: -3.5px;
  line-height: 1.05;
  color: var(--text);
}
.mm-watch-card__until {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}
.mm-progress-track {
  height: 3px;
  margin: 0 18px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.mm-progress-fill {
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.mm-watch-card--next .mm-progress-fill { background: var(--accent); }
.mm-progress-labels {
  display: flex;
  justify-content: space-between;
  padding: 5px 18px 14px;
  font-size: 10px;
  color: var(--text-muted);
}
.mm-watch-divider {
  height: 1px;
  background: var(--border);
  margin: 0 18px 10px;
}
.mm-crew-list {
  list-style: none;
  padding: 0 0 6px;
  margin: 0;
}
.mm-crew-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
}
.mm-crew-dot {
  width: 9px;
  height: 9px;
  border-radius: 5px;
  flex-shrink: 0;
  border: 1.5px solid var(--surface-3);
  background: transparent;
  box-sizing: border-box;
}
.mm-crew-dot--lead {
  background: var(--primary);
  border-color: var(--primary);
}
.mm-watch-card--next .mm-crew-dot--lead {
  background: var(--accent);
  border-color: var(--accent);
}
.mm-crew-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-crew-name--lead { color: var(--text); }
.mm-crew-role {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Next watch meta */
.mm-next-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 14px;
  gap: 12px;
}
.mm-next-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--text);
}
.mm-next-in {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 3px;
}
.mm-next-in__val {
  color: var(--accent);
  font-weight: 700;
}
.mm-next-initials {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid rgba(26, 58, 92, 0.27);
  background: rgba(26, 58, 92, 0.13);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Conditions card */
.mm-cond-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  margin-bottom: 12px;
  overflow: hidden;
}
.mm-cond-card__top {
  display: flex;
  padding: 18px;
  gap: 16px;
}
.mm-cond-card__left {
  width: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mm-cond-card__bnum {
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -4px;
  line-height: 1.03;
  color: var(--success);
}
.mm-cond-card__bnum--warn { color: var(--warning); }
.mm-cond-card__bnum--danger { color: var(--danger); }
.mm-cond-card__blabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-top: 2px;
  color: var(--text-muted);
}
.mm-cond-card__bdesc {
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
  color: var(--text);
}
.mm-cond-card__div {
  width: 1px;
  background: var(--border);
  margin: 4px 0;
}
.mm-cond-card__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.mm-cond-stat__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
}
.mm-cond-stat__row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--text-muted);
}
.mm-cond-stat__value {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
}
.mm-cond-stat__sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.mm-cond-card__hdiv {
  height: 1px;
  background: var(--border);
}
.mm-bf-bar {
  display: flex;
  gap: 2px;
  margin: 12px 18px 0;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}
.mm-bf-bar__seg {
  flex: 1;
  height: 4px;
  border-radius: 1px;
  background: var(--border);
}
.mm-bf-bar__seg--on { background: var(--success); }
.mm-bf-bar__seg--on-warn { background: var(--warning); }
.mm-bf-bar__seg--on-danger { background: var(--danger); }
.mm-bf-bar__seg--soft { opacity: 0.4; }
.mm-bf-bar__labels {
  display: flex;
  justify-content: space-between;
  margin: 5px 18px 14px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Generic section card.
   Variant B lift (2026-06-02): page bg moved to #EEF0F3 (cooler/darker),
   cards stay crisp white, hairline border softened to rgba and a tiny
   soft shadow lifts them off the page — same iOS Health / Files / Settings
   pattern that solved the "one continuous scroll" complaint. */
.mm-section {
  background: var(--card);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
  display: block;
  width: 100%;
  text-align: left;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 14px rgba(15, 23, 42, 0.04);
}
.mm-section--button {
  background: var(--card);
  border: 1px solid rgba(15, 23, 42, 0.05);
  cursor: pointer;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 14px rgba(15, 23, 42, 0.04);
}
.mm-section__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  padding: 18px 20px 12px;
  color: var(--text);
}
.mm-section__title-row {
  display: flex;
  align-items: center;
  padding: 18px 20px 12px;
  gap: 10px;
}
.mm-section__title-inline {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
}
.mm-section__sublabel {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════
   SHARED CARD-TAB HEADER  (design system — home-feed cards)
   A coloured corner-notch folder tab flush to the card's top-left,
   in the card's identity colour. Drop `.mm-card__tab` as the FIRST
   child of any .mm-section (which already clips via overflow:hidden),
   and set the colour with a `.mm-card--<type>` class on the section.
   ════════════════════════════════════════════════════════════════ */
.mm-card__tab {
  position: absolute;     /* flush to the card corner regardless of card padding */
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tab, var(--ink-2));
  color: #fff;
  font: 800 9.5px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 13px 7px;
  border-radius: var(--radius-lg) 0 13px 0;  /* square into the corner, top-left matches card radius */
}
.mm-card__tab::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
}
/* Identity colours — set --tab on the card; the tab inherits it. The card
   becomes the positioning context so the absolute tab anchors to its corner. */
.mm-card--watch, .mm-card--tender, .mm-card--muster, .mm-card--isps,
.mm-card--hours, .mm-card--delivery, .mm-card--eng { position: relative; }
.mm-card--watch    { --tab: var(--tab-watch); }
.mm-card--tender   { --tab: var(--tab-tender); }
.mm-card--muster   { --tab: var(--tab-muster); }
.mm-card--isps     { --tab: var(--tab-isps); }
.mm-card--hours    { --tab: var(--tab-hours); }
.mm-card--delivery { --tab: var(--tab-delivery); }
.mm-card--eng      { --tab: var(--tab-eng); }
/* Home-feed cards not in the base kit type list. */
.mm-card--notice, .mm-card--safety, .mm-card--brief, .mm-card--marine { position: relative; }
.mm-card--notice { --tab: var(--gold); }
.mm-card--safety { --tab: var(--coral); }
/* ── Safety Documents tab — read-only PDF library (offline per folder) ── */
.docs-list { padding: 4px 16px calc(env(safe-area-inset-bottom) + 90px); display: flex; flex-direction: column; gap: 6px; }
.docs-folder:first-child .docs-folderhead { margin-top: 4px; }
.docs-folderhead { display: flex; align-items: center; gap: 10px; margin: 12px 2px 6px; }
.docs-folderhead__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; text-align: left; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.docs-folderhead__caret { color: #94a3b8; flex: none; transition: transform 0.18s ease; }
.docs-folder--collapsed .docs-folderhead__caret { transform: rotate(0deg); }
.docs-folderhead__main[aria-expanded="true"] .docs-folderhead__caret { transform: rotate(90deg); }
.docs-folderhead__text { min-width: 0; display: flex; flex-direction: column; }
.docs-folderhead__name { font-size: 0.9rem; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-folderhead__meta { font-size: 0.72rem; color: #94a3b8; }
.docs-folder__body { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.docs-folder--collapsed .docs-folder__body { display: none; }
.docs-dl { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; }
.docs-dl:active { background: #f8fafc; }
.docs-dl--downloaded { border-color: #bbf7d0; background: #f0fdf4; color: #16a34a; }
.docs-dl--downloading { color: #2563eb; }
.docs-dl--downloading svg { animation: docs-spin 0.9s linear infinite; }
@keyframes docs-spin { to { transform: rotate(360deg); } }
.docs-row { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 13px; padding: 12px 13px; text-align: left; font-family: inherit; cursor: pointer; }
.docs-row:active { background: #f8fafc; }
.docs-row__icon { width: 36px; height: 36px; border-radius: 10px; background: #fef2f2; color: #dc2626; display: flex; align-items: center; justify-content: center; flex: none; }
.docs-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.docs-row__title { font-size: 0.95rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-row__meta { font-size: 0.78rem; color: #94a3b8; }
.docs-row__offline { color: #16a34a; flex: none; display: flex; align-items: center; }
.docs-row__chev { color: #cbd5e1; flex: none; }

/* My Safety Duties card is tappable -> opens the Duties tab */
#homeSafetyCard { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.08s ease; }
#homeSafetyCard:active { transform: scale(0.992); }
.mm-card__go { position: absolute; top: 11px; right: 13px; z-index: 3; color: #cbd5e1; display: flex; }
.mm-card--brief  { --tab: var(--teal); }
.mm-card--marine { --tab: var(--ink-2); }

/* Push a card's first content clear of the absolute corner tab.
   padding for header rows (no background); margin for the safety-tabs
   pill container (has a background — padding would inflate it). */
[class*="mm-card--"] > .mm-section__title-row,
[class*="mm-card--"] > .mm-topic-brief__head { padding-top: 36px; }
[class*="mm-card--"] > .mm-safety-tabs { margin-top: 34px; }

/* Notice Board: when everything's read the badge is hidden, leaving the
   title-row empty. Collapse that empty row and shift the tab clearance onto
   the notice list so the list sits cleanly under the corner tab (no empty
   band, no lone "all read" count). */
#homeNoticeBoardSection > .mm-section__title-row:has(> .mm-notice-badge.hidden) {
  display: none;
}
#homeNoticeBoardSection > .mm-section__title-row:has(> .mm-notice-badge.hidden) + .mm-notice-list {
  padding-top: 36px;
}

/* Status pill for the tab-card header right slot. */
.mm-pill {
  font: 700 10px var(--font-sans);
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mm-pill--teal  { background: var(--teal-tint);  color: var(--teal-press); }
.mm-pill--coral { background: var(--coral-tint); color: var(--coral-press); }
.mm-pill--gold  { background: var(--gold-tint);  color: var(--gold-press); }

/* Schedule list */
.mm-schedule {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mm-schedule li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.mm-schedule li:last-child { border-bottom: none; }
.mm-schedule li.is-past { color: var(--text-muted); }
.mm-schedule__time {
  font-size: 13px;
  font-weight: 700;
  width: 44px;
  color: var(--accent);
  flex-shrink: 0;
}
.mm-schedule li.is-past .mm-schedule__time { color: var(--text-muted); }
.mm-schedule__bar {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
}
.mm-schedule__icon {
  flex-shrink: 0;
  color: var(--text);
}
.mm-schedule li.is-past .mm-schedule__icon { color: var(--text-muted); }
.mm-schedule__label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-schedule__chev {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Rest status */
.mm-rest-bars {
  display: flex;
  padding: 0 20px;
  gap: 6px;
  margin-bottom: 14px;
}
.mm-rest-bars > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.mm-rest-bar {
  width: 100%;
  height: 52px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.mm-rest-bar__fill {
  width: 100%;
  border-radius: 4px;
  background: var(--success);
}
.mm-rest-bar__fill--warn { background: var(--warning); }
.mm-rest-bar__fill--danger { background: var(--danger); }
.mm-rest-bar__label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
}
.mm-rest-bar__label--today {
  color: var(--text);
  font-weight: 700;
}
.mm-rest-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 14px;
}
.mm-rest-summary {
  display: flex;
  align-items: center;
  padding: 0 20px 16px;
}
.mm-rest-summary__item { flex: 1; min-width: 0; }
.mm-rest-summary__div {
  width: 1px;
  height: 32px;
  background: var(--border);
  margin: 0 16px;
}
.mm-rest-summary__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.mm-rest-summary__value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--text);
}
.mm-rest-summary__value--good { color: var(--success); }
.mm-rest-summary__value--warn { color: var(--warning); }
.mm-rest-summary__value--bad  { color: var(--danger); }
.mm-rest-summary__value--muted { color: var(--text-muted); }
.mm-rest-summary__min {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.mm-rest-summary__chev {
  padding-left: 8px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

/* Notice board */
.mm-notice-badge {
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(249, 82, 46, 0.27);
  background: rgba(249, 82, 46, 0.13);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}
.mm-notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mm-notice-list li {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.mm-notice-list li:last-child { border-bottom: none; }
.mm-notice__avatar {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--surface-3);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.mm-notice__body { flex: 1; min-width: 0; }
.mm-notice__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  gap: 8px;
}
.mm-notice__from {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.mm-notice__ago {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.mm-notice__text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Notice categories === */
.mm-notice__cat {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  background: rgba(148,163,184,0.18); color: #475569;
  flex-shrink: 0;
}
.mm-notice__cat--management { background: rgba(30,58,138,0.14);  color: #1e3a8a; }
.mm-notice__cat--flag_state { background: rgba(180,83,9,0.16);   color: #92400e; }
.mm-notice__cat--safety     { background: rgba(185,28,28,0.14);  color: #991b1b; }
.mm-notice__cat--operations { background: rgba(71,85,105,0.16);  color: #334155; }

/* Left-border accent on each row */
.mm-notice-list li.mm-notice__row--cat-general    { box-shadow: inset 3px 0 0 0 rgba(14,138,155,0.5); }
.mm-notice-list li.mm-notice__row--cat-management { box-shadow: inset 3px 0 0 0 rgba(30,58,138,0.6); }
.mm-notice-list li.mm-notice__row--cat-flag_state { box-shadow: inset 3px 0 0 0 rgba(180,83,9,0.65); }
.mm-notice-list li.mm-notice__row--cat-safety     { box-shadow: inset 3px 0 0 0 rgba(185,28,28,0.65); }
.mm-notice-list li.mm-notice__row--cat-operations { box-shadow: inset 3px 0 0 0 rgba(71,85,105,0.55); }

/* Filter chip bar inside All Notices overlay */
.mm-notice-filterbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.mm-notice-filter {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.mm-notice-filter.is-active {
  background: var(--text); border-color: var(--text); color: #fff;
}
.mm-notice-filter--management.is-active { background: #1e3a8a; border-color: #1e3a8a; }
.mm-notice-filter--flag_state.is-active { background: #b45309; border-color: #b45309; }
.mm-notice-filter--safety.is-active     { background: #b91c1c; border-color: #b91c1c; }
.mm-notice-filter--operations.is-active { background: #475569; border-color: #475569; }
.mm-notice-filter--general.is-active    { background: #0e8a9b; border-color: #0e8a9b; }

/* ============================================
   Crew Report sheet (Direct to DPA + Report a Concern)
   ============================================ */
.cr-sheet {
  position: fixed; inset: 0; z-index: 8500;
  display: flex; align-items: flex-end; justify-content: center;
}
.cr-sheet.hidden { display: none; }
.cr-sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.cr-sheet__panel {
  position: relative;
  width: 100%; max-width: 600px;
  max-height: 92vh;
  background: #fff;
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.18);
  animation: crSlideUp 0.22s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes crSlideUp {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cr-sheet__header {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.cr-sheet__head-text { flex: 1; min-width: 0; }
.cr-sheet__title  { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
.cr-sheet__sub    { font-size: 12.5px; color: var(--text-muted); margin: 3px 0 0; }
.cr-sheet__close {
  background: transparent; border: none; padding: 6px;
  color: var(--text-muted); cursor: pointer; border-radius: 8px;
  margin-top: -4px;
}
.cr-sheet__close:active { background: rgba(0,0,0,0.06); }

.cr-sheet__body {
  flex: 1; overflow-y: auto;
  padding: 16px 20px 18px;
  -webkit-overflow-scrolling: touch;
}
.cr-sheet__footer {
  display: flex; gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.cr-sheet__cancel {
  flex: 1; padding: 13px 16px;
  border: 1px solid var(--border); background: #fff;
  border-radius: 13px;
  font-size: 14.5px; font-weight: 600; color: var(--text);
  cursor: pointer;
}
.cr-sheet__cancel:active { background: var(--surface-2); }
.cr-sheet__submit {
  flex: 2; padding: 13px 16px;
  border: none; background: var(--primary); color: #fff;
  border-radius: 13px;
  font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.cr-sheet__submit:disabled { background: var(--surface-3); color: var(--text-muted); cursor: not-allowed; }
.cr-sheet__submit:not(:disabled):active { opacity: 0.85; }
.cr-sheet__submit.is-success { background: #10b981; }

/* Form fields */
.cr-field { display: block; margin-bottom: 16px; }
.cr-field__label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--text); margin-bottom: 6px;
}
.cr-field__optional {
  font-weight: 400; color: var(--text-muted); font-size: 11px; margin-left: 4px;
}
.cr-field__select,
.cr-field__textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 14px; font-size: 15px; font-family: inherit;
  color: var(--text); background: #fff;
}
.cr-field__select:focus,
.cr-field__textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(249, 82, 46, 0.15);
}
.cr-field__textarea { resize: vertical; min-height: 96px; line-height: 1.45; }

/* Attachment uploader */
.cr-attach-zone {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 14px;
  border: 1.5px dashed var(--border); border-radius: 14px;
  cursor: pointer; text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cr-attach-zone:active { border-color: var(--primary); background: rgba(249, 82, 46, 0.04); }
.cr-attach-zone__text { font-size: 13px; font-weight: 600; color: var(--text); }
.cr-attach-zone__hint { font-size: 11px; color: var(--text-muted); }

.cr-file-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.cr-file-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--surface-1);
  font-size: 12.5px;
}
.cr-file-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text); }
.cr-file-item__size { font-size: 11px; color: var(--text-muted); }
.cr-file-item__remove {
  background: transparent; border: none; padding: 4px;
  color: var(--text-muted); cursor: pointer; border-radius: 6px;
  display: inline-flex;
}
.cr-file-item__remove:active { background: rgba(0,0,0,0.05); }

/* Anonymity row + slider */
.cr-anon-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-top: 4px;
  background: var(--surface-1); border-radius: 14px;
}
.cr-anon-row__text { flex: 1; min-width: 0; }
.cr-anon-row__label { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.cr-anon-row__hint  { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

.cr-switch { position: relative; display: inline-block; width: 46px; height: 28px; flex-shrink: 0; }
.cr-switch input { opacity: 0; width: 0; height: 0; }
.cr-switch__track {
  position: absolute; inset: 0;
  background: var(--surface-3);
  border-radius: 999px;
  transition: background 0.18s ease;
}
.cr-switch__track::before {
  content: ""; position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: #fff; border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cr-switch input:checked + .cr-switch__track { background: var(--primary); }
.cr-switch input:checked + .cr-switch__track::before { transform: translateX(18px); }

.cr-explainer-link {
  display: block; margin: 12px 0 4px;
  background: none; border: none; padding: 4px 0;
  color: var(--primary); font-size: 12.5px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Explainer sheet — same shape, sits above the report sheet */
#crewReportExplainerSheet { z-index: 8600; }
.cr-explainer__lead { font-size: 14px; color: var(--text); margin: 0 0 10px; line-height: 1.5; }
.cr-explainer__list { padding: 0 0 0 18px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cr-explainer__list li { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.cr-explainer__list li strong { color: var(--text); }

/* Disabled Quick Add card (DPA before recipient is set) */
.quickadd__card.is-disabled {
  opacity: 0.5; pointer-events: none;
}

/* ============================================
   Hero Carousel
   ============================================ */
.mm-carousel {
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}
.mm-carousel__track {
  display: flex;
  transition: transform 0.4s ease;
}
.mm-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.mm-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 4px;
}
.mm-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
}
.mm-carousel__dot--active {
  background: var(--primary);
  width: 18px;
}

/* Hero slide variants */
.mm-hero { padding: 8px 0 4px; }
.mm-hero__greeting {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.mm-hero__weekday {
  font-size: 30px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.8px;
  line-height: 1.1;
}
.mm-hero__daymonth {
  font-size: 46px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -2.5px;
  line-height: 1.1;
  margin-top: -2px;
}
.mm-hero__sublabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
/* Date slide with device compass */
.mm-hero--date-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.mm-hero__date { flex: 1; min-width: 0; }
.mm-hero__compass {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 14px;
}

.mm-hero--safety, .mm-hero--tip {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.mm-hero--safety .mm-hero__safety-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--text);
  line-height: 1.15;
}
.mm-hero--safety .mm-hero__safety-detail {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 6px;
}
.mm-hero--yacht .mm-hero__yacht-name {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--text);
  line-height: 1.1;
}
.mm-hero--yacht .mm-hero__yacht-role {
  font-size: 15px;
  font-weight: 500;
  color: var(--primary);
  margin-top: 6px;
}
.mm-hero--tip .mm-hero__tip-text {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
  line-height: 1.35;
}

/* Security level slide — V11 "big tactical". Read-only; --sl-color
   is set per level by applySecurityHeroSlide(). */
.mm-hero--security {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.mm-hero__security-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mm-hero__security-num {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--sl-color, #0E9B94);
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1px;
}
.mm-hero__security-meta {
  text-align: left;
  min-width: 0;
}
.mm-hero__security-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--text);
  line-height: 1.15;
}
.mm-hero__security-tag {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.3;
}

/* ============================================
   My Safety Duties card
   ============================================ */
/* Tab clearance: the shield-icon title-row was removed, so the duties list is
   now the card's first child and must clear the absolute corner tab itself. */
.mm-safety-duties { padding: 36px 0 0; }
.mm-safety-duty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.mm-safety-duty:last-child { border-bottom: none; }
.mm-safety-duty__color {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
}
.mm-safety-duty__info { flex: 1; min-width: 0; }
.mm-safety-duty__scenario {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.mm-safety-duty__role {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.mm-safety-duty__station {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(249, 82, 46, 0.10);
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.mm-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ============================================
   Quick Actions
   ============================================ */
.mm-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.mm-action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-sans);
  transition: transform 0.1s;
}
.mm-action:active { transform: scale(0.96); }
.mm-action__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.mm-action__icon--danger {
  background: rgba(239, 68, 68, 0.10);
  color: var(--danger);
}
.mm-action__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

/* ============================================
   Recent Deliveries (compact)
   ============================================ */
.mm-deliveries-compact { padding: 0; }
.mm-delivery-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.mm-delivery-row:last-child { border-bottom: none; }
.mm-delivery-row__thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  overflow: hidden;
}
.mm-delivery-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mm-delivery-row__info { flex: 1; min-width: 0; }
.mm-delivery-row__note {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-delivery-row__meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.mm-delivery-row__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-1);
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ============================================
   Marine Safety Notices (MCA)
   ============================================ */
.mm-mgn-badge {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(26, 58, 92, 0.10);
  border: 1px solid rgba(26, 58, 92, 0.20);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
/* Gold variant for premium / Plus-tier callouts (e.g. Topic Brief). */
.mm-mgn-badge--gold {
  background: rgba(212, 165, 58, 0.12);
  border-color: rgba(212, 165, 58, 0.35);
  color: #8a5a12;
}

/* ── Topic Brief — swipeable 3-card stack ──────────────────────────
   AI-distilled COSWP brief shown on the home screen for Plus/Pro
   yachts. 3 sections (setup / practice / pitfall) in a horizontal
   scroll-snap track. Page dots + thumbs feedback below. */
/* ── Tender Tracker (Pro) — design ported from
   ~/Downloads/tender-tracker-detail.html mockup.
   Tokens (mockup):
     coral  #F9522E  primary accent / outer fence / alarm
     teal   #35B8B2  proximity / inner fence
     gold   #D4A53A  secondary tender, low-fuel
     ink    #0B1B2B  primary text
     ink2   #1A3A5C  navy / mothership / chrome
     muted  #64748B  labels
     pink-bg #FEF0EA tinted icon background
─────────────────────────────────────────────────────────── */
.mm-tt-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 34px 18px 16px;   /* extra top to clear the corner-notch tab */
}
.mm-tt-card:active { opacity: 0.92; }
.mm-tt-card__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.mm-tt-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: #FEF0EA; color: #F9522E;
}
.mm-tt-card__head-meta {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mm-tt-card__eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  color: #64748B; text-transform: uppercase;
}
.mm-tt-card__live {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  color: #F9522E;
}
.mm-tt-card__live-dot {
  width: 6px; height: 6px; border-radius: 3px; background: #F9522E;
  box-shadow: 0 0 6px #F9522E;
}
.mm-tt-card__live.is-stale { color: #92400E; }
.mm-tt-card__live.is-stale .mm-tt-card__live-dot {
  background: #92400E; box-shadow: none;
}
.mm-tt-card__title {
  font-size: 16.5px; font-weight: 700; color: #0B1B2B; margin: 4px 0 12px;
  letter-spacing: -0.01em;
}

/* Stylised SVG map — sea gradient + coastline blob + bearing lines.
   Not real map tiles; matches the mockup's artistic representation
   and stays performant on cellular. */
.mm-tt-map {
  position: relative;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  background: #AFC8D9;
  border: 1px solid #E5E7EB;
  margin-bottom: 12px;
}
.mm-tt-map svg { display: block; width: 100%; height: 100%; }
/* Leaflet attribution: tiny inside the home thumbnail */
.mm-tt-map .leaflet-control-attribution {
  font-size: 8px;
  background: rgba(255,255,255,0.65);
  padding: 0 4px;
}
.mm-tt-map .leaflet-control-attribution a { color: #1A3A5C; }
.mm-tt-map__scale {
  position: absolute; bottom: 8px; left: 8px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.85); padding: 3px 7px; border-radius: 5px;
  font-size: 9.5px; font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
  color: #1A3A5C; font-weight: 600;
}
.mm-tt-map__scale-bar {
  width: 30px; height: 2px; background: #1A3A5C;
}

/* Tender rows under the map */
.mm-tt-rows { list-style: none; margin: 0; padding: 0; }
.mm-tt-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px; align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #EEF2F6;
}
.mm-tt-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mm-tt-row__dot {
  width: 10px; height: 10px; border-radius: 5px;
  background: var(--mm-tt-color, #F9522E);
  box-shadow: 0 0 6px color-mix(in srgb, var(--mm-tt-color, #F9522E) 50%, transparent);
}
.mm-tt-row__body { min-width: 0; }
.mm-tt-row__name {
  font-size: 13.5px; font-weight: 700; color: #0B1B2B; line-height: 1.2;
}
.mm-tt-row__meta {
  font-size: 11px; color: #64748B; margin-top: 1px;
}
.mm-tt-row__nums {
  text-align: right; flex-shrink: 0;
}
.mm-tt-row__distance {
  font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
  font-size: 12px; font-weight: 700; color: #0B1B2B;
}
.mm-tt-row__sub {
  font-size: 10px; color: #64748B; margin-top: 1px;
}
/* Stale rows: distance is no longer a current claim — fade it and
   tint the age line amber so the user can't mistake an 8h-old fix
   for live data. The "last " prefix is added in JS. */
.mm-tt-row.is-stale .mm-tt-row__distance { color: #94A3B8; font-weight: 600; }
.mm-tt-row.is-stale .mm-tt-row__sub { color: #B45309; font-weight: 600; }
.mm-tt-row.is-stale .mm-tt-row__dot { opacity: 0.45; }
.mm-tt-empty { font-size: 12px; color: #64748B; margin: 6px 0 0; }

/* ── Tender Tracker — DETAIL PAGE ──────────────────────────────
   Full-screen page that slides in when the home tile is tapped.
   Big interactive map with geofence rings + alarm sliders + tender
   rows + recent alarms. Design ported from
   ~/Downloads/tender-tracker-detail.html mockup.
   Tokens (mockup):
     coral  #F9522E  outer fence / alarms
     teal   #35B8B2  proximity / inner fence
     ink    #0B1B2B  primary text
     ink2   #1A3A5C  navy / mothership
     muted  #64748B  labels
     cream  #F4F1EA  screen background
     line   #E5E7EB  card borders
     line2  #EEF2F6  soft dividers
─────────────────────────────────────────────────────────── */
.mm-tt-detail {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: #F4F1EA;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Slide-in transition matches the SIWA / yacht-switcher pattern */
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Bar owns the top safe area (matches app-header pattern); body
     owns the bottom safe area so scrolling content clears the home
     indicator on iPhones without a hardware home button. */
  padding-bottom: env(safe-area-inset-bottom);
}
.mm-tt-detail:not([hidden]) { transform: translateX(0); }
.mm-tt-detail[hidden] { display: none; }

/* Header bar — matches the .app-header spacing rules so the back
   button has a proper 44px tap target clear of the notch / Dynamic
   Island. Pattern matches sig-pad / app-header. */
.mm-tt-detail__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  padding-top: calc(14px + var(--safe-top));
  background: #F4F1EA;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.mm-tt-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Generous tap target — Apple HIG 44pt minimum. Negative margin
     keeps visual weight low without shrinking the hit area. */
  min-height: 44px;
  min-width: 44px;
  padding: 10px 12px;
  margin: -10px -8px -10px -12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #1A3A5C;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mm-tt-detail__back:active { opacity: 0.55; background: rgba(26, 58, 92, 0.06); }
.mm-tt-detail__title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #0B1B2B;
}
.mm-tt-detail__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #F9522E;
  /* Same negative-margin trick — bigger hit area visually balances the back button */
  min-width: 64px;
  padding: 10px 4px;
  margin: -10px -4px -10px 0;
  justify-content: flex-end;
}
.mm-tt-detail__live-dot {
  width: 7px; height: 7px; border-radius: 4px;
  background: #F9522E;
  box-shadow: 0 0 6px #F9522E;
}
.mm-tt-detail__live.is-stale { color: #92400E; }
.mm-tt-detail__live.is-stale .mm-tt-detail__live-dot {
  background: #92400E; box-shadow: none;
}

.mm-tt-detail__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Body is a flex column that scrolls. Default flex-shrink (1) on
   children would compress the map down to nothing as more cards
   are added. Pin children to their natural / declared height so
   the body actually scrolls instead. */
.mm-tt-detail__body > * {
  flex-shrink: 0;
}

/* Tender alarm banner — slides in from the top of the viewport when
   a new alarm event lands in a poll cycle. Stacks if multiple. */
.mm-tt-banner-host {
  position: fixed; top: env(safe-area-inset-top, 0); left: 0; right: 0;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 0;
  pointer-events: none;
}
.mm-tt-banner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: white;
  box-shadow: 0 8px 28px rgba(11, 27, 43, 0.28);
  border-left: 4px solid #35B8B2;
  transform: translateY(-120%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.3, 1), opacity 200ms ease;
}
.mm-tt-banner.is-shown { transform: translateY(0); opacity: 1; }
.mm-tt-banner.is-outer { border-left-color: #F9522E; }
.mm-tt-banner__icon {
  font-size: 22px; line-height: 1;
  color: #35B8B2;
  flex-shrink: 0;
}
.mm-tt-banner.is-outer .mm-tt-banner__icon { color: #F9522E; }
.mm-tt-banner__body { flex: 1; min-width: 0; }
.mm-tt-banner__title {
  font-size: 13px; font-weight: 700; color: #0B1B2B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-tt-banner__sub {
  font-size: 11px; color: #64748B;
  margin-top: 1px;
  font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
}

/* Map — Leaflet OSM tiles with vessel + ring overlays.
   Default ~62vh so it dominates the screen on a phone (the captain's
   primary concern when entering this page); capped on iPad so it
   doesn't sprawl. is-map-expanded mode override below fills the
   whole detail body. */
.mm-tt-detail__map {
  position: relative;
  height: min(62vh, 560px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  background: #AFC8D9;
}
.mm-tt-detail__map-canvas {
  position: absolute; inset: 0;
  z-index: 1;
}
/* Leaflet attribution: keep visible (OSM ToS), but slim it to fit */
.mm-tt-detail__map .leaflet-control-attribution {
  font-size: 9px;
  background: rgba(255,255,255,0.78);
  padding: 1px 5px;
}
.mm-tt-detail__map .leaflet-control-zoom {
  margin: 8px !important;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.mm-tt-detail__map .leaflet-control-zoom a {
  width: 28px; height: 28px; line-height: 28px;
  background: rgba(255,255,255,0.95);
  color: #0B1B2B; font-size: 18px;
}
/* Vessel pins (rendered as Leaflet divIcons) */
.mm-tt-pin {
  display: block; position: relative;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.25);
}
.mm-tt-pin--mothership {
  width: 18px; height: 18px;
  background: #1A3A5C;
}
.mm-tt-pin--tender { background: #F9522E; }
.mm-tt-pin--tender.is-selected {
  box-shadow: 0 0 0 4px rgba(249, 82, 46, 0.25), 0 0 0 1px rgba(0,0,0,0.18);
}
.mm-tt-pin--ping {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: mmTtPing 2.4s ease-out infinite;
  pointer-events: none;
  opacity: 0;
}
@keyframes mmTtPing {
  0% { transform: scale(0.8); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}
.mm-tt-arrow {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.mm-tt-arrow svg { display: block; }

/* Tender chevron — directional pin pointing at the heading.
   The wrapper rotates; the SVG inside stays upright via no
   transform so the stroke / drop-shadow read normally. */
.mm-tt-chevron {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  transform-origin: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.mm-tt-chevron__svg { display: block; position: relative; z-index: 2; }
.mm-tt-chevron__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.18;
  z-index: 1;
}
.mm-tt-chevron.is-selected .mm-tt-chevron__halo {
  inset: -4px;
  opacity: 0.22;
}

/* Vessel detail popup — compact pill anchored above the pin.
   The Leaflet wrapper IS the pill, with a tiny down-arrow tip. */
.leaflet-popup.mm-tt-popup .leaflet-popup-content-wrapper {
  background: #0B1B2B;
  color: #fff;
  border-radius: 999px;
  padding: 7px 14px 7px 11px;
  box-shadow:
    0 6px 24px rgba(11, 27, 43, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.leaflet-popup.mm-tt-popup .leaflet-popup-content {
  margin: 0;
  font-family: inherit;
  color: #fff;
  width: auto !important;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
}
.leaflet-popup.mm-tt-popup .leaflet-popup-tip {
  background: #0B1B2B;
  box-shadow: none;
}
.mm-tt-popup__dot {
  width: 7px; height: 7px;
  border-radius: 4px;
  background: #F9522E;
  box-shadow: 0 0 8px #F9522E;
  flex-shrink: 0;
}
.mm-tt-popup__name {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mm-tt-popup__div {
  width: 1px; height: 11px;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.mm-tt-popup__dist {
  font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #F9522E;
}
.mm-tt-popup__speed {
  font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #fff;
}
.mm-tt-popup__ago {
  font-size: 10.5px;
  opacity: 0.55;
}
.mm-tt-detail__legend {
  position: absolute; top: 10px; left: 10px;
  background: rgba(255,255,255,0.9);
  padding: 6px 9px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; color: #0B1B2B;
  pointer-events: none;
}
.mm-tt-detail__legend-row {
  display: flex; align-items: center; gap: 6px;
}
.mm-tt-detail__legend-ring {
  width: 10px; height: 10px; border-radius: 5px;
  border: 1.5px dashed #35B8B2;
}
.mm-tt-detail__legend-ring--coral { border-color: #F9522E; }
.mm-tt-detail__legend-ring--teal { border-color: #35B8B2; }
.mm-tt-detail__focus {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,0.92);
  padding: 5px 9px; border-radius: 8px;
  font-size: 10px; font-weight: 700; color: #0B1B2B;
  display: inline-flex; align-items: center; gap: 6px;
  pointer-events: none;
  z-index: 500;
}
.mm-tt-detail__focus-dot {
  width: 7px; height: 7px; border-radius: 4px;
  background: #1A3A5C; box-shadow: 0 0 6px rgba(26, 58, 92, 0.55);
}
.mm-tt-detail__legend {
  z-index: 500;
}
.mm-tt-detail__fit {
  position: absolute; bottom: 10px; right: 52px;
  z-index: 500;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.95);
  border: none; border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px; font-weight: 700; color: #0B1B2B;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  cursor: pointer;
  font-family: inherit;
}
.mm-tt-detail__fit:active { transform: scale(0.96); }
.mm-tt-detail__expand {
  position: absolute; bottom: 10px; right: 10px;
  z-index: 500;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.95);
  border: none; border-radius: 8px;
  color: #0B1B2B;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mm-tt-detail__expand:active { transform: scale(0.94); }
.mm-tt-detail__expand-icon--close { display: none; }
.mm-tt-detail.is-map-expanded .mm-tt-detail__expand-icon--open { display: none; }
.mm-tt-detail.is-map-expanded .mm-tt-detail__expand-icon--close { display: block; }

/* Fullscreen map mode — map fills the whole detail body, cards
   below are hidden. Header bar stays visible so Home/back is always
   reachable. Triggered by tapping the expand button. */
.mm-tt-detail.is-map-expanded .mm-tt-detail__body {
  padding: 0;
  overflow: hidden;
}
.mm-tt-detail.is-map-expanded .mm-tt-detail__map {
  height: 100%;
  border-radius: 0;
  border: none;
  margin: 0;
}
.mm-tt-detail.is-map-expanded .mm-tt-detail__card,
.mm-tt-detail.is-map-expanded .mm-tt-detail__card--rows {
  display: none;
}

/* Cards */
.mm-tt-detail__card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 14px;
}
/* Vessel cards card — the rows are a horizontal carousel inside.
   No overflow clip on the outer card: setting overflow-x: hidden
   silently forces overflow-y to clip too (CSS spec), which was
   chopping the bottom of the selected card's coloured border.
   Horizontal scroll is contained by the inner ul's overflow-x:auto. */
.mm-tt-detail__card--rows {
  padding: 14px 0 16px;
}

.mm-tt-detail__eyebrow {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; color: #64748B;
  text-transform: uppercase;
}

/* Vessel cards — horizontal scroll carousel. Pattern matches the
   "Shared daily insights" pill cards in other apps. Each card is
   ~140px wide; the row is scroll-snapped so cards align cleanly
   on swipe. Visible peek of the next card hints at scrollability. */
.mm-tt-detail__rows {
  list-style: none;
  margin: 0;
  padding: 0 14px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
}
.mm-tt-detail__rows::-webkit-scrollbar { display: none; }

.mm-tt-detail__vcard {
  flex-shrink: 0;
  width: 132px;
  scroll-snap-align: start;
  padding: 8px 10px 9px;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1.5px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease;
  display: flex; flex-direction: column;
  gap: 4px;
}
.mm-tt-detail__vcard:active { background: #EEF2F6; }
.mm-tt-detail__vcard.is-selected {
  background: #FFFFFF;
  border-color: var(--mm-tt-color, #F9522E);
  box-shadow: 0 0 0 1px var(--mm-tt-color, #F9522E);
}
.mm-tt-detail__vcard.is-warn {
  background: #FEF0EA;
}

.mm-tt-detail__vcard-head {
  display: flex; align-items: center; gap: 5px;
}
.mm-tt-detail__vcard-dot {
  flex-shrink: 0;
  width: 7px; height: 7px; border-radius: 4px;
  background: var(--mm-tt-color, #F9522E);
}
.mm-tt-detail__vcard-role {
  flex: 1;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-tt-detail__vcard-flag {
  font-size: 8.5px; font-weight: 800;
  color: #FFFFFF; background: #F9522E;
  padding: 1px 4px; border-radius: 3px;
  letter-spacing: 0.06em;
}
.mm-tt-detail__vcard-name {
  font-size: 13px; font-weight: 700;
  color: #0B1B2B;
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-tt-detail__vcard-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 4px;
  margin-top: 2px;
}
.mm-tt-detail__vcard-primary {
  font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
  font-size: 13px; font-weight: 700; color: #0B1B2B;
}
.mm-tt-detail__vcard-primary.is-ship {
  font-family: inherit;
  font-size: 10px; font-weight: 600;
  color: #94A3B8;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mm-tt-detail__vcard.is-warn .mm-tt-detail__vcard-primary { color: #F9522E; }
.mm-tt-detail__vcard.is-stale .mm-tt-detail__vcard-primary { color: #94A3B8; }
.mm-tt-detail__vcard.is-stale .mm-tt-detail__vcard-secondary { color: #B45309; font-weight: 600; }
.mm-tt-detail__vcard.is-stale .mm-tt-detail__vcard-dot { opacity: 0.45; }
.mm-tt-detail__vcard-secondary {
  font-size: 10px; color: #94A3B8;
  white-space: nowrap;
}

/* Distance Alarms */
.mm-tt-detail__alarm-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.mm-tt-detail__alarm-title {
  font-size: 15px; font-weight: 700; color: #0B1B2B; margin-top: 2px;
}
/* Collapsible card pattern: tap the eyebrow+title row to expand the
   sliders. Master toggle stays clickable while collapsed so the
   user can flip alarms on/off without expanding. */
.mm-tt-detail__alarm-summary {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 6px 4px;
  margin: -6px -4px;
  background: transparent; border: 0;
  text-align: left;
  font: inherit; color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mm-tt-detail__alarm-summary:active { opacity: 0.6; }
.mm-tt-detail__alarm-chevron {
  color: #64748B;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.mm-tt-detail__card--collapsible.is-collapsed .mm-tt-detail__alarm-chevron {
  transform: rotate(-90deg);
}
.mm-tt-detail__card--collapsible .mm-tt-detail__alarm-head {
  margin-bottom: 0;
}
.mm-tt-detail__card--collapsible:not(.is-collapsed) .mm-tt-detail__alarm-head {
  margin-bottom: 14px;
}
.mm-tt-detail__alarm-body {
  display: block;
  overflow: hidden;
}
.mm-tt-detail__card--collapsible.is-collapsed .mm-tt-detail__alarm-body {
  display: none;
}

/* Read-only mode: shown to crew without head_of_department flag.
   They can see thresholds + on/off state but can't change them. */
.mm-tt-detail__alarm-readonly {
  display: none;
  font-size: 9px;
  font-weight: 600;
  color: #92531B;
  margin-left: 4px;
}
.mm-tt-detail.is-readonly .mm-tt-detail__alarm-readonly {
  display: inline;
}
.mm-tt-detail.is-readonly .mm-tt-detail__alarm-summary {
  pointer-events: none;
}
.mm-tt-detail.is-readonly .mm-tt-detail__alarm-chevron {
  visibility: hidden;
}
.mm-tt-detail.is-readonly .mm-tt-detail__toggle {
  opacity: 0.55;
  pointer-events: none;
}
.mm-tt-detail.is-readonly .mm-tt-detail__range {
  opacity: 0.55;
  pointer-events: none;
}
.mm-tt-detail.is-readonly .mm-tt-detail__chip {
  opacity: 0.6;
  pointer-events: none;
}
.mm-tt-detail.is-readonly .mm-tt-detail__delivery {
  opacity: 0.55;
}

.mm-tt-detail__toggle {
  width: 44px; height: 26px; border-radius: 13px;
  border: 0; padding: 2px;
  background: #CBD5E1;
  cursor: pointer;
  transition: background 150ms;
  -webkit-tap-highlight-color: transparent;
}
.mm-tt-detail__toggle[aria-pressed="true"] { background: #35B8B2; }
.mm-tt-detail__toggle-knob {
  display: block;
  width: 22px; height: 22px; border-radius: 11px;
  background: #FFFFFF;
  transform: translateX(0);
  transition: transform 150ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.mm-tt-detail__toggle[aria-pressed="true"] .mm-tt-detail__toggle-knob {
  transform: translateX(18px);
}

.mm-tt-detail__slider { transition: opacity 150ms; }
.mm-tt-detail__slider-divider {
  height: 1px; background: #EEF2F6; margin: 14px 0;
}
.mm-tt-detail__slider-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.mm-tt-detail__slider-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-tt-detail__slider-icon--teal { background: rgba(53, 184, 178, 0.12); color: #35B8B2; }
.mm-tt-detail__slider-icon--coral { background: rgba(249, 82, 46, 0.12); color: #F9522E; }
.mm-tt-detail__slider-meta { flex: 1; min-width: 0; }
.mm-tt-detail__slider-label {
  font-size: 13px; font-weight: 700; color: #0B1B2B;
}
.mm-tt-detail__slider-sub {
  font-size: 10.5px; color: #64748B; margin-top: 1px;
}
.mm-tt-detail__slider-value {
  font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
  font-size: 14px; font-weight: 700;
}
.mm-tt-detail__slider-value--teal { color: #35B8B2; }
.mm-tt-detail__slider-value--coral { color: #F9522E; }
.mm-tt-detail__slider-bounds {
  display: flex; justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
  color: #64748B;
}

/* Range slider — no native styling, hand-rolled track */
.mm-tt-detail__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%; height: 6px;
  border-radius: 3px;
  background: #EEF2F6;
  outline: none;
  cursor: pointer;
  margin: 4px 0;
}
.mm-tt-detail__range--teal { background: linear-gradient(to right, #35B8B2 var(--fill, 25%), #EEF2F6 var(--fill, 25%)); }
.mm-tt-detail__range--coral { background: linear-gradient(to right, #F9522E var(--fill, 50%), #EEF2F6 var(--fill, 50%)); }
.mm-tt-detail__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px; border-radius: 11px;
  background: #FFFFFF;
  border: 2px solid #0B1B2B;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.mm-tt-detail__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 11px;
  background: #FFFFFF;
  border: 2px solid #0B1B2B;
  cursor: pointer;
}
.mm-tt-detail.is-disabled .mm-tt-detail__slider { opacity: 0.4; pointer-events: none; }

.mm-tt-detail__chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}
.mm-tt-detail__chip {
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #1A3A5C;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mm-tt-detail__chip.is-active {
  background: #0B1B2B; color: #FFFFFF; border-color: #0B1B2B;
}

.mm-tt-detail__delivery {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  background: #F8FAFC; border-radius: 9px;
  font-size: 11.5px;
}
.mm-tt-detail__delivery-label { flex: 1; color: #0B1B2B; }
.mm-tt-detail__delivery-cta { color: #64748B; font-weight: 600; }
.mm-tt-detail__empty {
  font-size: 11.5px; color: #64748B; margin: 8px 0 0;
}

/* Recent-alarms history rows */
/* Notifications card sub-text under the title */
.mm-tt-detail__notify-sub {
  font-size: 11px; color: #64748B;
  margin-top: 2px;
  line-height: 1.35;
  max-width: 220px;
}

/* Recent Alarms section — header row with eyebrow + Clear button */
.mm-tt-detail__alarm-list-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.mm-tt-detail__alarm-clear {
  border: 0; background: transparent;
  color: #1A3A5C;
  font-size: 12px; font-weight: 700;
  padding: 6px 10px;
  margin: -6px -8px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.mm-tt-detail__alarm-clear:active {
  opacity: 0.55;
  background: rgba(26, 58, 92, 0.06);
}

.mm-tt-detail__alarm-list {
  list-style: none; margin: 8px 0 0; padding: 0;
}
.mm-tt-detail__alarm-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #EEF2F6;
}
.mm-tt-detail__alarm-row:last-child { border-bottom: 0; }
.mm-tt-detail__alarm-dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: var(--mm-tt-color, #F9522E);
}
.mm-tt-detail__alarm-row.is-active .mm-tt-detail__alarm-dot {
  box-shadow: 0 0 6px var(--mm-tt-color, #F9522E);
}
.mm-tt-detail__alarm-meta { min-width: 0; }
.mm-tt-detail__alarm-tender {
  font-size: 12.5px; font-weight: 600; color: #0B1B2B;
}
.mm-tt-detail__alarm-event {
  font-size: 11px; color: #64748B; margin-top: 1px;
}
.mm-tt-detail__alarm-time {
  font-size: 10.5px; color: #64748B;
  font-family: 'JetBrains Mono', SFMono-Regular, ui-monospace, monospace;
  white-space: nowrap;
}
.mm-tt-detail__alarm-pill {
  font-size: 9px; font-weight: 700;
  color: #F9522E; background: #FEF0EA;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.04em;
}

/* ============================================================
   Topic Brief — horizontal feed of mini chapter cards.
   Each card carries a deterministic palette (peach / blue / yellow
   / lavender / mint / sky) keyed off chapter_number, with a faded
   chapter-number watermark. Tap "Read brief" to open a slide-up
   sheet (.tb-sheet) with the full Setup/Practice/Pitfall sections.

   Important: this section overrides .mm-section so the chapter cards
   sit directly on the home page background — no surrounding wrapper
   card. Keeps the colour-blocked cards as the visual focus rather
   than nesting them in another beige container.
   ============================================================ */
.mm-section.mm-topic-brief {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 4px 0 8px;
}
.mm-topic-brief__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 10px;
  gap: 10px;
}
.mm-topic-brief__head-meta {
  font-size: 12px;
  color: #78716C;
  font-weight: 500;
  white-space: nowrap;
}
.mm-topic-brief__feed {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Cards align flush with #homeTab's 20px gutter so the left edge
     matches the other home cards. Tiny right-side padding so the
     last card doesn't slam the gutter when fully scrolled. */
  padding: 4px 4px 6px 0;
  gap: 12px;
}
.mm-topic-brief__feed::-webkit-scrollbar { display: none; }

.mm-tb-card {
  position: relative;
  flex: 0 0 78%;
  max-width: 320px;
  scroll-snap-align: start;
  padding: 14px 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--tb-border, rgba(0,0,0,0.06));
  background: var(--tb-bg, #F4F1EA);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.mm-tb-card:active { transform: scale(0.985); }

.mm-tb-card__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mm-tb-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tb-accent, #1A3A5C);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-tb-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tb-accent, #1A3A5C);
  flex: 0 0 7px;
}
.mm-tb-card__today {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  background: #FFFFFF;
  color: #1C1917;
  border-radius: 5px;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.mm-tb-card__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #1C1917;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mm-tb-card__summary {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #44403C;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.mm-tb-card__watermark {
  position: absolute;
  right: 14px;
  bottom: 44px;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tb-accent, #1A3A5C);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}
.mm-tb-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  font-size: 12px;
}
.mm-tb-card__minutes {
  color: #78716C;
  font-weight: 500;
}
.mm-tb-card__cta {
  color: var(--tb-accent, #1A3A5C);
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.mm-tb-card__cta::after {
  content: " \2192";
  font-weight: 600;
}

/* "Read more chapters" tile — same footprint as a chapter card so the
   carousel rhythm holds. Muted neutral so it doesn't compete with the
   real briefs visually. */
.mm-tb-card--more {
  border: 1px dashed rgba(0,0,0,0.18);
  background: #FAFAF7;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mm-tb-card--more__chev {
  font-size: 26px;
  font-weight: 700;
  color: #1C1917;
  line-height: 1;
}
.mm-tb-card--more__label {
  font-size: 14px;
  font-weight: 700;
  color: #1C1917;
  letter-spacing: -0.005em;
}
.mm-tb-card--more__hint {
  font-size: 12px;
  color: #78716C;
  font-weight: 500;
}

/* Topic Brief reader sheet — slide-up from the bottom, ~78vh tall,
   scrollable body, footer pinned at the bottom. Mirrors wx-sheet
   structure. */
.tb-sheet {
  position: fixed;
  inset: 0;
  z-index: 720;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Chapter picker rows (inside a tb-sheet body) */
.tb-picker__row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 2px;
  border: none; background: none; text-align: left;
  font-family: inherit; cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
.tb-picker__row:last-child { border-bottom: none; }
.tb-picker__row:active { background: #f8fafc; }
.tb-picker__num {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: #f1f5f9; color: #475569;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.82rem; font-variant-numeric: tabular-nums;
}
.tb-picker__name { flex: 1; font-size: 0.92rem; font-weight: 600; color: var(--text, #1C1917); line-height: 1.3; }
.tb-picker__chev { color: #cbd5e1; flex: none; }
.tb-picker__empty { padding: 18px 4px; font-size: 0.88rem; color: #94a3b8; font-style: italic; }
.tb-sheet.hidden { display: none; }
.tb-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  animation: tb-sheet-fade 180ms ease-out;
}
.tb-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--card, #FFFFFF);
  border-radius: 22px 22px 0 0;
  padding: 12px 0 calc(12px + var(--safe-bottom)) 0;
  box-shadow: 0 -10px 50px rgba(15, 23, 42, 0.28);
  animation: tb-sheet-slide 260ms cubic-bezier(0.22, 0.8, 0.36, 1);
  display: flex;
  flex-direction: column;
  max-height: 82vh;
}
@keyframes tb-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tb-sheet-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }
.tb-sheet__grabber {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
  margin: 4px auto 8px;
}
.tb-sheet__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.06);
  color: #44403C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tb-sheet__head {
  padding: 4px 22px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.tb-sheet__chapter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tb-accent, #1A3A5C);
}
.tb-sheet__chapter::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.tb-sheet__title {
  margin: 8px 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #1C1917;
}
.tb-sheet__summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #57534E;
}
.tb-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 8px;
  -webkit-overflow-scrolling: touch;
}
.tb-sheet__section {
  margin-bottom: 18px;
}
.tb-sheet__section:last-child { margin-bottom: 4px; }
.tb-sheet__section-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tb-accent, #1A3A5C);
  margin-bottom: 4px;
}
.tb-sheet__section--pitfall .tb-sheet__section-eyebrow { color: #B23B1F; }
.tb-sheet__section-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1C1917;
}
.tb-sheet__section-body {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #44403C;
}
.tb-sheet__section-bullets {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.tb-sheet__section-bullets li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 13.5px;
  line-height: 1.42;
  color: #1C1917;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.tb-sheet__section-bullets li:last-child { border-bottom: none; }
.tb-sheet__section-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tb-accent, #1A3A5C);
}
.tb-sheet__section--pitfall .tb-sheet__section-bullets li::before { background: #F9522E; }
.tb-sheet__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px 0;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: #78716C;
}
.tb-sheet__cite {
  color: #1A3A5C;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-sheet__ogl {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(212, 165, 58, 0.18);
  color: #8a5a12;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tb-sheet__feedback { display: flex; gap: 4px; transition: opacity 0.18s; }
.tb-sheet__feedback.is-submitted .tb-sheet__thumb { pointer-events: none; }
.tb-sheet__feedback.is-submitted .tb-sheet__thumb:not(.tb-sheet__thumb--active) { opacity: 0.4; }
.tb-sheet__thumb {
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 8px;
  width: 30px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.18s;
}
.tb-sheet__thumb:active { transform: scale(0.96); }
.tb-sheet__thumb.is-just-pressed { animation: tb-sheet-thump 0.32s ease-out; }
@keyframes tb-sheet-thump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.tb-sheet__thumb--active[data-thumb="up"] {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.4);
  color: #047857;
}
.tb-sheet__thumb--active[data-thumb="down"] {
  background: rgba(249, 82, 46, 0.12);
  border-color: rgba(249, 82, 46, 0.4);
  color: #B23B1F;
}

/* ── "Keep reading" CTA at the bottom of the TL;DR brief body ────── */
.tb-sheet__keep-reading {
  margin: 12px 0 4px;
  padding: 18px 4px 4px;
  border-top: 1px dashed var(--border);
  text-align: center;
}
.tb-sheet__keep-reading-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px 11px 24px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  transition: transform 0.12s, box-shadow 0.12s;
}
.tb-sheet__keep-reading-btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
}
.tb-sheet__keep-reading-label { line-height: 1; }
.tb-sheet__keep-reading-caption {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ── Long-form deep-dive sheet ────────────────────────────────────── */
/* Layered ABOVE the TL;DR sheet (base z-index 720). The long-form
   slides up while the TL;DR stays in the DOM underneath; closing
   long-form drops the user back to the TL;DR they came from. */
.tb-sheet--lf { z-index: 725; }
.tb-sheet__lf-meta {
  margin: 6px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.tb-sheet__lf-body {
  color: var(--text);
  line-height: 1.6;
  /* Smooth crossfade when the content swaps from the loading state to
     the rendered Markdown. Body innerHTML changes trigger a quick
     opacity dip via the .is-loading class. */
  transition: opacity 180ms ease-out;
}
.tb-sheet__lf-body.is-loading { opacity: 0.45; }
/* Rendered Markdown — tight phone-friendly typography. Headings size
   down from the sheet title; paragraphs short, lists indented just
   enough to read as a group without feeling buried. */
.tb-sheet__lf-body h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  margin: 28px 0 10px;
}
.tb-sheet__lf-body h2:first-child { margin-top: 4px; }
.tb-sheet__lf-body h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin: 22px 0 6px;
}
.tb-sheet__lf-body p {
  font-size: 14.5px;
  color: var(--text);
  margin: 0 0 12px;
}
.tb-sheet__lf-body ul,
.tb-sheet__lf-body ol {
  margin: 4px 0 14px;
  padding-left: 22px;
}
.tb-sheet__lf-body li {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 8px;
}
.tb-sheet__lf-body strong {
  font-weight: 700;
  color: var(--text);
}
.tb-sheet__lf-body em { font-style: italic; }
.tb-sheet__lf-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--surface-1);
  padding: 1px 5px;
  border-radius: 4px;
}
.tb-sheet__lf-body hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}
.tb-lf__loading,
.tb-lf__error {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 28px 12px;
}
.tb-lf__error { color: var(--hor-bad); }

.mm-mgn-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mm-mgn-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: inherit;
}
.mm-mgn-item:last-child { border-bottom: none; }
.mm-mgn-item:active { background: var(--surface-1); }
.mm-mgn-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}
.mm-mgn-item__body { flex: 1; min-width: 0; }
.mm-mgn-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mm-mgn-item__date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.mm-mgn-item__chev {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 6px;
}

/* MGN search */
.mm-mgn-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 10px 16px 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
}
.mm-mgn-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  min-width: 0;
  padding: 2px 0;
}
.mm-mgn-search input::placeholder { color: var(--text-muted); }
.mm-mgn-search input::-webkit-search-cancel-button { display: none; }
.mm-mgn-search__clear {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.mm-mgn-search__clear:active { color: var(--text); }

/* MGN recommended row — gold-highlighted version of mm-mgn-item */
.mm-mgn-recommended { margin-top: 14px; }
.mm-mgn-recommended__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 20px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #b45309;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.mm-mgn-item--recommended {
  background: rgba(234, 179, 8, 0.06);
  border-left: 3px solid #eab308;
  padding-left: 17px; /* 20px - 3px border so title aligns */
}
.mm-mgn-item--recommended:active { background: rgba(234, 179, 8, 0.12); }
.mm-mgn-item__icon--gold {
  background: rgba(234, 179, 8, 0.15);
  color: #b45309;
}
.mm-mgn-item__date--why {
  font-style: italic;
  color: #92400e;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  margin-top: 4px;
}

/* ============================================
   Weather mini (under date in hero)
   ============================================ */
.mm-weather-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}
.mm-weather-mini__row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

/* Notice Board — unread + tap + overlay */
.mm-notice__row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mm-notice__row:active { background: var(--surface-1); }
.mm-notice__row--new {
  background: rgba(245, 158, 11, 0.14);
  border-left: 3px solid #F59E0B;
  padding-left: 17px !important;
}
.mm-notice__avatar--new {
  background: #F59E0B !important;
  color: #fff !important;
}
.mm-notice__new-pill {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
  background: #F59E0B; color: #fff;
  margin-left: 6px; flex-shrink: 0;
}
.mm-notice__viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mm-notice__viewall:active { opacity: 0.7; }

/* Notice detail overlay */
.mm-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(28, 25, 23, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: mmFadeIn 0.2s ease;
}
@keyframes mmFadeIn { from { opacity: 0; } }
.mm-notice-detail {
  background: var(--card);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  padding: 20px;
  padding-bottom: calc(20px + var(--safe-bottom));
  animation: mmSlideUp 0.25s ease;
}
.mm-notice-detail--list { max-height: 80vh; }
@keyframes mmSlideUp { from { transform: translateY(100%); } }
.mm-notice-detail__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.mm-notice-detail__header h3 { flex: 1; }
.mm-notice-detail__close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.mm-notice-detail__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}
.mm-notice-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.mm-notice-attach__img {
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
}
.mm-notice-attach__file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface-1);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.mm-notice-attach__file:active { opacity: 0.7; }

/* === Stepped Notice Reader =========================================== */
.mm-reader {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex; align-items: stretch; justify-content: center;
  z-index: 9000;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}
.mm-reader__panel {
  background: #ffffff;
  display: flex; flex-direction: column;
  width: 100%; max-width: 720px;
  height: 100%;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  margin-top: 4px;
}
.mm-reader__header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}
.mm-reader__head-text { flex: 1; min-width: 0; }
.mm-reader__head-text .mm-notice__from { font-size: 14px; font-weight: 600; margin: 0; }
.mm-reader__head-text .mm-notice__ago  { font-size: 11px; color: var(--text-muted); margin: 1px 0 0; }
.mm-reader__cat {
  flex-shrink: 0; margin-right: 4px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.mm-reader__close {
  background: transparent; border: none; padding: 6px;
  color: var(--text-muted); cursor: pointer; border-radius: 8px;
}
.mm-reader__close:active { background: rgba(0,0,0,0.06); }

.mm-reader__stage {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 20px 24px;
  -webkit-overflow-scrolling: touch;
}
.mm-reader__text-wrap {
  display: flex; flex-direction: column;
  padding: 4px 0;
}
.mm-reader__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
  display: block; margin-bottom: 14px;
}
.mm-reader__text {
  font-size: 17px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; word-wrap: break-word;
  margin: 0;
}
/* Short single-thought messages — centred, larger, feels intentional */
.mm-reader__text-wrap.is-short {
  align-items: center; justify-content: center;
  text-align: center;
  min-height: 55vh;
  padding: 0 8px;
}
.mm-reader__text-wrap.is-short .mm-reader__eyebrow { margin-bottom: 20px; }
.mm-reader__text-wrap.is-short .mm-reader__text {
  font-size: 22px; font-weight: 500; line-height: 1.45;
  max-width: 480px;
}
.mm-reader__image {
  max-width: 100%; height: auto; display: block; margin: 0 auto;
  border-radius: 8px;
}
.mm-reader__pdf-wrap { position: relative; height: 60vh; min-height: 360px; }
.mm-reader__pdf-counter {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(15,23,42,0.75); color: #fff;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  pointer-events: none;
}
.mm-reader__pdf-expand {
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px; border-radius: 12px; border: none;
  background: rgba(15,23,42,0.75); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.mm-reader__pdf-expand:active { opacity: 0.85; }
.mm-reader__filelink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--surface-2); color: var(--primary);
  font-size: 14px; font-weight: 600; text-decoration: none;
}

.mm-reader__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.mm-reader__nav {
  background: transparent; border: 1px solid var(--border);
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); cursor: pointer;
}
.mm-reader__nav:disabled { opacity: 0.35; cursor: default; }
.mm-reader__nav:not(:disabled):active { background: var(--surface-2); }
.mm-reader__nav--spacer { border-color: transparent; pointer-events: none; }
.mm-reader__caption {
  text-align: center; font-size: 12px; color: var(--text-muted);
  margin: 10px 0 0;
}

.mm-reader__dots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.mm-reader__dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--surface-3);
  transition: background 0.15s ease, transform 0.15s ease;
}
.mm-reader__dot.is-engaged { background: var(--primary); }
.mm-reader__dot.is-current { transform: scale(1.4); }

.mm-reader__action {
  padding: 10px 18px 16px;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  text-align: center;
}
.mm-reader__hint {
  font-size: 12px; color: var(--text-muted);
  margin: 0 0 8px;
}
.mm-reader__primary {
  width: 100%; padding: 13px 18px;
  border: none; border-radius: 14px;
  background: var(--primary); color: #fff;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.mm-reader__primary:disabled {
  background: var(--surface-3); color: var(--text-muted);
  cursor: not-allowed;
}
.mm-reader__primary:not(:disabled):active { opacity: 0.85; }

/* === End stepped reader ============================================== */

/* Attachment viewer — slides up from bottom, covers whole screen */
.mm-attach-viewer {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: #111;
  display: flex;
  flex-direction: column;
  animation: mmSlideUpFull 0.25s ease;
}
@keyframes mmSlideUpFull { from { transform: translateY(100%); } to { transform: translateY(0); } }
.mm-attach-viewer__close {
  position: absolute;
  top: calc(12px + var(--safe-top, 0px));
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mm-attach-viewer__close:active { background: rgba(0, 0, 0, 0.8); }
.mm-attach-viewer__title {
  position: absolute;
  top: calc(20px + var(--safe-top, 0px));
  left: 16px;
  right: 68px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.mm-attach-viewer__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: calc(56px + var(--safe-top, 0px));
  padding-bottom: var(--safe-bottom, 0px);
}
.mm-attach-viewer__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none; /* prevents tap-to-navigate on long-press */
}
.mm-attach-viewer__frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
.mm-attach-viewer__pdf-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.mm-attach-viewer__pdf {
  width: 100%;
  height: 100%;
  background: #1f1f1f;
  box-sizing: border-box;
  position: relative;
}
.mm-attach-viewer__pdf--pager {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mm-attach-viewer__pdf--pager::-webkit-scrollbar { display: none; }
.mm-attach-viewer__pdf-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  height: 100%;
}
.mm-attach-viewer__pdf-page canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
}
.mm-attach-viewer__pdf-counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 3;
}
.mm-attach-viewer__pdf-loading,
.mm-attach-viewer__pdf-error {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  padding: 40px 20px;
  text-align: center;
}
.mm-attach-viewer__pdf-error { color: #fca5a5; }
.mm-attach-viewer__caption {
  padding: 14px 20px calc(14px + var(--safe-bottom, 0px));
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.45);
  max-height: 30vh;
  overflow-y: auto;
  white-space: pre-wrap;
}
.mm-notice__attach-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--primary);
  font-weight: 500;
}

/* ============================================================
   Hours of Rest — MLC / STCW crew logging
   ============================================================ */

/* Compliance palette */
:root {
  --hor-good: #10B981;      /* ≥ 10h rest in 24 */
  --hor-good-soft: #ECFDF5;
  --hor-warn: #F59E0B;      /* 6–10h, borderline */
  --hor-warn-soft: #FEF3C7;
  --hor-bad: #EF4444;       /* < 6h, violation */
  --hor-bad-soft: #FEE2E2;
  --hor-ink: #0F172A;
}

/* ── Landing (the Hours tab) ── */

.hor-landing {
  padding: 16px 16px 120px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hor-loading {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}
.hor-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--surface-2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: hor-spin 0.9s linear infinite;
}
@keyframes hor-spin { to { transform: rotate(360deg); } }

.hor-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: var(--hor-bad-soft);
  border-radius: var(--radius);
  border: 1px solid rgba(239, 68, 68, 0.18);
}
.hor-alert__icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--hor-bad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.hor-alert__body { flex: 1; min-width: 0; }
.hor-alert__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hor-bad);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.hor-alert__sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.hor-alert__cta {
  background: transparent;
  border: 1.5px solid var(--hor-bad);
  color: var(--hor-bad);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-alert__cta:active { background: rgba(239, 68, 68, 0.08); }
/* Stack the unlogged + comment-needed alerts with a gap when both show. */
.hor-alert + .hor-alert { margin-top: 8px; }
/* Comment-needed variant — pencil glyph in the same red badge. */
.hor-alert--comment .hor-alert__icon { font-size: 15px; }

/* Leave banner — shown above the alert/metrics row when an active
   CrewLeaveRecord covers the visible month. Friendly amber/teal
   palette so it doesn't read as a violation alert. */
.hor-leave-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #FEF3C7;        /* warm amber surface */
  border-radius: var(--radius);
  border: 1px solid #FDE68A;
  margin-bottom: 12px;
}
.hor-leave-banner__icon {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B45309;  /* matches the banner's CTA outline */
}
.hor-leave-banner__body { flex: 1; min-width: 0; }
.hor-leave-banner__title {
  font-size: 14px;
  font-weight: 700;
  color: #92400E;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.hor-leave-banner__sub {
  font-size: 12px;
  color: #78350F;
  margin-top: 2px;
  line-height: 1.35;
}
.hor-leave-banner__cta {
  background: transparent;
  border: 1.5px solid #B45309;
  color: #92400E;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.hor-leave-banner__cta:active { background: rgba(180, 83, 9, 0.08); }

/* Day-screen leave lock. When .hor-day--leave is on #horDayScreen the
   regular form children are hidden and the leave palm-tree banner
   takes over. Save footer is also hidden so there's no entry path. */
.hor-leave-lock { padding: 16px 0 4px; }
.hor-day--leave .hor-day__body > *:not(#horDayLeaveLock) { display: none !important; }
.hor-day--leave .hor-day__footer { display: none !important; }
.hor-day--leave .hor-day__delete { display: none !important; }

/* Day-screen NC lock. Once the bridge acknowledges a day's non-conformity
   the day is frozen for the crew: the period editor + notes show read-only,
   editing controls are hidden (in JS), and the editor is non-interactive.
   The .hor-ncack banner explains who locked it + the corrective comment. */
.hor-day--locked #horPeriodsContainer { pointer-events: none; opacity: 0.6; }
.hor-day--locked .hor-edit__notes { background: rgba(15,23,42,0.04); color: var(--text-muted); }

/* Home-screen HoR alert — wraps .hor-alert and matches section spacing */
.home-hor-alert {
  display: block;
  margin-bottom: 12px;
}
.home-hor-alert[hidden] { display: none; }

/* 7-day compliance prediction card — only shown under the rolling
   rest metric when the crew is currently in deficit. The date/time
   shown is the exact moment the 168h window crosses 77h, assuming
   no further work is logged from now. */
.hor-prediction {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 4px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--radius);
}
.hor-prediction__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.hor-prediction__body { flex: 1; min-width: 0; }
.hor-prediction__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hor-prediction__sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.45;
}
.hor-prediction__sub strong { color: var(--text); font-weight: 700; }
.hor-prediction--far .hor-prediction__icon {
  background: rgba(239, 68, 68, 0.15);
  color: var(--hor-bad);
}

.hor-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 6px 2px 0;
}

.hor-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hor-metric {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px 13px;
  border: 1px solid var(--border);
  min-width: 0;
}
.hor-metric__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.hor-metric__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 2px;
}
.hor-metric__value--good { color: var(--hor-good); }
.hor-metric__value--warn { color: var(--hor-warn); }
.hor-metric__value--bad  { color: var(--hor-bad);  }
.hor-metric__bar {
  margin-top: 8px;
  height: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.hor-metric__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 280ms cubic-bezier(0.22, 0.8, 0.36, 1);
}
.hor-metric__fill--good { background: var(--hor-good); }
.hor-metric__fill--warn { background: var(--hor-warn); }
.hor-metric__fill--bad  { background: var(--hor-bad);  }
.hor-metric__target {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.hor-today {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border);
}
.hor-today__left { flex: 1; min-width: 0; }
.hor-today__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hor-today__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.hor-today__cta {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-today__cta:active { background: rgba(249, 82, 46, 0.08); }
.hor-today__cta--filled {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.hor-today__cta--filled:active { background: var(--primary-dark); }

/* Mini ribbon (inside Today card when entries exist) */
.hor-today__ribbon {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hor-today__ribbon-track {
  position: relative;
  height: 10px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.hor-today__ribbon-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--hor-ink);
  opacity: 0.85;
}
.hor-today__ribbon-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ── Calendar ── */

.hor-cal {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  border: 1px solid var(--border);
}
.hor-cal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hor-cal__nav {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: var(--surface-1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-cal__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.hor-cal__nav:active:not(:disabled) { background: var(--surface-2); }
.hor-cal__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hor-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.hor-cal__weekday {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0;
}
.hor-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.hor-cal__cell {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding: 0;
}
.hor-cal__cell--empty { visibility: hidden; }
.hor-cal__cell--future { color: var(--surface-3); cursor: default; }
/* Pre-employment days — crew member hadn't joined the yacht yet so
   logging isn't expected. Dimmed and non-clickable. */
.hor-cal__cell--pre-joined { color: var(--surface-3); cursor: default; opacity: 0.55; }
.hor-cal__cell--pre-joined::before { display: none; }
.hor-cal__cell--past-unlogged::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  border: 1.5px dashed var(--surface-3);
  pointer-events: none;
}
.hor-cal__cell--past-unlogged { color: var(--text-secondary); }
.hor-cal__cell--today {
  /* Outlined-only "you are here" marker. Solid coral fill read as an
     alert (Save buttons, NC indicators, the +Add FAB all use the same
     coral), so today looked like "URGENT — log this day". Coral ring
     + bold coral number is enough to scan as the current cursor
     without competing with the action-coral elsewhere. Selected-today
     keeps its solid fill (see selected.today override below) — that
     IS an action state. */
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--primary);
}
.hor-cal__cell--today::before { display: none; }
.hor-cal__cell:active:not(.hor-cal__cell--future):not(.hor-cal__cell--today) {
  background: var(--surface-1);
}
.hor-cal__cell--selected {
  background: rgba(249, 82, 46, 0.14) !important;
  box-shadow: inset 0 0 0 1.5px var(--primary);
  color: var(--primary) !important;
  font-weight: 700;
}
.hor-cal__cell--selected::before { display: none; }
.hor-cal__cell--selected.hor-cal__cell--today {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px var(--primary-dark);
}
/* Selected-today is the only state that still has a solid coral fill
   (active multi-select includes today). Force the status dot white
   here so it stays visible against the fill — same reason the old
   blanket today-dot override existed, but scoped to this one case. */
.hor-cal__cell--selected.hor-cal__cell--today .hor-cal__dot {
  background: #fff !important;
  opacity: 0.9;
}

/* Floating CTA — appears when one or more days are selected */
.hor-sel-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px);
  z-index: 50;
  display: flex;
  gap: 8px;
  align-items: stretch;
  animation: hor-sel-cta-in 220ms cubic-bezier(0.22, 0.8, 0.36, 1);
}
@keyframes hor-sel-cta-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.hor-sel-cta__clear {
  flex: 0 0 auto;
  width: 48px;
  border-radius: 14px;
  border: none;
  background: var(--card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.hor-sel-cta__clear:active { background: var(--surface-1); }
/* Bulk-clear trash. Same card shape as the X button, recoloured with
   the violation/destructive token (--hor-bad) so it matches the
   single-day trash inside the day editor and reads as destructive.
   Only rendered when at least one selected day has something to
   clear — see horRenderSelectionCta. */
.hor-sel-cta__trash {
  flex: 0 0 auto;
  width: 48px;
  border-radius: 14px;
  border: none;
  background: var(--card);
  color: var(--hor-bad);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.hor-sel-cta__trash:active { background: var(--hor-bad-soft); }
.hor-sel-cta__main {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 22px rgba(249, 82, 46, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hor-sel-cta__main:active { background: var(--primary-dark); }
.hor-cal__dot {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
/* When today had a solid coral fill the green / red status dots
   disappeared under it, so we forced the dot white. Now that today
   is just a ring on a transparent background, the natural dot
   colour reads fine on top — drop the override. Today's status
   (compliant / NC) is now correctly colour-coded like any other day,
   with the coral ring telling you it's the current cursor. */
.hor-cal__dot--good { background: var(--hor-good); }
.hor-cal__dot--warn { background: var(--hor-warn); }
.hor-cal__dot--bad  { background: var(--hor-bad);  }
.hor-cal__dot--rest { background: var(--surface-3); }
.hor-cal__dot--leave { background: #1C1917; }  /* ink — used in legend only; calendar cells get the tint instead */

/* Leave day cell — soft ink-grey tint matches the legend swatch.
   The cell tint alone conveys "leave" — no dot is rendered for leave
   days (the dot would be redundant with the tint). Amber stays
   exclusive to Borderline so the two statuses don't get confused. */
.hor-cal__cell--leave {
  background: rgba(28, 25, 23, 0.07);
  color: #1c1917;
}

.hor-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 4px 0;
  font-size: 11px;
  color: var(--text-muted);
}
.hor-cal__hint {
  padding: 6px 4px 0;
  font-size: 10.5px;
  color: var(--text-muted);
  opacity: 0.75;
  letter-spacing: 0.01em;
}
.hor-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hor-legend__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.hor-legend__swatch--good { background: var(--hor-good); }
.hor-legend__swatch--warn { background: var(--hor-warn); }
.hor-legend__swatch--bad  { background: var(--hor-bad);  }
.hor-legend__swatch--rest { background: var(--surface-3); }
.hor-legend__swatch--leave { background: #1C1917; }

.hor-month-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 2px;
}
.hor-month-summary--single {
  grid-template-columns: 1fr;
}
.hor-month-summary__cell {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
}
.hor-month-summary__num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hor-month-summary__num--breach { color: var(--hor-bad); }
.hor-month-summary__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* ── Day / Period Editor (full-screen, sits above app nav) ── */

.hor-day {
  position: fixed;
  inset: 0;
  z-index: 3000;              /* above app-nav (100), app-header, quickadd */
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: hor-day-in 220ms cubic-bezier(0.22, 0.8, 0.36, 1);
}
@keyframes hor-day-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.hor-day__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(12px + var(--safe-top)) 14px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.hor-day__back {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 44px;
}
.hor-day__back:active { background: var(--surface-1); }
.hor-day__title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hor-day__delete {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--hor-bad);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 44px;
}
.hor-day__delete:active { background: var(--hor-bad-soft); }

.hor-day__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 110px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}
/* Stop flex-shrink from squashing individual sections when the breach
   list makes the total content overflow — we want the container to
   scroll, not compress each card. */
.hor-day__body > * { flex-shrink: 0; }

.hor-day__footer {
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* Edit card (Work Period) */
.hor-edit__card {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hor-edit__rail {
  width: 4px;
  background: var(--primary);
  flex: 0 0 4px;
}
.hor-edit__body {
  flex: 1;
  padding: 14px 16px 16px;
}
.hor-edit__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hor-edit__pickers {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.hor-edit__time {
  flex: 1;
  background: var(--surface-1);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms, background 120ms;
}
.hor-edit__time:active {
  background: var(--surface-2);
  border-color: var(--primary);
}
/* Placeholder state — no time picked yet. Greys out the value text
   so the form clearly reads as "you need to pick this" rather than
   pre-filled. */
.hor-edit__time--placeholder .hor-edit__time-value {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0;
}
.hor-edit__time-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hor-edit__time-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 4px;
}
.hor-edit__time-date {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
/* Highlight when Finish rolls into the next day, so a cross-midnight
   shift is unmistakable at a glance. */
.hor-edit__time-date--next {
  color: var(--hor-bad);
  font-weight: 700;
}
.hor-edit__time-date--next::before {
  content: '+ ';
}
.hor-edit__arrow {
  align-self: center;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.hor-edit__cross-midnight {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--hor-warn-soft);
  color: #92400E;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.4;
}

/* Breaks list — sits below the work pickers. Each row mimics the
   start/finish picker style at smaller scale: two tappable times with
   an arrow between, plus a × delete button on the right. */
.hor-edit__breaks { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.hor-edit__breaks:empty { display: none; }
.hor-edit__break {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--hor-rest-soft, #ECFEFF);
  border: 1px solid #BAE6FD;
  border-radius: 12px;
}
.hor-edit__break-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #0E7490;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 4px;
}
.hor-edit__break-time {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  background: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-edit__break-time:active { opacity: 0.7; }
.hor-edit__break-time-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.hor-edit__break-arrow { color: #67E8F9; flex-shrink: 0; }
.hor-edit__break-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.hor-edit__break-remove:active { background: #F1F5F9; color: #475569; }

.hor-edit__add-break {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px dashed #93C5FD;
  border-radius: 12px;
  color: #2563EB;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-edit__add-break:active { background: #EFF6FF; }
.hor-edit__add-break:disabled { opacity: 0.4; cursor: not-allowed; }

/* Add work period button — sits below the periods container. Used for
   split shifts (e.g. cross-midnight carryover + a new shift later). */
.hor-edit__add-period {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px dashed var(--primary, #ea5a3a);
  border-radius: 14px;
  color: var(--primary, #ea5a3a);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-top: 4px;
}
.hor-edit__add-period:active { background: #FFF1ED; }
.hor-edit__add-period:disabled { opacity: 0.4; cursor: not-allowed; }

/* Period card spacing within the container */
#horPeriodsContainer { display: flex; flex-direction: column; gap: 12px; }

/* Remove-period × button on the card header (only shown when >1 period) */
.hor-edit__period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hor-edit__period-header .hor-edit__label { margin-bottom: 0; }
.hor-edit__period-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.hor-edit__period-remove:active { background: #F1F5F9; color: #475569; }

/* No-work-today link */
.hor-edit__rest-day-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-edit__rest-day-link:active { opacity: 0.6; }

/* Comment textarea */
.hor-edit__notes {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text);
  resize: vertical;
  min-height: 78px;
  outline: none;
  transition: border-color 160ms;
}
.hor-edit__notes:focus { border-color: var(--primary); }
.hor-edit__notes::placeholder { color: var(--text-muted); }

/* Required-comment state (MLC: non-compliant days need a reason) */
.hor-edit__notes-wrap { display: flex; flex-direction: column; gap: 6px; }
.hor-edit__notes-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hor-bad);
  padding: 0 2px;
}
.hor-edit__notes--required {
  border-color: var(--hor-bad);
  background: var(--hor-bad-soft);
}
.hor-edit__notes--required:focus { border-color: var(--hor-bad); }
.hor-edit__notes-counter {
  align-self: flex-end;
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 2px;
}

/* STCW rule note under triptych */
.hor-edit__rule-note {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.45;
  padding: 0 8px;
}
.hor-edit__rule-note strong { color: var(--text); font-weight: 600; }

/* Save button */
.hor-edit__save {
  width: 100%;
  padding: 16px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms;
  letter-spacing: -0.01em;
}
.hor-edit__save:active { background: var(--primary-dark); }
.hor-edit__save:disabled {
  background: var(--surface-3);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* 24-hour ribbon */
.hor-ribbon {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 14px 10px;
  border: 1px solid var(--border);
}
.hor-ribbon__track {
  position: relative;
  height: 28px;
  background: var(--surface-2);
  border-radius: 6px;
  overflow: hidden;
}
.hor-ribbon__fills { position: absolute; inset: 0; }
.hor-ribbon__seg {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--hor-ink);
  opacity: 0.86;
}
.hor-ribbon__seg--break {
  background: repeating-linear-gradient(
    45deg, var(--surface-3), var(--surface-3) 4px,
    var(--surface-2) 4px, var(--surface-2) 8px
  );
  opacity: 1;
}
.hor-ribbon__now {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--primary);
  box-shadow: 0 0 6px rgba(249, 82, 46, 0.6);
}
.hor-ribbon__axis {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Triptych */
.hor-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.hor-triptych__cell {
  background: var(--card);
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hor-triptych__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.hor-triptych__dot--work { background: var(--primary); }
.hor-triptych__dot--rest { background: var(--hor-good); }
.hor-triptych__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--hor-good);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hor-triptych__check--warn { background: var(--hor-warn); }
.hor-triptych__check--bad  { background: var(--hor-bad);  }
/* Pending = no times picked yet. Neutral grey so the user doesn't
   read it as "Compliant" before they've entered anything. */
.hor-triptych__check--pending {
  background: var(--surface-2);
  color: var(--text-muted);
}
.hor-triptych__num--pending,
.hor-triptych__num--status.hor-triptych__num--pending { color: var(--text-muted); }
.hor-triptych__num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.hor-triptych__num--status { font-size: 15px; margin-top: 2px; }
/* Secondary rolling-window figure under the calendar number. Same
   font as the label, slightly tighter weight. Sits muted by default;
   turns coral when the rolling rest drops under STCW/MLC minimum so
   the pill flags the regulatory truth even when the calendar-day
   totals look compliant on their own. */
.hor-triptych__sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin-top: 1px;
  min-height: 14px;  /* reserve space so the pill height doesn't jump */
}
.hor-triptych__sub--bad {
  color: var(--hor-bad);
  font-weight: 600;
}
.hor-triptych__num--good { color: var(--hor-good); }
.hor-triptych__num--warn { color: var(--hor-warn); }
.hor-triptych__num--bad  { color: var(--hor-bad);  }
.hor-triptych__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Breach list */
.hor-breaches {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Admin's non-conformity acknowledgement — read-only card shown to the
   crew member once a Captain/ChO has reviewed the day's NC. */
.hor-ncack {
  margin-top: 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 12px 14px;
}
/* HoD comment (stage 2) — teal, to distinguish from the green admin ack. */
.hor-ncack--hod { background: #ecfeff; border-color: #a5f3fc; }
.hor-ncack--hod .hor-ncack__head { color: #0e7490; }
.hor-ncack__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #047857;
}
.hor-ncack__comment {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.45;
  color: #1e293b;
  white-space: pre-wrap;
}
.hor-ncack__by {
  margin-top: 6px;
  font-size: 12px;
  color: #5b7d72;
}
.hor-breaches__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hor-bad);
  text-transform: uppercase;
  padding: 0 2px 2px;
}
.hor-breach {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--hor-bad-soft);
  border: 1px solid rgba(239, 68, 68, 0.22);
  border-radius: var(--radius);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-breach:active { background: rgba(239, 68, 68, 0.12); }
.hor-breach__chev {
  flex: 0 0 16px;
  margin-top: 8px;
  color: var(--text-muted);
  transition: transform 160ms ease;
}
.hor-breach[aria-expanded="true"] .hor-breach__chev { transform: rotate(180deg); }
.hor-breach__details {
  overflow: hidden;
  max-height: 800px;
  transition: max-height 200ms ease, opacity 160ms ease, margin-top 160ms ease;
  margin-top: 4px;
  opacity: 1;
}
.hor-breach--collapsed .hor-breach__details {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
.hor-breach__badge {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--hor-bad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.hor-breach__body { flex: 1; min-width: 0; }
.hor-breach__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hor-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.hor-breach__desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}
.hor-breach__clause {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 6px;
}

/* Math timeline shown directly under each breach description on the
   companion app — explains exactly which work segments fall inside
   the offending window and how rest/work totals shake out. Always
   visible (mobile, no hover). */
.hor-breach__math {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.hor-breach__math-head {
  font-weight: 600;
  color: var(--hor-ink);
  margin-bottom: 4px;
}
.hor-breach__math-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: 1px 0;
  align-items: baseline;
}
.hor-breach__math-row > span:nth-child(2) { color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.hor-breach__math-row > span:nth-child(3) { font-weight: 600; }
.hor-breach__math-row--work > span:nth-child(2),
.hor-breach__math-row--work > span:nth-child(3) { color: var(--hor-ink); }
.hor-breach__math-foot {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.hor-breach__math-foot strong { color: var(--hor-ink); }

/* Copy yesterday chip */
.hor-copy-yesterday {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-copy-yesterday:active { opacity: 0.6; }

/* Period cards */
.hor-periods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hor-period {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-period:active { background: var(--surface-1); }
.hor-period__rail {
  width: 4px;
  background: var(--primary);
}
.hor-period__rail--break { background: var(--warning); }
.hor-period__body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hor-period__times {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
}
.hor-period__time {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hor-period__arrow {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}
.hor-period__duration {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.hor-period__kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-1);
}
.hor-period__chev {
  color: var(--text-muted);
}

.hor-period-empty {
  padding: 30px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
}

/* Rest day toggle */
.hor-restday {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-restday input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hor-restday__frame {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms;
}
.hor-restday__tick {
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 2px;
  transform: scale(0);
  transition: transform 120ms cubic-bezier(0.22, 0.8, 0.36, 1);
}
.hor-restday input:checked ~ .hor-restday__frame {
  border-color: var(--primary);
  background: var(--primary);
}
.hor-restday input:checked ~ .hor-restday__frame .hor-restday__tick {
  background: #fff;
  transform: scale(1);
}
.hor-restday__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hor-restday__label strong {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}
.hor-restday__label small {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

/* Day notes */
.hor-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.hor-notes__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding-left: 2px;
}
.hor-notes__input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  resize: vertical;
  min-height: 60px;
  outline: none;
  transition: border-color 160ms;
}
.hor-notes__input:focus { border-color: var(--primary); }
.hor-notes__counter {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 10px;
  color: var(--text-muted);
  pointer-events: none;
}

/* ── Period Editor (slide-up) ── */

.hor-editor {
  position: fixed;
  inset: 0;
  z-index: 720;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hor-editor__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  animation: sec-sheet-fade 180ms ease-out;
}
.hor-editor__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 22px 18px calc(16px + var(--safe-bottom));
  animation: sec-sheet-slide 260ms cubic-bezier(0.22, 0.8, 0.36, 1);
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.25);
}
.hor-editor__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: var(--surface-1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-editor__close:active { background: var(--surface-2); }
.hor-editor__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  padding-right: 40px;
}
.hor-editor__card {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.hor-editor__rail {
  width: 4px;
  background: var(--primary);
}
.hor-editor__content {
  flex: 1;
  padding: 12px 14px 14px;
}
.hor-editor__label-row {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hor-editor__pickers {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.hor-time {
  flex: 1;
  background: var(--surface-1);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms;
}
.hor-time:active { background: var(--surface-2); }
.hor-time__label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hor-time__value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 2px;
}
.hor-editor__arrow {
  align-self: center;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.hor-editor__cross-midnight {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--hor-warn-soft);
  color: #92400E;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
}
.hor-editor__rule {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.4;
}
.hor-editor__rule strong { color: var(--text); font-weight: 600; }
.hor-editor__actions {
  display: flex;
  gap: 10px;
}
.hor-editor__delete {
  flex: 0 0 auto;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--hor-bad);
  font-weight: 600;
  font-size: 14px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-editor__delete:active { background: var(--hor-bad-soft); }
.hor-editor__save {
  flex: 1;
  padding: 14px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms;
}
.hor-editor__save:active { background: var(--primary-dark); }
.hor-editor__save:disabled {
  background: var(--surface-3);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ── Time Picker (wheel) ── */

.hor-picker {
  position: fixed;
  inset: 0;
  z-index: 3100;             /* above hor-day (3000) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hor-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  animation: sec-sheet-fade 160ms ease-out;
}
.hor-picker__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding-bottom: calc(10px + var(--safe-bottom));
  animation: sec-sheet-slide 240ms cubic-bezier(0.22, 0.8, 0.36, 1);
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.25);
}
.hor-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.hor-picker__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.hor-picker__btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hor-picker__btn--primary {
  color: var(--primary);
  font-weight: 700;
}
.hor-picker__wheels {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  position: relative;
  height: 200px;
}
.hor-picker__colon {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  padding: 0 6px;
  align-self: center;
  margin-bottom: 6px;
}
.hor-picker__wheel {
  flex: 0 1 120px;
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 80px 0;
  text-align: center;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.hor-picker__wheel::-webkit-scrollbar { display: none; }
.hor-picker__opt {
  height: 40px;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hor-picker__opt--selected { color: var(--text); font-weight: 700; }
.hor-picker__next-day {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--hor-bad);
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.hor-picker__selector {
  position: absolute;
  top: calc(50% + 7px);       /* offset so it sits around the middle wheel row */
  left: 14px;
  right: 14px;
  height: 44px;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 12px;
  background: rgba(249, 82, 46, 0.08);
  border: 1.5px solid rgba(249, 82, 46, 0.45);
}

/* ============================================================
   Signature Pad (reusable full-screen overlay)
   ============================================================ */
.sig-pad {
  position: fixed;
  inset: 0;
  /* Topmost modal whenever it's open — must sit above the policy reader
     overlay (.mm-reader, z-index 9000) so signing is reachable from it. */
  z-index: 9500;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  /* The rotate-for-more-room transition — transform only; the box swap
     happens under a solid panel so the rotation reads as one motion. */
  transition: transform 360ms cubic-bezier(0.32, 0.72, 0.22, 1);
}
.sig-pad.hidden { display: none; }
/* In-app landscape: the app is portrait-locked, so the pad itself rotates.
   Standard full-bleed recipe: swap the box to viewport-height × viewport-
   width, rotate about the top-left, pull back up by one element-height. */
.sig-pad--rotated {
  inset: auto;
  top: 0;
  left: 0;
  width: 100vh;
  height: 100vw;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
  /* Rotated, the local LEFT edge sits on the physical notch and the local
     RIGHT edge on the home-indicator strip — pad them so the back button
     and Save stay out of iOS's system-gesture zones (taps there get
     swallowed, which read as "back doesn't work"). */
  padding-left: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-bottom);
}
/* Slim chrome in rotate mode: height is the scarce dimension, and there's
   no status bar on the header's edge, so the env() top padding goes.
   Rotate + Save float as one compact row over the bottom corners (the
   body reserves a strip for them); hint and subtitle yield to the canvas. */
.sig-pad--rotated .sig-pad__header { padding: 8px 14px; }
.sig-pad--rotated .sig-pad__title { font-size: 0.92rem; }
.sig-pad--rotated .sig-pad__body { padding: 10px 16px 58px; gap: 8px; }
.sig-pad--rotated .sig-pad__subtitle { display: none; }
.sig-pad--rotated .sig-pad__hint { display: none; }
.sig-pad--rotated .sig-pad__rotatebtn {
  position: absolute;
  left: calc(env(safe-area-inset-top) + 14px);  /* clear of the notch edge */
  bottom: 10px;
  margin: 0;
  padding: 7px 14px;
  font-size: 0.8rem;
  z-index: 2;
}
.sig-pad--rotated .sig-pad__footer {
  position: absolute;
  right: calc(env(safe-area-inset-bottom) + 14px);  /* clear of the home strip */
  bottom: 10px;
  padding: 0;
  border-top: none;
  background: transparent;
}
.sig-pad--rotated .sig-pad__save {
  width: auto;
  padding: 9px 22px;
  font-size: 0.88rem;
}
.sig-pad__rotatebtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  align-self: center;
  margin: 10px 0 6px;
  border: 1.5px solid var(--border, #E7E5E4); background: #fff;
  color: var(--text-secondary, #57534E);
  border-radius: 999px; padding: 8px 16px;
  font-size: 0.84rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.sig-pad__rotatebtn:active { background: #f5f5f4; }
.sig-pad__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.sig-pad__back,
.sig-pad__clear {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  border-radius: 10px;
  color: var(--text-primary, #0f172a);
  font: inherit;
}
.sig-pad__back { display: inline-flex; align-items: center; justify-content: center; }
.sig-pad__clear {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary, #f9522e);
}
.sig-pad__clear:disabled { opacity: 0.4; pointer-events: none; }
.sig-pad__title {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}
.sig-pad__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  overflow: hidden;
}
.sig-pad__subtitle {
  margin: 0;
  color: var(--text-secondary, #64748b);
  font-size: 0.88rem;
  line-height: 1.4;
}
.sig-pad__frame {
  position: relative;
  flex: 1;
  min-height: 200px;
  border-radius: 14px;
  background: #ffffff;
  border: 1.5px dashed rgba(15, 23, 42, 0.18);
  overflow: hidden;
  touch-action: none;
}
.sig-pad__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.sig-pad__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, 0.35);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  pointer-events: none;
  transition: opacity .15s;
}
.sig-pad__placeholder.hidden { opacity: 0; }
.sig-pad__baseline {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 22%;
  height: 1px;
  background: rgba(15, 23, 42, 0.18);
  pointer-events: none;
}
.sig-pad__hint {
  margin: 0;
  color: var(--text-secondary, #64748b);
  font-size: 0.78rem;
  line-height: 1.4;
}
.sig-pad__footer {
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: #ffffff;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.sig-pad__save {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: none;
  background: var(--primary, #f9522e);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.sig-pad__save:disabled { opacity: 0.45; cursor: not-allowed; }

/* Hours tab — first-time gate */
.hor-sig-gate {
  margin: 12px 16px;
  padding: 20px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  text-align: center;
}
.hor-sig-gate__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: rgba(249, 82, 46, 0.1);
  color: var(--primary, #f9522e);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hor-sig-gate__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0 0 6px;
}
.hor-sig-gate__body {
  font-size: 0.9rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
  margin: 0 0 16px;
}
.hor-sig-gate__btn {
  display: inline-flex;
  padding: 12px 22px;
  border-radius: 12px;
  border: none;
  background: var(--primary, #f9522e);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

/* Signature sub-panel — preview card */
.menu-sig-blurb {
  color: var(--text-secondary, #64748b);
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0 0 14px;
}
.menu-sig-preview {
  margin-bottom: 16px;
}
.menu-sig-preview__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #64748b);
  font-weight: 700;
  margin-bottom: 6px;
}
.menu-sig-preview__frame {
  position: relative;
  min-height: 130px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.menu-sig-preview__empty {
  color: rgba(15, 23, 42, 0.4);
  font-size: 0.9rem;
}
.menu-sig-preview__img {
  max-width: 100%;
  max-height: 140px;
  display: block;
}
.menu-sig-preview__img.hidden { display: none; }
/* Post-save confirmation — closes the loop so the CTA doesn't read as
   an unmet demand after a successful capture. */
.menu-sig-saved {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-bottom: 10px; padding: 9px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
  color: #15803d; font-size: 0.86rem; font-weight: 700;
}
.menu-sig-saved.hidden { display: none; }

/* ============================================================
   Head-of-Department — Hours of Rest overview (home)
   ============================================================ */
.mm-dept-hor-head { padding-bottom: 4px; }
.mm-dept-hor-head__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.mm-dept-hor-head__eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
}
/* Swipeable carousel of Today / 7-day / Month views */
.mm-dept-hor-carousel {
  overflow: hidden;
  position: relative;
}
.mm-dept-hor-carousel__track {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}
.mm-dept-hor-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.mm-dept-hor-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 6px 0 14px;
}
/* Full-roster list behind the View-department toggle */
.mm-dept-hor-list--all {
  margin-top: 6px;
  border-top: 1px solid #f1f5f9;
  padding-top: 6px;
}
.mm-dept-hor-showall {
  display: block;
  width: calc(100% - 40px);
  margin: 0 20px 16px;
  padding: 10px 14px;
  background: var(--surface-2, #f1f5f9);
  border: none;
  border-radius: 10px;
  color: var(--text-muted, #475569);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mm-dept-hor-showall:active { background: var(--surface-3, #e2e8f0); }
.mm-dept-hor-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3, #e2e8f0);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
}
.mm-dept-hor-dot--active {
  background: var(--primary, #f9522e);
  width: 18px;
}
.mm-dept-hor-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mm-dept-hor-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.08));
}
.mm-dept-hor-item:first-child { border-top: none; padding-top: 8px; }

/* "Needs attention" empty state — everyone on track. */
.mm-dept-hor-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 20px 24px;
  text-align: center;
  list-style: none;
}
.mm-dept-hor-empty__icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.mm-dept-hor-empty__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.mm-dept-hor-empty__sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  max-width: 260px;
}
.mm-dept-hor-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.mm-dept-hor-avatar--self { background: var(--primary, #f9522e); color: #fff; }
.mm-dept-hor-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mm-dept-hor-info {
  flex: 1;
  min-width: 0;
}
.mm-dept-hor-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mm-dept-hor-name {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-primary, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-dept-hor-you {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--primary, #f9522e);
  background: rgba(249, 82, 46, 0.12);
  text-transform: uppercase;
}
.mm-dept-hor-role {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-dept-hor-status {
  text-align: right;
  flex-shrink: 0;
}
.mm-dept-hor-status__main {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary, #0f172a);
}
.mm-dept-hor-status__sub {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
}
.mm-dept-hor-status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #cbd5e1;
}
.mm-dept-hor-status--logged .mm-dept-hor-status__main { color: #047857; }
.mm-dept-hor-status--logged .mm-dept-hor-status__dot { background: #10b981; }
.mm-dept-hor-status--leave .mm-dept-hor-status__main { color: #b45309; }
.mm-dept-hor-status--leave .mm-dept-hor-status__dot { background: #f59e0b; }
.mm-dept-hor-status--breach .mm-dept-hor-status__main { color: #b91c1c; }
.mm-dept-hor-status--breach .mm-dept-hor-status__dot { background: #ef4444; }

/* "Needs your review" rows — a count badge + short label instead of a
   sentence, so the actionable number reads at a glance (the card header
   carries the verb). No status dot on these rows. */
.mm-dept-hor-status--badge .mm-dept-hor-status__main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.mm-dept-hor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1;
}
.mm-dept-hor-status__label {
  font-weight: 600;
  font-size: 0.82rem;
  color: #b91c1c;
}

/* =========================================================
   Duties → Watch subtab
   Prominent "ON WATCH NOW" card + upcoming list. Teal accent
   to echo the Watch subtab pill so the visual identity is
   consistent across the tab strip and the content.
   ========================================================= */
.watch-now {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border-radius: var(--radius-lg, 14px);
  background: linear-gradient(135deg, rgba(31, 173, 162, 0.12), rgba(31, 173, 162, 0.04));
  border: 1px solid rgba(31, 173, 162, 0.28);
  margin-bottom: 12px;
}
.watch-now__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
}
.watch-now__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.watch-now__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0E7C74;
}
.watch-now__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text, #0f172a);
  line-height: 1.2;
}
.watch-now__time {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.watch-now__remaining {
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
}
/* Peers inside the compact on-watch card: no "With" label, smaller pills,
   sat in the top row opposite the eyebrow. */
.watch-now .watch-peers { margin-top: 0; }
.watch-now .watch-peers__label { display: none; }
.watch-now .watch-peers--now .watch-peers__avatar {
  width: 26px;
  height: 26px;
  font-size: 0.68rem;
}
/* Schedule note — the admin's free-text note on the watch schedule.
   Amber card so it reads as guidance, distinct from the teal on-watch
   card. Sits between the on-watch card and the upcoming list. */
.watch-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
/* Watch Rounds */
.wr-head { display:flex; align-items:center; justify-content:space-between; margin:18px 2px 8px; }
.wr-head__title { font-size:0.78rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#64748b; }
.wr-head__count { font-size:0.78rem; font-weight:700; color:#b45309; background:#fef3c7; padding:3px 10px; border-radius:999px; }
.wr-list { display:flex; flex-direction:column; gap:10px; }
.wr-round { border:1px solid #e2e8f0; border-radius:14px; padding:14px; background:#fff; }
.wr-round.is-done { background:#f0fdf4; border-color:#bbf7d0; }
.wr-round__title-row { display:flex; align-items:center; gap:8px; }
.wr-time { font-variant-numeric:tabular-nums; font-weight:700; color:#b45309; background:#fef3c7; font-size:0.78rem; padding:2px 8px; border-radius:999px; flex:none; }
.wr-title { font-weight:700; color:#0f172a; flex:1; min-width:0; }
.wr-progress { flex:none; font-size:0.74rem; font-weight:700; color:#475569; background:#f1f5f9; padding:2px 8px; border-radius:999px; font-variant-numeric:tabular-nums; }
.wr-desc { font-size:0.84rem; color:#64748b; margin-top:4px; }
/* Check items — checklist-style rows; the whole row is the tap target,
   the native input is visually hidden behind a drawn box. */
.wr-checks { display:flex; flex-direction:column; margin-top:10px; border-top:1px solid #f1f5f9; }
.wr-check { position:relative; display:flex; align-items:center; gap:11px; padding:11px 2px; min-height:44px; border-bottom:1px solid #f1f5f9; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.wr-check:last-child { border-bottom:none; }
.wr-check input { position:absolute; opacity:0; width:1px; height:1px; }
.wr-check__box { flex:none; width:23px; height:23px; border-radius:7px; border:2px solid #cbd5e1; background:#fff; color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:background 120ms, border-color 120ms; }
.wr-check input:checked ~ .wr-check__box { background:#16a34a; border-color:#16a34a; }
.wr-check__label { flex:1; font-size:0.92rem; color:#1f2937; line-height:1.35; }
.wr-check input:checked ~ .wr-check__label { color:#64748b; }
.wr-round.is-done .wr-check { opacity:0.75; }
/* Footer action — Complete (primary, gated on the checks), done row, undo */
.wr-foot { margin-top:10px; }
.wr-complete { width:100%; min-height:44px; border:none; border-radius:11px; background:#F9522E; color:#fff; font-weight:700; font-size:0.95rem; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.wr-complete:active { opacity:0.88; }
.wr-complete:disabled { background:#f1f5f9; color:#94a3b8; font-weight:600; }
.wr-go { width:100%; min-height:44px; border:1.5px solid #cbd5e1; background:#fff; color:#0f172a; font-weight:700; border-radius:11px; font-size:0.92rem; cursor:pointer; font-family:inherit; }
.wr-done-row { display:flex; align-items:center; gap:7px; color:#16a34a; font-weight:700; font-size:0.9rem; min-height:34px; }
.wr-done-row span { flex:1; }
.wr-undo { flex:none; border:none; background:none; color:#64748b; font-weight:700; font-size:0.84rem; text-decoration:underline; cursor:pointer; font-family:inherit; padding:6px 2px; }
.wr-note { width:100%; margin-top:8px; border:1.5px solid #e2e8f0; border-radius:9px; padding:8px 10px; font-size:16px; font-family:inherit; box-sizing:border-box; resize:vertical; -webkit-appearance:none; }
.wr-note:focus { border-color: var(--accent, #1A3A5C); outline:none; }
/* Handover from the previous watch — compact opener button. The notes
   themselves read in the COSWP-style tb-sheet (the app's default
   long-form reading pattern) via _openWatchHandoverSheet. */
.watch-ho-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  margin-bottom: 16px;
  background: var(--card, #fff);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg, 14px);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.watch-ho-btn:active { background: #f8fafc; }
.watch-ho-btn__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.watch-ho-btn__title { font-size: 0.93rem; font-weight: 700; color: var(--text, #0f172a); }
.watch-ho-btn__meta {
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.watch-ho-btn__chev { flex: none; color: #94a3b8; }
/* Handover sheet — note author attribution under each note */
.who-note { margin-bottom: 16px; }
.who-note:last-child { margin-bottom: 0; }
.who-note .tb-sheet__section-body { margin: 0 0 4px; }
.who-note__by { font-size: 12.5px; font-weight: 600; color: #78716C; }
.who-note__by-inline { font-weight: 600; color: #78716C; font-size: 12.5px; }
/* My handover note — written during my watch for whoever takes over. */
.watch-ho-mine { margin-top: 16px; }
.watch-ho-mine .wr-note { margin-top: 0; background: #fff; }
.watch-ho-mine__hint { font-size: 0.75rem; color: var(--text-muted, #78716C); margin-top: 5px; }
.watch-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--radius-lg, 14px);
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.watch-note__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b45309;
}
.watch-note__text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text, #0f172a);
}
/* Stacked-avatar peers row — crew sharing the same shift. Photo when
   available, initials in a slate circle otherwise. Slight overlap for
   the classic "team" look. Sits under the time row on both ON WATCH
   NOW and each upcoming row. */
.watch-peers {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.watch-peers__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}
.watch-peers--now .watch-peers__label { color: #0E7C74; }
.watch-peers__stack {
  display: flex;
  align-items: center;
}
.watch-peers__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--card, #fff);
  background: #3F4A5E;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  margin-left: -6px;
  flex-shrink: 0;
}
.watch-peers__avatar:first-child { margin-left: 0; }
.watch-peers__avatar img {
  /* Absolutely-positioned over the initials so the initials show
     through if the image fails to load (onerror hides the img). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.watch-peers__avatar { position: relative; }
.watch-peers__avatar--more {
  background: #E5E7EB;
  color: #475569;
  font-size: 0.66rem;
}
/* "ON WATCH NOW" variant — slightly bigger pills + lighter ring so the
   peers feel part of the prominent card, not subdued. */
.watch-peers--now .watch-peers__avatar {
  width: 32px;
  height: 32px;
  border-color: rgba(255, 255, 255, 0.95);
  font-size: 0.76rem;
}

.watch-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin: 8px 4px 8px;
}

.watch-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.watch-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #E5E7EB);
  border-left: 4px solid #1FADA2;
  border-radius: var(--radius-md, 12px);
}
.watch-row__main {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.watch-row__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.watch-row__date strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text, #0f172a);
}
.watch-row__date span {
  font-size: 0.74rem;
  color: var(--text-muted, #64748b);
}
.watch-row__time {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text, #0f172a);
  font-variant-numeric: tabular-nums;
}
.watch-row__shift {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

/* ════════ My devices + QR device-linking ════════ */
.devices-list { display: flex; flex-direction: column; gap: 8px; }
.devices-empty { color: var(--text-secondary); font-size: 0.85rem; padding: 10px 2px; }
.device-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.device-row__icon { color: var(--text-muted); flex: none; }
.device-row__body { flex: 1; min-width: 0; }
.device-row__name { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.device-row__meta { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.device-row__current { font-size: 0.74rem; color: var(--accent); font-weight: 700; flex: none; }
.device-row__actions { display: flex; align-items: center; gap: 2px; flex: none; }
.device-row__remove { background: none; border: none; color: #dc2626; cursor: pointer; padding: 6px; flex: none; border-radius: 8px; }
.device-row__remove:active { background: rgba(220,38,38,0.1); }
.device-row__edit { background: none; border: none; color: var(--muted, #64748b); cursor: pointer; padding: 6px; flex: none; border-radius: 8px; }
.device-row__edit:active { background: rgba(100,116,139,0.12); }
.device-qr { margin-top: 16px; text-align: center; }
.device-qr__hint { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px; }
.device-qr__canvas { display: flex; justify-content: center; align-items: center; min-height: 160px; }
.device-qr__img { width: 216px; height: 216px; border-radius: 12px; background: #fff; padding: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.device-qr__loading { color: var(--text-secondary); font-size: 0.85rem; }
.device-qr__code-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 14px; }
.device-qr__code { font-family: ui-monospace, "SF Mono", monospace; font-size: 0.9rem; word-break: break-all; color: var(--text); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; margin-top: 4px; }
.device-qr__expiry { font-size: 0.78rem; color: var(--text-secondary); margin-top: 8px; }

/* ════════ Scan to sign in (dark auth screen) ════════ */
/* Sized in relative units (vw/vh/clamp) so the whole screen — title, camera,
   manual entry + button — fits every phone without the button dropping off. */
.auth-welcome-cta--qr { margin-top: -4px; }
.auth-welcome-cta--qr a { color: #2DBDC6; }
#scanQrForm { gap: clamp(8px, 2vh, 14px); }
#scanQrForm .auth-welcome { margin-bottom: 0; }
#scanQrForm .auth-welcome__title { font-size: clamp(1.3rem, 6vw, 1.7rem); margin-bottom: 4px; }
#scanQrForm .auth-welcome__sub { font-size: clamp(0.78rem, 3.4vw, 0.92rem); line-height: 1.35; }
.qr-scan {
  position: relative;
  /* min() across vw + vh keeps it square AND bounded by screen height, so
     it shrinks on short screens instead of pushing content off the bottom. */
  width: min(66vw, 30vh, 260px);
  aspect-ratio: 1;
  margin: clamp(6px, 1.5vh, 12px) auto;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.qr-scan__video { width: 100%; height: 100%; object-fit: cover; }
.qr-scan__frame { position: absolute; inset: 16%; border: 3px solid rgba(255,255,255,0.85); border-radius: 14px; pointer-events: none; }
.qr-scan__status { text-align: center; font-size: clamp(0.78rem, 3.2vw, 0.85rem); color: rgba(255,255,255,0.7); min-height: 1.2em; margin: 4px 0; }
.qr-scan__manual { margin-top: clamp(6px, 1.5vh, 12px); }
.qr-scan__manual-label { font-size: clamp(0.76rem, 3.2vw, 0.82rem); color: rgba(255,255,255,0.6); margin-bottom: 6px; }
/* Small separation between the code field and the Sign-in button. */
.qr-scan__manual .auth-input { margin-bottom: clamp(8px, 1.4vh, 12px); }

/* ============================================================
   HoD Hours-of-Rest overview — read-only month for a department
   member, opened by tapping a crew row on the home HoR dept card.
   Reuses the .hor-cal* calendar classes. Relative sizing (clamp/vh).
   ============================================================ */
.mm-dept-hor-item--tappable { cursor: pointer; }
.mm-dept-hor-item--tappable:active { background: rgba(15,23,42,0.04); }

.hod-hor { position: fixed; inset: 0; z-index: 5000; background: #f6f8fa; display: flex; flex-direction: column; }
.hod-hor.hidden { display: none; }
.hod-hor__header { display: flex; align-items: center; gap: 12px; padding: calc(12px + var(--safe-top, 0px)) 16px 12px; background: #fff; border-bottom: 1px solid #e6ebf1; }
.hod-hor__close { flex: none; width: 38px; height: 38px; border-radius: 10px; border: none; background: #f1f5f9; color: #334155; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hod-hor__head-text { min-width: 0; }
.hod-hor__name { margin: 0; font-size: clamp(1.05rem, 4.6vw, 1.25rem); font-weight: 700; color: #0f172a; }
.hod-hor__meta { margin: 1px 0 0; font-size: clamp(0.78rem, 3.4vw, 0.9rem); color: #64748b; }
.hod-hor__monthnav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #eef2f6; }
.hod-hor__navbtn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid #e2e8f0; background: #fff; color: #334155; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hod-hor__monthlabel { font-size: clamp(0.88rem, 3.6vw, 0.98rem); font-weight: 600; color: #0f172a; min-width: 9rem; text-align: center; }
.hod-hor__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: clamp(12px, 3vw, 18px); }
.hod-hor__loading, .hod-hor__error { text-align: center; color: #64748b; padding: 40px 16px; font-size: 0.9rem; }
.hod-hor__error { color: #b91c1c; }
/* HoD calendar — filled circles + corner NC badges (matches the admin panel),
   so the HoD sees at a glance which days need their comment. */
.hodcal { margin: 0 auto 18px; max-width: 460px; }
.hodcal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.hodcal__weekday { text-align: center; font-size: 0.72rem; font-weight: 600; color: #94a3b8; }
.hodcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(4px, 1.4vw, 9px); }
.hodcal__cell { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: none; background: none; font-family: inherit; padding: 0; cursor: default; }
.hodcal__cell--empty { visibility: hidden; }
.hodcal__num { display: flex; align-items: center; justify-content: center; width: clamp(34px, 10.5vw, 44px); height: clamp(34px, 10.5vw, 44px); border-radius: 50%; font-size: 0.95rem; font-weight: 600; color: #0f172a; border: 1.5px solid transparent; transition: transform 0.1s ease; }
.hodcal__cell[data-hod-day] { cursor: pointer; }
.hodcal__cell[data-hod-day]:active .hodcal__num { transform: scale(0.93); }
.hodcal__cell--muted .hodcal__num { color: #cbd5e1; border-color: #eef2f6; border-style: dashed; }
.hodcal__cell--compliant .hodcal__num { background: #dcfce7; color: #166534; }
.hodcal__cell--rest .hodcal__num { background: #f1f5f9; color: #64748b; }
.hodcal__cell--leave .hodcal__num { background: #1e293b; color: #fff; }
.hodcal__cell--nc .hodcal__num { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.hodcal__cell--ncdone .hodcal__num { background: #fef2f2; color: #b91c1c; }
.hodcal__cell--today .hodcal__num { box-shadow: 0 0 0 2px var(--color-accent, #2dbdc6); }
.hodcal__badge { position: absolute; right: clamp(0px, 0.6vw, 6px); bottom: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 800; color: #fff; border: 2px solid #fff; line-height: 1; }
.hodcal__badge--nr { background: #dc2626; }
.hodcal__badge--reviewed { background: var(--color-accent, #2dbdc6); }
.hodcal__badge--ack { background: #16a34a; }
.hodcal__legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 16px; }
.hodcal__leg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: #64748b; }
.hodcal__swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.hodcal__swatch--compliant { background: #22c55e; }
.hodcal__swatch--nr { background: #dc2626; }
.hodcal__swatch--reviewed { background: var(--color-accent, #2dbdc6); }
.hodcal__swatch--rest { background: #cbd5e1; }
.hodcal__swatch--leave { background: #1e293b; }

/* ===== Checklists (Muster Mate phone runner) ===== */
.mm-chk-list { display: flex; flex-direction: column; gap: 8px; }
.mm-chk-row { display: flex; align-items: center; gap: 10px; width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; text-align: left; font-family: inherit; cursor: pointer; }
.mm-chk-row:active { background: #f8fafc; }
.mm-chk-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-chk-row__name { font-size: 0.95rem; font-weight: 600; color: #0f172a; }
.mm-chk-row__sub { font-size: 0.78rem; color: #64748b; }
.mm-chk-row__crit { color: #dc2626; font-weight: 600; }
.mm-chk-row__chev { color: #cbd5e1; flex: none; }

.chk-run { position: fixed; inset: 0; z-index: 1001; background: #f1f5f9; display: flex; flex-direction: column; }
.chk-run.hidden { display: none; }
.chk-run__header { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 12px) 14px 12px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.chk-run__close { width: 38px; height: 38px; border-radius: 10px; border: none; background: #f1f5f9; color: #0f172a; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.chk-run__head-text { min-width: 0; }
.chk-run__title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chk-run__desc { font-size: 0.8rem; color: #64748b; margin: 2px 0 0; }
.chk-run__legend { display: flex; gap: 14px; padding: 8px 16px; background: #fff; border-bottom: 1px solid #eef2f6; }
.chk-run__leg { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: #64748b; }
.chk-dot { width: 9px; height: 9px; border-radius: 50%; }
.chk-dot--pass { background: #16a34a; } .chk-dot--na { background: #94a3b8; } .chk-dot--fail { background: #dc2626; }
.chk-run__body { flex: 1; overflow-y: auto; padding: 12px 14px 20px; -webkit-overflow-scrolling: touch; }
.chk-run__footer { display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(env(safe-area-inset-bottom) + 10px); background: #fff; border-top: 1px solid #e2e8f0; }
.chk-run__cancel { background: none; border: none; color: #dc2626; font-weight: 600; font-size: 0.85rem; cursor: pointer; flex: none; }
.chk-run__summary { flex: 1; text-align: center; font-size: 0.76rem; color: #64748b; }
.chk-run__submit { background: #0f172a; color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-weight: 700; font-size: 0.9rem; cursor: pointer; flex: none; }
.chk-run__submit:disabled { background: #cbd5e1; cursor: not-allowed; }
.chk-section { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin: 14px 2px 8px; }
.chk-section:first-child { margin-top: 2px; }
/* Direction A — stacked card: task text on top, full-width controls below.
   Long guidance/labels clamp with a "Show guidance" toggle (see _chkItemHtml). */
.chk-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; }
.chk-item--crit { border-color: #fecaca; }
.chk-item--passed { border-color: #bbf7d0; background: #f6fdf8; }
.chk-item--failed { border-color: #fecaca; background: #fff7f7; }
.chk-item__head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.chk-item__num { font-size: 0.72rem; font-weight: 700; color: #cbd5e1; flex: none; }
.chk-item__crit-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; padding: 2px 7px; border-radius: 999px; }
.chk-item__crit-dot { width: 7px; height: 7px; border-radius: 50%; background: #dc2626; display: inline-block; flex: none; }
.chk-item__label { font-size: 0.95rem; font-weight: 600; color: #0f172a; line-height: 1.34; }
.chk-item__helper { font-size: 0.8rem; color: #64748b; line-height: 1.45; margin-top: 6px; }
.chk-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; }
.chk-clamp--3 { -webkit-line-clamp: 3; }
.chk-more { margin-top: 5px; padding: 0; background: none; border: none; font-size: 0.78rem; font-weight: 700; color: var(--coral); cursor: pointer; display: inline-block; }
.chk-item__ctrl { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; }
.chk-btns { display: flex; gap: 8px; flex: 1; }
.chk-btn { flex: 1; min-height: 44px; border-radius: 11px; border: 1.5px solid #e2e8f0; background: #fff; color: #64748b; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.chk-btn--pass.is-active { background: #16a34a; border-color: #16a34a; color: #fff; }
.chk-btn--na.is-active { background: #64748b; border-color: #64748b; color: #fff; }
.chk-btn--fail.is-active { background: #dc2626; border-color: #dc2626; color: #fff; }
.chk-photo-btn { flex: none; width: 48px; min-height: 44px; border-radius: 11px; border: 1.5px solid #e2e8f0; background: #fff; color: #64748b; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chk-photo-btn.is-needed { border-color: #f59e0b; color: #b45309; }
.chk-value { width: 100%; margin-top: 12px; border: 1.5px solid #e2e8f0; border-radius: 11px; padding: 11px 13px; font-size: 16px; font-family: inherit; box-sizing: border-box; -webkit-appearance: none; }
.chk-value:focus { border-color: var(--coral); outline: none; }
.chk-note { width: 100%; margin-top: 10px; border: 1.5px solid #e2e8f0; border-radius: 11px; padding: 9px 12px; font-size: 16px; font-family: inherit; resize: vertical; min-height: 42px; box-sizing: border-box; -webkit-appearance: none; }
.chk-note:focus { border-color: var(--coral); outline: none; }
.chk-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chk-thumb { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; }
.chk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.chk-thumb__del { position: absolute; top: 0; right: 0; width: 20px; height: 20px; border: none; background: rgba(0,0,0,0.6); color: #fff; font-size: 14px; line-height: 1; border-bottom-left-radius: 8px; cursor: pointer; }

/* ── Home mini-cards (2x2) ── */
.mm-minicards-wrap { margin: 4px 0 20px; }
.mm-minicards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-minicard { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid #eef2f6; border-radius: 14px; padding: 14px 15px; text-align: left; font-family: inherit; box-shadow: 0 1px 2px rgba(15,23,42,0.05); cursor: pointer; transition: transform 0.1s ease; }
.mm-minicard:active { transform: scale(0.98); }
.mm-minicard__icon { color: #2dbdc6; flex: none; display: flex; }
.mm-minicard__label { font-size: 0.98rem; font-weight: 700; color: #0f172a; line-height: 1.2; }
.mm-minicard--checklists { cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; background: #f0fbfb; border-color: #d6f0ee; }
.mm-minicard--checklists:active { transform: scale(0.98); box-shadow: 0 1px 2px rgba(15,23,42,0.08); }
.mm-minicard__chev { position: absolute; top: 15px; right: 14px; color: #cbd5e1; }
/* Ghost placeholders */
.mm-minicard--ghost { align-items: center; justify-content: center; gap: 8px; border-left-color: #e2e8f0; border-style: dashed; background: #fbfcfe; box-shadow: none; }
.mm-minicard__ghost-icon { color: #cbd5e1; }
.mm-minicard__ghost-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #cbd5e1; }

/* ── Checklist browser (folders + templates) ── */
.chk-browse { position: fixed; inset: 0; z-index: 1000; background: #f1f5f9; display: flex; flex-direction: column; }
.chk-browse.hidden { display: none; }
.chk-browse__body { flex: 1; overflow-y: auto; padding: 12px 14px calc(env(safe-area-inset-bottom) + 20px); -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 9px; }
.chk-browse__empty { color: #94a3b8; font-size: 0.86rem; text-align: center; padding: 32px 12px; }
.chk-browse-row { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 13px; padding: 13px 14px; text-align: left; font-family: inherit; cursor: pointer; }
.chk-browse-row:active { background: #f8fafc; }
.chk-browse-row__icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.chk-browse-row__icon--folder { background: #fef3c7; color: #b45309; }
.chk-browse-row__icon--list { background: #ecfeff; color: #0e7490; }
.chk-browse-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chk-browse-row__name { font-size: 0.95rem; font-weight: 600; color: #0f172a; }
.chk-browse-row__sub { font-size: 0.78rem; color: #64748b; }
.chk-browse-row__chev { color: #cbd5e1; flex: none; }
/* Favourites: section headers + the personal star toggle */
.chk-browse-section { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin: 10px 2px 1px; }
.chk-browse-section:first-child { margin-top: 0; }
.chk-browse-section__ic { color: #94a3b8; flex: none; }
.chk-fav-star { width: 36px; height: 36px; border: none; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; color: #cbd5e1; padding: 0; }
.chk-fav-star svg { fill: none; }
.chk-fav-star.is-on { color: #f59e0b; }
.chk-fav-star.is-on svg { fill: currentColor; }

/* ── Report (safety observation) mini card ── */
.mm-minicard--report { background: #f5f3ff; border-color: #e7e2fb; cursor: pointer; transition: transform 0.1s ease; }
.mm-minicard--report:active { transform: scale(0.98); }
.mm-minicard--report .mm-minicard__icon { color: #7c3aed; }

/* ── Checklists / History segmented control (in the screen header) ── */
.chk-tabs { flex: 1; display: flex; gap: 3px; padding: 3px; background: #e8edf3; border-radius: 10px; }
.chk-tabs[hidden] { display: none; }
.chk-tab { flex: 1; border: none; background: none; font-family: inherit; font-size: 0.82rem; font-weight: 700; color: #64748b; padding: 7px 0; border-radius: 8px; cursor: pointer; }
.chk-tab.is-active { background: #fff; color: var(--accent, #1A3A5C); box-shadow: 0 1px 2px rgba(15,23,42,0.10); }

/* ── Completed-runs (History): inbox + read-only detail ── */
.chk-browse-row__icon--crit { background: #fee2e2; color: #b91c1c; }
.chk-browse-row__icon--warn { background: #fef3c7; color: #b45309; }
.chk-browse-row__icon--ok { background: #f1f5f9; color: #64748b; }
.chk-sub-pill { font-size: 0.66rem; font-weight: 700; color: #b91c1c; background: #fee2e2; padding: 2px 8px; border-radius: 999px; flex: none; }
.chk-sub-pill--warn { color: #b45309; background: #fef3c7; }
.chk-sub-pill--open { color: #fff; background: var(--primary, #F9522E); }
.chk-sub-pill--openro { color: #b91c1c; background: #fff; border: 1px solid #fca5a5; }

/* History controls — search, time range, filter dropdowns, export, stats */
.chk-hist-controls { display: flex; flex-direction: column; }
.chk-search { position: relative; margin-bottom: 11px; }
.chk-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.chk-search input { width: 100%; border: 1px solid #e2e8f0; background: #fff; border-radius: 11px; padding: 11px 12px 11px 38px; font-family: inherit; font-size: 16px; color: #0f172a; -webkit-appearance: none; box-sizing: border-box; }
.chk-search input:focus { border-color: var(--accent, #1A3A5C); outline: none; }
.chk-search input::placeholder { color: #94a3b8; }
.chk-range { display: flex; gap: 3px; padding: 3px; background: #e8edf3; border-radius: 11px; margin-bottom: 11px; }
.chk-range button { flex: 1; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 700; color: #64748b; padding: 8px 0; border-radius: 8px; cursor: pointer; }
.chk-range button.is-on { background: #fff; color: var(--accent, #1A3A5C); box-shadow: 0 1px 2px rgba(15,23,42,0.10); }
.chk-hist-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.chk-hist-spacer { flex: 1; }
.chk-clear { border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--accent, #1A3A5C); padding: 8px 6px; cursor: pointer; flex: none; }
.chk-clear[hidden] { display: none; }
.chk-dd { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 8px 12px; font-family: inherit; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; }
.chk-dd__lead, .chk-dd__chev { display: flex; color: #94a3b8; }
.chk-dd.is-active { border-color: var(--accent, #1A3A5C); color: var(--accent, #1A3A5C); }
.chk-dd.is-active .chk-dd__lead { color: var(--accent, #1A3A5C); }
.chk-dd__n { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; background: var(--accent, #1A3A5C); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800; }
.chk-hist-statsrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chk-hist-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.chk-hist-stats:empty { display: none; }
.chk-export-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 13px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--accent, #1A3A5C); cursor: pointer; flex: none; }
.chk-export-btn[hidden] { display: none; }
.chk-export-btn svg { color: var(--accent, #1A3A5C); }
.chk-export-btn:active { background: #f8fafc; }
.chk-export-btn:disabled { opacity: 0.55; }
.chk-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #64748b; background: #fff; border: 1px solid #eef2f6; border-radius: 999px; padding: 5px 11px; }
.chk-stat b { color: #0f172a; font-weight: 800; }
.chk-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chk-dot--coral { background: var(--primary, #F9522E); }
.chk-dot--red { background: #dc2626; }
#chkHistList { display: flex; flex-direction: column; gap: 8px; }
#chkHistList .chk-browse-section { margin: 6px 2px 0; }
#chkHistList .chk-browse-section:first-child { margin-top: 0; }
/* Status / Crew filter popover */
.chk-dd-menu { position: fixed; z-index: 1100; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,0.16); padding: 5px; display: flex; flex-direction: column; min-width: 170px; }
.chk-dd-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: none; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: #334155; padding: 10px 11px; border-radius: 8px; cursor: pointer; text-align: left; }
.chk-dd-menu button:active { background: #f1f5f9; }
.chk-dd-menu button.is-on, .chk-dd-menu button.is-on svg { color: var(--accent, #1A3A5C); }
.chk-dd-sep { height: 1px; background: #eef2f6; margin: 4px 6px; }
.chk-sub-banner { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 0.82rem; font-weight: 600; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
/* Critical-fail resolution — open follow-up card (resolve box for eligible
   recipients, read-only note for everyone else) + the resolved record. */
.chk-resolve { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.chk-resolve__title { font-size: 0.82rem; font-weight: 700; color: #b45309; margin-bottom: 8px; }
.chk-resolve__sub { font-size: 0.82rem; color: #92702c; }
.chk-resolve__note { width: 100%; border: 1.5px solid #fed7aa; border-radius: 9px; padding: 8px 10px; font-size: 16px; font-family: inherit; box-sizing: border-box; resize: vertical; -webkit-appearance: none; background: #fff; }
.chk-resolve__note:focus { border-color: var(--accent, #1A3A5C); outline: none; }
.chk-resolve__btn { margin-top: 8px; width: 100%; border: none; border-radius: 10px; padding: 11px; font-size: 0.92rem; font-weight: 700; color: #fff; background: var(--accent, #1A3A5C); cursor: pointer; }
.chk-resolve__btn:disabled { opacity: 0.55; }
.chk-resolved { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.chk-resolved__title { font-size: 0.82rem; font-weight: 700; color: #15803d; }
.chk-resolved__note { font-size: 0.88rem; color: #14532d; margin-top: 5px; line-height: 1.4; }
.chk-sub-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; padding: 10px 12px; margin-bottom: 8px; }
.chk-sub-item--crit { border-color: #fca5a5; }
.chk-sub-item__head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.chk-sub-item__label { font-size: 0.9rem; color: #0f172a; line-height: 1.35; }
.chk-sub-badge { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 7px; flex: none; }
.chk-sub-badge--passed { background: #dcfce7; color: #166534; }
.chk-sub-badge--na { background: #f1f5f9; color: #64748b; }
.chk-sub-badge--failed { background: #fee2e2; color: #b91c1c; }
.chk-sub-value { font-size: 0.85rem; font-weight: 600; color: #0f172a; background: #f1f5f9; padding: 3px 9px; border-radius: 7px; flex: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chk-sub-note { font-size: 0.82rem; color: #475569; background: #f8fafc; border-radius: 8px; padding: 7px 9px; margin-top: 7px; }
.chk-sub-block { margin-top: 12px; }
.chk-sub-block__h { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin-bottom: 5px; }
.chk-sub-sig { max-width: 200px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }

/* ── Permit + ISPS mini cards ── */
.mm-minicard--permit { background: #fffaf0; border-color: #fbe7c5; cursor: pointer; transition: transform 0.1s ease; }
.mm-minicard--permit:active { transform: scale(0.98); }
.mm-minicard--permit .mm-minicard__eyebrow { color: #b45309; }
.mm-minicard--permit .mm-minicard__icon { color: #f59e0b; }
.mm-minicard--delivery { background: #f1f5ff; border-color: #dde7ff; cursor: pointer; transition: transform 0.1s ease; }
.mm-minicard--delivery:active { transform: scale(0.98); }
.mm-minicard--delivery .mm-minicard__icon { color: #4f86f7; }

/* ── Permit broadcast screen ── */
.pmt-sec { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin: 4px 2px 8px; }
.pmt-card { background: #fffdf7; border: 1px solid #fde9c8; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.pmt-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pmt-card__nature { font-weight: 700; color: #0f172a; font-size: 0.98rem; }
.pmt-card__time { font-variant-numeric: tabular-nums; font-weight: 700; color: #b45309; background: #fef3c7; padding: 3px 9px; border-radius: 999px; font-size: 0.82rem; flex: none; }
.pmt-card__meta { font-size: 0.84rem; color: #64748b; margin-top: 5px; }
.pmt-end { margin-top: 10px; border: 1px solid #e2e8f0; background: #fff; color: #b91c1c; font-weight: 600; border-radius: 9px; padding: 7px 14px; font-size: 0.85rem; cursor: pointer; }
.pmt-launch { width: 100%; margin-top: 6px; border: none; background: #f59e0b; color: #fff; font-weight: 700; border-radius: 12px; padding: 14px; font-size: 1rem; cursor: pointer; }
.pmt-interest { width: 100%; margin-top: 18px; border: 1px dashed #cbd5e1; background: #f8fafc; color: #475569; border-radius: 12px; padding: 12px 14px; font-size: 0.85rem; line-height: 1.4; cursor: pointer; text-align: left; }
.pmt-interest.is-done { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.pmt-disclaimer { background: #fffbeb; border: 1px solid #fde9c8; color: #92400e; font-size: 0.82rem; line-height: 1.45; border-radius: 10px; padding: 11px 13px; margin: 12px 0 16px; }
/* Operation category picker */
.pmt-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 6px; }
.pmt-cat { border: 1.5px solid #e2e8f0; background: #fff; border-radius: 11px; padding: 12px 10px; font-family: inherit; cursor: pointer; text-align: center; transition: border-color 0.12s, background 0.12s; }
.pmt-cat:active { background: #f8fafc; }
.pmt-cat.is-active { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 2px rgba(245,158,11,0.18); }
.pmt-cat__label { font-size: 0.85rem; font-weight: 600; color: #334155; }
.pmt-cat.is-active .pmt-cat__label { color: #b45309; }
/* Card category chip + prominent diving banner */
.pmt-card__cat { display: inline-block; margin-top: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #b45309; background: #fef3c7; padding: 3px 9px; border-radius: 999px; }
.pmt-card__cat--diving { color: #1e3a8a; background: #dbeafe; }
.pmt-banner { font-size: 0.85rem; font-weight: 700; line-height: 1.4; border-radius: 10px; padding: 12px 13px; margin: 12px 0 16px; }
.pmt-banner--diving { background: #1e3a8a; color: #fff; letter-spacing: 0.01em; }
.pmt-label { display: block; font-size: 0.8rem; font-weight: 700; color: #334155; margin: 14px 2px 6px; }
.pmt-hint { font-weight: 400; color: #94a3b8; }
.pmt-input { width: 100%; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 11px 12px; font-size: 16px; font-family: inherit; box-sizing: border-box; -webkit-appearance: none; }
.pmt-input:focus { border-color: var(--color-accent, #2dbdc6); outline: none; }
.pmt-check { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: #475569; margin: 10px 2px 0; }
.pmt-check input { width: 18px; height: 18px; }
.pmt-dur { font-weight: 700; color: #b45309; }
.pmt-slider { width: 100%; margin: 8px 0 4px; accent-color: #f59e0b; }
/* Competent-person chips + autocomplete */
.pmt-chips { display: none; flex-wrap: wrap; gap: 7px; margin: 2px 0 8px; }
.pmt-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef2f7; color: #0f172a; font-size: 0.88rem; font-weight: 600; padding: 6px 8px 6px 12px; border-radius: 999px; }
.pmt-chip--contractor { background: #fef3c7; color: #92400e; }
.pmt-chip__tag { font-size: 0.7rem; font-weight: 700; opacity: 0.7; }
.pmt-chip__x { border: none; background: rgba(15,23,42,0.12); color: inherit; width: 20px; height: 20px; border-radius: 50%; font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.pmt-ac { position: relative; }
.pmt-ac-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 6px 20px rgba(15,23,42,0.12); z-index: 10; max-height: 260px; overflow-y: auto; }
.pmt-ac-item { padding: 11px 13px; cursor: pointer; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid #f1f5f9; }
.pmt-ac-item:last-child { border-bottom: none; }
.pmt-ac-item:active { background: #f1f5f9; }
.pmt-ac-item__name { font-weight: 600; color: #0f172a; font-size: 0.92rem; }
.pmt-ac-item__role { font-size: 0.78rem; color: #94a3b8; }
.pmt-ac-item--contractor { color: #475569; font-size: 0.88rem; }
.pmt-activate { width: 100%; margin-top: 22px; border: none; background: #f59e0b; color: #fff; font-weight: 700; border-radius: 12px; padding: 15px; font-size: 1rem; cursor: pointer; }
.pmt-activate:disabled { opacity: 0.6; }

.hod-hor__clear { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 13px; padding: 14px 16px; }
.hod-hor__clear-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(45,189,198,0.12); color: var(--color-accent-strong, #25A1A9); display: flex; align-items: center; justify-content: center; }
.hod-hor__clear-title { font-size: 0.92rem; font-weight: 700; color: #0f172a; }
.hod-hor__clear-sub { font-size: 0.8rem; color: #64748b; margin-top: 1px; }
.hod-hor__nc-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; margin: 4px 2px 10px; }
.hod-hor__nc-count { color: #b45309; background: rgba(245,158,11,0.15); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.hod-nc { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.hod-nc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hod-nc__date { font-size: 0.98rem; font-weight: 700; color: #0f172a; }
.hod-nc__rest { font-size: 0.82rem; color: #64748b; }
.hod-nc__breaches { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.hod-nc__breach { display: flex; gap: 8px; align-items: flex-start; }
.hod-nc__breach-badge { flex: none; font-size: 0.66rem; font-weight: 700; color: #991b1b; background: rgba(239,68,68,0.12); padding: 2px 7px; border-radius: 6px; }
.hod-nc__breach-desc { font-size: 0.85rem; color: #334155; line-height: 1.4; }
.hod-tl { display: flex; flex-direction: column; gap: 12px; }
.hod-tl__role { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; margin-bottom: 5px; }
.hod-tl__role--crew { background: rgba(100,116,139,0.14); color: #475569; }
.hod-tl__role--hod { background: rgba(45,189,198,0.16); color: #0e7490; }
.hod-tl__role--admin { background: rgba(16,185,129,0.14); color: #166534; }
.hod-tl__bubble { background: #f8fafc; border: 1px solid #eef2f6; border-radius: 10px; padding: 10px 12px; font-size: 0.88rem; line-height: 1.5; color: #1a1a1a; white-space: pre-wrap; word-wrap: break-word; }
.hod-tl__meta { font-size: 0.74rem; color: #94a3b8; margin-top: 4px; }
.hod-cb__input { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 0.88rem; resize: vertical; min-height: 2.6em; background: #fff; }
.hod-cb__input:focus { outline: none; border-color: var(--color-accent, #2dbdc6); box-shadow: 0 0 0 3px rgba(45,189,198,0.15); }
.hod-cb__row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hod-cb__save { border: none; background: var(--color-accent, #2dbdc6); color: #fff; font-weight: 600; font-size: 0.85rem; padding: 8px 16px; border-radius: 9px; cursor: pointer; }
.hod-cb__save:disabled { opacity: 0.6; cursor: default; }
.hod-cb__status { font-size: 0.78rem; color: #64748b; }

/* NC shortlist rows below the calendar (tap → that day's detail) */
.hod-nc-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font-family: inherit; }
.hod-nc-row:active { background: #f8fafc; }
.hod-nc-row__date { font-size: 0.92rem; font-weight: 600; color: #0f172a; }
.hod-nc-row__count { font-size: 0.8rem; color: #b45309; }
.hod-nc-row__chev { margin-left: auto; color: #cbd5e1; flex: none; }

/* In-place day detail (work/rest periods + breaches + comment timeline) */
.hod-day__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.hod-day__date { font-size: clamp(1.05rem, 4.4vw, 1.2rem); font-weight: 700; color: #0f172a; }
.hod-day__rest { font-size: 0.88rem; font-weight: 600; color: #0e7490; }
.hod-day__rest--nc { color: #b91c1c; }
.hod-day__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; margin: 18px 2px 8px; }
.hod-day__label:first-of-type { margin-top: 0; }
.hod-periods { display: flex; flex-direction: column; gap: 6px; }
.hod-period { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 11px 14px; }
.hod-period__kind { font-size: 0.86rem; font-weight: 600; color: #0f172a; }
.hod-period__time { font-size: 0.86rem; color: #475569; font-variant-numeric: tabular-nums; }
.hod-period--work { border-left: 3px solid #d97706; }
.hod-period--break, .hod-period--rest { border-left: 3px solid var(--color-accent, #2dbdc6); }
.hod-period--rest .hod-period__kind, .hod-period--break .hod-period__kind { color: #0e7490; }
.hod-period--empty { color: #94a3b8; font-size: 0.86rem; justify-content: flex-start; }
/* Reuse the crew Today ribbon inside the day detail, just give it spacing. */
.hod-day .hor-today__ribbon { margin: 2px 0 14px; }
/* Committed HoD comment: meta line + an Edit affordance. */
.hod-tl__metarow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.hod-cb__edit { background: none; border: none; color: var(--color-accent, #2dbdc6); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 0; }

/* === Policies — read & sign (Pro), in the Safety Documents tab === */
.mm-policy-section { margin: 0 0 22px; }
.mm-policy-section__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.mm-policy-section__head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-ink, #0f172a); }
.mm-policy-badge { font-size: 0.7rem; font-weight: 700; color: #fff; background: #F0654B; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.01em; }
.mm-policy-badge.hidden { display: none; }
.mm-policy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mm-policy__row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #e6ebf1; border-radius: 14px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.mm-policy__row:active { box-shadow: 0 1px 4px rgba(15,23,42,0.08); }
.mm-policy__row--resign, .mm-policy__row--read { border-left: 3px solid #F0654B; }
.mm-policy__icon { width: 38px; height: 38px; border-radius: 10px; background: #eef2f7; color: #475569; display: inline-flex; align-items: center; justify-content: center; }
.mm-policy__body { min-width: 0; }
.mm-policy__title { margin: 0; font-size: 0.94rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-policy__sub { margin: 2px 0 0; font-size: 0.76rem; color: #64748b; }
.mm-policy__pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.mm-policy__pill--unread { background: rgba(29,34,51,0.08); color: #1D2233; }
.mm-policy__pill--read   { background: rgba(240,101,75,0.14); color: #c2410c; }
.mm-policy__pill--resign { background: #F0654B; color: #fff; }
.mm-policy__pill--signed { background: rgba(21,128,61,0.12); color: #15803d; }

/* Collapsible section header (Policies / Safety Documents) */
.mm-section-head { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 2px 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.mm-section-head__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-ink, #0f172a); }
.mm-section-head__caret { color: #94a3b8; flex: none; transition: transform 0.18s ease; }
.mm-section-head[aria-expanded="false"] .mm-section-head__caret { transform: rotate(-90deg); }
.mm-section-head .mm-policy-badge { margin-left: auto; }
.mm-policy-section.is-collapsed .mm-policy-section__body,
.mm-policy-section.is-collapsed .docs-list { display: none; }

/* Outstanding list + "load more" */
.mm-policy-loadmore { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 10px 0 0; padding: 9px; background: none; border: 0; color: #F0654B; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }

/* Signed policies grouped into folders (mirrors the safety-doc folders) */
.mm-policy-signed { margin-top: 16px; }
.mm-policy-signed__label { margin: 0 2px 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; }
.mm-policy-folder .docs-folder__body { gap: 8px; }

/* Signature step inside the policy reader */
.mm-policy-sign { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; text-align: center; }
.mm-policy-sign__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: min(320px, 80vw); height: 150px; border: 2px dashed #cbd5e1; border-radius: 16px; color: #64748b; font-size: 0.9rem; font-weight: 600; background: #f8fafc; }
.mm-policy-sign__thumb { width: min(320px, 80vw); height: 150px; object-fit: contain; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.mm-policy-sign__hint { margin: 0; font-size: 0.82rem; color: #64748b; max-width: 320px; line-height: 1.45; }
.mm-policy-sign__alt { margin: 2px 0 0; padding: 8px 14px; background: none; border: 1px solid #e2e8f0; border-radius: 999px; color: #475569; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }