/* Handtuch Held Guest Web — Pool Deck Editorial. The calm editorial baseline
   stays readable underneath; the deck layer adds pale-aqua dotted bands,
   oversized display type, sun/coral/cyan/palm accents, selective ink outlines
   with offset shadows, a few meaningful stickers, and rhythmic section bands.
   All motion is bounded and nonessential; system fonts only. */

:root {
  --paper: #faf7f1;
  --card: #fffdf8;
  --ink: #16323a;
  --ink-strong: #0e2229;
  --ink-soft: #4c6a71;
  --line: rgba(22, 50, 58, 0.18);
  --line-strong: rgba(22, 50, 58, 0.42);
  --pool: #0b7280;
  --towel-red: #c8432f;
  --towel-white: #fffdf8;
  --state-anonymous: #7a8b8f;
  --state-customer: #b05a00;
  --state-staff: #2e5b44;
  --state-denied: #8a2926;
  /* Pool Deck accents */
  --pool-aqua: #ddf2ee;
  --pool-aqua-deep: #b7e2db;
  --paper-cool: #eef6f3;
  --sun: #f6c445;
  --sun-soft: #fbf0d4;
  --coral: #e8604c;
  --cyan-deep: #0f7280;
  --palm: #2f8f5b;
  --outline: #132c33;
  --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --focus: var(--pool);
  --stripe: repeating-linear-gradient(
    90deg,
    var(--towel-red) 0 1.1rem,
    var(--towel-white) 1.1rem 2.2rem
  );
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* One coherent towel motif: the stripe marks the page itself and the
   session surface below — never decoration for its own sake. */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--stripe);
}

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 30;
  padding: 0.6rem 1rem;
  background: var(--ink-strong);
  color: var(--paper);
  border-radius: 2px;
  text-decoration: none;
}

.skip-link:focus { top: 1rem; }

/* --- Header ---------------------------------------------------------------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand-mark {
  width: 2.1rem;
  height: 0.8rem;
  background: var(--stripe);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.9rem;
}

.site-header nav a {
  padding: 0.7rem 0.45rem;
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.site-header nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.site-header nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--towel-red);
}

.nav-signin {
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  padding: 0.55rem 1rem;
  margin-left: 0.35rem;
}

/* A clicked login link stays visibly marked until the same-tab navigation
   completes — the departure is intentional, never abrupt. */
.is-departing { opacity: 0.72; }

/* --- Language picker: explicit, keyboard-first, touch-sized ---------------- */

.lang-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.3rem;
  background: var(--card);
  border: 2px solid var(--outline);
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(19, 44, 51, 0.16);
}

.lang-option {
  appearance: none;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.85rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.lang-option:hover { color: var(--ink); background: var(--pool-aqua); }

.lang-option[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--outline);
  color: var(--paper);
}

/* --- Deck bands: the rhythmic section backgrounds --------------------------- */

.deck-band { position: relative; }

.deck-aqua {
  background-color: var(--pool-aqua);
  background-image: radial-gradient(circle, var(--pool-aqua-deep) 1.3px, transparent 1.4px);
  background-size: 1.35rem 1.35rem;
}

/* Towel-stripe hem grounds each aqua deck. */
.deck-aqua::after {
  content: "";
  display: block;
  height: 6px;
  background: var(--stripe);
  opacity: 0.6;
}

.deck-cool { background-color: var(--paper-cool); }

.deck-sun {
  background-color: var(--sun-soft);
  border-top: 2px dotted var(--line-strong);
}

.deck-sun .section-block { padding-top: clamp(1.8rem, 4vw, 3rem); }

/* --- Hero (asymmetric editorial split) ------------------------------------ */

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2.2rem);
}

.hero-compact { padding-block: clamp(1.8rem, 4vw, 3rem); }

.kicker {
  margin: 0 0 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pool);
}

/* Oversized display hierarchy: the throw-the-towel headline leads the deck. */
.hero-copy h1 {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.7rem, 5.8vw, 4.8rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
}

.hero-compact h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }

.lede {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  color: var(--ink-soft);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.8rem 0 0;
}

.hero-figure {
  margin: 0;
  border: 1px solid var(--ink);
  background: var(--card);
}

.hero-figure img { width: 100%; }

.hero-figure figcaption {
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Landing/Guest immersive treatment: the hero image bleeds to the right edge,
   cropped and framed by an ink outline with an offset shadow, while the copy
   stays in the editorial grid. The localized caption bar closes the story. */

.hero-bleed { --hero-edge: clamp(1.25rem, 4vw, 3rem); }

.hero-bleed .hero-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: clamp(16rem, 34vw, 30rem);
  border: 3px solid var(--outline);
  box-shadow: 8px 8px 0 rgba(19, 44, 51, 0.18);
  background: var(--card);
  margin-right: calc(-1 * var(--hero-edge) - max(0px, (100vw - 76rem) / 2));
}

.hero-bleed .hero-figure img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.hero-bleed .hero-figure figcaption {
  border-top: 6px solid transparent;
  border-image: var(--stripe) 6;
  background: var(--ink-strong);
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.65rem 0.95rem;
}

/* --- Stickers: few, meaningful, on-theme ------------------------------------ */

.sticker {
  display: inline-block;
  z-index: 2;
  padding: 0.45rem 0.95rem;
  background: var(--sun);
  color: var(--ink-strong);
  border: 2px solid var(--outline);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--outline);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transform: rotate(-5deg);
}

.sticker-hero {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
}

/* --- Badges ------------------------------------------------------------------ */

.badge {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.3rem 0.75rem;
  border: 2px solid var(--outline);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.badge-coral { border-color: var(--coral); background: #fdeae6; }

.badge-green { border-color: var(--palm); background: #e3f3ea; }

.badge-preview {
  background: var(--sun);
  border-color: var(--outline);
  box-shadow: 3px 3px 0 var(--outline);
  transform: rotate(-2deg);
}

/* --- Content sections ------------------------------------------------------ */

.section-block {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3.2rem);
}

.section-block h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 2.9vw, 2.5rem);
  margin: 0 0 1.2rem;
}

.section-note {
  color: var(--ink-soft);
  max-width: 46rem;
  margin: -0.4rem 0 1.4rem;
}

/* Workflow: numbered deck chips separated by hairlines. */

.workflow {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.workflow-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.4rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.workflow-no {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: 0.15rem;
  background: var(--sun);
  border: 2px solid var(--outline);
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(19, 44, 51, 0.18);
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink-strong);
}

.workflow-row:nth-child(3n + 2) .workflow-no { background: var(--pool-aqua); }

.workflow-row:nth-child(3n) .workflow-no { background: #d9efdf; }

.workflow-row h3 { margin: 0 0 0.3rem; font-size: 1.18rem; }

.workflow-row p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 44rem;
}

/* Split block: guest and hotel sides, divided by a hairline. */

.split-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.split-col { padding: 0.4rem clamp(1.4rem, 3vw, 2.4rem) 0.4rem 0; }

.split-col + .split-col {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.4rem, 3vw, 2.4rem);
  padding-right: 0;
}

.split-col h3 { margin: 0 0 0.4rem; font-size: 1.18rem; }

.split-col p { margin: 0 0 0.8rem; color: var(--ink-soft); }

.split-link {
  font-weight: 700;
  color: var(--ink);
  text-underline-offset: 4px;
}

.split-link:hover { color: var(--pool); }

.split-guest .split-link { color: var(--towel-red); }

.split-hotel .split-link { color: var(--state-staff); }

/* --- Preview boundary: honest now versus later ------------------------------ */

.preview-boundary .badge-preview { display: inline-block; }

.preview-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.preview-list li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--ink-soft);
}

/* Filled chip: available now. Empty chip: honestly later. */
.preview-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--outline);
  border-radius: 999px;
}

.preview-now li::before { background: var(--sun); }

.preview-later li::before { background: var(--card); }

/* --- Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.35rem;
  border-radius: 2px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--outline);
  box-shadow: 4px 4px 0 var(--pool-aqua-deep);
}

.btn-primary:hover {
  background: var(--ink-strong);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--pool-aqua-deep);
}

.btn-outline {
  border: 2px solid var(--outline);
  color: var(--ink);
  background: var(--card);
  box-shadow: 4px 4px 0 rgba(19, 44, 51, 0.14);
}

.btn-outline:hover { background: var(--pool-aqua); }

/* --- Session panel --------------------------------------------------------- */

.session-panel {
  position: relative;
  background: var(--card);
  border: 2px solid var(--outline);
  box-shadow: 8px 8px 0 var(--pool-aqua-deep);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.session-panel::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 5px;
  background: var(--stripe);
}

.context-region { min-height: 4.5rem; }

.context-region > p:first-child { margin-top: 0; }
.context-region > p:last-child { margin-bottom: 0; }

.context-loading { color: var(--ink-soft); font-style: italic; }

/* Session states: one confident line with a square marker — finite, never
   pills. Anonymous, customer, staff, denied and error stay distinct. */

.session-state {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.55rem;
  font-size: 1.12rem;
  font-weight: 700;
}

.session-state::before {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--state-anonymous);
}

.st-customer::before { background: var(--state-customer); }
.st-staff::before { background: var(--state-staff); }
.st-denied::before,
.st-error::before { background: var(--state-denied); }

.st-denied,
.st-error { color: var(--state-denied); }

.state-copy { margin: 0; color: var(--ink-soft); max-width: 46rem; }

.state-error { margin: 0.2rem 0 0; color: var(--state-denied); }

/* Diagnostic facts as a tabular spec sheet — labels small caps, values mono. */

.session-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.4rem;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.session-facts dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.22rem;
}

.session-facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.5rem 0 0;
}

/* --- Bridge page ------------------------------------------------------------ */

.bridge-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--paper);
  padding: 1.25rem;
}

.bridge-card {
  width: 100%;
  max-width: 30rem;
  margin: 0;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--card);
  border: 1px solid var(--line);
}

.bridge-card .brand-mark { display: block; margin-bottom: 1.2rem; }

.bridge-card h1 {
  font-family: var(--display);
  font-size: 1.65rem;
  margin: 0 0 0.7rem;
}

.bridge-card p { color: var(--ink-soft); margin: 0 0 0.9rem; }

.bridge-note { font-size: 0.85rem; font-style: italic; }

.bridge-card .btn { margin-top: 0.4rem; }

/* --- Footer ------------------------------------------------------------------ */

.site-footer {
  max-width: 76rem;
  margin: clamp(3rem, 7vw, 5.5rem) auto 0;
  padding: 1.6rem clamp(1.25rem, 4vw, 3rem) 2.2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.footer-note { margin: 0 0 0.5rem; max-width: 46rem; }

.footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}

.footer-links a { color: var(--ink); font-weight: 600; }

/* --- Responsive -------------------------------------------------------------- */

@media (max-width: 48em) {
  .hero-split { grid-template-columns: 1fr; gap: 2rem; }
  .hero-bleed .hero-figure {
    align-self: auto;
    height: clamp(15rem, 62vw, 24rem);
    min-height: 0;
    margin: 0 calc(-1 * var(--hero-edge));
  }
  .split-cols { grid-template-columns: 1fr; }
  .split-col + .split-col {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    margin-top: 1.4rem;
    padding-top: 1.4rem;
  }
  .session-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 30em) {
  .site-header { flex-direction: column; align-items: stretch; }
  .site-header nav { width: 100%; }
  .lang-picker { align-self: flex-start; }
  .hero-cta .btn { flex: 1 1 100%; }
  .sticker-hero { top: 0.6rem; left: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* --- Availability: plan/list, selection, and visible hold lifecycle ------------- */

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

.availability-prompt h3 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.availability-state { color: var(--ink-soft); max-width: 46rem; }

.availability-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.1rem 1.8rem;
  margin: 0.4rem 0 1.6rem;
}

.availability-field { display: grid; gap: 0.45rem; }

.availability-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.availability-field input[type="date"] {
  min-height: 2.75rem;
  padding: 0.45rem 0.8rem;
  border: 2px solid var(--outline);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.availability-slotfield { margin: 0; padding: 0; border: 0; display: grid; gap: 0.45rem; }
.availability-slotfield legend { padding: 0; }

.slot-options { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.slot-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border: 2px solid var(--outline);
  border-radius: 999px;
  background: var(--card);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.slot-option input { width: 1.15rem; height: 1.15rem; accent-color: var(--pool); }
.slot-option:hover { background: var(--pool-aqua); }
.slot-option:has(input:checked) {
  background: var(--pool-aqua);
  box-shadow: 3px 3px 0 rgba(19, 44, 51, 0.18);
}

.availability-viewpicker { display: grid; gap: 0.45rem; }

.view-options {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  background: var(--card);
  border: 2px solid var(--outline);
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(19, 44, 51, 0.16);
}

.view-option {
  appearance: none;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.35rem 1.1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.view-option:hover { color: var(--ink); background: var(--pool-aqua); }

.view-option[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--outline);
  color: var(--paper);
}

/* Plan: one responsive canvas per pool, units positioned by normalized
   Phase-1 coordinates; the status word always accompanies the accent color. */

.availability-plan,
.availability-list { display: grid; gap: 1.7rem; }

.plan-pool {
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(1rem, 2vw, 1.4rem);
}

.plan-pool h3 { margin: 0 0 0.9rem; font-size: 1.18rem; }

.plan-canvas {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 15rem;
  border: 2px solid var(--outline);
  background-color: var(--pool-aqua);
  background-image: radial-gradient(circle, var(--pool-aqua-deep) 1.3px, transparent 1.4px);
  background-size: 1.35rem 1.35rem;
}

.plan-sector-legend {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.plan-unit { position: absolute; transform: translate(-50%, -50%); }

.plan-unit input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.plan-unit label {
  display: grid;
  gap: 0.12rem;
  justify-items: center;
  min-width: 4.6rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.65rem;
  border: 2px solid var(--outline);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 3px 3px 0 rgba(19, 44, 51, 0.14);
  text-align: center;
  cursor: pointer;
}

.plan-unit input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.plan-unit input:checked + label {
  background: var(--sun-soft);
  box-shadow: 4px 4px 0 var(--sun);
}

.plan-unit.status-held label,
.plan-unit.status-booked label,
.plan-unit.status-blocked label { cursor: not-allowed; opacity: 0.72; }

.plan-unit-name { font-size: 0.85rem; font-weight: 700; line-height: 1.2; }

.plan-unit-status {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-unit-sector { font-size: 0.68rem; color: var(--ink-soft); }

/* List: the complete semantic alternative, grouped by pool and sector. */

.list-pool h3 { margin: 0 0 0.5rem; font-size: 1.18rem; }

.list-pool h4 {
  margin: 1rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.availability-groups h3 { margin: 0 0 0.5rem; font-size: 1.18rem; }

.avail-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.avail-row label {
  display: grid;
  grid-template-columns: auto 1fr max-content;
  gap: 0.9rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.65rem 0.4rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.avail-row input { width: 1.3rem; height: 1.3rem; accent-color: var(--pool); }

.avail-row .row-body { display: grid; gap: 0.1rem; }
.avail-row .row-name { font-weight: 700; }
.avail-row .row-meta { font-size: 0.82rem; color: var(--ink-soft); }

.avail-row .row-status {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

.avail-row label:has(input:checked) { background: var(--sun-soft); }

.avail-row.status-held label,
.avail-row.status-booked label,
.avail-row.status-blocked label { cursor: not-allowed; opacity: 0.72; }

/* Status words: color supports the word, never replaces it. */

.status-free .plan-unit-status,
.status-free .row-status { color: var(--palm); }
.status-held .plan-unit-status,
.status-held .row-status { color: var(--state-customer); }
.status-booked .plan-unit-status,
.status-booked .row-status { color: var(--pool); }
.status-blocked .plan-unit-status,
.status-blocked .row-status { color: var(--state-denied); }

/* Selection and hold panels mirror the session-panel card. */

.availability-panel {
  position: relative;
  margin-top: 1.7rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--card);
  border: 2px solid var(--outline);
  box-shadow: 8px 8px 0 var(--pool-aqua-deep);
}

.availability-panel::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 5px;
  background: var(--stripe);
}

.availability-panel h3 {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.availability-panel .panel-note { margin: 0; color: var(--ink-soft); max-width: 46rem; }

.availability-addons {
  margin: 1.1rem 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.35rem;
}

.availability-addons legend { margin-bottom: 0.45rem; }

.addon-option {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding-right: 0.6rem;
  font-weight: 600;
  cursor: pointer;
}

.addon-option input { width: 1.25rem; height: 1.25rem; accent-color: var(--pool); }

.availability-actions { margin-top: 1.3rem; }

.hold-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin: 1.1rem 0 0;
}

.hold-countdown-time {
  font-family: var(--mono);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1;
}

@media (max-width: 48em) {
  .plan-canvas { aspect-ratio: 4 / 3; }
  .avail-row label { grid-template-columns: auto 1fr; }
  .avail-row .row-status { grid-column: 2; text-align: left; }
}

@media (max-width: 30em) {
  .availability-field input[type="date"] { width: 100%; }
  .availability-actions .btn { flex: 1 1 100%; }
  .plan-unit label { min-width: 4rem; padding: 0.35rem 0.5rem; }
  .plan-unit-name { font-size: 0.74rem; }
}

/* --- Commerce: method choice, visibly no-charge setup, complete Summary -------
   One "Buy and pay" action and authoritative pending/failure/confirmation
   states, styled on the existing session/hold panel vocabulary. */

.commerce-nocharge {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 2px dashed var(--palm);
  background: var(--paper-cool);
  font-weight: 700;
  color: var(--ink-strong);
}

.commerce-methods {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.6rem;
}

.commerce-methods legend {
  margin-bottom: 0.45rem;
  font-weight: 700;
}

.commerce-method {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  min-height: 2.75rem;
}

.commerce-method input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--pool); }

.commerce-method-body { display: grid; gap: 0.15rem; }

.commerce-method-name { font-weight: 700; }

.commerce-method-copy { color: var(--ink-soft); font-size: 0.92rem; }

.commerce-method-state { font-size: 0.85rem; font-weight: 700; }

.commerce-method-state.st-customer { color: var(--state-staff); }

.commerce-method-state.st-denied { color: var(--state-denied); }

.commerce-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 0;
}

.commerce-summary-table caption { text-align: left; }

.commerce-summary-table th,
.commerce-summary-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--line);
}

.commerce-summary-table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.commerce-summary-number { text-align: right; font-family: var(--mono); white-space: nowrap; }

.commerce-line-name { display: block; font-weight: 700; }

.commerce-line-evidence { display: grid; gap: 0.1rem; margin-top: 0.25rem; }

.commerce-line-discount { display: block; margin-top: 0.25rem; font-size: 0.85rem; font-weight: 700; color: var(--state-staff); }

.commerce-evidence-label { font-size: 0.85rem; color: var(--ink-soft); }

.commerce-evidence-row { font-size: 0.85rem; color: var(--ink-soft); }

.commerce-totals { margin-top: 1rem; max-width: 26rem; margin-left: auto; }

.commerce-total-strong { font-family: var(--mono); font-weight: 700; }

.commerce-booking-lines {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.commerce-booking-lines li {
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--card);
}

.commerce-manage,
.commerce-proof { margin-top: 1.3rem; }

.commerce-manage h3,
.commerce-proof h3 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.proof-link {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  word-break: break-all;
}

.bridge-status { font-style: italic; color: var(--ink-soft); }

@media (max-width: 48em) {
  .commerce-summary-table { font-size: 0.88rem; }
  .commerce-summary-table th,
  .commerce-summary-table td { padding: 0.4rem 0.25rem; }
}