/* JZ Travel — the look of an airport: wayfinding-sign yellow on tarmac ink, a terminal-floor grey, trips as
   boarding passes, and the trip's sections on a dark overhead sign band. One typeface (Readex Pro). */

@font-face { font-family: "Readex Pro"; font-style: normal; font-display: swap; font-weight: 160 700;
  src: url(fonts/readex-arabic.woff2) format("woff2-variations"), url(fonts/readex-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-display: swap; font-weight: 160 700;
  src: url(fonts/readex-latin-ext.woff2) format("woff2-variations"), url(fonts/readex-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-display: swap; font-weight: 160 700;
  src: url(fonts/readex-latin.woff2) format("woff2-variations"), url(fonts/readex-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --floor: #EEF2F5; --paper: #FFFFFF; --paper-2: #F5F7F9; --sunk: #E6EBEF;
  --line: #DCE3E9; --line-2: #C6D0D9;
  --ink: #1D2B36; --ink-2: #3D4F5E; --muted: #627382; --faint: #8796A3;
  --sign: #FFC72C; --sign-ink: #1D2B36; --sign-soft: #FFF3CC; --sign-deep: #8A6200;
  --band: #1D2B36; --band-2: #2A3A47; --band-ink: #EAF0F4; --band-muted: #9FB0BD;
  --gate: #1F5FBF; --gate-soft: #E5EEFB;
  --go: #12805A; --go-soft: #DFF2E9;
  --stop: #C2392C; --stop-soft: #FBE6E3;
  --warn: #935600; --warn-soft: #FFF0D6;
  --leg-flight: #2F6FD3; --leg-car: #1D2B36; --leg-train: #6A4FB6; --leg-bus: #C8650F; --leg-ferry: #0B8796;
  --map-sea: #F2F6F9; --map-land: #DDE4EA; --map-lit: #FFE7A3; --map-edge: #FFFFFF;
  --scrim: rgba(17, 26, 33, .46);
  --r: 14px; --r-lg: 20px;
  --font: "Readex Pro", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --nav-h: 64px; --rail-w: 240px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
html[data-mode="dark"] {
  color-scheme: dark;
  --floor: #121A21; --paper: #1A242D; --paper-2: #1F2B35; --sunk: #16202A;
  --line: #2B3A46; --line-2: #3A4B58;
  --ink: #E8EEF2; --ink-2: #C2CED7; --muted: #94A4B1; --faint: #6F808E;
  --sign: #FFC72C; --sign-ink: #1D2B36; --sign-soft: #3B321A; --sign-deep: #FFD666;
  --band: #0C1318; --band-2: #1A252E; --band-ink: #EAF0F4; --band-muted: #8C9DAA;
  --gate: #7CAEFF; --gate-soft: #1C2D45;
  --go: #48C690; --go-soft: #15382B;
  --stop: #FF7D6E; --stop-soft: #3D211E;
  --warn: #FFB547; --warn-soft: #3A2C14;
  --leg-flight: #7CAEFF; --leg-car: #E8EEF2; --leg-train: #B49CFF; --leg-bus: #FFA25C; --leg-ferry: #46D3E0;
  --map-sea: #15202A; --map-land: #2A3945; --map-lit: #5B4C1E; --map-edge: #15202A;
  --scrim: rgba(0, 0, 0, .6);
}

/* ---------- colour themes: the sign colour and the band; each works in the light and the dark look ---------- */
html[data-palette="sky"] { --sign: #5AB8F0; --sign-ink: #0E2A3D; --sign-soft: #E1F2FC; --sign-deep: #145E8C; --band: #0F2D4A; --band-2: #1A3D5E; --band-muted: #9DB9D1; --map-lit: #CBE8FA; }
html[data-palette="rose"] { --sign: #F7A8C4; --sign-ink: #4A1730; --sign-soft: #FDE7EF; --sign-deep: #A3325F; --band: #4A1D33; --band-2: #5E2A43; --band-muted: #D6AFC1; --map-lit: #F9D3E1; }
html[data-palette="oasis"] { --sign: #4FD1A5; --sign-ink: #0D3326; --sign-soft: #DDF7EE; --sign-deep: #11785A; --band: #0F3A2E; --band-2: #1A4C3D; --band-muted: #9CC9B8; --map-lit: #BFEEDD; }
html[data-palette="sand"] { --sign: #F4A259; --sign-ink: #3B2208; --sign-soft: #FDEBD8; --sign-deep: #9A5412; --band: #3B2A1E; --band-2: #4D3828; --band-muted: #CDB49C; --map-lit: #F8D7B5; }
html[data-palette="violet"] { --sign: #B79CF2; --sign-ink: #24134D; --sign-soft: #EFE8FD; --sign-deep: #5B3DB5; --band: #2A1F4D; --band-2: #3A2D63; --band-muted: #B8ABDB; --map-lit: #DED1FA; }
html[data-mode="dark"][data-palette="sky"] { --sign: #6CC4F5; --sign-soft: #13324A; --sign-deep: #9AD6FA; --band: #08182A; --band-2: #12263B; --map-lit: #1D4560; }
html[data-mode="dark"][data-palette="rose"] { --sign: #F59BBC; --sign-soft: #3D1E2B; --sign-deep: #FFB8D1; --band: #22101A; --band-2: #331A27; --map-lit: #5A2A3D; }
html[data-mode="dark"][data-palette="oasis"] { --sign: #52D6A9; --sign-soft: #123327; --sign-deep: #7FE6C2; --band: #071F18; --band-2: #113027; --map-lit: #1E4A3A; }
html[data-mode="dark"][data-palette="sand"] { --sign: #F6A866; --sign-soft: #3A2714; --sign-deep: #FFC48F; --band: #1A120C; --band-2: #2A1E14; --map-lit: #5A3C1F; }
html[data-mode="dark"][data-palette="violet"] { --sign: #B9A0F5; --sign-soft: #2A2145; --sign-deep: #D3C2FF; --band: #130D26; --band-2: #211938; --map-lit: #3D3366; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--floor); }
body { margin: 0; min-height: 100vh; background: var(--floor); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: var(--gate); text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 650; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2.5px solid var(--gate); outline-offset: 2px; }
::selection { background: var(--sign); color: var(--sign-ink); }
.ltr { direction: ltr; unicode-bidi: isolate; }
bdi { unicode-bidi: isolate; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the logo ---------- */
.mark-ic .mk-tile { fill: var(--sign); }
.mark-ic .mk-plane { fill: var(--sign-ink); }
.wordmark { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }

/* ---------- buttons, fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 18px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.25;
  text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.solid { background: var(--sign); border-color: var(--sign); color: var(--sign-ink); }
.btn.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 40%, transparent); }
.btn.danger.solid { background: var(--stop); border-color: var(--stop); color: #fff; }
.btn.small { min-height: 34px; padding: 5px 12px; font-size: 13px; border-radius: 10px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
@media (hover: hover) { .btn:not([disabled]):hover { border-color: var(--ink-2); } .btn.solid:not([disabled]):hover { filter: brightness(1.04); border-color: var(--sign); } }
.linkbtn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 4px; color: var(--gate); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn svg { width: 16px; height: 16px; flex: none; }
.iconbtn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); padding: 0; }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn.on { background: var(--sign); border-color: var(--sign); color: var(--sign-ink); }
@media (hover: hover) { .iconbtn:hover { border-color: var(--line-2); color: var(--ink); } }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field small, .hint { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.inp { width: 100%; min-height: 44px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.inp::placeholder { color: var(--faint); }
.inp:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sign) 55%, transparent); }
.inp[aria-invalid="true"] { border-color: var(--stop); }
textarea.inp { resize: vertical; min-height: 88px; line-height: 1.6; }
select.inp { appearance: none; -webkit-appearance: none; padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23889AA8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: left 14px center; background-size: 12px 8px; background-repeat: no-repeat; }
[dir="ltr"] select.inp { background-position: right 14px center; }
.inp[type="date"] { min-width: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.err { color: var(--stop); font-size: 13px; font-weight: 600; }
.pw { position: relative; }
/* the password is typed left to right; the show button sits where the reading ends (left in Arabic, right in English) */
.pw .inp { padding-left: 72px; }
[dir="ltr"] .pw .inp { padding-left: 12px; padding-right: 72px; }
.eye { position: absolute; inset-inline-end: 6px; top: 6px; bottom: 6px; border: 0; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; padding: 0 10px; }
.nw { white-space: nowrap; }
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* switch */
.switch { flex: none; width: 50px; height: 30px; border-radius: 999px; border: 0; background: var(--line-2); position: relative; padding: 0; transition: background .2s; }
.switch::after { content: ""; 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,.25); transition: inset-inline-start .2s; }
.switch[aria-checked="true"] { background: var(--go); }
.switch[aria-checked="true"]::after { inset-inline-start: 23px; }
.swrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.swrow:last-child { border-bottom: 0; }
.swrow > div { flex: 1; min-width: 0; }
.swrow b { display: block; font-weight: 600; font-size: 14.5px; }
.swrow span { font-size: 13px; color: var(--muted); }

/* segmented choice */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1 1 0; min-width: 72px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--paper); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--sign); border-color: var(--sign); color: var(--sign-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.chip svg { width: 16px; height: 16px; flex: none; }
button.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.tag.sign { background: var(--sign-soft); border-color: color-mix(in srgb, var(--sign) 60%, transparent); color: var(--sign-deep); }
.tag.go { background: var(--go-soft); border-color: transparent; color: var(--go); }
.tag.gate { background: var(--gate-soft); border-color: transparent; color: var(--gate); }
.tag.stop { background: var(--stop-soft); border-color: transparent; color: var(--stop); }
.tag.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }

/* stepper − n + */
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); font-size: 18px; font-weight: 600; line-height: 1; padding: 0; color: var(--ink); }
.stepper button[disabled] { opacity: .35; cursor: default; }
.stepper output { min-width: 44px; text-align: center; line-height: 1.15; }
.stepper output b { display: block; font-size: 19px; font-weight: 700; }
.stepper output span { font-size: 11px; color: var(--muted); }

/* ---------- sign-in and sign-up ---------- */
body.auth { display: flex; min-height: 100vh; background: var(--floor); }
.auth-wrap { width: 100%; max-width: 460px; margin: auto; padding: calc(28px + var(--safe-t)) 16px calc(28px + var(--safe-b)); display: flex; flex-direction: column; gap: 18px; }
.auth-card { background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; }
.auth-brand { display: flex; align-items: center; gap: 14px; padding: 22px 22px 20px; background: var(--band); color: var(--band-ink); }
.auth-brand .mark-ic { flex: none; }
[dir="rtl"] .auth-brand .wordmark { text-align: right; }   /* an English name, set on the Arabic side */
.auth-line { margin-top: 4px; font-size: 13.5px; color: var(--band-muted); line-height: 1.55; }
.auth-perf { position: relative; height: 0; border-top: 2px dashed var(--line-2); margin: 0 18px; }
.auth-perf::before, .auth-perf::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--floor); }
.auth-perf::before { inset-inline-start: -30px; } .auth-perf::after { inset-inline-end: -30px; }
.auth-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.auth-h { font-size: 22px; }
.auth-msg { padding: 11px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.6; }
.auth-msg.err { background: var(--stop-soft); color: var(--stop); }
.auth-msg.ok { background: var(--go-soft); color: var(--go); }
.auth-alt { text-align: center; font-size: 14px; color: var(--ink-2); }
.auth-alt a { font-weight: 700; }
.auth-done { padding: 16px; border-radius: 14px; background: var(--go-soft); color: var(--ink); display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.7; }
.auth-done-t { font-size: 18px; font-weight: 700; color: var(--go); }
.credit { text-align: center; font-size: 12.5px; color: var(--muted); }
.credit .heart { color: var(--stop); }
.noscript { padding: 20px; text-align: center; }

/* ---------- the app shell: tab bar on phones, a rail on wide screens ---------- */
.app { min-height: 100vh; }
.stage { min-width: 0; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 24px); }
.view { outline: none; }
.nav { position: fixed; z-index: 40; inset-inline: 0; bottom: 0; display: flex; justify-content: space-around; align-items: stretch; gap: 2px;
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + var(--safe-b)) max(8px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.nv { position: relative; flex: 1 1 0; max-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 2px; border: 0; border-radius: 12px;
  background: none; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.25; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.nv i { width: 52px; height: 30px; border-radius: 10px; display: grid; place-items: center; transition: background .2s; }
.nv svg { width: 22px; height: 22px; }
.nv.on { color: var(--ink); }
.nv.on i { background: var(--sign); color: var(--sign-ink); }
.nv .dot { position: absolute; top: 2px; inset-inline-start: calc(50% + 12px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--stop); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--paper); }
.rail-brand, .rail-foot { display: none; }
@media (min-width: 960px) {
  .stage { margin-inline-start: var(--rail-w); padding-bottom: 40px; }
  .nav { inset-inline-start: 0; inset-inline-end: auto; top: 0; bottom: 0; width: var(--rail-w); flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: calc(20px + var(--safe-t)) 14px 18px; background: var(--paper); border-top: 0; border-inline-end: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nv { flex: none; max-width: none; flex-direction: row; gap: 12px; padding: 5px 8px; font-size: 15px; }
  .nv i { width: 40px; height: 38px; }
  .nv .dot { top: 50%; margin-top: -9px; inset-inline-start: auto; inset-inline-end: 10px; }
  .rail-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .rail-brand .wordmark { font-size: 19px; }
  .rail-foot { display: block; margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
}

.page { max-width: 1040px; margin-inline: auto; padding: calc(18px + var(--safe-t)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: clamp(26px, 6vw, 34px); font-weight: 700; letter-spacing: -.01em; }
.page-head p { color: var(--muted); font-size: 14px; margin-top: 2px; }
.page-head .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 26px 0 12px; }
.sec-h h2 { font-size: 19px; font-weight: 650; }
.sec-h p, .sec-h span { font-size: 13px; color: var(--muted); }
.lead { color: var(--ink-2); font-size: 14.5px; max-width: 68ch; margin: -6px 0 16px; }
.note-line { font-size: 12.5px; color: var(--muted); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.8; }
.note-line a { color: inherit; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.panel + .panel { margin-top: 12px; }
.list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.list > * + * { border-top: 1px solid var(--line); }
.empty { padding: 28px 18px; border-radius: var(--r); border: 1.5px dashed var(--line-2); text-align: center; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty b { font-size: 17px; color: var(--ink); }
.empty p { font-size: 14px; max-width: 46ch; }
.netbar { position: sticky; top: 0; z-index: 35; padding: 8px 16px calc(8px); padding-top: calc(8px + var(--safe-t)); text-align: center; font-size: 13px; font-weight: 600; background: var(--warn-soft); color: var(--warn); }

/* ---------- toast and the floating "new changes" pill ---------- */
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); transform: translate(-50%, 16px); max-width: calc(100% - 32px); width: max-content;
  padding: 11px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13.5px; font-weight: 600; text-align: center; line-height: 1.5;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 960px) { .toast { bottom: 28px; left: calc(50% - var(--rail-w) / 2); } [dir="ltr"] .toast { left: calc(50% + var(--rail-w) / 2); } }
.refresh { position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--safe-b) + 16px); display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 16px; padding-inline: 16px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13.5px; font-weight: 600; white-space: nowrap; max-width: calc(100% - 24px); }
.refresh button { border: 0; border-radius: 999px; padding: 6px 14px; background: var(--sign); color: var(--sign-ink); font-weight: 700; font-size: 13px; }
@media (min-width: 960px) { .refresh { bottom: 28px; left: calc(50% - var(--rail-w) / 2); } [dir="ltr"] .refresh { left: calc(50% + var(--rail-w) / 2); } }

/* ---------- sheets: forms, choices and confirmations ---------- */
dialog.sheet { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; width: min(520px, calc(100% - 24px)); max-width: none; max-height: calc(100% - 32px);
  border-radius: var(--r-lg); background: var(--paper); color: var(--ink); overflow: hidden; flex-direction: column; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .45); }
dialog.sheet[open] { display: flex; }
dialog.sheet::backdrop { background: var(--scrim); }
.sheet form, .sheet .sh-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
.sh-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); flex: none; }
.sh-head h2 { flex: 1; font-size: 19px; overflow-wrap: anywhere; }
.sh-head p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.sh-x { width: 36px; height: 36px; flex: none; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; padding: 0; color: var(--ink-2); }
.sh-x svg { width: 18px; height: 18px; }
.sh-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.sh-body > p { color: var(--ink-2); font-size: 14.5px; }
.sh-foot { display: flex; gap: 10px; padding: 12px 18px calc(12px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--paper-2); flex: none; }
.sh-foot .btn { flex: 1; }
@media (max-width: 560px) {
  dialog.sheet { width: 100%; margin: auto 0 0; max-height: 92%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
.suggest { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.suggest li + li { border-top: 1px solid var(--line); }
.suggest button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: var(--paper); text-align: start; }
.suggest button:hover, .suggest button:focus-visible { background: var(--paper-2); }
.suggest .fl { font-size: 20px; line-height: 1; }
.suggest b { font-weight: 600; }
.suggest span { font-size: 12.5px; color: var(--muted); }

/* ---------- boarding passes (the trips list and the trip's hero) ---------- */
.pass { --tag: var(--sign); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 104px; background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--line);
  color: inherit; text-decoration: none; overflow: hidden; }
.pass::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--tag); }
.pass-main { padding: 16px 18px 16px 16px; padding-inline: 22px 16px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pass-route { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-weight: 500; min-width: 0; }
.pass-route .pc { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.pass-route .pa { font-size: 11px; opacity: .8; }
.pass-title { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.pass-fields { display: flex; gap: 6px 22px; flex-wrap: wrap; margin: 0; }
.pass-fields div { min-width: 0; }
.pass-fields dt { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.pass-fields dd { margin: 0; font-size: 14.5px; font-weight: 650; white-space: nowrap; }
.pass-stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 8px; text-align: center;
  border-inline-start: 2px dashed var(--line-2); background: color-mix(in srgb, var(--tag) 14%, var(--paper)); }
.pass-stub::before, .pass-stub::after { content: ""; position: absolute; inset-inline-start: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--floor); }
.pass-stub::before { top: -12px; } .pass-stub::after { bottom: -12px; }
.pass-stub b { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.pass-stub > span { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.pass-stub .now { font-size: 26px; }
.pass-bar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); }
.pass-bar .meter { flex: 1 1 120px; max-width: 220px; }
.passes { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .passes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: hover) { a.pass:hover { border-color: var(--line-2); } }
a.pass:active { transform: scale(.995); }
.pass.big { grid-template-columns: minmax(0, 1fr) 150px; }
.pass.big .pass-title { font-size: clamp(24px, 5.6vw, 34px); }
.pass.big .pass-stub b { font-size: 52px; }
.pass.past .pass-stub { background: var(--paper-2); }
@media (max-width: 420px) { .pass { grid-template-columns: minmax(0, 1fr) 88px; } .pass.big { grid-template-columns: minmax(0, 1fr) 112px; } .pass.big .pass-stub b { font-size: 40px; } }

.meter { height: 7px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--go); width: 0; transition: width .5s; }
.meter.sign i { background: var(--sign); }

/* the split-flap countdown: the digits flip once when the page opens */
.flap { display: inline-flex; gap: 3px; direction: ltr; }
.flap span { position: relative; display: inline-block; min-width: .68em; padding: .06em .05em; border-radius: 6px; background: var(--band); color: var(--sign); text-align: center; font-weight: 700;
  line-height: 1; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); transform-origin: 50% 50%; animation: flap .55s cubic-bezier(.3,.7,.4,1) both; }
.flap span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.35); }
.flap span:nth-child(2) { animation-delay: .08s; } .flap span:nth-child(3) { animation-delay: .16s; } .flap span:nth-child(4) { animation-delay: .24s; }
@keyframes flap { 0% { transform: rotateX(90deg); } 60% { transform: rotateX(-12deg); } 100% { transform: none; } }

.home-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.home-acts .btn { flex: 1 1 200px; }
.tile-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tile { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); color: inherit; text-decoration: none; text-align: start; width: 100%; }
.tile .ti { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--sign-soft); color: var(--sign-deep); font-size: 20px; }
.tile .ti svg { width: 22px; height: 22px; }
.tile b { display: block; font-weight: 650; }
.tile span { font-size: 13px; color: var(--muted); }
.notice { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--sign-soft); color: var(--ink); font-size: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.notice b { font-weight: 700; }
.notice .btn { margin-inline-start: auto; }

/* ---------- a trip: the top bar and the overhead sign band ---------- */
.trip-top { position: sticky; top: 0; z-index: 30; background: var(--band); color: var(--band-ink); padding-top: var(--safe-t); }
.trip-top-in { max-width: 1040px; margin-inline: auto; display: flex; align-items: center; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
.trip-top .back { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; margin-inline-start: -8px; border-radius: 10px; border: 0; background: none; color: var(--band-muted); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.trip-top .back svg { width: 18px; height: 18px; }
.trip-top .ttl { flex: 1; min-width: 0; font-size: 16px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-top .iconbtn { background: var(--band-2); border-color: transparent; color: var(--band-ink); }
.trip-top .iconbtn.on { background: var(--sign); color: var(--sign-ink); }
.signs { max-width: 1040px; margin-inline: auto; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); -webkit-overflow-scrolling: touch; }
.signs::-webkit-scrollbar { display: none; }
.sg { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; border: 0; background: var(--band-2); color: var(--band-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.sg svg { width: 17px; height: 17px; opacity: .85; }
.sg.on { background: var(--sign); color: var(--sign-ink); }
.sg.on svg { opacity: 1; }
.editbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--sign-soft); color: var(--ink); font-size: 13.5px; }
.editbar b { font-weight: 700; }
.trip-body { padding-top: 16px; }
.ro-note { margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--gate-soft); color: var(--gate); font-size: 13.5px; font-weight: 500; }

/* things you can change while editing */
.ed { border-radius: 6px; transition: background .15s, box-shadow .15s; }
body.editing .ed[contenteditable="true"] { box-shadow: 0 0 0 1px var(--line-2); padding: 0 4px; cursor: text; background: var(--paper); }
body.editing .ed[contenteditable="true"]:focus { outline: none; box-shadow: 0 0 0 2px var(--sign); background: var(--sign-soft); }
body.editing .ed[data-ph]:empty::before { content: attr(data-ph); color: var(--faint); font-weight: 400; }
body:not(.editing) .ed-only, body:not(.editing) .emptyf { display: none !important; }
body.editing .view-only { display: none !important; }
input.num { width: 84px; min-height: 34px; padding: 4px 8px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--paper); text-align: center; font-weight: 700; font-size: 15px; color: var(--ink); -moz-appearance: textfield; }
input.num::-webkit-outer-spin-button, input.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.num[readonly] { border-color: transparent; background: transparent; padding-inline: 0; width: auto; max-width: 92px; text-align: start; }
.delx { width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--stop) 30%, transparent); background: var(--stop-soft); color: var(--stop); display: none; place-items: center; padding: 0; font-size: 14px; }
.delx svg { width: 15px; height: 15px; }
body.editing .delx { display: grid; }
.addbtn { display: none; align-items: center; gap: 6px; margin-top: 10px; padding: 9px 14px; border-radius: 11px; border: 1.5px dashed var(--line-2); background: transparent; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
body.editing .addbtn { display: inline-flex; }
.addbtn.always { display: inline-flex; }
.restore { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-top: 10px; }
.restore button { border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.reorder { display: none; gap: 4px; }
body.editing .reorder { display: inline-flex; }
.reorder button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--paper); padding: 0; font-size: 12px; color: var(--ink-2); }
.reorder button[disabled] { opacity: .3; cursor: default; }

/* ---------- overview: the trip's pass ---------- */
.hero { --tag: var(--sign); position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px; }
.hero::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 7px; background: var(--tag); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 20px 20px 18px 18px; padding-inline: 26px 18px; }
.hero h1 { font-size: clamp(26px, 6.6vw, 40px); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; overflow-wrap: anywhere; }
.hero .sub { margin-top: 4px; color: var(--ink-2); font-size: 14.5px; }
.cd { text-align: center; align-self: start; min-width: 92px; }
.cd .flap { font-size: 40px; }
.cd .cd-l { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; line-height: 1.4; }
.cd .cd-now { font-size: 34px; line-height: 1; }
.hero-perf { position: relative; border-top: 2px dashed var(--line-2); margin: 0 14px; }
.hero-perf::before, .hero-perf::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--floor); }
.hero-perf::before { inset-inline-start: -26px; } .hero-perf::after { inset-inline-end: -26px; }
.hero-bot { padding: 16px 18px 18px; padding-inline: 26px 18px; display: flex; flex-direction: column; gap: 16px; }
.route-line { display: flex; align-items: flex-start; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.route-line::-webkit-scrollbar { display: none; }
.rl-stop { flex: 1 0 auto; min-width: 76px; text-align: center; position: relative; }
/* the site is right-to-left: each stop's bar runs from its centre to the stop before it, on its right (as in the Joody trip) */
.rl-stop .bar { position: absolute; top: 14px; height: 3px; background: var(--ink); left: 50%; right: -50%; z-index: 0; }
[dir="ltr"] .rl-stop .bar { left: -50%; right: 50%; }
.rl-stop:first-child .bar, .rl-stop:first-child .leg-ico { display: none; }
.rl-stop .leg-ico { position: absolute; top: 2px; right: 0; transform: translateX(50%); z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 12.5px; line-height: 1; }
[dir="ltr"] .rl-stop .leg-ico { right: auto; left: 0; transform: translateX(-50%); }
.rl-stop .dot { position: relative; z-index: 1; width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2.5px solid var(--ink); font-size: 12.5px; font-weight: 700; }
.rl-stop.end .dot { background: var(--sign); border-color: var(--sign); color: var(--sign-ink); }
.rl-stop.home .dot { border-style: dashed; color: var(--muted); }
.rl-stop .city { margin-top: 7px; font-size: 13px; font-weight: 650; white-space: nowrap; padding-inline: 4px; }
.rl-stop .dys { font-size: 11.5px; color: var(--muted); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 16px; margin: 0; }
.fields dt { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.fields dd { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.fields dd small { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.datebox { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 6px 6px 12px; padding-inline: 12px 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); font-size: 13.5px; color: var(--ink-2); }
.datebox input { border: 0; background: var(--paper-2); border-radius: 8px; padding: 5px 8px; font-weight: 700; color: var(--ink); min-height: 34px; }

/* stops and nights */
.prow { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; }
.prow .idx { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; }
.prow .pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prow .ptitle { font-size: 15.5px; font-weight: 650; overflow-wrap: anywhere; }
.prow .ptitle .fl { font-size: 15px; margin-inline-start: 4px; }
.prow .pmeta { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.prow .pmeta.muted { color: var(--muted); }
.prow .pwhy { font-size: 13px; color: var(--ink-2); }
.prow .side { display: flex; align-items: center; gap: 8px; flex: none; }
.wx-t { direction: ltr; unicode-bidi: isolate; font-weight: 700; }
.wx-reset { display: none; border: 1px dashed var(--line-2); background: var(--paper); border-radius: 999px; padding: 0 9px; font-size: 12px; font-weight: 600; color: var(--gate); }
body.editing .wx-reset { display: inline-flex; }
.locate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 13.5px; margin-top: 10px; }
.locate button { margin-inline-start: auto; }

/* ---------- day by day ---------- */
.citygroup { margin-bottom: 26px; }
.cg-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cg-head .n { font-size: 22px; font-weight: 700; }
.cg-head .meta { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.cg-head .meta .stepper button { width: 26px; height: 26px; border-radius: 8px; font-size: 15px; }
.cg-head .rule { flex: 1; height: 1px; background: var(--line); min-width: 20px; }
.cg-head .meta.off { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.arrive { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 10px; padding: 6px 12px; border-radius: 10px; background: var(--paper-2); border: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-2); }
.arrive a { font-weight: 600; }
.days { position: relative; }
.day { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 14px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; }
.day.today { border-color: var(--sign); box-shadow: 0 0 0 2px var(--sign); }
.day .dn { text-align: center; border-inline-end: 1px solid var(--line); padding-inline-end: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.day .dn .num { font-size: 26px; font-weight: 700; line-height: 1; }
.day .dn .dt { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.day .dn .dt .nw { white-space: nowrap; }
.day .dn .fc { font-size: 11.5px; color: var(--ink-2); line-height: 1.3; }
.day .dn .fc i { font-style: normal; font-size: 16px; display: block; }
.day .body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.day .plan { font-size: 14.5px; line-height: 1.75; overflow-wrap: anywhere; }
.day .note { font-size: 13px; color: var(--muted); }
.day-tag { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--sign-soft); color: var(--sign-deep); }
.day-tag.today { background: var(--sign); color: var(--sign-ink); }
.meal { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; flex-wrap: wrap; }
.meal .mlab { font-weight: 650; color: var(--ink-2); }
.meal .mtxt { color: var(--ink); }
.meal .delx { width: 24px; height: 24px; align-self: center; }
.day-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.day-acts .btn.small { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }

/* ---------- the map ---------- */
.mapwrap { background: var(--map-sea); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 12px; }
.mapstack { position: relative; }
.map-svg { display: block; width: 100%; height: auto; }
.mapstack .map-svg + .map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-move { pointer-events: none; }
.map-sea { fill: var(--map-sea); }
.map-land { fill: var(--map-land); stroke: var(--map-edge); stroke-width: 1; stroke-linejoin: round; fill-rule: evenodd; }
.map-land.lit { fill: var(--map-lit); }
.leg-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.leg-glow { stroke: color-mix(in srgb, var(--leg-flight) 22%, transparent); }
.leg-flight { stroke: var(--leg-flight); animation: routemove 24s linear infinite; }
.leg-car { stroke: var(--leg-car); opacity: .85; }
.leg-train { stroke: var(--leg-train); }
.leg-bus { stroke: var(--leg-bus); }
.leg-ferry { stroke: var(--leg-ferry); }
.leg-home { opacity: .55; }
@keyframes routemove { to { stroke-dashoffset: -300; } }
.leg-badge circle { fill: var(--paper); stroke: var(--line-2); stroke-width: 1.2; }
.leg-badge text { text-anchor: middle; dominant-baseline: central; }
.mk-halo { fill: color-mix(in srgb, var(--sign) 45%, transparent); }
.mk-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2.2; }
.mk-num { fill: var(--paper); font-family: var(--font); font-weight: 700; text-anchor: middle; }
.mk-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 3 2.5; }
.mk-core { fill: var(--ink); }
.mk-label { fill: var(--ink); font-family: var(--font); font-weight: 650; paint-order: stroke; stroke: var(--map-sea); stroke-linejoin: round; }
.mk-label.home { fill: var(--muted); font-weight: 500; }
.map-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.legs-sum { padding: 11px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; }
.leg { padding: 12px 14px; }
.leg-top { display: flex; align-items: center; gap: 10px; }
.leg-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); border: 1px solid var(--line); font-size: 17px; }
.leg-main { flex: 1; min-width: 0; }
.leg-t { font-size: 14.5px; font-weight: 650; }
.leg-m { font-size: 12.5px; color: var(--muted); }
.leg .seg { margin-top: 10px; }
.leg .seg button { min-width: 64px; min-height: 36px; font-size: 13px; }
.leg-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }

/* ---------- bookings ---------- */
.progwrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
.progtop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 10px; }
.progtop .l { font-size: 14px; color: var(--ink-2); }
.progtop .n { font-size: 20px; font-weight: 700; }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.totals .b { padding: 11px 13px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); }
.totals .b.hl { background: var(--sign-soft); border-color: color-mix(in srgb, var(--sign) 55%, transparent); }
.totals .l { font-size: 12px; color: var(--muted); }
.totals .v { font-size: 20px; font-weight: 700; line-height: 1.35; }
.v-act { color: var(--go); } .v-pos { color: var(--stop); } .v-neg { color: var(--go); }
.tk { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 14px 18px; padding-inline: 20px 14px; margin-bottom: 10px; }
.tk::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--line-2); }
html[dir="rtl"] .tk::before { border-radius: 4px 0 0 4px; }
.tk.booked::before { background: var(--go); }
.tk-head { display: flex; align-items: flex-start; gap: 10px; }
.tk-head .ti { flex: 1; min-width: 0; }
.tk-head .ti b { display: block; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.tk-head .ti span { font-size: 12.5px; color: var(--muted); }
.tk-est { text-align: end; font-size: 12px; color: var(--muted); flex: none; }
.tk-est b { display: flex; align-items: center; justify-content: flex-end; gap: 2px; font-size: 17px; color: var(--ink); }
.tk-mid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.status { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper-2); font-size: 13px; font-weight: 650; color: var(--muted); }
.status.on { background: var(--go-soft); border-color: transparent; color: var(--go); }
.tk-links { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-inline-start: auto; }
.tk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tk-fields label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.tk-fields .inp { min-height: 38px; padding: 6px 10px; font-size: 14px; border-radius: 9px; }
@media (max-width: 520px) { .tk-fields { grid-template-columns: 1fr; } }

/* ---------- budget and expenses ---------- */
.tiers { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tiers button { flex: 1 1 0; min-width: 96px; padding: 10px 8px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); text-align: center; }
.tiers button b { display: block; font-size: 14.5px; font-weight: 700; }
.tiers button span { font-size: 11.5px; color: var(--muted); }
.tiers button[aria-pressed="true"] { background: var(--sign); border-color: var(--sign); color: var(--sign-ink); }
.tiers button[aria-pressed="true"] span { color: var(--sign-ink); opacity: .75; }
.brow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.brow .bl { font-size: 14.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.brow .bn { display: flex; align-items: center; gap: 6px; }
.brow .bn .cur { font-size: 12.5px; color: var(--muted); }
.brow > .delx { grid-column: 1; } .brow > .bl { grid-column: 2; } .brow > .bn { grid-column: 3; }   /* the amounts stay in one column when the delete buttons are hidden */
input.money { width: 112px; min-height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper); padding: 6px 10px; font-weight: 700; font-size: 15px; text-align: left; direction: ltr; color: var(--ink); -moz-appearance: textfield; }
input.money::-webkit-outer-spin-button, input.money::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bars { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.barrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.barrow .bk { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barrow .bt { height: 9px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.barrow .bf { height: 100%; border-radius: inherit; background: var(--ink); transition: width .5s; }
.barrow .bf.over { background: var(--stop); }
.barrow .bp { text-align: end; color: var(--ink-2); }
.rate-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.rate-row input { width: 92px; }
.saved { font-size: 12px; color: var(--go); font-weight: 600; opacity: 0; transition: opacity .3s; }
.saved.show { opacity: 1; }
.subtabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs button { flex: none; min-height: 38px; padding: 6px 15px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--paper); font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.subtabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.exp-day { margin-top: 14px; }
.exp-day h3 { font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; }
.exp { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.exp .ei { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); font-size: 17px; }
.exp .em { flex: 1; min-width: 0; }
.exp .em b { display: block; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.exp .em span { font-size: 12.5px; color: var(--muted); }
.exp .ea { text-align: end; font-weight: 700; white-space: nowrap; }
.exp .ea small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.settle { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 14px; }
.settle b { font-weight: 700; }

/* ---------- packing ---------- */
.pk-group { margin-bottom: 18px; }
.pk-gh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pk-gh .gt { font-size: 16px; font-weight: 650; }
.pk-gh .gp { font-size: 12.5px; color: var(--muted); margin-inline-start: auto; }
.pk-gh .meter { width: 64px; height: 6px; }
.pk-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.pk-item .box { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 2px solid var(--line-2); display: grid; place-items: center; color: transparent; font-size: 14px; font-weight: 700; transition: .15s; }
.pk-item.done .box { background: var(--go); border-color: var(--go); color: #fff; }
.pk-item .txt { font-size: 14.5px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pk-item.done .txt { color: var(--muted); text-decoration: line-through; }
.pk-item .hint { font-size: 12px; color: var(--muted); text-align: end; }

/* ---------- booking calendar and tips ---------- */
.cal { display: flex; gap: 12px; padding: 14px; }
.cal .pri { flex: none; align-self: flex-start; padding: 4px 10px; border-radius: 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.p-red { background: var(--stop-soft); color: var(--stop); } .p-org { background: var(--warn-soft); color: var(--warn); }
.p-yel { background: var(--sign-soft); color: var(--sign-deep); } .p-grn { background: var(--go-soft); color: var(--go); }
.cal .cbody { flex: 1; min-width: 0; }
.cal .ct { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal .cw { font-size: 13px; color: var(--gate); font-weight: 600; margin: 2px 0 4px; }
.cal .cy { font-size: 13.5px; color: var(--ink-2); }
.cal.past { opacity: .62; }
.tips { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tip { display: flex; gap: 12px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.tip .em { font-size: 22px; flex: none; line-height: 1.3; }
.tip .tt { font-size: 15px; font-weight: 650; }
.tip .tx { font-size: 13.5px; color: var(--ink-2); margin: 2px 0 4px; }
.tip .tp { font-size: 13px; color: var(--sign-deep); font-weight: 500; }

/* ---------- hotels, restaurants, places ---------- */
.cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card.picked { border-color: var(--go); box-shadow: 0 0 0 1.5px var(--go); }
.card-top { display: flex; align-items: center; gap: 8px; }
.card-top .tag { margin-inline-end: auto; }
.card .name { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.card .area { font-size: 12.5px; color: var(--muted); }
.card .note { font-size: 13.5px; color: var(--ink-2); flex: 1; }
.card .price { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.card .rate { display: flex; align-items: center; gap: 3px; font-size: 19px; font-weight: 700; }
.card .rate small { font-size: 12px; color: var(--muted); font-weight: 500; }
.card .tot { text-align: end; font-size: 12px; color: var(--muted); }
.card .tot b { display: block; font-size: 14px; color: var(--ink); }
.card-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.t-comfort { background: var(--gate-soft); color: var(--gate); border-color: transparent; }
.t-premium { background: var(--sign-soft); color: var(--sign-deep); border-color: transparent; }
.t-luxury { background: var(--ink); color: var(--paper); border-color: transparent; }
.t-custom { background: var(--go-soft); color: var(--go); border-color: transparent; }
.ai-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.ai-note { font-size: 12.5px; color: var(--muted); }

/* ---------- the assistant ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.msg { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.75; overflow-wrap: anywhere; }
.msg p + p, .msg p + ul, .msg ul + p { margin-top: 6px; }
.msg ul { margin: 4px 0; padding-inline-start: 20px; }
.msg.me { align-self: flex-start; background: var(--ink); color: var(--paper); border-start-start-radius: 4px; }
.msg.ai { align-self: flex-end; background: var(--paper); border: 1px solid var(--line); border-start-end-radius: 4px; }
.msg .src { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.msg .src b { font-size: 12px; color: var(--muted); font-weight: 600; }
.msg .src a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typing { display: inline-flex; gap: 5px; align-items: center; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.composer { position: sticky; bottom: calc(var(--nav-h) + var(--safe-b) + 8px); display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; padding: 8px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
@media (min-width: 960px) { .composer { bottom: 16px; } }
.composer textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; border: 0; padding: 10px 8px; box-shadow: none !important; background: transparent; }
.composer .send { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 0; background: var(--sign); color: var(--sign-ink); display: grid; place-items: center; padding: 0; }
.composer .send svg { width: 20px; height: 20px; }
.composer .send[disabled] { opacity: .45; }
.chat-foot { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 8px; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.ctx-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: 13.5px; color: var(--muted); }
.ctx-pick select { width: auto; min-width: 180px; }
.privacy { font-size: 13px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.privacy summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.privacy p { margin-top: 6px; }

/* the planner */
.steps { display: flex; gap: 6px; margin-bottom: 14px; }
.steps span { flex: 1; height: 5px; border-radius: 999px; background: var(--sunk); }
.steps span.on { background: var(--sign); }
.outline-city { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.outline-city .em { flex: 1; min-width: 0; }
.outline-city b { font-size: 15.5px; font-weight: 650; }
.outline-city span { display: block; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) {
  .outline-city { flex-wrap: wrap; row-gap: 8px; }
  .outline-city .em { flex-basis: calc(100% - 46px); }
  .outline-city .stepper { margin-inline-start: 34px; }
  .outline-city .iconbtn { margin-inline-start: auto; }
}
.genlog { display: flex; flex-direction: column; gap: 8px; }
.genlog div { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.genlog i { font-style: normal; width: 22px; text-align: center; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--ink); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- members (admin) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; }
.stats > div { padding: 12px 10px; text-align: center; }
.stats > div + div { border-inline-start: 1px solid var(--line); }
.stats b { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; }
.stats span { font-size: 12px; color: var(--muted); }
.mrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; border: 0; background: var(--paper); text-align: start; }
.avatar { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--sign-soft); color: var(--sign-deep); font-weight: 700; font-size: 16px; }
.mrow .who { flex: 1; min-width: 0; }
.mrow .who b { display: block; font-weight: 650; }
.mrow .who span { font-size: 12.5px; color: var(--muted); }
.req { padding: 14px; }
.req-top { display: flex; gap: 12px; align-items: center; }
.req-top .who b { display: block; font-weight: 650; }
.req-acts { display: flex; gap: 8px; margin-top: 12px; }
.req-acts .btn { flex: 1; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.acts-list { display: flex; flex-direction: column; gap: 8px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.search { position: relative; }
.search svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.search .inp { padding-inline-start: 40px; }
.pw-show { display: flex; gap: 8px; }
.pw-show .inp { font-weight: 700; letter-spacing: .04em; }
.keybox { padding: 12px 14px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.keybox.on { background: var(--go-soft); border-color: transparent; color: var(--go); }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini > div { padding: 10px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); text-align: center; }
.mini b { display: block; font-size: 18px; font-weight: 700; }
.mini span { font-size: 11.5px; color: var(--muted); }
.codebox { direction: ltr; text-align: left; font-size: 12.5px; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); overflow-wrap: anywhere; user-select: all; }

/* ---------- tools ---------- */
/* prayer times and the qibla */
.pray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.pray .pt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); }
.pray .pt span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pray .pt b { font-size: 19px; font-weight: 700; }
.pray .pt.sun b { color: var(--ink-2); font-weight: 600; }
.pray .pt.next { background: var(--sign); border-color: var(--sign); color: var(--sign-ink); }
.pray .pt.next span { color: var(--sign-ink); }
.qibla { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.qibla svg { flex: none; color: var(--ink); }
.qibla b { display: block; font-size: 15px; }
.qibla span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 560px) { .pray-pick { grid-template-columns: 1fr 1fr; } .pray-pick .field:last-child { grid-column: 1 / -1; } }
.conv { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.conv .swap { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); display: grid; place-items: center; padding: 0; }
.conv-out { margin-top: 14px; padding: 16px; border-radius: 14px; background: var(--band); color: var(--band-ink); }
.conv-out b { display: block; font-size: 30px; font-weight: 700; color: var(--sign); direction: ltr; text-align: right; }
[dir="ltr"] .conv-out b { text-align: left; }
.conv-out span { font-size: 13px; color: var(--band-muted); }
.clock { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.clock .cf { font-size: 22px; flex: none; }
.clock .cm { flex: 1; min-width: 0; }
.clock .cm b { display: block; font-weight: 650; }
.clock .cm span { font-size: 12.5px; color: var(--muted); }
.clock .ct { font-size: 20px; font-weight: 700; direction: ltr; white-space: nowrap; }

/* ---------- more / settings ---------- */
.menu { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.menu > * + * { border-top: 1px solid var(--line); }
.mi { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 0; background: var(--paper); text-align: start; color: inherit; text-decoration: none; }
.mi .mic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); }
.mi .mic svg { width: 19px; height: 19px; }
.mi .mt { flex: 1; min-width: 0; }
.mi .mt b { display: block; font-weight: 600; font-size: 14.5px; }
.mi .mt span { font-size: 12.5px; color: var(--muted); }
.mi .chev { width: 18px; height: 18px; color: var(--faint); flex: none; }
.mi.danger { color: var(--stop); }
.about { text-align: center; padding: 24px 12px 8px; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.about .mark-ic { width: 48px; height: 48px; }

/* activity */
.acts-feed { list-style: none; margin: 0; padding: 0; }
.acts-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 14px; font-size: 13.5px; }
.acts-feed li + li { border-top: 1px solid var(--line); }
.acts-feed .who { font-weight: 650; }
.acts-feed time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.member { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.member .who { flex: 1; min-width: 0; }
.member .who b { display: block; font-weight: 600; }
.member .who span { font-size: 12.5px; color: var(--muted); }

/* ---------- the public read-only page ---------- */
.public-top { background: var(--band); color: var(--band-ink); padding: calc(16px + var(--safe-t)) 16px 16px; }
.public-top-in { max-width: 1040px; margin-inline: auto; display: flex; align-items: center; gap: 12px; }
.public-top .wordmark { font-size: 17px; }
.public-top p { font-size: 12.5px; color: var(--band-muted); }
body.public .stage { padding-bottom: 40px; margin: 0; }
body.public .toast { bottom: calc(16px + var(--safe-b)); left: 50%; }

@media (max-width: 560px) {
  .page-head h1 { font-size: 26px; }
  .hero-top { grid-template-columns: minmax(0, 1fr); }
  .cd { text-align: start; display: flex; align-items: center; gap: 10px; }
  .cd .cd-l { margin: 0; }
  .day { grid-template-columns: 48px minmax(0, 1fr); gap: 0 10px; padding: 12px; }
  .barrow { grid-template-columns: 92px minmax(0, 1fr) 40px; }
  .stats b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  .nav, .trip-top .iconbtn, .signs, .toast, .refresh, .composer, .addbtn, .delx, .netbar { display: none !important; }
  .stage { margin: 0 !important; padding: 0 !important; }
  body { background: #fff; }
}

/* ---------- اليوم: the day you are in ---------- */
.today-hero .th-k, .before .th-k { font-size: 13px; font-weight: 700; color: var(--sign-deep); margin-bottom: 2px; }
.today-hero h1 .fl { font-size: .78em; }
.th-wx { white-space: nowrap; }
.today-hero .hero-bot { padding-block: 12px 14px; }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.day-nav .btn svg { width: 16px; height: 16px; }
.before .hero { margin-bottom: 12px; }
.checks .chk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; }
.chk .ci { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); font-size: 17px; }
.chk.done .ci { background: var(--go-soft); color: var(--go); font-weight: 700; font-size: 16px; }
.chk .ct { flex: 1; min-width: 0; }
.chk .ct b { display: block; font-weight: 600; font-size: 14.5px; }
.chk .ct span { font-size: 12.5px; color: var(--muted); }
.chk .chev, .tmrw .chev { width: 18px; height: 18px; color: var(--faint); flex: none; }
.today-plan p { font-size: 15px; line-height: 1.85; }
.today-plan .meals { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.today-plan .btn { margin-top: 12px; }
.today-plan .hint { margin-top: 6px; }
.city-now { display: flex; flex-direction: column; gap: 8px; }
.city-now .cn { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.city-now .cn > span:first-child { flex: none; width: 22px; text-align: center; }
.pray.mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.pray.mini .pt { padding: 8px 6px; text-align: center; align-items: center; }
.pray.mini .pt b { font-size: 15px; white-space: nowrap; }
.pray.mini .pt span { font-size: 11.5px; }
@media (max-width: 420px) { .pray.mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spend-day .sd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.spend-day .sd-top b { font-size: 22px; font-weight: 700; }
.spend-day .list .exp { padding: 9px 12px; }
.tmrw { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.tmrw .tm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tmrw .tm-main b { font-weight: 650; }
.tmrw .tm-main span { font-size: 13.5px; color: var(--ink-2); }

/* ---------- booking details read from confirmations, and documents ---------- */
.bx { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; }
.bx-line { overflow-wrap: anywhere; }
.bx-line.muted { color: var(--muted); }
.bx-line .linkbtn { font-size: 13px; padding: 0 2px; }
.bx-fl { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.bx-fl b { font-weight: 700; }
.bx-route { font-weight: 650; letter-spacing: .03em; }
.bx-warn { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; line-height: 1.6; }
.bx-review { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.bx-review .bx { margin-top: 4px; background: var(--paper); }
.tk-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.doc { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 36px; padding-block: 3px; padding-inline: 12px 4px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--sign-soft); }
body:not(.editing) .doc { padding-inline-end: 12px; }
.doc a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.doc .dn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.doc .delx { width: 26px; height: 26px; border-radius: 999px; }
.doc-pick { display: flex; flex-direction: column; gap: 6px; }
.doc-opt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--paper); font-size: 14px; cursor: pointer; overflow-wrap: anywhere; }
.doc-opt input { width: 18px; height: 18px; flex: none; accent-color: var(--ink); }
.doc-opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
label.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
label.check input { width: 20px; height: 20px; flex: none; accent-color: var(--go); }
.docview { border-radius: 12px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.docview img { display: block; width: 100%; height: auto; }
/* the card for the driver: big, plain, easy to read from the back seat */
.drivercard { padding: 22px 18px; border-radius: 16px; background: #fff; color: #111; border: 2px solid var(--ink); text-align: center; }
.drivercard .dc-main { font-size: clamp(22px, 6.4vw, 30px); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.drivercard .dc-latin { margin-top: 10px; font-size: 16px; color: #444; line-height: 1.5; }

/* ---------- the country guide ---------- */
.g-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.g-head > div { flex: 1; min-width: 0; }
.g-head h2 { font-size: clamp(22px, 5.4vw, 28px); font-weight: 700; }
.g-head p { font-size: 13px; color: var(--muted); }
.g-head .linkbtn { font-size: 13px; padding: 0 2px; }
.g-flag { font-size: 44px; line-height: 1; flex: none; }
.g-entry { --st: var(--line-2); --st-soft: var(--paper-2); position: relative; padding: 16px 18px; padding-inline-start: 22px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.g-entry::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--st); }
.g-entry.go { --st: var(--go); --st-soft: var(--go-soft); } .g-entry.gate { --st: var(--gate); --st-soft: var(--gate-soft); }
.g-entry.warn { --st: var(--warn); --st-soft: var(--warn-soft); } .g-entry.stop { --st: var(--stop); --st-soft: var(--stop-soft); }
.g-st { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: var(--st-soft); color: var(--st); font-weight: 700; font-size: 15px; }
.g-entry:not(.go):not(.gate):not(.warn):not(.stop) .g-st { color: var(--ink); }
.g-sum { font-size: 15px; line-height: 1.8; }
.g-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; margin: 0; width: 100%; }
.g-facts dt { font-size: 12px; color: var(--muted); font-weight: 600; }
.g-facts dd { margin: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.g-grid .g-row { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.g-row { display: flex; gap: 12px; align-items: flex-start; }
.g-row .g-ic { font-size: 20px; line-height: 1.4; flex: none; width: 26px; text-align: center; }
.g-row > div { min-width: 0; }
.g-row b { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.g-row p { font-size: 14.5px; overflow-wrap: anywhere; }
.g-list { display: flex; flex-direction: column; gap: 14px; }
.sos-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.sos { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 12px 8px; border-radius: var(--r); background: var(--stop-soft); color: var(--stop); text-decoration: none; border: 1px solid color-mix(in srgb, var(--stop) 25%, transparent); }
.sos b { font-size: 26px; font-weight: 700; line-height: 1.2; }
.sos span { font-size: 12.5px; font-weight: 600; }
.g-emb { display: flex; flex-direction: column; gap: 6px; font-size: 14px; align-items: flex-start; }
.g-emb b { font-size: 15.5px; }
.g-apps { display: flex; flex-wrap: wrap; gap: 8px; }
.g-app { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); min-width: 120px; }
.g-app b { font-size: 14px; }
.g-app span { font-size: 12px; color: var(--muted); }
.g-foot { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.g-foot .src { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; padding: 12px 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
.g-foot .src b { font-size: 12px; color: var(--muted); }
.g-foot .src a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backlink { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.backlink svg { width: 18px; height: 18px; }
[dir="ltr"] .backlink svg { transform: scaleX(-1); }

/* ---------- settings: the look, the colours, the language ---------- */
.look { display: flex; flex-direction: column; gap: 14px; }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.swatch i { position: relative; width: 40px; height: 40px; border-radius: 12px; background: var(--sw-b); overflow: hidden; display: block; }
.swatch i b { position: absolute; inset: 9px; border-radius: 6px; background: var(--sw-a); }
.swatch[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); color: var(--ink); }
@media (max-width: 480px) { .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- English (left to right) ---------- */
[dir="ltr"] .back svg, [dir="ltr"] .mi .chev, [dir="ltr"] .flip-ltr { transform: scaleX(-1); }
.langlink { text-align: center; margin-top: -6px; font-size: 13.5px; }
.langlink a { color: var(--muted); font-weight: 600; }