/* VAT & tax.
 *
 * Geometry is the export's own. The return table below is `rowStyle` from the
 * `isTax` branch of "06 VAT and tax.html", copied rather than eyeballed:
 *
 *   46px 1fr 150px 130px   gap 12px   padding 11px 16px
 *
 * Header and body share one custom property so a column cannot be widened in
 * one and not the other — the failure that puts a heading over the wrong
 * figures, which on a tax return is the whole ballgame.
 *
 * The export's frame is `grid-template-columns: 1fr 330px`. That is kept here,
 * unlike the payables screen: all three rail panels — filing periods, payment,
 * registration — have real data behind them, so the rail is not empty.
 */

/* ---- header ---- */

.vat__head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}

.vat__head-text { flex: 1; min-width: 0; }

.vat__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.vat__sub { font-size: 12.5px; color: var(--p-ink-2); margin: 3px 0 0; }

.vat__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.vat__action {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--p-surface);
  border: 1px solid var(--p-line-2);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--p-ink);
  cursor: pointer;
}

/* A disabled control is explaining itself, so it stays readable — dimming it
   below the contrast floor would hide the explanation with the button. */
.vat__action:disabled {
  background: var(--p-surface-2);
  border-color: var(--p-line);
  color: var(--p-ink-2);
  cursor: not-allowed;
}

.vat__action--primary {
  background: var(--p-brand);
  border-color: var(--p-brand);
  color: var(--p-on-brand);
  font-weight: 600;
}

/* ---- hero ---- */

.vat__hero { display: flex; align-items: center; gap: 14px; padding: 15px 16px; }

.vat__hero-total { flex: 1; min-width: 0; }

.vat__hero-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--p-ink-3);
}

/* NO `font-family` — the figure inherits JetBrains Mono from `.num`, so the net
   payable is set in the same face as every row of the return beneath it. The
   export marks this span `.num` and then overrides the family to the display
   font, which asks for the numeral face and cancels it; copied verbatim it put
   one screen's money in two fonts. See the same note in payables.css. */
.vat__hero-value {
  display: inline-block;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 5px;
}

.vat__hero-note { font-size: 12px; color: var(--p-ink-2); margin-inline-start: 9px; }

.vat__hero-stats {
  display: flex;
  gap: 22px;
  padding-inline-start: 20px;
  border-inline-start: 1px solid var(--p-line);
  flex: none;
}

.vat__stat { min-width: 0; }
.vat__stat-label { display: block; font-size: 10.5px; color: var(--p-ink-3); }
.vat__stat-value { display: block; font-size: 16px; font-weight: 600; margin-top: 3px; }

/* ---- the blocking banner ---- */

.vat__blockers { padding: 14px 16px; border-color: var(--p-warn); }

.vat__blockers-head {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--p-warn);
  margin-bottom: 6px;
}

.vat__blockers-why {
  font-size: 11.5px;
  color: var(--p-ink-2);
  line-height: 1.45;
  margin: 0 0 10px;
}

.vat__blocker-list { list-style: none; margin: 0; padding: 0; }

.vat__blocker {
  padding: 8px 0;
  border-top: 1px solid var(--p-line);
}

.vat__blocker-what { display: block; font-size: 12.5px; font-weight: 500; }
.vat__blocker-why {
  display: block;
  font-size: 11px;
  color: var(--p-ink-3);
  margin-top: 2px;
  line-height: 1.4;
}

.vat__blockers-amount {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-warn);
  margin: 10px 0 0;
}

/* ---- shared card head ---- */

.vat__card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vat__card-title { font-size: 13.5px; font-weight: 600; margin: 0; }
.vat__card-note { font-size: 11px; color: var(--p-ink-3); margin-inline-start: auto; }

/* ---- the return table ---- */

.vat__boxes {
  padding: 12px 0 0;
  overflow: hidden;
  /* Declared once here, inherited by the head and every row below.
     SIX COLUMNS, not the export's four. The export draws Box · Description ·
     Amount · VAT; NBR's own form has four VALUE columns, and Adjustment and
     Apportionment are kept because a firm needs to see that none was recorded
     rather than find the column gone. See the feature file's header. */
  --vat-cols: 46px minmax(200px, 1fr) 132px 116px 132px 132px;
}

.vat__boxes .vat__card-head { padding: 0 16px; }

/* SIX fixed columns cannot be squeezed without amounts colliding, and two
   overlapping figures on a tax return is worse than a scrollbar. (Said seven
   until 2026-08-12: copied from the payables rule, which has seven. This table
   has six — 46px, description, amount, adjustment, apportionment, VAT — and the
   count is the whole reason the rule exists, so it is worth being right about.) */
.vat__table { overflow-x: auto; }

/* `.vat__box` IS THE RENAMED `.vat__row`. vat.js now emits box; it has zero
   remaining uses of row, so without this the return's rows lost their grid
   entirely and every figure stacked. Both selectors are kept rather than the
   old one renamed away: this screen is being edited concurrently, and an
   additive rule cannot break a revert the way a rename can. When vat.js has
   settled, the `.vat__row` halves below are dead and can go. */
.vat__thead,
.vat__row,
.vat__box {
  display: grid;
  grid-template-columns: var(--vat-cols, 46px 1fr 150px 130px);
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--p-line);
}

.vat__thead {
  padding: 9px 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--p-ink-3);
}

.vat__row,
.vat__box { padding: 11px 16px; }

/* The three totals sit on the raised surface, as in the export. */
.vat__row--total,
.vat__box--total { background: var(--p-surface-2); }
.vat__row--total .vat__desc-label,
.vat__box--total .vat__desc-label { font-weight: 600; }
.vat__row--total .vat__cell.num,
.vat__box--total .vat__cell.num { font-weight: 600; }

.vat__cell { min-width: 0; }
.vat__rownum { font-size: 11.5px; color: var(--p-ink-3); }
.vat__desc { min-width: 0; }
.vat__desc-label { display: block; font-size: 12.5px; font-weight: 500; }
.vat__desc-meta {
  display: block;
  font-size: 11px;
  color: var(--p-ink-3);
  margin-top: 2px;
  line-height: 1.35;
}

.vat__cell.num { font-size: 12.5px; }
.vat__right { text-align: end; justify-self: end; }

/* An absent row must not read as a quiet zero. It is italic and marked, and
   its own meta line says why it is empty. */
.vat__row--absent .vat__desc-label,
.vat__box--absent .vat__desc-label { color: var(--p-ink-2); }
.vat__row--absent .vat__desc-meta,
.vat__box--absent .vat__desc-meta { font-style: italic; }
.vat__absent { color: var(--p-ink-3); }

/* A row the server sent that this version has no wording for. Marked so it
   reads as unvouched rather than sitting quietly among checked rows. */
.vat__box.is-unknown .vat__desc-label { color: var(--p-risk); }

/* 16px between stacked notes, matching payables — two bordered blocks any
   closer read as one split box rather than two separate statements. */
.vat__note {
  margin: 16px 16px 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--p-line);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--p-ink-2);
}

.vat__note--warn { border-color: var(--p-warn); }
.vat__note--risk { border-color: var(--p-risk); }

.vat__tone--risk { color: var(--p-risk); }

/* ---- the 330px rail ---- */

.vat__rail { display: flex; flex-direction: column; gap: 14px; }

.vat__panel { padding: 15px 16px; }

.vat__panel-note {
  font-size: 11.5px;
  color: var(--p-ink-3);
  line-height: 1.45;
  margin: 4px 0 8px;
}

.vat__period {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: none;
  border-top: 1px solid var(--p-line);
  background: transparent;
  color: var(--p-ink);
  cursor: pointer;
  text-align: start;
}

.vat__period.is-current,
.vat__period.is-selected { background: var(--p-surface-2); }

.vat__period-text { flex: 1; min-width: 0; }
.vat__period-label { display: block; font-size: 12px; font-weight: 500; }
.vat__period-meta { display: block; font-size: 10.5px; color: var(--p-ink-3); margin-top: 2px; }

.vat__period-state {
  flex: none;
  border-radius: 999px;
  background: var(--p-surface-2);
  color: var(--p-ink-2);
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.vat__facts { margin: 0; }

.vat__facts dt {
  font-size: 11.5px;
  color: var(--p-ink-3);
  padding: 9px 0 0;
  border-top: 1px solid var(--p-line);
}

.vat__facts dd {
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  padding: 0 0 9px;
  text-align: end;
  margin-top: -18px;
}

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

/* vat.js now wraps the hero, the return and the blockers in `.vat__main`, so
   the left column is ONE grid child rather than three placed individually.
   Undefined, it was a bare div: the three sections lost their 16px rhythm and
   the rail's `1fr 330px` split had four children to place instead of two.
   The `grid-column: 1` below stays for the three inner sections — harmless
   inside .vat__main, and still correct if the wrapper is reverted. */
.vat__main {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vat__boxes,
.vat__hero,
.vat__blockers { grid-column: 1; }

@media (min-width: 901px) {
  .vat__body {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 16px;
    align-items: start;
  }
}

@media (max-width: 900px) {
  .vat__head { flex-direction: column; align-items: stretch; }
  .vat__actions { flex-wrap: wrap; }
  .vat__hero { flex-direction: column; align-items: stretch; }
  .vat__hero-stats {
    padding-inline-start: 0;
    border-inline-start: none;
    border-top: 1px solid var(--p-line);
    padding-top: 12px;
    margin-top: 12px;
  }
  .vat__thead { display: none; }
  .vat__row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .vat__row .vat__right { justify-self: end; }
}