/*
    Palette and type from the trip dashboard redesign. See docs/brand.md.

    The eight original names are kept so every rule written against them takes
    the new look without being touched. Contrast was checked against both the
    page and a card: muted text is 5.77:1 on the page, the accent 5.55:1, and
    the stay colour is the darker 5.09:1 shade rather than the mockup's coral,
    which is 2.78:1 and is kept for fills only.

    No backticks in here. This block is a template literal, and one closes it.
  */
  :root {
    --bg: #f7f8fa;
    --fg: #111827;
    --muted: #5b6270;
    --line: #e3e5ea;
    --divider: #eef0f3;
    --accent: #2f5bd3;
    --gold: #b4472e;
    --warn: #b42318;
    --card: #ffffff;
    --flight: #2f5bd3; --flight-tint: #e4e4ff;
    --stay: #e07a5f; --stay-tint: #ffe3dc;
    --car: #f3d27c; --car-tint: #fff1c2;
    --activity: #5dbb97; --activity-tint: #d3f5e8;
    --food: #eba2c6; --food-tint: #ffe0f0;
    --ok-bg: #e7f6ef; --ok-fg: #0f6b4b;
    --attention-bg: #fffbeb; --attention-line: #f3d27c;
    --radius: 14px; --radius-inner: 12px; --radius-small: 8px;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
    --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0e1117; --fg: #e6e8ec; --muted: #9aa1ad; --line: #2a2f37;
      --divider: #1f242c; --accent: #7c9bf0; --gold: #f09a80; --warn: #f97066;
      --card: #161b22;
      --flight-tint: #1d2547; --stay-tint: #3a211b; --car-tint: #3a3119;
      --activity-tint: #16352a; --food-tint: #3a1d2c;
      --ok-bg: #12352a; --ok-fg: #7fd8b4;
      --attention-bg: #2e2712; --attention-line: #8a7230;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; color: var(--fg);
    font: 16px/1.55 var(--sans);
  }
  .wrap { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.15rem 4rem; }

  header.site .inner {
    max-width: 46rem; margin: 0 auto;
    display: flex; flex-wrap: wrap;
  }
  .brand {
    display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg);
    text-decoration: none;
  }
  .brand svg { flex: none; }
  nav a { color: var(--muted); text-decoration: none; }
  nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }
  nav a:hover { color: var(--fg); }
  h1 { margin: 0 0 0.35rem; }
  h2 {
    font-size: 0.83rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); margin: 2rem 0 0.6rem; font-weight: 650;
  }
  p.lede { color: var(--muted); margin: 0 0 1.6rem; }
  ul.rows { list-style: none; margin: 0; padding: 0; }
  ul.rows li {
    background: var(--card); border: 1px solid var(--line);
    padding: 0.8rem 0.95rem; margin-bottom: 0.5rem;
  }
  .row-top { display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; }
  .title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }


  /*
    Explanatory copy, brought up to the floor.
    ----------------------------------------
    These two at 0.9rem is 14.4px, and between them they carry the
    product's entire privacy model: what a cities-only feed leaks, what a full
    one does, how held mail is released, how long a viewer's sign-in lasts. A
    review pointed out that the smallest body text on the page was the text
    that mattered most. An earlier accessibility pass had already made this
    exact fix and scoped it to the shared-trip classes.
  */
  .meta { color: var(--muted); font-size: 1rem; }
  .tag {
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em;
    border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.5rem;
    color: var(--muted); white-space: nowrap;
  }
  /*
    Explanatory text under a control, for the ones whose consequence is not
    obvious from the label. "Booking was canceled" needs to say that it records
    rather than acts; the button cannot say that in three words.
  */
  .hint { color: var(--muted); font-size: 1rem; margin: 0.45rem 0 0; max-width: 34rem; }
  .trip-foot-rule { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0 1.2rem; }
  .trip-share > summary {
    cursor: pointer; font-weight: 650; font-size: 1rem; padding: 0.4rem 0;
    color: var(--accent);
  }
  .trip-share[open] > summary { margin-bottom: 0.4rem; }
  /* A trail back to the list, in the slot the word "TRIP" used to label the
     obvious from inside a page called Trips at a /trips/ URL. */
  .eyebrow a { color: inherit; text-decoration: none; }
  .eyebrow a:hover, .eyebrow a:focus-visible { text-decoration: underline; }
  .notify-set { border: 0; padding: 0; margin: 0 0 0.8rem; }
  .notify-set legend {
    font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); font-weight: 650; padding: 0;
  }
  .notify-option { display: flex; gap: 0.55rem; align-items: center; padding: 0.45rem 0; font-size: 1rem; }
  
  /* A shared trip's body, in both modes. Card rows, like ul.rows above. */
  ol.share-spans { list-style: none; margin: 0 0 1.5rem; padding: 0; }
  .share-span {
    background: var(--card); border: 1px solid var(--line); border-radius: 9px;
    padding: 0.8rem 0.95rem; margin-bottom: 0.5rem;
  }
  .share-span {
    display: flex; gap: 0.7rem; align-items: baseline;
    justify-content: space-between; flex-wrap: wrap;
  }
  /* Moving reads as the event; being somewhere reads as the background. */
  .share-span.move { border-left: 3px solid var(--accent); }
  .share-span.presence { border-left: 3px solid var(--line); }
  /*
    A row's title is a link on the trip page. Left to the base anchor rule it
    rendered default blue and underlined, which is the one thing on the page not
    wearing the palette.
  */
  ul.rows a.title { color: inherit; text-decoration: none; }
  ul.rows a.title:hover, ul.rows a.title:focus-visible { text-decoration: underline; }
  .tag.ok { color: var(--accent); border-color: currentColor; }
  .tag.bad { color: var(--warn); border-color: currentColor; }
  
  /* A canceled booking is kept visible, not hidden: the user needs to know it
     was canceled. Dimmed and struck so it never reads as a live trip. */
  li.canceled { opacity: 0.6; }
  li.canceled .title { text-decoration: line-through; }
  form.inline { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.8rem 0 0; }
  input[type=email], input[type=text] {
    flex: 1 1 15rem; font: inherit; padding: 0.6rem 0.7rem;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--fg);
  }
  /* a.button is for a control that navigates rather than submits, such as the
     Cancel beside Save on the trip editor. It has to look like what it sits
     next to, or the pair reads as a button and an afterthought. */
  button, a.button {
    font: inherit; cursor: pointer;
    border: 1px solid var(--accent);
    background: var(--accent); color: var(--bg);
  }
  a.button { display: inline-block; text-decoration: none; line-height: 1.2; }
  
  /* Focused sign-in card. See login.tsx. */
  .auth { max-width: 22rem; margin: 7vh auto 0; }
  .auth .lock {
    display: flex; align-items: center; gap: 0.5rem; justify-content: center;
    font-weight: 650; letter-spacing: -0.015em; font-size: 1.1rem; margin-bottom: 1.7rem;
  }
  .auth-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    padding: 1.6rem 1.5rem 1.7rem;
  }
  .auth-card h1 { font-size: 1.4rem; margin: 0 0 0.35rem; }
  .auth-card .lede { color: var(--muted); margin: 0 0 1.3rem; font-size: 1rem; }
  .auth-card form { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; }
  /* One field, headed "Sign in", placeheld "you@example.com". A 12px all-caps
     "EMAIL ADDRESS" over it was the smallest text on the page and said nothing
     the field did not. Kept in the accessibility tree, where it is the input's
     name and is not redundant at all. */
  .auth-card label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; white-space: nowrap;
    clip-path: inset(50%); border: 0;
  }
  .auth-card input[type=email] { width: 100%; }
  .auth-card button { width: 100%; padding: 0.7rem 1rem; margin-top: 0.2rem; }
  .auth .foot {
    color: var(--muted); font-size: 1rem; text-align: center; margin: 1.3rem 0 0;
    line-height: 1.5;
  }
  .auth .foot code { font-weight: 600; color: var(--fg); }
  .notice {
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    background: var(--card); border-radius: 8px; padding: 0.8rem 0.95rem;
    margin: 0 0 1.4rem;
  }
  .notice.bad { border-left-color: var(--warn); }
  .empty { color: var(--muted); }
  code.addr { font: inherit; font-weight: 600; }
  .template-draft { margin: 1.2rem 0 1.6rem; }
  .template-draft form { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; }
  .template-draft label > span { display: block; margin-bottom: 0.3rem; color: var(--muted); font-weight: 650; }
  .template-draft select { min-width: min(26rem, 100%); }
  .template-rows > li { display: block; }
  .template-rows .row-top { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
  .template-validation { margin: 0.5rem 0; padding-left: 1.1rem; color: var(--muted); }
  .template-validation b { color: var(--fg); }
  .template-body { margin: 0.5rem 0; }
  .template-body pre { max-height: 20rem; overflow: auto; padding: 0.7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 0.9rem; }
  .forward-first { margin: 1.4rem 0; padding: 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); max-width: 40rem; }
  .forward-first h2 { margin: 0.15rem 0 0.6rem; font-size: 1.5rem; }
  .forward-first > p { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.55; }
  .forward-address { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
  .forward-address-value { flex: 1 1 auto; min-width: 0; font-size: 1.2rem; font-weight: 650; word-break: break-all; user-select: all; }
  .copy-button { flex: 0 0 auto; padding: 0.55rem 1.1rem; font-size: 1rem; }
  .copy-button:hover { filter: brightness(1.05); }
  .copy-status { flex-basis: 100%; margin: 0; font-size: 1rem; color: var(--accent); font-weight: 600; }
  .forward-hint { margin: 1.1rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--muted); }
  .forward-waiting { margin: 0.9rem 0 0; font-size: 1rem; font-weight: 600; }

  /* ---- items: needs-review drawer (compact, capped, expandable) ---- */
  details.review { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; margin: 0 0 1.5rem; }
  details.review > summary { list-style: none; cursor: pointer; padding: 0.85rem 1rem; display: flex; align-items: center; gap: 0.7rem; }
  details.review > summary::-webkit-details-marker { display: none; }
  details.review .eye { width: 24px; height: 24px; flex: none; color: var(--gold); }
  details.review .lead { font-weight: 600; }
  details.review .lead small { display: block; color: var(--muted); font-weight: 400; font-size: 0.86rem; }
  details.review .chev { margin-left: auto; color: var(--muted); transition: transform .2s; }
  details.review[open] .chev { transform: rotate(180deg); }
  .review-body { max-height: 15rem; overflow: auto; border-top: 1px solid var(--line); padding: 0.3rem 0.4rem; }
  .rrow { display: flex; gap: 0.7rem; align-items: center; padding: 0.55rem; border-radius: 9px; text-decoration: none; color: inherit; }
  .rrow:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); }
  .rrow .ico { width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); display: grid; place-items: center; flex: none; }
  .rrow .t { font-weight: 600; font-size: 0.95rem; }
  .rrow .q { color: var(--warn); font-size: 0.85rem; }
  .rrow .go { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 0.82rem; white-space: nowrap; }
  .review-copy { display: grid; gap: 0.18rem; min-width: 0; flex: 1 1 16rem; }
  .rrow .q { display: block; line-height: 1.35; }
  .review-proposed { display: block; color: var(--muted); font-size: 0.82rem; }
  .review-proposed strong { color: var(--fg); }
  .review-actions { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; flex-wrap: wrap; }
  .review-actions form { margin: 0; }
  .review-actions button { padding: 0.42rem 0.65rem; font-size: 0.82rem; white-space: nowrap; }
  .review-primary-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.46rem 0.68rem; border: 1px solid var(--accent); border-radius: 7px; color: var(--accent); text-decoration: none; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
  .review-primary-link:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
  .review-page-intro { margin: 0 0 1rem; padding: 0.9rem 1rem; border: 1px solid color-mix(in srgb, var(--gold) 65%, var(--line)); border-left: 3px solid var(--gold); border-radius: 10px; background: color-mix(in srgb, var(--gold) 7%, var(--card)); }
  .review-page-intro h2 { margin: 0.15rem 0 0.3rem; font-size: 1.15rem; text-transform: none; letter-spacing: -0.01em; }
  .review-page-intro p:last-child { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
  #review-workspace { scroll-margin-top: 1rem; }
  .evidence-attachments { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
  @media (max-width: 640px) {
    .rrow { align-items: flex-start; flex-wrap: wrap; }
    .review-actions { width: 100%; margin-left: 2.7rem; justify-content: flex-start; }
  }
  ul.items { list-style: none; margin: 0; padding: 0; display: grid; }
  .item { background: var(--card); border: 1px solid var(--line); border-radius: 13px; position: relative; }
  .item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
  .item.lodging::before { background: #b07a3d; } .item.car::before { background: #4c6b8a; } .item.rail::before { background: #7a5a86; }
  .item.canceled { opacity: 0.6; }
  .item .top { display: flex; align-items: center; gap: 0.7rem; }
  .badge { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; position: relative; background: var(--accent); }
  .item.lodging .badge { background: #b07a3d; } .item.car .badge { background: #4c6b8a; } .item.rail .badge { background: #7a5a86; }
  .badge svg { width: 22px; height: 22px; }
  .headline { flex: 1; min-width: 0; }
  .provider { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
  .item .title { font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
  /* The town, under what the property is called. */
  .item .place { color: var(--muted); font-size: 1rem; line-height: 1.3; margin-top: 0.1rem; }
  .route { display: flex; align-items: center; gap: 0.8rem; margin: 0.8rem 0 0.1rem; }
  /* min-width:0 lets a port shrink below its text so a long city name wraps
     instead of pushing; the leg's min-width is what it wraps in favour of. */
  .port { text-align: center; min-width: 0; }
  
  .port .time { font-variant-numeric: tabular-nums; margin-top: 0.05rem; }
  /* The connector earns a floor. Without one, "Buenos Aires" beside "Rio de
     Janeiro" on a 320px screen left it an 11px stub with the plane hanging off
     both ends; the ports now give way first. */
  .leg { flex: 1; min-width: 2.5rem; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); position: relative; }
  .leg svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; color: var(--accent); background: var(--card); }
  .span { display: flex; align-items: center; gap: 0.7rem; margin: 0.75rem 0 0.1rem; }
  .span .end { text-align: center; }
  .span .end .d { font-weight: 650; font-variant-numeric: tabular-nums; }
  .span .end .l { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .depart { color: var(--fg); margin: 0.15rem 0 0.1rem; font-variant-numeric: tabular-nums; }
  .depart b { font-weight: 650; }
  .passenger { display: inline-flex; align-items: center; padding: 0.18rem 0.48rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 0.78rem; }
  /* Grouped, a roster row is a whole reservation and the way into it. */
  .passenger a { color: inherit; text-decoration: none; }
  .passenger a b { color: var(--fg); }
  .passenger:has(a):hover { border-color: var(--accent); color: var(--fg); }
  .item:has(.card-actions[open]) { z-index: 4; }
  .card-actions { position: relative; flex: 0 0 auto; }
  .card-actions > summary { display: grid; min-width: 2rem; min-height: 2rem; padding: 0.2rem 0.45rem; place-items: center; border: 1px solid transparent; border-radius: 7px; color: var(--muted); cursor: pointer; font-size: 1.1rem; font-weight: 700; line-height: 1; list-style: none; }
  .card-actions > summary::-webkit-details-marker { display: none; }
  .card-actions > summary:hover, .card-actions[open] > summary { border-color: var(--line); background: var(--bg); color: var(--fg); }
  .trip-edit-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: min(46rem, calc(100vh - 2rem)); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--fg); box-shadow: 0 24px 70px rgb(0 0 0 / 28%); }
  .trip-edit-dialog::backdrop { background: rgb(17 24 22 / 48%); backdrop-filter: blur(2px); }
  .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem 0.85rem; border-bottom: 1px solid var(--line); }
  .dialog-head .eyebrow { margin: 0 0 0.2rem; color: var(--accent); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
  .dialog-head h2 { margin: 0; color: var(--fg); font-size: 1.15rem; letter-spacing: -0.015em; text-transform: none; }
  .dialog-intro { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.8rem; }
  .dialog-close { display: grid; width: 2rem; height: 2rem; padding: 0; place-items: center; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer; }
  .dialog-close:hover, .dialog-close:focus-visible { border-color: var(--line); background: var(--bg); color: var(--fg); }
  .trip-edit-form { padding: 1rem 1.2rem 1.2rem; }
  .trip-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .trip-edit-grid label { min-width: 0; }
  .trip-edit-grid label > span { display: block; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.76rem; font-weight: 650; }
  .trip-edit-grid input, .trip-edit-grid select { width: 100%; min-width: 0; box-sizing: border-box; }
  .trip-name-field > span { display: block; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.76rem; font-weight: 650; }
  .trip-name-field > input { width: 100%; box-sizing: border-box; }
  .trip-members { margin: 1rem 0 0; padding: 0; border: 0; }
  .trip-members legend { font-size: 0.82rem; font-weight: 700; }
  .trip-members > p { margin: 0.25rem 0 0.65rem; color: var(--muted); font-size: 0.76rem; line-height: 1.4; }
  .trip-member-list { max-height: 17rem; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
  .trip-member-list label { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.65rem 0.7rem; cursor: pointer; }
  .trip-member-list label + label { border-top: 1px solid var(--line); }
  .trip-member-list input { flex: 0 0 auto; margin-top: 0.18rem; }
  .trip-member-list span { display: grid; min-width: 0; gap: 0.12rem; }
  .trip-member-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
  .trip-member-list small { color: var(--muted); font-size: 0.72rem; }
  .trip-move-note { display: none; font-weight: 650; }
  .trip-member-option input:not(:checked) ~ span .trip-remove-note { display: block; color: var(--warn); }
  .trip-add-option input:checked ~ span .trip-join-note { display: block; color: var(--accent); }
  .trip-add-more { margin: 0.9rem 0 0; border: 1px solid var(--line); border-radius: 9px; }
  .trip-add-more > summary { padding: 0.6rem 0.75rem; cursor: pointer; font-size: 0.82rem; font-weight: 700; }
  .trip-add-more[open] > summary { border-bottom: 1px solid var(--line); }
  .trip-add-hint { margin: 0.55rem 0.75rem; color: var(--muted); font-size: 0.76rem; line-height: 1.4; }
  .trip-add-more .trip-member-list { margin: 0 0.6rem 0.6rem; }
  /* The trip manager. A page rather than a dialog, so the booking picker is
     rendered once instead of once per trip group and can afford to list every
     booking the account has. */
  .trip-new { display: flex; align-items: flex-end; gap: 0.7rem; flex-wrap: wrap; margin: 0 0 1.6rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
  .trip-new label { flex: 1 1 14rem; min-width: 0; }
  .trip-new label > span { display: block; margin-bottom: 0.3rem; font-size: 0.8rem; font-weight: 650; }
  .trip-new input { width: 100%; box-sizing: border-box; }
  .trip-manage-list { margin: 0 0 1.8rem; }
  .trip-manage-list h2 { font-size: 1rem; margin: 0 0 0.2rem; }
  .trip-manage-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.2rem; border-bottom: 1px solid var(--line); }
  .trip-manage-row > div { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
  .trip-manage-row b { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trip-manage-row small { color: var(--muted); font-size: 0.8rem; }
  .trip-edit-page { max-width: 40rem; }
  .trip-search { display: block; margin: 0 0 0.6rem; }
  .trip-search > span { display: block; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.8rem; font-weight: 650; }
  .trip-search > input { width: 100%; box-sizing: border-box; }
  .trip-search-empty { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.85rem; }
  .trip-pick-list { max-height: 24rem; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
  .trip-pick { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0.75rem; cursor: pointer; }
  .trip-pick[hidden] { display: none; }
  .trip-pick + .trip-pick { border-top: 1px solid var(--line); }
  .trip-pick input { flex: 0 0 auto; margin-top: 0.2rem; }
  .trip-pick span { display: grid; min-width: 0; gap: 0.12rem; }
  .trip-pick b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
  .trip-pick small { color: var(--muted); font-size: 0.8rem; }
  .dialog-secondary { padding: 1rem 1.2rem; border-top: 1px solid var(--line); }
  .dialog-secondary h3 { margin: 0 0 0.7rem; font-size: 0.9rem; }
  .dialog-secondary form { margin: 0; }
  .dialog-secondary label > span { display: block; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.76rem; font-weight: 650; }
  .dialog-secondary textarea, .dialog-secondary select { width: 100%; box-sizing: border-box; }
  .dialog-secondary textarea { min-height: 6rem; resize: vertical; }
  .dialog-secondary button { margin-top: 0.65rem; }
  .dialog-help { margin: 0.85rem 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }
  .dialog-actions { display: flex; justify-content: flex-end; gap: 0.55rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
  .manual-item-dialog { width: min(46rem, calc(100vw - 2rem)); }
  .manual-type-picker { margin: 0; padding: 0; border: 0; }
  .manual-type-picker legend, .manual-form-section h3 { margin: 0 0 0.55rem; color: var(--fg); font-size: 0.82rem; font-weight: 700; }
  .manual-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
  .manual-type-option { position: relative; min-width: 0; cursor: pointer; }
  .manual-type-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .manual-type-option > span { display: flex; min-height: 3.2rem; padding: 0.5rem; align-items: center; justify-content: center; gap: 0.4rem; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--muted); box-sizing: border-box; transition: border-color 120ms ease, background 120ms ease, color 120ms ease; }
  .manual-type-option input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent); }
  .manual-type-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .manual-type-option svg { color: var(--accent); }
  .manual-form-section { margin-top: 1.05rem; padding-top: 0.95rem; border-top: 1px solid var(--line); }
  .manual-schedule-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.55rem; }
  .manual-schedule-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: 0.45rem; padding: 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
  .manual-schedule-pair > b { grid-column: 1 / -1; font-size: 0.78rem; }
  .manual-schedule-pair label > span { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.68rem; font-weight: 650; }
  .manual-schedule-pair input { width: 100%; min-width: 0; box-sizing: border-box; }
  .manual-schedule-arrow { padding-bottom: 1.35rem; color: var(--muted); font-weight: 700; }
  .manual-more { margin-top: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
  .manual-more > summary { display: flex; padding: 0.75rem 0.85rem; justify-content: space-between; gap: 0.7rem; cursor: pointer; color: var(--fg); font-size: 0.8rem; font-weight: 700; }
  .manual-more > summary span { color: var(--muted); font-weight: 500; }
  .manual-more > .trip-edit-grid { padding: 0.15rem 0.85rem 0.85rem; }
  .manual-more textarea { width: 100%; resize: vertical; box-sizing: border-box; }
  .manual-span-2 { grid-column: 1 / -1; }

  /* ---- item detail: source + corrections ---- */
  .fieldrow { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
  .fieldrow:last-child { border: none; }
  .fieldrow .k { width: 8.5rem; color: var(--muted); font-size: 0.85rem; flex: none; }
  .fieldrow .v { font-weight: 600; flex: 1; }
  .fieldrow .cf { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 650; }
  .fieldrow .cf.ok { color: var(--accent); } .fieldrow .cf.soft { color: var(--gold); }
  .fieldblock { border-bottom: 1px solid var(--line); padding-bottom: 0.55rem; }
  .fieldblock:last-child { border: none; }
  .fieldblock .fieldrow { border: none; padding-bottom: 0.35rem; }
  .fieldblock.pending { border-left: 3px solid var(--gold); padding-left: 0.75rem; }
  .confidence-reason { margin: 0 0 0.35rem 9.2rem; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
  .field-edit {
    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
    margin: 0.15rem 0 0.2rem 8.5rem; padding-left: 0.7rem;
  }
  .field-edit input { min-width: 10rem; }
  .field-edit button { padding: 0.45rem 0.75rem; font-size: 0.85rem; }
  .field-change { margin: 0 0 0.2rem 9.2rem; }
  .field-change > summary {
    color: var(--accent); cursor: pointer; font-size: 0.82rem; font-weight: 600;
  }
  .field-change .field-edit { margin-left: 0; padding-left: 0; }
  .field-evidence { margin: 0.05rem 0 0.35rem 9.2rem; }
  .field-evidence > summary { color: var(--accent); cursor: pointer; font-size: 0.8rem; font-weight: 650; }
  .field-evidence-list { display: grid; gap: 0.45rem; margin-top: 0.4rem; }
  .field-evidence-item { min-width: 0; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); }
  .field-evidence-meta { display: flex; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.72rem; font-weight: 650; }
  .field-evidence-meta a { color: var(--accent); text-decoration: none; white-space: nowrap; }
  .field-evidence blockquote { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); font: 0.77rem/1.45 ui-monospace, Menlo, monospace; }
  .field-evidence mark { padding: 0.03rem 0.1rem; border-radius: 2px; background: color-mix(in srgb, var(--gold) 30%, transparent); color: inherit; }
  @media (max-width: 34rem) {
    .fieldrow .k { width: 6rem; }
    .field-edit, .field-change, .field-evidence, .confidence-reason { margin-left: 0; padding-left: 0; }
  }
  .prov { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0.85rem 0.9rem; margin-top: 1rem; }
  .prov.corr { border-left: 3px solid var(--gold); }
  .prov .lab { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 650; margin-bottom: 0.5rem; }
  .source-event { padding: 0.55rem 0; border-top: 1px solid var(--line); }
  .source-event:first-of-type { border-top: 0; }
  .source-event > .meta { margin: 0; }
  .source-event .src { color: var(--accent); text-decoration: none; font-weight: 650; }
  .source-event.selected > .meta { color: var(--fg); }
  .source-attachments { display: grid; gap: 0.45rem; margin-top: 0.55rem; }
  .source-attachment { min-width: 0; display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
  .source-attachment-mark, .source-attachment-thumb { width: 3.1rem; height: 3.1rem; flex: none; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--accent); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.04em; overflow: hidden; text-decoration: none; }
  .source-attachment-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
  .source-attachment-copy { min-width: 0; flex: 1; display: grid; }
  .source-attachment-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
  .source-attachment-copy small { color: var(--muted); font-size: 0.72rem; }
  .source-attachment-action { color: var(--accent); text-decoration: none; font-size: 0.75rem; font-weight: 650; white-space: nowrap; }
  .receipt-package { display: inline-block; margin-top: 0.55rem; color: var(--accent); text-decoration: none; font-size: 0.82rem; font-weight: 700; }
  @media (max-width: 34rem) {
    .source-attachment { align-items: flex-start; flex-wrap: wrap; }
    .source-attachment-copy { width: calc(100% - 3.75rem); }
    .source-attachment-action { margin-left: 3.75rem; }
  }
  .prov.evidence { padding: 0; overflow: hidden; background: var(--card); }
  .source-evidence > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0.9rem; cursor: pointer; list-style: none; }
  .source-evidence > summary::-webkit-details-marker { display: none; }
  .source-evidence > summary b { display: block; font-size: 0.9rem; }
  .source-evidence > summary small { display: block; color: var(--muted); margin-top: 0.12rem; }
  .source-evidence > summary .chev { color: var(--muted); transition: transform 0.15s ease; }
  .source-evidence[open] > summary { border-bottom: 1px solid var(--line); }
  .source-evidence[open] > summary .chev { transform: rotate(180deg); }
  .evidence-body { padding: 0.85rem 0.9rem 0.95rem; }
  .evidence-meta { display: grid; gap: 0.15rem; color: var(--muted); font-size: 0.78rem; margin-bottom: 0.65rem; }
  .evidence-meta b { color: var(--fg); font-size: 0.86rem; overflow-wrap: anywhere; }
  /* A subject is one token when it arrives encoded or runs long, and a
     phone page must not scroll sideways to show it. */
  .source-event .meta { overflow-wrap: anywhere; }
  .evidence pre { max-height: 28rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 0.8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: 0.78rem/1.45 ui-monospace, Menlo, monospace; }
  .evidence pre mark, .evidence-meta mark { padding: 0.03rem 0.1rem; border-radius: 2px; background: color-mix(in srgb, var(--gold) 38%, transparent); color: inherit; }
  .pdf-evidence { padding: 0.9rem; border-top: 1px solid var(--line); }
  .pdf-evidence-head { display: flex; align-items: start; justify-content: space-between; gap: 0.8rem; }
  .pdf-evidence-head .lab { display: block; margin-bottom: 0.12rem; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .pdf-evidence h3 { margin: 0; font-size: 0.92rem; }
  .pdf-evidence h4 { margin: 0 0 0.35rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; }
  .pdf-evidence-head a { color: var(--accent); text-decoration: none; font-size: 0.8rem; font-weight: 650; white-space: nowrap; }
  .pdf-evidence > blockquote { margin: 0.75rem 0; padding: 0.65rem 0.75rem; border-left: 3px solid var(--gold); background: var(--bg); white-space: pre-wrap; overflow-wrap: anywhere; font: 0.77rem/1.45 ui-monospace, Menlo, monospace; }
  .pdf-evidence > blockquote mark { padding: 0.03rem 0.1rem; border-radius: 2px; background: color-mix(in srgb, var(--gold) 38%, transparent); color: inherit; }
  .pdf-evidence-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; }
  .pdf-evidence-grid iframe, .pdf-page-map, .pdf-scan-note { display: block; width: 100%; aspect-ratio: 612 / 792; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
  .pdf-evidence-grid iframe { min-height: 28rem; }
  .pdf-page-map { overflow: hidden; }
  .pdf-scan-note { display: grid; place-items: center; box-sizing: border-box; padding: 2rem; background: var(--paper); color: var(--muted); }
  .pdf-scan-note b { color: var(--ink); }
  .pdf-scan-note p { max-width: 34rem; line-height: 1.55; }
  .pdf-page-map svg { display: block; width: 100%; height: 100%; }
  .pdf-page-map text { fill: #171717; font-family: Arial, sans-serif; }
  .pdf-page-background { fill: #fff; }
  .pdf-evidence-highlight { fill: #ffd75a; stroke: #a66e00; stroke-width: 1; opacity: 0.78; }
  .pdf-evidence-grid .meta { margin: 0.4rem 0 0; font-size: 0.72rem; }
  @media (max-width: 68rem) {
    .pdf-evidence-grid { grid-template-columns: 1fr; }
    .pdf-evidence-grid iframe { min-height: 34rem; }
  }
  @media (max-width: 34rem) {
    .pdf-evidence-head { display: grid; }
    .pdf-evidence-grid iframe { min-height: 24rem; }
  }
  .evidence .src { display: inline-block; margin-top: 0.7rem; color: var(--accent); text-decoration: none; font-size: 0.84rem; font-weight: 650; }
  .correction-fields { min-width: 0; }
  @media (min-width: 58rem) {
    .correction-workspace.pending {
      display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: 1.25rem; align-items: start;
    }
    .correction-workspace.pending > .prov.evidence { position: sticky; top: 1rem; }
    .correction-workspace.pending .correction-fields > h2 { margin-top: 1rem; }
  }
  .wallet-pass { margin: 0 0 1.4rem; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
  .wallet-pass-head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
  .wallet-pass .lab { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
  .wallet-pass h2 { margin: 0.18rem 0 0; font-size: 1.35rem; letter-spacing: -0.02em; }
  .wallet-pass p { margin: 0.12rem 0 0; color: var(--muted); font-size: 0.82rem; }
  .wallet-add { flex: none; padding: 0.55rem 0.72rem; border-radius: 8px; background: #111; color: #fff; text-decoration: none; font-size: 0.8rem; font-weight: 700; }
  .wallet-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.8rem; margin: 1rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--line); }
  .wallet-facts div { min-width: 0; }
  .wallet-facts dt { color: var(--muted); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
  .wallet-facts dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; font-size: 0.92rem; font-weight: 650; }
  .wallet-barcode { display: grid; place-items: center; margin-top: 1rem; padding: 0.75rem; border-radius: 9px; background: #fff; }
  .wallet-barcode img { display: block; max-width: 100%; max-height: 14rem; }
  @media (max-width: 34rem) { .wallet-pass-head { display: grid; } .wallet-add { justify-self: start; } }
  .activity-list { list-style: none; margin: 1.4rem 0 0; padding: 0; }
  .activity-entry { position: relative; display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.7rem; padding-bottom: 1rem; }
  .activity-entry:not(:last-child)::before { content: ""; position: absolute; left: 0.44rem; top: 1rem; bottom: 0; width: 1px; background: var(--line); }
  .activity-dot { position: relative; z-index: 1; width: 0.65rem; height: 0.65rem; margin: 0.85rem 0 0 0.15rem; border: 2px solid var(--card); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--line); }
  .activity-entry.correct .activity-dot, .activity-entry.reject_rebooking .activity-dot { background: var(--gold); }
  .activity-entry.undo .activity-dot { background: var(--accent); }
  .activity-entry.delete .activity-dot { background: var(--warn); }
  .activity-entry article { min-width: 0; padding: 0.75rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
  .activity-meta { display: flex; align-items: center; gap: 0.55rem; color: var(--muted); font-size: 0.74rem; }
  .activity-meta time { margin-left: auto; font-variant-numeric: tabular-nums; }
  .activity-entry h2 { margin: 0.45rem 0 0.2rem; color: var(--fg); font-size: 1rem; letter-spacing: -0.01em; text-transform: none; }
  .activity-entry h2 a { color: inherit; text-decoration: none; }
  .activity-entry h2 a:hover { color: var(--accent); }
  .activity-entry p { margin: 0; color: var(--muted); font-size: 0.87rem; }
  .activity-entry p b { color: var(--fg); }
  .activity-undone { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .activity-value { display: inline-block; max-width: 100%; margin: 0 0.12rem; padding: 0.03rem 0.28rem; border-radius: 4px; background: var(--bg); color: var(--fg); overflow-wrap: anywhere; font: 0.8rem/1.4 ui-monospace, Menlo, monospace; vertical-align: baseline; }
  .activity-undo { margin-top: 0.65rem; }
  .activity-undo button { padding: 0.4rem 0.65rem; font-size: 0.78rem; }
  .activity-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.8rem; }
  .activity-pager a { color: var(--accent); text-decoration: none; font-size: 0.86rem; font-weight: 650; }
  .quality-audit, .quality-summary { margin: 0 0 1.4rem; padding: 1rem; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; background: var(--card); }
  .quality-audit > h2, .quality-summary > h2 { margin: 0; color: var(--fg); font-size: 1rem; letter-spacing: -0.01em; text-transform: none; }
  .quality-audit > p, .quality-summary > p { margin: 0.4rem 0 0; color: var(--muted); }
  .quality-baseline { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.45rem 1rem; margin: 0.9rem 0; }
  .quality-baseline .fieldrow { min-width: 0; }
  .quality-baseline .fieldrow .k { width: auto; min-width: 7rem; }
  .quality-baseline .fieldrow .v { overflow-wrap: anywhere; }
  .quality-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }
  .quality-actions { min-width: 0; padding: 0; border: 0; display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; margin-top: 0.9rem; }
  .quality-actions form { margin: 0; }
  .quality-actions button { padding: 0.55rem 0.8rem; }
  .quality-actions button.bad { border-color: var(--warn); background: transparent; color: var(--warn); }
  .quality-evidence-link { color: var(--accent); font-weight: 650; text-decoration: none; }
  .quality-summary dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 1rem 0 0; }
  .quality-summary dl div { padding: 0.65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
  .quality-summary dt { color: var(--muted); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
  .quality-summary dd { margin: 0.12rem 0 0; font-size: 1.25rem; font-weight: 700; }
  .quality-privacy { color: var(--muted); font-size: 0.86rem; }
  @media (max-width: 34rem) {
    .activity-meta { align-items: flex-start; flex-direction: column; }
    .activity-meta time { margin-left: 0; }
  }

  /* ---- traveler-first shell ---- */
  html { color-scheme: light dark; }
  body {
    min-height: 100vh;
    background:
      radial-gradient(circle at 15% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 28rem),
      var(--bg);
  }
  a { text-underline-offset: 0.16em; }
  /*
    The focus ring, which was very nearly invisible in light mode.
    -------------------------------------------------------------
    It was gold at 68% opacity. Composited over the page background that is
    rgb(226,189,117), which is 1.60:1 against it. WCAG 2.2 wants 3:1 for a
    focus indicator, and the outline offset guarantees the ring sits on the
    page background rather than on a card, so 1.60 was the number that applied.
    Dark mode was fine at 5.16:1, so this was invisible to anyone testing in
    the dark theme, which is most of the time it was looked at.

    Spruce at full strength is 6.71:1 on the page. The gold stays as an inner
    ring via the shadow, so focus still reads as the brand rather than as a
    default browser outline.
  */
  a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--gold);
    border-radius: 3px;
  }
  .skip-link {
    position: fixed; z-index: 100; left: 1rem; top: -4rem; padding: 0.55rem 0.8rem;
    border-radius: 8px; background: var(--fg); color: var(--bg);
  }
  .skip-link:focus { top: 0.75rem; }
  header.site {
    position: sticky; z-index: 20; top: 0;
    backdrop-filter: blur(16px);
  }
  header.site .inner { padding-top: 0.75rem; padding-bottom: 0.75rem; align-items: center; }
  header.site nav { display: flex; align-items: center; gap: 0.25rem; }
  header.site nav a {
    margin: 0 !important; border-radius: 999px;
  }

  .page-head {
    display: flex; align-items: end; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.4rem;
  }
  .page-head h1 { margin-bottom: 0.18rem; font-size: clamp(1.65rem, 5vw, 2.25rem); }
  .eyebrow {
    margin: 0 0 0.25rem;
  }
  .page-head .lede { max-width: 38rem; margin: 0; font-size: 0.92rem; }
  .quiet-link { color: var(--accent); font-size: 0.82rem; font-weight: 650; text-decoration: none; }
  details.review { box-shadow: 0 8px 28px color-mix(in srgb, var(--fg) 5%, transparent); }
  details.review .lead { line-height: 1.25; }
  details.utility-drawer, details.archive {
    margin-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted);
  }
  .operational-now {
    margin: 0 0 1.5rem; padding: 1.1rem; border: 1px solid var(--accent);
    border-radius: 14px; background: color-mix(in srgb, var(--accent) 5%, var(--card));
    box-shadow: 0 12px 32px color-mix(in srgb, var(--fg) 7%, transparent);
  }
  .operational-now-head {
    display: flex; align-items: start; justify-content: space-between; gap: 1rem;
  }
  .operational-now h2 { margin: 0; color: var(--fg); font-size: 1.3rem; text-transform: none; letter-spacing: -0.02em; }
  .operational-state { display: inline-flex; margin-top: 0.35rem; padding: 0.15rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); font-size: 0.7rem; font-weight: 750; }
  .browser-zone { color: var(--muted); font-size: 0.72rem; text-align: right; }
  .operational-time { display: grid; gap: 0.15rem; margin-top: 1rem; }
  .operational-time > span, .operational-facts dt {
    color: var(--muted); font-size: 0.68rem; font-weight: 750;
    letter-spacing: 0.07em; text-transform: uppercase;
  }
  .operational-time strong { font-size: 1.08rem; }
  .operational-facts {
    display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.9rem 0 0;
  }
  .operational-facts div { min-width: 4rem; }
  .operational-facts dd { margin: 0.12rem 0 0; font-weight: 750; }
  .operational-instructions { margin: 0.8rem 0 0; padding: 0.65rem; border-radius: 8px; background: var(--card); }
  .operational-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    margin-top: 0.9rem; color: var(--muted); font-size: 0.78rem;
  }
  .operational-actions a { color: var(--accent); font-weight: 700; text-decoration: none; }
  .operational-edit { padding: 0.42rem 0.65rem; white-space: nowrap; }
  .travel-alerts { margin: 1rem 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--gold) 7%, var(--card)); }
  .travel-alerts-head, .credit-main { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
  .travel-alerts-head h2 { margin: 0; font-size: 1.05rem; }
  .travel-alerts-head .eyebrow { margin: 0 0 0.15rem; }
  .travel-alerts ul, .credit-drawer ul { margin: 0.8rem 0 0; padding: 0; list-style: none; }
  .travel-alerts li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
  .travel-alerts li > div { display: grid; gap: 0.2rem; }
  /* The booking's name is the point of the row, so it is body text, not a caption. */
  .travel-alerts li a { color: var(--fg); font-size: 1rem; font-weight: 600; text-decoration: none; }
  .travel-alerts li a:hover { text-decoration: underline; }
  .travel-alerts li.urgent > div > b { color: var(--warn); }
  .alert-identity { color: var(--muted); font-size: 1rem; line-height: 1.35; }
  .travel-alerts form { margin: 0; }
  /* Competing readings on a field awaiting a decision. Body text: choosing
     between two values is the task, so both must be legible at a glance. */
  .field-alternatives { margin: 0.5rem 0 0.2rem; padding: 0.6rem 0 0.2rem; border-top: 1px dashed var(--line); }
  .field-alternatives > .meta { margin: 0 0 0.4rem; font-size: 1rem; }
  .field-alternative { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; }
  .field-alternative .v { font-size: 1rem; font-weight: 600; }
  .field-alternative .who { color: var(--muted); font-size: 1rem; }
  .field-alternative button { margin-left: auto; }
  /* Which purchase a leg belongs to. Body text: it is how a lone leg reads as
     part of a round trip, not a caption on it. */
  /* The three-second answer. docs/review-page-design.md. */
  .review-ticket {
    margin: 0.9rem 0 0.2rem; padding: 0.9rem 1rem; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
    background: color-mix(in srgb, var(--gold) 7%, var(--card));
  }
  .ticket-why { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; line-height: 1.45; }
  .ticket-grid {
    display: grid; gap: 0.5rem; margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
  .ticket-fact {
    display: grid; gap: 0.1rem; padding: 0.5rem 0.65rem; border-radius: 9px;
    background: var(--bg); border-left: 3px solid var(--line);
  }
  .ticket-fact dt { color: var(--muted); font-size: 1rem; }
  .ticket-fact dd { margin: 0; font-size: 1rem; font-weight: 650; overflow-wrap: anywhere; }
  .ticket-fact .ticket-state { font-size: 1rem; font-weight: 500; color: var(--muted); }
  .ticket-fact .ticket-absent { font-weight: 500; color: var(--muted); font-style: italic; }
  /* State is carried by colour AND by the word, never colour alone. */
  .ticket-fact.confirmed { border-left-color: var(--accent); }
  .ticket-fact.verified { border-left-color: var(--accent); }
  .ticket-fact.read-once { border-left-color: var(--gold); }
  .ticket-fact.read-once .ticket-state { color: var(--warn); }
  .ticket-fact.missing { border-left-color: var(--warn); }
  .ticket-fact.missing .ticket-state { color: var(--warn); font-weight: 650; }
  .ticket-do { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
  .ticket-do form { display: flex; gap: 0.35rem; margin: 0; }
  .ticket-do input { font-size: 1rem; padding: 0.25rem 0.45rem; min-width: 0; width: 100%; max-width: 9rem; }
  .ticket-do button { font-size: 1rem; padding: 0.25rem 0.6rem; }
  .ticket-do a { font-size: 1rem; color: var(--accent); text-decoration: none; font-weight: 600; }
  .ticket-fact.saving { opacity: 0.55; }
  .dialog-danger { border-top: 1px solid var(--line); }
  .dialog-danger .meta { margin: 0 0 0.5rem; font-size: 1rem; }
  .destructive { color: var(--warn); }
  /* Named for a screen reader, absent for everyone else. */
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; white-space: nowrap; clip-path: inset(50%); border: 0;
  }
  .trip-merge { margin: 2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
  .trip-merge h2 { margin: 0 0 0.3rem; color: var(--fg); font-size: 1rem; letter-spacing: -0.01em; text-transform: none; }
  .trip-merge .meta { margin: 0 0 0.8rem; color: var(--muted); font-size: 1rem; }
  .trip-merge-do { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
  .trip-merge-do label { flex: 1 1 14rem; min-width: 0; margin: 0; }
  .trip-merge-do select { width: 100%; }
  /* The two-step delete. See DeleteBooking in items.tsx: the summary is both
     the trigger and the way back out, so it has to read as the button it
     replaced whether it sits in the card menu or in the edit dialog. */
  .confirm-delete { margin: 0; }
  .confirm-delete > summary { cursor: pointer; list-style: none; }
  .confirm-delete > summary::-webkit-details-marker { display: none; }
  .confirm-delete > summary:hover, .confirm-delete > summary:focus-visible { background: var(--bg); }
  .confirm-delete .confirm-open { display: none; }
  .confirm-delete[open] > summary .confirm-idle { display: none; }
  .confirm-delete[open] > summary .confirm-open { display: inline; color: var(--muted); }
  .confirm-delete-body { padding: 0.5rem 0.45rem 0.25rem; }
  .confirm-delete-body .meta { margin: 0 0 0.55rem; color: var(--muted); font-size: 1rem; white-space: normal; }
  .confirm-delete-body form { margin: 0; }
  /* Beats ".card-actions-menu .destructive", which would otherwise paint the
     label the same colour as the fill and leave a blank brown slab. */
  .confirm-delete-body button.confirm-go { border-color: var(--warn); background: var(--warn); color: var(--bg); font-size: 1rem; }
  .booking-line { margin: 0.35rem 0 0; color: var(--muted); font-size: 1rem; }
  .booking-line b { color: var(--fg); }
  .change-diff { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.78rem; }
  .change-diff strong { color: var(--fg); }
  .credit-drawer { margin: 1rem 0; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
  .credit-drawer > summary { padding: 0.8rem 1rem; cursor: pointer; font-weight: 700; }
  .credit-drawer ul { padding: 0 1rem 0.8rem; }
  .credit-drawer li { padding: 0.8rem 0; border-top: 1px solid var(--line); }
  .credit-main { justify-content: flex-start; }
  .credit-main > strong { margin-left: auto; }
  .credit-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin-top: 0.4rem; color: var(--muted); font-size: 0.75rem; }
  .credit-meta a { color: var(--accent); text-decoration: none; }
  .trip-group { margin: 0 0 1.2rem; }
  .trip-group-head {
    display: flex; align-items: end; justify-content: space-between; gap: 1rem;
    margin: 0 0 0.5rem; padding: 0 0.15rem;
  }
  .trip-heading { display: flex; min-width: 0; align-items: end; gap: 0.55rem; }
  .trip-heading > div { min-width: 0; }
  
  .trip-group-head h3 { margin: 0; font-size: 1.125rem; letter-spacing: -0.01em; }
  .trip-group-head h3 a { color: inherit; text-decoration: none; }
  .trip-group-head h3 a:hover, .trip-group-head h3 a:focus-visible { text-decoration: underline; }
  .trip-group-head span, .trip-group-head time { color: var(--muted); font-size: 0.9rem; }
  li.connection {
    display: flex; justify-content: center; gap: 0.55rem; margin: -0.15rem 0;
    color: var(--muted); font-size: 0.72rem;
  }
  li.connection b { color: var(--warn); }
  .forward-retry { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.55rem; }
  .forward-retry small { color: var(--muted); }
  details.utility-drawer > summary, details.archive > summary {
    display: flex; align-items: center; gap: 0.55rem; padding: 0.8rem 0;
    cursor: pointer; list-style: none; font-size: 0.84rem; font-weight: 650;
  }
  details.utility-drawer > summary::-webkit-details-marker,
  details.archive > summary::-webkit-details-marker { display: none; }
  details.utility-drawer > summary .chev, details.archive > summary .chev {
    margin-left: auto; transition: transform 0.15s ease;
  }
  details.utility-drawer[open] > summary .chev,
  details.archive[open] > summary .chev { transform: rotate(180deg); }
  .utility-body {
    margin-bottom: 1rem; padding: 0.9rem; border: 1px solid var(--line);
    border-radius: 12px; background: var(--card);
  }
  .utility-body p { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.82rem; }
  .utility-body form { display: flex; align-items: end; gap: 0.55rem; flex-wrap: wrap; }
  .utility-body label { display: grid; gap: 0.2rem; font-size: 0.72rem; font-weight: 700; }
  ul.items { gap: 0.8rem; }
  .item { padding: 1rem 1.05rem; box-shadow: 0 8px 24px color-mix(in srgb, var(--fg) 4%, transparent); }
  .item .title { font-size: 1.12rem; }
  .route { margin-top: 1rem; }
  .port .time { color: var(--fg); font-size: 1rem; font-weight: 720; }
  .depart { margin-top: 0.45rem; font-size: 0.94rem; }
  .wall-time-note { color: var(--muted); font-size: 0.68rem; font-weight: 550; }
  details.trip-options { margin-bottom: 1.4rem; }
  details.trip-options.removed { border-top-color: var(--warn); }
  .detail-timing {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 0.9rem;
    border-top: 1px solid var(--line);
  }
  .detail-timing > div { display: grid; gap: 0.2rem; }
  .detail-timing > div:last-child { text-align: right; }
  .detail-timing > div > span { color: var(--muted); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
  .detail-timing strong { font-size: 1rem; }
  .decision-panel {
    margin: 0 0 1rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line));
    border-left: 4px solid var(--gold); border-radius: 12px; background: var(--card);
  }
  .decision-panel h2, .settled-panel h2 { margin: 0 0 0.25rem; color: var(--fg); font-size: 1rem; letter-spacing: -0.01em; text-transform: none; }
  .decision-panel > p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.84rem; }
  .settled-panel { margin-top: 1rem; }
  .settled-panel .item { box-shadow: none; }
  .settled-panel .fieldblock.pending { border-left: 0; padding-left: 0; }
  .settled-panel .field-edit { margin-top: 0.4rem; }
  .email-visual-frame {
    overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  }
  .email-visual-frame iframe {
    display: block; width: 133.333%; height: 38rem; border: 0;
    transform: scale(0.75); transform-origin: top left; background: #fff; color-scheme: light;
  }
  .email-visual-frame .frame-crop { height: 28.5rem; overflow: hidden; }
  /* Zoom, driven by a checkbox so the pane needs no script of its own. */
  .email-zoom-toggle { position: absolute; opacity: 0; pointer-events: none; }
  .email-zoom-label {
    display: inline-block; margin: 0 0 0.45rem; padding: 0.3rem 0.7rem; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; background: var(--card);
    font-size: 1rem; font-weight: 600;
  }
  .email-zoom-toggle:focus-visible + .email-zoom-label { outline: 2px solid var(--accent); outline-offset: 2px; }
  .email-zoom-toggle:checked + .email-zoom-label { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .email-zoom-toggle:checked ~ .email-visual-frame iframe { width: 100%; transform: none; }
  .email-zoom-toggle:checked ~ .email-visual-frame .frame-crop { height: 40rem; overflow: auto; }
  .email-view-actions { display: flex; justify-content: space-between; gap: 0.7rem; margin-top: 0.55rem; }
  .email-view-actions a { color: var(--accent); font-size: 1rem; font-weight: 650; text-decoration: none; }
  details.text-fallback { margin-top: 0.7rem; }
  details.text-fallback > summary { cursor: pointer; color: var(--muted); font-size: 0.78rem; }
  .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.65rem; margin: 1rem 0 1.8rem; }
  .tool-card {
    display: block; padding: 0.85rem; border: 1px solid var(--line); border-radius: 11px;
    background: var(--card); color: inherit; text-decoration: none;
  }
  .tool-card:hover { border-color: var(--accent); }
  .tool-card b { display: block; }
  .tool-card small { display: block; margin-top: 0.2rem; color: var(--muted); line-height: 1.4; }
  .qc-summary dl { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  .qc-source-link { color: var(--fg); text-decoration: none; }
  .qc-source-link:hover { color: var(--accent); }
  .qc-source-projection { margin-top: 0.35rem; color: var(--fg); font-size: 0.85rem; }
  .qc-detail-head { align-items: center; }
  .qc-run-card, .qc-report, .qc-pane {
    margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line);
    border-radius: 12px; background: var(--card);
  }
  .qc-run-card { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
  .qc-run-card h2, .qc-report h2, .qc-pane h2 { margin: 0; color: var(--fg); font-size: 1rem; text-transform: none; letter-spacing: -0.01em; }
  .qc-run-card p, .qc-report > p, .qc-pane > p { margin: 0.35rem 0 0; }
  .qc-compare-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
  .qc-raw-text { max-height: 38rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: 0.76rem/1.45 ui-monospace, Menlo, monospace; }
  .qc-attachments h3, .qc-item-snapshot h3, .qc-findings h3 { margin: 1rem 0 0.4rem; font-size: 0.8rem; }
  .qc-attachments ul, .qc-findings ul { margin: 0; padding-left: 1.2rem; }
  .qc-attachments li { margin-bottom: 0.35rem; }
  .qc-attachments li span { display: block; color: var(--muted); font-size: 0.75rem; }
  .qc-item-snapshot { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
  .qc-model-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.45rem; margin: 0.8rem 0; }
  .qc-model-values dt { color: var(--muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
  .qc-model-values dd { margin: 0.1rem 0 0; overflow-wrap: anywhere; font-size: 0.84rem; font-weight: 650; }
  .qc-field-table { display: grid; gap: 0.4rem; }
  .qc-field-table > div { display: grid; grid-template-columns: minmax(7rem, 0.7fr) minmax(8rem, 1fr); gap: 0.2rem 0.6rem; padding: 0.45rem; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); }
  .qc-field-table span { overflow-wrap: anywhere; font-weight: 650; }
  .qc-field-table small { grid-column: 1 / -1; color: var(--muted); overflow-wrap: anywhere; }
  .qc-report { border-left: 4px solid var(--gold); }
  .qc-report .row-top h2 { margin-right: auto; }
  .qc-findings li { margin-bottom: 0.35rem; overflow-wrap: anywhere; font-size: 0.84rem; }
  .qc-model-pane { border-left: 4px solid var(--accent); }
  .profile-signout { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  @media (max-width: 34rem) {
    .wrap { padding: 0 0.9rem 5rem; }
    header.site { margin-bottom: 1.4rem; }
    header.site .inner { padding-left: 0.9rem; padding-right: 0.9rem; }
    .brand { font-size: 0.95rem; }
    .page-head { display: block; }
    .utility-body form { align-items: stretch; flex-direction: column; }
    .utility-body button { width: 100%; }
    .email-visual-frame iframe { width: 166.667%; transform: scale(0.6); }
    .email-visual-frame .frame-crop { height: 24rem; }
    .qc-run-card { align-items: stretch; flex-direction: column; }
    .qc-run-card button { width: 100%; }
    .qc-compare-grid { grid-template-columns: 1fr; }
    .trip-edit-grid { grid-template-columns: 1fr; }
    .manual-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manual-schedule-grid { grid-template-columns: 1fr; }
    .manual-schedule-pair { grid-template-columns: 1fr; }
    .manual-schedule-arrow { display: none; }
    .manual-span-2 { grid-column: auto; }
    .trip-edit-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
    .operational-now-head, .operational-actions { align-items: start; flex-direction: column; }
    .browser-zone { text-align: left; }
    .trip-group-head { align-items: flex-start; flex-direction: column; }
    .trip-heading { width: 100%; justify-content: space-between; }
  }


  /*
    Shell from the trip dashboard redesign, last so it wins over the rules
    above that predate it. Pages move onto the new components one at a time;
    this part is what every page shares from the start.
  */
  .wrap.wide, header.site .inner.wide { max-width: 1376px; }
  .wrap { padding-left: 2rem; padding-right: 2rem; }
  h1 { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1.1; }
  .eyebrow {
    font-family: var(--mono); font-size: 0.875rem; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  }
  button, a.button {
    border-radius: 999px; padding: 0.6rem 1.15rem; font-weight: 600; line-height: 1.4;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  }
  button.quiet, a.button.quiet { color: var(--fg); background: var(--card); border-color: var(--line); }
  input[type=email], input[type=text], select, textarea { border-radius: var(--radius-small); }
  ul.rows li { border-radius: var(--radius); box-shadow: var(--shadow); }
  header.site {
    margin-bottom: 1.5rem; border-bottom: 0;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
  }
  header.site .inner { padding: 1.1rem 2rem; gap: 1rem; }
  .brand { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin-right: 0.75rem; }
  .brand-mark {
    width: 2.5rem; height: 2.5rem; border-radius: var(--radius-small);
    border: 1px solid var(--line); background: var(--card);
    display: inline-flex; align-items: center; justify-content: center;
  }
  header.site nav { margin-right: auto; }
  header.site nav a {
    font-size: 1rem; font-weight: 600; color: var(--fg); padding: 0.55rem 1rem;
  }
  header.site nav a[aria-current="page"] { background: var(--fg); color: var(--bg); }
  header.site nav a:hover { background: var(--divider); }
  header.site nav a[aria-current="page"]:hover { background: var(--fg); }
  nav.tabbar { display: none; }
  @media (max-width: 640px) {
    .wrap { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 7rem; }
    header.site .inner { padding: 0.9rem 1.25rem; }
    header.site nav { display: none; }
    nav.tabbar {
      display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
      min-height: 84px; padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
      background: var(--card); border-top: 1px solid var(--line);
      justify-content: space-around; align-items: flex-start;
    }
    nav.tabbar a {
      flex: 1; min-height: 44px; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 0.15rem;
      color: var(--muted); text-decoration: none; font-weight: 600; font-size: 1rem;
    }
    nav.tabbar a[aria-current="page"] { color: var(--accent); }
  }


  /*
    Trip page: title row, then days beside a detail panel. The panel column
    goes away under 1000px, where a row is a link to the booking's own page.
  */
  .trip-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin: 0 0 2rem;
  }
  .trip-head .eyebrow a { color: inherit; }
  .trip-head h1 { margin: 0.35rem 0 0; }
  .trip-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .pill {
    display: inline-flex; align-items: center; border-radius: 999px; padding: 0.15rem 0.65rem;
    font-size: 0.875rem; font-weight: 600; white-space: nowrap;
  }
  .pill-attention { background: var(--car); color: #111827; }
  .pill-dead { background: var(--divider); color: var(--warn); }
  .itin { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 2rem; align-items: start; }
  .itin-days, .itin-rows { list-style: none; margin: 0; padding: 0; }
  .itin-day { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 0 0 2rem; }
  .itin-date { display: flex; flex-direction: column; align-items: flex-start; border-right: 1px solid var(--line); }
  .itin-dow { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .itin-num { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
  .itin-day-head {
    margin: 0 0 0.75rem; color: var(--fg); font-size: 1.25rem; font-weight: 600;
    text-transform: none; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline;
  }
  .itin-day-plain { color: var(--muted); font-weight: 500; }
  .itin-stay { font-size: 1rem; font-weight: 400; color: var(--muted); }
  .itin-stay b { color: var(--fg); font-weight: 600; }
  .itin-rows { display: grid; gap: 0.6rem; }
  .itin-row {
    display: grid; grid-template-columns: 5.5rem 2.5rem minmax(0, 1fr) auto; gap: 0.85rem;
    align-items: center; padding: 0.85rem 1rem; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
    color: var(--fg); text-decoration: none;
  }
  .itin-row:hover { border-color: var(--muted); color: var(--fg); }
  .itin-row[aria-current="true"] { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
  .itin-row.is-dead .itin-title { text-decoration: line-through; color: var(--muted); }
  .itin-time { font-family: var(--mono); font-size: 1rem; }
  .itin-time small { color: var(--muted); font-size: 0.875rem; }
  .itin-icon {
    width: 2.5rem; height: 2.5rem; border-radius: var(--radius-small);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .tone-flight .itin-icon { background: var(--flight-tint); color: var(--flight); }
  .tone-stay .itin-icon { background: var(--stay-tint); color: var(--gold); }
  .tone-car .itin-icon { background: var(--car-tint); color: #8a6400; }
  .tone-activity .itin-icon { background: var(--activity-tint); color: #1f7a57; }
  .tone-food .itin-icon { background: var(--food-tint); color: #a3366b; }
  .tone-other .itin-icon { background: var(--divider); color: var(--muted); }
  .itin-text { display: grid; min-width: 0; }
  .itin-title { font-weight: 600; overflow-wrap: anywhere; }
  .itin-sub { color: var(--muted); }
  .itin-empty {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin: 0; padding: 1rem 1.25rem; border: 1px dashed #9aa1ad; border-radius: var(--radius); color: var(--muted);
  }
  .itin-panel { position: sticky; top: 6rem; }
  .itin-detail {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.5rem;
  }
  .itin-detail-title { margin: 0.35rem 0 1rem; color: var(--fg); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; text-transform: none; line-height: 1.15; }
  .itin-callout { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-inner); }
  .itin-callout.attention { background: var(--attention-bg); border: 1px solid var(--attention-line); }
  .itin-callout.dead { background: var(--divider); color: var(--warn); }
  .itin-facts { margin: 0 0 1rem; }
  .itin-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--divider); }
  .itin-facts dt { color: var(--muted); }
  .itin-facts dd { margin: 0; text-align: right; font-weight: 500; }
  .itin-booking { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-inner); background: var(--bg); }
  .itin-booking-head { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
  .itin-booking code, .itin-people code { font-family: var(--mono); }
  .itin-people { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
  .itin-people li { display: flex; justify-content: space-between; gap: 1rem; }
  .itin-actions { margin: 0 0 1rem; }
  .itin-source {
    display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.75rem 1rem;
    border-radius: var(--radius-inner); background: var(--bg);
  }
  .itin-source span { flex: 1; }
  @media (max-width: 1000px) {
    .itin { grid-template-columns: minmax(0, 1fr); }
    .itin-panel { display: none; }
    .itin-row[aria-current="true"] { box-shadow: var(--shadow); border-color: var(--line); }
  }
  @media (max-width: 640px) {
    .itin-day { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    .itin-date { flex-direction: row; align-items: baseline; gap: 0.5rem; border-right: 0; }
    .itin-row { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; }
    .itin-time { grid-column: 2; grid-row: 2; color: var(--muted); }
    .itin-icon { grid-row: 1 / span 2; }
    .itin-row .pill { grid-column: 2; justify-self: start; }
  }
  /* Whose leg this is, on a trip several people converge on. */
  .itin-who {
    display: inline-block; align-self: flex-start; margin-bottom: 0.15rem;
    padding: 0.05rem 0.55rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600;
  }


  /*
    Booking page: breadcrumbs, a header that reads like the ticket, the review
    workspace in the main column, people and neighbours beside it.
  */
  .crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1.25rem; color: var(--muted); font-weight: 600; }
  .crumbs a { color: var(--fg); text-decoration: none; }
  .crumbs a:hover { color: var(--accent); }
  .crumbs [aria-current] { color: var(--muted); }
  .detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: start; }
  .detail-main { min-width: 0; }
  .detail-side { display: grid; gap: 1.25rem; position: sticky; top: 6rem; }
  .detail-head { margin: 0 0 1.5rem; }
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden;
    border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow);
    background: var(--card); margin-bottom: 1rem;
  }
  .hero-main { padding: 1.75rem 2rem; min-width: 0; }
  .hero-move .hero-main { background: var(--flight); color: #ffffff; }
  .hero-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .hero-eyebrow { margin: 0; font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .hero-move .hero-eyebrow { color: #dfe6ff; }
  .hero-route { display: grid; grid-template-columns: auto minmax(3rem, 1fr) auto; gap: 1rem; align-items: center; margin-top: 1.5rem; }
  .hero-code { margin: 0; font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
  .hero-when { margin: 0.35rem 0 0; font-size: 1rem; }
  .hero-end { text-align: right; }
  .hero-span { border-top: 1px dashed currentColor; opacity: 0.85; position: relative; text-align: center; }
  .hero-span span { position: relative; top: -1.6rem; font-family: var(--mono); font-size: 0.875rem; }
  .hero-place { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
  .hero-icon { width: 3rem; height: 3rem; border-radius: var(--radius-inner); display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .hero.tone-stay .hero-icon { background: var(--stay-tint); color: var(--gold); }
  .hero.tone-car .hero-icon { background: var(--car-tint); color: #8a6400; }
  .hero.tone-activity .hero-icon { background: var(--activity-tint); color: #1f7a57; }
  .hero.tone-food .hero-icon { background: var(--food-tint); color: #a3366b; }
  .hero.tone-other .hero-icon { background: var(--divider); color: var(--muted); }
  .hero-title { margin: 0; font-size: clamp(1.6rem, 4vw, 2.5rem); }
  .hero-side { margin: 0; padding: 1.5rem 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(5rem, auto)); gap: 1rem 1.75rem; align-content: start; }
  .hero-side dt { color: var(--muted); }
  .hero-side dd { margin: 0; font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }
  .pill-ok { background: var(--ok-bg); color: var(--ok-fg); }
  .pill-bad { background: #fde8e7; color: var(--warn); }
  .hero-move .pill-ok { background: #5dbb97; color: #0b3b2a; }
  .side-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; }
  .side-card h2 { margin: 0 0 0.9rem; color: var(--fg); font-size: 1.25rem; font-weight: 600; text-transform: none; letter-spacing: -0.01em; }
  .side-dark { background: #111827; border-color: #111827; }
  .side-dark h2 { color: #ffffff; }
  .people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
  .people li { display: flex; align-items: center; gap: 0.75rem; }
  .people .who { flex: 1; font-weight: 600; }
  .people .who small { font-weight: 400; color: var(--muted); font-size: 1rem; }
  .people .who .ticket { display: block; font-family: var(--mono); overflow-wrap: anywhere; }
  .people li.is-dead .who { text-decoration: line-through; color: var(--muted); }
  .people code { font-family: var(--mono); }
  .avatar { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--car); color: #111827; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
  .neighbors { display: grid; gap: 0.6rem; }
  .neighbor { display: grid; gap: 0.15rem; padding: 0.75rem 1rem; border-radius: var(--radius-inner); text-decoration: none; color: #111827; background: var(--car-tint); }
  .neighbor.tone-stay { background: var(--stay-tint); }
  .neighbor.tone-flight { background: var(--flight-tint); }
  .neighbor-when { font-family: var(--mono); font-size: 0.875rem; }
  .neighbor-what { font-weight: 600; }
  .detail-side .utility-drawer { margin-top: 0; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
  @media (prefers-color-scheme: dark) {
    .neighbor { color: #111827; }
    .side-dark { background: #0b0e13; border-color: var(--line); }
  }
  .attention-strip {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; align-items: center;
    margin: 0 0 1.5rem; padding: 0.9rem 1.25rem; border-radius: var(--radius);
    background: var(--attention-bg); border: 1px solid var(--attention-line); color: var(--fg); text-decoration: none;
  }
  .attention-strip span { font-weight: 600; color: var(--accent); }
  .inbox-section { margin-bottom: 2rem; }
  .grouping-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .detail-side .utility-drawer > summary { font-size: 1rem; font-weight: 600; color: var(--fg); }
  @media (max-width: 1000px) {
    /* One column, with the people and neighbours straight after the header
       rather than under the whole review workspace. */
    .detail-grid { display: flex; flex-direction: column; gap: 1.25rem; }
    .detail-main { display: contents; }
    .detail-main > *, .detail-side { order: 2; width: 100%; min-width: 0; align-self: stretch; }
    .detail-main > .notice, .detail-main > .detail-head { order: 0; }
    .detail-side { position: static; order: 1; }
    .detail-head { margin-bottom: 0; }
  }
  @media (max-width: 640px) {
    .hero { grid-template-columns: minmax(0, 1fr); }
    .hero-main { padding: 1.25rem; }
    .hero-side { padding: 1.25rem; }
    .hero-side dd { font-size: 1.5rem; }
  }

  /* Trips home and Today. */
  .home-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.75rem; }
  .home-head h1 { margin: 0 auto 0 0; }
  .home-top { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; margin-bottom: 2.5rem; }
  /* The hero card, dark in both schemes. Its head, map band and facts are laid out in trips-home. */
  .next-trip { display: block; container: hero / inline-size; overflow: hidden; border-radius: var(--radius); background: #111827; color: #ffffff; box-shadow: var(--shadow); }
  .next-trip .eyebrow { color: #c9cfda; }
  .next-trip h2 { margin: 0.4rem 0 1rem; font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 600; letter-spacing: -0.03em; text-transform: none; color: #ffffff; line-height: 1.05; }
  .next-trip h2 a { color: inherit; text-decoration: none; }
  .next-trip h2 a:hover { text-decoration: underline; }
  .next-trip-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; }
  .next-trip .button { background: #ffffff; color: #111827; border-color: #ffffff; }
  .next-trip button.quiet { background: transparent; color: #ffffff; border-color: #5b6270; }
  .forward-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
  .forward-card h2 { margin: 0 0 0.5rem; color: var(--fg); font-size: 1.35rem; font-weight: 600; text-transform: none; letter-spacing: -0.01em; }
  .forward-card p { color: var(--muted); }
  .forward-card code { font-family: var(--mono); color: var(--fg); overflow-wrap: anywhere; }
  .forward-card-actions { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0; }
  .home-section { margin: 0 0 2.5rem; }
  .home-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; }
  .home-h2 { margin: 0 0 1rem; color: var(--fg); font-size: 1.75rem; font-weight: 600; text-transform: none; letter-spacing: -0.02em; }
  .home-stat { margin: 0; color: var(--muted); }
  .home-stat b { color: var(--fg); }
  .trip-cards-grid { list-style: none; margin: 0; padding: 0; display: grid; }
  .trip-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); align-content: start; }
  .trip-tile h3 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
  .trip-tile h3 a { color: var(--fg); text-decoration: none; }
  .trip-tile h3 a:hover { color: var(--accent); }
  .trip-tile-when { margin: 0; font-weight: 600; }
  .trip-tile-meta { margin: 0; color: var(--muted); }
  .trip-tile button { justify-self: start; margin-top: 0.5rem; }
  .place-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .place-chip { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); text-decoration: none; }
  .place-chip span { font-family: var(--mono); color: var(--muted); font-size: 0.875rem; }
  .place-chip:hover { border-color: var(--accent); }
  .more-past { margin-top: 0.85rem; }
  .more-past > summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-bottom: 0.75rem; }
  .today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
  .today-main { display: grid; gap: 2rem; min-width: 0; }
  .today-side { display: grid; gap: 1.25rem; }
  .today-empty { margin: 0; padding: 1.5rem; border: 1px dashed #9aa1ad; border-radius: var(--radius); color: var(--muted); }
  .later-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
  .later-tile { display: grid; gap: 0.6rem; padding: 1.25rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); color: var(--fg); text-decoration: none; }
  .later-tile .itin-icon { background: var(--flight-tint); color: var(--flight); }
  .later-time { font-family: var(--mono); font-size: 1.25rem; }
  .later-what { font-weight: 600; }
  .side-dark-text { color: #c9cfda; }
  .side-dark .count { font-family: var(--mono); font-size: 1rem; color: #c9cfda; margin-left: 0.35rem; }
  a.button.attention-go { background: var(--car); color: #111827; border-color: var(--car); }
  .today-main .operational-now { background: var(--flight); border-color: var(--flight); color: #ffffff; padding: 1.75rem 2rem; }
  .today-main .operational-now h2 { color: #ffffff; font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.03em; }
  .today-main .operational-now .eyebrow, .today-main .operational-now .browser-zone, .today-main .operational-now .operational-time > span { color: #dfe6ff; }
  .today-main .operational-now a { color: #ffffff; }
  .today-main .operational-state { background: #ffffff; color: var(--flight); font-size: 0.875rem; }
  .today-main .browser-zone, .today-main .operational-time > span { font-size: 0.875rem; }
  .today-main .operational-now .button, .today-main .operational-now button { background: #ffffff; color: #111827; border-color: #ffffff; }
  @media (max-width: 1000px) {
    .home-top, .today-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* Trip tabs and Overview. */
  .tabs { display: inline-flex; gap: 0.25rem; padding: 0.3rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
  .tabs a { padding: 0.5rem 1.1rem; border-radius: 999px; color: var(--fg); font-weight: 600; text-decoration: none; }
  .tabs a[aria-current="page"] { background: var(--fg); color: var(--bg); }
  .ov-stats { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .ov-stats li { padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); }
  .ov-stats li b { color: var(--fg); font-size: 1.25rem; margin-right: 0.2rem; }
  .ov-stats li.short { background: var(--attention-bg); border-color: var(--attention-line); }
  .ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.25rem; }
  .ov-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
  .ov-tile.wide { grid-column: span 2; }
  .ov-tile-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.5rem; color: #111827; }
  .ov-tile-head b { display: block; font-size: 1.35rem; font-weight: 600; }
  .ov-tile-head small { font-size: 1rem; }
  .ov-count { font-size: 2.75rem; font-weight: 600; line-height: 1; }
  .ov-tile.tone-flight .ov-tile-head { background: var(--flight); color: #ffffff; }
  .ov-tile.tone-stay .ov-tile-head { background: var(--stay); }
  .ov-tile.tone-car .ov-tile-head { background: var(--car); }
  .ov-tile.tone-activity .ov-tile-head { background: var(--activity); }
  .ov-rows { list-style: none; margin: 0; padding: 0.5rem 1.5rem 1rem; }
  .ov-rows li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--divider); }
  .ov-rows li:last-child { border-bottom: 0; }
  .ov-rows a { display: grid; color: var(--fg); text-decoration: none; min-width: 0; }
  .ov-row-title { font-weight: 600; overflow-wrap: anywhere; }
  .ov-row-when { color: var(--muted); }
  .ov-code { font-family: var(--mono); padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--divider); white-space: nowrap; }
  .ov-nights { list-style: none; display: flex; gap: 0.35rem; margin: 1rem 1.5rem 0; padding: 0; }
  .ov-nights li { flex: 1; height: 1.75rem; border-radius: 6px; background: var(--stay-tint); }
  .ov-nights li.on { background: var(--stay); }
  .ov-docs { margin: 1.5rem 0 0; color: var(--muted); }
  @media (max-width: 760px) { .ov-tile.wide { grid-column: auto; } }


  /*
    Upcoming trip cards, per the dashboard design: a coloured band, the whole
    card a link (an overlay on the title's link, so the rename button inside
    stays its own control), equal heights with the summary pinned to the foot.
  */
  .trip-cards-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
  .trip-tile {
    position: relative; display: flex; flex-direction: column; gap: 0.4rem;
    padding: 1.4rem 1.5rem 1.25rem; overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  .trip-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--flight); }
  .trip-tile.band-stay::before { background: var(--stay); }
  .trip-tile.band-car::before { background: var(--car); }
  .trip-tile.band-activity::before { background: var(--activity); }
  .trip-tile.band-food::before { background: var(--food); }
  .trip-tile:hover { border-color: #d5d9e0; box-shadow: 0 2px 4px rgba(16, 24, 40, 0.08), 0 4px 10px rgba(16, 24, 40, 0.07); }
  .trip-tile .card-link::after { content: ""; position: absolute; inset: 0; }
  .trip-tile .card-link { color: var(--fg); text-decoration: none; }
  .trip-tile:hover .card-link { color: var(--accent); }
  .trip-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
  .trip-name h2, .trip-name h3 { margin: 0; }
  .trip-name-tools { display: inline-flex; align-items: center; gap: 0.15rem; white-space: nowrap; }
  .tag-suggested {
    font-size: 0.875rem; font-weight: 600; color: var(--muted); padding: 0.1rem 0.55rem;
    border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  }
  .icon-button {
    position: relative; z-index: 1; width: 2.25rem; height: 2.25rem; min-width: 44px; min-height: 44px;
    padding: 0; border-radius: 999px; background: transparent; border: 0; color: var(--muted);
  }
  .icon-button:hover { color: var(--accent); background: var(--divider); }
  .next-trip .tag-suggested { background: transparent; color: #c9cfda; border-color: #3a4150; }
  .next-trip .icon-button { color: #c9cfda; }
  .next-trip .icon-button:hover { background: #1f2937; color: #ffffff; }
  .next-trip .card-link { color: inherit; text-decoration: none; }
  .next-trip .card-link:hover { text-decoration: underline; }
  .trip-route { margin: 0.25rem 0 0; font-family: var(--sans); font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
  .trip-route .code { font-family: var(--mono); letter-spacing: 0.02em; }
  .trip-route .route-arrow, .trip-route .route-sep { color: var(--muted); }
  .next-trip .trip-route { color: #dfe6ff; margin-bottom: 1rem; font-size: 1.1rem; }
  .next-trip .trip-route .route-arrow, .next-trip .trip-route .route-sep { color: #9aa1ad; }
  .trip-tile-foot { margin-top: auto; display: grid; gap: 0.5rem; padding-top: 0.75rem; }
  .trip-gap {
    margin: 0; padding: 0.45rem 0.75rem; border-radius: var(--radius-small);
    background: #fffbeb; border: 1px solid #f3d27c; color: #111827; font-weight: 600;
  }

  /* Kitchen Drawer: placeholders as an inventory, not trips. */
  .drawer-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
  .drawer-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--divider); }
  .drawer-list li:last-child { border-bottom: 0; }
  .drawer-list a { display: grid; color: var(--fg); text-decoration: none; min-width: 0; }
  .drawer-list a:hover .drawer-what { color: var(--accent); }
  .drawer-what { font-weight: 600; overflow-wrap: anywhere; }
  .drawer-when { color: var(--muted); font-family: var(--mono); font-size: 0.875rem; }
  .drawer-suggest { margin-top: 1rem; }
  .drawer-suggest > summary { cursor: pointer; font-weight: 600; color: var(--accent); margin-bottom: 0.75rem; }
  .next-up {
    display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.9rem;
    margin: 0.25rem 0 1rem; padding: 0.85rem 1rem; border-radius: 12px;
    background: #1f2937; color: #ffffff; text-decoration: none; max-width: 34rem;
  }
  .next-up:hover { background: #273244; }
  .next-up-label { grid-row: span 2; align-self: center; color: var(--car); font-weight: 600; }
  .next-up-when { font-weight: 600; font-variant-numeric: tabular-nums; }
  .next-up-what { color: #c9cfda; }
  .staying { display: grid; grid-template-columns: auto 1fr; gap: 0 0.9rem; margin: 0 0 1rem; max-width: 34rem; padding: 0 1rem; }
  .staying-label { color: var(--stay); font-weight: 600; padding-top: 0.6rem; }
  .staying ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .staying li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; color: #c9cfda; }
  .staying a { color: #ffffff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
  .staying a:hover { text-decoration: underline; }
  .attention { margin: 0.5rem 0 0; max-width: 40rem; }
  .attention h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; color: #f3d27c; }
  .attention ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
  .attention li {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.5rem 1rem; padding: 0.6rem 0.85rem; border-radius: 10px;
    border: 1px solid #6b5a2a; color: #ffffff;
  }
  .attention-actions { display: flex; align-items: center; gap: 0.75rem; }
  .attention-actions form { margin: 0; }
  .next-trip .attention .button.quiet,
  .next-trip .attention button.quiet { background: transparent; color: #ffffff; border-color: #5b6270; }
  .link-button {
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem;
  }
  .next-trip .link-button { color: #c9cfda; }
  .notice form.inline { display: inline-flex; margin: 0 0 0 0.75rem; }
  .next-trip .eyebrow, .next-trip .tag-suggested { font-size: 1rem; }

  /* Hero: head, the map band edge to edge, then the facts. Dark in both schemes. */
  .home-top.has-map { display: block; }
  .next-trip {
    --hero-pad: 1.25rem; --hero-rule: #263041;
    --route: #8eaaf7; --sea: #0b1220; --land: #24314a; --coast: #3b4b69;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .next-trip { box-shadow: 0 0 0 1px #232c3b; }
  }
  :root[data-theme="dark"] .next-trip { box-shadow: 0 0 0 1px #232c3b; }
  /* Head. Phone: eyebrow, name, route, then countdown and action on a row that wraps. */
  .next-trip-head {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "name" "route" "when";
    padding: 1.5rem var(--hero-pad) 1.25rem;
  }
  .next-trip-head .eyebrow { grid-area: eyebrow; margin: 0; }
  .next-trip-head .trip-name { grid-area: name; }
  .next-trip-head h2 { margin: 0.2rem 0 0; }
  .next-trip-head .trip-route { grid-area: route; margin: 0.5rem 0 0; }
  .next-trip-when {
    grid-area: when; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.75rem;
  }
  .next-trip-head .next-trip-actions { grid-area: action; margin: 0; }
  .next-trip-head .next-trip-actions .button { min-height: 44px; }
  .next-trip-head .countdown {
    grid-area: count; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem;
    margin: 0; text-align: left; color: var(--car); line-height: 1;
  }
  .next-trip-head .countdown b { display: inline; font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; }
  .next-trip-head .countdown span { font-size: 1.25rem; font-weight: 500; }
  /* The map band. Each tier has its own frame; only the one for this width shows. */
  .next-trip .trip-map {
    position: relative; margin: 0; height: clamp(12rem, 40cqw, 16rem);
    container-type: size; overflow: hidden; border-top: 1px solid var(--hero-rule); background: var(--sea);
  }
  .trip-map-tier { position: absolute; inset: 0; display: none; }
  @container hero (width < 20rem) { .trip-map-tier.tier-xs { display: block; } }
  @container hero (20rem <= width < 40rem) { .trip-map-tier.tier-narrow { display: block; } }
  @container hero (width >= 40rem) { .trip-map-tier.tier-wide { display: block; } }
  /* The frame's exact shape, centred, or flush to the edge home lies past. */
  .trip-map-stage {
    position: absolute; left: 50%; top: 50%;
    width: min(100cqw, 100cqh * var(--aspect)); aspect-ratio: var(--aspect);
    transform: translate(-50%, -50%);
  }
  .trip-map-tier.off-w > .trip-map-stage { left: 0; transform: translateY(-50%); }
  .trip-map-tier.off-e > .trip-map-stage { left: auto; right: 0; transform: translateY(-50%); }
  .trip-map-tier.off-n > .trip-map-stage { top: 0; transform: translateX(-50%); }
  .trip-map-tier.off-s > .trip-map-stage { top: auto; bottom: 0; transform: translateX(-50%); }
  .next-trip .trip-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .next-trip .trip-map-land { color: var(--land); fill: currentColor; stroke: var(--coast); stroke-width: 1; }
  .next-trip .trip-map-hop { fill: none; stroke: var(--route); stroke-width: 2.5; stroke-linecap: round; opacity: 0.9; }
  .trip-map-pins, .trip-map-labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
  /* Pins are HTML, so a dot is 12px at every zoom. */
  .trip-map-pins li {
    position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: var(--route); box-shadow: 0 0 0 2.5px var(--sea);
  }
  .trip-map-pins li.home { background: var(--sea); border: 3px solid var(--route); box-shadow: none; }
  .next-trip .trip-map-labels li:not(.visually-hidden) {
    position: absolute; display: grid; width: max-content; white-space: nowrap; line-height: 1.2;
    padding: 3px 7px; border-radius: 6px; background: color-mix(in srgb, var(--sea) 84%, transparent);
  }
  /* A word longer than the line breaks rather than overflowing; the server counts its lines the same way. */
  .next-trip .trip-map-labels li.wraps { white-space: normal; overflow-wrap: anywhere; max-width: 11rem; }
  .next-trip .trip-map-labels b { color: #ffffff; font-weight: 600; font-size: 1rem; }
  .next-trip .trip-map-labels small { color: #aab3c2; font-size: 1rem; }
  /* Offsets match the server: 10px beside, 8px off a corner. */
  .trip-map-labels .at-right { transform: translate(10px, -50%); }
  .trip-map-labels .at-left { transform: translate(calc(-100% - 10px), -50%); text-align: right; }
  .trip-map-labels .at-above { transform: translate(-50%, calc(-100% - 10px)); text-align: center; }
  .trip-map-labels .at-below { transform: translate(-50%, 10px); text-align: center; }
  .trip-map-labels .at-above-right { transform: translate(8px, calc(-100% - 8px)); }
  .trip-map-labels .at-below-right { transform: translate(8px, 8px); }
  .trip-map-labels .at-above-left { transform: translate(calc(-100% - 8px), calc(-100% - 8px)); text-align: right; }
  .trip-map-labels .at-below-left { transform: translate(calc(-100% - 8px), 8px); text-align: right; }
  /* Home past the edge: a marker where its arcs leave the band. */
  .trip-map-labels .trip-map-home.off-w { left: 8px; transform: translateY(-50%); }
  .trip-map-labels .trip-map-home.off-e { right: 8px; transform: translateY(-50%); }
  .trip-map-labels .trip-map-home.off-n { top: 8px; transform: translateX(-50%); }
  .trip-map-labels .trip-map-home.off-s { bottom: 8px; transform: translateX(-50%); }
  /* Facts: stacked rows on a phone, equal columns once there is room. */
  .next-trip-facts { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 var(--hero-pad) 0.5rem; border-top: 1px solid var(--hero-rule); text-wrap: pretty; }
  .next-trip-facts > * { margin: 0; max-width: none; padding: 1.1rem 0; border-top: 1px solid var(--hero-rule); }
  .next-trip-facts > :first-child { border-top: 0; }
  .next-trip-facts .next-up-label, .next-trip-facts .staying-label, .next-trip-facts .attention h3 {
    display: block; margin: 0 0 0.3rem; padding: 0; font-size: 1rem; font-weight: 600;
  }
  .next-trip-facts .next-up { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; background: none; border-radius: 0; color: #ffffff; }
  .next-trip-facts .next-up:hover { background: none; }
  .next-trip-facts .next-up:hover .next-up-when { text-decoration: underline; }
  .next-trip-facts .next-up-label { grid-row: auto; color: var(--route); }
  .next-trip-facts .staying { display: block; }
  .next-trip-facts .staying-label { color: var(--stay); }
  .next-trip-facts .staying li { display: grid; gap: 0; }
  /* A 44px hit area without changing the line's rhythm. */
  .next-trip-facts .staying a { position: relative; display: inline-block; min-height: 0; padding-block: 0.625rem; margin-block: -0.625rem; }
  /* Each gap keeps its gold-edged box: it is the one thing to act on. */
  .next-trip-facts .attention li { display: grid; gap: 0.5rem; }
  .next-trip-facts .attention-actions { flex-wrap: wrap; gap: 0.5rem; }
  .next-trip .attention button.quiet { min-height: 44px; }
  .next-trip .link-button { padding: 0 0.25rem; }
  @container hero (width >= 40rem) {
    .next-trip-head {
      grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem;
      grid-template-areas: "eyebrow eyebrow" "name count" "route action";
      padding: 2rem 2.25rem 1.5rem;
    }
    .next-trip-when { display: contents; }
    .next-trip-head .trip-name, .next-trip-head .countdown { align-self: baseline; }
    .next-trip-head .countdown { justify-content: flex-end; }
    .next-trip-head .next-trip-actions { justify-self: end; align-self: start; margin: 0.6rem 0 0; }
    .next-trip-head .countdown b { font-size: clamp(2.25rem, 6vw, 4rem); }
    .next-trip-head .countdown span { font-size: 1.5rem; }
    .next-trip-facts { padding-left: 2.25rem; padding-right: 2.25rem; }
  }
  @container hero (width >= 52rem) {
    .next-trip-facts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 0; }
    .next-trip-facts > * { border-top: 0; border-left: 1px solid var(--hero-rule); padding: 1.5rem 2.25rem; }
    .next-trip-facts > :first-child { border-left: 0; }
  }