@layer components {
  /* ── Host folder ─────────────────────────────────────────────
     Same clipboard architecture as /stay (cork desk, landscape,
     masonite tray, paper, metal clip). The paper carries:
       1. A full-width "Host view" band at the top,
       2. Three sub-tabs,
       3. The active tab's content.
     Editor modals slide up over the clipboard exactly like the stay
     modals (set @modal in controller). */

  /* ── Hosting band ─────────────────────────────────────────────
     Full-bleed color band at the very top of the paper. It's a sibling
     of .stay-board-content (not inside it) so it isn't pushed down by
     the clip-clearance padding. Negative left/right margins break it
     out of the .stay-board horizontal padding so it reaches paper edge
     to paper edge. The clip is centered above this band. */
  .stay-board > .host-banner {
    background: var(--host-purple);
    color: var(--paper-warm);
    /* Flush header band — sits at the very top of the paper, edge to edge,
       breaking out of the board's horizontal padding to reach paper edge
       to paper edge. (Previously offset down to clear the clip.) */
    margin: 0 -80px;
    padding: 22px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow:
      inset 0 1px 0 rgba(0, 0, 0, 0.10),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  }
  .host-banner-text {
    font-family: var(--display);
    font-style: normal;
    font-size: 18px;
    line-height: 1.2;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  }
  .host-banner-cta {
    flex-shrink: 0;
  }

  /* View-as toggle — persistent Host | Guest switch in the (dark) banner. The
     whole control is a link to the opposite view, so any click flips it. */
  .view-as-toggle { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
  .view-as-toggle:hover,
  .view-as-toggle:focus,
  .view-as-label,
  .view-as-seg { text-decoration: none; }
  .view-as-toggle:hover .view-as-seg:not(.is-active) { color: #fff; }
  .view-as-label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
  }
  .view-as-segs {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 3px;
  }
  .view-as-seg {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 999px;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .view-as-seg:hover { color: #fff; text-decoration: none; }
  .view-as-seg.is-active,
  .view-as-seg.is-active:hover { background: var(--pink); color: #fff; }

  /* Steward variant — same layout but a light purple wash + purple text
     so it reads as an informational note rather than a bold host badge. */
  .host-banner--steward {
    background: var(--host-purple-soft);
    color: var(--host-purple);
    box-shadow:
      inset 0 1px 0 rgba(0, 0, 0, 0.06),
      inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  }

  /* The board's content area no longer needs the full clip clearance
     when the band sits between the clip and content. The host folder
     always shows the band; the stay clipboard shows it only when the
     viewer is the host (toggled by .stay-shell--host-viewing). */
  .host-shell .stay-board-content,
  .stay-shell--host-viewing .stay-board-content {
    padding-top: 32px;
  }

  /* ── Sub-tabs — square segmented toggle, centered on desktop. Sharp corners
     (vs the rounded view-as toggle) + a filled active segment make it read as
     a control, not a label. ──────────────────────────────────────────── */
  .host-tabs-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 28px;
  }
  .host-tabs {
    display: inline-flex;
    gap: 0;
    padding: 4px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 0;
    max-width: 100%;
  }
  .host-tab {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: var(--ink-soft);
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 0;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .host-tab:hover { color: var(--ink); background: var(--hover-wash); text-decoration: none; }
  .host-tab.active,
  .host-tab.active:hover { background: var(--ink); color: var(--paper); }

  /* ── Section heads ────────────────────────────────────────────
     Title on a slate rule, with a circular edit icon at the right.
     The head IS the section divider — sections themselves don't carry
     borders. */
  .host-section { padding: 0 0 28px; }
  .host-section:last-child { padding-bottom: 0; }

  .host-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 18px;
  }
  .host-section:first-of-type .host-section-head { margin-top: 4px; }

  .host-section-h {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: var(--slate);
    margin: 0;
    flex-shrink: 0;
  }
  .host-section-rule {
    display: block;
    flex: 1;
    height: 1px;
    background: rgba(79, 109, 122, 0.45);
  }
  .host-edit-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--slate);
    background: var(--slate);
    color: #fff;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  .host-edit-btn:hover {
    background: var(--slate-hover);
    border-color: var(--slate-hover);
    color: #fff;
    text-decoration: none;
  }
  .host-edit-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    margin-right: 2px;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Empty-state block for a host section (Asks, Resources). Soft
     ruled-paper band with a small explanatory line and a paper-toned
     "Add the first…" affordance. Sits where the list would be. */
  .host-empty {
    background: rgba(79, 109, 122, 0.06);
    border: 1px dashed rgba(79, 109, 122, 0.30);
    border-radius: 6px;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .host-empty-body {
    margin: 0;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  /* ── Host view: light-grey board, sharp full-width white cards
     (manage-style, confined within the folder chrome). A subtle step off the
     guest view's white paper. Scoped to .host-shell. ─────────────────── */
  /* Board is a light grey, almost white — just distinct enough from the guest
     paper. The tray stays true black (#000) behind it. Trim the board's big
     side padding so the white cards fill it nearly edge to edge. */
  .host-shell .stay-board { background: #ededed; padding-left: 16px; padding-right: 16px; }
  .host-shell .stay-board-content { padding-left: 0; padding-right: 0; }
  /* Banner sits on the backing board (the dark tray) as a stable top strip,
     above the board — independent of the content width below, so the toggle
     never shifts. The tray stacks: banner, then board. */
  .stay-shell .stay-board-tray { display: flex; flex-direction: column; }
  .stay-shell .stay-board-tray > .host-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
    padding: 14px 18px;
    background: #000;
    color: var(--paper-warm);
    box-shadow: none;
  }

  /* Headers, edit/add buttons, and tabs keep their default dark-on-light
     styling — they read fine on the light-grey board. */

  /* Content cards — sharp corners, full bleed; white with a soft shadow. */
  .host-shell .host-card {
    background: #fff;
    border-radius: 0;
    padding: 26px 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
  }
  .host-shell .host-section { padding: 0; margin-bottom: 16px; }
  .host-shell .host-section:last-child { margin-bottom: 0; }
  .host-shell .host-section-head { margin: 0 0 12px; }
  .host-shell .host-section:first-of-type .host-section-head { margin-top: 0; }
  /* Welcome letter renders flat inside its card (no nested frame). */
  .host-shell .host-welcome-letter { background: transparent; border: none; box-shadow: none; padding: 0; }
  /* Visibility toggle now lives inside the Basic information card — set it off
     from the identity above with a hairline. */
  .host-card-visibility { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--paper-edge); }

  /* Lists fill their card flush — no framed box inside the card. */
  .host-shell .host-todos,
  .host-shell .host-files {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  /* Empty sections: the whole card goes a deeper grey (no inner dashed box) so
     it stays distinct from the light board. */
  .host-shell .host-card:has(.host-empty) {
    background: #e2e2e2;
    box-shadow: none;
  }
  .host-shell .host-empty {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  /* Data tabs (Tasks / Invites / Cabins): white card panels on the light board. */
  .host-shell .tasks-table-wrap,
  .host-shell .manage-table-wrap,
  .host-shell .cabin-timeline {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
  }
  .host-shell .manage-requests {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    padding: 6px 20px;
  }
  .host-shell .invite-result { background: #fff; border-color: var(--paper-edge); border-radius: 0; }
  /* The cabin timeline's label column was flush to the card edge — inset it. */
  .host-shell .cabin-timeline { padding-left: 22px; }

  /* Identity block — kill the prep-identity bottom margin so the
     description doesn't have a giant gap below it. The blurb fills
     the parent width and sits flush with the section's bottom. */
  .host-section .prep-identity { margin-bottom: 0; }
  .host-identity-blurb {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.6;
  }

  /* ── Welcome letter — calm rich-text preview on warm paper. ──── */
  .host-welcome-letter {
    background-color: var(--paper-warm, #f6f1e6);
    background-image: var(--paper-texture);
    background-repeat: repeat;
    background-size: 480px auto;
    padding: 28px 32px 22px;
    border-radius: 4px;
    border: 1px solid var(--paper-edge);
    box-shadow: var(--shadow-paper);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink);
  }
  /* Trix stores blocks as <div>, not <p>. Apply paragraph spacing to
     both so the preview and the in-modal editor render with the same
     breathing room. */
  .host-welcome-letter p,
  .host-welcome-letter > div { margin: 0 0 22px; }
  .host-welcome-letter p:last-child,
  .host-welcome-letter > div:last-child { margin-bottom: 0; }
  .host-welcome-letter strong { font-weight: var(--weight-semibold); }
  .host-welcome-letter em { font-style: normal; }
  .host-welcome-letter ul, .host-welcome-letter ol { margin: 0 0 22px 1.2em; }
  .host-welcome-fixed {
    color: var(--ink);
    font-style: normal;
  }
  .host-welcome-fixed em { color: var(--ink-faint); font-style: normal; }

  /* Welcome-letter editor: flat layout — no outer card. Divider above,
     plain salutation + signature, the Trix editor itself carries the
     only border (set on trix-editor.host-trix at the bottom of file). */
  .host-welcome-divider {
    border: none;
    border-top: 1px solid var(--paper-edge);
    margin: 18px 0 22px;
  }
  .host-welcome-modal {
    background: transparent;
    border: none;
    padding: 0;
  }
  .host-welcome-modal .host-welcome-fixed {
    margin: 0 0 12px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
  }
  .host-welcome-modal .host-welcome-fixed:last-child {
    margin: 18px 0 0;
  }

  /* "To <email>" line in the composer header — shows the recipient clearly. */
  .nudge-to-line { font-size: 13px; color: var(--ink-faint); margin-top: 8px; }
  .nudge-to-line strong { color: var(--ink); font-weight: var(--weight-semibold); }

  /* Nudge CTA field — styled as the actual ink-stamp button (inverted: ink
     fill, paper text, centered) so editing the label previews the real
     button the recipient sees. */
  .nudge-cta-input {
    /* The whole black block is sized to the character budget (~24 chars +
       padding) so it reads as a limited-width text field, not a full-width
       button. Full width on mobile (below). */
    width: min(100%, calc(24ch + 56px));
    border: none;
    color: var(--paper);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-align: left;
    padding: 14px 28px 18px;
    border-radius: var(--radius-xs);
    box-sizing: border-box;
    /* White underline sits INSIDE the block — inset from every edge — so it's
       clearly visible. Drawn as a background line because Safari/WebKit won't
       render text-decoration on <input> text. */
    background-color: var(--ink);
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-size: calc(100% - 56px) 2px;
    background-position: 28px calc(100% - 12px);
  }
  @media (max-width: 768px) {
    .nudge-cta-input { width: 100%; }
  }
  .nudge-cta-input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
  .nudge-cta-input::selection { background: rgba(255, 255, 255, 0.30); }

  /* ── Trix editor — see the un-layered overrides at the bottom of
     this file. Trix's CDN CSS is unlayered, so any rule placed inside
     @layer components loses to it regardless of specificity. */

  /* ── Todos band — keep the prep ruled-paper aesthetic. ──────── */
  .host-todos {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .host-todo .prep-todo-row { cursor: pointer; }

  /* ── Fleet — drivers / riders / unanswered lists ─────────────── */
  .fleet-list { list-style: none; margin: 0; padding: 0; }
  .fleet-row { padding: 8px 4px; }
  .fleet-row + .fleet-row { border-top: 1px solid rgba(0, 0, 0, 0.07); }

  /* ── Per-ask visibility — title links to edit, toggle hides it ── */
  .host-todo {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .host-todo-edit {
    flex: 1;
    min-width: 0;
  }
  .host-todo-toggle {
    flex-shrink: 0;
    margin: 0;
    padding-right: 2px;
  }
  .host-todo-flag {
    flex-shrink: 0;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 999px;
    padding: 1px 7px;
  }
  .host-todo--hidden .prep-todo-title,
  .host-todo--hidden .prep-todo-due { color: var(--ink-faint); }
  .host-todo--hidden .prep-todo-check { opacity: 0.45; }

  /* ── Visibility settings — inline toggle list ───────────────── */
  .host-toggle-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .host-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
  }
  .host-toggle-row + .host-toggle-row {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .host-toggle {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
  }
  .host-toggle input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
  }
  .host-toggle-track {
    display: block;
    width: 36px;
    height: 20px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    transition: background 0.15s ease;
    position: relative;
  }
  .host-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--paper);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease;
  }
  .host-toggle input:checked + .host-toggle-track {
    background: var(--slate);
  }
  .host-toggle input:checked + .host-toggle-track::after {
    transform: translateX(16px);
  }
  .host-toggle input:focus-visible + .host-toggle-track {
    outline: 2px solid var(--slate);
    outline-offset: 2px;
  }

  .host-toggle-body { flex: 1; min-width: 0; }
  .host-toggle-title {
    font-size: 14px;
    color: var(--ink);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
  }
  .host-toggle-help {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-top: 2px;
  }

  /* ── Task editor — clean, solid surface (matches the guest task card).
     No ruled paper, no pink margin; just a white sheet filling the card. */
  .ask-modal-paper {
    background: #fff;
    margin: -64px -60px;
    padding: 44px 56px;
    min-height: 360px;
  }
  .ask-modal-h {
    font-size: 24px;
    margin: 8px 0 0;
    line-height: 1.15;
  }
  .ask-modal-help {
    color: var(--ink-soft);
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.5;
  }
  .ask-modal-todo {
    margin: 22px 0 6px;
  }
  .ask-modal-todo .prep-todo-row {
    align-items: center;
    gap: 12px;
    padding: 6px 0;
  }
  .ask-modal-title {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  }
  .ask-modal-title:focus { outline: none; border-bottom-color: var(--ink); }
  .ask-modal-title::placeholder { color: var(--ink-faint); font-style: normal; }
  .ask-modal-due {
    flex: 0 0 140px;
    border: none;
    background: transparent;
    font-family: var(--display);
    font-style: normal;
    font-size: 14px;
    color: var(--ink);
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  }
  .ask-modal-due:focus { outline: none; border-bottom-color: var(--ink); }
  .ask-modal-field { margin-top: 22px; padding-left: 30px; }
  .ask-modal-label {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-bold);
    margin-bottom: 8px;
  }
  .ask-modal-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    resize: vertical;
    min-height: 96px;
    padding: 12px 14px;
  }
  .ask-modal-textarea:focus { outline: none; border-color: var(--ink); }
  .ask-modal-actions {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
  }

  /* ── Kind (type) picker — segmented control ─────────────────── */
  .ask-modal-kind-row { padding-left: 30px; }
  .ask-kind-picker {
    display: flex;
    gap: 0;
    border: 1px solid rgba(0, 0, 0, 0.18);
    width: fit-content;
  }
  .ask-kind-option {
    /* Hide the native radio; keep it in-flow for accessibility. */
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
  }
  .ask-kind-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .ask-kind-option span,
  .ask-kind-option {
    /* The visible "tab" face. */
    display: block;
    padding: 7px 14px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    background: transparent;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    user-select: none;
  }
  .ask-kind-option:last-child,
  .ask-kind-option:last-child span { border-right: none; }
  .ask-kind-option:hover { background: var(--hover-wash); }
  .ask-kind-option:has(input:checked) {
    background: var(--ink);
    color: #fff;
  }
  .ask-kind-option:has(input:checked):hover { background: var(--ink); }
  /* Amount sub-field — indented under the picker */
  .ask-amount-row {
    margin-top: 16px;
  }
  .ask-amount-input-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
    width: 120px;
    padding-bottom: 4px;
  }
  .ask-amount-symbol {
    font-size: 15px;
    color: var(--ink-faint);
  }
  .ask-modal-amount {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    width: 100%;
    padding: 0;
    -moz-appearance: textfield;
  }
  .ask-modal-amount::-webkit-inner-spin-button,
  .ask-modal-amount::-webkit-outer-spin-button { -webkit-appearance: none; }
  .ask-modal-amount:focus { outline: none; }
  .ask-amount-hint { margin-top: 8px; }

  /* ── Modal-internal action row ──────────────────────────────── */
  .host-modal-actions {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  /* ── People / Logistics tab intros ──────────────────────────── */
  .host-section-title {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-semibold);
    font-size: 28px;
    line-height: 1.15;
    color: var(--ink);
    margin: 4px 0 6px;
  }
  .host-section-rollup {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 0 24px;
  }

  /* Invites header: title on the left, the open/invite-only status on the right. */
  .invites-headerline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  /* Open ⇄ invite-only status — a segmented pill. The active side is a filled
     label; the inactive side is a button_to that switches the status. */
  .status-toggle {
    display: inline-flex;
    align-items: stretch;
    padding: 3px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
  }
  /* Open ⇄ invite-only is now an on/off switch (.host-toggle) + a label. */
  .status-toggle-form {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
  }
  .status-toggle-label {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-soft);
  }
  /* Invite-mode box — the open/invite-only switch + explanation + (when open)
     the share link, in one .invite-result panel. */
  .invite-mode { margin-top: 16px; }
  .invite-mode-form {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
  }
  .invite-mode-body { flex: 1; min-width: 0; }
  .invite-mode-title {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: var(--weight-semibold);
    color: var(--ink);
  }
  .invite-mode-help {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-top: 3px;
  }
  .invite-mode-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(79, 109, 122, 0.18);
  }

  /* Roster header — title left, the confirmed/declined count top-right. */
  .roster-headerline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: 28px;
    margin-bottom: 10px;
  }
  .roster-headerline .roster-count { margin: 0; }
  .status-toggle-seg {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    padding: 7px 16px;
    border-radius: 999px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }
  .status-toggle-seg--active {
    background: var(--ink);
    color: var(--paper);
  }
  .status-toggle-seg--btn {
    background: transparent;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
  }
  .status-toggle-seg--btn:hover {
    color: var(--ink);
    background: rgba(0, 0, 0, 0.05);
  }

  /* Coming-soon placeholder for unfinished folder tabs (e.g. Fleet). */
  .host-coming-soon {
    margin: 24px 0 0;
    padding: 32px 24px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px dashed rgba(0, 0, 0, 0.18);
    border-radius: var(--radius-sm, 6px);
    text-align: center;
    font-size: 14px;
    color: var(--ink-soft);
    font-style: normal;
  }

  /* ── Person detail modal ────────────────────────────────────── */
  .person-modal-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
  }
  .person-modal-avatar {
    flex-shrink: 0;
  }
  .person-modal-id { flex: 1; min-width: 0; }
  .person-modal-name {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-semibold);
    font-size: 26px;
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
  }
  .person-modal-meta {
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 4px;
  }

  .person-modal-section {
    padding: 22px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .person-modal-section:first-of-type { border-top: none; padding-top: 0; }

  .person-modal-h {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: var(--slate);
    margin: 0 0 12px;
  }
  .person-modal-h-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .person-modal-h-row .person-modal-h { margin-bottom: 0; }

  .person-modal-dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px 16px;
    margin: 0;
  }
  .person-modal-dl > div {
    display: contents;
  }
  .person-modal-dl dt {
    font-size: 12px;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
  }
  .person-modal-dl dd {
    margin: 0;
    font-size: 14px;
    color: var(--ink);
  }
  .person-modal-note { font-size: 14px; color: var(--ink-soft); }
  .person-modal-email {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    padding-bottom: 1px;
  }
  .person-modal-email:hover { border-bottom-color: var(--ink); color: var(--ink); }

  .person-modal-travel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .person-modal-travel-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.035);
    border-radius: 4px;
    font-size: 13px;
    color: var(--ink);
  }
  .person-modal-travel-tag { align-self: flex-start; }

  .person-modal-cabin {
    margin: 0;
    font-family: var(--display);
    font-size: 18px;
    color: var(--ink);
  }
  .person-modal-cabin em { color: var(--ink-faint); font-style: normal; }

  .person-modal-asks {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .person-modal-ask {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 14px;
  }
  .person-modal-ask:last-child { border-bottom: none; }
  .person-modal-ask-check {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1.5px solid var(--ink-soft);
    background: rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ink);
  }
  .person-modal-ask.done .person-modal-ask-check {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .person-modal-ask-title { color: var(--ink); }
  .person-modal-ask.done .person-modal-ask-title {
    text-decoration: line-through;
    color: var(--ink-soft);
  }
  .person-modal-ask-state {
    font-size: 12px;
    color: var(--ink-soft);
    text-align: right;
  }

  .person-modal-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .person-modal-nav-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: var(--ink);
    padding: 8px 0;
  }
  .person-modal-nav-link--right {
    align-items: flex-end;
    text-align: right;
  }
  .person-modal-nav-link:hover { text-decoration: none; color: var(--ink); }
  .person-modal-nav-link:hover .person-modal-nav-name { text-decoration: underline; }
  .person-modal-nav-dir {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-bold);
  }
  .person-modal-nav-name {
    font-family: var(--display);
    font-style: normal;
    font-size: 15px;
    color: var(--ink);
  }

  /* "Add people" block at the bottom of the People tab — the trigger
     button plus the (initially hidden) invite-people panel. */
  .people-add-new {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
  }

  /* Last cell of a People-tab row: "Copy" link + "Uninvite" red text link. */
  .people-link-cell {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
  }

  /* ── Readiness tab ──────────────────────────────────────────── */
  .tasks-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
  }
  .tasks-head .host-section-rollup { margin-bottom: 0; }

  .tasks-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tasks-table th,
  .tasks-table td { vertical-align: middle; }
  .tasks-table td.task-cell {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* Person column stays pinned while the to-do columns scroll — same
     position:sticky pattern as the cabins timeline's name column. It needs
     an opaque background to paint over whatever scrolls beneath it. */
  /* Whole row is clickable (row-link controller) — pointer cursor across it. */
  .tasks-table tbody tr { cursor: pointer; }
  .tasks-table .tasks-sticky-col {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--paper);
    border-right: 1px solid var(--paper-edge);
    width: 252px;
  }
  /* The pinned column must match the row's hover/ready tint AND stay opaque,
     or the scrolled to-do cells show through it. Layer the translucent tint
     over a solid paper backing so the result is an opaque grey. */
  .tasks-table tr:hover td.tasks-sticky-col {
    background: linear-gradient(rgba(79, 109, 122, 0.04), rgba(79, 109, 122, 0.04)), var(--paper);
  }
  .tasks-table tr.tasks-row--ready td.tasks-sticky-col {
    background: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), var(--paper);
  }
  .tasks-person-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .tasks-person-body { flex: 1; min-width: 0; }
  .tasks-person-attrs {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 3px;
  }
  /* "Nudged 2d ago" pill above the end-column button — a visible reminder so
     the host doesn't re-poke blindly. */
  /* Plain caption stacked under the Nudge button — no label/pill background. */
  .tasks-nudged-note {
    display: block;
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 6px;
    white-space: nowrap;
  }

  /* Far-right Nudge shortcut — compact outlined pill, only on not-ready rows. */
  .tasks-nudge-th { width: 1%; }
  .tasks-nudge-cell { text-align: center; white-space: nowrap; padding: 0 12px; }
  .tasks-nudge-link {
    display: inline-block;
    padding: 5px 13px;
    border: 1px solid var(--ink);
    border-radius: var(--radius-xs);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .tasks-nudge-link:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
  /* Already nudged today — same pill shape, greyed and inert. */
  .tasks-nudge-link--off,
  .tasks-nudge-link--off:hover {
    border-color: var(--paper-edge);
    color: var(--ink-faint);
    background: transparent;
    cursor: default;
  }

  /* Nudge column stays pinned to the right edge on desktop so it never scrolls
     out of reach once several to-do columns are present. Mirrors the sticky
     person column on the left — same opaque-paper backing, layered with the
     row hover/ready tints so scrolled cells don't bleed through. Mobile keeps
     the plain horizontal scroll (no pinning). */
  @media (min-width: 769px) {
    .tasks-table .tasks-nudge-th,
    .tasks-table .tasks-nudge-cell {
      position: sticky;
      right: 0;
      z-index: 5;
      background: var(--paper);
      border-left: 1px solid var(--paper-edge);
    }
    .tasks-table tr:hover td.tasks-nudge-cell {
      background: linear-gradient(rgba(79, 109, 122, 0.04), rgba(79, 109, 122, 0.04)), var(--paper);
    }
    .tasks-table tr.tasks-row--ready td.tasks-nudge-cell {
      background: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), var(--paper);
    }
  }

  /* Right side of the task modal footer — stacks the "nudged 2d ago" note on
     its own line above the action buttons (Nudge / Close) instead of inline. */
  .task-modal-actions-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  /* "Nudged 2d ago" — small pill above the modal's Nudge button. */
  .task-nudged-note {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--ink-soft);
    background: var(--paper-warm-2);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }
  /* Explicit affordance that the row opens a detail modal. */
  .tasks-person-chevron {
    flex-shrink: 0;
    color: var(--ink-faint);
    font-size: 20px;
    line-height: 1;
    transition: transform .12s ease, color .12s ease;
  }
  .tasks-person-link:hover .tasks-person-chevron {
    color: var(--ink);
    transform: translateX(2px);
  }
  .tasks-row--ready .manage-row-name { color: var(--ink-soft); }

  /* Status columns are narrow and centred — each holds a single check. */
  .tasks-check-th { text-align: center; }
  .task-cell--check { text-align: center; width: 92px; }

  /* To-do's form a shaded column group, set apart from Profile/Travel by a
     faint wash and a divider on the leading edge. Headers are small and
     sentence-case (the prompts are sentences); full text shows on hover. */
  .tasks-todos-grouphead {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-left: 1px solid var(--paper-edge);
  }
  /* To-do headers are sentence text, not labels — set them in the display
     face, regular case (the th.tasks-todo-col specificity beats the base
     manage-table th uppercase rule). Full prompt shows on hover. */
  .tasks-table th.tasks-todo-col {
    min-width: 88px;
    max-width: 124px;
    font-family: var(--display);
    font-style: normal;
    font-size: 11px;
    font-weight: var(--weight-normal);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
    white-space: normal;
    vertical-align: top;
    color: var(--ink-soft);
  }
  .tasks-table th.tasks-todo-col,
  .tasks-table td.tasks-todo-cell { background: rgba(0, 0, 0, 0.03); }
  .tasks-table th.tasks-todo-col:first-of-type,
  .tasks-table td.tasks-todo-cell:first-of-type {
    border-left: 1px solid var(--paper-edge);
  }

  /* Completion mark — a soft circle (gentler than a square) that fills with
     a ✓ when done, echoing the participant checklist's checkbox. */
  .task-check {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ink-faint);
    border-radius: 50%;
    background: #fff;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    color: var(--ink);
    vertical-align: middle;
  }
  .task-check--on {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
  }
  .task-check--on::before { content: "✓"; }

  /* Travel — journey strip: each end is that leg's mode glyph (plane/car) with
     an arrow between and the leg's date beneath. Laid out as a 3-column grid so
     each date sits under its glyph. Empty legs show a hollow dot + muted dash. */
  .task-travel-cell { width: 152px; text-align: center; }
  /* Fixed column tracks so the strip is the same width — and the dots line up
     across rows — in every state (complete, partial, empty). */
  .travel-strip {
    display: inline-grid;
    grid-template-columns: 50px 20px 50px;
    justify-items: center;
    align-items: center;
    gap: 3px 0;
  }
  .travel-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    color: var(--ink-soft);
  }
  .travel-mode-icon { width: 18px; height: 18px; display: block; }
  .travel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-faint);
    background: #fff;
  }
  .travel-arrow { color: var(--ink-faint); font-size: 13px; line-height: 1; }
  .travel-date {
    font-size: 11px;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .travel-date.is-muted { color: var(--ink-faint); }

  /* ── Task-status modal ──────────────────────────────────────── */
  .task-modal-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
  }
  .task-modal-name {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-semibold);
    font-size: 26px;
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
  }
  .task-modal-attrs {
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 4px;
  }
  .task-modal-meta {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: 2px;
  }

  /* Basics (Profile + Travel) read as a labelled summary, deliberately unlike
     the checkbox to-do list below so they don't look like more to-do's. */
  .task-basics {
    padding: 14px 0 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 8px;
  }
  .task-basic {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    padding: 9px 2px;
    font-size: 14px;
    line-height: 1.5;
  }
  .task-basic + .task-basic { border-top: 1px solid rgba(0, 0, 0, 0.05); }
  .task-basic-label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: var(--ink-faint);
    padding-top: 3px;
  }
  .task-basic-body { color: var(--ink-soft); }
  .task-basic-leg { display: flex; gap: 10px; align-items: flex-start; }
  .task-basic-leg + .task-basic-leg { margin-top: 8px; }
  /* Full per-leg travel detail in the readiness modal. */
  .task-leg { flex: 1; min-width: 0; }
  .task-leg-line { color: var(--ink); }
  .task-leg-sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
  .task-leg-flight {
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 2px;
    white-space: pre-line; /* keep the itinerary's own line breaks */
  }
  .task-basic-leg-label {
    min-width: 78px;
    color: var(--ink-faint);
  }

  .task-modal-group {
    padding: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .task-modal-h {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: var(--slate);
    margin: 0 0 12px;
  }
  /* Warm orange-red (the cabin-full --warning hue), softer than the rust. */
  .task-modal-h--needed { color: var(--ink); }

  /* Only short, discrete markers ("not set", a due date) are labels — a chip
     with a soft background. Anything sentence-length (a needs list, a note) is
     plain text in the same orange-red, never a chip: chips on full sentences
     read as too much, especially when a profile is still empty. */
  .task-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-md);
    font-size: 12px;
    line-height: 1.45;
    font-weight: var(--weight-semibold);
  }
  /* Missing / unanswered items read as light-red tags. */
  .task-tag--alert { background: rgba(204, 68, 68, 0.10); color: var(--required); }
  .task-alert { color: var(--required); }
  /* A due date is a gentle reminder, not a problem — amber, not the alert red. */
  .task-tag--due { background: rgba(160, 109, 36, 0.10); color: var(--due); }
  /* Wrappers that lay out a row of alert tags (profile gaps, travel gaps). */
  .task-tags, .task-leg-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .task-leg-tags { margin-top: 4px; }
  .task-leg-tags:empty { display: none; }

  /* Modal to-do's are the participant checklist, shown host-side: a checkbox,
     the item, and (when done) the submitted note on its own line beneath. */
  .task-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .task-checklist-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 8px 2px;
    font-size: 14px;
    line-height: 1.45;
  }
  .task-checklist-item .task-check {
    flex-shrink: 0;
    position: relative;
    top: 3px;
  }
  .task-checklist-label {
    color: var(--ink);
    font-weight: var(--weight-medium);
  }
  .task-checklist-item.is-done .task-checklist-label {
    color: var(--ink-faint);
    text-decoration: line-through;
  }
  /* The submitted answer — prominent (it's the content the host wants to read),
     not the muted aside it used to be. */
  .task-checklist-note {
    flex-basis: 100%;
    margin: 5px 0 0 30px;
    color: var(--ink);
    font-size: 15px;
    font-weight: var(--weight-medium);
    line-height: 1.5;
  }
  /* "Paid $X" on a completed payment task. */
  .task-checklist-paid { color: var(--paid); font-weight: var(--weight-semibold); }
  .task-checklist-due { margin-left: auto; }
  /* Small type chip (Pay / Upload / Question / Confirm) so the host can scan
     what each task is at a glance. */
  .task-type-tag {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 7px;
    border-radius: 999px;
  }
  /* Link to a guest's uploaded file (opens inline in a new tab). */
  .task-checklist-file {
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .task-checklist-file:hover { color: var(--ink); }
  /* Thumbnail preview of an image upload (host review). Own line under the
     task; click opens full size in a new tab. */
  .task-checklist-thumb { flex-basis: 100%; margin: 6px 0 0 30px; }
  .task-checklist-thumb img {
    display: block; max-width: 140px; max-height: 140px; object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.12);
  }
  /* Smaller thumb in the full person modal's checklist. */
  .person-modal-thumb img {
    display: block; max-width: 96px; max-height: 96px; object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.12);
  }
  .task-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    margin-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .host-foot {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
  .host-foot-note {
    font-size: 12px;
    color: var(--ink-soft);
    margin: 8px 0 0;
  }

  /* ── Logistics (placeholder; deferred for now) ───────────────── */
  .host-logistics-section { margin-bottom: 36px; }
  .host-logistics-section:last-child { margin-bottom: 0; }
  .host-cabins, .host-runs, .host-await-list { list-style: none; margin: 0; padding: 0; }
  .host-cabin-row {
    display: grid;
    grid-template-columns: 110px 60px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 14px;
  }
  .host-cabin-row:last-child { border-bottom: none; }
  .host-cabin-name { font-family: var(--display); font-weight: var(--weight-semibold); }
  .host-cabin-cap { font-size: 12px; color: var(--ink-soft); }
  .host-cabin-cap--full { color: var(--warning, #b54b1f); font-weight: var(--weight-semibold); }
  .host-cabin-occ { font-size: 13px; }
  .host-cabin-conflict { font-size: 12px; margin-top: 2px; font-style: normal; }
  .host-await { margin-top: 0; margin-bottom: 28px; padding: 16px 18px; background: rgba(0,0,0,0.035); border-radius: 6px; }
  .host-await-eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-bold);
    margin-bottom: 12px;
  }
  .host-await-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .host-await-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .host-await-table tr { border-bottom: 1px solid rgba(0,0,0,0.06); }
  .host-await-table tr:last-child { border-bottom: none; }
  .host-await-table td {
    padding: 10px 12px 10px 0;
    vertical-align: middle;
  }
  .host-await-avatar { width: 32px; padding-right: 12px; }
  .host-await-name { font-weight: var(--weight-semibold); white-space: nowrap; }
  .host-await-meta { font-size: 12px; color: var(--ink-soft); }
  .host-await-assign { width: 1%; white-space: nowrap; padding-right: 0; }
  .host-await-assign .cabin-assign-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .host-await-assign .cabin-assign-select { min-width: 200px; }
  .host-run-row {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .host-run-row:last-child { border-bottom: none; }
  .host-run-when { font-family: var(--display); font-style: normal; font-size: 14px; }
  .host-run-route { font-size: 14px; }
  .host-run-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  .host-run-riders { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

  .folder-fold-hosts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
  }

  /* ── Mobile ──────────────────────────────────────────────────── */
  @media (max-width: 768px) {
    /* Specificity matches the desktop `.stay-board > .host-banner` rule
       so the mobile margin/padding actually win on small viewports —
       otherwise the band keeps the desktop -80px breakout and shoots
       past the paper edges. Flush header at the paper top. */
    .stay-board > .host-banner {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin: 0 -14px 20px;
      padding: 16px 14px;
    }
    .host-banner-text { font-size: 16px; }
    /* Drop the container pill on mobile so wrapping doesn't stretch a blob —
       each tab is its own chip (manage-style). The active one fills. */
    .host-tabs-wrap { margin-bottom: 22px; justify-content: flex-start; }
    /* Segmented bar scrolls left-to-right on phones instead of wrapping. */
    .host-tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      max-width: 100%;
      -webkit-overflow-scrolling: touch;
    }
    .host-tab { font-size: 10px; letter-spacing: 0.1em; padding: 9px 14px; }

    /* Banner wraps on mobile — title on top, the Host|Guest switch below. */
    .stay-shell .stay-board-tray > .host-banner {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
    .tasks-head {
      flex-direction: column;
      gap: 12px;
    }
    .task-checklist-item { flex-wrap: wrap; }
    .task-checklist-note { flex-basis: 100%; margin-left: 30px; }
    .host-cabin-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
    .host-cabin-name { grid-column: 1; }
    .host-cabin-cap { grid-column: 2; text-align: right; }
    .host-cabin-occ { grid-column: 1 / -1; }
    .host-cabin-row > a { grid-column: 1 / -1; justify-self: end; }
    .host-run-row { grid-template-columns: 1fr auto; }
    .host-run-when { grid-column: 1 / -1; }

    /* Modal action rows — stack the buttons full-width so labels stay on
       a single line on phone widths. Primary lands on top, secondary
       underneath, matching the todo modal's pattern. */
    .host-modal-actions,
    .ask-modal-actions {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 10px;
    }
    .host-modal-actions > .btn,
    .host-modal-actions > .btn-paper,
    .host-modal-actions > .btn-paper--danger,
    .host-modal-actions > .logistics-save,
    .host-modal-actions > .logistics-save--outline,
    .ask-modal-actions > .btn,
    .ask-modal-actions > .btn-paper,
    .ask-modal-actions > .logistics-save,
    .ask-modal-actions > .logistics-save--outline {
      width: 100%;
      justify-content: center;
    }
  }
}

/* ── Trix overrides — UNLAYERED ─────────────────────────────────
   Trix's CDN stylesheet is unlayered, which wins over any rules
   inside @layer components regardless of specificity. These overrides
   sit outside the layer so they actually apply. */

/* Welcome letter preview: Trix stores blocks as <div> and its CDN
   `.trix-content * { margin: 0 }` rule (unlayered) zeroes their
   margins. Re-add paragraph spacing here, also unlayered, so it
   actually wins. */
.host-welcome-letter > p,
.host-welcome-letter > div { margin: 0 0 22px; }
.host-welcome-letter > p:last-child,
.host-welcome-letter > div:last-child { margin-bottom: 0; }
.host-welcome-letter ul,
.host-welcome-letter ol { margin: 0 0 22px 1.2em; padding-left: 0; }

/* Minimal toolbar — bare icons, no boxes, no dividers, no border.
   Reads as a quiet row of glyphs above the writing surface. */
trix-toolbar {
  background: transparent;
  margin: 0;
  padding: 0 0 8px;
  border: none;
}
trix-toolbar .trix-button-row {
  background: transparent;
  border: none;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
}
trix-toolbar .trix-button-group {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
trix-toolbar .trix-button-group + .trix-button-group {
  margin-left: 10px;
}
trix-toolbar .trix-button,
trix-toolbar .trix-button-group .trix-button,
trix-toolbar .trix-button-group .trix-button + .trix-button {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  height: 26px;
  width: 26px;
  padding: 0;
  margin: 0;
  border-radius: 3px;
  transition: background 0.12s ease, color 0.12s ease;
}
trix-toolbar .trix-button:disabled { opacity: 0.35; cursor: not-allowed; }
trix-toolbar .trix-button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}
trix-toolbar .trix-button.trix-active {
  background: rgba(0, 0, 0, 0.10);
  color: var(--ink);
}
/* Hide groups we don't need in the welcome letter context. */
trix-toolbar .trix-button-group--file-tools,
trix-toolbar .trix-button-group--history-tools,
trix-toolbar .trix-button-group-spacer,
trix-toolbar .trix-button--icon-heading-1,
trix-toolbar .trix-button--icon-code,
trix-toolbar .trix-button--icon-decrease-nesting-level,
trix-toolbar .trix-button--icon-increase-nesting-level {
  display: none !important;
}

trix-editor.host-trix {
  min-height: 240px;
  background: var(--paper-warm, #f6f1e6);
  padding: 22px 26px;
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
}
trix-editor.host-trix:focus {
  outline: none;
  border-color: var(--ink);
}
/* Trix renders block content as <div>; give them air. */
trix-editor.host-trix > div + div { margin-top: 14px; }
trix-editor.host-trix h1 {
  font-family: var(--display);
  font-style: normal;
  font-size: 22px;
  margin: 14px 0;
  color: var(--ink);
}
trix-editor.host-trix blockquote {
  border-left: 2px solid var(--ink-faint);
  padding-left: 14px;
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-style: normal;
}
trix-editor.host-trix ul,
trix-editor.host-trix ol { margin: 0 0 14px 1.4em; }
trix-editor.host-trix a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}