/*
 * Quarterly tax kit page. Loads after the Last Table tokens and components, which bring the hero, bill and buttons.
 * This file lays out the numbered flow and the grid of portal screens. Only Last Table variables.
 */

/*
 * The shell's Fraunces and JetBrains Mono files are Latin subsets: a Vietnamese letter such as "ế" falls back glyph by
 * glyph and the word breaks apart. A Vietnamese page (lang vi-VN on <html>) uses faces that carry the whole alphabet.
 */
:root:lang(vi) {
  --lt-font-display: Georgia, "Noto Serif", "Times New Roman", serif;
  --lt-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono", monospace;
}

/* The kit section stacks 3 headings in one column; give the later ones the same air as a new section. */
.lt-body > .lt-h2:not(:first-child) { margin-top: var(--lt-space-7); }

.tk-trap img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-3);
}
.tk-trap figcaption { margin-top: var(--lt-space-2); color: var(--lt-text-2); font-size: var(--lt-step--1); }
.tk-trap figcaption strong { display: block; color: var(--lt-text-1); }

.tk-flow { list-style: none; margin: var(--lt-space-5) 0 var(--lt-space-5); padding: 0; counter-reset: step; }
.tk-flow li {
  position: relative;
  display: grid;
  gap: var(--lt-space-1);
  padding: 0 0 var(--lt-space-5) var(--lt-space-7);
  counter-increment: step;
}
.tk-flow li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lt-line-strong);
  border-radius: 999px;
  background: var(--lt-surface-2);
  font: 600 var(--lt-step--1) / 1 var(--lt-font-mono);
  color: var(--lt-text-1);
}
.tk-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: 4px;
  border-left: 1px solid var(--lt-line);
}
.tk-flow span { color: var(--lt-text-2); }

.tk-traps { display: grid; gap: var(--lt-space-5); margin: var(--lt-space-5) 0 0; }
.tk-trap { margin: 0; }
@media (min-width: 760px) {
  .tk-traps { grid-template-columns: 1fr 1fr; }
}

/* The order form and the transfer details that replace it once the order is in. */
.tk-order .lt-label { display: block; margin-top: var(--lt-space-4); }
.tk-order .lt-input { width: 100%; }
.tk-trap-field { display: none; }
.tk-consent { display: flex; gap: var(--lt-space-2); align-items: flex-start; margin-top: var(--lt-space-4); color: var(--lt-text-2); }
.tk-status { color: var(--lt-text-2); }
.tk-status-error { color: var(--lt-text-1); font-weight: 600; }
.tk-result {
  margin-top: var(--lt-space-5);
  padding: var(--lt-space-4);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
}
.tk-result:focus { outline: none; }
.tk-memo { margin: var(--lt-space-1) 0 var(--lt-space-3); font: 600 var(--lt-step-2) / 1.2 var(--lt-font-mono); letter-spacing: 0.04em; color: var(--lt-text-1); }
.tk-qr { display: block; max-width: 100%; height: auto; margin: var(--lt-space-3) 0; border-radius: var(--lt-radius-card); }