/* ===============================================================
   Atlantic Crew — App styles
   Mobile-first inside a phone frame; the frame becomes fullscreen
   on narrow viewports.
   =============================================================== */

/* ---------- Stage (desktop presentation frame) ---------- */
.stage {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  padding: var(--space-8);
  /* Atlantic under sail — the photo has its own baked-in left-side wash for
     text legibility. We keep just a faint brass glow in the upper right as a
     focal accent; no dark overlay on the ship itself. */
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(184,135,61,0.08), transparent 65%),
    url("/img/login-hero.jpg") center/cover no-repeat,
    var(--color-bg);
  background-blend-mode: normal, normal, normal;
  /* Do NOT set color here — the phone frame inside .stage needs to keep
     dark-on-light text for legibility. Cream text is applied only on
     .stage-side (the left copy panel) below. */
}
/* Give the left copy panel a slightly darker wash so the headline stays
   crisp on top of the ship photo without hiding the imagery. */
.stage-side {
  position: relative;
}
.stage-side::before {
  content: "";
  position: absolute; inset: -32px -24px;
  /* Photo already carries a soft dark wash on the left. This is a subtle
     extra just behind the copy panel so headings stay crisp. */
  background: linear-gradient(90deg, rgba(11,31,42,0.42), rgba(11,31,42,0.10) 60%, transparent);
  z-index: 0;
  pointer-events: none;
  border-radius: 24px;
}
.stage-side > * { position: relative; z-index: 1; }
/* Cream text ONLY on the left copy panel — do not leak into the phone frame
   (cards, list rows, forms) where it would wash out on light surfaces. */
.stage-side { color: #f4f1ea; }
.stage-side .stage-logo-sub { color: rgba(244,241,234,0.72); }
.stage-side .stage-lead { color: rgba(244,241,234,0.82); }
.stage-side .stage-logo .stage-wordmark { color: #f4f1ea; }
/* Phone frame keeps its own text colour scheme (dark on cream cards,
   cream on navy heroes). Only anchor the root so nothing inherits from
   .stage's implicit context. */
.stage .phone { color: var(--color-text); }

/* ─── Cream text on dark hero/avatar/button components ─────────────────
   These components sit on solid navy (#0b1f2a) or navy gradients. Force
   cream text everywhere inside them so the global `--color-text` (dark
   navy) does not turn them invisible. */
.captain-hero, .captain-hero *,
.owner-hero,   .owner-hero *,
.owner-brief,  .owner-brief *,
.brief-block,  .brief-block *,
.hero,         .hero *,
.watch,        .watch *,
.toast,        .toast * {
  color: #f4f1ea;
}
/* .cap-joiners-head used to be one of these dark hero cards; it's now a
   light surface card (see onboarding.css) with its own explicit text
   colors, so it's intentionally excluded from this cream-text override. */
/* Muted-secondary lines inside those dark cards get a translucent cream. */
.captain-hero .captain-hero-label,
.owner-hero .owner-hero-label,
.owner-hero .owner-hero-sub,
.hero .hero-label,
.watch .watch-label,
.brief-item span:not(.brief-dot) {
  color: rgba(244,241,234,0.78);
}
/* Avatars: dark navy circle with cream initials. */
.pipe-avatar,
.crew-avatar-lg {
  color: #f4f1ea;
}
/* Submit-style filled dark buttons. */
.notice-submit {
  color: #f4f1ea;
}
.notice-submit:hover { color: #ffffff; }
/* Floating Scan FAB in the crew bottom nav — icon must be cream. */
.tab-fab .fab,
.tab-fab .fab svg { color: #f4f1ea; stroke: #f4f1ea; }
/* Preserve accent-coloured children (gold icons, status dots) — they set
   their own color/fill inline or via other classes, so the * selectors
   above only affect elements that had no explicit colour set. */

.stage-side {
  align-self: center;
  padding-inline: var(--space-6);
}
.stage-side-inner { max-width: 460px; margin-left: auto; }
.stage-logo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  color: var(--color-text);
  margin-bottom: var(--space-8);
}
.stage-logo .stage-wordmark { color: var(--color-text); height: 34px; width: auto; }
.stage-logo-sub {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.stage-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.05;
  margin-bottom: var(--space-4);
}
.stage-lead {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 44ch;
  margin-bottom: var(--space-8);
}
.stage-features {
  list-style: none;
  display: grid; gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.stage-features li {
  display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
}
.stage-features li:last-child { border-bottom: 1px solid var(--color-divider); }
.stage-features span {
  font-family: var(--font-display); color: var(--color-accent);
  font-size: var(--text-base);
}
.stage-foot { font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Phone frame ---------- */
.phone {
  --phone-w: 390px;
  --phone-h: 820px;
  position: relative;
  justify-self: center;
  align-self: center;
  width: var(--phone-w);
  height: var(--phone-h);
  background: #0a0a0a;
  border-radius: 52px;
  padding: 12px;
  box-shadow:
    0 0 0 2px #1c1c1c,
    0 40px 80px -20px rgba(11,31,42,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}
.phone-notch {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 32px; background: #0a0a0a; border-radius: 20px; z-index: 20;
}
.phone-shine {
  position: absolute; inset: 0; border-radius: 52px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), transparent 40%);
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  background: var(--color-bg);
  border-radius: 40px;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* On narrow viewports, phone goes fullscreen (real mobile experience) */
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; padding: 0; gap: 0; background: var(--color-bg); }
  .stage-side { display: none; }
  .phone {
    width: 100%;
    height: 100dvh;
    max-width: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .phone-notch, .phone-shine { display: none; }
  .phone-screen { border-radius: 0; }
}

/* =====================================================
   DESKTOP BACKBONE MODE
   Applied to <body class="desktop-mode"> when viewport is wide
   AND the logged-in role is captain / owner / shore.
   Expands the phone frame into a full-width workspace.
   ===================================================== */
body.desktop-mode {
  background: #f4f1ea;
}
body.desktop-mode .stage {
  display: block;
  padding: 0;
  background: #f4f1ea;
  min-height: 100dvh;
}
body.desktop-mode .stage-side,
body.desktop-mode .role-switcher-mobile { display: none; }
body.desktop-mode .phone {
  width: 100%;
  max-width: none;
  height: 100dvh;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
body.desktop-mode .phone-notch,
body.desktop-mode .phone-shine,
body.desktop-mode .statusbar,
body.desktop-mode .tabbar,
body.desktop-mode #burgerBtn { display: none !important; }
body.desktop-mode .phone-screen {
  border-radius: 0;
  background: #f4f1ea;
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "nav header"
    "nav main";
  height: 100dvh;
}
body.desktop-mode .appbar {
  grid-area: header;
  border-bottom: 1px solid rgba(11,31,42,0.10);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  padding: 0 32px;
  min-height: 64px;
}
body.desktop-mode .appbar #notifBtn { display: none; }
body.desktop-mode .appbar-title {
  text-align: left;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #0b1f2a;
}
body.desktop-mode .content {
  grid-area: main;
  padding: 32px 40px 48px;
  overflow-y: auto;
  max-width: none;
}
body.desktop-mode .content > * { max-width: 1200px; }

/* Narrower sidebar on iPad-portrait-size desktop-mode screens so the
   280px nav doesn't crowd out content on a ~820-1000px wide screen. */
@media (max-width: 1000px) {
  body.desktop-mode .phone-screen { grid-template-columns: 220px 1fr; }
  body.desktop-mode.desk-nav-mini .phone-screen { grid-template-columns: 64px 1fr; }
  body.desktop-mode .appbar { padding: 0 20px; }
  body.desktop-mode .content { padding: 20px 20px 32px; }
}

/* Sidebar (built by JS: #desk-nav) — mirrors the hamburger menu on desktop */
.desk-nav {
  display: none;
  grid-area: nav;
  padding: 20px 12px 12px;
  background: #0b1f2a;
  color: rgba(244,241,234,0.7);
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border-right: 1px solid rgba(184,135,61,0.14);
}
.desk-nav-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(184,135,61,0.35) transparent;
}
.desk-nav-list::-webkit-scrollbar { width: 6px; }
.desk-nav-list::-webkit-scrollbar-thumb { background: rgba(184,135,61,0.3); border-radius: 3px; }
.desk-nav-list::-webkit-scrollbar-track { background: transparent; }
body.desktop-mode .desk-nav { display: flex; }
.desk-nav-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 20px;
  color: #f4f1ea;
}
.desk-nav-brand svg { color: #b8873d; }
.desk-nav-brand-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.desk-nav-brand-sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(244,241,234,0.55);
  margin-top: 2px;
}
.desk-nav-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #b8873d;
  font-weight: 600;
  padding: 14px 12px 4px;
}
.desk-nav-section-label:first-child { padding-top: 4px; }
.desk-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  color: rgba(244,241,234,0.78);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desk-nav a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity .15s, color .15s;
}
.desk-nav a span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.desk-nav a:hover { background: rgba(255,255,255,0.06); color: #f4f1ea; }
.desk-nav a:hover svg { opacity: 1; }
.desk-nav a.active {
  background: rgba(184,135,61,0.18);
  color: #f4f1ea;
  box-shadow: inset 3px 0 0 #b8873d;
}
.desk-nav a.active svg { color: #b8873d; opacity: 1; }
/* Outbox box in the sidebar (2026-10-08) */
.desk-nav-outbox { margin: auto 10px 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(255,255,255,0.04); font-size: 12px; color: rgba(244,241,234,0.7); display: flex; flex-direction: column; gap: 3px; }
.desk-nav-outbox + .desk-nav-user { margin-top: 0; }
.desk-nav-outbox .obx-h { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: #f4f1ea; font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.desk-nav-outbox .obx-h:hover { color: #b8873d; }
.desk-nav-outbox .obx-n { background: #b8873d; color: #11202b; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.desk-nav-outbox .obx-l { line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.desk-nav-outbox .obx-ok { color: #8fc9a3; } .desk-nav-outbox .obx-warn { color: #e2b45c; } .desk-nav-outbox .obx-err { color: #ef8f8f; }
.desk-nav-outbox .obx-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.desk-nav-outbox .obx-acts button { padding: 6px 10px; background: transparent; color: rgba(244,241,234,0.8); border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; font-size: 11px; letter-spacing: 0.04em; cursor: pointer; }
.desk-nav-outbox .obx-acts .obx-go { background: #b8873d; color: #11202b; border-color: #b8873d; font-weight: 700; }
.desk-nav-outbox .obx-acts button:disabled { opacity: .6; cursor: default; }
.desk-nav-user {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: rgba(244,241,234,0.55);
  display: flex; flex-direction: column; gap: 4px;
}
.desk-nav-user strong { color: #f4f1ea; font-weight: 600; font-size: 13px; }
.desk-nav-user button {
  margin-top: 6px;
  padding: 6px 10px;
  background: transparent;
  color: rgba(244,241,234,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  align-self: flex-start;
}
.desk-nav-user button:hover { color: #b8873d; border-color: rgba(184,135,61,0.5); }

body.desktop-mode .tabbar { display: none; }
body.desktop-mode .cap-joiners { max-width: 1200px; }
body.desktop-mode .cap-joiner {
  padding: 20px 24px;
}

/* ---------- Role switcher (prototype control) ---------- */
.role-panel {
  margin: var(--space-6) 0 var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.role-panel-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text); font-weight: 700;
  margin-bottom: var(--space-2);
}
.role-panel-hint {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
  margin-top: var(--space-2);
}
.role-switcher {
  display: inline-flex; gap: 2px;
  padding: 3px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}
.role-switcher button {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: all var(--transition);
}
.role-switcher button:hover:not(.active) {
  background: rgba(0,0,0,0.06);
}
.role-switcher button.active {
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
}

/* Mobile-only floating switcher */
.role-switcher-mobile { display: none; }
@media (max-width: 900px) {
  .role-switcher-mobile {
    display: inline-flex;
    position: fixed;
    top: env(safe-area-inset-top, 2px); left: 50%; transform: translateX(-50%);
    z-index: 100;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: 3px;
    margin-top: 4px;
  }
  .role-switcher-mobile button {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
  }
  .role-switcher-mobile button.active {
    background: var(--color-primary);
    color: #ffffff;
  }
}

/* ---------- Status bar ---------- */
/* The simulated phone status bar (fake clock, signal, battery) was removed:
   on a real device it sat underneath the OS's own status bar, and its 09:14
   clock never matched reality. The screen now starts at the app header. */
.phone-screen > .appbar:first-child { padding-top: calc(var(--space-2) + 6px); }

/* ---------- App bar ---------- */
.appbar {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  gap: var(--space-2);
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  min-height: 56px;
}
.appbar-title {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar.detail .appbar-title { font-size: var(--text-base); }
[hidden] { display: none !important; }
.iconbtn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-full);
  color: var(--color-text);
  position: relative;
}
.iconbtn:hover { background: var(--color-surface-offset); }
.iconbtn .dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
}

/* ---------- Content area ---------- */
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--space-4) 100px;
}
.content::-webkit-scrollbar { width: 0; }

/* ---------- Tab bar ---------- */
.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 8px 8px 24px;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-divider);
  z-index: 10;
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: var(--radius-md);
  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--color-text-muted);
  transition: color var(--transition);
}
.tab svg { width: 22px; height: 22px; }
.tab.active { color: var(--color-text); }
.tab.active svg { color: var(--color-accent); }
.tab-fab { position: relative; }
.tab-fab > span:not(.fab) { display: none; }
.fab {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
  transform: translateY(-8px);
}
.fab svg { width: 24px; height: 24px; color: var(--color-accent); }
.tab-fab:hover .fab { background: var(--color-primary-hover); }

/* ---------- Common: cards, chips, buttons ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-pad { padding: var(--space-4); }
.card-row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
  transition: background var(--transition);
}
.card-row:last-child { border-bottom: none; }
.card-row:hover { background: var(--color-surface-2); }
.card-row .icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}
.card-row .icon svg { width: 20px; height: 20px; }
.card-row .rt-title { font-weight: 500; font-size: var(--text-sm); }
.card-row .rt-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.card-row .chev { color: var(--color-text-faint); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.chip svg { width: 12px; height: 12px; }
.chip-accent { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.chip-success { background: var(--color-success-soft); color: var(--color-success); }
.chip-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.chip-error { background: var(--color-error-soft); color: var(--color-error); }
.chip-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-surface-offset); color: var(--color-text); }
.btn-ghost { color: var(--color-text-muted); }
.btn-block { width: 100%; }

.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-4) var(--space-1) var(--space-2);
}
.section-title h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.section-title .link {
  font-size: var(--text-xs); color: var(--color-accent); font-weight: 500;
}

/* ---------- HOME ---------- */
.hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: var(--space-2);
  color: var(--color-text-inverse);
  padding: var(--space-5);
  background:
    linear-gradient(160deg, rgba(11,31,42,0.85), rgba(11,31,42,0.55)),
    linear-gradient(180deg, #1a3d52 0%, #0b1f2a 100%);
  min-height: 200px;
  display: grid;
  gap: var(--space-3);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(184,135,61,0.28), transparent 60%),
    radial-gradient(300px 250px at 0% 100%, rgba(184,135,61,0.15), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h2 { font-size: var(--text-xl); font-weight: 500; }
.hero .status-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: var(--space-2);
}
.hero .stat span:first-child {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  display: block; margin-bottom: 2px;
}
.hero .stat span:last-child { font-size: var(--text-sm); font-weight: 500; }

.quickgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.qtile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--space-3) 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  font-size: 10px; font-weight: 500;
  color: var(--color-text);
  text-align: center;
  transition: transform var(--transition);
}
.qtile:active { transform: scale(0.95); }
.qtile .qicon {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
  color: var(--color-primary);
}
.qtile.accent .qicon { background: var(--color-accent-soft); color: var(--color-accent-hover); }

.checklist {
  display: grid; gap: 6px;
}
.check {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  cursor: pointer;
}
.check .box {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--color-border);
  display: grid; place-items: center;
  transition: all var(--transition);
}
.check.done .box {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}
.check.done .box svg { width: 12px; height: 12px; }
.check.done .label { text-decoration: line-through; color: var(--color-text-muted); }
.check .due { font-size: var(--text-xs); color: var(--color-text-faint); }

/* ---------- Crew directory ---------- */
.searchbar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px var(--space-4);
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-text-muted);
}
.searchbar input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: var(--text-sm); color: var(--color-text);
}

.crew-tabs {
  display: flex; gap: var(--space-2); overflow-x: auto;
  margin-bottom: var(--space-3);
  padding-bottom: 4px;
}
.crew-tabs button {
  flex-shrink: 0;
  padding: 6px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--color-divider);
  font-size: var(--text-xs); font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.crew-tabs button.active {
  background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary);
}

.crew-list { display: grid; gap: var(--space-2); }
.crew-item {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500;
  color: white;
  position: relative;
  font-size: var(--text-sm);
}
.avatar.onboard::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-success);
  border: 2px solid var(--color-surface);
}
.avatar.enroute::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-surface);
}
.crew-item .name { font-weight: 500; font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crew-item .role { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* ---------- Notice board ---------- */
.board-filter {
  display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px;
  margin-bottom: var(--space-3);
}
.board-filter button {
  flex-shrink: 0;
  padding: 6px 12px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 500;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  color: var(--color-text-muted);
}
.board-filter button.active { background: var(--color-primary); color: var(--color-text-inverse); }

.notice { padding: var(--space-4); margin-bottom: var(--space-3); border-left: 3px solid var(--color-accent); }
.notice.pinned { border-left-color: var(--color-error); }
.notice-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.notice-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; margin-bottom: var(--space-2); line-height: 1.25; }
.notice-body { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }
.notice-attach {
  margin-top: var(--space-3);
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.attach-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-text);
  max-width: 100%;
}
.attach-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Receipt scanner ---------- */
.scan-hero {
  border-radius: var(--radius-xl);
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(180deg, rgba(11,31,42,0.4), rgba(11,31,42,0.85)),
    radial-gradient(circle at 30% 40%, #1a3d52, #0b1f2a);
  color: white;
  padding: var(--space-6);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  overflow: hidden;
  margin-top: var(--space-2);
}
.scan-frame {
  position: absolute; inset: 20% 15%;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-lg);
}
.scan-frame::before, .scan-frame::after,
.scan-frame > span::before, .scan-frame > span::after {
  content: ''; position: absolute; width: 20px; height: 20px;
  border: 3px solid var(--color-accent);
}
.scan-frame::before { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: var(--radius-md); }
.scan-frame::after  { top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: var(--radius-md); }
.scan-frame > span::before { bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: var(--radius-md); }
.scan-frame > span::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: var(--radius-md); }
/* Live camera viewfinder. .scan-cam fills the hero so the existing
   .scan-frame corner brackets keep their 20%/15% inset as an overlay on top
   of the video. Hidden until the stream is actually running, so a denied or
   unavailable camera shows the note instead of a black rectangle. */
.scan-cam {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.scan-cam > video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity var(--transition);
  background: #0b1f2a;
}
.scan-cam.cam-live > video { opacity: 1; }
.scan-cam .cam-note {
  position: absolute; left: var(--space-5); right: var(--space-5);
  top: 50%; transform: translateY(-50%);
  text-align: center;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  z-index: 3;
}
/* Once the stream is live the note is redundant; .scan-guide carries the
   instruction. On failure .cam-unavailable keeps it visible and drops the
   framing brackets, which would otherwise frame nothing. */
.scan-cam.cam-live .cam-note { display: none; }
.scan-cam.cam-unavailable .scan-frame { display: none; }
/* No viewfinder -> no shutter and no framing hint. The file-picker button
   below is promoted to primary in this state. */
.scan-hero.cam-unavailable .scan-cta,
.scan-hero.cam-unavailable .scan-guide { display: none; }
/* With no feed the 3:4 hero is a tall empty void — shrink it to a banner. */
.scan-hero.cam-unavailable { aspect-ratio: 16 / 10; }
/* Raise the bracket frame off the bottom so the guide line and the shutter
   sit on plain camera feed rather than across the framed receipt. */
.scan-cam .scan-frame { inset: 12% 12% 34%; }
/* Darken the top and bottom of the feed so the title, guide and shutter keep
   their contrast whatever the camera is pointed at. */
.scan-cam.cam-live::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(11,31,42,0.5) 0%, transparent 18%,
                              transparent 72%, rgba(11,31,42,0.5) 100%);
}

.scan-alt {
  width: 100%;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

/* Captured-photo preview inside the submit sheet */
.rshot {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-2);
}
.rshot > img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.receipt-actions {
  margin-left: auto;
  display: flex; gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
}
.receipt-actions .link {
  font-size: var(--text-xs);
  background: none; border: none; padding: 0;
  cursor: pointer;
  color: var(--color-primary);
}
.receipt-actions .link.danger { color: var(--color-error); }

.scan-guide {
  align-self: center; margin-top: auto;
  font-size: var(--text-xs); color: rgba(255,255,255,0.75);
  text-align: center;
  /* Above .scan-cam, which is a later sibling filling the hero. */
  position: relative; z-index: 2;
  /* Clear the absolutely-positioned 72px shutter button, which otherwise
     sits on top of this line and hides the middle of the sentence. */
  margin-bottom: calc(72px + var(--space-3));
  /* Legible over a live camera image, not just over the static gradient. */
  color: rgba(255,255,255,0.92);
  background: rgba(11,31,42,0.55);
  padding: 5px var(--space-3);
  border-radius: 999px;
  backdrop-filter: blur(2px);
  max-width: 92%;
}
.scan-title {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500;
  z-index: 2; position: relative;
}
.scan-cta {
  position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  z-index: 2;
  width: 72px; height: 72px; border-radius: 50%;
  background: white; color: var(--color-primary);
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.15);
  transition: transform var(--transition);
}
.scan-cta:active { transform: translateX(-50%) scale(0.9); }
.scan-cta svg { width: 32px; height: 32px; }

.mode {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  text-align: left;
}
.mode.active { border-color: var(--color-accent); background: var(--color-accent-soft); }

.receipt-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.receipt-item {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.receipt-item .thumb {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--color-surface-offset);
  display: grid; place-items: center;
  color: var(--color-text-muted);
}
.receipt-item .vendor { font-size: var(--text-sm); font-weight: 500; }
.receipt-item .meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.receipt-item .rnote {
  font-size: var(--text-xs); color: var(--color-text-muted);
  margin-top: 2px; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.receipt-item .amt { font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); }

/* ---------- Sheet / modal ---------- */
.sheet-scrim {
  position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 50;
  animation: fade 200ms ease;
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--color-bg);
  border-top-left-radius: 24px; border-top-right-radius: 24px;
  padding: var(--space-4) var(--space-4) var(--space-8);
  z-index: 60;
  max-height: 88%;
  overflow-y: auto;
  animation: slideup 320ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-lg);
}
.sheet::before {
  content: ''; display: block; width: 40px; height: 4px;
  background: var(--color-border); border-radius: 999px;
  margin: 0 auto var(--space-4);
}
.sheet h3 {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 500; margin-bottom: var(--space-3);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Receipt form */
.rform { display: grid; gap: var(--space-3); }
.rfield { display: grid; gap: 6px; }
.rfield label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 500; }
.rfield input, .rfield select, .rfield textarea {
  padding: 12px var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition);
}
.rfield input:focus, .rfield select:focus { border-color: var(--color-accent); }
@keyframes scan-anim {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Detail views */
.detail-hero {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-4);
}
.detail-hero h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  margin-bottom: var(--space-1);
}
.detail-hero .sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.kv .k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.kv .v { font-size: var(--text-sm); font-weight: 500; text-align: right; }

/* Chat */
.bubble {
  max-width: 78%;
  padding: 10px var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.bubble.them { background: var(--color-surface-offset); border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble.me { background: var(--color-primary); color: var(--color-text-inverse); border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble .who { font-size: 10px; font-weight: 600; color: var(--color-accent); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.bubble.me .who { color: var(--color-accent-soft); }

/* Documents view */
.doc-item {
  display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.doc-item .thumb {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--color-accent-soft); color: var(--color-accent-hover);
  display: grid; place-items: center;
}
.doc-item .fname { font-size: var(--text-sm); font-weight: 500; }
.doc-item .fmeta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* Toast */
.toast {
  position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
  background: var(--color-primary); color: var(--color-text-inverse);
  padding: 10px var(--space-4); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 500;
  /* above the form sheets (ops-overlay is 9000), so a save error is seen */
  z-index: 10050;
  box-shadow: var(--shadow-lg);
  animation: toast-in 260ms cubic-bezier(0.16,1,0.3,1);
}
.toast.success { background: var(--color-success); }
.toast.error { background: var(--color-error); }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Watch card */
.watch {
  background: linear-gradient(140deg, var(--color-primary), #17384a);
  color: var(--color-text-inverse);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}
.watch-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); font-weight: 600; }
.watch-time { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; margin: 4px 0; }
.watch-with { font-size: var(--text-xs); color: rgba(255,255,255,0.7); }
/* Crew home: one small Watches card (2026-10-09) */
.watch-compact { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; cursor: pointer; }
.watch-compact .watch-ic { flex: none; color: #fff; display: flex; } .watch-compact .watch-ic svg { width: 20px; height: 20px; }
.watch-compact .watch-main { flex: 1; min-width: 0; }
.watch-compact .watch-time { font-family: inherit; font-size: var(--text-sm); font-weight: 600; margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watch-compact .watch-with { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.watch-compact .watch-with:empty { display: none; }
.watch-chip { flex: none; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.10); color: #fff; font: inherit; font-size: var(--text-xs); font-weight: 600; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.watch-chip:active { background: rgba(255,255,255,0.22); }
/* Home: your own watch, orange; hidden when you have none (16 Oct 2026) */
.watch[hidden] { display: none !important; }
.watch.watch-mine { background: linear-gradient(140deg, #c2570c, #9a3412); }
.watch.watch-mine .watch-label,
.watch.watch-mine .watch-with,
.watch.watch-mine .watch-today .wt-h,
.watch.watch-mine .watch-today .wt-l,
.watch.watch-mine .watch-today .wt-empty,
.watch.watch-mine .wt-duty-note { color: rgba(255,255,255,0.86); }
.watch.watch-mine .watch-chip { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.14); }

/* Me / profile */
.profile-header {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4); align-items: center;
  padding: var(--space-4) 0;
}
.profile-header .avatar { width: 72px; height: 72px; font-size: var(--text-lg); }
.profile-header h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; }
.profile-header .prole { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============================================================
   Owner + Shore role styles
   ============================================================ */

/* ---------- Owner hero ---------- */
.owner-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #17384a 100%);
  color: white;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-5);
  position: relative;
  overflow: hidden;
}
.owner-hero::after {
  content: '';
  position: absolute;
  right: -60px; bottom: -60px; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(184,135,61,0.18), transparent 60%);
  pointer-events: none;
}
.owner-hero-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-brass); font-weight: 600;
  margin-bottom: var(--space-3);
}
.owner-hero h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}
.owner-hero-sub { font-size: var(--text-sm); color: rgba(255,255,255,0.72); margin-bottom: var(--space-4); }
.owner-hero-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.owner-hero-grid > div { display: flex; flex-direction: column; gap: 2px; }
.owner-hero-grid span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); }
.owner-hero-grid strong { font-family: var(--font-display); font-size: 16px; font-weight: 500; }
/* Location / Event carry words, not a number: a third of the hero is ~110px on
   an iPhone, so they get a smaller size, room to wrap and a break for long
   place names. The date line sits under the event as a quiet second row. */
.owner-hero-grid strong.hero-text {
  font-size: 13px; line-height: 1.25;
  overflow-wrap: anywhere; hyphens: auto;
}
.owner-hero-grid strong.hero-text em {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 10px; font-weight: 400;
  letter-spacing: 0.02em; color: rgba(255,255,255,0.55);
}

/* ---------- Owner-home action pills ---------- */
/* Six categories under Key brief. Tapping a pill expands a strip of the
   screens inside it right below the row — no navigation until a sub-item
   is picked, so the owner can browse categories without losing home. */
.quick-tile.is-open {
  border-color: var(--color-brass);
  background: rgba(184,135,61,0.10);
  color: var(--color-brass);
}
.quick-tile.is-open .quick-icon { color: var(--color-brass); }
.owner-action-submenu {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface-offset, rgba(255,255,255,0.03));
  border-radius: var(--radius-md);
  animation: fade 150ms ease;
}
.owner-action-subitem {
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.owner-action-subitem:hover { border-color: var(--color-brass); color: var(--color-brass); }

/* ---------- KPI cards ---------- */
.kpi-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 600; margin-bottom: 4px; }
.kpi-value { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1; margin-bottom: 2px; }
.kpi-sub { font-size: 11px; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.kpi-bar { height: 4px; border-radius: 2px; background: var(--color-surface-offset); overflow: hidden; }
.kpi-bar-fill { height: 100%; background: var(--color-brass); }
.kpi-spark { height: 24px; color: var(--color-brass); }
.kpi-spark svg { width: 100%; height: 100%; }

/* ---------- Owner brief ---------- */
.owner-brief {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: #16233a;                 /* dark navy surface — matches captain/owner hero */
  border: 1px solid rgba(255,255,255,0.06);
  color: #f4f1ea;
}
.owner-brief h3,
.owner-brief strong { color: #ffffff; }
.brief-item { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); line-height: 1.5; }
.brief-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brass); margin-top: 8px; }
.brief-block { background: var(--color-primary); color: white; }
.brief-block .brief-dot { background: var(--color-brass); }
/* Contrast fix (2026-09-14): brand.css's generic ".card" rule loads after this
   file and ties on specificity with ".owner-brief"/".brief-block" above, so
   source order silently hands the background to brand.css's light warm-white
   surface while the cream/white text rules here (which target ".owner-brief"
   and its descendants, not ".card") still win. Net effect: near-invisible
   cream text on a white card. Pin the intended dark navy surfaces back with
   a compound selector so they beat the plain ".card" rule regardless of file
   order, without touching brand.css's rule for every other card on the site. */
.card.owner-brief {
  background: #16233a;
  border-color: rgba(255,255,255,0.06);
}
.card.owner-brief.brief-block {
  background: var(--color-primary);
}

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pill-ok     { background: #e4f0e5; color: #2f6f3a; }
.pill-warn   { background: #fbeed6; color: #8a5a1c; }
.pill-danger { background: #fdecea; color: #a72b1c; border: 1px solid #f2b8b0; font-weight: 600; }
.pill-crit  { background: #f9dcdc; color: #9a2b2b; }
.pill-info  { background: #dee9f3; color: #1e4a6b; }

/* ---------- Owner compliance ---------- */
.owner-comp { padding: 0; }
.comp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.comp-row:last-child { border-bottom: none; }
.alert-row { background: #fef6f6; }

/* ---------- Owner charter card ---------- */
.charter-title { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin-bottom: 4px; }

/* ---------- Past charters, grouped by year ---------- */
.owner-charter-year { padding: var(--space-4); margin-bottom: var(--space-3); }
.charter-year-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--color-divider);
}
.charter-year-label { font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.charter-year-sub { font-size: 12px; color: var(--color-text-muted); }
.charter-past-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-divider);
}
.charter-past-row:last-child { border-bottom: none; padding-bottom: 0; }
/* min-width:0 lets a long charterer name wrap inside its own box instead of
   forcing the row to wrap and dropping the dates to the left. */
.charter-past-name { font-size: 14px; flex: 1 1 auto; min-width: 0; }
.charter-past-meta { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; flex: 0 0 auto; }
/* Period type pill, trailing the name so a long name still gets the full
   column width. The label text carries the meaning; colour is a secondary
   cue, so the list stays readable without relying on colour alone. */
.period-pill {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 10px; line-height: 1.4; font-weight: 500;
  letter-spacing: 0.02em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px;
  background: #f0ede4;
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
  white-space: nowrap;
}
.period-pill.period-charter { background: #e7f0f0; color: #0c4e54; border-color: #bcd8da; }
.period-pill.period-owner,
.period-pill.period-owner_onboard { background: #efeaf6; color: #4a3570; border-color: #d5cae6; }
.period-pill.period-regatta { background: #fdeee2; color: #7a3d13; border-color: #f0d4bd; }
.period-pill.period-event { background: #fdf3d8; color: #6b5210; border-color: #efe0b0; }
/* An option is dates held for an enquiry, not a booking. Keyed to the sheet's
   own yellow so it reads the same here as it does on the planning calendar. */
.period-pill.period-option {
  background: #fbf6e0; color: #6d5a12; border-color: #e8dca8;
  border-style: dashed;
}
/* Marks the period the vessel is in right now, in the dates column. */
.period-now { color: #0c4e54; font-weight: 600; }

/* ---------- Calendar strip ---------- */
.cal-strip {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  height: 110px;
  padding: var(--space-4);
}
.cal-month {
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}
.cal-bar { width: 70%; min-height: 4px; background: var(--color-brass); border-radius: 2px 2px 0 0; opacity: 0.75; }
.cal-month.now .cal-bar { background: var(--color-primary); opacity: 1; }
.cal-month span { font-size: 10px; color: var(--color-text-muted); font-weight: 600; }
.cal-month.now span { color: var(--color-primary); font-weight: 700; }
.cal-legend { display: flex; gap: var(--space-4); padding: 0 var(--space-4) var(--space-3); font-size: 11px; color: var(--color-text-muted); }
.cal-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.dot-active { background: var(--color-brass); opacity: 0.4; }

/* ---------- Donut chart ---------- */
.donut-wrap { padding: var(--space-4); }
.donut { width: 160px; height: 160px; display: block; margin: 0 auto var(--space-4); }
.donut-title { font-size: 9px; fill: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.donut-total { font-family: var(--font-display); font-size: 20px; font-weight: 500; fill: var(--color-primary); }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-item { display: grid; grid-template-columns: 14px 1fr auto; gap: var(--space-2); align-items: center; font-size: 12px; }
.donut-swatch { width: 12px; height: 12px; border-radius: 3px; }
.donut-cat { color: var(--color-text); }
.donut-amt { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Trend chart ---------- */
.trend-chart {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  height: 110px;
  padding: var(--space-4);
  align-items: end;
}
.trend-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.trend-bar { width: 60%; background: var(--color-primary); border-radius: 2px 2px 0 0; min-height: 6px; }
.trend-col:last-child .trend-bar { background: var(--color-brass); }
.trend-col span { font-size: 10px; color: var(--color-text-muted); font-weight: 600; }

/* ---------- List cards (generic) ---------- */
.list-card { padding: 0; overflow: hidden; }
.list-card > * { border-bottom: 1px solid var(--color-divider); }
.list-card > *:last-child { border-bottom: none; }

.inv-row {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  align-items: center;
}
.inv-main, .inv-side { display: flex; flex-direction: column; gap: 2px; }
.inv-main strong { font-size: 13px; }
.inv-main span, .inv-side span { font-size: 11px; color: var(--color-text-muted); }
.inv-side { align-items: flex-end; gap: 4px; }
.inv-side strong { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.flag-row, .doc-row, .activity-row {
  display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4);
}
.flag-row > div:first-child, .doc-row > div:first-child { color: var(--color-text-muted); flex-shrink: 0; }
.flag-row > div:first-child svg, .doc-row > div:first-child svg { width: 20px; height: 20px; }
.flag-main, .doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.flag-main strong, .doc-main strong { font-size: 13px; }
.flag-main span, .doc-main span { font-size: 11px; color: var(--color-text-muted); }

.activity-row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 8px; align-self: flex-start;
}
.activity-row > div:not(.dot) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.activity-row strong { font-size: 13px; }
.activity-row span { font-size: 11px; color: var(--color-text-muted); }
.dot-ok { background: #2f6f3a; }
.dot-warn { background: #b8873d; }
.dot-crit { background: #9a2b2b; }

/* ---------- Position map ---------- */
.position-card { padding: 0; overflow: hidden; }
.position-meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
}
.position-meta > div { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.position-meta span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: 600; }
.position-meta strong { font-family: var(--font-display); font-size: 14px; }

/* ============================================================
   Shore Management styles
   ============================================================ */

.shore-hello {
  padding: var(--space-2) var(--space-1) var(--space-5);
}
.shore-hello-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted); font-weight: 600; margin-bottom: 4px;
}
.shore-hello h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  margin-bottom: 2px;
}
.shore-hello-sub { font-size: var(--text-sm); color: var(--color-text-muted); }

.shore-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.shore-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: left;
  transition: all var(--transition);
  min-height: 120px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-2);
}
.shore-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.shore-card-num { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--color-primary); line-height: 1; }
.shore-card-num-icon { display: flex; align-items: center; }
.shore-card-num-icon svg { width: 26px; height: 26px; }
.shore-card-label { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }
.shore-card-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.shore-card-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.shore-card-chip { display: inline-block; background: #b5531f; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 3px 9px; letter-spacing: .02em; cursor: pointer; }
.shore-card-flag { border-color: #b5531f; }
.shore-card-cta { font-size: 11px; font-weight: 600; color: var(--color-brass); text-transform: uppercase; letter-spacing: 0.06em; }
/* Owner dashboard: the operational-cost card carries a longer label, so it
   takes the full width of the last grid row instead of half. */
.shore-card-wide { grid-column: 1 / -1; }
.shore-card-alert .shore-card-num { color: #b8873d; }
.shore-card-crit .shore-card-num { color: #9a2b2b; }

.shore-hint {
  font-size: 12px; color: var(--color-text-muted);
  padding: var(--space-2) var(--space-1) var(--space-3);
  line-height: 1.5;
}

/* ---------- Approval rows ---------- */

/* ---------- Pipeline rows ---------- */
.pipe-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
}
.pipe-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-primary); color: white;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  font-family: var(--font-display);
}
.pipe-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pipe-info strong { font-size: 13px; }
.pipe-info span { font-size: 11px; color: var(--color-text-muted); }

/* ---------- Notice composer ---------- */
.notice-composer {
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.notice-composer label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.notice-composer input[type="text"],
.notice-composer select,
.notice-composer textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 14px;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition);
  text-transform: none; letter-spacing: normal;
}
.notice-composer input:focus,
.notice-composer select:focus,
.notice-composer textarea:focus {
  outline: none; border-color: var(--color-primary);
}
.notice-composer textarea { resize: vertical; font-family: var(--font-body); }
.notice-composer label.notice-check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  font-weight: 500;
}
.notice-check input { width: 16px; height: 16px; margin: 0; }
.notice-submit {
  padding: 12px 16px;
  background: var(--color-primary); color: white;
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: opacity var(--transition);
  margin-top: var(--space-2);
}
.notice-submit:hover { opacity: 0.9; }

/* ============================================================
   Segmented sub-nav (within a view)
   ============================================================ */
.segmented {
  display: flex;
  margin: 0 var(--space-4) var(--space-4);
  padding: 4px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  gap: 2px;
}
.segmented button {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-transform: uppercase;
}
.segmented button.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.segmented-thin button {
  font-size: 11px;
  padding: 6px 10px;
  letter-spacing: 0.05em;
}

/* ============================================================
   Roster (Shore → Crew → Roster)
   ============================================================ */
.roster-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--space-4);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.roster-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  border-right: 1px solid var(--color-divider);
  padding-right: var(--space-3);
}
.roster-kpi:last-child { border-right: none; padding-right: 0; }
.roster-kpi .kpi-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.roster-kpi .kpi-num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1.1;
}

.roster-list { padding: 0; }
.roster-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  padding: 12px var(--space-4);
  align-items: center;
  border-bottom: 1px solid var(--color-divider);
}
.roster-row:last-child { border-bottom: none; }
.roster-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.roster-name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.roster-name-line strong {
  font-size: 13px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.roster-meta {
  font-size: 11px;
  color: var(--color-text-muted);
}
.roster-bar {
  height: 4px;
  background: var(--color-primary-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.roster-bar-fill {
  height: 100%;
  background: var(--color-brass);
  border-radius: 2px;
}
.roster-days {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 44px;
}
.roster-days strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1;
}
.roster-days span {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.roster-years {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
}
.roster-years strong {
  color: var(--color-primary);
  font-weight: 600;
}
.pill-neutral {
  background: var(--color-primary-soft);
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  letter-spacing: 0.06em;
}

/* Owner tenure card */
.tenure-card { padding: var(--space-4); }
.tenure-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-3);
}
.tenure-kpis > div { display: flex; flex-direction: column; gap: 4px; }
.tenure-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.tenure-kpis strong {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1;
}
.tenure-top { display: flex; flex-direction: column; gap: 6px; }
.tenure-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--color-text);
}
.tenure-row strong {
  color: var(--color-brass);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}

/* ============================================================
   Crew member detail view
   ============================================================ */
.crew-hero { padding: var(--space-4) var(--space-4) var(--space-5); }
.crew-hero-top { display: flex; align-items: center; gap: var(--space-3); }
.crew-avatar-lg {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-brass);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}
.crew-hero .sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.chip-success { background: rgba(46,125,50,0.12); color: #2e7d32; }
.chip-warn { background: rgba(184,135,61,0.14); color: var(--color-brass); }
.chip-neutral { background: var(--color-primary-soft); color: var(--color-text-muted); }

.roster-row-click { cursor: pointer; transition: background var(--transition); }
.roster-row-click:hover { background: rgba(184,135,61,0.06); }

.crew-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--space-4);
  gap: var(--space-2);
}
.crew-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  border-right: 1px solid var(--color-divider);
  padding: 0 var(--space-2);
}
.crew-stat:last-child { border-right: none; }
.crew-stat strong {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1.15;
}
.crew-stat-sub {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Current-rotation callout */
.stint-current {
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(184,135,61,0.08), rgba(11,31,42,0.03));
  border: 1px solid rgba(184,135,61,0.25);
  margin-bottom: var(--space-3);
}
.stint-badge {
  font-size: 10px;
  color: var(--color-brass);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 6px;
}
.stint-dates {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.stint-progress {
  height: 6px;
  background: var(--color-primary-soft);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.stint-progress-fill {
  height: 100%;
  background: var(--color-brass);
  border-radius: 3px;
  transition: width var(--transition);
}
.stint-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Year breakdown */
.year-breakdown { padding: var(--space-3) var(--space-4); }
.year-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  padding: 8px 0;
  align-items: center;
}
.year-row + .year-row { border-top: 1px solid var(--color-divider); }
.year-label {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 600;
}
.year-bar {
  height: 6px;
  background: var(--color-primary-soft);
  border-radius: 3px;
  overflow: hidden;
}
.year-bar-fill {
  height: 100%;
  background: var(--color-brass);
  border-radius: 3px;
}
.year-days { font-size: 12px; color: var(--color-text); text-align: right; white-space: nowrap; }
.year-days strong { font-family: var(--font-display); font-size: 14px; color: var(--color-primary); font-weight: 600; }
.year-days em {
  font-style: normal;
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 4px;
}

/* Rotation history list */
.stint-list { padding: 0; }
.stint-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 12px;
  padding: 12px var(--space-4);
  align-items: center;
  border-bottom: 1px solid var(--color-divider);
}
.stint-row:last-child { border-bottom: none; }
/* past rotations light green, present one light yellow (Fosse, 2026-10-09) */
.stint-past-row { background: #e8f5e3; }
.stint-current-row { background: #fff6c7; }
[data-theme='dark'] .stint-past-row { background: rgba(143,199,154,0.14); }
[data-theme='dark'] .stint-current-row { background: rgba(230,185,92,0.18); }
.stint-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  justify-self: center;
}
.dot-active { background: var(--color-brass); box-shadow: 0 0 0 3px rgba(184,135,61,0.2); }
.dot-past { background: var(--color-text-muted); opacity: 0.4; }
.dot-future { background: transparent; border: 2px solid var(--color-brass); }
.stint-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stint-title { font-size: 13px; color: var(--color-text); font-weight: 500; }
.stint-meta { font-size: 11px; color: var(--color-text-muted); }
.stint-days {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  color: var(--color-primary);
}
.stint-days strong { font-size: 17px; font-weight: 600; }
.stint-days span { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; }

/* ============================================================
   Captain (Admin) role — full-access styles
   ============================================================ */
.phone-screen[data-role="captain"] { background: linear-gradient(180deg, #f7f4ee 0%, var(--color-surface) 100%); }

/* Captain hero */
.captain-hero {
  background: linear-gradient(135deg, #0b1f2a 0%, #1a3446 100%);
  color: #f2e6cf;
  padding: var(--space-5) var(--space-4);
  margin: 0 0 var(--space-3);
  border-radius: 0;
}
.captain-hero-label {
  font-size: 10px;
  color: var(--color-brass);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 8px;
}
.captain-hero h2 {
  font-family: var(--font-display);
  font-size: 26px;
  color: white;
  margin: 0 0 var(--space-3);
  font-weight: 500;
}
.captain-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.captain-hero-grid > div { display: flex; flex-direction: column; gap: 2px; }
.captain-hero-grid span {
  font-size: 9px;
  color: rgba(242,230,207,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.captain-hero-grid strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: white;
  font-weight: 600;
}

/* Quick tiles */
.captain-quick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2);
}
.quick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}
.quick-tile:hover {
  border-color: var(--color-brass);
  background: rgba(184,135,61,0.04);
}
.quick-icon {
  width: 32px; height: 32px;
  color: var(--color-brass);
  display: flex; align-items: center; justify-content: center;
}
.quick-icon svg { width: 22px; height: 22px; }
.quick-icon-sm { width: 24px; height: 24px; }
.quick-icon-sm svg { width: 16px; height: 16px; }

/* Filter chips (legacy — pill style, still used on other screens) */
.filter-chips {
  display: flex;
  gap: 6px;
  padding: 0 var(--space-4) var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
.filter-chips button {
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-chips button.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.filter-chips button:hover:not(.active) { background: rgba(184,135,61,0.06); }
.filter-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-right: 4px;
}

/* Filters panel — refined crew register filter card (v1.9.32) */
.filters-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  margin: 0 var(--space-4) var(--space-3);
  padding: 0;
  overflow: hidden;
}
.filters-panel__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: start;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-divider);
}
.filters-panel__row:last-child { border-bottom: 0; }
.filters-panel__label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding-top: 6px;
}
.filters-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filters-panel__chips button {
  padding: 5px 11px;
  border-radius: 4px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg, #f9f7f2);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  min-height: 26px;
}
.filters-panel__chips button:hover:not(.active):not(:disabled) {
  background: rgba(184,135,61,0.08);
  border-color: rgba(184,135,61,0.3);
}
.filters-panel__chips button.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.filters-panel__chips button.chip-alert {
  color: #a13a2a;
  border-color: rgba(161,58,42,0.3);
  background: rgba(226,110,90,0.06);
}
.filters-panel__chips button.chip-alert.active {
  background: #a13a2a;
  color: #fff;
  border-color: #a13a2a;
}
@media (max-width: 640px) {
  .filters-panel__row { grid-template-columns: 1fr; gap: 6px; }
  .filters-panel__label { padding-top: 0; }
}

/* Dept chip */
.dept-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* Captain list rows (used on home, payroll, crew) */
.cap-list-row, .cap-crew-row, .cap-payroll-row, .cap-doc-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  padding: 12px var(--space-4);
  align-items: center;
  border-bottom: 1px solid var(--color-divider);
}
.cap-list-row:last-child, .cap-crew-row:last-child,
.cap-payroll-row:last-child, .cap-doc-row:last-child { border-bottom: none; }

.cap-doc-row-clickable, .cap-doc-row-static {
  cursor: pointer;
  transition: background 120ms ease;
}
.cap-doc-row-clickable:hover { background: var(--color-primary-soft); }
.cap-doc-row-static:hover { background: var(--color-surface-offset); }
.cap-doc-row-clickable:focus-visible,
.cap-doc-row-static:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.cap-doc-row-clickable .cap-list-main strong { color: var(--color-accent); }

.cap-list-main, .cap-crew-main {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.cap-list-main strong, .cap-crew-name strong {
  font-size: 13px; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cap-list-main span, .cap-crew-meta {
  font-size: 11px; color: var(--color-text-muted);
  display: flex; align-items: center; gap: 6px;
  /* 2026-09-25 -- dual-capacity role chips can push this line past the
     row width (role + dept chip + nationality + N extra-role chips).
     Without wrap the overflow renders underneath the row's right-side
     action icons instead of a visible second line. Harmless for the
     original short content (role/dept/nationality), which still fits on
     one line and never wraps. */
  flex-wrap: wrap;
}
.cap-crew-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* --- Structured status chips (crew register) --- */
.st-chip-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.st-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .15s ease;
}
.st-chip .st-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.st-chip svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Status: On Board — filled soft green */
.st-chip-onboard {
  background: #e6f1e8;
  color: #2b6a37;
}
/* Status: Off Board — muted neutral */
.st-chip-offboard {
  background: #eceff2;
  color: #5a6672;
}

/* Contract: outlined chips */
.st-chip-active {
  background: transparent;
  border-color: #cfe2d3;
  color: #2b6a37;
}
.st-chip-warn {
  background: #fbf1dd;
  border-color: #f0d9a8;
  color: #8a5a1c;
}
.st-chip-terminated {
  background: transparent;
  border-color: #e6c7c2;
  color: #a04a3d;
}
.st-chip-inactive {
  background: transparent;
  border-color: var(--color-divider);
  color: var(--color-text-muted);
}

/* Alert — expired passport / critical */
.st-chip-alert {
  background: #fdecea;
  border-color: #f2b8b0;
  color: #a72b1c;
  font-weight: 600;
}
.cap-list-right, .cap-crew-right {
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
}
.cap-list-right strong, .cap-crew-right strong {
  font-family: var(--font-display); font-size: 14px; color: var(--color-primary); font-weight: 600;
}
.cap-list-right span, .cap-crew-right span {
  font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.btn-invite-mini {
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-invite-mini:hover {
  background: rgba(184,135,61,0.08);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Coach-mark tour (one-shot intro) */
.ct-overlay {
  position: fixed; inset: 0; z-index: 10000;
  pointer-events: auto;
}
.ct-scrim {
  position: absolute; inset: 0;
  background: rgba(11, 31, 42, 0.72);
  backdrop-filter: blur(2px);
}
.ct-card {
  position: absolute;
  width: min(88vw, 360px);
  background: #fdfaf3;
  color: var(--color-text, #0b1f2a);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
  z-index: 2;
  font-family: var(--font-body, "EB Garamond", Georgia, serif);
}
.ct-progress {
  display: flex; gap: 6px; margin-bottom: 14px;
}
.ct-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(11,31,42,0.15);
}
.ct-dot.is-active { background: var(--color-primary, #b8873d); width: 20px; border-radius: 3px; }
.ct-dot.is-done   { background: rgba(184,135,61,0.4); }
.ct-title {
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: 20px; margin: 0 0 8px; letter-spacing: 0.02em;
}
.ct-body {
  font-size: 15px; line-height: 1.5; color: var(--color-text-muted, #5a6673);
  margin: 0 0 16px;
}
.ct-actions {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
}
.ct-btn {
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--color-border, #d4d1ca);
  background: var(--color-surface, #fff);
  color: var(--color-text, #28251d);
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  transition: border-color var(--transition, 120ms ease), background var(--transition, 120ms ease);
}
.ct-btn:hover:not(:disabled) {
  border-color: var(--color-primary, #b8873d);
  color: var(--color-primary, #b8873d);
}
.ct-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ct-btn-primary {
  background: var(--color-primary, #b8873d);
  color: #fff;
  border-color: var(--color-primary, #b8873d);
}
.ct-btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover, #a0752f);
  border-color: var(--color-primary-hover, #a0752f);
  color: #fff;
}
.ct-btn-ghost   { background: transparent; border-color: transparent; color: var(--color-text-muted, #5a6673); }
.ct-btn-danger {
  background: transparent; color: var(--color-error, #a13544);
  border-color: var(--color-error, #a13544);
}
.ct-btn-danger:hover:not(:disabled) {
  background: var(--color-error, #a13544); color: #fff;
}

/* ---- Timeline modal form fields --------------------------------- */
.ct-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ct-modal {
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  width: min(560px, 100%); max-height: 90vh; overflow: auto;
}
.ct-modal-head {
  padding: 20px 24px 12px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.ct-modal-eyebrow {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted, #5a6673);
  margin-bottom: 4px;
}
.ct-modal-title {
  font-family: var(--font-display, "Barlow Condensed", sans-serif);
  font-size: 22px; letter-spacing: 0.01em;
  color: var(--color-text, #28251d);
}
.ct-icon-btn {
  border: 0; background: transparent; cursor: pointer;
  font-size: 18px; color: var(--color-text-muted, #5a6673);
  padding: 4px 8px; border-radius: 4px;
  transition: color var(--transition, 120ms ease), background var(--transition, 120ms ease);
}
.ct-icon-btn:hover { color: var(--color-text, #28251d); background: var(--color-hover, rgba(0,0,0,0.05)); }
.ct-modal-body {
  padding: 8px 24px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.ct-modal-foot {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--color-border, #d4d1ca);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.ct-modal-foot > div { display: flex; gap: 8px; }

.ct-field {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted, #5a6673);
}
.ct-field input,
.ct-field select,
.ct-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #d4d1ca);
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-body, system-ui, sans-serif); font-size: 14px;
  color: var(--color-text, #28251d);
  background: var(--color-background, #f7f6f2);
  transition: border-color var(--transition, 120ms ease), background var(--transition, 120ms ease);
  text-transform: none; letter-spacing: normal;
}
.ct-field input:hover,
.ct-field select:hover,
.ct-field textarea:hover {
  border-color: var(--color-text-muted, #5a6673);
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
  outline: none;
  border-color: var(--color-primary, #b8873d);
  background: var(--color-surface, #fff);
  box-shadow: 0 0 0 3px rgba(184,135,61,0.15);
}
.ct-field textarea { resize: vertical; min-height: 72px; font-family: var(--font-body, system-ui, sans-serif); }
.ct-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 480px) {
  .ct-field-row { grid-template-columns: 1fr; }
}
.ct-ring {
  position: absolute;
  border: 2px solid var(--color-primary, #b8873d);
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0);
  animation: ct-pulse 1.8s ease-in-out infinite;
}
@keyframes ct-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(184,135,61,0.6); }
  50%     { box-shadow: 0 0 0 8px rgba(184,135,61,0.15); }
}
.payroll-note {
  font-size: 10px !important;
  color: var(--color-brass) !important;
  font-style: italic;
}
.cap-doc-scope { text-align: right; }

/* Empty row */
.empty-row {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Captain doc CTA */
.captain-doc-cta { padding: 0 var(--space-4) var(--space-3); }
.captain-doc-cta button {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
}
.captain-doc-cta svg { width: 16px; height: 16px; }

/* Authority matrix */
.auth-matrix {
  padding: 0;
  overflow: hidden;
}
.auth-header, .auth-row {
  display: grid;
  grid-template-columns: 1.6fr repeat(7, 1fr) 0.9fr;
  gap: 4px;
  align-items: center;
  padding: 10px var(--space-3);
}

/* Authority editor (inline on crew profile) */
.authority-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}
.authority-role-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.authority-role-opt:hover { border-color: var(--color-brass); }
.authority-role-opt input { margin-top: 3px; }
.authority-role-opt strong { display: block; font-size: 13px; color: var(--color-text); }
.authority-role-opt span { display: block; font-size: 11px; color: var(--color-text-muted); line-height: 1.4; margin-top: 2px; }
.authority-role-opt input:checked ~ div strong { color: var(--color-brass); }
.authority-role-opt:has(input:checked) { border-color: var(--color-brass); background: var(--color-primary-soft); }

.authority-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3) var(--space-4);
}
.authority-perm-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}
.authority-perm-row input { margin-top: 3px; }
.authority-perm-row strong { display: block; font-size: 13px; color: var(--color-text); }
.authority-perm-row span { display: block; font-size: 11px; color: var(--color-text-muted); line-height: 1.4; margin-top: 2px; }

.auth-header {
  background: var(--color-primary-soft);
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-align: center;
}
.auth-header > div:first-child { text-align: left; }
.auth-row { border-bottom: 1px solid var(--color-divider); }
.auth-row:last-child { border-bottom: none; }
.auth-row > div { text-align: center; }
.auth-row > div:first-child { text-align: left; }
.auth-name { display: flex; align-items: center; gap: 8px; }
.auth-name strong { font-size: 12px; color: var(--color-text); display: block; }
.auth-name span { font-size: 10px; color: var(--color-text-muted); }
.hod-badge { color: var(--color-brass); font-style: normal; font-weight: 700; }
.pipe-avatar.sm { width: 28px; height: 28px; font-size: 10px; }
.perm-yes { color: #2e7d32; display: inline-flex; }
.perm-yes svg { width: 16px; height: 16px; }
.perm-no { color: var(--color-text-muted); opacity: 0.35; display: inline-flex; }
.perm-no svg { width: 14px; height: 14px; }
.auth-legend {
  padding: 10px var(--space-4);
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.auth-legend strong { color: var(--color-primary); }

/* Payroll block on crew detail */
.cap-badge {
  background: var(--color-brass);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.payroll-card { padding: var(--space-4); }
.payroll-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.payroll-grid > div { display: flex; flex-direction: column; gap: 2px; }
.payroll-grid strong {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--color-primary);
  font-weight: 600;
}

.btn-inline {
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--color-brass);
  color: var(--color-brass);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-inline:hover { background: rgba(184,135,61,0.08); }
.btn-inline svg { width: 14px; height: 14px; }
/* Filled variant — referenced by app.js ("+ Add crew member") but never
   defined until now, so it silently rendered as a plain outline .btn-inline.
   Also used by the Joiners panel's "Sync"/"Approve" actions.
   NOTE: a second, unrelated .btn-inline rule further down this file (search
   "border: 1px dashed") happens to share this class name and, being later
   in the cascade at equal specificity, overrides these declarations. The
   fully-qualified selector below is defined at the very end of this file
   (see "housekeeping addendum") so it always wins regardless of source
   order, without touching that unrelated rule. */

.btn-secondary {
  padding: 12px 16px;
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
}
.btn-secondary:hover { background: var(--color-divider); }

/* Days breakdown */
.days-card { padding: var(--space-4); }
.days-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.days-cell {
  display: flex; flex-direction: column; gap: 2px;
  text-align: center;
}
.days-cell strong {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-primary);
  font-weight: 600;
}
.days-bar {
  height: 12px;
  background: var(--color-primary-soft);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  margin-bottom: 8px;
}
.days-bar-fill { height: 100%; transition: width var(--transition); }
.days-bar-onboard { background: var(--color-brass); }
.days-bar-home { background: #5a6f4a; }
.days-bar-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--color-text-muted);
  align-items: center;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.days-bar-legend span { display: flex; align-items: center; gap: 4px; }
.days-bar-total { margin-left: auto; font-style: italic; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.legend-onboard { background: var(--color-brass); }
.legend-home { background: #5a6f4a; }

/* Salary history timeline */
.salary-history { padding: 0; }
.salary-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding: 12px var(--space-4);
  align-items: flex-start;
  border-bottom: 1px solid var(--color-divider);
}
.salary-row:last-child { border-bottom: none; }
/* 2026-09-25: per-entry Delete in salary history (asks before deleting). */
.salary-row:has(.salary-del) { grid-template-columns: 20px 1fr auto; }
.salary-del {
  align-self: center;
  padding: 6px 12px; min-height: 32px;
  font-size: 12px; font-weight: 600;
  color: var(--color-error, #9a2b2b);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-error, #9a2b2b) 45%, transparent);
  border-radius: 8px; cursor: pointer;
}
.salary-del:hover { background: color-mix(in srgb, var(--color-error, #9a2b2b) 10%, transparent); }
.salary-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-brass);
  margin-top: 5px;
  justify-self: center;
}
.salary-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.salary-header {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display);
}
.salary-header strong {
  font-size: 17px;
  color: var(--color-primary);
  font-weight: 600;
}
.salary-delta {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.delta-up { background: rgba(46,125,50,0.12); color: #2e7d32; }
.delta-down { background: rgba(184,49,49,0.12); color: #b83131; }
.salary-meta {
  font-size: 12px;
  color: var(--color-text);
}
.salary-meta em { color: var(--color-brass); font-style: normal; font-weight: 600; }
.salary-note {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 4px 8px;
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-brass);
}

/* Permissions card */
.perms-card { padding: var(--space-2) var(--space-4); }
.perm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
  color: var(--color-text);
}
.perm-row:last-child { border-bottom: none; }
.perm-toggle {
  position: relative;
  width: 40px; height: 22px;
  display: inline-block;
  cursor: pointer;
}
.perm-toggle input { opacity: 0; width: 0; height: 0; }
.perm-slider {
  position: absolute; inset: 0;
  background: #d0c8b8;
  border-radius: 22px;
  transition: background var(--transition);
}
.perm-slider::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.perm-toggle.on .perm-slider { background: var(--color-brass); }
.perm-toggle input:checked + .perm-slider { background: var(--color-brass); }
.perm-toggle input:checked + .perm-slider::before { transform: translateX(18px); }
.perm-select {
  padding: 6px 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

/* Modal enhancements */
.modal-crew {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.modal-crew strong { display: block; font-size: 14px; color: var(--color-primary); }
.modal-crew span { font-size: 11px; color: var(--color-text-muted); }
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: var(--space-3);
}
.modal-actions .notice-submit { margin-top: 0; }

/* Upload drop zone */
.upload-drop {
  border: 2px dashed var(--color-brass);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: background var(--transition);
}
.upload-drop:hover { background: rgba(184,135,61,0.04); }
.upload-icon {
  color: var(--color-brass);
  margin: 0 auto 8px;
  display: inline-flex;
}
.upload-icon svg { width: 36px; height: 36px; }
.upload-drop strong { display: block; color: var(--color-primary); font-size: 14px; margin-bottom: 4px; }
.upload-drop span { font-size: 11px; }

/* ============================================================
   Crew profile blocks — identity, contact, sizes, documents
   ============================================================ */
.identity-card, .contact-card {
  padding: var(--space-2) var(--space-4);
}
.id-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
}
.id-row:last-child { border-bottom: none; }
.id-row > span {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.id-row > strong {
  color: var(--color-text);
  font-weight: 500;
  word-break: break-word;
}

/* Uniform sizes — inline pills */
.sizes-card {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}
.size-cell {
  flex: 1 1 calc(20% - var(--space-2));
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  text-align: center;
}
.size-cell span {
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.size-cell strong {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--color-primary);
  font-weight: 600;
}

/* Documents list */
.doc-group-label {
  padding: 10px var(--space-4) 4px;
  font-size: 10px;
  color: var(--color-brass);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  border-top: 1px solid var(--color-divider);
}
.doc-group-label:first-child { border-top: none; }
.doc-row-crew {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-4);
  font-size: 13px;
  color: var(--color-text);
}
.doc-name { flex: 1; min-width: 0; }

.doc-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.doc-chip-ok       { background: rgba(46,125,50,0.12);  color: #2e7d32; }
.doc-chip-soon     { background: rgba(184,135,61,0.15); color: #a06a1a; }
.doc-chip-expired  { background: rgba(184,49,49,0.14);  color: #b83131; }
.doc-chip-na       { background: var(--color-primary-soft); color: var(--color-text-muted); }
.doc-chip-unknown  { background: var(--color-surface-offset); color: var(--color-text-muted); }

/* -------- Search bar (Captain crew register) -------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 12px 0;
}
.search-bar .search-icon {
  width: 18px; height: 18px;
  color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.search-bar .search-icon svg { width: 18px; height: 18px; }
.search-bar input[type="search"] {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--color-text);
  padding: 0;
}
.search-bar input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-clear {
  border: 0; background: var(--color-surface-offset);
  color: var(--color-text-muted);
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.search-clear:hover { color: var(--color-text); }

/* -------- Captain docs tab switch -------- */
.segmented.cap-doc-tabs {
  display: flex;
  gap: 4px;
  background: var(--color-surface-offset);
  border-radius: 12px;
  padding: 4px;
  margin: 12px 0;
}
.segmented.cap-doc-tabs button {
  flex: 1;
  border: 0; background: transparent;
  padding: 8px 14px;
  font: inherit; font-weight: 600;
  color: var(--color-text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.segmented.cap-doc-tabs button.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* -------- Compliance KPI card -------- */
.compliance-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
}
.comp-kpi {
  padding: 16px 14px;
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 4px;
}
.comp-kpi:last-child { border-right: 0; }
.comp-kpi .kpi-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.comp-kpi .kpi-num { font-size: 28px; font-weight: 700; line-height: 1; }
.comp-kpi .kpi-num em { font-size: 15px; font-weight: 500; color: var(--color-text-muted); font-style: normal; }
.comp-kpi .kpi-sub { font-size: 12px; color: var(--color-text-muted); }
.kpi-good { color: #2e7d32; }
.kpi-warn { color: #a06a1a; }
.kpi-bad  { color: #b83131; }

@media (max-width: 520px) {
  .compliance-kpis { grid-template-columns: repeat(2, 1fr); }
  .comp-kpi:nth-child(2) { border-right: 0; }
  .comp-kpi:nth-child(1), .comp-kpi:nth-child(2) { border-bottom: 1px solid var(--color-border); }
}

/* -------- Compliance alert row -------- */
.compliance-alert {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  padding: 14px 16px;
  background: rgba(184,135,61,0.08);
  border: 1px solid rgba(184,135,61,0.2);
}
.compliance-alert .alert-icon { grid-row: 1 / span 2; }
.compliance-alert .alert-body { grid-column: 2; grid-row: 1; }
.compliance-alert .btn-inline { grid-column: 2; grid-row: 2; justify-self: start; }
.compliance-alert .alert-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(184,135,61,0.15);
  color: #a06a1a;
  border-radius: 8px; flex-shrink: 0;
}
.compliance-alert .alert-icon svg { width: 18px; height: 18px; }
.compliance-alert .alert-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.compliance-alert .alert-body strong { font-size: 14px; }
.compliance-alert .alert-body span { font-size: 12px; color: var(--color-text-muted); }
.compliance-alert .btn-inline {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 8px 12px; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--color-text); cursor: pointer;
  flex-shrink: 0;
}
.compliance-alert .btn-inline:hover { background: var(--color-surface-offset); }

.missing-doc-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.missing-doc-chips .doc-chip {
  font-size: 11px; padding: 3px 8px;
}

/* -------- Filter-chip alert variant -------- */
.filter-chips button.chip-alert {
  color: #b83131;
}
.filter-chips button.chip-alert.active {
  background: rgba(184,49,49,0.14);
  border-color: rgba(184,49,49,0.28);
}

/* -------- Section-title edit button -------- */
.section-title { display: flex; align-items: center; gap: 8px; }
.section-title .link { margin-left: auto; }
.section-title .edit-icon-btn {
  margin-left: 4px;
}
.edit-icon-btn {
  border: 0; background: transparent;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.edit-icon-btn:hover { background: var(--color-surface-offset); color: var(--color-text); }
.edit-icon-btn svg { width: 15px; height: 15px; }

/* -------- Copy icon (crew detail rows) -------- */
.copyable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.copy-icon-btn {
  border: 0; background: transparent;
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9ca3af;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .15s, background .15s, color .15s;
  padding: 0;
  flex-shrink: 0;
}
.copy-icon-btn:hover {
  opacity: 1;
  background: rgba(1, 105, 111, 0.10);
  color: var(--color-primary);
}
.copy-icon-btn:active { transform: scale(0.94); }
.copy-icon-btn.copied {
  opacity: 1;
  background: rgba(67, 122, 34, 0.15);
  color: #437a22;
}
.copy-icon-btn svg { width: 13px; height: 13px; }
/* Copy button inside Edit dayworker fields (2026-10-09) */
.dw-cpw { position: relative; display: block; }
.ops-f .dw-cpw input { width: 100%; padding-right: 38px; box-sizing: border-box; }
.dw-cpy { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #9ca3af; opacity: .7; cursor: pointer; padding: 0; transition: opacity .15s, background .15s, color .15s; }
.dw-cpy:hover, .dw-cpy:focus-visible { opacity: 1; background: rgba(1, 105, 111, 0.10); color: var(--color-primary); }
.dw-cpy.copied { opacity: 1; background: rgba(67, 122, 34, 0.15); color: #437a22; }
.dw-cpy svg { width: 15px; height: 15px; }
/* Payroll-grid copyable strong should not shrink layout */
.payroll-grid .copyable { display: inline-flex; }

/* -------- Compliance pill-warn -------- */
.pill.pill-warn {
  background: rgba(184,135,61,0.15);
  color: #a06a1a;
}

/* ============================================================
   LOGIN OVERLAY — dark, atmospheric, matches atlantic-yacht.com
   ============================================================ */
.login-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  padding: var(--space-6);
  background:
    linear-gradient(135deg, rgba(11,31,42,0.94), rgba(5,13,18,0.96)),
    radial-gradient(1200px 800px at 20% 20%, rgba(184,135,61,0.10), transparent 60%);
  color: #f4f1ea;
  overflow-y: auto;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.login-mode { overflow: hidden; }

.login-card {
  width: min(420px, 100%);
  padding: var(--space-8) var(--space-6);
  border: 1px solid rgba(244,241,234,0.14);
  border-radius: 6px;
  background: rgba(11,31,42,0.55);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(244,241,234,0.05) inset;
}
.login-wordmark {
  width: 180px; height: auto; margin-bottom: 6px;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.3));
}
.login-sub {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.65);
  margin-bottom: var(--space-6);
  font-weight: 500;
}
.login-lead {
  font-family: var(--font-editorial);
  font-size: 1.08rem;
  line-height: 1.5;
  color: rgba(244,241,234,0.82);
  margin-bottom: var(--space-6);
  max-width: 34ch;
}
.login-form {
  display: grid; gap: 10px;
  margin-bottom: var(--space-4);
}
.login-form label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.7);
  margin-top: 8px;
}
.login-form input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(5,13,18,0.6);
  border: 1px solid rgba(244,241,234,0.18);
  border-radius: 4px;
  color: #f4f1ea;
  font-family: var(--font-body);
  font-size: 15px;
}
.login-form input:focus {
  outline: none;
  border-color: rgba(184,135,61,0.6);
  box-shadow: 0 0 0 3px rgba(184,135,61,0.18);
}
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap input {
  padding-right: 64px;
}
.pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: rgba(244,241,234,0.75);
  border: 1px solid rgba(244,241,234,0.22);
  border-radius: 4px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.pw-toggle:hover, .pw-toggle:focus {
  color: #b8873d;
  border-color: rgba(184,135,61,0.55);
  background: rgba(184,135,61,0.08);
  outline: none;
}
.pw-toggle[aria-pressed="true"] {
  color: #b8873d;
  border-color: rgba(184,135,61,0.55);
}
.login-btn {
  margin-top: var(--space-4);
  padding: 14px 20px;
  border-radius: 4px;
  background: #b8873d;
  color: #0b1f2a;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.05s;
}
.login-btn:hover:not(:disabled) { background: #c99752; }
.login-btn:active:not(:disabled) { transform: translateY(1px); }
.login-btn:disabled { opacity: 0.6; cursor: default; }
.login-error {
  margin-top: 6px;
  color: #ffb4a2;
  font-size: 0.85rem;
  min-height: 1.2em;
}
.login-foot {
  font-size: 0.75rem;
  color: rgba(244,241,234,0.55);
  border-top: 1px solid rgba(244,241,234,0.12);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  line-height: 1.5;
}
.login-foot code {
  background: rgba(244,241,234,0.08);
  padding: 2px 6px; border-radius: 3px;
  font-family: ui-monospace, monospace; font-size: 0.9em;
  color: rgba(244,241,234,0.85);
}

/* Panels — links, notices, password reset */
.login-links {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  text-align: center;
}
.login-links a {
  color: rgba(244,241,234,0.75);
  text-decoration: underline;
  text-decoration-color: rgba(244,241,234,0.35);
  text-underline-offset: 3px;
}
.login-links a:hover { color: #e0b878; text-decoration-color: #e0b878; }
.login-notice {
  margin-top: 10px;
  font-size: 0.85rem;
  color: rgba(244,241,234,0.75);
  line-height: 1.5;
  min-height: 1.2em;
}
.login-notice.is-success {
  color: #a9d0a1;
}
.login-account {
  font-size: 0.85rem;
  color: rgba(244,241,234,0.7);
  margin: -8px 0 var(--space-2);
  text-align: center;
}
.login-account strong {
  color: rgba(244,241,234,0.95);
  font-weight: 500;
}
.login-hint {
  font-size: 0.75rem;
  color: rgba(244,241,234,0.55);
  margin-top: var(--space-2);
  line-height: 1.5;
}
.login-strength {
  margin-top: -4px;
  font-size: 0.75rem;
  color: rgba(244,241,234,0.55);
  min-height: 1em;
}
.login-strength[data-level="0"], .login-strength[data-level="1"] { color: #ffb4a2; }
.login-strength[data-level="2"] { color: #ffd28c; }
.login-strength[data-level="3"] { color: #d5c481; }
.login-strength[data-level="4"], .login-strength[data-level="5"] { color: #a9d0a1; }

/* Account-access card in captain crew detail */
.acct-card {
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.acct-blurb {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(30,42,56,0.7);
  line-height: 1.5;
}
.acct-actions {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.acct-actions .btn-inline.warn {
  color: #b04a3a; border-color: rgba(176,74,58,0.4);
}
.acct-actions .btn-inline.warn:hover {
  background: rgba(176,74,58,0.08);
}
.acct-warn {
  font-size: 0.8rem; color: #8a6e2d;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(255,199,90,0.14); border: 1px solid rgba(255,199,90,0.35);
}

/* Reset-link modal (captain admin) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: rgba(15,28,42,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-card {
  width: min(520px, 100%);
  background: var(--surface, #fbfaf7);
  color: var(--ink, #1e2a38);
  border-radius: 14px;
  padding: 24px 24px 20px;
  box-shadow: 0 20px 60px rgba(15,28,42,0.35), 0 4px 12px rgba(15,28,42,0.2);
  border: 1px solid rgba(30,42,56,0.08);
  animation: modal-in 180ms cubic-bezier(.2,.9,.3,1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.modal-title {
  font-family: var(--font-display, 'Recoleta', serif);
  font-size: 1.35rem; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  color: var(--ink, #1e2a38);
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: var(--space-3);
}
.modal-actions .btn {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.modal-actions .btn.primary {
  background: var(--accent, #b8873d); color: #fff; border-color: var(--accent, #b8873d);
}
.modal-actions .btn.primary:hover { filter: brightness(1.05); }
.modal-actions .btn.ghost {
  background: transparent; color: rgba(30,42,56,0.75);
  border-color: rgba(30,42,56,0.18);
}
.modal-actions .btn.ghost:hover { background: rgba(30,42,56,0.05); }
.reset-link-box .btn.primary {
  padding: 10px 14px; font-size: 0.8rem;
  border-radius: 6px; border: 1px solid var(--accent, #b8873d);
  background: var(--accent, #b8873d); color: #fff;
  font-weight: 600; cursor: pointer; letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Yard overview edit/add forms (promptForm modal) — same look as
   .modal-overlay/.modal-card, just scrollable since some forms (e.g.
   edit period) have 8 stacked fields that can exceed phone viewport height. */
.pf-overlay .modal-card {
  max-height: 85vh;
  overflow-y: auto;
}
.pf-overlay .cap-invite-field input { width: 100%; box-sizing: border-box; }
.reset-link-box .btn.primary:hover { filter: brightness(1.05); }
/* Vessel forms (Edit / Hand to…): the brand CTA style has no side padding, so give the gold button room */
.vessel-form .cap-invite-field textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(30,42,56,0.18); background: #fff; resize: vertical; }
.vessel-form .modal-actions .btn.primary { padding: 10px 20px; white-space: nowrap; }
#reset-link-modal .modal-lead {
  font-size: 0.85rem; color: rgba(30,42,56,0.75);
  margin: 0 0 var(--space-2); line-height: 1.5;
}
.reset-link-box {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.reset-link-box input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid rgba(30,42,56,0.2);
  border-radius: 6px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.75rem;
  background: rgba(30,42,56,0.03);
  color: rgba(30,42,56,0.85);
}
.reset-link-meta {
  font-size: 0.72rem; color: rgba(30,42,56,0.55);
  margin: 0 0 var(--space-3); line-height: 1.5;
}

/* Hide the underlying app while login is shown */
body.login-mode .stage,
body.login-mode .phone { visibility: hidden; }

/* ============================================================
   Invite-crew modal (captain admin)
   ------------------------------------------------------------ */
.modal-overlay:not(.active) { display: none; }

.cap-invite-form { display: flex; flex-direction: column; gap: 12px; }
.cap-invite-field { display: flex; flex-direction: column; gap: 4px; }
.cap-invite-field > span { font-size: 0.78rem; font-weight: 600; color: rgba(30,42,56,0.72); }
.cap-invite-field input,
.cap-invite-field select {
  padding: 10px 12px;
  border: 1px solid rgba(30,42,56,0.18);
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #1e2a38);
  font-size: 0.92rem;
  font-family: inherit;
}
.cap-invite-field input:focus,
.cap-invite-field select:focus {
  outline: 2px solid var(--color-primary, #b8894b);
  outline-offset: 1px; border-color: transparent;
}
.cap-invite-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .cap-invite-row { grid-template-columns: 1fr; } }

.cap-invite-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: rgba(30,42,56,0.85);
  padding: 6px 0;
}
.cap-invite-check input { width: 16px; height: 16px; }

.cap-invite-error {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(196, 60, 60, 0.08);
  border: 1px solid rgba(196, 60, 60, 0.28);
  color: #7d1d1d; font-size: 0.85rem; line-height: 1.4;
}

.cap-invite-success-title {
  font-family: var(--font-display, 'Recoleta', serif);
  font-size: 20px; font-weight: 600; margin-bottom: 4px;
  color: var(--ink, #1e2a38);
}
.cap-invite-linkbox {
  border: 1px solid rgba(184,137,75,0.35);
  background: rgba(184,137,75,0.06);
  border-radius: 10px; padding: 10px 12px;
  margin-top: 4px;
}
.cap-invite-linkbox-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(30,42,56,0.55);
  margin-bottom: 4px;
}
.cap-invite-linkbox-url {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.78rem;
  color: var(--color-primary, #b8894b);
  word-break: break-all;
  user-select: all;
}

/* Skip + reminder ---------------------------------------------------------- */
.ob-docstatus.s-skipped {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.btn.btn-link {
  background: transparent; border: none;
  color: var(--brand-ink, #0f172a);
  text-decoration: underline; cursor: pointer;
  padding: 4px 8px; font-size: 0.85rem;
}
.btn.btn-link:hover { color: var(--brand-accent, #0e7490); }
.ob-reminder-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 4px solid #f97316;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0 20px;
}
.ob-reminder-title {
  font-weight: 600; margin-bottom: 8px; color: #7c2d12;
}
.ob-reminder-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ob-reminder-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 0;
}
.ob-reminder-label { color: #431407; }

/* -------- Crew documents panel (Certificates & documents section) -------- */
.docs-tabs { display: flex; flex-direction: column; gap: var(--space-5); }
.docs-section-title {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.docs-count {
  display: inline-block; min-width: 22px; padding: 2px 8px;
  background: var(--color-surface-offset); color: var(--color-text-muted);
  border-radius: 999px; font-size: 11px; font-weight: 600; text-align: center;
  text-transform: none; letter-spacing: 0;
}
.doc-file-list { display: flex; flex-direction: column; gap: 6px; }
.doc-file-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-surface-offset);
  border-radius: 8px;
  border: 1px solid var(--color-border-soft, rgba(0,0,0,0.06));
}
.doc-file-row:hover { border-color: var(--color-border, rgba(0,0,0,0.12)); }
.doc-file-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); word-break: break-word; }
.doc-file-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.doc-file-right { display: flex; align-items: center; gap: var(--space-3); }
.doc-tag {
  display: inline-block; padding: 3px 9px; border-radius: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.doc-tag-id    { background: rgba(59,130,246,0.14); color: #2563eb; }
.doc-tag-med   { background: rgba(220,38,38,0.12);  color: #b91c1c; }
.doc-tag-stcw  { background: rgba(234,88,12,0.12);  color: #b8571a; }
.doc-tag-cert  { background: rgba(46,125,50,0.14);  color: #2e7d32; }
.doc-tag-cv    { background: rgba(147,51,234,0.12); color: #7c3aed; }
.doc-tag-other { background: var(--color-surface); color: var(--color-text-muted); }
.doc-open-btn {
  font-size: 12px; font-weight: 600; color: var(--color-accent);
  text-decoration: none; padding: 4px 8px; border-radius: 4px;
  white-space: nowrap;
}
.doc-open-btn:hover { background: var(--color-primary-soft); }

.doc-file-name-btn {
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; text-align: left; cursor: pointer;
  color: var(--color-text);
}
.doc-file-name-btn:hover { color: var(--color-accent); text-decoration: underline; }
.doc-file-name-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }

.doc-download-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  color: var(--color-text-muted); text-decoration: none;
  border: 1px solid var(--color-border-soft, rgba(0,0,0,0.06));
  background: var(--color-surface);
  transition: all 150ms ease;
}
.doc-download-btn:hover { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-primary-soft); }
.doc-download-btn svg { width: 16px; height: 16px; }

/* Doc preview modal — takes over most of the viewport */
.sheet.sheet-doc-preview {
  max-width: min(1200px, 96vw);
  width: min(1200px, 96vw);
  height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
}
.sheet.sheet-doc-preview .bxp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e6e6ea);
  margin-bottom: 12px;
}
.sheet.sheet-doc-preview .bxp-viewer {
  background: #202020;
}
.sheet.sheet-doc-preview .bxp-actions .btn-secondary,
.sheet.sheet-doc-preview .bxp-actions .notice-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .sheet.sheet-doc-preview {
    max-width: 100vw;
    width: 100%;
    height: 92vh;
    border-radius: 12px 12px 0 0;
  }
  .sheet.sheet-doc-preview .bxp-head {
    flex-direction: column;
    align-items: stretch;
  }
  .sheet.sheet-doc-preview .bxp-actions {
    justify-content: flex-start;
  }
}

.cert-group + .cert-group { margin-top: var(--space-3); }
.cert-group-title {
  font-size: 11px; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  margin-bottom: 4px;
}
.cert-group-list { display: flex; flex-direction: column; gap: 2px; }
.cert-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px;
  border-radius: 4px;
}
.cert-row:hover { background: var(--color-surface-offset); }
.cert-name { font-size: var(--text-sm); color: var(--color-text); }
.cert-row-right { display: inline-flex; align-items: center; gap: var(--space-2); }
.cert-name-btn {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; text-align: left; color: var(--color-accent);
  cursor: pointer; text-decoration: none;
}
.cert-name-btn:hover { text-decoration: underline; }
.cert-row-has-file .cert-download-btn {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 2px 4px; border-radius: 4px;
  display: inline-flex; align-items: center;
}
.cert-row-has-file .cert-download-btn:hover { background: var(--color-primary-soft); color: var(--color-accent); }
.cert-row-has-file .cert-download-btn svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .doc-file-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .doc-file-right { justify-content: space-between; }
}

/* Structured identity-doc preview (passport, seaman’s book) */
.sheet.sheet-doc-preview .bxp-viewer.bxp-viewer-struct,
.bxp-viewer.bxp-viewer-struct {
  background: linear-gradient(135deg, #1a2140 0%, #253055 50%, #1a2140 100%);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  overflow: auto;
}
.idcard {
  background: #f6f2e6;
  color: #1a1a1a;
  width: 100%;
  max-width: 780px;
  border-radius: 10px;
  padding: 20px 24px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.05);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: relative;
  background-image: repeating-linear-gradient(45deg, rgba(180,150,90,0.06) 0 2px, transparent 2px 8px);
}
.idcard-ribbon {
  font-weight: 700; letter-spacing: 0.14em; font-size: 12px;
  color: #7a5d1e; text-transform: uppercase;
  border-bottom: 1.5px solid #b3934a;
  padding-bottom: 8px; margin-bottom: 14px;
}
.idcard-body { display: grid; grid-template-columns: 110px 1fr; gap: 18px; }
.idcard-photo {
  width: 110px; height: 140px;
  background: linear-gradient(180deg, #cbb079 0%, #a1873f 100%);
  border: 1.5px solid #7a5d1e;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: #f6f2e6; font-weight: 700; font-size: 44px; letter-spacing: 2px;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.15);
}
.idcard-photo-inner { text-shadow: 0 2px 4px rgba(0,0,0,0.25); }
.idcard-fields {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 20px; align-content: start;
}
.idcard-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.idcard-field-wide { grid-column: 1 / -1; }
.idcard-lbl {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #7a5d1e; font-weight: 600;
}
.idcard-val {
  font-size: 14px; font-weight: 600; color: #1a1a1a;
  word-break: break-word;
}
.idcard-val-mono { font-family: 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.05em; }
.idcard-mrz {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: #ece5cf;
  border-top: 1.5px solid #b3934a;
  border-bottom: 1.5px solid #b3934a;
  font-family: 'SF Mono', 'OCR B', Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6; letter-spacing: 0.06em;
  color: #1a1a1a; white-space: pre; overflow-x: auto;
}
.idcard-foot {
  margin-top: 10px; font-size: 10.5px; color: #7a5d1e; letter-spacing: 0.03em;
}
.idcard-warn {
  margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  font-size: 13px; line-height: 1.4; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.idcard-warn-err { background: #fdecea; color: #a72b1c; border: 1px solid #f2b8b0; }
.idcard-warn-soft { background: #fff6e0; color: #8a5a00; border: 1px solid #f0d488; }
.idcard-prev {
  margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  background: #f6f2e5; border: 1px solid #d8c898;
  font-size: 12.5px; color: #5a4a1e;
}
.idcard-prev strong { color: #3b2f0f; display: block; margin-bottom: 4px; }
.idcard-prev ul { margin: 0; padding-left: 18px; }
.idcard-prev li { margin: 3px 0; }
@media (max-width: 640px) {
  .idcard-body { grid-template-columns: 1fr; }
  .idcard-photo { width: 88px; height: 112px; font-size: 34px; margin: 0 auto; }
  .idcard-fields { grid-template-columns: 1fr; }
}

/* Onboard-crew export toolbar (FAL 6, Bank/Addresses) */
.crew-exports {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 10px 14px;
  margin: 0 0 12px;
  background: var(--surface-alt, #f4f5f7);
  border: 1px solid var(--border, #e4e6ea);
  border-radius: 10px;
}
.crew-exports-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
  margin-right: 4px;
}
.crew-exports .btn-inline {
  font-weight: 500;
}
.crew-exports .btn-inline[disabled] {
  opacity: 0.6;
  cursor: wait;
}
@media (max-width: 640px) {
  .crew-exports { flex-direction: column; align-items: stretch; }
  .crew-exports-label { margin-bottom: 4px; }
  .crew-exports .btn-inline { width: 100%; justify-content: center; }
}

/* Payroll beneficiary card */
.beneficiary-card { font-variant-numeric: tabular-nums; }
.beneficiary-card .id-row strong { font-family: ui-monospace, "SF Mono", "Menlo", monospace; font-size: 13px; word-break: break-all; }
.beneficiary-card .id-row:first-child strong { font-family: inherit; font-size: inherit; }
.beneficiary-alt {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e4e6ea);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.beneficiary-alt-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
  margin-right: 4px;
}
.beneficiary-alt-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-alt, #f4f5f7);
  border: 1px solid var(--border, #e4e6ea);
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.beneficiary-source {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chip-ok { background: rgba(20, 130, 80, 0.12); color: #148252; }
.chip-warn { background: rgba(200, 120, 20, 0.14); color: #a15c00; }

/* Beneficiary empty state */
.beneficiary-card.beneficiary-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.beneficiary-empty-text {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}

/* Two-column form grid inside modals */
.notice-composer .modal-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.notice-composer .modal-grid-2 > label { margin: 0; }

/* Inline checkbox row */
.notice-composer .checkbox-row {
  display: flex; align-items: center; gap: 8px; font-weight: 500;
}
.notice-composer .checkbox-row input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0;
}

/* ============================================================
 * Bank & addresses export modal (interactive crew/column picker)
 * ============================================================ */
.sheet.sheet-bank-export {
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sheet.sheet-bank-export > h3 { flex-shrink: 0; }
.sheet.sheet-bank-export > .muted { flex-shrink: 0; }
.sheet.sheet-bank-export > .modal-actions { flex-shrink: 0; }
.sheet.sheet-bank-export .bx-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.bx-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e6ea);
  border-radius: 10px;
  overflow: hidden;
}
.bx-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 6px;
  flex-shrink: 0;
}
.bx-panel-head h4 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}
.bx-panel-head h4 span { color: var(--text, #0b1f2a); font-weight: 700; }
.bx-quick {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.bx-link {
  background: transparent;
  border: 1px solid var(--border, #e6e6ea);
  color: var(--text, #0b1f2a);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.bx-link:hover {
  background: var(--accent-soft, rgba(196, 149, 79, 0.14));
  border-color: var(--accent, #c4954f);
  color: var(--accent-dark, #8f6a2c);
}
.bx-search {
  padding: 0 10px 8px;
  flex-shrink: 0;
}
.bx-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--border, #e6e6ea);
  border-radius: 8px;
  font-size: 13px;
}
.bx-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 6px 10px;
}
.bx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.bx-row:hover { background: var(--surface-hover, rgba(11, 31, 42, 0.04)); }
.bx-row input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; flex-shrink: 0;
}
.bx-row-main {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
}
.bx-row-name {
  font-weight: 500;
  color: var(--text, #0b1f2a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bx-row-meta {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bx-row-status {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.bx-onboard {
  background: rgba(20, 130, 80, 0.12);
  color: #148252;
}
.bx-offboard {
  background: rgba(120, 120, 130, 0.14);
  color: #6b7280;
}
.bx-benef-ok, .bx-benef-missing {
  width: 14px;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.bx-benef-ok { color: #148252; }
.bx-benef-missing { color: #d1d5db; font-size: 12px; }
.bx-col-row .bx-row-name { font-weight: 500; }

@media (max-width: 720px) {
  .sheet.sheet-bank-export .bx-grid {
    grid-template-columns: 1fr;
  }
  .bx-panel { max-height: 40vh; }
}

/* ============================================================
 * Bank & addresses \u2014 inline PDF preview modal
 * ============================================================ */
.sheet.sheet-bank-export-preview {
  max-width: min(1200px, 96vw);
  width: min(1200px, 96vw);
  height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
}
.sheet.sheet-bank-export-preview .bxp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e6e6ea);
  margin-bottom: 12px;
}
.bxp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bxp-viewer {
  flex: 1 1 auto;
  min-height: 0;
  background: #f4f4f7;
  border: 1px solid var(--border, #e6e6ea);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bxp-loading {
  color: var(--text-muted, #6b7280);
  font-size: 13px;
  padding: 30px;
}
.bxp-error {
  color: #b91c1c;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  max-width: 600px;
}

/* FAL 5 export picker modal */
.sheet.sheet-fal5-export {
  max-width: 680px;
  width: min(680px, 96vw);
}
.fx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.fx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fx-field.fx-wide { grid-column: 1 / -1; }
.fx-field.fx-inline { grid-column: 1 / -1; }
.fx-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fx-field input[type="text"],
.fx-field input[type="date"] {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border, #e6e6ea);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface, #fff);
  color: var(--text, #0b1f2a);
}
.fx-field input[type="text"]:focus,
.fx-field input[type="date"]:focus {
  outline: none;
  border-color: var(--accent, #0b1f2a);
  box-shadow: 0 0 0 3px rgba(11, 31, 42, 0.08);
}
.fx-radio-row {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 14px;
}
.fx-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* FAL 5 preview modal shares .bxp-* look with bank export preview */
.sheet.sheet-fal5-export-preview {
  max-width: min(1200px, 96vw);
  width: min(1200px, 96vw);
  height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
}
.sheet.sheet-fal5-export-preview .bxp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e6e6ea);
  margin-bottom: 12px;
}

/* Crew list (by date) export picker modal — shares .bx-* / .fx-* look */
.sheet.sheet-crewlist-export {
  max-width: min(720px, 96vw);
  width: min(720px, 96vw);
  height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sheet.sheet-crewlist-export .bx-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sheet.sheet-crewlist-export .bx-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Crew list (by date) preview modal — shares .bxp-* look with bank/FAL 5 export preview */
.sheet.sheet-crewlist-export-preview {
  max-width: min(1200px, 96vw);
  width: min(1200px, 96vw);
  height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
}
.sheet.sheet-crewlist-export-preview .bxp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e6e6ea);
  margin-bottom: 12px;
}
.sheet.sheet-crewlist-export-preview .bxp-actions .btn-secondary,
.sheet.sheet-crewlist-export-preview .bxp-actions .notice-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .sheet.sheet-crewlist-export,
  .sheet.sheet-crewlist-export-preview {
    max-width: 100vw;
    width: 100%;
    height: 92vh;
    border-radius: 12px 12px 0 0;
  }
  .sheet.sheet-crewlist-export-preview .bxp-head {
    flex-direction: column;
    align-items: stretch;
  }
  .sheet.sheet-crewlist-export-preview .bxp-actions {
    justify-content: flex-start;
  }
}

/* DOCX preview via mammoth.js */
.docx-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #f4f4f7;
  padding: 24px;
  box-sizing: border-box;
}
.docx-page {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  padding: 48px 56px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
  color: #0b1f2a;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
}
.docx-page h1, .docx-page h2, .docx-page h3, .docx-page h4 {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 1.2em 0 0.5em;
}
.docx-page p { margin: 0.5em 0; }
.docx-page table { border-collapse: collapse; margin: 0.8em 0; width: 100%; }
.docx-page th, .docx-page td { border: 1px solid #cbd1d8; padding: 6px 10px; text-align: left; }
.docx-page img { max-width: 100%; height: auto; }
.docx-page ul, .docx-page ol { padding-left: 1.4em; }

/* XLSX preview via SheetJS */
.xlsx-scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f4f4f7;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.xlsx-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  background: #e9ebf0;
  border-bottom: 1px solid #cbd1d8;
  overflow-x: auto;
  flex-shrink: 0;
}
.xlsx-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  color: #4a5560;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  white-space: nowrap;
}
.xlsx-tab:hover { background: rgba(11,31,42,0.04); color: #0b1f2a; }
.xlsx-tab.active {
  background: #fff;
  border-color: #cbd1d8;
  color: #0b1f2a;
  font-weight: 600;
}
/* Toolbar: search + row counter */
.xlsx-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f4f4f7;
  border-bottom: 1px solid #cbd1d8;
  flex-shrink: 0;
}
.xlsx-filter {
  flex: 1 1 auto;
  max-width: 320px;
  padding: 6px 10px;
  border: 1px solid #cbd1d8;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  color: #0b1f2a;
  outline: none;
}
.xlsx-filter:focus { border-color: #b8873d; box-shadow: 0 0 0 2px rgba(184,135,61,0.18); }
.xlsx-count { font-size: 11px; color: #4a5560; white-space: nowrap; }

.xlsx-pages { flex: 1 1 auto; overflow: auto; background: #fff; }
.xlsx-page { display: none; padding: 0; }
.xlsx-page.active { display: block; }
.xlsx-empty { padding: 16px; font-size: 12px; }

.xlsx-table {
  border-collapse: collapse;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #0b1f2a;
  background: #fff;
  table-layout: fixed;   /* honour <colgroup> widths */
}
.xlsx-table th, .xlsx-table td {
  border: 1px solid #dde1e6;
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  box-sizing: border-box;
}
.xlsx-table col { width: 160px; }   /* default column width */
.xlsx-table thead th {
  background: #f4f4f7;
  font-weight: 600;
  text-align: left;
  padding-right: 14px;         /* leave room for the resize handle */
  cursor: default;
  user-select: none;
  /* sticky needs a positioning context AND we need the handle absolutely
     positioned inside — `sticky` counts as positioned so this works. */
  position: sticky;
  top: 0;
  z-index: 1;
}
.xlsx-col-handle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 8px;
  cursor: col-resize;
  background: transparent;
}
.xlsx-col-handle:hover,
.xlsx-col-handle:active { background: rgba(184,135,61,0.35); }

/* PDF.js viewer (used for FAL 5 and bank export previews) */
.pdfjs-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #f4f4f7;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}
.pdfjs-page {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
  display: block;
  max-width: 100%;
}

/* Payroll row — expanded with beneficiary chip */
.cap-payroll-row {
  display: block !important;
  padding: 0 !important;
}
.cap-payroll-row + .cap-payroll-row { border-top: 1px solid var(--color-divider); }
.cap-payroll-row .cap-payroll-top {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  padding: 12px var(--space-4) 8px;
  align-items: center;
  cursor: pointer;
}
.cap-payroll-row .cap-payroll-top:hover {
  background: var(--surface-hover, rgba(11, 31, 42, 0.03));
}
.payroll-benef {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - var(--space-4) - var(--space-4));
  margin: 0 var(--space-4) 12px;
  padding: 8px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e6ea);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}
.payroll-benef:hover {
  background: var(--surface-hover, rgba(11, 31, 42, 0.03));
  border-color: var(--border-strong, #d5d5db);
}
.payroll-benef-ok { border-left: 3px solid #10b981; }
.payroll-benef-missing {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.04);
}
.payroll-benef-icon {
  color: var(--text-muted, #6b7280);
  display: inline-flex;
  flex-shrink: 0;
}
.payroll-benef-icon svg { width: 14px; height: 14px; }
.payroll-benef-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.payroll-benef-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #0b1f2a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payroll-benef-meta {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payroll-benef .chip { flex-shrink: 0; }
.payroll-benef-warning {
  margin: 10px 0 16px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left-width: 3px;
  border-radius: 8px;
  font-size: 13px;
  color: #92400e;
}
.kpi-sub {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  margin-left: 2px;
}

/* ============================================================
   Crew profile tabs (v1.8.0)
   ============================================================ */
.crew-profile-tabs {
  margin-top: var(--space-4);
}
.crew-profile-tab-bar {
  display: flex;
  gap: 4px;
  background: #f4f5f7;
  padding: 4px;
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: var(--space-4);
  position: sticky;
  top: 56px;
  z-index: 5;
}
.crew-profile-tab-bar::-webkit-scrollbar { display: none; }
.crew-profile-tab-btn {
  flex: 1 1 auto;
  min-width: max-content;
  padding: 10px 14px;
  font: inherit;
  font-size: var(--text-sm, 14px);
  font-weight: 500;
  color: #4b5563;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms, color 120ms, box-shadow 120ms;
  white-space: nowrap;
}
.crew-profile-tab-btn:hover:not(.is-active) {
  color: #111827;
  background: rgba(0,0,0,0.04);
}
.crew-profile-tab-btn.is-active {
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
.crew-profile-tab-panel {
  display: none;
  animation: crewTabFade 160ms ease-out;
}
.crew-profile-tab-panel.is-active {
  display: block;
}
@keyframes crewTabFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Note: intentionally not overriding tab colors for dark scheme —
   keep the light card look everywhere so contrast never breaks. */

.id-row.missing-hint {
  color: var(--text-muted, #6b7280);
  font-size: var(--text-sm, 14px);
}
.btn-inline {
  border: 1px dashed var(--border, #d1d5db);
  background: transparent;
  color: var(--text, #111827);
  padding: 6px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: var(--text-sm, 13px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-inline:hover {
  background: rgba(0,0,0,0.03);
  border-style: solid;
}

/* ─── PWA install & update banners ─────────────────────────────────── */
.pwa-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 9999;
  background: #0b1f2a;
  color: #f4f1ea;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  padding: 14px 16px;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 260ms ease-out, opacity 260ms ease-out;
  max-width: 520px;
  margin: 0 auto;
}
.pwa-banner.is-visible { transform: translateY(0); opacity: 1; }
.pwa-banner-inner { display: flex; gap: 12px; align-items: center; }
.pwa-banner-icon {
  width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto;
  background: #f4f1ea; padding: 4px; object-fit: contain;
}
.pwa-banner-body { flex: 1 1 auto; min-width: 0; }
.pwa-banner-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.pwa-banner-text  { font-size: 13px; opacity: 0.85; line-height: 1.4; }
.pwa-banner-actions {
  display: flex; gap: 8px; flex: 0 0 auto;
  margin-left: auto;
}
.pwa-banner .btn-ghost {
  background: transparent; color: #f4f1ea; border: 1px solid rgba(244,241,234,0.28);
}
.pwa-banner .btn-primary { background: #b8873d; color: #0b1f2a; border: none; }
.pwa-banner .btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; cursor: pointer; }
.pwa-share-icon {
  display: inline-flex; vertical-align: middle;
  padding: 2px 4px; border-radius: 4px;
  background: rgba(244,241,234,0.14);
}
@media (max-width: 480px) {
  .pwa-banner-inner { flex-wrap: wrap; }
  .pwa-banner-actions { width: 100%; justify-content: flex-end; margin-top: 6px; }
}

/* ─── Atlantic-yacht.com aligned styling (v1.9.10) ─────────────────── */
/* Editorial script accent — for taglines, page intros, or hero flourishes */

/* Atlantic-style headline: uppercase Barlow Condensed with wide tracking */
.atl-headline,
h1.atl,
h2.atl {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

/* Atlantic-style nav link: uppercase, small letter-spaced */

/* Atlantic-style CTA — no button chrome, just text + arrow */

/* Editorial section header — Atlantic yacht style */

/* ============================================================
   Crew subtabs (Roster / Timeline / Documents)
   ============================================================ */
.crew-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border, #dde1e6);
  margin: 0 0 12px 0;
}
.crew-subtabs button {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #4a5560);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.crew-subtabs button:hover { color: var(--color-text, #0b1f2a); }
.crew-subtabs button.active {
  color: #b8873d;
  border-bottom-color: #b8873d;
}

/* ============================================================
   Crew Timeline (MARAD-style Gantt)
   ============================================================ */
.gantt-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 10px 4px;
  flex-wrap: wrap;
}
.gantt-range, .gantt-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gantt-nav, .gantt-zoom button {
  padding: 6px 12px;
  border: 1px solid #cbd1d8;
  background: #fff;
  color: #0b1f2a;
  font-size: 13px;
  min-width: 34px;
  min-height: 34px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s;
  font-weight: 600;
}
.gantt-nav:hover, .gantt-zoom button:hover { background: #f4f4f7; border-color: #0b1f2a; }
.gantt-nav-now {
  background: #b8873d;
  color: #fff;
  border-color: #b8873d;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 16px;
}
.gantt-nav-now:hover { background: #a07530; border-color: #a07530; }
.gantt-zoom button.active {
  background: #0b1f2a;
  color: #fff;
  border-color: #0b1f2a;
}
/* Edit toggle in the timeline top toolbar—brass accent so it reads as an action */
.gantt-zoom button[data-gantt-action="toggle-edit"] {
  background: #b8873d;
  color: #fff;
  border-color: #b8873d;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gantt-zoom button[data-gantt-action="toggle-edit"]:hover {
  background: #a07530;
  border-color: #a07530;
}
.gantt-zoom button[data-gantt-action="toggle-edit"].active {
  background: #9a2b2b;
  border-color: #9a2b2b;
  color: #fff;
}

.gantt {
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* Header row */

/* Programme swimlane — dedicated "what is the ship doing" band above the crew rows.
   Bolder styling per captain request: dark navy background, high-contrast label, taller strip. */

/* Body */

/* Collapsible crew group headers (On board / Off board / Other / No future contract) */

.gantt-row {
  display: grid;
  grid-template-columns: var(--gantt-name-col) var(--gantt-rank-col) 1fr;
  border-bottom: 1px solid #eef0f2;
  cursor: pointer;
  transition: background 0.1s;
}
.gantt-row:hover { background: #fafbfc; }
.gantt-track {
  position: relative;
  display: block;
}

/* Today red line */

/* Rotation bars */
              /* brass = live rotation */
 /* faded brass = past */
 /* light brass = future */

/* Timeline legend */

/* Phase picker modal */
.phase-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,31,42,0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9999;
  animation: phasePickerFade 0.15s ease-out;
}
@keyframes phasePickerFade { from { opacity: 0; } to { opacity: 1; } }
.phase-picker {
  background: #fff;
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 16px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.2);
  animation: phasePickerRise 0.2s ease-out;
}
@keyframes phasePickerRise { from { transform: translateY(20px); } to { transform: translateY(0); } }
.phase-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef0f2;
  margin-bottom: 8px;
}
.phase-picker-head strong {
  font-family: "EB Garamond", serif;
  font-size: 16px;
  color: #0b1f2a;
}
.phase-picker-sub {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a5560;
  margin-top: 2px;
}
.phase-picker-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #4a5560;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.phase-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
}
.phase-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  color: #0b1f2a;
  transition: background 0.1s;
}
.phase-picker-item:hover { background: #f4f4f7; }
.phase-picker-item.is-active { background: #f0e6d2; font-weight: 600; }
.phase-picker-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
}
.phase-picker-tick {
  margin-left: auto;
  color: #b8873d;
  font-weight: 600;
}

/* Background bands for charter/maintenance/delivery windows */

/* Charter window manager */
.charter-manager {
  max-width: 640px;
}
.charter-manager-list {
  max-height: 40vh;
  overflow-y: auto;
  margin: 8px 0 12px 0;
  border-top: 1px solid #eef0f2;
  border-bottom: 1px solid #eef0f2;
}
.charter-manager-row {
  display: grid;
  grid-template-columns: 20px 90px 190px 1fr 28px;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 13px;
  border-bottom: 1px solid #f4f4f7;
}
.charter-manager-row:last-child { border-bottom: none; }
.charter-manager-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
}
.charter-manager-type {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a5560;
}
.charter-manager-dates {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  color: #0b1f2a;
}
.charter-manager-label {
  color: #4a5560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.charter-manager-del {
  background: transparent;
  border: none;
  color: #c94d3d;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.charter-manager-del:hover { color: #a5382a; }
.charter-manager-form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.charter-manager-form-row select,
.charter-manager-form-row input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
}
.charter-manager-form-row select { flex: 0 0 130px; }
.charter-manager-form-row .btn-primary {
  padding: 6px 14px;
  background: #b8873d;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.charter-manager-form-row .btn-primary:hover { background: #9c7130; }

/* Phase picker auto-note */
.phase-picker-auto-note {
  padding: 8px 12px;
  background: #f4f4f7;
  border-radius: 4px;
  font-size: 12px;
  color: #4a5560;
  margin-bottom: 8px;
}
.phase-picker-divider {
  height: 1px;
  background: #eef0f2;
  margin: 6px 0;
}

/* ============================================================
   Drawer (hamburger menu) — left slide-in with categories & sub-items
   ============================================================ */
.drawer-scrim {
  position: absolute; inset: 0; background: rgba(0,0,0,0.42);
  z-index: 70; animation: fade 180ms ease;
}
.drawer {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 82%; max-width: 320px;
  background: var(--color-bg);
  z-index: 80;
  display: flex; flex-direction: column;
  box-shadow: 6px 0 24px rgba(0,0,0,0.18);
  animation: drawerSlide 260ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes drawerSlide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.drawer-title {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 600; letter-spacing: 0.02em;
}
.drawer-list { overflow-y: auto; padding: var(--space-3) 0 var(--space-6); flex: 1; }
.drawer-section {
  padding: var(--space-3) var(--space-4) 4px;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; color: var(--color-text-muted);
}
.drawer-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-4);
  color: var(--color-text);
  font-size: var(--text-sm); font-weight: 500;
  cursor: pointer;
  background: transparent; border: none; width: 100%; text-align: left;
  transition: background var(--transition);
}
.drawer-item:hover { background: var(--color-surface-offset); }
.drawer-item.is-active {
  background: var(--color-surface);
  color: var(--color-accent);
  font-weight: 600;
}
.drawer-item.is-sub {
  padding-left: calc(var(--space-4) + 26px);
  font-size: 13px; color: var(--color-text-muted);
}
.drawer-item .drawer-icon {
  width: 20px; height: 20px; flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
}
.drawer-item.is-active .drawer-icon { color: var(--color-accent); }
.drawer-item .drawer-badge {
  margin-left: auto;
  padding: 2px 8px; border-radius: 4px;
  background: var(--color-surface-offset);
  font-size: 11px; font-weight: 600; color: var(--color-text-muted);
}
/* Unread counter on a nav item (window.AtlBadges) — also used by the
   desktop sidebar in desk-nav.js, hence the standalone selector. */
.drawer-badge--alert {
  margin-left: auto;
  padding: 2px 8px; border-radius: 4px;
  background: var(--color-accent);
  font-size: 11px; font-weight: 600; color: #fff;
  line-height: 1.4;
}
.appbar .iconbtn.burger { margin-right: 2px; }

/* --- Office · Invoices: collapsible scan notes --- */
.inv-notes > summary::-webkit-details-marker { display: none; }
.inv-notes > summary::after {
  content: '\25BE';
  margin-left: auto;
  color: var(--color-text-muted, #7a7974);
  transition: transform .15s ease;
}
.inv-notes[open] > summary::after { transform: rotate(180deg); }

/* --- Crew bio card (v1.9.48) --- */
.crew-avatar-lg.crew-avatar-lg--photo { background-size: cover; background-position: center; }
.crew-bio-card { margin-top: var(--space-4); padding: var(--space-4); }
.crew-bio-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.crew-bio-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.crew-bio-source { font-size: var(--text-xs); color: var(--muted); opacity: 0.7; }
.crew-bio-text { margin: 0; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
.mb-crew-row-bio-dot { color: var(--accent); font-size: 0.6em; opacity: 0.7; margin-left: 4px; }

/* ============================================================
   Yard-period Gantt (Phase A / B / C)
   ============================================================ */
.yard-legend { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:10px; font-size:11px; color:var(--muted); }
.yard-legend-item { display:inline-flex; align-items:center; gap:6px; }
.yard-dept-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:middle; }

.yard-gantt-scroll { overflow-x:auto; border:1px solid var(--border); border-radius:8px; background:#0b1f2a; color:#e8dcc0; }
.yard-gantt-header { display:flex; position:sticky; top:0; background:#0b1f2a; border-bottom:1px solid #1a3040; z-index:2; }
.yard-gantt-corner { flex:0 0 240px; padding:8px 10px; font-size:11px; color:#b8873d; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; background:#0b1f2a; border-right:1px solid #1a3040; }
.yard-gantt-weeks { flex:1; display:flex; min-width:0; }
.yard-gantt-week { flex:1; min-width:60px; text-align:center; padding:6px 4px; border-left:1px solid #1a3040; }
.yard-gantt-wk { font-size:11px; color:#b8873d; font-weight:600; }
.yard-gantt-date { font-size:10px; color:#8a9aa5; margin-top:1px; }

.yard-gantt-progrow { display:flex; background:#0a1a24; border-bottom:1px solid #1a3040; }
.yard-gantt-progrow-lane { flex:1; position:relative; height:26px; min-width:0; }
.yard-prog-bar { position:absolute; top:4px; height:18px; border-radius:3px; display:flex; align-items:center; padding:0 6px; font-size:10px; font-weight:600; color:#e8dcc0; overflow:hidden; }

.yard-gantt-body { }
.yard-row { display:flex; border-bottom:1px solid #1a3040; min-height:28px; }
.yard-row:hover { background:rgba(184,135,61,0.06); }
.yard-row-label { flex:0 0 240px; padding:5px 10px; border-right:1px solid #1a3040; font-size:11px; overflow:hidden; }
.yard-row-title { font-weight:600; color:#e8dcc0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yard-row-sub { color:#8a9aa5; font-size:10px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yard-row-lane { flex:1; position:relative; min-width:0; }
.yard-bar { position:absolute; top:4px; height:20px; border-radius:3px; padding:0 6px; font-size:10px; font-weight:600; color:#0b1f2a; display:flex; align-items:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:default; }

/* dept chart */
.yard-deptbar { display:grid; grid-template-columns: 180px 1fr 130px; gap:8px; align-items:center; margin-bottom:6px; font-size:11px; }
.yard-deptbar-label { color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yard-deptbar-track { height:14px; background:var(--border); border-radius:3px; overflow:hidden; }
.yard-deptbar-fill { height:100%; border-radius:3px; transition:width 0.3s ease; }
.yard-deptbar-val { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.yard-deptbar-share { color:var(--muted); font-weight:400; font-size:10px; }

.yard-totals { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.yard-total { padding:8px 10px; background:var(--surface-alt, #f7f6f2); border-radius:6px; }
.yard-total-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.yard-total-val { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px; }

@media (max-width: 780px) {
  .yard-2col { grid-template-columns:1fr !important; }
  .yard-gantt-corner, .yard-row-label { flex-basis:160px; }
  .yard-deptbar { grid-template-columns: 120px 1fr 110px; }
}

/* ============================================================
   Finance — Budget Explorer wrapper
   ============================================================ */
.fx-kpi { padding: 4px 2px; }
.fx-kpi-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; }
.fx-kpi-val { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:4px; color:var(--text); }
/* Thin sidebar, icons only (Fosse, 2026-10-13). body.desk-nav-mini is set
   by desk-nav.js and remembered per computer. */
body.desktop-mode .phone-screen { transition: grid-template-columns .2s ease; }
.desk-nav-brand-txt { flex: 1 1 auto; min-width: 0; }
.desk-nav-mini-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.14); background: transparent; color: rgba(244,241,234,0.75); cursor: pointer; padding: 0; }
.desk-nav-mini-btn:hover { color: #b8873d; border-color: rgba(184,135,61,0.5); background: rgba(255,255,255,0.05); }
.desk-nav-sec-short, .desk-nav-av { display: none; }
.desk-nav-outbox .obx-h svg { display: none; }
.desk-nav-user button svg { display: none; }
body.desktop-mode.desk-nav-mini .phone-screen { grid-template-columns: 64px 1fr; }
body.desk-nav-mini .desk-nav { padding: 14px 8px 10px; }
body.desk-nav-mini .desk-nav-brand { flex-direction: column; gap: 10px; padding: 0 0 12px; }
body.desk-nav-mini .desk-nav-brand-txt { display: none; }
body.desk-nav-mini .desk-nav a { justify-content: center; padding: 10px 0; gap: 0; position: relative; }
body.desk-nav-mini .desk-nav a > span { display: none; }
body.desk-nav-mini .desk-nav a svg { width: 19px; height: 19px; }
body.desk-nav-mini .desk-nav a.active { box-shadow: inset 3px 0 0 #b8873d; }
body.desk-nav-mini .desk-nav a .drawer-badge { position: absolute; top: 3px; right: 4px; margin: 0; padding: 0 4px; font-size: 9px; line-height: 14px; min-width: 14px; text-align: center; border-radius: 7px; }
body.desk-nav-mini .desk-nav-section-label { justify-content: center; padding: 10px 0 4px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 4px; }
body.desk-nav-mini .desk-nav-group:first-child .desk-nav-section-label { border-top: 0; margin-top: 0; }
body.desk-nav-mini .desk-nav-section-label > span { display: none; }
body.desk-nav-mini .desk-nav-sec-short { display: inline; font-style: normal; font-size: 9px; letter-spacing: 0.08em; }
body.desk-nav-mini .desk-nav-section-label .nav-chev { margin-left: 2px; width: 9px; height: 9px; }
body.desk-nav-mini .desk-nav-outbox { margin: auto 0 8px; padding: 6px 0; align-items: center; }
body.desk-nav-mini .desk-nav-outbox > :not(.obx-h) { display: none; }
body.desk-nav-mini .desk-nav-outbox .obx-h { position: relative; margin: 0; padding: 4px; justify-content: center; }
body.desk-nav-mini .desk-nav-outbox .obx-h svg { display: block; width: 19px; height: 19px; }
body.desk-nav-mini .desk-nav-outbox .obx-h > span { display: none; }
body.desk-nav-mini .desk-nav-outbox .obx-n { position: absolute; top: -6px; right: -10px; padding: 0 5px; font-size: 9px; line-height: 14px; }
body.desk-nav-mini .desk-nav-user { padding: 10px 0 2px; align-items: center; gap: 8px; }
body.desk-nav-mini .desk-nav-user .dnu-t { display: none; }
body.desk-nav-mini .desk-nav-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(184,135,61,0.22); color: #f4f1ea; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
body.desk-nav-mini .desk-nav-user button { margin: 0; align-self: center; padding: 6px; display: inline-flex; }
body.desk-nav-mini .desk-nav-user button svg { display: block; }
body.desk-nav-mini .desk-nav-user button > span { display: none; }
html[data-layout="test"] body.desk-nav-mini .desk-nav-mini-btn { color: #3d3a32; border-color: #d9d4c6; }
html[data-layout="test"] .desk-nav-mini-btn { color: #3d3a32; border-color: #d9d4c6; }
html[data-layout="test"] body.desk-nav-mini .desk-nav-av { color: #061733; }

@media (max-width: 780px) {
  #fx-kpi-strip { grid-template-columns:repeat(2,1fr) !important; }
  #fx-frame { height:calc(100vh - 400px) !important; }
}

/* --- Collapsible sidebar sections (v1.9.72) --- */
.desk-nav-section-label {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.desk-nav-section-label:hover { color: #d4a24e; }
.desk-nav-section-label .nav-chev {
  transition: transform .18s ease;
  opacity: 0.75;
  flex-shrink: 0;
  margin-left: 8px;
}
.desk-nav-group.is-collapsed .desk-nav-section-label .nav-chev {
  transform: rotate(-90deg);
}
.desk-nav-group-body {
  display: block;
  overflow: hidden;
  max-height: 2000px;
  transition: max-height .22s ease;
}
.desk-nav-group.is-collapsed .desk-nav-group-body {
  max-height: 0;
  pointer-events: none;
}

/* Mobile drawer — matching collapsible sections */
.drawer-section {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--muted, #8a9aa5);
  padding: 12px 14px 4px;
}
.drawer-section:hover { color: var(--text, #28251d); }
.drawer-section .nav-chev {
  transition: transform .18s ease;
  opacity: 0.7;
  flex-shrink: 0;
  margin-left: 8px;
}
.drawer-group.is-collapsed .drawer-section .nav-chev {
  transform: rotate(-90deg);
}
.drawer-group-body {
  display: block;
  overflow: hidden;
  max-height: 2000px;
  transition: max-height .22s ease;
}
.drawer-group.is-collapsed .drawer-group-body {
  max-height: 0;
  pointer-events: none;
}

/* --- Route hero (compass with wind + heading) --- */
.route-hero {
  background: linear-gradient(180deg, #0b1f2a 0%, #0a1a24 100%);
  border: 1px solid #1a3040;
  color: #e8dcc0;
  padding: 20px 20px 16px;
}
.route-hero-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.route-hero-eyebrow {
  color: #b8873d; font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 4px;
}
.route-hero-title { font-size: 22px; font-weight: 700; color: #e8dcc0; line-height: 1.2; }
.route-hero-sub { color: #b8a882; font-size: 13px; margin-top: 4px; }
.route-hero-updated {
  color: #8a9aa5; font-size: 11px; letter-spacing: 0.05em; text-align: right;
  padding-top: 4px;
}
.route-compass-wrap {
  display: grid;
  grid-template-columns: minmax(200px, 240px) 1fr;
  gap: 20px; align-items: center;
  padding: 16px 4px 8px;
}
.route-compass { width: 100%; max-width: 240px; height: auto; display: block; }
.route-compass-legend { display: flex; flex-direction: column; gap: 14px; }
.rc-leg { display: flex; align-items: center; gap: 12px; }
.rc-leg-swatch {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.05);
}
.rc-leg-wind { background: #5fd0e6; }
.rc-leg-cog  { background: #d4a24e; }
.rc-leg-pos  { background: #8a9aa5; }
.rc-leg-label {
  color: #8a9aa5; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600;
}
.rc-leg-val { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.rc-leg-val strong { color: #e8dcc0; font-size: 18px; font-weight: 700; }
.rc-leg-val span { color: #b8a882; font-size: 13px; }
.route-hero-foot { font-size: 11px; color: #8a9aa5; margin-top: 8px; }
@media (max-width: 640px) {
  .route-compass-wrap { grid-template-columns: 1fr; justify-items: center; }
  .route-compass-legend { width: 100%; max-width: 320px; }
}

/* --- Charter book (year calendar) --- */
.charter-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.charter-kpi {
  background: #0b1f2a;
  border: 1px solid #1a3040;
  border-radius: 10px;
  padding: 14px 16px;
  color: #e8dcc0;
}
.charter-kpi .kpi-eyebrow {
  color: #b8873d;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.charter-kpi .kpi-num {
  font-size: 22px;
  font-weight: 700;
  color: #e8dcc0;
  letter-spacing: -0.01em;
}

.charter-year {
  background: #0b1f2a;
  border: 1px solid #1a3040;
  color: #e8dcc0;
  padding: 0;
  overflow: hidden;
}
.charter-year-track { padding: 14px 16px 8px; border-bottom: 1px solid #1a3040; }
.charter-year-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-bottom: 1px solid #1a3040;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.charter-month-cell {
  font-size: 10px;
  color: #b8873d;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  border-left: 1px solid #1a3040;
  padding: 4px 0;
}
.charter-month-cell:first-child { border-left: 0; }
.charter-year-bars {
  position: relative;
  height: 40px;
  background: #0a1a24;
  border-radius: 6px;
  border: 1px solid #1a3040;
  overflow: hidden;
}
.charter-bar {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  padding: 0 6px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4) inset;
}
.charter-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 0 0 1px #e8dcc0 inset;
  z-index: 2;
}
.charter-bar-lbl {
  color: #0b1f2a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.charter-today {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: #e8dcc0;
  box-shadow: 0 0 6px rgba(232, 220, 192, 0.6);
  z-index: 3;
  pointer-events: none;
}

.charter-year-list { padding: 8px 0; }
.charter-row {
  display: grid;
  grid-template-columns: 6px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid #1a3040;
  cursor: pointer;
  transition: background 0.12s ease;
}
.charter-row:first-child { border-top: 0; }
.charter-row:hover { background: rgba(184, 135, 61, 0.08); }
.charter-row-swatch {
  width: 6px;
  height: 32px;
  border-radius: 3px;
}
.charter-row-main strong {
  display: block;
  color: #e8dcc0;
  font-size: 14px;
  font-weight: 600;
}
.charter-row-main span {
  display: block;
  color: #b8a882;
  font-size: 11px;
  margin-top: 2px;
}
.charter-row-fee {
  color: #d4a24e;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* --- Charter detail modal --- */
.charter-detail-modal { padding: 4px 4px 8px; }
.charter-detail-hero {
  background: linear-gradient(180deg, #0b1f2a, #0a1a24);
  border: 1px solid #1a3040;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 14px;
  color: #e8dcc0;
}
.charter-detail-eyebrow {
  color: #b8873d;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.charter-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: #e8dcc0;
  line-height: 1.2;
  margin-bottom: 4px;
}
.charter-detail-sub { color: #b8a882; font-size: 13px; }
.charter-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.charter-detail-cell {
  background: #0a1a24;
  border: 1px solid #1a3040;
  border-radius: 8px;
  padding: 10px 12px;
}
.charter-detail-cell .cell-label {
  color: #8a9aa5;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 3px;
}
.charter-detail-cell .cell-val {
  color: #e8dcc0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.charter-detail-cell.is-fee .cell-val { color: #d4a24e; }
.charter-history-table {
  background: #0a1a24;
  border: 1px solid #1a3040;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}
.charter-history-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid #1a3040;
  color: #e8dcc0;
}
.charter-history-row:first-child { border-top: 0; }
.charter-history-row.is-total {
  background: rgba(184, 135, 61, 0.12);
  border-top: 1px solid #b8873d;
  font-weight: 700;
}
.charter-history-row .hist-date { color: #b8a882; font-size: 12px; }
.charter-history-row .hist-days { color: #8a9aa5; font-size: 12px; font-variant-numeric: tabular-nums; }
.charter-history-row .hist-fee { color: #d4a24e; font-weight: 700; font-variant-numeric: tabular-nums; }
.charter-history-row.is-total .hist-fee { color: #e8dcc0; }

/* --- Crew profile popup --- */
.profile-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
  padding: 0;
}
.profile-btn:hover {
  border-color: #b8873d;
  color: #b8873d;
  background: rgba(184, 135, 61, 0.08);
}

.crew-profile-modal { padding: 0 4px 8px; position: relative; }
.crew-profile-hero {
  background: linear-gradient(180deg, #0b1f2a, #0a1a24);
  border: 1px solid #1a3040;
  border-radius: 12px;
  padding: 24px 20px 20px;
  text-align: center;
  margin-bottom: 16px;
  position: relative;
}
.crew-profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 14px;
  background: #1a3040;
  border: 2px solid #b8873d;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.crew-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.crew-profile-photo-fallback {
  color: #e8dcc0;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.crew-profile-eyebrow {
  color: #b8873d;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.crew-profile-name {
  color: #e8dcc0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.crew-profile-sub {
  color: #b8a882;
  font-size: 13px;
  font-weight: 500;
}
.crew-profile-bio {
  background: #0a1a24;
  border: 1px solid #1a3040;
  border-radius: 10px;
  padding: 16px 18px;
  color: #e8dcc0;
  font-size: 14px;
  line-height: 1.55;
}
.crew-profile-bio p {
  margin: 0 0 10px;
  color: #e8dcc0;
}
.crew-profile-bio p:last-child { margin-bottom: 0; }
.crew-profile-loading {
  color: #8a9aa5;
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
  font-style: italic;
}

/* --- Flights view messageboard-style --- */
.flight-mb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  transition: background 0.12s ease;
}
.flight-mb-row:first-child { border-top: 0; }
.flight-mb-row:hover { background: rgba(184, 135, 61, 0.05); }
.flight-photo, .flight-photo-fb {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 52px;
  background: #0b1f2a;
  border: 1px solid #1a3040;
}
.flight-photo-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8dcc0;
  font-weight: 700;
  font-size: 15px;
}
.flight-mb-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.flight-mb-info strong {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
}
.flight-mb-info span {
  color: var(--color-text-muted);
  font-size: 12px;
}
.flight-mb-detail {
  font-size: 11px !important;
  color: #b8873d !important;
  font-weight: 500;
}
.flight-nums {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 90px;
}
.flight-nums strong {
  color: #d4a24e;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.flight-nums span {
  color: var(--color-text-muted);
  font-size: 11px;
}
.flight-nums .flight-source {
  color: #6a8f5a;
  font-size: 10px;
  font-style: italic;
}
.flight-lookup-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.flight-lookup-btn:hover:not(:disabled) {
  border-color: #b8873d;
  color: #b8873d;
  background: rgba(184, 135, 61, 0.08);
}
.flight-lookup-btn:disabled { opacity: 0.6; cursor: default; }

/* ===== Hours of Rest \u2014 monthly ===== */
.hor-month-header{display:flex;align-items:center;justify-content:space-between;background:#0f2a38;border:1px solid #1a3040;border-radius:12px;padding:14px 16px;margin-bottom:12px}
.hor-month-title{text-align:center;flex:1}
.hor-month-name{font-family:var(--font-display,Georgia,serif);font-size:20px;color:#e8dcc0;letter-spacing:0.02em}
.hor-month-stats{font-size:11px;color:#8a9aa5;margin-top:4px;letter-spacing:0.06em;text-transform:uppercase}
.hor-nav{background:transparent;border:1px solid #1a3040;color:#d4a24e;width:36px;height:36px;border-radius:8px;font-size:20px;cursor:pointer;line-height:1;transition:background .15s}
.hor-nav:hover{background:#123044}
.hor-monthly-list{display:flex;flex-direction:column;gap:6px}
.hor-row{display:flex;align-items:center;gap:12px;background:#0f2a38;border:1px solid #1a3040;border-radius:10px;padding:12px 14px;color:#e8dcc0;cursor:pointer;text-align:left;width:100%;transition:background .15s,border-color .15s}
.hor-row:hover{background:#123044;border-color:#2a4560}
.hor-row-body{flex:1;min-width:0}
.hor-row-name{display:block;font-size:15px;font-weight:500;color:#e8dcc0}
.hor-row-sub{display:block;font-size:11px;color:#8a9aa5;margin-top:2px;letter-spacing:0.04em;text-transform:uppercase}
.hor-row-meta{font-size:12px;color:#b8a882;white-space:nowrap}
.hor-row-caret{color:#5a7080;font-size:18px;margin-left:4px}
.hor-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px #0b1f2a}
.hor-dot-ok{background:#4a9d5e;box-shadow:0 0 0 2px #0b1f2a,0 0 10px rgba(74,157,94,0.4)}
.hor-dot-bad{background:#c15656;box-shadow:0 0 0 2px #0b1f2a,0 0 10px rgba(193,86,86,0.4)}
.hor-dot-warn{background:#d4a24e;box-shadow:0 0 0 2px #0b1f2a,0 0 10px rgba(212,162,78,0.4)}
.hor-dot-idle{background:#3a5060;box-shadow:0 0 0 2px #0b1f2a}
/* Flag-state rule line under the month name — keeps the legal reference
   visible so the panel can't be read as a generic MLC summary. */
.hor-month-rule{font-size:10px;color:#6f828d;margin-top:3px;letter-spacing:0.04em}
/* Annex II record export row */
.hor-export-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#0f2a38;border:1px solid #1a3040;border-radius:10px;padding:10px 14px;margin-bottom:12px}
.hor-export-label{font-size:11px;color:#8a9aa5;letter-spacing:0.06em;text-transform:uppercase}
.hor-export-actions{display:flex;gap:8px}

/* Day modal grid */
.hor-day-modal{max-width:720px}
.hor-days-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(38px,1fr));gap:6px;margin:16px 0;padding:14px;background:#0a1c26;border:1px solid #1a3040;border-radius:10px}
.hor-day{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:80px;padding:4px 2px;border-radius:6px;position:relative;background:#0f2a38}
.hor-day-num{font-size:9px;color:#8a9aa5;position:absolute;top:3px;left:0;right:0;text-align:center;letter-spacing:0.05em}
.hor-day-bar{display:block;width:70%;border-radius:3px 3px 0 0;margin-bottom:2px;transition:height .3s}
.hor-day-hrs{font-size:9px;color:#e8dcc0;font-family:var(--font-mono,ui-monospace,monospace);margin-bottom:2px}
.hor-day-ok .hor-day-bar{background:linear-gradient(180deg,#5cb571,#4a9d5e)}
.hor-day-bad{background:#2a1418}
.hor-day-bad .hor-day-bar{background:linear-gradient(180deg,#d97070,#c15656)}
.hor-day-bad .hor-day-hrs{color:#f5c4c4;font-weight:600}
.hor-day-pending{opacity:0.35}
.hor-day-pending .hor-day-bar{background:#3a5060}
.hor-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:11px;color:#8a9aa5;padding:8px 4px;letter-spacing:0.04em}
.hor-legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.hor-legend-ok{background:#4a9d5e}
.hor-legend-bad{background:#c15656}

/* ===== Ashore view =====
   Design tokens only — matches app + messageboard style */
.ashore-header {
  margin: 0 0 var(--space-4);
}
.ashore-anchor {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.ashore-anchor .eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2px;
  font-weight: 600;
}
.ashore-anchor-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}
.ashore-anchor-region {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.ashore-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.ashore-tabs::-webkit-scrollbar { display: none; }
.ashore-tab {
  flex: 0 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}
.ashore-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}
.ashore-tab.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.ashore-tab-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.ashore-tab.active .ashore-tab-count { opacity: 1; }

.ashore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .ashore-grid { grid-template-columns: 1fr 1fr; }
}

.ashore-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.ashore-card:hover {
  box-shadow: var(--shadow-md);
}

.ashore-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-offset);
  overflow: hidden;
  position: relative;
}
.ashore-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ashore-img.no-img::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 60%, var(--color-brass-soft), transparent 60%),
    radial-gradient(circle at 70% 30%, var(--color-primary-soft), transparent 60%);
}

.ashore-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ashore-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.ashore-head strong {
  font-family: var(--font-display);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
}
.ashore-dist {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  font-weight: 600;
}
.ashore-loc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.ashore-meta {
  font-size: var(--text-xs);
  color: var(--color-accent-hover);
  font-style: italic;
  font-weight: 500;
}
.ashore-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
}
.ashore-tips {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border-left: 2px solid var(--color-accent);
  line-height: 1.4;
}
.ashore-link {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-accent-hover);
  text-decoration: none;
  align-self: flex-start;
  font-weight: 500;
}
.ashore-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

[data-theme='dark'] .ashore-anchor,
[data-theme='dark'] .ashore-card,
[data-theme='dark'] .ashore-tab {
  background: var(--color-surface);
}

/* ===== Office notices (HR & Compensation) — captain/shore/owner only ===== */
.office-notices-header {
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.office-notices-header .eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--color-accent, #b8873d);
  font-weight: 600;
}
.office-notices-header .office-lead {
  margin-top: 4px;
  color: var(--color-text-muted, #5a6673);
  font-size: 13px;
  line-height: 1.45;
}
.office-notices-list {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-6);
}
.office-notice {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2ded4);
  border-radius: 10px;
  padding: var(--space-4);
  box-shadow: 0 1px 0 rgba(11, 31, 42, 0.03);
}
.office-notice.is-pinned {
  border-color: var(--color-accent, #b8873d);
  background: linear-gradient(180deg, rgba(184,135,61,0.06) 0%, var(--color-surface, #fff) 40%);
}
.office-notice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.office-notice-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.office-notice-title h3 {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text, #0b1f2a);
  line-height: 1.28;
  letter-spacing: 0.005em;
}
.office-pin {
  color: var(--color-accent, #b8873d);
  font-size: 14px;
  line-height: 1;
}
.office-notice-meta {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: var(--space-2);
}
.office-notice:not(.is-open) .office-notice-head {
  margin-bottom: 0;
}
.office-notice-toggle {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--color-accent, #b8873d);
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: none;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.office-notice-toggle:hover {
  color: var(--color-accent-hover, #8f6a2f);
  text-decoration: underline;
}
.office-badge {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 10.5px;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  background: transparent;
  color: var(--color-accent, #b8873d);
  border: none;
}
.office-badge-sub {
  color: var(--color-text-muted, #5a6673);
}
.office-notice-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-2);
}
.office-notice:not(.is-open) .office-notice-tags {
  margin-top: 2px;
  margin-bottom: 0;
}
.office-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}
.office-tag-dept {
  color: var(--color-text-muted, #5a6673);
}
.office-tag-priority {
  padding: 2px 7px;
  border-radius: 3px;
}
.office-tag-priority::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 4px;
  background: currentColor;
}
.office-tag-priority.priority-low { color: var(--color-text-muted, #5a6673); }
.office-tag-priority.priority-normal { color: var(--color-text-muted, #5a6673); }
.office-tag-priority.priority-high { color: #a15b1f; }
.office-tag-priority.priority-urgent { color: #a13544; }
.office-priority-select {
  border: none;
  background: transparent;
  color: inherit;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0;
}
.office-notice-filters {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: 0 var(--space-4) var(--space-3);
  flex-wrap: wrap;
}
.office-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted, #5a6673);
}
.office-filter select {
  border: 1px solid var(--color-border, #e2ded4);
  background: var(--color-surface, #fff);
  color: var(--color-text, #0b1f2a);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12.5px;
  font-family: inherit;
}
.office-notice-body {
  color: var(--color-text, #0b1f2a);
  font-size: 14px;
  line-height: 1.55;
}
.office-notice-body p {
  margin: 0 0 var(--space-2);
}
.office-notice-body p:last-child { margin-bottom: 0; }
.office-notice-foot {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border, #e2ded4);
  color: var(--color-text-muted, #5a6673);
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.office-author { font-weight: 600; color: var(--color-text, #0b1f2a); }
.office-dot { opacity: 0.5; }
.office-role { text-transform: capitalize; }

[data-theme='dark'] .office-notice { background: var(--color-surface); }

/* ============================================================
   Office · HR & Compensation — reply threads
   ============================================================ */
.office-thread {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-primary, #d4d1ca);
}
.office-thread-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.office-thread-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #7a7974);
  font-weight: 600;
}
.office-thread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-surface-alt, #e8e6df);
  color: var(--color-text-muted, #7a7974);
}
.office-thread-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.office-thread-empty {
  padding: var(--space-3);
  font-size: 12px;
  color: var(--color-text-muted, #7a7974);
  font-style: italic;
  text-align: center;
}
.office-reply {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-surface-alt, #fbfbf9);
  border-left: 3px solid var(--color-border-primary, #d4d1ca);
}
.office-reply-role-captain  { border-left-color: #01696f; }
.office-reply-role-shore    { border-left-color: #b8873d; }
.office-reply-role-owner    { border-left-color: #7a39bb; }
.office-reply-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.office-reply-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-primary, #28251d);
}
.office-reply-role {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--color-surface, #f9f8f5);
  color: var(--color-text-muted, #7a7974);
}
.office-reply-role-captain { color: #01696f; background: rgba(1, 105, 111, 0.08); }
.office-reply-role-shore   { color: #964219; background: rgba(150, 66, 25, 0.08); }
.office-reply-role-owner   { color: #7a39bb; background: rgba(122, 57, 187, 0.08); }
.office-reply-date {
  font-size: 11px;
  /* Was --color-text-faint (#bab9b4), which sat at roughly 1.8:1 on the reply
     bubble -- the reply dates were unreadable in light mode too, not just dark. */
  color: var(--color-text-muted);
  margin-left: auto;
}
.office-reply-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-primary, #28251d);
}
.office-thread-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.office-thread-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border-primary, #d4d1ca);
  background: var(--color-background, #f7f6f2);
  font: inherit;
  font-size: 13px;
  color: var(--color-text-primary, #28251d);
  resize: vertical;
  min-height: 60px;
}
.office-thread-form textarea:focus {
  outline: none;
  border-color: var(--color-primary, #01696f);
  box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.1);
}
.office-thread-form input[type="text"],
.office-thread-form select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border-primary, #d4d1ca);
  background: var(--color-background, #f7f6f2);
  font: inherit;
  font-size: 13px;
  color: var(--color-text-primary, #28251d);
}
.office-thread-form input[type="text"]:focus,
.office-thread-form select:focus {
  outline: none;
  border-color: var(--color-primary, #01696f);
  box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.1);
}
.office-thread-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ─── Notice documents block + reply attachments ───────────────────── */
.office-docs {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border-primary);
}
.office-docs-head {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.office-docs-list {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2);
}
.office-doc {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--color-surface-alt); border-radius: 6px;
  border-left: 3px solid #8a6cad;
  font-size: 13px;
}
.office-doc-link {
  color: var(--color-text); text-decoration: none; font-weight: 500;
}
.office-doc-link:hover { text-decoration: underline; }
.office-doc-meta {
  color: var(--color-text-muted); font-size: 12px; margin-left: auto;
}
.office-doc-size { font-variant-numeric: tabular-nums; }
.office-docs-actions {
  display: flex; align-items: center; gap: var(--space-3);
}
.office-docs-hint { color: var(--color-text-muted); font-size: 12px; }

/* Reply attachments */
.office-reply-atts {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.office-att {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  background: var(--color-background); border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  font-size: 12px; text-decoration: none; color: var(--color-text);
}
.office-att:hover { border-color: var(--color-primary); text-decoration: underline; }
.office-att-size { color: var(--color-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* Reply form staged attachments */
.office-thread-atts {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.office-thread-atts:empty { display: none; }
.office-thread-att-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-primary);
  border-radius: 999px;
  font-size: 12px;
}
.office-thread-att-del {
  background: transparent; border: none; color: var(--color-text-muted);
  cursor: pointer; font-size: 14px; padding: 0; line-height: 1;
}
.office-thread-att-del:hover { color: #b0334c; }

/* Reply form actions layout with attach button */
.office-thread-actions {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: 6px;
}
.office-thread-attach {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; cursor: pointer;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  font-size: 12px; color: var(--color-text-muted);
}
.office-thread-attach:hover { color: var(--color-text); border-color: var(--color-primary); }

/* ─── Timeline editor (bottom toolbar + edge handles + detail popup) ─── */
/* v1.9.132: pinned to the bottom of the viewport, iPad-friendly, safe-area aware. */
 /* legacy hook, no longer draggable */
 /* no longer draggable — pinned to bottom */
/* Reserve space at the bottom of scrollable timeline containers so the toolbar
   never covers the last row. */
body.tl-toolbox-open .gantt-body,
body.tl-toolbox-open [data-timeline-scroll] {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* Mode cursors on the timeline body */

/* Resize edge handles — only visible when a bar is selected in resize mode */

/* Glue-partner highlight: the "candidate other bar" glows when hovered */

/* Detail popup */
.tl-popup {
  position: fixed;
  z-index: 1450;
  background: var(--color-surface);
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  min-width: 260px; max-width: 340px;
  padding: 12px 14px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--color-text);
}
.tl-popup h4 {
  margin: 0 0 8px 0;
  font-size: 13px; font-weight: 600;
  color: var(--color-text);
  display: flex; align-items: center; justify-content: space-between;
}
.tl-popup dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px 0; }
.tl-popup dt { color: var(--color-text-muted); font-size: 12px; }
.tl-popup dd { margin: 0; font-size: 12px; }

/* Ghost bar while dragging edges — a semi-transparent preview */

/* ─── Airport picker (typeahead dropdown) ─────────────────────── */
.airport-pick-dd {
  position: fixed;
  z-index: 1600;
  min-width: 260px; max-width: 380px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  max-height: 260px; overflow-y: auto;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
}
.airport-pick-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-primary);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.airport-pick-item:last-child { border-bottom: 0; }
.airport-pick-item:hover, .airport-pick-item.is-active {
  background: var(--color-surface-alt);
}
.airport-pick-item .ap-main {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.airport-pick-item .ap-city {
  font-weight: 500; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.airport-pick-item .ap-name {
  font-size: 11px; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.airport-pick-item .ap-iata {
  flex-shrink: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--color-primary);
  background: var(--color-surface-alt);
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.airport-pick-empty {
  padding: 10px 12px; color: var(--color-text-muted); font-style: italic;
}

/* ─── Airport field (single input with inline IATA tag) ─────── */
.airport-field {
  position: relative;
  width: 100%;
}
.airport-field > input[type="text"] {
  width: 100%;
  padding-right: 56px;  /* room for the IATA tag */
}
.airport-iata-tag {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: var(--color-surface-alt);
  padding: 2px 8px;
  border-radius: 3px;
  pointer-events: none;
  display: none;  /* hidden until an IATA is set */
}
.airport-iata-tag.is-set { display: inline-block; }

/* ------------------------------------------------------------------
 * Notice replies (board notices, inline)
 * ------------------------------------------------------------------ */
.notice-replies {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.notice-replies-list { display: flex; flex-direction: column; gap: var(--space-2); }
.notice-replies-empty {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
}
.notice-reply {
  background: var(--color-surface-alt);
  border-radius: 6px;
  padding: var(--space-2) var(--space-3);
}
.notice-reply-head {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-muted);
  margin-bottom: 2px;
}
.notice-reply-date { color: var(--color-text-faint); }
.notice-reply-head .btn { margin-left: auto; padding: 2px 6px; }
.notice-reply-body {
  font-size: var(--text-sm); color: var(--color-text);
  line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.notice-reply-form {
  margin-top: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.notice-reply-form textarea {
  width: 100%; box-sizing: border-box;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  resize: vertical; min-height: 40px;
}
.notice-reply-form textarea:focus {
  outline: none; border-color: var(--color-primary);
}
.notice-reply-form button {
  align-self: flex-end;
}

/* System-generated notices */
.notice.is-system { background: color-mix(in srgb, var(--color-surface) 92%, var(--color-primary) 8%); }
.chip.chip-system {
  background: color-mix(in srgb, var(--color-surface) 60%, var(--color-primary) 20%);
  color: var(--color-text);
  border: 0.5px solid color-mix(in srgb, var(--color-border) 60%, var(--color-primary) 40%);
  font-size: var(--text-xs);
  padding: 2px 8px; border-radius: 999px;
}

/* ── HOR editor iPad quick-actions & keyboard hints (v1.9.135) ────────── */
.hor-preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
.hor-preset-btn {
  background: #123044;
  color: #d4a24e;
  border: 1px solid #1a3040;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  min-height: 40px;                /* iPad-friendly touch target */
  transition: background .15s;
}
.hor-preset-btn:hover, .hor-preset-btn:focus-visible {
  background: #1a4055; outline: none;
}
.hor-shortcuts-hint kbd {
  background: #0f2434;
  border: 1px solid #1a3040;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: #d4a24e;
}
.hor-add-period {
  min-height: 44px;                /* iPad-friendly */
  font-size: 15px;
}
.hor-period-times input[type=time] {
  min-height: 44px;
  font-size: 15px;
}
/* iPad landscape: give the sheet more breathing room */
@media (min-width: 768px) and (orientation: landscape) {
  #hor-day-editor-overlay > div { max-width: 720px !important; }
  .hor-preset-btn { padding: 10px 14px; font-size: 14px; }
}

/* ── Timeline drag-to-move affordance (v1.9.135) ──────────────────────── */
/* Edges keep their own cursor — resize, not move */

/* Chunkier zoom buttons for iPad */
@media (pointer: coarse) {
  .gantt-zoom button, .gantt-nav {
    min-height: 40px; min-width: 40px; font-size: 14px;
  }
}

/* ─── Timeline Editor Modal (Add / Cut date+number inputs) ─── */
.tl-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(11, 31, 42, 0.45);
  z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.tl-modal {
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #0b1f2a);
  border-radius: 10px;
  min-width: 320px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(11, 31, 42, 0.25);
  font-family: "Inter", system-ui, sans-serif;
  overflow: hidden;
}
.tl-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-primary, #eef0f2);
  background: #f8fafb;
}
.tl-modal-head strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1B474D;
}
.tl-modal-x {
  background: transparent; border: 0; font-size: 22px; line-height: 1;
  cursor: pointer; color: #4a5560;
  padding: 0 4px;
}
.tl-modal-x:hover { color: #0b1f2a; }
.tl-modal-body {
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.tl-modal-field {
  display: flex; flex-direction: column; gap: 4px;
}
.tl-modal-field > span {
  font-size: 12px;
  color: #4a5560;
  font-weight: 500;
}
.tl-modal-field input,
.tl-modal-field select {
  padding: 10px 12px;
  border: 1px solid var(--color-border-primary, #d4d1ca);
  border-radius: 6px;
  font-size: 14px;
  min-height: 40px; /* touch-friendly */
  background: #fff;
  color: #0b1f2a;
}
.tl-modal-field input:focus,
.tl-modal-field select:focus {
  outline: none;
  border-color: #1B474D;
  box-shadow: 0 0 0 2px rgba(27,71,77,0.15);
}
.tl-modal-field small {
  color: #7a7974;
  font-size: 11px;
  line-height: 1.4;
}
.tl-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 6px;
}
.tl-modal-cancel, .tl-modal-withdraw, .tl-modal-ok {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  border: 1px solid transparent;
}
.tl-modal-cancel, .tl-modal-withdraw {
  background: transparent;
  color: #4a5560;
  border-color: #d4d1ca;
}
.tl-modal-cancel:hover, .tl-modal-withdraw:hover { background: #f2f4f6; }
.tl-modal-ok {
  background: #1B474D;
  color: #fff;
  border-color: #1B474D;
}
.tl-modal-ok:hover { background: #0f3237; }

/* ---------- My days of year (crew-facing contract-year bars) ---------- */
.mydoy { padding: 0 var(--space-4) var(--space-5); }
.mydoy-card {
  background: var(--color-surface, #F9F8F5);
  border: 1px solid var(--color-border, #D4D1CA);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.mydoy-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.mydoy-yearlabel {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .01em;
}
.mydoy-range {
  font-size: var(--text-xs); color: var(--color-text-muted, #7A7974); margin-top: 2px;
}
.mydoy-big {
  font-size: 15px; font-weight: 500; white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.mydoy-big strong { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }

/* Bars. The target marker is a hairline, so being over target reads as a
   colour change rather than a bar that silently clips at 100%. */
.mydoy-bar {
  position: relative; height: 10px; border-radius: 999px;
  background: rgba(27,71,77,.10); overflow: hidden;
}
.mydoy-bar-lg { height: 14px; }
.mydoy-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: #20808D; transition: width .5s ease;
}
.mydoy-fill.over { background: #A84B2F; }
.mydoy-target {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--color-text, #28251D); opacity: .45; border-radius: 1px;
}
.mydoy-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-muted, #7A7974);
  font-variant-numeric: tabular-nums lining-nums;
}
.mydoy-over { color: #A84B2F; font-weight: 600; }
.mydoy-paceline {
  margin-top: var(--space-2); font-size: var(--text-xs);
  color: var(--color-text-muted, #7A7974);
}
.mydoy-pace { font-weight: 600; }
.mydoy-pace.ahead  { color: #437A22; }
.mydoy-pace.behind { color: #964219; }
.mydoy-pace.on     { color: #20808D; }
.mydoy-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.mydoy-chip {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(27,71,77,.08); color: #1b474d;
  border: 1px solid rgba(27,71,77,.18);
}

/* Earlier years: label / bar / total on one line. */
.mydoy-row {
  display: grid; grid-template-columns: 1fr 34% auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
}
.mydoy-row + .mydoy-row { border-top: 1px solid var(--color-border, #D4D1CA); }
.mydoy-row-label { min-width: 0; }
.mydoy-row-year { display: block; font-size: var(--text-sm); font-weight: 600; }
.mydoy-row-range {
  display: block; font-size: 11px; color: var(--color-text-muted, #7A7974);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mydoy-row-days {
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.mydoy-row-target { font-weight: 400; color: var(--color-text-muted, #7A7974); }

.mydoy-periods { list-style: none; margin: 0; padding: 0; }
.mydoy-periods li {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
}
.mydoy-periods li + li { border-top: 1px solid var(--color-border, #D4D1CA); }
.mydoy-period-days { color: var(--color-text-muted, #7A7974); font-weight: 600; }
.mydoy-period-none { color: var(--color-text-muted, #7A7974); font-size: var(--text-xs); }

.mydoy-foot {
  font-size: 11px; line-height: 1.5;
  color: var(--color-text-muted, #7A7974); padding: 0 2px;
}
.mydoy-empty {
  padding: var(--space-5) var(--space-4); text-align: center;
  font-size: var(--text-sm); color: var(--color-text-muted, #7A7974);
}

/* Earlier years stack on very narrow screens rather than crushing the bar. */
@media (max-width: 360px) {
  .mydoy-row { grid-template-columns: 1fr auto; }
  .mydoy-row .mydoy-bar { grid-column: 1 / -1; }
}

/* ─── Crew home tiles: contract year, the team, receipt scan ───────────── */
/* Shared shell for the stacked home cards so the days-of-year tile, the
   team tile and the existing Hours-of-Rest tile all read as one family. */
.home-tile {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#homeDoyTile { cursor: pointer; }
.home-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.home-tile-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
}
.home-tile-chip {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.home-tile-big {
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.home-tile-of {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}
.home-tile-sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ─── Home pages (Crew / Owner / Captain): reorderable blocks ("Edit" mode) ── */
.home-reorder-wrap { display: block; }
.home-reorder-item { position: relative; }
.home-reorder-item-body > * { margin-top: var(--space-3); }
.home-reorder-item:first-child .home-reorder-item-body > * { margin-top: 0; }
.home-reorder-controls {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 2px 6px;
}
.home-reorder-wrap.is-editing .home-reorder-controls { display: flex; }
.home-reorder-wrap.is-editing .home-reorder-item-body { pointer-events: none; opacity: .7; }
.home-reorder-controls .btn-sm {
  padding: 3px 12px;
  font-size: var(--text-xs);
  line-height: 1.6;
}
.home-reorder-controls .btn-sm:disabled { opacity: .35; cursor: default; }

/* Drag handle — touch-friendly grip, mirrors the sea-watches/daily-duty
   pointer-drag pattern rather than native HTML5 dragstart (unreliable on
   iOS Safari). touch-action:none stops the page from scrolling while a
   finger holds the handle. */
.home-reorder-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  color: var(--color-text-muted);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  border-radius: var(--radius-md);
}
.home-reorder-handle:active { cursor: grabbing; background: var(--color-surface-offset); }
.home-reorder-controls .home-reorder-move-group { display: flex; align-items: center; gap: var(--space-2); }

/* The item being dragged detaches to fixed positioning (appended to <body>,
   outside .home-reorder-wrap.is-editing), so its controls/body visibility
   rules need their own override — the ancestor-scoped rules above no longer
   apply once it leaves the wrap. */
.home-reorder-item.is-dragging {
  position: fixed;
  z-index: 500;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  padding: var(--space-2);
  opacity: .96;
  pointer-events: none;
}
.home-reorder-item.is-dragging .home-reorder-controls { display: flex; }
.home-reorder-item.is-dragging .home-reorder-item-body { opacity: 1; }
.home-reorder-placeholder {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
  margin-top: var(--space-3);
}
.home-reorder-item:first-child + .home-reorder-placeholder,
.home-reorder-wrap > .home-reorder-placeholder:first-child { margin-top: 0; }

/* Contract-year progress bar */
.doy-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--color-surface-offset);
  overflow: hidden;
}
.doy-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--color-accent);
  transition: width .4s ease;
}
/* Over target is not an error — several crew are legitimately over in year 1 —
   so it is flagged in the accent-warm tone, not in the error colour. */
.doy-bar-fill.over { background: var(--color-warning, #d99f3a); }

/* Onboard / arriving / leaving toggle */
.home-seg {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--color-surface-offset);
}
.home-seg-btn {
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.home-seg-btn.is-on {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.home-crewlist { display: flex; flex-direction: column; }
.home-crewrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--color-divider);
}
.home-crewrow:last-child { border-bottom: 0; }
.home-crewrow-main { min-width: 0; }
.home-crewrow-name {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-crewrow-rank {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-crewrow-when {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* "Arriving later" / "Leaving later" reveal — collapsed by default so the
   home tile only shows the next 10 days; tapping reveals day 11..30. */
.home-tile-later-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-primary, var(--color-accent));
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.home-tile-later-panel:not(:empty) { margin-top: 2px; }

/* Receipt-scan action — full-width thumb target, camera-first */
.home-scan {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.home-scan:hover { border-color: var(--color-accent); background: var(--color-surface-2); }
.home-scan-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.home-scan-icon svg { width: 20px; height: 20px; }
.home-scan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-scan-title { font-size: var(--text-sm); font-weight: 600; }
.home-scan-sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.home-scan-arrow { flex: 0 0 auto; color: var(--color-text-faint); }

/* ---------- Full-screen camera + full-screen text scan ---------- */
/* Own layer above the sheet/scrim (z 60/61 elsewhere) — while the camera is
   open nothing else on the page is reachable, which is the point. Uses
   fixed inset rather than the Fullscreen API: iOS Safari refuses
   requestFullscreen on a div, and a fixed layer behaves identically. */
body.camfs-open { overflow: hidden; }
.camfs {
  position: fixed; inset: 0; z-index: 80;
  background: #05121a;
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
  -webkit-user-select: none; user-select: none;
}
.camfs > video,
.camfs > [data-camfs-still] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #05121a;
  display: none;
}
/* The live feed fills the screen (cover) so framing feels like a camera app;
   the frozen still is contained, because cropping the shot the crew is
   being asked to check would hide the bit they need to read. */
.camfs[data-mode="live"] > video { display: block; object-fit: cover; }
.camfs[data-mode="shot"] > [data-camfs-still],
.camfs[data-mode="reading"] > [data-camfs-still],
.camfs[data-mode="read"] > [data-camfs-still] { display: block; }

/* Framing brackets belong to the live feed only. */
.camfs-frame {
  position: absolute; inset: 14% 8% 30%;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-lg);
  pointer-events: none;
  display: none;
}
.camfs[data-mode="live"] .camfs-frame { display: block; }
.camfs-frame::before, .camfs-frame::after,
.camfs-frame > span::before, .camfs-frame > span::after {
  content: ''; position: absolute; width: 26px; height: 26px;
  border: 3px solid var(--color-accent);
}
.camfs-frame::before { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: var(--radius-md); }
.camfs-frame::after  { top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: var(--radius-md); }
.camfs-frame > span::before { bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: var(--radius-md); }
.camfs-frame > span::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: var(--radius-md); }

/* Sweeping line, shown only while OCR is actually running, so it reports
   real work instead of decorating the wait. */
.camfs-scan {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  box-shadow: 0 0 18px 4px rgba(255,255,255,0.25);
  pointer-events: none;
  display: none;
}
.camfs[data-mode="reading"] .camfs-scan { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .camfs[data-mode="reading"] .camfs-scan { animation: camfs-sweep 2.1s ease-in-out infinite; }
}
@keyframes camfs-sweep {
  0%   { top: 12%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 82%; opacity: 0; }
}

.camfs-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: var(--space-2);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-3)) var(--space-3) var(--space-4);
  background: linear-gradient(180deg, rgba(5,18,26,0.85), transparent);
}
.camfs-title {
  flex: 1; text-align: center;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.camfs-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.camfs-icon svg { width: 20px; height: 20px; }
.camfs-icon[hidden] { display: none; }
.camfs[data-torch="on"] .camfs-icon[data-camfs="torch"] {
  background: var(--color-accent); color: #05121a;
}
/* Keeps the title centred when the torch button is absent. */
.camfs-icon[hidden] + .camfs-title { margin-right: 40px; }

.camfs-bottom {
  position: relative; z-index: 3;
  margin-top: auto;
  padding: var(--space-5) var(--space-4)
           calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
  background: linear-gradient(180deg, transparent, rgba(5,18,26,0.92) 30%);
  text-align: center;
}
.camfs-note {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  font-size: var(--text-xs);
  line-height: 1.5;
  max-width: 30rem; margin: 0 auto var(--space-2);
}
.camfs-retry-link {
  display: inline-block; margin-top: var(--space-2);
  border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.12);
  border-radius: 999px; padding: 6px 16px;
  color: #fff; font-size: var(--text-xs); font-weight: 600;
  cursor: pointer;
}
.camfs-status {
  color: #fff;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  min-height: 14px;
  margin-bottom: var(--space-2);
}
.camfs-bar {
  height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.2);
  max-width: 16rem; margin: 0 auto var(--space-2);
  overflow: hidden;
}
.camfs-bar[hidden] { display: none; }
.camfs-bar > i {
  display: block; height: 100%; width: var(--p, 0%);
  background: var(--color-accent);
  transition: width 240ms linear;
}

/* Live row: shutter centred, the file fallback pushed to one side and
   balanced by an empty span so the shutter stays on the screen's axis. */
.camfs-live {
  display: none;
  align-items: center; justify-content: space-between;
  gap: var(--space-3);
}
.camfs[data-mode="live"] .camfs-live { display: flex; }
.camfs-shutter {
  flex-shrink: 0;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.9);
  background: transparent;
  padding: 0;
  display: grid; place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.camfs-shutter > i {
  width: 58px; height: 58px; border-radius: 50%;
  background: #fff;
  transition: transform 120ms ease;
}
.camfs-shutter:active > i { transform: scale(0.88); }
.camfs-side {
  flex: 0 0 5.5rem;
  border: none; background: none;
  color: rgba(255,255,255,0.85);
  font-size: var(--text-xs);
  font-family: inherit;
  padding: var(--space-2) 0;
  cursor: pointer;
  text-align: center;
}
.camfs-side-ghost { pointer-events: none; }

/* Action stacks after the shot, and after a scan. */
.camfs-acts { display: none; flex-direction: column; gap: var(--space-2); }
.camfs[data-mode="shot"] .camfs-acts:not(.camfs-acts-read) { display: flex; }
.camfs[data-mode="read"] .camfs-acts-read { display: flex; }
.camfs-btn {
  display: block; width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(5,18,26,0.75);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.camfs-btn-primary {
  /* Fixed colours: the theme accent can resolve to near-black here. */
  background: #ffffff;
  border-color: #ffffff;
  color: #05121a;
}
.camfs-btn-primary:disabled {
  background: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.35);
  color: rgba(5,18,26,0.7);
}
.camfs-btn:active { opacity: 0.85; }

/* What the scan read, over the photo it read it from. */
.camfs-read {
  max-width: 24rem;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(5,18,26,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
  text-align: left;
}
.camfs-read[hidden] { display: none; }
.camfs-read-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: var(--text-sm);
}
.camfs-read-row:last-child { border-bottom: none; }
.camfs-read-row > span { color: rgba(255,255,255,0.7); font-size: var(--text-xs); }
.camfs-read-row > b { color: #fff; font-variant-numeric: tabular-nums; }

/* The read-out is a correction form, not a summary: the scan is a guess, so
   every value it produced has to be fixable before it is saved. Dark-scheme
   controls so the native date picker and select arrow are not black-on-black
   over the photo. */
.camfs-read { color-scheme: dark; }
.camfs-read-row { align-items: center; cursor: text; }
.camfs-read-row > span:first-child { flex: 0 0 4.5rem; }
.camfs-read-row input,
.camfs-read-row select {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm);
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  padding: 6px 8px;
  min-width: 0;
}
.camfs-read-row > input {
  flex: 1 1 auto;
  text-align: right;
}
.camfs-read-row input::placeholder { color: rgba(255,255,255,0.38); }
.camfs-read-row input:focus,
.camfs-read-row select:focus {
  outline: none;
  border-color: rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.16);
}
.camfs-read-amt { display: flex; align-items: center; gap: 6px; }
.camfs-read-amt select { padding: 6px 4px; }
.camfs-read-amt input { width: 6.5rem; text-align: right; }

/* No camera at all: the note carries the reason and the file picker is the
   only offered route, so no dead shutter is left on screen. */
.camfs[data-mode="nocam"] .camfs-live { display: flex; justify-content: center; }
.camfs[data-mode="nocam"] .camfs-shutter,
.camfs[data-mode="nocam"] .camfs-side-ghost { display: none; }
.camfs[data-mode="nocam"] .camfs-side[data-camfs="pick"] {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: #05121a;
  font-weight: 600;
  font-size: var(--text-sm);
}
/* Starting up: no controls yet, just the note. */
.camfs[data-mode="starting"] .camfs-live,
.camfs[data-mode="reading"] .camfs-live { display: none; }

/* ── Yard review: the queue of jobs the crew reported ────────────────────────
   Built as cards rather than a table: the captain and the chief work this
   queue on a phone, often in the engine room, and a table at that width turns
   into either a horizontal scroll or four-character columns. One report per
   card, thumb-sized actions, photo behind a tap because each one costs a
   signed URL. */
.jr-wrap { max-width: 760px; margin: 0 auto; padding: var(--space-3) var(--space-3) var(--space-6); }

.jr-lead {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.jr-tabs { display: flex; gap: 6px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.jr-tab {
  flex: 1 1 auto;
  min-height: 40px;                 /* thumb target, gloves on */
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
/* Inverts correctly in both themes: light primary is deep navy, dark primary
   is near-white, and --color-bg is the matching opposite in each. */
.jr-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}
.jr-tab-n { margin-left: 6px; opacity: .7; font-variant-numeric: tabular-nums; }
/* Approvals receipt queue: four filters on one row on a phone. */
#apaQueueTabs { flex-wrap: nowrap; }
#apaQueueTabs .jr-tab { flex: 1 1 auto; padding: 8px 8px; white-space: nowrap; font-size: 13px; }
#apaQueueTabs .jr-tab-n { margin-left: 3px; }
@media (max-width: 374px) { #apaQueueTabs { flex-wrap: wrap; } #apaQueueTabs .jr-tab { font-size: 12px; padding: 8px 6px; } }

.jr-list { display: flex; flex-direction: column; gap: var(--space-3); }

.jr-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  padding: var(--space-3);
}

.jr-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.jr-type {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.jr-prio {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
/* Only high and urgent get colour. If every priority were coloured the two
   that need an engineer today would stop standing out. */
.jr-prio-urgent { color: var(--color-error); }
.jr-prio-high   { color: var(--color-warning); }
.jr-prio-low    { color: var(--color-text-muted); }

.jr-photo-btn {
  margin-left: auto;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.jr-title { margin: 0 0 4px; font-size: var(--text-base); line-height: 1.35; }
.jr-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 8px; }
.jr-desc {
  margin: 0 0 8px;
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;            /* crew type these in a phone keyboard */
  overflow-wrap: anywhere;          /* a pasted part number must not widen the card */
}

.jr-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
}
.jr-note-ok { color: var(--color-success); }

.jr-actions { display: flex; gap: 8px; margin-top: var(--space-3); flex-wrap: wrap; }
.jr-act { flex: 1 1 140px; min-height: 44px; }

.jr-empty, .jr-error {
  padding: var(--space-6) var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.jr-error { color: var(--color-error); }

.jr-sheet-sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.jr-sheet-err {
  color: var(--color-error);
  font-size: var(--text-sm);
  min-height: 16px;
  margin-top: 4px;
}

/* ============================================================
   iPhone layout fixes (2026-09-13)
   Two confirmed bugs made the bottom tab bar invisible on iPhone
   and pushed the dashboard out of view:

   1) HORIZONTAL BLOWOUT. The mobile rule `.stage { grid-template-columns: 1fr }`
      resolves to `minmax(auto, 1fr)`, and that `auto` minimum equals the
      min-content width of the grid item. Because `.phone` had no `min-width: 0`,
      any wide dashboard content (long crew names, the hero position line)
      forced the column past the viewport: measured 558px inside a 393px
      iPhone viewport. The tab bar is `left:0;right:0` inside that 558px box,
      so its 5th tab ("Menu") sat off-screen and the dashboard was clipped.
      Fix: minmax(0,1fr) plus a min-width:0 chain down to .content.

   2) INSTALL BANNER ON TOP OF THE TAB BAR. `.pwa-banner` is
      `position:fixed; bottom:12px; z-index:9999` while `.tabbar` is
      `z-index:10`, so in mobile Safari the banner covered the whole bar —
      elementFromPoint() at the tab bar centre returned .pwa-banner-actions,
      i.e. the tabs were unclickable too. Fix: lift the banner above the bar.
   ============================================================ */
@media (max-width: 900px) {
  /* 1) let the shell shrink to the real viewport width */
  .stage { grid-template-columns: minmax(0, 1fr); }
  .phone { min-width: 0; max-width: 100%; }
  .phone-screen,
  .appbar,
  .content { min-width: 0; }
  .content { max-width: 100%; }

  /* 2) keep the install banner clear of the bottom tab bar */
  .pwa-banner { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Long unbroken strings (crew full names, document titles, the hero
   position/IMO line) must wrap instead of widening their container. */
.owner-hero,
.owner-hero-label,
.owner-hero-sub { min-width: 0; overflow-wrap: anywhere; }
.dept-grid strong,
.comp-row strong,
.brief-item strong { min-width: 0; overflow-wrap: anywhere; }

/* ============================================================
   Role switcher vs appbar title on iPhone (2026-09-13)

   `.role-switcher-mobile` is `position: fixed; z-index: 100` and
   centred at the top of the viewport, so it landed exactly on the
   centred `.appbar-title`: measured at 393x852 the switcher occupied
   y 4-39 and the title y 21-48, and elementFromPoint() at the title's
   centre returned the switcher's active BUTTON — so the title
   ("Captain · Admin") and the #appbarRoleChip next to it were
   completely covered and unreadable.

   Fix: give the switcher its own band at the top and start the app
   shell below it, so nothing overlaps. Scoped to :not(.login-mode)
   because the login overlay (z-index 10000) already covers the
   switcher — reserving the band there would only add an empty strip.
   ============================================================ */
@media (max-width: 900px) {
  /* switcher height 35px + 4px above + 4px below */
  :root { --role-switcher-band: 43px; }

  .role-switcher-mobile {
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    margin-top: 0;
  }

  body:not(.login-mode) .phone-screen {
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--role-switcher-band));
  }
}

/* ------------------------------------------------------------
   Appbar title vs #appbarRoleChip on iPhone

   With the switcher no longer covering the appbar, the row turned
   out to be over-stuffed: burger + title + chip + 3 icon buttons.
   Measured at 393px the chip is 131px wide ("CAPTAIN · fb748f92"),
   leaving the title 56px for 95px of text -> "Captai...".

   The chip (v1.9.145) exists to stop owner/office/captain view
   confusion, but on mobile the role is already stated twice: the
   role switcher highlights it, and .appbar-title itself reads
   "Captain · Admin". So drop only the redundant role word here and
   keep the version, which is what the chip uniquely adds. The full
   role + version chip is unchanged on desktop.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  #appbarRoleChipRole,
  #appbarRoleChip > span[style*="opacity"] { display: none; }
  #appbarRoleChip { flex: 0 0 auto; }
}

/* ── v1.9.157 · Account group in drawer + appbar reclaim ──────────────────────
   Settings + Sign out now have a permanent home in the drawer (see buildDrawer).
   The appbar keeps both icon buttons on wide screens, but stands them down on
   phones: with notif + gear + signout present, .appbar-title was squeezed to
   ~77px, and a greeting like "Good afternoon, Martin" needs ~176px. Desktop
   mode is exempted explicitly (higher specificity) because the sidebar layout
   has the room and users there expect the buttons where they were. */
.drawer-section--static { cursor: default; }
.drawer-section--static:hover { color: var(--muted, #8a9aa5); }

@media (max-width: 700px) {
  #settingsBtn,
  #signoutBtn { display: none; }
}
/* Desktop-mode re-shows them. Must restate `grid`, not flex: .iconbtn centres
   its SVG with `place-items: center`, and justify-items is ignored on flex
   containers, so inline-flex here would knock the icon off-centre. */
body.desktop-mode #settingsBtn,
body.desktop-mode #signoutBtn { display: grid; }

/* ============================================================
   Charters & events — editable flat list under Operations.
   ============================================================ */
.ce-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-3) 0;
}
.ce-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.ce-chip:hover { border-color: var(--color-primary); }
.ce-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.ce-chip-n { opacity: 0.65; }

.ce-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.ce-row.is-past { opacity: 0.62; }
.ce-swatch {
  flex: 0 0 8px;
  width: 8px;
  height: 30px;
  border-radius: var(--radius-sm);
}
.ce-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ce-main strong {
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ce-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.ce-del {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.ce-del:hover {
  border-color: #a12c7b;
  color: #a12c7b;
}

.ce-notices-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ce-notices-toggle:hover,
.ce-notices-toggle.is-active {
  border-color: var(--color-primary, #01696f);
  color: var(--color-primary, #01696f);
}
.ce-notices-toggle .ce-chip-n {
  font-size: var(--text-xs);
  opacity: 1;
}

.ce-quicklinks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ce-quicklink-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.ce-quicklink-chip:hover {
  border-color: var(--color-primary, #01696f);
  color: var(--color-primary, #01696f);
}

.cn-row-panel {
  padding: 0 12px 12px 30px;
  border-bottom: 1px solid var(--color-border);
}
.cn-row-panel-inner {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt, var(--color-surface));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cn-row-panel-head {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Charter notice composer: priority select shares a row with the submit
   button — without this, .office-thread-form select's width:100% squeezes
   the button until its label wraps. */
.cn-composer .office-thread-actions {
  flex-wrap: nowrap;
}
.cn-composer .office-thread-actions select {
  width: auto;
  flex: 0 1 120px;
}
.cn-composer .office-thread-actions button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ce-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ce-form select,
.ce-form input {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  min-width: 0;
}
.ce-form #ceLabel { flex: 1 1 200px; }
.ce-form .btn-primary {
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
@media (max-width: 560px) {
  .ce-form > * { flex: 1 1 100%; }
  .ce-form select, .ce-form input { width: 100%; }
}

/* ── Archived-crew folder (crew roster) ─────────────────────────────────
   Collapsed by default. Crew whose last timeline period has ended live
   here so the active crew list stays the owner's overview. */
.crew-archive-folder {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.crew-archive-folder:hover { color: var(--color-text); }
.crew-archive-count {
  margin-left: auto;
  font-weight: 400;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.crew-archive-caret { flex: none; transition: transform .18s ease; }
.crew-archive-caret.open { transform: rotate(90deg); }
.crew-archive-note {
  padding: var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ── Charter book calendar: events lane ─────────────────────────────────
   Second bar track under the signed-charter lane, holding the planning
   events from /api/charter-windows (owner trips, deliveries, transits,
   regattas, yard periods). Colours come from CHARTER_EVENT_TYPES in
   app.js so the lane, the legend and the Charters & events list match. */
.charter-lane-eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #b8873d;
  margin: 8px 0 4px;
}
.charter-bar--event {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) inset;
}
.charter-bar--event .charter-bar-lbl {
  font-size: 9px;
  font-weight: 600;
}
.charter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0 2px;
}
.charter-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: #9fb3bf;
  white-space: nowrap;
}
.charter-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.charter-list-head {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #b8873d;
  padding: 12px 14px 6px;
  border-top: 1px solid #1a3040;
  margin-top: 6px;
}
.charter-row--event .charter-row-main strong { font-weight: 600; }

/* ---------- Key brief contrast (owner home) ----------
   .brief-block takes its background from --color-primary, which the dark
   theme flips from navy #061733 to near-white #f4f2ef. The card therefore
   became a light slab while the global dark-card rule near the top of this
   file kept every child at cream #f4f1ea — cream letters on a near-white
   card, which is what made the key brief unreadable in dark mode.
   Pin the text to the deep navy so the brief reads at full contrast, and
   darken the bullet so it stays visible on the light surface. */
[data-theme='dark'] .brief-block,
[data-theme='dark'] .brief-block * {
  color: #0d1b33;
}
[data-theme='dark'] .brief-block h3,
[data-theme='dark'] .brief-block strong {
  color: #061733;
}
[data-theme='dark'] .brief-block .brief-dot {
  background: #8a6224;
}

/* ---------- Office · HR & Compensation — dark theme role colours ----------
   The role chips and left borders are hardcoded to dark hues (teal #01696f,
   rust #964219, purple #7a39bb) chosen against a near-white reply bubble.
   Once the bubble follows the theme those read at roughly 2:1 on dark navy,
   so give each role a lighter twin for dark mode. Same hue family, so the
   captain / office / owner colour coding still reads the same. */
[data-theme='dark'] .office-reply-role-captain { color: #5fb3bf; background: rgba(95, 179, 191, 0.14); }
[data-theme='dark'] .office-reply-role-shore   { color: #e0a06b; background: rgba(224, 160, 107, 0.14); }
[data-theme='dark'] .office-reply-role-owner   { color: #b98ce6; background: rgba(185, 140, 230, 0.16); }
[data-theme='dark'] .office-reply.office-reply-role-captain,
[data-theme='dark'] .office-reply[data-role='captain'] { border-left-color: #5fb3bf; }
[data-theme='dark'] .office-reply[data-role='shore']   { border-left-color: #e0a06b; }
[data-theme='dark'] .office-reply[data-role='owner']   { border-left-color: #b98ce6; }
/* The uploader role is rendered as an <em> inside the document meta line,
   which sits directly on the notice card rather than in a bubble. */
[data-theme='dark'] .office-doc-meta em.office-reply-role-captain { color: #5fb3bf; background: transparent; }
[data-theme='dark'] .office-doc-meta em.office-reply-role-shore   { color: #e0a06b; background: transparent; }
[data-theme='dark'] .office-doc-meta em.office-reply-role-owner   { color: #b98ce6; background: transparent; }

/* ---------- Housekeeping addendum ----------
   The unrelated later .btn-inline rule (search "border: 1px dashed" above)
   shares this class name and, at equal (0,1,0) specificity, wins by source
   order over BOTH the outline and filled variants defined earlier in this
   file — hardcoding a dashed border and a raw --text token that goes
   invisible on the dark cards these buttons actually sit on. Re-assert the
   intended outline + filled looks at every real usage site; scoping to
   each container gives (0,2,0) so these always win regardless of source
   order, without touching that unrelated rule. */
.crew-exports .btn-inline,
.cap-joiners-exports .btn-inline,
.cap-joiner-side .btn-inline,
.gl-scan .btn-inline {
  border: 1px solid var(--color-brass);
  background: transparent;
  color: var(--color-brass);
}
.crew-exports .btn-inline:hover,
.cap-joiners-exports .btn-inline:hover,
.cap-joiner-side .btn-inline:hover,
.gl-scan .btn-inline:hover {
  background: rgba(184,135,61,0.12);
}
.crew-exports .btn-inline-primary,
.cap-joiners-exports .btn-inline-primary,
.cap-joiner-side .btn-inline-primary,
.gl-scan .btn-inline-primary {
  border: 1px solid var(--color-brass);
  background: var(--color-brass);
  color: var(--color-text-inverse, #fff);
}
.crew-exports .btn-inline-primary:hover,
.cap-joiners-exports .btn-inline-primary:hover,
.cap-joiner-side .btn-inline-primary:hover,
.gl-scan .btn-inline-primary:hover {
  background: var(--color-brass);
  filter: brightness(0.92);
}

/* ---- Sea watches: main/secondary 4h-slot grid, drag + tap-to-assign ---- */
.sw-pool {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sw-chip {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 22px 5px 10px;
  border-radius: 10px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  max-width: 100%;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.sw-pool .sw-chip { padding-right: 10px; }
/* Draggable/tappable chips only exist when editing is possible — the JS
   omits data-from-slot and the remove button for read-only viewers, and
   the grab cursor should follow the same rule so it never implies an
   interaction that will silently no-op. */
#seaWatchesWrap.sw-editable .sw-chip { cursor: grab; }
.sw-chip.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.sw-chip.is-dragging-source { opacity: 0.35; }
.sw-chip-name {
  font-size: 12px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.sw-chip-role {
  color: var(--color-text-muted); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.sw-chip-remove {
  position: absolute; top: 2px; right: 2px;
  border: none; background: none; color: var(--color-text-muted);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 3px 5px;
}
.sw-chip-remove:hover { color: var(--color-error); }
.sw-ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-md);
  cursor: grabbing;
}
.sw-grid {
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
@media (min-width: 480px) {
  .sw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .sw-grid { grid-template-columns: repeat(3, 1fr); }
}
.sw-slot {
  border: 1px solid var(--color-border); border-radius: 10px;
  padding: 8px; background: var(--color-surface);
  min-height: 56px; display: flex; flex-direction: column; gap: 6px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sw-slot.sw-drop-hover {
  border-color: var(--color-primary);
  background: var(--color-accent-soft);
}
.sw-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sw-slot-time { font-weight: 700; font-size: 12px; }
.sw-slot-crew { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; }
.sw-slot-empty { color: var(--color-text-muted); font-size: 11px; align-self: center; margin: auto; }

/* ---- Daily duty calendar: monthly grid, two drop boxes per day
   (Watch + Crew duties), drag/tap "stamp" from a persistent eligibility
   pool (unlike sea watches, dragging a pool chip doesn't remove it — the
   same person is stamped onto many different days across the month). ---- */
.dd-cal-scroll {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.dd-cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(68px, 1fr)); gap: 4px;
  min-width: 100%; width: max-content; box-sizing: border-box;
}
.dd-cal-dow {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-text-muted); text-align: center; padding-bottom: 2px;
  min-width: 0;
}
.dd-day {
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); padding: 4px; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px; min-height: 84px;
}
.dd-day-blank { border: none; background: none; min-height: 0; }
.dd-day.is-today { border-color: var(--color-primary); }
.dd-day-num { font-size: 11px; font-weight: 700; color: var(--color-text-muted); padding: 0 2px; }
.dd-slot {
  border: 1px dashed var(--color-border); border-radius: 6px; padding: 3px 4px;
  min-height: 30px; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.dd-slot.sw-drop-hover { border-color: var(--color-primary); border-style: solid; background: var(--color-accent-soft); }
.dd-slot-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text-faint, var(--color-text-muted)); }
.dd-slot-empty { color: var(--color-text-muted); font-size: 10px; }
.dd-stamp {
  position: relative; display: flex; align-items: center; gap: 2px; min-width: 0;
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 2px 13px 2px 4px; max-width: 100%; box-sizing: border-box;
}
.dd-stamp-name { font-size: 10.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; min-width: 0; flex: 1; }
.dd-stamp-remove {
  position: absolute; top: 0; right: 0; border: none; background: none;
  color: var(--color-text-muted); font-size: 12px; line-height: 1; cursor: pointer; padding: 2px 3px;
}
.dd-stamp-remove:hover { color: var(--color-error); }
.dd-pool-chip { cursor: grab; }
.dd-elig-row {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--color-border);
}
.dd-elig-row:last-child { border-bottom: none; }
.dd-elig-name { font-size: 12px; font-weight: 600; flex: 1; min-width: 120px; }
.dd-pool-chip.is-selected, .dd-stamp.is-selected { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.dd-pool-chip.is-dragging-source, .dd-stamp.is-dragging-source { opacity: 0.35; }
.chip-toggle {
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); border-radius: 999px; padding: 4px 10px;
  font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip-toggle.is-on { border-color: var(--color-primary); background: var(--color-accent-soft); color: var(--color-accent-hover); }

/* The passport review card's two actions are not equals — "Add to the
   list" is the one the officer came for. Without this the filled variant
   above is the only thing separating them, and both buttons stretch to the
   full card width, which reads as two identical choices. */
.gl-scan .btn-inline {
  width: auto;
  justify-content: center;
  min-height: 44px;   /* thumb-sized: this is used one-handed, on deck */
  padding: 8px 14px;
}

/* Daily Duty calendar — print view (#ddPrintArea is built and populated by
   _ddPrintCal() in app.js just before window.print() runs). Hidden on
   screen; @media print hides the rest of the app and shows only this. */
#ddPrintArea {
  display: none;
}
@media print {
  body * {
    visibility: hidden;
  }
  #ddPrintArea, #ddPrintArea * {
    visibility: visible;
  }
  #ddPrintArea {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
  }
  #ddPrintArea h1 {
    font-size: 18px;
    margin: 0 0 12px;
  }
  #ddPrintArea p {
    font-size: 12px;
    margin: 0 0 6px;
  }
  #ddPrintArea table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 12px;
  }
  #ddPrintArea th, #ddPrintArea td {
    border: 1px solid #999;
    padding: 4px 8px;
    text-align: left;
  }
  #ddPrintArea th {
    background: #eee;
  }
}

/* ---- SMS drill matrix (sms_drills) ---- */
.smsd { padding: 0 0 var(--space-6); }
.smsd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: var(--space-3); }
.smsd-kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; }
.smsd-kpi b { display: block; font-size: 20px; line-height: 1.1; color: #148252; font-variant-numeric: tabular-nums; }
.smsd-kpi span { font-size: 11px; color: var(--color-text-muted); }
.smsd-kpi.warn b { color: #a15c00; }
.smsd-kpi.bad b { color: var(--color-error); }
.smsd-tabs { display: flex; gap: 4px; margin: 0 0 var(--space-3); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.smsd-tab { background: none; border: 0; padding: 8px 12px; font: inherit; font-size: var(--text-sm); color: var(--color-text-muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.smsd-tab.on { color: var(--color-text); border-bottom-color: var(--color-primary); font-weight: 600; }
.smsd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.smsd-card { padding: 12px 14px; }
.smsd-card.off { opacity: .6; }
.smsd-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.smsd-card-head .chip { white-space: nowrap; }
.smsd-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 6px; }
.smsd-facts span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.smsd-facts b { font-size: 13px; font-variant-numeric: tabular-nums; }
.smsd-bar { height: 4px; border-radius: 2px; background: rgba(161,53,68,.18); overflow: hidden; margin-bottom: 8px; }
.smsd-bar i { display: block; height: 100%; background: #148252; }
.smsd-basis { font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.smsd-basis .chip { margin-right: 4px; }
.smsd-scope { margin-top: 8px; font-size: 12px; }
.smsd-scope summary { cursor: pointer; color: var(--color-text-muted); }
.smsd-scope ul { margin: 6px 0 4px 18px; padding: 0; }
.smsd-muster { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--color-divider, rgba(0,0,0,.06)); align-items: start; }
.smsd-muster-when { font-weight: 600; font-size: 13px; }
.smsd-muster-when.bad { color: var(--color-error); }
.smsd-gwrap { display: flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.smsd-glabels { flex: 0 0 150px; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.smsd-glabel { display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smsd-glabel .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: #148252; }
.smsd-glabel .dot.soon { background: #c87814; }
.smsd-glabel .dot.overdue, .smsd-glabel .dot.never { background: var(--color-error); }
.smsd-gscroll { overflow-x: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.smsd-gantt { display: block; }
.smsd-gantt .g-grid { stroke: var(--color-border); stroke-width: 1; }
.smsd-gantt .g-month { font-size: 10px; fill: var(--color-text-muted); }
.smsd-gantt .g-zebra { fill: rgba(0,0,0,.025); }
.smsd-gantt .g-ok { fill: rgba(20,130,82,.55); }
.smsd-gantt .g-bad { fill: rgba(190,50,60,.7); }
.smsd-gantt .g-plan { fill: rgba(20,130,82,.18); stroke: rgba(20,130,82,.6); stroke-dasharray: 3 2; }
.smsd-gantt .g-none { fill: rgba(0,0,0,.06); }
.smsd-gantt .g-due { fill: #c87814; }
.smsd-gantt .g-dot { fill: #0d5c3a; stroke: #fff; stroke-width: 1.5; }
.smsd-gantt .g-dot.inferred { fill: #fff; stroke: #0d5c3a; stroke-width: 2; }
.smsd-gantt .g-today { stroke: var(--color-primary); stroke-width: 2; }
.smsd-gantt .g-todaytxt { font-size: 10px; fill: var(--color-primary); font-weight: 600; }
.smsd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 11px; color: var(--color-text-muted); }
.smsd-legend .lg { display: inline-block; width: 14px; height: 8px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.smsd-legend .lg.ok { background: rgba(20,130,82,.55); }
.smsd-legend .lg.bad { background: rgba(190,50,60,.7); }
.smsd-legend .lg.warn { background: rgba(200,120,20,.5); }
.smsd-legend .lg.plan { background: rgba(20,130,82,.18); border: 1px dashed rgba(20,130,82,.6); }
.smsd-legend .lg.none { background: rgba(0,0,0,.08); }
.smsd-legend .lg.dotf, .smsd-legend .lg.doto { width: 9px; height: 9px; border-radius: 50%; background: #0d5c3a; }
.smsd-legend .lg.doto { background: #fff; border: 2px solid #0d5c3a; }
.smsd-alert { border-left: 4px solid var(--color-error); }
.smsd-tscroll { overflow-x: auto; margin-top: 8px; -webkit-overflow-scrolling: touch; }
.smsd-table { border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.smsd-table th, .smsd-table td { padding: 5px 7px; border-bottom: 1px solid var(--color-divider, rgba(0,0,0,.06)); text-align: center; white-space: nowrap; }
.smsd-table thead th { font-weight: 600; font-size: 11px; vertical-align: bottom; }
.smsd-table thead th small { display: block; font-weight: 400; color: var(--color-text-muted); }
.smsd-table .sticky { position: sticky; left: 0; background: var(--color-surface); text-align: left; z-index: 1; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.smsd-table tbody th { font-weight: 500; }
.smsd-table tbody th small { color: var(--color-text-muted); font-weight: 400; }
.smsd-table .c-ok { background: rgba(20,130,82,.12); color: #0d5c3a; }
.smsd-table .c-warn { background: rgba(200,120,20,.16); color: #8a4f00; }
.smsd-table .c-bad { background: rgba(190,50,60,.14); color: #8e2330; }
.smsd-table .c-never { background: rgba(190,50,60,.07); color: #8e2330; }
.smsd-rules ul { margin: 8px 0 8px 18px; padding: 0; font-size: 13px; line-height: 1.55; }
.smsd-rules li { margin-bottom: 6px; }
@media (max-width: 600px) {
  .smsd-kpis { grid-template-columns: repeat(2, 1fr); }
  .smsd-grid { grid-template-columns: 1fr; }
  .smsd-glabels { flex-basis: 108px; }
  .smsd-glabel { font-size: 11px; }
  .smsd-muster { grid-template-columns: 1fr; gap: 2px; }
}
.smsd .smsd-gantt { max-width: none !important; height: auto; }
.smsd .rt-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.smsd .rt-sub { font-size: 12px; line-height: 1.45; color: var(--color-text-muted); }
@media (max-width: 600px) { .smsd-glabels { width: 108px; min-width: 0; } }

/* Reply edit / archive / delete */
.reply-acts { margin-left: auto; display: inline-flex; gap: 4px; }
.office-reply-head, .notice-reply-head { flex-wrap: wrap; }
.reply-act { font: inherit; font-size: 11px; padding: 2px 8px; border: 1px solid var(--color-border, #d8d4cc); border-radius: 999px; background: transparent; color: var(--color-text-muted, #666); cursor: pointer; line-height: 1.5; min-height: 26px; }
.reply-act:hover { color: var(--color-text, #222); border-color: var(--color-text-muted, #888); }
.reply-act-del:hover { color: #b3261e; border-color: #b3261e; }
.reply-edited { margin-left: 6px; font-size: 11px; font-style: normal; color: var(--color-text-faint, #999); }
.reply-archived-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; background: var(--color-surface-2, #eee); color: var(--color-text-muted, #666); }
.office-reply.is-archived, .notice-reply.is-archived { opacity: .6; }
.reply-archived-toggle { font: inherit; font-size: 12px; background: none; border: 0; padding: 4px 0; margin: 2px 0 6px; color: var(--color-text-muted, #666); text-decoration: underline; cursor: pointer; }
.reply-edit-ta { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--color-border, #d8d4cc); border-radius: 6px; resize: vertical; }
.reply-edit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

/* Crew movements: person type colours (2026-10-07) — contract crew brass, dayworkers blue */
.flight-mb-row.is-crew { box-shadow: inset 4px 0 0 #b8873d; }
.flight-mb-row.is-dayworker { box-shadow: inset 4px 0 0 #3a7cb8; }
.flight-mb-row.is-dayworker .flight-photo-fb { background: #1d3f5c; border-color: #3a7cb8; color: #d6e6f3; }
.flight-mb-row.is-dayworker .flight-mb-info > span:not(.flight-mb-detail) { color: #3a7cb8; font-weight: 500; }
.flight-type-legend { display: flex; gap: 16px; font-size: 12px; color: var(--color-text-muted); margin: 0 0 6px; }
.flight-type-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.flight-type-legend .ftl-crew::before { background: #b8873d; }
.flight-type-legend .ftl-day::before { background: #3a7cb8; }
[data-theme='dark'] .flight-mb-row.is-dayworker .flight-mb-info > span:not(.flight-mb-detail) { color: #7fb3d9; }
/* Arrivals & departures: race crew colour and From-To range bar (2026-10-14) */
.flight-mb-row.is-race { box-shadow: inset 4px 0 0 #2f8f6b; }
.flight-mb-row.is-race .flight-photo-fb { background: #173f31; border-color: #2f8f6b; color: #d3eee3; }
.flight-type-legend .ftl-race::before { background: #2f8f6b; }
.flight-range { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: var(--space-3); }
.flight-range label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-muted); }
.flight-range input[type=date] { font: inherit; font-size: 16px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--color-border, #d8d4cc); border-radius: 8px; background: var(--color-surface, #fff); color: var(--color-text, #222); }
.flight-range-line { font-size: 12px; color: var(--color-text-muted); margin: 0 0 8px; }
@media (max-width: 480px) { .flight-range label { flex: 1 1 40%; } .flight-range input[type=date] { width: 100%; box-sizing: border-box; } }

/* ---- Yard task status pill (2026-10-07) -----------------------------------
   Same language as .chip: full radius, soft tint, small caps-style label,
   leading dot. Editable version wraps a native <select> (keeps the iOS picker)
   with a custom chevron. */
.yts {
  --yts-fg: var(--color-text-muted); --yts-bg: var(--color-surface-offset);
  position: relative; display: inline-flex; align-items: center;
  border-radius: var(--radius-full);
  background: var(--yts-bg); color: var(--yts-fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yts-fg) 22%, transparent);
  transition: background var(--transition), box-shadow var(--transition), opacity var(--transition);
  white-space: nowrap; vertical-align: middle;
}
.yts::before {
  content: ''; position: absolute; left: 10px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: currentColor; pointer-events: none;
}
.yts:not(.yts-ro)::after {
  content: ''; position: absolute; right: 10px; top: 50%;
  width: 5px; height: 5px; margin-top: -4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .75; pointer-events: none;
}
.yts select.yard-task-status, .yts-ro {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.2;
}
.yts select.yard-task-status {
  -webkit-appearance: none; appearance: none;
  border: 0; margin: 0; background: transparent; color: inherit;
  padding: 6px 26px 6px 22px; min-height: 26px; border-radius: inherit;
  cursor: pointer;
}
.yts-ro { padding: 4px 12px 4px 22px; }
.yts select.yard-task-status:focus { outline: none; }
.yts:focus-within { box-shadow: inset 0 0 0 1px var(--yts-fg), 0 0 0 3px color-mix(in srgb, var(--color-brass) 35%, transparent); }
.yts:not(.yts-ro):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yts-fg) 55%, transparent); }
.yts.is-saving { opacity: .55; }
.yts select.yard-task-status option { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-text); background: var(--color-surface); }

.yts-open        { --yts-fg: #1e4a6b;            --yts-bg: #dee9f3; }
.yts-in_progress { --yts-fg: #8a5a1c;            --yts-bg: var(--color-brass-soft); }
.yts-blocked     { --yts-fg: var(--color-error);   --yts-bg: var(--color-error-soft); }
.yts-waiting     { --yts-fg: #5b4a86;            --yts-bg: #e7e2f1; }
.yts-done        { --yts-fg: var(--color-success); --yts-bg: var(--color-success-soft); }
.yts-cancelled   { --yts-fg: var(--color-text-faint); --yts-bg: var(--color-surface-offset); }

[data-theme='dark'] .yts-open        { --yts-fg: #8fb8dc; --yts-bg: rgba(143,184,220,.14); }
[data-theme='dark'] .yts-in_progress { --yts-fg: var(--color-brass); --yts-bg: rgba(217,168,102,.14); }
[data-theme='dark'] .yts-blocked     { --yts-fg: #e89a92; --yts-bg: rgba(232,154,146,.14); }
[data-theme='dark'] .yts-waiting     { --yts-fg: #b9a8e3; --yts-bg: rgba(185,168,227,.14); }
[data-theme='dark'] .yts-done        { --yts-fg: #8fc79a; --yts-bg: rgba(143,199,154,.14); }
[data-theme='dark'] .yts-cancelled   { --yts-fg: var(--color-text-faint); --yts-bg: rgba(255,255,255,.05); }

/* ---- People involved: chips in the task form + crew picker (2026-10-07) ---- */
.pf-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf-person { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: var(--radius-full); background: var(--color-surface-offset); color: var(--color-text); font-size: 13px; font-weight: 500; }
.pf-person button { width: 20px; height: 20px; border-radius: 50%; line-height: 18px; font-size: 14px; color: var(--color-text-muted); background: transparent; }
.pf-person button:hover { background: var(--color-divider); color: var(--color-text); }
.pf-people-empty { font-size: 13px; color: var(--color-text-faint); }
.ypk-overlay { z-index: 10010; }
.ypk { width: min(520px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.ypk-sub { font-size: 13px; color: var(--color-text-muted); margin: -4px 0 10px; }
.ypk-search, .ypk-add input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; }
.ypk-list { overflow-y: auto; margin: 10px -6px; padding: 0 6px; flex: 1; min-height: 120px; -webkit-overflow-scrolling: touch; }
.ypk-grp { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin: 12px 0 4px; }
.ypk-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; }
.ypk-row:hover { background: var(--color-surface-offset); }
.ypk-row.is-on { background: var(--color-brass-soft); border-color: color-mix(in srgb, var(--color-brass) 40%, transparent); }
.ypk-row.is-dayworker.is-on { background: rgba(58,124,184,.12); border-color: rgba(58,124,184,.35); }
.ypk-row input { width: 18px; height: 18px; accent-color: var(--color-brass); flex: none; }
.ypk-row.is-dayworker input { accent-color: #3a7cb8; }
.ypk-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: 12px; font-weight: 600; color: var(--color-text-muted); background: var(--color-surface-offset); box-shadow: 0 0 0 2px var(--color-brass); }
.ypk-row.is-dayworker .ypk-av { box-shadow: 0 0 0 2px #3a7cb8; }
.ypk-row.is-other .ypk-av { box-shadow: 0 0 0 1px var(--color-border); }
.ypk-av img { width: 100%; height: 100%; object-fit: cover; }
.ypk-txt { display: flex; flex-direction: column; min-width: 0; }
.ypk-txt b { font-size: 14px; font-weight: 600; color: var(--color-text); }
.ypk-txt small { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ypk-empty { padding: 20px; text-align: center; color: var(--color-text-muted); font-size: 14px; }
.ypk-add { display: flex; gap: 8px; margin-bottom: 12px; }
.ypk .modal-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ypk-count { margin-right: auto; font-size: 13px; color: var(--color-text-muted); }
[data-theme='dark'] .ypk-row.is-dayworker.is-on { background: rgba(127,179,217,.14); }

/* ---- My jobs home tile (2026-10-07) ---- */
.myjobs-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.myjobs-day { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin: 10px 0 4px; }
.myjobs-day.is-late { color: var(--color-error); }
.myjobs-job { padding: 10px 12px; border-radius: 12px; background: var(--color-surface-offset); margin-bottom: 6px; }
.myjobs-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.myjobs-top b { font-size: 15px; font-weight: 600; color: var(--color-text); flex: 1 1 auto; min-width: 0; }
.myjobs-dot { width: 8px; height: 8px; border-radius: 50%; background: #1e4a6b; flex: none; transform: translateY(-1px); }
.myjobs-job.st-in_progress .myjobs-dot { background: var(--color-brass); }
.myjobs-job.st-blocked .myjobs-dot { background: var(--color-error); }
.myjobs-job.st-waiting .myjobs-dot { background: #5b4a86; }
.myjobs-when { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.myjobs-lead-badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-brass-soft); color: #8a5a1c; }
.myjobs-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0 16px; font-size: 13px; color: var(--color-text); }
.myjobs-meta em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin-right: 4px; }
.myjobs-desc { margin: 4px 0 0 16px; font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }
[data-theme='dark'] .myjobs-lead-badge { color: var(--color-brass); }
[data-theme='dark'] .myjobs-dot { background: #8fb8dc; }

.myjobs-status { margin: 6px 0 2px 16px; }
.myjobs-job.is-done { opacity: .62; }
.myjobs-job.is-done .myjobs-top b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.myjobs-job.st-done .myjobs-dot { background: var(--color-success); }

/* ---- Job comments (2026-10-07) ---- */
.myjobs-ctoggle, .yard-c-toggle { margin: 6px 0 0 16px; padding: 2px 0; background: none; border: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-brass); cursor: pointer; }
.yard-c-toggle { margin: 4px 0 0; font-size: 11px; }
.myjobs-ctoggle:hover, .yard-c-toggle:hover { text-decoration: underline; }
.jobc { margin: 8px 0 2px 16px; padding: 10px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-divider); }
td .jobc { margin-left: 0; max-width: 640px; }
.jobc-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.jobc-item { padding: 8px 10px; border-radius: 10px; background: var(--color-surface-offset); }
.jobc-item.is-mine { background: var(--color-brass-soft); }
.jobc-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
.jobc-head b { color: var(--color-text); font-weight: 600; }
.jobc-del { margin-left: auto; background: none; border: 0; font: inherit; font-size: 11px; color: var(--color-text-faint); cursor: pointer; }
.jobc-del:hover { color: var(--color-error); }
.jobc-text { font-size: 14px; color: var(--color-text); line-height: 1.4; margin-top: 2px; overflow-wrap: anywhere; }
.jobc-empty { font-size: 13px; color: var(--color-text-faint); }
.jobc-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.jobc-form textarea { flex: 1; min-height: 44px; resize: vertical; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 16px; line-height: 1.35; }
.jobc-send { flex: none; min-height: 36px; }

/* ---- Name chips on yard jobs: first names, coloured by type (2026-10-07) ---- */
.ynm { --c: var(--color-text-faint); display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; margin: 1px 0; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--color-text); background: color-mix(in srgb, var(--c) 16%, transparent); white-space: nowrap; }
.ynm::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.ynm-crew { --c: #b8873d; }
.ynm-dayworker { --c: #3a7cb8; }
.ynm-contractor { --c: #3f8f52; }
.ynm.is-lead { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.ynm-lbl { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin-right: 2px; }
[data-theme='dark'] .ynm-crew { --c: #d9a866; }
[data-theme='dark'] .ynm-dayworker { --c: #7fb3d9; }
[data-theme='dark'] .ynm-contractor { --c: #8fc79a; }

.ypk-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ypk-name b { font-size: 15px; }
.ypk-full { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ypk-count { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }

/* ── CrewTune form baseline (2026-10-08) ─────────────────────────────────
   One look for every form: the style of the newer ops pages (Expiry alerts,
   Contract tracker, Rules register). `:where()` keeps specificity at zero, so
   any field that already has its own class or inline style keeps it; only
   fields that were left with the browser's default look pick this up. */
:where(#content, .tl-modal, .ops-sheet) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]), select, textarea) {
  font: inherit; font-size: var(--text-sm);
  padding: 8px 10px; min-height: 38px; box-sizing: border-box;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-bg); color: var(--color-text);
}
:where(#content, .tl-modal, .ops-sheet) :where(textarea) { min-height: 80px; line-height: 1.45; }
:where(#content, .tl-modal, .ops-sheet) :where(input, select, textarea):focus-visible {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-soft);
}
:where(#content, .tl-modal, .ops-sheet) :where(input[type=checkbox], input[type=radio]) { accent-color: var(--color-primary); }

/* Shared classes some older pages used but that were never defined. */
.input {
  font: inherit; font-size: var(--text-sm);
  padding: 8px 10px; min-height: 38px; box-sizing: border-box;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-bg); color: var(--color-text);
}
textarea.input { min-height: 80px; line-height: 1.45; }
.row { display: flex; flex-wrap: wrap; }

/* Same building blocks as the ops pages, available everywhere. */
.ctf-wrap { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-6); max-width: 920px; }
.ctf-lead { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.ctf-card { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); padding: var(--space-3); }
.ctf-h { margin: 0 0 8px; font-size: var(--text-sm); font-weight: 700; color: var(--color-text-strong, var(--color-text)); }
.ctf-help { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 6px; line-height: 1.5; }
.ctf-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ctf-tab { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  border-radius: 999px; padding: 6px 12px; font-size: var(--text-sm); cursor: pointer; font-family: inherit; }
.ctf-tab.is-active { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.ctf-f { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); }
.ctf-f > span { font-size: var(--text-xs); color: var(--color-text-muted); }
.ctf-f input, .ctf-f select, .ctf-f textarea { width: 100%; }
.ctf-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ctf-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.ctf-check { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); padding: 8px 10px;
  border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); cursor: pointer; }
.ctf-check input { margin: 0; }
.ctf-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ctf-status { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: auto; }
.ops-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;display:flex;align-items:flex-end;justify-content:center}
.ops-sheet{background:var(--color-surface);color:var(--color-text);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:16px 16px 0 0;padding:var(--space-4)}
@media (min-width:700px){.ops-overlay{align-items:center}.ops-sheet{border-radius:16px}}
.ops-sheet h3{margin:0 0 var(--space-3)}
/* Pop-ups (_dyModal, Hand to…, edit dialogs) use the same colours as the
   ops sheets and the rest of CrewTune instead of their own teal palette. */
.tl-modal-head { background: var(--color-surface-offset); }
.tl-modal-head strong { color: var(--color-text-strong, var(--color-text)); }
.tl-modal-x, .tl-modal-field > span, .tl-modal-field small { color: var(--color-text-muted); }
.tl-modal-x:hover { color: var(--color-text); }
.tl-modal-field input, .tl-modal-field select, .tl-modal-field textarea {
  background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); border-radius: 8px; font: inherit; font-size: 14px;
}
.tl-modal-field input:focus, .tl-modal-field select:focus, .tl-modal-field textarea:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.tl-modal-cancel, .tl-modal-withdraw { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.tl-modal-cancel:hover, .tl-modal-withdraw:hover { background: var(--color-surface-offset); }
.tl-modal-ok { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.tl-modal-ok:hover { background: var(--color-primary); filter: brightness(1.15); }

/* Ship particulars page (Vessel menu) */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; }
.sp-field { display: flex; flex-direction: column; gap: 4px; }
.sp-label { font-size: 0.78rem; font-weight: 600; color: rgba(30,42,56,0.72); }
.sp-edited { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #b8873d; margin-left: 4px; }
.sp-field input { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(30,42,56,0.18); background: #fff; color: inherit; }
.sp-field input:disabled { background: rgba(30,42,56,0.04); color: rgba(30,42,56,0.7); }
.sp-hint { font-size: 0.74rem; color: rgba(30,42,56,0.58); }
.sp-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.sp-actions .btn.primary { padding: 10px 22px; }
.sp-status { font-size: 0.82rem; color: rgba(30,42,56,0.6); }
.sp-sec { border: 1px solid rgba(30,42,56,0.14); border-radius: 12px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.sp-sec-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: transparent; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.sp-sec-title { font-family: var(--font-display, inherit); font-weight: 600; font-size: 1.02rem; flex: 1; }
.sp-sec-meta { font-size: 0.78rem; color: rgba(30,42,56,0.58); }
.sp-chev { font-size: 0.9rem; color: rgba(30,42,56,0.5); transition: transform .15s; transform: rotate(-90deg); }
.sp-sec.open .sp-chev { transform: rotate(0deg); }
.sp-sec-body { display: none; padding: 2px 16px 16px; }
.sp-sec.open .sp-sec-body { display: block; }
.sp-src { font-size: 0.72rem; color: rgba(30,42,56,0.5); }

/* Safety drills list (2026-10-08): status + Mark done grouped on the right,
   "Who took part" spans the text column instead of the 44px icon column. */
.card-row.drill-row { cursor: default; row-gap: var(--space-2); }
.card-row.drill-row:hover { background: transparent; }
.drill-row .drill-main { min-width: 0; }
.drill-row .drill-actions { display: flex; align-items: center; gap: var(--space-2); justify-self: end; }
.drill-row .drill-mark { cursor: pointer; }
.drill-row .drill-who { grid-column: 2 / -1; font-size: var(--text-sm); }
.drill-row .drill-who > summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  cursor: pointer; list-style: none; color: var(--color-text-muted);
  font-size: var(--text-xs); font-weight: 500; padding: 2px 0;
}
.drill-row .drill-who > summary::-webkit-details-marker { display: none; }
.drill-row .drill-who > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--transition); margin-right: 2px;
}
.drill-row .drill-who[open] > summary::before { transform: rotate(45deg); }
.drill-row .drill-who > summary:hover { color: var(--color-text); }
.drill-row .drill-count { color: var(--color-text-faint); font-weight: 400; }
.drill-row .drill-who-list {
  margin-top: var(--space-2); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); background: var(--color-surface-2); overflow: hidden;
}
.drill-row .drill-who-item { padding: var(--space-2) var(--space-3); }
.drill-row .drill-who-item + .drill-who-item { border-top: 1px solid var(--color-divider); }
.drill-row .drill-who-date { font-weight: 600; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.drill-row .drill-who-names { color: var(--color-text-muted); margin-top: 2px; line-height: 1.45; }
.drill-row .drill-who-note { color: var(--color-text-faint); font-size: var(--text-xs); margin-top: 2px; }
@media (max-width: 520px) {
  .drill-row .drill-actions { grid-column: 2 / -1; justify-self: start; }
}

/* "Test as" bar on the desktop layout (2026-10-08): it had no grid area, so it
   fell into the 280px sidebar column and wrapped word by word. Float it as a
   compact bar over the bottom-right of the page instead. */
body.desktop-mode #impBanner {
  position: fixed; right: 24px; bottom: 20px; z-index: 70;
  width: auto; max-width: calc(100vw - 280px - 48px);
  white-space: nowrap; gap: 10px !important;
  padding: 8px 8px 8px 16px !important;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(11, 31, 42, .22);
}
body.desktop-mode #impBanner > span[style*="margin-left:auto"] { margin-left: 4px !important; }

/* ---- Office · Invoices (CrewTune look, 2026-10-08) ---------------------- */
.inv-page { display: flex; flex-direction: column; gap: 18px; max-width: 1080px; padding-bottom: 32px; }
.inv-card { border: 1px solid var(--color-border, #d9d4c6); border-radius: 12px; background: var(--color-surface, #fff); padding: 14px 16px; }
.inv-card.inv-flush { padding: 0; overflow: hidden; }
.inv-muted { color: var(--color-text-muted, #5a6673); font-size: 13px; }
.inv-sub { font-size: 12.5px; line-height: 1.45; color: var(--color-text-muted, #5a6673); margin-top: 2px; }
.inv-help { margin: -4px 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--color-text-muted, #5a6673); max-width: 80ch; }
.inv-pad { padding: 0 16px 14px; margin: 0; }
.inv-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.inv-strong { font-weight: 600; }
.inv-nowrap { white-space: nowrap; }

.inv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.inv-kpi { border: 1px solid var(--color-border, #d9d4c6); border-radius: 12px; background: var(--color-surface, #fff); padding: 12px 14px; border-top: 3px solid var(--color-primary, #061733); }
.inv-kpi.is-warn { border-top-color: var(--color-brass, #b8873d); }
.inv-kpi.is-ok { border-top-color: #2e7d32; }
.inv-kpi-label { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--color-text-muted, #5a6673); }
.inv-kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--color-text, #0b1f2a); }
.inv-kpi-sub { font-size: 12px; color: var(--color-text-muted, #5a6673); margin-top: 2px; }

.inv-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; position: relative; }
.inv-status.is-warn { border-color: var(--color-brass, #b8873d); background: color-mix(in srgb, var(--color-brass, #b8873d) 7%, var(--color-surface, #fff)); }
.inv-status.is-crit { border-color: #b83131; background: color-mix(in srgb, #b83131 6%, var(--color-surface, #fff)); }
.inv-status-main { flex: 1; min-width: 240px; }
.inv-status-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-btn { appearance: none; border: 1px solid var(--color-primary, #061733); background: var(--color-primary, #061733); color: #fff; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.inv-btn:disabled { opacity: .55; cursor: default; }
.inv-btn.inv-btn-sec { background: transparent; color: var(--color-primary, #061733); }
.inv-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; border-radius: 0 0 12px 12px; }
.inv-progress span { display: block; height: 100%; width: 30%; background: var(--color-brass, #b8873d); animation: invProg 1.4s ease-in-out infinite; }
@keyframes invProg { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

.inv-section { display: flex; flex-direction: column; }
.inv-section-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.inv-section-head h3 { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; font-weight: 600; color: var(--color-text, #0b1f2a); }
.inv-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; background: var(--color-surface-offset, #f1eee6); color: var(--color-text, #0b1f2a); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-chip-warn { background: color-mix(in srgb, var(--color-brass, #b8873d) 18%, transparent); color: #7a5a22; }
.inv-chip-ok { background: color-mix(in srgb, #2e7d32 14%, transparent); color: #24622a; }
.inv-cat { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: var(--color-surface-offset, #f1eee6); color: var(--color-text, #0b1f2a); }

.inv-tbl-wrap { overflow-x: auto; }
.inv-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-tbl th { text-align: left; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; color: var(--color-text-muted, #5a6673); padding: 9px 12px; background: var(--color-surface-offset, #f6f3ec); border-bottom: 1px solid var(--color-border, #d9d4c6); white-space: nowrap; }
.inv-tbl td { padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--color-border, #d9d4c6) 60%, transparent); vertical-align: top; }
.inv-tbl tbody tr:last-child td { border-bottom: 0; }
.inv-tbl tbody tr:hover td { background: color-mix(in srgb, var(--color-brass, #b8873d) 5%, transparent); }
.inv-tbl .inv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.inv-tbl .inv-desc { min-width: 200px; }

.inv-import { border: 1px solid var(--color-border, #d9d4c6); border-radius: 12px; background: var(--color-surface, #fff); margin-bottom: 10px; overflow: hidden; }
.inv-import > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; }
.inv-import > summary::-webkit-details-marker { display: none; }
.inv-import[open] > summary { border-bottom: 1px solid var(--color-border, #d9d4c6); }
.inv-caret { width: 8px; height: 8px; margin-top: 6px; border-right: 2px solid var(--color-text-muted, #5a6673); border-bottom: 2px solid var(--color-text-muted, #5a6673); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.inv-import[open] .inv-caret { transform: rotate(45deg); }
.inv-import-main { flex: 1; min-width: 0; }
.inv-import-file { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.inv-import-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.inv-import-amt { font-family: var(--font-display); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-empty { padding: 12px 16px; font-size: 13px; color: var(--color-text-muted, #5a6673); }
.inv-notes-list { margin: 0; padding: 12px 16px 14px 34px; font-size: 13px; line-height: 1.5; color: var(--color-text, #0b1f2a); }
.inv-notes-list li + li { margin-top: 4px; }
.inv-files { list-style: none; margin: 0; padding: 0; }
.inv-files li { padding: 9px 16px; border-bottom: 1px solid color-mix(in srgb, var(--color-border, #d9d4c6) 60%, transparent); font-size: 13px; overflow-wrap: anywhere; }
.inv-files li:last-child { border-bottom: 0; }

@media (max-width: 760px) {
  .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inv-kpi-value { font-size: 24px; }
  /* Tables become stacked rows: label on the left, value on the right. */
  .inv-tbl thead { display: none; }
  .inv-tbl, .inv-tbl tbody, .inv-tbl tr, .inv-tbl td { display: block; width: 100%; }
  .inv-tbl tr { padding: 10px 14px; border-bottom: 1px solid var(--color-border, #d9d4c6); }
  .inv-tbl tbody tr:last-child { border-bottom: 0; }
  .inv-tbl td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .inv-tbl td::before { content: attr(data-l); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted, #5a6673); text-align: left; flex: none; padding-top: 2px; }
  .inv-tbl .inv-num { text-align: right; }
  .inv-tbl .inv-desc { min-width: 0; }
  .inv-tbl tbody tr:hover td { background: transparent; }
  .inv-import-amt { font-size: 16px; }
}
.inv-page #invWrap, .inv-page #invImported { display: flex; flex-direction: column; gap: 18px; }
.inv-page #invImported:empty { display: none; }
.inv-import > summary::after, .inv-import > summary::before { content: none !important; display: none !important; }
.inv-import > summary .inv-caret { display: block; }
.inv-section .inv-import { margin-bottom: 10px; }
.inv-section .inv-import:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .inv-tbl td::before { font-family: var(--font-display); font-weight: 600; font-size: 11px; color: var(--color-text-muted, #5a6673); letter-spacing: .08em; }
  .inv-tbl td.inv-mono::before { font-family: var(--font-display); }
  .inv-status-actions { width: 100%; }
}
/* HQ Noticeboard aligned with the other CrewTune pages (2026-10-08):
   standard page header, same left edge as the rest of the app, card borders,
   pill toggles, filters on one line. */
.office-notices-header.detail-hero { padding: var(--space-4) 0; }
.office-notice-filters { padding: 0 0 var(--space-4); gap: var(--space-3); }
.office-filter select { padding: 6px 10px; border-radius: var(--radius-md); font-size: var(--text-sm); }
.office-notices-list { padding: 0 0 var(--space-6); gap: var(--space-3); }
.office-notice {
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-4);
}
.office-notice.is-pinned {
  border-color: var(--color-divider); box-shadow: var(--shadow-sm);
}
.office-notice-head { align-items: center; }
.office-notice-title h3 { font-size: 18px; }
.office-pin { margin-right: 8px; font-size: 12px; vertical-align: 2px; }
.office-notice-toggle {
  border: 1px solid var(--color-divider); border-radius: 999px;
  padding: 4px 12px; font-family: inherit; font-size: var(--text-xs);
  color: var(--color-text-muted); background: var(--color-surface);
}
.office-notice-toggle:hover { color: var(--color-text); text-decoration: none; background: var(--color-surface-2); }
.office-notice:not(.is-open) .office-notice-tags { margin-top: var(--space-2); }
.office-new-form { padding: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 520px) {
  .office-notice-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .office-filter { flex-direction: column; align-items: stretch; gap: 4px; }
  .office-filter select { width: 100%; }
  .office-notice-head { align-items: flex-start; }
}
.inv-page .inv-hero { margin-bottom: 0; }
.inv-page .inv-hero .sub { max-width: 80ch; line-height: 1.5; }

/* Certificate tile: expired / within 60 days / valid in one box (2026-10-09) */
.cert-split { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--color-text-muted); line-height: 1.3; }
.cert-split:empty { display: none; }
.cert-split .cs { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cert-split .cs i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cert-split .cs-crit i { background: #9a2b2b; }
.cert-split .cs-warn i { background: #b8873d; }
.cert-split .cs-ok i { background: #3f7d5a; }
.cert-split .cs-crit { color: #9a2b2b; font-weight: 600; }

/* Certificate tile v2: vessel list with border + crew toggle */
.cert-card { cursor: default; }
.cert-card:hover { transform: none; }
.cert-body { display: flex; flex-direction: column; gap: 8px; }
.cert-list { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 4px; }
.cert-list li { display: grid; grid-template-columns: 7px 1fr auto; align-items: baseline; gap: 6px; font-size: 12px; line-height: 1.35; color: var(--color-text); }
.cert-list li i { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.cert-list li em { font-style: normal; font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.cert-list .cl-crit i { background: #9a2b2b; }
.cert-list .cl-warn i { background: #b8873d; }
.cert-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 0 0; border: 0; border-top: 1px solid var(--color-border); background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-text); cursor: pointer; text-align: left; }
.cert-toggle > span:first-child { flex: 1; }
.cert-toggle b { font-size: 11px; font-weight: 600; }
.cert-toggle .cs-warn { color: #b8873d; }
.cert-toggle .cert-chev { color: var(--color-text-muted); width: 12px; text-align: right; }
.cert-crew { display: flex; flex-direction: column; gap: 8px; }
.cert-crew[hidden] { display: none; }
.cert-cta { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }

/* Crew home: collapsible boxes + merged contract & payroll tile */
[data-home-collapse] { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.home-tile-caret { display:inline-block; margin-left:8px; font-size:14px; line-height:1; color:var(--color-text-muted); transition: transform .18s ease; }
.home-reorder-item.is-collapsed .home-tile-caret { transform: rotate(-90deg); }
.home-reorder-item.is-collapsed [data-home-collapse] ~ * { display: none !important; }
.home-tile-section { cursor: pointer; }
/* Quick row as a home block (2026-10-09) */
.home-quick { margin-top: var(--space-3); }
.home-quick-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 0; }
.home-quick-head .home-tile-label { flex: 1; }
.home-quick .quickgrid { margin-top: var(--space-2); }
.home-tile-divided { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-divider, rgba(0,0,0,.08)); cursor: default; }
.home-tile-divided .home-tile-head { margin-bottom: 4px; }
[data-home-collapse] > :first-child { flex: 1; }

/* Watches: onboard-only (9 Oct 2026) */
.dd-stamp.dd-stamp-off { flex-wrap: wrap; background: #fdecea; border-color: #e5a29b; color: #8a2a20; }
.dd-stamp-flag { display: block; flex-basis: 100%; font-size: 9px; font-weight: 600; line-height: 1.1; color: #b3261e; }
.dd-pool-note { margin-left: 6px; font-size: 10px; font-weight: 600; color: var(--color-text-muted); }
.dd-pool-chip.dd-pool-off { opacity: .45; }
.dd-conflict-banner { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: #fdecea; border: 1px solid #e5a29b; color: #6e1f17; border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.4; }
.sw-chip.sw-chip-off { background: #fdecea; border-color: #e5a29b; }
.sw-chip-flag { font-size: 9px; font-weight: 700; color: #b3261e; text-transform: uppercase; letter-spacing: .02em; }

/* Charter watches (9 Oct 2026) */
.cw-pick { width: 100%; max-width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); }
.cw-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cw-team { background: var(--color-surface-alt); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.cw-team-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); margin-bottom: 4px; }
.cw-team-n { display: flex; flex-wrap: wrap; gap: 4px; }
.cw-hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cw-name { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); }
.cw-name.is-key { background: #fff6c7; border-color: #e6cf6a; }
.cw-name.is-me { outline: 2px solid var(--color-primary); outline-offset: 0; }
.cw-none { color: var(--color-text-muted); font-size: 12px; }
.cw-days { padding: var(--space-3) var(--space-4); display: grid; gap: 8px; }
.cw-day { border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; background: var(--color-surface); }
.cw-day.is-today { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.cw-day.is-past { opacity: .6; }
.cw-day-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.cw-port { font-weight: 500; color: var(--color-text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cw-today { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--color-primary); }
.cw-row { display: grid; grid-template-columns: 74px 92px minmax(0, 1fr); align-items: center; gap: 6px; padding: 3px 0; border-top: 1px dashed var(--color-border); font-size: 12px; }
.cw-row:first-of-type { border-top: 0; }
.cw-t { font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-size: 11px; }
.cw-t-long { font-size: 10px; line-height: 1.15; }
.cw-r { font-weight: 600; }
.cw-p { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cw-away { margin-top: 4px; font-size: 11px; color: #8a2a20; }
.cw-ed-team { border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.cw-ed-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.cw-ed-n { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.cw-add, .cw-ov select { font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); max-width: 100%; }
.cw-add { width: 100%; margin-top: 4px; }
.cw-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cw-time { display: grid; gap: 2px; font-size: 11px; color: var(--color-text-muted); }
.cw-time input { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); background: var(--color-surface); }
.cw-ov { display: grid; gap: 4px; }
.cw-ov-row { display: grid; grid-template-columns: 78px repeat(3, minmax(0, 1fr)); gap: 4px; align-items: center; font-size: 12px; }
.cw-ov-d { font-weight: 600; }
.cw-rules { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px; border: 1px solid var(--color-border); border-radius: 8px; }
.cw-ed-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.cw-ov-head { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); }
.cw-mini { flex: 0 0 auto; width: 30px; height: 28px; padding: 0; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font-size: 14px; line-height: 1; cursor: pointer; }
.cw-mini:disabled { opacity: .35; cursor: default; }
.cw-ed-n .dd-pool-note { display: inline-block; }
.cw-time input { width: 100%; min-width: 0; box-sizing: border-box; }
.cw-time { min-width: 0; }
.cw-ov select { width: 100%; min-width: 0; }
.cw-ov select.is-set { border-color: #e6cf6a; background: #fff6c7; font-weight: 600; }

/* Active watches bar (9 Oct 2026) */
.wm-bar { margin: 0 var(--space-4) var(--space-3); padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.wm-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); margin-bottom: 6px; }
.wm-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wm-fixed { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: #e8f5e3; color: #24572a; border: 1px solid #b9dcb0; white-space: nowrap; }
.wm-plus { color: var(--color-text-muted); font-weight: 700; }
.wm-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wm-btn { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text); cursor: pointer; }
.wm-btn.is-on { background: #24572a; border-color: #24572a; color: #fff; }
.wm-btn:disabled { cursor: default; opacity: 1; }
.wm-btn:disabled:not(.is-on) { opacity: .55; }
.wm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2f8a3a; margin-right: 5px; vertical-align: middle; }
.wm-fixed .wm-dot { margin-right: 0; }
.wm-note { margin-top: 6px; font-size: 12px; color: var(--color-text-muted); }
.wm-times { margin-top: 8px; font-size: 12px; color: var(--color-text); }
.wm-unset { color: var(--color-text-muted); font-style: normal; }
.wm-link { font: inherit; font-size: 12px; font-weight: 600; background: none; border: 0; padding: 0 0 0 4px; color: var(--color-primary, #01696f); text-decoration: underline; cursor: pointer; }
.wm-times-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wm-times-edit label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--color-text-muted); min-width: 0; }
.wm-times-edit input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 14px; padding: 7px 8px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); }
.wm-times-btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.wm-cancel, .wm-save { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.wm-cancel { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.wm-save { background: #24572a; border: 1px solid #24572a; color: #fff; }
/* Home watches card: who is on today */
.watch-today { margin-top: 6px; font-size: 12px; }
.watch-today .wt-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); margin-bottom: 2px; }
.watch-today .wt-row { display: flex; gap: 6px; justify-content: space-between; line-height: 1.45; }
.watch-today .wt-l { color: var(--color-text-muted); white-space: nowrap; }
.watch-today .wt-t { opacity: .8; }
.watch-today .wt-n { text-align: right; }
.watch-today .wt-empty { color: var(--color-text-muted); }
.watch-compact #homeWatchTime, .watch-compact #homeWatchWith { white-space: normal; overflow: visible; text-overflow: clip; }
.watch-today .wt-sec { margin-top: 6px; }
.watch-today .wt-sec + .wt-sec { padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }
.watch-today .wt-row.is-now .wt-l, .watch-today .wt-row.is-now .wt-n { color: inherit; font-weight: 700; }
.watch-today .wt-nowtag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 0 5px; border-radius: 6px; background: #2f8a3a; color: #fff; margin-left: 4px; }
.watch-today details.wt-more { margin-top: 8px; }
.watch-today details.wt-more > summary { cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); }
.watch-today details.wt-more > summary::-webkit-details-marker { display: none; }
.watch-today details.wt-more > summary::after { content: '▾'; font-size: 11px; }
.watch-today details.wt-more[open] > summary::after { content: '▴'; }
.watch-today .wt-ht { text-transform: none; letter-spacing: 0; }
/* Daily duty is boat care, not working hours (Fosse, 9 Oct 2026) */
.watch-with .wt-duty { margin-top: 2px; }
.wt-duty-note { opacity: .75; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Settings page: foldable blocks */
.app-settings-fold > summary::-webkit-details-marker { display: none; }
.app-settings-fold > summary:focus-visible { outline: 2px solid var(--color-primary, #061733); outline-offset: -2px; border-radius: 10px; }
.app-settings-fold .app-settings-fold-chev { transition: transform .15s ease; transform: rotate(-90deg); }
.app-settings-fold[open] .app-settings-fold-chev { transform: none; }
@media (prefers-reduced-motion: reduce) { .app-settings-fold .app-settings-fold-chev { transition: none; } }

/* On/off switch (Settings > Public boards) */
input.ct-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 14px; background: #b9b6ae; border: 0; cursor: pointer; transition: background .15s ease; }
input.ct-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s ease; }
input.ct-switch:checked { background: #1f7a4d; }
input.ct-switch:checked::after { transform: translateX(18px); }
input.ct-switch:disabled { opacity: .5; cursor: progress; }
input.ct-switch:focus-visible { outline: 2px solid var(--color-primary, #061733); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { input.ct-switch, input.ct-switch::after { transition: none; } }

/* ---- Guest preference lists on the preference sheets page (2026-10-16) ---- */
.eps-prefs { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.eps-prefs ul { margin: 4px 0 0; padding-left: 18px; }
.eps-prefs li { margin: 2px 0; }
.eps-pref-sub { display: block; font-size: 12px; color: var(--color-text-muted); }
.eps-pref-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; }
details.eps-pref-sec > summary { cursor: pointer; }
.eps-pref-guest { margin-top: 8px; }
.eps-pref-guest > strong { font-size: 13px; }
.eps-pref-diet { border-left: 3px solid #A13544; background: rgba(161, 53, 68, .08); padding: 8px 10px; border-radius: 4px; }
.eps-pref-diet .eps-pref-h { color: #A13544; }
.eps-pref-src { font-size: 12px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: 8px; }
.eps-pref-src a { color: inherit; text-decoration: underline; }
@media (max-width: 600px) {
  .ce-row[data-eps-id] { flex-wrap: wrap; row-gap: 8px; }
  .ce-row[data-eps-id] .ce-main { flex: 1 1 100%; min-width: 0; }
  .ce-row[data-eps-id] > .ce-swatch { display: none; }
}