/* feat-trip: My trip — timeline, passes, offline pack (web/mytrip.js). Prefix mt-.
   Theme tokens only (var(--ink) …). The one exception is the pass viewer's
   scanning surface, which is white in every look on purpose: a barcode reader
   needs dark on light. It is defined once, below, as --mt-scan-*. */

#trip-body{padding-bottom:calc(96px + var(--safe-b,0px))}
.mt-ico{width:20px;height:20px;fill:currentColor;flex:none}
.mt-ico-s{width:15px;height:15px;fill:currentColor;flex:none;opacity:.75}

/* quick bar */
.mt-quick{display:flex;gap:10px;margin:0 0 12px}
.mt-qbtn{flex:1;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600}

.mt-banner{display:flex;gap:10px;align-items:center;padding:10px 12px;margin:0 0 12px;border-radius:10px;
  background:color-mix(in srgb,var(--warn) 16%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);color:var(--ink);font-size:.9rem}

/* sections */
.mt-sec{margin:0 0 22px}
.mt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.mt-head h2,.mt-sec>h2{font-size:1.05rem;margin:0}
.mt-sec>h2{margin-bottom:8px}
.mt-trip-sel{max-width:55%;min-height:44px;font-family:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--ground);color:var(--ink);font-size:16px}
.mt-err{color:var(--magenta)}
.mt-empty{padding:14px;border:1px dashed var(--line);border-radius:12px;background:var(--panel)}
.mt-empty p{margin:0 0 6px}

/* countdown */
.mt-count{display:grid;gap:8px;padding:12px 14px;margin:0 0 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--datum)}
.mt-count:empty{display:none}
.mt-count .fine{margin:0}
.mt-count-row{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.mt-count-t{flex:1 1 140px;min-width:0;font-weight:600;overflow-wrap:anywhere}
.mt-count-when{color:var(--datum);white-space:nowrap}
.mt-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;flex:none}
.mt-badge-now{background:var(--ok);color:var(--on-accent)}
.mt-badge-next{background:var(--datum);color:var(--on-accent)}

/* days and items */
.mt-past{margin:0 0 10px}
.mt-past>summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink-2);list-style:none}
.mt-past>summary::-webkit-details-marker{display:none}
.mt-past>summary::before{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.mt-past[open]>summary::before{transform:rotate(45deg)}
.mt-day{margin:0 0 12px}
.mt-day-h{font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 6px}
.mt-day.is-today .mt-day-h{color:var(--datum)}
.mt-item{display:flex;align-items:stretch;gap:6px;margin:0 0 6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.mt-item.is-now{border-color:var(--ok);box-shadow:inset 3px 0 0 var(--ok)}
.mt-item.is-next{border-color:var(--datum);box-shadow:inset 3px 0 0 var(--datum)}
.mt-item-main{flex:1;min-width:0;display:flex;align-items:flex-start;gap:10px;padding:10px 4px 10px 12px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:56px}
.mt-time{flex:none;width:52px;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);padding-top:6px;font-size:.92rem}
.mt-kind{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--panel-2);color:var(--datum)}
.mt-kind svg{width:20px;height:20px;fill:currentColor}
.mt-kind-hotel{color:var(--magenta)}
.mt-kind-event,.mt-kind-restaurant{color:var(--orange)}
.mt-kind-train,.mt-kind-bus,.mt-kind-ferry,.mt-kind-car{color:var(--ok)}
.mt-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.mt-title{font-weight:600;overflow-wrap:anywhere;line-height:1.3}
.mt-sub{font-size:.84rem;color:var(--ink-2);overflow-wrap:anywhere;line-height:1.35}
.mt-body .mt-badge{margin-top:3px}
.mt-ref{flex:none;align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:42%;margin:0 8px 0 0;padding:0 10px;
  border:1px dashed var(--line);border-radius:8px;background:var(--ground);color:var(--ink);font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;cursor:pointer}
.mt-ref span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* dialogs */
.mt-dialog{max-height:calc(100vh - 40px);overflow:auto}
.mt-dtop{position:sticky;top:-20px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:-20px -20px 10px;padding:8px 8px 8px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
.mt-dtop h2{margin:0;font-size:1.08rem;overflow-wrap:anywhere}
.mt-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--panel-2);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.mt-seg{margin:0 0 10px}
.mt-seg .seg-b{min-height:44px}
.mt-pane p.fine{margin:6px 0 0}
.mt-dialog .mt-input,.mt-dialog textarea,.mt-dialog select{min-width:0;width:100%;box-sizing:border-box;padding:10px 12px;min-height:44px;border-radius:8px;border:1px solid var(--line);
  background:var(--ground);color:var(--ink);font-size:16px;font-family:inherit;color-scheme:var(--scheme,dark)}
textarea.mt-input{resize:vertical;min-height:120px}
.mt-file{display:block;width:100%;max-width:100%;min-height:44px;font-size:16px;color:var(--ink-2)}
.mt-status{min-height:1.2em}
.mt-warn{padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--warn) 16%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);color:var(--ink);font-size:.9rem}
.mt-form{display:grid;gap:10px}
.mt-lab{display:grid;gap:4px;margin:0;min-width:0}
.mt-lab[hidden]{display:none}
.mt-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.mt-file::file-selector-button{min-height:44px;margin-right:10px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;cursor:pointer}
.mt-pvlist{display:grid;gap:8px;margin:10px 0}
.mt-pv{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--ground)}
.mt-pv-a{display:flex;flex-direction:column;gap:6px;flex:none}
.mt-pv-a .btn{min-height:40px}
.mt-detail .mt-dkind{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--ink-2)}
.mt-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 10px}
.mt-dl dt{color:var(--ink-3);font-size:.85rem}
.mt-dl dd{margin:0;overflow-wrap:anywhere}
.mt-dref{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mt-dref .mt-ref{max-width:none}

/* offline pack */
.mt-pack{padding:12px 14px;margin:0 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.mt-pack.is-on{border-left:3px solid var(--ok)}
.mt-pack .fine{margin:6px 0 0}
.mt-pack .row-btns .btn{min-height:44px}
.mt-keep{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600}
.mt-pack-line{display:flex;align-items:center;gap:8px;color:var(--ok);font-weight:600}
.mt-pack-t{color:var(--ink)}
.mt-sos-c{padding:10px 12px;margin:0 0 8px;border:1px solid var(--line);border-left:3px solid var(--magenta);border-radius:10px;background:var(--panel)}
.mt-sos-c h3{margin:0 0 8px;font-size:.95rem}
.mt-sos-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.mt-sos-n{display:flex;flex-direction:column;gap:2px;padding:8px 10px;min-height:44px;border-radius:8px;background:var(--ground);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.mt-sos-n .fine{margin:0;font-size:.75rem}
.mt-sos-n strong{font-size:1.15rem;color:var(--magenta)}

/* passes */
.mt-local{margin:0 0 10px!important}
.mt-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.mt-pcard{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;min-width:0}
.mt-pthumb{display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:#fff;cursor:pointer;position:relative;overflow:hidden}
/* A pass is nearly always a portrait screenshot: shown from its top, filling
   the tile, so the grid reads as cards rather than small pictures with grey
   bars either side. Sized from the tile, not the picture (see .mt-vimg). */
.mt-pthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.mt-pmeta{display:flex;flex-direction:column;gap:2px;padding:8px 10px;min-width:0}
.mt-pmeta .fine{margin:0}
.mt-pdel{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;border-radius:50%;background:color-mix(in srgb,var(--panel) 85%,transparent);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}

/* the pass viewer: full screen, white for the scanner in every look */
.mt-viewer{--mt-scan-bg:#fff;--mt-scan-ink:#111;--mt-scan-soft:#555;--mt-scan-btn:#eee;
  position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--mt-scan-bg);color:var(--mt-scan-ink);display:none;flex-direction:column;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.mt-viewer[open]{display:flex}
.mt-viewer::backdrop{background:var(--mt-scan-bg)}
.mt-vbar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px}
.mt-vtitle{flex:1;min-width:0;display:flex;flex-direction:column}
.mt-vtitle strong{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-vtitle span{font-size:.85rem;color:var(--mt-scan-soft)}
.mt-vx{flex:none;width:52px;height:52px;border:0;border-radius:50%;background:var(--mt-scan-btn);color:var(--mt-scan-ink);font-size:30px;line-height:1;cursor:pointer}
.mt-vstage{flex:1;min-height:0;position:relative;padding:0;touch-action:pan-y pinch-zoom}
/* Sized from the stage's box, never from the picture. `max-height:100%` on a
   picture inside a flex-grown stage is resolved as `auto` by Safari (the
   iPhone), so a 1200x1800 screenshot was drawn at 1200x1800 and poured out
   of the screen over the Close button and the arrows — "the big picture
   came out". An absolutely placed box gets the stage's real size everywhere;
   object-fit keeps the whole pass, barcode included, inside it. */
.mt-vimg{position:absolute;inset:10px 14px;width:calc(100% - 28px);height:calc(100% - 20px);object-fit:contain;display:block}
.mt-vfoot{display:flex;align-items:center;gap:8px;padding:8px 12px 12px}
.mt-vhint{flex:1;margin:0;text-align:center;font-size:.85rem;color:var(--mt-scan-soft)}
.mt-vnav{flex:none;width:52px;height:52px;border:0;border-radius:50%;background:var(--mt-scan-btn);color:var(--mt-scan-ink);font-size:30px;line-height:1;cursor:pointer}
.mt-vnav[hidden]{visibility:hidden;display:block}
html.mt-viewing #ai-fab{display:none}

@media (max-width:380px){
  .mt-time{width:44px;font-size:.86rem}
  .mt-ref{max-width:38%;padding:0 8px}
  .mt-two{gap:8px}
}
.mt-keepnote{color:var(--ink-2)}
/* Passes backup (pass_backup) */
.mt-bk{padding:12px 14px;margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.mt-bk.is-on{border-left:3px solid var(--ok)}
.mt-bk h3{margin:0 0 6px;font-size:15px}
.mt-bk .fine{margin:6px 0 0}
.mt-bk .row-btns{margin-top:10px;flex-wrap:wrap}
.mt-bk .row-btns .btn{min-height:44px}
.mt-bk-quiet{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 10px!important}
.mt-bk-err{color:var(--warn)}
.mt-bk-warn{border-left:3px solid var(--warn);padding:6px 10px;background:var(--panel-2);border-radius:6px}
.mt-link{background:none;border:0;padding:0;min-height:44px;color:var(--datum);text-decoration:underline;cursor:pointer;font:inherit;text-align:left}
.mt-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:18px;letter-spacing:.05em;text-align:center;padding:14px 10px;margin:0;border:1px dashed var(--line);border-radius:8px;background:var(--panel-2);user-select:all;overflow-wrap:anywhere;color:var(--ink)}
.mt-codein{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase}
.mt-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.mt-check input{width:20px;height:20px;margin:2px 0 0;flex:none}
.mt-check span{text-transform:none;letter-spacing:normal;font-size:14px;font-weight:400;color:var(--ink)}