/* FleetFault's own styles, loaded after the kit's app.css. Keep it to what the kit does not have. The page base
   (border-box, body margin and font) is the kit's (tokens.css), and the kit's frame - header, hero, bands, bars, tabs,
   tables - is never restyled here (the gate's `restyle` check): what the kit lacks goes into the kit. */

/* The one destructive action: the kit has no danger button, so it borrows the recording colour. */
.ff-danger {
  border-color: var(--c-rec);
  background: transparent;
  color: var(--c-rec);
}
.ff-danger:hover { background: var(--c-surface-2); }
.ff-danger:focus-visible { outline: 2px solid var(--c-rec); outline-offset: 2px; }

/* The fault report a driver files from a sticker. Phone first: one column at 375 px, and every answer is a large
   tap target that is a real radio button, so the form works without a script. */
.ff-report { padding-bottom: 2rem; }
.ff-report .mx-btn { min-height: 44px; }
@media (max-width: 29.99rem) { .ff-report form .mx-btn { width: 100%; } }

/* Touch targets. The kit's coarse-pointer layer lifts buttons and fields to 44 px, but not the header, the tab bar,
   the footer's links or a driver's native file picker, so those get it here. Measured at 375 px in Chromium. */
@media (hover: none) and (pointer: coarse) {
  .ff-report input:not([type='checkbox']):not([type='radio']),
  .ff-report select,
  .ff-report textarea { min-height: 44px; }
  .ff-report input[type='file'] { min-height: 44px; padding: 0.375rem 0; }
  .ff-report input[type='file']::file-selector-button {
    min-height: 2.75rem;
    margin-right: 0.75rem;
    padding: 0 1rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    color: var(--c-ink);
    font: inherit;
    cursor: pointer;
  }
  /* The brand, the nav, the tabs and the footer are the kit's to size (44px on a coarse pointer).
     Small-text links (.mx-sub a, the sign-in/sign-up hints and the map link), a plate in the vehicles table
     (.mx-table td a) and the vehicles list's tick box (a <label> round its checkbox) are the kit's too now. */
  .mx-crumb a, .ff-facts dd a { display: inline-flex; align-items: center; min-height: 44px; }
}
.ff-langs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.ff-lang[aria-current='true'] { border-color: var(--c-accent); color: var(--c-ink); font-weight: 600; }
/* "More languages": the rest of the 42, opened in place (no script). */
.ff-langs__more { display: contents; }
.ff-langs__more > summary { list-style: none; cursor: pointer; }
.ff-langs__more > summary::-webkit-details-marker { display: none; }
.ff-langs__all { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ff-vehicle { margin-top: 1rem; padding: 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.ff-vehicle__plate { margin: 0; font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.ff-vehicle__facts { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; }
.ff-vehicle__facts div { display: grid; gap: 0.125rem; }
.ff-vehicle__facts dt { color: var(--c-ink-muted); font-size: 0.875rem; }
.ff-vehicle__facts dd { margin: 0; overflow-wrap: anywhere; }
.ff-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.ff-choices legend { padding: 0; margin-bottom: 0.5rem; }
.ff-choices__grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.ff-choice { position: relative; display: flex; align-items: center; min-height: 3.5rem; padding: 0.75rem 1rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-surface); cursor: pointer; }
.ff-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ff-choice:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-accent); }
.ff-choice:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* A German compound such as "Ladungssicherung" is one long word: it hyphenates on a German page (lang="de") and breaks
   where it must, so the choice stays inside a 375 px screen. min-width lets the flex item shrink to fit. */
.ff-choice > span { min-width: 0; hyphens: auto; overflow-wrap: break-word; }
/* German is about 30-40% longer and its compounds have no spaces, so a page in German hyphenates its words where the
   browser has the dictionary. Where it does not, a table cell may break a word anywhere rather than widen the table:
   the recipient e-mail wraps and the "Entfernen" button stays inside the screen at 375 px. */
:lang(de) { hyphens: auto; }
.ff-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
/* Two answers to a line from a phone up: eight categories in one column was a long scroll before the question that matters.
   The three drivable answers share a line. A German compound still hyphenates inside its own box (.ff-choice > span). */
@media (min-width: 21rem) { .ff-choices__grid { grid-template-columns: 1fr 1fr; } }
.ff-choices__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ff-choices__grid--three .ff-choice { justify-content: center; text-align: center; padding-inline: 0.5rem; }

/* Stickers and the A4 sheet. Sizes are mm and pt, never px: a pixel on paper is whatever the driver decides.
   A sticker is black on white whatever the palette, because it is printed and scanned, so its colours are
   fixed here rather than taken from the tokens. The dashed edge is the cut line. */
@page { size: A4 portrait; margin: 10mm; }

.ff-sheet {
  display: grid;
  grid-template-columns: repeat(3, 60mm);
  gap: 5mm;
  width: 190mm;
  margin: 0 0 8mm;
}
.ff-sticker {
  width: 60mm;
  height: 80mm;
  padding: 4mm 3mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  break-inside: avoid;
  background: #fff;
  color: #000;
  border: 0.2mm dashed #000;
  text-align: center;
  font-family: var(--font-sans);
}
.ff-sticker__ask { margin: 0; font-size: 10pt; font-weight: 700; line-height: 1.2; }
.ff-qr { display: block; width: 42mm; height: 42mm; }
.ff-sticker__plate {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 20pt;
  font-weight: 700;
  line-height: 1.05;
  word-break: break-all;
}
.ff-sticker__or { margin: 0; font-size: 6pt; }
.ff-sticker__url { margin: 0; font-family: var(--font-mono); font-size: 6pt; line-height: 1.25; overflow-wrap: anywhere; }
.ff-sticker__brand { margin: 0; font-size: 6pt; font-weight: 700; letter-spacing: 0.04em; }
.ff-address { font-family: var(--font-mono); overflow-wrap: anywhere; }

@media print {
  .mx-bar, .mx-tabs, .noprint, .mx-footer { display: none !important; }
  body { background: #fff; }
  /* The kit gives the page min-height: 100vh, and on A4 that is taller than the printable area, so every sheet printed a blank second page. */
  html, body, .mx-app { min-height: 0 !important; }
  /* A print is paper: no cream page colour behind the stickers, which would print as a tint. */
  html, body, .mx-app, .mx-main { background: #fff !important; }
  .mx-main, .mx-page, .ff-sheets, .mx-scroll { padding: 0 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; }
  .ff-sheet { break-after: page; page-break-after: always; }
  .ff-sheet:last-child { break-after: auto; page-break-after: auto; }
}

/* The report inbox: one row per report, and the same row in a vehicle's history. A row is a link. It stacks on a phone,
   and every piece may wrap inside it (min-width: 0 and overflow-wrap: anywhere), so a long Hungarian word breaks the
   word, never the page. Checked at 375 px. */
.ff-inbox { list-style: none; margin: 0; padding: 0; min-width: 0; }
.ff-inbox > li { border-bottom: 1px solid var(--c-line-strong); }
.ff-inbox > li:last-child { border-bottom: 0; }
/* A light/dark row pattern so one report does not blend into the next (#3114, strengthened in #3116: the first
   wash was too close to --c-surface-2 to read as alternating at a glance, especially once most rows carry
   .ff-row--unread's own red wash too). Every other row gets a visible tint; .ff-row's own background (hover,
   unread) is a separate translucent layer painted on top, so it still combines with this one instead of hiding it. */
.ff-inbox > li:nth-child(even) { background: color-mix(in srgb, var(--c-ink) 8%, transparent); }
.ff-row {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 1rem;
  color: var(--c-ink);
  text-decoration: none;
}
.ff-row:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
@media (hover: hover) { .ff-row:hover { background: color-mix(in srgb, var(--c-ink) 4%, transparent); } }
/* An open report the fleet's manager has not opened yet (#1064): a red frame round the row, a faint red wash, and a red
   marker beside its status, so it reads at a glance and in words. --c-rec is the kit's alarm colour in both themes. */
.ff-row--unread {
  box-shadow: inset 0 0 0 2px var(--c-rec);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c-rec) 6%, transparent);
}
@media (hover: hover) { .ff-row--unread:hover { background: color-mix(in srgb, var(--c-rec) 10%, transparent); } }
.ff-unread { display: inline-flex; align-items: center; gap: 0.3rem; }
.ff-unread svg, .ff-stat__unread svg { width: 0.5rem; height: 0.5rem; flex-shrink: 0; }
.ff-stat__unread { display: flex; align-items: center; gap: 0.375rem; margin: 0.625rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--c-rec); }
.ff-stat__unread + .mx-sub { margin-top: 0.875rem; }
.ff-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; min-width: 0; }
.ff-row__ref { font-family: var(--font-mono); font-weight: 600; }
.ff-row__plate { font-family: var(--font-mono); overflow-wrap: anywhere; min-width: 0; }
.ff-row__category { font-weight: 600; overflow-wrap: anywhere; }
.ff-row__desc { color: var(--c-ink-muted); font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
.ff-row__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.8125rem; color: var(--c-ink-subtle); min-width: 0; overflow-wrap: anywhere; }
/* The filed date used to read as faint as the rest of the meta line; it is the one fact every row needs at a glance (#3114). */
.ff-row__date { font-weight: 600; color: var(--c-ink-muted); }
.ff-safe--no { color: var(--c-rec); }
/* A fixed report's answer: what was true when it was reported, muted and struck through (render.mjs fixedDrivable). */
.ff-safe--past { color: var(--c-ink-subtle); text-decoration: line-through; text-decoration-thickness: 1px; }

/* A report's facts, and the account's: a label over its value, as many to a line as fit - two on a phone. */
.ff-facts { display: grid; gap: 0.875rem 1.25rem; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 40%), 1fr)); }
.ff-facts > div { display: grid; gap: 0.25rem; align-content: start; min-width: 0; }
.ff-facts dt { color: var(--c-ink-subtle); font-size: 0.8125rem; }
.ff-facts dd { margin: 0; overflow-wrap: anywhere; color: var(--c-ink); }
.ff-facts dd a { color: var(--c-ink); text-underline-offset: 3px; text-decoration-color: var(--c-line-strong); }
.ff-facts dd .mx-badge { margin-top: 1px; }
/* What the driver wrote leads the report, in reading size; the facts sit under a rule. */
.ff-desc { font-size: 1rem; line-height: 1.6; color: var(--c-ink); }
.ff-desc + .ff-facts { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-line); }
/* Facts that are sentences or addresses (Settings → Account) get room: one to a line on a phone, two on a laptop. */
.ff-facts--wide { grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.ff-facts--wide dd { overflow-wrap: break-word; }

/* What the driver wrote, and a note on the timeline: the line breaks are the driver's own. */
.ff-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ff-coords { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }

/* The timeline: each change down a rule, oldest first. */
.ff-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.ff-timeline > li { display: grid; gap: 0.25rem; min-width: 0; padding-left: 0.875rem; border-left: 2px solid var(--c-line-strong); overflow-wrap: anywhere; }
.ff-timeline p { margin: 0; }

/* Photos as thumbnails, three to a line: the photo at full size is a tap away. Full width, they made a laptop page
   two screens of one tyre. */
.ff-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 30%), 1fr)); }
.ff-photos a { display: block; border-radius: var(--radius-md); }
.ff-photos a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.ff-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface-2); }



/* ── The signed-in frame (2026-10-03 design pass) ─────────────────────────────────────────────────────────────────
   Chris, on a phone: "the app/dashboard itself is visually still half assed". What follows is what the kit's app layer
   leaves to a product: a page head with its actions, two columns on a laptop, the vehicles list on a phone. */

/* A crumb's icon and label on one line (the kit sizes the icon). */
.mx-crumb a { display: inline-flex; align-items: center; gap: 0.25rem; }

/* For a screen reader only: a column heading whose column explains itself (the vehicles' tick boxes). */
.ff-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The page head: title and lead on the left, the page's own actions on the right. On a phone the actions come under
   the title and fill the line, so two buttons are one even row, or two even rows, never two odd widths. */
.ff-head { align-items: flex-end; }
.ff-head__text { min-width: 0; flex: 1 1 22rem; }
.ff-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.ff-head__title .mx-badge { flex: 0 0 auto; }
.ff-head .mx-lead { overflow-wrap: anywhere; }
.ff-head > .mx-actions { flex: 0 1 auto; }
@media (max-width: 47.99rem) {
  .ff-head > .mx-actions { flex: 1 1 100%; }
  .ff-head > .mx-actions > .mx-btn { flex: 1 1 12rem; }
}
.ff-plate { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* A panel's last row of actions, under a rule: the vehicles list's Print selected. */
.ff-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem 1rem; border-top: 1px solid var(--c-line); }
.ff-panel-foot > * + * { margin-top: 0 !important; }

/* Two columns from a laptop up: the page's main work on the left, what goes with it on the right (22rem). Each column is
   a stack, so panels of different heights never leave holes the way a grid of panels does. One column on a phone, in the
   order the markup gives. --even splits half and half (Settings). */
.ff-split { display: grid; gap: 0.875rem; align-items: start; min-width: 0; }
.ff-split > * { min-width: 0; }
@media (min-width: 64rem) {
  .ff-split { grid-template-columns: minmax(0, 1fr) 22rem; }
  .ff-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ff-split > .ff-side { grid-column: 2; }
  .ff-split > .ff-main { grid-column: 1; grid-row: 1; }
  /* The vehicle page: the sticker and the two sticker actions share the right column beside the reports and the form. */
  .ff-split--vehicle { grid-template-rows: auto 1fr; }
  .ff-split--vehicle > .ff-main { grid-row: 1 / span 2; }
  .ff-split--vehicle > .ff-side--top { grid-row: 1; }
  .ff-split--vehicle > .ff-side--bottom { grid-row: 2; }
}

/* The dashboard's numbers, in a row inside their panel. */
.ff-stats { gap: 1rem 2.5rem; }
/* The kit's stat is a <p> and keeps the browser's paragraph margins, which opened a band above and below the numbers. */
.ff-stats .mx-stat { margin: 0; grid-template-rows: 1fr auto; }
@media (max-width: 47.99rem) { .ff-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The inbox's filters and the export: one toolbar over the list. Two selects side by side even on a phone, the buttons
   under them; on a laptop all of it on one line. */
.ff-toolbar { border-bottom: 1px solid var(--c-line); }
.ff-filters { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.ff-filters > .mx-actions, .ff-filters__hint { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .ff-filters { grid-template-columns: minmax(0, 15rem) minmax(0, 15rem) auto; }
  .ff-filters > .mx-actions { grid-column: auto; }
}
.ff-empty__actions { justify-content: center; margin-top: 1rem; }

/* The vehicles list. A table from 48rem; under it each row is a block: the tick box, the plate and its open reports on
   one line, the make and model under it, then the type and your own number. */
.ff-v__plate a { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.ff-v__pick { width: 2.75rem; }
.ff-pick { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; min-height: 1.75rem; cursor: pointer; }
.ff-pick input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--c-accent); cursor: pointer; }
@media (min-width: 48rem) {
  .ff-v__kind, .ff-v__open .mx-badge { display: none; }
}
@media (max-width: 47.99rem) {
  .ff-vehicles thead { display: none; }
  .ff-vehicles, .ff-vehicles tbody { display: block; }
  .ff-vehicles tr {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    grid-template-areas: 'pick plate open' 'pick model model';
    align-items: center;
    column-gap: 0.25rem;
    padding: 0.5rem 0.875rem 0.75rem 0.25rem;
    border-bottom: 1px solid var(--c-line);
  }
  .ff-vehicles tr:last-child { border-bottom: 0; }
  .ff-vehicles td { display: block; padding: 0; border: 0; }
  .ff-v__pick { grid-area: pick; width: auto; align-self: start; display: flex !important; justify-content: center; }
  .ff-v__plate { grid-area: plate; min-width: 0; }
  .ff-v__plate a { font-size: 1rem; }
  .ff-v__open { grid-area: open; }
  .ff-v__model { grid-area: model; min-width: 0; color: var(--c-ink-muted); overflow-wrap: break-word; }
  .ff-v__type, .ff-v__internal, .ff-v__n { display: none !important; }
}

/* Settings: the alert addresses, one to a line with Remove at its end; the forms under them each under a rule. */
.ff-recipients { list-style: none; margin: 0.375rem 0 0; padding: 0; border: 1px solid var(--c-line); border-radius: var(--radius-sm); }
.ff-recipients li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.25rem 0.25rem 0.75rem; }
.ff-recipients li + li { border-top: 1px solid var(--c-line); }
.ff-recipients__email { min-width: 0; overflow-wrap: anywhere; font-size: 0.875rem; }
.ff-recipients form { flex: 0 0 auto; }
.ff-block { padding-top: 1rem; border-top: 1px solid var(--c-line); }
.mx-panel__body > .ff-block { margin-top: 1rem; }
.mx-panel__body > p + .ff-block, .mx-panel__body > .mx-alert + .ff-block, .mx-panel__body > .mx-note + .ff-block { border-top: 0; padding-top: 0; margin-top: 0.75rem; }

/* The text to type back to confirm, set apart. */
.ff-expect { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-ink); background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 0.25rem; padding: 0.0625rem 0.375rem; overflow-wrap: anywhere; }

/* A sticker on its vehicle's page: centred in its panel, at print size. */
.ff-sticker-preview { display: flex; justify-content: center; padding: 1rem; border-radius: var(--radius-md); background: var(--c-surface-2); overflow-x: auto; }

/* The sticker sheets on screen: each the A4 page it prints on, white, inside the page column. print below removes the frame. */
.ff-sheets .mx-scroll { padding-bottom: 0.5rem; }
@media screen {
  .ff-sheet { box-sizing: content-box; padding: 10mm; background: #fff; border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 8px 24px rgb(0 0 0 / 0.12); }
  /* A 210 mm page on a phone: shown smaller so the whole sheet is in view. Printing is not affected. */
  @media (max-width: 29.99rem) { .ff-sheet { zoom: 0.44; } }
  @media (min-width: 30rem) and (max-width: 55.99rem) { .ff-sheet { zoom: 0.8; } }
}

/* The location's map link is a button. */
.ff-map { margin-top: 0.25rem; }

/* The driver's report: the language switch sits apart from the title, and the photo picker is a real control rather than
   the browser's bare "Choose files". */
.ff-report .ff-langs { margin: 0 0 1.5rem; }
.ff-report .ff-langs + .mx-h1 { margin-top: 0; }
.ff-report .mx-field .ff-file {
  height: auto;
  min-height: 3.25rem;
  padding: 0.5rem;
  border-style: dashed;
  background: var(--c-surface);
  color: var(--c-ink-muted);
  cursor: pointer;
}
.ff-report .ff-file::file-selector-button {
  min-height: 2.25rem;
  margin-right: 0.75rem;
  padding: 0 1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* The page after filing: a confirmation that looks like one. */
.ff-done .mx-panel__body { padding: 1.5rem 1.25rem; }
.ff-done__icon { display: inline-flex; color: var(--c-ok); }
.ff-done__icon svg { width: 2.5rem; height: 2.5rem; }


/* Where the fleet stands on the free plan, under the vehicles page's head (plans.mjs). Quiet; louder at the line. */
.ff-plan { margin: -0.25rem 0 1rem; font-size: 0.8125rem; color: var(--c-ink-subtle); }
.ff-plan a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ff-plan--full { color: var(--c-warn, var(--c-ink)); font-weight: 600; }