/* Norvia V2 — Trip Workspace V1 (desktop first).
   The workspace is a progressive-enhancement surface over the existing React
   trip state. It never owns persistence: tripState/localStorage + the existing
   React views remain the source of truth. */

#nv-trip-workspace { display: none; }
#nv-trip-workspace[hidden] { display: none !important; pointer-events: none !important; }

@media (min-width: 1024px) {
  body.nv-trip-workspace-open #nv-trip-workspace {
    display: block;
  }

  #nv-trip-workspace {
    position: fixed;
    inset: 58px 0 0 0;
    z-index: 820;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 12% 0%, rgba(107,143,113,.08), transparent 28%),
      radial-gradient(circle at 88% 4%, rgba(196,149,106,.08), transparent 24%),
      #faf7f1;
    color: #2a3d2e;
    font-family: Inter, system-ui, sans-serif;
    padding: 28px 28px 122px;
  }

  #nv-trip-workspace * { box-sizing: border-box; }

  .nv-tw-shell {
    width: min(1220px, calc(100vw - 56px));
    margin: 0 auto;
  }

  .nv-tw-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    margin-bottom: 22px;
  }

  .nv-tw-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8c9189;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .nv-tw-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c4956a;
    box-shadow: 0 0 0 5px rgba(196,149,106,.14);
  }

  .nv-tw-title {
    margin: 0;
    font: 600 clamp(31px, 3.2vw, 48px)/1.05 'Fraunces', 'Playfair Display', serif;
    letter-spacing: -.035em;
    color: #25382a;
  }

  .nv-tw-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
  }

  .nv-tw-pill {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border-radius: 16px;
    border: 1px solid rgba(42,61,46,.10);
    background: rgba(255,255,255,.72);
    color: #667066;
    font-size: 11.5px;
    font-weight: 600;
  }
  button.nv-tw-pill { font-family: inherit; cursor: pointer; }
  .nv-tw-fact { transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; }
  .nv-tw-fact:hover { background:#fff; border-color:rgba(42,61,46,.24); transform:translateY(-1px); }
  .nv-tw-fact i { font-style:normal; color:#8a6a45; font-size:9px; font-weight:800; margin-left:2px; }

  .nv-tw-actions { display: flex; gap: 8px; align-items: center; }

  .nv-tw-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border-radius: 14px;
    border: 1px solid rgba(42,61,46,.13);
    background: rgba(255,255,255,.82);
    color: #2a3d2e;
    font-size: 12.5px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 2px 9px rgba(26,36,28,.05);
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
  }

  .nv-tw-btn:hover { transform: translateY(-1px); background: #fff; border-color: rgba(42,61,46,.22); }
  .nv-tw-btn.nv-primary { background: #2a3d2e; color: #fff; border-color: #2a3d2e; }
  .nv-tw-btn.nv-primary:hover { background: #203124; }
  .nv-tw-btn.nv-warm { background: #2a3d2e; color: #fff; border-color: #2a3d2e; }
  .nv-tw-btn.nv-warm:hover { background: #203124; }
  .nv-tw-btn.nv-ghost { background: transparent; box-shadow: none; color: #6b716a; }
  .nv-tw-btn.nv-small { min-height: 34px; padding: 0 11px; border-radius: 11px; font-size: 11.5px; }

  .nv-tw-tabs {
    position: sticky;
    top: -28px;
    z-index: 5;
    display: flex;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    padding: 5px;
    margin: 0 0 18px;
    border: 1px solid rgba(42,61,46,.10);
    border-radius: 21px;
    background: rgba(250,247,241,.93);
    box-shadow: 0 6px 22px rgba(26,36,28,.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .nv-tw-tabs button {
    min-height: 35px;
    padding: 0 13px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #81867e;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
  }

  .nv-tw-tabs button[aria-selected="true"] { background: #2a3d2e; color: #fff; }

  .nv-tw-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(310px, .68fr);
    gap: 16px;
    align-items: start;
  }

  .nv-tw-stack { display: grid; gap: 16px; }

  .nv-tw-card {
    border: 1px solid rgba(42,61,46,.10);
    border-radius: 22px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 5px 22px rgba(26,36,28,.055);
    overflow: hidden;
  }

  .nv-tw-card-pad { padding: 18px; }

  .nv-tw-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
  }

  .nv-tw-card-title { margin: 0; color: #2a3d2e; font-size: 14px; font-weight: 800; }
  .nv-tw-card-sub { margin: 4px 0 0; color: #92968f; font-size: 11.5px; line-height: 1.45; }

  .nv-tw-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .nv-tw-stat { min-height: 76px; padding: 12px; border-radius: 15px; background: #f3f4ef; border: 1px solid #e6e8e1; }
  .nv-tw-stat b { display: block; font-size: 17px; color: #2a3d2e; margin-top: 6px; }
  .nv-tw-stat span { font-size: 9.5px; font-weight: 800; color: #92968f; text-transform: uppercase; letter-spacing: .06em; }

  .nv-tw-list { display: grid; gap: 8px; }
  .nv-tw-row {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 62px;
    padding: 10px 11px;
    border-radius: 15px;
    background: #fbfaf6;
    border: 1px solid #ecece6;
  }
  .nv-tw-icon {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: #eef3eb; font-size: 17px;
  }
  .nv-tw-row-title { font-size: 12.5px; font-weight: 800; color: #2a3d2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nv-tw-row-sub { margin-top: 3px; font-size: 10.5px; color: #92968f; line-height: 1.35; }
  .nv-tw-row-actions { display: flex; gap: 6px; align-items: center; }

  .nv-tw-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 23px;
    padding: 0 8px;
    border-radius: 12px;
    background: #eef3eb;
    color: #57705c;
    font-size: 9.5px;
    font-weight: 800;
  }
  .nv-tw-status.nv-booked { background: #e4f2e5; color: #426248; }
  .nv-tw-status.nv-missing { background: #f7efe7; color: #a07149; }

  .nv-tw-empty {
    display: grid;
    place-items: center;
    min-height: 160px;
    padding: 25px;
    text-align: center;
    border-radius: 18px;
    background: #f7f6f1;
    border: 1px dashed #dfe2da;
    color: #5f6b62;
  }
  .nv-tw-empty b { color: #445146; font-size: 13px; margin-bottom: 5px; }
  .nv-tw-empty p { margin: 0 0 12px; max-width: 420px; font-size: 11px; line-height: 1.45; }

  .nv-tw-itinerary { display: grid; gap: 10px; }
  .nv-tw-day {
    display: grid;
    grid-template-columns: 62px minmax(0,1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 13px;
    border-radius: 16px;
    border: 1px solid #e8e9e3;
    background: #fbfaf6;
  }
  .nv-tw-day-label { font-size: 10px; font-weight: 800; color: #869087; text-transform: uppercase; letter-spacing: .05em; }

  .nv-tw-budget-lines { display: grid; gap: 8px; }
  .nv-tw-budget-line { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: #697069; }
  .nv-tw-budget-line strong { color: #2a3d2e; }

  .nv-tw-pack-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .nv-tw-pack-cat { padding: 12px; border: 1px solid #e7e9e2; border-radius: 15px; background: #fbfaf6; }
  .nv-tw-pack-cat h4 { margin: 0 0 8px; font-size: 11.5px; color: #2a3d2e; }
  .nv-tw-pack-item { width:100%; display:flex; gap:7px; align-items:center; margin:6px 0; padding:0; color:#747a73; font-size:10.5px; font:inherit; text-align:left; background:transparent; border:0; cursor:pointer; }
  .nv-tw-pack-item.nv-packed { color:#a7aaa4; text-decoration:line-through; }
.nv-tw-pack-item:hover { color:#2a3d2e; }
.nv-tw-pack-item:focus-visible { outline:2px solid #6b8f71; outline-offset:3px; border-radius:5px; }

  /* Packing V2 action row: the toggle and affiliate CTA are separate controls. */
  .nv-tw-pack-item-row { display:flex; align-items:center; gap:8px; margin:6px 0; min-height:28px; }
  .nv-tw-pack-toggle { min-width:0; flex:1; display:flex; gap:7px; align-items:center; padding:2px 0; color:#747a73; font:inherit; font-size:10.5px; text-align:left; background:transparent; border:0; cursor:pointer; }
  .nv-tw-pack-item-row.nv-packed .nv-tw-pack-toggle { color:#a7aaa4; text-decoration:line-through; }
  .nv-tw-pack-toggle:hover { color:#2a3d2e; }
  .nv-tw-pack-toggle:focus-visible,.nv-tw-pack-buy:focus-visible { outline:2px solid #6b8f71; outline-offset:2px; border-radius:6px; }
  .nv-tw-pack-buy { flex:0 0 auto; border:1px solid #cfdcca; background:#eef3eb; color:#2a3d2e; border-radius:8px; padding:5px 8px; font:700 9px/1 Inter,sans-serif; cursor:pointer; white-space:nowrap; }
  .nv-tw-pack-buy:hover { background:#e2ecdf; border-color:#a9bfa5; }

  .nv-tw-disclosure {
    margin-top: 18px;
    padding: 10px 13px;
    border-radius: 13px;
    color: #8e928b;
    background: rgba(255,255,255,.56);
    border: 1px solid rgba(42,61,46,.08);
    font-size: 10px;
    line-height: 1.45;
    text-align: center;
  }

  .nv-tw-section-full { display: grid; gap: 14px; }

  @media (max-width: 1180px) {
    .nv-tw-grid { grid-template-columns: 1fr; }
    .nv-tw-hero { grid-template-columns: 1fr; align-items: start; }
    .nv-tw-actions { justify-content: flex-start; }
  }
}
/* The category tiles of the reservations command are the one «explore» invitation;
   an empty card below would repeat it. It shows again as soon as something is chosen. */
#nv-trip-workspace:has(#nv-tw-reservations-command) [data-nv-tw-empty-res] { display: none; }