/* Reusable building blocks: buttons, form fields, cards, badges, messages. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font: 600 16px var(--font); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn.secondary { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--bg-soft); color: var(--ink); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.small { min-height: var(--touch); padding: 0 16px; font-size: 15px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label:not(.check) { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 16px var(--font); box-shadow: var(--shadow);
}
.input:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.hint { font-size: 13px; color: var(--muted); }
.error { font-size: 14px; color: var(--danger); font-weight: 500; }
.check { display: flex; align-items: center; gap: 12px; min-height: var(--touch); font-size: 15px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 24px; }
.badge {
  display: inline-flex; align-items: center; width: fit-content; padding: 3px 10px;
  border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-soft-ink);
  font-size: 13px; font-weight: 600;
}
.avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-soft-ink); font-size: 22px; font-weight: 700;
}
.message {
  padding: 12px 16px; border-radius: var(--radius-sm); background: var(--accent-soft);
  color: var(--accent-soft-ink); font-weight: 500;
}
.facts { display: grid; gap: 0; }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .pad { padding: 20px 16px; }
}

/* Grouped choices (radio buttons, checkbox lists) */
.choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices legend { font-weight: 600; font-size: 14px; color: var(--ink-2); padding: 0; margin-bottom: 4px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0 20px; }
.choice-group { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 10px 0 2px; }
.badge.neutral { background: var(--chip); color: var(--ink-2); }
.note { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
select.input { appearance: auto; }
textarea.input { min-height: 96px; resize: vertical; }

/* Licence plate input, styled like a German number plate */
.plate {
  display: inline-flex; align-items: stretch; width: fit-content; max-width: 100%; border: 2px solid var(--ink);
  border-radius: 8px; background: #FFFFFF; overflow: hidden; box-shadow: var(--shadow); cursor: text;
}
.plate-eu {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  width: 34px; flex: none; padding: 4px 0 6px; background: #003399; color: #FFFFFF;
  font-weight: 700; font-size: 15px;
}
.plate-stars { font-size: 12px; color: #FFCC00; }
/* Widths in em fit the widest letters (W, M) of the bold font; placeholders show the parts. */
.plate-input {
  min-width: 0; min-height: 56px; border: 0; padding: 0 4px; background: transparent;
  font: 700 26px var(--font); letter-spacing: 0.02em; text-transform: uppercase; text-align: center; color: var(--ink);
}
.plate-input[size="2"] { width: 2.8em; }
.plate-input[size="3"] { width: 3.6em; }
.plate-input[size="4"] { width: 3.4em; }
.plate-input::placeholder { color: var(--line-strong); }
.plate-input:focus { outline: none; background: var(--accent-soft); }
/* The two seals separate district and letters, as on a real plate. */
.plate-seals { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 6px; }
.plate-seals i { width: 13px; height: 13px; border-radius: 50%; background: var(--line); border: 2px solid var(--ink-2); }

img.avatar { object-fit: cover; }
.avatar.large { width: 96px; height: 96px; font-size: 36px; }
.share-label { font-weight: 600; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }

/* Occupancy calendar (A-006) */
.cal { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; text-align: center; font-size: 14px; }
.cal th { font-weight: 700; color: var(--muted); font-size: 13px; }
.cal td { padding: 7px 0; border-radius: 6px; }
.cal .busy { background: var(--busy); color: var(--busy-ink); text-decoration: line-through; }
.cal .past { color: var(--line-strong); }
/* Pickable days (static/js/dates.js) and the picked period. */
.cal [data-date][role=button] { cursor: pointer; }
.cal [data-date][role=button]:hover, .cal [data-date]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal .picked { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* Photo lightbox (static/js/gallery.js). */
.lightbox { max-width: min(96vw, 1400px); max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius); background: #000; overflow: visible; }
.lightbox::backdrop { background: rgba(10, 14, 20, .82); }
.lightbox img { display: block; max-width: min(96vw, 1400px); max-height: 94vh; object-fit: contain; border-radius: var(--radius); }
.lightbox button { position: absolute; width: var(--touch); height: var(--touch); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox-close { top: 10px; right: 10px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 10px; } .lightbox-next { right: 10px; }
.gallery a { display: block; cursor: zoom-in; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--busy); }

/* Listing form in tabs (static/js/steps.js); without JavaScript the tab bar is a table of contents. */
.form-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.form-tabs a {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  min-height: var(--touch); padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 13px; line-height: 1.25;
  text-align: center; text-decoration: none; hyphens: auto;
}
.form-tabs b {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--chip); color: var(--ink-2); font-size: 13px;
}
.form-tabs a[aria-current="step"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.form-tabs a[aria-current="step"] b { background: var(--accent); color: var(--accent-ink); }
.form-tabs a.has-error { border-color: var(--danger); color: var(--danger); }
.form-tabs a.has-error b { background: var(--danger); color: #fff; }
@media (max-width: 420px) { .form-tabs a { font-size: 11.5px; padding-inline: 2px; letter-spacing: -0.01em; } }
.tabbed .form-tabs { position: sticky; top: 0; z-index: 2; padding-block: 8px; background: var(--bg); }
.step-actions { justify-content: flex-end; }
.form-step { scroll-margin-top: 110px; }  /* below the sticky tab bar when opened by #anchor */

.account-head { gap: 16px; }
.account-head h1 { margin-bottom: 2px; }