/* Airtable-style layout in the OECD palette (blue #0A69A5, light blue #A0BAC7, green #97BF0D, grey #707173). */
:root {
  --bar: #0a69a5; --bar-dark: #08537f; --bar-fg: #ffffff;
  --bg: #ffffff; --canvas: #f7f8fa; --surface: #ffffff; --fg: #1d1f25; --muted: #616670; --faint: #8a8f98;
  --line: #dfe3e6; --line-strong: #c4ccd2; --head: #f2f5f7; --hover: #eef4f8; --focus: #0a69a5;
  --accent: #0a69a5; --accent-soft: #e2eef6; --danger: #c0283e; --ok: #5a7a00; --ok-soft: #eef5d6;
  /* Single-select colors (Airtable "light 2" palette) */
  --p-blue: #cfdfff; --p-blue-fg: #102046; --p-cyan: #d0f0fd; --p-cyan-fg: #04283f;
  --p-teal: #c2f5e9; --p-teal-fg: #012524; --p-green: #d1f7c4; --p-green-fg: #0b1d05;
  --p-yellow: #ffeab6; --p-yellow-fg: #3b2501; --p-orange: #fee2d5; --p-orange-fg: #6b2613;
  --p-purple: #ede2fe; --p-purple-fg: #280b42; --p-pink: #ffdaf6; --p-pink-fg: #400832; --p-gray: #eeeeee; --p-gray-fg: #040404;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* No visible scrollbars anywhere; areas still scroll with the trackpad, wheel, touch and keys */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
body { display: flex; flex-direction: column; min-height: 100dvh; }
body > main { flex: 1 0 auto; }
body { margin: 0; background: var(--canvas); color: var(--fg); font-family: var(--font); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
svg.i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* App bar: the base-colored strip at the top */
/* The top bars line up with the page content: same max width, centered (--page-w is set per page). */
:root { --page-w: 1400px; }
.appbar, .viewbar, .toolbar { --gutter-l: max(16px, env(safe-area-inset-left), calc((100% - var(--page-w)) / 2 + 16px));
  --gutter-r: max(16px, env(safe-area-inset-right), calc((100% - var(--page-w)) / 2 + 16px)); }
.appbar { background: var(--bar); color: var(--bar-fg); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 var(--gutter-r) 0 var(--gutter-l); min-height: 52px; }
.appbar .left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.logo { width: 28px; height: 28px; border-radius: 6px; background: rgb(255 255 255 / .18); display: grid; place-items: center; }
.logo svg { width: 18px; height: 18px; stroke-width: 2; }
.logo .mark { width: 22px; height: 22px; }
.crumb { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; min-width: 0; }
.crumb .sep { opacity: .6; font-weight: 400; }
.crumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who { display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; }
.who > span { opacity: .92; }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: rgb(255 255 255 / .25); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12px; border: 2px solid rgb(255 255 255 / .5); }
.appbar button.link { color: #fff; opacity: .9; }
.appbar button.link:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 560px) { .who > span:not(.avatar) { display: none; } .brand .name { display: none; } }

/* Sub bar: title of the current view */
.viewbar { background: var(--bar-dark); color: #fff; padding: 0 var(--gutter-r) 0 var(--gutter-l); display: flex; align-items: flex-end; gap: 4px; min-height: 34px; }
.viewbar .tab { background: var(--bg); color: var(--fg); border-radius: 6px 6px 0 0; padding: 7px 14px 6px; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.viewbar .meta { margin-left: auto; align-self: center; font-size: 12px; opacity: .85; padding: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Toolbar: view controls above the grid */
.toolbar { background: var(--bg); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding: 6px calc(var(--gutter-r) - 8px) 6px calc(var(--gutter-l) - 8px); } /* the buttons' own 8px padding lines their icons up with the content */
.toolbar .spacer { flex: 1; }
.toolbar .divider-v { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.tool { font: inherit; font-size: 13px; color: var(--fg); background: none; border: none; border-radius: 6px; padding: 5px 8px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.tool:hover { background: var(--head); }
.tool[aria-expanded="true"], .tool.on { background: var(--accent-soft); color: var(--accent); }
.tool.strong { font-weight: 600; }
.mailchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 3px 4px 3px 8px; border: 1px solid var(--line); border-radius: 6px; max-width: 100%; }
.mailchip code { font-family: var(--mono); color: var(--fg); font-size: 12px; overflow-wrap: anywhere; }

/* Buttons and fields */
button, .btn { font: inherit; font-weight: 500; font-size: 13px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); padding: 6px 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button:hover, .btn:hover { background: var(--head); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover { filter: brightness(1.06); background: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
button.link { border: none; background: none; padding: 2px 4px; color: var(--accent); font-weight: 500; font-size: 12px; }
button.link:hover { background: none; text-decoration: underline; }
button.link.danger { color: var(--danger); }
label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
label .lab { display: inline-flex; align-items: center; gap: 6px; }
input, select, textarea { font: inherit; font-size: 13px; color: var(--fg); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px; padding: 7px 9px; min-width: 0; width: 100%; font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px var(--accent-soft); }
textarea { resize: vertical; min-height: 34px; }
/* Number fields without the browser's up/down spinner (amounts are typed, not stepped) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 16px; }
.wide { grid-column: 1 / -1; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg { font-size: 13px; color: var(--muted); margin: 0; }
.msg.err { color: var(--danger); } .msg.ok { color: var(--ok); }
.note { color: var(--muted); font-size: 12px; }
.mono { font-family: var(--mono); }

/* Page body */
.content { padding: 16px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); max-width: var(--page-w); margin-inline: auto; width: 100%; box-sizing: border-box;
  /* a column, so the footer can sit at the bottom of the screen and stay there while the page scrolls */
  display: flex; flex-direction: column; gap: 14px; }
.content > * { flex: none; min-width: 0; } /* wide tables scroll inside their box instead of widening the page */
h1 { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
.sub { color: var(--muted); margin: 2px 0 0; font-size: 13px; }

/* Collapsible "Add a receipt" panel, styled like an expanded record */
.record { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.record > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 600; font-size: 14px; user-select: none; }
.record > summary::-webkit-details-marker { display: none; }
.record > summary .chev { transition: transform .2s; color: var(--muted); }
.record[open] > summary .chev { transform: rotate(90deg); }
.record.closing > summary .chev { transform: none; }
.record > summary .hint { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); }
.record[open] > summary { border-bottom: 1px solid var(--line); }
.record .body { padding: 14px; display: grid; gap: 14px; }
.drop { border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; background: var(--canvas); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop .file { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); word-break: break-all; min-width: 0; }

/* Grid view */
.grid-wrap { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; overflow: auto; position: relative; }
table.sheet { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; font-size: 13px; }
.sheet th, .sheet td { text-align: left; padding: 0 10px; height: 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.sheet th:last-child, .sheet td:last-child { border-right: none; }
.sheet thead th { background: var(--head); font-weight: 500; color: var(--fg); position: sticky; top: 0; z-index: 1; height: 32px; }
.sheet thead th .h { display: inline-flex; align-items: center; gap: 6px; }
.sheet thead th .h svg { color: var(--faint); }
.sheet th.rn, .sheet td.rn { width: 44px; text-align: center; color: var(--faint); font-size: 12px; padding: 0 6px; }
.sheet tbody tr:hover td { background: var(--hover); }
.sheet td.num { font-variant-numeric: tabular-nums; text-align: right; }
.sheet th.num { text-align: right; } .sheet th.num .h { flex-direction: row-reverse; }
.sheet td.id { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sheet td.clip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.sheet td.vendor { font-weight: 500; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.sheet td.vendor .desc { font-weight: 400; color: var(--muted); margin-left: 6px; }
.sheet td.acts { text-align: right; }
.sheet tfoot td { background: var(--head); color: var(--muted); font-size: 12px; border-bottom: none; height: 32px; }
.sheet tfoot td.num { color: var(--fg); font-weight: 500; white-space: normal; line-height: 1.5; padding: 6px 10px; }
.sheet td.empty { text-align: center; color: var(--muted); height: 90px; white-space: normal; }
.attach { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; }
.attach a { color: var(--fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; background: var(--canvas); font-size: 12px; }
.attach a:hover { border-color: var(--accent); color: var(--accent); }

/* Select pills */
.pill { display: inline-block; font-size: 12px; line-height: 18px; padding: 0 8px; border-radius: 999px; background: var(--p-gray); color: var(--p-gray-fg); white-space: nowrap; }
.pill.blue { background: var(--p-blue); color: var(--p-blue-fg); } .pill.cyan { background: var(--p-cyan); color: var(--p-cyan-fg); }
.pill.teal { background: var(--p-teal); color: var(--p-teal-fg); } .pill.green { background: var(--p-green); color: var(--p-green-fg); }
.pill.yellow { background: var(--p-yellow); color: var(--p-yellow-fg); } .pill.orange { background: var(--p-orange); color: var(--p-orange-fg); }
.pill.purple { background: var(--p-purple); color: var(--p-purple-fg); } .pill.pink { background: var(--p-pink); color: var(--p-pink-fg); }
.chip { display: inline-block; font-size: 12px; line-height: 18px; padding: 0 8px; border-radius: 999px; background: var(--p-gray); color: var(--p-gray-fg); white-space: nowrap; }
.chip.warn { background: var(--p-yellow); color: var(--p-yellow-fg); }
.chip.ok { background: var(--p-green); color: var(--p-green-fg); }

/* Stats strip (trip header + usage) */
.summary { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-end; }
.summary-toggle { margin-left: auto; align-self: center; }
/* As paid / In EUR switch */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--surface); }
.seg button { border: none; border-radius: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 500; padding: 4px 10px; line-height: 18px; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button:hover { background: var(--head); color: var(--fg); }
.seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.unconv { color: var(--muted); font-style: italic; }
.unconv-n { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--muted); font-style: italic; }
.section-acts { display: flex; align-items: center; gap: 10px; }
.m-toggle { margin: 0 0 8px; }
.stat { display: grid; }
.stat .k { font-size: 11px; color: var(--muted); font-weight: 500; }
.stat .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Trips page: bases-style cards */
.section-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Trips sit in one row that scrolls sideways once there are more than fit */
.trip-search { display: flex; align-items: center; gap: 12px; margin-bottom: -4px; }
.trip-search[hidden] { display: none; }
.search { position: relative; flex: 0 1 320px; display: flex; align-items: center; }
.search .i { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.search input { padding-left: 30px; }
.trips > .trip-card[hidden] { display: none; }
.trips { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 10px; margin: -2px -2px -6px; }
.trips > .trip-card { flex: 0 0 clamp(260px, calc((100% - 206px) / 3), 360px); scroll-snap-align: start; }
.trips > .trip-card { height: var(--trip-card-h, 214px); min-width: 0; align-content: start; }
.trips > .trip-card .foot { align-self: end; }
.trips > .trip-card.new { flex-basis: 190px; min-height: 0; align-content: center; white-space: nowrap; }
@media (max-width: 640px) { .trips > .trip-card { flex-basis: calc(100% - 28px); } /* nearly full width, the next card peeks in */ .trips > .trip-card.new { flex-basis: 130px; } .trips > .trip-card.new span { display: none; } }
.trip-card { grid-template-columns: minmax(0, 1fr); position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 10px; color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / .04); transition: box-shadow .15s, border-color .15s; }
.trip-card:hover { box-shadow: 0 4px 14px rgb(0 0 0 / .10); border-color: var(--line-strong); }
.trip-card .top { display: flex; gap: 12px; align-items: center; padding-right: 26px; }
.trip-card .icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; font-size: 17px; color: #fff; flex: none; }
.trip-card a.name { color: inherit; text-decoration: none; display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.trip-card a.name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is clickable */
.trip-card .dates { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-card .top > div { min-width: 0; }
.trip-card a.name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 32px; } /* clear of the share and edit buttons */
.trip-card.guest a.name { padding-right: 56px; } /* clear of the role chip */
.trip-card .totals { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; display: flex; align-items: baseline; gap: 0 10px; min-width: 0; }
.trip-card .totals .amts { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-card .amts > span + span::before { content: " · "; color: var(--faint); }
.rates { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 2px 12px; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 400; color: var(--muted); }
.trip-card .rates { display: block; font-size: 12px; margin-left: auto; flex: 0 3 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line, trims before the amounts do */
.trip-card .rate + .rate { margin-left: 12px; }
.rate-v { background: none; border: none; border-bottom: 1px dashed var(--muted); border-radius: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.rate-v:hover { color: var(--accent); border-bottom-color: var(--accent); }
.rate.custom .rate-v { color: var(--accent); border-bottom-style: solid; border-bottom-color: var(--accent); }
.rate-reset { font-size: 10px; line-height: 1.4; padding: 0 5px; margin-left: 5px; border-radius: 4px; vertical-align: 1px; }
.rate input { width: 6.5em; font: inherit; color: var(--fg); padding: 0 4px; height: 1.6em; }
.m-sum .rates { display: inline-flex; }
.trip-card .mail { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 7px 8px 7px 10px; border-radius: 6px; background: var(--canvas); border: 1px solid var(--line); font-size: 12px; }
.trip-card .mail .k { color: var(--muted); width: 100%; font-size: 11px; font-weight: 500; }
.trip-card .mail .addr { font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; flex: 1; min-width: 0; }
.trip-card .mail .copy { padding: 3px 9px; font-size: 12px; }
.trip-card .card-edit, .trip-card .card-share { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 5px; line-height: 0; border-radius: 6px; background: var(--surface); color: var(--muted); opacity: 0; transition: opacity .15s; }
.trip-card .card-share { right: 38px; }
.trip-card:hover .card-edit, .trip-card .card-edit:focus-visible, .trip-card:hover .card-share, .trip-card .card-share:focus-visible { opacity: 1; }
.trip-card .card-edit:hover, .trip-card .card-share:hover { color: var(--accent); }
@media (hover: none) { .trip-card .card-edit, .trip-card .card-share { opacity: 1; } }
.trip-card .card-shared { position: relative; z-index: 2; text-decoration: none; }
.trip-card .card-shared:hover { background: var(--line); }
.slug-field { display: flex; align-items: center; gap: 2px; font-size: 13px; }
.slug-field input { flex: 1; min-width: 0; }
.slug-field .mono { color: var(--muted); }
.trip-card .foot { display: flex; gap: 8px; align-items: center; min-width: 0; font-size: 12px; color: var(--muted); }
.trip-card .foot > * { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-card .foot > :first-child, .trip-card .mail .note, .trip-card .mail .copy { flex: none; }
.trip-card.new { border: 1.5px dashed var(--line-strong); box-shadow: none; place-content: center; text-align: center; color: var(--muted); cursor: pointer; font: inherit; min-height: 150px; background: transparent; }
.trip-card.new:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.trip-card.new strong { font-size: 14px; }
details.usage { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
details.usage summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 500; }
dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); padding: 20px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 12px 40px rgb(0 0 0 / .2); }
dialog::backdrop { background: rgb(0 0 0 / .35); }

/* Login page */
.login-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.login { display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
.login .card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: grid; gap: 18px; box-shadow: 0 4px 20px rgb(0 0 0 / .06); }
.google { width: 100%; padding: 9px 14px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.msg:empty { display: none; }
@media (max-width: 640px) {
  .record > summary .hint, .toolbar .divider-v { display: none; }
  .toolbar .spacer { display: none; }
}

/* OECD palette for tags and status pills (overrides the generic select colors above) */
:root {
  --o-blue: #d6e7f3; --o-blue-fg: #074a75; --o-sky: #e3ecf0; --o-sky-fg: #34505e; --o-green: #edf4d2; --o-green-fg: #4d6500;
  --o-navy: #d3dce7; --o-navy-fg: #133a5e; --o-grey: #e9e9ea; --o-grey-fg: #3f4042;
}
.pill.blue { background: var(--o-blue); color: var(--o-blue-fg); }
.pill.purple { background: var(--o-sky); color: var(--o-sky-fg); }
.pill.orange { background: var(--o-green); color: var(--o-green-fg); }
.pill.teal { background: var(--o-navy); color: var(--o-navy-fg); }
.pill.gray, .pill { background: var(--o-grey); color: var(--o-grey-fg); }
.chip.ok { background: var(--o-green); color: var(--o-green-fg); }

/* Trips page: KPI strip, recent receipts, tips */
.appbar form { margin: 0; display: inline; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: grid; gap: 2px; border-top: 3px solid var(--accent); }
.kpi:nth-child(2) { border-top-color: #a0bac7; } .kpi:nth-child(3) { border-top-color: #e0b04a; } .kpi:nth-child(4) { border-top-color: #97bf0d; }
button.kpi { font: inherit; color: inherit; text-align: left; cursor: pointer; justify-content: stretch; align-items: start; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: box-shadow .15s, border-color .15s; }
button.kpi:hover { box-shadow: 0 4px 14px rgb(0 0 0 / .08); background: var(--surface); }
button.kpi:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kpi .k { font-size: 11px; color: var(--muted); font-weight: 500; }
.kpi .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wide-kpi { grid-column: span 2; } @media (max-width: 520px) { .wide-kpi { grid-column: auto; } }
.block { display: grid; gap: 8px; }
.block-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.block-h h2 { display: inline-flex; align-items: center; gap: 6px; }
table.sheet.compact { min-width: 640px; }
.sheet td a { color: var(--accent); text-decoration: none; } .sheet td a:hover { text-decoration: underline; }
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.tip { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.tip-i { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.tip-i svg { width: 16px; height: 16px; }
.tip p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

/* Row selection (Airtable-style: number turns into a checkbox on hover) */
.sheet td.rn .n { display: inline; }
.sheet td.rn input, .sheet th.rn input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sheet td.rn input { display: none; }
.sheet tr:hover td.rn .n, .sheet tr.sel td.rn .n { display: none; }
.sheet tr:hover td.rn input, .sheet tr.sel td.rn input { display: inline-block; }
.sheet tbody tr[data-id] { cursor: pointer; }
.sheet tbody tr.sel td { background: var(--accent-soft); }
.sheet tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.selbar { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 12px; }
.tool.danger { color: var(--danger); }
.tool.danger:hover { background: #fbe4e8; }

/* Status as an editable pill */
.status-sel { width: auto; appearance: none; -webkit-appearance: none; border: none; border-radius: 999px; font-size: 12px; line-height: 18px; padding: 0 22px 0 8px; cursor: pointer;
  background-repeat: no-repeat; background-position: right 7px center; background-size: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23444' stroke-width='1.5'/%3E%3C/svg%3E"); }
.status-sel.draft { background-color: var(--p-yellow); color: var(--p-yellow-fg); }
.status-sel.complete { background-color: var(--o-green); color: var(--o-green-fg); }
.status-sel:focus { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--focus); }
.sheet td .src { margin-left: 6px; font-size: 11px; }
.icon-btn { border: none; background: none; padding: 4px; border-radius: 5px; color: var(--muted); line-height: 0; font-size: 18px; }
.icon-btn:hover { background: var(--head); color: var(--fg); }
.icon-btn.del:hover { color: var(--danger); background: #fbe4e8; }
.sheet td.acts { white-space: nowrap; }

/* Modals */
/* Height follows the visible viewport (dvh), so on phones the footer buttons sit above Safari's toolbar, not under it. */
dialog.modal { padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
@media (max-width: 640px) {
  dialog.modal:not(.grouping):not(.lightbox) { max-height: calc(100dvh - 16px - env(safe-area-inset-bottom)); }
  .modal-f { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
dialog.modal.small { width: min(420px, calc(100vw - 24px)); }
dialog.modal[open] { animation: pop .14s ease-out; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }
.modal-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.modal-h h2 { font-size: 17px; }
.modal-b { padding: 16px 18px; }
.modal-f { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--canvas); border-radius: 0 0 10px 10px; position: sticky; bottom: 0; }
.modal-f .spacer { flex: 1; }
.field { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.e-file { min-height: 34px; display: flex; align-items: center; font-weight: 400; }
/* Ask about the amount (receipt window): sparkle button in the Amount label, small chat window */
.title-row { display: flex; align-items: center; gap: 8px; }
.ask-btn.inline { position: static; transform: none; padding: 5px; }
.ask-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: var(--accent-soft); color: var(--accent); padding: 4px; border-radius: 5px; line-height: 0; }
.ask-btn:hover { background: var(--accent); color: #fff; }
.ask-btn .i { width: 16px; height: 16px; }
.ask-log { display: grid; gap: 8px; max-height: 40vh; overflow: auto; margin-bottom: 10px; }
.ask-log .note { margin: 0; }
.bubble { margin: 0; padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.4; max-width: 90%; white-space: pre-wrap; }
.bubble.me { justify-self: end; background: var(--accent); color: #fff; border-bottom-right-radius: 3px; }
.bubble.ai { justify-self: start; background: var(--head); border-bottom-left-radius: 3px; }
.bubble.thinking { color: var(--muted); }
.ask-row { display: flex; gap: 8px; align-items: flex-end; }
.ask-row textarea { flex: 1; min-height: 38px; }
.changes { justify-self: start; max-width: 90%; display: grid; gap: 4px; padding: 8px 11px; border: 1px solid var(--accent); border-radius: 10px; font-size: 13px; }
.change { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.change .lab { color: var(--muted); text-transform: capitalize; }
.change .new { white-space: pre-wrap; }
.danger-btn { color: var(--danger); border-color: #efb3be; }
.danger-btn:hover { background: #fbe4e8; }
.danger-btn.solid { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.danger-btn.solid:hover { filter: brightness(1.06); background: var(--danger); }

/* Custom dropdowns (public/dropdown.js) — one look for every menu in the app */
select.dd-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; opacity: 0; pointer-events: none; border: 0 !important; }
:has(> select.dd-native), :has(> input.dp-native) { position: relative; } /* keep the hidden select inside its box, so it never widens the page */
.dd-btn { width: 100%; justify-content: space-between; gap: 8px; text-align: left; font-weight: 400; color: var(--fg); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px; padding: 7px 9px; }
.dd-btn:hover { border-color: var(--faint); background: var(--bg); }
.dd-btn:focus-visible, .dd-btn[aria-expanded="true"] { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px var(--accent-soft); }
.dd-btn:disabled { opacity: .6; cursor: default; }
.dd-btn .dd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dd-btn .dd-chev { width: 10px; height: 6px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.5; transition: transform .15s; }
.dd-btn[aria-expanded="true"] .dd-chev { transform: rotate(180deg); }
/* the status pill keeps its own compact look */
.dd-btn.status-sel { width: auto; display: inline-flex; gap: 5px; border: none; border-radius: 999px; padding: 0 7px 0 8px; font-size: 12px; line-height: 18px; background-image: none; }
.dd-btn.status-sel .dd-chev { width: 8px; stroke: currentColor; opacity: .7; }
.dd-btn.status-sel.draft:hover { background-color: var(--p-yellow); filter: brightness(.97); }
.dd-btn.status-sel.complete:hover { background-color: var(--o-green); filter: brightness(.97); }
.dd-menu { position: fixed; inset: auto; margin: 0; z-index: 1000; max-height: 280px; overflow: auto; padding: 4px; background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgb(0 0 0 / .16); font-size: 13px; animation: dd-in .12s ease-out; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-3px); } }
.dd-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.dd-item.on { background: var(--hover); }
.dd-item.sel { font-weight: 500; }
.dd-sub { color: var(--muted); font-weight: 400; }
.dd-item.off { opacity: .45; cursor: default; }
.dd-item .status-sel { background-image: none; display: inline-block; border-radius: 999px; padding: 0 8px; font-size: 12px; line-height: 18px; }
.dd-check { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.2; }
.dd-empty { padding: 6px 8px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .dd-menu { animation: none; } .dd-btn .dd-chev { transition: none; } }

/* Custom hover box (public/tooltip.js) */
.hovertip { position: fixed; inset: auto; margin: 0; z-index: 1001; max-width: min(360px, calc(100vw - 12px)); padding: 6px 9px; border: none; border-radius: 6px;
  background: #1d1f25; color: #fff; font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none;
  box-shadow: 0 6px 20px rgb(0 0 0 / .18); animation: tip-in .12s ease-out; }
@keyframes tip-in { from { opacity: 0; } }

/* Footer on every page: two quiet links that open small panels */
.app-foot { margin-top: auto; position: sticky; bottom: 0; z-index: 5; background: var(--canvas); border-top: 1px solid var(--line); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.foot-links { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.foot-link { border: none; background: none; color: var(--muted); font-size: 12px; font-weight: 500; padding: 4px 6px; }
.foot-link:hover { color: var(--accent); background: none; }
.foot-link .dot { width: 7px; height: 7px; border-radius: 50%; background: #7fa400; }
.foot-link .dot.mid { background: #d9a100; } .foot-link .dot.high { background: var(--danger); }
.foot-pop { position: fixed; inset: auto; margin: 0; width: min(340px, calc(100vw - 16px)); padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--fg); box-shadow: 0 12px 32px rgb(0 0 0 / .16); font-size: 12.5px; }
.foot-pop h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.foot-pop .note { margin: 6px 0 0; font-size: 11px; }
.foot-pop .steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.foot-pop .steps li { display: flex; gap: 10px; align-items: flex-start; }
.foot-pop .steps li > span { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 11px; display: grid; place-items: center; }
.foot-pop .steps p { margin: 1px 0 0; color: var(--muted); line-height: 1.45; }
.meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin-bottom: 10px; }
.meter b { font-weight: 500; font-variant-numeric: tabular-nums; }
.meter .bar { grid-column: 1 / -1; height: 5px; border-radius: 9px; background: #e6eaee; overflow: hidden; }
.meter .bar span { display: block; height: 100%; min-width: 2px; border-radius: 9px; background: #7fa400; }
.meter.mid .bar span { background: #d9a100; } .meter.high .bar span { background: var(--danger); }

/* List window opened from the KPI cards: as wide as the page content, ~80% of the screen tall */
dialog.modal.list { width: min(calc(var(--page-w) - 32px), calc(100vw - 24px)); height: 80vh; height: 80dvh; max-height: none; overflow: hidden; display: none; }
dialog.modal.list[open] { display: flex; flex-direction: column; }
.list-b { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 18px; }
.list-b .sheet thead th { position: sticky; top: 0; z-index: 1; }
.list-b tr[data-trip] { cursor: pointer; }
.modal-h .note { display: block; margin-top: 2px; }
.list-b .grid-wrap { overflow: visible; }

/* Column filters: each header is a button that opens a small panel (table-filter.js) */
.ft-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 5px; padding: 3px 6px; margin: 0 -6px; font-weight: 500; }
.ft-btn:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.ft-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sheet th.num .ft-btn { flex-direction: row-reverse; }
.ft-btn .ft-ico { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; color: var(--faint); opacity: 0; transition: opacity .12s; }
.ft-btn:hover .ft-ico, .ft-btn:focus-visible .ft-ico, .ft-btn[aria-expanded="true"] .ft-ico { opacity: 1; }
.ft-btn.on { color: var(--accent); }
.ft-btn.on svg { color: var(--accent) !important; }
.ft-btn.on .ft-ico { opacity: 1; fill: currentColor; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.filter-bar[hidden] { display: none; }
.ft-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 12px; line-height: 22px; padding: 0 2px 0 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.ft-chip b { font-weight: 600; }
.ft-chip button { border: none; background: none; color: inherit; font-size: 15px; line-height: 1; width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: pointer; }
.ft-chip button:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.ft-clear-all { font-size: 12px; }
.ft-pop { position: fixed; inset: auto; margin: 0; z-index: 1000; width: 264px; max-height: min(420px, calc(100dvh - 16px)); overflow: auto; padding: 10px; box-sizing: border-box;
  background: var(--surface, var(--bg)); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .16); font-size: 13px; animation: tip-in .12s ease-out; }
.ft-pop.ft-date { width: 280px; }
.ft-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ft-head .ft-acts { display: flex; gap: 10px; }
.ft-head .link { font-size: 12px; }
.ft-pop .ft-search { display: flex; margin-bottom: 6px; font-weight: 400; }
.ft-pop .ft-search input { width: 100%; }
.ft-list { display: grid; gap: 1px; max-height: 260px; overflow: auto; }
.ft-pop .ft-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 400; color: var(--fg); }
.ft-opt:hover { background: var(--head); }
.ft-pop .ft-opt input { flex: none; width: auto; margin: 0; padding: 0; accent-color: var(--accent); }
.ft-opt .ft-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-opt .ft-n { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.ft-empty { margin: 6px; }
.ft-sort { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.ft-sort button { font-size: 12px; padding: 6px 8px; }
.ft-sort button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.ft-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-weight: 600; }
.ft-cal-title { border: 1px solid transparent; background: none; font: inherit; font-weight: 600; color: inherit; padding: 3px 8px; border-radius: 6px; cursor: text; }
.ft-cal-title:hover { border-color: var(--line-strong); background: var(--bg); }
.ft-cal-jump { width: 11em; text-align: center; font-weight: 600; padding: 3px 8px; }
.ft-cal-h .icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ft-cal { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; touch-action: none; user-select: none; -webkit-user-select: none; }
.ft-cal .dow { text-align: center; font-size: 11px; color: var(--faint); padding: 4px 0; }
.ft-day { position: relative; border: none; background: none; height: 32px; padding: 0; font: inherit; font-size: 12px; color: var(--fg); border-radius: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.ft-day:hover { background: var(--head); border-radius: 6px; }
.ft-day.today { font-weight: 700; }
.ft-day.has::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.ft-day.in { background: var(--accent-soft); color: var(--accent); border-radius: 0; }
.ft-day.start { border-radius: 6px 0 0 6px; } .ft-day.end { border-radius: 0 6px 6px 0; } .ft-day.start.end { border-radius: 6px; }
.ft-day.start, .ft-day.end { background: var(--accent); color: #fff; }
.ft-day.start.has::after, .ft-day.end.has::after { background: #fff; }
.ft-hint { margin: 8px 0 0; text-align: center; }

/* Motion (app.js animateItems / setValue). Turned off when the system asks for reduced motion. */
@keyframes item-in { from { opacity: 0; transform: translateY(6px); } }
.anim-in { animation: item-in .28s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(min(var(--i, 0), 12) * 22ms); }
@keyframes row-new { from { background-color: var(--accent-soft); } }
tr.anim-new > td { animation: row-new 1.8s ease-out; }
@keyframes card-new { from { opacity: 0; transform: scale(.96); box-shadow: 0 0 0 3px var(--accent-soft); } }
.trip-card.anim-new { animation: card-new .5s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes value-pulse { 0% { color: var(--accent); transform: scale(1.08); } }
.anim-pulse { display: inline-block; animation: value-pulse .6s ease-out; transform-origin: left center; }
.ft-chip.anim-in { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) { .anim-in, .anim-new, .anim-pulse, tr.anim-new > td { animation: none !important; } }

/* Date fields (datepicker.js): a button that looks like an input and opens the shared calendar */
input.dp-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; opacity: 0; pointer-events: none; border: 0 !important; }
.dp-field { position: relative; display: block; width: 100%; }
.dp-field > .i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); cursor: pointer; }
.dp-text { padding-left: 31px; min-height: 34px; }
.dp-text::placeholder { color: var(--faint); }
.dp-text[aria-expanded="true"] { border-color: var(--focus); box-shadow: 0 0 0 2px var(--accent-soft); }
input.bad, input.bad:focus { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent); }
.dp-foot { display: flex; justify-content: flex-end; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.dp-foot .link { font-size: 12px; }

/* ---------- Phones (layout B): compact receipt lists, a ⋯ menu and a floating Add button ---------- */
.m-only, .ft-mrow { display: none; }
.m-list { display: none; }
@media (max-width: 640px) {
  .desk-only { display: none !important; }
  .m-only { display: revert; }
  .m-more.m-only, .fab.m-only { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .m-list { display: block; }
  .ft-mrow { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 10px; padding: 0 16px; }
  .toolbar, .summary { display: none; } /* the ⋯ menu, the one-line totals and the floating button replace them */
  .record > summary .hint { display: none; }
  .section-h { flex-wrap: nowrap; }
  .m-list { margin-bottom: 64px; } /* the floating button never covers the last receipt */
  .app-foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .foot-links { flex-wrap: nowrap; white-space: nowrap; }
}
.ft-mbtn { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 500; }
.ft-mbtn svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ft-mbtn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.m-sum { margin: -4px 0 0; color: var(--muted); font-size: 13px; }
.m-sum b { color: var(--fg); font-weight: 600; }
.m-sum .warn, .m-sum .warn b { color: #8a5a00; }
.m-more { width: 36px; height: 36px; padding: 0; flex: none; border-radius: 9px; }
.m-more .i { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.m-menu { position: fixed; inset: auto; margin: 0; width: min(260px, calc(100vw - 16px)); padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 30px rgb(0 0 0 / .16); animation: dd-in .12s ease-out; }
.m-menu button { all: unset; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.m-menu button[hidden] { display: none; }
.m-menu button:hover, .m-menu button:focus-visible { background: var(--head); }
.m-menu .i { width: 17px; height: 17px; margin-top: 1px; color: var(--muted); flex: none; }
.m-menu code { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.fab { position: fixed; z-index: 6; right: max(16px, env(safe-area-inset-right)); bottom: calc(56px + env(safe-area-inset-bottom)); border: none; border-radius: 999px; padding: 12px 18px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 8px 20px rgb(10 105 165 / .35); }
.fab .i { width: 16px; height: 16px; }
.m-day { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 2px 6px; }
.m-day:first-child { margin-top: 2px; }
.m-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.m-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-top: 1px solid var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-row:first-child { border-top: none; }
.m-row:active, .m-row:focus-visible { background: var(--hover); }
.m-ic { width: 34px; height: 34px; padding: 0; border-radius: 9px; display: grid; place-items: center; flex: none; }
.m-av { color: #fff; font-weight: 700; font-size: 13px; }
.m-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.m-mid { flex: 1; min-width: 0; display: grid; }
.m-v { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-end { display: grid; justify-items: end; flex: none; }
.m-amt { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.m-st { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.m-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7fa400; }
.m-st.warn::before { background: #d9a100; }
.m-empty { margin: 0; padding: 18px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.m-row.anim-new { animation: row-new 1.8s ease-out; }

@media (max-width: 640px) { #add-trip-top { white-space: nowrap; flex: none; } } /* "+ New trip" stays on one line */

/* While any window (dialog) is open, the page behind it stays still */
html:has(dialog[open]), html:has(dialog[open]) body { overflow: hidden; }
dialog { overscroll-behavior: contain; }
dialog * { overscroll-behavior: contain; } /* scrolling inside a window never hands off to the page */

/* Grouping screen (public/grouping.js): files waiting to become receipts */
.stack { display: grid; gap: 8px; }
.e-file + .row-actions { margin-top: 4px; }
.grp-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid #f1d98a; background: var(--p-yellow); color: var(--p-yellow-fg); border-radius: 8px; font-size: 13px; }
.grp-banner strong { font-weight: 600; }
.grp-banner button { background: #fff; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border: 1px solid #efb3be; background: #fbe4e8; color: var(--danger); border-radius: 8px; font-size: 13px; }
.notice span { flex: 1; }
.notice .icon-btn { color: inherit; }
dialog.modal.grouping { width: min(calc(var(--page-w) - 32px), calc(100vw - 24px)); max-width: none; height: calc(100vh - 32px); height: calc(100dvh - 32px); max-height: none; overflow: hidden; display: none; }
dialog.modal.grouping[open] { display: flex; flex-direction: column; }
.grp-body { flex: 1; overflow: auto; background: var(--canvas); }
.grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gcard { position: relative; background: var(--surface); border: 2px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; display: grid; grid-template-rows: 1fr auto; aspect-ratio: 3 / 4; }
.gcard:hover { border-color: var(--line-strong); }
.gcard.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.gcard:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gthumb { min-height: 0; display: flex; align-items: center; justify-content: center; background: #f3f4f6; overflow: hidden; }
.gthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gpdf { display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.gpdf .i { width: 32px; height: 32px; }
.gbadge { position: absolute; top: 6px; left: 6px; font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.gcheck { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgb(0 0 0 / .35); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.gcard.sel .gcheck { background: var(--accent); }
.gzoom { position: absolute; right: 4px; bottom: 44px; background: rgb(255 255 255 / .9); color: var(--fg); box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.gzoom .i { width: 16px; height: 16px; }
.gname { padding: 6px 8px; font-size: 12px; display: grid; line-height: 1.3; border-top: 1px solid var(--line); background: var(--surface); }
.gname span, .gname small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gname small { color: var(--muted); font-size: 11px; }
.grp-f { flex-wrap: wrap; }
.grp-f .msg { max-width: 100%; }
/* Full-screen viewer */
dialog.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: none; border-radius: 0; background: #111; color: #fff; display: none; grid-template-rows: auto 1fr auto; }
dialog.lightbox[open] { display: grid; }
dialog.lightbox::backdrop { background: #111; }
.lb-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 13px; }
.lb-top .lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.lb-top .icon-btn { color: #fff; font-size: 24px; }
.lb-top .icon-btn:hover { background: rgb(255 255 255 / .15); color: #fff; }
.lb-stage { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; }
.lb-stage iframe { width: 100%; height: 100%; border: none; background: #fff; }
.lb-stage .note { color: #ccc; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: none; border-radius: 8px; background: rgb(255 255 255 / .12); color: #fff; }
.lb-nav:hover { background: rgb(255 255 255 / .25); }
.lb-nav:disabled { opacity: .2; }
.lb-nav.prev { left: 8px; } .lb-nav.next { right: 8px; }
.lb-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.lb-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #1c1c1e; }
.lb-bar button { background: #2c2c2e; border-color: #3a3a3c; color: #fff; }
.lb-bar button:hover { background: #3a3a3c; }
.lb-bar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.lb-bar .note { color: #bbb; margin-left: auto; }
@media (max-width: 640px) {
  dialog.modal.grouping { width: 100vw; height: 100vh; height: 100dvh; margin: 0; border: none; border-radius: 0; }
  .grp-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
  .gzoom { bottom: 40px; }
  .grp-f { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .grp-f #grp-sel { width: 100%; }
  .lb-nav { display: none; } /* swipe instead */
  .lb-bar .note { width: 100%; margin: 0; }
}

/* ---------- sharing ---------- */
.shared-chip { cursor: pointer; font-size: 12px; line-height: 22px; padding: 0 10px; }
.shared-only { display: none; }
body.shared .shared-only { display: grid; }
body.shared th.shared-only, body.shared td.shared-only { display: table-cell; }
body.viewer #toggle-add, body.viewer #add-panel, body.viewer #fab, body.viewer #selbar, body.viewer #sel-all, body.viewer .sheet td.rn input, body.viewer .divider-v { display: none !important; }
.invite { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.invite .grow { flex: 1 1 220px; }
.invite button { height: 36px; }
.members { display: grid; gap: 4px; margin-top: 14px; }
.member { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--line); }
.member .m-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; background: var(--p-blue, #d8e9f5); color: var(--p-blue-fg, #0a4a73); object-fit: cover; flex: none; }
.member .m-mid { flex: 1; min-width: 0; display: grid; }
.member .m-v { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member .dd-btn.role { width: 130px; flex: none; font-size: 13px; padding: 5px 8px; }
.trip-card.guest .chip.role { position: absolute; top: 12px; right: 12px; z-index: 2; }
.shared-h { margin-top: 10px; }
.shared-h h2 { margin: 0; font-size: 17px; }
.shared-h .sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
#e-who { margin: 0; }
/* Edit window: fields line up at the top even when the Receipt file column is taller (file name plus its two links). */
#edit .modal-b.grid { align-items: start; }
#edit .modal-b.grid > label, #edit .modal-b.grid > .field { align-content: start; }
.e-file .attach a { overflow-wrap: anywhere; }

/* Share window: the trip's public link and access code */
.ls { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--accent-soft), var(--surface) 70px); padding: 14px; display: grid; gap: 12px; margin-bottom: 4px; }
.ls.off { background: var(--canvas); }
.ls-h { display: flex; align-items: flex-start; gap: 12px; }
.ls-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.ls-ic .i { width: 18px; height: 18px; }
.ls.off .ls-ic { background: var(--line-strong); }
.ls-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ls-t b { font-size: 14px; font-weight: 600; }
.ls-b { display: grid; gap: 12px; }
.ls-f { display: grid; gap: 5px; }
.ls-f .lab { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ls-box { display: flex; align-items: center; gap: 6px; min-width: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px 4px 4px 11px; }
.ls-url { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.ls-code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: .14em; color: var(--fg); padding: 4px 0; }
.ls-copy { flex: none; padding: 6px 12px; }
.ls-regen { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ls-confirm { display: grid; gap: 8px; background: #fff7e0; border: 1px solid #f0d78a; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.ls-cbtns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ls-send { width: 100%; padding: 10px 14px; font-size: 14px; border-radius: 8px; }
.ls-tip { margin: -4px 0 0; }
.ls-flash { animation: ls-flash 1s ease-out; }
@keyframes ls-flash { 0% { box-shadow: 0 0 0 0 var(--accent); background: var(--accent-soft); } 100% { box-shadow: 0 0 0 6px transparent; } }
.ls-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--muted); font-size: 12px; }
.ls-or::before, .ls-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* On/off switch */
.switch { position: relative; flex: none; width: 40px; height: 24px; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .ls { padding: 14px 12px; }
  .ls-code { font-size: 24px; }
  .ls-copy { padding: 9px 14px; font-size: 14px; } /* a comfortable thumb target */
  .ls-send { padding: 13px 14px; font-size: 15px; }
  .switch { width: 48px; height: 28px; } .switch span::after { width: 22px; height: 22px; } .switch input:checked + span::after { transform: translateX(20px); }
}

/* Windows take the focus themselves when they open (see app.js); no ring around the whole window. */
dialog:focus, dialog:focus-visible { outline: none; }

/* ---------- Public trip page (/s/<link>): code gate and read-only trip ---------- */
.pub .appbar { position: sticky; top: 0; z-index: 8; padding-top: env(safe-area-inset-top); }
.pub-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; background: rgb(255 255 255 / .16); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pub-badge .i { width: 14px; height: 14px; }
.pub-loading { color: var(--muted); text-align: center; margin: 18vh 0; }
/* The gate */
.gate { display: grid; justify-items: center; padding: 8vh 0 32px; }
.gate-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px 22px; display: grid; gap: 10px; text-align: center; box-shadow: 0 12px 40px rgb(10 105 165 / .08); }
.gate-ic { justify-self: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 4px; }
.gate-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gate-ic.muted { background: var(--head); color: var(--muted); }
.gate h1 { font-size: 22px; text-wrap: balance; }
.gate-sub { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.gate-lab { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; justify-self: start; }
.gate-code { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: .2em; text-align: center; padding: 12px 10px; border-radius: 10px; border-width: 1.5px; text-transform: uppercase; }
.gate-code::placeholder { color: var(--line-strong); letter-spacing: .2em; }
.gate-code.bad { border-color: var(--danger); box-shadow: 0 0 0 3px #fbe4e8; animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.gate-msg { margin: 0; min-height: 0; color: var(--danger); font-size: 13px; }
.gate-msg:empty { display: none; }
.gate-go { padding: 12px; font-size: 15px; border-radius: 10px; margin-top: 4px; }
.gate-foot { margin: 6px 0 0; color: var(--faint); font-size: 12px; line-height: 1.5; }
/* The trip */
.pub-main { padding-bottom: 0; }
.pub-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 6px 0 14px; }
.pub-hero-t { min-width: 0; display: grid; gap: 4px; }
.pub-hero h1 { font-size: 26px; text-wrap: balance; }
.pub-sub { margin: 0; color: var(--muted); font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.pub-sub b { color: var(--fg); font-weight: 600; }
.dot-sep { margin: 0 7px; color: var(--faint); }
.pub-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pub-dl { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: row dense; gap: 10px; margin-bottom: 14px; }
.pub-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.pub-stat .k { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.pub-stat .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pub-stat.warn .v { color: #8a5a00; }
.pub-stat.rates-card .v { font-size: 13px; font-weight: 400; }
.pub-filters { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.pub-filters .n { color: var(--faint); font-weight: 400; }
.pub-filters .on .n { color: inherit; opacity: .7; }
.pub-sheet tbody tr { cursor: pointer; }
body:not(.shared) .by-col { display: none; }
.pub-foot { position: static; margin-top: 18px; }
/* One receipt */
.rc-amt { display: grid; gap: 2px; margin-bottom: 14px; }
.rc-amt .big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rc-amt .eur { color: var(--muted); font-size: 13px; }
.rc-fields { margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 16px; }
.rc-fields div { display: grid; gap: 3px; min-width: 0; }
.rc-fields dt { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rc-fields dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.rc-file { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.rc-img { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--canvas); max-height: 46vh; }
.rc-img img { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: contain; }
.rc-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-btns .btn { flex: 1 1 140px; padding: 10px 14px; font-size: 14px; border-radius: 8px; }
.rc-name { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .gate { padding-top: 4vh; }
  .gate-card { border: none; box-shadow: none; background: transparent; padding: 12px 4px; }
  .gate-code { font-size: 28px; padding: 14px 8px; }
  .gate-go { padding: 15px; font-size: 16px; }
  .pub-hero { align-items: flex-start; flex-direction: column; margin-bottom: 12px; }
  .pub-hero h1 { font-size: 24px; }
  .pub-acts { width: 100%; justify-content: space-between; }
  .pub-dl button { padding: 8px 11px; }
  #msg:not(:empty) { margin-top: 10px; }
  .pub-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pub-stat { padding: 10px 12px; }
  .pub-stat.span2, .pub-stat.rates-card { grid-column: span 2; }
  .pub-filters { margin: 0 -16px 12px; padding: 0 16px; }
  .pub .m-list { margin-bottom: 0; }
  .pub-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* The receipt comes up from the bottom of the screen */
  dialog.modal.pub-rc { width: 100vw; max-width: 100vw; margin: auto 0 0; border: none; border-radius: 16px 16px 0 0; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); }
  dialog.modal.pub-rc[open] { animation: sheet-up .2s ease-out; }
  .pub-rc .modal-h { position: sticky; top: 0; background: var(--surface); z-index: 1; }
  .pub-rc .modal-h::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line-strong); }
  .rc-fields { grid-template-columns: 1fr 1fr; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } }

/* App switcher (public/switcher.js): grid button left of the brand, and the sheet with Money and Receipts */
.app-switch { width: 34px; height: 34px; padding: 0; border: none; border-radius: 6px; background: rgb(255 255 255 / .18); color: #fff; flex: none; }
.app-switch:hover { background: rgb(255 255 255 / .28); }
.app-switch svg.i { width: 18px; height: 18px; }
dialog.switcher { padding: 0; width: min(520px, calc(100vw - 24px)); }
dialog.switcher[open] { animation: pop .14s ease-out; }
.sw-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.sw-head h2 { font-size: 17px; margin: 0; }
.sw-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 16px 4px; }
.sw-tile { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--fg); text-decoration: none; background: var(--surface); }
.sw-tile:hover { border-color: var(--accent); background: var(--hover); }
.sw-tile.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sw-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.sw-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sw-ic.money { background: #6f8f00; } .sw-ic.receipts { background: var(--accent); } .sw-ic.mealy { background: #fff; border: 1px solid var(--line); overflow: hidden; } .sw-ic.mealy img { width: 100%; height: 100%; object-fit: cover; }
.sw-tile.sw-phone { display: none; } /* Mealy: phone only */
.sw-t { display: grid; gap: 2px; }
.sw-t b { font-size: 15px; } .sw-t > span { color: var(--muted); font-size: 12px; }
.sw-t .sw-s { color: var(--fg); font-weight: 500; margin-top: 4px; }
.sw-foot { padding: 6px 16px 14px; margin: 0; }
@media (max-width: 560px) {
  dialog.switcher { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .sw-tiles { grid-template-columns: 1fr; }
  .sw-tile, .sw-tile.sw-phone { display: grid; grid-template-columns: auto 1fr; align-items: center; min-height: 72px; }
}