/* Firstline Travel. The look follows the Firstline Travel design system, built from firstlinesolutions.org, in soft tones:
   warm off-white and charcoal instead of pure white and black, a calm brick red, Montserrat in sentence case at
   400 for reading, 500 for controls and 600 for titles, square shapes, cut-corner primary buttons and solid selected states.
   Red is for action and identity. Status uses good, warn and critical, never red.
   An org's accent color replaces the red tokens (see applyBrand in core.js). */

@font-face { font-family: Montserrat; src: url(fonts/montserrat-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Montserrat; src: url(fonts/montserrat-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Montserrat; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Montserrat; src: url(fonts/montserrat-latin-700-normal.woff2) format("woff2"); font-weight: 600 900; font-display: swap; }

:root {
  --ink: #2a2e35; --ink-muted: #5d636d;
  --ground: #f8f7f4; --ground-alt: #f0eeea; --band: #e6e3de; --line: #dfdcd6; --line-strong: #878b92; --field: #ffffff;
  --header: #efede9; --on-header: #2a2e35; --on-header-muted: #5d636d; --header-rule: #dcd9d3; --header-hover: #e4e1dc;
  --inverse: #3d424a; --on-inverse: #f1efea;
  --red: #b5302f; --red-deep: #972828; --red-ink: #a42b2a; --on-red: #ffffff;
  --good: #2e6a43; --warn: #8a5410; --critical: #9e2f2f; --on-warn: #ffffff;
  --shadow-card: 0 1px 2px rgba(20, 22, 26, 0.06), 0 6px 16px rgba(20, 22, 26, 0.08);
  --c-airfare: #1e293b; --c-lodging: #2563eb; --c-car: #78716c; --c-fuel: #d97706; --c-ground: #0d9488; --c-perDiem: #65a30d; --c-other: #92400e;
  --font: Montserrat, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --logo-bg: #ffffff;
  --cut: 6px; --bar-w: 64px; --bar-h: 5px; --rule: 1px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e3e1dc; --ink-muted: #a2a5ab;
    --ground: #1d1f23; --ground-alt: #24262b; --band: #2e3036; --line: #34373d; --line-strong: #72767e; --field: #24262b;
    --header: #18191d; --on-header: #e3e1dc; --on-header-muted: #a2a5ab; --header-rule: #2c2e33; --header-hover: #24262b;
    --inverse: #45484f; --on-inverse: #f1efea;
    --red: #c0403d; --red-deep: #a83633; --red-ink: #f0928c; --on-red: #ffffff;
    --good: #74c08f; --warn: #e2ac57; --critical: #f0a19c; --on-warn: #1d1f23;
    --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.45); --logo-bg: #ecebe7;
    --c-airfare: #e2e8f0; --c-lodging: #60a5fa; --c-car: #a8a29e; --c-fuel: #fbbf24; --c-ground: #2dd4bf; --c-perDiem: #a3e635; --c-other: #d6a77a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e3e1dc; --ink-muted: #a2a5ab;
  --ground: #1d1f23; --ground-alt: #24262b; --band: #2e3036; --line: #34373d; --line-strong: #72767e; --field: #24262b;
  --header: #18191d; --on-header: #e3e1dc; --on-header-muted: #a2a5ab; --header-rule: #2c2e33; --header-hover: #24262b;
  --inverse: #45484f; --on-inverse: #f1efea;
  --red: #c0403d; --red-deep: #a83633; --red-ink: #f0928c; --on-red: #ffffff;
  --good: #74c08f; --warn: #e2ac57; --critical: #f0a19c; --on-warn: #1d1f23;
  --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.45); --logo-bg: #ecebe7;
  --c-airfare: #e2e8f0; --c-lodging: #60a5fa; --c-car: #a8a29e; --c-fuel: #fbbf24; --c-ground: #2dd4bf; --c-perDiem: #a3e635; --c-other: #d6a77a;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 400 15px/1.5 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; text-transform: none; text-wrap: balance; color: var(--ink); }
h1 { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.005em; }
h2 { font-size: 20px; line-height: 1.2; font-weight: 600; }
h3 { font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: 0; }
/* the slanted red bar under page and section titles */
h1::after, h2::after { content: ""; display: block; inline-size: var(--bar-w); block-size: var(--bar-h); margin: 10px 0 0 -6px; background: var(--red); transform: skewX(-30deg); }
/* the slash stays on page titles only; section headings carry no accent line */
h2::after { display: none; }
h1.plain::after, h2.plain::after, .opt h2::after, .callout h2::after, .verdict-box h2::after, .panel-head h2::after, .gate h2::after { display: none; }
p { margin: 0; }
a { color: var(--red-ink); text-underline-offset: 3px; }
a:hover { color: var(--red-deep); }
.mono { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.muted { color: var(--ink-muted); }
.small { font-size: 13px; }
.num { text-align: right; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
::selection { background: var(--red); color: var(--on-red); }

/* ---------- controls: square ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--field); border: 1px solid var(--line-strong); border-radius: 0; padding: 8px 10px; min-height: 40px; inline-size: 100%; }
textarea { min-height: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--red); inline-size: 18px; block-size: 18px; min-height: 0; margin: 0; }
input[type="color"] { padding: 2px; }
input:disabled, select:disabled, textarea:disabled { background: var(--ground-alt); color: var(--ink-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
button:focus-visible, a:focus-visible, tr[tabindex]:focus-visible, summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
label { display: grid; gap: 6px; align-content: start; }
label > span:first-child, .lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); cursor: pointer; }
.check > span:first-child { all: unset; }

/* buttons: red with cut corners for the one action a view exists for, dark for a strong second, quiet for the rest */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px; border: 0; border-radius: 0;
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink);
  font: 500 13px/1.1 var(--font); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--band); color: var(--ink); }
.btn.primary { background: var(--red); color: var(--on-red); box-shadow: none; padding-inline: 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.btn.primary:hover { background: var(--red-deep); color: var(--on-red); }
.btn.dark { background: var(--inverse); color: var(--on-inverse); box-shadow: none; }
.btn.dark:hover { background: color-mix(in oklch, var(--inverse) 85%, black); color: var(--on-inverse); }
.btn.danger { color: var(--critical); box-shadow: inset 0 0 0 2px var(--critical); }
.btn.danger:hover { background: var(--band); color: var(--critical); }
.btn.sm { min-height: 32px; padding: 6px 12px; font-size: 12px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--band); color: var(--ink-muted); box-shadow: none; cursor: not-allowed; }
.btn.link { background: none; box-shadow: none; padding: 0; min-height: 0; color: inherit; text-decoration: underline; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: inherit; }
.btn.link:hover { background: none; color: inherit; }

/* segmented tabs: 2px ink frame, selected is solid red */
.seg { display: inline-flex; flex-wrap: wrap; justify-self: start; align-self: start; box-shadow: inset 0 0 0 2px var(--ink); }
.seg > button, .seg > a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 0; background: transparent; color: var(--ink);
  font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; white-space: nowrap; }
.seg > * + * { box-shadow: inset 2px 0 0 var(--ink); }
.seg > button:hover, .seg > a:hover { background: var(--band); color: var(--ink); }
.seg > [aria-pressed="true"], .seg > [aria-current="page"] { background: var(--red); color: var(--on-red); }
.seg > [aria-pressed="true"]:hover, .seg > [aria-current="page"]:hover { background: var(--red-deep); color: var(--on-red); }
.seg .count { margin-inline-start: 8px; }

/* (i) tooltips: help lives here, not in text under headings */
.tipwrap { position: relative; display: inline-flex; text-transform: none; letter-spacing: 0; font-weight: 400; }
.info { inline-size: 16px; block-size: 16px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: none; color: var(--ink-muted); font: 500 12px/1 var(--font); cursor: help; flex: none; }
[role="tooltip"] { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: -8px; z-index: 40; inline-size: max-content; max-inline-size: 36ch; padding: 8px 10px;
  background: var(--inverse); color: var(--on-inverse); font: 400 13px/1.45 var(--font); text-transform: none; letter-spacing: 0; display: none; box-shadow: var(--shadow-card); }
.info:hover + [role="tooltip"], .info:focus-visible + [role="tooltip"] { display: block; }
.info[data-dismissed] + [role="tooltip"] { display: none; }
.toolbar [role="tooltip"], .actions [role="tooltip"], th [role="tooltip"] { inset-inline-start: auto; inset-inline-end: -8px; }

/* ---------- shell ---------- */
.top { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: stretch; gap: 0; min-block-size: 64px; padding-inline: 24px; background: var(--header); color: var(--on-header); }
.brand { display: inline-flex; align-items: center; gap: 12px; padding-inline-end: 24px; color: var(--on-header); text-decoration: none; flex: none; }
.brand:hover { color: var(--on-header); }
.brand .wordmark { block-size: 34px; inline-size: auto; display: block; }
.brand .logo-tile { display: inline-flex; align-items: center; block-size: 40px; padding: 4px 8px; background: #ffffff; }
.brand .logo-tile img { block-size: 32px; inline-size: auto; max-inline-size: 150px; object-fit: contain; display: block; }
.brand .title { font: 600 16px/1.1 var(--font); text-transform: none; letter-spacing: 0; }
.brand .suffix { padding-inline-start: 12px; border-inline-start: 1px solid var(--header-rule); font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--on-header-muted); }
.nav { display: flex; align-items: stretch; flex: 1; min-inline-size: 0; }
.nav a, .admin-links a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-inline: 16px; color: var(--on-header); text-decoration: none;
  font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.nav a + a { box-shadow: inset 1px 0 0 var(--header-rule); }
.nav a:hover, .admin-links a:hover { color: var(--on-header); background: var(--header-hover); }
.nav a[aria-current="page"], .admin-links a[aria-current="page"] { background: var(--red); color: var(--on-red); }
.count { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: 5px; background: var(--on-header); color: var(--header); font: 600 11px/1 var(--font); letter-spacing: 0; }
a[aria-current="page"] .count { background: var(--on-red); color: var(--red); }
.top-end { display: flex; align-items: stretch; margin-inline-start: auto; }
.admin-links { display: flex; align-items: stretch; box-shadow: inset 1px 0 0 var(--header-rule); }
.me { position: relative; display: flex; align-items: stretch; box-shadow: inset 1px 0 0 var(--header-rule); }
.me-btn { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 0 16px; border: 0; background: none; color: var(--on-header); cursor: pointer; font: 600 13px/1.2 var(--font); text-align: start; }
.me-btn:hover { background: var(--header-hover); }
.me-btn .who { display: grid; }
.me-btn .who small { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--on-header-muted); }
.initials { display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; background: var(--red); color: var(--on-red); font: 600 13px/1 var(--font); letter-spacing: 0; flex: none; }
.caret { inline-size: 8px; block-size: 8px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-inline: 2px 4px; }
.menu { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: 50; inline-size: 300px; max-block-size: calc(100vh - 80px); overflow-y: auto;
  background: var(--ground); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--shadow-card); display: grid; }
.menu-head { padding: 16px; background: var(--ground-alt); border-block-end: 1px solid var(--line); display: grid; gap: 2px; }
.menu-head strong { font-size: 15px; }
.menu-group { display: grid; padding-block: 6px; border-block-end: 1px solid var(--line); }
.menu-group:last-child { border-block-end: 0; }
.menu-label { padding: 8px 16px 4px; font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border: 0; background: none; color: var(--ink); font: 600 14px/1.3 var(--font); text-align: start; text-decoration: none; cursor: pointer; inline-size: 100%; }
.menu-item:hover { background: var(--band); color: var(--ink); }
.menu-item[aria-current="true"] { background: var(--red); color: var(--on-red); }
.menu-item .small { font-weight: 500; }
.menu .seg { margin: 6px 16px 10px; }
.menu-btn { display: none; align-items: center; gap: 10px; margin-inline-start: auto; padding: 0 0 0 16px; border: 0; background: none; color: var(--on-header); font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; }
.burger { display: grid; gap: 4px; }
.burger i { display: block; inline-size: 20px; block-size: 2px; background: currentColor; }
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 24px; font-size: 13px; }
.support-strip { background: var(--warn); color: var(--on-warn); font-weight: 600; }
.support-strip .btn.link { color: inherit; }
.demo-strip { background: var(--ground-alt); border-block-end: 1px solid var(--line); color: var(--ink-muted); }
main { padding: 32px 32px 64px; max-inline-size: 1440px; margin-inline: auto; }
.powered { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 18px 24px; background: var(--ground-alt); color: var(--ink-muted); font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; }
.powered img { block-size: 18px; inline-size: auto; }

/* page heading row with tabs under it */
.page-head { display: grid; gap: 18px; margin-block-end: 28px; }
.page-head .row-end { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.toolbar { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-block-end: 16px; flex-wrap: wrap; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar > *, .actions > * { min-inline-size: 0; }
.err { color: var(--critical); font-size: 14px; font-weight: 600; }
.note { font-size: 13px; color: var(--ink-muted); }
.saved { font-size: 13px; font-weight: 600; color: var(--good); }
.empty { padding: 32px 0; color: var(--ink-muted); }
.lede { font-size: 17px; line-height: 1.55; max-inline-size: 78ch; }
.lede strong { font-weight: 600; }

/* status: a word with a square in the status color */
.status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--ground);
  color: var(--ink); font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.status::before { content: ""; inline-size: 8px; block-size: 8px; background: var(--ink-muted); flex: none; }
.status.booked::before, .status.ok::before { background: var(--good); }
.status.pending::before, .status.approved::before, .status.planning::before, .status.booking::before, .status.review::before { background: var(--warn); transform: rotate(45deg); }
.status.denied::before, .status.failed::before, .status.flagged::before { background: var(--critical); }
.status.canceled { color: var(--ink-muted); }
.status.canceled::before { block-size: 2px; }
.status.proposed::before { background: var(--ink); border-radius: 50%; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; max-inline-size: 100%; }
table { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: start; padding: 9px 12px; background: var(--band); color: var(--ink); font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: bottom; }
td { padding: 10px 12px; border-block-end: 1px solid var(--line); vertical-align: middle; }
th.num, td.num { text-align: right; }
tbody tr[tabindex] { cursor: pointer; }
tbody tr[tabindex]:hover { background: var(--ground-alt); }
tbody tr[aria-selected="true"], tbody tr[aria-selected="true"]:hover { background: var(--red); color: var(--on-red); }
tbody tr[aria-selected="true"] .muted, tbody tr[aria-selected="true"] a { color: var(--on-red); }
tfoot th, tfoot td { background: none; border-block-start: var(--rule) solid var(--line); font: 600 14px/1.3 var(--font); letter-spacing: 0; text-transform: none; padding-block: 12px; }
tr.off td { color: var(--ink-muted); }
td .actions { flex-wrap: nowrap; justify-content: flex-end; }
.dash { color: var(--ink-muted); }

/* ---------- plan a trip: search and draft ---------- */
.book { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.book.solo { grid-template-columns: minmax(0, 1fr); }
.search { display: grid; gap: 18px; padding-block-end: 24px; border-block-end: var(--rule) solid var(--ink); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; align-items: end; }
.results { margin-block-start: 8px; }
.results-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 20px 10px; }
.results-head h2::after { display: none; }
.row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(170px, 1.4fr) minmax(100px, .6fr) minmax(150px, 1fr) auto; gap: 18px; align-items: center; padding: 14px 8px; border-block-end: 1px solid var(--line); }
.row:hover { background: var(--ground-alt); }
.row.added { background: var(--band); }
.times { font-size: 17px; font-weight: 600; }
.times .leg + .leg { margin-block-start: 6px; }
.price { font-size: 18px; font-weight: 600; text-align: right; }
.policy { font-size: 13px; font-weight: 600; }
.policy.over { color: var(--warn); }
.policy.ok { color: var(--ink-muted); font-weight: 500; }
.draft { position: sticky; inset-block-start: 88px; display: grid; gap: 16px; padding: 24px; background: var(--ground-alt); }
.draft h2 { font-size: 18px; }
.seglist { display: grid; }
.seg-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding-block: 12px; border-block-end: 1px solid var(--line); }
.seg-item .what { font-weight: 600; }
.seg-item .x { grid-row: span 2; align-self: center; inline-size: 30px; block-size: 30px; border: 0; background: none; color: var(--ink-muted); cursor: pointer; font-size: 20px; line-height: 1; }
.seg-item .x:hover { background: var(--band); color: var(--ink); }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-block-start: 12px; border-block-start: var(--rule) solid var(--ink); font-size: 20px; font-weight: 600; }
.verdict { font-size: 14px; font-weight: 600; }
.verdict.over { color: var(--warn); }
.draft form { display: grid; gap: 14px; }

/* plan for yourself */
.travel { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
/* With the planner folded away, plans in progress use the whole width. */
.travel.folded { grid-template-columns: minmax(0, 1fr); }
.travel.folded .seglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; }
.plan-form { display: grid; gap: 22px; }
.needs { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.aside { display: grid; gap: 4px; align-content: start; }
.aside h2 { font-size: 16px; margin-block-end: 8px; }
a.planlink { display: grid; gap: 4px; padding: 12px 0; border-block-end: 1px solid var(--line); color: inherit; text-decoration: none; }
a.planlink .what { font-weight: 600; }
a.planlink:hover { background: var(--ground-alt); color: inherit; }
.plan-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; margin-block-end: 18px; background: var(--inverse); color: var(--on-inverse); font-weight: 500; }
.part { display: grid; gap: 14px; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
/* cards are only for things a person chooses between */
.opt { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); background: var(--ground); box-shadow: var(--shadow-card); }
.opt.chosen { background: var(--red); border-color: var(--red); color: var(--on-red); }
.opt.chosen .muted { color: var(--on-red); opacity: 0.9; }
.opt-main { font-weight: 600; display: grid; gap: 6px; }
.opt-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-block-start: 6px; font-size: 18px; font-weight: 600; }
.opt-tags { display: flex; flex-wrap: wrap; gap: 4px; min-block-size: 22px; }
.tag { display: inline-flex; align-items: center; padding: 2px 7px; background: var(--band); color: var(--ink); font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: none; }
.tag.on { background: var(--ground); color: var(--red-ink); }
.tag.warn { background: var(--warn); color: var(--on-warn); }
.opt.chosen .tag { background: var(--field); color: var(--ink); }
.opt.chosen .tag.on { color: var(--red); }

/* reasons a trip needs approval or review: a gray band with a status label, never a colored side bar */
.callout, .verdict-box { display: grid; gap: 8px; padding: 16px 18px; background: var(--ground-alt); }
.callout h2, .verdict-box h2 { font-size: 13px; letter-spacing: 0; }
.callout ul, .verdict-box ul { margin: 0; padding-inline-start: 18px; font-size: 14px; }
.verdict-box.approve .vlabel, .callout .vlabel { color: var(--warn); }
.vlabel { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--font); letter-spacing: 0; text-transform: none; }
.vlabel::before { content: ""; inline-size: 9px; block-size: 9px; background: currentColor; transform: rotate(45deg); }
.verdict-box.none .vlabel { color: var(--good); }
.verdict-box.none .vlabel::before { transform: none; }

/* ---------- trips, approvals, panels ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.split.open { grid-template-columns: minmax(0, 1fr) 440px; }
.panel { display: grid; gap: 18px; align-content: start; margin-inline-start: 32px; padding: 24px; background: var(--ground-alt); position: sticky; inset-block-start: 88px; max-block-size: calc(100vh - 110px); overflow-y: auto; }
.panel-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.panel-head h2 { font-size: 18px; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
dl.facts dt { font: 500 12px/1.6 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
dl.facts dd { margin: 0; }
.kind { font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; }
.section-block { display: grid; gap: 14px; }
.stack-gap { display: grid; gap: 40px; }

/* ---------- spend and charts ---------- */
.spend { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
.spend > * { min-inline-size: 0; }
.chart { display: grid; gap: 12px; }
.chart svg { display: block; inline-size: 100%; max-inline-size: 1100px; block-size: auto; }
.chart .axis { fill: var(--ink-muted); font: 600 12px var(--font); }
.chart .grid { stroke: var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.legend i { display: inline-block; inline-size: 10px; block-size: 10px; margin-inline-end: 7px; vertical-align: -1px; }
.bars { display: grid; grid-template-columns: max-content 1fr max-content; gap: 8px 14px; align-items: center; font-size: 14px; }
.bars .bar { block-size: 14px; background: var(--ink); }
.stack { display: flex; block-size: 14px; background: var(--band); }
.stack span { display: block; block-size: 100%; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border-block: var(--rule) solid var(--ink); }
.figures > div { padding: 16px 18px; display: grid; gap: 4px; }
.figures > div + div { box-shadow: inset 1px 0 0 var(--line); }
.big { font-size: 26px; font-weight: 600; line-height: 1.1; }

/* ---------- requests and plans ---------- */
.proposal { display: grid; gap: 32px; max-inline-size: 1200px; }
.proposal section { display: grid; gap: 14px; min-inline-size: 0; align-content: start; }
.sw { display: inline-block; inline-size: 9px; block-size: 9px; margin-inline-end: 8px; vertical-align: 0; }
table.lines { table-layout: fixed; min-inline-size: 760px; }
table.lines td { padding-block: 10px; vertical-align: top; }
table.lines th:nth-child(1) { inline-size: 26%; } table.lines th:nth-child(2) { inline-size: 33%; }
table.lines th:nth-child(3) { inline-size: 9%; } table.lines th:nth-child(4), table.lines th:nth-child(5), table.lines th:nth-child(7) { inline-size: 9.5%; }
table.lines th:nth-child(6) { inline-size: 5%; }
pre.code { margin: 0; padding: 14px 16px; background: var(--inverse); color: var(--on-inverse); font: 13px/1.6 var(--mono); overflow-x: auto; }
table.report th { white-space: normal; min-inline-size: 70px; }
table.report td { padding-block: 8px; vertical-align: top; white-space: nowrap; }
table.report td.small { white-space: normal; min-inline-size: 220px; }
details > summary { cursor: pointer; }
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; padding-block-end: 20px; border-block-end: 1px solid var(--line); }
.filters label { min-inline-size: 150px; }

/* ---------- forms ---------- */
.settings { display: grid; gap: 40px; max-inline-size: 900px; }
.settings section, .manage-body section { display: grid; gap: 16px; padding-block-end: 36px; border-block-end: 1px solid var(--line); min-inline-size: 0; }
.settings section:last-child, .manage-body section:last-child { border-block-end: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 16px; align-items: end; }
.span2 { grid-column: span 2; }
.full { grid-column: 1 / -1; }
fieldset.events { border: 2px solid var(--ink); padding: 14px 16px; margin: 0; display: grid; gap: 12px 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
fieldset.events legend { padding: 0 6px; font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; }

/* ---------- managing an org and the site ---------- */
.manage { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 40px; align-items: start; }
.manage-head { grid-column: 1 / -1; display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-block-end: 18px; }
.subnav { display: grid; gap: 0; position: sticky; inset-block-start: 88px; box-shadow: inset 2px 0 0 var(--ink); }
.subnav a { padding: 11px 16px; color: var(--ink); text-decoration: none; font: 500 12px/1.2 var(--font); letter-spacing: 0; text-transform: none; }
.subnav a:hover { background: var(--band); color: var(--ink); }
.subnav a[aria-current="page"] { background: var(--red); color: var(--on-red); }
.manage-body { display: grid; gap: 36px; min-inline-size: 0; max-inline-size: 1000px; }
.swatch { display: inline-block; inline-size: 12px; block-size: 12px; margin-inline-end: 10px; vertical-align: -1px; }
.person-edit td { background: var(--ground-alt); }
.brand-preview { max-inline-size: 560px; box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.brand-preview .pv-top { display: flex; align-items: stretch; gap: 0; min-block-size: 48px; padding-inline: 14px; background: var(--header); color: var(--on-header); font: 600 13px/1 var(--font); text-transform: none; }
.brand-preview .pv-top > * { display: inline-flex; align-items: center; padding-inline: 12px; }
.brand-preview .pv-top .logo-tile { background: #fff; padding: 4px 6px; margin-block: 8px; }
.brand-preview .pv-top .logo-tile img { block-size: 22px; inline-size: auto; max-inline-size: 100px; }
.brand-preview .pv-tab { background: var(--pv); color: var(--pv-on); font-size: 11px; letter-spacing: 0; }
.brand-preview .pv-link { font-size: 11px; letter-spacing: 0; }
.brand-preview .pv-body { display: flex; align-items: center; gap: 14px; padding: 18px 16px; background: var(--ground); }
.brand-preview .pv-btn { background: var(--pv); color: var(--pv-on); padding: 10px 18px; font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

/* ---------- sign-in and setup: the one place with the diagonal ---------- */
.gate { min-block-size: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--ground); }
.gate-side { position: relative; overflow: hidden; display: grid; align-content: space-between; gap: 32px; padding: 48px; background: var(--inverse); color: var(--on-inverse);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.gate-side::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 12%; inline-size: 0; block-size: 0; border-inline-start: 120px solid transparent; border-block-end: 120px solid var(--red); }
.gate-side .gate-logo { inline-size: min(220px, 60%); block-size: auto; }
.gate-side .client-logo { display: inline-flex; padding: 10px 14px; background: #fff; justify-self: start; }
.gate-side .client-logo img { block-size: 56px; inline-size: auto; max-inline-size: 240px; object-fit: contain; }
.gate-side .gate-title { font: 600 36px/1.1 var(--font); text-transform: none; max-inline-size: 12ch; color: var(--on-inverse); }
.gate-side .gate-title::after { content: ""; display: block; inline-size: 72px; block-size: 6px; margin: 16px 0 0 -6px; background: var(--red); transform: skewX(-30deg); }
.gate-side .gate-foot { font: 500 12px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: color-mix(in oklch, var(--on-inverse) 75%, var(--inverse)); }
.gate-main { display: grid; place-items: center; padding: 48px 24px; }
.gate form { inline-size: min(440px, 100%); display: grid; gap: 18px; }
.gate form.wide { inline-size: min(560px, 100%); }
.gate .gate-msg { padding: 48px 24px; }
.demo-accounts { display: grid; gap: 4px; margin-block-start: 12px; }
.demo-accounts h2 { font-size: 14px; margin-block-end: 6px; }
.demo-accounts h3 { margin-block-start: 12px; font-size: 11px; color: var(--ink-muted); letter-spacing: 0; }
.demo-accounts .btn { justify-content: space-between; text-transform: none; letter-spacing: 0; font-size: 14px; }
.demo-accounts .btn .muted { font-weight: 600; font-size: 12px; text-transform: none; letter-spacing: 0; }

/* ---------- responsive ---------- */
@media (max-width: 959px) {
  .top .nav, .top .side-end { display: none; }
  .menu-btn { display: inline-flex; }
  .top.open { flex-wrap: wrap; }
  .sheet { position: fixed; inset: 56px 0 0 0; z-index: 45; overflow-y: auto; background: var(--ground); color: var(--ink); display: grid; align-content: start; border-block-start: 1px solid var(--line); }
  .sheet .menu-group { padding-block: 8px; }
  .sheet .menu-item { padding: 14px 24px; font-size: 15px; }
  .sheet .menu-label { padding-inline: 24px; }
  .sheet .menu-head { padding-inline: 24px; }
  .sheet .seg { margin-inline: 24px; }
}
@media (min-width: 960px) { .sheet { display: none; } }
@media (max-width: 1080px) {
  .book, .travel { grid-template-columns: 1fr; }
  .manage { grid-template-columns: 1fr; }
  .subnav { position: static; display: flex; overflow-x: auto; box-shadow: inset 0 -2px 0 var(--ink); }
  .subnav a { white-space: nowrap; }
  .draft { position: static; }
  .split.open { grid-template-columns: 1fr; }
  .panel { position: static; max-block-size: none; margin: 24px 0 0; }
  .gate { grid-template-columns: 1fr; }
  .gate-side { clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); padding: 32px 24px 64px; min-block-size: 0; gap: 20px; }
  .gate-side .gate-title { font-size: 30px; }
  .gate-side::after { display: none; }
}
@media (max-width: 720px) {
  main { padding: 20px 16px 48px; }
  .top { padding-inline: 16px; }
  .brand { padding-inline-end: 12px; }
  .brand .wordmark { block-size: 28px; }
  .brand .suffix { display: none; }
  .strip { padding: 8px 16px; }
  h1 { font-size: 26px; }
  h2 { font-size: 18px; }
  .row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .row > .c-route, .row > .c-policy { grid-column: 1 / -1; }
  .row > .c-price { grid-row: 1; grid-column: 2; }
  .row > .c-add { grid-column: 2; }
  .two, .grid2, .grid4 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .hide-sm { display: none; }
  .seg { display: flex; }
  .seg > button, .seg > a { flex: 1 1 auto; justify-content: center; padding-inline: 12px; }
  .figures > div + div { box-shadow: inset 0 1px 0 var(--line); }
  .filters label { min-inline-size: 0; flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .top, .strip, .powered, .actions, .btn { display: none !important; } main { padding: 0; } }

/* ---------- fixes found in review ---------- */
/* grid children may shrink, so wide tables scroll inside .table-wrap instead of widening the page */
.stack-gap, .section-block, .settings, .manage-body, .proposal, .spend, .plan-form, .aside, .panel { grid-template-columns: minmax(0, 1fr); }
.stack-gap > *, .section-block > *, .settings > *, .proposal > *, .travel > *, .book > *, .split > * { min-inline-size: 0; }
/* help icons next to titles and column heads */
h1 .tipwrap, h2 .tipwrap { vertical-align: 0.3em; margin-inline-start: 10px; }
th .tipwrap { margin-inline-start: 6px; vertical-align: -3px; }
/* footer sits at the bottom on short pages */
#app { min-block-size: 100vh; display: flex; flex-direction: column; }
#app > main { flex: 1 0 auto; inline-size: 100%; }
.powered img { block-size: 22px; }
/* visually hidden labels in tables stay inside the scrolling box */
.table-wrap { position: relative; }
@media (max-width: 720px) {
  /* tabs on a phone: equal cells that wrap onto more rows, each cell drawing its share of the 2px frame */
  .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); box-shadow: none; padding: 1px; }
  .seg > *, .seg > * + * { box-shadow: none; outline: 2px solid var(--ink); outline-offset: -1px; white-space: normal; text-align: center; justify-content: center; line-height: 1.2; padding-inline: 8px; }
  .menu .seg, .sheet .seg { grid-template-columns: repeat(3, 1fr); }
  /* long choices wrap inside their cell instead of running into the next one */
  .seg > button, .seg > a { white-space: normal; overflow-wrap: anywhere; }
  /* help text on a phone shows as a bar at the bottom of the screen, so it never runs off the edge */
  [role="tooltip"] { position: fixed; inset: auto 12px 12px 12px; inline-size: auto; max-inline-size: none; z-index: 60; padding: 12px 14px; font-size: 14px; }
}

/* second review: contrast on chosen cards and warn fills in both themes, squarer marks, tidy spacing */
.tag.warn { color: var(--on-warn); }
.support-strip, :root[data-theme="dark"] .support-strip { color: var(--on-warn); }
.opt.chosen .tag, .opt.chosen .tag.on { background: var(--field); color: var(--ink); }
.opt.chosen .tag.warn { background: var(--field); color: var(--warn); }
.info { border-radius: 0; }
.status.proposed::before { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
h3 .tipwrap { margin-inline-start: 8px; vertical-align: -2px; }
.two { align-items: start; }
.table-wrap, .subnav { scrollbar-width: thin; scrollbar-color: var(--ink-muted) transparent; }

/* ---------- solid fills, no outlines: buttons, tabs and chips are colored blocks, never thin frames ---------- */
.btn { background: var(--band); box-shadow: none; }
.btn:hover { background: var(--line-strong); color: var(--ink); }
.btn.danger { background: var(--band); color: var(--critical); box-shadow: none; }
.btn.danger:hover { background: var(--line-strong); color: var(--critical); }
.plan-banner .btn { background: var(--field); color: var(--ink); box-shadow: none; }
.plan-banner .btn:hover { background: var(--band); color: var(--ink); }
.seg { box-shadow: none; background: var(--band); gap: 0; }
.seg > * + *, .seg > button, .seg > a { box-shadow: none; outline: none; }
.seg > button:hover, .seg > a:hover { background: var(--line-strong); }
.status { border: 0; background: var(--band); }
.tag.warn { background: var(--band); color: var(--warn); }
.support-strip, :root[data-theme="dark"] .support-strip { background: var(--inverse); color: var(--on-inverse); }
.figures { border-block: 0; background: var(--ground-alt); }
.figures > div + div { box-shadow: none; }
tfoot th, tfoot td { border-block-start: 0; background: var(--band); }
.search { border-block-end: 0; padding-block-end: 8px; }
.total { border-block-start: 0; padding-block-start: 4px; }
fieldset.events { border: 0; background: var(--ground-alt); padding: 14px 16px; }
fieldset.events legend { float: left; inline-size: 100%; padding: 0 0 4px; }
.menu { border: 0; }
.subnav { box-shadow: none; gap: 2px; }
.subnav a { background: transparent; }
@media (max-width: 720px) {
  .seg > *, .seg > * + * { outline: none; }
  .seg { padding: 0; gap: 2px; background: transparent; }
  .seg > button, .seg > a { background: var(--band); }
  .seg > [aria-pressed="true"], .seg > [aria-current="page"] { background: var(--red); }
}
@media (max-width: 1080px) { .subnav { box-shadow: none; } }

/* new pieces */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; padding: 2px 8px; background: var(--band); font: 600 12px/18px var(--font); color: var(--ink); white-space: nowrap; }
.chip.on { background: var(--inverse); color: var(--on-inverse); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px; align-items: start; }
.picker { display: grid; gap: 12px; }
.picker-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.picker-tools label { min-inline-size: 180px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.parts td:first-child { font-weight: 600; }
.mail-body { white-space: pre-wrap; font: 13px/1.5 var(--font); background: var(--ground-alt); padding: 12px 14px; margin: 6px 0 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { font: 500 12px/1.6 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.kv dd { margin: 0; }

/* ---------- workspace badge (top left): which org you're in and your role ---------- */
.ws-wrap { position: relative; display: flex; align-items: stretch; flex: none; margin-inline-start: -24px; }
.ws { display: inline-flex; align-items: center; gap: 12px; padding: 0 20px 0 24px; border: 0; background: none; color: var(--on-header); cursor: pointer; text-align: start; font: inherit; min-inline-size: 0; }
.ws:hover, .ws[aria-expanded="true"] { background: var(--header-hover); }
.ws-tile { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; background: var(--red); color: var(--on-red); font: 600 15px/1 var(--font); flex: none; overflow: hidden; }
.ws.has-logo .ws-tile { background: #ffffff; inline-size: auto; min-inline-size: 40px; padding: 4px 6px; }
.ws-tile img { max-block-size: 32px; max-inline-size: 120px; display: block; object-fit: contain; }
.ws-tile.firstline { background: transparent; inline-size: auto; }
.ws-tile.firstline img { max-block-size: 28px; }
.ws-text { display: grid; gap: 2px; min-inline-size: 0; }
.ws-text strong { font: 600 15px/1.15 var(--font); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 260px; }
.ws-text small { font: 500 12px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--on-header-muted); white-space: nowrap; }
/* Firstline staff working inside a customer org: the whole badge turns amber so the org can't be mistaken. */
.ws.support { background: var(--warn); color: var(--on-warn); }
.ws.support .ws-text small { color: var(--on-warn); }
.ws.support:hover, .ws.support[aria-expanded="true"] { background: color-mix(in oklch, var(--warn) 85%, black); }
.ws-panel { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 55; inline-size: min(360px, 100vw - 16px); display: grid; background: var(--ground); color: var(--ink); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); }
.ws-row { display: grid; gap: 4px; padding: 14px 16px; border-block-end: 1px solid var(--line); }
.ws-row:last-child { border-block-end: 0; }
.ws-row strong { font-size: 15px; }
.ws-row .btn { justify-self: start; margin-block-start: 6px; }
.ws-row .can { margin: 4px 0 0; padding-inline-start: 18px; font-size: 14px; display: grid; gap: 2px; }
.ws-orgs { display: grid; margin-inline: -16px; }
.top-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; background: none; color: var(--on-header); font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; }
.top-btn:hover { background: var(--header-hover); }
kbd { display: inline-block; padding: 2px 5px; font: 600 10px/1.2 var(--mono); letter-spacing: 0; text-transform: none; background: rgba(127, 127, 127, 0.22); }
.me-btn { padding: 0 0 0 10px; }

/* ---------- errors: what went wrong, how to fix it, and a reference ---------- */
.errbox { display: grid; gap: 8px; padding: 14px 16px; background: var(--band); color: var(--ink); max-inline-size: 760px; }
.errbox p { margin: 0; font-weight: 600; color: var(--critical); }
.errbox .ref { font: 500 12px/1.2 var(--mono); color: var(--ink-muted); }
.errbox .actions { margin: 0; }
.errbox.compact { padding: 10px 12px; }
.fix-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.fix-form label { min-inline-size: 160px; }
[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--critical) !important; }
.field-err { display: block; font-size: 13px; font-weight: 600; color: var(--critical); }

/* ---------- confirmations ---------- */
#ft-dialog { padding: 0; border: 0; inline-size: min(520px, 100vw - 32px); background: var(--ground); color: var(--ink); box-shadow: var(--shadow-card); }
#ft-dialog::backdrop, .search-dialog::backdrop { background: rgba(20, 22, 26, 0.4); }
.dialog { display: grid; gap: 16px; padding: 22px; }
.dialog-body { display: grid; gap: 10px; font-size: 15px; }
.dialog-body p { margin: 0; }
.dialog-body dl { margin: 0; }
.btn.danger-solid { background: var(--critical); color: var(--ground); box-shadow: none; }
.btn.danger-solid:hover { background: color-mix(in oklch, var(--critical) 85%, var(--ink)); color: var(--ground); }

/* ---------- search everything ---------- */
.search-dialog { padding: 0; border: 0; margin-block-start: 10vh; inline-size: min(640px, 100vw - 24px); background: var(--ground); color: var(--ink); box-shadow: var(--shadow-card); }
.sr-box { display: grid; }
.sr-input input { inline-size: 100%; border: 0; padding: 18px 20px; font: 600 17px/1.2 var(--font); background: var(--ground-alt); color: var(--ink); outline: none; }
.sr-list { list-style: none; margin: 0; padding: 6px 0; max-block-size: min(60vh, 520px); overflow-y: auto; }
.sr-list li { display: grid; gap: 2px; padding: 10px 20px; cursor: pointer; }
.sr-list li[aria-selected="true"] { background: var(--red); color: var(--on-red); }
.sr-list li[aria-selected="true"] .sr-sub { color: var(--on-red); }
.sr-title { font-weight: 600; }
.sr-sub { font-size: 12px; color: var(--ink-muted); }
.sr-empty { color: var(--ink-muted); cursor: default; }
.sr-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 20px; font-size: 12px; color: var(--ink-muted); background: var(--ground-alt); }

/* ---------- found it: a short pulse on the thing search led to ---------- */
@keyframes ft-pulse { 0%, 30% { background-color: var(--line-strong); } 100% { background-color: transparent; } }
.pulse { animation: ft-pulse 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; background-color: var(--band); } }

@media (max-width: 900px) {
  .ws { padding-inline: 16px 12px; }
  .ws-text strong { max-inline-size: 46vw; }
  .ws-text small { white-space: normal; }
  .ws-wrap { flex: 0 1 auto; min-inline-size: 0; }
}

/* ---------- easy to see, easy to tap ---------- */
/* focus: a clear ring on every control; the cut corners would clip it, so a focused primary button is square */
.seg > button:focus-visible, .seg > a:focus-visible, .subnav a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; position: relative; z-index: 1; }
.btn.primary:focus-visible { clip-path: none; }
.table-wrap:focus-visible, pre:focus-visible, [tabindex]:focus-visible, .file-btn:focus-within { outline: 3px solid var(--red); outline-offset: 2px; }
.sr-input input:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.ws:focus-visible, .nav a:focus-visible, .admin-links a:focus-visible, .top-btn:focus-visible, .me-btn:focus-visible, .menu-btn:focus-visible { outline-color: var(--on-header); outline-offset: -3px; }
/* in dark mode a hovered link gets lighter, not darker */
:where(:root[data-theme="dark"]) a:hover { color: var(--ink); }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) a:hover { color: var(--ink); } }
/* placeholder text dark enough to read in both themes */
::placeholder { color: var(--ink-muted); opacity: 1; }
/* checkboxes in table rows get a larger box to tap */
label.hit { display: inline-grid; place-items: center; min-inline-size: 32px; min-block-size: 32px; margin: -6px; cursor: pointer; }
/* settings sections: links on wide screens, one large menu on a phone */
.subnav-pick { display: none; }
@media (max-width: 1080px) { .subnav { flex-wrap: wrap; overflow-x: visible; } }
@media (max-width: 720px) {
  .manage > .subnav { display: none; }
  .subnav-pick { display: grid; margin-block-end: 12px; }
  .filters > .seg { flex: 1 1 100%; }
  .subnav-pick select { min-height: 52px; font-weight: 500; font-size: 17px; }
  /* text: 16px for reading on a phone */
  body, table, .dialog-body, .kv, dl.facts, main li, main dd, .ws-row .can, .callout ul, .verdict-box ul { font-size: 16px; }
  .small, .note, .saved, .field-err, .policy, .legend, .sr-sub { font-size: 14px; }
  input, select, textarea { font-size: 16px; }
  /* targets: at least 40px tall */
  input, select { min-height: 44px; }
  .btn, .btn.sm, .seg > button, .seg > a, .menu-item { min-height: 44px; }
  .btn.link { min-height: 40px; }
  .btn.sm { font-size: 13px; }
  .check { min-block-size: 40px; }
  input[type="checkbox"], input[type="radio"] { inline-size: 22px; block-size: 22px; }
  label.hit { min-inline-size: 40px; min-block-size: 40px; margin: -8px; }
  .info { position: relative; inline-size: 24px; block-size: 24px; font-size: 12px; }
  .info::after { content: ""; position: absolute; inset: -8px; }
  a.back { display: inline-flex; align-items: center; min-block-size: 40px; }
  summary { padding-block: 10px; }
  .chips .chip, .chips .status { white-space: normal; }
  .seg-item .x { inline-size: 44px; block-size: 44px; }
}

/* Booking providers: one row each, settings tucked away until opened. */
.prov-list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.prov { border-block-end: 1px solid var(--line); }
.prov-head { display: flex; align-items: center; gap: 12px; min-block-size: 56px; flex-wrap: wrap; }
.prov-head strong { min-inline-size: 120px; }
.prov-acts { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.prov-body { padding-block: 4px 20px; }
/* Duffel's switches: folded groups, one line each, a solid rule between them. */
.duffel-form { display: grid; gap: 14px; }
.duffel-form > .small { margin: 0; }
.dgroups { border-block-start: 1px solid var(--line); }
.dgroup { border-block-end: 1px solid var(--line); }
.dg-head { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 46px; cursor: pointer; font-weight: 600; color: var(--ink); }
.dg-head::after { content: "+"; font-weight: 400; color: var(--ink-muted); margin-inline-start: 8px; }
.dgroup.open > .dg-head::after { content: "–"; }
.dg-head > .small { margin-inline-start: auto; font-weight: 400; }
.dg-head:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.dg-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px 24px; padding-block: 2px 16px; align-items: end; }
.dg-body > .full, .dg-body > form, .dg-body > .table-wrap { grid-column: 1 / -1; }
.dg-field { display: grid; gap: 4px; }
.dg-field > span { font-size: 13px; color: var(--ink-muted); }
.add-prov { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 16px; }
.add-prov .small { margin-inline-end: 4px; }
table.routes select { min-inline-size: 110px; }


/* ==========================================================================
   Calm layout, October 2026. This section wins over the rules above.
   One sidebar holds every place to go; pages have one title and at most one
   row of tabs or filters; type is sentence case; setup is behind Settings.
   ========================================================================== */
:root { --side-w: 240px; }

/* ---------- type: sentence case, fewer weights ---------- */
h1, h2, h3, .btn, .seg > button, .seg > a, th, .status, .tag, .kind, .lbl, label > span:first-child, dl.facts dt, .kv dt, .menu-label,
.subnav a, .nav a, .admin-links a, .top-btn, .menu-btn, fieldset.events legend, .vlabel, .powered, .ws-text strong, .ws-text small, .count { text-transform: none; letter-spacing: 0; }
h1 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
h1::after { display: none; }
h2 { font-size: 18px; line-height: 1.3; font-weight: 600; }
h3 { font-size: 15px; line-height: 1.35; font-weight: 600; }
label > span:first-child, .lbl, dl.facts dt, .kv dt { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.menu-label { font-size: 12px; font-weight: 600; }
.btn { font-size: 14px; font-weight: 600; }
.btn.sm { font-size: 13px; }
.seg > button, .seg > a { font-size: 14px; font-weight: 600; min-height: 36px; padding: 7px 14px; }
th { background: transparent; color: var(--ink-muted); font-size: 12px; font-weight: 600; border-block-end: 1px solid var(--line-strong); }
.status { font-size: 12px; font-weight: 600; line-height: 18px; }
.tag { font-size: 11px; font-weight: 600; }
.vlabel { font-size: 14px; }
.powered { font-size: 12px; font-weight: 600; }
.lede { font-size: 16px; }

/* ---------- page heads: a title, and the page's one main action on the right ---------- */
.page-head:has(> h1) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-block-end: 24px; }
.page-head .row-end h1 { font-size: 28px; }
main { padding: 32px 40px 72px; max-inline-size: 1280px; margin-inline: 0; }
.manage-head { margin-block-end: 8px; }
.manage { gap: 8px 48px; }
.manage-body { gap: 32px; }
.settings section, .manage-body section { gap: 14px; padding-block-end: 28px; }
.empty { padding: 20px 0; }
.blank { display: grid; gap: 10px; justify-items: start; padding: 48px 0; }
.blank h2 { font-size: 20px; }

/* one quiet line for things that apply everywhere (sample fares, unfinished setup) */
.notice { margin: -8px 0 24px; padding: 10px 14px; background: var(--ground-alt); color: var(--ink-muted); font-size: 14px; }
.notice a, .notice .btn.link { color: var(--ink); font-weight: 600; }
.strip.demo-strip { display: none; }

/* settings list on the left of a settings page: plain rows, the open one filled */
.subnav { gap: 2px; box-shadow: none; }
.subnav a { padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.subnav a:hover { background: var(--band); color: var(--ink); }
.subnav a[aria-current="page"] { background: var(--band); color: var(--ink); }

/* ---------- the frame ---------- */
.top .count { min-inline-size: 0; block-size: auto; padding: 0; font-size: 14px; font-weight: 500; background: none; color: var(--on-header-muted); }
.top a[aria-current="page"] .count { min-inline-size: 22px; block-size: 20px; padding-inline: 5px; font-size: 12px; font-weight: 600; background: color-mix(in oklch, var(--red) 80%, black); color: var(--on-red); }
.dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.top .me-name { display: none; }
@media (min-width: 960px) {
  #app:has(> header.top) { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: 1fr auto; min-block-size: 100vh; }
  #app > header.top { grid-column: 1; grid-row: 1 / span 2; position: sticky; inset-block-start: 0; block-size: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-block-size: 0; }
  #app > main { grid-column: 2; grid-row: 1; inline-size: auto; }
  #app > .powered { grid-column: 2; grid-row: 2; }
  .top .ws-wrap { margin: 0; display: block; }
  .top .ws { inline-size: 100%; padding: 20px 16px 16px; gap: 10px; align-items: center; }
  .top .ws-tile.firstline img { max-block-size: 26px; }
  .top .ws-text strong { font-size: 15px; font-weight: 600; max-inline-size: 150px; }
  .top .ws-text small { font-size: 12px; font-weight: 500; white-space: normal; }
  .top .ws-panel { inset-inline-start: 12px; inset-block-start: calc(100% - 6px); }
  .top .nav, .top .admin-links { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; box-shadow: none; }
  .top .nav a, .top .admin-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; min-block-size: 40px;
    font-size: 14px; font-weight: 600; color: var(--on-header-muted); box-shadow: none; white-space: normal; }
  .top .nav a:hover, .top .admin-links a:hover { color: var(--on-header); background: var(--header-hover); }
  .top .nav a[aria-current="page"], .top .admin-links a[aria-current="page"] { background: var(--red); color: var(--on-red); }
  .side-end { margin-block-start: auto; display: flex; flex-direction: column; padding: 8px 0 12px; border-block-start: 1px solid var(--header-rule); }
  .side-end .admin-links { padding-block: 0 4px; }
  .side-end .top-btn { justify-content: space-between; min-block-size: 40px; margin-inline: 10px; padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--on-header-muted); }
  .side-end .top-btn:hover { color: var(--on-header); }
  .side-end .me { box-shadow: none; margin: 4px 10px 0; }
  .side-end .me-btn { inline-size: 100%; gap: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--on-header); }
  .side-end .me-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-end .initials { inline-size: 30px; block-size: 30px; font-size: 12px; }
  .side-end .menu { inset-block-start: auto; inset-block-end: calc(100% + 6px); inset-inline: 0 auto; }
  .menu-btn { display: none; }
}
@media (max-width: 959px) {
  .top { min-block-size: 56px; padding-inline: 16px; align-items: center; }
  .top .ws-wrap { margin-inline-start: -16px; align-self: stretch; }
  .top .ws-text strong { font-size: 15px; font-weight: 600; }
  .top .ws-text small { font-size: 12px; font-weight: 500; }
  .menu-btn { font-size: 14px; font-weight: 600; align-self: stretch; }
  .sheet .menu-item { font-size: 16px; }
  main { padding: 24px 24px 64px; }
}
@media (max-width: 720px) {
  main { padding: 20px 16px 56px; }
  h1, .page-head .row-end h1 { font-size: 24px; }
  .notice { margin-block-start: -4px; }
}

/* filters on a phone: one row of chips that scrolls sideways, not a wall of blocks */
@media (max-width: 720px) {
  .seg.dk-seg, .seg.q-seg { display: flex; flex-wrap: wrap; gap: 4px; max-inline-size: 100%; }
  .seg.dk-seg > button, .seg.q-seg > button { flex: none; white-space: nowrap; min-height: 40px; }
  .q-org-pick, .dk-pick { min-inline-size: 0; flex: 1 1 100%; }
}
.dk-filters { margin-block-end: 8px; }
.top .ws-text small:only-child { font-size: 13px; color: var(--on-header-muted); }

/* ==========================================================================
   Soft tones, October 2026. This section wins over the rules above.
   Calm surfaces instead of black and white, 400 to read, 500 for controls, 600 for titles, one light rule
   between rows, and color only where something needs action.
   ========================================================================== */

/* ---------- the Firstline wordmark: ink on light surfaces, white on dark ones ---------- */
.wm.wm-white { display: none; }
:root[data-theme="dark"] .wm.wm-ink { display: none; }
:root[data-theme="dark"] .wm.wm-white { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wm.wm-ink { display: none; }
  :root:not([data-theme="light"]) .wm.wm-white { display: block; }
}
.powered .wm { block-size: 22px; inline-size: auto; }

/* ---------- type ---------- */
body { font-size: 16px; line-height: 1.55; }
table { font-size: 15px; }
strong, b { font-weight: 600; }
h1, .page-head .row-end h1 { font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }
h2 { font-size: 18px; line-height: 1.35; font-weight: 600; }
h3 { font-size: 15px; line-height: 1.4; font-weight: 600; }
label > span:first-child, .lbl, dl.facts dt, .kv dt, fieldset.namepick legend, fieldset.logs-pick legend { font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.kind, .bk-kind, .chg-field, .menu-label { font-size: 12px; font-weight: 500; }
th { font-size: 13px; font-weight: 500; color: var(--ink-muted); border-block-end: 1px solid var(--line); }
.status { font-size: 13px; font-weight: 500; }
.chip, .tag, .pchip, .menu-item, .sub-big, .legend, .policy, .verdict, .saved, .err, .field-err, .warn-note, .count-inline, .leg-time, .step-name { font-weight: 500; }
.vlabel, .times, .price, .opt-main, .trip-name, .conf-inline, .leg-day, .seg-item .what, a.planlink .what, .sr-title, .parts td:first-child { font-weight: 600; }
.big, .timing .val, .total, .opt-foot, .conf-code { font-size: 22px; font-weight: 600; }
.small, .note, .q-detail, .dk-dates { font-size: 14px; }
.lede strong, .errbox p, .profile-banner, .plan-banner { font-weight: 500; }
.tipwrap { font-weight: 400; }

/* ---------- buttons: quiet by default, one red primary per view ---------- */
.btn { min-height: 44px; padding: 10px 18px; font-size: 15px; font-weight: 500; }
.btn:hover, .btn.danger:hover { background: var(--line); }
.btn.primary { font-weight: 600; }
.btn.sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn.link { min-height: 0; padding: 0; font-weight: 500; }
/* actions on list rows stay quiet, so a list isn't a column of dark blocks */
.q-acts .btn.dark, .dk-acts .btn.dark, td .btn.dark, .needs-list .btn.dark { background: var(--band); color: var(--ink); }
.q-acts .btn.dark:hover, .dk-acts .btn.dark:hover, td .btn.dark:hover, .needs-list .btn.dark:hover { background: var(--line); color: var(--ink); }
.dialog-btns { justify-content: flex-end; }

/* ---------- tabs ---------- */
.seg > button, .seg > a { min-height: 40px; font-size: 14px; font-weight: 500; }
.seg > button:hover, .seg > a:hover { background: var(--line); }
.seg > [aria-pressed="true"], .seg > [aria-current="page"] { font-weight: 600; }
.seg .count, .seg .count-plain { min-inline-size: 0; block-size: auto; margin-inline-start: 8px; padding: 0; background: none; color: inherit; font-size: inherit; font-weight: 500; }

/* ---------- forms ---------- */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select) { min-height: 44px; padding: 10px 12px; }
textarea { padding: 10px 12px; background: var(--field); }
.grid2, .grid4 { gap: 20px 16px; }
.info { inline-size: 18px; block-size: 18px; border: 0; color: var(--ink-muted); font: 600 14px/1 var(--font); }
.info:hover, .info:focus-visible { color: var(--ink); }

/* ---------- tables and lists ---------- */
td { padding: 12px; }
.case-link { color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.case-link:hover { color: var(--ink); text-decoration: underline; }
.status.proposed::before { background: var(--ink-muted); box-shadow: none; }

/* ---------- boxes: shadows only on things that float ---------- */
.opt { border: 1px solid var(--line); box-shadow: none; }
.brand-preview { box-shadow: none; }
.dialog { gap: 16px; padding: 24px; }

/* ---------- the quiet notice line (sample fares, unfinished setup) ---------- */
.notice { margin: -16px 0 20px; padding: 0; background: none; color: var(--ink-muted); font-size: 13px; }
.notice a, .notice .btn.link { font-weight: 500; }

/* ---------- More menus ---------- */
.more-wrap { position: relative; display: inline-flex; }
.more-wrap > .btn .caret { margin-inline: 2px 0; }
.more-menu { inset-block-start: calc(100% + 4px); inline-size: max-content; min-inline-size: 220px; max-inline-size: min(320px, calc(100vw - 32px)); padding-block: 6px; }
.more-menu .menu-item { white-space: nowrap; }

/* ---------- the frame ---------- */
.top { box-shadow: inset 0 -1px 0 var(--header-rule); }
.ws-text strong, .top .ws-text strong { font-weight: 600; }
.ws.has-logo .ws-tile { box-shadow: 0 0 0 1px var(--header-rule); }
.initials, .ws-tile { font-weight: 600; }
.menu-btn { font-weight: 500; }
@media (min-width: 960px) {
  .top { box-shadow: inset -1px 0 0 var(--header-rule); }
  /* the sidebar's color runs the full height of a long page, not just the first screen */
  #app:has(> header.top) { box-shadow: inset var(--side-w) 0 0 var(--header), inset calc(var(--side-w) + 1px) 0 0 var(--header-rule); }
  .top .nav a, .top .admin-links a { min-block-size: 40px; padding: 10px 14px; font-size: 15px; font-weight: 500; }
  .top .nav a[aria-current="page"], .top .admin-links a[aria-current="page"] { font-weight: 600; }
  .side-end .top-btn, .side-end .me-btn { font-size: 15px; font-weight: 500; }
  .side-end .top-btn { padding: 10px 14px; }
}
@media (max-width: 959px) {
  .top .ws-text strong { font-weight: 600; }
}

/* ---------- phones ---------- */
@media (max-width: 720px) {
  h1, .page-head .row-end h1 { font-size: 22px; }
  .btn.sm { min-height: 44px; }
  /* tabs fill the width and wrap by their words, never one narrow column */
  .seg { display: flex; flex-wrap: wrap; justify-self: stretch; inline-size: 100%; }
  .seg > button, .seg > a { flex: 1 1 auto; }
  .figures { grid-template-columns: 1fr 1fr; }
  .big { font-size: 20px; }
  .more-menu { position: fixed; inset: auto 12px 12px 12px; inline-size: auto; max-inline-size: none; }
  .more-menu .menu-item { min-block-size: 48px; white-space: normal; }
  /* sign-in: the dark panel is a short band above the form */
  .gate-side { padding: 20px 16px; clip-path: none; gap: 12px; }
  .gate-side::after, .gate-side .gate-foot { display: none; }
  .gate-side .gate-logo { inline-size: 120px; }
  .gate-side .gate-title { font-size: 22px; }
  .gate-side .gate-title::after { inline-size: 48px; block-size: 4px; margin-block-start: 10px; }
}
.menu .count, .sheet .count, .menu-btn .count { min-inline-size: 0; block-size: auto; padding: 0; background: none; color: var(--ink-muted); font-size: 14px; font-weight: 500; }
@media (max-width: 720px) { .queue .q-search { inline-size: 100%; } }

/* Airline and hotel marks (core.js brandMark): a logo on a light tile, or a monogram on the band color. */
.bm { position: relative; display: inline-grid; place-items: center; flex: none; inline-size: 24px; block-size: 24px; background: var(--band); color: var(--ink-muted); font: 600 10px/1 var(--font); letter-spacing: 0.02em; vertical-align: middle; overflow: hidden; }
.bm.sm { inline-size: 20px; block-size: 20px; font-size: 9px; }
.bm img { position: absolute; inset: 2px; inline-size: calc(100% - 4px); block-size: calc(100% - 4px); object-fit: contain; opacity: 0; }
.bm img.ok { opacity: 1; }
.bm.has-logo { background: var(--logo-bg); box-shadow: inset 0 0 0 1px var(--line); }
.bm.has-logo .bm-t { visibility: hidden; }
.with-bm { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; }
/* Missing traveler details (ux.js fixTravelerDetails): one short form per traveler, only what's missing. */
#ft-details { padding: 0; border: 0; inline-size: min(460px, 100vw - 32px); max-block-size: calc(100dvh - 32px); overflow: auto; background: var(--ground); color: var(--ink); box-shadow: var(--shadow-card); }
#ft-details::backdrop { background: rgba(20, 22, 26, 0.4); }
.dt-person { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.dt-person + .dt-person { padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.dt-person legend { padding: 0 0 8px; font-weight: 600; font-size: 15px; }
.dt-fields { display: grid; gap: 12px; }
.dt-err { margin: 0; color: var(--critical); font-size: 14px; }