/* Trip planner — styles (Hebrew, RTL). Vermilion + indigo on cream. One layout for computer and phone:
   a slim top bar (☰ · trip · chat), a side menu on the right and a chat on the left that push the page
   on a wide screen and slide over it on a phone. */
:root {
  --primary: #c93a40;
  --primary-dark: #962228;
  --secondary: #1a2a3a;
  --head: var(--secondary); /* dark text of headings and buttons (light in dark mode, while --secondary stays a dark fill) */
  --accent: #d97706;
  --bg: #faf7f2;
  --card: #ffffff;
  --text: #1f2328;
  --muted: #667085;
  --border: #e8e1d7;
  --soft: #f3eee6;
  --ok: #16a34a;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.05);
  --bar-h: 58px;
  --drawer-w: 290px;
  --chat-w: 400px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* the phone's own strips (the clock at the top, the home line at the bottom). The iPhone app on the home screen can say
     0 for a moment after opening and only then the real size, which pushed the whole top of the site down by itself:
     the size seen last time (--safe-*-known, kept by index.html) holds the place from the very first moment */
  --safe-t: max(env(safe-area-inset-top, 0px), var(--safe-t-known, 0px));
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--safe-b-known, 0px));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overscroll-behavior-x: none; overscroll-behavior-y: none; } /* y: no stretch of the whole site at the top: the site's own pull down (to the overview / refresh) moves the page itself, and the phone's stretch on top of it left the site hanging lower after letting go */
body { font-family: 'Assistant', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; overflow-x: clip; }
body.no-scroll { overflow: hidden; }
a { color: inherit; }
button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
/* no dark flash on a tap: a press opens, it does not mark */
button, a, summary, [data-action] { -webkit-tap-highlight-color: transparent; }
.saved-name:focus:not(:focus-visible), .saved-tile:focus:not(:focus-visible), .near-tap:focus:not(:focus-visible), .near-num:focus:not(:focus-visible) { outline: none; }
img { display: block; max-width: 100%; }
.loading { text-align: center; padding: 60px 0; color: var(--muted); font-size: 17px; }

/* ---------- the page + how it makes room for the panels ---------- */
.page { overflow-x: clip; min-height: 100vh; transition: transform 0.32s var(--ease); }  /* margin is not animated: the page re-lays out once instead of shrinking frame by frame */
.container { max-width: 1480px; margin: 0 auto; padding: 24px clamp(14px, 3vw, 40px) 70px; }
/* the menu (right) and the chat (left) never cover the page: on a computer the page narrows to make room,
   on a narrow window or a phone the page moves aside. Only one of the two is open at a time. */
@media (min-width: 1000px) {
  body.drawer-open .page { margin-right: var(--drawer-w); }
  body.chat-open .page { margin-left: var(--chat-w); }
}
@media (max-width: 999px) {
  /* the menu and the chat slide OVER the page, which stays perfectly still under a dim layer: moving the whole long page
     with them (or locking its scroll at that moment) is what made the slide stutter */
  body.chat-open { background: var(--bg); }
  /* the site stays drawn (frozen in place) under the chat, so it is there as the chat slides away; only the scrim is left out */
  body.chat-open .scrim { display: none !important; }
  .chat { box-shadow: 0 0 40px rgba(15, 23, 42, 0.35); }
}
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(15, 23, 42, 0.12); animation: fade 0.25s ease; }
.scrim[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  min-height: calc(var(--bar-h) + var(--safe-t)); padding: var(--safe-t) 16px 0;
  background: linear-gradient(90deg, #1a2a3a 0%, #22364b 55%, #3a1f2b 100%); color: #fff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.18);
}
.topbar .icon-btn { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.topbar .icon-btn:hover { background: rgba(255, 255, 255, 0.2); }
.topbar .brand .jp { color: #ff8a8f; }
.topbar .brand-text strong { color: #fff; }
.topbar .brand-text small { color: rgba(255, 255, 255, 0.65); }
.topbar .crumb { background: rgba(255, 255, 255, 0.14); color: #fff; }
.icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--head); font-size: 16px; line-height: 1; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.icon-btn:hover { background: var(--soft); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn.ghost { background: transparent; border-color: transparent; }
body.drawer-open #menuBtn { background: var(--card); color: var(--head); border-color: #fff; }
.brand { min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .jp { flex: none; font-family: 'Noto Serif JP', serif; font-size: 22px; line-height: 1; color: var(--primary); }
.brand-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 23px; font-weight: 800; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb { min-width: 0; font-size: 13px; font-weight: 700; color: var(--primary); background: #fdecec; padding: 3px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb:empty { display: none; }
.topbar .chat-btn { margin-inline-start: auto; width: auto; padding: 0 14px; background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 800; font-size: 15px; }
.topbar .chat-btn:hover { background: var(--primary-dark); }
.chat-btn i { font-size: 15px; }
body.chat-open .topbar .chat-btn { background: var(--card); color: var(--primary); border-color: #fff; }

/* ---------- side menu (right) ---------- */
.drawer {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 80; width: var(--drawer-w); max-width: 86vw;
  display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--border);
  padding-top: var(--safe-t); box-shadow: -8px 0 28px rgba(15, 23, 42, 0.08);
  animation: in-right 0.32s var(--ease);
}
.drawer[hidden] { display: none; }
@keyframes in-right { from { transform: translateX(100%); } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: var(--bar-h); padding: 0 12px 0 8px; border-bottom: 1px solid var(--border); }
.drawer-head strong { font-size: 16px; color: var(--head); padding-inline-start: 6px; margin-inline-end: auto; }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; padding-bottom: calc(16px + var(--safe-b)); }

.trip-switch { display: flex; padding: 3px; border-radius: 12px; background: var(--soft); }
/* a pick-list: the trip on screen on top; a press opens all the trips and the "new trip" button */
.trip-menu { flex: 1; min-width: 0; }
.trip-menu summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-weight: 800; font-size: 15px; cursor: pointer; list-style: none; color: inherit; }
.trip-menu summary::-webkit-details-marker { display: none; }
.trip-menu summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-menu summary .chev { font-size: 12px; transition: transform 0.2s; }
.trip-menu[open] summary .chev { transform: rotate(180deg); }
/* the trips as separate tiles, two in a row */
.trip-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 4px 4px; }
.trip-switch .trip-list button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; padding: 12px 8px; border-radius: 14px; text-align: center; background: rgba(15, 23, 42, 0.05); border: 1.5px solid transparent; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.trip-switch .trip-list button:hover { transform: translateY(-1px); }
.trip-list .trip-flag { font-size: 28px; line-height: 1; }
.trip-list .trip-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.trip-list small { font-size: 11px; font-weight: 600; color: color-mix(in srgb, currentColor 70%, transparent); }
.trip-list .trip-add i { font-size: 22px; }
.drawer .trip-switch .trip-list button { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); }
.drawer .trip-switch .trip-list button.active { background: var(--card); border-color: #fff; }
.drawer .trip-switch .trip-list button:hover:not(.active) { background: rgba(255, 255, 255, 0.14); }
.trip-switch .trip-list .trip-add { border: 1.5px dashed currentColor; opacity: 0.85; }
.drawer .trip-switch .trip-list .trip-add { background: transparent; border-color: rgba(255, 255, 255, 0.45); }
.trip-switch .trip-add:hover { opacity: 1; }
.drawer .trip-menu summary { color: #fff; }
/* the new-trip sheet: photos of the place to pick the cover from */
.trip-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.trip-pic { padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--soft); cursor: pointer; }
.trip-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trip-pic.on { border-color: var(--primary); }
.trip-pics-note { grid-column: 1 / -1; margin: 0; padding: 14px 12px; border-radius: 10px; background: var(--soft); font-size: 13px; font-weight: 600; color: var(--muted); }
#tripForm { max-height: 92vh; overflow-y: auto; }
.trip-switch button { flex: 1; padding: 8px 10px; border: none; border-radius: 9px; background: transparent; color: var(--head); font-weight: 800; font-size: 14px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.trip-switch button.active { background: var(--card); color: var(--primary); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); }

.tabs { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 10px; }
.tab-sep { display: flex; align-items: center; gap: 8px; margin: 8px 4px 4px; font-size: 11.5px; font-weight: 800; color: var(--muted); letter-spacing: 0.3px; }
.tab-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.tab-line { height: 1px; margin: 10px 4px; background: var(--border); } /* between the home screen and the days, and between the days and the rest of the site */
.tab { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--head); font-weight: 700; font-size: 15px; transition: background 0.12s; }
@media (hover: hover) { .tab:hover { background: var(--soft); } } /* on a phone a tapped tab would stay lit after the page changes */
.tab.active { background: #fdecec; color: var(--primary); }
.tab-icon { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--soft); font-size: 13px; }
.tab-icon b { font-size: 14px; }
.tab.active .tab-icon { background: var(--primary); color: #fff; }
.tab-label { flex: 1; min-width: 0; }
.tab-label small { font-weight: 600; color: var(--muted); font-size: 12px; margin-inline-start: 4px; }
.tab .pct { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--soft); padding: 1px 7px; border-radius: 999px; direction: ltr; }

.tools { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.progress { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.progress .bar { flex: 1; height: 6px; background: var(--soft); border-radius: 99px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width 0.3s; }
.progress b { color: var(--head); direction: ltr; }
.date-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.date-pick input { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; background: var(--card); font-size: 14px; }
.tool-row { display: flex; gap: 8px; }
.tool-row .btn { flex: 1; justify-content: center; }

.search { position: relative; }
.search > i { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 12px; color: var(--muted); font-size: 13px; pointer-events: none; }
.search input { width: 100%; padding: 9px 34px 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-size: 15px; }
.search input:focus { outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px rgba(201, 58, 64, 0.12); }
.search-results { position: absolute; top: calc(100% + 6px); inset-inline: 0; max-height: 60vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); z-index: 5; padding: 4px; }
.search-results[hidden] { display: none; }
.sr { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; text-decoration: none; cursor: pointer; }
.sr:hover, .sr.active { background: var(--soft); }
.sr .sr-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--c, #64748b); color: #fff; display: grid; place-items: center; font-size: 12px; }
.sr .sr-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sr strong { font-size: 14px; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr mark { background: #fde68a; color: inherit; border-radius: 3px; }
.sr-empty { padding: 12px; color: var(--muted); font-size: 14px; text-align: center; }
.sr-hint { display: none; }

/* ---------- chat (left) ---------- */
.chat {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 85; width: var(--chat-w); max-width: 100vw;
  display: flex; flex-direction: column; background: var(--card); border-right: 1px solid var(--border);
  padding-top: var(--safe-t); box-shadow: 8px 0 28px rgba(15, 23, 42, 0.08);
  animation: in-left 0.32s var(--ease);
}
.chat[hidden] { display: none; }
@keyframes in-left { from { transform: translateX(-100%); } }
.chat-head { display: flex; align-items: center; justify-content: space-between; height: var(--bar-h); padding: 0 8px 0 12px; border-bottom: 1px solid var(--border); }
.chat-head strong { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--head); padding-inline-start: 4px; }
.chat-head strong i { color: var(--primary); }
.chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); -webkit-overflow-scrolling: touch; }
.chat-msg { max-width: 88%; padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.5; word-break: break-word; }
.chat-msg.user { align-self: flex-start; background: var(--secondary); color: #fff; border-end-start-radius: 4px; white-space: pre-wrap; }
.chat-msg.bot { align-self: flex-end; background: var(--card); border: 1px solid var(--border); border-end-end-radius: 4px; }
.chat-msg.user, .chat-msg.bot { cursor: copy; -webkit-tap-highlight-color: transparent; transition: transform 0.15s, box-shadow 0.15s; }
.chat-msg.copied { transform: scale(0.97); box-shadow: 0 0 0 3px rgba(255, 138, 143, 0.45); }
/* the master lock: the button shows open in color while the chat is unlocked; its window asks for the password */
#chatLockBtn.on { color: #fbbf24; }
.chat-wipe { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 10px; width: 100%; padding: 10px 16px; border: 1.5px solid #fecaca; border-radius: 12px; background: var(--card); color: #b91c1c; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.chat-master { flex: none; padding: 10px 12px; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1); animation: master-drop 0.2s ease both; }
.chat-master[hidden] { display: none; }
.chat-master-row { display: flex; align-items: center; gap: 8px; }
.chat-master-row .field { flex: 1; min-width: 0; }
.chat-master-row input { font-size: 16px; } /* 16px: the iPhone does not zoom in when typing */
.chat-master-err { margin: 8px 2px 0; color: #b91c1c; font-size: 13.5px; font-weight: 600; }
@keyframes master-drop { from { opacity: 0; transform: translateY(-6px); } }
.chat-msg.err { align-self: center; background: #fee2e2; color: #991b1b; font-size: 14px; }
.chat-msg pre { background: #1e293b; color: #e2e8f0; padding: 8px 10px; border-radius: 8px; direction: ltr; text-align: left; overflow-x: auto; font-size: 12.5px; margin: 6px 0; }
.chat-msg code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; direction: ltr; unicode-bidi: isolate; font-size: 13px; }
.chat-msg ul { padding-inline-start: 18px; margin: 4px 0; }
.chat-note { align-self: center; font-size: 12.5px; color: #047857; background: #ecfdf5; border-radius: 999px; padding: 3px 12px; }
.chat-typing { align-self: flex-end; display: flex; gap: 4px; padding: 8px 12px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: blink 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; } .chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.chat-row { display: flex; gap: 8px; }
.chat-pin { margin: auto; width: 100%; max-width: 260px; }
.chat-pin input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: 10px 16px; font-size: 20px; text-align: center; direction: ltr; }
.chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px; padding-bottom: calc(10px + var(--safe-b)); border-top: 1px solid var(--border); background: var(--card); }
.chat-input textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 20px; padding: 9px 14px; font-size: 16px; line-height: 1.4; max-height: 160px; background: var(--bg); }
.chat-input textarea:focus { outline: none; border-color: var(--head); background: var(--card); }
.chat-attach { display: flex; gap: 8px; padding: 8px 10px 0; background: var(--card); border-top: 1px solid var(--border); overflow-x: auto; }
.chat-attach[hidden] { display: none; }
.chat-attach .thumb { position: relative; flex: none; }
/* a video: one picture with a play mark in its middle (its still pictures go to the chat, the screen shows one video) */
.thumb.vid .vid-mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.thumb.vid .vid-mark i { width: 26px; height: 26px; display: grid; place-items: center; padding-inline-start: 2px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; }
.msg-pics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.msg-pics .thumb { position: relative; }
.chat-msg.user .msg-pics img { margin-bottom: 0; max-height: 160px; }
.chat-attach img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
/* an attached file (a PDF, a document…): its icon and name in a box of the same height as a picture */
.chat-attach .thumb.file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 86px; height: 56px; padding: 4px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--head); }
.chat-attach .thumb.file i { font-size: 18px; }
.chat-attach .thumb.file span { max-width: 100%; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text, inherit); }
.chat-attach button { position: absolute; top: -6px; inset-inline-end: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--secondary); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.chat-msg.user img { display: block; max-width: 100%; max-height: 180px; border-radius: 10px; margin-bottom: 6px; }
.chat-input .btn.ghost { background: transparent; color: var(--head); border: 1px solid var(--border); }
.chat-input .btn { flex: none; width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.1s; background: var(--primary); color: #fff; }
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: scale(0.97); }
.btn-ghost { background: var(--card); color: var(--head); border-color: var(--border); }
.btn-ghost:hover { background: var(--soft); }
.btn-sm { padding: 6px 12px; font-size: 13.5px; }
.btn-map { background: #0b57d0; }
.btn-map:hover { background: #0842a0; }
.btn-danger { background: transparent; color: var(--muted); border: none; padding: 4px 8px; }
.btn-danger:hover { color: var(--primary); background: transparent; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; border-radius: 22px; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-start; padding: 44px 24px 16px; margin-bottom: 14px;
  background: linear-gradient(135deg, #1c1917 0%, #292524 60%, #3f1a1d 100%); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.9; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 14, 14, 0.88) 10%, rgba(18, 14, 14, 0.55) 55%, rgba(18, 14, 14, 0.15)); }
.hero h1, .hero p { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
.hero > *:not(.hero-bg) { position: relative; z-index: 1; }
.hero > .hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-kanji { position: absolute; top: -6px; left: 14px; font-family: 'Noto Serif JP', serif; font-size: 120px; line-height: 1.1; color: rgba(255, 255, 255, 0.07); user-select: none; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: rgba(201, 58, 64, 0.92); padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.hero h1 { font-size: 28px; font-weight: 800; line-height: 1.1; margin-bottom: 6px; }
.hero p { font-size: 14.5px; color: #e7e5e4; max-width: 640px; margin-bottom: 8px; }
.hero-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 14px; }
.hl { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.hl i { color: #f59e0b; font-size: 17px; width: 20px; text-align: center; }
.hl strong { display: block; font-size: 12px; color: #d6d3d1; font-weight: 600; }

/* ---------- sections ---------- */
.section { margin: 26px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.section-head h2 { font-size: 21px; font-weight: 800; color: var(--head); display: flex; align-items: center; gap: 9px; }
.section-head h2 i { color: var(--primary); font-size: 18px; }
.section-head p { color: var(--muted); font-size: 13.5px; }

/* ---------- apps ---------- */
.apps-teaser { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; text-decoration: none; color: var(--head); box-shadow: var(--shadow); transition: border-color 0.15s; }
.apps-teaser:hover { border-color: #93c5fd; }
.apps-teaser-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.apps-teaser-text strong { font-size: 15px; font-weight: 800; }
.apps-teaser-text span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apps-teaser .app-icon { width: 40px; height: 40px; font-size: 17px; border-radius: 11px; }
.apps .section-head { align-items: center; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.app { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.app-head { display: flex; align-items: center; gap: 12px; }
.app-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-head .badge { flex: none; align-self: flex-start; }
.app { transition: background 0.15s, border-color 0.15s; }
.app.on { border-color: #6ee7b7; background: #ecfdf5; }
.app.on .app-links { border-top-color: #a7f3d0; }
.app.on .app-links .check { background: var(--card); }
.app-icon { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; color: #fff; background: var(--c); }
.app-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.app-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 800; color: var(--head); font-size: 15.5px; line-height: 1.2; }
.app-for { font-size: 12.5px; font-weight: 700; color: var(--c); }
.app p { font-size: 14px; line-height: 1.55; color: #475569; margin: 0; }
.app-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.app-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--head); text-decoration: none; }
.app-links a:hover { background: var(--soft); }
.app-links .check { margin-inline-start: auto; gap: 9px; min-height: 38px; font-size: 13.5px; padding: 6px 14px 6px 12px; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.app-links .check input { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid #94a3b8; border-radius: 7px; background: var(--card); display: grid; place-items: center; transition: background 0.15s, border-color 0.15s; }
.app-links .check input::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform 0.15s; }
.app-links .check input:checked { background: var(--ok); border-color: var(--ok); }
.app-links .check input:checked::after { transform: rotate(45deg) scale(1); }
.app-links .check input:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--c) 13%, var(--card)); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 28%, var(--card)); }
.badge.must { --c: #c93a40; }

/* ---------- week table ---------- */
.week { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.week-scroll { overflow: visible; } /* the whole day is laid out in the page, no inner scrolling */
.week-pick { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.week-pick-btn { flex: none; border: 1px solid var(--border); background: var(--card); color: var(--head); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.week-pick-btn small { font-weight: 400; color: var(--muted); }
.week-pick-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.week-pick-btn.on small { color: #fff; }
.week-gutter, .week-gutter-head { position: sticky; inset-inline-start: 0; z-index: 3; background: var(--card); border-inline-end: 1px solid var(--border); }
.week-gutter-head { background: #fcfaf7; }
@media print { .week-pick { display: none; } }
.week-head, .week-body { display: grid; grid-template-columns: 54px repeat(var(--days, 5), minmax(132px, 1fr)); min-width: calc(54px + var(--days, 5) * 140px); }
.week-head { background: #fcfaf7; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 4; }
.week-gutter-head { display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.week-day { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-inline-start: 1px solid var(--border); text-decoration: none; color: var(--head); min-width: 0; }
.week-day:hover { background: var(--soft); }
.week-day b { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 14px; }
.week-day-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.week-day .wd { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.week-day .wd i { color: var(--ok); font-size: 10px; }
.week-day em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: right; }
.week-body {
  --axis-h: 690px; --hour-h: calc(var(--axis-h) / 24); position: relative; height: var(--axis-h); /* 24 hours in the same height */
  background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--hour-h));
}
.week-gutter { font-size: 10px; line-height: 1.1; color: var(--muted); font-weight: 700; }
.week-gutter span { position: absolute; inset-inline-end: 8px; transform: translateY(-50%); background: var(--card); padding: 0 2px; direction: ltr; }
.week-gutter span:first-child { transform: translateY(1px); }
.week-gutter span:last-child { transform: translateY(calc(-100% - 1px)); }
.week-col { position: relative; border-inline-start: 1px solid var(--border); }
.wblock {
  position: absolute; inset-inline: 3px; display: block; overflow: hidden; margin-top: 1px; padding: 1px 6px; border-radius: 5px;
  background: var(--c); color: #fff; font-size: 10.5px; line-height: 1.15; font-weight: 600; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.wblock:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); filter: brightness(1.06); z-index: 3; }
.wblock .wtime { display: inline-block; font-weight: 800; font-size: 10px; color: color-mix(in srgb, currentColor 90%, transparent); direction: ltr; }
.wblock.custom { background: var(--card); color: var(--head); box-shadow: inset 0 0 0 1.5px #475569; }
.wblock.custom .wtime { color: var(--muted); }
.wblock.done { opacity: 0.45; }
.wblock.done .wtitle { text-decoration: line-through; }
.wblock.star .wtitle::after { content: " ★"; color: #fde68a; }
.legend { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i.dot { width: 9px; height: 9px; border-radius: 3px; background: var(--c); display: inline-block; }
.legend i.dot.custom { background: var(--card); border: 1.5px solid #475569; }
.week .legend { padding: 9px 12px; border-top: 1px solid var(--border); }

/* ---------- photo cards / essentials ---------- */
.cards-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.pcard .ph { aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); cursor: zoom-in; }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.pcard:hover .ph img { transform: scale(1.04); }
.pcard .pb { padding: 11px 13px 13px; }
.pcard h4 { font-size: 15.5px; font-weight: 800; color: var(--head); display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.pcard h4 i { color: var(--primary); }
.pcard p { font-size: 13.5px; color: var(--muted); }
.pcard .pb .btn { margin-top: 8px; }
/* a card that turns over to show links on its back */
.pcard.flip { perspective: 1000px; cursor: pointer; overflow: visible; background: none; border: 0; box-shadow: none; }
.pcard.flip .flip-in { position: relative; flex: 1; display: flex; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); }
.pcard.flip.flipped .flip-in { transform: rotateY(180deg); }
.pcard.flip .flip-front, .pcard.flip .flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
/* the front sets the card's size; the back is kept compact (short text, up to three one-line links) so it fits without scrolling */
.pcard.flip .flip-front { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--card); }
.pcard.flip .flip-front .ph { cursor: pointer; }
.pcard.flip .flip-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; padding: 10px; background: var(--secondary); }
.pcard.flip .flip-back > * { flex: none; }
.pcard.flip .flip-back h4 { font-size: 14px; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pcard.flip .flip-back h4, .pcard.flip .flip-back h4 i { color: #fff; }
.pcard.flip .flip-back p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, 0.82); }
.pcard.flip .flip-back .btn { display: block; font-size: 12px; padding: 5px 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .pcard.flip .flip-back p { -webkit-line-clamp: 1; } }
.flip-hint { position: absolute; top: 8px; inset-inline-start: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.flip-back .flip-hint { position: static; flex: none; align-self: center; background: rgba(255, 255, 255, 0.16); margin-top: auto; white-space: nowrap; }  /* "back" always sits at the bottom of the card */
@media (prefers-reduced-motion: reduce) { .pcard.flip .flip-in { transition: none; } }
.cards-4.carousel { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.carousel > .pcard { flex: 0 0 230px; scroll-snap-align: start; }
.essentials { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ess { background: var(--card); border: 1px solid var(--border); border-inline-start: 4px solid var(--primary); border-radius: 12px; padding: 11px 13px; font-size: 13.5px; color: #475569; }
.ess strong { display: block; color: var(--head); font-size: 14.5px; margin-bottom: 2px; }

/* ---------- day page ---------- */
.day-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.day-title { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.day-num { flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--primary); color: #fff; font-size: 23px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(201, 58, 64, 0.3); }
.day-title h2 { font-size: 24px; font-weight: 800; color: var(--head); line-height: 1.2; }
.day-date { font-size: 13px; color: var(--primary); font-weight: 700; }
.route { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.route .chip { background: var(--soft); padding: 1px 9px; border-radius: 999px; color: var(--head); }
.route i { font-size: 10px; }
.day-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tag { background: var(--card); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #475569; display: inline-flex; align-items: center; gap: 6px; }
.day-progress { font-size: 13px; color: var(--muted); }
.day-progress b { color: var(--ok); }
/* the top of a day: each part in its own box — the title on a dark band, then "about the day", then its tags and progress */
.day-header { display: grid; grid-template-columns: 1fr; gap: 10px; }
.day-box { border-radius: var(--radius); padding: 14px 16px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); min-width: 0; }
.day-box.day-title { align-items: center; background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%); border: none; color: #fff; }
.day-box.day-title h2 { color: #fff; }
.day-box .day-num { background: var(--card); color: var(--primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
.day-box .day-date { color: rgba(255, 255, 255, 0.82); margin-bottom: 2px; }
.day-box-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.day-box .day-summary { margin: 0; max-width: none; }.day-box.day-meta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; background: var(--soft); box-shadow: none; }
.day-box .tags { justify-content: flex-start; }
.day-box .day-progress { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.day-box .day-progress > i { color: var(--ok); }
.day-bar { flex: 1; height: 7px; border-radius: 999px; background: rgba(15, 30, 56, 0.1); overflow: hidden; margin-inline-start: 4px; }
.day-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ok); transition: width 0.3s; }

/* the timeline: a road with the times on the right, the cards on the left */
.timeline { --road: 96px; }
.tl-item { display: grid; grid-template-columns: var(--road) 1fr; column-gap: 14px; }
.tl-item > .card, .tl-item > .gap-line, .tl-item > .tl-empty, .tl-item > .add-btn { grid-column: 2; margin-bottom: 16px; }
.tl-time { grid-column: 1; grid-row: 1; position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 8px; direction: ltr; }
.tl-time::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: #e2dbd0; }  /* square ends: the pieces of the road join with no notch between them */
.tl-item.done .tl-time::before { background: var(--ok); }
/* after a finished stop the green road runs on up to the hour of the next stop */
.tl-item.done + .tl-item[id] > .tl-time::after { content: ""; position: absolute; top: 0; left: 50%; width: 4px; height: 14px; margin-left: -2px; background: var(--ok); }
.tl-item[id] > .tl-time { padding-top: 6px; }  /* the hour sits at the top of the stop's card, its point right under it */
.timeline > .tl-item:first-child .tl-time::before { top: 22px; }
.timeline > .tl-item[id]:first-child .tl-time::before { top: 16px; }
.tl-time > * { position: relative; z-index: 1; }
.road-node { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #d6cec2; background: var(--card); color: transparent; display: grid; place-items: center; font-size: 14px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s; }
.road-node:hover { border-color: var(--ok); color: #9bd4ae; }
.road-node:active { transform: scale(0.9); }
.road-node.on { background: var(--ok); border-color: var(--ok); color: #fff; }
/* the hour is a badge sitting on the road, so the road runs unbroken from point to point */
.tl-time .t-start { order: -1; margin-bottom: 6px; padding: 2px 9px; font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--head); background: var(--card); border: 2px solid #e2dbd0; border-radius: 999px; }
.tl-item.done .tl-time .t-start { border-color: var(--ok); }
.tl-time .t-dur { margin: 5px 0 0; padding: 1px 8px; border-radius: 999px; background: var(--c, var(--primary)); color: #fff; font-size: 11px; font-weight: 700; direction: rtl; unicode-bidi: isolate; white-space: nowrap; }
.tl-item.done .tl-time .t-dur { background: var(--ok); }
.tl-time .t-end { padding: 0 4px; font-size: 13.5px; font-weight: 700; color: var(--muted); background: var(--bg); direction: rtl; white-space: nowrap; }
.tl-time .t-end small { font-size: 11.5px; font-weight: 600; }
.tl-gap { align-items: center; }
.tl-gap .tl-time { align-self: stretch; padding: 0 0 16px; min-height: 64px; justify-content: center; }  /* the point sits at mid-height of the way's card, its hour floats above it */
.tl-gap .gap-dot { width: 14px; height: 14px; border-radius: 50%; background: #d6cec2; }
.tl-gap .tl-time .t-start { position: absolute; bottom: calc(50% + 18px); left: 50%; transform: translateX(-50%); margin: 0; }
.tl-gap.done .gap-dot { background: var(--ok); }
.tl-item > .gap-card { grid-column: 2; margin-bottom: 16px; }
.gap-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 14px; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--head); font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.gap-card:hover { border-color: #0039a6; background: #f6f9ff; }
/* a way is not a stop: a tinted box with a colored edge, green for a ride and a walk alike */
.gap-card.way-ride, .gap-card.way-walk { background: #eefaf3; border: 1.5px solid #9fd5b5; border-inline-start: 4px solid #15803d; box-shadow: none; color: #166534; }
.gap-card.way-ride .gap-go, .gap-card.way-walk .gap-go { color: #15803d; }
.gap-card.way-ride:hover, .gap-card.way-walk:hover { background: #def5e8; border-color: #15803d; }
.gap-card .gap-way { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; min-width: 0; }
.gap-card .gap-go { flex: none; display: inline-flex; align-items: center; gap: 6px; color: #0039a6; font-size: 12.5px; white-space: nowrap; }
.add-row .tl-time::before { bottom: 50%; }
.add-row .tl-time::after { content: ""; position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 4px; background: #d6cec2; margin-top: 18px; }
.tl-gap .gap-range { font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.tl-gap .gap-free { font-weight: 500; color: color-mix(in srgb, currentColor 80%, transparent); }
.routes-way { color: var(--muted); font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.routes-way i { font-size: 11px; margin: 0 4px; }
.route-sum { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; margin-bottom: 8px; border-radius: 14px; background: #eef3ff; color: var(--head); }
.route-sum .route-lines { display: flex; gap: 4px; }
.route-sum b { font-size: 16px; }
.route-steps { list-style: none; margin: 0 0 14px; padding: 0; }
.route-steps li { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; font-size: 14.5px; line-height: 1.3; }
.route-steps li + li::before { content: ""; position: absolute; top: -12px; inset-inline-start: 11px; height: 24px; border-inline-start: 2px dotted #cbd5e1; }
.route-steps .step-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.step-icon { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: var(--card); position: relative; z-index: 1; }
.step-text { flex: 1; min-width: 0; }
.step-min { flex: none; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.line-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; color: #fff; font-size: 13px; font-weight: 800; font-family: Arial, sans-serif; }
.line-badge.dark { color: #111; }
.line-badge.ferry { background: #0e7490; font-size: 11px; }
#routesBody .btn-map { margin-top: 4px; }
.tl-empty { background: var(--card); border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px 18px; text-align: center; color: var(--muted); font-size: 14px; }
.tl-empty i { font-size: 30px; color: #d8d0c5; display: block; margin-bottom: 8px; }
.tl-empty strong { display: block; color: var(--head); font-size: 16px; margin-bottom: 2px; }

.card { background: var(--card); border: 1.5px solid color-mix(in srgb, var(--c, #94a3b8) 55%, var(--card)); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow 0.2s; }
.tl-item[id] > .card { cursor: pointer; }
.tl-item.flash .card { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 28%, var(--card)), var(--shadow); }
.card-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: var(--c); color: #fff; font-size: 13px; font-weight: 700; }
.card-head h3 { flex: 1; min-width: 0; color: #fff; overflow-wrap: anywhere; }
.card-head .ch-star, .card-head .ch-now, .card-head .stop-tools { flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dur-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--c); white-space: nowrap; }
.tl-item.done .dur-chip { background: var(--ok); }
.cat-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--card)); }
.card-head .ch-time { font-size: 15px; font-weight: 800; direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: center; gap: 6px; }
.card-head .ch-dur { background: rgba(255, 255, 255, 0.22); padding: 0 9px; border-radius: 999px; font-size: 12px; }
.card-head .ch-cat { color: color-mix(in srgb, currentColor 95%, transparent); display: inline-flex; align-items: center; gap: 5px; }
.card-head .ch-star, .card-head .ch-now, .card-head .ch-done { padding: 0 9px; border-radius: 999px; font-size: 12px; background: var(--card); }
.card-head .ch-star { background: #fde68a; color: #78350f; }
.ch-check { margin-inline-start: auto; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.12); color: transparent; display: grid; place-items: center; font-size: 13px; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.12s; }
.ch-check:hover { color: rgba(255, 255, 255, 0.7); }
.ch-check:active { transform: scale(0.9); }
.ch-check.on { background: #fff; color: var(--ok); border-color: #fff; }
.card-head .ch-now { color: #dc2626; }
.card-head .ch-done { color: #047857; }
.card-main { display: grid; grid-template-columns: 260px 1fr; }
/* a finished stop: the whole card turns green (no strike-through, no fading) */
.tl-item.done .card { --c: var(--ok); position: relative; background: color-mix(in srgb, var(--ok) 13%, var(--card)); border-color: var(--ok); }
.tl-item.done .card::after { content: ""; position: absolute; inset: 0; z-index: 3; background: color-mix(in srgb, var(--ok) 14%, transparent); pointer-events: none; }  /* a green wash over the whole card */
.tl-item.done .card-media { background: color-mix(in srgb, var(--ok) 20%, var(--card)); }
/* the photo goes green too, with a big check on it */
.tl-item.done .card-media img { filter: grayscale(1); }
.tl-item.done .card-media::after { content: "\f00c"; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 900 46px "Font Awesome 6 Free"; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); background: color-mix(in srgb, var(--ok) 55%, transparent); pointer-events: none; }
.card-media { background: var(--soft); display: flex; flex-direction: column; position: relative; }
.stop-tools { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; gap: 6px; direction: ltr; }
.stop-tools.in-head { position: static; margin-inline-start: auto; }
.stop-tools button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--head); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.stop-tools button.del { color: #dc2626; }
.stop-tools button:hover { background: var(--card); transform: scale(1.08); }
.card-media .main { flex: 1; min-height: 190px; max-height: 260px; overflow: hidden; cursor: pointer; }
.card-media .main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.card-media .main:hover img { transform: scale(1.03); }
.card-media .thumbs { display: flex; gap: 3px; padding: 3px; }
.card-media .thumbs figure { flex: 1; height: 58px; overflow: hidden; border-radius: 5px; cursor: zoom-in; }
.card-media .thumbs img { width: 100%; height: 100%; object-fit: cover; }
.ph-empty { height: 100%; min-height: 190px; display: grid; place-items: center; color: #c8bfb3; font-size: 34px; }
.card-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card h3 { font-size: 19px; font-weight: 800; color: var(--head); line-height: 1.25; }
.card h3.place { unicode-bidi: plaintext; text-align: right; }
.card .en { font-size: 12.5px; color: var(--muted); direction: ltr; text-align: right; margin-top: -4px; }
.loc { color: #64748b; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.card .desc { font-size: 14.5px; color: #334155; }
.tip { font-size: 13px; color: #a14a07; background: #fffbeb; border: 1px solid #fdecc8; padding: 6px 10px; border-radius: 9px; display: flex; gap: 7px; align-items: flex-start; }
.tip i { margin-top: 3px; }
.dm-days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dm-day { display: inline-flex; flex-direction: column; align-items: center; min-width: 84px; padding: 7px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card); color: var(--head); font: inherit; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.dm-day b { font-size: 14px; font-weight: 800; }
.dm-day small { font-size: 11px; color: var(--muted); }
.dm-day.on { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.dm-day.on small { color: #cbd5e1; }
.daymap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.daymap .dm-box { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--border); }
.daymap .dm-box .leaflet-host { height: 460px; }
.dm-side { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; min-width: 0; }
.dm-side h3 { font-size: 15px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.dm-side h3 a { color: var(--head); text-decoration: none; }
.dm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 13.5px; overflow-y: auto; }
.dm-list a { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 9px; color: inherit; text-decoration: none; }
.dm-list a:hover { background: #f6f1e8; }
.dm-list b { flex: none; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.25); }
.dm-name { flex: 1; min-width: 0; font-weight: 700; color: var(--head); }
.dm-time { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; direction: ltr; }
.dm-step { display: flex; align-items: center; gap: 7px; margin-inline-start: 17px; padding: 3px 14px; border-inline-start: 3px dotted #c2410c; color: #9a3412; font-size: 12px; }
.dm-step.ride { border-inline-start: 3px solid #2563eb; color: #1d4ed8; }
.dm-legend { display: flex; gap: 16px; margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--muted); }
.dm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dm-line { display: inline-block; width: 26px; border-top: 4px dotted #c2410c; }
.dm-line.ride { border-top: 4px solid #2563eb; }
.day-summary { margin-top: 6px; max-width: 70ch; font-size: 14.5px; line-height: 1.6; color: #475467; }
.daymaps.in-day { margin: 0 0 22px; }
@media print { .daymaps.in-day { display: none; } }
.dm-marker { cursor: pointer; }
.dm-marker span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
@media (max-width: 800px) { .daymap { grid-template-columns: 1fr; } .daymap .dm-box .leaflet-host { height: 340px; } }
/* on a computer the map is as tall as the list of the day's stops beside it */
@media (min-width: 801px) { .daymap .dm-box { display: flex; flex-direction: column; } .daymap .dm-box .leaflet-host { flex: 1; height: auto; min-height: 460px; } }
details.eats { font-size: 13px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 9px; }
details.eats summary { list-style: none; cursor: pointer; padding: 6px 10px; font-weight: 700; color: #9a3412; display: flex; align-items: center; gap: 7px; }
details.eats summary::-webkit-details-marker { display: none; }
details.eats summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; margin-inline-start: auto; transition: transform .15s; }
details.eats[open] summary::after { transform: rotate(180deg); }
details.eats summary small { background: #fed7aa; border-radius: 999px; padding: 0 7px; font-weight: 700; }
details.eats ul { list-style: none; margin: 0; padding: 0 6px 6px; display: flex; flex-direction: column; gap: 2px; }
details.eats li a { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; color: inherit; text-decoration: none; }
details.eats li a:hover { background: #ffedd5; }
details.eats .eats-name { flex: 1; min-width: 0; }
details.eats li small { color: var(--muted); white-space: nowrap; }
.need-tickets { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: #fff; background: var(--primary); padding: 5px 11px; border-radius: 999px; }
.card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--head); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); user-select: none; }
.check input { width: 16px; height: 16px; accent-color: var(--ok); cursor: pointer; }
.check.on { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.credits { font-size: 11px; color: var(--muted); }
.credits a { color: var(--muted); }

.notes { background: #fffcf3; border: 1px solid #f1e6c6; border-radius: 12px; padding: 8px 10px; }
.notes-head { font-size: 13px; font-weight: 800; color: #92400e; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.notes-head b { background: #f59e0b; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; }
.notes-head small { font-weight: 600; color: var(--muted); }
.notes-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.notes-list li { display: flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid #f1e6c6; border-radius: 8px; padding: 5px 9px; font-size: 14px; }
.notes-list li > i { color: #f59e0b; font-size: 11px; }
.notes-list li span { flex: 1; min-width: 0; }
.notes-list li small { color: var(--muted); font-size: 11px; direction: ltr; }
.note-del { border: none; background: transparent; color: #b7aea2; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.note-del:hover { color: var(--primary); background: #fee2e2; }
.notes-add { display: flex; gap: 6px; }
.notes-add input { flex: 1; min-width: 0; border: 1px solid #e9dcb8; border-radius: 999px; padding: 6px 12px; background: var(--card); font-size: 14px; }
.notes-add input:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }

.tl-item.custom .card { border-style: dashed; border-color: #94a3b8; }
.tl-item.custom .card-head { background: var(--secondary); }
.tl-item.custom .card h3 { font-size: 16.5px; }
.tl-item.custom.done .card { border-color: var(--ok); }
.tl-item.custom.done .card-head { background: var(--ok); }
.tl-item.add-stop form { background: var(--card); border: 1.5px dashed #cbd5e1; border-radius: var(--radius); padding: 12px 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tl-item.add-stop form .lbl { width: 100%; font-weight: 800; color: var(--head); font-size: 14px; display: flex; align-items: center; gap: 7px; }
.tl-item.add-stop input { border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; background: var(--card); font-size: 14px; }
.tl-item.add-stop input[type=time] { direction: ltr; width: 104px; }
.tl-item.add-stop input[name=title] { flex: 1; min-width: 170px; }
.tl-item.add-stop input[name=note] { flex: 1; min-width: 150px; }

.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.extra { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; }
.extra h4 { font-size: 14.5px; font-weight: 800; color: var(--head); display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.extra h4 i { color: var(--primary); }
.extra ul { list-style: none; font-size: 13.5px; color: #475569; }
.extra li { display: flex; gap: 7px; align-items: baseline; margin-bottom: 3px; }
.extra li::before { content: "•"; color: var(--primary); font-weight: 800; }
.extra p { font-size: 13.5px; color: #475569; }
.day-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; }

/* add-stop: a button in the timeline, the form in a sheet */
.add-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: var(--radius); border: 1.5px dashed #cbd5e1; background: var(--card); color: var(--head); font-weight: 800; font-size: 15px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.add-btn:hover { border-color: var(--primary); color: var(--primary); background: #fffafa; }
.add-btn i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 12px; }
.sheet { position: fixed; inset: 0; z-index: 96; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade 0.2s ease; }
.sheet[hidden] { display: none; }
.sheet-card { width: min(440px, 100%); background: var(--card); border-radius: 20px; padding: 14px 16px 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; gap: 10px; animation: pop 0.25s var(--ease); }
@keyframes pop { from { transform: translateY(16px) scale(0.98); opacity: 0; } }
.sheet-grip { display: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head strong { font-size: 17px; color: var(--head); }
.field { flex: 1; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; background: var(--bg); transition: border-color 0.15s, background 0.15s; }
.field:focus-within { border-color: var(--primary); background: var(--card); }
.field i { color: var(--muted); width: 16px; text-align: center; }
.field input { flex: 1; min-width: 0; border: none; background: transparent; padding: 11px 0; font-size: 16px; outline: none; }
.field input[type=time] { direction: ltr; text-align: right; }
.field-row { display: flex; align-items: center; gap: 8px; }
/* a stop that is one moment (the hotel we leave from): only its start hour */
#stopForm.point .field-row > :not(:first-child) { display: none; }
.field-sep { color: var(--muted); font-size: 12px; }
.sheet-save { justify-content: center; padding: 12px; font-size: 16px; border-radius: 12px; margin-top: 2px; }

.btn-round { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; flex: none; }
.my-add .btn-round { width: 40px; height: 40px; }
.teaser-go { color: var(--muted); font-size: 14px; padding-inline: 4px; }
.notes-add { align-items: center; }
.notes-add > i { color: #d4a24c; }
.notes-add input { border: none; background: transparent; padding: 5px 0; }
.notes-add input:focus { box-shadow: none; }
.notes-add .btn-round { width: 28px; height: 28px; font-size: 12px; background: #f59e0b; }
.notes { padding: 6px 10px; }

/* ---------- checklist ---------- */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.chk { display: flex; gap: 11px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 11px 13px; cursor: pointer; }
.chk.on { background: #f0fdf4; border-color: #bbf7d0; }
.chk input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--ok); flex: none; }
.chk strong { display: block; color: var(--head); font-size: 14.5px; }
.chk.on strong { text-decoration: line-through; color: #15803d; }
.chk span { font-size: 13.5px; color: var(--muted); }
.chk .btn-danger { margin-inline-start: auto; }
/* a part of the checklist: a bar that opens its items */
.chk-fold { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 10px; }
.chk-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px; font-size: 17px; font-weight: 800; color: var(--head); -webkit-tap-highlight-color: transparent; }
.chk-fold > summary::-webkit-details-marker { display: none; }
.chk-fold > summary > i:first-child { flex: none; width: 22px; text-align: center; color: var(--primary); }
.chk-fold > summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chk-count { flex: none; min-width: 48px; text-align: center; padding: 2px 8px; border-radius: 999px; background: var(--soft); font-size: 13px; color: var(--muted); direction: ltr; }
.chk-fold .chev { flex: none; font-size: 13px; color: var(--muted); transition: transform 0.2s; }
.chk-fold[open] .chev { transform: rotate(180deg); }
.chk-fold > .checks, .chk-fold > .my-add { margin: 0 12px 12px; }
.chk-fold > .checks:empty { display: none; }
.chk-fold > .daymap { margin: 0 12px 12px; }
.dm-home { margin-top: 0; }
.dm-home > .dm-days { margin: 0 12px 10px; }
.my-add { display: flex; gap: 8px; margin-top: 10px; }
.my-add input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; background: var(--card); }
details.credits { font-size: 12px; }
details.credits summary { cursor: pointer; font-weight: 700; }
details.credits ul { columns: 2; list-style: none; margin-top: 8px; }
details.credits li { margin-bottom: 3px; break-inside: avoid; }

/* ---------- share modal, lightbox, toast ---------- */
.modal { position: fixed; inset: 0; z-index: 95; background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
/* a window rises in softly over a fading backdrop, its boxes come in one after another, and it sinks away when closed */
.modal:not([hidden]) { animation: fade 0.3s ease both; }
.modal:not([hidden]) .modal-card { animation: modal-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.04) both; }
.modal.closing { animation: fade-away 0.24s ease forwards; pointer-events: none; }
.modal.closing .modal-card { animation: modal-out 0.24s ease forwards; }
@keyframes modal-in { from { opacity: 0; transform: translateY(30px) scale(0.96); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(18px) scale(0.97); } }
@keyframes fade-away { to { opacity: 0; } }
.modal:not(.closing) .place-box, .modal:not(.closing) .branch-list li, .modal:not(.closing) .branches-btn { animation: item-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.12s; }
.place-grid > :nth-child(2), .branch-list li:nth-child(2) { animation-delay: 0.17s !important; }
.place-grid > :nth-child(3), .branch-list li:nth-child(3) { animation-delay: 0.22s !important; }
.place-grid > :nth-child(4), .branch-list li:nth-child(4) { animation-delay: 0.27s !important; }
.place-grid > :nth-child(5), .branch-list li:nth-child(5) { animation-delay: 0.32s !important; }
.place-grid > :nth-child(6), .branch-list li:nth-child(6) { animation-delay: 0.37s !important; }
.place-grid > :nth-child(n + 7), .branch-list li:nth-child(n + 7) { animation-delay: 0.42s !important; }
@keyframes item-in { from { opacity: 0; transform: translateY(12px); } }
/* an opened list of saved places: its first rows come in as a quick short wave (the rest simply come with the list) */
.enter > .saved-subs > .saved-sub:nth-child(-n + 6), .enter > .saved-list > .saved-item:nth-child(-n + 6), .enter.saved-sub > .saved-list > .saved-item:nth-child(-n + 6) { animation: item-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
.enter :is(.saved-subs, .saved-list) > :nth-child(2) { animation-delay: 0.03s; }
.enter :is(.saved-subs, .saved-list) > :nth-child(3) { animation-delay: 0.06s; }
.enter :is(.saved-subs, .saved-list) > :nth-child(4) { animation-delay: 0.09s; }
.enter :is(.saved-subs, .saved-list) > :nth-child(5) { animation-delay: 0.12s; }
.enter :is(.saved-subs, .saved-list) > :nth-child(6) { animation-delay: 0.15s; }
.saved-tile { transition: transform 0.18s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.saved-tile:active { transform: scale(0.95); }
.saved-sub summary::after { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important; }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal .modal-card, .modal .place-box, .modal .branch-list li, .modal .branches-btn, .enter * { animation: none !important; }
}
/* while a window is open the page behind it stands still: a scroll that reaches the window's end does not run on into the page.
   Done by the window itself taking the finger (no page scroll on its dark backdrop, its card scrolls only itself), NOT by
   locking the page's own scrolling: on the iPhone that lock made the bar at the bottom lose its place after the window
   closed — it rode up the middle of the screen with the page, and the chat opened short */
.modal { overscroll-behavior: contain; touch-action: none; }
.modal .modal-card { touch-action: pan-y; }
.modal .place-pics { touch-action: pan-x pan-y; }
.modal-card { position: relative; width: min(520px, 100%); max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;background: var(--card); border-radius: 18px; padding: 22px 20px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.modal-close { position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--soft); color: var(--head); cursor: pointer; }
.modal-card h2 { font-size: 19px; font-weight: 800; color: var(--head); display: flex; gap: 9px; align-items: center; margin-bottom: 12px; }
.modal-card h2 i { color: var(--primary); }
/* a saved place with a story: photos that slide sideways, then what it is, its mood, hours and a tip */
.place-card { padding: 0 0 16px; overflow-x: hidden; }
.place-card .modal-close { z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.place-pics { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 18px 18px 0 0; background: #111; }
.place-pics::-webkit-scrollbar { display: none; }
.place-pics figure { position: relative; flex: none; width: 100%; margin: 0; scroll-snap-align: center; }
.place-pics figure:not(:only-child) { width: 88%; }
.place-pics img { display: block; width: 100%; height: 230px; object-fit: cover; cursor: zoom-in; }
.place-pics figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 22px 12px 8px; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.35; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); }
.place-card h2, .place-what, .place-grid, .place-acts { margin-inline: 16px; }
.place-card h2 { margin-top: 16px; margin-bottom: 2px; }
.place-what { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.place-kind { background: var(--soft); color: var(--head); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; }
/* every part of the story is a box of its own; the small ones (price, address, our note) sit two in a row */
.place-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.place-box { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 11px 13px 12px; min-width: 0; }
.place-box.wide { grid-column: 1 / -1; }
.place-box h3 { font-size: 13px; font-weight: 800; color: var(--head); display: flex; gap: 7px; align-items: center; margin-bottom: 5px; }
.place-box h3 i { color: var(--primary); width: 16px; text-align: center; }
.place-box p { font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.place-box p[dir="ltr"] { text-align: right; }
.place-box.hours { background: var(--soft); border-color: transparent; }
.hours-rows { display: grid; gap: 4px; margin: 2px 0 0; }
.hours-rows div { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border-radius: 9px; padding: 6px 11px; }
.hours-rows dt { font-weight: 700; font-size: 14px; color: var(--head); }
.hours-rows dd { margin: 0; direction: ltr; font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours-rows .shut dd { color: #b42318; }
.hours-note { margin-top: 8px; font-size: 13.5px !important; }
.hours-check { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.place-box.before { background: #fff8eb; border-color: #f3d9a4; }
.place-box.before h3 i { color: #b45309; }
.place-box.before ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.place-box.before li { display: flex; gap: 8px; align-items: baseline; font-size: 14.5px; line-height: 1.45; }
.place-box.before li i { color: #b45309; font-size: 12px; flex: none; }
.place-box.tip { background: #f0f7f1; border-color: #cfe5d2; }
.place-box.tip h3 i { color: #2f7d3b; }
.place-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.open-now { margin: 14px 16px 0; padding: 10px 14px; border-radius: 12px; font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.open-now i { font-size: 9px; }
.place-box .open-now { margin: 2px 0 10px; } /* open now / closed: at the top of the hours box */
.place-box p + p { margin-top: 6px; } /* the general info and the mood, one after the other in one box */
.open-now.is-open { background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); }
.open-now.is-shut { background: #fdecec; color: #b42318; }
/* a chain's branches: a wide button on the place card, then a list from the nearest branch to the farthest */
.branches-btn { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); margin: 14px 16px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--soft); color: var(--head); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-align: start; }
.branches-btn > i:first-child { color: var(--primary); }
.branches-btn span { flex: 1; }
.branches-btn small { background: var(--card); border-radius: 999px; padding: 1px 9px; font-size: 13px; }
.branches-btn > i:last-child { color: var(--muted); font-size: 13px; }
.branches-back { margin: 16px 16px 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--head); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.branches-status { margin: 0 16px 10px; color: var(--muted); font-size: 13.5px; font-weight: 600; display: flex; gap: 7px; align-items: baseline; }
.branch-list { list-style: none; margin: 0 16px; padding: 0; display: grid; gap: 8px; }
.branch-list li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 10px 12px; }
.branch-list li.nearest { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.branch-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.branch-main strong { font-size: 15px; color: var(--head); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.branch-tag { background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; }
.branch-addr { color: var(--muted); font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.branch-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; font-weight: 700; color: var(--head); }
.branch-meta i { font-size: 11px; }
.branch-meta .is-open { color: var(--ok); }
.branch-meta .is-shut { color: #b42318; }
.branch-meta .is-shut i, .branch-meta .is-open i { font-size: 7px; vertical-align: middle; }
.branch-hours { margin: 0; flex: none; max-width: 42%; background: var(--soft); border-radius: 10px; padding: 6px 9px; font-size: 12px; display: grid; gap: 2px; }
.branch-hours dt { font-weight: 800; color: var(--primary); font-size: 11.5px; }
.branch-hours dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.branch-list .btn-map { flex: none; }
html[data-theme="dark"] .branch-meta .is-shut { color: #fca5a5; }
.share-row { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.share-label { font-weight: 800; font-size: 14px; color: var(--head); display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.share-label i { color: var(--primary); }
.share-url { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; direction: ltr; text-align: left; font-size: 14px; margin-bottom: 4px; }
.share-url a { color: #0b57d0; font-weight: 700; word-break: break-all; }
.share-qr { display: flex; justify-content: center; padding: 8px 0 2px; }
.share-pin { font-size: 30px; font-weight: 800; letter-spacing: 8px; direction: ltr; text-align: center; color: var(--primary); background: var(--soft); border-radius: 10px; margin-bottom: 8px; }
.share-pinform { display: flex; gap: 8px; margin-bottom: 6px; }
.share-pinform input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; direction: ltr; }
.share-note { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10, 8, 8, 0.92); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox figure { max-width: min(1200px, 96vw); max-height: 92vh; display: flex; flex-direction: column; gap: 8px; }
.lightbox img { max-height: 82vh; max-width: 100%; object-fit: contain; border-radius: 10px; }
.lightbox figcaption { color: #d6d3d1; font-size: 12.5px; text-align: center; }
.lightbox figcaption a { color: #fff; }
.lightbox-close { position: absolute; top: calc(14px + var(--safe-t)); left: 14px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 19px; cursor: pointer; }
/* the bar at the bottom of the screen: five pages one tap away; the page leaves room for it at its end */
:root { --bn-h: 64px; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: space-around; align-items: stretch; height: calc(var(--bn-h) + var(--safe-b)); padding: 0 6px var(--safe-b); background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.06); }
.bottom-nav:empty { display: none; }
.bn-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 700; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease; }
.bn-icon { display: grid; place-items: center; width: 46px; height: 30px; border-radius: 999px; font-size: 19px; transition: background-color 0.25s ease, transform 0.2s ease; }
.bn-item:active .bn-icon { transform: scale(0.9); }
button.bn-item { background: none; border: none; font-family: inherit; padding: 0; cursor: pointer; }
.bn-main .bn-icon, .bn-main.on .bn-icon { background: var(--primary); color: #fff; }
.ai-meal { margin: 12px 0 4px; display: grid; gap: 8px; }
.ai-meal > span { font-weight: 800; color: var(--head); font-size: 14.5px; }
.ai-meal-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ai-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ai-chip i { font-size: 16px; color: var(--muted); }
.ai-chip.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); }
.ai-chip.on i { color: var(--primary); }
.bn-item.on { color: var(--primary); }
.bn-item.on .bn-icon { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.bn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.page { padding-bottom: calc(var(--bn-h) + var(--safe-b)); } /* room at the end of every page for the bar, on a phone too … */
/* a short page is exactly the screen's height (the screen as it really is, under the browser's own bars), so there is nothing to scroll */
@supports (min-height: 100svh) { .page { min-height: 100svh; } }
/* … and the gap after the last part, above the bar, is the same as the gap above the first part at the top of the page */
#page > .container { padding-bottom: 24px; }
@media (max-width: 640px) { #page > .container { padding-bottom: 12px; } }
/* ===== the hotels page and the transport page ===== */
.sheet-card { max-height: calc(100dvh - 24px); }
.sheet-scroll { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.field-row.two { align-items: stretch; }
.field-row.two > .field-label { flex: 1; min-width: 0; }
.sheet-hint { font-size: 13px; color: var(--muted); background: var(--soft); border-radius: 10px; padding: 8px 10px; line-height: 1.45; }
.hotel-suggest { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); margin-top: -4px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1); }
.hotel-suggest button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--head); text-align: start; cursor: pointer; }
.hotel-suggest button:last-child { border-bottom: 0; }
.hotel-suggest button:active { background: var(--soft); }
.hotel-suggest button > i { color: var(--primary); }
.hotel-suggest span { display: grid; min-width: 0; }
.hotel-suggest small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
/* buttons that do the same kind of thing have the same size, whatever their text: the add buttons in the section heads,
   and a card's row of actions (navigate · call · site …) split the row into equal parts */
.section-head > .btn { min-width: 136px; justify-content: center; }
.stay-acts > .btn, .place-acts > .btn, .map-actions > .btn { flex: 1 1 0; min-width: 0; max-width: 240px; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== the home screen: a photo header for the picked day, then its stops as photo cards ===== */
.home-head { position: relative; margin: -12px -12px 0; padding: 14px 16px 18px; border-radius: 0 0 26px 26px; overflow: hidden; color: #fff; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--secondary, #1e1b4b) 55%, transparent) 0%, color-mix(in srgb, var(--secondary, #1e1b4b) 82%, transparent) 70%, var(--secondary, #1e1b4b) 100%), var(--home-img, none) center / cover no-repeat, var(--secondary, #1e1b4b); }
@media (min-width: 641px) { .home-head { margin: -24px 0 0; border-radius: 0 0 28px 28px; padding: 18px 24px 22px; } }
.hh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.hh-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hh-wx { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: #fff; color: var(--head); font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); white-space: nowrap; }
.hh-wx:empty { display: none; }
.hh-wx > i { color: #f59e0b; font-size: 16px; }
.hh-wx b { font-size: 15px; }
.hh-wx small { color: var(--muted); font-weight: 600; font-size: 12px; }
.hh-eyebrow { font-size: 13px; font-weight: 700; color: color-mix(in srgb, currentColor 80%, transparent); }
.home-head h1 { font-size: clamp(24px, 6.4vw, 34px); font-weight: 800; line-height: 1.2; margin: 2px 0 4px; }
.hh-meta { font-size: 13.5px; color: color-mix(in srgb, currentColor 85%, transparent); }
.hh-sum { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, currentColor 92%, transparent); margin-top: 8px; max-width: 70ch; }
.hh-days { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.hh-days::-webkit-scrollbar { display: none; }
.hh-day { flex: none; width: 50px; height: 56px; border-radius: 14px; display: grid; place-content: center; gap: 1px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #fff; font: inherit; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; }
.hh-day b { font-size: 18px; line-height: 1; }
.hh-day small { font-size: 11.5px; color: color-mix(in srgb, currentColor 85%, transparent); }
.hh-day:active { transform: scale(0.94); }
.hh-day.on { background: #fff; color: var(--head); border-color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.home-head .now-card { margin: 16px 0 0; max-width: none; }
/* the header's colour melts into the page's own colour at its bottom (no hard edge), and the photo behind the words is only lightly blurred */
.home-head { border-radius: 0; padding-bottom: 54px; margin-bottom: -30px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--secondary) 50%, transparent) 0%, color-mix(in srgb, var(--secondary) 80%, transparent) 55%, var(--secondary) calc(100% - 90px), color-mix(in srgb, var(--secondary) 45%, var(--bg)) calc(100% - 40px), var(--bg) 100%), var(--home-img, none) center / cover no-repeat, var(--secondary); }
@media (min-width: 641px) { .home-head { border-radius: 0; } }/* the day's words in a box of their own on the right, the weather cube of that day on the left (the same cube the weather row had,
   see-through over the photo); both boxes are as tall as each other, and no text is ever cut with "…" */
.hh-main { display: flex; align-items: stretch; gap: 10px; }
.hh-text { flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--radius); background: rgba(10, 14, 30, 0.38); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }
.home-head .hh-eyebrow, .home-head .hh-meta, .home-head h1 { height: auto; white-space: normal; overflow: visible; text-overflow: clip; }
.home-head h1 { font-size: clamp(21px, 5.6vw, 30px); }
.home-head .hh-sum { margin-top: 8px; min-height: 0; font-size: 13.5px; }
/* the top of the box: the day in big letters on the right, the weather cube on the left, both as tall as each other;
   the day's description runs under both, the whole width, every line as long as the others */
.hh-lead { display: flex; align-items: stretch; gap: 12px; }
.hh-stack { display: grid; }
.hh-layer { grid-area: 1 / 1; visibility: hidden; display: flex; flex-direction: column; justify-content: center; }
.hh-layer.on { visibility: visible; }
.hh-lead-stack { flex: 1; min-width: 0; }
.hh-sum-stack .hh-layer { justify-content: flex-start; }
/* every day's words start at the very same top line (not centred), so switching days never moves them up or down */
.hh-lead-stack .hh-layer, .home-head .hh-lead-text { justify-content: flex-start; }
.hh-lead-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.home-head .hh-eyebrow { font-size: 18px; font-weight: 800; color: color-mix(in srgb, currentColor 95%, transparent); }
.home-head h1 > span { display: block; } /* the weekday on one line, the date under it */
.home-head h1 > .hh-nodate { font-size: 0.6em; font-weight: 700; color: color-mix(in srgb, currentColor 85%, transparent); } /* a trip with no dates yet: the same two lines, the day and a note */
.home-head h1 { font-size: clamp(25px, 7.2vw, 36px); margin: 2px 0; }
.home-head .hh-meta { font-size: 15px; font-weight: 600; }
.home-head .hh-sum { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 14px; }
.home-head .hh-wx { flex: none; width: 96px; height: auto; min-height: 0; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; overflow: visible;
  border-radius: var(--radius); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: normal; text-align: center; }
.home-head .hh-wx > b { color: #fff; font-size: 14px; }
.home-head .hh-wx > small { color: rgba(255, 255, 255, 0.8); font-size: 12px; overflow: visible; }
.home-head .hh-wx .wx-ic { color: #fcd34d; font-size: 30px; width: auto; margin: 4px 0 2px; }
.home-head .hh-wx .wx-t strong { font-size: 23px; }
.home-head .hh-wx .wx-t s { font-size: 16px; }
.home-head .hh-wx em { font-size: 14px; }
.home-head .hh-wx .wx-rain { font-size: 12.5px; }
/* its content a little bigger, in the middle of the cube (top to bottom too) */
.home-head .hh-wx { gap: 2px; width: 108px; justify-content: center; padding: 10px 4px; }
.home-head .hh-wx > b { font-size: 15px; }
.home-head .hh-wx > small { font-size: 12.5px; }
.home-head .hh-wx .wx-t s, .home-head .hh-wx .wx-rain { color: rgba(255, 255, 255, 0.8); }
.home-head .hh-wx .wx-rain i { color: #93c5fd; }
.home-head .hh-wx em { color: #fff; }
.home-head .hh-wx .wx-tag { background: rgba(255, 255, 255, 0.2); color: #fff; }
/* the weather box keeps one height whatever it shows (loading, a forecast, a long word): the photo and the page under it never jump */
.home-head .hh-wx .wx-hold { visibility: hidden; }
.home-head .hh-wx em { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* the squares of the days: seven fit across; a longer trip slides sideways, and the picked day sits in the middle */
.hh-days { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 6 * 8px) / 7); gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: 2px; }
.hh-day { width: auto; scroll-snap-align: center; }
/* today: the stop of now and the next one stand out — a coloured frame and a ribbon above the photo */
.hs-card.is-now, .hs-card.is-next { border: 2px solid var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent), 0 10px 28px rgba(15, 23, 42, 0.14); }
.hs-card.is-now { border-color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent), 0 10px 28px rgba(15, 23, 42, 0.14); }
.hs-flag { display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; font-size: 14px; font-weight: 800; color: #fff; background: var(--primary); }
.hs-flag.now { background: var(--ok); }
/* a stop that is over (its time has passed, by the clock): green frame, a green tick on its photo and a "הסתיים" chip */
.hs-card.over { border: 2px solid var(--ok); opacity: 1; }
.hs-card.over .hs-pic { filter: saturate(0.75); }
.hs-tick { position: absolute; top: 12px; right: 74px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 16px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); }
/* every stop card has the same photo size, with or without a photo; its words are shown whole */
.hs-pic, .hs-pic.none { height: 190px; }
.hs-foot { min-height: 48px; }
.hs-list { display: flex; flex-direction: column; margin: 16px auto 0; max-width: 640px; }
.hs-way { align-self: center; display: flex; align-items: center; gap: 6px; padding: 9px 0; color: var(--muted); font-size: 13px; font-weight: 700; position: relative; }
.hs-way::before { content: ''; position: absolute; top: 0; bottom: 0; right: 50%; border-right: 2px dashed var(--border); z-index: -1; }
.hs-way > i { color: var(--primary); }
.hs-way.gap { height: 14px; padding: 0; }
/* the way between two stops: one quiet bar the full width of the cards, the same size on foot and by train; a tap opens it in Google Maps */
.hs-way { align-self: stretch; display: block; padding: 8px 0; }
.hs-way::before { display: none; }
.hs-go { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); color: var(--head); font-size: 13.5px; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease; }
.hs-go:active { transform: scale(0.98); }
.hs-go > i:first-child { width: 18px; text-align: center; color: var(--primary); }
.hs-go > span { flex: 1; min-width: 0; }
.hs-go-ic { color: var(--muted); font-size: 13px; }
/* a way is not a stop: a tinted box with a colored edge, green for a ride and a walk alike */
.hs-go.by-transit, .hs-go.by-other, .hs-go.by-foot { background: #eefaf3; border: 1.5px solid #9fd5b5; border-inline-start: 4px solid #15803d; box-shadow: none; color: #166534; }
.hs-go.by-transit > i, .hs-go.by-other > i, .hs-go.by-foot > i { color: #15803d; }
.hs-pic { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hs-card { background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); border: 1px solid var(--border); }
.hs-card.done { opacity: 0.72; }
.hs-pic { position: relative; display: block; height: 190px; color: #fff; text-decoration: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.72) 100%), var(--pic, none) center / cover no-repeat, color-mix(in srgb, var(--primary) 70%, #111); }
.hs-pic.none { height: 130px; }
.hs-num { position: absolute; top: 10px; right: 14px; font-size: 42px; font-weight: 800; line-height: 1; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.hs-time { position: absolute; top: 14px; left: 14px; white-space: nowrap;background: #fff; color: var(--head); border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 800; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.hs-cap { position: absolute; inset-inline: 14px; bottom: 12px; display: grid; gap: 2px; }
/* faint words are a see-through colour, never a see-through element: the iPhone draws text that has its own opacity on a
   separate layer, and when a page change ended it was drawn again a pixel aside — the words under a stop's name jumped */
.hs-cap small { font-size: 12px; font-weight: 700; color: color-mix(in srgb, currentColor 90%, transparent); }
.hs-cap b { font-size: 19px; font-weight: 800; line-height: 1.25; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.hs-cap em { font-style: normal; font-size: 12.5px; color: color-mix(in srgb, currentColor 85%, transparent); text-align: right; }
.hs-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.hs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); }
.hs-chip.tix { background: #fff4e5; color: #b45309; }
.hs-chip.star { background: #fef3c7; color: #b45309; }
.hs-more { flex-basis: 100%; }
.hs-foot > .hs-more { flex-basis: auto; margin-inline-start: auto; }
.hs-more[open] { flex-basis: 100%; }
/* opening a stop: the word "תיאור" stays where it is (no turning arrow, no jump); the navigation is a pill on the photo's
   bottom-left corner, under the time pill */
.hs-more > summary { width: 100%; justify-content: center; }
/* the "תיאור" line: just the word and a small arrow down, in the middle under the photo */
.hs-more-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; color: var(--primary); font-weight: 800; font-size: 14px; }
.hs-more-btn i { font-size: 11px; transform: none !important; transition: none !important; }
.hs-more .hs-chips { margin-top: 10px; }
.hs-more-body { display: flow-root; } /* the part that unrolls (its margins stay inside it, so its height is exact) */
.hs-more-body > :last-child { margin-bottom: 4px; }
/* while a description unrolls the page does not chase it: the browser kept nudging the scroll to hold a card below it in
   place, every frame, and the words shook until the box stopped (and they no longer fade, which drew them on a layer of their own) */
.hs-card, .hs-way, .hs-more-body { overflow-anchor: none; }
.hs-foot { min-height: 0 !important; padding: 10px 14px; }
.hs-foot > .hs-more { flex-basis: 100%; margin-inline-start: 0; }
.hs-nav { position: absolute; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--head); font-size: 13px; font-weight: 800; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.hs-nav i { color: var(--primary); }
.hs-cap { inset-inline-end: 104px; }
.hs-more summary { list-style: none; cursor: pointer; color: var(--primary); font-weight: 800; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; }
.hs-more summary::-webkit-details-marker { display: none; }
.hs-more summary i { font-size: 11px; transition: transform 0.25s ease; }
.hs-more[open] summary i { transform: rotate(180deg); }
.hs-more p { font-size: 14px; line-height: 1.55; margin-top: 8px; color: var(--text); }
.hs-more .btn { margin-top: 10px; }
html[data-theme="dark"] .hs-chip.tix, html[data-theme="dark"] .hs-chip.star { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
/* the quick amounts under the calculator: a list from top to bottom, each line "amount … shekels" */
.fx-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.fx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.fx-row:last-child { border-bottom: 0; }
.fx-row:nth-child(even) { background: var(--soft); }
.fx-row b { font-size: 16px; color: var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-row span { font-size: 16px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.co-list button { display: grid; gap: 1px; padding: 8px 12px; }
.co-list button b { text-align: right; }
.co-list button small { white-space: normal; }
.co-letter { position: sticky; top: 0; padding: 3px 12px; background: var(--soft); color: var(--primary); font-weight: 800; font-size: 12.5px; direction: ltr; text-align: left; }
.hs-none { padding: 10px 12px; color: var(--muted); font-size: 13.5px; }
.hotel-found { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: var(--soft); }
.hotel-found img, .hotel-found > i { flex: none; width: 74px; height: 58px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: var(--card); color: var(--primary); font-size: 22px; }
.hotel-found div { display: grid; gap: 2px; min-width: 0; }
.hotel-found span { font-size: 13px; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hotel-found small { font-size: 12px; color: var(--ok); font-weight: 700; }
.stay-list, .ride-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.stay, .ride { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.stay.now { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 40%, transparent), var(--shadow); }
.stay-pic { position: relative; height: 170px; background: linear-gradient(135deg, var(--soft), color-mix(in srgb, var(--primary) 18%, var(--soft))); display: grid; place-items: center; }
.stay-pic > i { font-size: 38px; color: color-mix(in srgb, var(--primary) 55%, transparent); }
.stay-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stay-now { position: absolute; top: 10px; right: 10px; background: var(--ok); color: #fff; font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 3px 10px; }
.stay-body, .ride { padding: 12px 14px 14px; }
.stay-body { display: grid; gap: 7px; }
.stay-head, .ride-head { display: flex; align-items: flex-start; gap: 10px; }
.stay-head h3 { flex: 1; font-size: 17px; font-weight: 800; color: var(--head); line-height: 1.3; }
.stay-stars { color: #f59e0b; font-size: 13px; letter-spacing: 1px; }
.stay-tools { display: flex; gap: 4px; flex: none; margin-inline-start: auto; }
.icon-btn.sm { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; }
.stay-body p, .ride p { font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; line-height: 1.45; }
.stay-body p > i, .ride p > i { color: var(--primary); width: 16px; text-align: center; }
.stay-times { gap: 14px !important; }
.stay-times span { display: inline-flex; gap: 6px; align-items: center; }
.stay-times i { color: var(--primary); }
.stay-addr span { color: var(--muted); }
.stay-note { color: var(--muted); background: var(--soft); border-radius: 10px; padding: 7px 10px; white-space: pre-line; }
.stay-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.stay-docs { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--head); text-decoration: none; font-weight: 700; }
.stay-docs > i:first-child { color: var(--primary); font-size: 18px; }
.stay-docs span { flex: 1; display: grid; }
.stay-docs small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.stay-docs > i:last-child { color: var(--muted); font-size: 13px; }
.ride { display: grid; gap: 10px; }
.ride-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--primary); font-size: 18px; }
.ride-title { display: grid; flex: 1; min-width: 0; }
.ride-title b { font-size: 16.5px; color: var(--head); }
.ride-title small { color: var(--muted); font-size: 13px; }
.ride-way { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.ride-way > div { display: grid; min-width: 0; }
.ride-way > div:last-child { text-align: left; }
.ride-way small { color: var(--muted); font-size: 12px; font-weight: 700; }
.ride-way b { font-size: 20px; color: var(--head); font-variant-numeric: tabular-nums; }
.ride-way span { font-size: 13px; color: var(--head); overflow: hidden; text-overflow: ellipsis; }
.ride-way > i { color: var(--muted); }
.ride-span { color: var(--muted); }
.ride-live { border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 12px; padding: 9px 11px; display: grid; gap: 6px; font-size: 13.5px; min-height: 86px; } /* the box has its full height before the live answer arrives: nothing under it moves */
.ride-live:has(> .rl-wait:only-child) { align-content: center; }
.rl-top { font-weight: 800; color: var(--primary); display: flex; gap: 7px; align-items: center; }
.rl-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; }
.rl-row > span:first-child { flex: 1; min-width: 60%; }
.rl-ok { color: var(--ok); font-weight: 800; }
.rl-late { color: #b42318; font-weight: 800; }
/* Bat El's standby page: the add form, how full each flight is, and the numbers typed in for it */
.sb-add, .sb-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.sb-add { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.sb-add label, .sb-form label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); flex: 1 1 90px; min-width: 0; }
.sb-add .sb-wide, .sb-form .sb-wide { flex: 1 1 100%; }
.sb-add input, .sb-form input { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--soft); color: var(--head); padding: 9px 10px; font: inherit; font-size: 16px; }
.sb-add input[type=date] { direction: ltr; text-align: right; }
.sb-add select { width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--soft); color: var(--head); padding: 9px 10px; font: inherit; font-size: 16px; }
.sb-pick { margin-bottom: 14px; }
/* one flight a row, like the airline staff list: company, number | plane and day, route and hours, the face */
.sb-rows { display: grid; gap: 10px; }
.sb-part { margin: 18px 2px 10px; font-size: 17px; color: var(--head); }
.sb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; background: var(--card); border: 1px solid var(--border); border-inline-start: 5px solid #94a3b8; border-radius: 12px; box-shadow: var(--shadow); padding: 12px 16px; }
.sb-row.sb-good { border-inline-start-color: var(--ok); } .sb-row.sb-mid { border-inline-start-color: #d97706; } .sb-row.sb-bad { border-inline-start-color: #b42318; }
.sb-air { display: flex; align-items: center; gap: 10px; flex: 1 1 170px; min-width: 0; }
.sb-air b { font-size: 15px; color: var(--head); line-height: 1.35; }
.sb-logo { flex: none; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 11px; font-weight: 800; text-align: center; line-height: 1.1; padding: 2px; box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--border); }
.sb-no, .sb-way { display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.sb-no { flex: 0 1 110px; } .sb-way { flex: 1 1 170px; }
.sb-no b, .sb-way b { font-size: 14px; color: var(--head); }
.sb-no small, .sb-way small { font-size: 14px; color: var(--text); }
.sb-face { flex: none; display: flex; align-items: center; gap: 6px; border: none; border-radius: 10px; background: var(--soft); padding: 8px 10px; cursor: pointer; color: #94a3b8; margin-inline-start: auto; }
.sb-face i { color: var(--muted); font-size: 12px; }
.sb-face.good { color: var(--ok); } .sb-face.mid { color: #d97706; } .sb-face.bad { color: #b42318; }
.sb-seats { flex: 1 1 100%; display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.sb-status { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-status .sb-face { margin: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--head); }
.sb-status .sb-face svg { width: 22px; height: 22px; }
.sb-status .sb-face.good svg { color: var(--ok); } .sb-status .sb-face.mid svg { color: #d97706; } .sb-status .sb-face.bad svg { color: #b42318; }
.sb-status .sb-face.on { box-shadow: inset 0 0 0 2px var(--primary); }
.sb-seats p { margin: 0; font-size: 14px; color: var(--head); }
.sb-new { margin-top: 14px; }
.sb-new summary { list-style: none; cursor: pointer; display: inline-flex; }
.sb-new summary::-webkit-details-marker { display: none; }
.sb-new[open] summary { margin-bottom: 10px; }
.sb-add input[type=time] { direction: ltr; text-align: right; }
.sb-bar { height: 10px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.sb-bar i { display: block; height: 100%; border-radius: 6px; background: var(--primary); }
.sb-bar.good i { background: var(--ok); } .sb-bar.mid i { background: #d97706; } .sb-bar.bad i { background: #b42318; }
.sb-chance { font-weight: 800; }
.sb-chance.good { color: var(--ok); } .sb-chance.mid { color: #b45309; } .sb-chance.bad { color: #b42318; }
.rl-wait { color: var(--muted); }
html[data-theme="dark"] .rl-late { color: #fca5a5; }
@media print { .page { padding-bottom: 0; } }
.toast { margin-bottom: var(--bn-h); }
/* the chat never hides the bar: it simply slides over it (it sits above it), so the bar never vanishes and pops back */
html.modal-open .bottom-nav { visibility: hidden; }
/* the veil of a page change: the site's dark colour, deeper at the top, over the page (the top bar and the bottom bar stay above it) */
.turn-veil { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--secondary) 78%, transparent) 0%, color-mix(in srgb, var(--secondary) 55%, transparent) 100%); }
/* the old page's copy that fades away over the new page on a page change (app.js oldFades): under the top and bottom bars */
.turn-ghost { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; background-color: var(--bg); background-attachment: scroll; }
@media print { .turn-veil, .turn-ghost { display: none; } }/* with the trip's photo (or one's own) as the background of the whole site, the home screen's header shows that same photo
   through itself (its blue veil only), so it is one picture behind the whole page that the page scrolls over */
html[data-wall="trip"] .home-head::before, html[data-wall="custom"] .home-head::before { background: color-mix(in srgb, var(--secondary) 58%, transparent); }
html[data-wall="trip"] body::before, html[data-wall="custom"] body::before { background-image: linear-gradient(color-mix(in srgb, var(--bg) 62%, transparent), color-mix(in srgb, var(--bg) 62%, transparent)), var(--wall-img) !important; }
/* a page change, as in a real app: the old page stays on screen and eases back a touch, while the new one rises a little
   and fades in over it (never an empty or white moment). The top bar and the bottom bar do not move. */
/* a plain, smooth half-second cross-fade: nothing moves or shrinks (that shook).
   THE RULE THAT KEEPS EVERY PAGE STILL: the browser takes a picture of the OLD page only (app.js turnPage: the new page has no
   view-transition-name), and that picture fades away over the new page, which is the real, live page from the very first moment.
   A picture of the NEW page (what this did before) is never quite the live page — photos not drawn yet, frosted glass left out,
   text a pixel aside — and when the picture was swapped for the real page at the end, things jumped, blinked or changed colour.
   Seen on screen it is the same half-second fade as before (the old fading out over the new = the new fading in over the old). */
::view-transition-old(root) { animation: vt-out 500ms ease-in-out both; }
@keyframes vt-out { to { opacity: 0; } }
/* nothing on a page may stick out sideways (the phone could then slide the whole page a little to one side) */
#view { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
html[data-motion="reduce"]::view-transition-old(root), html[data-motion="reduce"]::view-transition-new(root) { animation: none; }
/* a slimmer bar: lower, with smaller icons, and only half of the phone's bottom safe strip left empty under it */
:root { --bn-h: 52px; --bn-safe: max(4px, calc(var(--safe-b) - 24px)); } /* the buttons sit low, just above the phone's home line */
.bottom-nav { height: calc(var(--bn-h) + var(--bn-safe)); padding-bottom: var(--bn-safe); }
.bn-item { gap: 1px; font-size: 11.5px; }
.bn-icon { width: 42px; height: 26px; font-size: 17px; }
.page { padding-bottom: calc(var(--bn-h) + var(--bn-safe)) !important; }
@media print { .bottom-nav { display: none; } }
.toast { position: fixed; bottom: calc(18px + var(--safe-b)); left: 50%; transform: translateX(-50%); z-index: 110; background: var(--secondary); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.toast.err { background: #b91c1c; }
/* the pull down to the overview: a pill that comes down with the finger and turns green when letting go will do it */
.pull-hint { position: fixed; top: calc(env(safe-area-inset-top, 0px) - 44px); left: 50%; z-index: 120; width: 210px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; background: var(--secondary); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); pointer-events: none; opacity: 0; transform: translate(-50%, var(--pull, 0px)); transition: background 0.18s ease; }
.pull-hint[hidden] { display: none; }
.pull-hint i { transition: transform 0.22s ease; }
.pull-hint.armed { background: var(--ok); }
.pull-hint.armed i { transform: rotate(180deg); }
.pull-hint.back { transition: transform 0.28s ease, opacity 0.28s ease, background 0.18s ease; }
@media (prefers-reduced-motion: reduce) { .pull-hint.back { transition: none; } }
/* a change on its way to the server: a thin line runs along the top of the screen (only when the answer takes more than a moment) */
.busy-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 130; height: 3px; pointer-events: none; overflow: hidden; opacity: 0; animation: busy-show 0.2s ease 0.25s forwards; }
.busy-bar[hidden] { display: none; }
.busy-bar::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 3px; background: var(--primary); animation: busy-run 1s ease-in-out infinite; }
@keyframes busy-show { to { opacity: 1; } }
@keyframes busy-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* a stop that is being removed fades while the server answers */
.leaving { opacity: 0.35; pointer-events: none; transition: opacity 0.2s ease; }
.toast[hidden] { display: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  /* menu + chat both open on a mid-size screen: keep the cards readable */
  body.drawer-open.chat-open .card-main { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .card-main { grid-template-columns: 1fr; }
  .card-media .main { max-height: 210px; min-height: 160px; aspect-ratio: 16 / 10; } /* the box has its height before the photo arrives: nothing below it jumps */
  .extras { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sheet { align-items: flex-end; padding: 0; }
  .sheet-card { width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(16px + var(--safe-b)); animation: up 0.3s var(--ease); }
  @keyframes up { from { transform: translateY(100%); } }
  .sheet-grip { display: block; width: 40px; height: 5px; border-radius: 3px; background: #d6d0c6; margin: -4px auto 2px; }
  :root { --bar-h: 54px; --radius: 14px; }
  .topbar { gap: 8px; padding-inline: 10px; }
  .brand .jp { font-size: 19px; }
  .brand-text strong { font-size: 21px; }
  .brand-text small { display: none; }
  .crumb { font-size: 12px; padding: 2px 8px; }
  .chat-btn { width: 40px; padding: 0; }
  .chat-btn span { display: none; }
  .container { padding: 12px 12px 60px; }
  .chat { width: 100vw; overscroll-behavior: contain; animation: none; will-change: height, transform; }
  html.chat-lock, html.chat-lock body { overflow: hidden; overscroll-behavior: none; }
  .chat { top: 0; bottom: 0; height: 100dvh; padding-bottom: 0; }
  .chat-input { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .chat-head, .chat-input, .chat-attach { flex: none; }
  .chat-body { min-height: 0; }
  .chat-input { position: relative; z-index: 1; }
  .hero { padding: 32px 14px 12px; border-radius: 18px; margin-bottom: 12px; }
  .hero h1 { font-size: 22px; }
  .hero p { font-size: 13.5px; margin-bottom: 6px; }
  .hero-kanji { font-size: 60px; }
  .hero-highlights { grid-template-columns: 1fr; gap: 7px; padding-top: 10px; }
  .hl { font-size: 13px; }
  .section { margin: 20px 0; }
  .section-head h2 { font-size: 18.5px; }
  .week-body { --axis-h: 600px; }
  .cards-4 { grid-template-columns: 1fr 1fr; gap: 9px; }
  .pcard p { display: none; }
  .pcard h4 { font-size: 14px; }
  .apps-grid, .checks, .essentials { grid-template-columns: 1fr; }
  .day-header { margin-bottom: 12px; gap: 8px; }
  .day-box { padding: 12px 14px; }
  .day-num { width: 42px; height: 42px; font-size: 19px; border-radius: 12px; }
  .day-title h2 { font-size: 19px; }
  .day-meta { align-items: flex-start; }
  .tags { justify-content: flex-start; }
  /* the time axis folds into the card header on a phone */
  .timeline { --road: 58px; }
  .tl-item { column-gap: 8px; }
  .tl-item > .card, .tl-item > .gap-card, .tl-item > .tl-empty, .tl-item > .add-btn { margin-bottom: 12px; }
  .gap-card { padding: 8px 12px; font-size: 13px; }
  .road-node { width: 28px; height: 28px; font-size: 12px; }
  .tl-time .t-start { font-size: 13.5px; padding: 1px 6px; }
  .tl-gap .tl-time { padding-bottom: 12px; }
  .tl-gap .tl-time .t-start { bottom: calc(50% + 16px); }
  .tl-time .t-dur { display: none; }
  .tl-time .t-end { font-size: 11.5px; padding: 0 1px; }
  .tl-time .t-end small { font-size: 10.5px; }
  .card-head { padding: 7px 12px 7px 8px; }
  .card-body { padding: 10px 12px 12px; }
  .card h3 { font-size: 17px; }
  .card .desc { font-size: 14px; }
  .card-actions .btn-map { font-size: 13px; }
  .tl-item.add-stop input[type=time] { width: calc(50% - 4px); }
  .tl-item.add-stop input[name=title], .tl-item.add-stop input[name=note] { min-width: 100%; }
  details.credits ul { columns: 1; }
}

/* ---------- print: the whole plan, day after day ---------- */
@media print {
  body { background: var(--card); }
  .topbar, .drawer, .chat, .scrim, .add-stop, .stop-tools, .notes-add, .note-del, .btn, .check, .lightbox, .modal, .toast, .day-nav, .legend, .icon-btn { display: none !important; }
  .notes:not(.has) { display: none; }
  .page { margin: 0 !important; transform: none !important; }
  .container { max-width: 100%; padding: 0; }
  .print-section { page-break-after: always; }
  .print-section:last-child { page-break-after: auto; }
  .card { box-shadow: none; break-inside: avoid; }
  .card-main { grid-template-columns: 200px 1fr; }
  .card-media .main { min-height: 130px; max-height: 150px; }
  .tl-item { break-inside: avoid; margin-bottom: 10px; }
  .hero { min-height: 0; padding: 20px; }
  .hero, .wblock, .week-day b, .app-icon, .day-num, .day-box, .badge, .card-head, .tl-time .node, .tl-time .t-dur { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .week-scroll { overflow: visible; }
  .week-head, .week-body { min-width: 0; }
}

/* sort-by-area page */
.sort-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sort-form textarea { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; resize: vertical; background: var(--card); }
.sort-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 10px; }
.sort-group { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.sort-group h3 { font-size: 17px; font-weight: 800; color: var(--head); display: flex; align-items: center; gap: 8px; }
.sort-n { width: 24px; height: 24px; border-radius: 50%; background: var(--secondary); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.sort-tip { font-size: 13px; color: var(--muted); margin: 4px 0 6px; }
.sort-group ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.sort-group li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.sort-group li > i { color: var(--head); width: 18px; text-align: center; }
.sort-group li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sort-group li small { color: var(--muted); font-size: 12.5px; }

/* pro tips */
.tip-list { margin: 4px 0 6px; padding-inline-start: 18px; font-size: 14px; color: #334155; display: flex; flex-direction: column; gap: 5px; }
.tip-src { font-size: 12px; margin-top: auto; }
.tip-src a { color: var(--muted); }
.pro-tips > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; color: var(--head); text-decoration: underline; text-underline-offset: 5px; }
.pro-tips > summary::-webkit-details-marker { display: none; }
.pro-tips > summary small { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.pro-tips .chev { margin-inline-start: auto; font-size: 14px; transition: transform 0.2s; }
.pro-tips[open] .chev { transform: rotate(180deg); }
.tips-body { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.tip-topic { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.tip-topic h4 { font-size: 17px; font-weight: 800; color: var(--head); display: flex; align-items: center; gap: 8px; }

/* the highlights button in the hero opens a matching dark panel under it (the hero keeps its size) */
.hero-hl-btn { margin-top: 8px; align-self: flex-start; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); color: inherit; font: inherit; font-weight: 800; font-size: 14px; backdrop-filter: blur(4px); }
.hero-hl-btn small { font-weight: 600; color: color-mix(in srgb, currentColor 85%, transparent); }
.hero-hl-btn .chev { font-size: 12px; transition: transform 0.2s; }
.hero-hl-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hero-hl-panel { margin: -4px 0 14px; padding: 14px 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #1c1917 0%, #292524 60%, #3f1a1d 100%); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16); animation: hl-open 0.22s ease; }
.hero-hl-panel .hero-highlights { border-top: 0; padding-top: 0; }
@keyframes hl-open { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- map + saved places ---------- */
.map-box { margin-top: 10px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: #e8e6e1; } /* the map's own grey while its tiles load, not the page behind it */
html[data-theme="dark"] .map-box { background: #2a2d33; }
/* the kept picture of the map (as last seen) lies under it until its own tiles are all in */
.map-box { background-size: cover; background-position: center; background-repeat: no-repeat; }
.map-box.live { background-image: none !important; }
/* the places map being made in the background, off the screen, at the size it will have on the page */
.map-box.map-warm { position: fixed; top: 0; left: 0; z-index: -10; width: min(calc(100vw - 24px), 1400px); margin: 0; visibility: hidden; pointer-events: none; }
.map-box .leaflet-host { width: 100%; height: 380px; direction: ltr; z-index: 0; border: 0; display: block; }
.emoji-pin { background: none; border: 0; cursor: pointer; }
.map-box .maplibregl-popup-content { direction: rtl; text-align: right; font: inherit; font-size: 14px; padding: 10px 14px; border-radius: 10px; color: #1f2937; }
.map-box .maplibregl-popup-close-button { left: 2px; right: auto; font-size: 18px; }
.emoji-pin span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: 2px solid var(--primary); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); font-size: 20px; line-height: 1; }
.emoji-pin.pending span { border-style: dashed; }
.place-form { position: relative; }
.place-suggest { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 20; background: var(--card); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16); overflow: hidden; max-height: 320px; overflow-y: auto; }
.place-sug { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; text-align: start; color: var(--head); cursor: pointer; }
.place-sug:last-child { border-bottom: 0; }
.place-sug:hover, .place-sug:focus-visible { background: var(--soft); }
.sug-emoji { flex: none; font-size: 18px; }
.sug-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sug-text strong { font-size: 14px; font-weight: 800; }
.sug-text small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-sug-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }
@media print { .place-suggest { display: none; } }
.pin-pick { margin-top: 10px; padding: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; display: grid; gap: 8px; }
.pin-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-kind { display: grid; justify-items: center; min-width: 56px; padding: 4px 6px; border: 2px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; font: inherit; }
.pin-kind span { font-size: 22px; }
.pin-kind small { font-size: 11px; color: var(--muted); }
.pin-kind.on { border-color: var(--primary); background: var(--soft); }
.saved-emoji { flex: none; width: 76px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font: inherit; padding: 4px; }
.map-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.saved-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 14px; }
.saved-tile { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 6px; font: inherit; color: var(--head); cursor: pointer; }
.saved-tile .st-emoji { font-size: 24px; line-height: 1.1; }
.saved-tile strong { font-size: 13px; }
.saved-tile small { font-size: 11px; color: var(--muted, #6b7280); }
.saved-tile.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; background: var(--soft); }
.saved-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin-top: 12px; }
.saved-open { display: flow-root; } /* the open category's list; it slides open, so its inner margin stays inside it */
.saved-subs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.saved-sub { background: var(--soft); border: 1px solid var(--border); border-radius: 13px; }
.saved-sub summary { list-style: none; cursor: pointer; min-height: 46px; padding: 0 14px; display: flex; align-items: center; gap: 8px; color: var(--head); font-size: 15px; }
.saved-sub summary::-webkit-details-marker { display: none; }
.saved-sub summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; margin-inline-start: auto; transition: transform .15s; }
.saved-sub[open] summary::after { transform: rotate(180deg); }
.saved-sub summary small { background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; font-weight: 700; font-size: 12px; }
.saved-sub .saved-list { margin: 0; padding: 0 8px 8px; }
/* near me: a closed list per category, nearest first */
.near .section-head { align-items: center; }
.near .saved-subs { margin-top: 0; }
.near-emoji { font-size: 19px; }
.near-first { color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.near-list { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.near-row { display: flex; align-items: stretch; border-radius: 10px; background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.near-row:hover { border-color: var(--primary); }
.near-tap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.near-tap { text-decoration: none; padding-inline-start: 4px; }
.near-num { flex: none; display: grid; place-items: center; padding: 0; padding-inline: 10px 6px; border: 0; background: none; cursor: pointer; }
.near-num:hover b { background: color-mix(in srgb, var(--ok) 30%, var(--soft)); }
.near-map { flex: none; width: 46px; display: grid; place-items: center; color: var(--primary); border-inline-start: 1px solid var(--border); text-decoration: none; }
/* been here: the whole row turns green */
.near-row.been { background: color-mix(in srgb, var(--ok) 16%, var(--card)); border-color: var(--ok); }
.near-row.been b { background: var(--ok); color: #fff; }
.near-row.been .near-far, .near-row.been .near-map { color: var(--ok); }
.near-row.been .near-map { border-inline-start-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.near-list b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-size: 12px; color: var(--muted); }
.near-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.near-name small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.near-far { flex: none; font-weight: 800; font-size: 13px; color: var(--primary); white-space: nowrap; }
.saved-item { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 6px; }
.saved-name { flex: 1; min-width: 0; text-align: start; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--head); padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-name i { color: #d4a24c; margin-inline-end: 4px; }
/* the place's rating on the right (the start of the line), then its short name */
.saved-name { display: flex; align-items: center; gap: 8px; }
.saved-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-stars { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, #f5b301 16%, var(--card)); color: var(--head); font-size: 13px; font-weight: 800; direction: ltr; }
.saved-stars i { color: #f5b301; margin: 0; font-size: 11px; }
.saved-empty { color: var(--muted); font-size: 13.5px; margin-top: 10px; }
@media (max-width: 700px) { .map-box .leaflet-host { height: 300px; } }

/* chat: one answer per request with a check / cross, thinking dots, conversation list */
.chat-msg.bot { display: flex; gap: 8px; align-items: flex-start; }
.chat-status { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: var(--ok); margin-top: 1px; }
.chat-msg.bot.fail .chat-status { background: #dc2626; }
.chat-msg.bot.fail { border-color: #fecaca; }
.chat-typing { align-items: center; }
.chat-typing em { font-style: normal; font-size: 12.5px; color: var(--muted); margin-inline-start: 4px; }
.chat-head-tools { display: flex; gap: 2px; }
.chat-new { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; border: 1.5px dashed #cbd5e1; background: var(--card); font-weight: 800; color: var(--head); cursor: pointer; }
.chat-new:hover { border-color: var(--primary); color: var(--primary); }
.chat-conv { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: right; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); cursor: pointer; }
.chat-conv:hover { background: var(--soft); }
.chat-conv.active { border-color: var(--primary); background: #fff7f7; }
.chat-conv strong { font-size: 14.5px; color: var(--head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-conv small { font-size: 12px; color: var(--muted); direction: ltr; }
.chat-empty { text-align: center; color: var(--muted); padding: 20px; }

/* chat progress while a task runs: finished steps with a check, the current one with moving dots */
.chat-steps { align-self: flex-end; display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); min-width: 170px; }
.chat-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.chat-step i { width: 14px; font-size: 11px; color: var(--ok); text-align: center; }
.chat-step.now { color: var(--head); font-weight: 700; }
.chat-dots { display: inline-flex; gap: 3px; width: 14px; justify-content: center; }
.chat-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--primary); animation: blink 1.2s infinite; }
.chat-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ===== look & feel pass (2026-10-03): no doubled buttons, colored panels, a calm tinted background ===== */

/* the panel's own header has the close button: hide the top-bar button that opened it */
body.chat-open .topbar .chat-btn,
body.drawer-open .topbar #menuBtn { visibility: hidden; }

/* the page: warm paper with soft color washes, so the white cards stand out */
:root { --bg: #f1ebe2; }
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 600px at 100% -10%, rgba(201, 58, 64, 0.09), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(34, 54, 75, 0.10), transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(217, 119, 6, 0.04), transparent 70%);
  background-attachment: fixed;
}

/* the side menu: the same night-blue as the top bar, light text */
.drawer {
  background: linear-gradient(180deg, #1d2f43 0%, #22364b 55%, #2e2233 100%);
  color: #e8edf3; border-left: none; box-shadow: -10px 0 30px rgba(15, 23, 42, 0.28);
}
.drawer-head { border-bottom-color: rgba(255, 255, 255, 0.1); }
.drawer-head strong { color: #fff; }
.drawer .icon-btn.ghost { color: #fff; }
.drawer .icon-btn.ghost:hover { background: rgba(255, 255, 255, 0.12); }
.drawer .trip-switch { background: rgba(255, 255, 255, 0.08); }
.drawer .trip-switch button { color: rgba(255, 255, 255, 0.8); }
.drawer .trip-switch button.active { background: var(--card); color: var(--primary); }
.drawer .search input { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.drawer .search input::placeholder { color: rgba(255, 255, 255, 0.55); }
.drawer .search input:focus { background: rgba(255, 255, 255, 0.14); border-color: #ff8a8f; box-shadow: none; }
.drawer .search > i { color: rgba(255, 255, 255, 0.6); }
.drawer .tabs { border-top-color: rgba(255, 255, 255, 0.1); }
.drawer .tab-sep { color: rgba(255, 255, 255, 0.5); }
.drawer .tab-sep::after, .drawer .tab-line { background: rgba(255, 255, 255, 0.12); }
.drawer .tab { color: #e8edf3; }
@media (hover: hover) { .drawer .tab:hover { background: rgba(255, 255, 255, 0.08); } }
.drawer .tab.active { background: rgba(255, 138, 143, 0.16); color: #fff; }
.drawer .tab-icon { background: rgba(255, 255, 255, 0.09); color: #fff; }
.drawer .tab.active .tab-icon { background: var(--primary); }
.drawer .tab-label small { color: rgba(255, 255, 255, 0.55); }
.drawer .tab .pct { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); }

/* the chat: a colored header like the top bar, a tinted conversation area */
.chat { border-right: none; box-shadow: 10px 0 30px rgba(15, 23, 42, 0.25); }
.chat-head { background: linear-gradient(90deg, #3a1f2b 0%, #22364b 100%); border-bottom: none; }
.chat-head strong { color: #fff; }
.chat-head strong i { color: #ff8a8f; }
.chat-head .icon-btn.ghost { color: #fff; }
.chat-head .icon-btn.ghost:hover { background: rgba(255, 255, 255, 0.12); }
.chat-body { background: linear-gradient(180deg, #efe8de 0%, #f5f0e9 100%); }
.chat-input { background: #fbf8f4; }

/* ===== smooth panels: the menu / chat and the page move TOGETHER, same time and easing, both ways ===== */
:root { --panel-t: 0.34s; --panel-ease: cubic-bezier(0.22, 0.8, 0.28, 1); }
.page { transition: margin var(--panel-t) var(--panel-ease), transform var(--panel-t) var(--panel-ease); }
.drawer, .chat {
  animation: none;
  transition: transform var(--panel-t) var(--panel-ease), visibility 0s linear 0s;
  will-change: transform;
}
/* closed panels stay in place off-screen (instead of disappearing) so they can slide out as smoothly as they slide in */
.drawer[hidden] { display: flex; transform: translateX(100%); visibility: hidden; transition: transform var(--panel-t) var(--panel-ease), visibility 0s linear var(--panel-t); }
.chat[hidden] { display: flex; transform: translateX(-100%); visibility: hidden; transition: transform var(--panel-t) var(--panel-ease), visibility 0s linear var(--panel-t); }
/* the dim layer fades with the panel (it stays drawn while hidden, so it can fade out too); it takes no pans,
   so a finger on it never scrolls the page underneath */
.scrim { background: rgba(10, 21, 43, 0.38); animation: none; touch-action: none; will-change: opacity; transition: opacity var(--panel-t) var(--panel-ease), visibility 0s linear 0s; }
.scrim[hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--panel-t) var(--panel-ease), visibility 0s linear var(--panel-t); }
.drawer, .chat { backface-visibility: hidden; overscroll-behavior: contain; }
.drawer-body { overscroll-behavior: contain; }
.drawer-head, .chat-head { touch-action: none; } /* the bars on top of the panels: a finger there swipes the panel, never scrolls the page */
@media (prefers-reduced-motion: reduce) {
  .page, .drawer, .chat, .drawer[hidden], .chat[hidden], .scrim, .scrim[hidden] { transition: none; }
}

/* ===== iPhone: nothing may stick out sideways, or Safari zooms the whole page out ===== */
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { position: relative; }
/* closed panels sit off-screen: keep them out of the page's width */
.drawer[hidden], .chat[hidden] { pointer-events: none; }
@media (max-width: 999px) {
  .drawer, .chat { contain: layout paint; }
}

/* ===== chat on a phone: a full screen that sits exactly on the visible area (above the keyboard) =====
   Its top and height follow the keyboard directly, with no easing, and the site behind is frozen. */
@media (max-width: 999px) {
  html.chat-lock, html.chat-lock body { overflow: hidden; overscroll-behavior: none; height: 100%; }
  html.chat-lock body { position: fixed; left: 0; right: 0; bottom: auto; width: 100%; height: auto; } /* top: set by the page to where it was scrolled */
  /* once the chat covers the screen the site under it is not drawn: with the keyboard up the iPhone leaves a see-through
     strip between the typing box and the keys, and the site showed (and moved) there. It comes back the moment the chat
     starts to close (chat-open goes first), so it is there as the chat slides away. */
  html.chat-lock, html.chat-lock body.chat-open { background: var(--card); }
  html.chat-lock body.chat-open .page, html.chat-lock body.chat-open #bottomNav { visibility: hidden; }
  .chat { width: 100vw; top: 0; bottom: auto; height: 100dvh; overscroll-behavior: contain; will-change: transform; touch-action: pan-y; } /* a finger in the chat scrolls it up and down, never slides the screen sideways */
  .chat-head, .chat-input, .chat-attach { flex: none; }
  .chat-body { min-height: 0; overscroll-behavior: contain; }
  .chat .chat-input:focus-within { padding-bottom: 8px; } /* the keyboard is up: no room for the home bar, the box sits right on the keys */
}

/* ---------- colour palette: navy (deep dark blue, steel-blue accents, a cool pale-blue page) ---------- */
:root {
  --primary: #1f3a68;
  --primary-dark: #14284b;
  --secondary: #0f1e38;
  --accent: #4a78b8;
  --bg: #dfe6f0;
  --card: #fbfcfe;
  --text: #131c2b;
  --muted: #5f6b7d;
  --border: #c9d3e1;
  --soft: #d8e0ec;
  --ok: #2f8a5a;
}
body {
  background-image:
    radial-gradient(1100px 600px at 100% -10%, rgba(31, 58, 104, 0.14), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(15, 30, 56, 0.14), transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(74, 120, 184, 0.07), transparent 70%);
}
.topbar { background: linear-gradient(90deg, #0a152b 0%, #0f1e38 50%, #1f3a68 100%); }
.topbar .brand .jp, .chat-head strong i { color: #8fb8f0; }
.drawer { background: linear-gradient(180deg, #0a152b 0%, #0f1e38 55%, #182d52 100%); }
.drawer .search input:focus { border-color: #8fb8f0; }
.drawer .tab.active { background: rgba(143, 184, 240, 0.16); }
.chat-head { background: linear-gradient(90deg, #1f3a68 0%, #0a152b 100%); }
.chat-body { background: linear-gradient(180deg, #dce4ef 0%, #e8edf5 100%); }
.chat-input { background: #f6f8fc; }
.search input:focus { box-shadow: 0 0 0 3px rgba(31, 58, 104, 0.18); }
.eyebrow { background: rgba(31, 58, 104, 0.94); }
.badge.must { --c: #1f3a68; }
.week-head, .week-gutter-head { background: #eef2f8; }

/* ===== the hero photo is part of the page's top background (no card): it runs edge to edge under the top bar
   and melts into the page colour further down ===== */
.hero:has(.hero-bg) {
  overflow: visible; background: none; box-shadow: none; border-radius: 0;
  min-height: 200px; justify-content: flex-end; padding: 16px 4px 40px; margin-bottom: 18px;
}
/* behind the photo: deep navy that thins out slowly, so the photo melts into dark blue first and only then into the page */
.hero:has(.hero-bg)::after {
  top: -24px; bottom: -110px; left: 50%; right: auto; width: 100vw; transform: translateX(-50%); z-index: -2;
  background: linear-gradient(to bottom, #0f1e38 0, #0f1e38 calc(100% - 220px), rgba(15, 30, 56, 0) 100%);
}
.hero:has(.hero-bg) > .hero-bg {
  top: -24px; bottom: -60px; left: 50%; right: auto; width: 100vw; transform: translateX(-50%); z-index: -1; opacity: 1;
  background-image: linear-gradient(to bottom, rgba(8, 16, 34, 0.06), rgba(8, 16, 34, 0.34) 55%, rgba(8, 16, 34, 0.42)), var(--hero-img);
  background-size: cover; background-position: center 45%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 180px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 180px), transparent 100%);
}
/* New York: the statue stands on the left of the photo — keep it in view on a narrow screen */
.hero > .hero-bg[style*="ny-cover"] { background-position: 14% 40%; }
.hero:has(.hero-bg) h1, .hero:has(.hero-bg) p { text-shadow: 0 1px 3px rgba(4, 10, 24, 0.75), 0 2px 14px rgba(4, 10, 24, 0.55); }
.hero:has(.hero-bg) .hero-hl-btn { background: rgba(10, 21, 43, 0.6); border-color: rgba(255, 255, 255, 0.3); }
.hero-hl-panel { background: linear-gradient(135deg, #0a152b 0%, #0f1e38 60%, #1f3a68 100%); }
@media print {
  .hero:has(.hero-bg) { min-height: 0; padding: 20px; margin-bottom: 14px; }
  .hero:has(.hero-bg)::after { display: none; }
  .hero:has(.hero-bg) > .hero-bg { top: 0; bottom: 0; -webkit-mask-image: none; mask-image: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- the weather of every day and the money calculator (overview, above the flights) ---------- */
/* three days in view; a longer trip scrolls sideways, one day at a time */
.wx-days { --gap: 10px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 2px 10px; margin: -2px -2px 0; scroll-padding-inline: 2px; }
.wx-day { scroll-snap-align: start; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); color: var(--text); text-decoration: none; text-align: center; line-height: 1.25; }
button.wx-day { font: inherit; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
button.wx-day.on { border-color: #2f6fb7; box-shadow: 0 0 0 2px #2f6fb7; }
/* the hours of the open day: a sky-blue card whose row scrolls sideways, like the phone's weather app */
.wxh-head strong { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wxh-back { flex: none; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-size: 12px; font-weight: 700; }
.wx-hours { cursor: pointer; padding: 14px 0 12px; border-radius: 20px; color: #fff; background: linear-gradient(165deg, #2a62a8 0%, #3f7fc8 55%, #6aa3e0 100%); box-shadow: 0 10px 26px rgba(31, 78, 140, 0.25); }
.wxh-head { display: flex; flex-direction: column; gap: 2px; padding: 0 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.wxh-head strong { font-size: 16px; font-weight: 800; }
.wxh-head span { font-size: 13.5px; color: rgba(255, 255, 255, 0.88); }
.wxh-row { position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 12px 8px 4px; scroll-padding-inline: 8px; scrollbar-width: none; }
.wxh-row::-webkit-scrollbar, .wx-days::-webkit-scrollbar { display: none; }
.wx-days { scrollbar-width: none; }
/* a computer has no finger to swipe with: there the two rows show a thin scroll bar to drag */
@media (hover: hover) and (pointer: fine) {
  .wx-days { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
  .wxh-row { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.6) transparent; padding-bottom: 10px; }
  .wxh-row::-webkit-scrollbar, .wx-days::-webkit-scrollbar { display: block; height: 8px; }
  .wx-days::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 999px; }
  .wxh-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.6); border-radius: 999px; }
}
/* days ⇄ hours: the new side flips in with a small bounce */
.wx-body { perspective: 900px; }
.wx-swap { animation: wx-swap 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both; transform-origin: center top; }
@keyframes wx-swap { from { opacity: 0; transform: rotateX(-55deg) scale(0.94); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wx-swap { animation: none; } }
.wxh-col { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
.wxh-col b { font-size: 13.5px; font-weight: 700; }
.wxh-col > i { font-size: 21px; height: 22px; }
.wxh-col > i.fa-sun { color: #ffd60a; }
.wxh-col > i.fa-moon, .wxh-col > i.fa-cloud-moon { color: #e6ecf7; }
.wxh-col strong { font-size: 18px; font-weight: 700; }
.wxh-col small { font-size: 12px; color: #cfe6ff; white-space: nowrap; }
.wxh-col small i { font-size: 10px; }
.wxh-wait { padding: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.9); }
.wx-day > b { font-size: 14.5px; font-weight: 800; color: var(--head); }
.wx-day > small { font-size: 12px; color: var(--muted); }
.wx-ic { font-size: 28px; color: var(--accent); margin: 8px 0 4px; }
.wx-t { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.wx-t strong { font-size: 22px; font-weight: 800; }
.wx-t s { text-decoration: none; font-size: 15px; color: var(--muted); }
.wx-day em { font-style: normal; font-size: 13px; font-weight: 700; }
.wx-rain { font-size: 12px; color: var(--muted); }
.wx-rain i { color: var(--accent); font-size: 11px; }
.wx-tag { position: absolute; top: 6px; inset-inline-end: 6px; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 10.5px; font-weight: 700; }
.wx-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.wx-note:empty { display: none; }
.fx-card { padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); }
.fx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fx-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--soft); min-width: 0; }
.fx-tile small { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.fx-tile b { font-size: 22px; font-weight: 800; color: var(--head); text-align: right; font-variant-numeric: tabular-nums; }
.fx-rates .wx-note { margin-top: 0; }
.fx-calc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; margin-top: 14px; }
.fx-swap { color: var(--muted); padding-bottom: 15px; }
.fx-sym { min-width: 16px; text-align: center; color: var(--muted); font-size: 16px; }
.fx-calc .field input { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .wx-days { --gap: 8px; }
  .fx-card { padding: 14px 12px; }
  .fx-tile b { font-size: 19px; }
  .fx-calc { gap: 6px; }
}

/* ---------- the flight card (overview, above the map): a navy ticket with a countdown line ---------- */
.flight .section-head { align-items: center; }
.fl-card { color: #fff; border-radius: 20px; padding: 18px 20px; background: linear-gradient(135deg, #0a152b 0%, #0f1e38 55%, #1f3a68 100%); box-shadow: 0 12px 30px rgba(10, 21, 43, 0.22); display: flex; flex-direction: column; gap: 16px; }
.fl-empty { align-items: flex-start; gap: 12px; }
.fl-empty p { color: rgba(255, 255, 255, 0.8); font-size: 14.5px; }
.fl-card .btn { background: #fff; color: var(--primary-dark); }
.fl-card .btn:hover { background: #dfe6f0; }
.fl-card .btn.ghost { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.fl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 17px; }
.fl-top span { font-weight: 800; letter-spacing: 0.04em; padding: 3px 11px; border-radius: 999px; background: rgba(143, 184, 240, 0.2); color: #cfe1fb; font-size: 14px; }
.fl-route { display: flex; align-items: center; gap: 10px; }
.fl-end { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fl-end:last-child { text-align: left; align-items: flex-end; }
.fl-end em { font-style: normal; font-size: 12.5px; color: #8fb8f0; font-weight: 700; margin-bottom: 4px; }
.fl-end b { font-size: 26px; font-weight: 800; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.fl-end strong { font-size: 19px; font-weight: 700; direction: ltr; }
.fl-end small { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); min-height: 15px; }
.fl-mid { flex: 1; min-width: 40px; display: flex; align-items: center; justify-content: center; position: relative; color: #8fb8f0; }
.fl-mid::before { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 2px dashed rgba(143, 184, 240, 0.45); }
.fl-mid i { position: relative; transform: scaleX(-1); background: #0f1e38; padding: 0 8px; font-size: 18px; }
.fl-count { border-top: 1px dashed rgba(255, 255, 255, 0.22); padding-top: 14px; }
.fl-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.fl-clock div { text-align: center; padding: 8px 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); }
.fl-clock b { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fl-clock small { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.fl-line { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); margin: 0 10px; }
.fl-line span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 3px; background: linear-gradient(to left, #8fb8f0, #4a78b8); }
.fl-line i { position: absolute; top: 50%; translate: 50% -50%; scale: -1 1; font-size: 17px; color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); }
.fl-line-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.fl-gone { text-align: center; font-weight: 800; font-size: 17px; color: #cfe1fb; }
.fl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* the two rows of two boxes share the same columns, and a box never grows past the sheet */
.field { min-width: 0; }
#flightForm .field-row { display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); }
#flightForm .field-row > .field:last-child { grid-column: 3; }
.field input[dir=ltr] { text-align: right; } /* the flight number sits next to its icon like every other box */
.field input::placeholder { color: var(--muted); opacity: 0.75; }
.field-label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.field input[type=datetime-local] { direction: ltr; text-align: right; min-height: 44px; }
#flightRemove { align-self: center; cursor: pointer; font-size: 13.5px; }
#flightRemove[hidden] { display: none; }
/* removing a day is a red button of its own, as wide as "save" */
#dayRemove { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; background: #dc2626; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
#dayRemove:hover { background: #b91c1c; color: #fff; }
#dayRemove[hidden] { display: none; }
/* editing a day opens as a box in the middle of the screen, on a phone too */
#daySheet { align-items: center; padding: 16px; }
#daySheet .sheet-card { width: min(440px, 100%); border-radius: 20px; padding-bottom: 16px; animation: pop 0.25s var(--ease); }
#daySheet .sheet-grip { display: none; }
/* the days of the side menu: a pen beside every day, and "add a day" under the last one */
.tab-row { display: flex; align-items: center; gap: 2px; }
.tab-row .tab { flex: 1; min-width: 0; }
.tab-edit { flex: none; width: 36px; height: 36px; border: none; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, 0.6); font-size: 13px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.tab-edit:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
button.tab.tab-add { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 15px; text-align: start; cursor: pointer; margin-top: 4px; color: #e8edf3; }
@media (hover: hover) { button.tab.tab-add:hover { background: rgba(255, 255, 255, 0.08); } }
@media (max-width: 640px) {
  .fl-card { padding: 16px 14px; border-radius: 18px; }
  .fl-end b { font-size: 22px; }
}
/* there and back: the two flight cards side by side on a wide screen, one under the other on a phone */
/* the live status of a flight: a chip (green on time, red delayed/cancelled), gate and terminal, when it was checked */
.fl-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.fl-live small { margin-inline-start: auto; font-size: 11.5px; color: rgba(255, 255, 255, 0.55); }
.fl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 800; background: rgba(255, 255, 255, 0.1); color: #cfe1fb; }
.fl-chip.ok { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }
.fl-chip.bad { background: rgba(248, 113, 113, 0.2); color: #fca5a5; }
.fl-end.moved strong { color: #fca5a5; }
.fl-end strong s { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.fl-count:empty { display: none; }
.fl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.fl-head-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-top-side { display: flex; align-items: center; gap: 8px; }
.fl-top span.fl-top-side { padding: 0; background: none; }
.fl-leg { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #8fb8f0; color: #0a152b; margin-inline-end: 4px; vertical-align: middle; }
/* the running countdown is small: one tight row of numbers above the line */
.fl-clock { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.fl-clock div { display: flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: 999px; }
.fl-clock b { display: inline; font-size: 14px; }
.fl-clock small { font-size: 11px; }

/* ----- tidy lines: everything inside the flight card and its form sits on straight rows with even gaps ----- */
.fl-card { gap: 14px; }
.fl-top { min-height: 34px; line-height: 1.2; }
.fl-top > strong { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-leg { margin: 0; flex: none; line-height: 1.5; }
.fl-top-side { flex: none; }
.fl-num { white-space: nowrap; line-height: 1.5; }
/* take-off | plane | landing: three fixed columns; label, code, time and date each on its own fixed-height row */
.fl-route { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; gap: 10px; }
.fl-end { display: grid; grid-template-rows: 18px 32px 26px 18px; row-gap: 3px; align-items: center; text-align: start; }
.fl-end:last-child { text-align: end; align-items: center; }
.fl-end em { margin: 0; line-height: 18px; white-space: nowrap; }
.fl-end b { line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.fl-end strong { line-height: 26px; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* under the Israel time: the same moment on the destination's clock, in another colour */
.fl-end { grid-auto-rows: 20px; }
.fl-local { font-size: 13px; font-weight: 700; line-height: 20px; color: #ffc46b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-local bdi { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* scrolling down to the flights: the card waits hidden and drops in from above with a small bounce */
.section.flight:not(.seen):not(.in) > :not(.section-head) { opacity: 0; transform: translateY(-36px); }
/* a calm reveal: the card eases down a short way from above while it fades in, and slows to a stop (no bounce) */
.section.flight.in:not(.seen) > :not(.section-head) { animation: fl-drop 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; will-change: transform, opacity; }
@keyframes fl-drop {
  from { opacity: 0; transform: translateY(-36px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce), print {
  .section.flight > :not(.section-head) { opacity: 1 !important; transform: none !important; animation: none !important; }
}
/* the there/home switch at the card's top corner */
.fl-swap { border: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 6px 13px; min-height: 32px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transition: transform 0.1s, background 0.15s; }
/* a button whose text changes (הלוך ⇄ חזור, פעיל ⇄ כבוי) keeps one size: a fixed width, the text centred */
.fl-leg { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; box-sizing: border-box; }
.fl-swap { width: 88px; justify-content: center; white-space: nowrap; }
.share-label .badge { min-width: 48px; justify-content: center; box-sizing: border-box; }
.fl-swap:hover { background: #b5d2f7; }
.fl-swap:active { transform: scale(0.96); }
.fl-swap i { font-size: 12px; }
/* the golden line: the time, then "שעון ניו יורק" beside it — same size, same gap, on both sides of the card */
.fl-end > .fl-local { display: flex; align-items: center; gap: 6px; justify-content: flex-start; font-size: 14px; font-weight: 700; margin-top: 3px; }
.fl-end:last-child > .fl-local { justify-content: flex-end; }
.fl-local bdi, .fl-local span { font-size: 14px; font-weight: 700; line-height: 20px; color: inherit; padding: 0; background: none; letter-spacing: 0; }
/* the time sits right under its airport code, on the same side */
.fl-end > * { display: block; width: 100%; text-align: right; }
.fl-end:last-child > * { text-align: left; }
.fl-end small { line-height: 18px; min-height: 0; white-space: nowrap; }
.fl-mid { min-width: 0; height: 100%; }
/* the countdown: four equal boxes on one line */
.fl-clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fl-clock div { justify-content: center; align-items: center; padding: 5px 4px; border-radius: 10px; line-height: 1.2; }
.fl-clock b { min-width: 2ch; text-align: center; }
.fl-line-ends { line-height: 1.2; }
.fl-actions .btn { min-height: 38px; justify-content: center; }
.fl-actions .btn:first-child { flex: 1; }
/* the form: a label above every box, two even columns, date-and-time boxes across the whole width */
.fl-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 10px; }
.fl-form .wide { grid-column: 1 / -1; }
.fl-form .field-label { min-width: 0; line-height: 1.3; }
.fl-form .field { height: 46px; flex: none; }
.fl-form .field input { height: 44px; padding: 0; line-height: 44px; }
.fl-form .field input[type=datetime-local] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 0; margin: 0; direction: ltr; text-align: right; }
.fl-form input[type=datetime-local]::-webkit-date-and-time-value { text-align: right; margin: 0; }
/* the clock switch above the flight card: two halves of the same size, the chosen one filled */
.fl-clock-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin-bottom: 10px; border: 1.5px solid var(--secondary); border-radius: 12px; background: var(--soft); }
.fl-clock-switch button { min-width: 0; height: 38px; padding: 0 8px; border: none; border-radius: 9px; background: transparent; color: var(--head); font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background 0.15s, color 0.15s; }
.fl-clock-switch button.active { background: #0f1e38; color: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2); }

/* ---------- documents (menu, under the flights) ---------- */
.docs .section-head { align-items: center; }
/* every card is the same size whatever it holds */
.doc-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.doc { display: flex; align-items: center; gap: 4px; height: 76px; padding: 0 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.doc-pic { flex: none; width: 56px; height: 56px; margin-inline-end: 8px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--soft); color: var(--primary); font-size: 22px; text-decoration: none; }
.doc-pic img { width: 100%; height: 100%; object-fit: cover; }
.doc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.doc-text b, .doc-text span { display: block; height: 21px; line-height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the name gets two lines, so a long one is read whole instead of cut with "…" */
.doc-text b { color: var(--head); font-size: 15px; height: 42px; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.doc-text span { color: var(--muted); font-size: 13px; font-weight: 600; }
.field select { flex: 1; min-width: 0; border: none; background: transparent; padding: 11px 0; font: inherit; font-size: 16px; color: inherit; outline: none; }
.field input[type=date] { direction: ltr; text-align: right; }
/* in the documents sheet the date and the hours are picked, not typed */
#docForm .field:has(input[type=date], input[type=time]), #docForm .field input[type=date], #docForm .field input[type=time] { cursor: pointer; caret-color: transparent; }
/* no part of the field lights up as if waiting for typing, and the browser's own little clock/calendar is hidden (the field has its icon) */
#docForm .field input[type=date], #docForm .field input[type=time] { user-select: none; -webkit-user-select: none; }
#docForm input::-webkit-datetime-edit-hour-field:focus, #docForm input::-webkit-datetime-edit-minute-field:focus, #docForm input::-webkit-datetime-edit-ampm-field:focus,
#docForm input::-webkit-datetime-edit-day-field:focus, #docForm input::-webkit-datetime-edit-month-field:focus, #docForm input::-webkit-datetime-edit-year-field:focus { background: transparent; color: inherit; }
#docForm input::-webkit-calendar-picker-indicator { display: none; }
.doc-file-btn { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border: 1.5px dashed #cbd5e1; border-radius: 12px; background: var(--card); color: var(--head); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.doc-file-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
/* the drop box: a file is dropped on it, or a press opens the folder; the same size with or without a file over it */
.doc-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none; width: 100%; height: 108px; border: 2px dashed #cbd5e1; border-radius: var(--radius); background: var(--soft); color: var(--muted); font: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.doc-drop i { font-size: 30px; color: var(--primary); }
.doc-drop b { color: var(--head); font-size: 15px; }
.doc-drop span { font-size: 13px; font-weight: 600; }
.doc-drop:hover, .doc-drop.over { border-color: var(--primary); background: var(--card); }
/* an entry with several files: their number on its picture, and in the sheet one row per file */
.doc-pic { position: relative; }
/* the documents of a section stand two in a row (more on a wide screen) and the page scrolls down for the rest;
   a card is sized so that four of them (two rows) fit on a phone screen; each shows the first page of its file */
.doc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .doc-list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.doc { flex-direction: column; align-items: stretch; gap: 0; min-width: 0; height: auto; padding: 8px; }
.doc > .doc-pic { width: 100%; height: clamp(140px, calc((100vh - 240px) / 2 - 62px), 250px); margin: 0; font-size: 56px; }
.doc > .doc-pic img { object-position: top; }
.doc-foot { display: flex; align-items: center; gap: 0; margin-top: 8px; }
.doc-foot .icon-btn { flex: none; width: 32px; height: 32px; font-size: 14px; }
.doc[data-action] { cursor: pointer; }
/* the viewer: a file shown on the site, under a bar with its name, the download button and the × */
.doc-view { position: fixed; inset: 0; z-index: 97; display: flex; flex-direction: column; background: rgba(10, 12, 20, 0.94); animation: fade 0.2s ease; }
.doc-view[hidden] { display: none; }
.doc-view-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--safe-t)) 12px 10px; background: #0f1e38; color: #fff; }
.doc-view-bar strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.doc-view-bar .icon-btn { flex: none; background: rgba(255, 255, 255, 0.14); color: #fff; }
.doc-view-bar .btn { flex: none; width: 104px; justify-content: center; background: #fff; color: #0f1e38; text-decoration: none; }
.doc-view-bar [hidden] { display: none; }
.doc-view-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px 12px calc(12px + var(--safe-b)); overflow: auto; }
/* a picture or a PDF: the whole width, page under page, scrolled with one finger and made bigger with two */
.doc-zoom { align-self: stretch; flex: 1; min-width: 0; max-width: 1000px; margin: 0 auto; overflow: auto; direction: ltr; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.doc-pages { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.doc-pages img, .doc-pages canvas { display: block; width: 100%; height: auto; background: #fff; border-radius: 6px; }
.doc-view-body iframe { width: min(1000px, 100%); height: 100%; border: none; border-radius: 10px; background: #fff; }
.doc-view-body pre { align-self: stretch; width: min(1000px, 100%); margin: 0; padding: 14px; overflow: auto; border-radius: 10px; background: #fff; color: #0f172a; font-size: 13px; white-space: pre-wrap; word-break: break-word; text-align: start; }
.doc-view-note { color: #e2e8f0; font-size: 15px; font-weight: 600; text-align: center; line-height: 1.7; }
.doc-view-note i { display: block; margin-bottom: 10px; font-size: 40px; }
/* the start of a text or of a saved web page, as a small page on a card or a tile (never pressed itself: the press goes to the card) */
.doc-mini { display: block; width: 100%; height: 100%; margin: 0; border: none; background: #fff; pointer-events: none; }
pre.doc-mini { padding: 10px; overflow: hidden; color: #0f172a; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; text-align: start; }
iframe.doc-mini { position: absolute; top: 0; left: 0; width: 860px; height: 1120px; transform: scale(0.3); transform-origin: top left; overflow: hidden; } /* sized by fitDocMinis */
/* a saved web page in the viewer: a whole white page like a PDF's, sized by docShow */
.doc-html { position: relative; width: 100%; overflow: hidden; background: #fff; border-radius: 6px; }
.doc-html iframe { position: absolute; top: 0; left: 0; border: none; transform-origin: top left; pointer-events: none; background: #fff; }
/* the files of an entry: a turning row of pages — one in front in the middle, the others leaning back at its sides (turned by docFlowDraw) */
.doc-flow-wrap { --tile: min(62vw, 300px, 46vh); position: relative; width: 100%; max-width: 1100px; display: flex; flex-direction: column; align-items: center; gap: 14px; overflow: hidden; }
.doc-flow { position: relative; width: 100%; height: calc(var(--tile) * 4 / 3 + 64px); perspective: 1100px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.doc-flow:active { cursor: grabbing; }
.doc-tile { position: absolute; top: 20px; left: calc(50% - var(--tile) / 2); width: var(--tile); display: flex; flex-direction: column; gap: 10px; padding: 0; border: none; background: none; color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transform-style: preserve-3d; will-change: transform, opacity; -webkit-tap-highlight-color: transparent; }
.doc-tile img { pointer-events: none; -webkit-user-drag: none; }
.doc-tile-pic { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--card); color: var(--primary); font-size: 56px; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5); }
.doc-tile-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.doc-tile-name { opacity: 0; transition: opacity 0.2s; }
.doc-tile.front .doc-tile-name { opacity: 1; }
.doc-tile.front .doc-tile-pic { outline: 3px solid rgba(255, 255, 255, 0.85); }
.doc-flow-arrow { position: absolute; top: calc(20px + var(--tile) * 2 / 3); translate: 0 -50%; z-index: 200; width: 44px; height: 44px; border: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 17px; cursor: pointer; backdrop-filter: blur(6px); transition: opacity 0.2s; }
.doc-flow-arrow.prev { right: 10px; }
.doc-flow-arrow.next { left: 10px; }
.doc-flow-arrow:disabled { opacity: 0; pointer-events: none; }
.doc-flow-dots { display: flex; gap: 8px; }
.doc-flow-dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: width 0.25s, background 0.25s; }
.doc-flow-dots i.on { width: 22px; background: #fff; }
@media (max-width: 640px) { .doc-flow-arrow { display: none; } }
.doc-choose { width: min(460px, 100%); max-height: 100%; }
.doc-choose li { height: 60px; padding: 0; }
.doc-choose button { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 12px; border: none; background: none; color: var(--head); font: inherit; font-weight: 700; font-size: 15px; text-align: start; cursor: pointer; }
.doc-choose .doc-file-pic { width: 42px; height: 42px; font-size: 18px; }
.doc-choose button > i { flex: none; color: var(--muted); }
.doc-count { position: absolute; inset-block-end: 3px; inset-inline-end: 3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--secondary); color: #fff; font-size: 12px; font-weight: 700; font-style: normal; line-height: 20px; text-align: center; }
.doc-files { list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.doc-files li { display: flex; align-items: center; gap: 4px; height: 44px; padding-inline-start: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.doc-files li > a, .doc-files li > div { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--head); font-weight: 700; font-size: 14px; text-decoration: none; }
.doc-files li span:not(.doc-file-pic) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-file-pic { flex: none; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--soft); color: var(--primary); font-size: 15px; }
.doc-file-pic img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- private details (menu, under "more"): locked boxes ---------- */
.priv .section-head { align-items: center; }
.priv-note { color: var(--muted); font-size: 14px; line-height: 1.6; }
.priv-err { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: #fef2f2; color: #b91c1c; font-size: 14px; font-weight: 700; text-align: center; }
.priv-people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; max-width: 440px; }
.priv-person { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 104px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--head); font: inherit; font-size: 16px; cursor: pointer; box-shadow: var(--shadow); }
.priv-person i { font-size: 26px; color: var(--primary); }
.priv-person.active { border-color: var(--primary); background: var(--soft); }
.priv-open { display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
.priv-open b { color: var(--head); font-size: 15px; }
/* the documents' door: a small window in the middle — who are you, then your code once */
.priv-gate { max-width: 460px; margin: 28px auto; padding: 26px 22px; border-radius: 22px; background: var(--card); box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14); text-align: center; }
/* the same motion as a page coming in (reveal-in): when the page's own rise ends, the window does not start a second one (that was the little jump) */
.priv-gate.fresh { animation: reveal-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.priv-gate h2 { margin: 6px 0 2px; font-size: 22px; color: var(--head); }
.priv-gate-icon { width: 58px; height: 58px; margin: 0 auto; display: grid; place-items: center; border-radius: 18px; background: var(--soft); color: var(--primary); font-size: 26px; }
.priv-gate .priv-people { margin: 14px auto; }
.priv-gate .priv-open { margin: 0 auto; text-align: start; }
.priv-gate .priv-note:empty { display: none; }
@keyframes gate-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
/* opening: the window shows it is working, fades away, and the page rises in one section after the other */
.priv-gate.busy .priv-open { opacity: 0.6; pointer-events: none; transition: opacity 0.2s; }
.priv-gate.leaving { animation: gate-out 0.26s ease forwards; }
@keyframes gate-out { to { opacity: 0; transform: translateY(-8px) scale(0.97); } }
/* every part of a page that comes in rises from below, one after the other — the home screen's top card too, so all pages move alike */
#view.reveal > * { animation: reveal-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#view.reveal > :nth-child(2) { animation-delay: 0.07s; }
#view.reveal > :nth-child(3) { animation-delay: 0.14s; }
#view.reveal > :nth-child(4) { animation-delay: 0.21s; }
#view.reveal > :nth-child(n + 5) { animation-delay: 0.28s; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(16px); } }
.priv-pin { -webkit-text-security: disc; direction: ltr; text-align: right; letter-spacing: 3px; }
.priv-tools { display: flex; gap: 6px; }
.priv-tools .btn { flex: none; width: 92px; justify-content: center; }
.priv-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.priv-item { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.priv-head { display: flex; align-items: center; gap: 2px; }
.priv-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--head); font-size: 16px; }
.priv-secret { display: flex; align-items: center; gap: 2px; padding-inline-start: 12px; border-radius: 12px; background: var(--soft); }
.priv-secret code { flex: 1; min-width: 0; padding: 10px 0; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--head); white-space: pre-wrap; word-break: break-word; text-align: start; }
.priv-files { display: flex; flex-wrap: wrap; gap: 6px; }
.priv-file { display: flex; align-items: center; gap: 8px; max-width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--head); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.priv-file i { color: var(--primary); }
.priv-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priv-text { border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; background: var(--bg); font: inherit; font-size: 16px; color: var(--text, inherit); resize: vertical; outline: none; }
.priv-text:focus { border-color: var(--primary); background: var(--card); }
.doc-empty { color: var(--muted); font-size: 14px; padding: 14px 16px; text-align: center; background: var(--soft); border-radius: var(--radius); }
.docs .doc-add { flex: none; width: 96px; justify-content: center; }
.priv-offline { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 12px; border-radius: 12px; background: var(--soft); color: var(--muted); font-size: 13.5px; font-weight: 700; }
.priv-offline i { color: var(--primary); }

/* ===== settings (the last page of the menu): the site's colours (html[data-color]), light/dark (html[data-theme]),
   the wallpaper (html[data-wall]), the text size (html[data-size]) and fewer animations (html[data-motion]) ===== */
/* the bars (top bar, menu, chat head, flight card) are drawn from three tones of the chosen colours */
:root { --bar-a: #0a152b; --bar-b: #0f1e38; --bar-c: #1f3a68; --glow: #8fb8f0; }
:root[data-color="red"] { --primary: #b8323a; --primary-dark: #8f2228; --secondary: #3a1a1e; --accent: #d97706; --bg: #f2e9e3; --card: #fffdfb; --soft: #efe2d9; --border: #e3d2c6; --bar-a: #22100f; --bar-b: #3a1a1e; --bar-c: #8f2a30; --glow: #ffa3a8; }
:root[data-color="green"] { --primary: #2b6e4f; --primary-dark: #1f5039; --secondary: #12301f; --accent: #b7791f; --bg: #e2ebe5; --card: #fbfdfc; --soft: #d5e3da; --border: #c3d5c9; --bar-a: #0a1a12; --bar-b: #12301f; --bar-c: #2b6e4f; --glow: #8fe0b5; }
:root[data-color="purple"] { --primary: #5b3fa6; --primary-dark: #452f80; --secondary: #23173f; --accent: #d97706; --bg: #e7e3f1; --card: #fdfcff; --soft: #dcd5ec; --border: #cdc4e2; --bar-a: #120b24; --bar-b: #23173f; --bar-c: #4f3591; --glow: #c6b4ff; }
:root[data-color="teal"] { --primary: #0f6e67; --primary-dark: #0b524d; --secondary: #0b2a2c; --accent: #d97706; --bg: #dfeceb; --card: #fbfefe; --soft: #d0e3e2; --border: #bdd6d5; --bar-a: #051a1c; --bar-b: #0b2a2c; --bar-c: #0f6e67; --glow: #7fe0d6; }
:root[data-color="sunset"] { --primary: #b8460f; --primary-dark: #8f350b; --secondary: #3b1a0c; --accent: #c2410c; --bg: #f3e9e0; --card: #fffdfa; --soft: #ecdccd; --border: #e2ccba; --bar-a: #220f06; --bar-b: #3b1a0c; --bar-c: #a4410f; --glow: #ffbb8f; }
.topbar { background: linear-gradient(90deg, var(--bar-a) 0%, var(--bar-b) 50%, var(--bar-c) 100%); }
.drawer { background: linear-gradient(180deg, var(--bar-a) 0%, var(--bar-b) 55%, color-mix(in srgb, var(--bar-c) 60%, var(--bar-b)) 100%); }
.chat-head { background: linear-gradient(90deg, var(--bar-c) 0%, var(--bar-a) 100%); }
.fl-card, .hero-hl-panel { background: linear-gradient(135deg, var(--bar-a) 0%, var(--bar-b) 55%, var(--bar-c) 100%); }
.fl-mid i { background: var(--bar-b); }
.doc-view-bar, .fl-clock-switch button.active { background: var(--bar-b); }
.hero:has(.hero-bg)::after { background: linear-gradient(to bottom, var(--bar-b) 0, var(--bar-b) calc(100% - 220px), transparent 100%); }
.topbar .brand .jp, .chat-head strong i, .fl-end em, .fl-mid { color: var(--glow); }
.fl-leg { background: var(--glow); color: var(--bar-a); }
.drawer .search input:focus { border-color: var(--glow); }
.drawer .tab.active { background: color-mix(in srgb, var(--glow) 16%, transparent); }
.eyebrow { background: color-mix(in srgb, var(--primary) 94%, transparent); }
.badge.must { --c: var(--primary); }
.crumb, .tab.active { background: color-mix(in srgb, var(--primary) 10%, var(--card)); }
.week-head, .week-gutter-head { background: color-mix(in srgb, var(--soft) 55%, var(--card)); }
.chat-body { background: linear-gradient(180deg, var(--soft) 0%, color-mix(in srgb, var(--soft) 50%, var(--card)) 100%); }
.chat-input { background: var(--card); }
.search input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
body {
  background-image:
    radial-gradient(1100px 600px at 100% -10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, color-mix(in srgb, var(--secondary) 14%, transparent), transparent 60%),
    radial-gradient(700px 500px at 50% 50%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
}

/* the wallpaper */
html[data-wall="plain"] body { background-image: none; }
html[data-wall="sunset"] body { background-image: linear-gradient(160deg, #fde4cf 0%, #f8cfd3 45%, #ddd3f3 100%); }
html[data-wall="ocean"] body { background-image: linear-gradient(160deg, #d3ecf6 0%, #cfdff6 50%, #e0dcf6 100%); }
html[data-wall="mint"] body { background-image: linear-gradient(160deg, #dcf3e8 0%, #e6f1db 50%, #f3efd8 100%); }
/* the colourful backgrounds: each sets its colours once (on the page and on its own swatch in the settings);
   in dark mode a deep veil lies over them, so the page stays dark and only a glow of the colour shows */
[data-wall="g-lavender"], [data-w="g-lavender"] { --wall-grad: linear-gradient(160deg, #e9d5ff 0%, #c7d2fe 50%, #fbcfe8 100%); }
[data-wall="g-peach"], [data-w="g-peach"] { --wall-grad: linear-gradient(160deg, #ffe4c4 0%, #fecaca 55%, #fde68a 100%); }
[data-wall="g-sky"], [data-w="g-sky"] { --wall-grad: linear-gradient(180deg, #93c5fd 0%, #bfdbfe 45%, #eff6ff 100%); }
[data-wall="g-forest"], [data-w="g-forest"] { --wall-grad: linear-gradient(160deg, #bbf7d0 0%, #86efac 45%, #d9f99d 100%); }
[data-wall="g-rose"], [data-w="g-rose"] { --wall-grad: linear-gradient(160deg, #fecdd3 0%, #fda4af 50%, #fde2e4 100%); }
[data-wall="g-sand"], [data-w="g-sand"] { --wall-grad: linear-gradient(160deg, #f5e6c8 0%, #e9cfa3 50%, #f3e3d3 100%); }
[data-wall="g-aurora"], [data-w="g-aurora"] { --wall-grad: linear-gradient(150deg, #a7f3d0 0%, #93c5fd 50%, #c4b5fd 100%); }
[data-wall="g-citrus"], [data-w="g-citrus"] { --wall-grad: linear-gradient(160deg, #fef08a 0%, #fed7aa 50%, #fecaca 100%); }
[data-wall="g-lagoon"], [data-w="g-lagoon"] { --wall-grad: linear-gradient(160deg, #99f6e4 0%, #a5f3fc 50%, #c7d2fe 100%); }
[data-wall="g-sakura"], [data-w="g-sakura"] { --wall-grad: radial-gradient(circle at 80% 10%, #fbcfe8 0%, transparent 55%), radial-gradient(circle at 10% 90%, #fecdd3 0%, transparent 55%), linear-gradient(#fff1f2, #fff1f2); }
[data-wall="g-dusk"], [data-w="g-dusk"] { --wall-grad: linear-gradient(180deg, #c7d2fe 0%, #f9a8d4 55%, #fdba74 100%); }
[data-wall="g-tokyo"], [data-w="g-tokyo"] { --wall-grad: linear-gradient(135deg, #f0abfc 0%, #a5b4fc 50%, #67e8f9 100%); }
[data-wall="g-stone"], [data-w="g-stone"] { --wall-grad: linear-gradient(160deg, #e7e5e4 0%, #d6d3d1 50%, #e5e7eb 100%); }
[data-wall="g-berry"], [data-w="g-berry"] { --wall-grad: linear-gradient(160deg, #f5d0fe 0%, #f0abfc 45%, #c4b5fd 100%); }
[data-wall="g-gold"], [data-w="g-gold"] { --wall-grad: linear-gradient(160deg, #fef3c7 0%, #fcd34d 50%, #fde68a 100%); }
[data-wall="g-deepsea"], [data-w="g-deepsea"] { --wall-grad: linear-gradient(180deg, #7dd3fc 0%, #60a5fa 50%, #818cf8 100%); }
html[data-wall^="g-"] body { background-image: var(--wall-grad); background-attachment: fixed; }
/* the patterns: drawn in the site's own colour over the page colour (so they suit every colour and dark mode too) */
[data-wall="p-dots"], [data-w="p-dots"] { --wall-grad: radial-gradient(color-mix(in srgb, var(--primary) 24%, transparent) 1.6px, transparent 1.8px) 0 0 / 18px 18px, var(--bg); }
[data-wall="p-grid"], [data-w="p-grid"] { --wall-grad: linear-gradient(color-mix(in srgb, var(--primary) 11%, transparent) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, color-mix(in srgb, var(--primary) 11%, transparent) 1px, transparent 1px) 0 0 / 26px 26px, var(--bg); }
[data-wall="p-diagonal"], [data-w="p-diagonal"] { --wall-grad: repeating-linear-gradient(45deg, color-mix(in srgb, var(--primary) 8%, transparent) 0 12px, transparent 12px 24px), var(--bg); }
[data-wall="p-waves"], [data-w="p-waves"] { --wall-grad: repeating-radial-gradient(circle at 0 100%, transparent 0 14px, color-mix(in srgb, var(--primary) 10%, transparent) 14px 16px) 0 0 / 44px 44px, var(--bg); }
[data-wall="p-checks"], [data-w="p-checks"] { --wall-grad: conic-gradient(color-mix(in srgb, var(--primary) 8%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--primary) 8%, transparent) 0 75%, transparent 0) 0 0 / 36px 36px, var(--bg); }
[data-wall="p-confetti"], [data-w="p-confetti"] { --wall-grad: radial-gradient(circle, #f9a8d4 2px, transparent 2.5px) 0 0 / 46px 46px, radial-gradient(circle, #93c5fd 2px, transparent 2.5px) 15px 23px / 46px 46px, radial-gradient(circle, #fcd34d 2px, transparent 2.5px) 31px 8px / 46px 46px, radial-gradient(circle, #86efac 2px, transparent 2.5px) 8px 34px / 46px 46px, var(--bg); }
[data-wall="p-paper"], [data-w="p-paper"] { --wall-grad: repeating-linear-gradient(0deg, color-mix(in srgb, var(--primary) 7%, transparent) 0 1px, transparent 1px 28px), linear-gradient(90deg, transparent 52px, color-mix(in srgb, #ef4444 22%, transparent) 52px 54px, transparent 54px), var(--bg); }
[data-wall="p-bubbles"], [data-w="p-bubbles"] { --wall-grad: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--primary) 16%, transparent) 0 30px, transparent 31px) 0 0 / 140px 140px, radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--accent) 16%, transparent) 0 18px, transparent 19px) 0 0 / 140px 140px, var(--bg); }
html[data-wall^="p-"] body, html[data-theme="dark"][data-wall^="p-"] body { background: var(--wall-grad); background-attachment: fixed; } /* (the second: dark mode's own background must not cover the pattern) */
.set-wall-pic[data-w^="p-"] { background: var(--wall-grad); }
/* white pills keep dark writing in every mode (in dark mode the page's "head" colour is light: white on white) */
.hs-time, .hs-nav { color: #0f172a; }
.hs-dur { font-weight: 600; }
.hs-nav i { color: #1d4ed8; }
.home-head .hh-day.on { color: #0f172a; }
.home-head .hh-day.on small { color: #64748b; }
/* dark mode: the soft tinted chips and boxes added for the home screen, the bookings and the calculator */
html[data-theme="dark"] .hs-chip.ok { background: rgba(47, 138, 90, 0.2); color: #86efac; }
html[data-theme="dark"] .hs-chip { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
html[data-theme="dark"] .hs-go { box-shadow: none; }
html[data-theme="dark"] .hs-go.by-transit, html[data-theme="dark"] .hs-go.by-other, html[data-theme="dark"] .hs-go.by-foot { background: rgba(34, 160, 90, 0.16); border-color: rgba(159, 213, 181, 0.45); border-inline-start-color: #4ade80; color: #bbf0cf; }
html[data-theme="dark"] .hs-go.by-transit > i, html[data-theme="dark"] .hs-go.by-other > i, html[data-theme="dark"] .hs-go.by-foot > i { color: #4ade80; }
html[data-theme="dark"] .stay-pic { background: linear-gradient(135deg, #1e293b, #0f172a); }
html[data-theme="dark"] .branch-hours, html[data-theme="dark"] .ride-way, html[data-theme="dark"] .sheet-hint, html[data-theme="dark"] .hotel-found { background: rgba(148, 163, 184, 0.12); }
html[data-theme="dark"] .hs-card { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
/* the three kinds of background, one row of tabs above the choices */
.wall-tabs { margin-bottom: 12px; }
.set-wall-pic[data-w^="g-"] { background-image: var(--wall-grad); }
html[data-theme="dark"][data-wall^="g-"] body { background-image: linear-gradient(rgba(10, 13, 24, 0.84), rgba(10, 13, 24, 0.84)), var(--wall-grad); }
html[data-theme="dark"] .set-wall-pic[data-w^="g-"] { background-image: linear-gradient(rgba(10, 13, 24, 0.7), rgba(10, 13, 24, 0.7)), var(--wall-grad); }
/* a photo: fixed behind the whole page (also on the iPhone, which ignores a fixed page background), under a veil of the page colour so every card stays readable */
html[data-wall="trip"] body, html[data-wall="custom"] body { background-image: none; }
html[data-wall="trip"] body::before, html[data-wall="custom"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--bg) 78%, transparent), color-mix(in srgb, var(--bg) 78%, transparent)), var(--wall-img);
  background-size: cover; background-position: center;
}

/* the text size: on a phone the letters grow and the layout keeps its shape; on a computer the page is enlarged */
@media (pointer: coarse) {
  html[data-size="large"] { -webkit-text-size-adjust: 112%; text-size-adjust: 112%; }
  html[data-size="xl"] { -webkit-text-size-adjust: 125%; text-size-adjust: 125%; }
}
@media (pointer: fine) {
  html[data-size="large"] #view, html[data-size="large"] .drawer-body, html[data-size="large"] .chat-body { zoom: 1.1; }
  html[data-size="xl"] #view, html[data-size="xl"] .drawer-body, html[data-size="xl"] .chat-body { zoom: 1.22; }
}

/* fewer animations: everything moves at once */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }

/* ----- dark mode: the same colours on a night background; every light box becomes a dark one ----- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: color-mix(in srgb, var(--bar-b) 35%, #0b0e14);
  --card: color-mix(in srgb, var(--bar-c) 14%, #151a23);
  --soft: color-mix(in srgb, var(--bar-c) 20%, #1c222d);
  --border: color-mix(in srgb, var(--bar-c) 28%, #2a313d);
  --text: #e6eaf1;
  --muted: #9ca6b6;
  --head: #eef2f8;
  --primary: color-mix(in srgb, var(--bar-c) 55%, var(--glow));
  --primary-dark: var(--bar-c);
  --secondary: color-mix(in srgb, var(--bar-c) 70%, #2a3342);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] body { background-image: radial-gradient(1100px 600px at 100% -10%, color-mix(in srgb, var(--bar-c) 22%, transparent), transparent 60%), radial-gradient(900px 600px at -10% 110%, color-mix(in srgb, var(--bar-b) 40%, transparent), transparent 60%); }
html[data-theme="dark"][data-wall="plain"] body { background-image: none; }
html[data-theme="dark"][data-wall="sunset"] body { background-image: linear-gradient(160deg, #2c1a1f 0%, #251a2d 50%, #141a2c 100%); }
html[data-theme="dark"][data-wall="ocean"] body { background-image: linear-gradient(160deg, #0c1f2c 0%, #0f1931 50%, #18162d 100%); }
html[data-theme="dark"][data-wall="mint"] body { background-image: linear-gradient(160deg, #0f211a 0%, #142016 50%, #1e1d13 100%); }
html[data-theme="dark"][data-wall="trip"] body, html[data-theme="dark"][data-wall="custom"] body { background-image: none; }
html[data-theme="dark"] .app p, html[data-theme="dark"] .ess, html[data-theme="dark"] .tag, html[data-theme="dark"] .card .desc, html[data-theme="dark"] .extra ul,
html[data-theme="dark"] .extra p, html[data-theme="dark"] .day-summary, html[data-theme="dark"] .tip-list, html[data-theme="dark"] .loc { color: #b9c2cf; }
html[data-theme="dark"] .cat-chip, html[data-theme="dark"] .badge, html[data-theme="dark"] .app-for { color: color-mix(in srgb, var(--c) 55%, #fff); }
html[data-theme="dark"] .sr mark { background: rgba(253, 230, 138, 0.3); }
html[data-theme="dark"] .chat-msg.err, html[data-theme="dark"] .priv-err, html[data-theme="dark"] .open-now.is-shut { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
html[data-theme="dark"] .chat-msg code { background: var(--soft); }
html[data-theme="dark"] .chat-note { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
html[data-theme="dark"] .chat-wipe { border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }
html[data-theme="dark"] .chat-msg.bot.fail { border-color: rgba(239, 68, 68, 0.4); }
html[data-theme="dark"] .chat-master-err, html[data-theme="dark"] .hours-rows .shut dd { color: #fca5a5; }
html[data-theme="dark"] .app.on, html[data-theme="dark"] .check.on, html[data-theme="dark"] .chk.on { background: color-mix(in srgb, var(--ok) 16%, var(--card)); border-color: color-mix(in srgb, var(--ok) 55%, transparent); color: #6ee7b7; }
html[data-theme="dark"] .app.on .app-links { border-top-color: color-mix(in srgb, var(--ok) 40%, transparent); }
html[data-theme="dark"] .chk.on strong, html[data-theme="dark"] .card-head .ch-done { color: #6ee7b7; }
html[data-theme="dark"] .tl-time::before, html[data-theme="dark"] .tl-gap .gap-dot, html[data-theme="dark"] .add-row .tl-time::after { background: var(--border); }
html[data-theme="dark"] .road-node, html[data-theme="dark"] .tl-time .t-start { border-color: var(--border); }
html[data-theme="dark"] .gap-card:hover, html[data-theme="dark"] .route-sum, html[data-theme="dark"] .dm-list a:hover, html[data-theme="dark"] .add-btn:hover, html[data-theme="dark"] .chat-conv.active { background: var(--soft); }
html[data-theme="dark"] .gap-card:hover { border-color: var(--glow); }
html[data-theme="dark"] .gap-card.way-ride, html[data-theme="dark"] .gap-card.way-walk { background: rgba(34, 160, 90, 0.12); border-color: rgba(159, 213, 181, 0.4); border-inline-start-color: #4ade80; color: #bbf0cf; }
html[data-theme="dark"] .gap-card.way-ride .gap-go, html[data-theme="dark"] .gap-card.way-walk .gap-go { color: #4ade80; }
html[data-theme="dark"] .gap-card .gap-go, html[data-theme="dark"] .share-url a { color: var(--glow); }
html[data-theme="dark"] .tip { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); color: #fbbf6b; }
html[data-theme="dark"] .dm-step { color: #fdba74; }
html[data-theme="dark"] .dm-step.ride { color: #93c5fd; }
html[data-theme="dark"] details.eats { background: rgba(249, 115, 22, 0.1); border-color: rgba(249, 115, 22, 0.3); }
html[data-theme="dark"] details.eats summary { color: #fdba74; }
html[data-theme="dark"] details.eats summary small { background: rgba(249, 115, 22, 0.25); }
html[data-theme="dark"] details.eats li a:hover { background: rgba(249, 115, 22, 0.15); }
html[data-theme="dark"] .notes { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.25); }
html[data-theme="dark"] .notes-list li { border-color: rgba(245, 158, 11, 0.25); }
html[data-theme="dark"] .notes-head { color: #fbbf24; }
html[data-theme="dark"] .note-del:hover { background: rgba(239, 68, 68, 0.15); }
html[data-theme="dark"] .place-box.before { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); }
html[data-theme="dark"] .place-box.tip { background: rgba(47, 138, 90, 0.14); border-color: rgba(47, 138, 90, 0.35); }
html[data-theme="dark"] .place-box.before h3 i, html[data-theme="dark"] .place-box.before li i { color: #fbbf24; }
html[data-theme="dark"] .place-box.tip h3 i { color: #6ee7b7; }
html[data-theme="dark"] .add-btn, html[data-theme="dark"] .tl-item.add-stop form, html[data-theme="dark"] .chat-new, html[data-theme="dark"] .doc-file-btn, html[data-theme="dark"] .doc-drop { border-color: color-mix(in srgb, var(--border) 60%, #5b6575); }
html[data-theme="dark"] .tl-empty i, html[data-theme="dark"] .ph-empty, html[data-theme="dark"] .note-del { color: var(--muted); }
html[data-theme="dark"] .stop-tools button { color: #1f2937; }
html[data-theme="dark"] .day-bar { background: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .sheet-grip { background: var(--border); }
html[data-theme="dark"] .fl-card .btn:not(.ghost) { color: var(--bar-b); }
html[data-theme="dark"] .scrim, html[data-theme="dark"] .modal, html[data-theme="dark"] .sheet { background-color: rgba(0, 0, 0, 0.55); }

/* ----- "what now?" at the top of the home screen: a glass card on the photo ----- */
.now-card { align-self: stretch; max-width: 640px; margin-bottom: 18px; padding: 12px 12px 10px; border-radius: 18px; color: #fff; background: rgba(8, 14, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 8px; }
.now-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; font-size: 14px; font-weight: 800; }
.now-head i { color: var(--glow); margin-inline-end: 4px; }
.now-head small { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; white-space: nowrap; }
.now-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); }
.now-pic { flex: none; width: 54px; height: 54px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 20px; }
.now-pic img { width: 100%; height: 100%; object-fit: cover; }
.now-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: #fff; text-decoration: none; line-height: 1.3; }
.now-text em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--glow); }
.now-text b { font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-text small { font-size: 12.5px; color: rgba(255, 255, 255, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-go { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border-radius: 12px; background: var(--glow); color: var(--bar-a); font-size: 11.5px; font-weight: 800; text-decoration: none; }
.now-go i { font-size: 17px; }
.now-free { padding: 2px 4px; font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, 0.88); }
.now-free i { color: var(--glow); margin-inline-end: 6px; }
.now-count { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.now-count b { font-size: 26px; font-weight: 800; line-height: 1.1; }
.now-count span { font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.now-step { padding: 0 4px; font-size: 12px; color: rgba(255, 255, 255, 0.68); }
.now-step a { color: #fff; font-weight: 700; }

/* ----- the settings page ----- */
.settings { max-width: 720px; }
.set-card { margin-bottom: 12px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.set-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15.5px; font-weight: 800; color: var(--head); }
.set-card h3 i { width: 18px; text-align: center; color: var(--primary); }
.set-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); }
.set-seg button { min-width: 0; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--head); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.set-seg button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-seg button.on { background: var(--card); color: var(--primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14); }
.set-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px 8px; }
.set-color { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--head); font: inherit; cursor: pointer; }
.set-dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: transparent; font-size: 16px; transition: transform 0.15s, box-shadow 0.15s; }
.set-color.on .set-dot { color: #fff; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--primary); }
.set-color small { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.25; }
.set-color[data-c="navy"] .set-dot { background: linear-gradient(135deg, #0f1e38, #2f5590); }
.set-color[data-c="red"] .set-dot { background: linear-gradient(135deg, #3a1a1e, #c93a40); }
.set-color[data-c="green"] .set-dot { background: linear-gradient(135deg, #12301f, #2f8a5a); }
.set-color[data-c="purple"] .set-dot { background: linear-gradient(135deg, #23173f, #6b4bb8); }
.set-color[data-c="teal"] .set-dot { background: linear-gradient(135deg, #0b2a2c, #11857c); }
.set-color[data-c="sunset"] .set-dot { background: linear-gradient(135deg, #3b1a0c, #d0571a); }
.set-walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 8px; }
.set-wall { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--head); font: inherit; cursor: pointer; }
.set-wall-pic { aspect-ratio: 3 / 4; display: grid; place-items: center; border: 2px solid var(--border); border-radius: 12px; background-color: var(--soft); background-size: cover; background-position: center; color: var(--muted); font-size: 20px; }
.set-wall.on .set-wall-pic { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.set-wall small { font-size: 12px; font-weight: 700; text-align: center; }
.set-wall-pic[data-w="soft"] { background-color: var(--bg); background-image: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--primary) 28%, transparent), transparent 65%), radial-gradient(circle at 0 100%, color-mix(in srgb, var(--secondary) 24%, transparent), transparent 65%); }
.set-wall-pic[data-w="plain"] { background-color: var(--bg); }
.set-wall-pic[data-w="sunset"] { background-image: linear-gradient(160deg, #fde4cf 0%, #f8cfd3 45%, #ddd3f3 100%); }
.set-wall-pic[data-w="ocean"] { background-image: linear-gradient(160deg, #d3ecf6 0%, #cfdff6 50%, #e0dcf6 100%); }
.set-wall-pic[data-w="mint"] { background-image: linear-gradient(160deg, #dcf3e8 0%, #e6f1db 50%, #f3efd8 100%); }
html[data-theme="dark"] .set-wall-pic[data-w="sunset"] { background-image: linear-gradient(160deg, #2c1a1f 0%, #251a2d 50%, #141a2c 100%); }
html[data-theme="dark"] .set-wall-pic[data-w="ocean"] { background-image: linear-gradient(160deg, #0c1f2c 0%, #0f1931 50%, #18162d 100%); }
html[data-theme="dark"] .set-wall-pic[data-w="mint"] { background-image: linear-gradient(160deg, #0f211a 0%, #142016 50%, #1e1d13 100%); }
.set-wall-new { margin-top: 12px; }
.set-toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 2px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.set-card h3 + .set-toggle { border-top: 0; padding-top: 2px; }
.set-toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-toggle-text b { font-size: 15px; color: var(--head); }
.set-toggle-text small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.set-switch { position: relative; flex: none; width: 50px; height: 30px; border-radius: 999px; background: var(--border); transition: background 0.2s; }
.set-switch i { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: inset-inline-start 0.2s; }
.set-switch.on { background: var(--ok); }
.set-switch.on i { inset-inline-start: 23px; }
.set-reset { width: 100%; justify-content: center; min-height: 46px; }
/* the notifications card: a switch per kind, and under a switch that is on, its time to pick */
.push-note { font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.push-note.ok { color: var(--ok); font-weight: 700; display: flex; gap: 7px; align-items: center; }
.push-note.small { font-size: 12.5px; margin: 10px 0; }
.push-main { width: 100%; justify-content: center; min-height: 46px; }
.push-rows .push-row:first-child .set-toggle { border-top: 0; }
.push-pick { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; }
.push-pick > span { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); min-width: 22px; }
.push-pick .set-seg { flex: 1; }
.push-pick .set-seg button { min-height: 36px; font-size: 13px; }
.push-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.push-btns .btn { flex: 1; justify-content: center; }




/* the home screen: one even blue veil over the whole photo carries the words; the boxes of words and weather do not blur it at all,
   they are only a light frame (kept last, so it wins) */
.home-head .hh-text, .home-head .hh-wx { -webkit-backdrop-filter: none; backdrop-filter: none; background: none; border: 0; box-shadow: none; }
.home-head .hh-text { padding-inline: 0; padding-bottom: 0; } /* no frame: the words line up with the edge of the page */
/* "add a day" square (dashed) and the little pencil that edits the day (its name, date, or deletes it) */
.home-head .hh-add { border-style: dashed; background: rgba(10, 14, 30, 0.25); }
.home-head .hh-add b { font-size: 16px; }
.hh-edit { margin-inline-start: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 11px; cursor: pointer; vertical-align: middle; display: inline-grid; place-items: center; }
/* the same gap above the day squares (from the words) and below them (to the first card) */
.home-head .hh-days { margin-top: 14px; }
.home-head + .hs-list { margin-top: 6px; }
.home-head { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
/* every stop photo on the home screen darkens softly toward its bottom, so the name written on it reads clearly */
.hs-pic { isolation: isolate; background: color-mix(in srgb, var(--primary) 70%, #111); }.hs-pic > .hs-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hs-pic::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.88) 100%); }
/* the home screen's header, like the app in the owner's picture: the photo with a soft colour veil over it, and the whole of it
   (photo and veil together) slowly turns see-through toward its bottom, so it melts into the page itself (no grey band, no edge) */
.home-head { background: none; border-radius: 0; padding-bottom: 52px; margin-bottom: -40px; }
.home-head::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--secondary) 58%, transparent), color-mix(in srgb, var(--secondary) 58%, transparent)), color-mix(in srgb, var(--secondary) 85%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 52px), rgba(0, 0, 0, 0.5) calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 52px), rgba(0, 0, 0, 0.5) calc(100% - 26px), transparent 100%); }
/* the header's photo is a real picture under that veil (drawn at once on a page change, never a moment later) */
.home-head > .hh-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 52px), rgba(0, 0, 0, 0.5) calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 52px), rgba(0, 0, 0, 0.5) calc(100% - 26px), transparent 100%); }
.home-head:has(> .hh-bg)::before { background: color-mix(in srgb, var(--secondary) 58%, transparent); }
html[data-wall="trip"] .home-head > .hh-bg, html[data-wall="custom"] .home-head > .hh-bg { display: none; }
/* the day squares: a dark glass with a clear white frame and white numbers, readable on any photo; the picked one solid white */
/* (no frosted glass behind them: the browser's picture of a page change leaves it out, and the squares changed their colour
   when the change ended) */
.home-head .hh-day { background: rgba(10, 14, 30, 0.5); border: 1.5px solid rgba(255, 255, 255, 0.55); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
.home-head .hh-day b { font-weight: 800; }
.home-head .hh-day small { color: color-mix(in srgb, currentColor 95%, transparent); font-weight: 700; }
.home-head .hh-day.on { background: #fff; color: var(--secondary); border-color: #fff; text-shadow: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.home-head .hh-day.on small { color: var(--muted); }
@media (min-width: 641px) { .home-head { border-radius: 0; } }
.hs-list { position: relative; }
/* the home screen: a tap on the weather cube opens the day's hours under the header */
.home-head .hh-wx { cursor: pointer; border-radius: 16px; transition: background-color 0.2s; }
.home-head .hh-wx.on { background: rgba(255, 255, 255, 0.16); }
.home-wxh { position: relative; z-index: 1; max-width: 640px; margin: 16px auto 0; text-shadow: none; }
.home-wxh[hidden] { display: none; }
/* the documents: picking several to share together */
.doc-head-btns { display: flex; gap: 8px; }
.doc-pick-hint { margin: -4px 0 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.doc.picking { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; -webkit-tap-highlight-color: transparent; }
.doc.picking.no-file { opacity: 0.45; cursor: default; }
.doc.picked { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.doc-tick { position: absolute; top: 5px; inset-inline-start: 5px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.3); color: transparent; font-size: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.doc.picked .doc-tick { background: var(--primary); color: #fff; }
.doc-pick-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--bn-h) + var(--safe-b) + 12px); z-index: 61; display: flex; justify-content: center; pointer-events: none; }
.doc-pick-bar .btn { pointer-events: auto; padding: 12px 26px; border-radius: 999px; font-size: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28); }
.doc-pick-bar .btn:disabled { opacity: 0.55; }

/* ---------- "עוזר דיילות": the crew-agreement assistant page (its own chat) ---------- */
.crew-page { display: flex; flex-direction: column; }
.crew-tools { display: flex; gap: 8px; }
.crew-tools .btn { padding: 7px 12px; font-size: 14px; }
.crew-page .section-head { margin-bottom: 10px; }
/* the conversation fills the screen; one answer reads top to bottom as one column, never side by side */
.crew-body { display: flex; flex-direction: column; gap: 12px; height: calc(100dvh - 290px); min-height: 320px; overflow-y: auto; padding: 12px; border-radius: 18px; border: 1px solid var(--border); background: color-mix(in srgb, var(--soft) 60%, var(--card)); -webkit-overflow-scrolling: touch; }
.crew-body .chat-msg { font-size: 15.5px; }
.crew-body .chat-msg.user { max-width: 85%; }
.crew-body .chat-msg.bot.crew-answer { display: block; max-width: 100%; width: 100%; padding: 12px 14px; line-height: 1.6; cursor: auto; }
.crew-sec + .crew-sec { margin-top: 12px; }
.crew-h { font-weight: 800; font-size: 15px; color: var(--head); margin-bottom: 4px; }
.crew-p ul { margin: 2px 0; padding-inline-start: 20px; }
.crew-p li + li { margin-top: 4px; }
.crew-calc, .crew-sum { border-radius: 12px; padding: 10px 12px; }
.crew-calc { background: var(--soft); border: 1px solid var(--border); }
.crew-calc ul { list-style: none; padding: 0; }
.crew-calc li { padding: 3px 0; border-bottom: 1px dashed var(--border); }
.crew-calc li:last-child { border-bottom: none; }
.crew-calc .crew-p > strong:last-child, .crew-calc .crew-p br + strong { display: block; margin-top: 6px; font-size: 16px; color: var(--primary); }
.crew-sum { background: color-mix(in srgb, var(--primary) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.crew-table { overflow-x: auto; margin: 6px 0; }
.crew-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.crew-table th, .crew-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: right; vertical-align: top; }
.crew-table th { background: var(--soft); font-weight: 700; }
.crew-wait { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.crew-hello { margin: auto; text-align: center; color: var(--muted); font-size: 15px; }
.crew-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.crew-form textarea { flex: 1; resize: none; min-height: 46px; max-height: 160px; padding: 11px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; font-size: 16px; line-height: 1.4; }
.crew-attach { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 14px; }
.crew-clip { flex: none; width: 42px; height: 46px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--head); font-size: 17px; cursor: pointer; }
.crew-clip:hover { background: var(--soft); }
.crew-send { flex: none; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 17px; cursor: pointer; }

/* =====================================================================================================================
   FITTY — the fitness pages (everything above is Tripy's frame, kept as it is). Colours come from the theme variables,
   so dark mode and the colour picked in the settings follow by themselves.
   ===================================================================================================================== */
:root { --kc: #16a34a; --pc: #e11d48; --cc: #f59e0b; --fc: #8b5cf6; --wc: #0ea5e9; }
.fit-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #22c55e, #84cc16); color: #fff; font-size: 15px; }
body.signed-out .page { padding-bottom: 0 !important; }
.bottom-nav[hidden] { display: none; }
.bn-empty { opacity: 0.28; cursor: default; }
.drawer-foot { border-top: 1px solid var(--border); padding: 10px 12px calc(12px + var(--safe-b)); display: flex; flex-direction: column; gap: 4px; }
.drawer-foot:empty { display: none; }
.drawer-body { padding-bottom: 12px; }
.drawer-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 30px 10px; line-height: 1.7; }
.flash { animation: fit-flash 1.6s ease; }
@keyframes fit-flash { 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 45%, transparent); } }
.fit-log .card, .personal .card, .fit-onboard .ob-card, .login-card { padding: 14px 16px; margin-bottom: 12px; border-color: var(--border); }
.card h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.card h3 i { color: var(--primary); }
.fit-log, .personal, .fit-onboard, .fit-login { max-width: 640px; margin: 8px auto 0; }
.fit-log { margin-top: 0; }

/* ---------- sign in ---------- */
.login-hero { text-align: center; padding: 26px 10px 18px; }
.login-logo { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; background: linear-gradient(135deg, #22c55e, #65a30d); color: #fff; font-size: 38px; box-shadow: 0 12px 30px rgba(34, 197, 94, 0.35); }
.login-hero h1 { font-size: 34px; color: var(--head); margin-top: 12px; }
.login-hero p { color: var(--muted); font-size: 16px; }
.login-card { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; }
form.login-card { align-items: stretch; text-align: right; }
.gbtn { min-height: 44px; display: grid; place-items: center; color: var(--muted); }
.setup-steps { padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.setup-steps code { background: var(--soft); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; word-break: break-all; }
.push-note.err { color: #dc2626; }

/* ---------- the first questions ---------- */
.ob-progress { height: 6px; border-radius: 6px; background: var(--soft); overflow: hidden; margin-bottom: 14px; }
.ob-progress i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #84cc16); border-radius: 6px; transition: width 0.4s var(--ease); }
.ob-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.ob-card h2 { font-size: 24px; color: var(--head); }
.ob-card > p { color: var(--muted); }
.ob-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ob-choice { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font: inherit; text-align: center; transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.ob-choice i { font-size: 22px; color: var(--primary); }
.ob-choice b { font-size: 15.5px; }
.ob-choice small { color: var(--muted); font-size: 12.5px; }
.ob-choice.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--card)); }
.ob-choice:active { transform: scale(0.98); }
.ob-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.ob-nav .btn { padding: 11px 20px; font-size: 16px; }
.ob-err { color: #dc2626; font-weight: 700; }
.field-label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 700; color: var(--head); }
.field select { flex: 1; min-width: 0; border: none; background: transparent; padding: 11px 0; font-size: 16px; outline: none; color: inherit; font-family: inherit; }
.field-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }

/* ---------- the targets ---------- */
.tg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.tg, .tg-big { background: var(--soft); border-radius: 12px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; }
.tg b { font-size: 20px; color: var(--head); }
.tg span { font-size: 12.5px; color: var(--muted); }
.tg-big { grid-column: 1 / -1; background: linear-gradient(135deg, color-mix(in srgb, #22c55e 18%, var(--card)), color-mix(in srgb, #84cc16 12%, var(--card))); }
.tg-big b { font-size: 36px; color: var(--head); line-height: 1.1; }
.tg-big span { font-weight: 700; }
.tg-big small { color: var(--muted); }
.tg-note { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* ---------- the day ---------- */
.log-date { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px; }
.log-date-mid { flex: 1; display: flex; flex-direction: column; align-items: center; background: none; border: none; cursor: pointer; color: var(--head); font: inherit; }
.log-date-mid b { font-size: 20px; }
.log-date-mid small { color: var(--muted); font-size: 13px; }
.log-date .icon-btn:disabled { opacity: 0.3; }
.sum-card { display: flex; align-items: center; gap: 16px; }
.sum-ring { position: relative; width: 132px; height: 132px; flex: none; }
.kring { width: 100%; height: 100%; }
.kr-bg { fill: none; stroke: var(--soft); stroke-width: 11; }
.kr-fg { fill: none; stroke: var(--kc); stroke-width: 11; stroke-linecap: round; transition: stroke-dasharray 0.6s var(--ease); }
.kring.over .kr-fg { stroke: #ef4444; }
.sum-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sum-mid b { font-size: 26px; color: var(--head); line-height: 1; }
.sum-mid span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.sum-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sum-nums { display: flex; gap: 18px; }
.sum-nums div { display: flex; flex-direction: column; }
.sum-nums b { font-size: 17px; color: var(--head); }
.sum-nums small { color: var(--muted); font-size: 12px; }
.mbar-top { display: flex; justify-content: space-between; font-size: 12.5px; }
.mbar-top b { color: var(--head); font-weight: 700; }
.mbar-track { height: 7px; border-radius: 7px; background: var(--soft); overflow: hidden; }
.mbar-track i { display: block; height: 100%; border-radius: 7px; transition: width 0.5s var(--ease); }
.mbar.p .mbar-track i { background: var(--pc); }
.mbar.c .mbar-track i { background: var(--cc); }
.mbar.f .mbar-track i { background: var(--fc); }
.mbar-track i.over { background: #ef4444 !important; }
.quick-add { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.qa { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); color: var(--head); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform 0.1s; }
.qa i { font-size: 22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); }
.qa:nth-child(2) i { background: linear-gradient(135deg, #6366f1, #4338ca); }
.qa:nth-child(3) i { background: linear-gradient(135deg, #f59e0b, #d97706); }
.qa:active { transform: scale(0.97); }
.meal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meal-head b { color: var(--muted); font-size: 14px; }
.food-rows { list-style: none; margin: 8px 0 2px; }
.food-row { width: 100%; display: grid; grid-template-columns: 1fr auto 52px; gap: 10px; align-items: center; padding: 9px 2px; background: none; border: none; border-bottom: 1px solid var(--border); font: inherit; color: var(--text); text-align: right; cursor: pointer; }
.food-rows li:last-child .food-row { border-bottom: none; }
.fr-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-src { color: var(--muted); font-size: 11px; }
.fr-g { color: var(--muted); font-size: 13.5px; }
.fr-k { text-align: left; font-weight: 800; color: var(--head); }
.meal-add { margin-top: 6px; background: none; border: none; color: var(--primary); font: inherit; font-weight: 800; cursor: pointer; padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; }
.cups { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.cup { width: 30px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--soft); color: color-mix(in srgb, var(--wc) 30%, var(--muted)); font-size: 15px; transition: background 0.2s, color 0.2s; }
.cup.on { background: color-mix(in srgb, var(--wc) 18%, var(--card)); color: var(--wc); }
.water-card h3 i { color: var(--wc); }
.water-btns, .weight-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.weight-row .field { min-width: 160px; }
.weight-row { margin-top: 8px; }
.steps-card h3 i { color: #10b981; }
.steps-card .mbar { margin-top: 10px; }
.mbar.s .mbar-track i { background: linear-gradient(90deg, #34d399, #10b981); }
.steps-link { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.steps-link summary { list-style: none; cursor: pointer; font-weight: 800; color: var(--head); display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.steps-link summary::-webkit-details-marker { display: none; }
.steps-link summary .chev { margin-inline-start: auto; color: var(--muted); transition: transform 0.2s; }
.steps-link[open] summary .chev { transform: rotate(180deg); }
.steps-link > .field, .steps-link > .push-btns, .steps-link > .btn { margin-top: 8px; }
.steps-link input[readonly] { font-size: 12.5px; }
.steps-on { font-size: 11.5px; font-weight: 800; color: #059669; background: color-mix(in srgb, #10b981 15%, var(--card)); border-radius: 999px; padding: 1px 8px; }
.steps-part { margin: 14px 0 6px; font-size: 14.5px; color: var(--head); }
.key-setup { text-align: right; width: 100%; }
.key-setup .steps-how { margin: 10px 0; }
.key-setup .steps-how .btn { margin-top: 6px; display: inline-flex; }
.steps-off { font-size: 11.5px; font-weight: 800; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 1px 8px; }
.steps-quick { margin-top: 8px; }
.steps-how { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.steps-how li { display: flex; gap: 10px; align-items: flex-start; background: var(--soft); border-radius: 12px; padding: 9px 10px; }
.steps-how small { display: block; color: var(--muted); font-size: 12.5px; }
.sh-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #10b981; color: #fff; font-weight: 800; font-size: 13px; }
.week-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.wb { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; font: inherit; color: var(--muted); cursor: pointer; padding: 0; }
.wb-col { position: relative; width: 100%; max-width: 34px; height: 110px; border-radius: 8px; background: var(--soft); display: flex; align-items: flex-end; overflow: hidden; }
.wb-col i { display: block; width: 100%; background: var(--kc); border-radius: 8px 8px 0 0; transition: height 0.5s var(--ease); }
.wb-col i.over { background: #ef4444; }
.wb-col em { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed color-mix(in srgb, var(--head) 45%, transparent); }
.wb-k { font-size: 10.5px; height: 14px; }
.wb-d { font-size: 12.5px; font-weight: 800; }
.wb.on .wb-d { color: var(--primary); }
.nut-card summary { cursor: pointer; font-weight: 800; color: var(--head); display: flex; align-items: center; gap: 8px; list-style: none; }
.nut-card summary .chev { margin-inline-start: auto; transition: transform 0.2s; }
.nut-card[open] summary .chev { transform: rotate(180deg); }
.nut-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14.5px; }
.nut-table th { text-align: right; font-weight: 600; color: var(--muted); padding: 6px 0; border-bottom: 1px solid var(--border); }
.nut-table td { text-align: left; font-weight: 800; color: var(--head); padding: 6px 0; border-bottom: 1px solid var(--border); }
.nut-table td small { color: var(--muted); font-weight: 600; }
.nut-table tr:nth-child(-n+4) th, .nut-table tr:nth-child(-n+4) td { font-size: 15.5px; }

/* ---------- the add-food sheet ---------- */
.fit-sheet .sheet-card { width: min(560px, 100%); max-height: calc(100dvh - 24px); overflow: hidden; }
#foodBody { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
@media (max-width: 999px) {
  .fit-sheet { align-items: flex-end; padding: 0; }
  .fit-sheet .sheet-card { width: 100%; height: calc(100dvh - var(--safe-t) - 18px); max-height: none; border-radius: 20px 20px 0 0; padding-bottom: calc(12px + var(--safe-b)); }
}
.food-tabs button { flex: 1; justify-content: center; }
.meal-pick { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.meal-pick select { border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; background: var(--bg); color: var(--text); font: inherit; font-weight: 700; }
.food-search { display: flex; gap: 8px; }
.food-list { list-style: none; display: flex; flex-direction: column; }
.food-pick { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 4px; background: none; border: none; border-bottom: 1px solid var(--border); text-align: right; font: inherit; color: var(--text); cursor: pointer; }
.food-pick img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
.fp-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-name b { font-size: 15px; }
.fp-name small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-k { display: flex; flex-direction: column; align-items: center; font-weight: 800; color: var(--head); min-width: 58px; }
.fp-k small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
#foodBody h4 { font-size: 14px; color: var(--muted); margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.online-box { display: flex; flex-direction: column; gap: 6px; }
.custom-btn { align-self: flex-start; }
.food-detail { display: flex; flex-direction: column; gap: 10px; }
.food-detail > .btn-ghost:first-child { align-self: flex-start; }
.food-detail h3 { font-size: 21px; color: var(--head); }
.fd-en { color: var(--muted); font-size: 13px; margin-top: -8px; }
.fd-amount { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.fd-big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fd-big div { background: var(--soft); border-radius: 12px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; }
.fd-big b { font-size: 20px; color: var(--head); }
.fd-big small { font-size: 12px; color: var(--muted); }
.fd-big div:nth-child(1) b { color: var(--kc); }
.fd-big div:nth-child(2) b { color: var(--pc); }
.fd-big div:nth-child(3) b { color: var(--cc); }
.fd-big div:nth-child(4) b { color: var(--fc); }
.fd-all summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.scan-box { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scan-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-line { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 12px #ef4444; animation: scan 1.8s ease-in-out infinite; }
@keyframes scan { 50% { transform: translateY(-50px); } }
.scan-msg { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13.5px; text-shadow: 0 1px 3px #000; }
.photo-start { text-align: center; padding: 30px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); }
.photo-start > i { font-size: 46px; color: var(--primary); }
.photo-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 10px 0; }
.photo-wait img, .photo-thumb { width: 100%; max-height: 240px; object-fit: cover; border-radius: 14px; }
.photo-result { display: flex; flex-direction: column; gap: 10px; }
.photo-result h3 { font-size: 18px; color: var(--head); }
.ai-list { list-style: none; display: flex; flex-direction: column; }
.ai-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ai-name b { font-size: 15px; }
.ai-unsure { color: #b45309; background: #fef3c7; border-radius: 6px; padding: 0 5px; font-size: 11px; font-weight: 700; }
.ai-g { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.ai-k { font-weight: 800; color: var(--head); white-space: nowrap; }
.ai-row .icon-btn { width: 32px; height: 32px; font-size: 13px; }
.ai-plus { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 12px; border: 1.5px dashed var(--border); background: none; color: var(--primary); font: inherit; font-weight: 800; cursor: pointer; }
.ai-total { display: flex; flex-direction: column; background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.ai-total b { font-size: 18px; color: var(--head); }
.ai-total span { color: var(--muted); font-size: 13px; }
.custom-food { display: flex; flex-direction: column; gap: 10px; }
.custom-food > .btn-ghost:first-child { align-self: flex-start; }
.per-serving[hidden] { display: none; }

/* ---------- the personal page, the settings' account ---------- */
.p-lock { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
.p-lock-icon { font-size: 34px; color: var(--primary); margin: 6px 0; }
.p-form { display: flex; flex-direction: column; gap: 10px; }
.p-form h3 { margin-top: 6px; }
.linkish { background: none; border: none; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; }
.acc-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.acc-pic { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--soft); color: var(--muted); flex: none; }
.acc-row div { display: flex; flex-direction: column; min-width: 0; }
.acc-row small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.admin-card form { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.admin-card form .field-label { flex: 1; }
.admin-card h3 small { color: var(--muted); font-weight: 600; font-size: 12px; }
@media (max-width: 520px) {
  .sum-ring { width: 116px; height: 116px; }
  .sum-card { gap: 12px; }
  .tg-grid { grid-template-columns: repeat(2, 1fr); }
}

/* the locked first screen: the whole screen, nothing but the logo and the Google button */
body.signed-out .topbar, body.signed-out .drawer, body.signed-out .chat, body.signed-out .scrim { display: none !important; }
.fit-login { position: fixed; inset: 0; z-index: 90; max-width: none; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b)); background: radial-gradient(circle at 50% 30%, #1b3a6b 0%, #0f1e38 55%, #0a152b 100%); color: #fff; overflow: hidden; }
.fit-login .login-hero { padding: 0; }
.fit-login .login-hero h1 { color: #fff; font-size: 40px; }
.fit-login .login-hero p { color: rgba(255, 255, 255, 0.72); }
.login-box { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(340px, 100%); }

.g-btn { width: 300px; max-width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font: 600 16px 'Assistant', system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); transition: transform 0.1s, box-shadow 0.15s; }
.g-btn svg { width: 20px; height: 20px; }
.g-btn:active { transform: scale(0.98); }
.login-small { color: rgba(255, 255, 255, 0.55); font-size: 13.5px; }
.login-err { color: #fca5a5; font-weight: 700; }

/* the sign-in screen, still: a wall of fitness drawings behind, the logo, Google's button laid over ours (same place, same size) */
.fit-login::before { content: ''; position: absolute; inset: -20px; background: url('/login-wall.svg') 0 0 / 420px 420px repeat; opacity: 0.07; pointer-events: none; }
.fit-login::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, transparent 0 22%, rgba(10, 21, 43, 0.75) 70%); pointer-events: none; }
.fit-login > * { position: relative; z-index: 1; }
.gbtn { position: relative; width: 300px; max-width: 100%; height: 44px; margin: 0 auto; }
.gbtn .g-btn { position: absolute; inset: 0; width: 100%; }
.logo-mark { width: 132px; height: 132px; overflow: visible; filter: drop-shadow(0 0 18px rgba(74, 222, 128, 0.35)); }
.lm-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 9; }
.lm-ring { fill: none; stroke: url(#lmG); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 78 100; animation: lm-ring 1.4s cubic-bezier(0.3, 0.7, 0.2, 1) 0.35s both; }
.lm-pulse { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; animation: lm-pulse 0.9s ease-out 0.9s both; }
.lm-dot { fill: #d9f99d; animation: lm-dot 0.4s ease-out 1.7s both; }
@keyframes lm-ring { from { stroke-dasharray: 0 100; } }
@keyframes lm-pulse { from { stroke-dashoffset: 100; } }
@keyframes lm-dot { from { opacity: 0; transform: scale(0.2); transform-origin: 94px 62px; } }
.wordmark { font-size: 46px !important; font-weight: 800; letter-spacing: 1px; margin-top: 14px !important; background: linear-gradient(180deg, #fff 30%, #bbf7d0); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
@media (prefers-reduced-motion: reduce) { .lm-ring, .lm-pulse, .lm-dot { animation: none; } }
html[data-motion="reduce"] .lm-ring, html[data-motion="reduce"] .lm-pulse, html[data-motion="reduce"] .lm-dot { animation: none; }
.fit-mark { background: none; width: 30px; height: 30px; }
.fit-mark svg { width: 30px; height: 30px; }

#gate[hidden] { display: none; }
#gate .fit-login { z-index: 9000; animation: none !important; transform: none !important; }
body.signed-out .page { visibility: hidden; }

/* sign in / sign up: two tabs, two (or three) fields, one button — white on the navy */
.auth-form { gap: 12px; }
.auth-tabs { display: flex; width: 100%; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); }
.auth-tabs button { flex: 1; height: 40px; border: none; border-radius: 10px; background: none; color: rgba(255, 255, 255, 0.7); font: 700 15.5px 'Assistant', system-ui, sans-serif; cursor: pointer; transition: background 0.2s, color 0.2s; }
.auth-tabs button.on { background: #fff; color: #0f1e38; }
.auth-field { width: 100%; height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); transition: border-color 0.15s, background 0.15s; }
.auth-field:focus-within { border-color: #4ade80; background: rgba(255, 255, 255, 0.11); }
.auth-field[hidden] { display: none; }
.auth-field i { color: rgba(255, 255, 255, 0.5); width: 16px; text-align: center; }
.auth-field input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none; color: #fff; font: 500 16px 'Assistant', system-ui, sans-serif; }
.auth-field input::placeholder { color: rgba(255, 255, 255, 0.45); }
.auth-field input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.auth-go { width: 100%; height: 50px; border: none; border-radius: 14px; background: linear-gradient(135deg, #22c55e, #84cc16); color: #0a152b; font: 800 17px 'Assistant', system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 22px rgba(34, 197, 94, 0.3); transition: transform 0.1s, opacity 0.15s; }
.auth-go:active { transform: scale(0.98); }
.auth-go:disabled { opacity: 0.6; }
.auth-form .login-err { margin: -2px 0; font-size: 14px; text-align: center; }

/* ===== the whole app reads right to left: every field and list, whatever is typed in it ===== */
input, textarea, select { direction: rtl; text-align: right; }
input[type="number"], input[type="date"], input[type="time"] { text-align: right; }
.fd-amount input { text-align: right; }

/* ===== the opening screen (sign in / sign up) ===== */
.fit-login { justify-content: safe center; gap: 26px; overflow-y: auto; }
.fit-login .logo-mark { width: 104px; height: 104px; }
.fit-login .wordmark { font-size: 40px !important; margin-top: 8px !important; }
.fit-login .login-hero p { font-size: 15.5px; }
.auth-card { width: min(370px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 24px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); direction: rtl; text-align: right; }
.auth-tabs { position: relative; display: flex; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); }
.auth-pill { position: absolute; top: 4px; bottom: 4px; right: 4px; width: calc(50% - 4px); border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.2, 1); }
.auth-form[data-mode="signup"] .auth-pill { transform: translateX(-100%); }
.auth-tabs button { position: relative; z-index: 1; flex: 1; height: 40px; border: none; background: none; color: rgba(255, 255, 255, 0.72); font: 800 15.5px 'Assistant', system-ui, sans-serif; cursor: pointer; transition: color 0.3s; }
.auth-tabs button.on { background: none; color: #0f1e38; }
.auth-head { padding: 4px 2px 2px; }
.auth-title { font-size: 21px; font-weight: 800; color: #fff; line-height: 1.2; }
.auth-sub { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
.auth-field { position: relative; }
.auth-field input { text-align: right; direction: rtl; }
.auth-eye { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: none; border-radius: 10px; background: none; color: rgba(255, 255, 255, 0.55); cursor: pointer; margin-inline-end: -8px; }
.auth-eye:hover { color: #fff; }
.auth-again-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: -12px; transition: grid-template-rows 0.35s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.25s, margin 0.35s; }
.auth-again-wrap > * { min-height: 0; overflow: hidden; }
.auth-again-wrap.open { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }
.auth-again-wrap { display: grid; }
.auth-again-wrap > .auth-field { overflow: hidden; }
.auth-again-wrap.open > .auth-field { overflow: visible; }
.auth-hint { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); padding: 6px 4px 0; }
.auth-go { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2px; }
.auth-go i { font-size: 15px; transition: transform 0.2s; }
.auth-go:hover i { transform: translateX(-3px); }
.auth-swap { text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.auth-swap button { border: none; background: none; color: #86efac; font: 800 14px 'Assistant', system-ui, sans-serif; cursor: pointer; padding: 2px 4px; }
.auth-form .login-err { background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.35); color: #fecaca; border-radius: 12px; padding: 8px 10px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .auth-pill, .auth-again-wrap { transition: none; } }
html[data-motion="reduce"] .auth-pill, html[data-motion="reduce"] .auth-again-wrap { transition: none; }

/* ===== windows open and close smoothly: the add-food window slides up (phone) / rises (computer), and back ===== */
.fit-sheet { animation: fit-shade-in 0.28s ease both; }
.fit-sheet .sheet-card { animation: fit-rise 0.36s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
.fit-sheet.closing { animation: fit-shade-out 0.28s ease both; pointer-events: none; }
.fit-sheet.closing .sheet-card { animation: fit-sink 0.28s cubic-bezier(0.4, 0, 0.8, 0.4) both; }
@keyframes fit-shade-in { from { background: rgba(15, 23, 42, 0); } }
@keyframes fit-shade-out { to { background: rgba(15, 23, 42, 0); } }
@keyframes fit-rise { from { transform: translateY(26px) scale(0.98); opacity: 0; } }
@keyframes fit-sink { to { transform: translateY(26px) scale(0.98); opacity: 0; } }
@media (max-width: 999px) {
  @keyframes fit-rise { from { transform: translateY(100%); } }
  @keyframes fit-sink { to { transform: translateY(100%); } }
}
details.folding { overflow: hidden; }
html[data-motion="reduce"] .fit-sheet, html[data-motion="reduce"] .fit-sheet .sheet-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .fit-sheet, .fit-sheet .sheet-card { animation: none; } }

/* the password's checklist (sign up): each rule turns green as it is met */
.pw-rules { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 8px 4px 0; }
.pw-rules li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); transition: color 0.25s; }
.pw-rules li i { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; font-size: 9px; color: transparent; border: 1.5px solid rgba(255, 255, 255, 0.3); transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s; }
.pw-rules li.ok { color: #bbf7d0; }
.pw-rules li.ok i { background: #22c55e; border-color: #22c55e; color: #0a152b; transform: scale(1.08); }

/* the first questions: the page shows, without the menu, the chat or the bottom bar (they come once the questions are done) */
body.setting-up .page { padding-bottom: 0 !important; }
body.setting-up .drawer, body.setting-up .chat, body.setting-up .scrim, body.setting-up #menuBtn, body.setting-up #chatBtn { display: none !important; }

/* the first questions: the steps at the bottom (1 · 2 · 3 …) */
.ob-steps { display: flex; align-items: center; justify-content: center; margin: 18px auto 4px; max-width: 520px; }
.ob-step { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); background: var(--card); color: var(--muted); font: 800 13.5px 'Assistant', system-ui, sans-serif; transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s; }
.ob-step:disabled { cursor: default; }
.ob-step.done { background: color-mix(in srgb, #22c55e 14%, var(--card)); border-color: #22c55e; color: #16a34a; cursor: pointer; }
.ob-step.now { background: linear-gradient(135deg, #22c55e, #65a30d); border-color: transparent; color: #fff; transform: scale(1.15); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35); }
.ob-step i { font-size: 11px; }
.ob-line { flex: 1; height: 2px; min-width: 6px; max-width: 34px; background: var(--border); }
.ob-swipe { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* several goals: each card has a tick in its corner; the plan's combination in words under the targets */
.ob-choices.multi .ob-choice { position: relative; }
.ob-tick { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); background: var(--card); transition: background 0.25s, border-color 0.25s, transform 0.25s; }
.ob-tick i { font-size: 10px !important; color: #fff !important; opacity: 0; transition: opacity 0.2s; }
.ob-choice.on .ob-tick { background: #22c55e; border-color: #22c55e; transform: scale(1.08); }
.ob-choice.on .ob-tick i { opacity: 1; }
.ob-combo { text-align: center; font-weight: 700; color: var(--primary) !important; min-height: 1.5em; }
.tg-plan { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tg-plan li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--text); }
.tg-plan li i { color: #22c55e; margin-top: 4px; }
.goal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.goal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: 700 14px 'Assistant', system-ui, sans-serif; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.goal-chip i { color: var(--muted); }
.goal-chip.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--head); }
.goal-chip.on i { color: var(--primary); }