/*
 * MotoHubCY HQ. The one stylesheet of the UI. See specs/ui.md.
 * Mobile first (390 px). One media layer for the desktop layout from 1024 px (D32).
 * Sections: 1 tokens, 2 base, 3 layout, 4 components, 5 utilities, 6 desktop.
 * No inline styles. The tokens come from the MotoHubCY brand (D29) and the approved design boards.
 */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  color-scheme: dark;

  /* Brand colours (D29). */
  --ink: #0B0B0C;        /* ground */
  --carbon: #161514;     /* cards */
  --graphite: #2B2926;   /* lines, secondary buttons */
  --bone: #F4F2EE;       /* text */
  --steel: #9A958D;      /* secondary text, planned */
  --sand: #D9A441;       /* primary action, "is owed" */
  --coral: #EE8A6A;      /* "owes", errors, delete */

  /* Shades from the design boards. */
  --sand-hover: #E6B75C;
  --sand-wash: #2A2112;  /* banner and icon ground */
  --graphite-hover: #3A3733;
  --ash: #4A4540;        /* sold tag, tooltip line */
  --field: #1C1B19;      /* input ground, photo placeholder */
  --field-line: #6E6961; /* input line, faint icons */
  --row-hover: #1D1B18;
  --nav-text: #C9C4BB;
  --topbar-ground: rgba(11, 11, 12, .96);
  --scrim: rgba(0, 0, 0, .62);
  --shadow: 0 8px 24px rgba(0, 0, 0, .5);
  --fab-ground: rgba(11, 11, 12, .72);   /* buttons over a photo */
  --chip-ground: rgba(11, 11, 12, .8);   /* the photo count over a photo */
  --subtotal-ground: #1A1917;            /* group heads and subtotals of the cost table */
  --edit-ground: #1D1A14;                /* the edit rows of a cost (DBikeDetail board) */
  --stage-ground: #1F1E1C;               /* the stage of the viewer (Viewer board) */
  --error-ground: #3A1A17;               /* the thumbnail of a failed upload (ReceiptUpload board) */

  /* Avatars. */
  --avatar-1-bg: #3A2E14; --avatar-1-fg: #E8C27A;
  --avatar-2-bg: #2B2926; --avatar-2-fg: #F4F2EE;
  --avatar-3-bg: #1C2830; --avatar-3-fg: #A9CBE3;
  --avatar-0-bg: #1F1E1C;  /* the common money: steel text */

  /* Type. */
  --font-title: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --font-label: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', sans-serif;

  /* Shape and size. */
  --radius: 2px;
  --touch: 44px;
  --gutter: 16px;
  --topbar-h: 56px;
  --tabbar-h: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --sidebar-w: 232px;
  --aside-w: 340px;
  --drawer-w: 520px;
}

/* ---------------------------------------------------------------- 2. Base */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--ink); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-title);
  font-variation-settings: 'opsz' 72;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.08;
}

a { color: var(--sand); text-decoration: none; }
a:hover { color: var(--sand-hover); }

img, svg { display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

::placeholder { color: var(--steel); opacity: 1; }

hr { border: 0; height: 1px; background: var(--graphite); margin: 0; }

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- 3. Layout */

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--sand);
  color: var(--ink);
  font-weight: 600;
  border-radius: var(--radius);
}
.skip-link:focus { top: 8px; color: var(--ink); }

.shell { min-height: 100dvh; }

/* The top bar on a phone: logo and account. The page actions (search, add) sit in it with position: fixed. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 4px 0 var(--gutter);
  background: var(--topbar-ground);
  border-bottom: 1px solid var(--graphite);
}
.topbar__logo img { height: 18px; width: auto; }

/* On a phone, the side bar holds only the tab bar. The logo and the account are in the top bar. */
.sidebar__logo,
.sidebar__account { display: none; }

/* The main navigation: a tab bar on a phone, a list in the side bar from 1024 px. */
.mainnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding-bottom: var(--safe-bottom);
  background: var(--topbar-ground);
  border-top: 1px solid var(--graphite);
}
.mainnav__list {
  display: flex;
  justify-content: space-around;
  height: var(--tabbar-h);
  align-items: center;
}
.mainnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 110px;
  height: 48px;
  border-radius: var(--radius);
  color: var(--steel);
  font-size: 12px;
  font-weight: 500;
}
.mainnav__item .icon { width: 26px; height: 26px; }
.mainnav__item:hover { color: var(--bone); }
.mainnav__item[aria-current="page"] { color: var(--sand); }

.main {
  padding: var(--gutter) var(--gutter) calc(var(--tabbar-h) + var(--safe-bottom) + 32px);
  min-width: 0;
}
.main:focus { outline: none; }

/* A pushed screen below 1024 px (BikeDetail board): no top bar and no tab bar, so the page starts with its photo.
   From 1024 px, the side bar stays (section 6). The toasts and the session banner move to the free space. */
.shell--pushed .topbar,
.shell--pushed .mainnav { display: none; }
.shell--pushed .main { padding-bottom: calc(var(--safe-bottom) + 32px); }
.shell--pushed ~ .toasts { bottom: calc(var(--safe-bottom) + 12px); }
.shell--pushed .banner { top: calc(env(safe-area-inset-top, 0px) + 8px); }
/* "Add cost" is a sticky bar at the foot of the bike page on a phone (BikeDetail board).
   The two shadows give the ink ground of the bar and its top line. The main column and the toasts make space for it. */
.bike-add {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--safe-bottom) + 12px);
  z-index: 20;
  min-height: 52px;
  font-size: 17px;
  box-shadow: 0 0 0 16px var(--ink), 0 -1px 0 16px var(--graphite);
}
.shell--pushed .main:has(.bike-add) { padding-bottom: calc(var(--safe-bottom) + 112px); }
.shell--pushed:has(.bike-add) ~ .toasts { bottom: calc(var(--safe-bottom) + 92px); }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.page-title { font-size: 34px; }
.page-title:empty { display: none; }

/* On a phone, the page actions sit in the top bar, left of the account button. */
.page-actions {
  position: fixed;
  top: 6px;
  right: 48px;
  z-index: 21;
  display: flex;
  align-items: center;
}

.page {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr);
}
.page__main, .page__aside { min-width: 0; }
.page__aside:empty { display: none; }
.page__main > :first-child,
.page__aside > :first-child { margin-top: 0; }

/* ---------------------------------------------------------------- 4. Components */

/* Icons from static/img/icons.svg. */
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 26px; height: 26px; }

/* Buttons. One primary button on each screen (D29). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
.btn--primary { background: var(--sand); color: var(--ink); }
.btn--primary:hover { background: var(--sand-hover); color: var(--ink); }
.btn--secondary { background: var(--graphite); color: var(--bone); }
.btn--secondary:hover { background: var(--graphite-hover); color: var(--bone); }
.btn--ghost { background: transparent; color: var(--sand); padding: 0 8px; }
.btn--ghost:hover { color: var(--sand-hover); }
.btn--danger { background: var(--coral); color: var(--ink); }
.btn--danger:hover { background: #F29E83; color: var(--ink); }
.btn--danger-ghost { background: transparent; color: var(--coral); box-shadow: inset 0 0 0 1px var(--graphite); }
.btn--danger-ghost:hover { background: var(--graphite); color: var(--coral); }
.btn--block { width: 100%; min-height: 50px; font-size: 17px; }
.btn--sm { padding: 0 14px; font-size: 15px; }
.btn:disabled { opacity: .5; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--bone);
}
.icon-btn:hover { background: var(--graphite); color: var(--bone); }

/* The search control. A button with an icon on a phone, a field-like box from 1024 px. */
.search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--bone);
}
.search-btn .icon { width: 22px; height: 22px; }
.search-btn:disabled { color: var(--steel); }
.search-btn__label { display: none; }

/* The add action of a page. Use: <a class="btn btn--primary page-add">{% icon "plus" %}<span class="page-add__label">Add a bike</span></a>. */
.page-add { width: var(--touch); padding: 0; background: transparent; color: var(--sand); }
.page-add:hover { background: transparent; color: var(--sand-hover); }
.page-add .icon { width: 26px; height: 26px; }
.page-add__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Avatars stay round (D29). */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--avatar-1-bg);
  color: var(--avatar-1-fg);
  font-size: 15px;
  font-weight: 700;
}
.avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.avatar--lg { width: var(--touch); height: var(--touch); font-size: 17px; }
.avatar--2 { background: var(--avatar-2-bg); color: var(--avatar-2-fg); }
.avatar--3 { background: var(--avatar-3-bg); color: var(--avatar-3-fg); }
.avatar--xs { width: 22px; height: 22px; font-size: 10px; }
.avatar--common { background: var(--avatar-0-bg); color: var(--steel); border: 1px solid var(--graphite); }

/* Cards and section heads. */
.card { background: var(--carbon); border: 1px solid var(--graphite); border-radius: var(--radius); }

.label,
.section-head {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch);
  margin: 24px 0 6px;
}
/* A section head can be a wrapper with an <h2> (the panels of the bike page). The h2 keeps the label style. */
.section-head > h2 { font: inherit; letter-spacing: inherit; font-variation-settings: normal; }
.section-head a { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; }
/* A link in a section head ("Edit shares", "Add transfer"). The head is 44 px high, so the link is a touch target. */
.section-head__tools { display: flex; align-items: center; gap: 12px; }
.section-head__link { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 4px; font-weight: 600; }

/* Form fields. Inputs are 16 px or more, so a phone does not zoom. */
.field { display: flex; flex-direction: column; gap: 4px; }
.field__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.field__label {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.field__optional { letter-spacing: .06em; text-transform: none; font-weight: 500; color: var(--field-line); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--bone);
  font-size: 17px;
  color-scheme: dark;
}
.field textarea { min-height: 96px; padding: 10px 12px; resize: vertical; }
.field input:is([type="checkbox"], [type="radio"]) { width: auto; min-height: 0; accent-color: var(--sand); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline-offset: 0; border-color: var(--sand); }
.field [aria-invalid="true"] { border-color: var(--coral); }
.field__help { font-size: 13px; color: var(--steel); }
.field__errors { display: flex; flex-direction: column; gap: 2px; color: var(--coral); font-size: 14px; }
.field__errors li { display: flex; align-items: center; gap: 6px; }

/* A group of fields in one card, with lines between them (Main board, CostForm board). */
.field-card { background: var(--carbon); border: 1px solid var(--graphite); border-radius: var(--radius); }
.field-card .field { gap: 2px; padding: 10px var(--gutter); border-top: 1px solid var(--graphite); }
.field-card .field:first-child { border-top: 0; }
.field-card .field input,
.field-card .field select {
  min-height: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
}
.field-card .field input:focus-visible,
.field-card .field select:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* The (i) button and the tooltip with the longer help text (D32). The native popover needs no script. */
.tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  margin: -12px -12px -12px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--steel);
}
.tip-btn:hover { color: var(--bone); }
.tip {
  width: min(300px, calc(100vw - 2 * var(--gutter)));
  margin: auto;
  padding: 12px 14px;
  background: var(--graphite);
  border: 1px solid var(--ash);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--bone);
  font-size: 14px;
  line-height: 1.4;
}

/* Tables (desktop lists). Number columns align right. */
.table { width: 100%; border-collapse: collapse; }
.table th {
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--graphite);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: left;
  white-space: nowrap;
}
.table td { height: 52px; padding: 0 var(--gutter); border-top: 1px solid var(--graphite); vertical-align: middle; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover { background: var(--row-hover); }
.table .num { text-align: right; }

/* Status tags of a bike. Each status has a colour and a word (D29). */
.tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--purchased { background: var(--steel); color: var(--ink); }
.tag--in_repair { background: var(--sand); color: var(--ink); }
.tag--listed { background: var(--bone); color: var(--ink); }
.tag--sold { background: var(--ash); color: var(--bone); }

/* The tag of a planned cost: dashed steel (D29). */
.tag-planned {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  border: 1px dashed var(--steel);
  border-radius: var(--radius);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
}

/* Money amounts. */
.amount {
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.amount--owed { color: var(--sand); }
.amount--owes { color: var(--coral); }
.amount--planned { color: var(--steel); }
.amount--quiet { color: var(--nav-text); }
.amount--lg { font-size: 20px; font-weight: 700; }

/* "X owes Y" rows. Put them in <ul class="card owes-list">. */
.owes-row { display: flex; align-items: center; gap: 10px; padding: 12px var(--gutter); border-top: 1px solid var(--graphite); }
.owes-row:first-child { border-top: 0; }
.owes-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.owes-row__who { font-weight: 600; }

/* The account menu. */
.account { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.account__name { font-weight: 600; }
.account__meta { font-size: 13px; color: var(--steel); }
.menu { margin-bottom: 8px; }
.menu li + li { border-top: 1px solid var(--graphite); }
.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--bone);
  font-size: 17px;
  text-align: left;
}
.menu__item:hover { color: var(--sand-hover); }
.menu__item--danger,
.menu__item--danger:hover { color: var(--coral); }

/* Dialogs: native <dialog>. A bottom sheet on a phone, centred from 1024 px. */
.dialog {
  width: 100%;
  max-width: 100%;
  max-height: 90dvh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--graphite);
  border-radius: 0;
  background: var(--carbon);
  color: var(--bone);
}
.dialog::backdrop,
.drawer::backdrop { background: var(--scrim); }
.dialog__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--gutter) var(--gutter) calc(var(--gutter) + var(--safe-bottom));
}
.dialog__title { font-size: 22px; }
.dialog__text { margin-bottom: 8px; color: var(--steel); font-size: 15px; }
.dialog__actions { display: flex; flex-direction: column; gap: 8px; }

/* Drawers: the forms. Full screen on a phone, a side drawer from 1024 px (D32). */
.drawer {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--carbon);
  color: var(--bone);
}
.drawer[open] { display: flex; flex-direction: column; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px 12px var(--gutter);
  border-bottom: 1px solid var(--graphite);
}
.drawer__title { font-size: 26px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px var(--gutter); display: flex; flex-direction: column; gap: 20px; }
.drawer__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px var(--gutter) calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--graphite);
}
.drawer__foot:empty { display: none; }

/* Toasts. Two live regions: polite for success, assertive for errors. An error toast stays until dismissed.
   When a dialog is open, static/js/app.js moves #toasts into it, so the toasts are not inert. */
.toasts {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
/* In an open bottom sheet on a phone, the toasts go to the top, so they do not cover the sheet. */
.dialog > .toasts { top: var(--gutter); bottom: auto; }
/* A drawer has no tab bar under it. */
.drawer > .toasts { bottom: calc(var(--safe-bottom) + 12px); }
.toasts__region { display: flex; flex-direction: column; gap: 8px; }
.toasts__region:empty { display: none; }
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--carbon);
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  pointer-events: auto;
}
.toast .icon { width: 18px; height: 18px; color: var(--sand); }
.toast__text { flex: 1; }
.toast--error { border-color: var(--coral); font-size: 15px; }
.toast--error .icon { color: var(--coral); }
.toast .toast__close { margin: -12px -10px -12px 0; color: var(--steel); }
.toast .toast__close .icon { width: 16px; height: 16px; color: inherit; }

/* The banner for an expired session. It is in the page flow, at the top of the main column.
   It sticks under the top bar. When a dialog is open, static/js/app.js moves it to the top of the dialog. */
.banner {
  position: sticky;
  top: calc(var(--topbar-h) + 8px);
  z-index: 15;
  margin-bottom: var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--sand-wash);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.banner__text { flex: 1; padding: 12px 0; font-size: 15px; }
.banner__link { display: flex; align-items: center; min-height: var(--touch); font-weight: 600; }
.dialog > .banner,
.drawer > .banner { position: static; margin: var(--gutter) var(--gutter) 0; box-shadow: none; flex-shrink: 0; }

/* Empty states. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px 28px;
  text-align: center;
}
.empty-state__icon { color: var(--field-line); }
.empty-state__icon .icon { width: 44px; height: 44px; --icon-stroke: 1.4; }
.empty-state__title { font-size: 22px; }
.empty-state__text { max-width: 260px; color: var(--steel); font-size: 15px; }
.empty-state .btn { margin-top: 4px; min-height: 48px; padding: 0 20px; }
/* An empty panel in a card (bike page). */
.card > .empty-state,
[data-attachments-region] > .empty-state { padding: 24px var(--gutter); }
/* A good state, for example "All settled" (States board): the icon in a sand circle. */
.empty-state--ok .empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sand-wash);
  color: var(--sand);
}
.empty-state--ok .empty-state__icon .icon { width: 26px; height: 26px; --icon-stroke: 2.6; }

/* The filter chips of the bike list (BikeList board). The current chip has aria-current="page". */
.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--gutter); }
.filters__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--touch);
  padding: 0 4px;
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
  background: var(--carbon);
  color: var(--bone);
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.filters__item:hover { color: var(--bone); background: var(--row-hover); }
.filters__item[aria-current="page"] { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.filters__count { opacity: .7; }

/* The bike list. One <table class="table bike-table">. Below 1024 px, each row is a card (BikeList board).
   Card grid: the photo, the name (two rows), the status and the date on the right, then three equal stats. */
.bike-table { display: block; }
.bike-table thead { display: none; }
.bike-table tbody { display: flex; flex-direction: column; gap: 10px; }
.bike-row {
  position: relative;
  display: grid;
  grid-template-columns: 84px calc(100% / 3 - 84px) minmax(0, 1fr) minmax(0, 1fr);
  background: var(--carbon);
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
}
.bike-row:has(.bike-row__link:focus-visible) { outline: 2px solid var(--sand); outline-offset: 2px; }
.bike-table td { display: block; height: auto; padding: 0; border-top: 0; min-width: 0; }
.bike-table .bike-row__photo { grid-column: 1; grid-row: 1 / 3; padding: 12px 0 12px 12px; }
.bike-row__img,
.bike-row__nophoto {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  background: var(--field);
  object-fit: cover;
}
.bike-row__nophoto { display: flex; align-items: center; justify-content: center; color: var(--field-line); }
.bike-row__nophoto .icon { width: 34px; height: 34px; --icon-stroke: 1.5; }
/* The title row (BikeList board, .ttl): the name and the status tag share grid row 1. The name cell is a subgrid
   of columns 2 to 4. The name uses columns 2 and 3, the meta line uses columns 2 to 4, and the status cell is in column 4. */
.bike-table .bike-row__name {
  grid-column: 2 / -1;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  align-content: center;
  padding: 12px;
}
.bike-row__link {
  display: block;
  overflow: hidden;
  color: var(--bone);
  font-family: var(--font-title);
  font-variation-settings: 'opsz' 72;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: end;
}
.bike-row__link:hover { color: var(--bone); }
.bike-row__link:focus-visible { outline: none; }
/* The link covers the whole row, so a tap anywhere opens the bike. */
.bike-row__link::after { content: ""; position: absolute; inset: 0; }
.bike-row__meta {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--steel);
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The status tag ends the title row. It is above the stretched link. A tap on the tag still opens the bike. */
.bike-table .bike-row__status {
  position: relative;
  z-index: 1;
  grid-column: 4;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  padding: 12px 12px 0 8px;
  pointer-events: none;
}
/* Below 1024 px, the date is in the meta line ("model · year · Added date"), as on the BikeList board. */
.bike-table .bike-row__added { display: none; }
.bike-table .bike-row__stat {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 10px 12px;
  border-top: 1px solid var(--graphite);
  text-align: left;
}
.bike-table .bike-row__stat--cost { grid-column: 1 / 3; }
.bike-table .bike-row__stat + .bike-row__stat { border-left: 1px solid var(--graphite); }
.bike-row__stat .amount { font-size: 18px; }
.bike-row__k { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
.bike-row__sub,
.bike-table .bike-row__margin { display: none; }

/* The bike page (BikeDetail board). The head: the photo, the title, the status, the meta line, and the actions.
   On a phone, the photo fills the width, and the back link and the actions are icon buttons over it. */
.bike-head { position: relative; display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.bike-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) 0;
  overflow: hidden;
  background: var(--field);
  color: var(--field-line);
}
.bike-hero__img { width: 100%; height: 100%; object-fit: cover; }
.bike-hero__nophoto .icon { width: 64px; height: 64px; --icon-stroke: 1.2; }
.bike-hero__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: var(--chip-ground);
  color: var(--bone);
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.crumbs { position: absolute; z-index: 1; top: calc(12px - var(--gutter) + env(safe-area-inset-top, 0px)); left: calc(12px - var(--gutter)); }
.crumbs__back,
.bike-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border-radius: var(--radius);
  background: var(--fab-ground);
  color: var(--bone);
}
.crumbs__back:hover,
.bike-action:hover { background: var(--graphite); color: var(--bone); }
.crumbs__back .icon { width: 22px; height: 22px; }
.bike-action .icon { width: 20px; height: 20px; }
.crumbs__label,
.bike-action__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.crumbs__current { display: none; }
.bike-head__actions { position: absolute; z-index: 1; top: calc(12px - var(--gutter) + env(safe-area-inset-top, 0px)); right: calc(12px - var(--gutter)); display: flex; gap: 8px; }
.bike-head__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bike-head .page-title { font-size: 32px; line-height: 1.05; }
.bike-head__meta { margin-top: 6px; color: var(--steel); font-family: var(--font-label); font-size: 16px; letter-spacing: .04em; }
.bike-head__meta > span + span::before,
.transfer-row__meta > span + span::before { content: " · "; }
.bike-head__added { display: none; }

/* The totals: a grid of stats in a card. 3 columns on a phone, 5 from 1024 px. */
.kpis__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.kpi { min-width: 0; padding: 12px 14px; }
.kpi dd { margin: 0; }
.kpi .label { display: flex; align-items: center; gap: 2px; min-height: 20px; font-size: 11px; white-space: nowrap; }
.kpi .amount { font-size: 20px; }
.kpi:not(:nth-child(3n + 1)) { border-left: 1px solid var(--graphite); }
.kpi:nth-child(n + 4) { border-top: 1px solid var(--graphite); }
.kpi--profit { grid-column: span 2; }
.kpi--profit dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.kpi__sub { color: var(--steel); font-size: 13px; }

/* The cost region: the filter and the cost table. A filter is a row of links in a .seg (aria-current). */
.bike-costs__head { flex-wrap: wrap; gap: 0 16px; }
.seg--links { flex-basis: 100%; margin-bottom: 6px; }
a.seg__item { color: var(--bone); }
a.seg__item:hover { background: var(--row-hover); color: var(--bone); }

/* The cost table. One <table> for both layouts. Below 1024 px, each group (tbody) is a card. */
.cost-table { display: block; }
.cost-table thead { display: none; }
.cost-table tbody { display: block; background: var(--carbon); border: 1px solid var(--graphite); border-radius: var(--radius); }
.cost-table tbody + tbody { margin-top: 12px; }
.cost-table tr { display: block; }
.cost-table td { display: block; height: auto; padding: 0; border-top: 0; }
.cost-table tbody tr:hover { background: none; }
.cost-group__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter) 8px; }
.cost-group__title { font-size: 18px; }
.cost-group__bar .amount { font-size: 18px; }
.cost-group__subtotals {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px var(--gutter);
  border-top: 1px solid var(--graphite);
  background: var(--subtotal-ground);
  color: var(--steel);
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: .04em;
}
/* A cost row on a phone: the description over "[Planned] payer · category · date", the amount, and the receipts.
   The description cell has display: contents, so its title, its planned tag, and its subline go into the grid of the row.
   Columns: the planned tag, the payer, the subline, the amount, and the receipts. */
.cost-table .cost-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto 52px;
  align-items: center;
  min-height: 60px;
  padding-left: var(--gutter);
  border-top: 1px solid var(--graphite);
}
.cost-table .cost-row__desc { display: contents; }
.cost-row__title {
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: end;
  overflow: hidden;
  padding: 10px 8px 0 0;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cost-row__desc > .tag-planned { grid-column: 1; grid-row: 2; align-self: start; margin: 3px 6px 10px 0; }
.cost-table .cost-row__payer { grid-column: 2; grid-row: 2; align-self: start; padding: 2px 0 10px; color: var(--steel); font-size: 13px; white-space: nowrap; }
.cost-row__meta { grid-column: 3; grid-row: 2; align-self: start; display: flex; flex-wrap: wrap; align-items: center; min-width: 0; padding: 2px 8px 10px 0; color: var(--steel); font-size: 13px; }
/* The payer comes before the subline, so each part of the subline starts with a dot. */
.cost-row__meta > span::before { content: "\00a0·\00a0"; }
.cost-row__category--desktop { display: none; }
.cost-table .cost-row__amount { grid-column: 4; grid-row: 1 / 3; padding: 0 8px; }
.cost-row__amount .amount { font-size: 18px; }
.cost-table .cost-row__receipts { grid-column: 5; grid-row: 1 / 3; align-self: stretch; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--graphite); }
/* The description is the edit link. It covers the row, so a tap anywhere on the row edits the cost (D32).
   The receipt links stay above it. */
.cost-table .cost-row { position: relative; }
a.cost-row__title { color: var(--bone); }
a.cost-row__title:hover { color: var(--bone); }
a.cost-row__title:focus-visible { outline: none; }
.cost-row__title::after { content: ""; position: absolute; inset: 0; }
.cost-row:has(.cost-row__title:focus-visible) { outline: 2px solid var(--sand); outline-offset: -2px; }
.cost-row__receipts .receipts__link { position: relative; z-index: 1; }
.cost-table .cost-row__edit,
.cost-table .cost-table__edit { display: none; }
/* While a row is in edit (D50): the other rows, the filter, and "Add cost" are inert and dim (DBikeDetail board). */
[data-lockable][inert],
.cost-table[data-editing] .cost-group__head,
.cost-table[data-editing] .cost-group__sub { opacity: .38; }
.who-tag { display: inline-flex; align-items: center; gap: 6px; }
.receipts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-family: var(--font-label); font-size: 14px; font-weight: 600; }
.receipts__link { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: var(--touch); min-height: var(--touch); }
.receipts__none { color: var(--ash); }

/* The settlement panels: shares and balances, who owes whom, and the transfers. */
/* Each segment has the avatar tone of its partner (avatar_tone), so the bar agrees with the avatars. */
/* The width attribute gives the basis. flex-shrink takes the gaps from the segments, so the bar does not overflow. */
.share-bar { display: flex; gap: 2px; height: 8px; overflow: hidden; }
.share-bar__seg { flex: 0 1 auto; min-width: 0; height: 8px; background: var(--avatar-1-fg); }
.share-bar__seg.avatar--2 { background: var(--avatar-2-fg); }
.share-bar__seg.avatar--3 { background: var(--avatar-3-fg); }
.partner-row,
.transfer-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px var(--gutter); border-top: 1px solid var(--graphite); }
.partner-row:first-child,
.transfer-row:first-child { border-top: 0; }
.partner-row__who,
.transfer-row__text { flex: 1; min-width: 0; }
.partner-row__value { display: flex; flex-direction: column; align-items: flex-end; }
.partner-row__value .amount { font-size: 18px; }
.partner-row__state { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.settle-status { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px var(--gutter); }
/* The debts and the transfers are on the settlement page on a phone (D60). From 1024 px, the right column shows them. */
.settlement-detail { display: none; }
.settle-status__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius); background: var(--sand-wash); color: var(--sand); }
.settle-status__body { flex: 1; min-width: 0; }
/* The link card to the settlement page, on a phone (BikeDetail board). From 1024 px, the right column has the sections. */
.settle-status--link { min-height: var(--touch); color: inherit; }
.settle-status--link:hover { color: inherit; border-color: var(--ash); }
.settle-status__go { color: var(--steel); }
.settle-status__title { font-size: 20px; font-weight: 700; }
.settle-status__text,
.transfer-row__meta { display: block; color: var(--steel); font-size: 13px; }
.transfer-row { position: relative; gap: 10px; font-size: 15px; }
/* The transfer row is the edit link. CSS stretches the link over the row, so a tap anywhere on it opens the form (D59). */
.transfer-row__link { color: inherit; }
.transfer-row__link::after { content: ""; position: absolute; inset: 0; }
.transfer-row__link:hover { color: var(--sand); }
.transfer-row .amount { font-size: 17px; }

/* The general costs page (GeneralCosts board). The heading has a sub line. The totals have 3 values, then the "Not settled" link card. */
.page-head__text { min-width: 0; }
.page-sub { margin-top: 4px; color: var(--steel); font-size: 15px; }
.kpis + .settle-status { margin-top: 12px; }
.cost-note { margin-top: 8px; padding: 0 var(--gutter); }
.partner-row__sub { display: block; color: var(--steel); font-size: 13px; font-weight: 400; }
/* The general cost row on a phone: the description over "[Planned] payer · date · participants".
   The columns are the planned tag, the payer, the date, the participants, the amount, and the receipts. */
.cost-table--general .cost-row { grid-template-columns: auto auto auto minmax(0, 1fr) auto 52px; }
.cost-table--general .cost-row__title { grid-column: 1 / 5; }
.cost-table--general .cost-row__meta { display: none; }
.cost-table--general .cost-row__date,
.cost-table--general .cost-row__shared { grid-row: 2; align-self: start; padding: 2px 0 10px; color: var(--steel); font-size: 13px; }
.cost-table--general .cost-row__date { grid-column: 3; }
.cost-table--general .cost-row__shared { grid-column: 4; min-width: 0; padding-right: 8px; }
.cost-table--general .cost-row__date::before,
.cost-table--general .cost-row__shared::before { content: "\00a0·\00a0"; }
.cost-table--general .cost-row__date--none { display: none; }
.cost-table--general .cost-row__amount { grid-column: 5; }
.cost-table--general .cost-row__receipts { grid-column: 6; }
/* The "Shared by" choice of the general cost form: one checkbox row for each partner. */
.participant-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px var(--gutter); border-top: 1px solid var(--graphite); font-size: 17px; cursor: pointer; }
.participant-row:first-child { border-top: 0; }
.participant-row input { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--sand); }
.participant-row__name { flex: 1; }
.participant-row:has(input:focus-visible) { outline: 2px solid var(--sand); outline-offset: -2px; }

/* Forms: a column of sections. A section is a fieldset with a section head as the legend. */
.form { display: flex; flex-direction: column; gap: 20px; }
.form-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-section > .section-head { width: 100%; min-height: 0; margin: 0 0 8px; padding: 0; }
.form-section__note { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.form-section__errors { margin-top: 8px; }
.form-errors {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--coral);
  border-radius: var(--radius);
  color: var(--coral);
  font-size: 15px;
}
.form-errors li { display: flex; align-items: center; gap: 6px; }
/* Two fields side by side in a field card (BikeForm board: model and year). */
.field-card__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--graphite); }
.field-card__row .field { border-top: 0; }
.field-card__row .field + .field { border-left: 1px solid var(--graphite); }
.field-card .field textarea { min-height: 0; padding: 4px 0; border: 0; background: transparent; }

/* A segmented choice of radio buttons (BikeForm board: the status). */
.seg {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  padding: 2px;
  background: var(--carbon);
  border: 1px solid var(--graphite);
  border-radius: var(--radius);
}
.seg__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  border-radius: var(--radius);
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.seg__item input,
.who input { position: absolute; opacity: 0; pointer-events: none; }
.seg__item:has(input:checked),
.seg__item[aria-current="page"] { background: var(--graphite); box-shadow: inset 0 -2px 0 var(--sand); }
.seg__item:has(input:focus-visible) { outline: 2px solid var(--sand); outline-offset: 2px; }

/* The share rows of the bike form: the partner by name and a percent field (BikeForm board). */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 56px; padding: 6px var(--gutter); border-top: 1px solid var(--graphite); }
.share-row:first-child { border-top: 0; }
.share-row__name { flex: 1; min-width: 0; font-size: 17px; }
.share-row__input { display: flex; align-items: center; gap: 6px; color: var(--steel); }
.share-row__input input {
  width: 76px;
  height: var(--touch);
  padding: 0 10px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--bone);
  font-family: var(--font-label);
  font-size: 18px;
  font-weight: 600;
  text-align: right;
}
.share-row__input input:focus-visible { outline-offset: 0; border-color: var(--sand); }
.share-row--invalid input { border-color: var(--coral); }
.share-row__errors { flex-basis: 100%; }
.share-total { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 var(--gutter); border-top: 1px solid var(--graphite); background: var(--row-hover); }
.share-total__value { font-family: var(--font-label); font-size: 18px; font-weight: 700; }
.share-total__value[data-ok] { color: var(--sand); }

/* "Who received the money": one avatar button for each partner (MarkSold board). */
.who-list { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 4px; padding: 12px 8px; background: var(--carbon); border: 1px solid var(--graphite); border-radius: var(--radius); }
.who { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; min-height: var(--touch); padding: 6px 0; font-size: 14px; cursor: pointer; }
.who .avatar { width: 48px; height: 48px; font-size: 17px; }
.who:has(input:checked) { font-weight: 700; }
.who:has(input:checked) .avatar { outline: 3px solid var(--sand); outline-offset: 2px; }
.who:has(input:focus-visible) .avatar { box-shadow: 0 0 0 7px var(--ink), 0 0 0 9px var(--bone); }

/* A large money input with the € sign (partials/amount_field.html): the sold price and the cost amount
   (MarkSold and CostForm boards). */
.amount-input { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; }
.amount-input__box { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.amount-input__currency { color: var(--steel); font-size: 32px; font-weight: 600; }
.amount-input input {
  width: 220px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  background: transparent;
  color: var(--bone);
  font-family: var(--font-label);
  font-size: 52px;
  font-weight: 700;
  text-align: center;
}
.amount-input input::placeholder { color: var(--ash); }
.amount-input input:focus-visible { outline: 0; border-bottom-color: var(--sand); }
.amount-input.field--invalid input { border-bottom-color: var(--coral); }

/* The cost form (CostForm board): the amount, the currency part, and the status on a phone.
   From 1024 px, the amount and the status share a row (DCostDrawer board). */
.cost-top { display: flex; flex-direction: column; gap: 4px; }
.cost-top__status { min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
.fx { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fx__toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 8px;
  color: var(--sand);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.fx__toggle::-webkit-details-marker { display: none; }
.fx__toggle:hover { color: var(--sand-hover); }
.fx[open] { align-items: stretch; }
.fx[open] .fx__toggle { align-self: center; }
.fx__note { display: flex; align-items: center; gap: 6px; color: var(--steel); font-size: 13px; }
.fx__note:empty { display: none; }
.fx__note .icon { color: var(--coral); }

/* The category: a row of radio chips (CostForm board). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--carbon);
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--sand); border-color: var(--sand); color: var(--ink); font-weight: 600; }
.chip:has(input:focus-visible) { outline: 2px solid var(--sand); outline-offset: 2px; }

/* The payer: the users, the common pot, and "Not yet" in one row of avatar radios (D48). */
.who-list--payer { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
.who-list--payer .who { width: auto; text-align: center; }
.avatar--none { background: transparent; color: var(--steel); border: 1px dashed var(--field-line); }

/* Two fields in a field card: one under the other on a phone, side by side in a drawer (DCostDrawer board). */
.field-card__split { border-top: 1px solid var(--graphite); }

/* A row of stats in a card: a label over an amount. */
.stat-row { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.stat + .stat { border-left: 1px solid var(--graphite); }
.stat .label { font-size: 11px; }

/* The page frame of a form (form_page.html): a phone, a direct URL, or no script. */
.form-page { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.form-page__body { display: flex; flex-direction: column; gap: 20px; }
.form-page__foot { display: flex; flex-direction: column; gap: 8px; }
.form-page__foot .btn { width: 100%; min-height: 50px; font-size: 17px; }

/* The head of a full-screen form: Cancel, the title, and Save (BikeForm and MarkSold boards).
   It replaces the top bar and the tab bar (form_page.html). */
.form-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) minmax(64px, auto);
  align-items: center;
  gap: 8px;
  min-height: var(--topbar-h);
  padding: 0 8px;
  background: var(--topbar-ground);
  border-bottom: 1px solid var(--graphite);
}
.form-head__title { min-width: 0; text-align: center; }
.form-head__heading { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.form-head__title .drawer__subtitle { margin: 0; font-size: 12px; }
.form-head__action {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--sand);
  font-size: 17px;
}
.form-head__action--save { justify-self: end; font-weight: 600; }
.shell--form .main { padding-bottom: calc(var(--safe-bottom) + 32px); }
.shell--form .page-head { display: none; }

.drawer__subtitle { margin-top: 2px; color: var(--steel); font-size: 13px; }
/* A dialog with a form: head, body that scrolls, and foot, as in a drawer. */
.dialog--form[open] { display: flex; flex-direction: column; }

/* A row of buttons. */
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The login page (Main and DLogin boards). */
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  min-height: 100dvh;
  padding: 24px;
  max-width: 448px;
  margin: 0 auto;
}
.login__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.login__logo { width: 300px; max-width: 100%; height: auto; }
.login__rule { width: 100%; margin-top: 12px; }
.login__title { font-size: 30px; }
.login__form { display: flex; flex-direction: column; gap: 16px; }
.login__fields .field__label { font-weight: 500; }
.login__error { display: flex; align-items: center; gap: 6px; color: var(--coral); font-size: 14px; }
.login__note { text-align: center; font-size: 13px; color: var(--steel); }

/* Uploads (ReceiptUpload and BikeForm boards, D51). The uploader is partials/uploader.html. static/js/upload.js writes the rows. */
.uploader { display: flex; flex-direction: column; }
.uploader__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px var(--gutter); }
.uploader__pick { flex: 1 1 140px; cursor: pointer; }
/* The input is a real, focusable file input. Its label is the button, so the label shows the focus. */
.uploader__input:focus-visible + .uploader__pick { outline: 2px solid var(--sand); outline-offset: 3px; }
.uploader__input:disabled + .uploader__pick { opacity: .5; cursor: not-allowed; }
/* Photos: dashed 76 px tiles (BikeForm board). */
.uploader--tiles .uploader__actions { flex-wrap: nowrap; }
.uploader--tiles .uploader__pick {
  flex: 0 0 76px;
  flex-direction: column;
  gap: 4px;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 1px dashed var(--field-line);
  background: transparent;
  color: var(--sand);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.uploader--tiles .uploader__pick:hover { background: var(--row-hover); }
.uploader--tiles .uploader__pick .icon { width: 22px; height: 22px; }
.uploader__list:empty { display: none; }
.uploader__notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 var(--gutter) 12px; color: var(--steel); font-size: 14px; }
.upload-row { display: flex; align-items: center; gap: 12px; padding: 12px var(--gutter); border-top: 1px solid var(--graphite); }
.upload-row__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--field);
  color: var(--field-line);
}
.upload-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-row__main { flex: 1; min-width: 0; }
.upload-row__name { overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.upload-row__meta { color: var(--steel); font-size: 13px; }
.upload-row__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.upload-row--error .upload-row__thumb { background: var(--error-ground); color: var(--coral); }
.upload-row--error .upload-row__meta { color: var(--coral); }
.upload-row--done .upload-row__thumb { color: var(--sand); }
.upload-row__bar { display: block; width: 100%; height: 6px; margin-top: 6px; border: 0; border-radius: 3px; background: var(--graphite); appearance: none; overflow: hidden; }
.upload-row__bar::-webkit-progress-bar { background: var(--graphite); }
.upload-row__bar::-webkit-progress-value { background: var(--sand); }
.upload-row__bar::-moz-progress-bar { background: var(--sand); }

/* The saved files of an owner in a card: the photos of the bike form, the receipts of the cost form. */
.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px var(--gutter) 0; }
.photo-strip__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--field);
  color: var(--field-line);
}
.photo-strip__item img { width: 100%; height: 100%; object-fit: cover; }
.photo-strip__cover,
.gallery__cover {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: var(--radius);
  background: var(--chip-ground);
  color: var(--bone);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.attach-row { display: flex; align-items: center; gap: 4px; padding: 0 4px 0 0; border-top: 1px solid var(--graphite); }
.attach-row:first-child { border-top: 0; }
.attach-row__main { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 8px 0 8px var(--gutter); color: var(--bone); }
.attach-row__main:hover { color: var(--bone); }
.attach-row__thumb { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; overflow: hidden; border-radius: var(--radius); background: var(--field); color: var(--field-line); }
.attach-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.attach-row__text { display: flex; flex-direction: column; min-width: 0; }
.attach-row__name { overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.attach-row__meta { overflow: hidden; color: var(--steel); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.attach-list + .uploader,
.empty-state + .uploader { border-top: 1px solid var(--graphite); }

/* The gallery and the viewer: a dialog from 1024 px, a page on a phone (Gallery and Viewer boards, D52, D53). */
.media-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(var(--touch), auto) minmax(0, 1fr) minmax(var(--touch), auto);
  align-items: center;
  gap: 4px;
  min-height: var(--topbar-h);
  padding: env(safe-area-inset-top, 0px) 4px 0;
  background: var(--topbar-ground);
  border-bottom: 1px solid var(--graphite);
}
.media-head__title { min-width: 0; text-align: center; }
.media-head__heading { overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.media-head__sub { overflow: hidden; color: var(--steel); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.media-head__actions { display: flex; align-items: center; justify-self: end; }
.media-head__add { font-size: 17px; }
.shell--media .main { padding: 0 0 calc(var(--safe-bottom) + 24px); }
.shell--media .page { gap: 0; }
.shell--media .page-head { display: none; }
.dialog--media { height: 100dvh; max-height: 100dvh; border: 0; }
.dialog--media[open] { display: flex; flex-direction: column; }
.media { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.media__body { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; }

.gallery { display: flex; flex-direction: column; }
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.gallery__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--field);
  color: var(--field-line);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item:focus-visible { outline-offset: -3px; }
.gallery__nopreview { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; font-size: 12px; text-align: center; }
.gallery__nopreview-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery__hint { padding: 12px var(--gutter) 0; color: var(--steel); font-size: 13px; }
.gallery > .card { margin: var(--gutter); }
.media__body > .uploader:not(:has(.uploader__list:not(:empty))):not(:has(.uploader__notice:not([hidden]))) { display: none; }
.media__body > .uploader { border-bottom: 1px solid var(--graphite); }

.viewer { display: flex; flex: 1; flex-direction: column; min-height: 0; padding-top: 12px; background: var(--ink); }
.shell--media .viewer { min-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px)); }
.viewer__stage {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  margin: 0 var(--gutter);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--stage-ground);
}
.viewer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.viewer__file { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--steel); text-align: center; }
.viewer__file .icon { width: 40px; height: 40px; --icon-stroke: 1.2; }
.viewer__file-name { max-width: 100%; overflow-wrap: anywhere; color: var(--bone); font-size: 16px; font-weight: 500; }
.viewer__file-meta { margin-bottom: 8px; font-size: 13px; }
.viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  margin-top: calc(var(--touch) / -2);
  border-radius: var(--radius);
  background: var(--fab-ground);
  color: var(--bone);
}
.viewer__nav:hover { background: var(--graphite); color: var(--bone); }
.viewer__nav--prev { left: 8px; }
.viewer__nav--next { right: 8px; }
.viewer__info { display: flex; flex-direction: column; gap: 6px; padding: 12px var(--gutter) 20px; }
.viewer__caption { display: flex; flex-direction: column; gap: 4px; }
.viewer__caption-label { font-size: 11px; }
.viewer__caption-input {
  height: var(--touch);
  padding: 0 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field);
  font-size: 16px;
}
.viewer__caption-input:focus-visible { outline: 0; border-color: var(--sand); }
.viewer__caption.field--invalid .viewer__caption-input { border-color: var(--coral); }
.viewer__meta { color: var(--steel); font-size: 13px; }

/* The photo of the bike head is a link to the gallery (D52). */
.bike-hero__link { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.bike-hero__link:focus-visible { outline-offset: -3px; }

/* The Overview page (Overview board, D71). Read only: the totals, the profit per partner, the debts, and the bike table. */
.overview-warnings { margin-bottom: 12px; }
.overview-warnings li { align-items: flex-start; }
.overview-warnings .icon { flex-shrink: 0; margin-top: 2px; }
.overview-warnings a { color: inherit; text-decoration: underline; }
.overview-totals { display: grid; gap: 8px; }
/* Four totals in two columns on a phone, in one row from 1024 px. */
.kpis__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis__list--4 .kpi { border: 0; }
.kpis__list--4 .kpi:nth-child(even) { border-left: 1px solid var(--graphite); }
.kpis__list--4 .kpi:nth-child(n + 3) { border-top: 1px solid var(--graphite); }
.kpis__list--4 .amount { font-size: 22px; }
.kpi__note { display: block; margin-top: 2px; color: var(--steel); font-size: 12px; line-height: 1.35; }
.kpi__part { white-space: nowrap; }
.status-strip__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; text-align: center; }
.status-strip__item { display: flex; flex-direction: column-reverse; min-width: 0; padding: 12px 4px; }
.status-strip__item + .status-strip__item { border-left: 1px solid var(--graphite); }
.status-strip__item dd { margin: 0; font-family: var(--font-label); font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.status-strip__item .label { font-size: 11px; white-space: nowrap; }
.panel-note { margin-top: 8px; padding: 0 var(--gutter); color: var(--steel); font-size: 13px; }
.overview-totals + .panel-note { margin-bottom: -8px; }

/* The switch Made / Expected is a radio group. The checked radio hides the other profit column on a phone. :where() keeps the
   specificity low, so the desktop layer shows both columns again. */
.overview-switch { min-width: 0; margin: 0 0 10px; padding: 0; border: 0; }
@supports selector(:has(*)) {
  :where(.overview-partners:has(#profit-view-made:checked)) .profit-col--expected,
  :where(.overview-partners:has(#profit-view-expected:checked)) .profit-col--made { display: none; }
}
/* Without :has() the switch cannot work, so a phone shows both columns and no switch. */
@supports not selector(:has(*)) {
  .overview-switch { display: none; }
}
.th-desktop { display: none; }

/* The tables of the Overview. A row head (th scope="row") has the body style, not the column head style. */
.overview-table .amount { font-size: 18px; }
.overview-table .amount--sm { font-size: 16px; }
.overview-table tbody th,
.overview-table tfoot th {
  height: 52px;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--graphite);
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--bone);
}
.overview-table td { padding-left: 8px; }
.overview-table tbody tr:first-child th { border-top: 0; }
.overview-table tfoot th,
.overview-table tfoot td { background: var(--subtotal-ground); border-top: 1px solid var(--graphite); }
.overview-table tfoot th { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.overview-who { display: flex; align-items: center; gap: 10px; }

/* The debts: one <details> for each line. The summary is the line. The body has the balances in each source. */
.debt + .debt { border-top: 1px solid var(--graphite); }
.debt__summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px var(--gutter); cursor: pointer; list-style: none; }
.debt__summary::-webkit-details-marker { display: none; }
.debt__summary:hover { background: var(--row-hover); }
.debt__summary:focus-visible { outline-offset: -2px; }
.debt__who { flex: 1; min-width: 0; font-weight: 600; }
.debt__summary .amount { font-size: 18px; }
.debt__chevron { display: flex; color: var(--steel); }
.debt__details[open] .debt__chevron .icon { transform: rotate(90deg); }
.debt__body { padding: 0 var(--gutter) 12px; }
.debt__note { margin: 0 0 4px; color: var(--steel); font-size: 13px; }
.debt-table { width: 100%; border-collapse: collapse; }
.debt-table th,
.debt-table td { padding: 11px 0; border-top: 1px solid var(--graphite); font-weight: 500; text-align: left; }
.debt-table thead th { padding: 8px 0; border-top: 0; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.debt-table .num { padding-left: 12px; text-align: right; }
.debt-table .amount { font-size: 16px; }
.debt-table a { color: var(--bone); }

/* The bike table. On a phone the state is a small label after the name, and the state column is hidden. */
.overview-bike-table { table-layout: fixed; }
.overview-bike-table .num { width: 58px; padding: 0 6px 0 0; }
.overview-bike-table .num:last-child { width: 74px; padding-right: 12px; }
.overview-bike-table th:first-child { padding-left: 12px; }
.overview-bike__link { display: inline-flex; align-items: center; min-height: var(--touch); line-height: 1.2; color: var(--bone); font-weight: 600; }
.overview-bike__link:hover { color: var(--sand); }
.overview-bike__state-col { display: none; }
.overview-bike__margin { font-family: var(--font-label); font-weight: 600; letter-spacing: .02em; color: var(--steel); }
.overview-state { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.overview-state--invalid_shares { color: var(--coral); }
/* The name never truncates. The name and the small "· state" are one line when they fit (Overview board). If not, the state goes under the name. */
.overview-bike__cell { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; }
.overview-state--inline { flex-shrink: 0; font-size: 10px; letter-spacing: .06em; white-space: nowrap; }
.overview-state--inline:not(.overview-state--invalid_shares)::before { content: "·"; margin-right: 3px; }

/* ---------------------------------------------------------------- 5. Utilities */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.muted { color: var(--steel); }
.stack { display: flex; flex-direction: column; gap: var(--gutter); }

/* The saving state (States board): while the request of a form runs, its main button shows a ring and takes no tap.
   HTMX puts .htmx-request on the form. The ring is still when the user asks for less motion. */
.drawer:has(form.htmx-request) .drawer__foot .btn--primary,
.dialog:has(form.htmx-request) .btn--danger,
.shell--form:has(form.htmx-request) .form-page__foot .btn,
.shell--form:has(form.htmx-request) .form-head__action--save { pointer-events: none; }
.drawer:has(form.htmx-request) .drawer__foot .btn--primary::before,
.dialog:has(form.htmx-request) .btn--danger::before,
.shell--form:has(form.htmx-request) .form-page__foot .btn--primary::before,
.shell--form:has(form.htmx-request) .form-page__foot .btn--danger::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .18s ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
  .drawer:has(form.htmx-request) .drawer__foot .btn--primary::before,
  .dialog:has(form.htmx-request) .btn--danger::before,
  .shell--form:has(form.htmx-request) .form-page__foot .btn--primary::before,
  .shell--form:has(form.htmx-request) .form-page__foot .btn--danger::before { animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}

/* ---------------------------------------------------------------- 6. Desktop (D32) */

@media (min-width: 1024px) {
  body { font-size: 15px; line-height: 1.4; }

  .shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  /* The side bar replaces the top bar and the tab bar. */
  .topbar { display: none; }

  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100dvh;
    padding: 24px 12px;
    border-right: 1px solid var(--graphite);
  }
  .sidebar__logo { display: block; align-self: flex-start; margin: 0 12px 28px; }
  .sidebar__logo img { height: 20px; width: auto; }

  .mainnav { position: static; padding: 0; background: none; border: 0; }
  .mainnav__list { flex-direction: column; align-items: stretch; height: auto; gap: 4px; }
  .mainnav__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: auto;
    height: var(--touch);
    padding: 0 12px;
    color: var(--nav-text);
    font-size: 15px;
  }
  .mainnav__item .icon { width: 20px; height: 20px; }
  .mainnav__item:hover { background: var(--carbon); color: var(--bone); }
  .mainnav__item[aria-current="page"] { background: var(--carbon); color: var(--bone); box-shadow: inset 2px 0 0 var(--sand); }
  .mainnav__item[aria-current="page"] .icon { color: var(--sand); }

  .sidebar__account {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin-top: auto;
    padding: 0 12px;
    border: 0;
    border-top: 1px solid var(--graphite);
    background: transparent;
    color: var(--bone);
    font-weight: 500;
    text-align: left;
  }
  .sidebar__account:hover { background: var(--carbon); }
  .sidebar__account .avatar { width: 28px; height: 28px; font-size: 12px; }

  .main { padding: 32px 40px 48px; }

  .page-head { margin-bottom: 24px; }
  .page-title { font-size: 40px; }

  .page-actions { position: static; gap: 12px; }

  .search-btn {
    justify-content: flex-start;
    width: 286px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--graphite);
    background: var(--carbon);
    color: var(--steel);
    font-size: 14px;
  }
  .search-btn .icon { width: 18px; height: 18px; }
  .search-btn__label { display: inline; }

  .page-add { width: auto; padding: 0 18px; background: var(--sand); color: var(--ink); font-size: 15px; }
  .page-add:hover { background: var(--sand-hover); color: var(--ink); }
  .page-add .icon { width: 18px; height: 18px; }
  .page-add__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

  /* The right column: shares, balances, and who pays whom (D32). */
  .page:has(> .page__aside:not(:empty)) {
    grid-template-columns: minmax(0, 1fr) var(--aside-w);
    gap: 24px;
    align-items: start;
  }

  .btn { font-size: 15px; }
  .btn--block { min-height: 48px; font-size: 15px; }

  .field input,
  .field select { min-height: var(--touch); font-size: 15px; }
  .field__label { font-size: 11px; }

  .table td.num { font-size: 17px; }

  .dialog {
    width: 440px;
    margin: auto;
    border: 1px solid var(--graphite);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .dialog__body { padding: 24px; }

  .drawer {
    width: var(--drawer-w);
    margin: 0 0 0 auto;
    border-left: 1px solid var(--graphite);
    box-shadow: -12px 0 32px rgba(0, 0, 0, .5);
  }
  .drawer__head { padding: 20px 16px 16px 28px; }
  .drawer__body { padding: 24px 28px; }
  .drawer__foot { padding: 16px 28px; }

  /* The Overview (DOverview board): the totals and the status counts are one card, the partners and the debts are the left column. */
  .overview-warnings { margin-bottom: 16px; }
  .overview-totals { grid-template-columns: minmax(0, 4fr) minmax(0, 1.3fr); gap: 0; }
  .overview-totals .kpis { border-right: 0; }
  .kpis__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis__list--4 .kpi { padding: 16px 18px; }
  .kpis__list--4 .kpi:nth-child(n + 3) { border-top: 0; }
  .kpis__list--4 .kpi:nth-child(n + 2) { border-left: 1px solid var(--graphite); }
  .kpis__list--4 .amount { font-size: 32px; }
  .status-strip { display: flex; align-items: center; }
  .status-strip__list { flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 4px; }
  .status-strip__item { padding: 0; }
  .status-strip__item + .status-strip__item { border-left: 0; }
  .status-strip__item .label { font-size: 10px; }
  .panel-note { padding: 0; }
  .overview-totals + .panel-note { margin-bottom: 0; }
  .overview-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .overview-switch { display: none; }
  .overview-partners .section-head { justify-content: flex-start; gap: 4px; }
  .overview-partners .profit-col { display: table-cell; }
  .th-phone { display: none; }
  .th-desktop { display: inline; }
  .overview-bike-table { table-layout: auto; }
  .overview-bike-table .num,
  .overview-bike-table .num:last-child { width: auto; padding: 0 var(--gutter); }
  .overview-bike-table th:first-child { padding-left: var(--gutter); }
  .overview-bike__state-col { display: table-cell; }
  .overview-state--inline { display: none; }

  /* The bike list as a table (DBikeList board). */
  .filters { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; gap: 2px; padding: 2px; background: var(--carbon); border: 1px solid var(--graphite); border-radius: var(--radius); }
  .filters__item { min-height: 36px; padding: 0 16px; border: 0; background: transparent; font-size: 13px; }
  .filters__item:hover { background: var(--graphite); }
  .filters__item[aria-current="page"] { background: var(--graphite); color: var(--bone); box-shadow: inset 0 -2px 0 var(--sand); }
  .filters__count { margin-left: 2px; opacity: 1; color: var(--steel); }

  .bike-table { display: table; background: var(--carbon); border: 1px solid var(--graphite); }
  .bike-table thead { display: table-header-group; }
  .bike-table tbody { display: table-row-group; }
  .bike-row { display: table-row; background: none; border: 0; }
  .bike-table .bike-row > td {
    display: table-cell;
    height: 52px;
    padding: 8px var(--gutter);
    border: 0;
    border-top: 1px solid var(--graphite);
    text-align: left;
    vertical-align: middle;
  }
  .bike-table tbody .bike-row:first-child > td { border-top: 0; }
  .bike-table .bike-row > .num { text-align: right; }
  .bike-table .bike-row__stat + .bike-row__stat { border-left: 0; }
  .bike-table .bike-row > .bike-row__photo { width: 80px; padding-right: 0; }
  .bike-row__img,
  .bike-row__nophoto { width: 64px; height: 44px; }
  .bike-row__nophoto .icon { width: 22px; height: 22px; }
  .bike-row__link { font-family: var(--font-body); font-size: 16px; font-weight: 600; text-transform: none; }
  .bike-table .bike-row__status { position: static; pointer-events: auto; }
  .bike-row__added-inline { display: none; }
  .bike-row__meta { margin-top: 0; font-family: var(--font-body); font-size: 13px; letter-spacing: 0; }
  .bike-table .bike-row__added { color: var(--steel); white-space: nowrap; }
  .bike-row__k { display: none; }
  .bike-row__sub { display: block; font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
  .bike-row__stat .amount { font-size: 17px; }
  .bike-row__stat--profit .amount { font-size: 18px; }
  .bike-table .bike-row > .bike-row__margin { display: table-cell; color: var(--steel); }
  .bike-row:has(.bike-row__link:focus-visible) { outline-offset: -2px; }

  /* The bike page (DBikeDetail board): a breadcrumb, then the photo, the title, and the actions in one row. */
  .bike-head {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) auto;
    grid-template-areas: "crumbs crumbs crumbs" "hero text actions";
    align-items: center;
    gap: 16px 20px;
    margin-bottom: 24px;
  }
  .crumbs { position: static; grid-area: crumbs; display: flex; gap: 4px; font-size: 14px; }
  .crumbs__back { width: auto; height: auto; background: none; color: var(--sand); }
  .crumbs__back:hover { background: none; color: var(--sand-hover); }
  .crumbs__back .icon { display: none; }
  .crumbs__label,
  .bike-action__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .crumbs__current { display: inline; color: var(--steel); }
  .crumbs__current::before { content: "/ "; }
  .bike-hero { grid-area: hero; width: 160px; height: 104px; margin: 0; border-radius: var(--radius); }
  .bike-hero__nophoto .icon { width: 40px; height: 40px; --icon-stroke: 1.6; }
  .bike-hero__count { right: 6px; bottom: 6px; min-height: 0; padding: 2px 6px; font-size: 12px; }
  .bike-head__text { grid-area: text; }
  .bike-head__title { justify-content: flex-start; gap: 12px; }
  .bike-head .page-title { font-size: 40px; line-height: 1; }
  .bike-head__meta { margin-top: 4px; font-size: 17px; }
  .bike-head__added { display: inline; }
  .bike-head__actions { position: static; grid-area: actions; }
  .bike-action { width: auto; gap: 8px; padding: 0 18px; background: var(--graphite); font-weight: 600; }
  .bike-action:hover { background: var(--graphite-hover); }
  .bike-action .icon { width: 16px; height: 16px; }

  .kpis__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kpi { padding: 16px 18px; }
  .kpi:nth-child(n) { border-top: 0; border-left: 1px solid var(--graphite); }
  .kpi:first-child { border-left: 0; }
  .kpi--profit { grid-column: auto; }
  .kpi--profit dd { display: block; }
  .kpi .amount { font-size: 26px; }
  .kpi__sub { display: block; margin-top: 2px; font-size: 12px; }

  .bike-costs__head { flex-wrap: nowrap; }
  .seg--links { display: inline-grid; flex-basis: auto; margin-bottom: 0; }
  .seg--links .seg__item { min-height: 36px; padding: 0 16px; font-size: 13px; }

  .cost-table { display: table; background: var(--carbon); border: 1px solid var(--graphite); }
  .cost-table thead { display: table-header-group; }
  .cost-table tbody { display: table-row-group; background: none; border: 0; }
  .cost-table tr,
  .cost-table .cost-row { display: table-row; }
  .cost-table td { display: table-cell; height: 52px; padding: 0 var(--gutter); border-top: 1px solid var(--graphite); }
  .cost-table tbody tr:hover { background: var(--row-hover); }
  .cost-table tbody tr:first-child td { border-top: 0; }
  .cost-table .cost-group__head td { height: 48px; background: var(--subtotal-ground); }
  .cost-group__bar { padding: 0; }
  .cost-group__bar .amount { font-size: 17px; }
  .cost-table .cost-group__sub td { height: 38px; }
  .cost-table .cost-group__head:hover,
  .cost-table .cost-group__sub:hover { background: none; }
  .cost-group__subtotals { justify-content: flex-end; padding: 0; border-top: 0; background: none; }
  .cost-table .cost-row__desc { display: table-cell; padding-top: 8px; padding-bottom: 8px; }
  .cost-row__title { display: block; padding: 0; white-space: normal; }
  .cost-table .cost-row { padding-left: 0; }
  .cost-row__desc > .tag-planned { margin: 0 6px 0 0; }
  .cost-row__meta { display: inline-flex; padding: 0; }
  .cost-row__meta > span::before { content: none; }
  .cost-row__meta > span + span::before { content: "\00a0·\00a0"; }
  .cost-row__category--desktop { display: inline; }
  .cost-table .cost-row__payer { padding: 0 var(--gutter); color: var(--bone); font-size: 15px; }
  .cost-table .cost-row__amount { padding: 0 var(--gutter); text-align: right; }
  .cost-row__amount .amount { font-size: 17px; }
  .cost-table .cost-row__receipts { display: table-cell; width: 64px; text-align: center; border-left: 0; }
  .table th.cost-table__receipts { text-align: center; }
  /* The general cost table (DGeneralCosts board): the participants and the date are columns. */
  .page-sub { margin-top: 2px; font-size: 16px; }
  .kpis__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cost-note { padding: 0; }
  .cost-table--general .cost-row__meta { display: inline-flex; }
  .cost-table--general .cost-row__date,
  .cost-table--general .cost-row__shared { padding: 0 var(--gutter); font-size: 15px; }
  .cost-table--general .cost-row__date::before,
  .cost-table--general .cost-row__shared::before { content: none; }
  .cost-table--general .cost-row__date--none { display: table-cell; }
  .receipts__link { min-width: 0; min-height: 36px; padding: 0 3px; }

  /* The edit link of a cost row: the pen column (DBikeDetail board). */
  .cost-table .cost-row__edit,
  .cost-table .cost-table__edit { display: table-cell; width: 44px; padding: 0 12px 0 0; color: var(--steel); }
  .cost-row:hover .cost-row__edit { color: var(--bone); }

  /* The edit rows of a cost (DBikeDetail board, D32, D50): sand lines above and below, boxed inputs. */
  .cost-table .cost-edit,
  .cost-table .cost-edit:hover { background: var(--edit-ground); }
  .cost-table .cost-edit td { height: auto; padding: 12px 8px 6px; vertical-align: top; }
  .cost-table .cost-edit td:first-child { padding-left: var(--gutter); }
  .cost-table .cost-edit td:last-child { padding-right: var(--gutter); }
  .cost-table .cost-edit:not(.cost-edit--foot) td { box-shadow: inset 0 1px 0 var(--sand); }
  .cost-table .cost-edit--foot td { padding: 6px var(--gutter) 10px; border-top: 0; box-shadow: inset 0 -1px 0 var(--sand); }
  .cost-edit .field input,
  .cost-edit .field select { min-height: 40px; padding: 0 10px; }
  .cost-edit__amount input { text-align: right; }
  .cost-edit__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .cost-edit__meta { color: var(--steel); font-size: 13px; }
  .cost-edit__meta > span + span::before { content: " · "; }
  .cost-edit__bar .btn { min-height: 38px; }

  /* The cost drawer (DCostDrawer board): the amount and the status in a row, boxed inputs, compact chips. */
  .drawer .cost-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "amount status" "fx fx"; align-items: end; gap: 12px; }
  .drawer .cost-top__amount { grid-area: amount; }
  .drawer .cost-top__status { grid-area: status; margin: 0; }
  .drawer .cost-top__status .seg__item { min-height: 46px; padding: 0 16px; }
  .drawer .fx { grid-area: fx; align-items: flex-start; margin-top: -6px; }
  .drawer .fx[open] { align-items: stretch; }
  .drawer .fx__toggle,
  .drawer .fx[open] .fx__toggle { align-self: flex-start; min-height: 32px; padding: 0; }
  .drawer .amount-input { align-items: stretch; padding: 0; }
  .drawer .amount-input__box { align-items: center; justify-content: flex-start; height: 52px; padding: 0 10px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--field); }
  .drawer .amount-input__box:focus-within { border-color: var(--sand); }
  .drawer .amount-input__currency { font-size: 20px; }
  .drawer .amount-input input { width: 100%; border: 0; font-size: 26px; line-height: 1; text-align: left; }
  .drawer .amount-input.field--invalid .amount-input__box { border-color: var(--coral); }
  .drawer .chip { min-height: 40px; padding: 0 12px; border-color: var(--graphite); background: transparent; color: var(--nav-text); font-size: 14px; font-weight: 500; }
  .drawer .chip:has(input:checked) { background: var(--graphite); border-color: var(--graphite); box-shadow: inset 0 -2px 0 var(--sand); color: var(--bone); font-weight: 500; }
  .drawer .who-list--payer { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 0; background: none; border: 0; }
  .drawer .who-list--payer .who { flex-direction: row; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--graphite); border-radius: var(--radius); color: var(--nav-text); font-size: 14px; font-weight: 500; }
  .drawer .who-list--payer .who .avatar { width: 22px; height: 22px; font-size: 10px; }
  .drawer .who-list--payer .who:has(input:checked) { background: var(--graphite); box-shadow: inset 0 -2px 0 var(--sand); color: var(--bone); }
  .drawer .who-list--payer .who:has(input:checked) .avatar { outline: 0; }
  .drawer .who-list--payer .who:has(input:focus-visible) { outline: 2px solid var(--sand); outline-offset: 2px; }
  .drawer .who-list--payer .who:has(input:focus-visible) .avatar { box-shadow: none; }
  .drawer .field-card__split { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; border: 0; }
  .drawer .fx .field-card__row { gap: 12px; border: 0; }
  .drawer .fx .field-card__row .field + .field { border-left: 0; }
  .drawer .field-card .field select { min-height: var(--touch); padding: 0 10px; border: 1px solid var(--field-line); background: var(--field); font-size: 15px; }

  /* "Add cost" is a button in the head from 1024 px. */
  .bike-add { position: static; min-height: var(--touch); font-size: 15px; box-shadow: none; }
  .shell--pushed .main:has(.bike-add) { padding-bottom: 48px; }
  .shell--pushed:has(.bike-add) ~ .toasts { bottom: 24px; }

  /* The pushed shell keeps the side bar from 1024 px. */
  .shell--pushed .mainnav { display: block; }
  .shell--pushed ~ .toasts { bottom: 24px; }
  .shell--pushed .banner { top: 16px; }

  .bike-settlement > .panel:first-child > .section-head { margin-top: 0; }
  .share-bar,
  .share-bar__seg { height: 6px; }
  .partner-row__state { font-size: 10px; }
  .settle-status--link { display: none; }
  .settlement-detail { display: contents; }

  .form-page__foot { flex-direction: row; }
  .form-page__foot .btn { width: auto; min-height: var(--touch); font-size: 15px; }
  /* A full-screen form has no side bar: one column. */
  .shell--form { grid-template-columns: minmax(0, 1fr); }
  .share-row__input input { height: 40px; font-size: 17px; }
  .dialog--form { width: 520px; max-height: 90dvh; }

  /* The gallery and the viewer are large dialogs (Gallery and Viewer boards). */
  .dialog--media { width: min(960px, calc(100vw - 80px)); height: min(780px, 90dvh); max-height: 90dvh; border: 1px solid var(--graphite); }
  /* The gallery is as high as its grid. The viewer keeps the fixed height for its stage. */
  .dialog--media:has(.gallery) { height: fit-content; min-height: 360px; }
  .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .media__body > .uploader { border-bottom: 0; }
  .viewer__stage { margin: 0 24px; }
  .viewer__info { padding: 16px 24px 24px; }
  .media-head { padding-top: 0; }
  .uploader--tiles .uploader__actions { padding: 12px 16px; }

  .toasts { left: auto; right: 24px; bottom: 24px; width: 360px; }
  .dialog > .toasts,
  .drawer > .toasts { top: auto; bottom: 24px; }

  .banner { top: 16px; }

  /* The login page: a card with boxed fields (DLogin board). */
  .login { max-width: 400px; padding: 0; gap: 28px; }
  .login__brand { gap: 16px; }
  .login__logo { width: 260px; }
  .login__rule { margin-top: 0; }
  .login__form { padding: 24px; background: var(--carbon); border: 1px solid var(--graphite); border-radius: var(--radius); }

  /* Boxed fields: the login card, and a field card in a drawer or a form dialog (DLogin and DCostDrawer boards). */
  .login__fields,
  .drawer .field-card,
  .dialog--form .field-card { display: flex; flex-direction: column; gap: 16px; background: none; border: 0; }
  .login__fields .field,
  .drawer .field-card .field,
  .dialog--form .field-card .field { padding: 0; border: 0; }
  .login__fields .field input,
  .drawer .field-card .field :is(input, textarea),
  .dialog--form .field-card .field input {
    min-height: var(--touch);
    padding: 0 10px;
    border: 1px solid var(--field-line);
    background: var(--field);
    font-size: 15px;
  }
  .drawer .field-card .field textarea { min-height: 72px; padding: 10px; }
  .login__fields .field input:focus-visible,
  .drawer .field-card .field :is(input, textarea):focus-visible,
  .dialog--form .field-card .field input:focus-visible { outline: 0; border-color: var(--sand); }
  .drawer .field-card__row { gap: 12px; border: 0; }
  .drawer .field-card__row .field + .field { border-left: 0; }
}