/**
 * Spec 0907b · Yacht Passport pre-pay UI · styles.
 *
 * Uses shipped concierge palette tokens from oem-dashboard.css :root
 * (ymh-ink, ymh-orange, ymh-panel, etc.). Kept intentionally scoped
 * to `.passport-*` classes so it does not leak into other panels.
 */

#ymh-passport-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: inherit;
  color: var(--ymh-ink, #0b1e33);
}

/* ── Header ───────────────────────────────────────────────────── */

.passport-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--ymh-panel, #ffffff);
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--ymh-border, #e6ecf3);
}
.passport-photo {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--ymh-bg, #f5f7f9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
  font-size: 10px;
  line-height: 1.2;
  color: var(--ymh-muted, #6b8099);
  cursor: pointer;
  border: 1px dashed var(--ymh-border, #e6ecf3);
}
.passport-photo:focus { outline: 2px solid var(--ymh-link, #0d426a); outline-offset: 2px; }
.passport-header-summary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.passport-header-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ymh-ink, #0b1e33);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.passport-header-name--empty { font-weight: 500; color: var(--ymh-muted, #6b8099); }
.passport-header-meta {
  font-size: 12px;
  color: var(--ymh-muted, #6b8099);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}
.passport-header-meta--muted { color: var(--ymh-muted-light, #94a3b8); font-style: italic; }

/* ── Completion pill ─────────────────────────────────────────── */

.passport-completion {
  background: var(--ymh-panel, #ffffff);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ymh-border, #e6ecf3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.passport-completion-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.passport-completion-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ymh-ink, #0b1e33);
  white-space: nowrap;
}
.passport-completion-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--ymh-bg, #f5f7f9);
  overflow: hidden;
}
.passport-completion-fill {
  height: 100%;
  background: var(--ymh-orange, #f5a623);
  border-radius: 3px;
  transition: width 240ms ease-out;
}
.passport-completion-hint {
  font-size: 11px;
  color: var(--ymh-link, #0d426a);
  font-weight: 500;
  line-height: 1.4;
}

/* ── Sections ────────────────────────────────────────────────── */

.passport-section {
  background: var(--ymh-panel, #ffffff);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--ymh-border, #e6ecf3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.passport-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px 0;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}
.passport-section-header:focus-visible {
  outline: 2px solid var(--ymh-link, #0d426a);
  outline-offset: 2px;
  border-radius: 4px;
}
.passport-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ymh-muted, #6b8099);
}
.passport-section-check { color: #16a34a; font-weight: 700; font-size: 11px; }

/* ── Field rows ──────────────────────────────────────────────── */

.passport-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--ymh-bg, #f5f7f9);
  font-size: 12.5px;
}
.passport-field-row:first-of-type { border-top: 0; }
.passport-field-label {
  color: var(--ymh-muted, #6b8099);
  min-width: 68px;
  font-size: 11px;
  font-weight: 500;
}
.passport-field-value {
  flex: 1;
  color: var(--ymh-ink, #0b1e33);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.passport-field-check { color: #16a34a; font-weight: 700; font-size: 12px; }
/* Estimated or awaiting confirmation. Amber, matching the Add-Next chip's
   inferred/pending treatment, so an estimate never wears the verified green. */
.passport-field-est { color: #d29922; font-weight: 700; font-size: 12px; cursor: help; }
.passport-field-add {
  border: none;
  background: transparent;
  color: var(--ymh-link, #0d426a);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.passport-field-add:hover { background: var(--ymh-bg, #f5f7f9); }
.passport-field-edit {
  border: none;
  background: transparent;
  color: var(--ymh-muted, #6b8099);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.passport-field-edit:hover { background: var(--ymh-bg, #f5f7f9); color: var(--ymh-link, #0d426a); }
.passport-field-row--empty { color: var(--ymh-muted, #6b8099); }

/* ── Inline field editor ─────────────────────────────────────── */

.passport-field-editor {
  padding: 10px 0;
  border-top: 1px solid var(--ymh-bg, #f5f7f9);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.passport-field-editor label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ymh-muted, #6b8099);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.passport-field-editor input {
  padding: 8px 10px;
  border: 1px solid var(--ymh-border, #e6ecf3);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ymh-ink, #0b1e33);
  background: var(--ymh-panel, #ffffff);
  min-width: 0;
}
.passport-field-editor input:focus {
  outline: none;
  border-color: var(--ymh-link, #0d426a);
  box-shadow: 0 0 0 3px rgba(13, 66, 106, 0.12);
}
.passport-field-editor-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.passport-field-editor-error {
  color: #b91c1c;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 0;
}
.passport-btn-primary {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: var(--ymh-link, #0d426a);
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.passport-btn-primary:hover { background: var(--ymh-ink-2, #171c2f); }
.passport-btn-ghost {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--ymh-border, #e6ecf3);
  background: var(--ymh-panel, #ffffff);
  color: var(--ymh-muted, #6b8099);
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
}
.passport-btn-ghost:hover { background: var(--ymh-bg, #f5f7f9); color: var(--ymh-ink, #0b1e33); }

/* ── Engine row / bundled editor ─────────────────────────────── */

.passport-engine-row {
  padding: 6px 0;
  border-top: 1px solid var(--ymh-bg, #f5f7f9);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
}
.passport-engine-row:first-of-type { border-top: 0; }
.passport-engine-desc {
  font-weight: 500;
  color: var(--ymh-ink, #0b1e33);
}
.passport-engine-hours {
  font-size: 11px;
  color: var(--ymh-muted, #6b8099);
}
.passport-engine-hours-edit { padding: 0; }

.passport-engine-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--ymh-bg, #f5f7f9);
}
.passport-engine-editor label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ymh-muted, #6b8099);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.passport-engine-editor input {
  padding: 6px 8px;
  border: 1px solid var(--ymh-border, #e6ecf3);
  border-radius: 5px;
  font-size: 12px;
  font-family: inherit;
  color: var(--ymh-ink, #0b1e33);
  background: var(--ymh-panel, #ffffff);
  min-width: 0;
}
.passport-engine-editor-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ── Locked sections divider + rows ──────────────────────────── */

.passport-locked-divider {
  font-size: 10px;
  font-weight: 600;
  color: var(--ymh-muted-light, #94a3b8);
  text-align: center;
  padding: 6px 0 2px;
  letter-spacing: 0.4px;
}
.passport-locked-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ymh-panel, #ffffff);
  border-radius: 8px;
  border: 1px solid var(--ymh-border, #e6ecf3);
  text-decoration: none;
  color: var(--ymh-muted, #6b8099);
  font-size: 13px;
  transition: background 120ms;
}
.passport-locked-row:hover { background: var(--ymh-bg, #f5f7f9); }
.passport-locked-icon { font-size: 12px; opacity: 0.6; }
.passport-locked-label { font-weight: 500; }

/* ── Unlock card ─────────────────────────────────────────────── */

.passport-unlock-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ymh-orange, #f5a623) 0%, #fe8352 100%);
  color: var(--ymh-ink-2, #171c2f);
  text-decoration: none;
  margin-top: 4px;
}
.passport-unlock-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ymh-ink-2, #171c2f);
}
.passport-unlock-subtitle {
  font-size: 12px;
  color: var(--ymh-ink-2, #171c2f);
  opacity: 0.85;
  line-height: 1.4;
}
.passport-unlock-cta {
  margin-top: 6px;
  font-weight: 700;
  font-size: 12px;
  color: var(--ymh-ink-2, #171c2f);
}

/* ── Popover section (pops UP above header, does not reflow) ──
   Owner feedback 2026-08-20: expanding a section inline pushed
   content below off the rail and (on mobile) off the sheet. Now
   expanded sections render their body as a position: absolute
   popover anchored to the section header, opening upward and
   overlaying whatever's above. Radio behavior: only one open at
   a time; tapping another header closes the current one. */

.passport-section--pop {
  position: relative;
  overflow: visible;
}
.passport-section-body {
  display: none;
}
.passport-section-body[data-active="true"],
.passport-section-body[data-closing="true"] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--ymh-panel, #ffffff);
  border: 1px solid var(--ymh-border, #e6ecf3);
  border-radius: 10px;
  padding: 10px 14px 12px;
  box-shadow: 0 12px 32px rgba(11, 20, 32, 0.16),
              0 4px 8px rgba(11, 20, 32, 0.06);
  z-index: 40;
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
  animation: passport-popover-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* Exit: animate out, then the JS drops data-closing and display:none
   takes over. A blink-off close is half of the dated feel. */
.passport-section-body[data-closing="true"] {
  animation: passport-popover-out 150ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  pointer-events: none;
}
.passport-section-body[data-active="true"]::-webkit-scrollbar {
  width: 4px;
}
.passport-section-body[data-active="true"]::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 2px;
}
@keyframes passport-popover-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes passport-popover-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

/* Scrim behind the open popover so click-outside is intuitive.
   Placed inline (::before on the container) rather than as a
   separate element so it moves with the rail. */
#ymh-passport-rail::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(11, 20, 32, 0.05);
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
#ymh-passport-rail:has(.passport-section-body[data-active="true"])::before {
  opacity: 1;
}

/* ── Collapsible section header ─────────────────────────────── */

.passport-section-header--collapsible { padding: 0; }
.passport-section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.passport-section-toggle:focus-visible {
  outline: 2px solid var(--ymh-link, #0d426a);
  outline-offset: 2px;
  border-radius: 4px;
}
.passport-section-chevron {
  margin-left: auto;
  color: var(--ymh-muted, #6b8099);
  font-size: 11px;
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.passport-section-toggle[aria-expanded="true"] .passport-section-chevron {
  transform: rotate(90deg);
}

/* ── Compliance rows ─────────────────────────────────────────── */

.passport-comp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--ymh-bg, #f5f7f9);
  font-size: 12.5px;
}
.passport-comp-row:first-of-type { border-top: 0; }
.passport-comp-label {
  color: var(--ymh-ink, #0b1e33);
  font-weight: 500;
  min-width: 92px;
}
.passport-comp-chip {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
}
.passport-comp-chip--empty {
  background: var(--ymh-bg, #f5f7f9);
  color: var(--ymh-muted, #6b8099);
}
.passport-comp-chip--green {
  background: #dcfce7;
  color: #166534;
}
.passport-comp-chip--amber {
  background: #fef3c7;
  color: #92400e;
}
.passport-comp-chip--red {
  background: #fee2e2;
  color: #991b1b;
}

/* ── Documents folders ───────────────────────────────────────── */

.passport-doc-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--ymh-bg, #f5f7f9);
  font-size: 12.5px;
}
.passport-doc-folder:first-of-type { border-top: 0; }
.passport-doc-icon { font-size: 14px; }
.passport-doc-label {
  color: var(--ymh-ink, #0b1e33);
  font-weight: 500;
}
.passport-doc-count {
  color: var(--ymh-muted, #6b8099);
  font-size: 11px;
  margin-left: 4px;
}
.passport-doc-upload {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--ymh-link, #0d426a);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.passport-doc-upload:disabled {
  color: var(--ymh-muted-light, #94a3b8);
  cursor: not-allowed;
}
/* Folder state chips subtly tint the icon */
.passport-doc-folder--tan .passport-doc-icon { opacity: 0.55; }
.passport-doc-folder--partial .passport-doc-icon { opacity: 0.8; }
.passport-doc-folder--green .passport-doc-icon { filter: hue-rotate(80deg) saturate(1.2); }
.passport-doc-folder--amber .passport-doc-icon { filter: sepia(0.5) saturate(1.5); }
.passport-doc-folder--red .passport-doc-icon { filter: hue-rotate(-40deg) saturate(1.4); }

/* ── Systems rows ────────────────────────────────────────────── */

.passport-sys-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--ymh-bg, #f5f7f9);
  font-size: 12px;
}
.passport-sys-row:first-of-type { border-top: 0; }
.passport-sys-label {
  color: var(--ymh-ink, #0b1e33);
  font-weight: 500;
  flex: 1;
}
.passport-sys-count {
  color: var(--ymh-muted, #6b8099);
  font-size: 11px;
}

/* ── Inspections ─────────────────────────────────────────────── */

.passport-insp-empty {
  color: var(--ymh-muted, #6b8099);
  font-size: 12px;
  padding: 4px 0;
}
.passport-insp-line {
  font-size: 12px;
  color: var(--ymh-ink, #0b1e33);
  padding: 4px 0;
}
.passport-insp-warn { color: #b45309; font-weight: 500; }
.passport-insp-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--ymh-orange, #f5a623);
  color: var(--ymh-ink-2, #171c2f);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
}
.passport-insp-cta:hover { filter: brightness(0.96); }

/* ── Activity strip ──────────────────────────────────────────── */

.passport-activity {
  background: var(--ymh-panel, #ffffff);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--ymh-border, #e6ecf3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.passport-activity-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ymh-muted, #6b8099);
  margin-bottom: 4px;
}
.passport-activity-empty {
  font-size: 11px;
  color: var(--ymh-muted, #6b8099);
}
.passport-activity-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 11.5px;
  padding: 3px 0;
  border-top: 1px solid var(--ymh-bg, #f5f7f9);
}
.passport-activity-row:first-of-type { border-top: 0; }
.passport-activity-text {
  flex: 1;
  color: var(--ymh-ink, #0b1e33);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.passport-activity-time {
  color: var(--ymh-muted, #6b8099);
  font-size: 10.5px;
  flex-shrink: 0;
}
.passport-activity-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.passport-activity-link:hover .passport-activity-text { color: var(--ymh-link, #0d426a); }

/* ── Loading state ───────────────────────────────────────────── */

#ymh-passport-rail[aria-busy="true"] { opacity: 0.6; }

/* ── Right rail scroll + left sidebar scrollbar hidden ───────
   Owner feedback 2026-08-20: post-pay right rail had no scroll so
   captains couldn't see below the fold. Left sidebar showed an ugly
   scrollbar that Claude / ChatGPT avoid. Fix scopes the rail to a
   viewport-relative height that scrolls internally, and hides the
   sidebar scrollbar visually while keeping keyboard/touch scroll. */

.appshell-rail {
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
  padding-right: 4px;
}
.appshell-rail::-webkit-scrollbar {
  width: 6px;
}
.appshell-rail::-webkit-scrollbar-track { background: transparent; }
.appshell-rail::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}
.appshell-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.28);
}

.appshell-sidebar {
  scrollbar-width: none;
}
.appshell-sidebar::-webkit-scrollbar {
  display: none;
}

/* ── Mobile bottom-sheet per spec 0907c §12 ──────────────────
   On <= 767.98px the passport rail becomes a bottom sheet: collapsed
   default (peek of ~130px = header + completion bar), tap the sheet
   to expand full-screen with internal scroll. Prevents the captain
   from scrolling past chat to reach the passport, which is
   unintuitive per ChatGPT/Claude conventions.

   Uses !important to win over app-shell-mobile.css which sets
   .appshell-rail { position: static !important; ... }. Same
   breakpoint (767.98px) as existing mobile rules for consistency. */

@media (max-width: 767.98px) {
  .appshell-rail {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    /* Not 0. The composer is position:fixed at the bottom edge since the
       round 12 pinning work, so a sheet at bottom:0 buries it and the
       captain cannot type at all. Sit the peek on top of the composer
       instead. --composer-h is the measured pinned height (56px) plus the
       home-indicator inset. */
    bottom: calc(var(--composer-h, 56px) + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    grid-column: unset !important;
    grid-row: unset !important;
    /* Was a 130px peek that sat there permanently. On a real iPhone, with
       the topbar, the chip row, the disclaimer, the pinned composer and
       then the keyboard, the peek left almost nothing for the actual
       conversation. The passport is a reference document, not something
       you consult mid-sentence, so it moves behind a drawer row and opens
       full screen. Hidden until asked for. */
    max-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    /* visibility:hidden already blocks hit-testing, but this element is
       position:fixed on the same edge as the composer and has been in a
       z-index fight with it once already. Say it twice. */
    pointer-events: none !important;
    transform: translateY(100%);
    max-width: 100% !important;
    background: var(--ymh-panel, #ffffff) !important;
    box-shadow: 0 -8px 24px rgba(11,20,32,0.16) !important;
    z-index: 60 !important;
    padding: 8px 12px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(11,20,32,0.08) !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    overflow-y: auto !important;
    scrollbar-width: none;
    transition: max-height 220ms cubic-bezier(0.2,0.7,0.2,1),
                height 220ms cubic-bezier(0.2,0.7,0.2,1) !important;
  }
  .appshell-rail::-webkit-scrollbar { display: none; }
  .appshell-rail::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--ymh-muted-light, #94a3b8);
    margin: 0 auto 6px;
    flex-shrink: 0;
  }
  .appshell-rail::before { display: none; }
  .appshell-rail[data-expanded="true"]::before { display: block; }
  .appshell-rail[data-expanded="true"] {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none;
    padding: 8px 12px 12px !important;
    overflow-y: auto !important;
    /* Expanded is a deliberate act, so it may take the whole screen and
       cover the composer. dvh so the open keyboard does not clip it. */
    bottom: 0 !important;
    max-height: calc(100dvh - 44px) !important;
    height: calc(100dvh - 44px) !important;
    z-index: 80 !important;
  }
  /* Both the composer and the peek sheet are position:fixed, so neither
     takes part in flow. The scrollable thread is what has to reserve the
     space, or the last message sits behind them permanently. */
  /* Only the composer is fixed at the bottom now, so that is all the
     thread has to clear. The 130px the peek used to occupy goes back to
     the conversation. */
  body.eng-chatting .eng-thread {
    padding-bottom: calc(var(--composer-h, 56px) + 16px + env(safe-area-inset-bottom)) !important;
  }
  .appshell-main {
    padding-bottom: calc(var(--composer-h, 56px) + 16px) !important;
  }
}

/* Spec 0908a · first-turn walkthrough spotlight. Ring + coach mark
   appear on the target passport section when engineer.js dispatches
   ymh:walkthrough. Server-authoritative once-per-captain gate lives
   in captains.walkthrough_seen_at; the client just renders whatever
   the server tells it. */
.passport-section[data-spotlight="true"] {
  position: relative;
  border-radius: 12px;
  box-shadow:
    0 0 0 3px #F5A623,
    0 0 0 8px rgba(245, 166, 35, 0.28),
    0 12px 32px rgba(11, 20, 32, 0.16);
  animation: passport-spotlight-pulse 1600ms ease-in-out infinite;
  z-index: 5;
}
@keyframes passport-spotlight-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px #F5A623,
      0 0 0 8px rgba(245, 166, 35, 0.28),
      0 12px 32px rgba(11, 20, 32, 0.16);
  }
  50% {
    box-shadow:
      0 0 0 3px #F5A623,
      0 0 0 12px rgba(245, 166, 35, 0.12),
      0 12px 32px rgba(11, 20, 32, 0.16);
  }
}
.passport-coach-mark {
  position: sticky;
  bottom: 12px;
  margin: 16px auto 0;
  max-width: 320px;
  background: var(--ymh-ink, #0B1E33);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(11, 20, 32, 0.24);
  z-index: 6;
  animation: passport-coach-in 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes passport-coach-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .passport-section[data-spotlight="true"] { animation: none; }
  .passport-coach-mark { animation: none; }
}

/* Spec 0908b · smart Add-Next chip. Renders directly below the
   completion pill; its label + verb + accent are computed server-side
   by pickAddNextTarget and shipped as passport.add_next. Empty payload
   ⇒ "All caught up" achievement state. */
.passport-add-next {
  margin: 6px 2px 10px;
}
.passport-add-next-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ymh-bg, #F5F7F9);
  border: 1.5px solid var(--ymh-border, #e6ecf3);
  color: var(--ymh-ink, #0B1E33);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.passport-add-next-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 20, 32, 0.08);
}
.passport-add-next-chip:focus-visible {
  outline: 2px solid #F5A623;
  outline-offset: 2px;
}
.passport-add-next-verb {
  font-weight: 700;
}
.passport-add-next-dot {
  color: var(--ymh-muted, #4a5b6e);
  font-weight: 700;
}
.passport-add-next-label {
  font-weight: 600;
}

/* State accents. Verb color + border tint per state. */
.passport-add-next[data-add-next-state="unknown"] .passport-add-next-chip,
.passport-add-next[data-add-next-state="inferred"] .passport-add-next-chip {
  border-color: #F5A623;
}
.passport-add-next[data-add-next-state="unknown"] .passport-add-next-verb,
.passport-add-next[data-add-next-state="inferred"] .passport-add-next-verb {
  color: #F5A623;
}
.passport-add-next[data-add-next-state="pending"] .passport-add-next-chip {
  border-color: #D29922;
}
.passport-add-next[data-add-next-state="pending"] .passport-add-next-verb {
  color: #D29922;
}
.passport-add-next[data-add-next-state="expired"] .passport-add-next-chip,
.passport-add-next[data-add-next-state="attention"] .passport-add-next-chip {
  border-color: #EC4C3D;
}
.passport-add-next[data-add-next-state="expired"] .passport-add-next-verb,
.passport-add-next[data-add-next-state="attention"] .passport-add-next-verb {
  color: #EC4C3D;
}

.passport-add-next-chip--done {
  cursor: default;
  border-color: #16A34A;
  color: #16A34A;
  background: rgba(22, 163, 74, 0.06);
}
.passport-add-next-chip--done:hover {
  transform: none;
  box-shadow: none;
}

/* Way out of the full-screen passport on mobile. Hidden on desktop, where
   the rail is a column on the page and there is nothing to close. */
.passport-sheet-close { display: none; }
@media (max-width: 767.98px) {
  .appshell-rail[data-expanded="true"] .passport-sheet-close,
  .appshell-rail[data-expanded="true"] > .passport-sheet-close {
    display: block;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 0 8px auto;
    min-height: 44px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: var(--ymh-ink, #0b1e33);
    background: var(--ymh-panel, #fff);
    border: 1px solid var(--ymh-line, #ebedf0);
    border-radius: 999px;
    cursor: pointer;
  }
}

/* ── Add-Next in-place survey (owner redesign 2026-08-21) ──────────────
 * The chip container swaps to this editor in the same spot. min-height
 * matches the chip row so the swap never shifts the rail below it. */
.passport-add-next {
  min-height: 38px;
  /* The open editor must always paint above the section cards below it —
     the owner caught the Save button rendering behind the identity card
     (2026-08-21). Below the popover layer (z 40) on purpose. */
  position: relative;
  z-index: 20;
}
.passport-add-next-editor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--ymh-bg, #F5F7F9);
  border: 1.5px solid #F5A623;
}
.passport-add-next-q {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ymh-ink, #0B1E33);
  white-space: nowrap;
}
.passport-add-next-editor input {
  flex: 1 1 90px;
  min-width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--ymh-border, #e6ecf3);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}
.passport-add-next-bundle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 100%;
}
.passport-add-next-bundle input[type="number"] {
  flex: 0 1 80px;
}
.passport-add-next-close {
  background: transparent;
  border: 0;
  padding: 2px 6px;
  font-size: 16px;
  line-height: 1;
  color: var(--ymh-muted, #4a5b6e);
  cursor: pointer;
}
.passport-add-next-error {
  flex: 1 1 100%;
  font-size: 12px;
  color: #b3261e;
}
/* Reward pulse when completeness ticks up after a survey save. */
@keyframes passport-completion-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.passport-completion--bump {
  animation: passport-completion-bump 420ms ease;
}
.passport-completion--bump .passport-completion-fill {
  transition: width 380ms ease;
}
.passport-completion-fill { transition: width 380ms cubic-bezier(0.32, 0.72, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  .passport-completion--bump { animation: none; }
  .passport-section-body[data-active="true"],
  .passport-section-body[data-closing="true"] { animation: none; }
  .passport-section-chevron { transition: none; }
  #ymh-passport-rail::before { transition: none; }
  .passport-completion-fill { transition: none; }
}

/* ── One-screen card: pinned summary + internal scroll (2026-08-21) ──
 * The rail splits into a pinned zone (header, completeness, survey
 * chip) and a scroll zone (sections). The viewport cap and internal
 * scroll are DESKTOP-ONLY: a nested scroll region on a phone page that
 * already scrolls is a trap, so under 768px both zones flow naturally
 * and app-shell-mobile.css keeps governing. */
.passport-rail-pin,
.passport-rail-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

@media (min-width: 768px) {
  #ymh-passport-rail {
    /* No position:sticky here — the right column also holds the legacy
       crew + save-work widgets below the rail, and a stuck rail slides
       over them as the page scrolls (owner screenshot 2026-08-21,
       "scroll is now conflicting with captain profile icon"). The cap
       plus internal scroll below keep the one-screen behavior. */
    max-height: calc(100dvh - 92px);
    overflow: hidden;
  }
  .passport-rail-pin { flex: 0 0 auto; }
  .passport-rail-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .passport-rail-scroll::-webkit-scrollbar { width: 4px; }
  .passport-rail-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 2px;
  }
  /* Popovers open DOWNWARD on desktop: the upward anchor (kept below
     for the mobile bottom sheet) would clip against the top edge of
     the scroll zone. Downward growth extends scrollable overflow
     instead, so nothing is ever cut off. */
  .passport-section-body[data-active="true"],
  .passport-section-body[data-closing="true"] {
    bottom: auto;
    top: calc(100% + 6px);
  }
}

/* ── Section status chips (at-a-glance state on collapsed headers) ── */
.passport-section-status {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.passport-section-header--collapsible .passport-section-chevron { margin-left: 8px; }
.passport-section-status--green { background: #e6f6ec; color: #1c7c3f; }
.passport-section-status--amber { background: #fff4e0; color: #9a6b00; }
.passport-section-status--red   { background: #fdecea; color: #b3261e; }
.passport-section-status--muted { background: var(--ymh-bg, #f5f7f9); color: var(--ymh-muted, #6b8099); }

/* ── Activity preview: three rows, the rest behind View all ───────── */
.passport-activity-row--extra { display: none; }
.passport-activity[data-expanded="true"] .passport-activity-row--extra { display: flex; }
a.passport-activity-link.passport-activity-row--extra { display: none; }
.passport-activity[data-expanded="true"] a.passport-activity-link.passport-activity-row--extra { display: block; }
.passport-activity-more {
  background: transparent;
  border: 0;
  padding: 4px 0 0;
  color: var(--ymh-link, #0d426a);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

/* Survey Skip — quiet by design: Save is the primary action, Skip is
   the escape hatch for "I don't know that one right now". */
.passport-add-next-skip {
  background: transparent;
  border: 0;
  padding: 6px 8px;
  color: var(--ymh-muted, #6b8099);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.passport-add-next-skip:hover { color: var(--ymh-ink, #0b1e33); text-decoration: underline; }

/* ── View Transitions + native spring easing (2026-08-21) ───────────
 * The rail owns its own snapshot so only the card morphs on re-render;
 * the rest of the page stays untouched. Timing tuned short — a state
 * change should read as continuity, not a slideshow. */
#ymh-passport-rail {
  view-transition-name: passport-rail;
}
::view-transition-old(passport-rail),
::view-transition-new(passport-rail) {
  animation-duration: 200ms;
  animation-timing-function: ease;
}

/* Native spring physics where the browser has linear() easing —
 * a light underdamped spring; everyone else keeps the cubic-bezier
 * curves declared above. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ymh-spring: linear(
      0, 0.0047 0.9%, 0.0195 1.9%, 0.0462 3%, 0.0921 4.5%, 0.1809 7%,
      0.4194 12.6%, 0.5417 15.4%, 0.6544 18.2%, 0.7561 21.1%, 0.8442 24.1%,
      0.9169 27.2%, 0.9748 30.5%, 1.0163 33.8%, 1.0429 37.4%, 1.0562 41.2%,
      1.0576 45.4%, 1.0439 53.2%, 1.0206 62.1%, 1.0052 72.6%, 0.9993 85.4%, 1
    );
  }
  .passport-section-chevron {
    transition-timing-function: var(--ymh-spring);
    transition-duration: 320ms;
  }
  .passport-section-body[data-active="true"] {
    animation-timing-function: var(--ymh-spring);
    animation-duration: 280ms;
  }
  .passport-completion-fill {
    transition-timing-function: var(--ymh-spring);
  }
}