/* generated by family-site/scripts/build-showcase.mjs, do not edit */
/* /nha/182-president/kham-pha (TASK 013). One full-screen technical sheet: paper, ink, one burnt-orange accent.
   Always light (like the story page's 3D stage), also in dark mode. */
.hx {
  --paper: #f3f1ec; --ink: #1f2326; --soft: #5d6468; --line: rgba(31, 35, 38, 0.22); --accent: #c4552e;
  --glass: rgba(248, 247, 243, 0.9);
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --sans: -apple-system, 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  position: fixed; inset: 0; overflow: hidden; background: var(--paper); color: var(--ink); font: 14px/1.45 var(--sans);
  -webkit-tap-highlight-color: transparent;
}
/* scoped: pages.js eager-globs every page, so this file is bundled on ALL pages; never style html/body bare */
html:has(#hx), html:has(#hx) body { margin: 0; height: 100%; background: #f3f1ec; overscroll-behavior: none; }
.hx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
.hx canvas:active { cursor: grabbing; }
.hx button { font: inherit; color: inherit; }

/* labels: room names on the floor, small mono tags */
.hx-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hx-label {
  position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.25s;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: 500 10px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: #2a2f32;
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper);
}
.hx-label i { font-style: normal; color: var(--soft); letter-spacing: 0.02em; text-transform: none; }
.hx-label.is-on { color: var(--accent); font-weight: 700; }

/* top bar */
.hx-bar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 0.75rem;
  padding: calc(0.7rem + env(safe-area-inset-top)) 1.1rem 0.7rem; pointer-events: none;
}
.hx-bar > * { pointer-events: auto; }
.hx-back { display: inline-flex; gap: 0.5rem; align-items: center; color: var(--ink); text-decoration: none; font: 700 13px/1 var(--sans); letter-spacing: 0.02em; text-transform: uppercase; padding: 0.55rem 0.2rem; }
.hx-back span { font-size: 16px; }
.hx-tabs, .hx-units { display: inline-flex; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 2px; }
.hx-tabs { margin: 0 auto; }
.hx-tabs button, .hx-units button, .hx-home, .hx-chips button, .hx-card-x, .hx-strip button, .hx-side button {
  all: unset; box-sizing: border-box; cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft);
  padding: 0.62rem 0.85rem; transition: color 0.2s, background 0.2s;
}
.hx-tabs button + button, .hx-units button + button, .hx-side button + button { border-left: 1px solid var(--line); }
.hx-tabs button[aria-pressed='true'], .hx-units button[aria-pressed='true'], .hx-side button[aria-pressed='true'] { color: var(--paper); background: var(--ink); }
.hx-tabs button:focus-visible, .hx-units button:focus-visible, .hx-home:focus-visible, .hx-chips button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hx .hx-walls { all: unset; box-sizing: border-box; cursor: pointer; pointer-events: auto; border: 1px solid var(--line); background: var(--glass); border-radius: 2px;
  font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); padding: 0.62rem 0.85rem; transition: color 0.2s, background 0.2s; }
.hx-walls[aria-pressed='true'] { color: var(--paper); background: var(--ink); }
.hx-walls:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hx-walls .hx-short { display: none; }
/* materials outside already shows the whole house; layers never cuts */
.hx[data-mode='materials'][data-inside='false'] .hx-walls, .hx[data-mode='layers'] .hx-walls { display: none; }
.hx-home { pointer-events: auto; /* all: unset would inherit the bar's none */ border: 1px solid var(--line); background: var(--glass); border-radius: 2px; font-size: 16px; padding: 0.42rem 0.7rem; color: var(--ink); }

/* layers view: slider + assembly chips at the bottom */
.hx-layers {
  position: absolute; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3; width: min(54rem, calc(100% - 2rem));
  display: none; flex-direction: column; gap: 0.5rem; align-items: center;
}
.hx[data-mode='layers'] .hx-layers { display: flex; }
.hx-range { display: flex; align-items: center; gap: 0.7rem; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft);
  background: var(--glass); border: 1px solid var(--line); padding: 0.45rem 0.8rem; border-radius: 2px; }
.hx-range input { width: 12rem; accent-color: var(--accent); }
.hx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; }
.hx-chips button { background: var(--glass); border: 1px solid var(--line); border-left: 2px solid var(--accent); padding: 0.45rem 0.6rem; color: var(--ink); text-transform: none; letter-spacing: 0.01em; font-family: var(--sans); font-size: 12.5px; }
.hx-chips button span { font: 500 9.5px/1 var(--mono); color: var(--accent); margin-right: 0.4rem; }
.hx-chips button[aria-pressed='false'] { color: var(--soft); border-left-color: var(--line); text-decoration: line-through; opacity: 0.7; }
.hx-chips button[aria-pressed='false'] span { color: var(--soft); }

/* info card */
.hx-card {
  position: absolute; left: 1.1rem; top: calc(4.6rem + env(safe-area-inset-top)); z-index: 4; width: min(22rem, calc(100% - 2.2rem)); box-sizing: border-box;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 2px; padding: 0.85rem 1rem 0.7rem; max-height: 45svh; overflow: auto;
}
.hx-card[hidden] { display: none; }
.hx-card p, .hx-card h2, .hx-card ul { margin: 0; }
.hx-card-x { position: absolute; top: 0.25rem; right: 0.25rem; font-size: 18px; padding: 0.35rem 0.6rem; color: var(--soft); }
.hx-card-m { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); padding-right: 2rem; }
.hx-card-t { font: 800 1.25rem/1.15 var(--sans); letter-spacing: -0.01em; text-transform: uppercase; margin: 0.3rem 0 0.25rem !important; }
.hx-card-f { font: 500 11px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--soft); }
.hx-card-l { list-style: none; padding: 0; margin-top: 0.5rem !important; font-size: 13px; }
.hx-card-l li { padding: 0.25rem 0; border-top: 1px solid var(--line); }
.hx-card-l:empty { display: none; }
.hx-card-b { font-size: 13.5px; margin-top: 0.45rem !important; }
.hx-card-b:empty { display: none; }

/* bottom strips (TASK 016): room list (Phòng, Mặt bằng) and materials legend (Vật liệu); one row, scrolls sideways */
.hx-rooms, .hx-legend {
  position: absolute; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3; width: min(60rem, calc(100% - 2rem));
}
.hx-legend { display: none; flex-direction: column; align-items: center; gap: 0.45rem; }
.hx[data-mode='materials'] .hx-legend { display: flex; }
.hx[data-mode='layers'] .hx-rooms, .hx[data-mode='materials'] .hx-rooms { display: none; }
.hx-strip { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; padding-bottom: 1px; max-width: 100%; }
.hx-strip::-webkit-scrollbar { display: none; }
.hx-strip button { flex: none; background: var(--glass); border: 1px solid var(--line); padding: 0.55rem 0.7rem; color: var(--ink); text-transform: none; letter-spacing: 0.01em; font-family: var(--sans); font-size: 12.5px; display: inline-flex; align-items: center; gap: 0.4rem; }
.hx-strip button span { font: 600 9.5px/1 var(--mono); color: var(--accent); }
.hx-strip button i { width: 0.85rem; height: 0.85rem; border: 1px solid var(--line); border-radius: 2px; flex: none; }
.hx-strip button[aria-pressed='true'] { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.hx-side { display: inline-flex; border: 1px solid var(--line); background: var(--glass); border-radius: 2px; }
.hx-side button { padding: 0.55rem 0.9rem; }
.hx-hint { bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
.hx-hint-plan { display: none; }
.hx-touch[data-mode='layout'] .hx-hint-touch { display: none; }
.hx-touch[data-mode='layout'] .hx-hint-plan { display: inline; }
.hx[data-mode='materials'] .hx-hint { display: none; }

/* gesture hint */
.hx-hint { position: absolute; right: 1.1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 2; margin: 0; pointer-events: none;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); transition: opacity 0.6s; }
.hx-hint.is-gone { opacity: 0; }
.hx-hint-touch { display: none; }
.hx-touch .hx-hint-touch { display: inline; }
.hx-touch .hx-hint-mouse { display: none; }
.hx[data-mode='layers'] .hx-hint { display: none; }

.hx-fallback { display: none; position: absolute; inset: 0; padding: 5rem 1.5rem 2rem; text-align: center; }
.hx-fallback img { max-width: 100%; max-height: 60vh; }
.hx-nogl canvas, .hx-nogl .hx-tabs, .hx-nogl .hx-units, .hx-nogl .hx-home, .hx-nogl .hx-hint, .hx-nogl .hx-layers, .hx-nogl .hx-rooms, .hx-nogl .hx-legend { display: none; }
.hx-nogl .hx-fallback { display: block; }

/* phones: row 1 = back · units · home, row 2 = the 4 view tabs full width; card = bottom sheet above the strip;
   every control at least 40 px tall (finger size) */
@media (max-width: 640px) {
  .hx-bar { flex-wrap: wrap; gap: 0.45rem; padding-left: 0.6rem; padding-right: 0.6rem; }
  .hx-back b { display: none; }
  .hx-back { padding: 0.5rem 0.4rem; order: 1; }
  .hx-units { order: 2; margin: 0 auto; }
  .hx .hx-walls { order: 3; min-height: 40px; display: inline-flex; align-items: center; padding: 0 0.5rem; font-size: 10.5px; letter-spacing: 0.05em; }
  .hx-walls .hx-long { display: none; }
  .hx-walls .hx-short { display: inline; }
  .hx-home { order: 3; min-height: 40px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .hx-tabs { order: 4; flex: 1 0 100%; margin: 0; }
  .hx-tabs button { flex: 1; text-align: center; padding: 0 0.2rem; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; letter-spacing: 0.05em; }
  .hx-units button { padding: 0 0.6rem; min-height: 40px; display: inline-flex; align-items: center; font-size: 10.5px; }
  .hx-card { left: 0.6rem; right: 0.6rem; top: auto; width: auto; bottom: calc(4.1rem + env(safe-area-inset-bottom)); max-height: 34svh; }
  .hx[data-mode='layers'] .hx-card { bottom: calc(6.6rem + env(safe-area-inset-bottom)); }
  .hx[data-mode='materials'] .hx-card { bottom: calc(6.9rem + env(safe-area-inset-bottom)); }
  .hx-rooms, .hx-legend, .hx-layers { width: calc(100% - 1.2rem); bottom: calc(0.6rem + env(safe-area-inset-bottom)); }
  .hx-strip { justify-content: flex-start; }
  .hx-strip button { min-height: 40px; }
  .hx-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; width: 100%; }
  .hx-chips::-webkit-scrollbar { display: none; }
  .hx-chips button { flex: none; min-height: 40px; }
  .hx-side button { min-height: 40px; }
  .hx-hint { left: 0.8rem; right: 0.8rem; text-align: center; bottom: calc(3.9rem + env(safe-area-inset-bottom)); }
}