/* =============================================================================
   base.css — reset, typography, and the primitives both surfaces share.

   TYPOGRAPHY CHANGE
   The prototype paired Fraunces (a high-contrast display serif) with Manrope.
   Fraunces is a fine face, but it signals editorial and boutique — which
   fights a product whose promise is "compare dozens of companies and find the
   cheapest", across inventory that is mostly economy cars.

   This uses Inter throughout, with weight and tracking doing the work the
   second family was doing:
     * flawless Albanian coverage (ë, ç, Ë, Ç) — not true of every display face
     * one family, one network request, faster first paint
     * reads as infrastructure rather than as a boutique

   Headings take negative tracking, which is what stops a neutral grotesque
   from looking like a browser default.
   ============================================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-8);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  min-height: 100dvh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--text-md); letter-spacing: var(--tracking-tight); }

p { text-wrap: pretty; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; }

small { font-size: var(--text-xs); }

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

/* -----------------------------------------------------------------------------
   Brand marks, drawn from /brand/rovo.svg (the brand kit's own geometry).
   Ink is currentColor, so one mark works on navy and on paper; the gold cuts
   read --logo-accent. Per the kit: never recolour the cuts, stretch, outline
   or add effects, and keep clear space of about a fifth of the height.
   Sizes: wordmark 28px tall on desktop, 22px on phones; never under 80px wide.
   ----------------------------------------------------------------------------- */
.rovo-logo { display: block; height: 28px; width: auto; aspect-ratio: 361 / 100; overflow: visible; flex: none; }
.rovo-mark { display: block; height: 40px; width: auto; aspect-ratio: 123 / 100; overflow: visible; flex: none; }
.rovo-lockup { display: block; width: 210px; height: auto; aspect-ratio: 361 / 140; overflow: visible; }
.rovo-lockup text { font-family: var(--font-text); font-weight: 600; font-size: 14.5px; font-stretch: 100%; fill: currentColor; }

/* Until the first view paints, the empty view shows the monogram, breathing.
   Pure CSS, so the document itself still ships no view markup. */
#app:empty::before,
#view:empty::before {
  content: '';
  display: block;
  min-height: 70vh;
  background: url('/brand/svg/rovo-monogram-navy.svg') center / 56px auto no-repeat;
  animation: boot-breathe 1.6s ease-in-out infinite;
}
[data-surface='console']:not([data-theme='light']) #view:empty::before {
  background-image: url('/brand/svg/rovo-monogram-white.svg');
}
@keyframes boot-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #app:empty::before, #view:empty::before { animation: none; } }

/* Tabular figures are opt-in. Inter's tnum also widens the hyphen to figure
   width, so applied globally it set "rent-a-car" as "rent - a - car" and
   "CO-001" as "CO - 001". Use this where digits are compared down a column. */
.tnum { font-variant-numeric: tabular-nums; }

.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); font-size: var(--text-sm); }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (max-width: 640px) {
  .wrap { padding-inline: var(--space-4); }
}

.stack > * + * { margin-top: var(--space-4); }

.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.section { padding-block: var(--space-7); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition), transform var(--transition);
}

.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--accent-fill);
  color: var(--accent-on-fill);
  border-color: var(--accent-fill);
}
.btn-primary:hover { filter: brightness(1.07); }

.btn-solid { background: var(--ink); color: var(--page); border-color: var(--ink); }
.btn-solid:hover { filter: brightness(1.15); }

.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); }

.btn-quiet { color: var(--ink-2); padding-inline: var(--space-3); }
.btn-quiet:hover { color: var(--ink); background: var(--surface-2); }

.btn-danger { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.btn-danger:hover { background: var(--bad); color: var(--surface); }

/* WhatsApp keeps its own green. People scan for that colour, and a gold
   WhatsApp button reads as a generic CTA. 8.39:1 with the dark label. */
.btn-whatsapp {
  background: #25d366;
  color: #05231a;
  border-color: #1fb855;
  font-weight: var(--weight-bold);
}
.btn-whatsapp:hover { background: #2ee57a; }

.btn-sm { min-height: 36px; padding-inline: var(--space-4); font-size: var(--text-xs); }
.btn-block { width: 100%; }

/* On touch the small variant returns to the tap floor: .btn-sm lives in table
   rows and card actions, which is exactly where a mis-tap hurts. */
@media (pointer: coarse) {
  .btn-sm { min-height: var(--tap); }
}

/* -----------------------------------------------------------------------------
   Forms
   ----------------------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); }

/* Sentence case. Uppercase tracked labels made every field on the page shout
   at the same volume as its heading. */
.field > label,
.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-2);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  /* 16px floor: anything smaller makes iOS zoom the page on focus. */
  font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Date inputs carry a wide intrinsic minimum in Chromium; without this, two
   side by side push a phone layout sideways. */
.input { min-width: 0; }

.input::placeholder,
.textarea::placeholder { color: var(--ink-3); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.textarea { min-height: 110px; resize: vertical; line-height: var(--leading-normal); }

.select {
  appearance: none;
  padding-right: var(--space-7);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.hint { font-size: var(--text-xs); color: var(--ink-3); line-height: var(--leading-snug); }
.error-text { font-size: var(--text-sm); color: var(--bad); min-height: 1.2em; }

/* -----------------------------------------------------------------------------
   Surfaces and badges
   ----------------------------------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.badge-gold { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.badge-quiet { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }

/* -----------------------------------------------------------------------------
   Accessibility
   ----------------------------------------------------------------------------- */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--accent);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }