/* Components. Class names are plain and descriptive; no utility framework. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--primary-soft); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: var(--primary-soft); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Public header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  min-height: 64px;
  padding-block: var(--space-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text);
  text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand__mark {
  width: 32px; height: 32px;
  flex: none;
}
/* "หน้าแรก": always visible, outside the collapsible menu (desktop and mobile). */
.home-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.home-link:hover { background: var(--primary-soft); color: var(--text); }
.home-link[aria-current="page"] {
  color: var(--primary);
  box-shadow: inset 0 -3px 0 var(--accent);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.nav-toggle { white-space: nowrap; }
/* Account link (เข้าสู่ระบบ / Workspace): outlined so it reads as the way into the back office. */
.site-nav a.nav-account {
  border: 1px solid var(--border-strong);
  color: var(--primary);
  font-weight: 600;
}
.site-nav a.nav-account:hover { background: var(--primary-soft); color: var(--primary); }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}
.site-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.site-nav a:hover { background: var(--primary-soft); color: var(--text); }
.site-nav a[aria-current="page"] {
  color: var(--primary);
  box-shadow: inset 0 -3px 0 var(--accent);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
@media (min-width: 48rem) {
  .nav-toggle { display: none; }
}
@media (max-width: 47.99rem) {
  /* brand + หน้าแรก + เมนู must fit on one line at 360px */
  .site-header__inner { column-gap: var(--space-1); }
  .home-link, .nav-toggle { padding-inline: var(--space-2); }
  .site-nav { flex-basis: 100%; }
  .site-nav a.nav-account { text-align: center; margin-top: var(--space-2); }
  .js .site-nav:not(.is-open) { display: none; }
  .site-nav ul { flex-direction: column; padding-bottom: var(--space-2); }
}

/* ---------- Main / footer ---------- */
.site-body { display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; padding-block: var(--space-6) var(--space-8); }
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: var(--space-5);
  font-size: var(--text-sm);
  color: var(--muted);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
}
.site-footer a { color: var(--muted); }
.site-footer__copy { margin: 0; }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-6) var(--space-7); }
.hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--accent-strong);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.hero h1 { max-width: 22ch; }
.hero__lead {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: var(--space-5);
}
.hero__accent {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  margin-bottom: var(--space-5);
}

/* ---------- Sections ---------- */
.section { margin-top: var(--space-7); }
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.section__head h2 { margin: 0; }
.page-head { margin-bottom: var(--space-6); }
.page-head p { color: var(--muted); max-width: 60ch; }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card h3 { margin: 0; font-size: var(--text-lg); }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.card h3 a:focus-visible { box-shadow: none; }
.card h3 a:focus-visible::after { box-shadow: var(--focus-ring); }
.card:hover { border-color: var(--border-strong); }
.card p { margin: 0; color: var(--muted); }
.card__meta { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-sm); color: var(--muted); }

/* ---------- List rows (articles) ---------- */
.row-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.row-list > li { border-bottom: 1px solid var(--border); padding-block: var(--space-4); }
.row-list h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.row-list h3 a { color: var(--text); text-decoration: none; }
.row-list h3 a:hover { color: var(--primary); text-decoration: underline; }
.row-list p { margin: 0; color: var(--muted); }
.row-list time { font-size: var(--text-sm); color: var(--muted); }

/* ---------- Badges (always text + symbol, never colour alone) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.65em;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  width: fit-content;
  background: var(--primary-soft);
  color: var(--primary);
}
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger); }
.badge--neutral { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* ---------- Empty state ---------- */
.empty-state {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  color: var(--muted);
}
.empty-state__title { color: var(--text); font-weight: 600; margin-bottom: var(--space-2); }
.empty-state p:last-child { margin-bottom: 0; }

/* ---------- Messages ---------- */
.messages { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); }
.message {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  border-left: 4px solid currentColor;
  background: var(--info-soft);
  color: var(--info);
}
.message span { color: var(--text); }
.message--success { background: var(--success-soft); color: var(--success); }
.message--warning { background: var(--warning-soft); color: var(--warning); }
.message--error   { background: var(--danger-soft);  color: var(--danger); }

/* ---------- Forms ---------- */
.form-card {
  max-width: 26rem;
  margin: var(--space-5) auto;
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.form-card h1 { font-size: var(--text-xl); }
.field { margin-bottom: var(--space-4); }
.field label { display: block; margin-bottom: var(--space-1); font-weight: 600; }
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="search"],
.field textarea,
.field select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  border-color: var(--primary);
}
.field .help { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-1); }
.field-error, .form-error {
  display: flex;
  gap: var(--space-2);
  color: var(--danger);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}
.form-error {
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  background: var(--danger-soft);
  border-radius: var(--radius-control);
  border-left: 4px solid var(--danger);
}
.field input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---------- Detail pages ---------- */
.detail-head { margin-bottom: var(--space-5); }
.detail-head .btn-row { margin-bottom: var(--space-3); }
.breadcrumb { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--muted); }
.notice {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* ---------- Owner preview banner ---------- */
.preview-banner {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-left-width: 6px;
  border-radius: var(--radius-control);
}
.preview-banner p { margin: 0 0 var(--space-2); }
.preview-banner p:last-child { margin-bottom: 0; }
.preview-banner__title { font-weight: 700; color: var(--warning); }

/* ---------- Rendered Markdown (article body, project sections) ---------- */
.detail-section { margin-top: var(--space-6); }
.detail-section > h2 { font-size: var(--text-xl); }
.article-body { margin-top: var(--space-5); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--space-6); scroll-margin-top: var(--space-5); }
.prose h2 { font-size: var(--text-xl); }
.prose h3 { font-size: var(--text-lg); }
.prose h4, .prose h5, .prose h6 { font-size: var(--text-body); }
.detail-section h3:first-of-type, .article-body > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.5em; margin: 0 0 var(--space-4); }
.prose li + li { margin-top: var(--space-1); }
.prose blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-left: 4px solid var(--accent);
  background: var(--surface);
  color: var(--muted);
}
.prose blockquote > :last-child { margin-bottom: 0; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--primary-soft);
  border-radius: 4px;
}
.prose pre {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  overflow-x: auto;
  background: var(--text);
  color: var(--bg); /* 12.3:1 */
  border-radius: var(--radius-control);
  line-height: 1.55;
  font-size: var(--text-sm);
}
.prose pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}
.prose th, .prose td { border: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; }
.prose th { background: var(--primary-soft); }
.md-image-placeholder {
  display: inline-block;
  padding: 0 var(--space-2);
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* ---------- Images (cover, Markdown figures, cards) ---------- */
.cover, .md-figure { margin: var(--space-5) 0; }
.cover img, .md-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
}
.cover { max-width: 60rem; }
.cover figcaption, .md-figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}
.prose img { max-width: 100%; height: auto; }
.md-image-warning {
  display: block;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--warning-soft);
  color: var(--warning);
  border-radius: 4px;
  font-weight: 600;
}
.md-image-warning::before { content: "⚠ "; }
.card--with-image { padding-top: 0; overflow: hidden; }
.card__image {
  display: block;
  width: calc(100% + 2 * var(--space-5));
  max-width: none;
  margin: 0 calc(-1 * var(--space-5)) var(--space-2);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--primary-soft);
}

/* ---------- 2FA / security ---------- */
.form-card--wide { max-width: 34rem; }
.form-foot { margin-top: var(--space-3); }
.choice-group { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.choice-group legend { font-weight: 600; margin-bottom: var(--space-1); padding: 0; }
.choice { display: flex; gap: var(--space-2); align-items: center; min-height: 44px; }
.choice input { width: 20px; height: 20px; accent-color: var(--primary); }
.steps { padding-left: 1.25em; }
.steps li + li { margin-top: var(--space-3); }
.qr {
  display: block;
  margin: var(--space-3) 0;
  padding: var(--space-2);
  background: #fff; /* QR codes need a white quiet zone */
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}
.secret {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--primary-soft);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}
.codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-2);
  padding-left: 1.5em;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
}
.codes-panel { border: 2px solid var(--warning); background: var(--warning-soft); }
.status-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.status-list li + li { margin-top: var(--space-1); }

/* ---------- Table of contents ---------- */
.toc {
  max-width: var(--measure);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.toc__title { font-weight: 700; margin-bottom: var(--space-2); }
.toc ol { margin: 0; padding-left: 1.25em; }
.toc li + li { margin-top: var(--space-1); }
/* Sub-headings are indented and must not consume a number of the main list. */
.toc__item--3, .toc__item--4 {
  margin-left: var(--space-4);
  list-style: none;
  counter-increment: list-item 0;
}
.toc__item--3::before, .toc__item--4::before { content: "– "; color: var(--muted); }

/* ---------- Contact ---------- */
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-width: 32rem; }
.link-list a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-decoration: none;
  font-weight: 600;
}
.link-list a:hover { border-color: var(--border-strong); }

/* ---------- Error pages ---------- */
.error-page { max-width: 36rem; padding-block: var(--space-7); }
.error-page__code { color: var(--accent-strong); font-weight: 700; font-size: var(--text-sm); }

/* ---------- Workspace shell ---------- */
.ws-body { background: var(--bg); }
.ws-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}
.ws-topbar .home-link { margin-left: auto; padding-inline: var(--space-2); }
.ws-topbar [data-nav-toggle] { padding-inline: var(--space-3); white-space: nowrap; }
.ws-layout { display: block; }
.ws-sidebar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4);
}
.ws-sidebar .brand { margin-bottom: var(--space-4); }
.ws-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.ws-nav a, .ws-nav button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ws-nav a:hover, .ws-nav button:hover { background: var(--primary-soft); }
.ws-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.ws-nav__group { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.ws-nav__label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); padding: 0 var(--space-3) var(--space-1); }
.ws-main { padding: var(--space-5) var(--space-4) var(--space-8); min-width: 0; }

@media (max-width: 63.99rem) {
  .js .ws-sidebar:not(.is-open) { display: none; }
  .ws-sidebar .brand { display: none; }
}
@media (min-width: 64rem) {
  .ws-topbar { display: none; }
  .ws-layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
  .ws-sidebar {
    border-bottom: 0;
    border-right: 1px solid var(--border);
    padding: 0;
  }
  .ws-sidebar__inner {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--space-4);
  }
  .ws-main { padding: var(--space-6) var(--space-6) var(--space-8); }
}

.ws-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.ws-page-head h1 { margin: 0; font-size: var(--text-2xl); }
.panel-grid { display: grid; gap: var(--space-4); }
@media (min-width: 64rem) { .panel-grid--2 { grid-template-columns: 1fr 1fr; } }
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.panel h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.panel .row-list > li { padding-block: var(--space-3); }
.panel .row-list h3 { font-size: var(--text-base); }
.item-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--muted); }