/* The one column every customer step is, and the wider card the operator's and the back office's
   screens are (DESIGN.md). The bridge puts a readable channel brand on --accent and --on-accent. */
.rental { min-height: 100%; background: var(--neutral); color: var(--primary); padding: var(--sp-lg) var(--sp-md); }
.rental .card { list-style: none; margin: 0 auto; max-width: 32rem; padding: var(--sp-lg); background: var(--surface); border: var(--border-size-1) solid var(--border); border-radius: var(--r-md); }
.rental.wide .card { max-width: 64rem; }
.rental .card > .empty, .rental .card > li.empty { color: var(--secondary); }
.rental h1 { font-size: var(--text-xl, 1.4rem); line-height: var(--type-leading-title); margin: 0; }
.rental .why, .rental .aside, .rental .help { color: var(--secondary); margin: 0; }
.rental .aside, .rental .help { font-size: var(--text-sm, 0.9rem); }
.rental ul.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-md); }
.rental form { display: grid; gap: var(--sp-sm); margin: 0; }
.rental .field { display: grid; gap: var(--size-1); }
.rental .field span { font-weight: 600; }
.rental input:not([type=checkbox]), .rental select { min-height: 44px; padding: 0 var(--sp-sm); border: var(--border-size-1) solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--primary); font: inherit; }
.rental input:focus-visible, .rental select:focus-visible, .rental button:focus-visible, .rental a:focus-visible, .rental summary:focus-visible { outline: var(--border-size-2) solid var(--accent); outline-offset: var(--border-size-2); }
.rental .primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--size-1); min-height: 44px; padding: 0 var(--sp-lg); border: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent, var(--surface)); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.rental .primary[aria-disabled=true] { opacity: 0.6; cursor: progress; }
.rental .quiet { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; padding: 0 var(--sp-sm); border: var(--border-size-1) solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--primary); font: inherit; cursor: pointer; }
.rental .quiet.danger { color: var(--danger); border-color: var(--danger); }
.rental .notice { color: var(--danger); margin: 0; }
.rental .notice:empty { display: none; }
.rental .waiting { color: var(--attention); }
/* A service that did not answer is not the customer's fault: attention, never danger. */
.rental .down { color: var(--attention); }
.rental .step { list-style: none; display: grid; gap: var(--sp-md); }
.rental .rent { font-size: var(--text-lg, 1.2rem); }
.rental .agree { display: flex; align-items: flex-start; gap: var(--sp-sm); min-height: 44px; cursor: pointer; }
.rental .agree input { width: 24px; height: 24px; margin: 10px 0; flex: none; accent-color: var(--accent); }
.rental details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primary); text-decoration: underline; }
@media (max-width: 30rem) { .rental { padding: var(--sp-md) var(--sp-sm); } .rental .card { padding: var(--sp-md); } }
/* A rental's timeline, for the customer and for staff: one quiet line per moment, its date first. */
.rental .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--size-1); }
.rental .timeline .at, .rental .timeline .actor, .rental .at { color: var(--secondary); font-size: var(--text-sm, 0.9rem); }