/* The table aligned on the point, in the minimal style: a white page, near black ink, thin rules, and one vermilion
   kept for the tab stops (the ticks over every decimal point and under the choice made) and for the guide that
   drops through a column while its figures are set again. Roboto Flex, a variable sans with width and weight axes:
   the script places every character of every figure itself, in slots measured at the heaviest weight, so a row that
   takes weight never leaves the point. */
:root {
  --page: #ffffff;                  /* the page */
  --ink: #141414;                   /* the figures, the names and the strong rules */
  --grey: #8a877f;                  /* the column heads, the small words, the choices not made */
  --hair: #e9e7e2;                  /* the thin lines between the rows */
  --accent: #e8452c;                /* the tab stops and the guide */
  --brackets: #6d6a63;              /* the brackets round a cost */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Roboto Flex Variable', 'Roboto Flex', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 48px 16px;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button:focus,
tr:focus {
  outline: none;
}

.sheet {
  position: relative;
  width: min(640px, 100%);
}

/* ---------------------------------------------------------------- the title and the choices */
.sheet__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 22px;
}

.sheet__title {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variation-settings: 'wdth' 88, 'wght' 640;
}

.sheet__note {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.28em;
  margin: 7px 0 0;
  color: var(--grey);
  font-size: 13px;
  line-height: 18px;
  font-variation-settings: 'wdth' 100, 'wght' 420;
}

/* the unit in the note rolls like a figure: a window one line tall */
.note-roll {
  position: relative;
  display: inline-block;
  height: 18px;
  overflow: hidden;
  vertical-align: top;
}

.note-roll__in {
  display: block;
  white-space: nowrap;
}

.choices {
  display: flex;
  flex: none;
  gap: 26px;
}

.choice {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.choice__label {
  padding-bottom: 14px;
  color: var(--grey);
  font-size: 12.5px;
  line-height: 18px;
  font-variation-settings: 'wdth' 100, 'wght' 420;
}

/* the options stand on a hairline, like stops on a ruler: a vermilion tick stands under the one chosen */
.choice__opts {
  position: relative;
  display: flex;
  padding-bottom: 8px;
}

.choice__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: 0 50%;
}

.choice__tick {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 7px;
  margin-left: -1px;
  background: var(--accent);
  transform-origin: 50% 100%;
}

.opt {
  position: relative;
  min-width: 34px;
  height: 30px;
  padding: 0 7px;
  color: var(--grey);
  font-size: 15px;
  line-height: 30px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease;
}

.opt__word {
  display: block;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  transition: font-variation-settings 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.opt[aria-checked='true'] {
  color: var(--ink);
}

.opt[aria-checked='true'] .opt__word {
  font-variation-settings: 'wdth' 100, 'wght' 680;
}

@media (hover: hover) {
  .opt:hover {
    color: var(--ink);
  }
}

.opt:active .opt__word {
  transform: translateY(1px);
}

.opt:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -1px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- the table */
.board {
  position: relative;
}

/* the strong rule over the heads: the tab stops hang from it */
.board__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
}

.figures {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
}

.figures th,
.figures td {
  padding: 0;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.figures thead th {
  position: relative;
  height: 44px;
  vertical-align: bottom;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
  color: var(--grey);
  font-size: 12.5px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 100, 'wght' 460;
}

.figures thead th.head-num {
  text-align: right;
}

/* the year over each column: a box of its own, so the entrance moves it and not the cell */
.head-word {
  display: inline-block;
}

/* a tab stop: the tick that hangs from the top rule right over the decimal point of its column */
.stop {
  position: absolute;
  top: 0;
  width: 2px;
  height: 8px;
  margin-right: -1px;
  background: var(--accent);
  transform-origin: 50% 0;
}

/* the guide: a vermilion hairline that drops from the tab stop through the column while it is set again, under the
   figures */
.guide {
  position: absolute;
  top: 8px;
  width: 1px;
  margin-right: -0.5px;
  background: var(--accent);
  opacity: 0.5;
  transform-origin: 50% 0;
  transform: scaleY(0);
  pointer-events: none;
}

.row th,
.row td {
  height: 46px;
  border-bottom: 1px solid var(--hair);
  vertical-align: middle;
}

.row {
  --wght: 380;
  --name: 420;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
  font-size: 15px;
  line-height: 22px;
  text-overflow: ellipsis;
  font-variation-settings: 'wdth' 100, 'wght' var(--name);
}

/* the keys: a thin frame round the name of the row */
.row:focus-visible .name {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
  overflow: visible;
}

/* the total: a strong rule over it, the accountant's double rule under it */
.row--total th,
.row--total td {
  height: 54px;
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink);
}

.row--total {
  --wght: 620;
  --name: 640;
}

/* a figure: one line, and the anchor on the decimal point (the script places it and every character round it) */
.fig {
  position: relative;
  display: block;
  height: 24px;
}

.fig__anchor {
  position: absolute;
  top: 0;
  width: 0;
  height: 24px;
}

/* every character in its own slot: the slot moves (the script writes its transform), the characters roll inside it.
   The window clips above and below only */
.g {
  position: absolute;
  left: 0;
  top: 0;
  height: 24px;
  clip-path: inset(0 -6px);
  will-change: transform;
}

.g__c {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 24px;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-variation-settings: 'wdth' var(--fig-wdth, 96), 'wght' var(--wght);
}

.g--bracket .g__c {
  color: var(--brackets);
}

/* for measuring the slots, out of sight */
.ruler {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
  white-space: pre;
  font-size: 16px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-variation-settings: 'wdth' var(--fig-wdth, 96), 'wght' var(--wght);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- a phone */
@media (max-width: 600px) {
  .stage {
    padding: 36px 16px;
  }

  .sheet__head {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-bottom: 16px;
  }

  .sheet__title {
    font-size: 21px;
  }

  .choices {
    justify-content: space-between;
    gap: 12px;
  }

  .choice {
    gap: 6px;
  }

  .figures thead th {
    height: 40px;
    padding-bottom: 9px;
    font-size: 12px;
  }

  .row th,
  .row td {
    height: 44px;
  }

  .row--total th,
  .row--total td {
    height: 52px;
  }

  .name {
    font-size: 14px;
    white-space: normal;
    line-height: 17px;
    font-variation-settings: 'wdth' 84, 'wght' var(--name);
  }

  .g__c,
  .ruler {
    font-size: 14.5px;
  }

  .sheet {
    --fig-wdth: 86;
  }
}