/* homesafe.css — /p/homesafe (Safe Landing · ถึงบ้านแล้ว).
   Design source: WEBSYS_MD/HOMESAFE_REQUIREMENTS.md + HOMESAFE_FIGMA_NODE_MAP.md.
   Space theme only — reuses p/tokens.css custom properties, no new colors. */

body { margin: 0; background: var(--space-gradient), var(--bg-primary); background-repeat: no-repeat; background-attachment: fixed; color: var(--text-primary); font-family: var(--font-thai); }

.hs-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* `display: contents` below desktop — sidebar/main wrappers disappear from
   layout, so their children just flow straight into .hs-page's mobile
   column, same as before this grid existed. */
.hs-sidebar, .hs-main { display: contents; }

/* ── Intro (2026-08-05 ask — explain what this page/feature is for) ────────
   Plain text, no card/border/background (2026-08-05 follow-up ask — this
   page already has enough boxes: action area, hero, filter bar, every list
   card). Just an icon + title + one-line explanation, sitting directly on
   the page background. */
.hs-intro { text-align: center; padding: 4px 8px 0; }
.hs-intro__icon { font-size: 32px; margin-bottom: 8px; }
.hs-intro__title { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.hs-intro__sub { font-size: 13px; color: var(--text-secondary); line-height: 1.6; max-width: 320px; margin: 0 auto; }

.hs-privacy-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(var(--accent-gold-rgb),0.1);
  border: 1px solid rgba(var(--accent-gold-rgb),0.3);
}
.hs-privacy-note__icon { font-size: 16px; flex-shrink: 0; }
.hs-privacy-note__text { flex: 1; font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; }
.hs-privacy-note__btn {
  flex-shrink: 0;
  font: 700 12px var(--font-thai);
  color: var(--accent-gold);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}
.hs-privacy-note__btn:hover { text-decoration: underline; }

/* Phase-disabled state (§ phase_config.homesafe_interactive) — same pattern as gohome.css */
.hs-disabled {
  margin: 60px auto;
  /* width, not just max-width (2026-08-05 fix, "กล่องข้อความชิดขอบจอ") —
     this card is appended straight to #homesafe-root, which has no padding
     of its own (unlike .hs-page), so on any screen narrower than the
     340px cap the card's own visible background/border sat flush against
     the physical screen edge with zero gutter. Guarantees a 16px minimum
     side gutter while still capping+centering at 340px on wider screens. */
  width: calc(100% - 32px);
  max-width: 340px;
  text-align: center;
  padding: 32px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.hs-disabled__icon { font-size: 32px; margin-bottom: 10px; }
.hs-disabled__title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.hs-disabled__subtext { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.hs-disabled__chip { margin-top: 14px; display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(var(--surface-rgb),0.06); font-size: 11px; color: var(--text-secondary); }

/* Not-logged-in gate (§5.1) — same visual pattern as gohome.css's own gate */
.hs-auth-gate {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; padding: 48px 36px;
  /* width, not just max-width — same edge-gutter fix as .hs-disabled above. */
  width: calc(100% - 32px); max-width: 420px; margin: 60px auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--accent-gold-rgb),0.16), transparent 60%),
    var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb), calc(0.35 * var(--shadow-mult)));
}
.hs-auth-gate__icon {
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 42px;
  background: rgba(var(--accent-gold-rgb),0.14);
  box-shadow: 0 0 34px rgba(var(--accent-gold-rgb),0.28);
}
.hs-auth-gate__title { font-size: 21px; font-weight: 800; color: var(--text-primary); }
.hs-auth-gate__subtext { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
/* Big, full-width, trailing arrow (2026-08-05 ask, "คล้ายที่ popup
   เพิ่มบัตรอ่ะ") — same visual language as modals.js's showNoTicketModal()
   .noticket-modal__btn-primary (auth.css). */
.hs-auth-gate__cta {
  margin-top: 6px;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 26px;
  border-radius: 12px;
  /* Fixed gradient, not theme-following (2026-08-08 fix) — this drifted
     from .noticket-modal__btn-primary's own reference gradient (auth.css,
     the pattern this button explicitly says it copies) by swapping in
     var(--accent-gold), which flips dark in light mode while the text
     stayed fixed dark, colliding. Back to the same 2 fixed stops the
     reference button already uses safely in both themes. */
  background: linear-gradient(120deg, #ffb852, #ed8420);
  color: #12121A;
  font: 700 16px var(--font-thai);
  text-decoration: none;
  cursor: pointer;
}
.hs-auth-gate__cta:hover { filter: brightness(1.06); }
.hs-auth-gate__cta-arrow { display: inline-flex; font-size: 15px; }

/* ── Round tabs ─────────────────────────────────────────────────────────── */
.hs-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.hs-tab {
  padding: 12px 14px; border-radius: 10px;
  background: rgba(var(--surface-rgb),0.04); border: 1px solid var(--border);
  color: var(--text-primary); opacity: 0.85;
  font: 600 13px var(--font-thai); cursor: pointer;
  min-height: 44px;
}
.hs-tab.is-selected {
  background: rgba(var(--accent-teal-rgb),0.16);
  border-color: rgba(var(--accent-teal-rgb),0.6);
  color: var(--accent-teal);
  opacity: 1;
}
/* Test-only "วันนี้ (ทดสอบ)" tab (2026-08-05 ask) — only ever rendered while
   homesafe_force_open is on, dashed border so it visibly reads as a
   temporary/dev affordance, not a 4th real round. */
.hs-tab--test { border-style: dashed; }
.hs-tab--test.is-selected { border-style: dashed; }

/* ── Action area (§5.1) ─────────────────────────────────────────────────── */
.hs-action {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s ease;
}
/* Subtle state accents (2026-08-05 polish pass) — a quick color glance tells
   you the action area's state without reading the text first. */
.hs-action--pending { border-color: rgba(var(--accent-gold-rgb),0.35); }
.hs-action--checked-in { border-color: rgba(79, 209, 135, 0.35); }
.hs-action__title { display: flex; align-items: center; gap: 8px; font: 700 15px var(--font-thai); }
.hs-action__lock-icon { width: 18px; height: 18px; color: var(--accent-gold); display: inline-flex; }
.hs-action__lock-icon svg { width: 100%; height: 100%; }
.hs-action__sub { font-size: 11.5px; color: var(--text-secondary); }
.hs-action--locked { opacity: 0.92; }
/* Explicit-time rule explanation (2026-08-05 ask) — shown in both the
   "not open yet" and "open, not checked in" states. */
.hs-action__explainer { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.hs-action__status { display: flex; align-items: center; gap: 8px; }
.hs-action__status-label { display: flex; align-items: center; gap: 6px; font: 700 15px var(--font-thai); }
.hs-action__time {
  padding: 3px 8px; border-radius: 6px;
  background: rgba(76, 204, 122, 0.18); color: var(--success-text);
  font: 600 11px var(--font-thai);
}

/* Buttons — bigger, gradient, glowing (2026-08-05 ask: "ใหญ่ขึ้นและน่ากดกว่านี้") */
.hs-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border: none; border-radius: 16px; cursor: pointer;
  font: 700 17px var(--font-thai);
  min-height: 44px;
}
.hs-btn:disabled { opacity: 0.6; cursor: default; }
.hs-btn__icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hs-btn__icon svg { width: 18px; height: 18px; }
.hs-btn__icon.emoji-icon { width: 18px; height: 18px; } /* emojiEl() default sizing override inside the circle badge */

.hs-btn--checkin {
  padding: 18px 22px;
  background: linear-gradient(135deg, #ffb852, #ed8420);
  color: #0d0d0d;
  box-shadow: 0 8px 24px -2px rgba(var(--accent-gold-rgb),0.35), inset 0 1px 0 rgba(var(--surface-rgb),0.12);
  border: 1px solid rgba(var(--surface-rgb),0.5);
}
.hs-btn--checkin .hs-btn__icon { background: rgba(var(--surface-rgb),0.25); }

.hs-btn--cancel {
  padding: 15px 20px;
  background: linear-gradient(135deg, rgba(107, 41, 46, 0.9), rgba(71, 26, 33, 0.9));
  color: #ff8c8c;
  font-size: 15px;
  box-shadow: 0 8px 24px -4px rgba(var(--like-red-rgb), 0.35), inset 0 1px 0 rgba(var(--surface-rgb),0.12);
  border: 1px solid rgba(var(--like-red-rgb), 0.5);
}
.hs-btn--cancel .hs-btn__icon { background: rgba(var(--surface-rgb),0.14); }
.hs-btn--cancel .hs-btn__icon svg { color: #ff8c8c; }
/* Light mode (2026-08-08 fix) — the dark-maroon gradient above was tuned
   only against dark mode's dark card background; on a light card it read
   as a stray dark-mode block. Same danger language as everywhere else
   (--like-red-rgb/--danger-text), just a soft tint instead of a dark fill. */
:root[data-theme="light"] .hs-btn--cancel {
  background: linear-gradient(135deg, rgba(var(--like-red-rgb), 0.14), rgba(var(--like-red-rgb), 0.09));
  color: var(--danger-text);
}
:root[data-theme="light"] .hs-btn--cancel .hs-btn__icon svg { color: var(--danger-text); }

/* Faded/disabled — "ยังไม่ถึงเวลา" / "ปิดรับเช็คอินแล้ว" (2026-08-05 ask) —
   same shape/size as the real check-in button so the action area doesn't
   jump around between states, just visibly inert. */
.hs-btn--locked {
  padding: 18px 22px;
  background: rgba(var(--surface-rgb),0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  opacity: 0.6;
}
.hs-btn--locked .hs-btn__icon { background: rgba(var(--surface-rgb),0.06); opacity: 0.7; }

/* ── Hero counter (§5.1) ────────────────────────────────────────────────── */
.hs-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(var(--accent-gold-rgb),0.16), rgba(var(--accent-teal-rgb),0.1));
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(var(--accent-gold-rgb),0.18);
}
.hs-hero__badge {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--surface-rgb),0.08); flex-shrink: 0;
}
.hs-hero__count { font: 800 24px var(--font-thai); }
.hs-hero__sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ── Filter bar (§8 — dropdowns, not one chip per value) ───────────────── */
.hs-filterbar { display: flex; flex-direction: column; gap: 10px; }
.hs-search {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(var(--surface-rgb),0.05); border: 1px solid var(--border);
}
/* display:flex + explicit font-size (2026-08-05 fix: "ไอคอนค้นหาตกชิดขอบล่าง")
   — the icon's SVG is sized in `em` (icons.js convention), so without a
   matching font-size here it inherited a larger ambient size than this
   14px box, overflowed unclipped, and (being inline-default) sank low via
   baseline alignment instead of sitting centered in its own box. */
.hs-search__icon {
  width: 14px; height: 14px; font-size: 14px; color: var(--text-secondary); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hs-search__icon svg { width: 100%; height: 100%; display: block; }
.hs-search__input {
  flex: 1; border: none; background: none; outline: none;
  color: var(--text-primary); font: 400 13px var(--font-thai);
}
.hs-search__input::placeholder { color: var(--text-secondary); }

/* Suggestion dropdown (2026-08-05 ask: "ต้องค้นหาแบบ dropdown เหมือนฟีเจอร์อื่นๆ")
   — same visual pattern as gohome.css's .gh-search__results. */
.hs-search__results {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(var(--shadow-rgb), calc(0.4 * var(--shadow-mult)));
}
.hs-search__result {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 8px 12px;
  background: none; border: none; color: var(--text-primary);
  font: 500 13px var(--font-thai); cursor: pointer;
}
.hs-search__result + .hs-search__result { border-top: 1px solid var(--border); }
.hs-search__result:hover { background: rgba(var(--surface-rgb),0.06); }
.hs-search__result-sub { color: var(--text-secondary); font-size: 11px; margin-left: auto; }
.hs-search__empty { padding: 14px 8px; font-size: 12px; color: var(--text-secondary); text-align: center; }

/* Toggle chips (2026-08-05 ask, replaces the earlier zone/country dropdowns)
   — "วิธีกลับ" (self-return / Star Buddy poster) + same-zone, independent
   on/off toggles, same visual family as the round tabs. */
.hs-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* No icons (2026-08-05 ask — removed), ~10% smaller (was 8px/12px padding,
   12px font; 2026-08-05 ask). */
.hs-filter-chip {
  padding: 7px 11px; border-radius: 999px;
  background: rgba(var(--surface-rgb),0.05); border: 1px solid var(--border);
  color: var(--text-primary); opacity: 0.8;
  font: 600 11px var(--font-thai); cursor: pointer;
}
.hs-filter-chip.is-selected {
  background: rgba(var(--accent-teal-rgb),0.16);
  border-color: rgba(var(--accent-teal-rgb),0.6);
  color: var(--accent-teal);
  opacity: 1;
}
.hs-filter-chip.is-disabled { opacity: 0.35; cursor: default; }

/* ── Card list (§6/§7/§8) ───────────────────────────────────────────────── */
.hs-list { display: flex; flex-direction: column; gap: 10px; }
.hs-list__head { display: flex; align-items: center; justify-content: space-between; }
.hs-list__title { display: flex; align-items: center; gap: 6px; font: 600 12px var(--font-thai); color: var(--text-secondary); }
.hs-list__title-icon { width: 13px; height: 13px; display: inline-flex; }
.hs-list__title-icon svg { width: 100%; height: 100%; }
.hs-list__count { font: 600 12px var(--font-thai); color: var(--text-secondary); opacity: 0.7; }
.hs-list__body { display: flex; flex-direction: column; gap: 10px; }

.hs-card {
  display: flex;
  background: rgba(var(--surface-rgb),0.03);
  border: 1px solid rgba(var(--surface-rgb),0.05);
  border-radius: 12px;
  overflow: hidden;
}
/* Pinned own card (2026-08-05 ask: "การ์ดของคุณ ใน gohome ทำแบบไหน ก็ควร
   เป็นแบบนั้น") — mirrors gohome.css's `.gh-route-card--own` exactly: a full
   2px gold border (not just a tinted accent bar), a small corner badge
   instead of a separate label line, and fully centered content — "a
   personal status summary, not a row to scan against others." */
.hs-card--mine {
  position: relative;
  border: 2px solid var(--accent-gold);
  background: rgba(var(--accent-gold-rgb),0.06);
  box-shadow: 0 4px 16px rgba(var(--accent-gold-rgb),0.12);
  /* Overrides .hs-card's overflow:hidden (2026-08-05 follow-up ask: the
     badge should float ON TOP OF the border line, not be tucked inside the
     box) — without this the badge's negative top offset below gets clipped
     by the card's own rounded-corner clip, which was today's "ทำไมมันโดนบัง"
     bug. Visible here only trades away corner-clipping the accent bar's
     square edge at the very top-left pixel, an acceptable/invisible cost. */
  overflow: visible;
}
.hs-card--mine .hs-card__accent { background: var(--accent-gold); }
:root[data-theme="light"] .hs-card--mine .hs-card__accent { background: #F4A140; }
/* Floating ribbon over the top border (2026-08-05 follow-up ask — reverted
   from "inside the box"), same treatment as gohome.css's own "ข้อมูลของฉัน"
   corner badge. */
.hs-card__mine-badge {
  position: absolute; top: -8px; right: 10px; z-index: 1;
  font-size: 9px; font-weight: 700; color: var(--gold-btn-text);
  padding: 2px 8px; border-radius: 999px; background: var(--accent-gold);
}
/* Keeps dark mode's vivid gold/teal in light mode too (2026-08-08 ask) —
   solid fill (badge text or decorative bar), independent of page bg. */
:root[data-theme="light"] .hs-card__mine-badge { background: #F4A140; color: #1a1300; }
.hs-card__accent { width: 3px; flex-shrink: 0; background: var(--accent-teal); opacity: 0.9; }
:root[data-theme="light"] .hs-card__accent { background: #13CDCB; }
.hs-card__accent--dim { background: var(--text-secondary); opacity: 0.25; }
.hs-card__body {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
}
.hs-card__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hs-card__avatar-ring {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--accent-gold); opacity: 0.9;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hs-card__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.hs-card__text { min-width: 0; }
.hs-card__name-row { display: flex; align-items: center; gap: 5px; }
.hs-card__name { font: 600 13px var(--font-thai); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-card__handle { font-size: 11px; color: var(--text-secondary); }
.hs-card__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.hs-card__zone {
  padding: 3px 7px; border-radius: 6px;
  background: rgba(var(--accent-teal-rgb),0.16); color: var(--accent-teal);
  font: 600 10px var(--font-thai); white-space: nowrap;
}
.hs-card__time { font-size: 10px; color: var(--text-secondary); white-space: nowrap; }

.hs-empty { text-align: center; padding: 32px 16px; color: var(--text-secondary); }
.hs-empty__icon { font-size: 28px; opacity: 0.6; margin-bottom: 8px; }
.hs-empty__text { font-size: 13px; }

.hs-load-more {
  padding: 10px; border-radius: 10px; text-align: center;
  background: rgba(var(--surface-rgb),0.04); border: none;
  color: var(--accent-teal); font: 600 12px var(--font-thai); cursor: pointer;
}

/* ── Desktop 2-column bento (2026-08-05 ask) ────────────────────────────────
   Same grid pattern as gohome.css's .gh-home-sidebar/.gh-home-main: a sticky
   left sidebar for "about your check-in" content, a wide main column for
   the browsable list. Mobile layout (single stacked column) is untouched
   below this breakpoint — .hs-sidebar/.hs-main are display:contents there. */
@media (min-width: 768px) {
  .hs-page {
    max-width: 1100px;
    padding-top: 32px;
    display: grid;
    grid-template-columns: minmax(300px, 34%) 1fr;
    align-items: start;
    gap: 28px;
  }
  .hs-sidebar { display: flex; flex-direction: column; gap: 22px; position: sticky; top: calc(var(--navbar-h) + 20px); }
  .hs-main { display: flex; flex-direction: column; gap: 22px; }
  .hs-intro { text-align: left; padding: 4px 0 0; }
  .hs-intro__sub { margin: 0; }
}

/* Legal footer (2026-08-05 fix — was missing entirely on this page) — same
   spacing convention as find.css's #find-root > .lg-footer-link. Lives
   inside .hs-gate-shell now (gate/disabled states only — see below), not a
   direct #homesafe-root child. */
.hs-gate-shell .lg-footer-link { margin-top: 20px; padding-bottom: 20px; }
/* Logged-in state footer (2026-08-09 fix, "legal ชิดขอบล่าง") — main() in
   homesafe.js appends buildLegalFooter() straight to #homesafe-root as a
   sibling of .hs-page (so renderAll()'s page.innerHTML='' can't wipe it),
   but that placement was never given the same spacing as the gate-shell
   case above — same #root > .lg-footer-link fallback convention as
   find.css/market.css. */
#homesafe-root > .lg-footer-link { margin-top: 20px; padding-bottom: 20px; }

/* Gate/disabled-state shell (2026-08-05 fix, "ทำไมกล่องไม่อยู่กลางหน้า...
   แถบ legal ไม่ชิดขอบ") — fills the viewport, vertically centers the card
   in the available space, footer trailing right after it. Scoped to this
   wrapper only (renderAuthGate()/renderDisabledState() in homesafe.js),
   never applied to #homesafe-root itself, so the normal .hs-page layout is
   untouched by it. */
.hs-gate-shell {
  min-height: calc(100vh - var(--navbar-h));
  min-height: calc(100dvh - var(--navbar-h));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hs-gate-shell .hs-auth-gate,
.hs-gate-shell .hs-disabled { margin-top: auto; margin-bottom: auto; }