/* AI Mỗi Ngày - additions to the design CSS (C-078): the states site.js switches on, and the two text
   pages (terms, privacy) the design only links to. Uses the variables of tokens.css only. */

/* Accordions: with site.js an answer shows only under an open button. Without it every answer shows,
   and the buttons, which would do nothing, read as plain questions; the copy buttons need it too. */
.js .faq-btn[aria-expanded="false"] + .faq-a { display: none; }
html:not(.js) .faq-btn { cursor: default; }
html:not(.js) .faq-btn:hover { color: var(--ice); }
html:not(.js) .faq-btn .icon, html:not(.js) .copy-btn { display: none; }

/* Spacing the design declares but its own reset cancels: `.page p, .page ul, .page figure { margin: 0 }` is
   more specific than these one-class rules, so in the canvas they never applied (text sat on the box under
   it). Same values as components.css, one class more specific. */
.page .step-body > * + * { margin-top: var(--sp-3); }
.page .illus { margin-top: var(--sp-5); }
.page .req-list { margin-top: var(--sp-5); }
.page .ss-step { margin-bottom: var(--sp-2); }
.page .cmd-label { margin-bottom: var(--sp-2); }
.page .cmd-note { margin-top: var(--sp-2); }
/* Not in the design: the gap between "Gõ trong PowerShell..." and the command cards (the h2 above uses it). */
.doc-section > p + .cmd-list { margin-top: var(--sp-5); }
/* The three steps of "Cách làm" start level: a shorter step no longer spreads its rows over the row height. */
.steps-row .step { align-content: start; }

/* "Nhận link tải qua email" (C-080): the form of index.html (hero, closing call) and huong-dan-cai.html. In the
   HTML the form is `hidden` and the direct download link shows - the page without site.js; site.js turns the form
   on when a Turnstile site key is set. The design's own parts: mono labels, outline buttons, 1 px lines; the
   submit is an outline button too, the orange one stays the page's "Tải bản thử". */
.signup [hidden] { display: none !important; }
.page .signup { margin-top: var(--sp-6); max-width: 560px; padding: var(--sp-5); border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--void); text-align: left; }
.page .signup-title { font-size: var(--fs-heading-sm); line-height: 1.24; letter-spacing: var(--track-heading); text-wrap: balance; }
.signup-form { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-label { font: 400 var(--fs-label)/1.2 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-2); }
.field-input { width: 100%; min-height: 48px; margin: 0; padding: 0 var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--carbon); color: var(--ice); font: 400 16px/1.4 var(--font); transition: border-color .2s ease; }
.field-input::placeholder { color: var(--text-3); opacity: 1; }
.field-input:hover, .field-input:focus { border-color: var(--ice); }
.field-input[aria-invalid="true"] { border-color: var(--ice); box-shadow: inset 3px 0 0 var(--ice); }
.check { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; cursor: pointer; }
.check-box { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 1px 0 0; border: 1px solid var(--line-strong); border-radius: 4px; background: transparent; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.check-box::before { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2px solid var(--void); border-bottom: 2px solid var(--void); transform: rotate(-45deg); opacity: 0; }
.check-box:hover { border-color: var(--ice); }
.check-box:checked { background: var(--ice); border-color: var(--ice); }
.check-box:checked::before { opacity: 1; }
.check-box[aria-invalid="true"] { border-color: var(--ice); box-shadow: 0 0 0 1px var(--ice); }
.signup-turnstile { min-height: 65px; }
.signup-turnstile:empty { min-height: 0; }
.signup-submit { align-self: flex-start; }
.signup-submit[disabled] { border-style: dashed; border-color: var(--line); color: var(--text-3) !important; cursor: progress; }
.page .signup-status { color: var(--ice); font-size: var(--fs-small); line-height: 1.5; overflow-wrap: anywhere; }
.page .signup-status:empty { display: none; }
.page .signup-status.is-error { padding-left: var(--sp-3); border-left: 2px solid var(--line-full); }
.page .signup-status.is-done { padding-left: var(--sp-3); border-left: 2px solid var(--cobalt); }
.signup-direct { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.page .signup-note { flex: 1 1 240px; color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; }
.cta .signup { margin: var(--sp-7) auto 0; }
@media (max-width: 699px) {
  .page .signup { padding: var(--sp-4); }
  .signup-submit { align-self: stretch; }
  .signup-direct .btn { width: 100%; }
}
/* 360 px: the slot keeps the 300 px of Turnstile's flexible widget (site.js falls back to compact below that). */
@media (max-width: 389px) {
  .page .signup { padding: var(--sp-3); }
}

/* Text pages (Điều khoản dùng thử, Chính sách quyền riêng tư): one column of --doc. */
.terms { max-width: calc(var(--doc) + 2 * var(--sp-6)); margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-9); }
.terms h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.2; letter-spacing: var(--track-heading); text-wrap: balance; }
.terms-version { margin-top: var(--sp-4) !important; }
.terms-intro { margin-top: var(--sp-6) !important; color: var(--text-2); font-size: var(--fs-lead); line-height: 1.5; }
.terms-section { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.terms-section h2 { font-size: var(--fs-heading-sm); line-height: 1.24; letter-spacing: var(--track-heading); }
.terms-section > p { color: var(--text-2); }
.terms-section > * + * { margin-top: var(--sp-4) !important; }
.terms-end { margin-top: var(--sp-7) !important; padding-top: var(--sp-5); border-top: 1px solid var(--line); color: var(--text-2); }

@media (max-width: 699px) {
  .terms { padding: var(--sp-7) var(--sp-4) var(--sp-8); }
}
/* Below 390 px the hero's one-line pill ("Bản thử nghiệm 1.1.0-beta.1 · miễn phí") is wider than the column
   and was cut at the right edge: tighter tracking keeps it on one line, and below 340 px it may wrap. */
@media (max-width: 389px) {
  .hero-inner > .pill { letter-spacing: var(--track-ui); }
}
@media (max-width: 339px) {
  .hero-inner > .pill { letter-spacing: 0; max-width: 100%; height: auto; min-height: 26px; white-space: normal; }
}