@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(--pip-host-fg);
    color: var(--paper-warm);
    /* Sits ON the paper, edge-to-edge horizontally, with a sliver of
       cream paper visible above. The band starts ~22px below the paper
       top, then has top padding sized so its text clears the clip's
       lower edge with breathing room. */
    margin: 22px -80px 0;
    padding: 38px 80px 22px;
    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: italic;
    font-size: 18px;
    line-height: 1.2;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  }
  .host-banner-cta {
    flex-shrink: 0;
  }

  /* Steward variant — same layout but lighter tone (host-bg/host-fg)
     so it reads as an informational note rather than a bold host badge. */
  .host-banner--steward {
    background: var(--pip-host-bg);
    color: var(--pip-host-fg);
    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 — centered blue pill toggle ───────────────────── */
  .host-tabs-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 32px;
  }
  .host-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: rgba(79, 109, 122, 0.10);
    border: 1px solid rgba(79, 109, 122, 0.22);
    border-radius: 999px;
  }
  .host-tab {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: var(--slate);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .host-tab:hover { color: var(--slate-hover); text-decoration: none; background: rgba(79, 109, 122, 0.08); }
  .host-tab.active {
    background: var(--slate);
    color: var(--paper);
  }
  .host-tab.active:hover { background: var(--slate-hover); 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);
  }

  /* 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: italic; }
  .host-welcome-letter ul, .host-welcome-letter ol { margin: 0 0 22px 1.2em; }
  .host-welcome-fixed {
    color: var(--ink);
    font-style: italic;
  }
  .host-welcome-fixed em { color: var(--ink-faint); font-style: italic; }

  /* 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;
  }

  /* ── 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; }

  /* ── 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;
  }

  /* ── Ask modal — whole card on ruled paper ──────────────────── */
  .ask-modal-paper {
    background-color: #fbf6e7;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(74, 124, 78, 0.09) 31px,
      rgba(74, 124, 78, 0.09) 32px
    );
    margin: -64px -60px;
    padding: 56px 56px;
    min-height: 420px;
  }
  .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 dashed rgba(0, 0, 0, 0.18);
  }
  .ask-modal-title:focus { outline: none; border-bottom-color: var(--ink); }
  .ask-modal-title::placeholder { color: var(--ink-faint); font-style: italic; }
  .ask-modal-due {
    flex: 0 0 140px;
    border: none;
    background: transparent;
    font-family: var(--display);
    font-style: italic;
    font-size: 14px;
    color: var(--ink);
    padding: 4px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
  }
  .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%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink);
    resize: vertical;
    /* Sit on the ruled lines — drop padding so each line aligns. */
    padding: 0;
  }
  .ask-modal-textarea:focus { outline: none; }
  .ask-modal-actions {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
  }

  /* ── 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: italic;
    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;
  }

  /* 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: italic;
  }

  /* ── 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: italic;
    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: italic; }

  .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: italic;
    font-size: 15px;
    color: var(--ink);
  }

  .people-add-row {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
  }
  .people-add-form {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .people-add-picker {
    flex: 1;
    margin-top: 0;
  }
  .people-add-submit { flex-shrink: 0; }

  .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: italic; }
  .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: italic; 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.

       Extra top padding clears the clip's lower edge (the clip is
       centered above and would otherwise sit on the title text). */
    .stay-board > .host-banner {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin: 18px -14px 20px;
      padding: 36px 14px 14px;
    }
    .host-banner-text { font-size: 16px; }
    .host-tabs { gap: 14px; flex-wrap: wrap; }
    .host-tab { font-size: 10px; letter-spacing: 0.12em; }
    .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; }
  }
}

/* ── 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: italic;
  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: italic;
}
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;
}