/**
 * Rolige Hænder — komponenter bygget UDELUKKENDE på tokens.
 *
 * Ingen farve står som literal her. Skal en ny kunde have et andet udtryk,
 * er det tokens.css der ændres, ikke denne fil. Det er den regel der gør
 * whitelabel til en kopieret CSS-fil frem for en gaffel af appen.
 */

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

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-line);
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 32rem;
  margin: 0 auto;
  padding: var(--space-md) var(--layout-margin-mobile) var(--space-xl);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
/* Salonens navn står som en signatur, ikke som et logo i en bjælke. Det er
   én person der klipper, ikke en kæde, og navnet skal læses som "hos mig". */

.app-header {
  padding-block: var(--space-lg) var(--space-md);
}
.app-header h1 {
  font-size: var(--text-headline-md);
  line-height: 1.2;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin: 0;
}

/* Trinviser. Shneiderman §4: et flertrins-forløb skal vise hvor man er og
   hvor meget der er tilbage. */
.steps {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.steps span {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-outline-variant);
}
.steps span[data-done] { background: var(--color-primary); }

h2 {
  font-size: var(--text-headline-lg);
  line-height: var(--text-headline-lg-line);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
  letter-spacing: -0.015em;
}
.lede {
  color: var(--color-on-surface-variant);
  margin: 0 0 var(--space-md);
  max-width: 34ch;
}

/* ── Valgkort ───────────────────────────────────────────────────────────── */

/* Kortene ligger tæt, som linjer i en prisliste på væggen. Stor luft mellem
   dem ville få tre ydelser til at ligne et katalog fra en kæde. */
.options { display: flex; flex-direction: column; gap: var(--space-base); }

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-height: var(--tap-primary);
  padding: var(--space-sm) var(--space-gutter);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.option:hover {
  background: var(--color-surface-container);
  border-color: var(--color-primary);
}

/* Navn og varighed er ÉN blok med en stram indbyrdes afstand, ikke to
   selvstændige linjer. Før stod de med et <br> imellem, som gav dem lige så
   meget luft som mellem to kort. */
.option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.option-name {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
.option-meta {
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-md);
}
.option-price {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Dine tider ─────────────────────────────────────────────────────────── */

.section-label {
  font-size: var(--text-label-md);
  font-weight: var(--weight-semibold);
  color: var(--color-on-surface-variant);
  margin: var(--space-md) 0 var(--space-base);
}
.section-label:first-of-type { margin-top: var(--space-sm); }

/* Den naeste tid faar den ENE fyldte flade paa siden. Alt andet er
   konturer, saa oejet lander her uden at noget raaber. */
.featured {
  padding: var(--space-gutter);
  border-radius: var(--radius-lg);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.featured-when {
  font-size: var(--text-headline-md);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-xs);
  font-variant-numeric: tabular-nums;
}
.featured-what {
  margin: 0;
  font-size: var(--text-body-md);
}

/* Et kort man ikke kan klikke paa skal heller ikke ligne det. */
.option-static { cursor: default; }
.option-static:hover {
  background: transparent;
  border-color: var(--color-outline-variant);
}

.lookup { margin-top: var(--space-md); }

/* En diskret vej til "dine tider". Den skal kunne findes, ikke konkurrere
   med det man kom for: at booke. */
/* Ikonet foelger tekststoerrelsen, saa knappen skalerer med brugerens
   skriftindstilling frem for at have en fast pixelstoerrelse ved siden af
   en tekst der vokser. */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Touch-maal: linket staar i et hjoerne, hvor en finger rammer skaevt.
     Negativ margin holder det visuelt paa linje med overskriften. */
  min-height: var(--tap-min);
  margin-block: calc(var(--tap-min) / -2 + 0.6em);
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition);
}
.header-link:hover { opacity: 0.75; }
.header-link .icon { opacity: 0.85; }
.header-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.app-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ── Tider ──────────────────────────────────────────────────────────────── */

.day { margin-bottom: var(--space-md); }
.day-name {
  font-size: var(--text-label-md);
  font-weight: var(--weight-semibold);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-base);
}
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: var(--space-base);
}
.slot {
  min-height: var(--tap-min);
  padding: var(--space-base);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.slot:hover { border-color: var(--color-primary); }
.slot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.slot[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ── Formular ───────────────────────────────────────────────────────────── */

.field { margin-bottom: var(--space-sm); }
.field label {
  display: block;
  font-size: var(--text-label-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-xs);
}
/* Label over feltet, aldrig som forsvindende placeholder: en placeholder er
   væk netop når brugeren skal bruge den. */
.field input, .field textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-sm);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.field .hint {
  font-size: var(--text-label-sm);
  color: var(--color-on-surface-variant);
  margin-top: var(--space-xs);
}

/* ── Knapper ────────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-base);
  min-height: var(--tap-primary);
  width: 100%;
  padding-inline: var(--space-md);
  border: none;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: opacity var(--transition);
}
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.button-quiet {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-outline-variant);
}
.button-row { display: flex; gap: var(--space-base); margin-top: var(--space-md); }

/* ── Skeletter ──────────────────────────────────────────────────────────── */
/* Formet som DET INDHOLD de erstatter, ikke som en generisk spinner. Layoutet
   hopper derfor ikke når data kommer, og ventetiden føles kortere fordi
   siden allerede viser hvad der er på vej. */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.skeleton {
  background: var(--color-surface-container);
  border-radius: var(--radius);
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}

/* Uden bevægelse for dem der har slået den fra: fladen bliver bare rolig. */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: 0.7; }
}

.skeleton-option {
  height: var(--tap-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
}
.skeleton-heading {
  height: 2rem;
  width: 60%;
  margin-bottom: var(--space-md);
}
.skeleton-daylabel {
  height: 1rem;
  width: 40%;
  margin-bottom: var(--space-base);
}
.skeleton-slot { height: var(--tap-min); }

/* ── Tilstande ──────────────────────────────────────────────────────────── */
/* Loading, tom, lukket, fuldt booket og fejl er FEM forskellige ting og skal
   se forskellige ud. En fejlet forespørgsel må aldrig ligne en tom liste. */

.state {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  text-align: center;
}
.state-error {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
  text-align: left;
}
.state-success {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.summary {
  padding: var(--space-gutter);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
  margin-bottom: var(--space-md);
}
.summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-sm); }
.summary dt { color: var(--color-on-surface-variant); font-size: var(--text-label-md); }
.summary dd { margin: 0; font-weight: var(--weight-medium); }

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