/**
 * 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);
  /* Ydelse og pris er sekundaert til tidspunktet. Lidt daempet, men ikke
     saa meget at det bliver svaert at laese paa den groenne flade. */
  opacity: 0.85;
}

/* KNAPPER INDE I DET GROENNE KORT.
   Kanten var --color-outline-variant, som er valgt til at staa paa den
   normale baggrund. Paa primary-container giver den 1,10:1 i moerk tilstand
   og 1,30:1 i lys: en kant man reelt ikke kan se, saa knapperne flyder ud i
   fladen.
   currentColor foelger kortets tekstfarve og virker derfor i BEGGE temaer
   uden en farve mere i paletten. Ved fuld styrke er 6,58:1 for skarpt til en
   kant, saa den staar daempet.

   85% er ikke et skoen, det er maalt i browseren paa de faktiske tokens:

     styrke   lys    moerk
     45%      ~2.7   2.64   <- den gamle vaerdi, begge under
     60%      2.31   3.49   <- lys stadig under
     80%      3.21   4.88   <- foerste der holder begge
     85%      3.5    5.3

   LYS tilstand er det stramme tilfaelde, fordi tekst-paa-kort dér kun er
   4,54:1 mod 6,58:1 i moerk. En vaerdi valgt paa moerk alene ville se fin ud
   hos os og vaere usynlig hos en kunde med lyst tema. */
.featured .button-quiet {
  color: inherit;
  border-color: color-mix(in srgb, currentColor 85%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.featured .button-quiet:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 20%, transparent);
}

/* TO HANDLINGER, IKKE TO ENS KNAPPER.
   "Flyt tiden" og "Aflys tiden" saa ens ud, men kun den ene kan fortrydes.
   Naar to knapper vejer lige meget, vaelger man den forkerte lige saa tit
   som den rigtige, og her koster den forkerte kunden hendes tid.

   Forskellen er VAEGT, ikke farve. Fejlfarven kan ikke bruges herinde:
   --color-error giver kun 3,46:1 paa det groenne kort i lys tilstand, altsaa
   under 4,5:1 for tekst. Roedt ville vaere en tilgaengelighedsfejl forklaedt
   som en advarsel.

   Aflys bliver foerst roed i bekraeftelsen (.button-danger), hvor den staar
   paa error-container og har kontrasten til det. */
.featured .button-on-featured {
  /* Fyldt: kortets tekstfarve som flade, kortets flade som tekst. De to
     tokens er hinandens modstykke, saa parret er allerede afstemt.
     Maalt 4,54:1 i lys og 6,58:1 i moerk. */
  background: var(--color-on-primary-container);
  border-color: var(--color-on-primary-container);
  color: var(--color-primary-container);
  font-weight: var(--weight-semibold);
}
.featured .button-on-featured:hover {
  background: color-mix(in srgb, var(--color-on-primary-container) 85%, transparent);
}

/* Den risikable handling traeder et skridt tilbage: ingen fyldt flade.
   Kanten bliver PAA 85%, ikke svagere. Foerste forsoeg saenkede den til 45%
   og maalingen gav 1,83:1, altsaa under 3:1 igen. Vaegtforskellen ligger i
   fladen, ikke i at goere den anden knap svaer at se: en handling man skal
   overveje skal stadig kunne findes. */
.featured .button-risky {
  background: transparent;
  border-color: color-mix(in srgb, currentColor 85%, transparent);
}
.featured .button-risky:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
/* Browsere uden color-mix faar en synlig kant frem for ingen. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .featured .button-quiet { border-color: currentColor; }
}
.featured .button-row { margin-top: var(--space-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); }

/* En stille bemaerkning frem for et kort.
   "Det er din eneste tid lige nu" er en oplysning, ikke en tilstand der skal
   fylde en hel boks. Et kort ville se ud som om der manglede noget i det. */
.lede-quiet {
  margin: var(--space-sm) 0 0;
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-md);
}

/* Ventebeskeden. Den skifter mens der ventes, saa den skal have plads nok til
   den laengste tekst: hopper layoutet ved hvert skift, ser siden i stykker ud. */
.waiting {
  margin: 0 0 var(--space-md);
  min-height: 1.4em;
  color: var(--color-on-surface-variant);
  font-size: var(--text-sm, 0.9rem);
  transition: opacity var(--transition);
}

/* Aflys er den ene knap i systemet der ikke kan fortrydes. Den er derfor
   den eneste der har fejlfarven, og den optræder kun bag en bekræftelse. */
.button-danger {
  background: var(--color-error);
  color: var(--color-on-error);
  border: 1px solid transparent;
}
.button-danger:focus-visible { outline-color: var(--color-error); }

/* Bekræftelsen står hvor knappen stod, ikke i en dialog: kunden skal kunne
   se hvilken tid det handler om, mens der svares. */
.confirm {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}
.confirm-title { margin: 0; font-weight: var(--weight-semibold); }
.confirm .hint { color: inherit; opacity: 0.85; }
.confirm .button-quiet { color: inherit; border-color: currentColor; }

/* ── 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-md) var(--space-gutter);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
  margin-bottom: var(--space-md);
}

/* To kort der roerer hinanden ligner ét kort med en farvet top.
   Luften er det der goer kvitteringen til én ting og detaljerne til en anden. */
.state-success + .summary { margin-top: var(--space-sm); }
/* Raekkerne skal kunne skelnes fra hinanden.
   Med 4px imellem laeser "Hvad skal du have lavet / Opfriskning" og
   "Vaelg en tid / mandag 17.00" som ÉN klump tekst frem for to oplysninger.
   Afstanden mellem raekker er derfor stoerre end mellem etiket og vaerdi:
   det er den der siger hvad der hoerer sammen. Gestalt, naerhed. */
.summary dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-md);
  align-items: baseline;
}
.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;
}