/* house mate — shared stylesheet
   Design tokens aligned with Tahutu Playground (hi.tahutu.tech):
   Bricolage Grotesque typography, JetBrains Mono details,
   warm paper #ece7df, deep pine accent #1f4d3a, hairline borders. */

:root {
  --fg-primary:#0f1512; --fg-secondary:#6b6459; --fg-tertiary:#968e82;
  --fg-brand:#1f4d3a;
  --bg-surface-primary:#f5f2eb; --bg-surface-secondary:#e6e0d5;
  --bg-brand-subtle:#e2ebe5;
  --border-primary:#cfc9bd; --border-secondary:#dfd9cc;
  --app-bg:#ece7df;
  --font-sans:'Bricolage Grotesque',sans-serif;
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --radius-card:12px; --radius-pill:6px;
  color-scheme:light;
}
[data-theme="dark"] {
  --fg-primary:#ece7df; --fg-secondary:#9ea89f; --fg-tertiary:#6b776c;
  --fg-brand:#48c78e;
  --bg-surface-primary:#17211c; --bg-surface-secondary:#1f2c25;
  --bg-brand-subtle:#193829;
  --border-primary:#2d3d34; --border-secondary:#223028;
  --app-bg:#0f1512;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg-primary:#ece7df; --fg-secondary:#9ea89f; --fg-tertiary:#6b776c;
    --fg-brand:#48c78e;
    --bg-surface-primary:#17211c; --bg-surface-secondary:#1f2c25;
    --bg-brand-subtle:#193829;
    --border-primary:#2d3d34; --border-secondary:#223028;
    --app-bg:#0f1512;
    color-scheme:dark;
  }
}

/* ---- base ---- */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--font-sans); font-size:1rem; line-height:1.6;
  background:var(--app-bg); color:var(--fg-primary);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
.wrap { max-width:720px; margin:0 auto; padding:32px 20px 64px; }
@media (min-width:640px) { .wrap { padding:48px 24px 80px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}

/* ---- focus & skip link ---- */
:focus-visible { outline:3px solid var(--fg-brand); outline-offset:3px; }
.skip-link {
  position:absolute; left:16px; top:-120px; z-index:100;
  padding:10px 18px; border-radius:var(--radius-pill);
  background:var(--fg-primary); color:var(--app-bg);
  font-family:var(--font-mono); font-size:.85rem; font-weight:600; text-decoration:none;
}
.skip-link:focus { top:16px; }

/* ---- header ---- */
.site-header { display:flex; flex-wrap:wrap; align-items:center; gap:20px 16px; margin-bottom:40px; }
.wordmark {
  font-family:var(--font-mono); font-weight:700; font-size:1.15rem; line-height:1;
  letter-spacing:-.01em; color:var(--fg-primary); text-decoration:none; margin-right:auto;
  display:inline-flex; align-items:center; gap:8px;
}
.wordmark .logo { width:20px; height:20px; border-radius:4px; display:block; }
.wordmark .slash { color:var(--fg-brand); margin:0 2px; }
.wordmark .sub { color:var(--fg-secondary); font-weight:500; }
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
#lang-toggle, #theme-toggle {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 500;
  color: var(--fg-secondary); background: var(--bg-surface-secondary);
  border: 1px solid var(--border-secondary); border-radius: var(--radius-pill);
  padding: 6px 14px; cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
#lang-toggle:hover, #theme-toggle:hover {
  border-color: var(--fg-brand); color: var(--fg-brand); background: var(--bg-surface-primary);
}
.site-nav { flex-basis:100%; }
.site-nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.site-nav a {
  display:inline-block; padding:6px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--border-secondary); background:var(--bg-surface-primary);
  color:var(--fg-secondary); font-family:var(--font-mono); font-size:.8rem; font-weight:500; text-decoration:none;
  transition:border-color .2s, color .2s;
}
.site-nav a:hover { border-color:var(--fg-brand); color:var(--fg-brand); }
.site-nav a[aria-current="page"] { background:var(--fg-brand); border-color:var(--fg-brand); color:#ffffff; font-weight:600; }

/* ---- landing: hero ---- */
.hero { margin-bottom:56px; }
.eyebrow {
  font-family:var(--font-mono); font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-secondary); margin-bottom:16px;
}
.hero h1 {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3rem, 12vw, 4.5rem); line-height:1; letter-spacing:-.03em; margin-bottom:16px;
  color:var(--fg-primary);
}
.tagline { font-size:clamp(1.25rem, 4vw, 1.5rem); font-weight:600; line-height:1.35; max-width:26ch; margin-bottom:16px; color:var(--fg-brand); }
.lede { color:var(--fg-secondary); font-size:1.05rem; max-width:60ch; margin-bottom:24px; }
.availability {
  display:inline-block; font-family:var(--font-mono); font-size:.8rem; font-weight:500; color:var(--fg-secondary);
  background:var(--bg-surface-secondary); border:1px solid var(--border-secondary);
  border-radius:var(--radius-pill); padding:6px 14px;
}

/* ---- landing: sections ---- */
.section { margin-bottom:56px; }
.section h2 {
  font-family:var(--font-display); font-weight:700; font-size:1.5rem; line-height:1.3;
  letter-spacing:-.01em; margin-bottom:20px;
}
.section-lede { color:var(--fg-secondary); margin:-8px 0 20px; max-width:60ch; }

.card-grid { list-style:none; display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:560px) { .card-grid { grid-template-columns:1fr 1fr; } }
.card {
  background:var(--bg-surface-primary); border:1px solid var(--border-secondary);
  border-radius:var(--radius-card); padding:24px;
}
.card .glyph {
  width:40px; height:40px; border-radius:8px; background:var(--bg-brand-subtle); color:var(--fg-brand);
  display:grid; place-items:center; margin-bottom:16px;
}
.card .glyph svg { width:20px; height:20px; }
.card h3 { font-family:var(--font-display); font-weight:700; font-size:1.15rem; line-height:1.3; margin-bottom:8px; }
.card p { color:var(--fg-secondary); font-size:.95rem; }

.steps { list-style:none; display:grid; gap:20px; margin-bottom:20px; }
.steps li { display:grid; grid-template-columns:36px 1fr; gap:16px; align-items:start; }
.steps .num {
  font-family:var(--font-mono); font-weight:600; font-size:1rem; line-height:1;
  width:36px; height:36px; border-radius:6px; background:var(--bg-brand-subtle); color:var(--fg-brand);
  display:grid; place-items:center;
}
.steps h3 { font-weight:600; font-size:1.05rem; line-height:1.4; margin-bottom:4px; }
.steps p { color:var(--fg-secondary); font-size:.95rem; }

.note { background:var(--bg-surface-secondary); border-radius:16px; padding:16px 20px; font-size:.95rem; }
.note p { color:var(--fg-primary); margin:0; }
.note p + p { margin-top:8px; }

.glance {
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--border-secondary); border-radius:var(--radius-card);
  background:var(--bg-surface-primary); overflow:hidden; margin-bottom:20px;
}
.glance li { padding:24px 16px; text-align:center; }
.glance li + li { border-left:1px solid var(--border-secondary); }
.glance .big {
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem, 8vw, 2.75rem); line-height:1.1; color:var(--fg-brand);
}
.glance .label { display:block; font-size:.85rem; font-weight:500; color:var(--fg-primary); margin-top:4px; }
@media (max-width:420px) {
  .glance { grid-template-columns:1fr; }
  .glance li { display:flex; align-items:baseline; gap:12px; text-align:left; padding:16px 20px; }
  .glance li + li { border-left:0; border-top:1px solid var(--border-secondary); }
  .glance .label { margin-top:0; }
}

/* ---- document pages (privacy, terms, support, delete) ---- */
.prose h1 {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem, 7vw, 2.75rem); line-height:1.1; letter-spacing:-.02em; margin-bottom:12px;
}
.meta { font-family:var(--font-mono); color:var(--fg-secondary); font-size:.8rem; margin-bottom:24px; }
.prose h2 {
  font-family:var(--font-display); font-weight:700; font-size:1.4rem; line-height:1.3;
  margin:40px 0 12px; scroll-margin-top:24px;
}
.prose h3 { font-weight:600; font-size:1.05rem; line-height:1.4; margin:28px 0 8px; scroll-margin-top:24px; }
.prose p, .prose li { max-width:68ch; }
.prose p { margin-bottom:14px; }
.prose ul, .prose ol { padding-left:1.4em; margin-bottom:14px; }
.prose li { margin-bottom:8px; }
.prose li::marker { color:var(--fg-brand); font-weight:700; }
.prose a {
  color:inherit; text-decoration:underline; text-decoration-color:var(--fg-brand);
  text-decoration-thickness:1.5px; text-underline-offset:3px;
}
.prose a:hover { text-decoration-thickness:2px; background:var(--bg-brand-subtle); }
.ui { font-weight:600; }

.summary { background:var(--bg-surface-secondary); border-radius:var(--radius-card); padding:24px; margin-bottom:8px; }
.summary + .summary { margin-top:12px; }
.summary h2 { margin-top:0; font-size:1.1rem; }
.summary ul { margin-bottom:0; }
.summary li:last-child, .summary p:last-child { margin-bottom:0; }

.toc { margin:24px 0 8px; }
.toc ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; }
.toc li { margin:0; }
.toc a {
  display:inline-block; padding:6px 12px; border-radius:var(--radius-pill);
  border:1px solid var(--border-secondary); background:var(--bg-surface-primary);
  color:var(--fg-secondary); font-family:var(--font-mono); font-size:.8rem; font-weight:500; text-decoration:none;
}
.toc a:hover { border-color:var(--fg-brand); color:var(--fg-brand); background:var(--bg-surface-primary); }

.prose .steps { padding-left:0; margin:20px 0 24px; }
.prose .steps li { margin-bottom:0; max-width:none; }
.prose .steps p { margin-bottom:0; }

.contact-card { border:1px solid var(--border-secondary); border-radius:var(--radius-card); padding:24px; margin-top:24px; }
.contact-card p:last-child { margin-bottom:0; }
.contact-card .mail { font-family:var(--font-mono); font-weight:600; font-size:1.05rem; word-break:break-all; color:var(--fg-brand); }

/* ---- footer ---- */
.site-footer {
  margin-top:64px; padding-top:24px; border-top:1px solid var(--border-secondary);
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center;
  font-size:.85rem; color:var(--fg-secondary);
}
.site-footer ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; }
.site-footer a { color:var(--fg-primary); text-decoration:underline; text-decoration-color:var(--border-primary); text-underline-offset:3px; }
.site-footer a:hover, .site-footer a[aria-current="page"] { text-decoration-color:var(--fg-brand); }
.site-footer a[aria-current="page"] { font-weight:600; }

@media print {
  #theme-toggle, #lang-toggle, .skip-link, .toc { display:none; }
  body { background:#fff; color:#000; }
}

/* Language visibility rules */
html[lang="en"] .lang-vi { display: none !important; }
html[lang="vi"] .lang-en { display: none !important; }

.action-btn, #lang-toggle, #theme-toggle {
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  color: var(--fg-secondary);
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}
.action-btn:hover, #lang-toggle:hover, #theme-toggle:hover {
  border-color: var(--fg-brand);
  color: var(--fg-brand);
  background: var(--bg-surface-primary);
}