/* ============================================================
   Japan Trip Planner v2
   Uses CSS variables from style.css.
   ============================================================ */

/* ── Loading / empty state ───────────────────────────────── */
.planner-loading,
.planner-empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  padding:         60px 24px;
  text-align:      center;
  color:           var(--c-text-muted);
}
.planner-empty-icon   { font-size: 56px; line-height: 1; }
.planner-empty-state h2 { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--c-text); }
.planner-empty-state p  { max-width: 380px; margin: 0; font-size: .9rem; line-height: 1.6; }

/* ── Filter pill-row (All / Transport / Stay / Activity) ──── */
/* Styled to match the select-sm dropdown filters used in other sections */
.plan-filter-pills {
  display:     inline-flex;
  gap:         6px;
  flex-wrap:   nowrap;
  flex-shrink: 0;
}
.plan-filter-pill {
  appearance:     none;
  border:         1.5px solid var(--c-border);
  background:     var(--c-bg-card);
  color:          var(--c-text);
  padding:        7px 11px;
  border-radius:  var(--r-md);
  font-size:      13px;
  font-weight:    500;
  font-family:    inherit;
  cursor:         pointer;
  transition:     border-color .15s, background .15s, color .15s;
  white-space:    nowrap;
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  line-height:    1;
  flex-shrink:    0;
}
.plan-filter-pill-icon { flex-shrink: 0; }
.plan-filter-pill:hover { border-color: var(--c-text-muted); background: var(--c-bg-muted); }
.plan-filter-pill.active {
  border-color: var(--c-primary);
  background:   rgba(201,24,74,.07);
  color:        var(--c-primary);
}

/* ── List view — flat chronological timeline ─────────────── */
.planner-list-view {
  max-width: 680px;
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  gap:       18px;
}
.plan-list-day {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}
.plan-list-day-hdr {
  font-size:      .72rem;
  font-weight:    700;
  color:          var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding:        6px 2px 2px;
  border-bottom:  1px solid var(--c-border-lt);
}
.plan-travel-row.plan-travel-row--stay     { border-left: 3px solid #8B5CF6; }
.plan-travel-row.plan-travel-row--transport{ border-left: 3px solid #06B6D4; }
.plan-travel-row.plan-travel-row--activity { border-left: 3px solid #22C55E; }

/* ── Calendar view (month grid) ──────────────────────────── */
.plan-cal-view {
  max-width:      980px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}
.plan-cal-month-hdr {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         16px;
  padding:     4px 0 8px;
}
.plan-cal-month-label {
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--c-text);
  min-width:   180px;
  text-align:  center;
}
.plan-cal-nav {
  appearance:    none;
  border:        1px solid var(--c-border-lt);
  background:    var(--c-bg-card);
  color:         var(--c-text);
  width:         32px;
  height:        32px;
  border-radius: var(--r-sm);
  font-size:     1.2rem;
  line-height:   1;
  cursor:        pointer;
  font-family:   inherit;
}
.plan-cal-nav:hover { background: var(--c-bg-muted); }

.plan-cal-month-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   6px;
  background:            var(--c-bg-card);
  border:                1px solid var(--c-border-lt);
  border-radius:         var(--r-lg);
  padding:               10px;
}
.plan-cal-month-dayhdr {
  font-size:      .7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--c-text-muted);
  text-align:     center;
  padding:        4px 0;
}
.plan-cal-month-cell {
  min-height:    96px;
  border:        1px solid var(--c-border-lt);
  border-radius: var(--r-sm);
  padding:       4px 5px;
  background:    var(--c-bg);
  display:       flex;
  flex-direction: column;
  gap:           3px;
  overflow:      hidden;
}
.plan-cal-month-cell--off    { opacity: .45; }
.plan-cal-month-cell--today  { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary) inset, 0 2px 6px rgba(201,24,74,.12); }
.plan-cal-month-num {
  font-size:   .75rem;
  font-weight: 700;
  color:       var(--c-text);
}
.plan-cal-month-chips {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-height:     0;
  overflow:       hidden;
}
.plan-cal-chip {
  appearance:    none;
  border:        none;
  padding:       2px 6px;
  border-radius: 4px;
  font-size:     .68rem;
  font-weight:   600;
  font-family:   inherit;
  line-height:   1.3;
  text-align:    left;
  color:         var(--c-text);
  cursor:        pointer;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     100%;
}
.plan-cal-chip--transport { background: #ECFEFF; color: #0E7490; }
.plan-cal-chip--stay      { background: #EDE9FE; color: #6D28D9; }
.plan-cal-chip--activity  { background: #DCFCE7; color: #15803D; }
/* Luggage chip — emoji-only, neutral background, half the width of a label chip. */
.plan-cal-chip--luggage   { background: var(--c-bg-muted); color: var(--c-text-muted); padding: 1px 4px; align-self: flex-start; }
.plan-cal-chip-more {
  font-size:   .65rem;
  color:       var(--c-text-muted);
  padding:     1px 4px;
}
.plan-cal-month-dots {
  display: none;
}

html[data-theme="dark"] .plan-cal-month-grid { background: var(--c-bg-card); }
html[data-theme="dark"] .plan-cal-month-cell { background: var(--c-bg); }
html[data-theme="dark"] .plan-cal-chip--transport { background: #083344; color: #67E8F9; }
html[data-theme="dark"] .plan-cal-chip--stay      { background: #2E1065; color: #C4B5FD; }
html[data-theme="dark"] .plan-cal-chip--activity  { background: #052E16; color: #86EFAC; }
html[data-theme="dark"] .plan-cal-chip--luggage   { background: var(--c-bg-muted); color: var(--c-text-muted); }
html[data-theme="dark"] .plan-filter-pill.active  { background: rgba(201,24,74,.15); border-color: var(--c-primary); color: var(--c-primary); }

@media (max-width: 600px) {
  .plan-cal-month-grid     { padding: 6px; gap: 4px; }
  .plan-cal-month-cell     { min-height: 54px; padding: 3px; }
  .plan-cal-month-chips    { display: none; }
  .plan-cal-month-dots     { display: flex; gap: 2px; flex-wrap: wrap; }
  .plan-cal-month-dayhdr   { font-size: .6rem; padding: 2px 0; }
  .plan-cal-month-num      { font-size: .7rem; }
  .plan-cal-month-label    { font-size: 1rem; min-width: 140px; }
  .plan-filter-pill        { padding: 6px 10px; }
}

/* ── Main (all-view) dashboard layout ────────────────────── */
/*
 * Default (≤1239px): 2-column grid.
 *   col1 = timeline   col2 = status+today (row1) + calendar (row2)
 * Wide (≥1240px): 3-column grid.
 *   col1 = timeline   col2 = status+today   col3 = calendar
 */
.planner-main-layout {
  display:               grid;
  grid-template-columns: 1fr 280px;
  grid-template-areas:
    "timeline col2"
    "timeline col3";
  column-gap:  20px;
  row-gap:     12px;
  align-items: start;
  max-width:   1080px;
  margin:      0 auto;
}

.planner-main-timeline { grid-area: timeline; }
.planner-main-col2     { grid-area: col2; }
.planner-main-col3     { grid-area: col3; }

/* Remove standalone centering from the timeline inside layout */
.planner-main-timeline .planner-timeline { max-width: none; margin: 0; }

/* Col2: status + today stacked, sticky */
.planner-main-col2 {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  position:       sticky;
  top:            calc(var(--header-h) + var(--controls-h) + 12px);
  align-self:     start;
}

/* Col3: mini calendar, sticky */
.planner-main-col3 {
  position:   sticky;
  top:        calc(var(--header-h) + var(--controls-h) + 12px);
  align-self: start;
}

/* Wide: true 3-column */
@media (min-width: 1240px) {
  .planner-main-layout {
    grid-template-columns: 1fr 230px 208px;
    grid-template-areas:   "timeline col2 col3";
    row-gap:               0;
    max-width:             1260px;
  }
}

/* ── Timeline ────────────────────────────────────────────── */
.planner-timeline {
  max-width:  680px;
  margin:     0 auto;
}

/* ── Day section ─────────────────────────────────────────── */
.plan-day { margin-bottom: 6px; }

/* ── Timeline group headers (Today / Upcoming / Past) ──────── */
.plan-tl-group-hdr {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color:          var(--c-text-muted);
  padding:        18px 0 6px;
  margin-bottom:  4px;
  border-bottom:  1px solid var(--c-border-lt);
  display:        flex;
  align-items:    center;
  gap:            8px;
}
.plan-tl-group-hdr:first-child { padding-top: 4px; }
.plan-tl-group-hdr--today { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.plan-tl-group-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-primary);
  animation: panelDotPulse 2.4s ease-in-out infinite;
}
.plan-tl-past { margin-top: 6px; }
.plan-tl-past > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.plan-tl-past > summary::-webkit-details-marker { display: none; }
.plan-tl-caret {
  display: inline-block;
  transition: transform .18s;
  font-size: 1rem;
  line-height: 1;
  color: var(--c-text-muted);
}
.plan-tl-past[open] > summary .plan-tl-caret { transform: rotate(90deg); }

.plan-day-hdr {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 0 7px;
  border-bottom: 2px solid var(--c-border-lt);
  margin-bottom: 7px;
  position:      sticky;
  top:           calc(var(--header-h) + var(--controls-h));
  background:    var(--c-bg);
  z-index:       2;
}
.plan-day--today .plan-day-hdr { border-bottom-color: var(--c-primary); }

.plan-day-num {
  font-size:      .67rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--c-primary);
  background:     var(--c-sakura-lt);
  padding:        2px 8px;
  border-radius:  10px;
  white-space:    nowrap;
  flex-shrink:    0;
}
.plan-day-lbl {
  font-size:  .9rem;
  font-weight: 600;
  color:      var(--c-text);
  flex:       1;
}
.plan-day--today .plan-day-lbl { color: var(--c-primary); }

.plan-day-add {
  background:    none;
  border:        1px dashed var(--c-border);
  color:         var(--c-text-muted);
  font-size:     .9rem;
  width:         26px;
  height:        26px;
  border-radius: 50%;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  transition:    background .12s, border-color .12s, color .12s;
}
.plan-day-add:hover {
  background:   var(--c-bg-muted);
  border-color: var(--c-primary);
  color:        var(--c-primary);
}

.plan-day-items { padding-bottom: 4px; }

.plan-day-empty {
  font-size: .83rem;
  color:     var(--c-text-muted);
  padding:   6px 0;
  margin:    0;
}
.plan-link-btn {
  background:      none;
  border:          none;
  color:           var(--c-primary);
  cursor:          pointer;
  font-size:       inherit;
  padding:         0;
  text-decoration: underline;
}

/* ── Event item (base) ───────────────────────────────────── */
.plan-item {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     10px 12px;
  border-radius: var(--r-md);
  margin-bottom: 5px;
  background:  var(--c-bg-card);
  box-shadow:  var(--shadow-xs);
  border-left: 3px solid transparent;
  transition:  box-shadow .12s;
}
.plan-item:hover { box-shadow: var(--shadow-sm); }

.plan-item--transport { border-left-color: #06B6D4; }

/* Luggage forwarding — slim CHECK-IN-style variant. Neutral border (not
   transport cyan), tighter padding, single-line title row by default; .notes
   adds a second line. Inherits .plan-item-title-row + .plan-badge layout
   from the standard stay/transport pattern — no bespoke flex primitive. */
.plan-item--luggage                 { border-left-color: #8B5E3C; background: #F7EFE6; padding: 6px 11px; }
html[data-theme="dark"] .plan-item--luggage { border-left-color: #B07A5C; background: #2A211A; }
.plan-item--luggage .plan-item-icon { font-size: 1rem; }
.plan-item--luggage .plan-item-title,
.plan-item-luggage-title            { font-size: .85rem; font-weight: 500; color: var(--c-text); }
.plan-item-luggage-meta             { font-size: .72rem; color: var(--c-text-light); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* Luggage variant of the list-view row — leather-tinted to read as logistics
   at a glance and let the journey rows pop. */
.plan-travel-row--luggage           { border-left-color: #8B5E3C; background: #F7EFE6; }
html[data-theme="dark"] .plan-travel-row--luggage { border-left-color: #B07A5C; background: #2A211A; }

/* Light-travel marker — small backpack glyph trailing a participant pill,
   indicating their luggage is in transit elsewhere on this transport day. */
.plan-pill-light                    { margin-left: 4px; font-size: .85em; opacity: .85; cursor: help; }

/* Inline emoji-only participant strip — used inside compact luggage cards
   in lieu of the full .plan-participant-row to keep them single-line. */
.plan-participant-emojis            { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; }
.plan-participant-emoji             { font-size: .9rem; line-height: 1; cursor: default; }
.plan-participant-emoji-add         {
  appearance: none; border: 1px dashed var(--c-border); background: transparent;
  color: var(--c-text-muted); font-size: .7rem; line-height: 1;
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: border-color .12s, color .12s;
}
.plan-participant-emoji-add:hover   { border-color: var(--c-text-muted); color: var(--c-text); }
.plan-item-luggage-row              { align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.plan-item-luggage-row .plan-item-luggage-title { flex: 1; min-width: 0; }
.plan-luggage-arrow                 { color: var(--c-text-muted); font-size: .9rem; margin: 0 -2px; flex-shrink: 0; }
.plan-item--luggage .plan-item-body { gap: 2px; }
.plan-item--luggage .plan-participant-emojis { margin-left: 4px; flex-shrink: 0; }

/* Light-travel pack warning — reuses .plan-item-notes typography, just
   slightly more attention-getting via the leading ⚠️ glyph. No separate
   "warning" component. */
.plan-item-luggage-warn             { color: var(--c-text); font-weight: 500; }
.plan-item--stay      { border-left-color: #8B5CF6; }
.plan-item--activity  { border-left-color: #22C55E; }

/* Mid-stay: subtle, almost invisible — just a reminder line */
.plan-item--stay-mid {
  background:    var(--c-bg-muted);
  box-shadow:    none;
  border-left:   3px solid #8B5CF630;
  padding:       5px 12px;
  display:       flex;
  align-items:   center;
  gap:           7px;
  border-radius: var(--r-sm);
  margin-bottom: 4px;
}

.plan-stay-mid-icon { font-size: .85rem; opacity: .65; flex-shrink: 0; }
.plan-stay-mid-name { font-size: .78rem; color: var(--c-text-muted); font-weight: 500; flex: 1; }
.plan-stay-mid-addr { font-size: .74rem; color: var(--c-text-muted); }

.plan-item-icon    { font-size: 1.3rem; flex-shrink: 0; line-height: 1.2; }

.plan-item-body {
  flex:            1;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  gap:             3px;
}

.plan-item-title-row {
  display:     flex;
  align-items: center;
  gap:         7px;
  flex-wrap:   wrap;
}

.plan-item-title {
  font-size:      .9rem;
  font-weight:    600;
  color:          var(--c-text);
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.plan-item-route {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}
.plan-route-from,
.plan-route-to    { font-size: .92rem; font-weight: 600; color: var(--c-text); }
.plan-route-arrow { color: var(--c-text-muted); font-size: .85rem; }

.plan-item-address {
  font-size:      .8rem;
  color:          var(--c-text-muted);
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.plan-item-meta-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

.plan-time { font-size: .82rem; font-weight: 600; color: var(--c-text); }
.plan-meta { font-size: .78rem; color: var(--c-text-muted); }
.plan-ref  { font-size: .75rem; color: var(--c-text-muted); }

.plan-item-notes {
  font-size:           .76rem;
  color:               var(--c-text-muted);
  white-space:         pre-line;
  overflow:            hidden;
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
}

/* Compact-context exception — retained.
   Use `.pill .pill-event-*` for standalone event-category pills; `.plan-badge`
   is reserved for (a) inline direction labels inside tight timeline rows
   (departure / arrival / check-in / check-out) and (b) the wallet card's
   compact `.doc-type-pill` badge. Both contexts require a smaller (.64rem
   uppercase, 8px radius) visual than the standard pill primitive. */
.plan-badge {
  font-size:      .64rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding:        2px 7px;
  border-radius:  8px;
  flex-shrink:    0;
  white-space:    nowrap;
}
.plan-badge--in  { background: #EDE9FE; color: #7C3AED; }
.plan-badge--out { background: #FFF0F9; color: #C026D3; }
.plan-badge--dep { background: #ECFEFF; color: #0891B2; }
.plan-badge--arr { background: #F0FDF4; color: #15803D; }
/* Luggage status pills — same shape as CHECK-IN/CHECK-OUT, distinct colors:
   --lug-out (red, sender side), --lug-in (green, recipient side),
   --lug-pickup (green, hotel pickup waiting), --lug-pending (amber, late). */
.plan-badge--lug-out     { background: #FEF2F2; color: #B91C1C; }
/* lug-in is orange (info), not green — green would falsely read as
   "you've arrived at the hotel". Keeps amber/orange family for the two
   informational luggage states (arrived but not pickable yet, late). */
.plan-badge--lug-in      { background: #FFF7ED; color: #C2410C; }
.plan-badge--lug-pickup  { background: #F0FDF4; color: #15803D; }
.plan-badge--lug-pending { background: #FFFBEB; color: #B45309; }

/* Compact-context exception — retained.
   `.icon-btn` (32–40px touch target) would visually dominate the dense
   planner timeline rows. This 0.22-opacity inline pencil is intentionally
   subtle and only becomes prominent on hover. Use `.icon-btn` /
   `.icon-btn-danger` for modal edit/delete actions instead. */
.plan-card-edit {
  background:    none;
  border:        none;
  cursor:        pointer;
  font-size:     .8rem;
  opacity:       .22;
  padding:       2px 4px;
  border-radius: var(--r-sm);
  transition:    opacity .12s;
  flex-shrink:   0;
  margin-top:    1px;
}
.plan-card-edit:hover { opacity: 1; background: var(--c-bg-muted); }
.plan-card-edit--sm   { font-size: .7rem; margin-top: 0; }

/* Action group (maps + edit) on the right edge of timeline / list-row
   cards. Stacks vertically: maps at the top, edit at the bottom-right
   corner (margin-top: auto pushes it down regardless of card height).
   Maps button is a tighter icon-only variant of `.card-maps-btn`. */
.plan-card-actions {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            4px;
  flex-shrink:    0;
  align-self:     stretch;
}
.plan-card-actions .plan-card-edit { margin-top: auto; }
.plan-card-maps {
  padding:    3px 6px;
  font-size:  11px;
}
.plan-card-maps .gmaps-icon { height: 13px; width: auto; }

/* ── Stays list view ─────────────────────────────────────── */
.planner-stays-list {
  max-width:      680px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.plan-stay-card {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  padding:       16px;
  background:    var(--c-bg-card);
  border-radius: var(--r-md);
  box-shadow:    var(--shadow-sm);
  border-left:   4px solid #8B5CF6;
}
.plan-stay-icon { font-size: 1.8rem; flex-shrink: 0; }
.plan-stay-body {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            3px;
}
.plan-stay-name    { font-size: .97rem; font-weight: 600; color: var(--c-text); }
.plan-stay-dates   { font-size: .8rem;  font-weight: 600; color: var(--c-primary); }
.plan-stay-address { font-size: .8rem;  color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-stay-times   { font-size: .8rem;  color: var(--c-text); }
.plan-stay-ref     { font-size: .76rem; color: var(--c-text-muted); }
.plan-stay-notes   {
  font-size:           .77rem;
  color:               var(--c-text-muted);
  white-space:         pre-line;
  overflow:            hidden;
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
}

/* ── Travel list view ────────────────────────────────────── */
.planner-travel-list {
  max-width:      680px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.plan-travel-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 14px;
  background:    var(--c-bg-card);
  border-radius: var(--r-md);
  box-shadow:    var(--shadow-xs);
  border-left:   4px solid #06B6D4;
}
.plan-travel-date  { font-size: .72rem; font-weight: 700; color: var(--c-primary); min-width: 50px; flex-shrink: 0; }
.plan-travel-icon  { font-size: 1.2rem; flex-shrink: 0; }
.plan-travel-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-travel-route { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-travel-times { font-size: .82rem; font-weight: 600; color: var(--c-text); }
.plan-travel-meta  { font-size: .76rem; color: var(--c-text-muted); }
.plan-travel-ref   { font-size: .74rem; color: var(--c-text-muted); }

/* ── Empty list states ───────────────────────────────────── */
.planner-list-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             12px;
  padding:         60px 24px;
  text-align:      center;
  color:           var(--c-text-muted);
}
.planner-list-empty-icon { font-size: 3rem; }
.planner-list-empty p    { margin: 0; font-size: .9rem; }

/* ── Type chooser ────────────────────────────────────────── */
.planner-type-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  padding:               16px 20px 24px;
}
.planner-type-btn {
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           6px;
  padding:       18px 10px;
  background:    var(--c-bg-muted);
  border:        2px solid var(--c-border);
  border-radius: var(--r-md);
  cursor:        pointer;
  text-align:    center;
  transition:    border-color .15s, background .15s;
}
.planner-type-btn:hover { border-color: var(--c-primary); background: var(--c-sakura-lt); }
.planner-type-icon       { display: flex; align-items: center; justify-content: center; height: 40px; }
.planner-type-icon svg   { width: 36px; height: 36px; color: var(--c-text-muted); }
.planner-type-label { font-size: .83rem; font-weight: 600; color: var(--c-text); }
.planner-type-sub   { font-size: .7rem;  color: var(--c-text-muted); }

/* ── Modal ───────────────────────────────────────────────── */
/* Planner modals inherit generic .modal-overlay + .modal-box styling
   (bottom-sheet on ≤480px, swipe-down-to-close, z-index layering).
   Only override: a higher z-index so these sit above planner popovers
   (autocomplete, status popup), and a slightly narrower desktop max-width. */
.planner-modal-overlay { z-index: 1200; }
.planner-modal-box     { max-width: 520px; }

.modal-body {
  padding:        20px 24px;
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.modal-footer {
  padding:         14px 24px;
  border-top:      1px solid var(--c-border-lt);
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             10px;
}
.modal-footer .btn-danger { margin-right: auto; }

/* ── Form ────────────────────────────────────────────────── */
.form-row { display: flex; flex-direction: column; gap: 5px; }

.form-row--two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}
.form-row--four-col {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   8px;
}

/* Visually aligned with the place-modal `.text-input` / `.form-group label`
   pattern (style.css). Kept as `.form-input` / `.form-label` marker classes
   to avoid a JS-wide rename in planner.js. */
.form-label {
  font-size:      12.5px;
  font-weight:    600;
  color:          var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.form-label .required { color: var(--c-primary); }

.form-input {
  width:         100%;
  padding:       10px 14px;
  border:        1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-family:   var(--font-sans);
  font-size:     14px;
  color:         var(--c-text);
  background:    var(--c-bg-card);
  transition:    border-color .15s, box-shadow .15s;
  outline:       none;
  appearance:    none;
  -webkit-appearance: none;
  box-sizing:    border-box;
}
.form-input:focus {
  border-color: var(--c-primary);
  box-shadow:   0 0 0 3px rgba(201,24,74,.10);
}
.form-textarea { resize: vertical; min-height: 60px; }
.form-input:disabled { opacity: .45; cursor: not-allowed; background: var(--c-bg-muted); }
.form-label-hint { font-size: .75rem; font-weight: 400; color: var(--c-text-muted); font-style: italic; }

/* ── Place-link pill (replaces text input when a place is linked) ─ */
.place-link-pill {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       7px 10px;
  margin-top:    1px;
  background:    var(--c-bg-muted);
  border:        1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size:     .88rem;
  min-height:    36px;
  box-sizing:    border-box;
  width:         100%;
}
.place-link-pill-emoji { flex-shrink: 0; font-size: 15px; line-height: 1; }
.place-link-pill-name  {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--c-text); font-weight: 500;
}
.place-link-unlink {
  flex-shrink:  0;
  background:   none;
  border:       none;
  cursor:       pointer;
  color:        var(--c-text-muted);
  font-size:    17px;
  line-height:  1;
  padding:      0 2px;
  border-radius: 50%;
  transition:   color .12s, background .12s;
}
.place-link-unlink:hover { color: var(--c-text); background: var(--c-border); }

/* Planner uses the standard .controls-inner layout (flex + overflow-x:auto),
   matching Places / Links / Wallet so narrow viewports scroll horizontally
   instead of wrapping the filter row onto a second line. */


/* ── Place autocomplete region label ─────────────────────── */
/* Extends the shared .mention-option in #mentionDropdown    */
.mention-opt-region {
  font-size:    .72rem;
  color:        var(--c-text-muted);
  margin-left:  auto;
  padding-left: 6px;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
  max-width:    90px;
}

/* ── Participant avatars on timeline items (legacy, still used in panels) */
.plan-item-participants  { display: flex; gap: 3px; margin-top: 4px; }
.plan-participant-avatar { font-size: 13px; line-height: 1; cursor: default; }

/* ── Participant pills (list/timeline cards) ─────────────── */
.plan-participant-row {
  display:     flex;
  align-items: flex-start;
  gap:         6px;
  flex-wrap:   wrap;
  margin-top:  6px;
}
.plan-participant-lbl {
  font-size:      .72rem;
  font-weight:    600;
  color:          var(--c-text-muted);
  white-space:    nowrap;
  padding-top:    4px; /* align baseline with pills */
}
.plan-pills {
  display:  flex;
  flex-wrap: wrap;
  gap:      4px;
}
.plan-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 10px;
  background:    var(--c-bg-muted);
  border:        1.5px solid var(--c-border);
  border-radius: 999px;
  font-size:     .76rem;
  font-weight:   500;
  color:         var(--c-text);
  white-space:   nowrap;
  line-height:   1.4;
}
.plan-pill--sm {
  font-size: .68rem;
  padding:   2px 7px;
}
.plan-pill--add {
  background:   transparent;
  border-style: dashed;
  color:        var(--c-text-muted);
  cursor:       pointer;
  transition:   background .12s, border-color .12s, color .12s;
}
.plan-pill--add:hover {
  background:   var(--c-sakura-lt);
  border-color: var(--c-primary);
  color:        var(--c-primary);
}

/* ── Floating participant picker ─────────────────────────── */
.plan-participant-picker {
  position:      absolute;
  z-index:       9999;
  background:    var(--c-bg-card);
  border:        1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow:    var(--shadow-md);
  padding:       5px;
  display:       flex;
  flex-direction: column;
  gap:           2px;
  min-width:     148px;
}
.plan-participant-opt {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 11px;
  border:        none;
  background:    none;
  border-radius: var(--r-sm);
  cursor:        pointer;
  font-size:     .86rem;
  color:         var(--c-text);
  text-align:    left;
  transition:    background .1s;
  white-space:   nowrap;
}
.plan-participant-opt:hover { background: var(--c-bg-muted); }

/* ── Prominent departure time ────────────────────────────── */
.plan-dep-time {
  display:     flex;
  align-items: baseline;
  gap:         6px;
  margin:      2px 0 1px;
}
.plan-dep-time__dep {
  font-size:      1.05rem;
  font-weight:    800;
  color:          var(--c-text);
  letter-spacing: -.01em;
  line-height:    1.2;
}
.plan-dep-time__arr {
  font-size:   .84rem;
  font-weight: 500;
  color:       var(--c-text-muted);
}
/* Slightly smaller inside the right-side dashboard panel */
.plan-dep-time--panel .plan-dep-time__dep { font-size: .95rem; }
.plan-dep-time--panel .plan-dep-time__arr { font-size: .8rem; }

/* ── Sidebar card base ───────────────────────────────────── */
.plan-sidebar-card {
  background:     var(--c-bg-card);
  border-radius:  var(--r-lg);
  box-shadow:     var(--shadow-sm);
  border:         1px solid var(--c-border-lt);
  padding:        16px 18px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.plan-sidebar-card--status {
  border-top: 4px solid var(--c-primary);
}
.plan-sidebar-card--status.plan-sidebar-card--active {
  border-top-color: #22C55E;
}

.plan-sidebar-title {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  font-size:       .72rem;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  .07em;
  color:           var(--c-text-muted);
}
.plan-sidebar-month {
  font-weight:    600;
  text-transform: none;
  letter-spacing: 0;
  font-size:      .72rem;
  color:          var(--c-text-muted);
}

/* ── Trip status card ────────────────────────────────────── */
.plan-status-phase {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   1rem;
  font-weight: 700;
  color:       var(--c-text);
}
.plan-status-phase--pre  { color: var(--c-text-muted); }
.plan-status-phase--done { color: var(--c-text-muted); font-size: .97rem; }
.plan-status-phase--active { color: var(--c-text); }

/* Progress bar */
.plan-status-bar-wrap {
  height:        6px;
  background:    var(--c-bg-muted);
  border-radius: 99px;
  overflow:      hidden;
}
.plan-status-bar {
  height:        100%;
  background:    linear-gradient(90deg, var(--c-primary), #8B5CF6);
  border-radius: 99px;
  transition:    width .6s cubic-bezier(.4,0,.2,1);
  min-width:     3px;
}
.plan-sidebar-card--status.plan-sidebar-card--active .plan-status-bar {
  background: linear-gradient(90deg, #22C55E, #06B6D4);
}

.plan-status-dates {
  font-size:  .78rem;
  color:      var(--c-text-muted);
  text-align: center;
}

/* Stats strip */
.plan-status-stats {
  display:         flex;
  justify-content: space-around;
  padding-top:     2px;
  border-top:      1px solid var(--c-border-lt);
  margin-top:      2px;
}
.plan-status-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1px;
}
.plan-status-stat-val {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--c-text);
  line-height: 1.2;
}
.plan-status-stat-lbl {
  font-size: .65rem;
  color:     var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Today card ──────────────────────────────────────────── */
.plan-today-row {
  display:  flex;
  gap:      10px;
  align-items: flex-start;
  padding:  8px 0;
  border-top: 1px solid var(--c-border-lt);
}
.plan-today-row:first-of-type { border-top: none; }
.plan-today-icon {
  font-size:  1.1rem;
  flex-shrink: 0;
  margin-top:  1px;
}
.plan-today-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-today-label {
  font-size:  .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:      var(--c-text-muted);
}
.plan-today-val {
  font-size:   .88rem;
  font-weight: 600;
  color:       var(--c-text);
  line-height: 1.35;
}
.plan-today-sub {
  font-size: .78rem;
  color:     var(--c-text-muted);
}
.plan-today-free {
  font-size:  .9rem;
  color:      var(--c-text-muted);
  text-align: center;
  padding:    6px 0 2px;
}

/* ── Mini trip calendar ──────────────────────────────────── */
.plan-cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   2px;
}

/* Day-of-week headers */
.plan-cal-hdr {
  font-size:      .62rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:          var(--c-text-muted);
  text-align:     center;
  padding:        2px 0 4px;
}

/* Individual day cell */
.plan-cal-day {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: flex-start;
  gap:            2px;
  padding:        4px 2px 3px;
  border-radius:  var(--r-sm);
  border:         none;
  background:     transparent;
  cursor:         pointer;
  transition:     background .12s;
  min-height:     38px;
}
.plan-cal-day--trip:hover { background: var(--c-bg-muted); }
.plan-cal-day--trip:hover .plan-cal-num { color: var(--c-primary); }

/* Off-trip days (padding weeks) */
.plan-cal-day--off {
  opacity: .28;
  cursor:  default;
}
.plan-cal-day--off .plan-cal-num { font-weight: 400; }

/* Past trip days */
.plan-cal-day--past .plan-cal-num { color: var(--c-text-muted); }
.plan-cal-day--past .plan-cal-dot { opacity: .45; }

/* Today highlight */
.plan-cal-day--today {
  background: var(--c-sakura-lt) !important;
}
.plan-cal-day--today .plan-cal-num {
  color:       var(--c-primary);
  font-weight: 800;
}

.plan-cal-num {
  font-size:   .78rem;
  font-weight: 600;
  color:       var(--c-text);
  line-height: 1;
}

/* Dots row below the day number */
.plan-cal-dots {
  display:     flex;
  gap:         2px;
  align-items: center;
  min-height:  6px;
}

.plan-cal-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  flex-shrink:   0;
}
.plan-cal-dot--stay      { background: #8B5CF6; }
.plan-cal-dot--transport { background: #06B6D4; }
.plan-cal-dot--activity  { background: #22C55E; }

/* Legend */
.plan-cal-legend {
  display:     flex;
  gap:         10px;
  align-items: center;
  flex-wrap:   wrap;
  font-size:   .68rem;
  color:       var(--c-text-muted);
}
.plan-cal-legend .plan-cal-dot { width: 7px; height: 7px; }

/* ── Danger button ───────────────────────────────────────── */
.btn-danger { background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA; }
.btn-danger:hover { background: #FECACA; }

/* ── Dashboard two-column layout ─────────────────────────── */
.planner-dash-layout {
  display:               grid;
  grid-template-columns: 1fr 288px;
  gap:                   20px;
  align-items:           start;
  max-width:             1020px;
  margin:                0 auto;
}

/* Remove list own max-width when inside the dash layout */
.planner-dash-list .planner-stays-list,
.planner-dash-list .planner-travel-list { max-width: none; margin: 0; }

/* ── Dashboard right panel card ──────────────────────────── */
.plan-panel-card {
  background:    var(--c-bg-card);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--c-border-lt);
  border-top:    4px solid var(--c-border);
  padding:       18px 20px;
  display:       flex;
  flex-direction: column;
  gap:           12px;
  position:      sticky;
  top:           calc(var(--header-h) + var(--controls-h) + 12px);
}

.plan-panel-card--stay     { border-top-color: #8B5CF6; }
.plan-panel-card--travel   { border-top-color: #06B6D4; }
.plan-panel-card--activity { border-top-color: #22C55E; }

/* Subtle tinted background when "active" (today / currently) */
.plan-panel-card--stay.plan-panel-card--active     { background: #FDFBFF; }
.plan-panel-card--travel.plan-panel-card--active   { background: #F0FDFF; }
.plan-panel-card--activity.plan-panel-card--active { background: #F0FDF4; }

/* Status line (label + dot) */
.plan-panel-status {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--c-text-muted);
  flex-wrap:      wrap;
}

/* Pulsing "live" dot */
.plan-panel-dot {
  width:        7px;
  height:       7px;
  border-radius: 50%;
  background:   #22C55E;
  flex-shrink:  0;
  animation:    panelDotPulse 2.4s ease-in-out infinite;
}
.plan-panel-dot--travel   { background: #06B6D4; }
.plan-panel-dot--activity { background: #22C55E; }

@keyframes panelDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,.0); }
}

/* Hotel / activity name */
.plan-panel-name {
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--c-text);
  line-height: 1.3;
}

/* Small detail rows */
.plan-panel-detail {
  font-size:   .81rem;
  color:       var(--c-text-muted);
  line-height: 1.4;
}

/* Action buttons row inside planner panels — left-aligned, with a little top gap */
.plan-panel-actions {
  justify-content: flex-start;
  margin-top: 6px;
}

/* Countdown badges */
.plan-panel-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        2px 8px;
  border-radius:  20px;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background:     var(--c-bg-muted);
  color:          var(--c-text-muted);
  white-space:    nowrap;
}
.plan-panel-badge--today {
  background: var(--c-sakura-lt);
  color:      var(--c-primary);
}
.plan-panel-badge--soon {
  background: #FFF7E6;
  color:      #B45309;
}
.plan-panel-badge--past {
  background: var(--c-bg-muted);
  color:      var(--c-text-muted);
  opacity:    .7;
}

/* Transport route display */
.plan-panel-route {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}
.plan-panel-route-icon  { font-size: 1.15rem; flex-shrink: 0; }
.plan-panel-route-from,
.plan-panel-route-to   { font-size: .97rem; font-weight: 700; color: var(--c-text); }
.plan-panel-route-arrow { color: var(--c-text-muted); font-size: .85rem; }

/* Extra legs (same travel day) */
.plan-panel-extra-leg {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding-top:   8px;
  border-top:    1px solid var(--c-border-lt);
  flex-wrap:     wrap;
  font-size:     .82rem;
  color:         var(--c-text-muted);
}

/* Activity entry inside panel */
.plan-panel-activity {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.plan-panel-act-title {
  display:     flex;
  align-items: center;
  gap:         7px;
}
.plan-panel-act-emoji { font-size: 1.25rem; flex-shrink: 0; }
.plan-panel-act-name  { font-size: .97rem; font-weight: 700; color: var(--c-text); line-height: 1.3; }

.plan-panel-notes {
  white-space:         pre-line;
  overflow:            hidden;
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
}

/* Divider between multiple activities */
.plan-panel-divider {
  border:     none;
  border-top: 1px solid var(--c-border-lt);
  margin:     2px 0;
}

/* Empty panel state */
.plan-panel-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  padding:        12px 0 4px;
  text-align:     center;
}
.plan-panel-empty-icon { font-size: 1.8rem; }
.plan-panel-empty-msg  { font-size: .82rem; color: var(--c-text-muted); }

/* ═══════════════════════════════════════════════════════════
   Info widgets — Accommodation & Transport status panels
   Distinct from timeline event cards: circular icon badge,
   top rail accent, boarding-pass style hierarchy.
   ═══════════════════════════════════════════════════════════ */
.plan-widget {
  --widget-accent:      #8B5CF6;
  --widget-accent-soft: #F4EFFF;
  background:    var(--c-bg-card);
  border:        1px solid var(--c-border-lt);
  border-top:    5px solid var(--widget-accent);
  border-radius: var(--r-xl);
  box-shadow:    var(--shadow-md);
  padding:       18px 20px 14px;
  display:       flex;
  flex-direction: column;
  gap:           12px;
  position:      sticky;
  top:           calc(var(--header-h) + var(--controls-h) + 12px);
}
.plan-widget--stay   { --widget-accent: #8B5CF6; --widget-accent-soft: #F4EFFF; }
.plan-widget--travel { --widget-accent: #0891B2; --widget-accent-soft: #E0F7FA; }

.plan-widget--active {
  background: linear-gradient(180deg, var(--widget-accent-soft) 0%, var(--c-bg-card) 55%);
}

.plan-widget-head {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
}

.plan-widget-badge {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  background:    var(--widget-accent);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  box-shadow:    0 2px 6px rgba(0,0,0,0.08);
}
.plan-widget-icon {
  width:  26px;
  height: 26px;
  stroke-width: 2;
}

.plan-widget-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Mobile-only slots — hidden on desktop, shown by the mobile media query. */
.plan-widget-mobile-sub,
.plan-widget-mobile-nav { display: none; }

.plan-widget-status {
  font-size:      .68rem;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--widget-accent);
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
}

.plan-widget-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--widget-accent);
  flex-shrink:   0;
  animation:     panelDotPulse 2.4s ease-in-out infinite;
}

.plan-widget-title {
  font-size:   1.3rem;
  font-weight: 800;
  color:       var(--c-text);
  line-height: 1.2;
  word-break:  break-word;
}

.plan-widget-subtitle {
  font-size:   .83rem;
  color:       var(--c-text-muted);
  line-height: 1.35;
}

.plan-widget-route {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  flex-wrap:   wrap;
}
.plan-widget-route-from,
.plan-widget-route-to {
  font-size:   1.1rem;
  font-weight: 800;
  color:       var(--c-text);
}
.plan-widget-route-arrow {
  color:       var(--widget-accent);
  font-weight: 700;
}

.plan-widget-times {
  margin-top:  2px;
  display:     flex;
  align-items: baseline;
  gap:         8px;
}
.plan-widget-times-dep {
  font-size:   1.4rem;
  font-weight: 800;
  color:       var(--c-text);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.plan-widget-times-arr {
  font-size: .88rem;
  color:     var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.plan-widget-metas {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  padding:        9px 0;
  border-top:     1px dashed var(--c-border-lt);
  border-bottom:  1px dashed var(--c-border-lt);
}
.plan-widget-meta {
  font-size:   .81rem;
  color:       var(--c-text);
  line-height: 1.4;
}
.plan-widget-meta-k {
  display:        inline-block;
  min-width:      70px;
  color:          var(--c-text-light);
  font-weight:    700;
  text-transform: uppercase;
  font-size:      .62rem;
  letter-spacing: .07em;
  margin-right:   4px;
}

.plan-widget-actions {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
  align-items: center;
}
.plan-widget-actions .plan-card-edit {
  margin-left: auto;
  font-size:   .95rem;
  opacity:     .35;
}

.plan-widget-footer {
  font-size:     .8rem;
  color:         var(--c-text-muted);
  padding-top:   8px;
  border-top:    1px solid var(--c-border-lt);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.plan-widget-extras {
  margin-top:     6px;
  padding-top:    8px;
  border-top:     1px dashed var(--c-border-lt);
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.plan-widget-extra-leg {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   .78rem;
  color:       var(--c-text-muted);
  flex-wrap:   wrap;
}
.plan-widget-extra-time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.plan-widget--empty {
  align-items:   center;
  text-align:    center;
  padding:       22px 16px 18px;
  flex-direction: column;
  opacity:       .78;
}
.plan-widget--empty .plan-widget-badge {
  background: var(--c-bg-muted);
  color:      var(--c-text-muted);
  box-shadow: none;
}
.plan-widget-empty-msg {
  font-size: .85rem;
  color:     var(--c-text-muted);
}

/* Dark mode */
html[data-theme="dark"] .plan-widget--stay   { --widget-accent-soft: #1f1638; }
html[data-theme="dark"] .plan-widget--travel { --widget-accent-soft: #0c2732; }
html[data-theme="dark"] .plan-widget-badge   { box-shadow: 0 3px 12px rgba(0,0,0,0.45); }
html[data-theme="dark"] .plan-widget-meta    { color: var(--c-text); }

/* ── Observer (non-participant) event items ──────────────── */
/*
 * Ghost style: muted fill (--c-bg-muted instead of the card surface),
 * thinner softened accent bar, and modest opacity — so observer items
 * recede structurally rather than just through transparency.
 * Hover lifts opacity only slightly (to ~0.72) — never back to the
 * visual weight of the user's own events.
 * The ✏️ edit button remains functional — editing rights are global.
 */

/* ── Shared observer base — opacity + thin border (all contexts) ─ */
/*
 * All three observer variants use the same opacity level and the same
 * thinned accent bar so they read identically regardless of view.
 * No background override — the card surface stays whatever the
 * container provides; only opacity dims it uniformly.
 */
.plan-item--observer,
.plan-stay-card--observer,
.plan-travel-row--observer {
  opacity:    0.6;
  transition: opacity .15s;
}
.plan-item--observer:hover,
.plan-stay-card--observer:hover,
.plan-travel-row--observer:hover { opacity: 0.74; }

/* Thinned accent bars — all contexts */
.plan-item--observer      { border-left-width: 2px; box-shadow: none; padding: 7px 12px; }
.plan-stay-card--observer { border-left-width: 2px; }
.plan-travel-row--observer { border-left-width: 2px; }

.plan-item--observer:hover { box-shadow: none; }

/* Softened accent bar colours — timeline */
.plan-item--observer.plan-item--transport { border-left-color: #06B6D480; }
.plan-item--observer.plan-item--stay      { border-left-color: #8B5CF680; }
.plan-item--observer.plan-item--activity  { border-left-color: #22C55E80; }
.plan-item--stay-mid.plan-item--observer  { border-left-color: #8B5CF640; }

/* Softened accent bar colours — list views */
.plan-stay-card--observer  { border-left-color: #8B5CF680; }
.plan-travel-row--observer { border-left-color: #06B6D480; }

/* Hide secondary content in timeline items */
.plan-item--observer .plan-item-notes,
.plan-item--observer .plan-ref,
.plan-item--observer .plan-pill--add { display: none; }

/* Smaller text in timeline observer items — matches transport view proportions */
.plan-item--observer .plan-item-title    { font-size: .82rem; font-weight: 500; }
.plan-item--observer .plan-route-from,
.plan-item--observer .plan-route-to      { font-size: .84rem; font-weight: 500; }
.plan-item--observer .plan-dep-time__dep { font-size: .9rem;  font-weight: 700; }
.plan-item--observer .plan-dep-time__arr { font-size: .78rem; }

/* Participant pills: move above title row, drop the "Participants:" label */
.plan-item--observer .plan-participant-row {
  order:         -1;
  margin-top:    0;
  margin-bottom: 1px;
  gap:           3px;
}
.plan-item--observer .plan-participant-lbl { display: none; }
.plan-item--observer .plan-participant-row .plan-pill {
  font-size: .68rem;
  padding:   2px 7px;
}

/* ── Context B: Stays list-view cards ────────────────────── */
.plan-stay-card--observer {
  padding: 9px 14px;
}

/* Compact body: participant pill above name, then name + dates only */
.plan-stay-card--observer .plan-stay-icon  { font-size: 1.25rem; }
.plan-stay-card--observer .plan-stay-name  { font-size: .86rem; }
.plan-stay-card--observer .plan-stay-dates { font-size: .74rem; }
.plan-stay-card--observer .plan-stay-body  { gap: 2px; }
.plan-stay-card--observer .plan-stay-address,
.plan-stay-card--observer .plan-stay-times,
.plan-stay-card--observer .plan-stay-notes,
.plan-stay-card--observer .plan-stay-ref   { display: none; }

/* Participant pill at top of stay card body */
.plan-stay-card--observer .plan-participant-row {
  order:         -1;
  margin-top:    0;
  margin-bottom: 2px;
}
.plan-stay-card--observer .plan-participant-lbl { display: none; }
.plan-stay-card--observer .plan-pill--add       { display: none; }
.plan-stay-card--observer .plan-participant-row .plan-pill {
  font-size: .68rem;
  padding:   2px 7px;
}

/* ── Context B: Transport & Activities list-view rows ─────── */
.plan-travel-row--observer {
  padding:     7px 14px;
  align-items: center;
}
/* opacity / hover / border-left-width come from the shared block above */

/* Collapse body to single horizontal line */
.plan-travel-row--observer .plan-travel-body {
  flex-direction: row;
  align-items:    center;
  gap:            8px;
  flex-wrap:      nowrap;
  overflow:       hidden;
}
.plan-travel-row--observer .plan-dep-time {
  margin:      0;
  flex-shrink: 0;
}
.plan-travel-row--observer .plan-dep-time__dep { font-size: .82rem; }
.plan-travel-row--observer .plan-dep-time__arr { font-size: .74rem; }
.plan-travel-row--observer .plan-route-from,
.plan-travel-row--observer .plan-route-to      { font-size: .85rem; }
.plan-travel-row--observer .plan-travel-meta,
.plan-travel-row--observer .plan-travel-ref    { display: none; }

/* Participant pill: first item in the horizontal row, no label */
.plan-travel-row--observer .plan-participant-row {
  order:       -1;
  flex-shrink: 0;
  margin-top:  0;
  gap:         3px;
}
.plan-travel-row--observer .plan-participant-lbl { display: none; }
.plan-travel-row--observer .plan-pill--add       { display: none; }
.plan-travel-row--observer .plan-participant-row .plan-pill {
  font-size: .68rem;
  padding:   2px 7px;
}

/* ── Dark mode ───────────────────────────────────────────── */
html[data-theme="dark"] .plan-badge--in  { background: #3b1f6e; color: #c4b5fd; }
html[data-theme="dark"] .plan-badge--out { background: #3d0e52; color: #e879f9; }
html[data-theme="dark"] .plan-badge--dep { background: #0c2830; color: #67e8f9; }
html[data-theme="dark"] .plan-badge--arr { background: #0b2118; color: #86efac; }
html[data-theme="dark"] .plan-badge--lug-out     { background: #3a0e0e; color: #fca5a5; }
html[data-theme="dark"] .plan-badge--lug-in      { background: #3a1d0a; color: #fdba74; }
html[data-theme="dark"] .plan-badge--lug-pickup  { background: #0b2118; color: #86efac; }
html[data-theme="dark"] .plan-badge--lug-pending { background: #2a1a08; color: #fbbf24; }

/* Dashboard panel — dark */
html[data-theme="dark"] .plan-panel-card--stay.plan-panel-card--active     { background: #1a1428; }
html[data-theme="dark"] .plan-panel-card--travel.plan-panel-card--active   { background: #0d1e25; }
html[data-theme="dark"] .plan-panel-card--activity.plan-panel-card--active { background: #0d1f14; }
html[data-theme="dark"] .plan-panel-badge--soon { background: #2d1f07; color: #FBBF24; }

/* Main sidebar cards — dark */
html[data-theme="dark"] .plan-cal-day--today { background: var(--c-sakura-lt) !important; }

html[data-theme="dark"] .plan-day-hdr { background: var(--c-bg); }

html[data-theme="dark"] .btn-danger {
  background: #2d1515; color: #f87171; border-color: #7f1d1d;
}
html[data-theme="dark"] .planner-type-btn         { background: var(--c-bg-card); }
html[data-theme="dark"] .planner-type-btn:hover   { background: var(--c-bg-muted); }

/* ── Standalone webapp sticky header adjustment ──────────── */
@media (max-width: 600px) {
  html.standalone .plan-day-hdr {
    top: calc(104px + env(safe-area-inset-top, 44px) + var(--controls-h));
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet & below (≤ 860px)
   Sub-view dashboard & main layout collapse to single column
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* ── Prevent grid overflow: ALL grid children must shrink ── */
  .planner-main-timeline,
  .planner-main-col2,
  .planner-main-col3,
  .planner-dash-list,
  .planner-dash-panel { min-width: 0; }

  /* ── Sub-view dashboard (stays / travel / activities) ────── */
  .planner-dash-layout {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   16px;
    max-width:             none;
    margin:                0;
  }
  /* Panel compact strip appears above the list */
  .planner-dash-panel { order: -1; }
  .plan-panel-card {
    position:         static;
    border-top-width: 3px;
    padding:          14px 16px;
    gap:              8px;
  }
  /* Remove max-width constraints inside dash list */
  .planner-dash-list .planner-stays-list,
  .planner-dash-list .planner-travel-list { max-width: none; margin: 0; }

  /* ── Main all-view layout ─────────────────────────────────── */
  .planner-main-layout {
    display:               grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "col2"
      "col3"
      "timeline";
    row-gap:    16px;
    column-gap: 0;
    max-width:  none;
    margin:     0;
  }
  .planner-main-col2,
  .planner-main-col3 { position: static; }
  .planner-main-timeline .planner-timeline { max-width: none; margin: 0; }

  /* ── Strip down the sidebar cards to horizontal layout ────── */
  .plan-sidebar-card { padding: 14px 16px; gap: 10px; }

  /* Status card: row layout for stats + progress */
  .plan-status-stats {
    justify-content: flex-start;
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — Phone (≤ 600px)
   iOS-style compact, full-width, touch-optimised layout.
   Spacing matches the Places card-view: 16px from each screen
   edge, 12px gap between items, card-level border-radius.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Safety net: no horizontal scroll on any planner view ── */
  .planner-main-layout,
  .planner-dash-layout,
  .planner-main-timeline,
  .planner-dash-list,
  .planner-dash-panel,
  .planner-stays-list,
  .planner-travel-list,
  .planner-timeline { overflow-x: hidden; max-width: 100%; }

  /* ── Extra inset so planner cards breathe like Place cards ─
     .main-content already provides --pad-page (12px) from each
     edge; adding 4px here gives 16px total — matching iOS
     standard card margins and the Places grid appearance.     */
  .planner-main-layout,
  .planner-dash-layout { padding-left: 4px; padding-right: 4px; }

  /* Tighten the layout row-gaps at phone width */
  .planner-main-layout { row-gap: 12px; }
  .planner-dash-layout { gap: 12px; }

  /* ── Modal / form ─────────────────────────────────────────── */
  .form-row--four-col { grid-template-columns: 1fr 1fr; }
  .form-row--two-col  { grid-template-columns: 1fr; }
  .planner-type-grid  { grid-template-columns: 1fr; gap: 8px; padding: 12px 16px 20px; }
  .planner-type-btn   { flex-direction: row; justify-content: flex-start; padding: 12px 14px; gap: 12px; }
  .planner-type-icon  { height: 28px; }
  .planner-type-icon svg { width: 26px; height: 26px; }
  .planner-type-sub   { display: none; } /* hide sub-label in row layout */

  /* ── Timeline ─────────────────────────────────────────────── */
  .plan-day-hdr    { padding: 8px 0 6px; gap: 6px; position: static; }
  .plan-day-num    { font-size: .62rem; padding: 2px 7px; }
  .plan-day-lbl    { font-size: .85rem; }

  /* Timeline items — card feel, 3px accent border */
  .plan-item { padding: 11px 13px; gap: 8px; border-left-width: 3px; border-radius: var(--r-md); }
  .plan-item-icon  { font-size: 1.1rem; }
  .plan-item-title { font-size: .87rem; }
  .plan-item-address,
  .plan-item-notes { font-size: .76rem; }
  .plan-time  { font-size: .8rem; }
  .plan-meta,
  .plan-ref   { font-size: .74rem; }

  /* Timeline section gap between day groups */
  .planner-timeline { display: flex; flex-direction: column; gap: 4px; }

  /* Mid-stay bar */
  .plan-item--stay-mid { padding: 4px 10px; }

  /* ── Travel list ──────────────────────────────────────────── */
  /* Match place-card inter-item spacing */
  .planner-travel-list { gap: 10px; }
  .plan-travel-row {
    padding:      11px 14px;
    gap:          10px;
    align-items:  flex-start;
    border-radius: var(--r-md);
  }
  .plan-travel-date {
    min-width:   38px;
    font-size:   .66rem;
    padding-top: 2px;
    line-height: 1.3;
  }
  .plan-travel-icon { font-size: 1.1rem; }
  .plan-travel-body { gap: 3px; }
  .plan-route-from,
  .plan-route-to {
    font-size:     .87rem;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     140px;
  }
  .plan-travel-meta,
  .plan-travel-ref  { font-size: .73rem; }

  /* Departure time in list/timeline */
  .plan-dep-time__dep { font-size: .95rem; }
  .plan-dep-time__arr { font-size: .78rem; }

  /* ── Stay cards ───────────────────────────────────────────── */
  /* Match place-card inter-item spacing */
  .planner-stays-list { gap: 10px; }
  .plan-stay-card {
    padding:           13px 15px;
    gap:               10px;
    border-left-width: 3px;
    border-radius:     var(--r-md);
  }
  .plan-stay-icon  { font-size: 1.4rem; }
  .plan-stay-name  { font-size: .92rem; }
  .plan-stay-dates { font-size: .76rem; }
  .plan-stay-address,
  .plan-stay-times,
  .plan-stay-ref,
  .plan-stay-notes { font-size: .76rem; }

  /* ── Dashboard panel cards (sub-view, shown as top strip) ─── */
  .plan-panel-card {
    padding:          13px 15px;
    gap:              8px;
    border-top-width: 3px;
    border-radius:    var(--r-md);
  }
  .plan-panel-name    { font-size: .93rem; }
  .plan-panel-detail  { font-size: .78rem; }
  .plan-panel-status  { font-size: .64rem; }
  .plan-panel-route-from,
  .plan-panel-route-to { font-size: .9rem; }
  .plan-panel-route { gap: 5px; }

  /* ── Info widgets on mobile — single-row compact layout ────
     Hide heavy sections (metas / actions / footer / status pill /
     subtitle / route / times) so the widget collapses to:
       [ badge | title + mobile-sub | Maps button ]                */
  .plan-widget {
    position:        static;
    padding:         12px 14px;
    gap:             0;
    border-radius:   var(--r-lg);
    border-top-width: 3px;
  }
  .plan-widget-head {
    gap:         11px;
    align-items: center;
  }
  .plan-widget-head-text {
    flex:        1 1 auto;
    min-width:   0;
    gap:         2px;
  }
  .plan-widget-badge  { width: 44px; height: 44px; }
  .plan-widget-icon   { width: 22px; height: 22px; }
  .plan-widget-title {
    font-size:     1rem;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
  }
  /* Hide the expanded chrome on mobile */
  .plan-widget-status,
  .plan-widget-subtitle,
  .plan-widget-times,
  .plan-widget-extras,
  .plan-widget-metas,
  .plan-widget-actions,
  .plan-widget-footer { display: none; }

  /* On mobile Card view: keep only the two compact widgets above the timeline.
     Hide trip-status card, Today/Coming-up card (col2) and the mini-calendar
     column (col3). Desktop layout is untouched. */
  .planner-main-col2 > .plan-sidebar-card,
  .planner-main-col3 { display: none; }
  /* Transport route becomes the primary line (equivalent to title). */
  .plan-widget-route { gap: 6px; flex-wrap: nowrap; overflow: hidden; }
  .plan-widget-route-from,
  .plan-widget-route-to {
    font-size:     1rem;
    font-weight:   800;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    min-width:     0;
  }
  /* Show the mobile-only slots */
  .plan-widget-mobile-sub {
    display:       block;
    font-size:     .78rem;
    color:         var(--c-text-muted);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    line-height:   1.3;
  }
  .plan-widget-mobile-nav {
    display:     flex;
    flex-shrink: 0;
    margin-left: auto;
  }
  .plan-widget-mobile-nav .card-maps-btn {
    padding:      9px 14px;
    font-size:    1rem;
    line-height:  1;
    min-width:    48px;
    min-height:   44px;
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    gap:          0;
  }
  .plan-widget-mobile-nav .gmaps-icon { height: 20px; }
  /* Empty-state still compact */
  .plan-widget--empty { padding: 14px 12px; }

  /* ── Main sidebar cards ───────────────────────────────────── */
  .plan-sidebar-card { padding: 13px 15px; gap: 9px; border-radius: var(--r-md); }
  .plan-sidebar-title   { font-size: .66rem; }
  .plan-status-phase    { font-size: .92rem; }
  .plan-status-stat-val { font-size: 1rem; }
  .plan-status-stat-lbl { font-size: .6rem; }
  .plan-status-dates    { font-size: .72rem; }

  /* Today card rows */
  .plan-today-row   { padding: 7px 0; gap: 8px; }
  .plan-today-icon  { font-size: 1rem; }
  .plan-today-label { font-size: .65rem; }
  .plan-today-val   { font-size: .84rem; }
  .plan-today-sub   { font-size: .74rem; }

  /* ── Mini trip calendar ───────────────────────────────────── */
  .plan-cal-grid    { gap: 1px; }
  .plan-cal-hdr     { font-size: .58rem; padding-bottom: 3px; }
  .plan-cal-day     { min-height: 32px; padding: 3px 1px 2px; border-radius: 4px; }
  .plan-cal-num     { font-size: .7rem; }
  .plan-cal-dots    { gap: 1px; min-height: 5px; }
  .plan-cal-dot     { width: 4px; height: 4px; }
  .plan-cal-legend  { font-size: .62rem; gap: 8px; }
  .plan-cal-legend .plan-cal-dot { width: 6px; height: 6px; }

  /* ── Participant pills ────────────────────────────────────── */
  .plan-participant-row { gap: 4px; margin-top: 5px; }
  .plan-participant-lbl { font-size: .68rem; padding-top: 3px; }
  .plan-pills           { gap: 3px; }
  .plan-pill            { font-size: .72rem; padding: 2px 8px; }

  /* ── Edit button ──────────────────────────────────────────── */
  .plan-card-edit { font-size: .75rem; padding: 3px 5px; opacity: .35; }
}

/* ════════════════════════════════════════════════════════════
   Doc ↔ Event linking – planner-side styles
   ════════════════════════════════════════════════════════════ */

/* ── Doc pills on event cards ────────────────────────────── */
.plan-event-doc-row {
  display:     flex;
  align-items: flex-start;
  gap:         6px;
  flex-wrap:   wrap;
  margin-top:  4px;
}
.plan-event-doc-lbl {
  font-size:   .72rem;
  font-weight: 600;
  color:       var(--c-text-muted);
  white-space: nowrap;
  padding-top: 4px;
}
.plan-pill--doc {
  background:  var(--c-sakura-lt);
  border-color: var(--c-sakura);
  color:        var(--c-primary);
  cursor:       pointer;
  transition:   background .12s, box-shadow .12s;
}
button.plan-pill--doc:hover { background: var(--c-sakura); box-shadow: var(--shadow-sm); }
.plan-pill--doc-private {
  opacity:        .4;
  cursor:         default;
  pointer-events: none;
}

/* ── Doc picker in event modals ──────────────────────────── */
.plan-doc-attach-area {
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
  align-items: center;
}
.plan-doc-pills {
  display:  flex;
  flex-wrap: wrap;
  gap:      4px;
}
.plan-doc-pill {
  position:       relative;
  padding-right:  22px !important;
}
.plan-doc-pill-remove {
  position:  absolute;
  right:     5px;
  top:       50%;
  transform: translateY(-50%);
  background: none;
  border:    none;
  cursor:    pointer;
  font-size: 12px;
  color:     var(--c-text-muted);
  line-height: 1;
  padding:   0 2px;
}
.plan-doc-pill-remove:hover { color: var(--c-text); }
.plan-doc-empty-hint {
  font-size: 12.5px;
  color:     var(--c-text-muted);
  margin:    2px 0 0;
}

/* ── Shared entity picker (event modals + doc modal) ─────── */
.plan-entity-picker,
.doc-entity-picker {
  margin-top:     6px;
  border:         1px solid var(--c-border);
  border-radius:  var(--r-md);
  background:     var(--c-bg-card);
  box-shadow:     var(--shadow-md);
  overflow:       hidden;
  max-height:     240px;
  display:        flex;
  flex-direction: column;
}
.plan-entity-picker-search,
.doc-entity-picker-search {
  padding:       7px 8px;
  border-bottom: 1px solid var(--c-border);
}
.plan-picker-search-input,
.doc-entity-picker-search-input {
  width:  100%;
  font-size: 13px;
}
.plan-entity-picker-list,
.doc-entity-picker-list {
  overflow-y: auto;
  flex:       1;
}
.plan-entity-picker-item,
.doc-entity-picker-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     7px 12px;
  cursor:      pointer;
  border-bottom: 1px solid var(--c-border-lt);
  transition:  background .1s;
  font-size:   13px;
}
.plan-entity-picker-item:last-child,
.doc-entity-picker-item:last-child { border-bottom: none; }
.plan-entity-picker-item:hover,
.doc-entity-picker-item:hover      { background: var(--c-bg-muted); }
.plan-entity-picker-item--selected,
.doc-entity-picker-item--selected  { background: var(--c-sakura-lt); }
.plan-entity-picker-item input[type="checkbox"],
.doc-entity-picker-item  input[type="checkbox"] {
  accent-color: var(--c-primary);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.plan-entity-picker-icon,
.doc-entity-picker-icon {
  flex-shrink: 0;
  width:       20px;
  text-align:  center;
  display:     flex;
  align-items: center;
  justify-content: center;
}
.plan-entity-picker-name,
.doc-entity-picker-name {
  flex:         1;
  font-weight:  500;
  color:        var(--c-text);
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}
.plan-entity-picker-meta,
.doc-entity-picker-meta {
  font-size:   11px;
  color:       var(--c-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.plan-entity-picker-empty,
.doc-entity-picker-empty {
  padding:    12px;
  text-align: center;
  font-size:  13px;
  color:      var(--c-text-muted);
}

/* ── Pill with remove button (shared: both pickers) ─────── */
.plan-doc-event-pill {
  position:       relative;
  padding-right:  22px !important;
}
html[data-theme="dark"] .plan-pill--doc {
  background:  #3B1B6A;
  border-color: #7C3AED;
  color:        #C4B5FD;
}
html[data-theme="dark"] button.plan-pill--doc:hover { background: #4C1E7F; }