/* ================================================================================================
     3a — the black-and-gold pass, applied inline rather than as a second file: this app is one
     document by design, the service worker caches one document, and a separate stylesheet would be
     one more request that can arrive late and repaint the page.
     Kept verbatim from the designer apart from that. Nothing renamed, nothing re-nested. The two
     display:none rules hide the ".dcap" column header and the repeated ".dhint" instruction lines —
     neither carries a handler, and the crowding they cause is the thing being fixed.
     ================================================================================================ */
/* ==================================================================================================
   bosla-3a.css — the 3a look as one drop-in stylesheet.

   INSTALL
     Put this file next to index.html and add ONE line as the LAST thing in the head element:
        link rel="stylesheet" href="bosla-3a.css"
     It must come after your existing style block so it wins on source order.
     No @import, no webfont: same-origin file, CSP-safe. Fonts are referenced by the family names
     you already self-host ("Playfair Display", "Plus Jakarta Sans", "IBM Plex Sans Arabic").

   RULES IT FOLLOWS
     Nothing is renamed, nothing is re-nested, no element is hidden that carries a handler.
     Every colour comes from the tokens already in your :root. Only two tokens are added (below),
     because --on-amber / --on-cta / --on-teal were defined only inside prefers-color-scheme blocks
     and go undefined whenever data-theme disagrees with the OS.

   MAP OF SECTIONS
     1  token gap-fill        6  stop rows (.slot)
     2  base + typography     7  floating buttons and tab bar
     3  surfaces (cards)      8  drawer, sheets, toast
     4  buttons and chips     9  chat
     5  day cards (.day)     10  density: the repeated instruction lines
   ================================================================================================== */


/* 1 ── token gap-fill ============================================================================ */
:root[data-theme="dark"]{--on-amber:#14110f;--on-cta:#211605;--on-teal:#14110f}
:root[data-theme="light"]{--on-amber:#221c15;--on-cta:#f7f4ee;--on-teal:#f7f4ee}


/* 2 ── base + typography =========================================================================
   3a's scale: display serif for titles only, body sans everywhere else, monospace reserved for
   times, distances, prices and counts. Nothing between 15px and 24px — the gap is what makes a
   heading read as a heading. */
body{background:var(--paper);color:var(--ink);font-family:var(--ff-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

h1,.h1{font-family:var(--ff-display);font-size:32px;font-weight:600;line-height:1.15;
  letter-spacing:-.005em;margin:0 0 8px;text-wrap:pretty}
h2,.h2{font-family:var(--ff-display);font-size:24px;font-weight:600;line-height:1.2;margin:0 0 8px;
  text-wrap:pretty}
h3{font-family:var(--ff-body);font-size:15px;font-weight:600;line-height:1.35;margin:0 0 6px}
p{margin:0 0 12px;color:var(--muted);font-size:14.5px;line-height:1.6;text-wrap:pretty}

/* the uppercase micro-label earns its place only above a group, never as a heading */
.eyebrow{font-family:var(--ff-body);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
label{font-size:12.5px;font-weight:600;color:var(--muted)}

a{color:var(--amber-ink);text-decoration-color:color-mix(in srgb,var(--amber-ink) 45%,transparent);
  text-underline-offset:3px}
a:hover{color:var(--amber-ink);text-decoration-color:var(--amber-ink)}

:where(button,a,input,select,textarea):focus-visible{outline:2px solid var(--amber);
  outline-offset:2px;border-radius:8px}

/* numbers, dates, distances, prices */
.hop,.stat .v,.price,.nights,.money{font-family:var(--ff-data);font-variant-numeric:tabular-nums}
.stat .k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.stat .v{font-family:var(--ff-display);font-size:26px;font-weight:600;line-height:1.1;
  color:var(--ink)}


/* 3 ── surfaces ==================================================================================
   One card recipe, applied to every block that was its own shape before: 20px radius, hairline,
   --card ground, generous inner padding, no shadow. Shadows are for things that float. */
.card,.ticket,.bud,.pack,.transfer,.bookbar,.mapcard,.flycard,.staybar,.introhead,
#mytrips .trip,#lastTrip,#saved .svitem,#community .cmcard{
  background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:none}
.card,.bud,.pack,.transfer,.bookbar,.flycard,.staybar{padding:18px}
.mapcard{overflow:hidden}

/* the ticket was the one saturated block in the app; on 3a it is the quietest, because the
   photograph and the amber CTA are already doing the shouting */
.ticket{padding:20px;background:var(--paper2);color:var(--ink)}
.ticket .eyebrow{color:var(--amber-ink)}

hr,.rule{border:none;border-top:1px solid var(--line);margin:18px 0}


/* 4 ── buttons and chips =========================================================================
   Three weights only: one amber CTA per screen, ghost pills for choices, bare icons for row
   actions. Anything that was a fourth weight collapses into one of these. */

/* the CTA */
.cta,.dayroute,.chatfoot #chatSend,.bookbtn,.tuneanother,#phGo{
  background:var(--amber);color:var(--on-amber,#241a06);border:none;border-radius:16px;
  font-family:var(--ff-body);font-size:15px;font-weight:600;line-height:1.35;padding:16px 18px;
  box-shadow:none;cursor:pointer;text-decoration:none;text-align:center;text-wrap:balance}
.cta:hover,.dayroute:hover,.chatfoot #chatSend:hover,.bookbtn:hover,#phGo:hover{
  background:var(--amber);color:var(--on-amber,#241a06);filter:brightness(1.04)}

/* ghost pills — the whole chip family, on and off */
.chip,.daychip,.stychip,.areachip,.provchip,.wentbtn,.pgtab{
  height:34px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--muted);font-family:var(--ff-body);font-size:12.5px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,color .15s,background .15s}
.chip:hover,.daychip:hover,.stychip:hover,.areachip:hover,.provchip:hover,.pgtab:hover{
  border-color:var(--amber);color:var(--ink)}
.chip.active,.daychip.active,.stychip.active,.areachip.active,.provchip.on,.wentbtn.on,.pgtab.on{
  background:var(--amber);border-color:var(--amber);color:var(--on-amber,#241a06);font-weight:600}

/* secondary, outlined */
.ghost,.menulink,.dayshuffle{font-family:var(--ff-body);font-weight:600;color:var(--amber-ink)}
.dayshuffle{height:30px;padding:0 11px;gap:5px;border:1px solid var(--line);border-radius:999px;
  background:transparent;font-size:11.5px}
.dayshuffle:hover{border-color:var(--amber);color:var(--amber-ink);background:var(--amber-soft)}
.menulink{font-size:12px;margin-inline-start:8px}

/* bare icon buttons */
.picbtn,.infobtn,.svbtn,.swapbtn,.topbtn,.dayshare{
  width:24px;height:24px;padding:0;border:none;border-radius:8px;background:transparent;
  color:var(--muted);opacity:.45;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;transition:opacity .15s,color .15s,background .15s}
.infobtn,.topbtn,.dayshare{border-radius:50%}
.picbtn svg,.infobtn svg,.svbtn svg,.swapbtn svg,.dayshare svg{width:14px;height:14px}
.picbtn:hover,.infobtn:hover,.svbtn:hover,.swapbtn:hover,.topbtn:hover,.dayshare:hover,
.picbtn:focus-visible,.infobtn:focus-visible,.svbtn:focus-visible,.swapbtn:focus-visible,
.infobtn.on,.picbtn.on{opacity:1;color:var(--amber-ink);background:var(--amber-soft);
  border-color:transparent}
.svbtn.on{opacity:1;color:var(--amber-ink);border-color:transparent}
.svbtn.on svg path{fill:var(--amber)}
/* Grouped above with the little icon buttons that sit INSIDE a card, where transparent is right.
   This one is position:fixed and floats over the scrolling itinerary, so it needs something behind
   it — otherwise the day's text runs through a 34px circle drawn as a hairline ring. Same fault as
   the sticky day bar, smaller and easier to miss. */
.topbtn{width:34px;height:34px;border:1px solid var(--line);opacity:.85;
  background:var(--paper2);box-shadow:var(--shadow-fab)}

/* inputs */
input,select,textarea{background:var(--paper2);border:1px solid var(--line);border-radius:14px;
  color:var(--ink);font-family:var(--ff-body);font-size:15px;padding:14px 16px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.9}
input:focus,select:focus,textarea:focus{border-color:var(--amber);outline:none}