/*
 * The docs site stylesheet. Hand written, no Tailwind, no build step: this file is copied
 * into dist/assets/ with a content hash by scripts/build.mjs.
 *
 * The token values below are copied from platform/packages/design/src/tokens.css (light
 * theme only: the console runs light, and so does this site). When the design package
 * changes its palette, copy the values again; the source of truth stays in tokens.css.
 */

:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #0164FF;
  --primary-foreground: #ffffff;
  --secondary: #f6f5f4;
  --muted-foreground: #615d59;
  --accent: #EBF2FF;
  --accent-foreground: #0052D6;
  --destructive: #c4260f;
  --border: rgba(0, 0, 0, 0.1);
  --ring: #0164FF;
  --sidebar: #f6f5f4;

  --sa-brand: #0164FF;
  --sa-success: #12722a;
  --sa-success-soft: #d0f4d8;
  --sa-warning: #8a5a00;
  --sa-warning-soft: #fff4db;
  --sa-danger: #c4260f;
  --sa-danger-soft: #feedea;
  --sa-primary-soft: #D6E4FF;
  --sa-selected: #EBF2FF;
  --sa-panel-secondary: #f6f5f4;
  --sa-border-strong: rgba(0, 0, 0, 0.2);

  --sa-radius-control: 8px;
  --sa-radius-container: 12px;
  --sa-radius-media: 12px;

  --sa-shadow-rest: rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px;
  --sa-shadow-raised: rgba(0, 0, 0, 0.008) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px;

  --sa-font-sans: "Inter", system-ui, sans-serif;
  --sa-font-mono: ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

html {
  font-family: var(--sa-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-size: 15px;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  letter-spacing: -0.012em;
  line-height: 1.3;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

code {
  font-family: var(--sa-font-mono);
  font-size: 13px;
  background: var(--secondary);
  border-radius: 5px;
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--foreground);
  white-space: nowrap;
}

.brand:hover { text-decoration: none; }

.brand .brand-sub {
  color: var(--muted-foreground);
  font-weight: 400;
  font-size: 12.5px;
}

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-control);
  cursor: pointer;
}

.search {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 520px;
  margin-left: auto;
}

.search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  font: inherit;
  font-size: 13.5px;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-control);
}

.search input::placeholder { color: var(--muted-foreground); opacity: 0.7; }

.search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
  font-size: 13px;
}

.search-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-container);
  box-shadow: var(--sa-shadow-raised);
}

.search-pop .result {
  display: block;
  padding: 8px 12px;
  color: var(--foreground);
}

.search-pop .result:hover,
.search-pop .result[aria-selected="true"] {
  background: var(--sa-selected);
  text-decoration: none;
}

.search-pop .result .r-page {
  display: block;
  font-size: 11.5px;
  color: var(--muted-foreground);
}

.search-pop .result .r-section {
  display: block;
  font-weight: 600;
  font-size: 13px;
}

.search-pop .result .r-snippet {
  display: block;
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.search-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.top-actions {
  display: flex;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-control);
  cursor: pointer;
}

.btn:hover { background: var(--secondary); }

/* ---------- shell ---------- */

.shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  max-width: 1280px;
  margin: 0 auto;
}

.sidebar {
  border-right: 1px solid var(--border);
  background: var(--sidebar);
  padding: 20px 12px 48px;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
}

.nav-group-title {
  margin: 18px 12px 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}

.nav-group-title:first-child { margin-top: 0; }

.nav-link {
  display: block;
  padding: 6px 12px;
  border-radius: var(--sa-radius-control);
  font-size: 13.5px;
  color: var(--muted-foreground);
}

.nav-link:hover {
  background: var(--background);
  color: var(--foreground);
  text-decoration: none;
}

.nav-link.active {
  background: var(--sa-selected);
  color: var(--primary);
  font-weight: 600;
}

.main {
  min-width: 0;
  padding: 28px 32px 96px;
}

/* ---------- document ---------- */

.doc { max-width: 860px; }

.breadcrumb {
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin-bottom: 6px;
}

.doc h1 {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 600;
}
.doc figure.diagram {
  margin: 22px 0;
  padding: 14px 10px 10px;
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-container);
  background: var(--background);
  overflow-x: auto;
}
.doc figure.diagram svg {
  margin: 0 auto;
}

.doc figure.diagram figcaption {
  margin-top: 8px;
  padding: 0 6px;
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.doc figure.diagram .diagram-title {
  font-weight: 600;
  color: var(--foreground);
}

.doc h2 {
  margin: 44px 0 10px;
  font-size: 21px;
  font-weight: 600;
  scroll-margin-top: 72px;
}

.doc h3 {
  margin: 28px 0 8px;
  font-size: 16.5px;
  font-weight: 600;
  scroll-margin-top: 72px;
}

.doc h4 {
  margin: 22px 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.doc p {
  margin: 10px 0;
  max-width: 92ch;
}

.doc ul, .doc ol {
  margin: 12px 0;
  padding-left: 26px;
}

.doc li { margin: 5px 0; }

.doc hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 36px 0;
}

.tablewrap {
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-container);
  overflow-x: auto;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}

.doc th {
  text-align: left;
  font-weight: 600;
  background: rgba(241, 245, 249, 0.6);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
}

.doc td {
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  vertical-align: top;
}

.doc tr:last-child td { border-bottom: 0; }

.doc figure {
  margin: 20px 0;
}

.doc figure img {
  display: block;
  /* Screenshots are taken at 2x and eat the whole reading column at full width; capped
   * and centred they read like the console's own manual page. A phone keeps full width. */
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-media);
  box-shadow: var(--sa-shadow-rest);
}

.doc figcaption {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.doc img.inline {
  border-radius: var(--sa-radius-control);
}

/* callouts, rendered from blockquotes: `> **Lưu ý:** ...` */

.callout {
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--sa-primary-soft);
  border: 1px solid var(--sa-brand);
  border-left-width: 4px;
  border-radius: var(--sa-radius-control);
}

.callout p { margin: 4px 0; }

.callout .callout-title {
  margin: 0 0 2px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent-foreground);
}

.callout.warn {
  background: var(--sa-warning-soft);
  border-color: var(--sa-warning);
}

.callout.warn .callout-title { color: var(--sa-warning); }

/* page toc, pager */

.page-toc {
  margin: 0 0 24px;
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-container);
  background: var(--sa-panel-secondary);
  font-size: 13.5px;
}

.page-toc summary {
  cursor: pointer;
  padding: 9px 14px;
  font-weight: 600;
  color: var(--muted-foreground);
}

.page-toc ol {
  margin: 0;
  padding: 0 14px 12px 34px;
}

.page-toc a { color: var(--foreground); }

.pager {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.pager a {
  max-width: 48%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-container);
}

.pager a:hover {
  background: var(--sa-selected);
  text-decoration: none;
}

.pager .pager-dir {
  display: block;
  font-size: 11.5px;
  color: var(--muted-foreground);
}

.pager .pager-title {
  font-weight: 600;
  font-size: 13.5px;
}

.pager .spacer { flex: 1; }

/* ---------- login ---------- */

.login-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--sa-panel-secondary);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--sa-shadow-raised);
  padding: 28px;
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 20px;
}

.login-card .login-sub {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.login-card label {
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.login-card input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-control);
}

.login-card .btn-primary {
  width: 100%;
  margin-top: 20px;
  min-height: 44px;
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}

.login-card .btn-primary:hover { background: var(--accent-foreground); }

.login-error {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--sa-radius-control);
  background: var(--sa-danger-soft);
  border: 1px solid var(--sa-danger);
  color: var(--sa-danger);
  font-size: 13.5px;
}

.login-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.center-note {
  max-width: 560px;
  margin: 80px auto;
  padding: 32px;
  text-align: center;
}

/* ---------- phone ---------- */

.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .burger { display: inline-flex; }

  .shell { display: block; }

  .sidebar {
    position: fixed;
    z-index: 45;
    /* Below the top bar, so the burger stays reachable and the menu always has a way out. */
    top: 56px;
    left: 0;
    bottom: 0;
    width: min(84vw, 320px);
    height: calc(100dvh - 56px);
    padding-top: 20px;
    transform: translateX(-102%);
    transition: transform 0.2s ease;
    box-shadow: var(--sa-shadow-raised);
  }

  .nav-toggle:checked ~ .shell .sidebar {
    transform: none;
  }

  /* The shade behind an open menu: tapping anywhere outside closes it. */
  .nav-backdrop {
    display: none;
  }

  .nav-toggle:checked ~ .nav-backdrop {
    display: block;
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 44;
    background: rgba(0, 0, 0, 0.32);
    }

  .main { padding: 20px 16px 80px; }

  .brand .brand-sub { display: none; }

  .top-actions .btn-label { display: none; }

  .btn { padding: 0 10px; }

  /* Fields a thumb hits are 44px tall with 16px text below md, so iOS does not zoom. */
  .search input { height: 44px; font-size: 16px; }

  .top-actions .btn { min-height: 44px; min-width: 44px; }

  .doc h1 { font-size: 22px; }
}

/* ---------- print ---------- */

@media print {
  .topbar, .sidebar, .pager, .page-toc, .callout, .login-wrap { break-inside: avoid; }

  .topbar, .sidebar, .pager, .search, .top-actions, .burger, .page-toc { display: none !important; }

  .shell { display: block; max-width: none; }

  .main { padding: 0; }

  .doc { max-width: none; }

  .doc figure img { box-shadow: none; }
}

/* The "connect the assistant" card at the top of the home page. Buttons are thumb sized
 * (44px, the point of the card), the address row is the copy target, monospaced so the
 * URL reads as data rather than prose. */
.connect {
  border: 1px solid var(--border);
  border-radius: var(--sa-radius-container);
  background: var(--accent);
  padding: 20px;
  margin: 0 0 28px;
  box-shadow: var(--sa-shadow-rest);
}

.connect h2 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--accent-foreground);
}

.connect > p {
  margin: 0 0 16px;
  color: var(--muted-foreground);
  font-size: 14px;
}

.connect-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--sa-border-strong);
  border-radius: var(--sa-radius-control);
  background: var(--background);
  color: var(--foreground);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--sa-shadow-rest);
}

.connect-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: none;
}

.connect-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.connect-url {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--sa-radius-control);
  background: var(--secondary);
  color: var(--muted-foreground);
  font: 13px/1.4 var(--sa-font-mono);
  word-break: break-all;
  cursor: copy;
  width: 100%;
  text-align: left;
}

.connect-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sa-success);
}