/* public/design/hm-components.css
 * ─────────────────────────────────────────────────────────────────────────
 * HotelMonitor shared components (site redesign, 2026-09). Requires
 * public/design/hm-tokens.css.
 *
 * CONTRACT: every selector starts with a .hm- class. Nothing here matches an
 * element a page has not explicitly opted in with one of these classes, so
 * linking this file changes nothing on a page that does not use them. Page
 * families adopt components one reviewed step at a time.
 *
 * Components follow the handoff's contracts: persistent labels, inline field
 * errors, visible focus, 44px minimum controls, 150ms colour transitions,
 * tables that scroll inside their own container, reduced motion respected.
 */

/* ── Accessibility helpers ─────────────────────────────────────────────── */
.hm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hm-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--hm-radius-control);
  background: var(--hm-ink);
  color: var(--hm-white);
  font: 600 .9rem/1.2 var(--hm-font-body);
  text-decoration: none;
}
.hm-skip-link:focus { top: 12px; outline: 2px solid var(--hm-green); outline-offset: 2px; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.hm-container {
  width: 100%;
  max-width: var(--hm-max-content);
  margin: 0 auto;
  padding: 0 var(--hm-gutter);
  box-sizing: border-box;
}
.hm-display {
  font-family: var(--hm-font-display);
  font-weight: 400;
  line-height: 1.08;
  color: var(--hm-ink);
  text-wrap: balance;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--hm-control-min);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--hm-radius-control);
  font: 700 .92rem/1.2 var(--hm-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--hm-fast), border-color var(--hm-fast), color var(--hm-fast);
}
.hm-btn--primary { background: var(--hm-green); color: var(--hm-white); }
.hm-btn--primary:hover { background: var(--hm-green-dark); }
.hm-btn--secondary { background: var(--hm-white); color: var(--hm-ink); border-color: var(--hm-field-border); }
.hm-btn--secondary:hover { border-color: var(--hm-ink); }
.hm-btn--ghost { background: transparent; color: var(--hm-green); }
.hm-btn--ghost:hover { color: var(--hm-green-dark); }
.hm-btn:focus-visible { outline: 2px solid var(--hm-ink); outline-offset: 3px; }
.hm-btn:disabled,
.hm-btn[aria-disabled="true"] { cursor: progress; opacity: .7; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.hm-card {
  background: var(--hm-white);
  color: var(--hm-ink);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius-card);
  box-shadow: var(--hm-shadow-card);
}
.hm-card--panel { border-radius: var(--hm-radius-panel); box-shadow: var(--hm-shadow-raised); border: 0; }

/* ── Form fields: persistent label, hint, inline error ─────────────────── */
.hm-field { display: grid; gap: 6px; margin-bottom: 14px; }
.hm-field__label { font: 600 .74rem/1.3 var(--hm-font-body); color: var(--hm-ink); }
.hm-field__input {
  min-height: var(--hm-control-min);
  padding: 10px 12px;
  border: 1px solid var(--hm-field-edge);
  border-radius: var(--hm-radius-control);
  background: var(--hm-white);
  color: var(--hm-ink);
  font: .92rem/1.3 var(--hm-font-body);
  box-sizing: border-box;
  transition: border-color var(--hm-fast), box-shadow var(--hm-fast);
}
.hm-field__input:focus { outline: none; border-color: var(--hm-green); box-shadow: 0 0 0 3px var(--hm-focus-glow); }
.hm-field__hint { font: .76rem/1.4 var(--hm-font-body); color: var(--hm-muted); }
.hm-field__error { font: 600 .76rem/1.4 var(--hm-font-body); color: var(--hm-error); }
.hm-field--error .hm-field__input { border-color: var(--hm-error); }

/* ── Segmented control (e.g. booked / still looking) ───────────────────── */
.hm-seg {
  display: flex;
  gap: 0;
  padding: 4px;
  border-radius: 25px;
  background: var(--hm-surface-muted);
}
.hm-seg__option {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--hm-muted);
  font: 700 .8rem/1.2 var(--hm-font-body);
  cursor: pointer;
  transition: background-color var(--hm-fast), color var(--hm-fast);
}
.hm-seg__option[aria-pressed="true"] { background: var(--hm-ink); color: var(--hm-white); }
.hm-seg__option:focus-visible { outline: 2px solid var(--hm-green); outline-offset: 2px; }

/* ── Notices: neutral, unverified (amber), error ───────────────────────── */
.hm-notice {
  padding: 12px 14px;
  border-radius: var(--hm-radius-control);
  background: var(--hm-mint);
  color: var(--hm-ink);
  font: .86rem/1.5 var(--hm-font-body);
}
.hm-notice--unverified { background: var(--hm-amber-bg); color: var(--hm-amber); }
.hm-notice--error { background: var(--hm-error-bg); color: var(--hm-error); }

/* ── Status pages: success / error / empty / expired / unauthorised ────── */
.hm-status {
  max-width: 560px;
  margin: 48px auto;
  padding: 32px;
  text-align: center;
  background: var(--hm-white);
  color: var(--hm-ink);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius-panel);
}
.hm-status__title { margin: 0 0 10px; font: 400 2rem/1.1 var(--hm-font-display); color: var(--hm-ink); }
.hm-status__body { margin: 0 0 20px; font: 1rem/1.6 var(--hm-font-body); color: var(--hm-muted); }
.hm-status--error .hm-status__title { color: var(--hm-error); }

/* ── Tables scroll inside their own container ──────────────────────────── */
.hm-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm-table { width: 100%; border-collapse: collapse; font: .88rem/1.4 var(--hm-font-body); color: var(--hm-ink); }
.hm-table th,
.hm-table td { padding: 10px 12px; border-bottom: 1px solid var(--hm-line); text-align: left; }
.hm-table th { font-weight: 700; color: var(--hm-muted); }

/* ── Loading placeholder ───────────────────────────────────────────────── */
.hm-skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--hm-radius-control);
  background: linear-gradient(90deg, var(--hm-surface-muted) 0%, var(--hm-cream) 50%, var(--hm-surface-muted) 100%);
  background-size: 200% 100%;
  animation: hm-skeleton 1.4s ease-in-out infinite;
}
@keyframes hm-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Breakpoints (see hm-tokens.css) ───────────────────────────────────── */
@media (max-width: 750px) {
  .hm-container { padding: 0 var(--hm-gutter-mobile); }
  .hm-status { margin: 32px auto; padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-btn,
  .hm-field__input,
  .hm-seg__option { transition: none; }
  .hm-skeleton { animation: none; }
}