/*
 * Design tokens: white page, black ink, one blue accent, gold for notes -- the palette the
 * maintainer asked for by pointing at Quicko's filing app (it.quicko.com) and Zerodha
 * Console. --tc-accent is #004ee8, sampled from Quicko's own primary buttons in a live
 * session, and it clears WCAG AA in both directions (5.9:1 as text on white, 7.4:1 under
 * white text). The marigold family stays for callouts/notes -- that's the "gold" -- and the
 * neutral gray scale stays de-tinted. The token was historically --tc-teal; renamed when the
 * value stopped being teal, because a token that lies about its colour is worse than a
 * rename's diff noise.
 *
 * Hand-written rather than Tailwind: the original leaned on Tailwind utilities inside JSX,
 * which has no equivalent in a server-rendered template without adding a build step. The
 * component classes below cover the same ground with no toolchain at all.
 */
:root {
  /* True white, not near-white: both reference apps put cards on #fff and let borders and
     shadow do the separation. */
  --background: #ffffff;
  --foreground: #111315;
  --tc-accent: #004ee8;
  --tc-marigold: #d99a3d;
  --tc-ink: #111315;
  --tc-ink-muted: #5c6368;
  --tc-card: #ffffff;
  --tc-border: #e2e4e7;
  --tc-pill-bg: #eceef0;
  --tc-pill-text: #52585d;
  --tc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Marigold at its brand value is 2.4:1 on white -- fine for a 6px progress fill, not for
     text. This is the same hue darkened until it clears 4.5:1, so small labels can use it
     without the theme losing its colour. */
  --tc-marigold-text: #8a5a12;
  /* WCAG 2.5.8 minimum target. A token rather than a literal so a future design system can
     raise it in one place. */
  --tc-target-min: 44px;
  --tc-shadow-card: 0 1px 3px rgba(16, 20, 24, 0.06), 0 1px 2px rgba(16, 20, 24, 0.04);
  /* Pass/fail, added for the ITR Validation screen. Both are darkened past their brand
     values until they clear 4.5:1 on white (danger 6.0:1, success 5.9:1), because they carry
     small label text -- "Required", "Complete" -- and not just a dot. Marigold above stays
     the "check this, nothing is broken" colour; these two are "this is wrong" and "this is
     done", which marigold cannot say on its own. Never the only cue: every state that uses
     them also carries a word and a glyph, so a red/green confusion loses nothing. */
  --tc-danger: #b3261e;
  --tc-success: #146c2e;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Soft charcoal rather than near-black: still unambiguously "dark mode", but softer than
       GitHub/Linear-style near-black, closer to Slack's dark theme. All pairings below were
       checked against WCAG contrast minimums after this change, not just eyeballed --
       foreground/background 14.2:1, ink-muted/background 6.4:1, accent/background 5.6:1,
       marigold-text/background 8.3:1 (AA text minimum is 4.5:1). The border stays intentionally
       subtle (~1.6:1) to match this file's light-mode border, which is equally low-contrast by
       the same design intent -- a divider, not a component outline; .tc-input's border isn't
       the only cue it's a field (padding, fill, and the focus-visible ring above are), and
       every focus state still clears 3:1 regardless. */
    --background: #1a1c1f;
    --foreground: #e8eaec;
    /* The light-mode accent lightened until it clears AA on the charcoal background --
       same hue as Quicko's #004ee8, which is itself far too dark to read on #1a1c1f. */
    --tc-accent: #7fa3f7;
    --tc-marigold: #e3ab52;
    --tc-ink: #e8eaec;
    --tc-ink-muted: #999fa4;
    --tc-card: #232629;
    --tc-border: #34383c;
    --tc-pill-bg: #2b2e32;
    --tc-pill-text: #b6bbbf;
    /* On the dark card the brand marigold already clears 4.5:1, so it lightens rather
       than darkens -- the same intent, the opposite direction. */
    --tc-marigold-text: #e3ab52;
    --tc-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
    /* Lightened rather than reused: the light-mode values are ~2:1 on this background. These
       clear 9:1 and 8:1 respectively. */
    --tc-danger: #f2b8b5;
    --tc-success: #7fd398;
  }
}

/*
 * Available to assistive technology, invisible on screen. Not ``display:none`` and not
 * ``visibility:hidden`` -- both of those remove the text from the accessibility tree too,
 * which is the opposite of the point.
 */
.tc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ focus ---- */
/*
 * Every interactive element gets a visible ring. This is the single highest-impact rule in
 * the file: without it a keyboard-only user has no idea where they are, and this is a wizard
 * driven almost entirely by keyboard.
 *
 * ``:focus-visible`` rather than ``:focus`` so a mouse click doesn't leave a ring behind --
 * the browser decides, which is exactly what that pseudo-class exists for. The outline is
 * offset so it reads as a ring around the control rather than a border on it, and it uses
 * the accent so it stays visible in both themes.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tc-accent);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  /*
   * Honour the OS setting rather than overriding it. ``!important`` is load-bearing here:
   * this must win over any component rule, including ones added later, because a user who
   * asked for less motion is telling us about a vestibular condition, not a preference.
   */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  /* The OS's own UI font rather than Arial: San Francisco on Mac, Segoe UI on Windows, Roboto
     on Android/Chrome OS -- each reads as native and current there, at zero network cost. No
     hosted webfont: this app doesn't load anything from a third party (see base.html), and
     that's a stated trust property of a tool handling someone's tax data, not just a perf
     choice to trade away for a nicer typeface. */
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- layout ---- */

.tc-shell {
  margin: 0 auto;
  display: flex;
  /* 80%, up from 70%: the printed-form facsimile on the Result screen is a ruled A4 page with
     eight-column schedule tables in it, and at 70% the main column left it cramped enough to
     wrap cells that the paper form keeps on one line. The max-width below still stops this
     from sprawling on an ultrawide display. */
  width: 80%;
  min-width: 320px;
  max-width: 1600px;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  /* #tc-wizard *is* .tc-shell, and every interaction replaces it wholesale (outerHTML). The
     browser's scroll-anchoring then tries to compensate for a big subtree being removed and
     a differently-sized one taking its place -- which is exactly backwards for an in-place
     answer or an entries-table row: nothing above the fold moved, so there is nothing to
     compensate for, and "compensating" anyway is the jump this is fixing. Off here, and
     a11y.js does the (rarer, deliberate) scroll-to-top itself for real page navigation. */
  overflow-anchor: none;
}

/* ------------------------------------------------------ sidebar + stage layout ---- */
/*
 * The persistent left nav sits beside the stage/review content only -- Upload and the Result
 * screen stay full-width (see _wizard.html), so this is scoped to .tc-layout rather than
 * .tc-shell itself. minmax() keeps the sidebar column under 320px on its own even before the
 * breakpoint collapses it, so neither side of this ever overflows the narrowest phone (WCAG
 * 1.4.10) on its own -- the @media rule below is what actually stacks it there.
 */
.tc-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 1.5rem;
  align-items: start;
}

.tc-layout-main {
  min-width: 0;
}

.tc-sidebar {
  position: sticky;
  top: 1.5rem;
}

.tc-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-border);
  background: var(--tc-card);
  box-shadow: var(--tc-shadow-card);
  padding: 1rem;
}

.tc-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One row of the menu -- Quicko-style: icon + label on a soft band, the active one tinted
   with the accent and its text/icon turned accent-coloured (never a solid fill; solid accent
   is reserved for primary action buttons). */
.tc-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: var(--tc-target-min);
  border: none;
  border-radius: 0.5rem;
  background: none;
  color: var(--tc-ink);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
}

.tc-sidebar-link:hover {
  background: color-mix(in srgb, var(--tc-accent) 6%, transparent);
}

.tc-sidebar-link--active,
.tc-sidebar-link--active:hover {
  background: color-mix(in srgb, var(--tc-accent) 9%, transparent);
  color: var(--tc-accent);
}

.tc-sidebar-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* Sub-menus: the Incomes topic rows (always visible -- the maintainer wants the full income
   taxonomy on screen without a click), and Pre-Fill's per-document list while an extraction
   is on screen. Indented past the parent's icon so they read as children. */
.tc-sidebar-sublist {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  list-style: none;
  margin: 0.125rem 0 0;
  padding: 0 0 0 1.375rem;
}

/* Third level: the per-document rows under Pre-Fill. A smaller indent than the second level
   so the sidebar stays legible at 180px -- the nesting reads from the indent step, not from
   an indent that eventually runs out of column. */
.tc-sidebar-sublist--nested {
  padding-left: 0.875rem;
  font-size: 0.8125rem;
}

.tc-sidebar-subitem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--tc-target-min);
  border: none;
  border-radius: 0.5rem;
  background: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tc-ink-muted);
  text-align: left;
  cursor: pointer;
  padding: 0.25rem 0.625rem;
}

.tc-sidebar-subitem:hover {
  background: color-mix(in srgb, var(--tc-accent) 6%, transparent);
}

.tc-sidebar-subicon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.tc-sidebar-subitem--active,
.tc-sidebar-subitem--active:hover {
  background: color-mix(in srgb, var(--tc-accent) 9%, transparent);
  color: var(--tc-accent);
}

.tc-sidebar-subitem--disabled {
  cursor: default;
  opacity: 0.5;
}

.tc-sidebar-subitem--disabled:hover {
  background: none;
}

/* Below this, the sidebar reads better stacked above the stage content than squeezed beside
   it -- same reasoning as every other reflow rule in this file: a fixed side-by-side layout
   would force horizontal scrolling once the viewport gets narrow enough. */
@media (max-width: 48rem) {
  .tc-layout {
    grid-template-columns: 1fr;
  }

  .tc-sidebar {
    position: static;
  }
}

.tc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--tc-border);
  padding-bottom: 1rem;
}

.tc-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tc-ink);
}

.tc-header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.tc-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-border);
  background: var(--tc-card);
  box-shadow: var(--tc-shadow-card);
  padding: 1.25rem;
}

.tc-card h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tc-ink);
}

.tc-card--centered {
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
}

/* .tc-card doubles as a clickable nav tile on the admin dashboard -- an <a> needs its own
   reset, or its default blue/underline paints through every descendant (text-decoration
   paints through inline descendants unless something re-declares it; .tc-card h2's own
   `color` rule doesn't touch that). Same convention as a.tc-btn below. */
a.tc-card {
  text-decoration: none;
  transition: border-color 0.15s ease;
}

a.tc-card:hover {
  border-color: var(--tc-accent);
}

.tc-badge-circle {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--tc-accent);
  font-size: 1.5rem;
  color: #fff;
}

.tc-badge-circle--marigold {
  background: color-mix(in srgb, var(--tc-marigold) 20%, transparent);
}

.tc-form-badge {
  border-radius: 9999px;
  background: var(--tc-accent);
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: #fff;
}

.tc-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tc-stack-tight {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tc-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.tc-section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Not --tc-marigold: at 12px the brand value is 2.4:1 on white. */
  color: var(--tc-marigold-text);
  margin: 0;
}

.tc-section-label--quiet {
  color: var(--tc-ink-muted);
}

.tc-muted {
  color: var(--tc-ink-muted);
  font-size: 0.875rem;
}

.tc-mono {
  font-family: var(--tc-mono);
}

.tc-small {
  font-size: 0.75rem;
}

.tc-nowrap {
  white-space: nowrap;
}

.tc-self-start {
  align-self: flex-start;
}

.tc-full {
  width: 100%;
}

.tc-left {
  text-align: left;
}

.tc-centered-text {
  text-align: center;
}

.tc-bullets {
  margin: 0;
  padding-left: 1.25rem;
}

/* ---------------------------------------------------------------- controls ---- */

.tc-btn {
  /* inline-flex + min-height so the target is 44px regardless of the font size inside it;
     padding alone left this at 34px. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tc-target-min);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: var(--tc-accent);
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  font-family: inherit;
}

.tc-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.tc-btn-secondary {
  background: transparent;
  color: var(--tc-ink);
  border: 1px solid var(--tc-border);
}

.tc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tc-btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--tc-accent);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

.tc-btn-link--warn {
  color: var(--tc-marigold);
  font-size: 0.75rem;
}

a.tc-btn,
a.tc-btn-secondary {
  display: inline-block;
  text-decoration: none;
}

.tc-btn-quiet {
  background: none;
  border: none;
  padding: 0;
  color: var(--tc-ink-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
}

.tc-input,
.tc-select {
  border-radius: 0.375rem;
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-ink);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  width: 100%;
  max-width: 28rem;
}

.tc-input--flagged {
  border-color: var(--tc-marigold);
  background: color-mix(in srgb, var(--tc-marigold) 12%, transparent);
}

.tc-pill {
  display: inline-block;
  border-radius: 9999px;
  background: var(--tc-pill-bg);
  color: var(--tc-pill-text);
  padding: 0.125rem 0.625rem;
  font-family: var(--tc-mono);
  font-size: 0.75rem;
}

.tc-pill--form {
  background: var(--tc-pill-bg);
  padding: 0.25rem 0.75rem;
  font-family: inherit;
}

/* The header's Filing and Regime chips are buttons, not labels -- they are how a filer gets
   back to either decision from any screen. Styled as chips still: the affordance is the
   hover/focus state, not a button outline shouting for attention beside the page title. */
.tc-pill--action {
  border: 1px solid transparent;
  background: var(--tc-pill-bg);
  padding: 0.25rem 0.75rem;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.tc-pill--action:hover {
  border-color: var(--tc-accent);
  background: var(--tc-card);
}

.tc-badge {
  border-radius: 9999px;
  background: var(--tc-accent);
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: #fff;
}

/* Amber "not sure? here's how to check" callout. */
.tc-callout {
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--tc-marigold) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc-marigold) 45%, transparent);
  color: var(--tc-ink);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

/* Preserves the authored line breaks in a callout's text (e.g. a bulleted list built with
   "\n" in Python) instead of collapsing them to spaces like normal HTML text flow. */
.tc-note-preline {
  white-space: pre-line;
}

/* A reference table (e.g. "which fund category gets which rate") -- read-only, unlike
   .tc-entry-grid's editable rows. Wrapped in .tc-table-scroll so a table wider than its
   card scrolls horizontally on its own rather than pushing the whole page wide. */
.tc-table-scroll {
  overflow-x: auto;
}

.tc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tc-table caption {
  text-align: left;
  color: var(--tc-ink-muted);
  font-size: 0.8125rem;
  padding-bottom: 0.5rem;
}

.tc-table th,
.tc-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--tc-border);
  vertical-align: top;
}

.tc-table th {
  color: var(--tc-ink-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.tc-table td:first-child {
  font-weight: 500;
}

/* The admin tax-threshold editor: 75 fields are unreadable as one flat list, so they're
   grouped into named sections (see rules/threshold_overrides.THRESHOLD_FIELD_GROUPS). A
   section header is a <th scope="colgroup"> row rather than a second table, so the field/value
   columns stay aligned across every group without repeating the column header 8 times. */
.tc-table--fields .tc-table-section th {
  padding-top: 1.25rem;
  border-bottom: 1px solid var(--tc-border);
  color: var(--tc-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.tc-table--fields tbody:first-of-type .tc-table-section th {
  padding-top: 0.5rem;
}

/* A row header naming a specific field isn't a column heading -- it shouldn't shout in the
   same uppercase/muted style .tc-table th uses for "FIELD" / "VALUE" above it. Qualified with
   .tc-table th (0,2,1) rather than the bare class (0,1,0), which .tc-table th's own (0,1,1)
   would otherwise still win on specificity regardless of source order. */
.tc-table th.tc-table-field-label {
  color: var(--tc-ink);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}

/* ------------------------------------------------------ editable entries table ---- */
/*
 * One sale per row, one field per column, every cell an input. Inputs are borderless inside
 * their cell -- the row grid is the table's own borders, and a border-in-border reads as
 * clutter at this density.
 */
.tc-entry-table th {
  white-space: normal;
  min-width: 6rem;
}

.tc-entry-table td {
  vertical-align: middle;
}

.tc-entry-table input,
.tc-entry-table select {
  width: 100%;
  min-width: 5.5rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--tc-ink);
  padding: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
}

.tc-entry-table input:hover,
.tc-entry-table select:hover {
  border-color: var(--tc-border);
}

.tc-entry-table input[type="date"] {
  min-width: 8.5rem;
}

.tc-entry-table input.tc-input--flagged {
  border-color: var(--tc-marigold);
  background: color-mix(in srgb, var(--tc-marigold) 12%, transparent);
}

.tc-entry-computed {
  white-space: nowrap;
  color: var(--tc-ink-muted);
}

.tc-entry-total {
  font-weight: 600;
  white-space: nowrap;
}

.tc-entry-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tc-pill--term-stcg {
  background: color-mix(in srgb, var(--tc-marigold) 22%, transparent);
  color: var(--tc-marigold-text);
}

.tc-pill--term-ltcg {
  background: color-mix(in srgb, var(--tc-accent) 14%, transparent);
  color: var(--tc-accent);
}

/*
 * CSS-only term filtering, scoped per form so two tables on one page can't cross-filter.
 * Hidden rows are display:none INPUTS INCLUDED -- which still submit with the form, so a
 * filtered view can never lose an edit made before filtering.
 */
.tc-entry-form:has(.tc-entry-filter[value="stcg"]:checked) tbody tr[data-term="ltcg"],
.tc-entry-form:has(.tc-entry-filter[value="stcg"]:checked) tbody tr[data-term=""],
.tc-entry-form:has(.tc-entry-filter[value="ltcg"]:checked) tbody tr[data-term="stcg"],
.tc-entry-form:has(.tc-entry-filter[value="ltcg"]:checked) tbody tr[data-term=""] {
  display: none;
}

/* Neutral live-outcome card. */
.tc-callout-neutral {
  border-radius: 0.5rem;
  border-left: 3px solid var(--tc-marigold);
  background: var(--tc-card);
  border-top: 1px solid var(--tc-border);
  border-right: 1px solid var(--tc-border);
  border-bottom: 1px solid var(--tc-border);
  padding: 0.75rem 1rem;
}

.tc-option-card {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-border);
  background: var(--tc-card);
  color: var(--tc-ink);
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
}

.tc-option-card--selected {
  border-color: var(--tc-accent);
  background: color-mix(in srgb, var(--tc-accent) 10%, var(--tc-card));
}

.tc-option-card strong {
  display: block;
  font-weight: 500;
}

.tc-option-card .tc-option-help {
  display: block;
  font-size: 0.8125rem;
  color: var(--tc-ink-muted);
}

/* Compact picker for multiselect/select: a checkbox or radio card, several to a row on
   anything wider than a phone, instead of one full-width card per option stacked forever.
   auto-fill rather than a fixed column count -- it collapses to one column on its own once
   the container is too narrow, no media query needed. */
.tc-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem;
}

.tc-pick-card {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
  min-height: var(--tc-target-min);
  text-align: left;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-border);
  background: var(--tc-card);
  color: var(--tc-ink);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
}

.tc-pick-card--selected {
  border-color: var(--tc-accent);
  background: color-mix(in srgb, var(--tc-accent) 10%, var(--tc-card));
}

.tc-pick-card strong {
  display: block;
  font-weight: 500;
  line-height: 1.3;
}

.tc-pick-card .tc-option-help {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--tc-ink-muted);
}

/* The indicator itself: a checkbox (rounded square) for multiselect, a radio (circle) for
   select -- so which behaviour a group of cards has is visible before you touch one. */
.tc-pick-mark {
  flex: 0 0 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  border: 1.5px solid var(--tc-border);
  background: var(--tc-card);
  position: relative;
}

.tc-pick-mark--box {
  border-radius: 0.25rem;
}

.tc-pick-mark--circle {
  border-radius: 9999px;
}

.tc-pick-card--selected .tc-pick-mark {
  border-color: var(--tc-accent);
}

.tc-pick-mark--box::after {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 0.1875rem;
  width: 0.3125rem;
  height: 0.5625rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}

.tc-pick-card--selected .tc-pick-mark--box {
  background: var(--tc-accent);
}

.tc-pick-card--selected .tc-pick-mark--box::after {
  opacity: 1;
}

.tc-pick-mark--circle::after {
  content: "";
  position: absolute;
  inset: 0.25rem;
  border-radius: 9999px;
  background: var(--tc-accent);
  opacity: 0;
}

.tc-pick-card--selected .tc-pick-mark--circle::after {
  opacity: 1;
}

/* A short yes/no (or other 2-3 option) question doesn't need its own line for the prompt
   and another for the control -- put them on one row, and let it wrap on a narrow phone. */
/* .tc-field.tc-field--inline (not just .tc-field--inline): needs to outrank
   .tc-field's own flex-direction:column on specificity, not just cascade order, since
   .tc-field is redeclared after this in the stylesheet. */
.tc-field.tc-field--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
}

.tc-field--inline .tc-field-prompt {
  flex: 1 1 12rem;
}

.tc-field--inline .tc-row {
  flex: 0 0 auto;
}

/* The single-control questions -- a dropdown, an amount, a line of text -- sit beside their
   prompt rather than under it. Fixed basis so a column of them lines up down the page
   instead of each box taking the width its own prompt happens to leave; it still shrinks and
   then wraps under the prompt when the panel is too narrow to hold both. */
.tc-field--inline .tc-input,
.tc-field--inline .tc-select {
  flex: 0 1 18rem;
  min-width: 10rem;
}

/* Everything else inside an inline field spans the row and follows it: the help text, the
   "I'm not sure" callout, the auto-selected-schedules list. Without this they become flex
   items in the same row and end up beside the control, competing with it. */
.tc-field--inline .tc-muted,
.tc-field--inline > .tc-callout,
.tc-field--inline > .tc-thread-chip,
.tc-field--inline > ul {
  flex-basis: 100%;
  order: 1;
}

/* A persistent label above its input, for the few places that had only a placeholder. */
.tc-field-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tc-ink);
}

/* ---------------------------------------------------------------- fields ---- */

.tc-field {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-bottom: 1px solid var(--tc-border);
  padding-bottom: 1.5rem;
}

.tc-field:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.tc-field-prompt {
  margin: 0;
  font-size: 1rem;
  color: var(--tc-ink);
}

.tc-required {
  margin-left: 0.25rem;
  color: var(--tc-marigold);
}

.tc-thread-chip {
  width: fit-content;
  border-radius: 9999px;
  background: var(--tc-pill-bg);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--tc-pill-text);
}

/* ------------------------------------------------------ repeatable entries ---- */

.tc-entry-row,
.tc-entry-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-border);
  padding: 0.75rem;
}

.tc-entry-line {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--tc-border);
  background: color-mix(in srgb, var(--tc-accent) 4%, transparent);
  padding: 0.75rem;
}

.tc-entry-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--tc-border);
  padding-top: 0.75rem;
}

.tc-entry-index {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tc-ink-muted);
}

.tc-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.tc-entry-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--tc-ink-muted);
}

.tc-entry-label input,
.tc-entry-label select {
  border-radius: 0.375rem;
  border: 1px solid var(--tc-border);
  background: transparent;
  color: var(--tc-ink);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
  width: 100%;
}

.tc-entry-help {
  font-size: 0.6875rem;
  color: var(--tc-ink-muted);
}

.tc-entry-warning {
  color: var(--tc-marigold);
}

.tc-filled-in {
  color: var(--tc-accent);
}

.tc-entry-fill {
  border-top: 1px solid var(--tc-border);
  padding-top: 0.5rem;
}

.tc-fill-notes {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
}

/* ------------------------------------------------------------ company lookup ---- */

.tc-lookup {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tc-lookup-results {
  max-height: 18rem;
  overflow-y: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-border);
  background: var(--tc-card);
}

.tc-lookup-result {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border: none;
  border-bottom: 1px solid var(--tc-border);
  background: none;
  color: var(--tc-ink);
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.tc-lookup-result:last-child {
  border-bottom: none;
}

.tc-lookup-result:hover {
  background: color-mix(in srgb, var(--tc-accent) 8%, transparent);
}

/* ------------------------------------------------------------ regime compare ---- */

.tc-regime-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.tc-regime-card {
  border-radius: 0.375rem;
  border: 1px solid var(--tc-border);
  padding: 0.75rem;
}

.tc-regime-card--cheaper {
  border-color: var(--tc-accent);
}

.tc-regime-name {
  margin: 0;
  font-weight: 500;
  color: var(--tc-ink);
}

.tc-regime-amount {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.125rem;
  color: var(--tc-ink);
}

/* ---------------------------------------------------------------- misc ---- */

.tc-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tc-checklist-item {
  border-radius: 0.375rem;
  border: 1px solid var(--tc-border);
  padding: 0.75rem;
}

.tc-checklist-target {
  font-weight: 500;
  color: var(--tc-ink);
}

.tc-checklist-item .tc-pill {
  margin-left: 0.5rem;
}

.tc-review-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-border);
  padding: 1rem;
}

.tc-review-card p {
  margin: 0;
  color: var(--tc-ink);
}

.tc-panel {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-border);
  padding: 1rem;
  text-align: left;
}

.tc-panel h3 {
  margin: 0 0 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  color: var(--tc-ink);
}

.tc-panel p {
  margin: 0 0 0.5rem;
}

.tc-panel--dashed {
  border-style: dashed;
}

.tc-panel > summary {
  cursor: pointer;
  color: var(--tc-ink);
}

.tc-spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tc-estimate {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

.tc-footer-actions {
  border-top: 1px solid var(--tc-border);
  padding-top: 1rem;
}

/* -------------------------------------------------------------------- upload ---- */

/*
 * Name and hint on the left, controls on the right, so five slots take five rows rather than
 * fifteen. ``flex-wrap`` rather than a media query: the controls drop under the name only when
 * they genuinely stop fitting, which is the same behaviour at 320px and at 200% zoom.
 */
.tc-file-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-border);
  padding: 0.75rem 1rem;
}

/* ------------------------------------------------------ document conflicts ---- */
/*
 * Two documents disagreeing about a figure. Deliberately the loudest block on the Pre-Fill
 * screen: everything else there is informational, while this one can cost someone a TDS
 * credit if they scroll past it. Marigold rather than red -- nothing is broken and no action
 * is blocked; the filer is being told something they need to know before signing.
 */
.tc-conflicts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tc-marigold);
  border-left: 4px solid var(--tc-marigold);
  background: var(--tc-card);
  padding: 1rem 1.125rem;
}

.tc-conflicts-title {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--tc-marigold-text);
}

.tc-conflicts-lede {
  margin: -0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--tc-ink-muted);
}

.tc-conflict {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 1px solid var(--tc-border);
  padding-top: 0.75rem;
}

.tc-conflict-field {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tc-ink);
}

.tc-conflict-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-conflict-values li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.tc-conflict-doc {
  color: var(--tc-ink-muted);
}

.tc-conflict-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Struck through, not hidden: the point is that this figure existed and was not used. */
.tc-conflict-loser .tc-conflict-amount {
  color: var(--tc-ink-muted);
  text-decoration: line-through;
}

.tc-conflict-winner .tc-conflict-amount {
  color: var(--tc-ink);
}

.tc-conflict-tag {
  border-radius: 0.1875rem;
  background: var(--tc-pill-bg);
  padding: 0.0625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tc-pill-text);
}

.tc-conflict-winner .tc-conflict-tag {
  background: var(--tc-accent);
  color: #fff;
}

.tc-conflict-guidance {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--tc-ink);
}

/* Sections group the slots by who issues the document, so the screen answers "where do I get
   that?" rather than listing five names flat. */
.tc-file-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.tc-file-group-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-accent);
}

.tc-file-group-hint {
  margin: -0.25rem 0 0.125rem;
  font-size: 0.8125rem;
  color: var(--tc-ink-muted);
}

.tc-file-slot-info {
  display: flex;
  min-width: 9rem;
  flex: 1 1 14rem;
  align-items: flex-start;
  gap: 0.625rem;
}

.tc-file-slot-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.125rem;
}

/* Boxed rather than bare, so the row has a fixed visual anchor whatever the label length. */
.tc-file-icon {
  display: flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background: var(--tc-pill-bg);
  color: var(--tc-accent);
}

.tc-file-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* The format tag replaces the "PDF only · handled securely · deleted after we read it" that
   used to repeat on all five rows -- the privacy half is said once, properly, in the callout
   under the list, and the row keeps the one bit that is per-document. */
.tc-file-format {
  margin-left: 0.375rem;
  border-radius: 0.1875rem;
  background: var(--tc-pill-bg);
  padding: 0.0625rem 0.3125rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tc-pill-text);
  vertical-align: 0.0625rem;
}

.tc-file-slot-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 1 1 21rem;
}

.tc-file-name {
  font-weight: 500;
  color: var(--tc-ink);
  cursor: pointer;
}

/* "Already read" on a slot whose file has since been dropped. Accent-coloured because it is
   reassurance, not a warning: the upload worked, and this is the only trace of it left. */
.tc-file-already-read {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--tc-accent);
}

.tc-file-already-read-note {
  color: var(--tc-ink-muted);
}

/*
 * The native control is ~246px of intrinsic width ("Choose File" + "No file chosen"), which is
 * more than half the row on its own. It has to be allowed to shrink, or it pushes the password
 * box onto a second line and the row is back to being two lines tall.
 */
.tc-file-slot input[type="file"] {
  min-width: 0;
  flex: 1 1 8rem;
  max-width: 100%;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--tc-ink);
}

.tc-file-password {
  min-width: 0;
  flex: 0 1 10.5rem;
  font-size: 0.8125rem;
}

/*
 * ---------------------------------------------------------- password reveal ----
 *
 * The eye sits *inside* the box rather than beside it: the upload picker's row is already
 * file-input + password on one line, and a third control on that line pushed the row to two.
 * Absolute positioning keeps it out of the flex layout entirely, so the wrapper occupies
 * exactly the space the bare input used to.
 *
 * The input's right padding is what stops the typed password running under the button; the
 * centred variant pads both sides equally so the text stays centred rather than drifting
 * left by the width of the eye.
 */
.tc-password-field {
  position: relative;
  display: block;
  width: 100%;
  max-width: 28rem;
}

.tc-password-field .tc-input {
  width: 100%;
  max-width: none;
  padding-right: 2.5rem;
}

/* On the upload picker the wrapper takes over the flex sizing the input itself used to carry
   (see .tc-file-password above, which now only sets type size). The basis stays exactly what
   the bare input had: widening it to win back the room the eye takes pushes the box onto a
   second line below about 1100px, which is the two-line row the file-input rule above exists
   to prevent. The placeholder was shortened to fit instead. */
.tc-password-field--inline {
  min-width: 0;
  flex: 0 1 10.5rem;
}

.tc-password-field--centered .tc-input {
  padding-left: 2.5rem;
}

.tc-password-eye {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--tc-ink-muted);
  cursor: pointer;
}

.tc-password-eye:hover {
  color: var(--tc-ink);
}

/* The global ring is offset by 2px, which on a control this deep inside another one reads as
   a ring around the input's border instead of around the button. */
.tc-password-eye:focus-visible {
  outline-offset: 0;
}

.tc-eye-icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Pressed = the password is showing, so the icon gains the slash: the button now means
   "hide". One attribute drives both this and the announced state -- see
   partials/_password_input.html. */
.tc-eye-slash {
  display: none;
}

.tc-password-eye[aria-pressed="true"] .tc-eye-slash {
  display: inline;
}

.tc-upload-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid var(--tc-border);
  padding-top: 1rem;
}

.tc-error {
  color: #b3261e;
  font-size: 0.875rem;
}

@media (prefers-color-scheme: dark) {
  .tc-error {
    color: #f2b8b5;
  }
}

.tc-note {
  font-size: 0.75rem;
  color: var(--tc-ink-muted);
}

.tc-note--warn {
  color: var(--tc-marigold);
}

.tc-note--ok {
  color: var(--tc-accent);
}

.tc-htmx-indicator {
  display: none;
  font-size: 0.75rem;
  color: var(--tc-ink-muted);
}

.htmx-request .tc-htmx-indicator,
.htmx-request.tc-htmx-indicator {
  display: inline;
}

.tc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ home ---- */
/*
 * The landing page. Shares every token with the wizard so the two read as one product --
 * a marketing page in a different palette would be its own kind of lie about what you are
 * about to use.
 *
 * Widths are all percentage/max-width pairs rather than fixed pixels, and the grids collapse
 * by ``auto-fit`` rather than at hand-picked breakpoints, so the page reflows down to a
 * 320px viewport (and equivalently to 200% zoom) without a horizontal scrollbar.
 */
.tc-home {
  margin: 0 auto;
  display: flex;
  width: 70%;
  min-width: 320px;
  max-width: 1100px;
  flex-direction: column;
  gap: 3rem;
  padding: 1.5rem 1.5rem 3rem;
}

.tc-home-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.5rem 0 0.5rem;
}

.tc-home-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-marigold-text);
}

.tc-home-title {
  margin: 0;
  /* Scales with the viewport instead of stepping at a breakpoint, so the headline never
     wraps into three ragged lines on a phone. */
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.15;
  color: var(--tc-accent);
}

.tc-home-lede {
  margin: 0;
  max-width: 60ch;
  font-size: 1.0625rem;
  color: var(--tc-ink);
}

.tc-home-cta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  padding-top: 0.5rem;
}

.tc-home-btn {
  /* The one place on the site where the primary action should be unmissable. */
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  text-decoration: none;
}

/* The landing page's "which return are you filing?" cards. auto-fit rather than a fixed
   column count, matching the other home grids: four cards sit on one row on a desktop and
   collapse to one column on their own, with no breakpoint to keep in sync. */
/* A fixed 2x2, not auto-fit: four cards in two balanced rows (maintainer's call), instead
   of three across with "Not sure yet" orphaned alone on the second row. Collapses to one
   column on narrow screens. */
.tc-form-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 34rem) {
  .tc-form-picker {
    grid-template-columns: 1fr;
  }
}

.tc-form-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  min-height: var(--tc-target-min);
  border-radius: 0.5rem;
  border: 1px solid var(--tc-border);
  background: var(--tc-card);
  box-shadow: var(--tc-shadow-card);
  color: var(--tc-ink);
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.tc-form-card:hover {
  border-color: var(--tc-accent);
}

.tc-form-card strong {
  font-weight: 500;
  color: var(--tc-accent);
}

.tc-form-card-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.tc-form-card-subtitle {
  border-radius: 9999px;
  background: var(--tc-pill-bg);
  color: var(--tc-pill-text);
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
}

.tc-form-card-points {
  margin: 0.25rem 0 0;
  padding-left: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--tc-ink);
}

/* Small caps heading above each of a card's two lists -- "Income it covers" (what kind of
   money) and "Who can use it" (whether you're allowed to file it at all). Without the
   labels the two lists read as one long undifferentiated column. */
.tc-form-card-label {
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-ink-muted);
}

/* The hard eligibility gates. Checkmarked rather than bulleted, and on a tinted panel, so a
   reader scanning for "can I use this?" finds one block rather than parsing prose. */
.tc-form-card-rules {
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  list-style: none;
  border-radius: 0.375rem;
  background: var(--tc-pill-bg);
  font-size: 0.8125rem;
  color: var(--tc-ink);
}

.tc-form-card-rules li {
  display: flex;
  gap: 0.4375rem;
  align-items: baseline;
}

.tc-form-card-rules li::before {
  content: "✓";
  color: var(--tc-accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* The "not for you if" line -- the mistake filers actually make is picking a form too small
   for their facts, so this is the card's most load-bearing sentence and gets the amber
   warning colour rather than muted gray. */
.tc-form-card-notif {
  margin-top: 0.25rem;
  border-top: 1px solid var(--tc-border);
  padding-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--tc-marigold-text);
}

.tc-home-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.tc-home-trust li {
  border-radius: 9999px;
  background: var(--tc-pill-bg);
  color: var(--tc-pill-text);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

.tc-home-heading {
  margin: 0;
  font-size: 1.375rem;
  color: var(--tc-ink);
}

.tc-home-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.tc-home-step {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 3px solid var(--tc-marigold);
  padding-top: 0.75rem;
}

.tc-home-step-number {
  font-family: var(--tc-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tc-marigold-text);
}

.tc-home-step-title {
  margin: 0;
  font-size: 1rem;
  color: var(--tc-ink);
}

.tc-home-step-body {
  margin: 0;
  font-size: 0.875rem;
  color: var(--tc-ink-muted);
}

.tc-home-footer {
  border-top: 1px solid var(--tc-border);
  padding-top: 1rem;
  font-size: 0.75rem;
  color: var(--tc-ink-muted);
}

.tc-home-footer p {
  margin: 0;
  max-width: 60ch;
}

/* ------------------------------------------------------ document tabs ---- */
/*
 * CSS-only tabs for the extract-then-confirm screen -- no JavaScript. Which tab is checked
 * across the outerHTML swap every edit triggers is a server-echoed value (active_doc_tab, see
 * _upload_extracted.html), not client state the browser holds onto -- a plain radio group
 * turned out not to survive the swap reliably on its own. Panel visibility uses :has() scoped
 * to .tc-tabs rather than a sibling combinator: the radios are interleaved with their own
 * labels (so :checked/:focus-visible can style just that label via `+`), which means the
 * radios and the panels are not themselves direct siblings. One rule below per
 * DOCUMENT_TAB_ORDER entry in upload_flow.py -- that list is a small, fixed, code-level
 * constant, not user data, so hardcoding beats generalising for tabs that don't exist.
 */
.tc-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--tc-border);
  padding-bottom: 0.75rem;
}

.tc-tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tc-tab-label {
  display: inline-flex;
  align-items: center;
  min-height: var(--tc-target-min);
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid var(--tc-border);
  color: var(--tc-ink-muted);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}

.tc-tab-radio:checked + .tc-tab-label {
  border-color: var(--tc-accent);
  background: var(--tc-accent);
  color: #ffffff;
}

.tc-tab-radio:focus-visible + .tc-tab-label {
  outline: 3px solid var(--tc-accent);
  outline-offset: 2px;
}

/* "This tab still blocks Continue" count. Marigold, same needs-attention semantics as
   .tc-required's asterisk -- not the accent, which here means "selected". */
.tc-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--tc-marigold) 25%, transparent);
  color: var(--tc-marigold-text);
}

.tc-tab-radio:checked + .tc-tab-label .tc-tab-badge {
  background: rgba(255, 255, 255, 0.9);
  color: var(--tc-accent);
}

/* Sits directly above the disabled Continue, right-aligned with it. */
.tc-continue-hint {
  align-self: flex-end;
  text-align: right;
  margin: 0;
}

/* ------------------------------------- capital gains, consolidated ---- */

/* One row per asset category instead of one per sale. Amounts are tabular so the STCG and
   LTCG columns line up digit-for-digit down the table and against the total. */
.tc-cg-table {
  table-layout: fixed;
}

/* Column headings must not run into each other when the grid is tight. */
.tc-cg-table thead th {
  white-space: normal;
  overflow-wrap: break-word;
}

.tc-cg-table thead abbr {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

.tc-cg-table .tc-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* A right-aligned amount otherwise ends flush against the next column's text, reading as
     one run-together string ("₹1,11,497Slab ST"). */
  padding-right: 0.75rem;
}

/* The nested "view N sales" table is content, not part of the fixed outer grid -- it sizes
   to its own columns and scrolls inside the row if it has to. */
.tc-cg-detail-table {
  table-layout: auto;
}

.tc-cg-table tbody th {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.875rem;
  color: var(--tc-ink);
  white-space: normal;
}

.tc-cg-table tfoot th,
.tc-cg-table tfoot td {
  border-top: 2px solid var(--tc-border);
  font-weight: 600;
}

.tc-cg-rule {
  color: var(--tc-ink-muted);
  font-size: 0.8125rem;
}

/* One rule per line -- short-term above long-term. Each stays on its own line so the two
   rates can be compared down the column instead of read out of a run-on sentence. */
.tc-cg-rule-line {
  display: block;
}

.tc-cg-rule-line + .tc-cg-rule-line {
  margin-top: 0.1875rem;
}

/* A category with no long-term leg at all. Stated, not blank -- an empty line would read as
   a missing value rather than as "this cannot happen". */
.tc-cg-rule-line--none {
  opacity: 0.7;
  font-style: italic;
}

.tc-cg-rule-line[title] {
  cursor: help;
}

/* A table still waiting on an answer -- it is what holds Continue, so it reads as pending
   rather than as a zero. */
.tc-cg-row--pending tbody th,
.tc-cg-row--pending th {
  color: var(--tc-ink-muted);
}

.tc-cg-pending-note {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--tc-marigold-text);
}

.tc-cg-warn {
  border-left: 3px solid var(--tc-marigold);
  padding-left: 0.75rem;
}

/* The per-row "view N sales" expander, and the manual add form's own disclosure. Both are
   native <details>, so they need no JS and survive an htmx swap by simply re-rendering
   closed -- an acceptable trade for having no client-side state to keep in sync. */
.tc-cg-detail {
  margin-top: 0.375rem;
}

.tc-cg-detail > summary,
.tc-cg-add > summary {
  cursor: pointer;
}

.tc-cg-detail > summary {
  font-size: 0.75rem;
  color: var(--tc-accent);
}

.tc-cg-detail-table {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

.tc-cg-add > summary {
  width: fit-content;
  list-style: none;
}

.tc-cg-add > summary::-webkit-details-marker {
  display: none;
}

.tc-cg-add-form {
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--tc-border);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tc-cg-add-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.tc-cg-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--tc-ink-muted);
  min-width: 0;
}

.tc-cg-field--wide {
  grid-column: 1 / -1;
}

/* Schedule 112A's grandfathering block: only a pre-Feb-2018 holding needs it, so it stays
   folded away rather than adding three fields every filer has to read past and skip. */
.tc-cg-grandfather > summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--tc-accent);
}

.tc-cg-grandfather .tc-cg-add-grid {
  margin-top: 0.75rem;
}

.tc-tab-panel.tc-stack {
  display: none;
}

/* Topic sub-tabs inside a document's extract-then-confirm panel. Generic selectors rather
   than one rule per tab id: each sub-tab is its own radio+label+panel wrapper, so
   `:has(:checked)` needs no knowledge of which topics exist. `display: contents` on the
   wrapper lets the labels form one horizontal pill row while every panel drops below it
   (labels order 0, panels order 1, full width). */
.tc-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tc-subtab {
  display: contents;
}

.tc-subtab .tc-subtab-panel {
  order: 1;
  width: 100%;
  display: none;
}

/* Keyed to the sub-tab's OWN radio (distinct class, direct child) -- the entries tables
   inside a panel carry their own checked tc-tab-radio filter pills, and a descendant match
   on the bare class made every panel containing one show itself regardless of the active
   sub-tab. That was the "every tab shows all transactions" bug. */
.tc-subtab:has(> .tc-subtab-radio:checked) .tc-subtab-panel,
.tc-subtab .tc-subtab-panel--only {
  display: flex;
}

/* One tab per employer / portal document / broker, inside the category the sidebar picked.
   Underline tabs rather than pills: they sit directly above the panel they switch, and a
   second row of pills under the sidebar's own would read as competing navigation. */
.tc-source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  border-bottom: 1px solid var(--tc-border);
}

.tc-source-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 0.375rem 0.125rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--tc-ink-muted);
  cursor: pointer;
  min-height: var(--tc-target-min);
}

.tc-source-tab:hover {
  color: var(--tc-ink);
}

.tc-source-tab--active {
  border-bottom-color: var(--tc-accent);
  color: var(--tc-accent);
  font-weight: 600;
}

/* A pulled figure with no question behind it -- an employer's TAN, or an amount the wizard
   computes for itself. Shown at input weight so it reads as a value, not as a caption, but
   without the box that would invite an edit that goes nowhere. */
.tc-readonly-value {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tc-ink);
}

/* The "what we'll use" summary: the merged view, where provenance matters more than editing. */
.tc-summary-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tc-summary-flag {
  display: inline-block;
  margin-left: 0.375rem;
  border-radius: 0.1875rem;
  background: var(--tc-pill-bg);
  padding: 0.0625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tc-pill-text);
}

.tc-summary-flag--warn {
  background: var(--tc-marigold);
  color: #1a1c1f;
}

/* Start over. Below a divider and in the note colour, not the accent: it is deliberately not
   competing with navigation, and it is the only control in the sidebar that destroys work. */
.tc-sidebar-footer {
  margin-top: 0.5rem;
  border-top: 1px solid var(--tc-border);
  padding-top: 0.75rem;
}

.tc-sidebar-clear {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  padding: 0.5rem 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--tc-ink-muted);
  cursor: pointer;
  min-height: var(--tc-target-min);
}

.tc-sidebar-clear:hover {
  background: var(--tc-pill-bg);
  color: var(--tc-marigold-text);
}


/* The summary table never scrolls sideways: fixed layout so no cell can force the table
   wider than the page, and wrapping everywhere -- a figure hidden behind a horizontal
   scrollbar is a figure that goes unchecked on the one screen that exists to be checked. */
.tc-table--summary {
  width: 100%;
  table-layout: fixed;
}

.tc-table--summary th,
.tc-table--summary td {
  overflow-wrap: break-word;
  vertical-align: top;
}

/* Amounts stay unbroken -- they are short -- but long identifiers (an email address) may
   wrap rather than push the column. */
.tc-table--summary .tc-summary-value {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Flags sit under the source name rather than extending its line: the From column holds a
   trimmed employer name plus up to two flags, and inline they wrapped a row to seven lines. */
.tc-table--summary .tc-summary-flag {
  display: block;
  width: fit-content;
  margin: 0.25rem 0 0;
}

/* Row headers wrap: the base .tc-table th nowrap is for one-line column headings, and under
   a fixed layout a long row label ("Total proceeds from selling securities...") must fold
   inside its column rather than run under the next one. */
.tc-table--summary tbody th {
  white-space: normal;
  font-weight: 500;
  text-transform: none;
  font-size: 0.875rem;
  color: var(--tc-ink);
  letter-spacing: normal;
}

/*
 * ------------------------------------------------------------------ accounts ----
 *
 * An account is an offer ("keep this"), not the way in. The strip used to say so by being
 * plain links -- which turned out to say it too quietly to be found at all, so it is buttons
 * now, but compact ones, with Sign in secondary and the guest path stated in words directly
 * under the form picker. The thing being protected is that nobody reads this page as a wall
 * in front of the wizard; a small button up in the corner does not do that, and an invisible
 * link helped nobody.
 */
/* A button sized for a nav strip rather than for a form's primary action. The .tc-btn
   min-height is a WCAG target size for something you tap once and commit; up here two of them
   sit beside a line of text, and full height made the strip read as the page's main event. */
.tc-btn-compact {
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
}

/* Each sign-out is its own <form>; without this the form's block box breaks the strip's row. */
.tc-account-strip form {
  display: contents;
}

/* The guest note earns a little emphasis: it is the answer to "do I have to sign up?", which
   is the question the two buttons above it inevitably raise. */
.tc-home-guest {
  max-width: 60ch;
}

.tc-account-strip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.tc-return-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tc-return-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--tc-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

/* The label can be a sentence now that returns carry names, and a long one was wrapping the
   whole row: the text is a flex item sized to its content, so it pushed Open/Delete onto a
   second line and every row ended up a different height. Letting the text shrink (which
   `min-width: 0` is what actually permits) keeps the actions on the right at any label length. */
.tc-return-row > .tc-stack-tight {
  flex: 1 1 12rem;
  min-width: 0;
}

.tc-return-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Each button is its own <form> (they post to different routes), and a form wrapping a button
   is a block box sized to it -- so with buttons of different heights, Open and Delete sat on
   different baselines. `display: contents` drops the form boxes out of layout and makes the
   buttons themselves the flex items, which is what the alignment above was written for. */
.tc-return-actions form {
  display: contents;
}

/* .tc-btn-quiet carries align-self: flex-start for the places it sits above a block of text
   ("< Back" over a card). Beside a full-height button it has to sit on the same centre line
   instead, or Delete rides up against the top of the row. */
.tc-return-actions .tc-btn-quiet {
  align-self: center;
}

/*
 * ------------------------------------------------------- the form's own view ----
 *
 * A form, not a report: the numbering column is fixed-width so the line numbers form a
 * readable ruler down the left, and the amounts are right-aligned and monospaced so digits
 * line up for the eye that is comparing them against the portal's own screen.
 */
.tc-form-section {
  margin-top: 1.25rem;
}

.tc-form-section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

.tc-form-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tc-form-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--tc-border);
  vertical-align: top;
}

.tc-form-number {
  width: 3.5rem;
  color: var(--tc-ink-muted);
  font-family: var(--tc-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.tc-form-value {
  text-align: right;
  /* Wraps, deliberately. This column holds two very different things: amounts, which have no
     spaces and so stay on one line whatever this says, and the spelled-out codes ("139(1) --
     on or before the due date"), which are a sentence. `nowrap` forced the whole table wider
     than the panel holding it -- invisible while the Result screen was full-width, plain the
     moment it moved beside the sidebar. */
  white-space: normal;
}

/* One indent step per level, matching the form's own sub-item lettering (3i under 3, ai
   under 4a). */
.tc-form-label--level1 {
  padding-left: 1.25rem;
}

.tc-form-label--level2 {
  padding-left: 2.5rem;
}

/* The lines the form itself totals -- what a filer scans for. */
.tc-form-row--total td {
  font-weight: 600;
  border-bottom-color: var(--tc-ink-muted);
}


/* ---------------------------------------------------------------------------
 * ITR Validation
 *
 * One screen with three stacked jobs: a verdict per check, the item-by-item walk of the
 * notified form, and the filled form underneath. The visual weight goes to the middle one --
 * that's the part someone acts on -- while the four check tiles stay small enough to read as
 * a summary rather than compete with it.
 * ------------------------------------------------------------------------ */

.tc-validation {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tc-validation-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.tc-validation-head h2 {
  margin: 0 0 0.25rem;
  font-size: 1.375rem;
}

.tc-validation-head p {
  margin: 0;
  max-width: 60ch;
}

.tc-validation-score {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* A count, a state, a word. Never colour alone -- each variant below carries its own text. */
.tc-status-chip {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--tc-pill-bg);
  color: var(--tc-pill-text);
}

.tc-status-chip--ok {
  background: color-mix(in srgb, var(--tc-success) 12%, transparent);
  color: var(--tc-success);
}

.tc-status-chip--blocker {
  background: color-mix(in srgb, var(--tc-danger) 12%, transparent);
  color: var(--tc-danger);
}

.tc-status-chip--advisory {
  background: color-mix(in srgb, var(--tc-marigold) 16%, transparent);
  color: var(--tc-marigold-text);
}

/* The four checks. Auto-fit rather than a fixed four-up: at the widths this app is used at
   the sidebar already takes its share, and two rows of two beats four squeezed columns. */
.tc-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-check {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--tc-border);
  border-radius: 12px;
  background: var(--tc-card);
  box-shadow: var(--tc-shadow-card);
}

.tc-check > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.tc-check-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--tc-pill-bg);
  color: var(--tc-pill-text);
}

.tc-check--ok .tc-check-mark {
  background: color-mix(in srgb, var(--tc-success) 14%, transparent);
  color: var(--tc-success);
}

.tc-check--fail .tc-check-mark {
  background: color-mix(in srgb, var(--tc-danger) 14%, transparent);
  color: var(--tc-danger);
}

.tc-check--fail {
  border-color: color-mix(in srgb, var(--tc-danger) 40%, var(--tc-border));
}

/* Findings from the builder, the schema and the eligibility rules. */
.tc-finding-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.tc-finding {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--tc-border);
  border-left-width: 3px;
  border-radius: 8px;
}

.tc-finding p {
  margin: 0.375rem 0 0;
}

.tc-finding--blocker {
  border-left-color: var(--tc-danger);
}

.tc-finding--defect-risk {
  border-left-color: var(--tc-marigold);
}

.tc-finding--advisory {
  border-left-color: var(--tc-accent);
}

.tc-finding-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.tc-pill--blocker {
  background: color-mix(in srgb, var(--tc-danger) 12%, transparent);
  color: var(--tc-danger);
}

.tc-pill--defect-risk {
  background: color-mix(in srgb, var(--tc-marigold) 16%, transparent);
  color: var(--tc-marigold-text);
}

.tc-finding-detail {
  margin-top: 0.375rem;
}

.tc-finding-detail summary {
  cursor: pointer;
}

/* The notified-form walk. */
.tc-req-section h3 {
  align-items: center;
  gap: 0.75rem;
}

.tc-req-list {
  display: flex;
  flex-direction: column;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.tc-req {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--tc-border);
}

.tc-req:last-child {
  border-bottom: none;
}

.tc-req-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
}

/* Fixed width so the form's own item numbers line up down the left edge -- this column is
   what a filer matches against the portal's field labels, so it has to scan as a column. */
.tc-req-ref {
  flex-shrink: 0;
  width: 6rem;
  font-size: 0.8125rem;
  color: var(--tc-ink-muted);
}

.tc-req-label {
  flex: 1 1 16rem;
}

.tc-req-value {
  color: var(--tc-ink-muted);
  font-size: 0.875rem;
  text-align: right;
}

/* An answered row recedes; a missing one does not. The whole list is scanned for what is
   still outstanding, so everything else gets out of the way. */
.tc-req--answered .tc-req-label {
  color: var(--tc-ink-muted);
}

.tc-req--missing {
  background: color-mix(in srgb, var(--tc-danger) 4%, transparent);
  margin: 0 -0.5rem;
  padding: 0.625rem 0.5rem;
  border-radius: 6px;
}

.tc-req-input {
  margin-top: 0.5rem;
  padding-left: 6.75rem;
}

/* The inline input is one field lifted out of its page, so it drops the vertical rhythm that
   page gives it and sits tight under the row it belongs to. */
.tc-req-input .tc-field {
  margin: 0;
}

.tc-req-input .tc-field-prompt {
  font-size: 0.875rem;
  color: var(--tc-ink-muted);
}

/* Schedule TDS is six columns wide. It scrolls inside itself rather than widening the page. */
.tc-form-table-scroll {
  overflow-x: auto;
}

.tc-form-table--grid th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tc-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-right: 1rem;
}

.tc-form-table--grid td {
  padding-right: 1rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .tc-req-ref {
    width: auto;
  }

  .tc-req-input {
    padding-left: 0;
  }
}


/* ---------------------------------------------------------------------------
 * The printed ITR-1, drawn as the Gazette prints it
 *
 * Scoped entirely under .tc-pf and deliberately NOT reusing this app's panel/table styling:
 * it is imitating a government form, not this product, so it wants hairline rules, tight
 * padding and a density that would look wrong anywhere else here.
 *
 * Still theme-aware. A facsimile that hard-coded black-on-white would be a white rectangle
 * burned into a dark page -- so the rules and bands are drawn from the same tokens as the
 * rest of the app, and the form reads as a form in either theme.
 * ------------------------------------------------------------------------ */

.tc-pf {
  --tc-pf-rule: color-mix(in srgb, var(--tc-ink) 38%, transparent);
  --tc-pf-band: color-mix(in srgb, var(--tc-ink) 10%, transparent);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--tc-ink);
  /* The schedules are genuinely wider than a sidebar-flanked column at small widths. Scrolls
     inside itself rather than pushing the page sideways. */
  overflow-x: auto;
}

.tc-pf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
  /* A tax form has a minimum legible width, and this one sits in a column that is ~310px
     once the sidebar has taken its share of a narrow window. Without a floor, `table-layout:
     fixed` hands the fixed columns their rem widths and gives whatever is left -- which was
     nothing -- to the rest: the masthead title collapsed to zero and set "INDIAN INCOME TAX
     RETURN" one letter per line, 2000px tall. The floor plus .tc-pf's `overflow-x: auto`
     makes it scroll instead, which is the right answer for a document you are transcribing. */
  min-width: 34rem;
}

.tc-pf-table td,
.tc-pf-table th {
  border: 1px solid var(--tc-pf-rule);
  padding: 0.25rem 0.375rem;
  vertical-align: top;
  text-align: left;
  font-weight: 400;
  overflow-wrap: break-word;
}

/* A printed form's own labels are bold; its filled-in values are not. Keeping that around
   makes the difference between "what the form asks" and "what we answered" readable at a
   glance, which is the entire question this page exists to answer. */
.tc-pf-lbl {
  font-weight: 600;
}

.tc-pf-val {
  font-family: var(--tc-mono);
  font-weight: 400;
}

/* A schedule drawn on the department's measured 24-column grid. The inset tables inside a
   numbered row are more rows, not a box inside a box, so they are set apart by weight and a
   lighter rule rather than by a border of their own. */
.tc-pf-measured .tc-pf-inset-head th,
.tc-pf-measured .tc-pf-inset-head td {
  font-weight: 400;
  font-size: 0.6875rem;
}

.tc-pf-measured .tc-pf-inset td,
.tc-pf-measured .tc-pf-inset th {
  font-size: 0.6875rem;
}

/* The acknowledgement line the department prints above the masthead on a filed return.
   Four cells across, label then value, twice -- it is a header strip rather than a table of
   data, so it takes no border of its own beyond the panel's. */
.tc-pf-ack th,
.tc-pf-ack td {
  font-size: 0.6875rem;
}

.tc-pf-field {
  /* Part A's own cell: the department prints a field's label and its value in one box, the
     label above the value, not as two rows with a rule between them. The filed form's spacing
     is what settles it -- 19 units from a label's baseline to its value's, and 25 to 29 from
     that value to the next label, so the pair is tighter than the gap between pairs. */
  vertical-align: top;
}

.tc-pf-field-lbl {
  display: block;
  font-weight: 600;
}

.tc-pf-field-val {
  display: block;
  min-height: 1.1em;
  font-family: var(--tc-mono);
  font-weight: 400;
}

.tc-pf-amt {
  font-family: var(--tc-mono);
  text-align: right;
  white-space: nowrap;
  width: 7rem;
}

.tc-pf-ref {
  width: 3rem;
  font-weight: 600;
  text-align: center;
}

/* One indent step per level of the form's own lettering -- bi under 1b, iiA under 2aii.
   Part A-BS goes four deep, and read flat its ninety lines are unnavigable. The classes were
   already being emitted by the line macro with nothing behind them. */
.tc-pf-label--level1 {
  padding-left: 1.25rem;
}

.tc-pf-label--level2 {
  padding-left: 2.5rem;
}

.tc-pf-label--level3 {
  padding-left: 3.75rem;
}

/* A group name the form prints without a box: it spans the amount column rather than drawing
   an empty one, and is set apart so the eye can find the structure inside a long schedule. */
.tc-pf-subhead td {
  font-weight: 700;
  background: color-mix(in srgb, var(--tc-ink) 3%, transparent);
}

.tc-pf-fine {
  display: block;
  font-size: 0.6875rem;
  color: var(--tc-ink-muted);
  font-weight: 400;
}

/* The same class is used on whole rows -- the department's own footnotes, which sit in a cell
   spanning the table. `display: block` takes a cell out of the table's layout, so `colspan`
   stopped applying: the note collapsed into the width of column one and left a page-tall band
   of white beside it. Only the block-ness is undone here; the size and colour are the point. */
td.tc-pf-fine,
th.tc-pf-fine {
  display: table-cell;
}

.tc-pf-note {
  color: var(--tc-ink-muted);
  font-style: italic;
}

/* --- the masthead --- */

.tc-pf-masthead td {
  vertical-align: middle;
}

.tc-pf-form-word {
  width: 6%;
  text-align: center;
}

/* The Gazette prints "FORM" sideways up the left edge of the masthead. */
.tc-pf-form-word span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.tc-pf-form-name {
  width: 18%;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.tc-pf-title {
  text-align: center;
}

.tc-pf-title strong {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.tc-pf-ay {
  width: 26%;
  text-align: center;
}

.tc-pf-ay strong {
  display: block;
  margin-bottom: 0.25rem;
}

/* --- section bands --- */

.tc-pf-band {
  border: 1px solid var(--tc-pf-rule);
  border-bottom: none;
  background: var(--tc-pf-band);
  padding: 0.3125rem 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 0.75rem;
}

.tc-pf-band-note {
  float: right;
  font-weight: 400;
  font-style: italic;
}

.tc-pf-subband {
  border: 1px solid var(--tc-pf-rule);
  border-bottom: none;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
}

.tc-pf-centered {
  text-align: center;
  letter-spacing: 0.1em;
}

/* --- character-per-box rows (PAN, Aadhaar, dates, the assessment year) --- */

/* Wraps rather than overflowing. A ten-box PAN or a twelve-box Aadhaar is wider than the
   column the printed form gives it once this is rendered at screen widths, and an inline-flex
   row that cannot wrap simply runs out through the cell wall and over the next column. */
.tc-pf-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
}

.tc-pf-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1.25rem;
  border: 1px solid var(--tc-pf-rule);
  font-family: var(--tc-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* The D D M M Y Y Y Y strip above the date boxes. Built from the same box geometry rather
   than letter-spaced text, so the letters sit over the boxes they label at any width. */
.tc-pf-datehead {
  margin-bottom: 1px;
}

.tc-pf-box--head {
  border-color: transparent;
  height: auto;
  font-size: 0.625rem;
  color: var(--tc-ink-muted);
}

/* --- tick boxes --- */

.tc-pf-tick {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin: 0 0.5rem 0.1875rem 0;
  max-width: 100%;
}

.tc-pf-tickbox {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.0625rem;
  border: 1px solid var(--tc-pf-rule);
  font-size: 0.6875rem;
  line-height: 1;
}

/* The tick is never the only cue: the visually-hidden "(ticked)" in the markup carries it for
   a screen reader, and the weight change carries it for anyone who cannot see the glyph. */
.tc-pf-tick--on {
  font-weight: 700;
}

.tc-pf-tick--on .tc-pf-tickbox {
  border-color: var(--tc-ink);
  background: color-mix(in srgb, var(--tc-accent) 14%, transparent);
  color: var(--tc-accent);
}

/* --- the vertical rails down Part B --- */

.tc-pf-rail {
  width: 1.5rem;
  text-align: center;
  vertical-align: middle;
  background: var(--tc-pf-band);
}

.tc-pf-rail span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tc-pf-total td,
.tc-pf-total th {
  font-weight: 700;
  background: color-mix(in srgb, var(--tc-ink) 5%, transparent);
}

.tc-pf-spacer {
  height: 0;
  padding: 0;
  border: none;
}

/* --- Part A's four-column grid, and Part B's seven --- */

/* Part A alternates a row of labels with a row of values, so a label is a heading for the cell
   below it rather than beside it: left-aligned and normal weight, as the department prints it. */
.tc-pf-parta th.tc-pf-lbl {
  font-weight: 400;
  white-space: normal;
  vertical-align: top;
}

/* Part B's grid is measured, so it must not be re-proportioned by its content: `fixed` makes
   the colgroup binding rather than advisory, which is what keeps a sub-item's amount one
   column left of its parent's. */
.tc-pf-partb {
  table-layout: fixed;
}

.tc-pf-partb th.tc-pf-lbl {
  font-weight: 400;
  white-space: normal;
}

/* A reference is one token -- "ia", "iva", "B3" -- and breaking it is worse than crowding the
   label beside it. The department's own reference column is 4% of a 1200pt page, which is 50pt
   and comfortable; the same 4% of the pane this page sits in is half that, and "iva" came out
   as "iv" over "a". Kept unbreakable, and the column widened enough that it does not have to
   overflow to stay on one line. */
.tc-pf-partb .tc-pf-ref {
  width: auto;
  white-space: nowrap;
}

/* A table nested in a cell of another -- B1(ii)'s exempt allowances, B3's natures of income,
   the quarterly dividend split, Schedule 80D's insurers. The department draws these as rows
   continuous with the block around them; this drew them as a box inside a box, which is what
   the owner spotted on 6 September.

   Two causes, and the first is why the second was invisible. `.tc-pf-nested { padding: 0 }`
   loses to `.tc-pf-table td` on specificity -- one class against a class and an element -- so
   the padding was never removed and the inner table sat inset by 6px with a gap all round.
   Qualified here so it actually applies. Then the border goes too: the inner table's own cells
   already draw a complete 1px outline, and the parent cell's border sat outside it as a second
   line. Separate tables do not collapse their borders together, so one of the two has to go. */
.tc-pf-table td.tc-pf-nested {
  padding: 0;
  border: 0;
}

.tc-pf-nested-title {
  padding: 0.25rem 0.5rem;
  font-weight: 600;
}

/* --- Part C's deduction table --- */

/* The section descriptions are long sentences, not labels, so this column wraps and the row
   grows. That is how the notified form prints them; abbreviating to "80C" is what the old
   chip grid did, and it is what made the page unusable for checking against paper. */
.tc-pf-partc th.tc-pf-lbl {
  font-weight: 400;
  white-space: normal;
}

/* The department's own footnotes -- under the house-property total, under the bank-account
   table. Outside the ruled boxes, because that is where the form puts them. */
.tc-pf-notes {
  padding: 0.375rem 0.5rem;
  font-size: 0.6875rem;
}

.tc-pf-notes p,
.tc-pf-notes ol {
  margin: 0.25rem 0;
}

.tc-pf-notes ol {
  padding-left: 1.5rem;
}

/* A heading for one lettered part inside a schedule -- 80G's A/B/C/D. Lighter than the
   schedule's own band so the four parts read as belonging to it. */
.tc-pf-subband--minor {
  font-weight: 400;
  font-size: 0.6875rem;
}

/* The (1)(2)(3)(4)(5) strip under the exempt-income headings -- the form numbers its columns
   and then refers to them by number in its instructions. */
.tc-pf-colnums th {
  font-weight: 400;
  text-align: center;
  font-size: 0.6875rem;
}

/* --- Part D and the schedule grids --- */

.tc-pf-partc,
.tc-pf-partd,
.tc-pf-grid {
  table-layout: auto;
}

.tc-pf-grid thead th {
  background: var(--tc-pf-band);
  font-weight: 600;
  font-size: 0.6875rem;
  vertical-align: bottom;
}

/* --- verification --- */

.tc-pf-stamp {
  width: 10rem;
  font-size: 0.6875rem;
  color: var(--tc-ink-muted);
  height: 5rem;
}

.tc-pf-verification {
  line-height: 1.6;
}

/* The declaration, then Place, then Date -- three blocks in one cell, as the filed form sets
   them. `.tc-pf-signline` laid Place, Date and Signature out in a row beside each other; the
   rendered form has no Signature field and puts the other two on lines of their own. */
.tc-pf-verification p {
  margin: 0 0 0.5rem;
}

.tc-pf-verification p:last-child {
  margin-bottom: 0;
}

.tc-pf-signline {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

/* --- boxes this file does not fill --- */
/*
 * Hatched rather than merely empty. An empty cell on a form reads as "nil"; these are not nil,
 * they are "nothing from us goes here", and the legend at the foot of the page names each one.
 * The hatch is drawn from the ink token so it survives the dark theme, and it is paired with
 * a written legend so the distinction never rests on the pattern alone.
 */
.tc-pf-blank {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    color-mix(in srgb, var(--tc-ink) 9%, transparent) 4px,
    color-mix(in srgb, var(--tc-ink) 9%, transparent) 8px
  );
}

.tc-pf-blank-inline {
  display: inline-block;
  min-width: 6rem;
  border-bottom: 1px solid var(--tc-pf-rule);
}

.tc-pf-legend {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--tc-border);
  border-radius: 6px;
  font-size: 0.75rem;
}

.tc-pf-legend p {
  margin: 0 0 0.5rem;
}

.tc-pf-legend ul {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}

.tc-pf-legend li {
  margin-bottom: 0.25rem;
}

/* The portal's Select Schedule screen, mirrored so a filer knows what is coming.
   Laid out as a list of rows rather than a table: it is read down the left edge while
   ticking boxes on another screen, so the schedule name wants to be the thing the eye
   lands on, with the group as a quiet prefix and the status as a trailing tag. */
.tc-pf-portal-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding-left: 0;
}

.tc-pf-portal-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.tc-pf-portal-group {
  flex: 0 0 4.5rem;
  color: var(--tc-muted);
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.tc-pf-portal-name {
  font-weight: 600;
}

.tc-pf-portal-ok,
.tc-pf-portal-gap {
  font-size: 0.7rem;
  padding: 0 0.35rem;
  border-radius: 3px;
}

.tc-pf-portal-ok {
  color: var(--tc-success);
  border: 1px solid color-mix(in srgb, var(--tc-success) 40%, transparent);
}

.tc-pf-portal-gap {
  color: var(--tc-danger);
  border: 1px solid color-mix(in srgb, var(--tc-danger) 40%, transparent);
}

.tc-pf-legend-swatch {
  display: inline-block;
  width: 1.25rem;
  height: 0.875rem;
  vertical-align: -1px;
  margin-right: 0.25rem;
  border: 1px solid var(--tc-pf-rule);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    color-mix(in srgb, var(--tc-ink) 9%, transparent) 4px,
    color-mix(in srgb, var(--tc-ink) 9%, transparent) 8px
  );
}

/* Printing this page is a real thing to want: it is a filled tax form. Everything that is
   chrome around it goes away, and the form keeps its own rules. */
/* Grid schedules (CYLA and its kind): a matrix of head against loss-type, drawn as the form
   draws it. The column headers are long sentences on paper too, so they wrap rather than
   forcing a horizontal scroll on the whole page -- only the table scrolls. */
.tc-pf-scroll {
  overflow-x: auto;
}

.tc-pf-grid {
  min-width: 46rem;
}

.tc-pf-grid th {
  vertical-align: bottom;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 0.25rem 0.3rem;
  border: 1px solid var(--tc-pf-rule);
}

.tc-pf-grid-no {
  width: 3rem;
}

.tc-pf-grid-head {
  width: 30%;
  text-align: left;
}

.tc-pf-grid-num {
  text-align: center;
  font-style: italic;
}

/* The form's own shaded cells -- an intersection that cannot exist, which is not a zero. */
.tc-pf-shaded {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    color-mix(in srgb, var(--tc-ink) 12%, transparent) 3px,
    color-mix(in srgb, var(--tc-ink) 12%, transparent) 6px
  );
}

/* ITR-2's Schedules FSI, TR and FA carry column widths measured off the filed form, as a
   colgroup. `.tc-pf-grid` lets content size the columns, which would undo the measurement, so
   these tables alone go back to fixed layout. Two classes, so it wins wherever it sits. */
.tc-pf-grid.tc-pf-ruled {
  table-layout: fixed;
}

/* The print bar above a printed form. Sits outside .tc-pf so it is not mistaken for part
   of the form itself, and disappears when printing along with every other button. */
.tc-pf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.tc-pf-toolbar-hint {
  font-size: 0.75rem;
  color: var(--tc-muted);
}

/* --- what comes out of "Download PDF" ---------------------------------------
   The button opens the browser's print dialog and the filer picks "Save as PDF", so these
   rules ARE the PDF: whatever is visible here is what lands in the file. The department's own
   ITR-1 is A4 portrait (595x842pt, measured off a filed one), so this matches it rather than
   guessing from the viewport. */

@page {
  size: A4 portrait;
  margin: 10mm;
}

@media print {
  .tc-header,
  .tc-sidebar,
  .tc-footer-actions,
  .tc-btn,
  .tc-btn-link,
  .tc-btn-quiet,
  .tc-pf-toolbar {
    display: none !important;
  }

  /* The form and nothing else. The result screen carries an income summary, the form-choice
     card and the JSON block beside it, and a PDF of "your ITR-1" that opens on a total and a
     download link is not the document anyone asked for. Everything but the panel holding the
     facsimile goes, and that panel's own heading and intro go with it -- they introduce the
     form to someone on a screen, and the file starts at the form's own masthead. */
  .tc-panel:not(.tc-printable) {
    display: none !important;
  }

  .tc-printable {
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
  }

  .tc-printable > h3,
  .tc-printable > p {
    display: none !important;
  }

  .tc-layout {
    display: block;
  }

  .tc-shell {
    width: 100%;
    padding: 0;
  }

  .tc-pf {
    overflow-x: visible;
    font-size: 8pt;
  }

  /* The 34rem floor exists so a narrow on-screen column scrolls rather than collapsing. Paper
     has no such column and no scrollbar, so on paper the floor is what would push the wide
     schedules off the right edge. */
  .tc-pf-table {
    min-width: 0;
  }

  /* Schedule 80G's thirteen columns and Schedule TDS3's nine only fit A4 portrait small -- which
     is how the department fits them too. */
  .tc-pf-grid {
    font-size: 6pt;
  }

  /* A row split across a page break loses the figure from its label, and a band stranded at the
     foot of a page announces a section that starts overleaf. */
  .tc-pf-table tr,
  .tc-pf-nested {
    page-break-inside: avoid;
  }

  .tc-pf-band,
  .tc-pf-subband {
    page-break-after: avoid;
  }

  /* A schedule that runs past a page break keeps its column headings on the next one. */
  .tc-pf-table thead {
    display: table-header-group;
  }

  /* Hatching is a screen device -- a printer renders it as grey mush and a filer reading the
     paper cannot tell an empty box from a shaded one anyway. The legend at the foot still names
     every box it stood for, which is the part that carries the meaning. */
  .tc-pf-blank {
    background: none;
  }
}