/*
 * Quality gate v17
 * Final, Vietnamese-first readability and layout locks loaded after every
 * legacy stylesheet. Keep fixes here explicit so older theme layers cannot
 * silently reintroduce low contrast, tiny type or overlapping cards.
 */

@font-face {
  font-family: "Be Vietnam Pro Local";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/bevietnam-400-vi.woff2") format("woff2");
  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: "Be Vietnam Pro Local";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/bevietnam-400-latin.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Be Vietnam Pro Local";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/bevietnam-500-vi.woff2") format("woff2");
  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: "Be Vietnam Pro Local";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/bevietnam-500-latin.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Be Vietnam Pro Local";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/bevietnam-600-vi.woff2") format("woff2");
  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: "Be Vietnam Pro Local";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/bevietnam-600-latin.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Be Vietnam Pro Local";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/bevietnam-700-vi.woff2") format("woff2");
  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: "Be Vietnam Pro Local";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/bevietnam-700-latin.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Be Vietnam Pro Local";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/bevietnam-800-vi.woff2") format("woff2");
  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: "Be Vietnam Pro Local";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/bevietnam-800-latin.woff2") format("woff2");
  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 {
  --q-paper: #f4f7f5;
  --q-card: #ffffff;
  --q-ink: #17211f;
  --q-muted: #46534f;
  --q-brand: #0b6658;
  --q-brand-dark: #092f29;
  --q-on-dark: #ffffff;
  --q-on-dark-muted: #d7e6e1;
  --q-accent: #d9ff68;
  --q-line: #d3ded9;
  --q-focus: #ffd166;
  color-scheme: light;
}

html {
  background: var(--q-paper);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

html body,
html body :where(h1, h2, h3, h4, h5, h6, p, li, a, button, input, select, textarea, label, span, small, b, strong, em, dt, dd, summary, figcaption, blockquote) {
  font-family: "Be Vietnam Pro Local", "Be Vietnam Pro", "Segoe UI", Arial, sans-serif !important;
}

body {
  background: var(--q-paper);
  color: var(--q-ink);
  font-size: 16px !important;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--q-ink);
  font-weight: 700 !important;
  letter-spacing: -0.035em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

p,
li,
dd {
  line-height: 1.68;
}

small {
  font-size: 12px !important;
  line-height: 1.5;
}

button,
input,
select,
textarea,
label {
  font-size: max(12px, 0.75rem) !important;
}

kbd {
  border-color: #aab7b2 !important;
  background: #ffffff !important;
  color: #34423e !important;
  font-family: "Be Vietnam Pro Local", "Be Vietnam Pro", "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.topline,
.announce {
  color: var(--q-on-dark) !important;
  font-size: 12px !important;
}

:where(.topline, .announce) :where(span, b, strong) {
  color: var(--q-on-dark-muted) !important;
  font-size: inherit !important;
}

.site-header :where(.menu, .outline) {
  font-size: 12px !important;
}

:where(.identity, .brand) small {
  color: var(--q-muted) !important;
}

input,
select,
textarea {
  color: var(--q-ink);
}

img,
picture,
video,
svg,
canvas {
  max-width: 100%;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--q-focus) !important;
  outline-offset: 3px !important;
}

/* Homepage problem finder: this was missing display:grid and collapsed inline. */
.problem-links {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow: visible !important;
}

.problem-links > a {
  width: auto !important;
  min-width: 0 !important;
  min-height: 104px !important;
  margin: 0 !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid var(--q-line) !important;
  border-radius: 16px !important;
  color: var(--q-ink) !important;
  white-space: normal !important;
  overflow: hidden !important;
}

.problem-links > a b,
.problem-links > a span {
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  color: inherit !important;
  white-space: normal !important;
}

.problem-links > a b {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.problem-links > a span {
  color: var(--q-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Support OS: lock surface and copy colors together, never independently. */
.support-source-policy {
  padding: clamp(28px, 4vw, 44px) !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 94% 0, rgba(217, 255, 104, 0.13), transparent 34%),
    var(--q-brand-dark) !important;
  color: var(--q-on-dark) !important;
  box-shadow: none !important;
}

.support-source-policy h2 {
  color: var(--q-on-dark) !important;
  font-size: clamp(26px, 2.5vw, 35px) !important;
  line-height: 1.22 !important;
}

.support-source-policy p {
  color: var(--q-on-dark-muted) !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

.support-source-policy span {
  color: var(--q-accent) !important;
  font-size: 12px !important;
}

.support-source-policy a {
  min-height: 46px !important;
  padding: 11px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  border-radius: 10px !important;
  color: var(--q-on-dark) !important;
  font-size: 12px !important;
  white-space: normal !important;
}

.support-wizard-band {
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 0 0, rgba(217, 255, 104, 0.13), transparent 34%),
    var(--q-brand-dark) !important;
  color: var(--q-on-dark) !important;
  box-shadow: none !important;
}

.support-wizard-band h2,
.support-wizard-band > div > span {
  color: var(--q-on-dark) !important;
}

.support-wizard-band > div > span {
  color: var(--q-accent) !important;
  font-size: 12px !important;
}

.support-wizard-band > div > p {
  color: var(--q-on-dark-muted) !important;
  font-size: 16px !important;
}

.support-wizard-band > div > a {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--q-on-dark) !important;
  font-size: 12px !important;
}

.support-wizard-band ol {
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--q-card) !important;
  color: var(--q-ink) !important;
  overflow: hidden !important;
}

.support-wizard-band li {
  border-color: var(--q-line) !important;
}

.support-wizard-band li b {
  color: var(--q-brand) !important;
  font-size: 13px !important;
}

.support-wizard-band li span {
  color: var(--q-muted) !important;
  font-size: 13px !important;
}

/* Explicit light surfaces stop pale legacy text from leaking into cards. */
:where(.knowledge-card, .review-card, .catalog-card, .gravastar-card, .arzopa-model-card, .support-model-card, .support-connect-grid article, .support-issue-rail article, .related-reading-track article, .gravastar-product-articles article, .article-product, .take-box, .author-card, .article-toc, .support-faq, .support-manual, .support-commerce) {
  color: var(--q-ink);
}

:where(.knowledge-card, .review-card, .catalog-card, .gravastar-card, .arzopa-model-card, .support-model-card, .support-connect-grid article, .support-issue-rail article, .related-reading-track article, .gravastar-product-articles article) :where(p, li, dd, small) {
  color: var(--q-muted) !important;
}

:where(.knowledge-card, .review-card, .catalog-card, .gravastar-card, .arzopa-model-card, .support-model-card, .support-connect-grid article, .support-issue-rail article, .related-reading-track article, .gravastar-product-articles article) :where(h2, h3, h4, b, strong) {
  color: var(--q-ink) !important;
}

.support-connect-grid article p,
.support-issue-rail article p,
.support-faq p,
.support-manual p,
.support-commerce p {
  color: var(--q-muted) !important;
  font-size: 15px !important;
}

.support-model-media small {
  border-radius: 6px !important;
  background: var(--q-brand-dark) !important;
  color: var(--q-on-dark) !important;
  font-size: 12px !important;
}

.journal-meta span {
  color: var(--q-on-dark-muted) !important;
  font-size: 12px !important;
}

/* ARZOPA's former coral was decorative but too pale for text on light cards. */
.arzopa-hub :where(
  .arzopa-shortcuts b,
  .arzopa-model-media > span,
  .arzopa-reading-card > span,
  .arzopa-reading-intro > span
) {
  color: #9f3523 !important;
}

.arzopa-orbit b {
  background: #9f3523 !important;
  color: #ffffff !important;
}

:where(
  .gravastar-hero dd,
  .gravastar-filter-status,
  .gravastar-card-media > span,
  .gravastar-card-copy > div:last-child > a,
  .gravastar-card-copy > div:last-child > span,
  .gravastar-card-copy > div:last-child > b,
  .gravastar-product-facts dt,
  .gravastar-product-articles article > span,
  .gravastar-product-articles article > a,
  .gravastar-related > div:last-child > a small,
  .support-model-copy dt,
  .arzopa-model-copy dt,
  .arzopa-model-actions a,
  .arzopa-reading-card > span,
  .arzopa-reading-card > a,
  .arzopa-filter-status,
  .article-support-cta
) {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.journal-copy,
.arzopa-method,
.evidence-note,
.article-main blockquote,
.article-section blockquote,
.arzopa-hero,
.support-hero,
.support-profile-hero {
  color: var(--q-on-dark);
}

:where(.journal-copy, .arzopa-method, .evidence-note, .article-main blockquote, .article-section blockquote, .arzopa-hero, .support-hero, .support-profile-hero) :where(h1, h2, h3, h4, b, strong) {
  color: var(--q-on-dark) !important;
}

:where(.journal-copy, .arzopa-method, .evidence-note, .arzopa-hero, .support-hero, .support-profile-hero) :where(p, li, dd) {
  color: var(--q-on-dark-muted) !important;
}

.article-main blockquote p,
.article-section blockquote p {
  color: var(--q-on-dark) !important;
}

/* Product photography stays contained on a common neutral stage. */
:where(.arzopa-model-media, .support-model-media, .support-profile-media, .article-product-image, .gravastar-card-media, .gravastar-product-media) {
  background: #eef3f0 !important;
}

:where(.arzopa-model-media, .support-model-media, .support-profile-media, .article-product-image, .gravastar-card-media, .gravastar-product-media) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 12px 18px rgba(9, 47, 41, 0.13));
}

/* Reading pages: comfortable body copy and predictable contrast. */
.article-main > p,
.article-main li,
.guide-markdown p,
.guide-markdown li,
.article-section p,
.article-section li {
  color: #2d3a36 !important;
  font-size: clamp(17px, 1.4vw, 19px) !important;
  line-height: 1.78 !important;
}

.article-toc,
.article-toc a,
.article-faq summary,
.article-sources,
.article-sources a {
  color: var(--q-ink) !important;
}

.article-product p,
.take-box li,
.author-card p,
.article-sources p {
  color: var(--q-muted) !important;
  font-size: 15px !important;
}

/* Admin must be usable for affiliate links, images and article editing. */
.admin-body {
  background: var(--q-paper) !important;
  color: var(--q-ink) !important;
}

.admin-body :where(.login-card, .product-form, .admin-panel, .admin-card, dialog) {
  color: var(--q-ink);
}

.admin-body :where(label, .admin-top button, .primary-button, .back) {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.admin-body :where(input, select, textarea) {
  min-height: 46px;
  border-color: #9ca9a4 !important;
  background: #ffffff !important;
  color: var(--q-ink) !important;
  font-size: 15px !important;
}

.admin-body textarea {
  min-height: 130px;
}

.admin-body :where(p, li, td, th) {
  color: var(--q-muted);
  font-size: 14px;
}

@media (max-width: 980px) {
  .problem-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .support-source-policy {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  .support-source-policy a {
    grid-column: 1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 15px !important;
  }

  .problem-links {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .problem-links > a {
    min-height: 92px !important;
    padding: 16px !important;
  }

  .support-source-policy,
  .support-wizard-band {
    width: 100% !important;
    padding: 26px 20px !important;
  }

  .article-main > p,
  .article-main li,
  .guide-markdown p,
  .guide-markdown li,
  .article-section p,
  .article-section li {
    font-size: 17px !important;
    line-height: 1.72 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}