/* ---------------------------------------------------------------------------
   `/dang-nhap` — one narrow column, two doors, no script.

   Loaded only by this page (`PageMeta.styles`), which is the whole reason it is a
   separate file: doc 54 budgets 30 KB for the first screen, and nobody sees a sign-in
   form on the way to reading a law. Putting these rules in `app.css` would charge every
   reader of every Điều for a page most of them never open.

   The form controls are deliberately large. This is the one page on the site a reader
   reaches while already blocked from something they were trying to do, and it is the one
   page where a mistyped character costs them a round trip through their inbox.
   --------------------------------------------------------------------------- */

main.auth {
  /* 26rem, not a percentage: a sign-in form has one column of content and widening it
     past the length of an email address buys nothing but empty space. */
  max-width: 26rem;
  margin: 32px auto 64px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

main.auth h1 { margin: 0 0 8px; font-size: 22px; }

main.auth .lede { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* One place for a message, so a success can never sit underneath a later failure. Both
   states carry a live region in the markup, so the change is announced rather than only
   coloured — a wrong code is the most common thing this page has to say. */
main.auth .notice {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 8px;
  font-size: 14px; line-height: 1.5; border: 1px solid var(--line);
}
main.auth .notice.good { background: var(--accent-soft); }
main.auth .notice.bad {
  background: var(--accent-soft); border-color: var(--accent-solid); color: var(--ink);
}

main.auth label {
  display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted);
}

main.auth input[type=email],
main.auth input[type=text] {
  width: 100%; box-sizing: border-box; padding: 11px 12px; margin: 0 0 14px;
  font: inherit; font-size: 16px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
}
main.auth input:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 1px; }

/* The six-digit field: spaced out and monospaced, because it is read off a screen and
   copied one character at a time, and because a run of six digits in a proportional font
   is the easiest thing on this page to lose your place in. */
main.auth #code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; letter-spacing: 0.35em; text-align: center;
}

main.auth button[type=submit],
main.auth a.button {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 11px 14px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent-solid); color: var(--on-accent);
  border: 1px solid transparent; border-radius: 8px; text-decoration: none;
}
main.auth button[type=submit]:hover,
main.auth a.button:hover { filter: brightness(1.08); }
main.auth button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Google is the shorter path, so it is the first control — but it is not the emphasised
   one. Both doors work; one of them is the door that always works. */
main.auth a.button.google {
  background: var(--panel); color: var(--ink); border-color: var(--line);
}

main.auth .or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--muted); font-size: 13px;
}
main.auth .or::before,
main.auth .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

main.auth .sent-to { margin: 0 0 16px; font-size: 14px; line-height: 1.5; }

main.auth .fineprint {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
main.auth .fineprint a { color: var(--muted); }

/* "Send another code" and "sign out" are real form posts — a GET link would let an image
   tag on another page fire them — so they are buttons dressed as links rather than links
   dressed as buttons. */
main.auth button.link {
  background: none; border: 0; padding: 0; margin: 12px 0 0;
  font: inherit; color: var(--accent-solid); text-decoration: underline; cursor: pointer;
}
main.auth form.restart { margin: 0; }

main.auth .inert-note {
  margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted);
}

main.auth .actions { margin: 18px 0 0; }
/* Every other link on the site takes its colour from the theme; these are inside a panel
   that sets neither, so without this rule they render in the browser's default blue —
   which on a page about money reads as somebody else's page. */
main.auth .actions a,
main.auth .notice a { color: var(--accent-solid); }

/* ---------------------------------------------------------------------------
   The plan block on `/tai-khoan`.

   The rest of this page is deliberately unstyled — a `dl` and a `ul` render fine as a
   browser draws them, and every rule written here is one that has to be maintained. The
   allowance rows are the exception: three values per line is the one thing on the page
   that a default list layout genuinely garbles.
   --------------------------------------------------------------------------- */

main.auth .plan { margin: 0 0 12px; font-size: 15px; }

main.auth .tier {
  padding: 2px 8px; border-radius: 999px; font-size: 13px;
  background: var(--accent-soft); border: 1px solid var(--line);
}
/* Only the paid tiers are filled in. A free plan is a state, not an award, and colouring
   it the same as a subscription would make the page look like it is selling something. */
main.auth .tier.pro,
main.auth .tier.api { background: var(--accent-solid); color: var(--on-accent); border-color: transparent; }

main.auth ul.allowance { list-style: none; margin: 14px 0 0; padding: 0; }
main.auth ul.allowance li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 2px 12px; margin: 0 0 14px;
}
main.auth ul.allowance .what { font-size: 14px; font-weight: 600; }
main.auth ul.allowance .count {
  font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted);
}
main.auth ul.allowance .note {
  grid-column: 1 / -1; font-size: 12.5px; color: var(--muted);
}
/* Spans both columns and sits under them: a bar that shares a row with its own numbers
   ends up narrower than the text it is measuring. */
main.auth ul.allowance progress {
  grid-column: 1 / -1; width: 100%; height: 8px; margin: 4px 0 2px;
}

/* ---------------------------------------------------------------------------
   `/nang-cap` — the pricing page.

   Wider than `main.auth`, because three plans side by side is the comparison the page
   exists to make and stacking them turns it into three separate sales pitches. It shares
   this stylesheet rather than getting its own: it is loaded from the same places, by the
   same readers, in the same session as the account page it links to and from.
   --------------------------------------------------------------------------- */

main.billing {
  max-width: 62rem; margin: 40px auto 72px; padding: 0 20px;
}
main.billing .hero { text-align: center; margin: 0 auto 36px; max-width: 46rem; }
main.billing .eyebrow {
  display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-solid); background: var(--accent-soft); border: 1px solid var(--line);
}
main.billing h1 {
  margin: 0 0 14px; font-size: clamp(24px, 4vw, 34px); line-height: 1.2;
  font-family: var(--serif); color: var(--head, var(--ink));
}
main.billing h2 { font-size: 18px; margin: 48px 0 16px; }
main.billing h2.center { text-align: center; }
main.billing .lede {
  margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.65;
}
main.billing .lede b { color: var(--ink); }

/* `auto-fit` with a floor rather than three fixed columns: at 780px the third card would
   be 190px wide and unreadable, and it wraps into a second row on its own. */
main.billing .plans {
  display: grid; gap: 20px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

main.billing .plan-card {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 24px 24px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--card-shadow, none);
  transition: transform .15s ease, box-shadow .15s ease;
}
main.billing .plan-card:hover { transform: translateY(-2px); }
/* The recommended plan is the one frame in the accent colour, so the eye lands on it first. */
main.billing .plan-card.pro { border: 2px solid var(--accent-solid); padding: 27px 23px 23px; }
main.billing .plan-card .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 3px 14px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  background: var(--accent-solid); color: var(--on-accent);
}
/* The plan somebody is already on is outlined, not dimmed: it is the reference the other
   two are read against, so hiding it would remove the comparison. */
main.billing .plan-card.current { border-color: var(--accent-solid); }
main.billing .plan-card h2 { margin: 0 0 4px; font-size: 19px; }
main.billing .plan-card .tagline { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }
main.billing .plan-card .price {
  margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--line);
  font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
}
main.billing .plan-card .price span {
  font-size: 14px; font-weight: 400; color: var(--muted);
}
main.billing .plan-card ul {
  /* Grows so every card's button sits on the same line however long the list is — a row
     of buttons at three different heights reads as three different levels of offer. */
  flex: 1; list-style: none; margin: 0 0 22px; padding: 0;
  font-size: 14.5px; line-height: 1.5;
}
main.billing .plan-card li { padding: 0 0 0 28px; margin: 0 0 12px; position: relative; }
main.billing .plan-card li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent-soft);
  border: 1px solid var(--line);
}
main.billing .plan-card li::after {
  content: ""; position: absolute; left: 6px; top: 5px; width: 4px; height: 8px;
  border: solid var(--accent-solid); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
main.billing .plan-card button[type=submit] {
  display: block; width: 100%; box-sizing: border-box; padding: 12px 14px;
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--panel); color: var(--accent-solid);
  border: 1.5px solid var(--accent-solid); border-radius: 10px;
}
main.billing .plan-card.pro button[type=submit] {
  background: var(--accent-solid); color: var(--on-accent); border-color: transparent;
}
main.billing .plan-card button[type=submit]:hover { filter: brightness(1.08); }
main.billing .plan-card button:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; }
main.billing .plan-card button.link {
  background: none; border: 0; padding: 0; margin: 12px 0 0; width: 100%;
  font: inherit; font-size: 13px; color: var(--muted);
  text-decoration: underline; cursor: pointer;
}
main.billing .plan-card .is-current,
main.billing .plan-card .not-yet {
  margin: 0; padding: 10px 12px; border-radius: 10px; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
  background: var(--bg); border: 1px dashed var(--line);
}
main.billing form.term-year { margin: 0; }

main.billing ul.promises {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
main.billing ul.promises li {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  border-top: 3px solid var(--accent-solid); font-size: 14px; line-height: 1.55;
}
main.billing ul.promises b { font-size: 15px; }
main.billing ul.promises span { color: var(--muted); }
main.billing .fineprint {
  margin: 14px auto 0; font-size: 13px; line-height: 1.6; color: var(--muted);
  max-width: 46rem; text-align: center;
}
main.billing ul.promises + .fineprint { margin-top: 28px; }

/* The transfer screen's details. Monospaced where a value is copied by hand, and the
   transfer code is the largest thing on the page after the heading: it is the only field
   whose absence turns a payment into a support ticket. */
main.auth.checkout dl.transfer {
  margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg);
}
main.auth.checkout dl.transfer dt {
  margin: 12px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--muted);
}
main.auth.checkout dl.transfer dt:first-child { margin-top: 0; }
main.auth.checkout dl.transfer dd { margin: 0; font-size: 15px; }
main.auth.checkout dl.transfer dd.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; letter-spacing: 0.02em;
}
main.auth.checkout dl.transfer dd.code {
  font-size: 22px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-solid);
}

@media (max-width: 480px) {
  main.auth { margin: 16px 12px 48px; padding: 18px; }
  main.billing { margin: 16px auto 48px; padding: 0 12px; }
}

/* The QR on the transfer screen. Sized in a fixed pixel box rather than a percentage:
   a symbol scaled below about 180px stops resolving on a phone camera, and one scaled
   up by a flexible layout wastes the fold. */
main.auth.checkout figure.qr { margin: 18px 0 8px; text-align: center; }
main.auth.checkout figure.qr svg {
  /* A white plate under the code, because the quiet zone has to read as white against a
     dark theme too — a QR drawn on a dark background does not scan. */
  background: #fff; padding: 8px; border-radius: 8px; max-width: 100%; height: auto;
}
main.auth.checkout figure.qr figcaption {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}

/* ---------------------------------------------------------------------------
   `/tai-khoan` — a dashboard, not a form.

   `main.auth` is a 26rem sign-in card, and five sections stacked in it left a 1440px
   screen 70% empty and a page 1,900px tall. The account page keeps the `auth` class for
   the shared control and notice rules but drops the card: each section is its own card on
   a two-column grid, collapsing to one column on a phone.
   --------------------------------------------------------------------------- */

main.auth.account {
  max-width: 64rem; padding: 0 20px; background: none; border: 0; border-radius: 0;
}
main.auth.account .grid {
  display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
main.auth.account .card {
  padding: 20px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px;
}
main.auth.account .card.wide { grid-column: 1 / -1; }
main.auth.account h2 { margin: 0 0 12px; font-size: 16px; }

/* Label and value on one row: four short fields were eight lines tall as a stacked list. */
main.auth.account dl.held {
  display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0;
  font-size: 14px;
}
main.auth.account dl.held dt { color: var(--muted); }
main.auth.account dl.held dd { margin: 0; overflow-wrap: anywhere; }

main.auth.account .actions { margin: 14px 0 0; }
main.auth.account a.btn {
  display: inline-block; padding: 9px 14px; font-weight: 600; text-decoration: none;
  color: var(--accent-solid); border: 1px solid var(--accent-solid); border-radius: 8px;
}
main.auth.account a.btn:hover { background: var(--accent-soft); }

main.auth.account ul.staff-questions {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
main.auth.account ul.staff-questions li {
  padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
main.auth.account .staff-questions p { margin: 0 0 8px; }
main.auth.account .staff-questions blockquote {
  margin: 0 0 8px; padding: 0 0 0 12px; border-left: 3px solid var(--accent-solid);
  font-size: 14px; line-height: 1.6;
}

main.auth.account ul.sessions {
  list-style: none; margin: 0 0 16px; padding: 0; font-size: 14px;
}
main.auth.account ul.sessions li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
main.auth.account ul.sessions .seen { color: var(--muted); }
main.auth.account ul.sessions .here {
  padding: 1px 8px; font-size: 12px; font-weight: 600; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-solid);
  border: 1px solid var(--accent-solid);
}

/* Sign-out is routine: an outlined button, never the filled one that means "go". */
main.auth.account .row-actions { display: flex; flex-wrap: wrap; gap: 10px; }
main.auth.account .row-actions form { margin: 0; }
main.auth.account button.secondary {
  display: inline-block; width: auto; padding: 9px 14px; font: inherit; font-weight: 600;
  cursor: pointer; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
}
main.auth.account button.secondary:hover { border-color: var(--ink); filter: none; }

/* The one irreversible action, fenced off: red frame, the explanation beside the control. */
main.auth.account .danger-zone { border-color: var(--accent-solid); background: var(--accent-soft); }
main.auth.account .danger-head { color: var(--accent-solid); }
main.auth.account .danger-body {
  display: grid; gap: 20px 32px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start; font-size: 14px; line-height: 1.6;
}
main.auth.account .danger-body p { margin: 0 0 10px; }
main.auth.account .danger-body details summary { cursor: pointer; color: var(--muted); }
main.auth.account form.danger { margin: 0; }
main.auth.account button.destructive {
  background: var(--accent-solid); color: var(--on-accent);
}

@media (max-width: 760px) {
  main.auth.account .grid,
  main.auth.account .danger-body { grid-template-columns: 1fr; }
  main.auth.account .row-actions form { flex: 1 1 100%; }
  main.auth.account button.secondary { width: 100%; }
}
@media (max-width: 480px) {
  main.auth.account { margin: 16px auto 48px; padding: 0 12px; }
}

/* `doc.css` caps every `.doc-page main` at 860px, and the page shell wraps this one in such a
   `main.wrap`; without lifting that cap the grid above still lives in an 860px column. */
.doc-page main.wrap:has(> main.account),
.doc-page main.wrap:has(> main.billing) { max-width: 1180px; }