/* =================================================================
   HotelMap · ISG — CORE COMPONENTS
   Reset · type roles · UI-kit components (buttons, cards, chips,
   steppers, sliders, badges). Tokens live in tokens.css ONLY — this
   file declares NONE, it only consumes them via var().
   ================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--bg-app);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }

/* =================================================================
   Type  (UI-kit components — consume the semantic layer)
   ================================================================= */
.hm-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent);
  margin: 0;
}
.hm-display {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-heading);
  margin: 0;
}
.hm-h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.015em; line-height: 1.2; color: var(--text-heading); margin: 0; }
.hm-h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.25; color: var(--text-heading); margin: 0; }
.hm-h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-heading); margin: 0; }
.hm-row-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-heading); margin: 0; }
.hm-sub { font-size: var(--fs-xs); line-height: 1.4; color: var(--text-muted); margin: 0; }
.hm-value { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1; color: var(--text-heading); font-feature-settings: "tnum" 1; white-space: nowrap; }
.hm-value-sub { font-size: var(--fs-xs); line-height: 1.4; color: var(--text-muted); font-weight: var(--fw-regular); }

/* =================================================================
   TYPE ROLES — the type system. Base default = Body (16px). Every
   role draws from the size scale; use these on any new text.
   ================================================================= */
.t-display  { font-size: var(--fs-4xl); font-weight: var(--fw-bold);     line-height: 1.1;  letter-spacing: -0.02em; color: var(--text-heading); }
.t-title-1  { font-size: var(--fs-3xl); font-weight: var(--fw-bold);     line-height: 1.15; letter-spacing: -0.02em; color: var(--text-heading); }
.t-title-2  { font-size: var(--fs-2xl); font-weight: var(--fw-bold);     line-height: 1.2;  letter-spacing: -0.015em; color: var(--text-heading); }
.t-title-3  { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); line-height: 1.25; color: var(--text-heading); }
.t-lead     { font-size: var(--fs-lg);  font-weight: var(--fw-regular);  line-height: 1.5;  color: var(--text-body); }
.t-body     { font-size: var(--fs-md);  font-weight: var(--fw-regular);  line-height: 1.5;  color: var(--text-body); }
.t-body-sm  { font-size: var(--fs-sm);  font-weight: var(--fw-regular);  line-height: 1.45; color: var(--text-body); }
.t-caption  { font-size: var(--fs-xs);  font-weight: var(--fw-regular);  line-height: 1.4;  color: var(--text-muted); }
.t-label    { font-size: var(--fs-xs);  font-weight: var(--fw-semibold); line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.t-micro    { font-size: var(--fs-2xs); font-weight: var(--fw-medium);   line-height: 1; }
.t-rate     { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1; font-feature-settings: "tnum" 1; }

/* =================================================================
   Number badge — STRUCTURAL ink marker (NOT a button).
   Rule: teal is reserved for the single next-step action + live
   controls. Section numbers are wayfinding, so they use ink.
   ================================================================= */
.hm-badge {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--text-heading);
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  flex-shrink: 0;
  font-feature-settings: "tnum" 1;
}
.hm-badge.sm { width: 26px; height: 26px; border-radius: var(--radius-sm); font-size: var(--fs-xs); }

/* =================================================================
   Section head (badge + title)
   ================================================================= */
.hm-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-20);
}
.hm-section-head .hm-h2 { font-size: var(--fs-xl); }

/* =================================================================
   Stepper
   ================================================================= */
.hm-stepper {
  display: inline-grid;
  grid-template-columns: 40px 48px 40px;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 4px;
}
.hm-stepper button {
  width: 40px; height: 34px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, transform .06s ease;
}
.hm-stepper button:hover:not(:disabled) { background: var(--accent-hover); }
.hm-stepper button:active:not(:disabled) { transform: scale(.94); }
.hm-stepper button:disabled {
  background: var(--surface-sunken-2);
  color: var(--border-disabled);
  cursor: not-allowed;
}
.hm-stepper .val {
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  color: var(--text-heading);
}
.hm-stepper .val.zero { color: var(--text-faint); }

/* =================================================================
   Room row (grey fill)
   ================================================================= */
.hm-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  background: var(--surface-sunken);
  border-radius: 10px;
  padding: 12px 14px;
}
.hm-room-row + .hm-room-row { margin-top: 8px; }
.hm-room-row .rr-text .hm-row-title { margin-bottom: 2px; }
/* bed pictogram sits just left of the stepper; titles keep their alignment */
.hm-room-row .rr-actions { display: flex; align-items: center; gap: var(--space-16, 16px); flex: none; }
.hm-room-row .rr-bed { color: var(--text-heading); flex: none; }
.bed-ico { display: block; flex: none; }

/* =================================================================
   Sliders
   ================================================================= */
.hm-slider-wrap { padding-top: 2px; }
.hm-slider-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 11px;
}
.hm-slider-label { font-size: var(--fs-sm); color: var(--text-body); }

/* single range — native input restyled */
input[type="range"].hm-range-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--border);
  outline: none;
  margin: 0;
}
input[type="range"].hm-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(var(--shadow-rgb),0.18);
  margin-top: 0;
}
input[type="range"].hm-range-input::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(var(--shadow-rgb),0.18);
}
.hm-slider-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* dual-range (custom) */
.hm-dual {
  position: relative;
  height: 22px;
}
.hm-dual .track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--border);
}
.hm-dual .fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.hm-dual input[type="range"] {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.hm-dual input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(var(--shadow-rgb),0.18);
}
.hm-dual input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(var(--shadow-rgb),0.18);
}

/* =================================================================
   Buttons
   -----------------------------------------------------------------
   STYLE-GUIDE RULE (do not drift): button labels are ALWAYS
   uppercase with generous tracking (letter-spacing >= 0.1em).
   This is the house voice — sentence-case pills are NOT used here.
   Teal fill marks the live/next action; darker teal on rollover.
   ================================================================= */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-button);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;   /* generous tracking — house rule */
  cursor: pointer;
  transition: background .12s ease, transform .06s ease, box-shadow .12s;
}
.hm-btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-btn);
}
.hm-btn.primary:hover { background: var(--accent-hover); }
.hm-btn.primary:active { transform: translateY(1px); }
.hm-btn.block { width: 100%; }
.hm-btn.secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1.5px solid var(--border);
}
.hm-btn.secondary:hover { border-color: var(--accent); }
.hm-btn.ghost { background: transparent; color: var(--link); height: auto; padding: 0; font-weight: 600; }
.hm-link { color: var(--link); font-weight: 600; cursor: pointer; text-decoration: none; }
.hm-link:hover { color: var(--link-hover); text-decoration: underline; }

/* =================================================================
   Cards
   ================================================================= */
.hm-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.hm-card.float { box-shadow: var(--shadow-float); }

/* Choice cards (single vs group) */
.hm-choice {
  border: 2px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  padding: 28px 24px 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .14s, background .14s, box-shadow .14s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}
.hm-choice:hover { border-color: var(--accent-soft); }
.hm-choice.selected {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.hm-choice .choice-icon { height: 96px; display: flex; align-items: center; justify-content: center; color: var(--text-heading); }
.hm-choice .choice-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.hm-choice .choice-title { font-size: var(--fs-2xl); font-weight: 600; color: var(--text-heading); }

/* =================================================================
   Chips / toggles (must-haves)
   ================================================================= */
.hm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: 38px;
  padding: 0 15px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all .12s ease;
  user-select: none;
}
.hm-chip .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hm-chip.on {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.hm-chip.on .check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* =================================================================
   Dividers + misc
   ================================================================= */
.hm-divider { height: 1px; background: var(--border); border: 0; margin: var(--space-32) 0; }
.hm-meta-strip { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hm-powered { display: inline-flex; align-items: center; gap: 6px; }
.hm-powered .pw-label { font-size: var(--fs-xs); color: var(--text-muted); }
.hm-powered .pw-mark { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.18em; color: var(--text-heading); }