/*
  The Head Spa by Hikari, D10 technology layer styles (TECH-SPEC). Loaded after the page styles,
  before motion.css. Final states only; the one movement here (the arrival odometer) is driven by
  WAAPI in modules/arrival.js with the site easing and the 480ms step.
  Everything styled here exists only when its script ran, except the LQIP mat (section 4),
  which is plain CSS behind a photo that is loading.

  1. Arrival time (T1)      [data-module="arrival"] .arrival__form
  2. Today in the hours (T2) ul.hours li[aria-current="date"] .hours__today
  3. Gift share (T11)       [data-module="share"] .share-gift
  4. LQIP mat (T9)          figure.media[style*="--lqip"]
  5. Contrast and forced colours (T10)
  6. Swap-stable link rows (T8)
*/

/* 1. Arrival time */
.arrival__form { margin-bottom: var(--space-6); }
.arrival__guests { margin: 0; padding: 0; border: 0; min-width: 0; }
.arrival__legend,
.arrival__label {
  display: block;
  padding: 0;
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--ink);
}
/* hairlines at the page's quiet weight (fix1): the five cells read as a row of numbers, not a form */
.arrival__options {
  display: grid;
  grid-template-columns: repeat(5, minmax(2.75rem, 3.5rem));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  width: max-content;
  max-width: 100%;
}
.arrival__option { position: relative; display: block; }
.arrival__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.arrival__option-face {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 3rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-body);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  pointer-events: none;
}
.arrival__option input:checked + .arrival__option-face { background: var(--ink); color: var(--cream); }
.arrival__option input:focus-visible + .arrival__option-face { outline: 2px solid var(--accent); outline-offset: 3px; position: relative; z-index: 1; }
/* WebKit drops :focus-visible when arrow keys move the checked radio (fix1, WCAG 2.4.7):
   arrival.js marks the form data-kbd while the keyboard is in use */
.arrival__form[data-kbd] .arrival__option input:focus + .arrival__option-face { outline: 2px solid var(--accent); outline-offset: 3px; position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .arrival__option input:not(:checked):hover + .arrival__option-face { color: var(--accent); }
}
.arrival__field { margin-top: var(--space-5); }
.arrival__form .arrival__time {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 11rem;
  max-width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 0;
  background: var(--ivory);
  box-shadow: inset 0 -1px 0 var(--rule-strong);   /* the enquiry form's field grammar */
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;               /* 16px: no zoom on iPhone */
  line-height: 3rem;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.arrival__form .arrival__time::-webkit-date-and-time-value { text-align: left; }
.arrival__form .arrival__time[data-empty] { color: var(--muted); }
.arrival__form .arrival__time::-webkit-calendar-picker-indicator { opacity: 0.6; }
.arrival__form .arrival__time::-webkit-calendar-picker-indicator:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* fix2: desktop Safari marks the part being typed (hour, minute, am/pm) with the system blue;
   the palette's own selected state instead (one rule each, an unknown pseudo drops its rule only) */
.arrival__form .arrival__time::-webkit-datetime-edit-hour-field:focus { background-color: var(--ink); color: var(--ivory); }
.arrival__form .arrival__time::-webkit-datetime-edit-minute-field:focus { background-color: var(--ink); color: var(--ivory); }
.arrival__form .arrival__time::-webkit-datetime-edit-ampm-field:focus { background-color: var(--ink); color: var(--ivory); }
.arrival__result {
  display: block;
  min-height: 3.3em;
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
}
/* nothing chosen yet: no reserved hole under the time field (the answer appears where the visitor
   is already looking, right after their own tap, so the table moving down is not a layout shift) */
.arrival__result:empty { min-height: 0; margin-top: 0; }
.arrival__line { display: block; }
.arrival__contact { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-top: var(--space-2); }
.arrival__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  font-weight: 550;
  overflow-wrap: anywhere;
}
.arrival__contact a:hover { color: var(--accent); }
/* the ticking value: one slot, clipped top and bottom only */
.arrival__result .od {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  clip-path: inset(0 -1em);
  -webkit-user-select: none;   /* fix2: a copied sentence carries the number once (the hidden twin) */
  user-select: none;
}
.arrival__result .od__v { display: block; }
.arrival__result .od__v--old { position: absolute; left: 0; top: 0; }
.arrival__table tr[data-selected] th,
.arrival__table tr[data-selected] td { font-weight: 650; }
.arrival--article { margin-block: var(--space-6); max-width: 30rem; }
.arrival--article .arrival__form { margin-bottom: 0; }

/* 2. Today in the opening hours */
.hours__today {
  display: inline-block;
  margin-left: 0.625rem;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* 3. Gift share (only on devices with a share sheet) */
.gift__actions[data-share-ready] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.share-gift {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 550;
  cursor: pointer;
}
.share-gift__icon { width: 1.125rem; height: 1.125rem; }
.share-gift:hover { color: var(--accent); }

/* 4. LQIP mat: the photo's own colours, blurred, under the clay mat while it loads */
figure.media[style*="--lqip"] {
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* A Closer Look (fix1, MOTION-VERIFY P1-1): while the lens waits, its frame shows the same crop
   pre-blurred (96px, blur baked in), so the box reads as the room out of focus, never as a photo
   that failed to load. --lqip-l is the 5:4 crop (below 80em), --lqip-p the 4:5 crop (80em up). */
figure.media.lens[style*="--lqip-l"] { background-image: var(--lqip-l); }
@media (min-width: 80em) {
  figure.media.lens[style*="--lqip-p"] { background-image: var(--lqip-p); }
}

/* 5. Contrast and forced colours
   --muted (#716050) measures 4.49:1 on the champagne bands (#EBDDC8), a hair under AA 4.5:1 for
   the 12 to 13px footer legal links, copyright line and duration labels (axe, qa/tech). On those
   bands the muted role takes --ink-soft (5.5:1); nothing changes on ivory or cream. */
.site-footer,
.treatments,
.gift { --muted: var(--ink-soft); }
@media (prefers-contrast: more) {
  .arrival__options,
  .arrival__option-face { border-color: var(--ink-soft); }
  .arrival__form .arrival__time { box-shadow: inset 0 -1px 0 var(--ink-soft); }
}
@media (forced-colors: active) {
  .arrival__option input:checked + .arrival__option-face { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .arrival__option input:focus-visible + .arrival__option-face,
  .arrival__form[data-kbd] .arrival__option input:focus + .arrival__option-face { outline-color: Highlight; }
  .arrival__form .arrival__time { border: 1px solid CanvasText; }
  figure.media[style*="--lqip"],
  figure.media.lens[style*="--lqip-p"],
  figure.media.lens[style*="--lqip-l"] { background-image: none; }
}
/* 6. Swap-stable link rows
   On a phone the three links on Thank you and 404 filled their wrapping row to within 2px, so the
   last link sat on the second row in the fallback face and dropped to a third row when the web
   text face arrived (D10 layout shift 0.11, qa/tech test_fonts). One link per row below 30em: the
   same layout in either face. */
@media (max-width: 29.99em) {
  .system__links { flex-direction: column; align-items: flex-start; }
}

@media print {
  .arrival__form, .share-gift { display: none; }
}