/* AQUA Change app styles, built on lab-design-system tokens
   (static/vendor/lab-design-system/colors_and_type.css). The design system
   has no app patterns yet; these extend it in the same spirit: monochrome,
   one aqua accent, pills, hairlines, generous whitespace. */

/* The UI is Vietnamese, but the design system's Japanese stack (Noto Sans JP,
   Hiragino Sans, Yu Gothic) and AQUARING Sans misplace or lack Vietnamese
   diacritics. Every role uses self-hosted Mulish (the design system's Latin
   face) instead; Noto Sans JP stays as a per-glyph fallback for Japanese. */
@font-face {
  font-family: "AQUA Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/static/vendor/mulish/mulish-vietnamese-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "AQUA Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/static/vendor/mulish/mulish-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "AQUA Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/static/vendor/mulish/mulish-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-vi: "AQUA Mulish", system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  --font-jp: var(--font-vi);
  --font-heading-jp: var(--font-vi);
  --font-latin: var(--font-vi);
  --font-display: var(--font-vi);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; }
a { color: inherit; }

/* ---------- Header: logo left, floating glass nav pill right ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-7) 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  text-decoration: none;
}
.brand img { display: block; height: 16px; width: auto; }
.brand__product {
  font-family: var(--font-latin);
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  background: rgba(245, 245, 245, 0.7);
  backdrop-filter: var(--blur-heavy);
  -webkit-backdrop-filter: var(--blur-heavy);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
}
.nav-pill form { margin: 0; }
.nav-pill__item {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-default);
  color: var(--fg);
  text-decoration: none;
  transition: background-color 200ms ease-out;
}
.nav-pill__item:hover { background: var(--ink-05); }
.nav-pill__user { color: var(--fg-muted); }
.nav-pill__button { border: 0; background: transparent; cursor: pointer; }

/* ---------- Page ---------- */
.page {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5) var(--s-11);
}
.page-title { margin: var(--s-2) 0 var(--s-4); }
.page > .aq-body-sm { margin: 0 0 var(--s-7); }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  margin-bottom: var(--s-5);
}
.card--narrow { max-width: 520px; margin: var(--s-9) auto 0; }
.card > p:first-of-type { margin-top: 0; }

/* H2 with the signature 8px aqua dot to the left */
.dot-heading {
  position: relative;
  margin: 0 0 var(--s-3);
  padding-left: var(--s-5);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.dot-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--r-circle);
  background: var(--accent);
}

/* ---------- Forms ---------- */
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label { font-size: var(--fs-14); color: var(--fg-muted); }
.field__input {
  height: 56px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-md);
  background: var(--ink-03);
  font: inherit;
  letter-spacing: var(--tracking-default);
  color: var(--fg);
  transition: background-color 200ms ease-out;
}
.field__input::placeholder { color: var(--fg-subtle); }
.field__input:focus { outline: 2px solid var(--focus-ring); background: var(--bg-surface); }
.field__input[aria-invalid="true"] { outline: 1px solid var(--red-500); }

.saved {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin: var(--s-5) 0;
  padding: var(--s-4) 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}
.saved dt { font-size: var(--fs-14); color: var(--fg-muted); }
.saved dd { margin: 0; }
.saved code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-14); }
.saved__none { color: var(--fg-subtle); }

/* ---------- Source tabs (Tạo Project): two pill tabs on one board ---------- */
.source-tabs {
  display: inline-flex;
  gap: var(--s-1);
  margin-bottom: var(--s-6);
  padding: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--ink-03);
}
.source-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.source-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-14);
  color: var(--fg-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.source-tabs__tab:hover { color: var(--fg); }
.source-tabs__icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.source-tabs__radio:checked + .source-tabs__tab {
  background: var(--bg-surface);
  box-shadow: var(--shadow-soft);
  color: var(--fg);
  font-weight: 700;
}
.source-tabs__radio:checked + .source-tabs__tab .source-tabs__icon { stroke: var(--accent-ink); }
.source-tabs__radio:focus-visible + .source-tabs__tab { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.source-panel > .aq-body-sm:first-child { margin-top: 0; }
.source-board:has(#source-tab-github:checked) .source-panel--starter,
.source-board:has(#source-tab-starter:checked) .source-panel--github { display: none; }
@media (max-width: 480px) {
  .source-board { padding: var(--s-5); }
  .source-tabs { display: flex; }
  .source-tabs__tab { flex: 1; justify-content: center; padding: 0 var(--s-3); }
  .source-tabs__icon { display: none; }
}

/* ---------- Buttons: pills ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-default);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn--primary { background: var(--bg-surface); box-shadow: var(--shadow-soft); border-color: var(--border-hair); }
.btn--primary:hover { background: var(--accent); }
.btn--ghost { background: transparent; border-color: var(--border); }
.btn--ghost:hover { border-color: var(--accent); }

/* ---------- Status messages ---------- */
.status { margin: 0; font-size: var(--fs-14); }
.status--ok { color: var(--fg); }
.status--ok::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--s-2);
  border-radius: var(--r-circle);
  background: var(--accent);
  vertical-align: middle;
}
.status--error { color: var(--red-600); }
.status-slot.htmx-request { opacity: 0.5; }
.status-slot.htmx-request::after { content: "Đang kiểm tra..."; font-size: var(--fs-14); color: var(--fg-muted); }

.notice { border-color: var(--accent); }
.check { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-14); cursor: pointer; }
.check input { margin-top: 3px; }

/* ---------- Lists, rules, tables ---------- */
.list { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.list__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px dashed var(--border);
}
.list__item:first-child { border-top: 1px dashed var(--border); }
.list__title { font-weight: 700; }
.plain { list-style: none; margin: 0; padding: 0; }
.rules {
  display: grid;
  grid-template-columns: minmax(160px, max-content) 1fr;
  gap: var(--s-3) var(--s-5);
  margin: 0 0 var(--s-5);
}
.rules dt { font-size: var(--fs-14); color: var(--fg-muted); }
.rules dd { margin: 0; }
.rules code, .pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-14); }
.pre { margin: 0; white-space: pre-wrap; }
.field__textarea { height: auto; padding: var(--s-4) var(--s-5); resize: vertical; }
.grid-table { width: 100%; border-collapse: separate; border-spacing: var(--s-2); margin: 0 calc(-1 * var(--s-2)); }
.grid-table th { font-size: var(--fs-14); font-weight: 400; color: var(--fg-muted); text-align: left; }
.grid-table .field__input { width: 100%; height: 48px; padding: 0 var(--s-4); }
.table-scroll { overflow-x: auto; }
fieldset.field { border: 0; margin: 0; padding: 0; }

/* ---------- Job: Figma thumbnails ---------- */
.previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-5); }
.preview { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.preview__image { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; background: var(--ink-03); border-radius: var(--r-md); }

@media (max-width: 767px) {
  .site-header { flex-direction: column; align-items: flex-start; padding: var(--s-5) var(--s-4) 0; }
  .nav-pill { max-width: 100%; gap: 0; padding: var(--s-1); }
  .nav-pill__item { padding: 0 var(--s-3); }
  .nav-pill__user { display: none; }
  .page { padding: var(--s-7) var(--s-4) var(--s-9); }
  .card { padding: var(--s-5); }
  h1.page-title { font-size: var(--fs-32); }
  .rules { grid-template-columns: 1fr; gap: var(--s-1); }
  .rules dd { margin-bottom: var(--s-3); }
}

/* ---------- Run Review: build / Figma / heatmap side by side ---------- */
.review__heading { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-16); font-weight: 700; }
.review__image { display: block; width: 100%; height: auto; background: var(--ink-03); border-radius: var(--r-md); }
#share-link:not(:empty) { margin-top: var(--s-4); }
.review__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .review__grid { grid-template-columns: 1fr; } }