/* 5 ── day cards =================================================================================
   Each day is a surface, not a timeline: one day per screen has no sequence to draw, so the rule
   down the side and the dot at the top both go. Header is 15px semibold with the mood line as its
   caption — small enough that the day, the shuffle pill, two icons and the chevron fit one row. */
/* The card was drawn with border-left:none so it could bleed off the edge as a tab. With a 20px
     radius on the other three corners it does not read as a tab — it reads as a card that has slid
     off the screen, and it was the first thing Ahmed noticed. A card either sits inside a gutter or
     is genuinely full-bleed with no radius. This one sits in a gutter, evenly on both sides, which
     also removes the need for a mirrored rule in Arabic. */
  .day{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:0 18px 8px;margin:0 12px 12px;overflow:clip}
.day::before{display:none}
#app[dir="rtl"] .day::before{display:none}

/* the day and its caption own the card's full width; the shuffle pill, the two icons and the
   chevron drop to a row of their own rather than squeezing the title into a third of the card */
.dhead{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:16px 0 12px;cursor:pointer}
.dhtext{flex:1 0 100%;min-width:0}
.dhead .dchev{margin-inline-start:auto}
.day .dlabel{font-family:var(--ff-body);font-size:15px;font-weight:600;line-height:1.35;
  letter-spacing:normal;text-transform:none;color:var(--ink)}
.day h3{font-family:var(--ff-body);font-size:12px;font-weight:400;line-height:1.45;
  color:var(--muted);margin:3px 0 0}
.day .dsum,.day.dcol .dsum{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 8px}
.day.dcol .dsum .dsmore{color:var(--amber-ink);font-weight:600}
.day.dcol .dhead{padding-bottom:8px}
.dchev{margin-top:0;border-right-color:var(--muted);border-bottom-color:var(--muted)}
.infobtn.dayinfo{width:30px;height:30px;margin:0;border-color:transparent}
.infobtn.dayinfo svg{width:16px;height:16px}
.dayshuffle.dayshare{width:30px;padding:0;border-color:transparent;color:var(--muted)}
/* The designer set this at 392px, which is one pixel above the iPhone's 390 — so the label
     vanished on the single most common screen this app runs on, leaving a bare icon whose only
     name was a title attribute no touch device shows. Dropped to 344px: real phones keep the
     words, and only the genuinely tiny ones fall back to the icon. */
  @media (max-width:344px){.dayshuffle span{display:none}.dayshuffle{width:30px;padding:0}}

.dayroute{display:block;margin:16px 0 8px;padding:15px 14px;border-radius:14px;font-size:14px}


/* 6 ── stop rows =================================================================================
   [ time ][ place + meta ][ controls ][ thumbnail ]. The floating uppercase eyebrow becomes the
   left column, and the per-row gold icon goes: the time column is the marker now. The four row
   controls stay tappable but sit at 45% until the row is hovered or focused. */
/* gap:0, because a uniform row gap is paid four times over by the controls and taken out of the
   one string that matters. Spacing is placed deliberately instead: after the time column, around
   the buttons, before the tile. */
.slot{display:flex;align-items:center;gap:0;padding:11px 0;position:relative;
  border-top:1px solid var(--line)}
.slot:first-of-type,.slot.hotelrow{border-top:none}
.slot.hotelrow{padding-top:2px;padding-bottom:11px}
.slot::before{display:block;flex:0 0 20px;width:20px;height:20px;order:-1;margin-inline-end:11px;
  opacity:.9}
/* the column takes clock times (09:00) or word labels (Afternoon) depending on the trip, so it
   sizes to the longest label rather than to a fixed 44px */
/* 56px fitted the Arabic labels and broke the English ones: "Breakfast" and "Afternoon" split
     mid-word into "Breakfas/t" and "Afternoo/n". A slot label is a single word in all three
     languages, so it must never be allowed to break — widen the column and forbid the break rather
     than let the layout hyphenate a word that has no hyphen. */
  .slot .t{position:static;inset:auto;flex:0 0 78px;width:78px;margin-inline-end:12px;padding:0;font-family:var(--ff-data);
  font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.35;
  color:var(--amber-ink);opacity:1;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.slot.extra .t{color:var(--muted)}
/* Where the slot label lives, and why it moved back.
   3a put "Morning"/"Lunch" in a left-hand column. It reads beautifully on a wide card and it costs
   90px of the row — measured: a name beside the action buttons got 91px, while a name on a row
   without buttons got 193px. So every place with a real name wrapped: "Temple of / Debod",
   "Mercado de / San Antón". The label goes back above the name, where it was before today and
   where it costs nothing, and the name gets the width back. Everything else 3a did stays. */
.slot{padding:19px 0 11px}
.slot .t{position:absolute;top:1px;inset-inline-start:31px;flex:none;width:auto;margin:0}
.slot .d{flex:1 1 auto}
/* The hotel row opts out of the top padding so it can sit tight under the header. With the label
   now positioned at the top of the row, that left the word sitting on top of the hotel's name. */
.slot.hotelrow{padding-top:19px}

/* the name asks for 150px and gets first call on the row, but it yields rather than pushing the
   tile out of the card — a hard min-width on a row of non-shrinkable controls overflows the line */
.slot .d{flex:1 1 150px;min-width:0;padding-top:0;font-size:11.5px;line-height:1.5;
  color:var(--muted)}
.slot .d>a:first-child{display:block;font-size:14.5px;font-weight:600;line-height:1.35;
  color:var(--ink);text-decoration:none;white-space:normal;overflow:visible;text-overflow:clip;
  text-wrap:pretty;margin-bottom:2px}
.slot .d>a:first-child:active{color:var(--amber-ink)}
.slot .area{font-size:11.5px;color:var(--muted)}
.hop{font-size:11.5px;color:var(--muted);opacity:.8}
.slot.went .d{opacity:.5}

/* 3a's photo thumbnail, opt-in: the row shows one only once a real photograph is wired to it —
       slot.style.setProperty('--thumb', 'url(' + src + ')')
   at the point where you already resolve data-pic for .picinline / the hover preview. Until then
   .picbtn is the photo affordance and an empty tile would only repeat it. */
.slot[style*="--thumb"]::after{content:'';order:9;flex:0 0 40px;width:40px;height:40px;
  margin-inline-start:8px;border-radius:11px;border:1px solid var(--line);
  background-image:var(--thumb);background-size:cover;background-position:center}
.slot > button{margin:0}
.slot > button:first-of-type{margin-inline-start:6px}
.slot:hover .picbtn,.slot:hover .infobtn,.slot:hover .svbtn,.slot:hover .swapbtn,
.slot:focus-within .picbtn,.slot:focus-within .infobtn,.slot:focus-within .svbtn,
.slot:focus-within .swapbtn{opacity:.7}


/* 7 ── floating buttons and tab bar ============================================================== */
.chatfab,.editfab{border:none;border-radius:50%;background:var(--amber);color:var(--on-amber,#241a06);
  box-shadow:var(--shadow-fab);cursor:pointer}
.editfab{background:var(--card);color:var(--ink);border:1px solid var(--line)}

.tabbar{background:color-mix(in srgb,var(--card) 96%,transparent);border-top:1px solid var(--line);
  backdrop-filter:blur(10px);box-shadow:none}
.tabbar a,.tabbar button{color:var(--muted);font-size:10px;font-weight:500;
  font-family:var(--ff-body)}
.tabbar .on,.tabbar a.on,.tabbar button.on{color:var(--amber-ink);font-weight:600}

/* .pgbar is the STICKY one — it floats over the itinerary while the day scrolls beneath it, so it
   is the single element here that must never be transparent. It was included in this rule and the
   day tabs, "Day 2 of 3" and the Trip info row ended up printed on top of the breakfast and the
   morning stop. The three inside it have the bar behind them and can stay clear. */
.pgtabs,.pgutil,.pgnav{background:transparent;border-color:var(--line)}
.pgbar{background:var(--paper);border-color:var(--line)}
.pgbtn{border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font-family:var(--ff-body);font-size:13px;font-weight:600}
.pgbtn .pgdir{color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase}


/* 8 ── drawer, sheets, toast ===================================================================== */
.drawer,.picpop,.swappick,.tuner{background:var(--card);border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--shadow);color:var(--ink)}
.drawer{border-radius:0 24px 24px 0}
#app[dir="rtl"] .drawer{border-radius:24px 0 0 24px}
.drawer a,.drawer button{color:var(--ink);font-size:15px;font-weight:500;font-family:var(--ff-body)}
.scrim{background:color-mix(in srgb,var(--paper) 62%,#000);backdrop-filter:blur(2px)}
.toast{background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--ink);
  box-shadow:var(--shadow);font-size:13.5px;padding:12px 16px}
.picinline,.infinline{background:var(--paper2);border:1px solid var(--line);border-radius:14px;
  color:var(--muted);font-size:13px;line-height:1.6;padding:14px 16px}
.realtag{font-family:var(--ff-body);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--paper2);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px}


/* 9 ── chat ====================================================================================== */
.chatmsg{border-radius:18px;padding:13px 16px;font-size:14.5px;line-height:1.6;max-width:86%}
.chatmsg:not(.user){background:var(--card);border:1px solid var(--line);color:var(--ink);
  border-bottom-left-radius:4px}
.chatmsg.user{background:var(--amber);color:var(--on-amber,#241a06);border:none;
  border-bottom-right-radius:4px}
.chatfoot{background:var(--paper);border-top:1px solid var(--line)}
.chatfoot input{border-radius:24px;background:var(--paper2)}
.chatfoot #chatSend{width:36px;height:36px;padding:0;border-radius:50%;font-size:15px}


/* 10 ── density ==================================================================================
   The instruction lines and the column header were the crowding: they repeated identically on every
   day of every trip and filled the top of the card before a single place appeared. One quiet line
   stays; the rest is explained on contact by the links and the .hop title attribute. Nothing is
   removed from the DOM — delete these two rules to bring them all back. */
.dbody .dhint{display:none}
.dbody .dhint:first-child{display:block;font-size:11.5px;line-height:1.5;color:var(--muted);
  opacity:.85;margin:0 0 10px}
.dcap{display:none}


/* ── Arabic ======================================================================================
   Plex Arabic carries less at the same pixel size, so the small print goes up a step and letter
   spacing comes off — uppercase tracking does nothing for Arabic letterforms. */
#app[dir="rtl"] .eyebrow,#app[dir="rtl"] label,#app[dir="rtl"] .dlabel,#app[dir="rtl"] .slot .t,
#app[dir="rtl"] .stat .k{letter-spacing:normal;text-transform:none;font-family:var(--ff-body)}
#app[dir="rtl"] .slot .t{flex-basis:66px;width:66px}
#app[dir="rtl"] .slot .t,#app[dir="rtl"] .stat .k,#app[dir="rtl"] .hop,#app[dir="rtl"] .realtag,
#app[dir="rtl"] .slot .area,#app[dir="rtl"] .slot .d{font-size:13px}
#app[dir="rtl"] h1,#app[dir="rtl"] h2{font-family:"IBM Plex Sans Arabic",var(--ff-display);
  font-weight:700;line-height:1.4}
#app[dir="rtl"] .hop{font-family:var(--ff-body)}


/* ── reduced motion ============================================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}


  /* The day card's own button. Only ever rendered when ?card=1 is set, so these rules are
     inert for everyone else — they cost one unmatched selector, not a layout. */
  .dcbtn{display:block;width:100%;margin-top:12px;padding:12px;border-radius:12px;
    border:1px solid var(--line);background:var(--amber-soft);color:var(--amber-ink);
    font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
  .dcbtn:hover,.dcbtn:focus-visible{border-color:var(--amber)}