/* RentKeeper's own styles, loaded after the kit's landing.css and app.css (both vendored untouched).
   Only what the kit does not have, and only in the kit's tokens and rem. The page base (border-box,
   body margin and font) and the legal-page layout (.lp-doc) are the kit's; the kit's frame - header,
   hero, bands, bars, tabs, tables - is never restyled here (the gate's `restyle` check). */

/* Footer links in the footer's own colour, as mixtape.works has them - not the browser's blue. */
.lp-footer a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--c-line-strong); }
.lp-footer a:hover { color: var(--c-ink); }
.lp-footer a[href^='mailto:'] { overflow-wrap: anywhere; }

/* ── The page head: title (and its badge) on the left, the page's actions on the right; on a phone
      the actions take the full width, one even row. ─────────────────────────────────────────── */
.rk-head { align-items: flex-end; }
.rk-head__text { min-width: 0; flex: 1 1 22rem; }
.rk-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.rk-head__title .mx-h1 { min-width: 0; overflow-wrap: break-word; }
.rk-head__title .mx-badge { flex: 0 0 auto; }
.rk-head > .mx-actions { flex: 0 1 auto; }
@media (max-width: 47.99rem) {
  .rk-head > .mx-actions { flex: 1 1 100%; }
  .rk-head > .mx-actions > .mx-btn,
  .rk-head > .mx-actions > form { flex: 1 1 12rem; }
  .rk-head > .mx-actions > form .mx-btn { width: 100%; }
  /* The page's main action first, anything else under it. */
  .rk-head > .mx-actions > .mx-btn--primary { order: -1; }
}

/* The kit spaces a page's own children; a narrower column inside it (.mx-medium) needs the same
   rhythm, or a second panel touches the first. */
.mx-medium > * + * { margin-top: 0.875rem; }

/* ── The numbers on the overview, in a row inside their panel; two by two on a phone. ─────────── */
.rk-stats { gap: 1rem 2.5rem; }
.rk-stats .mx-stat { margin: 0; grid-template-rows: 1fr auto; } /* a label on two lines keeps its number on the others' baseline */
.rk-stat--late .mx-stat__value { color: var(--c-rec); }
@media (max-width: 47.99rem) { .rk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Lists of equipment and rentals. A table from 48rem; under it each row is a block: the item and
      its status on one line, who has it under that, when it is due back, then its actions. ───── */
.rk-item-row { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.rk-item-row > div { min-width: 0; }
.rk-thumb { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border: 1px solid var(--c-line); border-radius: var(--radius-md); object-fit: cover; background: var(--c-surface-2); }
.rk-item { font-weight: 600; color: var(--c-ink); overflow-wrap: break-word; }
a.rk-item { text-decoration: none; }
a.rk-item:hover { color: var(--c-accent); }
.rk-sub { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--c-ink-subtle); overflow-wrap: break-word; }
.rk-due { white-space: nowrap; }
.rk-due .rk-sub { white-space: normal; }
.rk-late { color: var(--c-rec); }
.rk-soon { color: var(--c-warn, var(--c-ink-muted)); }
.rk-none { color: var(--c-ink-subtle); }
.rk-list .mx-actions { flex-wrap: nowrap; justify-content: flex-end; }
.rk-list form { margin: 0; }
.rk-list td:last-child { width: 1%; white-space: nowrap; }
@media (max-width: 47.99rem) {
  .rk-list thead { display: none; }
  .rk-list, .rk-list tbody { display: block; }
  .rk-list tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'item status' 'with with' 'due due' 'act act';
    align-items: start;
    gap: 0.375rem 0.75rem;
    padding: 0.875rem;
    border-bottom: 1px solid var(--c-line);
  }
  .rk-list tr:last-child { border-bottom: 0; }
  .rk-list td { display: block; padding: 0; border: 0; min-width: 0; }
  .rk-list td:last-child { width: auto; }
  .rk-c-item { grid-area: item; }
  .rk-c-status { grid-area: status; }
  .rk-c-with { grid-area: with; }
  .rk-c-due { grid-area: due; }
  /* The banned renters list: the reason takes the full row under the name, the date the row under that (#1410). */
  .rk-c-reason { grid-area: with; }
  .rk-c-when { grid-area: due; }
  .rk-c-act { grid-area: act; padding-top: 0.25rem !important; }
  .rk-c-with:has(.rk-none), .rk-c-due:has(.rk-none) { display: none !important; }
  .rk-list .mx-actions { flex-wrap: wrap; justify-content: flex-start; }
  .rk-list .mx-actions > .mx-btn, .rk-list .mx-actions > form { flex: 1 1 8rem; }
  .rk-list .mx-actions > form .mx-btn { width: 100%; }
  .rk-due { white-space: normal; }
  /* On a phone the item name is the way in; the dashboard's Open button would only repeat it. */
  .rk-open { display: none !important; }
}

/* ── Facts about one rental, label over value. ─────────────────────────────────────────────── */
.rk-facts { display: grid; gap: 0.875rem 1.25rem; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 40%), 1fr)); }
.rk-facts > div { display: grid; gap: 0.25rem; align-content: start; min-width: 0; }
.rk-facts dt { color: var(--c-ink-subtle); font-size: 0.8125rem; }
.rk-facts dd { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; }
.rk-facts dd a { color: var(--c-ink); text-underline-offset: 3px; text-decoration-color: var(--c-line-strong); }

/* ── Photos of a rental: .mx-gallery itself is the kit's. ─────────────────────────────────────── */
.rk-upload { padding-top: 1rem; border-top: 1px solid var(--c-line); }
.mx-panel__body > .rk-upload { margin-top: 1rem; }

/* The item's own photos at the top of the rent-out form: the lead line, then its thumbnails, then the fields. */
.rk-item-photos { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.rk-item-photos > .mx-sub { margin: 0; }

/* The edit overlay: the item's next step above its photos; Delete at the far end of Save and Cancel. */
.rk-quick { margin-bottom: 1rem; }
.rk-delete { margin-inline-start: auto; }

/* An empty list says so in one line and offers the one thing to do. */
.rk-empty__actions { justify-content: center; margin-top: 1rem; }

/* The rent-out form's own ban warning: the kit's .mx-alert, plus the confirmation checkbox (.mx-check--danger)
   that has to be ticked before the server will let the rental through. */
.rk-ban-warn .mx-alert { margin-bottom: 0.625rem; }

/* ── Mark returned, in the overlay (#1264): the condition as the kit's .mx-choice, the repair switch and
      the damage fields as .mx-check, and the ban as a closed section that opens to its warning. ──────── */
.rk-ban { border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 0 0.875rem; }
.rk-ban > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--c-ink); cursor: pointer; }
.rk-ban[open] > summary { border-bottom: 1px solid var(--c-line); }
.rk-ban__body { display: grid; gap: 0.875rem; padding: 0.875rem 0; }
.rk-ban__warn { margin: 0; font-weight: 600; }
/* The kit's field colours do not reach a textarea in the dark theme; this one takes the same surface as the rest. */
.rk-return textarea { background: var(--c-surface-2); color: var(--c-ink); }
.rk-report__note { margin: 0.875rem 0 0; color: var(--c-ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Touch: the kit lifts buttons, fields, the brand, the nav and the tabs to 44px; the footer's links,
   the item-name links and a file picker are this product's to lift. NOT .mx-tabs a - an inline-flex tab
   shrinks to its label and the tabs spread unevenly (FleetFault, 2026-10-03); the kit's tab is a full-width
   column already. The footer stays inline-block: its underline is drawn on its own text, and an
   inline-flex box would not carry it. The item name has no underline, so it can centre its text. */
@media (hover: none) and (pointer: coarse) {
  .lp-footer a { display: inline-block; min-width: 44px; min-height: 44px; padding-block: 0.625rem; }
  .mx-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  a.rk-item { display: inline-flex; align-items: center; min-height: 44px; }
  input[type='file'] { min-height: 44px; padding: 0.375rem 0; }
  .rk-ban > summary { min-height: 44px; }
}

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