/* ============================================================
   Shared sample-itinerary styles (k-duplicate_samples.css)
   Used by every /itineraries/samples/<region>/ page.
   Edit here once; all sample pages pick it up.
   ============================================================ */
    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #fafafa;
      color: #111111;
      line-height: 1.5;
    }

    /* ---------- TOP CONTROL BAR ---------- */
    /* ---------- BRAND STRIP (top row, scrolls away) ---------- */
    /* ---------- REUSABLE CONFIRM DIALOG ---------- */
    /* Use higher specificity (id-less double class) so this z-index beats the
       later-defined base .modal rule (which would otherwise win on a tie). */
    .modal.confirm-modal {
      max-width: 420px;
      z-index: 1101;  /* above any other modal (1001) so validation alerts show on top */
    }
    /* The confirm dialog's backdrop also sits above other modal backdrops */
    .modal-backdrop#confirmBackdrop {
      z-index: 1100;
    }
    .confirm-modal-message {
      font-size: 14px;
      line-height: 1.55;
      color: #444;
      margin: 0;
      white-space: pre-line;  /* honour \n in messages */
    }
    .modal-btn-danger {
      background: #e60000;
      color: #fff;
      border: none;
    }
    .modal-btn-danger:hover { background: #c60000; }

    /* ---------- HEADER STACK (brand strip + tool row, sticky together) ---------- */
    .header-stack {
      position: sticky;
      top: 0;
      z-index: 90;
      background: #fff;
    }

    /* ---------- BRAND STRIP (top row) ---------- */
    .brand-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 24px;
      background: #fff;
      flex-wrap: wrap;
      /* Red accent line under the brand strip */
      border-bottom: 2px solid #e60000;
    }
    .brand-strip-left {
      display: flex;
      align-items: center;
      gap: 22px;
    }
    .brand-logo {
      display: flex;
      align-items: center;
      gap: 11px;
      text-decoration: none;
      flex-shrink: 0;
    }
    .logo-mark {
      height: 44px;
      width: auto;
      display: block;
    }
    .logo-word {
      font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
      font-weight: 700;
      font-size: 27px;
      line-height: 1;
      letter-spacing: 0.3px;
      color: #333333;
      white-space: nowrap;
    }
    .logo-accent {
      color: #e60000;
    }
    .brand-link {
      font-size: 13px;
      font-weight: 700;
      color: #111;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color 0.12s ease;
    }
    .header-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 38px;
      padding: 0 14px;
      border: 1px solid #dcdcdc;
      border-radius: 999px;
      background: #fff;
      font-size: 13px;
      font-weight: 750;
      color: #333;
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }
    .header-back i { font-size: 11px; }
    .header-back:hover { border-color: #e60000; color: #e60000; }
    .brand-link:hover { color: #e60000; }
    .brand-link i { font-size: 11px; }
    .brand-strip-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .brand-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 36px;
      padding: 0 16px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .brand-btn:hover { border-color: #e60000; color: #e60000; }
    .brand-btn i { font-size: 12px; }
    .brand-account { position: relative; top: 0px; }
    .brand-account-signin { display: inline-block; padding: 10px 16px; border-radius: 999px; background: #e60000; color: #fff; font-weight: 900; font-size: 14px; text-decoration: none; white-space: nowrap; line-height: 1; transition: background 0.18s ease; }
    .brand-account-signin:hover { background: #b1222a; }
    .brand-avatar-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #e6e6e6;
      background: #fff;
      border-radius: 999px;
      padding: 5px 12px 5px 6px;
      cursor: pointer;
      font-family: inherit;
    }
    .brand-avatar-btn:hover { border-color: #ccc; }
    .brand-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #e60000;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      line-height: normal;
    }
    .av-tx { display: inline-block; transform: translateY(-1px); }
    .brand-avatar-name { font-size: 14px; font-weight: 700; color: #333; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .brand-avatar-chevron { font-size: 11px; color: #767676; }
    .brand-account-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 11px);
      min-width: 232px;
      background: #fff;
      border: 1px solid #ededed;
      border-radius: 14px;
      box-shadow: 0 18px 45px rgba(0,0,0,0.12);
      padding: 8px;
      z-index: 120;
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    }
    .brand-account-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .brand-account-menu-title {
      font-size: 13px;
      font-weight: 900;
      color: #111;
      padding: 8px 12px 6px;
    }
    .brand-account-pointer { position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #ededed; border-top: 1px solid #ededed; transform: rotate(45deg); }
    .brand-account-profile { display: flex; align-items: center; gap: 10px; padding: 6px 10px 12px; border-bottom: 1px solid #f0f0f0; margin-bottom: 6px; }
    .brand-account-profile-avatar { width: 36px; height: 36px; border-radius: 50%; background: #e60000; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; text-transform: uppercase; line-height: normal; flex-shrink: 0; }
    .brand-account-profile-meta { min-width: 0; display: flex; flex-direction: column; }
    .brand-account-profile-name { font-size: 14px; font-weight: 800; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .brand-account-profile-email { font-size: 12px; color: #767676; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .brand-account-menu-item {
      display: block;
      width: 100%;
      text-align: left;
      box-sizing: border-box;
      padding: 10px 12px;
      border-radius: 9px;
      font-size: 14px;
      font-weight: 700;
      color: #333;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      text-decoration: none;
    }
    .brand-account-menu-item:hover { background: rgba(230,0,0,0.08); color: #e60000; }
    .brand-account-menu-divider {
      height: 1px;
      background: #f0f0f0;
      margin: 6px 4px;
    }
    .brand-account-signout { color: #c1121f; }

    .control-bar {
      background: #ffffff;
      border-bottom: 1px solid #ececec;
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .control-group-collapse,
    .control-group-undo {
      order: 1;
    }

    .control-bar-logo {
      font-size: 18px;
      font-weight: 900;
      color: #e60000;
      margin-right: auto;
    }

    .control-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .control-group label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #737373;
    }

    .control-select {
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 7px 30px 7px 12px;   /* extra right padding for the custom arrow */
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      background-color: #fff;
      cursor: pointer;
      outline: none;
      /* Hide the browser's native arrow and draw our own so it lines up with
         the Font Awesome chevrons on the neighbouring buttons. */
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23888888' d='M8 11.2L1.6 4.8l1.3-1.3L8 8.6l5.1-5.1 1.3 1.3z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 11px 11px;
    }

    .control-select:hover {
      border-color: #e60000;
      color: #e60000;
      /* red chevron on hover, matching the other buttons */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23e60000' d='M8 11.2L1.6 4.8l1.3-1.3L8 8.6l5.1-5.1 1.3 1.3z'/%3E%3C/svg%3E");
    }
    .control-select:focus {
      border-color: #e60000;
    }

    /* ---------- PROVIDERS BUTTON + PANEL ---------- */
    .providers-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      background: #fff;
      color: #111;
      cursor: pointer;
      transition: border-color 0.15s ease;
    }

    .providers-btn:hover {
      border-color: #e60000;
      color: #e60000;
    }

    .providers-btn.open {
      border-color: #e60000;
    }

    .providers-panel {
      position: absolute;
      background: #ffffff;
      border: 1px solid #ececec;
      border-radius: 16px;
      box-shadow: 0 14px 40px rgba(0,0,0,0.12);
      padding: 18px;
      z-index: 110;
      width: 320px;
      display: none;
    }

    .providers-panel.open {
      display: block;
    }

    .providers-panel-header {
      padding-bottom: 14px;
      margin-bottom: 14px;
      border-bottom: 1px solid #f3f3f3;
    }

    .providers-panel-eyebrow {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #e60000;
      margin-bottom: 6px;
    }

    .providers-panel-sub {
      font-size: 12px;
      line-height: 1.5;
      color: #767676;
    }

    .providers-section {
      margin-bottom: 14px;
    }

    .providers-section:last-child {
      margin-bottom: 0;
    }

    .providers-section-label {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #737373;
      margin-bottom: 8px;
    }
    .providers-section-hint {
      font-weight: 700;
      letter-spacing: 0.02em;
      text-transform: none;
      color: #bbb;
      font-size: 10px;
      margin-left: 4px;
    }

    .providers-options {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .provider-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #ececec;
      background: #fff;
      color: #222;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      text-align: left;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .provider-option:hover {
      border-color: #e60000;
    }

    .provider-option.active {
      border-color: #e60000;
      background: #fff8f8;
      color: #e60000;
    }

    .provider-option.active::after {
      content: '✓';
      font-weight: 900;
      color: #e60000;
    }

    /* Multi-select (Stays): a leading checkbox makes "pick several" obvious.
       Suppress the trailing ✓ for this group so it doesn't double up. */
    .providers-options[data-providers="stay"] .provider-option {
      position: relative;
      padding-left: 38px;
    }
    .providers-options[data-providers="stay"] .provider-option::before {
      content: '';
      position: absolute;
      left: 12px; top: 50%; transform: translateY(-50%);
      width: 16px; height: 16px;
      border: 1.5px solid #d2d2d2; border-radius: 5px;
      background: #fff;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .providers-options[data-providers="stay"] .provider-option.active::before {
      border-color: #e60000; background: #e60000;
      /* white check mark drawn as a tiny SVG */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
    }
    .providers-options[data-providers="stay"] .provider-option.active::after {
      content: none;  /* no trailing tick for the checkbox group */
    }

    /* Hidden native date input — triggered by the visible pill button. */
    .trip-date-hidden-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
      border: 0;
    }

    /* Currency popover: rows show a symbol badge + currency name. The list is
       long (13 rows) so the body scrolls past a sensible height. */
    .currency-panel .providers-panel-body {
      max-height: 340px;
      overflow-y: auto;
    }
    .currency-option {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .currency-option-symbol {
      flex: 0 0 auto;
      min-width: 34px;
      text-align: center;
      font-weight: 900;
      font-size: 13px;
      color: #555;
      background: #f4f4f4;
      border-radius: 7px;
      padding: 3px 6px;
    }
    .currency-option.active .currency-option-symbol {
      background: #fdeaea;
      color: #e60000;
    }
    .currency-option-text {
      display: flex;
      flex-direction: column;
      line-height: 1.25;
      text-align: left;
    }
    .currency-option-code {
      font-size: 13px;
      font-weight: 800;
    }
    .currency-option-name {
      font-size: 11px;
      font-weight: 600;
      color: #767676;
    }
    .currency-option.active .currency-option-name {
      color: #e07a7a;
    }
    /* The check mark for the active row sits at the far right (override the
       generic provider-option ::after which sits inline). */
    .currency-option { justify-content: flex-start; position: relative; padding-right: 32px; }
    .currency-option.active::after {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
    }

    /* ---------- UNDO / REDO BUTTONS ---------- */
    .control-group-undo {
      gap: 10px;
      flex-direction: row;
      align-items: center;
    }

    .undo-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid #dcdcdc;
      background: #fff;
      color: #333;
      cursor: pointer;
      font-size: 13px;
      font-weight: 750;
      font-family: inherit;
      white-space: nowrap;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .undo-btn i { font-size: 11px; }

    .undo-btn:hover:not(:disabled) {
      border-color: #e60000;
      color: #e60000;
    }

    .undo-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    /* ---------- TRAVELLER STEPPER ROWS ---------- */
    .traveller-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 0;
      border-bottom: 1px solid #f3f3f3;
    }

    .traveller-row:last-child {
      border-bottom: none;
    }

    .traveller-label-block {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .traveller-label {
      font-size: 14px;
      font-weight: 900;
      color: #111;
    }

    .traveller-sub {
      font-size: 11px;
      font-weight: 700;
      color: #767676;
    }

    .stepper {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid #ececec;
      border-radius: 999px;
      padding: 4px;
      background: #fff;
    }

    .stepper-btn {
      width: 30px;
      height: 30px;
      border: none;
      background: #f5f5f5;
      color: #333;
      border-radius: 50%;
      cursor: pointer;
      font-family: inherit;
      font-size: 16px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .stepper-btn:hover {
      background: #e60000;
      color: #fff;
    }

    .stepper-btn[disabled] {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .stepper-btn[disabled]:hover {
      background: #f5f5f5;
      color: #333;
    }

    .stepper-count {
      width: 44px;
      height: 30px;
      border: none;
      background: transparent;
      text-align: center;
      font-family: inherit;
      font-size: 14px;
      font-weight: 900;
      color: #111;
      outline: none;
      padding: 0;
      appearance: textfield;
      -moz-appearance: textfield;
    }

    .stepper-count::-webkit-outer-spin-button,
    .stepper-count::-webkit-inner-spin-button {
      appearance: none;
      -webkit-appearance: none;
      margin: 0;
    }

    .stepper-count:focus {
      background: #fff8f8;
      border-radius: 6px;
    }

    /* ---------- PAGE LAYOUT ---------- */
    .page-shell {
      margin: 0;
      padding: 32px 24px 80px;
      display: grid;
      grid-template-columns: 210px minmax(0, 1fr) 340px;
      gap: 28px;
      align-items: start;
    }

    @media (max-width: 1100px) {
      .page-shell {
        grid-template-columns: 1fr;
      }
    }

    /* ---------- DAY NAV SIDEBAR ---------- */
    .day-nav-sidebar {
      position: sticky;
      top: 150px;  /* below the two-row header (brand strip + tool row) */
      max-height: calc(100vh - 170px);
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid #ececec;
      border-radius: 16px;
      overflow: hidden;
    }
    .day-nav-sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid #f2f2f2;
      flex-shrink: 0;
    }
    .day-nav-sidebar-title {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #767676;
    }
    .day-nav-sidebar-close {
      display: none;  /* hidden on desktop; shown in mobile slide-out */
      border: none;
      background: transparent;
      color: #767676;
      font-size: 18px;
      cursor: pointer;
      padding: 4px;
    }
    .day-nav-sidebar-list {
      overflow-y: auto;
      padding: 8px;
      flex: 1;
    }
    .day-nav-sb-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      padding: 10px 10px;
      border: none;
      background: transparent;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.12s ease;
      text-decoration: none;
    }
    .day-nav-sb-item:hover { background: #f7f7f7; }
    .day-nav-sb-item.is-active { background: #fff1f1; }
    .day-nav-sb-date {
      font-size: 12px;
      font-weight: 900;
      color: #e60000;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      min-width: 52px;
      line-height: 1.2;
    }
    .day-nav-sb-date small {
      display: block;
      font-size: 9px;
      font-weight: 800;
      color: #bbb;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .day-nav-sb-info { min-width: 0; flex: 1; }
    .day-nav-sb-name {
      font-size: 13px;
      font-weight: 800;
      color: #111;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .day-nav-sb-city {
      font-size: 11px;
      color: #767676;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .day-nav-sb-add {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: calc(100% - 16px);
      margin: 4px 8px 8px;
      padding: 10px;
      border: 1px dashed #d8d8d8;
      border-radius: 10px;
      background: transparent;
      color: #767676;
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .day-nav-sb-add:hover {
      border-color: #e60000;
      border-style: solid;
      color: #e60000;
      background: #fff8f8;
    }
    .day-nav-sidebar-backdrop { display: none; }

    /* Mobile: slide-out panel from the left */
    @media (max-width: 1100px) {
      .day-nav-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        max-height: none;
        border-radius: 0;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 0 0 40px rgba(0,0,0,0.2);
      }
      .day-nav-sidebar.open { transform: translateX(0); }
      .day-nav-sidebar-close { display: block; }
      .day-nav-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 199;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
      }
      .day-nav-sidebar-backdrop.open {
        opacity: 1;
        pointer-events: auto;
      }
    }

    .main-column {
      display: flex;
      flex-direction: column;
      gap: 24px;
      min-width: 0;
    }

    /* ---------- DAY CARD ---------- */
    /* ---------- TRIP HERO IMAGE (with overlaid title + meta) ---------- */
    .trip-hero {
      position: relative;
      width: 100%;
      height: 280px;
      border-radius: 22px;
      background-size: cover;
      background-position: center;
      background-color: #f0f0f0;
      margin-bottom: 24px;
      overflow: hidden;
    }

    /* Cover slices: straight outer edges, slanted internal dividers. Each is a
       full-size layer clipped to an even parallelogram; renderCoverHero() sets
       the clip-path + background-image per slice. */
    .trip-hero-slice {
      position: absolute;
      inset: 0;
    }
    /* The image layer is sized to its own slice band (plus the slant overhang)
       and cover-fit, so each photo is framed and centred within its slice
       rather than within the whole banner. The parent's clip-path crops it. */
    .trip-hero-slice-img {
      position: absolute;
      top: 0;
      bottom: 0;
      background-size: cover;
      background-position: center;
      background-color: #e8e3de;
    }

    /* Dark gradient at the bottom for text legibility — the image fades into
       darkness behind the title and pill row. */
    .trip-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.35) 25%,
        rgba(0,0,0,0) 55%);
      pointer-events: none;
    }

    .trip-hero-overlay {
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 28px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .trip-hero-title {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      padding: 4px 10px 4px 0;
      font-size: 42px;
      font-weight: 900;
      line-height: 1.05;
      color: #fff;
      letter-spacing: -0.02em;
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.15s ease;
      max-width: fit-content;
    }
    .trip-hero-title:hover,
    .trip-hero-title:focus {
      background: rgba(255,255,255,0.12);
      outline: none;
    }

    .trip-hero-title-edit-hint {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.85);
      font-size: 12px;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: background 0.15s ease, color 0.15s ease;
    }
    .trip-hero-title:hover .trip-hero-title-edit-hint,
    .trip-hero-title:focus .trip-hero-title-edit-hint {
      background: #fff;
      color: #e60000;
    }

    /* When the user is renaming, swap the title for an input */
    .trip-hero-title-input {
      display: none;
      width: 100%;
      max-width: 680px;
      font-family: inherit;
      font-size: 42px;
      font-weight: 900;
      line-height: 1.05;
      color: #111;
      padding: 4px 12px;
      border: 2px solid #fff;
      border-radius: 8px;
      background: rgba(255,255,255,0.95);
      outline: none;
    }

    .trip-hero.is-editing .trip-hero-title {
      display: none;
    }
    .trip-hero.is-editing .trip-hero-title-input {
      display: block;
    }

    .trip-hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .trip-hero-meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.18);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #fff;
      font-size: 13px;
      font-weight: 800;
    }

    .trip-hero-meta-pill i {
      font-size: 12px;
      opacity: 0.9;
    }

    /* The date-range pill is interactive (opens the date picker). At rest it
       looks identical to the static location pill; the highlight only appears
       on hover to signal it's clickable. */
    #tripHeroDateRange {
      cursor: pointer;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    #tripHeroDateRange:hover {
      background: rgba(255, 255, 255, 0.32);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    }

    /* ---------- TRIP HEADER (now just the summary paragraph) ---------- */
    /* ---------- PLANNING NOTES ---------- */
    .planning-notes-input {
      width: 100%;
      min-height: 120px;
      resize: vertical;
      font-family: inherit;
      font-size: 14px;
      line-height: 1.65;
      color: #333;
      background: #fafafa;
      border: 1px solid #ececec;
      border-radius: 14px;
      padding: 14px 16px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    .planning-notes-input::placeholder { color: #767676; }

    .planning-notes-input:focus {
      outline: none;
      background: #fff;
      border-color: #e60000;
      box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.07);
    }

    /* ---------- DAYS CONTAINER ---------- */
    .days-container {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* ---------- PLACES TO CONSIDER (wishlist) ---------- */
    .wishlist-section {
      background: #ffffff;
      border: 1px solid #ececec;
      border-radius: 22px;
      padding: 26px 28px 24px;
      margin-bottom: 24px;
    }

    .wishlist-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 18px;
    }

    .wishlist-header-text {
      flex: 1;
      min-width: 0;
    }

    .wishlist-eyebrow {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #e60000;
      margin-bottom: 6px;
    }

    .wishlist-title {
      font-size: 20px;
      font-weight: 900;
      color: #111;
      margin: 0 0 4px;
    }

    .wishlist-subtitle {
      font-size: 13px;
      color: #767676;
      margin: 0 0 6px;
      line-height: 1.5;
    }

    /* "New list" is a secondary action (per CTA hierarchy), so it's a quiet
       white/outlined pill rather than a solid filled button. */
    .wishlist-add-list-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 16px;
      background: #fff;
      color: #333;
      border: 1px solid #ddd;
      border-radius: 999px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .wishlist-add-list-btn:hover {
      border-color: #e60000;
      color: #e60000;
      background: #fff;
    }
    .wishlist-add-list-btn i {
      font-size: 10px;
    }

    /* Container for all named lists */
    .wishlist-lists-container {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-top: 18px;
    }

    /* Individual list section within the container */
    .wishlist-list {
      border-top: 1px solid #f4f4f4;
      padding-top: 16px;
    }
    .wishlist-list:first-child {
      border-top: none;
      padding-top: 0;
    }

    .wishlist-list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .wishlist-list-name-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }

    .wishlist-list-name {
      font-size: 15px;
      font-weight: 900;
      color: #111;
      margin: 0;
    }

    .wishlist-list-count {
      font-size: 11px;
      font-weight: 800;
      color: #767676;
      padding: 2px 8px;
      background: #f4f4f4;
      border-radius: 999px;
    }

    .wishlist-list-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
      align-items: center;
    }

    .wishlist-list-add-place-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      background: #fff;
      color: #333;
      border: 1px solid #ddd;
      border-radius: 999px;
      font-family: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .wishlist-list-add-place-btn:hover {
      border-color: #e60000;
      color: #e60000;
      background: #fff;
    }
    .wishlist-list-add-place-btn i {
      font-size: 9px;
    }

    /* Edit + delete grouped in a subtle pill so they read as one unit
       attached to the section, rather than two detached floating icons. */
    .wishlist-list-icon-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .wishlist-list-icon-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #e8e8e8;
      background: #fff;
      color: #767676;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      transition: all 0.15s ease;
    }
    .wishlist-list-icon-btn:hover {
      border-color: #e60000;
      color: #e60000;
    }
    .wishlist-list-icon-btn.danger:hover {
      border-color: #c60000;
      color: #c60000;
    }
    .wishlist-list-icon-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
    .wishlist-list-icon-btn:disabled:hover {
      background: transparent;
      color: #767676;
    }

    /* List track: vertical stack of rows (was a horizontal card carousel). */
    .wishlist-list-track-wrap {
      padding: 2px 0;
    }
    .wishlist-list-track {
      display: flex;
      flex-direction: column;
      gap: 0;
      border: 1px solid #ececec;
      border-radius: 14px;
      overflow: hidden;
    }
    /* When the track only holds an empty/no-match state (not rows), drop the
       border so those panels keep their own dashed styling. */
    .wishlist-list-track:not(:has(.wishlist-row)) {
      border: none;
      border-radius: 0;
      overflow: visible;
    }

    /* Empty state per list */
    .wishlist-list-empty {
      flex: 1;
      padding: 18px 16px;
      border: 1px dashed #e8e8e8;
      border-radius: 12px;
      text-align: center;
      color: #767676;
      font-size: 12px;
    }

    /* Empty state (no items at all): neutral grey clipboard icon + grey text
       on a quiet white box with a grey dashed border. Only the CTA carries the
       brand red — keeps the focus on the single primary action. */
    .wishlist-list-empty-rich {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 36px 20px;
      border: 1.5px dashed #e2e2e2;
      background: #fff;
      color: inherit;
    }
    .wishlist-empty-icon {
      color: #cfcfcf;
      font-size: 34px;
      margin-bottom: 14px;
    }
    .wishlist-empty-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #737373;
    }
    .wishlist-empty-sub {
      font-size: 13px;
      color: #767676;
      margin-bottom: 16px;
    }
    .wishlist-empty-add-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 20px;
      background: #e60000;
      color: #fff;
      border: none;
      border-radius: 999px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .wishlist-empty-add-btn:hover {
      background: #c60000;
    }
    .wishlist-empty-add-btn i {
      font-size: 10px;
    }

    .wishlist-filter-clear-link {
      background: none;
      border: none;
      color: #e60000;
      font-weight: 800;
      font-size: 12px;
      cursor: pointer;
      padding: 0 0 0 6px;
      text-decoration: underline;
      font-family: inherit;
    }
    .wishlist-filter-clear-link:hover {
      color: #c60000;
    }

    /* Filter row (search + type chips) */
    .wishlist-list-filter {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 14px;
      padding: 0;
    }

    .wishlist-filter-search-wrap {
      position: relative;
      flex: 1;
      min-width: 220px;
      max-width: 320px;
    }

    .wishlist-filter-search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #767676;
      font-size: 12px;
      pointer-events: none;
    }

    .wishlist-filter-search-input {
      width: 100%;
      padding: 8px 32px 8px 32px;
      border: 1px solid #e6e6e6;
      border-radius: 999px;
      font-family: inherit;
      font-size: 13px;
      color: #111;
      background: #fff;
      outline: none;
      transition: border-color 0.15s ease;
    }
    .wishlist-filter-search-input:focus {
      border-color: #111;
    }
    .wishlist-filter-search-input::placeholder {
      color: #bbb;
    }

    .wishlist-filter-search-clear {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #eee;
      color: #555;
      border: none;
      cursor: pointer;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.12s ease;
    }
    .wishlist-filter-search-clear:hover {
      background: #ddd;
    }

    .wishlist-filter-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .wishlist-filter-chip {
      padding: 6px 12px;
      border: 1px solid #e0e0e0;
      background: #fff;
      color: #555;
      border-radius: 999px;
      font-family: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .wishlist-filter-chip:hover {
      border-color: #111;
      color: #111;
    }
    .wishlist-filter-chip.is-active {
      background: #e60000;
      color: #fff;
      border-color: #e60000;
    }
    .wishlist-filter-chip.is-active:hover {
      background: #c60000;
      border-color: #c60000;
    }

    /* Small "showing X of Y" label next to count */
    .wishlist-list-filter-status {
      font-size: 11px;
      font-weight: 800;
      color: #767676;
      margin-left: 4px;
    }

    /* Card */
    /* ---- Wishlist ROW (vertical list item, per mockup) ----
       handle · thumbnail · name + subtitle · actions · chevron */
    .wishlist-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: #fff;
      border-bottom: 1px solid #f1f1f1;
      position: relative;
      cursor: grab;            /* whole row is draggable to reorder */
      touch-action: none;      /* pointer events drive the drag, not scrolling */
      user-select: none;
      -webkit-user-select: none;
    }
    .wishlist-row:active { cursor: grabbing; }
    .wishlist-row:last-child {
      border-bottom: none;
    }
    .wishlist-row:hover {
      background: #fafafa;
    }

    
    .wishlist-row-thumb {
      flex-shrink: 0;
      width: 52px;
      height: 52px;
      border-radius: 10px;
      background-color: #f4f4f4;
      background-size: cover;
      background-position: center;
    }
    .wishlist-row-thumb-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c8c8c8;
      font-size: 18px;
    }

    .wishlist-row-body {
      flex: 1;
      min-width: 0;
    }
    .wishlist-row-name {
      font-size: 15px;
      font-weight: 800;
      color: #111;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* Meta row under the place name — holds the category pill (and, in future,
       could also carry an area label like "Asakusa, Tokyo" once place data
       carries a locality field). */
    .wishlist-row-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 5px;
      min-width: 0;
    }
    /* Slightly tighter pill to suit the compact shortlist row. Colours come
       from the shared .item-type-pill--<type> classes. */
    .wishlist-row-meta .item-type-pill {
      font-size: 9.5px;
      padding: 3px 7px;
      flex-shrink: 0;
    }

    .wishlist-row-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .wishlist-row:hover .wishlist-row-actions,
    .wishlist-row:focus-within .wishlist-row-actions {
      opacity: 1;
    }
    .wishlist-row-action {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid #ececec;
      background: #fff;
      color: #767676;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      transition: all 0.15s ease;
    }
    .wishlist-row-action:hover {
      border-color: #111;
      color: #111;
    }
    .wishlist-row-action.danger:hover {
      border-color: #c60000;
      color: #c60000;
    }

    .wishlist-row-chevron {
      flex-shrink: 0;
      color: #ccc;
      font-size: 13px;
      display: flex;
      align-items: center;
      padding-left: 2px;
      transition: color 0.15s ease, transform 0.15s ease;
    }
    .wishlist-row:hover .wishlist-row-chevron {
      color: #e60000;
      transform: translateX(2px);
    }

    /* Drag-to-reorder (pointer-based, like the timeline). The grabbed row
       lifts and follows the cursor; the others slide to open a gap. */
    .wishlist-row {
      /* smooth slide for the non-dragged rows as they shift */
      transition: transform 0.16s ease;
    }
    .wishlist-row-lifting {
      transition: none;  /* the lifted row tracks the cursor 1:1, no easing */
      position: relative;
      z-index: 30;
      background: #fff;
      border-radius: 12px;
      border-bottom-color: transparent;
      box-shadow: 0 12px 32px rgba(0,0,0,0.18);
      cursor: grabbing;
    }
    /* While dragging, suppress text selection and force the grabbing cursor. */
    body.wish-dragging-active {
      user-select: none;
      cursor: grabbing;
    }

    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      /* On small screens, actions are always visible (no hover) */
      .wishlist-row-actions { opacity: 1; }
    }

    /* Move-to-day popover */
    .move-to-day-menu {
      position: absolute;
      z-index: 200;
      width: 260px;
      max-width: calc(100vw - 24px);
      background: #fff;
      border: 1px solid #ececec;
      border-radius: 12px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.05);
      padding: 8px;
      display: none;
      max-height: 340px;
      overflow-y: auto;
    }
    .move-to-day-menu.open {
      display: block;
    }

    .move-to-day-header {
      padding: 6px 10px 8px;
      font-size: 10px;
      font-weight: 900;
      color: #767676;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .move-to-day-item {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 16px;
      padding: 9px 10px;
      border-radius: 8px;
      cursor: pointer;
      background: transparent;
      border: none;
      width: 100%;
      text-align: left;
      transition: background 0.12s ease;
    }
    .move-to-day-item:hover {
      background: #fafafa;
    }
    .move-to-day-item-num {
      font-size: 13px;
      font-weight: 900;
      color: #e60000;
      align-self: center;
      min-width: 0;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .move-to-day-item-info {
      min-width: 0;
    }
    .move-to-day-item-title {
      font-size: 13px;
      font-weight: 800;
      color: #111;
      line-height: 1.2;
    }
    .move-to-day-item-city {
      font-size: 11px;
      color: #767676;
      margin-top: 1px;
    }

    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      .wishlist-section {
        padding: 22px 18px 18px;
      }
      .wishlist-header {
        flex-direction: column;
        align-items: stretch;
      }
      .wishlist-add-list-btn {
        align-self: flex-start;
      }
    }

    /* ---------- DAY RECOMMENDATIONS STRIP ---------- */
    .day-recommendations {
      margin: 12px 32px 4px;
      padding: 22px 0 4px;
      border-top: 1px solid #f3f3f3;
    }

    .day-recommendations-title {
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #e60000;
      margin-bottom: 4px;
    }

    .day-recommendations-subtitle {
      font-size: 13px;
      color: #737373;
      line-height: 1.4;
    }

    /* Carousel: a scrollable track flanked by arrow buttons, with a dot
       indicator row below. The carousel reserves a fixed gutter on each side
       (via padding) so the arrows have a dedicated home and never overlap the
       cards — effectively giving up ~one card slot of width for the controls. */
    .day-recommendations-carousel {
      position: relative;
      padding: 0 52px;
    }
    /* Opaque masks fill the two gutters so a partially-scrolled card never
       peeks out beside an arrow. Match the day-card background (#fff). They sit
       above the track but below the arrows (z-index 3). Only present when the
       strip overflows (arrows shown) — otherwise they'd cover flush-left cards. */
    .day-recommendations.has-overflow .day-recommendations-carousel::before,
    .day-recommendations.has-overflow .day-recommendations-carousel::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: var(--rec-gutter, 52px);
      background: #fff;
      z-index: 2;
      pointer-events: none;
    }
    .day-recommendations.has-overflow .day-recommendations-carousel::before { left: 0; }
    .day-recommendations.has-overflow .day-recommendations-carousel::after { right: 0; }

    .day-recommendations-track {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      padding-bottom: 4px;
      /* Hide the native scrollbar — navigation is via arrows + dots. */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .day-recommendations-track::-webkit-scrollbar {
      display: none;
    }
    .day-rec-card { scroll-snap-align: start; }

    .day-rec-arrow {
      position: absolute;
      top: 92px;               /* lowered to sit nearer the photo's lower third */
      transform: translateY(-50%);
      z-index: 3;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #e6e6e6;
      background: #fff;
      color: #333;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
    }
    .day-rec-arrow:hover {
      color: #e60000;
      border-color: #e60000;
    }
    .day-rec-arrow:active { transform: translateY(-50%) scale(0.92); }
    /* Centred within each gutter: gutter/2 minus half the 40px arrow. */
    .day-rec-arrow-prev { left: calc(var(--rec-gutter, 52px) / 2 - 20px); }
    .day-rec-arrow-next { right: calc(var(--rec-gutter, 52px) / 2 - 20px); }

    /* Arrows only appear when there are more cards than fit on screen (the
       section gets .has-overflow from JS). When everything fits, the cards just
       sit left-aligned with no navigation chrome. */
    .day-rec-arrow { display: none; }
    .day-recommendations.has-overflow .day-rec-arrow { display: flex; }

    /* "View all" link sits opposite the title in the header. */
    .day-recommendations-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }
    .day-rec-viewall {
      flex-shrink: 0;
      margin-top: 2px;
      font-size: 12px;
      font-weight: 800;
      color: #e60000;
      text-decoration: none;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      background: none;
      border: none;
      font-family: inherit;
      transition: gap 0.15s ease;
    }
    .day-rec-viewall:hover { gap: 9px; }

    .day-rec-card {
      flex-shrink: 0;
      width: 200px;
      background: #fff;
      border: 1px solid #ececec;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      /* The whole card is clickable (opens the detail drawer), so show the
         hand cursor and give a subtle hover lift for feedback. */
      cursor: pointer;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }
    .day-rec-card:hover {
      border-color: #ddd;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      transform: translateY(-2px);
    }

    .day-rec-photo {
      height: 110px;
      background: #f4f4f4;
      background-size: cover;
      background-position: center;
    }

    .day-rec-type-pill {
      position: absolute;
      top: 8px;
      left: 8px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 9px;
      /* Colour is set inline per type from the timeline palette
         (TIMELINE_TYPE_COLORS); falls back to neutral if unset. */
      background: #6b7280;
      color: #fff;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-radius: 999px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    }
    .day-rec-type-pill i {
      font-size: 9px;
    }

    .day-rec-body {
      padding: 10px 12px 6px;
      flex: 1;
    }

    .day-rec-name {
      font-size: 13px;
      font-weight: 800;
      color: #111;
      margin: 0 0 4px;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .day-rec-meta {
      font-size: 11px;
      color: #767676;
      font-weight: 700;
    }

    .day-rec-add {
      margin: 6px 10px 10px;
      padding: 7px 10px;
      background: #fff;
      color: #333;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-family: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    .day-rec-add:hover {
      border-color: #e60000;
      color: #e60000;
    }

    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      .day-recommendations {
        margin-left: 20px;
        margin-right: 20px;
      }
      /* Arrows are hidden on touch, so don't reserve their gutters — let the
         track scroll edge to edge. */
      .day-recommendations-carousel {
        padding: 0;
      }
      .day-recommendations-track {
        margin: 0 -20px;
        padding-left: 20px;
        padding-right: 20px;
      }
      .day-rec-card {
        width: 170px;
      }
      /* On touch, arrows crowd the narrow viewport — rely on swipe + dots. */
      .day-recommendations .day-rec-arrow,
      .day-recommendations.has-overflow .day-rec-arrow { display: none; }
    }

    /* Hide recommendations when day is collapsed */
    .day-card.is-collapsed .day-recommendations {
      display: none;
    }

    /* ---------- ADD A DAY BUTTON ---------- */
    .add-day-btn {
      width: 100%;
      padding: 22px;
      margin-top: 8px;
      border: 2px dashed #d8d8d8;
      background: transparent;
      color: #767676;
      font-family: inherit;
      font-size: 15px;
      font-weight: 800;
      border-radius: 22px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .add-day-btn:hover {
      border-color: #e60000;
      border-style: solid;
      color: #e60000;
      background: #fff8f8;
    }
    .add-day-btn i {
      font-size: 12px;
    }

    /* "Add a day" entry in the day nav dropdown */
    .day-nav-menu-add {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 12px 14px;
      margin-top: 4px;
      border: 1px dashed #ddd;
      background: transparent;
      color: #555;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .day-nav-menu-add:hover {
      border-color: #e60000;
      border-style: solid;
      color: #e60000;
      background: #fff8f8;
    }
    .day-nav-menu-add i {
      font-size: 11px;
    }

    /* Edit/delete buttons in custom day headers */
    .day-custom-actions {
      display: flex;
      gap: 6px;
      margin-top: 10px;
    }
    .day-edit-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #e8e8e8;
      background: #fff;
      color: #767676;
      font-size: 11px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }
    .day-edit-btn:hover {
      border-color: #e60000;
      color: #e60000;
    }
    .day-edit-btn-danger:hover {
      border-color: #c60000;
      color: #c60000;
    }

    /* Hide add-day button in print */
    @media print {
      .add-day-btn,
      .day-custom-actions {
        display: none !important;
      }
    }

    /* ---------- ADD TO DAY BUTTON ---------- */
    .add-to-day-btn {
      width: calc(100% - 64px);
      margin: 16px 32px;
      padding: 14px 16px;
      border: 1px solid #ddd;
      background: #fff;
      color: #333;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      border-radius: 14px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }

    .add-to-day-btn:hover {
      border-color: #e60000;
      color: #e60000;
    }

    .add-to-day-btn i {
      font-size: 11px;
    }

    /* Danger variant of icon-btn for the delete button */
    .icon-btn-danger {
      color: #767676;
    }
    .icon-btn-danger:hover {
      color: #c60000;
      border-color: #c60000 !important;
    }

    /* ---------- TRIP DATE PICKER (custom) ---------- */
    .date-picker-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1000;
      display: none;
    }
    .date-picker-backdrop.open { display: block; }

    .date-picker {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 420px;
      max-width: calc(100vw - 32px);
      max-height: calc(100vh - 64px);
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.24);
      z-index: 1001;
      display: none;
      flex-direction: column;
      overflow: hidden;
    }
    .date-picker.open { display: flex; }

    .date-picker-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 24px 8px;
    }
    .date-picker-title {
      font-size: 19px;
      font-weight: 900;
      color: #111;
      margin: 0;
    }
    .date-picker-close {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: transparent;
      border: none;
      color: #767676;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .date-picker-close:hover {
      background: #f0f0f0;
      color: #111;
    }

    .date-picker-summary {
      padding: 0 24px 14px;
      font-size: 13px;
      color: #666;
    }
    .date-picker-summary.has-range {
      font-weight: 800;
      color: #111;
    }
    .date-picker-summary-range {
      color: #e60000;
    }
    .date-picker-mismatch {
      margin-top: 8px;
      font-size: 11px;
      font-weight: 700;
      color: #767676;
      line-height: 1.4;
      padding: 8px 10px;
      background: #fafafa;
      border-radius: 8px;
      border-left: 3px solid #e60000;
    }

    .date-picker-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 24px 8px;
    }
    .date-picker-nav-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #eee;
      background: #fff;
      color: #555;
      font-size: 11px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }
    .date-picker-nav-btn:hover {
      border-color: #111;
      color: #111;
    }
    .date-picker-month-label {
      font-size: 14px;
      font-weight: 900;
      color: #111;
    }

    .date-picker-weekdays,
    .date-picker-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      padding: 0 18px;
    }
    .date-picker-weekdays {
      padding-top: 8px;
      padding-bottom: 4px;
    }
    .date-picker-weekdays div {
      text-align: center;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #767676;
    }

    .date-picker-grid {
      padding-bottom: 8px;
    }

    .date-cell {
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #333;
      cursor: pointer;
      border-radius: 50%;
      transition: background 0.12s ease, color 0.12s ease;
    }
    .date-cell:hover:not(.is-empty):not(.is-disabled) {
      background: #f4f4f4;
    }
    .date-cell.is-empty {
      visibility: hidden;
      cursor: default;
    }
    .date-cell.is-disabled {
      color: #ccc;
      cursor: default;
    }
    .date-cell.is-today {
      box-shadow: inset 0 0 0 1px #d0d0d0;
    }

    /* The chosen start date: solid red, slightly boxed corners */
    .date-cell.is-start {
      background: #e60000;
      color: #fff;
      border-radius: 8px;
    }
    .date-cell.is-start:hover {
      background: #e60000;
    }

    /* The derived end date: SAME solid-red style as the start */
    .date-cell.is-end {
      background: #e60000;
      color: #fff;
      border-radius: 8px;
    }
    .date-cell.is-end:hover {
      background: #e60000;
    }

    /* In-range days (between start and end, exclusive): light pink fill,
       square edges so consecutive in-range days form a bar. */
    .date-cell.is-in-range {
      background: #fff1f1;
      color: #b80000;
      border-radius: 0;
    }
    /* Start/end of the range: boxed corners on the trailing/leading side */
    .date-cell.is-start.has-range {
      border-radius: 8px 0 0 8px;
    }
    .date-cell.is-end.has-range {
      border-radius: 0 8px 8px 0;
      background: #e60000;
    }
    /* When the range wraps to a new row, box the leading/trailing edge */
    .date-cell.is-in-range.is-row-start {
      border-radius: 8px 0 0 8px;
    }
    .date-cell.is-in-range.is-row-end {
      border-radius: 0 8px 8px 0;
    }

    .date-picker-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 24px 20px;
      border-top: 1px solid #f0f0f0;
    }
    .date-picker-clear {
      background: transparent;
      border: none;
      color: #555;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      text-decoration: underline;
      padding: 6px 4px;
    }
    .date-picker-clear:hover {
      color: #e60000;
    }
    .date-picker-apply {
      padding: 10px 22px;
      border-radius: 10px;
      background: #e60000;
      color: #fff;
      border: none;
      font-family: inherit;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .date-picker-apply:hover {
      background: #c60000;
    }
    .date-picker-apply:disabled {
      background: #ddd;
      cursor: not-allowed;
    }

    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      .date-picker {
        width: calc(100vw - 16px);
      }
    }

    /* ---------- MODAL DIALOG ---------- */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1000;
      display: none;
    }

    .modal-backdrop.open {
      display: block;
    }

    .modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 540px;
      max-width: calc(100vw - 32px);
      max-height: calc(100vh - 64px);
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.24);
      z-index: 1001;
      display: none;
      flex-direction: column;
      overflow: hidden;
    }

    .modal.open {
      display: flex;
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 28px 18px;
      border-bottom: 1px solid #f0f0f0;
    }

    .modal-title {
      font-size: 20px;
      font-weight: 900;
      color: #111;
      margin: 0;
    }

    .modal-close {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: transparent;
      border: none;
      color: #767676;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .modal-close:hover {
      background: #f0f0f0;
      color: #111;
    }

    .modal-body {
      padding: 20px 28px;
      overflow-y: auto;
      flex: 1;
    }

    .modal-field {
      margin-bottom: 16px;
      min-width: 0;
      flex: 1;
    }

    .modal-field-row {
      display: flex;
      gap: 14px;
      margin-bottom: 0;
    }
    .modal-field-row .modal-field {
      margin-bottom: 16px;
    }

    .modal-label {
      display: block;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #666;
      margin-bottom: 6px;
    }

    .modal-required {
      color: #e60000;
      margin-left: 2px;
      letter-spacing: 0;
    }

    .modal-optional {
      font-weight: 700;
      color: #767676;
      text-transform: none;
      letter-spacing: 0;
      font-size: 10px;
    }

    .modal-input,
    .modal-textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      font-family: inherit;
      font-size: 14px;
      color: #111;
      background: #fff;
      transition: border-color 0.15s ease;
    }

    .modal-input:focus,
    .modal-textarea:focus {
      outline: none;
      border-color: #e60000;
    }

    .modal-textarea {
      resize: vertical;
      min-height: 60px;
    }

    .type-segment {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .type-segment-btn {
      padding: 7px 12px;
      border: 1px solid #e0e0e0;
      background: #fff;
      color: #555;
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.12s ease;
    }

    .type-segment-btn:hover {
      border-color: #aaa;
      color: #111;
    }

    .type-segment-btn.is-selected {
      background: #e60000;
      border-color: #e60000;
      color: #fff;
    }

    .modal-details {
      border: 1px solid #f0f0f0;
      border-radius: 10px;
      padding: 10px 12px;
    }

    .modal-details-summary {
      font-size: 12px;
      font-weight: 800;
      color: #555;
      cursor: pointer;
      list-style: none;
    }
    .modal-details-summary::-webkit-details-marker { display: none; }
    .modal-details-summary::before {
      content: '+';
      display: inline-block;
      margin-right: 8px;
      font-weight: 900;
      color: #e60000;
    }
    .modal-details[open] .modal-details-summary::before {
      content: '−';
    }

    .modal-help {
      font-size: 11px;
      color: #767676;
      margin: 8px 0 0;
      line-height: 1.4;
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 16px 28px 22px;
      border-top: 1px solid #f0f0f0;
    }

    .modal-btn {
      padding: 10px 18px;
      border-radius: 10px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      border: none;
      transition: background 0.15s ease;
    }

    .modal-btn-secondary {
      background: #f0f0f0;
      color: #444;
    }
    .modal-btn-secondary:hover {
      background: #e4e4e4;
    }

    .modal-btn-primary {
      background: #e60000;
      color: #fff;
    }
    .modal-btn-primary:hover {
      background: #c60000;
    }
    .modal-btn-primary:disabled {
      background: #ddd;
      cursor: not-allowed;
    }

    /* ---- Providers modal (brand tiles) ---- */
    .providers-modal { max-width: 460px; }
    .providers-modal-intro {
      font-size: 13px; color: #737373; line-height: 1.5; margin: 0 0 18px;
    }
    .providers-modal-section { margin-bottom: 20px; }
    .providers-modal-section:last-child { margin-bottom: 0; }
    .providers-modal-section-label {
      font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
      color: #737373; margin-bottom: 10px;
    }
    .provider-tile-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }
    .provider-tile {
      position: relative;
      display: flex; align-items: center; gap: 10px;
      border: 1.5px solid #e8e8e8; background: #fff;
      border-radius: 12px; padding: 11px 32px 11px 12px;
      font-family: inherit; cursor: pointer; text-align: left;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .provider-tile:hover { border-color: #d2d2d2; }
    .provider-tile-badge {
      position: relative; overflow: hidden;
      width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto;
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 13px;
    }
    /* Real provider logo overlaid on the lettered badge. If the file is missing
       the <img> removes itself and the coloured letter shows through. */
    .provider-tile-logo {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: contain;
      background: #fff; padding: 3px; box-sizing: border-box;
    }
    .provider-tile-name { font-size: 13px; font-weight: 700; color: #666; }
    .provider-tile-check {
      position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
      color: #e60000; font-size: 14px; display: none;
    }
    .provider-tile.active { border-color: #e60000; background: #fff7f7; }
    .provider-tile.active .provider-tile-name { color: #111; }
    .provider-tile.active .provider-tile-check { display: block; }

    /* ---- Share dialog ---- */
    .share-row { display: flex; gap: 8px; margin-bottom: 16px; }
    .share-url-input {
      flex: 1; min-width: 0; padding: 11px 14px;
      border: 1px solid #ddd; border-radius: 10px;
      font-family: inherit; font-size: 13px; color: #555; background: #fafafa;
    }
    .share-section-label {
      font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
      color: #737373; margin-bottom: 10px;
    }
    .share-perm-toggle { display: flex; gap: 10px; }
    .share-perm-opt {
      flex: 1; padding: 13px 14px; border-radius: 12px;
      border: 1px solid #e6e6e6; background: #fff; cursor: pointer;
      font-family: inherit; text-align: left;
      transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    .share-perm-opt:hover { border-color: #d8d8d8; }
    .share-perm-opt.active {
      border-color: #e60000; background: #fff7f7;
      box-shadow: inset 0 0 0 1px #e60000;
    }
    .share-perm-opt-title {
      display: flex; align-items: center; gap: 8px;
      font-weight: 800; font-size: 14px; color: #1a1a1a;
    }
    .share-perm-opt.active .share-perm-opt-title { color: #e60000; }
    .share-perm-opt-title i { font-size: 13px; width: 15px; text-align: center; }
    .share-perm-opt-desc { font-size: 12px; color: #767676; margin-top: 4px; line-height: 1.4; }
    .share-edit-warning {
      display: none; font-size: 12px; color: #92600c;
      background: #fff8ec; border: 1px solid #f5e2bd; border-radius: 10px;
      padding: 10px 12px; margin-top: 12px; line-height: 1.5;
    }
    .share-edit-warning i { margin-right: 6px; }
    .share-stop-btn { background: transparent; color: #c1121f; }
    .share-stop-btn:hover { background: #fff1f1; }

    /* ---- Simulated auth + saved itineraries ---- */
    .auth-modal, .saved-modal { max-width: 420px; }
    .auth-demo-note {
      font-size: 12.5px; color: #767676; line-height: 1.5; margin: 0 0 18px;
      background: #f7f7f8; border-radius: 10px; padding: 10px 12px;
    }
    .auth-field { margin-bottom: 14px; }
    .auth-field label {
      display: block; font-size: 12px; font-weight: 800; color: #555;
      text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
    }
    .auth-input {
      width: 100%; box-sizing: border-box;
      padding: 11px 14px; border: 1px solid #ddd; border-radius: 10px;
      font-family: inherit; font-size: 14px;
    }
    .auth-input:focus { outline: none; border-color: #e60000; }
    .auth-error {
      font-size: 13px; color: #c60000; font-weight: 700; margin-bottom: 12px;
    }
    .auth-submit { width: 100%; margin-top: 4px; }
    .auth-switch {
      display: block; width: 100%; text-align: center;
      background: none; border: none; color: #e60000; font-family: inherit;
      font-size: 13px; font-weight: 800; cursor: pointer; margin-top: 14px; padding: 6px;
    }
    .auth-switch:hover { text-decoration: underline; }

    .brand-account-menu-user {
      font-size: 12px; color: #767676; padding: 0 14px 8px; margin-top: -4px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .brand-account-menu-user:empty { display: none; }

    .saved-trip-row {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; margin-bottom: 8px;
      border: 1px solid #ededed; border-radius: 12px; background: #fff;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .saved-trip-row:hover {
      border-color: #dcdcdc; box-shadow: 0 3px 12px rgba(0,0,0,0.05);
    }
    .saved-trip-row:last-child { margin-bottom: 0; }
    /* The currently-open trip is visually anchored: tinted fill + red accent. */
    .saved-trip-row.is-current {
      background: #fff7f7; border-color: #f3d0d0;
      box-shadow: inset 3px 0 0 #e60000;
    }
    .saved-trip-row.is-current:hover { border-color: #ecbcbc; }
    .saved-trip-info { flex: 1; min-width: 0; }
    .saved-trip-name {
      font-size: 14px; font-weight: 800; color: #1a1a1a;
      display: flex; align-items: center; gap: 8px; min-width: 0;
    }
    .saved-trip-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .saved-trip-meta { font-size: 12px; color: #767676; margin-top: 3px; }
    .saved-trip-open {
      padding: 8px 16px; border: 1px solid #ddd; background: #fff; color: #333;
      border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
      white-space: nowrap; transition: all 0.15s ease;
    }
    .saved-trip-open:hover { border-color: #e60000; color: #e60000; background: #fff8f8; }
    /* On the current row, the disabled Open reads as a quiet "you're here" state. */
    .saved-trip-open:disabled {
      opacity: 1; cursor: default;
      border-color: transparent; background: transparent; color: #c98a8a; font-weight: 700;
    }
    .saved-empty { font-size: 13px; color: #767676; text-align: center; padding: 24px 0; line-height: 1.5; }

    /* My Trips: new-trip button, row actions, current tag */
    .saved-new-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 16px; margin-bottom: 14px;
      border: 1px solid #e8e8e8; background: #fff; color: #111;
      border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
      transition: all 0.15s ease;
    }
    .saved-new-btn:hover { border-color: #e60000; color: #e60000; background: #fff8f8; }
    .saved-trip-actions {
      display: flex; align-items: center; gap: 6px;
      padding-left: 12px; margin-left: 4px; border-left: 1px solid #f0f0f0;
    }
    .saved-trip-row.is-current .saved-trip-actions { border-left-color: #f3d0d0; }
    .saved-icon-btn {
      width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e8e8e8; background: #fff;
      color: #767676; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center;
      transition: all 0.15s ease;
    }
    .saved-icon-btn:hover { border-color: #e60000; color: #e60000; background: #fff8f8; }
    .saved-icon-danger:hover { border-color: #c60000; color: #c60000; background: #fff6f6; }
    .saved-current-tag {
      display: inline-block; flex: 0 0 auto; font-size: 9px; font-weight: 800; text-transform: uppercase;
      letter-spacing: 0.07em; color: #e60000; background: #ffe3e3; border-radius: 5px;
      padding: 2px 6px; vertical-align: middle;
    }

    /* Shared-trip viewing banner */
    .shared-trip-banner {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 5000;
      background: #fff; color: #111;
      border-top: 3px solid #e60000;
      box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.07);
    }
    /* View-only shared trips: hide editing affordances so the trip is read-only.
       Editable shares (no .shared-readonly class) keep everything interactive. */
    body.shared-readonly .brand-btn-save,
    body.shared-readonly #addDayBtn,
    body.shared-readonly .day-add-btn,
    body.shared-readonly .add-to-day-btn,
    body.shared-readonly .day-edit-btn,
    body.shared-readonly .day-delete-btn,
    body.shared-readonly .item-edit-btn,
    body.shared-readonly .item-menu-btn,
    body.shared-readonly .day-recommendations,
    body.shared-readonly .add-place-btn,
    body.shared-readonly .wishlist-add-btn,
    body.shared-readonly .list-add-btn,
    body.shared-readonly .trip-hero-title-edit,
    body.shared-readonly #tripHeroRegionPill,
    body.shared-readonly .editable-affordance {
      display: none !important;
    }
    /* Soften any remaining inline-editable cues in read-only mode. */
    body.shared-readonly [contenteditable] { pointer-events: none; }
    .shared-trip-banner-inner {
      max-width: 1100px; margin: 0 auto; padding: 12px 20px;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      font-size: 14px;
    }
    .shared-trip-banner-inner i.fa-link { color: #e60000; margin-right: 6px; }
    .shared-trip-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .shared-trip-copy {
      display: inline-flex; align-items: center; gap: 7px;
      background: #e60000; color: #fff; border: none; border-radius: 999px;
      padding: 8px 16px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
      white-space: nowrap;
    }
    .shared-trip-copy:hover { background: #c60000; }
    .shared-trip-dismiss {
      background: none; border: none; color: #767676; cursor: pointer; font-size: 16px;
      width: 32px; height: 32px; border-radius: 50%;
    }
    .shared-trip-dismiss:hover { color: #111; background: rgba(0,0,0,0.06); }
    @media (max-width: 600px) {
      .shared-trip-banner-inner { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
      .shared-trip-banner-actions { justify-content: center; }
    }

    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      .modal {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 32px);
      }
      .modal-field-row {
        flex-direction: column;
        gap: 0;
      }
    }

    /* ---------- DAY-NAV DROPDOWN (lives in control bar) ---------- */
    .day-nav-dropdown-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 7px 12px;
      background: #fff;
      color: #111;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: border-color 0.15s ease;
      max-width: 280px;
    }

    .day-nav-dropdown-btn:hover {
      border-color: #e60000;
      color: #e60000;
    }

    .day-nav-dropdown-btn[aria-expanded="true"] {
      border-color: #e60000;
    }

    .collapse-all-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      height: 34px;
      padding: 0 12px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background: #fff;
      color: #111;
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      white-space: nowrap;
      cursor: pointer;
      margin-left: 4px;
      transition: all 0.15s ease;
    }
    .collapse-all-btn:hover {
      border-color: #e60000;
      color: #e60000;
    }

    .day-nav-dropdown-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .day-nav-dropdown-chevron {
      font-size: 10px;
      color: #767676;
      transition: transform 0.18s ease, color 0.18s ease;
      flex-shrink: 0;
    }
    .day-nav-dropdown-btn:hover .day-nav-dropdown-chevron {
      color: #e60000;
    }

    .day-nav-dropdown-btn[aria-expanded="true"] .day-nav-dropdown-chevron {
      transform: rotate(180deg);
      color: #e60000;
    }

    /* The toolbar Day dropdown duplicates the always-visible "Your days" sidebar
       on desktop, so hide it there. On mobile (<=1100px) the sidebar is a
       slide-out and this button is what opens it, so it stays. */
    @media (min-width: 1101px) {
      .day-toolbar-label,
      #dayNavDropdownBtn { display: none; }
    }
    /* Providers / Travellers / Trip-dates chevrons: grey at rest, red on hover
       (matches the button text). Class replaces the old inline color so :hover
       can actually override it. */
    .providers-btn-chevron {
      font-size: 10px;
      color: #767676;
      transition: color 0.18s ease;
      flex-shrink: 0;
    }
    .providers-btn:hover .providers-btn-chevron {
      color: #e60000;
    }

    /* The dropdown menu — absolutely positioned, opens below the button */
    .day-nav-menu {
      position: absolute;
      z-index: 200;
      width: 360px;
      max-width: calc(100vw - 24px);
      background: #fff;
      border: 1px solid #ececec;
      border-radius: 14px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.05);
      padding: 8px;
      display: none;
      max-height: 70vh;
      overflow-y: auto;
    }

    .day-nav-menu.open {
      display: block;
    }

    .day-nav-menu-item {
      display: grid;
      grid-template-columns: 60px 1fr;
      gap: 14px;
      padding: 12px 14px;
      border-radius: 10px;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      transition: background 0.12s ease;
    }

    .day-nav-menu-item:hover {
      background: #fafafa;
    }

    .day-nav-menu-item.is-active {
      background: #fff1f1;
    }

    .day-nav-menu-num {
      align-self: center;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: none;
      color: #e60000;
      padding-top: 0;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      min-width: 76px;
    }

    .day-nav-menu-num strong {
      display: block;
      font-size: 22px;
      color: #e60000;
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 1;
      margin-top: 2px;
    }

    .day-nav-menu-info {
      min-width: 0;
    }

    .day-nav-menu-title {
      font-size: 14px;
      font-weight: 800;
      color: #111;
      margin-bottom: 2px;
    }

    .day-nav-menu-city {
      font-size: 12px;
      font-weight: 700;
      color: #767676;
    }

    /* ---------- DAY CARD ---------- */
    .day-card {
      background: #ffffff;
      border: 1px solid #ececec;
      border-radius: 22px;
      overflow: hidden;
      scroll-margin-top: 150px;  /* So #day-N anchor lands below the two-row sticky header */
    }

    /* ---------- BIG DAY MARKER (new header design) ---------- */
    .day-header {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 24px;
      padding: 32px 32px 28px;
      border-bottom: 1px solid #f3f3f3;
      align-items: start;
      width: 100%;
      background: transparent;
      border-top: none;
      border-left: none;
      border-right: none;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .day-header:hover {
      background: #fafafa;
    }

    .day-collapse-chevron {
      align-self: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #767676;
      font-size: 14px;
      transition: transform 0.2s ease, color 0.15s ease, background 0.15s ease;
    }

    .day-header:hover .day-collapse-chevron {
      background: #f0f0f0;
      color: #111;
    }

    /* When the card is collapsed, rotate the chevron 180deg (points down) */
    .day-card.is-collapsed .day-collapse-chevron {
      transform: rotate(180deg);
    }

    /* When collapsed: hide the item list, day summary text, and time summary.
       Keep the day-marker, title, city, and date visible. */
    .day-card.is-collapsed .item-list {
      display: none;
    }

    .day-card.is-collapsed .day-summary,
    .day-card.is-collapsed .day-time-summary {
      display: none;
    }

    /* Tighten the collapsed header so it reads as a compact row */
    .day-card.is-collapsed .day-header {
      padding-top: 22px;
      padding-bottom: 22px;
      border-bottom: none;
    }

    .day-marker {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      padding-right: 22px;
      border-right: 1px solid #f0f0f0;
      min-width: 110px;
      text-align: center;
    }

    .day-marker-label {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #767676;
      margin-bottom: 2px;
    }

    .day-marker-num {
      font-size: 76px;
      font-weight: 900;
      line-height: 0.95;
      color: #e60000;
      letter-spacing: -0.03em;
    }

    .day-marker-of {
      font-size: 11px;
      font-weight: 800;
      color: #767676;
      margin-top: 4px;
      letter-spacing: 0.06em;
    }

    /* New date-based marker (replaces Day N) */
    .day-marker-weekday {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #767676;
      margin-bottom: 4px;
    }
    .day-marker-date {
      font-size: 38px;
      font-weight: 900;
      line-height: 1;
      color: #e60000;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    .day-marker-tbd {
      font-size: 32px;
      font-weight: 900;
      line-height: 1;
      color: #c0c0c0;
      letter-spacing: 0.04em;
    }

    .day-header-body {
      min-width: 0;
    }

    .day-eyebrow {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #e60000;
      margin-bottom: 6px;
      display: none;  /* No longer needed — day marker carries the day info */
    }

    .day-title {
      font-size: 28px;
      font-weight: 900;
      margin: 0 0 6px;
      color: #111;
    }

    .day-city {
      font-size: 14px;
      font-weight: 700;
      color: #767676;
      margin-bottom: 6px;
    }

    .day-date {
      display: none;
      font-size: 13px;
      font-weight: 800;
      color: #e60000;
      margin-bottom: 14px;
      letter-spacing: 0.01em;
    }

    .day-date.is-set {
      display: block;
    }

    .day-summary {
      font-size: 14px;
      line-height: 1.65;
      color: #555;
      margin: 0;
    }

    .day-time-summary {
      margin-top: 16px;
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      font-size: 12px;
      color: #666;
    }

    .day-time-summary strong {
      color: #111;
      font-weight: 900;
    }

    /* ---------- ITEM LIST ---------- */
    .item-list {
      padding: 8px 0;
    }

    /* ============================================================
       COMPACT TIMELINE STOP ROW (new card design)
       A light row: time gutter + red dot on a vertical spine,
       small thumbnail, name + type pill + 1-line description,
       duration + kebab on the right. Tapping opens the stop drawer.
       Used for standard stops; flight/downtime keep the .item look.
       ============================================================ */
    .stop-row {
      display: grid;
      grid-template-columns: 64px 28px 64px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px 28px;
      position: relative;
      cursor: pointer;
      transition: background 0.12s ease;
    }
    .stop-row:hover { background: #fafafa; }

    /* Time gutter */
    .stop-time {
      font-size: 13px;
      font-weight: 800;
      color: #111;
      text-align: right;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    /* Spine column: holds the connector line + the dot */
    .stop-spine {
      position: relative;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* The vertical connector line runs through the centre of the spine col */
    .stop-spine::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      background: #ececec;
    }
    /* First/last rows: trim the line so it doesn't poke past the first/last dot */
    .stop-row:first-child .stop-spine::before { top: 50%; }
    .stop-row:last-of-type .stop-spine::before { bottom: 50%; }
    .stop-dot {
      position: relative;
      z-index: 1;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid #e60000;
      box-sizing: border-box;
    }

    .stop-thumb {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      background-size: cover;
      background-position: center;
      background-color: #f4f4f4;
      flex-shrink: 0;
    }
    .stop-thumb-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #cfcfcf;
      font-size: 20px;
    }

    .stop-body { min-width: 0; }
    .stop-name-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 3px;
    }
    .stop-name {
      font-size: 15px;
      font-weight: 800;
      color: #111;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .stop-row .item-type-pill { flex-shrink: 0; }
    .stop-desc {
      font-size: 12.5px;
      color: #767676;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Right side: duration + kebab */
    .stop-right {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .stop-duration {
      font-size: 12px;
      font-weight: 700;
      color: #767676;
      white-space: nowrap;
    }
    .stop-conflict-flag {
      color: #b71c1c;
      font-size: 12px;
      margin-left: 4px;
    }
    .stop-kebab {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: #767676;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: background 0.12s ease, color 0.12s ease;
    }
    .stop-kebab:hover { background: #f0f0f0; color: #555; }

    .stop-row.has-conflict { background: #fff8f8; }

    /* Downtime variant: muted grey dot + grey icon thumbnail */
    .stop-dot-downtime { border-color: #b8b8b8; }
    .stop-thumb-downtime {
      background: #f3f4f6;
      color: #9aa0a6;
    }
    .stop-row-downtime .stop-name { color: #444; }

    /* Flight variant: sky-blue dot + icon thumbnail */
    .stop-dot-flight { border-color: #0284c7; }
    .stop-thumb-flight {
      background: #eff6ff;
      color: #0284c7;
    }

    /* Accommodation stay-variant row */
    .stop-dot-stay { border-color: #2563eb; }
    .stop-time-overnight {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #767676;
    }
    .stop-stay-state {
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      padding: 3px 9px;
      border-radius: 999px;
    }
    .stop-stay-state.stay-state-in  { color: #1e40af; background: #eef4ff; }
    .stop-stay-state.stay-state-out { color: #1e40af; background: #eef4ff; }
    .stop-stay-state.stay-state-mid { color: #767676;   background: #f4f4f4; }

    /* ---- "Your stay" — tinted banner at the top of each covered day ---- */
    .stay-banner {
      margin: 4px 28px 14px;
      padding: 16px 20px 18px;
      background: #f4f2fb;
      border: 1px solid #ebe7f7;
      border-radius: 18px;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .stay-banner:hover { background: #efecf9; border-color: #ddd6f2; }
    .stay-banner-title {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #6d5bd0;
      margin-bottom: 12px;
    }
    .stay-banner-body {
      display: flex;
      align-items: center;
      gap: 18px;
      /* The price + View details block never shrinks, so in a narrow main
         column (a tablet in landscape gets ~460px once the two fixed sidebars
         take theirs) the text between them was squeezed to nothing and the
         date range wrapped one word per line. Give the text a real basis and
         let the row wrap: the price drops to its own line instead. */
      flex-wrap: wrap;
    }
    .stay-banner-photo {
      position: relative;
      width: 130px;
      height: 92px;
      border-radius: 12px;
      background-size: cover;
      background-position: center;
      background-color: #e7e7ef;
      flex-shrink: 0;
    }
    .stay-banner-photo-empty {
      display: flex; align-items: center; justify-content: center;
      color: #bbb; font-size: 30px;
    }
    .stay-banner-photo-count {
      position: absolute; bottom: 6px; right: 6px;
      background: rgba(0,0,0,0.6); color: #fff;
      font-size: 11px; font-weight: 800;
      padding: 2px 7px; border-radius: 999px;
    }
    /* This basis decides WHEN the row wraps. Measured against the real
       layout: at 1280 the row has 526px of content, the photo takes 130, the
       price block 201 and the gaps 36, leaving the text 159 — and only 114
       once the comparison toggle widens that block. A 110px basis therefore
       keeps BOTH states on one line at every genuine desktop width, exactly as
       today, while the squeezed tablet-landscape widths (which leave the text
       under 60px) drop the price to its own line instead of starving it. */
    .stay-banner-main { flex: 1 1 110px; min-width: 0; }
    .stay-banner-name {
      font-size: 19px; font-weight: 900; color: #1a1a1a; line-height: 1.2;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .stay-banner-range { font-size: 14px; color: #737373; margin-top: 5px; }
    .stay-banner-meta {
      display: flex; align-items: center; gap: 18px;
      margin-top: 10px;
    }
    .stay-banner-meta-item {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 13px; font-weight: 700; color: #666;
    }
    .stay-banner-meta-item i { color: #9b8ed6; font-size: 13px; }
    .stay-banner-right {
      display: flex; align-items: center; gap: 22px;
      flex-shrink: 0;
      margin-left: auto;   /* stays right when it wraps to its own line */
      /* Three controls share this block now (price, Compare, View details).
         The main column can be as narrow as ~460px on a tablet in landscape,
         which is not enough for all three, so let the block wrap rather than
         overflow: the buttons drop below the price and stay right-aligned. */
      flex-wrap: wrap;
      justify-content: flex-end;
      row-gap: 12px;
    }
    .stay-banner-price { text-align: right; }
    .stay-banner-price-total { font-size: 22px; font-weight: 900; color: #1a1a1a; line-height: 1.1; }
    .stay-banner-price-label { font-size: 11px; font-weight: 700; color: #767676; margin-top: 3px; }
    .stay-banner-details {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 18px;
      border: 1px solid #ddd;
      background: #fff;
      color: #333;
      border-radius: 12px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease;
      white-space: nowrap;
    }
    .stay-banner-details i { font-size: 11px; color: #767676; transition: transform 0.18s ease; }
    .stay-banner-details:hover { border-color: #6d5bd0; color: #6d5bd0; }
    .stay-banner-details:hover i { color: #6d5bd0; }
    /* The chevron flips while this stay's drawer is open, the same way the
       Compare chevron flips while its panel is open. The `.open` class is put
       on by the drawer's own open/close funnel, so every way of closing it
       (X, backdrop, Escape) puts the chevron back. */
    .stay-banner-details.open i { transform: rotate(180deg); }

    /* ---- Inline price comparison inside the stay banner ---- */
    /* Compare prices is its own button beside View details. It deliberately
       matches .stay-banner-details in size, weight and radius so the two read
       as a pair of controls, with the swap icon in brand purple as the only
       thing marking it out. No outline reset here: the browser's own focus
       ring is what keyboard users get, and this button has nothing removing
       it. */
    .stay-compare-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 16px;
      border: 1px solid #ddd;
      background: #fff;
      color: #333;
      border-radius: 12px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color 0.15s ease, color 0.15s ease;
    }
    .stay-compare-btn-icon { font-size: 11px; color: #6d5bd0; }
    .stay-compare-btn-chev { font-size: 10px; color: #767676; transition: transform 0.18s ease; }
    .stay-compare-btn:hover { border-color: #6d5bd0; color: #6d5bd0; }
    .stay-compare-btn:hover .stay-compare-btn-chev { color: #6d5bd0; }
    .stay-compare-btn.open .stay-compare-btn-chev { transform: rotate(180deg); }
    /* Doubled up on purpose: .stay-compare-price sets a big bold price face
       further down the sheet, so a single-class rule here would lose on
       order and a status line would shout like a number. */
    .stay-compare-price.stay-compare-muted {
      font-size: 12.5px;
      font-weight: 700;
      color: #767676;
      letter-spacing: 0;
      line-height: 1.35;
    }
    /* Not a call to action: nothing has been priced, so this is quieter than
       the red Book pill it shares a class with. */
    .stay-compare-book.is-check {
      background: #ffffff;
      color: #444;
      border: 1px solid #ddd;
      font-weight: 700;
    }
    .stay-compare-book.is-check:hover {
      background: #fafafa;
      border-color: #6d5bd0;
      color: #6d5bd0;
    }
    .stay-compare-note {
      flex: 1 1 100%;
      font-size: 12px;
      color: #6f6f7a;
      padding: 2px 2px 0;
    }
    .stay-compare {
      margin-top: 14px; display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
    }
    .stay-compare[hidden] { display: none; }
    .stay-compare-card {
      flex: 1 1 150px; min-width: 150px; background: #fff;
      border: 1.5px solid transparent; border-radius: 13px; padding: 13px 15px;
      display: flex; flex-direction: column; gap: 6px; text-align: left;
      font-family: inherit; cursor: pointer; transition: border-color .12s ease;
    }
    button.stay-compare-card:hover { border-color: #d8d1f0; }
    .stay-compare-card.is-chosen { border-color: #6d5bd0; cursor: default; }
    .stay-compare-card-hd { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .stay-compare-badge {
      width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 11.5px;
    }
    .stay-compare-name { font-size: 13px; font-weight: 800; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .stay-compare-low {
      font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
      color: #0a7d44; margin-left: auto; padding-left: 6px; white-space: nowrap;
    }
    .stay-compare-price { font-size: 16px; font-weight: 800; color: #111; }
    .stay-compare-price small { font-size: 10.5px; font-weight: 600; color: #767676; margin-left: 1px; }
    .stay-compare-status { font-size: 11px; font-weight: 700; color: #8b80b8; min-height: 14px; }
    .stay-compare-book {
      margin-top: auto; align-self: flex-start;
      font-family: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none;
      background: #e60000; color: #fff; border-radius: 9px; padding: 8px 15px; white-space: nowrap;
    }
    .stay-compare-book:hover { background: #b1222a; }

    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      .stay-banner { margin-left: 18px; margin-right: 18px; }
      .stay-banner-body { flex-wrap: wrap; gap: 14px; }
      .stay-banner-photo { width: 100%; height: 120px; }
      .stay-banner-right { width: 100%; justify-content: space-between; }
    }

    /* Phone sizing, matched to .stay-banner-details so the pair stays even.
       Both get a real touch target here rather than the ~35px their padding
       works out to, and they get it together so they stay the same height
       sitting side by side. */
    @media (max-width: 760px) {
      .stay-compare-btn {
        padding: 10px 14px;
        font-size: 12.5px;
        border-radius: 11px;
      }
      .stay-compare-btn,
      .stay-banner-details { min-height: 44px; }
    }

    /* The two buttons belong beside each other, never one under the other.
       Above ~560 all three controls still fit across the banner, which covers
       every phone in landscape. Below that the price takes the first line to
       itself and the buttons share the second, half each, so they stay a pair
       at any width. Both get a real touch target while they are down there. */
    @media (max-width: 559px) {
      .stay-banner-price { flex: 1 0 100%; }
      .stay-compare-btn,
      .stay-banner-details {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
      }
      .stay-compare-btn { order: 3; }
      .stay-banner-details { order: 4; }
    }

    /* On the very smallest phones half a row is about 110px, which is not
       enough for "Compare 3 prices" plus two icons. Rather than break the pair
       up, the button sheds what it can afford to lose: the count and the swap
       icon go, leaving "Compare" and the chevron that shows it expands. */
    @media (max-width: 359px) {
      /* Scoped to the button so this outranks Font Awesome's own `.fa-solid`
         display rule, which is a single class like ours and would otherwise
         win or lose purely on stylesheet order. */
      .stay-compare-btn .stay-compare-btn-n,
      .stay-compare-btn .stay-compare-btn-icon { display: none; }
      .stay-compare-btn { gap: 6px; padding: 10px 8px; }
      .stay-banner-details { padding: 10px 8px; }
    }

    /* Inline kind picker inside the stop drawer */
    .stop-kind-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .stop-kind-option {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 14px;
      border: 1px solid #e2e2e2;
      background: #fff;
      color: #555;
      border-radius: 999px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .stop-kind-option i { font-size: 12px; color: #767676; }
    .stop-kind-option:hover { border-color: #aaa; color: #111; }
    .stop-kind-option.is-active {
      background: #fff1f1;
      border-color: #e60000;
      color: #e60000;
    }
    .stop-kind-option.is-active i { color: #e60000; }

    /* Walk-leg row on the spine, between stops */
    .stop-leg {
      display: grid;
      grid-template-columns: 64px 28px 1fr;
      gap: 14px;
      align-items: center;
      padding: 2px 28px;
      position: relative;
    }
    .stop-leg-spine {
      position: relative;
      align-self: stretch;
      min-height: 26px;
    }
    .stop-leg-spine::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      background: #ececec;
    }
    .stop-leg-body {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      font-weight: 700;
      color: #767676;
    }
    .stop-leg-body i { color: #ccc; font-size: 12px; }
    .stop-leg-directions {
      color: #e60000;
      font-weight: 800;
      text-decoration: none;
      margin-left: auto;
    }
    .stop-leg-directions:hover { text-decoration: underline; }

    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      .stop-row {
        grid-template-columns: 48px 20px 48px 1fr auto;
        gap: 10px;
        padding: 12px 18px;
      }
      .stop-thumb { width: 48px; height: 48px; }
      .stop-leg { grid-template-columns: 48px 20px 1fr; gap: 10px; padding: 2px 18px; }
    }

    .item {
      display: grid;
      grid-template-columns: 220px 1fr 180px;
      gap: 24px;
      padding: 32px 32px;
      border-bottom: 1px solid #f5f5f5;
      position: relative;
      align-items: start;
    }

    /* Vertical divider line at the left edge of the action column.
       Sits between body and actions, spans full card height including
       any note row 2 below. Column 3 is 180px wide and there's a 24px gap
       before it; the line goes at the middle-ish of that gap. */
    .item:not(.item-downtime)::before {
      content: '';
      position: absolute;
      top: 32px;
      bottom: 32px;
      right: calc(32px + 180px + 12px);
      width: 1px;
      background: #f0f0f0;
      pointer-events: none;
    }

    .item:last-child {
      border-bottom: none;
    }

    .item.has-conflict {
      background: #fff8f8;
    }

    /* ---------- DOWNTIME (transitional moments) ---------- */
    .item.item-downtime {
      background: #fbfbfb;
      grid-template-columns: 96px 1fr;
      padding-top: 18px;
      padding-bottom: 18px;
      gap: 16px;
    }

    /* ---------- FLIGHT CARD ---------- */
    .item.item-flight {
      background: #f9fbfd;
      grid-template-columns: 96px 1fr;
      padding-top: 22px;
      padding-bottom: 22px;
      gap: 16px;
      border-left: 4px solid #4a6fa5;
    }
    .item.item-flight.has-conflict {
      background: #fff8f8;
    }
    .item-type-pill {
      display: inline-block;
      padding: 3px 9px;
      background: #4a6fa5;
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.1em;
      border-radius: 999px;
    }
    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      .item.item-flight {
        grid-template-columns: 64px 1fr;
      }
      .item-flight-marker {
        width: 56px;
        height: 56px;
        font-size: 22px;
      }
      .item-flight-code {
        font-size: 20px;
      }
      .item-flight-route {
        gap: 12px;
        padding: 10px 12px;
      }
    }
    @media print {
      .item.item-flight {
        background: transparent !important;
        border-left: 2px solid #999 !important;
      }
      .item-flight-marker {
        background: #999 !important;
      }
    }

    .item.item-downtime.has-conflict {
      background: #fff8f8;
    }

    .item-downtime .downtime-icon {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: #ffffff;
      border: 1px dashed #d8d8d8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: #767676;
    }

    .item-downtime .item-name-downtime {
      font-size: 16px;
      font-weight: 800;
      color: #444;
    }

    .item-downtime .item-description {
      font-size: 12.5px;
      color: #737373;
    }

    .item-type-pill-downtime {
      color: #737373 !important;
      background: #f0f0f0 !important;
    }

    /* ---------- "GOOD TO KNOW" FACTS (collapsible) ---------- */
    .item-facts {
      margin-top: 12px;
    }

    .item-facts-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: none;
      background: transparent;
      padding: 4px 0;
      font-family: inherit;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #767676;
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .item-facts-toggle:hover {
      color: #e60000;
    }

    .item-facts-toggle.is-expanded {
      color: #444;
    }

    .item-facts-count {
      background: #f0f0f0;
      color: #666;
      font-size: 10px;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 999px;
      letter-spacing: 0;
    }

    .item-facts-toggle:hover .item-facts-count {
      background: #fff1f1;
      color: #e60000;
    }

    .item-facts-chevron {
      font-size: 9px;
      transition: transform 0.18s ease;
    }

    .item-facts-toggle.is-expanded .item-facts-chevron {
      transform: rotate(180deg);
    }

    .item-facts-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Facts slot: separate grid row in column 3, so the facts list can grow
       without affecting the note row's height. */
    .item-facts-slot {
      grid-column: 3;
      grid-row: 2;
      padding-left: 14px;
      margin-top: -2px;
    }
    .item-facts-slot:empty {
      display: none;
    }

    .fact-row {
      display: grid;
      grid-template-columns: 16px 1fr;
      gap: 10px;
      align-items: flex-start;
      font-size: 12.5px;
      color: #555;
      line-height: 1.45;
    }

    .fact-icon {
      color: #767676;
      font-size: 12px;
      padding-top: 2px;
    }

    .fact-text {
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .fact-row-warning {
      background: #fff8e6;
      border-left: 3px solid #e6a73a;
      padding: 6px 10px;
      border-radius: 6px;
      grid-template-columns: 16px 1fr;
      gap: 10px;
      color: #6b4f10;
    }

    .fact-row-warning .fact-icon {
      color: #c98b1a;
    }

    /* ---------- ITEM ACTIONS COLUMN (right side) ---------- */
    .item-actions {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding-left: 14px;
    }

    /* Print-only facts block: hidden on screen, shown when printing.
       Spans the body + actions columns. */
    .item-facts-print-only {
      display: none;
    }
    /* Inside the print-only block the list should NOT be a floating popover. */
    .item-facts-print-only .item-facts-list {
      position: static;
      box-shadow: none;
      border: none;
      background: transparent;
      padding: 0;
      width: auto;
    }

    /* Note slot: lives below the action row. Spans columns 1-2 (photo + body)
       but stops before the action column on the right. Explicit row 2 so it
       does not share height with the facts slot below. */
    .item-note-slot {
      grid-column: 1 / 3;
      grid-row: 2;
      margin-top: -2px;
      align-self: start;
    }
    /* When there's no note (the slot renders empty), don't take up space */
    .item-note-slot:empty {
      display: none;
    }

    .item-actions-price {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .item-actions-price .item-price {
      font-size: 22px;
      font-weight: 900;
      color: #111;
      line-height: 1.1;
    }

    .item-actions-price .item-price-secondary {
      font-size: 12px;
      font-weight: 700;
      color: #767676;
      margin-top: 2px;
    }

    .item-actions-price .item-price-note {
      font-size: 11px;
      font-weight: 700;
      color: #767676;
      margin-top: 4px;
    }

    .item-actions-buttons {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .item-actions-buttons .icon-btn,
    .item-actions-buttons .swap-btn {
      justify-content: center;
      width: 100%;
    }

    /* ---------- USER NOTES ---------- */
    .item-note-add {
      align-self: flex-start;
      border: 1px solid #ddd;
      background: #fff;
      color: #333;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }

    .item-note-add:hover {
      border-color: #e60000;
      color: #e60000;
    }

    .item-note-add i {
      font-size: 10px;
    }

    .item-note {
      background: #f7f7f7;
      border-left: 3px solid #c8c8c8;
      border-radius: 8px;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: 18px 1fr auto;
      gap: 10px;
      align-items: flex-start;
    }

    .item-note-icon {
      color: #767676;
      font-size: 12px;
      padding-top: 1px;
    }

    .item-note-text {
      font-size: 13px;
      line-height: 1.5;
      color: #444;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      min-width: 0;
    }

    .item-note-actions {
      display: inline-flex;
      gap: 2px;
    }

    .item-note-btn {
      width: 22px;
      height: 22px;
      border: none;
      background: transparent;
      color: #767676;
      cursor: pointer;
      font-size: 11px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .item-note-btn:hover {
      background: rgba(0,0,0,0.05);
      color: #333;
    }

    /* Edit mode */
    .item-note-editor {
      margin-top: 12px;
      background: #f7f7f7;
      border-left: 3px solid #c8c8c8;
      border-radius: 8px;
      padding: 10px 12px;
    }

    .item-note-textarea {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #dcdcdc;
      background: #fff;
      border-radius: 6px;
      padding: 8px 10px;
      font-family: inherit;
      font-size: 13px;
      line-height: 1.45;
      color: #333;
      resize: vertical;
      min-height: 60px;
      outline: none;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .item-note-textarea:focus {
      border-color: #999;
    }

    .item-note-editor-row {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .item-note-charcount {
      font-size: 11px;
      color: #767676;
      font-weight: 700;
    }

    .item-note-charcount.is-near-limit { color: #c89e22; }
    .item-note-charcount.is-at-limit { color: #b71c1c; }

    .item-note-editor-actions {
      display: inline-flex;
      gap: 6px;
    }

    .item-note-editor-btn {
      border: 1px solid #ddd;
      background: #fff;
      color: #555;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
    }

    .item-note-editor-btn:hover {
      border-color: #999;
    }

    .item-note-editor-btn.primary {
      background: #e60000;
      color: #fff;
      border-color: #e60000;
    }

    .item-note-editor-btn.primary:hover {
      background: #c60000;
      border-color: #c60000;
    }

    .item-photo {
      width: 220px;
      height: 165px;
      border-radius: 14px;
      background-size: cover;
      background-position: center;
      background-color: #f0f0f0;
      position: relative;
      overflow: hidden;
    }

    .item-photo-stack {
      width: 220px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .photo-thumbs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .photo-thumb {
      position: relative;
      aspect-ratio: 4 / 3;
      border: none;
      padding: 0;
      border-radius: 8px;
      background-size: cover;
      background-position: center;
      background-color: #eee;
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    }

    .photo-thumb:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    }

    .photo-thumb-more::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.55);
      border-radius: 8px;
    }

    .photo-thumb-more-label {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 900;
      font-size: 13px;
      z-index: 1;
    }

    .item-photo[data-photo-for] {
      cursor: zoom-in;
    }

    .item-slot-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0,0,0,0.75);
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 5px 9px;
      border-radius: 999px;
    }

    /* ---------- PHOTO CAROUSEL CONTROLS ---------- */
    .photo-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 50%;
      background: rgba(255,255,255,0.92);
      color: #222;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      opacity: 0;
      transition: opacity 0.18s ease, background 0.15s ease, transform 0.15s ease;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    }

    .item-photo:hover .photo-nav {
      opacity: 1;
    }

    .photo-nav:hover {
      background: #fff;
      color: #e60000;
    }

    .photo-nav-prev { left: 10px; }
    .photo-nav-next { right: 10px; }

    .photo-count-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.65);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 9px;
      border-radius: 999px;
      letter-spacing: 0.04em;
    }

    .photo-view-all {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: rgba(255,255,255,0.95);
      color: #222;
      border: none;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
      transition: background 0.15s ease, color 0.15s ease;
    }

    .photo-view-all:hover {
      background: #fff;
      color: #e60000;
    }

    .photo-view-all i {
      font-size: 12px;
    }

    /* ---------- LIGHTBOX ---------- */
    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.93);
      z-index: 400;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 40px 60px;
    }

    .lightbox.open {
      display: flex;
    }

    .lightbox-image-wrap {
      max-width: 100%;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .lightbox-image {
      max-width: 100%;
      max-height: 80vh;
      object-fit: contain;
      border-radius: 8px;
      user-select: none;
    }

    .lightbox-info {
      color: rgba(255,255,255,0.85);
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    /* Google photo credit + "every photo" link, and the viewer raised
       above the search results sheet when opened from it. */
    .lightbox.is-top { z-index: 1300; }
    .lightbox-credit {
      margin-top: 4px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0;
      color: rgba(255,255,255,0.6);
    }
    .lightbox-credit a { color: rgba(255,255,255,0.75); }
    .lightbox-maps {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
      color: #fff;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: 0;
      text-decoration: none;
    }
    .lightbox-maps:hover { background: rgba(255,255,255,0.24); }

    .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border: none;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: background 0.15s ease;
    }

    .lightbox-nav:hover {
      background: rgba(255,255,255,0.3);
    }

    .lightbox-nav-prev { left: 24px; }
    .lightbox-nav-next { right: 24px; }

    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 24px;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      transition: background 0.15s ease;
    }

    .lightbox-close:hover {
      background: rgba(255,255,255,0.3);
    }

    @media (max-width: 700px) {
      .lightbox {
        padding: 20px;
      }
      .lightbox-nav {
        width: 40px;
        height: 40px;
      }
      .lightbox-nav-prev { left: 12px; }
      .lightbox-nav-next { right: 12px; }

      .photo-nav {
        opacity: 1;
        width: 30px;
        height: 30px;
        font-size: 11px;
      }
      .photo-nav-prev { left: 6px; }
      .photo-nav-next { right: 6px; }
    }

    .item-body {
      display: flex;
      flex-direction: column;
    }

    .item-time-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    /* ---------- ACCOMMODATION TIME ROW ---------- */
    /* Different layout from regular items: explicit Check-in / Check-out labels,
       no arrow, no duration. Check-out shows date suffix in parentheses. */
    .item-time-row.item-time-row-stay {
      gap: 8px;
    }
    .item-stay-time-block {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .item-stay-time-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: #767676;
      text-transform: uppercase;
    }
    .item-stay-time-sep {
      color: #ccc;
      font-weight: 700;
      padding: 0 2px;
    }
    .item-stay-time-date {
      font-size: 12px;
      font-weight: 700;
      color: #767676;
    }

    .item-stay-middle-label {
      font-size: 12px;
      font-weight: 800;
      color: #767676;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* ---------- STAY DATES MODAL ---------- */
    .stay-dates-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 8px;
      margin-top: 8px;
    }
    .stay-dates-cell {
      padding: 12px 10px;
      border: 1.5px solid #e5e5e5;
      border-radius: 10px;
      cursor: pointer;
      text-align: center;
      background: #fff;
      transition: all 0.12s ease;
      user-select: none;
    }
    .stay-dates-cell:hover {
      border-color: #e60000;
    }
    .stay-dates-cell-num {
      font-size: 18px;
      font-weight: 900;
      color: #111;
    }
    .stay-dates-cell-date {
      font-size: 10px;
      font-weight: 700;
      color: #767676;
      margin-top: 3px;
    }
    .stay-dates-cell.is-selected {
      background: #fff1f1;
      border-color: #e60000;
    }
    .stay-dates-cell.is-endpoint {
      background: #e60000;
      border-color: #e60000;
    }
    .stay-dates-cell.is-endpoint .stay-dates-cell-num,
    .stay-dates-cell.is-endpoint .stay-dates-cell-date {
      color: #fff;
    }

    /* Airbnb-style range states */
    .stay-dates-cell.is-night {
      background: #fff1f1;
      border-color: #f3b0b0;
    }
    .stay-dates-cell.is-checkin,
    .stay-dates-cell.is-checkout {
      background: #e60000;
      border-color: #e60000;
    }
    .stay-dates-cell.is-checkin .stay-dates-cell-num,
    .stay-dates-cell.is-checkin .stay-dates-cell-date,
    .stay-dates-cell.is-checkout .stay-dates-cell-num,
    .stay-dates-cell.is-checkout .stay-dates-cell-date {
      color: #fff;
    }
    .stay-dates-cell-badge {
      margin-top: 6px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      opacity: 0.95;
    }
    .stay-dates-cell-badge-night {
      color: #e60000;
    }
    .stay-dates-cell.is-after-trip {
      border-style: dashed;
      opacity: 0.85;
    }
    .stay-dates-cell.is-after-trip .stay-dates-cell-date {
      font-style: italic;
    }
    .stay-dates-summary {
      margin-top: 14px;
      font-size: 13px;
      font-weight: 700;
      color: #555;
      padding: 10px 14px;
      background: #f7f7f7;
      border-radius: 8px;
    }
    .stay-dates-conflict {
      margin-top: 10px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 700;
      color: #aa3300;
      background: #fff4e8;
      border: 1px solid #ffd9b0;
      border-radius: 8px;
    }
    .modal-help-text {
      font-size: 13px;
      color: #666;
      margin: 0 0 12px 0;
      line-height: 1.5;
    }

    .time-input-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f7f7f7;
      border-radius: 10px;
      padding: 4px 8px;
      border: 1px solid #ececec;
    }

    .time-input-group:hover,
    .time-input-group:focus-within {
      border-color: #e60000;
      background: #fff;
    }

    .time-trigger {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      color: #111;
      padding: 4px 6px;
      white-space: nowrap;
      background: transparent;
      border: none;
      cursor: pointer;
      border-radius: 6px;
    }

    .time-trigger:hover {
      background: transparent;
    }

    .time-trigger:focus {
      outline: none;
    }

    .time-trigger:focus-visible {
      outline: none;
    }

    .time-trigger .fa-clock {
      font-size: 11px;
      color: #767676;
    }

    /* In the add/edit-item modal, the time picker should fill the field width
       and match the height/border of the other modal inputs, while opening the
       same custom wheel picker used everywhere else on the page. */
    .modal-time-group {
      display: flex;
      width: 100%;
      padding: 0;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
    }
    .modal-time-group:focus-within {
      border-color: #e60000;
    }
    .modal-time-group .time-trigger {
      flex: 1;
      justify-content: space-between;
      flex-direction: row-reverse;  /* clock icon on the right, like the old native input */
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 10px;
    }
    .modal-time-group .time-trigger .fa-clock {
      font-size: 13px;
      color: #666;
    }
    .modal-time-group:hover {
      border-color: #b8b8b8;
    }

    .time-arrow {
      color: #767676;
      font-size: 11px;
    }

    /* ---------- CUSTOM TIME PICKER (iOS-STYLE WHEEL) ---------- */
    .time-picker-popover {
      position: absolute;
      background: #ffffff;
      border: 1px solid #ececec;
      border-radius: 16px;
      box-shadow: 0 14px 40px rgba(0,0,0,0.15);
      padding: 14px;
      z-index: 1102;  /* above the add-item modal (1001) so it shows when picking a time in the form */
      display: none;
      user-select: none;
    }

    .time-picker-popover.open {
      display: block;
    }

    .picker-lists {
      display: flex;
      gap: 10px;
    }

    /* ---------- ALL SUGGESTIONS DRAWER ---------- */
    /* Reuses the base .drawer slide-in; just wider for the card grid.
       Double class for specificity so it beats the later base .drawer width. */
    .drawer.suggestions-drawer {
      width: 720px;
      max-width: 100vw;
    }
    .suggestions-drawer-controls {
      padding: 14px 24px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 14px;
    }
    .suggestions-search {
      position: relative;
      display: flex;
      align-items: center;
    }
    .suggestions-search i {
      position: absolute;
      left: 14px;
      color: #767676;
      font-size: 13px;
      pointer-events: none;
    }
    .suggestions-search input {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 14px 10px 38px;
      border: 1px solid #e2e2e2;
      border-radius: 999px;
      font-size: 14px;
      font-family: inherit;
      background: #fafafa;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .suggestions-search input:focus {
      outline: none;
      border-color: #e60000;
      background: #fff;
    }
    .suggestions-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .suggestions-tab {
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid #e2e2e2;
      background: #fff;
      color: #555;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .suggestions-tab:hover { border-color: #ccc; }
    .suggestions-tab.is-active {
      background: #e60000;
      border-color: #e60000;
      color: #fff;
    }
    .suggestions-count {
      font-size: 13px;
      color: #767676;
    }
    /* Filter / sort row */
    .suggestions-filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .sugg-filter {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .sugg-filter-label {
      font-size: 12px;
      color: #767676;
      font-weight: 600;
    }
    .sugg-filter-select {
      appearance: none;
      -webkit-appearance: none;
      padding: 6px 26px 6px 12px;
      border: 1px solid #e2e2e2;
      border-radius: 999px;
      background: #fff;
      color: #444;
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      /* custom chevron */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 11px center;
      transition: border-color 0.15s ease;
    }
    .sugg-filter-select:hover { border-color: #ccc; }
    .sugg-filter-select:focus { outline: none; border-color: #e60000; }
    /* Non-default selection gets the brand accent so it reads as "active". */
    .sugg-filter-select.is-set {
      border-color: #e60000;
      color: #e60000;
    }
    .sugg-filter-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border: 1px solid #e2e2e2;
      border-radius: 999px;
      background: #fff;
      color: #444;
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    }
    .sugg-filter-btn i { font-size: 11px; }
    .sugg-filter-btn:hover { border-color: #ccc; }
    .sugg-filter-btn[aria-pressed="true"] {
      background: #e60000;
      border-color: #e60000;
      color: #fff;
    }
    /* "X min from route" line on each card */
    .sugg-card-route {
      font-size: 11px;
      color: #767676;
      margin-top: 3px;
    }
    .suggestions-drawer-body {
      padding: 18px 24px 24px;
      overflow-y: auto;
      flex: 1;
    }
    .suggestions-group { margin-bottom: 24px; }
    .suggestions-group:last-child { margin-bottom: 0; }
    .suggestions-group-title {
      font-size: 15px;
      font-weight: 900;
      color: #111;
      margin: 0 0 12px;
    }
    .suggestions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
      gap: 14px;
    }
    .suggestions-empty {
      text-align: center;
      color: #767676;
      font-size: 14px;
      padding: 40px 0;
    }
    /* Suggestion card — mirrors the strip card look */
    .sugg-card {
      border: 1px solid #ececec;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #fff;
      position: relative;
    }
    .sugg-card-photo {
      height: 112px;
      background: #f4f4f4;
      background-size: cover;
      background-position: center;
    }
    /* Fill the photo area whether it's a real image or the icon fallback */
    .sugg-photo-img, .day-rec-photo > .sugg-photo-img {
      width: 100%; height: 100%;
      background-size: cover; background-position: center;
    }
    .sugg-photo-fallback {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-size: 30px;
    }
    .sugg-card-pill {
      position: absolute;
      top: 8px;
      left: 8px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 9px;
      background: #6b7280;
      color: #fff;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-radius: 999px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    }
    .sugg-card-pill i { font-size: 9px; }
    .sugg-card-body {
      padding: 10px 12px 4px;
      flex: 1;
    }
    .sugg-card-name {
      font-size: 13px;
      font-weight: 800;
      color: #111;
      margin: 0 0 4px;
      line-height: 1.3;
    }
    .sugg-card-meta {
      font-size: 12px;
      color: #767676;
    }
    .sugg-card-add {
      margin: 8px 10px 10px;
      padding: 8px;
      border: 1px solid #e2e2e2;
      border-radius: 8px;
      background: #fff;
      color: #333;
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .sugg-card-add:hover {
      border-color: #e60000;
      color: #e60000;
    }
    .sugg-card-add.is-added {
      background: #f0faf2;
      border-color: #16a34a;
      color: #15803d;
      cursor: default;
    }
    .suggestions-drawer-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 24px;
      border-top: 1px solid #f0f0f0;
    }
    .suggestions-footer-note {
      font-size: 12px;
      color: #767676;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* ----- Suggestion detail overlay (slides over the list) ----- */
    /* Standalone detail drawer — uses the base .drawer slide-in; this just sets
       width and makes it a flex column so header/body/footer stack. Layered
       above the suggestions list drawer so it can open from within it too. */
    .drawer.sugg-detail-drawer {
      width: 460px;
      max-width: 100vw;
      display: flex;
      flex-direction: column;
      z-index: 110;
    }
    #suggDetailBackdrop { z-index: 109; }
    .sugg-detail-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 22px;
      border-bottom: 1px solid #f0f0f0;
      flex-shrink: 0;
    }
    .sugg-detail-back {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #eee;
      background: #fff;
      color: #444;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .sugg-detail-back:hover { background: #f5f5f5; border-color: #ddd; }
    .sugg-detail-eyebrow {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #767676;
    }
    .sugg-detail-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px 24px 24px;
    }
    .sugg-detail-titlewrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 14px;
    }
    .place-drawer-title-lg {
      font-size: 21px;
      font-weight: 900;
      color: #111;
      margin: 0;
      line-height: 1.25;
    }
    .sugg-detail-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 999px;
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      vertical-align: middle;
    }
    .sugg-detail-desc {
      font-size: 14px;
      line-height: 1.55;
      color: #555;
      margin: 14px 0 0;
    }
    /* Bold price figure shown in the detail view when browsing swap options. */
    .sugg-detail-price {
      font-size: 16px;
      font-weight: 900;
      color: #111;
    }
    /* Metadata rows — only rendered when the item actually has the data. */
    .sugg-detail-rows {
      margin: 20px 0 0;
      border-top: 1px solid #f0f0f0;
    }
    .sugg-detail-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 13px 0;
      border-bottom: 1px solid #f4f4f4;
    }
    .sugg-detail-row-icon {
      width: 20px;
      text-align: center;
      color: #767676;
      font-size: 14px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .sugg-detail-row-label {
      width: 150px;
      flex-shrink: 0;
      font-size: 13px;
      color: #767676;
    }
    .sugg-detail-row-value {
      font-size: 13px;
      color: #222;
      font-weight: 600;
      flex: 1;
    }
    .sugg-detail-row-value a { color: #e60000; text-decoration: none; }
    .sugg-detail-row-value a:hover { text-decoration: underline; }
    .sugg-detail-section-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #767676;
      margin: 22px 0 10px;
    }
    .sugg-detail-tips {
      margin: 0;
      padding-left: 18px;
    }
    .sugg-detail-tips li {
      font-size: 13px;
      line-height: 1.5;
      color: #555;
      margin-bottom: 6px;
    }
    .sugg-detail-footer {
      padding: 14px 24px;
      border-top: 1px solid #f0f0f0;
      flex-shrink: 0;
    }
    .sugg-detail-add {
      width: 100%;
      padding: 13px;
      border: none;
      border-radius: 10px;
      background: #e60000;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.15s ease;
    }
    .sugg-detail-add:hover { background: #c80000; }
    .sugg-detail-add.is-added {
      background: #f0faf2;
      color: #15803d;
      cursor: default;
    }
    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      .drawer.suggestions-drawer { width: 100vw; }
      .suggestions-drawer-controls { padding: 12px 18px 12px; }
      .suggestions-drawer-body { padding: 16px 18px 20px; }
      .suggestions-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
      .suggestions-footer-note { display: none; }
      .sugg-detail-main { padding: 18px 18px 0; }
      .sugg-detail-row-label { width: 120px; }
    }

    /* ---------- TIMELINE MODAL ---------- */
    .timeline-modal {
      max-width: 520px;
      width: 92vw;
    }
    /* The timeline can open over the add-item modal (as a time picker), so it
       and its backdrop sit above the base modal layer (1001). */
    #timelineModal { z-index: 1103; }
    #timelineBackdrop { z-index: 1102; }
    /* Read-only context blocks (other items shown while picking a time) are
       dimmed and non-interactive; the draggable preview block stands out. */
    .timeline-event-readonly {
      opacity: 0.45;
      cursor: default;
      filter: saturate(0.7);
    }
    .timeline-event-readonly:hover {
      filter: saturate(0.7);
      transform: none;
    }
    .timeline-event-preview {
      box-shadow: 0 0 0 2px #e60000, 0 6px 18px rgba(230,0,0,0.25);
      z-index: 12;
    }
    .timeline-modal-eyebrow {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #e60000;
      margin-bottom: 2px;
    }
    .timeline-modal-body {
      max-height: 60vh;
      overflow-y: auto;
      padding-top: 8px;
    }
    .timeline-canvas {
      position: relative;
      margin-left: 64px;  /* room for the hour axis labels */
    }
    .timeline-hour-row {
      position: relative;
      height: 60px;  /* 60px per hour → 1px per minute */
      border-top: 1px solid #f0f0f0;
    }
    .timeline-hour-row:last-child {
      border-bottom: 1px solid #f0f0f0;
    }
    .timeline-hour-label {
      position: absolute;
      left: -64px;
      top: -8px;
      width: 56px;
      text-align: right;
      font-size: 11px;
      font-weight: 700;
      color: #767676;
      font-variant-numeric: tabular-nums;
    }
    .timeline-half-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 30px;
      border-top: 1px dashed #f6f6f6;
    }
    /* Event blocks layer over the hour grid */
    .timeline-events {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;  /* children re-enable */
    }
    .timeline-event {
      position: absolute;
      left: 4px;
      border-radius: 10px;
      padding: 7px 10px;
      overflow: hidden;
      cursor: pointer;
      pointer-events: auto;
      border: 1.5px solid;
      transition: filter 0.12s ease, transform 0.12s ease;
      min-height: 22px;
    }
    .timeline-event:hover {
      filter: brightness(0.97);
      transform: translateX(1px);
    }
    .timeline-event.is-dragging {
      filter: brightness(0.94);
      box-shadow: 0 6px 20px rgba(0,0,0,0.18);
      z-index: 20;
      transform: none;
      cursor: grabbing;
      touch-action: none;
    }
    .timeline-event-focus {
      animation: timelineFocusPulse 1.4s ease;
      z-index: 15;
    }
    @keyframes timelineFocusPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(230,0,0,0); }
      30% { box-shadow: 0 0 0 4px rgba(230,0,0,0.35); }
    }
    .timeline-event { touch-action: none; }
    .timeline-handle {
      position: absolute;
      left: 0;
      right: 0;
      height: 12px;
      cursor: ns-resize;
      z-index: 5;
    }
    .timeline-handle-top { top: -2px; }
    .timeline-handle-bottom { bottom: -2px; }
    /* a subtle grip line on hover */
    .timeline-handle::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 26px;
      height: 3px;
      border-radius: 2px;
      background: currentColor;
      opacity: 0;
      transition: opacity 0.12s ease;
    }
    .timeline-handle-top::after { top: 3px; }
    .timeline-handle-bottom::after { bottom: 3px; }
    .timeline-event:hover .timeline-handle::after { opacity: 0.45; }
    .timeline-event-title {
      font-size: 14px;
      font-weight: 800;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .timeline-event-time {
      font-size: 12px;
      font-weight: 600;
      opacity: 0.85;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .timeline-event-conflict {
      display: inline-block;
      font-size: 9px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      background: #fff;
      color: #cc2200;
      border-radius: 6px;
      padding: 1px 6px;
      margin-top: 3px;
    }
    .timeline-empty {
      text-align: center;
      color: #767676;
      font-size: 13px;
      padding: 40px 20px;
      line-height: 1.5;
    }
    .timeline-note {
      background: #eef4ff;
      border: 1px solid #d4e2fb;
      color: #1e40af;
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.4;
      padding: 10px 14px;
      border-radius: 10px;
      margin-bottom: 14px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .timeline-note i { margin-top: 2px; }
    .timeline-hint {
      font-size: 12px;
      color: #767676;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .timeline-now-line { display: none; }

    .picker-list-col {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .picker-list-label {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #767676;
      text-align: center;
    }

    .picker-list {
      width: 92px;
      height: 200px;
      overflow-y: scroll;
      border: 1px solid #ececec;
      border-radius: 10px;
      padding: 4px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      /* Always show a usable scrollbar (trackpad-draggable) */
      scrollbar-width: auto;
    }
    .picker-list::-webkit-scrollbar {
      width: 12px;
    }
    .picker-list::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 6px;
      border: 3px solid #fff;
    }
    .picker-list::-webkit-scrollbar-thumb:hover {
      background: #aaa;
    }
    .picker-list::-webkit-scrollbar-track {
      background: #f7f7f7;
      border-radius: 6px;
    }

    .picker-list-item {
      flex-shrink: 0;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      border-radius: 7px;
      font-family: inherit;
      font-size: 16px;
      font-weight: 800;
      color: #333;
      cursor: pointer;
      font-variant-numeric: tabular-nums;
      transition: background 0.1s ease;
    }
    .picker-list-item:hover {
      background: #f4f4f4;
    }
    .picker-list-item.is-selected {
      background: #e60000;
      color: #fff;
    }

    .picker-footer {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #f3f3f3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .picker-preview {
      font-size: 14px;
      font-weight: 900;
      color: #111;
      font-variant-numeric: tabular-nums;
    }

    .picker-done-btn {
      border: none;
      background: #e60000;
      color: #fff;
      border-radius: 8px;
      padding: 7px 16px;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      font-family: inherit;
    }

    .picker-done-btn:hover {
      background: #c60000;
    }

    .time-duration {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      font-size: 11px;
      font-weight: 800;
      color: #737373;
    }

    .time-duration-label {
      font-weight: 700;
      color: #767676;
      text-transform: none;
      letter-spacing: 0;
    }

    .conflict-warning {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 800;
      color: #b71c1c;
      background: #fde4e4;
      padding: 4px 9px;
      border-radius: 999px;
    }

    .item-meta-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .item-type-pill {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      /* Default = red/activity tint. Per-type modifier classes below
         override these vars to match the timeline block colours. */
      --pill-bg: #fff1f1;
      --pill-fg: #e60000;
      color: var(--pill-fg);
      background: var(--pill-bg);
      padding: 4px 8px;
      border-radius: 999px;
    }

    /* Per-type pill colours — mirror TIMELINE_TYPE_COLORS (tint bg + dark text)
       so item cards read consistently with the day timeline. */
    .item-type-pill--attraction    { --pill-bg: #eafaef; --pill-fg: #15803d; }
    .item-type-pill--meal          { --pill-bg: #fff3e3; --pill-fg: #b35e00; }
    .item-type-pill--activity      { --pill-bg: #fdeaea; --pill-fg: #b01818; }
    .item-type-pill--shopping      { --pill-bg: #fce7f3; --pill-fg: #9d174d; }
    .item-type-pill--transport     { --pill-bg: #e8f8fb; --pill-fg: #0e7490; }
    .item-type-pill--flight        { --pill-bg: #f3eefe; --pill-fg: #5b21b6; }
    .item-type-pill--accommodation { --pill-bg: #eef4ff; --pill-fg: #1e40af; }
    .item-type-pill--downtime      { --pill-bg: #f3f4f6; --pill-fg: #4b5563; }

    .item-name {
      font-size: 18px;
      font-weight: 900;
      margin: 0 0 8px;
      color: #111;
    }

    .item-description {
      font-size: 13px;
      line-height: 1.6;
      color: #666;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .item-description.is-expanded {
      display: block;
      -webkit-line-clamp: unset;
      line-clamp: unset;
      overflow: visible;
    }

    .item-description-wrap {
      margin: 0 0 14px;
    }

    /* ---------- PLACE AUTOCOMPLETE ---------- */
    .autocomplete-wrap {
      position: relative;
    }
    .autocomplete-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.14);
      z-index: 50;
      max-height: 320px;
      overflow-y: auto;
      padding: 6px;
    }
    .autocomplete-dropdown.open { display: block; }
    .autocomplete-option {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.1s ease;
    }
    .autocomplete-option:hover,
    .autocomplete-option.is-active {
      background: #fff1f1;
    }
    .autocomplete-option-icon {
      width: 30px;
      height: 30px;
      border-radius: 7px;
      background: #f4f4f4;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #767676;
      font-size: 13px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .autocomplete-option-body { min-width: 0; flex: 1; }
    .autocomplete-option-name {
      font-size: 14px;
      font-weight: 800;
      color: #111;
      line-height: 1.2;
    }
    .autocomplete-option-meta {
      font-size: 11px;
      font-weight: 600;
      color: #767676;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .autocomplete-option-rating {
      color: #d68000;
      font-weight: 800;
    }
    .autocomplete-footer {
      padding: 8px 12px;
      font-size: 11px;
      color: #767676;
      font-weight: 600;
      border-top: 1px solid #f3f3f3;
      margin-top: 4px;
    }

    /* ---------- AREA SEARCH ("hotels in hiroshima") ---------- */
    .autocomplete-area {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.1s ease;
      border-bottom: 1px solid #f3f3f3;
      margin-bottom: 4px;
    }
    .autocomplete-area:hover { background: #fff1f1; }
    .autocomplete-area .autocomplete-option-icon { background: #fff1f1; color: #e60000; }
    .autocomplete-area .autocomplete-option-meta { white-space: normal; }
    .area-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      border: 0;
      background: none;
      padding: 2px 0;
      font-size: 12px;
      font-weight: 800;
      color: #e60000;
      cursor: pointer;
      font-family: inherit;
    }
    .area-back[hidden] { display: none; }

    /* The results sheet: a large panel over the add form, built for photos. */
    .as-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(17, 17, 17, 0.45);
      z-index: 1190;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.18s ease, visibility 0s linear 0.18s;
    }
    .as-sheet {
      position: fixed;
      top: 24px;
      bottom: 24px;
      left: 50%;
      width: min(1120px, calc(100vw - 48px));
      transform: translate(-50%, 12px);
      background: #f6f6f6;
      border-radius: 18px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
      z-index: 1200;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    }
    .as-open .as-backdrop,
    .as-open .as-sheet {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }
    .as-open .as-sheet { transform: translate(-50%, 0); }
    .as-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px 12px;
      background: #fff;
      border-bottom: 1px solid #ececec;
    }
    .as-search {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      border: 1.5px solid #e3e3e3;
      border-radius: 999px;
      padding: 0 6px 0 16px;
      height: 46px;
      background: #fff;
    }
    .as-search:focus-within { border-color: #e60000; }
    .as-search i { color: #e60000; font-size: 15px; }
    .as-input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: none;
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      color: #111;
      background: transparent;
    }
    .as-go {
      border: 0;
      border-radius: 999px;
      background: #e60000;
      color: #fff;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      height: 36px;
      padding: 0 18px;
      cursor: pointer;
    }
    .as-close {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #e3e3e3;
      background: #fff;
      color: #444;
      font-size: 16px;
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
    }
    .as-close i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .as-tabs {
      display: flex;
      gap: 4px;
      padding: 0 20px;
      background: #fff;
      border-bottom: 1px solid #ececec;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .as-tabs::-webkit-scrollbar { display: none; }
    .as-tab {
      border: 0;
      background: none;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      color: #666;
      padding: 12px 12px 11px;
      border-bottom: 3px solid transparent;
      cursor: pointer;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .as-tab:hover { color: #111; }
    .as-tab.is-on { color: #e60000; border-bottom-color: #e60000; }
    .as-body {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
    }
    .as-side {
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 20px 18px 24px 20px;
      border-right: 1px solid #ececec;
      background: #fff;
    }
    .as-group + .as-group { margin-top: 22px; }
    .as-group-title {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #767676;
      margin-bottom: 8px;
    }
    .as-opt {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      border: 0;
      background: none;
      text-align: left;
      padding: 8px 6px;
      border-radius: 8px;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      color: #222;
      cursor: pointer;
    }
    .as-opt:hover { background: #f6f6f6; }
    .as-opt-dot {
      width: 18px;
      height: 18px;
      border: 2px solid #cfcfcf;
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
    }
    .as-opt.is-box .as-opt-dot { border-radius: 5px; }
    .as-opt.is-on .as-opt-dot { border-color: #e60000; background: #e60000; }
    .as-opt.is-on .as-opt-dot::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
      transform: translate(-50%, -50%);
    }
    .as-opt.is-box.is-on .as-opt-dot::after {
      width: 8px;
      height: 4px;
      border-radius: 0;
      background: none;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: translate(-50%, -65%) rotate(-45deg);
    }
    .as-opt-note { margin-left: auto; color: #767676; font-size: 12px; font-weight: 600; }
    .as-main {
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 18px 22px 28px;
    }
    .as-count {
      font-size: 13px;
      font-weight: 700;
      color: #555;
      margin: 0 2px 14px;
    }
    .as-count b { color: #111; font-weight: 800; }
    .as-fix {
      font-size: 13px;
      font-weight: 600;
      color: #555;
      margin: 0 2px 10px;
      line-height: 1.5;
    }
    .as-fix b { color: #e60000; font-weight: 800; }
    .as-fix-btn {
      border: 0;
      background: none;
      padding: 0;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #555;
      text-decoration: underline;
      cursor: pointer;
    }
    .as-fix-btn:hover { color: #e60000; }
    .as-card {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      background: #fff;
      border: 1px solid #ececec;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 14px;
      transition: box-shadow 0.15s ease, border-color 0.15s ease;
    }
    .as-card:hover { border-color: #dcdcdc; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08); }
    .as-photo {
      position: relative;
      background: #ececec;
      min-height: 210px;
    }
    .as-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .as-photo-empty {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #bdbdbd;
      font-size: 34px;
    }
    .as-photo-credit {
      position: absolute;
      left: 8px;
      bottom: 8px;
      max-width: calc(100% - 16px);
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      padding: 3px 7px;
      border-radius: 999px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .as-photo-credit a { color: #fff; text-decoration: none; }
    .as-photo.is-clickable { cursor: zoom-in; }
    .as-photo.is-clickable:focus-visible { outline: 3px solid #e60000; outline-offset: -3px; }
    .as-photo-count {
      position: absolute;
      right: 8px;
      bottom: 8px;
      background: rgba(0, 0, 0, 0.62);
      color: #fff;
      font-size: 11.5px;
      font-weight: 800;
      padding: 4px 9px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      pointer-events: none;
    }
    .as-info {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px 18px;
      padding: 18px 20px;
    }
    .as-main-col { min-width: 0; }
    .as-kind {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #e60000;
    }
    .as-name {
      font-size: 19px;
      font-weight: 800;
      color: #111;
      line-height: 1.25;
      margin-top: 4px;
    }
    .as-area {
      font-size: 13px;
      font-weight: 600;
      color: #666;
      margin-top: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .as-area i { color: #767676; font-size: 12px; }
    .as-rating {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 16px;
    }
    .as-score {
      background: #111;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      border-radius: 8px;
      padding: 5px 8px;
      line-height: 1;
    }
    .as-score-word { font-size: 14px; font-weight: 800; color: #111; }
    .as-score-count { font-size: 12.5px; font-weight: 600; color: #737373; }
    .as-side-col {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-end;
      text-align: right;
      gap: 10px;
      min-width: 150px;
    }
    .as-price { font-size: 12px; font-weight: 600; color: #737373; line-height: 1.35; }
    .as-price b {
      display: block;
      font-size: 18px;
      font-weight: 800;
      color: #111;
      letter-spacing: 1px;
    }
    .as-add {
      border: 0;
      border-radius: 999px;
      background: #e60000;
      color: #fff;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      padding: 10px 18px;
      cursor: pointer;
      white-space: nowrap;
    }
    .as-add:hover { background: #c80000; }
    .as-map-link {
      font-size: 12px;
      font-weight: 700;
      color: #555;
      text-decoration: none;
      white-space: nowrap;
    }
    .as-map-link:hover { color: #e60000; }
    .as-more {
      display: block;
      margin: 6px auto 0;
      border: 1.5px solid #111;
      background: #fff;
      color: #111;
      border-radius: 999px;
      padding: 11px 26px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }
    .as-more:hover { background: #111; color: #fff; }
    .as-status {
      background: #fff;
      border: 1px solid #ececec;
      border-radius: 16px;
      padding: 40px 24px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #737373;
      line-height: 1.55;
    }
    .as-foot { text-align: center; font-size: 11px; font-weight: 600; color: #767676; margin-top: 18px; }

    /* Google's required attribution wherever Places content shows
       without a Google map. Google's text form: the words "Google Maps",
       never translated, in Roboto 400, 12 to 16px, colour #5E5E5E (or
       #1F1F1F / white), always visible, near the top or bottom of the
       Google content. Do not restyle or reword it. */
    .gm-attr {
      font-family: 'Roboto', Arial, sans-serif;
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      color: #5E5E5E;
      letter-spacing: 0;
      text-transform: none;
      white-space: nowrap;
    }
    .gm-attr-row { display: flex; justify-content: flex-end; padding: 6px 2px 0; }
    .as-foot .gm-attr { display: inline-block; }
    .day-gm-attr { margin: 10px 4px 0; }
    .place-drawer-hero.has-gcredit { position: relative; margin-bottom: 6px; }
    .place-drawer-hero + .gm-attr-row { padding: 0 2px 12px; }
    .gphoto-credit {
      position: absolute;
      left: 10px;
      bottom: 10px;
      max-width: calc(100% - 80px);
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 999px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .gphoto-credit a { color: #fff; text-decoration: none; }
    .gphoto-credit a:hover { text-decoration: underline; }

    /* which day a pick goes to, beside the search box. Same look as
       the filter dropdowns on the itineraries page (.fdrop): grey border
       that turns red on hover and when open, a turning chevron, and a list
       with a soft red hover and a solid red tick for the chosen day. */
    .as-daypick { position: relative; flex-shrink: 0; }
    .as-daypick[hidden] { display: none; }
    .as-daybtn {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 46px;
      padding: 0 18px 0 18px;
      border: 1px solid #dedede;
      border-radius: 999px;
      background: #fff;
      color: #111;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .as-daybtn:hover { border-color: #e60000; }
    .as-daypick.open .as-daybtn { border-color: #e60000; box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.08); }
    .as-daypick-lbl { font-size: 12px; font-weight: 700; color: #767676; white-space: nowrap; }
    .as-dayshow { font-size: 14px; font-weight: 800; color: #111; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
    .as-daycity { color: #111; }
    .as-daychev {
      flex: none;
      width: 8px;
      height: 8px;
      margin: -3px 0 0 4px;
      border-right: 2px solid #111;
      border-bottom: 2px solid #111;
      transform: rotate(45deg);
      transition: transform 0.25s ease, border-color 0.18s ease;
    }
    .as-daybtn:hover .as-daychev,
    .as-daypick.open .as-daychev { border-right-color: #e60000; border-bottom-color: #e60000; }
    .as-daypick.open .as-daychev { transform: rotate(225deg); margin-top: 3px; }
    .as-daypanel {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      z-index: 40;
      width: 300px;
      max-width: calc(100vw - 28px);
      margin: 0;
      padding: 6px;
      list-style: none;
      background: #fff;
      border: 1px solid #f0dada;
      border-radius: 14px;
      box-shadow: 0 18px 40px rgba(40, 10, 10, 0.14);
      max-height: min(360px, 60vh);
      overflow-y: auto;
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      visibility: hidden;
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    }
    .as-daypick.open .as-daypanel {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      visibility: visible;
      transition-delay: 0s;
    }
    .as-daypanel-head {
      padding: 8px 12px 6px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #767676;
    }
    .as-dayopt {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) 14px;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 9px;
      color: #333;
      cursor: pointer;
      transition: background 0.14s ease, color 0.14s ease;
    }
    .as-dayopt-num { font-size: 14px; font-weight: 900; color: #e60000; white-space: nowrap; }
    .as-dayopt-info { min-width: 0; }
    .as-dayopt-title { display: block; font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .as-dayopt-sub { display: block; font-size: 12px; font-weight: 600; color: #767676; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .as-dayopt:hover,
    .as-dayopt.is-active { background: #fff3f3; }
    .as-dayopt:hover .as-dayopt-title,
    .as-dayopt.is-active .as-dayopt-title { color: #e60000; }
    .as-dayopt.is-selected { background: #e60000; }
    .as-dayopt.is-selected .as-dayopt-num,
    .as-dayopt.is-selected .as-dayopt-title,
    .as-dayopt.is-selected .as-dayopt-sub { color: #fff; }
    .as-dayopt.is-selected::after { content: "\2713"; font-size: 12px; font-weight: 900; color: #fff; }

    /* the sheet before any search (option A, photo tiles). */
    .as-start .as-tabs, .as-start .as-side { display: none; }
    .as-start .as-body { grid-template-columns: minmax(0, 1fr); }
    .as-start .as-main { overflow-y: auto; }
    .as-st { max-width: 880px; margin: 34px auto 24px; padding: 0 8px; }
    .as-st-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #e60000; margin-bottom: 8px; }
    .as-st-head { font-size: 26px; font-weight: 800; color: #111; letter-spacing: -0.015em; margin: 0; }
    .as-st-sub { font-size: 14px; font-weight: 600; color: #737373; margin: 6px 0 0; line-height: 1.5; }
    .as-st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
    .as-st-tile {
      position: relative;
      display: block;
      height: 190px;
      padding: 0;
      border: 0;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      background: #ddd;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
      font-family: inherit;
      text-align: left;
    }
    .as-st-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
    .as-st-tile:hover img { transform: scale(1.04); }
    .as-st-tile:focus-visible { outline: 3px solid #e60000; outline-offset: 2px; }
    .as-st-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72)); }
    .as-st-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; color: #fff; }
    .as-st-cap b { display: block; font-size: 16px; font-weight: 800; }
    .as-st-cap span { font-size: 12px; font-weight: 600; opacity: 0.88; }
    .as-st-sec { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #767676; margin: 28px 0 12px; }
    .as-st-recents { display: flex; gap: 12px; flex-wrap: wrap; }
    .as-st-recent {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 14px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #111;
      cursor: pointer;
    }
    .as-st-recent:hover { border-color: #111; }
    .as-st-recent i { color: #e60000; }
    .as-st-recent small { color: #767676; font-weight: 600; margin-left: 4px; font-size: 12px; }
    .as-st-own {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      margin-top: 28px;
      border: 1.5px dashed #d9d9d9;
      border-radius: 14px;
      padding: 14px 16px;
      background: #fff;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
    }
    .as-st-own:hover { border-color: #e60000; }
    .as-st-own-ic { width: 38px; height: 38px; border-radius: 10px; background: #fff1f1; color: #e60000; display: grid; place-items: center; flex: none; }
    .as-st-own-txt b { font-size: 14px; color: #111; display: block; }
    .as-st-own-txt span { font-size: 12.5px; color: #767676; font-weight: 600; }
    .as-st-own-go { margin-left: auto; font-size: 13px; font-weight: 800; color: #e60000; white-space: nowrap; }
    .as-own {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 28px;
      border: 0;
      background: none;
      padding: 0;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: #e60000;
      cursor: pointer;
      text-align: left;
      line-height: 1.45;
    }
    .as-own:hover { text-decoration: underline; }
    .as-own-foot { display: block; margin: 18px auto 0; text-align: center; }
    .as-chips { display: none; }

    /* free embedded map. A small preview above the filters, and a map
       view with compact cards on the left and the map on the right. */
    .as-minimap {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #e3e3e3;
      margin-bottom: 20px;
    }
    .as-minimap-frame { height: 120px; background: #e9eef0; }
    .as-minimap-frame iframe { width: 100%; height: 100%; border: 0; pointer-events: none; display: block; }
    .as-minimap-btn {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      border: 0;
      border-radius: 999px;
      background: #111;
      color: #fff;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 800;
      padding: 8px 14px;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    }
    .as-minimap-btn i { margin-right: 4px; }
    .as-mapcol { display: none; position: relative; background: #e9eef0; }
    .as-map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .as-searcharea {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      border: 0;
      border-radius: 999px;
      background: #111;
      color: #fff;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      padding: 9px 16px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0,0,0,0.25);
      white-space: nowrap;
    }
    .as-searcharea[hidden] { display: none; }
    .as-searcharea i { margin-right: 6px; }
    .as-maplist {
      position: absolute;
      top: 14px;
      left: 14px;
      border: 0;
      border-radius: 999px;
      background: #fff;
      color: #111;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      padding: 9px 16px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    .as-maplist i { margin-right: 5px; }
    .as-map-note {
      position: absolute;
      left: 14px;
      bottom: 14px;
      background: rgba(255,255,255,0.92);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 11.5px;
      font-weight: 700;
      color: #555;
      pointer-events: none;
    }
    .as-mapview .as-body { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); }
    .as-mapview .as-side { display: none; }
    .as-mapview .as-mapcol { display: block; }
    .as-mapview .as-main { padding: 14px 14px 24px; }
    /* Desktop map view: the filter chips wrap onto a second line instead of
       running off the edge of the list column. */
    .as-mapview .as-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin: 0 0 12px;
    }
    .as-mapview .as-chips::-webkit-scrollbar { display: none; }
    .as-chip {
      flex-shrink: 0;
      border: 1px solid #e0e0e0;
      background: #fff;
      color: #333;
      border-radius: 999px;
      padding: 7px 12px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }
    .as-chip.is-on { border-color: #e60000; color: #e60000; background: #fff5f5; }
    .as-chip-map i { margin-right: 4px; }
    .as-mapview .as-card { grid-template-columns: 130px minmax(0, 1fr); cursor: pointer; margin-bottom: 10px; }
    .as-mapview .as-photo { min-height: 130px; }
    .as-mapview .as-photo-credit { display: none; }
    .as-mapview .as-info { grid-template-columns: 1fr; padding: 12px 14px; gap: 4px; }
    .as-mapview .as-name { font-size: 15px; }
    .as-mapview .as-area { font-size: 12px; margin-top: 3px; }
    .as-mapview .as-rating { margin-top: 8px; }
    .as-mapview .as-score { font-size: 12px; padding: 4px 6px; }
    .as-mapview .as-score-word, .as-mapview .as-score-count { font-size: 12px; }
    .as-mapview .as-side-col {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      min-width: 0;
      gap: 8px;
      margin-top: 6px;
    }
    .as-mapview .as-price b { display: inline; font-size: 14px; margin-right: 4px; }
    .as-mapview .as-map-link { display: none; }
    .as-mapview .as-add { padding: 8px 13px; font-size: 12px; }
    .as-card.is-focus { border-color: #e60000; box-shadow: 0 0 0 2px rgba(230,0,0,0.18); }

    /* interactive map with colour coded pins */
    .as-gmap { display: none; position: absolute; inset: 0; }
    .as-gmap-on .as-gmap { display: block; }
    .as-gmap-on .as-map-frame, .as-gmap-on .as-map-note { display: none; }
    .as-map-legend { display: none; }
    .as-gmap-on .as-map-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 12px;
      position: absolute;
      left: 14px;
      bottom: 14px;
      max-width: calc(100% - 90px);
      background: rgba(255,255,255,0.95);
      border-radius: 10px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #333;
      box-shadow: 0 2px 10px rgba(0,0,0,0.15);
      pointer-events: none;
    }
    .as-gmap-on .as-map-legend[hidden] { display: none; }
    .as-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    .as-legend-item i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
    .as-pin {
      position: relative;
      width: 30px;
      height: 30px;
      cursor: pointer;
      transform-origin: 50% 100%;
      transition: transform 0.15s ease;
    }
    .as-pin-head {
      position: absolute;
      inset: 0;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      background: var(--pin, #16a34a);
      border: 2px solid #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .as-pin-head i { transform: rotate(45deg); color: #fff; font-size: 12px; }
    .as-pin.is-hover { transform: scale(1.2); }
    .as-pin.is-focus { transform: scale(1.4); }
    .as-pin.is-focus .as-pin-head { box-shadow: 0 0 0 4px rgba(0,0,0,0.15), 0 3px 10px rgba(0,0,0,0.4); }
    .as-map-link {
      border: 0;
      background: none;
      padding: 0;
      font-family: inherit;
      cursor: pointer;
    }

    @media (max-width: 860px) {
      .as-sheet {
        top: 0;
        bottom: 0;
        width: 100vw;
        border-radius: 0;
      }
      .as-head { padding: 12px 14px 10px; gap: 10px; }
      .as-search { height: 42px; padding-left: 14px; }
      .as-go { display: none; }
      .as-tabs { padding: 0 8px; }
      .as-daybtn { height: 42px; padding: 0 14px; gap: 6px; }
      .as-daypick-lbl { display: none; }
      .as-dayshow { font-size: 13px; }
      .as-daycity { display: none; }
      .as-st { margin: 8px 0 24px; padding: 0; }
      .as-st-head { font-size: 21px; }
      .as-st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
      .as-st-tile { height: 130px; border-radius: 14px; }
      .as-st-cap { left: 12px; right: 12px; bottom: 10px; }
      .as-st-cap b { font-size: 15px; }
      .as-st-own-go { display: none; }
      .as-body { display: block; overflow-y: auto; overscroll-behavior: contain; }
      .as-side { display: none; }
      .as-main { overflow: visible; padding: 12px 14px 24px; }
      .as-chips {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -14px 12px;
        padding: 0 14px;
      }
      .as-chips::-webkit-scrollbar { display: none; }
      .as-chip {
        flex-shrink: 0;
        border: 1px solid #e0e0e0;
        background: #fff;
        color: #333;
        border-radius: 999px;
        padding: 7px 12px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }
      .as-chip.is-on { border-color: #e60000; color: #e60000; background: #fff5f5; }
      .as-card { grid-template-columns: 1fr; }
      .as-photo { min-height: 0; aspect-ratio: 16 / 10; }
      .as-info { grid-template-columns: 1fr; padding: 14px 16px 16px; }
      .as-name { font-size: 17px; }
      .as-rating { margin-top: 12px; }
      .as-side-col {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        min-width: 0;
        margin-top: 6px;
        padding-top: 12px;
        border-top: 1px solid #f1f1f1;
      }
      .as-map-link { display: none; }
      .as-mapview .as-body { display: flex; flex-direction: column; }
      .as-mapview .as-mapcol { order: -1; flex: 0 0 42vh; position: sticky; top: 0; z-index: 2; }
      /* Phone: one row that scrolls sideways, like the normal results view. */
      .as-mapview .as-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 12px; padding: 0 14px 2px; }
      .as-mapview .as-card { grid-template-columns: 112px minmax(0, 1fr); }
      .as-mapview .as-photo { aspect-ratio: auto; min-height: 112px; }
      .as-mapview .as-side-col { border-top: 0; padding-top: 0; }
      .as-maplist { display: none; }
      .as-gmap-on .as-map-legend { flex-wrap: nowrap; gap: 10px; left: 10px; bottom: 10px; padding: 5px 10px; font-size: 11px; max-width: calc(100% - 70px); overflow: hidden; }
      .as-legend-item i { width: 8px; height: 8px; }
    }

    /* ── MOBILE (11 Oct): the add sheet and suggestion panels on phones and tablets ── */
    /* 1. Narrow phones: the Add to day list is wider than the space to the
       left of its button (at 320 it ran 36px off the screen), so below 420 it
       spans the screen with a 12px margin each side instead. */
    @media (max-width: 420px) {
      .as-daypanel { position: fixed; left: 12px; right: 12px; width: auto; max-width: none; top: 62px; }
    }
    /* 2. Tablets in portrait and phones on their side: the full width stacked
       result card was 660 to 710px tall here, one place per screen. Above
       560px wide the card keeps the desktop shape instead, photo beside the
       details, about 200px tall. The map view's own compact card wins over
       this on specificity, so it is unchanged. */
    @media (min-width: 561px) and (max-width: 860px) {
      .as-card { grid-template-columns: 220px minmax(0, 1fr); }
      .as-photo { aspect-ratio: auto; min-height: 190px; }
      .as-info { padding: 14px 18px 16px; }
      .as-rating { margin-top: 8px; }
    }
    /* 3. Phones on their side: the start tiles go four across so they fit
       under the heading without scrolling. */
    @media (max-height: 500px) and (max-width: 1000px) {
      .as-st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
      .as-st-tile { height: 112px; }
      .as-st-head { font-size: 19px; }
      /* the suggestion panel, the View all list, the place panel and the day
         overview were capped at 92svh like the stop panel used to be, which
         clipped their footers (the View all Close button sat half off the
         screen). Same fix as the stop panel: let them fill the height. */
      #suggDetail, #suggestionsModal, #placeDrawer, #dayOverviewDrawer { max-height: none; }
      #suggDetail .place-drawer-hero { height: 140px; min-height: 0; }
      /* the View all list's heading, search, filters and sort took about
         300 of the 390px, leaving a 40px window for the places. Here the
         whole panel scrolls as one, so the heading scrolls away and the
         Close button stays pinned at the bottom. */
      #suggestionsModal { display: block; overflow-y: auto; overscroll-behavior: contain; }
      #suggestionsModal .suggestions-drawer-body { overflow: visible; max-height: none; height: auto; }
      #suggestionsModal .suggestions-drawer-footer { position: sticky; bottom: 0; z-index: 2; background: #fff; }
    }
    /* 4. Touch screens: the sheet's own buttons at least 44px to tap. */
    @media (pointer: coarse) {
      .as-daybtn, .as-close { min-height: 44px; }
      .as-close { min-width: 44px; }
    }

    /* ---------- PLACE INFO ROW (rating · hours · address · maps) ---------- */
    .item-place-info {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 4px 0 10px;
      font-size: 12px;
      font-weight: 600;
      color: #737373;
    }
    .place-info-sep { color: #ccc; }
    .place-info-rating {
      color: #d68000;
      font-weight: 800;
    }
    .place-info-rating i { font-size: 11px; }
    .place-info-reviews {
      color: #767676;
      font-weight: 600;
    }
    .place-info-hours i,
    .place-info-address i { font-size: 11px; color: #767676; margin-right: 1px; }
    .place-info-address {
      max-width: 280px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .place-info-maps {
      color: #e60000;
      font-weight: 800;
      text-decoration: none;
    }
    .place-info-maps i { font-size: 9px; }
    .place-info-maps:hover { text-decoration: underline; }

    .item-description-toggle {
      display: inline-flex;
      align-items: center;
      border: none;
      background: transparent;
      padding: 4px 0;
      margin-top: 2px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      color: #e60000;
      cursor: pointer;
    }

    .item-description-toggle:hover {
      text-decoration: underline;
    }

    /* Show "Read more" by default, "Read less" when description is expanded */
    .item-description-toggle .show-less-label { display: none; }
    .item-description-wrap:has(.item-description.is-expanded) .item-description-toggle .show-more-label { display: none; }
    .item-description-wrap:has(.item-description.is-expanded) .item-description-toggle .show-less-label { display: inline; }

    .item-bottom-row {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .item-bottom-left {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .item-bottom-right {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .item-price {
      font-size: 16px;
      font-weight: 900;
      color: #111;
      transition: background-color 0.6s ease;
      padding: 2px 6px;
      margin-left: -6px;
      border-radius: 6px;
    }

    .item-price.flash {
      background-color: #fff1f1;
    }

    .item-price-secondary {
      font-size: 11px;
      font-weight: 700;
      color: #767676;
      margin-left: 6px;
    }

    .item-price-note {
      font-size: 11px;
      font-weight: 700;
      color: #767676;
    }

    .icon-btn,
    .swap-btn {
      border: 1px solid #ddd;
      background: #fff;
      color: #333;
      border-radius: 999px;
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .icon-btn:hover,
    .swap-btn:hover {
      border-color: #e60000;
      color: #e60000;
    }

    .swap-btn[disabled] {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* ---------- TRANSIT HINT ---------- */
    .transit-hint {
      padding: 6px 32px 6px 252px;
      font-size: 11px;
      font-weight: 700;
      color: #767676;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fbfbfb;
      border-bottom: 1px solid #f5f5f5;
    }

    .transit-hint i {
      color: #ccc;
    }

    @media (max-width: 700px) {
      .item {
        grid-template-columns: 1fr;
      }
      .item-photo {
        width: 100%;
        height: 180px;
        margin-bottom: 14px;
      }
      .transit-hint {
        padding-left: 32px;
      }
    }

    /* ---------- SIDEBAR ---------- */
    .summary-sidebar {
      position: sticky;
      top: 80px;
      background: #ffffff;
      border: 1px solid #ececec;
      border-radius: 22px;
      padding: 24px;
    }

    .summary-eyebrow {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #737373;
      margin-bottom: 12px;
    }

    .summary-total {
      font-size: 38px;
      font-weight: 900;
      color: #111;
      line-height: 1.1;
      transition: background-color 0.6s ease;
      padding: 4px 8px;
      margin-left: -8px;
      border-radius: 10px;
      display: inline-block;
    }

    .summary-total.flash {
      background-color: #fff1f1;
    }

    .summary-total-secondary {
      font-size: 16px;
      font-weight: 700;
      color: #767676;
      margin-top: 4px;
    }

    .summary-divider {
      height: 1px;
      background: #f0f0f0;
      margin: 20px 0;
    }

    .summary-breakdown {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .breakdown-cat {
      border-bottom: 1px dashed #f3f3f3;
    }

    .breakdown-cat:last-child {
      border-bottom: none;
    }

    .breakdown-cat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      font-size: 13px;
      color: #555;
      gap: 10px;
    }

    .breakdown-cat-header > span:first-child {
      font-weight: 700;
    }

    .breakdown-cat-header.is-expandable {
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .breakdown-cat-header.is-expandable:hover {
      color: #e60000;
    }

    .breakdown-cat-right {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .breakdown-cat-total {
      font-weight: 800;
      color: #222;
    }

    .breakdown-chevron {
      font-size: 10px;
      color: #767676;
      transition: transform 0.18s ease;
    }

    .breakdown-cat-header.is-expanded .breakdown-chevron {
      transform: rotate(180deg);
      color: #e60000;
    }

    .breakdown-sublist {
      list-style: none;
      margin: 0 0 10px;
      padding: 0 0 0 12px;
      border-left: 2px solid #f3f3f3;
    }

    .breakdown-sublist li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 5px 0;
      font-size: 12px;
      color: #666;
    }

    .breakdown-subname {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 600;
    }

    .breakdown-subprice {
      font-weight: 700;
      color: #333;
      white-space: nowrap;
    }

    .summary-note {
      margin-top: 18px;
      font-size: 11px;
      line-height: 1.55;
      color: #767676;
    }

    /* ---------- SWAP DRAWER ---------- */
    .drawer-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      z-index: 100;
    }

    .drawer-backdrop.open {
      opacity: 1;
      visibility: visible;
    }

    .drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 460px;
      max-width: 100vw;
      background: #ffffff;
      transform: translateX(100%);
      transition: transform 0.28s ease;
      z-index: 101;
      display: flex;
      flex-direction: column;
    }

    .drawer.open {
      transform: translateX(0);
    }

    .drawer-header {
      padding: 22px 24px 18px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .drawer-search {
      position: relative;
      padding: 12px 24px;
      border-bottom: 1px solid #f0f0f0;
      background: #fafafa;
    }

    .drawer-search-icon {
      position: absolute;
      left: 36px;
      top: 50%;
      transform: translateY(-50%);
      color: #767676;
      font-size: 13px;
      pointer-events: none;
    }

    .drawer-search-input {
      width: 100%;
      padding: 9px 36px 9px 32px;
      border: 1px solid #e0e0e0;
      border-radius: 999px;
      background: #fff;
      font-family: inherit;
      font-size: 13px;
      color: #111;
      transition: border-color 0.15s ease;
    }

    .drawer-search-input:focus {
      outline: none;
      border-color: #e60000;
    }

    .drawer-search-clear {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: none;
      background: #e8e8e8;
      color: #555;
      font-size: 10px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .drawer-search.has-query .drawer-search-clear {
      display: flex;
    }

    .drawer-search-clear:hover {
      background: #d0d0d0;
      color: #111;
    }

    .drawer-empty-state {
      padding: 40px 24px;
      text-align: center;
      color: #767676;
      font-size: 13px;
    }
    .drawer-empty-state strong {
      color: #111;
      font-weight: 800;
    }

    /* Category filter chips in the swap drawer. Reuses .suggestions-tab styling
       (applied alongside via class) for visual consistency with the other
       drawer; this just handles spacing/scroll within the swap drawer. */
    .drawer-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 24px 14px;
    }
    .drawer-tabs:empty { display: none; }

    /* Category group titles when the swap drawer's "All" filter is active.
       Reuses .suggestions-group-title styling but adds top spacing between
       successive groups (the first one needs none). */
    #drawerBody .suggestions-group-title {
      margin-top: 18px;
      margin-bottom: 8px;
    }
    #drawerBody .suggestions-group-title:first-child {
      margin-top: 0;
    }

    .drawer-title-block { flex: 1; }

    .drawer-eyebrow {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #e60000;
      margin-bottom: 4px;
    }

    .drawer-title {
      font-size: 20px;
      font-weight: 900;
      margin: 0 0 6px;
      color: #111;
    }

    .drawer-current {
      font-size: 13px;
      color: #737373;
    }
    /* When the subtitle holds a category pill (place detail drawer), give it a
       little breathing room. Pill colours come from .item-type-pill--<type>. */
    .drawer-current .item-type-pill {
      display: inline-block;
      margin-top: 2px;
    }

    .drawer-close {
      border: none;
      background: #f4f4f4;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 14px;
      color: #555;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .drawer-close:hover { background: #ececec; }

    .drawer-body {
      padding: 20px 24px;
      overflow-y: auto;
      flex: 1;
    }

    /* ---- Place detail drawer content ---- */
    .place-drawer-hero {
      width: 100%;
      height: 180px;
      border-radius: 14px;
      background-size: cover;
      background-position: center;
      background-color: #f4f4f4;
      margin-bottom: 16px;
    }
    .place-drawer-hero-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #cfcfcf;
      font-size: 40px;
    }
    .place-drawer-info {
      margin-bottom: 16px;
    }
    .place-drawer-section {
      padding: 14px 0;
      border-top: 1px solid #f2f2f2;
    }
    .place-drawer-label {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #767676;
      margin-bottom: 6px;
    }
    .place-drawer-desc {
      font-size: 14px;
      line-height: 1.6;
      color: #444;
      margin: 0;
      white-space: pre-wrap;
      /* Force long unbroken strings (rage-typed gibberish, long URLs, etc.)
         to wrap instead of pushing the section wider than the drawer and
         triggering horizontal scroll. anywhere is the modern preference;
         word-break: break-word is the older fallback for completeness. */
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .place-drawer-muted {
      font-size: 13px;
      color: #767676;
      margin: 0;
    }

    /* Rich rating block (drawer Reviews section). No card framing — that was
       reading as an ad block and competing with the actual CTAs in the footer.
       Two compact lines: bold number + descriptor on top, smaller review count
       and source attribution beneath, all in neutral ink + grey. */
    .rating-block {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 2px;
    }
    .rating-block-headline {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }
    .rating-block-num {
      font-size: 24px;
      font-weight: 800;
      line-height: 1;
      color: #111;
      letter-spacing: -0.02em;
    }
    .rating-block-descriptor {
      font-size: 15px;
      font-weight: 600;
      color: #111;
      letter-spacing: -0.01em;
    }
    .rating-block-sub {
      font-size: 12px;
      color: #737373;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .rating-block-sub i {
      font-size: 12px;
      color: #666;
    }
    /* Small secondary action below the rating sub-line. Reads as a link rather
       than a button — it's a navigational hint, not a primary CTA. */
    .rating-block-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #e60000;
      text-decoration: none;
      margin-top: 6px;
      width: fit-content;
    }
    .rating-block-link i {
      font-size: 10px;
    }
    .rating-block-link:hover {
      color: #b1222a;
      text-decoration: underline;
    }
    .rating-block-dot {
      color: #ccc;
    }
    /* Footer action bar pinned at the bottom of the drawer */
    .place-drawer-footer {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 16px 24px;
      border-top: 1px solid #f0f0f0;
    }
    /* If there's an odd number of buttons, the last one spans the full width
       so nothing dangles as a lone half-width button. */
    .place-drawer-btn:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

    /* STOP DRAWER ON A PHONE IN LANDSCAPE.
       The drawer is capped at 92svh, which is only ~345px on an SE lying
       down, and the header (123px) plus the two-column action grid (176px)
       were taking 299 of that — leaving the body a 47px slit to scroll ~420px
       of hero, description and details through. That is the "hard to see".
       A landscape phone is short on height and long on width, so: the actions
       go on ONE row instead of stacking in two columns, the header and body
       hand back their generous padding, and the fixed 180px hero comes down
       so the description is on screen with it rather than below it.
       Editor only — none of these classes exist in the view doc.
       (The odd-button `grid-column` rule above goes inert under flex, which
       is fine: every button is sized by flex here.) */
    @media (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      #stopDrawer .drawer-header { padding: 12px 20px 10px; }
      #stopDrawer .drawer-title { font-size: 18px; }
      #stopDrawer .drawer-body { padding: 12px 20px; }
      /* NOTHING IS LEFT OVER. Two rules make that true together and both are
         needed — fixing only one just moves the empty space somewhere else.
         (1) The drawer fills the screen, so no dimmed page shows above or
         below it. (2) The photo fills whatever height the copy does not use,
         so no blank band appears inside it either.
         The photo is taken OUT of the grid flow and absolutely positioned
         against the body, which is the only way it can stretch: as a grid
         item its height is decided by the row track, and a row track is
         sized by its content, so it could never reach past the text. Out of
         flow it stretches top to bottom whatever the copy does. It is a
         background-image with `cover`, so a tall column crops rather than
         distorts. The copy keeps clear of it with a left padding that matches
         the column plus the gutter. A stop with no hero drops the padding so
         there is no empty gutter. */
      /* mshStyle caps every drawer at 92svh, which on a landscape phone is
         where the leftover strip came from: the drawer is pinned top:0 and
         bottom:0, so the cap does nothing except clip it short and leave a
         band of dimmed page against it. Lifting the cap entirely is what
         makes it fill — `none` rather than a viewport unit so there is no
         svh/dvh rounding left to argue with, and the id beats mshStyle's
         `.drawer` on specificity regardless of load order. */
      #stopDrawer { max-height: none; }
      #stopDrawer .place-drawer-hero {
        float: left;
        width: 220px;
        /* Tall enough to carry the column on a short stop, but tied to the
           screen so it cannot outgrow the body: an SE lying down only has
           ~193px of body, and a fixed 205 would push the whole thing into a
           scroll it does not need. The floor keeps it a photo rather than a
           strip on the very shortest screens. */
        height: clamp(120px, calc(100dvh - 215px), 230px);
        margin: 0 16px 10px 0;
      }
      /* The body has to establish a block formatting context or the float
         escapes past the footer border. */
      #stopDrawer .drawer-body { display: flow-root; }

      #stopDrawer .place-drawer-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 20px;
      }
      #stopDrawer .place-drawer-btn {
        flex: 1 1 auto;
        min-width: 0;
        padding: 9px 12px;
        font-size: 12.5px;
      }

      /* Under ~620 wide a five-button set cannot make one row while it still
         carries icons, and wrapping to two rows costs 43px out of a 294px
         drawer. The labels carry the meaning on their own, so the icons step
         aside. Selector takes the id so it beats Font Awesome's own display
         rule outright rather than on stylesheet order. */
      @media (max-width: 620px) {
        #stopDrawer .place-drawer-btn i { display: none; }
        #stopDrawer .place-drawer-btn { gap: 0; padding: 9px 8px; }
      }
    }
    .place-drawer-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      border: 1px solid #ddd;
      background: #fff;
      color: #333;
      border-radius: 10px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
      white-space: nowrap;
    }
    .place-drawer-btn:hover {
      border-color: #111;
      color: #111;
    }
    .place-drawer-btn.danger:hover {
      border-color: #c60000;
      color: #c60000;
      background: #fff8f8;
    }
    .place-drawer-btn i {
      font-size: 12px;
      flex-shrink: 0;
    }
    .place-drawer-btn[disabled] {
      opacity: 0.45;
      cursor: default;
    }
    .place-drawer-btn[disabled]:hover {
      border-color: #ddd;
      color: #333;
    }

    /* Stop drawer: time label beside the type pill, and price block */
    .stop-drawer-time {
      display: inline-block;
      margin-left: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #767676;
    }
    .stop-drawer-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .stop-drawer-price-main { font-size: 20px; font-weight: 900; color: #111; }
    .stop-drawer-price-sub { font-size: 13px; font-weight: 700; color: #767676; }
    .stop-drawer-price-note { font-size: 12px; font-weight: 700; color: #767676; }

    /* Flight drawer: big route block + detail facts */
    .stop-drawer-route {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: #f4f9ff;
      border: 1px solid #e3eefb;
      border-radius: 16px;
      padding: 22px 24px;
      margin-bottom: 4px;
    }
    .stop-drawer-airport { text-align: center; flex: 1; }
    .stop-drawer-airport-code { font-size: 30px; font-weight: 900; color: #1a1a1a; line-height: 1; letter-spacing: 0.02em; }
    .stop-drawer-airport-city { font-size: 13px; color: #767676; margin-top: 6px; }
    .stop-drawer-route-arrow { color: #0284c7; font-size: 18px; flex-shrink: 0; }
    .stop-drawer-flight-facts { display: flex; flex-direction: column; gap: 8px; }
    .stop-drawer-flight-fact {
      display: flex; justify-content: space-between; align-items: baseline;
      font-size: 14px;
    }
    .stop-drawer-flight-fact span { color: #767676; }
    .stop-drawer-flight-fact strong { color: #1a1a1a; font-weight: 800; }

    /* ---- Day overview drawer ---- */
    .day-ov-date { font-size: 13px; font-weight: 700; color: #767676; }
    .day-ov-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 22px;
    }
    .day-ov-stat {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .day-ov-stat-icon { color: #bbb; font-size: 15px; margin-bottom: 4px; }
    .day-ov-stat-num { font-size: 18px; font-weight: 900; color: #111; line-height: 1.1; }
    .day-ov-stat-label { font-size: 11px; font-weight: 700; color: #767676; }

    .day-ov-freerow {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px;
      align-items: start;
      padding: 16px 0;
      border-top: 1px solid #f2f2f2;
      border-bottom: 1px solid #f2f2f2;
      margin-bottom: 20px;
    }
    .day-ov-free-label {
      font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
      text-transform: uppercase; color: #767676; margin-bottom: 4px;
    }
    .day-ov-free-value { font-size: 20px; font-weight: 900; color: #111; line-height: 1.1; }
    .day-ov-free-sub { font-size: 12px; color: #767676; margin: 3px 0 8px; }
    .day-ov-bar {
      height: 6px; background: #f0f0f0; border-radius: 999px; overflow: hidden; max-width: 240px;
    }
    .day-ov-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #2e7d32, #8bc34a);
      border-radius: 999px;
    }
    .day-ov-range-value { font-size: 16px; font-weight: 900; color: #111; white-space: nowrap; }

    .day-ov-section { margin-bottom: 20px; }
    .day-ov-section-title {
      font-size: 13px; font-weight: 900; color: #111; margin-bottom: 10px;
    }
    .day-ov-tip {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 13px; line-height: 1.5; color: #737373;
      background: #faf7ff; border: 1px solid #efe7fb; border-radius: 12px; padding: 12px 14px;
    }
    .day-ov-tip i { color: #8b5cf6; margin-top: 2px; }
    .day-ov-actions { display: flex; flex-direction: column; gap: 8px; }
    .day-ov-action {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #e2e2e2;
      background: #fff;
      color: #333;
      border-radius: 12px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .day-ov-action:hover { border-color: #e60000; color: #e60000; }
    .day-ov-action.primary {
      background: #e60000; border-color: #e60000; color: #fff;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }
    .day-ov-action.primary:hover { background: #c60000; border-color: #c60000; color: #fff; }
    .day-ov-foot-tip {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: 12px; color: #767676; line-height: 1.5; margin-top: 4px;
    }
    .day-ov-foot-tip i { color: #e6a700; margin-top: 1px; }

    /* Stop drawer hero: clickable, with a "1 / N" counter badge */
    .stop-hero {
      position: relative;
      cursor: zoom-in;
      overflow: hidden;
    }
    /* Single-photo variant: a magnifier icon instead of a count */
    .photo-count-badge-single {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 8px;
    }
    .photo-count-badge-single i { font-size: 11px; }

    /* Swap-drawer rows now mirror the compact shortlist (.wishlist-row) look:
       small thumb, flat dividers between rows, tight padding — while keeping
       the price + price-difference comparison on the right. */
    .alt-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: #fff;
      border: none;
      border-bottom: 1px solid #f1f1f1;
      border-radius: 0;
      margin-bottom: 0;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .alt-card:last-child { border-bottom: none; }

    .alt-card:hover {
      background: #fafafa;
    }

    .alt-card.is-current {
      background: #fff8f8;
      cursor: default;
    }

    .alt-photo {
      flex-shrink: 0;
      width: 52px;
      height: 52px;
      border-radius: 10px;
      background-size: cover;
      background-position: center;
      background-color: #f0f0f0;
    }
    /* When a swap option has no photo, show a type icon (matches the shortlist
       row's thumbnail placeholder). */
    .alt-photo-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c8c8c8;
      font-size: 18px;
    }

    .alt-body {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    /* Left column inside the row: tier label + name (stacked) */
    .alt-body-main {
      min-width: 0;
      flex: 1;
    }

    .alt-name {
      font-size: 15px;
      font-weight: 800;
      margin: 0;
      color: #111;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .alt-tier {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #767676;
      margin-bottom: 3px;
    }

    /* Right column inside the row: price stacked over the delta, right-aligned */
    .alt-price-row {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      text-align: right;
    }

    .alt-price {
      font-size: 14px;
      font-weight: 900;
      color: #111;
    }

    .alt-delta { font-size: 12px; font-weight: 800; }
    .alt-delta.up { color: #b71c1c; }
    .alt-delta.down { color: #2e7d32; }
    .alt-delta.same { color: #767676; }

    .alt-current-badge {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #e60000;
      background: #fff1f1;
      padding: 4px 8px;
      border-radius: 999px;
    }

    /* ---------- TOAST NOTIFICATIONS ---------- */
    .toast-stack {
      position: fixed;
      top: 90px;
      right: 24px;
      z-index: 300;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
      max-width: calc(100vw - 48px);
    }

    .toast {
      pointer-events: auto;
      background: #ffffff;
      border: 1px solid #ececec;
      border-left: 4px solid #b71c1c;
      border-radius: 12px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.12);
      padding: 12px 16px 12px 14px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-width: 260px;
      max-width: 360px;
      animation: toast-in 0.22s ease-out;
    }

    .toast.toast-resolved {
      border-left-color: #2e7d32;
    }

    .toast.toast-leaving {
      animation: toast-out 0.18s ease-in forwards;
    }

    @keyframes toast-in {
      from { transform: translateX(20px); opacity: 0; }
      to   { transform: translateX(0);    opacity: 1; }
    }

    @keyframes toast-out {
      from { transform: translateX(0);    opacity: 1; }
      to   { transform: translateX(20px); opacity: 0; }
    }

    .toast-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 11px;
      background: #fde4e4;
      color: #b71c1c;
    }

    .toast.toast-resolved .toast-icon {
      background: #e3f3e6;
      color: #2e7d32;
    }

    .toast-body {
      flex: 1;
      min-width: 0;
    }

    .toast-title {
      font-size: 13px;
      font-weight: 900;
      color: #111;
      margin-bottom: 1px;
    }

    .toast-desc {
      font-size: 12px;
      color: #666;
      line-height: 1.4;
    }

    .toast-close {
      border: none;
      background: transparent;
      color: #767676;
      font-size: 12px;
      cursor: pointer;
      padding: 2px;
      align-self: flex-start;
      line-height: 1;
    }

    .toast-close:hover {
      color: #555;
    }

    @media (max-width: 700px) {
      .toast-stack {
        right: 16px;
        left: 16px;
        top: 80px;
        max-width: none;
      }
      .toast {
        min-width: 0;
        max-width: none;
        width: 100%;
      }
    }
    /* =====================================================
       MOBILE BREAKPOINT
       Single-column layouts, larger touch targets, viewport-safe popovers.
       Sidebar already stacks below at 1000px via earlier rule.
    ===================================================== */
    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {

      /* --- Control bar --- */
      .control-bar {
        padding: 12px 14px;
        gap: 10px;
      }
      .control-bar-logo {
        font-size: 15px;
        margin-right: 0;
        width: 100%;
      }
      .control-group {
        gap: 6px;
      }
      .control-group label {
        font-size: 10px;
      }
      .providers-btn {
        padding: 8px 12px;
        font-size: 12px;
      }
      .undo-btn {
        height: 38px;
      }

      /* --- Page shell --- */
      .page-shell {
        padding: 18px 12px 60px;
        gap: 18px;
      }

      /* --- Trip header (mobile) --- */
      .trip-hero {
        height: 200px;
        border-radius: 16px;
        margin-bottom: 18px;
      }
      .trip-hero-overlay {
        left: 18px;
        right: 18px;
        bottom: 18px;
        gap: 10px;
      }
      .trip-hero-title,
      .trip-hero-title-input {
        font-size: 26px;
      }
      .trip-hero-meta-pill {
        padding: 6px 10px;
        font-size: 12px;
      }

      /* --- Day nav dropdown (mobile) --- */
      .day-nav-dropdown-btn {
        padding: 7px 12px;
        font-size: 12px;
        max-width: 240px;
      }
      .day-nav-dropdown-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
      }

      /* --- Day header (mobile) --- */
      .day-header {
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 24px 20px 20px;
        position: relative;
      }
      .day-marker {
        grid-column: 1 / 3;
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 12px;
        min-width: 0;
      }
      .day-header-body {
        grid-column: 1;
      }
      .day-collapse-chevron {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        width: 32px;
        height: 32px;
      }
      .day-marker-num {
        font-size: 48px;
      }
      .day-marker-of {
        margin-top: 0;
      }
      .day-marker-date {
        font-size: 26px;
      }
      .day-marker-tbd {
        font-size: 22px;
      }
      .day-marker-weekday {
        font-size: 10px;
      }
      .day-title {
        font-size: 22px;
      }
      .day-eyebrow {
        font-size: 11px;
      }
      .day-city {
        font-size: 13px;
      }
      .day-summary {
        font-size: 13px;
      }
      .day-time-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }

      /* --- Item card layout: collapse from 3 columns to 1 --- */
      .item {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 20px;
      }

      /* Hide the desktop divider line on mobile */
      .item::before {
        display: none;
      }

      /* On mobile, slots become single-column and reset their negative top
         margins since the grid gap handles spacing here. */
      .item-note-slot,
      .item-facts-slot {
        grid-column: 1;
        margin-top: 0;
        padding-left: 0;
      }

      /* Photo stack goes full-width on mobile */
      .item-photo-stack {
        width: 100%;
      }
      .item-photo {
        width: 100%;
        height: 200px;
      }

      /* Hide carousel nav arrows on mobile — thumbs and tap-to-lightbox suffice */
      .photo-nav {
        opacity: 1;
        width: 32px;
        height: 32px;
        font-size: 11px;
      }
      .photo-nav-prev { left: 8px; }
      .photo-nav-next { right: 8px; }

      /* Action column moves to bottom, becomes horizontal row */
      .item-actions {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #f0f0f0;
        padding-top: 16px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
      }
      .item-actions-price {
        flex: 0 0 auto;
      }
      .item-actions-price .item-price {
        font-size: 20px;
      }
      .item-actions-buttons {
        flex-direction: row;
        flex: 1 1 auto;
        gap: 8px;
        justify-content: flex-end;
      }
      .item-actions-buttons .icon-btn,
      .item-actions-buttons .swap-btn {
        width: auto;
        flex: 0 0 auto;
        min-height: 40px;
      }

      /* Downtime card stays 2 columns but cleaner spacing */
      .item.item-downtime {
        padding: 20px 20px;
        gap: 14px;
      }
      .item-downtime .downtime-icon {
        width: 56px;
        height: 56px;
        font-size: 20px;
      }
      .item.item-downtime {
        grid-template-columns: 76px 1fr;
      }

      /* Item body content */
      .item-name {
        font-size: 17px;
      }
      .item-description {
        font-size: 13px;
      }

      /* Touch-friendly time picker triggers */
      .time-trigger {
        padding: 8px 8px;
        font-size: 14px;
      }

      /* --- Sidebar (already stacks via 1000px rule, but tune for mobile) --- */
      .summary-sidebar,
      .summary-card {
        position: static;
      }
      .summary-card {
        padding: 22px 20px;
      }
      .summary-total {
        font-size: 28px;
      }

      /* --- Popovers (Providers, Travellers, Trip date, Downtime kind) --- */
      .providers-panel,
      .downtime-kind-menu {
        max-width: calc(100vw - 24px);
      }

      /* --- Time picker popover --- */
      .time-picker-popover {
        max-width: calc(100vw - 24px);
      }

      /* --- Drawer (swap) takes most of the screen on mobile --- */
      .drawer {
        width: 100%;
        max-width: 100%;
      }

      /* --- Toasts already responsive — confirm they stack from top --- */
      .toast-stack {
        top: 70px;
      }

      /* --- Lightbox already responsive, but tighten paddings on small screens --- */
      .lightbox {
        padding: 14px;
      }
      .lightbox-close {
        top: 12px;
        right: 12px;
      }
      .lightbox-info {
        font-size: 12px;
      }
    }

    /* =====================================================
       BOOKING CHECKLIST
    ===================================================== */
    .checklist-card {
      background: #ffffff;
      border: 1px solid #ececec;
      border-radius: 22px;
      overflow: hidden;
    }

    .checklist-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      padding: 32px 40px 24px;
      border-bottom: 1px solid #f0f0f0;
    }

    .checklist-header-text {
      flex: 1;
      min-width: 0;
    }

    .checklist-eyebrow {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #e60000;
      margin-bottom: 8px;
    }

    .checklist-title {
      font-size: 24px;
      font-weight: 900;
      color: #111;
      margin: 0 0 8px;
    }

    .checklist-subtitle {
      font-size: 13px;
      line-height: 1.5;
      color: #666;
      margin: 0;
      max-width: 540px;
    }

    .checklist-progress {
      flex: 0 0 160px;
      text-align: right;
    }

    .checklist-progress-count {
      font-size: 22px;
      font-weight: 900;
      color: #111;
      line-height: 1;
    }

    .checklist-progress-bar {
      margin: 8px 0 6px;
      height: 6px;
      background: #f0f0f0;
      border-radius: 999px;
      overflow: hidden;
    }

    .checklist-progress-fill {
      height: 100%;
      background: #2e7d32;
      border-radius: 999px;
      width: 0%;
      transition: width 0.3s ease;
    }

    .checklist-progress-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #767676;
    }

    .checklist-body {
      padding: 16px 40px 32px;
    }

    .checklist-section {
      margin-top: 24px;
    }

    .checklist-section:first-child {
      margin-top: 8px;
    }

    .checklist-section-header {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #ececec;
    }

    .checklist-section-title {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #555;
    }

    .checklist-section-count {
      font-size: 11px;
      font-weight: 800;
      color: #767676;
    }

    .checklist-item {
      display: grid;
      grid-template-columns: 22px 64px 1fr auto;
      gap: 14px;
      padding: 14px 0;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
    }

    .checklist-item:last-child {
      border-bottom: none;
    }

    .checklist-item.is-booked {
      opacity: 0.55;
    }

    .checklist-item.is-booked .checklist-item-name {
      text-decoration: line-through;
    }

    .checklist-checkbox {
      width: 22px;
      height: 22px;
      border: 2px solid #c8c8c8;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .checklist-checkbox:hover {
      border-color: #2e7d32;
    }

    .checklist-checkbox.checked {
      background: #2e7d32;
      border-color: #2e7d32;
      color: #fff;
    }

    .checklist-checkbox.checked::after {
      content: '✓';
      font-weight: 900;
      font-size: 13px;
    }

    .checklist-item-photo {
      width: 64px;
      height: 48px;
      border-radius: 8px;
      background-size: cover;
      background-position: center;
      background-color: #eee;
    }

    .checklist-item-info {
      min-width: 0;
    }

    .checklist-item-name {
      font-size: 14px;
      font-weight: 800;
      color: #111;
      margin-bottom: 3px;
    }

    .checklist-item-meta {
      font-size: 11px;
      font-weight: 700;
      color: #767676;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .checklist-item-meta-sep {
      color: #ccc;
    }

    /* Smart tip body is a paragraph, not an inline meta row */
    .checklist-item-meta.smart-tip-body {
      display: block;
      line-height: 1.5;
      font-weight: 500;
      font-size: 12px;
      color: #555;
      margin-top: 2px;
    }

    /* Smart-tip price block: shows total + per-person/day breakdown */
    .smart-tip-price {
      text-align: right;
      margin-bottom: 4px;
    }
    .smart-tip-price-total {
      font-size: 15px;
      font-weight: 900;
      color: #111;
      line-height: 1.2;
    }
    .smart-tip-price-label {
      font-size: 10px;
      font-weight: 700;
      color: #767676;
      margin-top: 1px;
    }

    /* Section-level "budget around ¥X" hint */
    .smart-tips-budget {
      font-size: 12px;
      font-weight: 800;
      color: #e60000;
      margin: 8px 0 0;
      padding: 6px 10px;
      background: #fff1f1;
      border-radius: 8px;
      display: inline-block;
    }

    .checklist-item-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }

    .checklist-item-price {
      font-size: 14px;
      font-weight: 900;
      color: #111;
    }

    .checklist-book-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #e60000;
      background: #e60000;
      color: #fff;
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      padding: 7px 14px;
      border-radius: 999px;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.15s ease;
    }

    .checklist-book-btn:hover {
      background: #c60000;
      border-color: #c60000;
    }

    .checklist-book-btn.manual {
      background: #fff;
      color: #555;
      border-color: #ccc;
    }

    .checklist-book-btn.manual:hover {
      background: #f7f7f7;
      border-color: #999;
      color: #111;
    }

    .checklist-empty {
      padding: 32px;
      text-align: center;
      color: #767676;
      font-size: 13px;
    }

    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      .checklist-header {
        flex-direction: column;
        gap: 16px;
        padding: 24px 20px 20px;
      }
      .checklist-progress {
        flex: 1;
        width: 100%;
        text-align: left;
      }
      .checklist-progress-bar {
        max-width: 220px;
      }
      .checklist-body {
        padding: 12px 20px 24px;
      }
      .checklist-title {
        font-size: 20px;
      }
      .checklist-item {
        grid-template-columns: 22px 1fr;
        gap: 12px;
      }
      .checklist-item-photo {
        grid-column: 2;
        grid-row: 2;
        margin-top: 4px;
      }
      .checklist-item-info {
        grid-column: 2;
        grid-row: 1;
      }
      .checklist-item-actions {
        grid-column: 2;
        grid-row: 3;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 4px;
      }
    }

    @media print {
      /* Ensure printer color rendering is honoured (default is often "economy") */
      * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }

      body {
        background: #ffffff !important;
        font-size: 11pt;
      }

      /* Always print all days fully expanded, regardless of collapsed state */
      .day-card.is-collapsed .item-list,
      .day-card.is-collapsed .day-summary,
      .day-card.is-collapsed .day-time-summary {
        display: block !important;
      }
      .day-collapse-chevron {
        display: none !important;
      }
      .day-header {
        background: transparent !important;
        cursor: default !important;
      }
      /* Hide the hero image on print — saves a page and ink */
      .trip-hero {
        display: none !important;
      }
      /* Hide recommendations + add-to-day in print — they're action surfaces, not content */
      .day-recommendations,
      .add-to-day-btn,
      .wishlist-section {
        display: none !important;
      }

      /* Show the print-only facts block; hide the screen-only popover and toggle */
      .item-facts-print-only {
        display: block !important;
        grid-column: 2 / 4 !important;
        margin-top: 6pt !important;
      }
      .item-facts-print-only .item-facts-list {
        margin-top: 0 !important;
      }
      .item-facts-toggle {
        display: none !important;
      }
      /* Inline (screen-mode) facts list — hide in print since print-only block shows them */
      .item-facts > .item-facts-list {
        display: none !important;
      }

      /* Hide all interactive UI chrome */
      .brand-strip,
      .control-bar,
      .photo-nav,
      .photo-thumbs,
      .photo-count-badge,
      .item-actions-buttons,
      .item-description-toggle,
      .item-facts-toggle,
      .item-note-add,
      .item-note-actions,
      .downtime-kind-trigger,
      .toast-stack,
      .lightbox,
      .drawer,
      .drawer-backdrop,
      .providers-panel,
      .time-picker-popover,
      .downtime-kind-menu,
      .transit-hint .icon-btn,
      .transit-hint a {
        display: none !important;
      }

      /* Time triggers: show the time but flatten the button look */
      .time-trigger {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        color: #000 !important;
        font-weight: 800;
        cursor: default;
      }
      .time-input-group {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
      }

      /* Downtime kind trigger collapses to a plain label */
      .downtime-kind-trigger {
        display: inline-flex !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        color: #555 !important;
      }
      .downtime-kind-trigger i {
        display: none !important;
      }

      /* Page shell: single column, generous margins, no sticky */
      .page-shell {
        display: block !important;
        max-width: none !important;
        padding: 0 !important;
      }

      /* Day card: remove decoration, let content flow */
      .day-card {
        border: none !important;
        border-radius: 0 !important;
      }

      /* Day header */
      .day-header {
        padding: 0 0 16pt !important;
        border-bottom: 1pt solid #ddd;
        margin-bottom: 16pt;
      }
      .day-eyebrow { color: #767676 !important; font-size: 9pt; }
      .day-title { font-size: 22pt; margin: 4pt 0; }
      .day-city { font-size: 11pt; color: #666 !important; }
      .day-date { color: #000 !important; font-size: 10pt; }
      .day-summary { font-size: 10pt; margin-top: 8pt; }
      .day-time-summary {
        font-size: 9pt;
        color: #666 !important;
        margin-top: 6pt;
      }

      /* Items: linear flow, page-break-friendly */
      .item-list {
        display: block !important;
      }
      .item {
        display: block !important;
        page-break-inside: avoid;
        padding: 12pt 0 !important;
        border-bottom: 0.5pt solid #ddd !important;
        gap: 0 !important;
      }
      .item.has-conflict {
        background: transparent !important;
      }
      .item:last-child {
        border-bottom: none !important;
      }

      /* Item photo: smaller, floated left so text wraps beside it */
      .item-photo-stack {
        width: auto !important;
      }
      .item-photo {
        width: 2.2in !important;
        height: 1.4in !important;
        float: left;
        margin: 0 14pt 8pt 0;
        border-radius: 6pt !important;
      }
      .item-photo-stack::after {
        content: '';
        display: block;
        clear: both;
      }

      /* Time row */
      .item-time-row {
        margin-bottom: 4pt !important;
        gap: 8pt !important;
      }
      .time-arrow { color: #767676 !important; }
      .time-duration { color: #666 !important; font-size: 9pt !important; }
      .conflict-warning { display: none !important; }

      /* Item meta */
      .item-meta-row {
        margin-bottom: 4pt !important;
      }
      .item-type-pill {
        background: transparent !important;
        color: #767676 !important;
        padding: 0 !important;
        font-size: 8pt !important;
      }
      .item-slot-badge {
        background: rgba(0,0,0,0.7) !important;
        font-size: 7pt !important;
        padding: 3pt 6pt !important;
      }

      /* Item title & description */
      .item-name {
        font-size: 13pt !important;
        margin-bottom: 4pt !important;
      }
      .item-description {
        font-size: 10pt !important;
        line-height: 1.5 !important;
        color: #333 !important;
        /* Always show full description in print */
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
        margin-bottom: 6pt !important;
      }
      .item-description-wrap { margin-bottom: 6pt !important; }

      /* Action column: collapse to a single small price line */
      .item-actions {
        display: block !important;
        border-left: none !important;
        padding-left: 0 !important;
        margin-top: 6pt;
        clear: both;
      }
      .item-actions-price {
        display: block !important;
        align-items: flex-start !important;
        text-align: left !important;
      }
      .item-actions-price .item-price {
        font-size: 13pt !important;
        display: inline !important;
      }
      .item-actions-price .item-price-secondary {
        font-size: 9pt !important;
        color: #666 !important;
        margin-left: 6pt;
      }
      .item-actions-price .item-price-note {
        font-size: 9pt !important;
        color: #767676 !important;
        margin-left: 6pt;
      }

      /* Facts: always show, no toggle */
      .item-facts {
        margin-top: 8pt !important;
      }
      .item-facts-list {
        margin-top: 4pt !important;
      }
      .fact-row {
        font-size: 9pt !important;
        color: #444 !important;
        page-break-inside: avoid;
      }
      .fact-row-warning {
        background: #fff8e6 !important;
        border-left: 2pt solid #c98b1a !important;
        padding: 4pt 6pt !important;
      }

      /* User notes */
      .item-note {
        margin-top: 6pt !important;
        background: #f8f8f8 !important;
        border-left: 2pt solid #ccc !important;
        padding: 6pt 8pt !important;
        page-break-inside: avoid;
      }
      .item-note-text {
        font-size: 9pt !important;
      }

      /* Downtime card */
      .item.item-downtime {
        background: transparent !important;
        padding: 10pt 0 !important;
      }
      .item-downtime .downtime-icon {
        width: 0.5in !important;
        height: 0.5in !important;
        font-size: 14pt !important;
        float: left;
        margin: 0 10pt 4pt 0;
      }
      .item-name-downtime {
        font-size: 12pt !important;
      }

      /* Transit hints: keep text only */
      .transit-hint {
        font-size: 8pt !important;
        color: #767676 !important;
        padding: 4pt 0 !important;
        background: transparent !important;
        border: none !important;
        text-align: center;
      }

      /* Sidebar: print as a compact summary at the very end */
      .summary-sidebar {
        position: static !important;
        margin-top: 24pt !important;
        page-break-inside: avoid;
      }
      .summary-card {
        border: none !important;
        background: #f8f8f8 !important;
        padding: 12pt !important;
        border-radius: 6pt !important;
      }
      .summary-eyebrow {
        font-size: 8pt !important;
      }
      .summary-total {
        font-size: 18pt !important;
      }
      .summary-total-secondary {
        font-size: 10pt !important;
      }
      .summary-note {
        font-size: 8pt !important;
        color: #666 !important;
      }
      /* Show the breakdown but flatten the collapsible UI */
      .breakdown-cat-header.is-expandable {
        cursor: default !important;
      }
      .breakdown-chevron {
        display: none !important;
      }

      /* Encourage page breaks at items */
      .item, .summary-card {
        break-inside: avoid;
      }

      /* Hide print button itself if somehow visible */
      .print-btn {
        display: none !important;
      }
    }

    /* ---- PDF export (print-to-PDF): hide app chrome, show clean itinerary ---- */
    @media print {
      /* Hide everything that isn't the itinerary content */
      .brand-strip, .control-bar, .day-nav-sidebar, .summary-sidebar,
      .day-recommendations, .stay-card-actions, .stop-kebab, .stop-leg-directions,
      .day-actions, .day-edit-btn, .add-item-btn, .drawer, .drawer-backdrop,
      .modal, .modal-backdrop, .toast-stack, .day-rec-arrow, .fab,
      .item-add-btn, #brandPdfBtn {
        display: none !important;
      }
      /* Collapse the multi-column page shell to a single column */
      .page-shell { display: block !important; padding: 0 !important; margin: 0 !important; }
      .main-column { width: 100% !important; max-width: none !important; padding: 0 !important; }
      .days-container { gap: 16px !important; }
      .day-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      .stop-row, .stay-banner { break-inside: avoid; page-break-inside: avoid; cursor: default !important; }
      .stop-row:hover, .stay-banner:hover { background: transparent !important; }
      /* Keep colours legible in print */
      body { background: #fff !important; }
      a[href]::after { content: ''; }  /* don't append URLs */
      @page { margin: 14mm; }
    }

/* ============================================================
   VIEW MODE — read-only "final product" document (vdoc)
   Three switchable styles, all rendered from buildExportPayload():
     brochure  — editorial doc ported from export-itinerary.html
     compact   — dense one-line-per-item schedule (print-friendly)
     glance    — day-card grid overview
   The vdoc DOM + style switcher are injected by the view-mode
   module at the end of the JS. Mode is driven by a body class:
     body.mpj-mode-view  → doc visible, builder hidden
     body.mpj-mode-edit  → builder visible, doc hidden
   ============================================================ */

/* ---- mode visibility ---- */
.vdoc { display: none; }
body.mpj-mode-view .vdoc { display: block; }
body.mpj-mode-view .page-shell,
body.mpj-mode-view .control-bar { display: none !important; }

/* Pre-boot: this stylesheet loads in <head>, but the mode class is only set
   by the view-mode module at the end of the body JS -- so with no rule here,
   the browser paints the EDITOR first and view mode swaps in a beat later
   (the flash Andre saw opening samples from home/itineraries). Until a mode
   class exists, keep the builder invisible but laid out: samples then paint
   quietly and fade straight into the doc. Pages that boot into edit mode
   (blank itinerary) set their class in a tiny inline script at the top of
   <body>, so they never sit in this state long enough to notice. */
body:not(.mpj-mode-view):not(.mpj-mode-edit) .page-shell,
body:not(.mpj-mode-view):not(.mpj-mode-edit) .control-bar { visibility: hidden; }

/* ---- mode toggle button (injected into .brand-strip-right) ---- */
#modeToggleBtn.brand-btn-edit {
  background: #e60000;
  border-color: #e60000;
  color: #fff;
}
#modeToggleBtn.brand-btn-edit:hover {
  background: #b1222a;
  border-color: #b1222a;
  color: #fff;
}

/* ---- shared doc shell ---- */
.vdoc {
  --vd-paper: #faf8f6;
  --vd-card: #ffffff;
  --vd-ink: #14110f;
  --vd-ink-soft: #4a443f;
  --vd-muted: #8a817a;
  --vd-red: #e60000;
  --vd-red-deep: #b1222a;
  --vd-line: #e8e1db;
  --vd-line-strong: #d8cfc6;
  --vd-serif: 'Cormorant Garamond', Georgia, serif;
  --vd-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-family: var(--vd-sans);
  color: var(--vd-ink);
  background: var(--vd-paper);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.vdoc .doc { max-width: 920px; margin: 0 auto; padding: 26px 28px 80px; }
.vdoc .eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vd-red); }

/* ---- style switcher (outside .doc so it never lands in the PDF) ---- */
.vd-switch {
  display: flex; justify-content: center; gap: 0;
  max-width: 920px; margin: 0 auto; padding: 18px 28px 0;
}
.vd-switch-inner {
  display: inline-flex; background: var(--vd-card);
  border: 1px solid var(--vd-line-strong); border-radius: 999px; padding: 3px;
}
.vd-switch button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--vd-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--vd-muted);
  padding: 7px 18px; border-radius: 999px; transition: background 0.15s, color 0.15s;
}
.vd-switch button:hover { color: var(--vd-ink); }
.vd-switch button.is-active { background: var(--vd-ink); color: #fff; }

/* ---- empty state (blank itinerary previewed before anything is planned) ---- */
.vdoc .vd-empty { text-align: center; padding: 40px 20px 10px; color: var(--vd-muted); font-size: 14px; }

/* ---- footer (shared by all styles) ---- */
.vdoc .foot { margin-top: 56px; padding-top: 22px; border-top: 2px solid var(--vd-red); display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline; }
.vdoc .foot .foot-brand { font-size: 15px; font-weight: 900; color: var(--vd-red); letter-spacing: 0.01em; }
.vdoc .foot .foot-tag { font-family: var(--vd-serif); font-style: italic; font-size: 16px; color: var(--vd-ink-soft); }
.vdoc .foot .foot-meta { font-size: 11px; color: var(--vd-muted); letter-spacing: 0.04em; width: 100%; margin-top: 4px; }

/* ============================================================
   THE THREE DOCUMENT DESIGNS — Journal / Rail / Hinomaru
   Rendered as discrete page sheets; what you scroll is what
   prints (the PDF is the same sheets via window.print()).
   ============================================================ */
.vdoc .doc { max-width: none; padding: 0; margin: 0; }
/* The preview's own day buttons are plain anchors to #vd-dN, so the browser
   jumps the target to y=0 — straight under the sticky header, which measured
   60px of the day heading hidden. Give every jump target the measured header
   height as its scroll margin (--header-h is maintained at all widths). */
.vdoc [id^="vd-d"],
.vdoc .dayb,
.vdoc section.day { scroll-margin-top: calc(var(--header-h, 56px) + 14px); }
.vdoc .sheet, .vdoc .sheet * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#vdDayflow { display: none; }

/* switcher — hardened against page-level button styles */
/* THE TWO SWITCHES. Desktop and tablet get a heading over each group, sitting
   side by side; a phone drops the headings and keeps one compact row, because
   the labels cost a whole line there and the pills already say enough. The
   wording is plain (Magazine / Timeline / Minimal, A4 page / Phone page) while
   data-style and data-page keep the original keys. */
.vdoc .vd-switch { display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: none; margin: 0 auto; padding: 18px 16px 0; }
.vdoc .vd-pagesize { padding-top: 0; }
.vdoc .vd-eyebrow { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: #6b645a; line-height: 10px; }   /* a WHOLE px: 9.5px at line-height 1
  put the row on a half pixel, and every sheet below it inherited that .5 */
/* both groups on one line from tablet up */
@media (min-width: 761px) {
  .vdoc .vd-switch { display: inline-flex; margin: 0; padding: 0; }
  .vdoc .vd-pagesize { padding: 0; }
  .vdoc .vd-switchrow { display: flex; justify-content: center; align-items: flex-start; gap: 40px;
    flex-wrap: wrap; padding: 18px 16px 20px; }
}
/* the little page glyphs: a sheet and a handset, drawn in the current colour */
.vdoc .vd-gl { width: 11px; height: 14px; border: 1.6px solid currentColor; border-radius: 1.5px;
  display: inline-block; flex: 0 0 auto; }
.vdoc .vd-gl-ph { width: 9px; height: 15px; border-radius: 3px; }
.vdoc .vd-pagesize button { display: inline-flex; align-items: center; gap: 7px; }
.vdoc .vd-pagesize button em { font-style: normal; }
.vdoc .vd-pagesize .vd-switch-inner { padding: 3px; }
.vdoc .vd-pagesize button { font-size: 11px; padding: 7px 13px; }
.vdoc .vd-switch-inner { display: inline-flex; align-items: center; background: #fff; border: 1px solid #d8d4cc; border-radius: 999px; padding: 4px; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.vdoc .vd-switch button { appearance: none; -webkit-appearance: none; border: 0; margin: 0; background: transparent; cursor: pointer; font-family: Inter, 'Noto Sans JP', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1; color: #6b645a; padding: 9px 18px; border-radius: 999px; transition: background .15s, color .15s; box-sizing: border-box; }
.vdoc .vd-switch button:hover { color: #1c1c1c; background: transparent; }
.vdoc .vd-switch button.is-active { background: #1c1c1c; color: #fff; }

/* Below 332px the eyebrow label and the pill group together measure 331.06px
   inside a 296px row, so the switcher hung 5.5px off BOTH sides (measured
   left: -5.53) and dragged the whole document to 326px wide: the sideways drag
   on a 320px screen. The narrow layout puts the label BESIDE the pills rather
   than above, and .vd-switch could not wrap, so the overflow had nowhere to go.
   Wrapping lets the label drop onto its own line only at the widths where it
   cannot fit beside them.
   332px is measured, not guessed. At 332 and above the unwrapped row fits and
   this rule deliberately does not apply, so every width that already worked is
   untouched: .vd-switch stays 331.06px wide and 38px tall from 332px up.
   .vd-switchrow already wraps below 760px. This is the inner group, which did
   not. Nothing else sets flex-wrap on .vd-switch, so there is no rule this has
   to win against, which is why it lives here rather than in each page's inline
   mshStyle block. Keeping it out of the 760px block also matters: vdNarrowBoostCss
   rewrites that block's condition to "@media all" when Phone page is picked on a
   desktop, and this must not follow it there. */
@media screen and (max-width: 331px) {
  .vdoc .vd-switch { flex-wrap: wrap; row-gap: 5px; }
}

/* ---------------- STYLE 1 — JOURNAL (cream editorial) ---------------- */
.vdoc.vd-style-journal { background: #e9e6e1; font-family: Inter, system-ui, sans-serif; color: #1c1c1c; padding: 26px 12px 80px; }
.vd-style-journal .sheet { max-width: 794px; min-height: 1123px; margin: 0 auto 34px; background: #fbf9f6; box-shadow: 0 2px 22px rgba(0,0,0,.10); display: flex; flex-direction: column; }
.vd-style-journal .sheet.sov { justify-content: center; }
.vd-style-journal .sheet.scost { justify-content: center; }
.vd-style-journal .coverpage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background-color: #35302a; background-size: cover; background-position: center; }
.vd-style-journal .plaque { background: #fbf9f6; padding: 52px 58px; text-align: center; box-shadow: 0 16px 44px rgba(20,15,10,.35); max-width: 78%; }
.vd-style-journal .kick { font-size: 10px; letter-spacing: .36em; text-transform: uppercase; font-weight: 700; color: #b3261e; }
.vd-style-journal .plaque h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 44px; letter-spacing: .03em; margin: 18px 0 0; line-height: 1.12; color: #161616; }
.vd-style-journal .crule { width: 44px; height: 2px; background: #b3261e; margin: 24px auto; }
.vd-style-journal .cmeta { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #6b645a; }
.vd-style-journal .cbrand { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; color: #fff; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.vd-style-journal .ov { margin: var(--ovmar, 56px) auto; max-width: 500px; position: relative; width: 100%; }
.vd-style-journal .ov::before { content: ''; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px; background: #d8d2c8; }
.vd-style-journal .ov-row { position: relative; display: flex; align-items: center; min-height: var(--ovrow, 88px); }
.vd-style-journal .ov-ph { position: absolute; left: 50%; transform: translateX(-50%); width: var(--ovcirc, 62px); height: var(--ovcirc, 62px); border-radius: 50%; background-color: #e4dfd7; background-size: cover; background-position: center; border: 3px solid #fbf9f6; box-shadow: 0 0 0 1px #cfc8bc; }
/* Text clearance from the centreline scales with the circle instead of the
   old fixed 48px, which was implicitly tuned for ~55px circles (13-leg trips)
   and got overlapped once short trips earned the full 104px size. Half the
   circle plus a 24px gap; at 55px circles this lands on ~51px, so long trips
   keep the alignment they already had. Only the centre side pads -- the outer
   side stays at 10px so short trips keep their text width. */
.vd-style-journal .ov-cell { width: 50%; padding: 0 10px; }
.vd-style-journal .ov-row:nth-child(odd) .ov-cell { text-align: right; padding-right: calc(var(--ovcirc, 62px) / 2 + 24px); }
.vd-style-journal .ov-row:nth-child(even) .ov-cell { margin-left: 50%; text-align: left; padding-left: calc(var(--ovcirc, 62px) / 2 + 24px); }
.vd-style-journal .ov-city { font-family: 'Cormorant Garamond', serif; font-size: var(--ovfs, 20px); }
.vd-style-journal .ov-date { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #a39a8c; margin-top: 2px; }
.vd-style-journal .day { padding: 52px 58px 34px; }
.vd-style-journal .day + .day { border-top: 1px solid #eee9e0; }
.vd-style-journal .dhead { text-align: center; }
.vd-style-journal .dnum { font-family: 'Cormorant Garamond', serif; font-size: 31px; letter-spacing: .26em; text-transform: uppercase; }
.vd-style-journal .dmeta { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: #6b645a; margin-top: 7px; }
.vd-style-journal .drule { width: 44px; height: 2px; background: #b3261e; margin: 16px auto 0; }
.vd-style-journal .dtitle { text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; color: #5a544b; margin: 13px 0 24px; }
.vd-style-journal .dband { height: 240px; background-size: cover; background-position: center; margin: 0 -58px 26px; }
.vd-style-journal .dsum { font-size: 13.5px; line-height: 1.75; color: #5a544b; max-width: 560px; margin: 0 auto 8px; text-align: center; }
.vd-style-journal .part { width: 150px; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin: 0; padding-top: 10px; }
.vd-style-journal .part .ic { color: #b3261e; font-size: 18px; width: 20px; display: flex; align-items: center; justify-content: center; line-height: 1; transform: translateY(-2px); }
.vd-style-journal .part .pt { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid #b3261e; padding-bottom: 4px; }
.vd-style-journal .sect { display: flex; align-items: flex-start; padding-left: 28px; margin-top: 24px; }
.vd-style-journal .sect.wcont { padding-left: 178px; margin-top: 10px; }
.vd-style-journal .srows { flex: 1; min-width: 0; }
.vd-style-journal .bi { display: flex; gap: 16px; padding: 9px 0; }
.vd-style-journal .bt { width: 118px; flex: 0 0 auto; font-size: 12px; color: #6f695d; font-variant-numeric: tabular-nums; padding-top: 2px; letter-spacing: .02em; }
.vd-style-journal .bb { flex: 1; }
.vd-style-journal .bn { font-size: 14.5px; font-weight: 700; }
.vd-style-journal .bd { font-size: 12.5px; color: #77705f; line-height: 1.6; margin-top: 3px; }
.vd-style-journal .costa { max-width: 460px; margin: 56px auto 0; padding: 44px 0 34px; border-top: 1px solid #eee9e0; text-align: center; width: 100%; }
.vd-style-journal .ck2 { font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: #b3261e; font-weight: 700; }
.vd-style-journal .cg { font-family: 'Cormorant Garamond', serif; font-size: 44px; margin-top: 14px; }
.vd-style-journal .cgs { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #a39a8c; margin-top: 4px; }
.vd-style-journal .clist { margin: 26px 0 0; text-align: left; }
.vd-style-journal .crow { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 13px; }
.vd-style-journal .crow .cl { color: #1c1c1c; font-weight: 600; }
.vd-style-journal .cdots { flex: 1; border-bottom: 1px dotted #cfc8bc; transform: translateY(-3px); }
.vd-style-journal .crow .cv { color: #5a544b; font-variant-numeric: tabular-nums; }
.vd-style-journal .crow.sub { padding: 4px 0 4px 18px; font-size: 12px; }
.vd-style-journal .crow.sub .cl { font-weight: 400; color: #6b645a; }
.vd-style-journal .crow.sub .cv { color: #a39a8c; }
.vd-style-journal .cn2 { font-size: 11px; color: #a39a8c; line-height: 1.7; margin: 22px 0 0; text-align: center; }
/* Dedicated closing page -- same static-sheet pattern as the cover, so it is
   always the last full page rather than a footer squeezed under the costs.
   Vocabulary borrowed from the day headers: red kicker, Cormorant italic,
   short red rule. */
.vd-style-journal .jclose { justify-content: center; }
.vd-style-journal .jfoot { text-align: center; padding: 40px 58px; }
.vd-style-journal .jfoot .fk { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #b3261e; font-weight: 700; }
.vd-style-journal .jfoot .ft { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 36px; margin-top: 18px; color: #262219; }
.vd-style-journal .jrule { width: 34px; height: 2px; background: #b3261e; margin: 28px auto; }
.vd-style-journal .jfoot .fs { font-size: 12.5px; color: #6b645a; max-width: 380px; margin: 0 auto; line-height: 1.7; }
.vd-style-journal .jbrand { margin-top: 52px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #b7b0a4; font-weight: 700; }

/* ---------------- STYLE 2 — RAIL (light app / timeline) ---------------- */
.vdoc.vd-style-rail { background: #ebebe9; color: #20222a; font-family: Sora, system-ui, sans-serif; padding: 26px 0 80px; }
.vd-style-rail .sheet { max-width: 794px; min-height: 1123px; margin: 0 auto 34px; background: #fff; box-shadow: 0 2px 18px rgba(0,0,0,.10); padding: 0 42px; display: flex; flex-direction: column; }
.vd-style-rail .sheet.scost { justify-content: center; }
.vd-style-rail .coverpage { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.vd-style-rail .cpfoot { text-align: center; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #8b8f99; font-weight: 800; margin-top: auto; padding: 22px 0 14px; }
.vd-style-rail .cover { position: relative; height: var(--heroH, 300px); border-radius: 0 0 26px 26px; overflow: hidden; background-color: #23252d; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; margin: 0 -18px; }
.vd-style-rail .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,16,.18), rgba(12,12,16,.5)); }
.vd-style-rail .cin { position: relative; z-index: 1; text-align: center; color: #fff; padding: 0 30px; }
.vd-style-rail .cbig { font-size: 46px; font-weight: 800; letter-spacing: .06em; line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.vd-style-rail .csub { font-size: 13px; font-weight: 700; letter-spacing: .42em; margin-top: 12px; opacity: .95; }
.vd-style-rail .metap { display: flex; align-items: center; justify-content: center; gap: 26px; background: #fff; border: 1px solid #ecebe6; border-radius: 18px; box-shadow: 0 8px 26px rgba(25,25,30,.08); padding: 20px 30px; margin: -34px auto 0; position: relative; z-index: 2; max-width: 640px; }
.vd-style-rail .mcol { text-align: center; min-width: 0; }
.vd-style-rail .ml { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: #8b8f99; font-weight: 800; }
.vd-style-rail .mv { font-size: 14px; font-weight: 800; color: #17181d; margin-top: 5px; }
.vd-style-rail .msep { width: 1px; height: 34px; background: #ecebe6; flex: 0 0 auto; }
.vd-style-rail .hovt { text-align: center; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 800; color: #b3261e; background: #fdeeee; border-radius: 999px; padding: 8px 18px; width: max-content; max-width: 90%; margin: 26px auto 30px; margin-top: auto; }
.vd-style-rail .hovt.hcont0 { margin-top: 72px; }
.vd-style-rail .hov { display: flex; flex-wrap: wrap; row-gap: var(--hovgap, 32px); margin: 12px 0 8px; }
.vd-style-rail .hleg { width: var(--legw, 25%); position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }
.vd-style-rail .hleg::after { content: ''; position: absolute; top: calc(var(--circ, 96px) / 2); left: calc(50% + var(--circ, 96px) / 2 + 10px); width: calc(100% - var(--circ, 96px) - 26px); height: 2px; background: #ddd9d0; }
.vd-style-rail .hleg::before { content: ''; position: absolute; top: calc(var(--circ, 96px) / 2 - 4px); left: calc(150% - var(--circ, 96px) / 2 - 17px); width: 0; height: 0; border-left: 7px solid #ccc7bc; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.vd-style-rail .hov[data-per="4"] .hleg:nth-child(4n)::after, .vd-style-rail .hleg:last-child::after,
.vd-style-rail .hov[data-per="4"] .hleg:nth-child(4n)::before, .vd-style-rail .hleg:last-child::before { display: none; }
/* two-across pages end a row on every 2nd leg */
.vd-style-rail .hov[data-per="2"] .hleg:nth-child(2n)::before,
.vd-style-rail .hov[data-per="2"] .hleg:nth-child(2n)::after { display: none; }
.vd-style-rail .hov[data-per="3"] .hleg:nth-child(3n)::before,
.vd-style-rail .hov[data-per="3"] .hleg:nth-child(3n)::after { display: none; }
.vd-style-rail .hleg .circ { width: var(--circ, 96px); height: var(--circ, 96px); border-radius: 50%; background-color: #eceae4; background-size: cover; background-position: center; border: 3px solid #fff; box-shadow: 0 3px 14px rgba(25,25,30,.16); }
.vd-style-rail .hleg .hcity { font-size: 10.5px; font-weight: 800; color: #b3261e; background: #fdeeee; border-radius: 999px; padding: 4px 11px; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.vd-style-rail .hleg .hdays { font-size: 9px; font-weight: 800; letter-spacing: .14em; color: #8b8f99; white-space: nowrap; }
.vd-style-rail .nav { padding: 38px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vd-style-rail .chip { font-size: 11.5px; font-weight: 700; color: #4a4d57; background: #fff; border: 1px solid #e5e2da; border-radius: 999px; padding: 8px 14px; white-space: nowrap; text-decoration: none; }
.vd-style-rail .chip:hover { border-color: #b3261e; color: #b3261e; }
.vd-style-rail .legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 2px 16px; border-bottom: 1px solid #f0eee9; justify-content: center; }
.vd-style-rail .lg { font-size: 10.5px; color: #6f7480; display: inline-flex; align-items: center; gap: 6px; }
.vd-style-rail .lg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.vd-style-rail .dayb { padding: 44px 0 36px; }
.vd-style-rail .dayb + .dayb { border-top: 1px solid #edece7; }
.vd-style-rail .dhd { display: flex; align-items: center; gap: 18px; }
.vd-style-rail .dno { font-size: 34px; font-weight: 800; color: #b3261e; font-variant-numeric: tabular-nums; }
.vd-style-rail .dti { font-size: 19px; font-weight: 800; color: #17181d; }
.vd-style-rail .dci { font-size: 11.5px; color: #6f7480; margin-top: 3px; }
.vd-style-rail .dsm { font-size: 13px; line-height: 1.7; color: #5d616c; max-width: 640px; margin: 12px 0 4px 52px; }
.vd-style-rail .rail { position: relative; margin: 18px 0 0 52px; padding-left: 26px; }
.vd-style-rail .rail::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: #e6e3db; border-radius: 2px; }
.vd-style-rail .node { position: relative; display: flex; gap: 14px; align-items: flex-start; margin: 14px 0; }
.vd-style-rail .dot { position: absolute; left: -31px; top: 14px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 4px #ffffff; }
.vd-style-rail .time { width: 52px; flex: 0 0 auto; font-size: 11.5px; color: #6f7480; font-variant-numeric: tabular-nums; padding-top: 14px; }
.vd-style-rail .card { flex: 1; display: flex; gap: 14px; background: #fff; border: 1px solid #ecebe6; border-radius: 16px; padding: 13px 15px; align-items: center; box-shadow: 0 2px 10px rgba(25,25,30,.06); }
.vd-style-rail .thumb { width: 72px; height: 72px; border-radius: 14px; background-size: cover; background-position: center; flex: 0 0 auto; }
.vd-style-rail .cbody { flex: 1; min-width: 0; }
.vd-style-rail .ctag { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.vd-style-rail .cname { font-size: 14.5px; font-weight: 700; margin-top: 3px; color: #17181d; }
.vd-style-rail .cdesc { font-size: 12px; color: #6f7480; line-height: 1.6; margin-top: 4px; }
.vd-style-rail .costb { margin-top: 56px; background: #fff; border: 1px solid #ecebe6; border-radius: 20px; padding: 26px 28px; box-shadow: 0 2px 10px rgba(25,25,30,.06); }
.vd-style-rail .cbk { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #6f7480; font-weight: 800; }
.vd-style-rail .cbg { font-size: 34px; font-weight: 800; color: #17181d; margin-top: 6px; }
.vd-style-rail .cbs { font-size: 11.5px; color: #6f7480; margin-top: 2px; }
.vd-style-rail .cbl { margin-top: 18px; }
.vd-style-rail .cbg2 { padding: 6px 0; }
.vd-style-rail .cbg2 + .cbg2 { border-top: 1px solid #f0eee9; }
.vd-style-rail .cbi { display: flex; gap: 9px; padding: 4px 0 4px 17px; font-size: 12px; }
.vd-style-rail .cbi .l { flex: 1; color: #8b8f99; }
.vd-style-rail .cbi .v { color: #9aa0ab; font-variant-numeric: tabular-nums; }
.vd-style-rail .cbr { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; }
.vd-style-rail .cbr i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.vd-style-rail .cbr .l { flex: 1; color: #4a4d57; font-weight: 600; }
.vd-style-rail .cbr .v { font-weight: 700; color: #17181d; font-variant-numeric: tabular-nums; }
.vd-style-rail .cbn { font-size: 10.5px; color: #8b8f99; line-height: 1.7; margin-top: 18px; }
/* Dedicated closing page. The dot row is the trip's own category palette,
   used as a signature; the rest is the rail type scale at farewell size. */
.vd-style-rail .rclose { justify-content: center; align-items: center; }
.vd-style-rail .endcap { text-align: center; color: #6f7480; font-size: 12.5px; padding: 40px; }
.vd-style-rail .edots { display: flex; gap: 11px; justify-content: center; margin-bottom: 30px; }
.vd-style-rail .edots i { width: 10px; height: 10px; border-radius: 50%; }
.vd-style-rail .endcap b { display: block; color: #b3261e; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 16px; font-weight: 800; }
.vd-style-rail .ebig { font-size: 31px; font-weight: 800; color: #17181d; letter-spacing: -.01em; }
.vd-style-rail .esub { margin-top: 16px; }

/* ---------------- STYLE 3 — HINOMARU (white washi) ---------------- */
.vdoc.vd-style-hinomaru { background: #f4f2ee; font-family: 'Noto Sans JP', system-ui, sans-serif; color: #191919; padding: 26px 12px 90px; }
.vd-style-hinomaru .sheet { max-width: 794px; min-height: 1123px; margin: 0 auto 34px; background: #fff; border: 1px solid #e6e2da; display: flex; flex-direction: column; }
.vd-style-hinomaru .sheet.scost { justify-content: center; }
.vd-style-hinomaru .coverpage { flex: 1; position: relative; background-color: #2a2622; background-size: cover; background-position: center; }
.vd-style-hinomaru .ck2 { position: absolute; top: 56px; left: 0; right: 0; text-align: center; color: #fff; font-size: 10px; letter-spacing: .4em; text-transform: uppercase; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.vd-style-hinomaru .band { position: absolute; left: 0; right: 0; bottom: 200px; background: #d3352b; color: #fff; text-align: center; padding: 38px 50px; }
.vd-style-hinomaru .band h1 { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 37px; letter-spacing: .06em; margin: 0; color: #fff; line-height: 1.3; }
.vd-style-hinomaru .cm2 { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: 14px; }
.vd-style-hinomaru .cpf { position: absolute; bottom: 60px; left: 0; right: 0; text-align: center; font-family: 'Noto Serif JP', serif; font-size: 15px; color: #fff; letter-spacing: .3em; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.vd-style-hinomaru .dayc { padding: 52px 56px 30px; }
.vd-style-hinomaru .dayc + .dayc { border-top: 1px solid #eceae4; }
.vd-style-hinomaru .drow { display: flex; align-items: center; gap: 22px; }
.vd-style-hinomaru .stamp { width: 74px; height: 74px; border-radius: 50%; background: #d3352b; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; }
.vd-style-hinomaru .stamp span { font-size: 9px; letter-spacing: .3em; font-weight: 700; opacity: .85; }
.vd-style-hinomaru .stamp b { font-family: 'Noto Serif JP', serif; font-size: 26px; font-weight: 600; line-height: 1.1; }
.vd-style-hinomaru .dh h2 { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 23px; margin: 0; letter-spacing: .02em; }
.vd-style-hinomaru .dm { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #8f8a80; margin-top: 6px; }
.vd-style-hinomaru .ds { font-size: 13px; line-height: 1.85; color: #5c584f; margin: 20px 0 0 96px; max-width: 560px; }
.vd-style-hinomaru .body { margin: 8px 0 0 62px; border-left: 2px solid #d3352b; padding: 6px 0 22px 32px; }
.vd-style-hinomaru .sec { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 10px; }
.vd-style-hinomaru .sjp { font-family: 'Noto Serif JP', serif; font-size: 20px; color: #d3352b; }
.vd-style-hinomaru .sen { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #191919; font-weight: 700; }
.vd-style-hinomaru .sln { flex: 1; height: 1px; background: #eceae4; }
.vd-style-hinomaru .sect { display: flex; gap: 24px; align-items: center; margin: 2px 0 6px; }
.vd-style-hinomaru .simg { width: 160px; height: 160px; border-radius: 50%; flex: 0 0 auto; background-size: cover; background-position: center; border: 1px solid #e6e2da; }
.vd-style-hinomaru .srows { flex: 1; min-width: 0; }
.vd-style-hinomaru .ci { display: flex; gap: 18px; padding: 8px 0; }
.vd-style-hinomaru .ct { width: 46px; flex: 0 0 auto; font-size: 12px; color: #8f8a80; font-variant-numeric: tabular-nums; padding-top: 2px; }
.vd-style-hinomaru .cb { flex: 1; }
.vd-style-hinomaru .cn { font-size: 14px; font-weight: 700; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vd-style-hinomaru .cd { font-size: 12.5px; color: #6b675e; line-height: 1.7; margin-top: 3px; }
.vd-style-hinomaru .costc { padding: 52px 56px 30px; }
.vd-style-hinomaru .sech { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.vd-style-hinomaru .sen2 { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; }
.vd-style-hinomaru .sln2 { flex: 1; height: 1px; background: #eceae4; }
.vd-style-hinomaru .cbox { border: 1px solid #e6e2da; position: relative; padding: 26px 30px; }
.vd-style-hinomaru .cbox::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: #d3352b; }
.vd-style-hinomaru .cgc { font-family: 'Noto Serif JP', serif; font-size: 32px; }
.vd-style-hinomaru .cgc span { display: block; font-family: 'Noto Sans JP', sans-serif; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #8f8a80; margin-top: 6px; }
.vd-style-hinomaru .crows { margin-top: 20px; }
.vd-style-hinomaru .crc { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid #f0eee8; font-size: 13px; }
.vd-style-hinomaru .crc .l { font-weight: 700; }
.vd-style-hinomaru .crc .v { color: #d3352b; font-variant-numeric: tabular-nums; }
.vd-style-hinomaru .crc.sub { border-top: 0; padding: 3px 0 3px 16px; font-size: 12px; }
.vd-style-hinomaru .crc.sub .l { font-weight: 400; color: #8f8a80; }
.vd-style-hinomaru .crc.sub .v { color: #b7b2a8; }
.vd-style-hinomaru .cnc { font-size: 11px; color: #8f8a80; line-height: 1.8; margin: 18px 0 0; }
/* Closing colophon, in the document's own vocabulary: the day-stamp red disc
   scaled up into a hinomaru sun, farewell set vertically inside it the way it
   would sit on a noren. Ring is a spread-only shadow -- stays vector in the
   PDF. Centred in whatever space the last sheet has left (flex on the sheet). */
.vd-style-hinomaru .closesec { flex: 1; display: flex; align-items: center; justify-content: center; }
.vd-style-hinomaru .close { text-align: center; padding: 40px; }
.vd-style-hinomaru .close .hino { width: 158px; height: 158px; border-radius: 50%; background: #d3352b; margin: 0 auto 34px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 9px #fff, 0 0 0 10px #e8e3da; }
.vd-style-hinomaru .close .hino span { writing-mode: vertical-rl; font-family: 'Noto Serif JP', serif; font-size: 25px; letter-spacing: .22em; color: #fff; }
.vd-style-hinomaru .close .ct2 { font-family: 'Noto Serif JP', serif; font-size: 21px; color: #2a2622; }
.vd-style-hinomaru .close .cln { width: 56px; height: 1px; background: #d9d2c6; margin: 24px auto; }
.vd-style-hinomaru .close .cs2 { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #8f8a80; font-weight: 700; }

/* ---------------- booking checklist (all three styles) ----------------
   Rendered from the payload's bookings after the cost section and packed
   like everything else. Links are real anchors so the PDFShift vector
   export keeps them clickable; the raster path is retired for this reason. */
.vdoc .bkcat { font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; margin: 16px 0 6px; }
/* A category that follows a list needs separating from it; the first one sits
   under the section heading and does not. */
.vdoc .bkrow + .bkcat { margin-top: 30px; }
/* Rows trimmed from 11px to 7px of padding and the meta tightened: the whole
   checklist is ~1100px against a 1142px page budget, so it only just fits and
   any content above it pushes the last category onto the next page — taking
   its heading with it, which is why the gap left behind looked bigger than the
   shortfall. Ten rows at 8px less each buys back 80px of that margin. */
.vdoc .bkrow { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.vdoc .bkhd { font-size: 14px; letter-spacing: .3em; }
/* Row 194: the affiliate note sits under the Booking Checklist heading, kept
   with it and the first booking, so it can never land on a sheet of its own. */
.vd-style-journal .cn2.bknote { margin: 10px 0 20px; }
.vd-style-rail .cbn.bknote { margin: 6px 0 16px; }
.vd-style-hinomaru .cnc.bknote { margin: 6px 0 16px; }
.vdoc .bkbox { width: 15px; height: 15px; flex: 0 0 auto; border: 1.5px solid currentColor; opacity: .55; position: relative; }
.vdoc .bkbox.done::after { content: ''; position: absolute; inset: 2px; background: currentColor; }
.vdoc .bkbody { flex: 1; min-width: 0; }
.vdoc .bkname { display: block; font-size: 15.5px; font-weight: 700; }
.vdoc .bkmeta { display: block; font-size: 12.5px; margin-top: 2px; }
.vdoc .bklink { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vdoc .bklink.manual { text-decoration: none; font-weight: 400; }

.vd-style-journal .bkcat { color: #b3261e; }
.vd-style-journal .bkrow { border-top: 1px solid #eae5dd; }
.vd-style-journal .bkmeta { color: #6b645a; }
.vd-style-journal .bklink { color: #b3261e; }
.vd-style-journal .bklink.manual { color: #6b645a; }

.vd-style-rail .bkcat { color: #5b6270; }
.vd-style-rail .bkrow { border-top: 1px solid #edeef1; }
.vd-style-rail .bkmeta { color: #8a8f9c; }
.vd-style-rail .bklink { color: #d3352b; }
.vd-style-rail .bklink.manual { color: #8a8f9c; }

.vd-style-hinomaru .bkcat { color: #2a2622; }
.vd-style-hinomaru .bkrow { border-top: 1px solid #f0eee8; }
.vd-style-hinomaru .bkmeta { color: #8f8a80; }
.vd-style-hinomaru .bklink { color: #d3352b; }
.vd-style-hinomaru .bklink.manual { color: #8f8a80; }

/* ---------------- print: the scrolled sheets ARE the PDF pages ----------------
   The sheet gets a FIXED height, always smaller than the PDF page. With only a
   min-height, a sheet that renders even 1px taller than the page fragments
   across two pages, and page-break-after then pushes the next sheet a page
   further along -- the leftover sliver is what shows up as a blank page.
   --vd-page-w / --vd-sheet-h are set on #vdocRoot by refreshViewDoc(), so this
   block stays in sync with VD_STYLES automatically. */
@page { size: A4 portrait; margin: 0; }
@media print {
  /* .vd-switchrow too: the wrapper added for the eyebrow labels is not
     covered by hiding .vd-switch alone, and its padding is a real box
     before sheet 1. A sheet is exactly one page tall and unbreakable,
     so any box before it pushes every sheet down a page and prints a
     blank first page. */
  body.mpj-mode-view .header-stack,
  body.mpj-mode-view .vd-switchrow,
  body.mpj-mode-view .vd-switch,
  body.mpj-mode-view footer,
  body.mpj-mode-view .site-footer { display: none !important; }

  .vdoc.vd-style-journal, .vdoc.vd-style-rail, .vdoc.vd-style-hinomaru { padding: 0; margin: 0; background: #fff; }

  .vdoc .sheet {
    box-shadow: none;
    border: 0;
    width: var(--vd-page-w, 794px);
    max-width: var(--vd-page-w, 794px);
    height: var(--vd-sheet-h, 1123px);
    min-height: var(--vd-sheet-h, 1123px);
    max-height: var(--vd-sheet-h, 1123px);
    margin: 0;
    overflow: hidden;
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-after: always;
    break-after: page;
  }
  .vdoc .sheet:last-of-type { page-break-after: auto; break-after: auto; }

  .vd-style-rail .hleg { page-break-inside: avoid; break-inside: avoid; }

  /* ---- PDF weight diet (visual change is negligible at print scale) ----
     Dotted borders print as one filled rect PER DOT -- the journal cost page
     came out at 5,540 rectangles, which is what makes viewers chug when
     scrolling. A solid hairline in a lighter shade reads the same and is one
     rect per row. Blurred box-shadows are worse: Chromium rasterizes each one
     into its own transparent image at print time, so every card and circle
     carried a hidden PNG. Borders already delineate those elements; the two
     hero shadows (cover plaque, rail meta panel) are kept for the look. */
  .vd-style-journal .cdots { border-bottom-style: solid; border-bottom-color: #ddd7ca; }
  .vd-style-rail .card,
  .vd-style-rail .costb,
  .vd-style-rail .hleg .circ,
  .vd-style-journal .ov-ph,
  .vd-style-hinomaru .card,
  .vd-style-hinomaru .cbox { box-shadow: none; }
  .vd-style-journal .ov-ph { outline: 1px solid #cfc8bc; }
  /* Print swaps the dot's white ring from a box-shadow to a real border, and
     the -4px margins recentre it for that. But the page sets `* { box-sizing:
     border-box }`, so the 4px border ate the 12px square instead of sitting
     outside it: the coloured dot rendered 4px across and the margins then
     pushed it 4px off its own line. Measured in the PDF as size 4 and offset
     -4, against 12 and 0 on screen — which is exactly the "tiny and not
     aligned" Andre saw. content-box restores the author's intent. */
  .vd-style-rail .dot {
    box-sizing: content-box;
    box-shadow: none;
    border: 4px solid #ffffff;
    margin: -4px 0 0 -4px;
  }
}

/* packed cost + closing sections (flow through the packer like days) */
.vd-style-journal .costa.wcont { border-top: 0; padding-top: 0; margin-top: 44px; }
.vd-style-hinomaru .costc.wcont { padding-top: 34px; }

/* A container carried over a page break. `wnext` is the fragment that runs off
   the bottom of a sheet, `wcont` the one that picks it up at the top of the
   next: square off the joining edges, drop the doubled border, and let the open
   fragment stretch to the paper edge so the two halves read as one card. */
.vd-style-rail .costsec.wnext { flex: 1; display: flex; flex-direction: column; }
.vd-style-rail .costsec.wnext > .costb { flex: 1; }
.vd-style-rail .costb.wnext { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Interior air above the first carried-over row. 44px matches the document's
   top rhythm (.dayb uses 44px), and roughly balances the leftover space at the
   bottom of the previous sheet -- that gap is whatever fraction of a row the
   packer couldn't fit plus VD_PACK_PAD, so it varies a little per document and
   can never be matched exactly. Safe for the packer: container() adds .wcont at
   clone time, before any overflow check, so this padding is part of the
   measured height and content shifts down rather than clipping. */
.vd-style-rail .costb.wcont { margin-top: 0; padding-top: 44px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.vd-style-rail .cbl.wcont { margin-top: 0; }
.vd-style-rail .cbg2.wnext { padding-bottom: 0; }
.vd-style-rail .cbg2.wcont { padding-top: 0; border-top: 0; }

.vd-style-hinomaru .cbox.wnext { padding-bottom: 0; border-bottom: 0; }
.vd-style-hinomaru .cbox.wcont { padding-top: 22px; border-top: 0; }
.vd-style-hinomaru .cbox.wcont::before { display: none; }
  

/* one-line card rating (rec cards + drawer cards) — house colours */
.card-rating-line { font-size: 12px; font-weight: 800; color: #d68000; margin: 0 0 3px; }
.card-rating-line i { font-size: 10px; }
.card-rating-line .card-rating-count { color: #767676; font-weight: 600; }
/* a live Google rating still on its way: keeps the line's space so the card does not jump */
.card-rating-line.is-pending { visibility: hidden; }
.live-rating-block.is-pending { display: none; }

  /* ══ SCROLL LOCK — the page must not move behind an open overlay ══
     Two separate leaks, both of them on desktop as well as on a phone:
       1. the page scrolled whenever the gesture landed anywhere that is not
          the overlay's own scroller: its header, its footer, the backdrop
       2. the overlay's scroller reached its end and CHAINED to the page
     (1) is held by locking the document while any FIXED overlay is open,
     counted in mshLock so a modal opened on top of a drawer cannot unlock
     the page when only the modal closes. (2) is held by overscroll
     containment on every scroller that lives inside an overlay.
     The lock goes on <html> because that is the scrolling element here, and
     a lock on <body> alone is the one iOS Safari is known to ignore. */
  html.mpj-scroll-locked,
  html.mpj-scroll-locked body {
    overflow: hidden;
    overscroll-behavior: none;
  }
  /* A classic scrollbar disappearing widens the page by its own width and
     every centred thing jumps right by half of it. mshLock measures the gain
     and pays it back here. Padding on <body>, never <html>, so the fixed
     overlays keep the full viewport. */
  html.mpj-scroll-locked body { padding-right: var(--mpj-lock-pad, 0px); }

  /* Every scroller that lives inside an overlay keeps its scrolling to
     itself. This is the half that still works if the lock is ever missed. */
  .drawer-body,
  .suggestions-drawer-body,
  .sugg-detail-body,
  .modal-body,
  .timeline-modal-body,
  .providers-panel-body,
  .picker-list,
  .day-nav-sidebar-list,
  .autocomplete-dropdown,
  .day-nav-menu,
  .move-to-day-menu,
  .date-picker,
  .msh-drawer,
  .msh-hub,
  .lightbox { overscroll-behavior: contain; }

    /* ══════════════════════════════════════════════════════════════════
       MOBILE ROUND, 27 September 2026.  Four changes, all additive and
       all appended last so equal-specificity selectors win.
       ══════════════════════════════════════════════════════════════════ */

    /* ---- 1. CONTENT MEASURE IN THE SINGLE COLUMN BAND ----------------
       Scoped to html.msh-on, the class the mobile shell sets, so it can
       never fight the three column desktop layout.  Left alone the
       day cards stretch to the full viewport: measured 736px at a 760px
       viewport and about 1200px on a landscape tablet, against the 626px
       the desktop layout was designed around.  Cap the reading measure
       and centre it.  Below 720px nothing changes, the column is already
       narrower than the cap. */
    @media (min-width: 720px) and (min-height: 501px) {
      html.msh-on .main-column {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
      }
    }

    /* ---- 2. SAFE AREA INSETS ----------------------------------------
       Pair this with viewport-fit=cover in the page's viewport meta, or
       none of it does anything.  Every value carries a 0px fallback so
       a browser without env() is unaffected. */

    /* Sticky header: clears a top notch in portrait. */
    .header-stack { padding-top: env(safe-area-inset-top, 0px); }

    /* Landscape side cutouts: the page gutter absorbs them. */
    @media (orientation: landscape) {
      .page-shell {
        padding-left: calc(24px + env(safe-area-inset-left, 0px));
        padding-right: calc(24px + env(safe-area-inset-right, 0px));
      }
    }
    @media (orientation: landscape) and (max-width: 1185px) {
      .page-shell {
        padding-left: calc(12px + env(safe-area-inset-left, 0px));
        padding-right: calc(12px + env(safe-area-inset-right, 0px));
      }
    }

    /* Fixed panels that reach a screen edge. */
    .day-nav-sidebar {
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .drawer {
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      padding-right: env(safe-area-inset-right, 0px);
    }
    .shared-trip-banner {
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .toast-stack {
      padding-top: env(safe-area-inset-top, 0px);
      padding-right: env(safe-area-inset-right, 0px);
    }
    @media (max-width: 760px), (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
      .toast-stack {
        padding-top: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
    }
    /* A modal's own footer is the last thing above the home indicator. */
    .modal-foot,
    .place-drawer-footer {
      padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    /* ---- 3. NO iOS ZOOM ON TAP --------------------------------------
       iOS zooms the whole page whenever a focused form control is under
       16px, and every control in this file is 12 to 14px.  Touch devices
       only, so the desktop sizes are untouched.  The rename input is
       deliberately left out, it is already 26px. */
    @media (pointer: coarse) {
      .control-select,
      .wishlist-filter-search-input,
      .modal-input,
      .modal-textarea,
      .share-url-input,
      .auth-input,
      .item-note-textarea,
      .suggestions-search input,
      .sugg-filter-select,
      .drawer-search-input,
      input:not([type]),
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="search"],
      input[type="number"],
      input[type="tel"],
      input[type="url"],
      input[type="date"],
      select,
      textarea {
        font-size: 16px;
      }
      /* the trip rename field is 26px by design, put it back */
      .trip-hero-title-input { font-size: 26px; }
    }