/* ══ THE JUMP START, AND THE NUMBERS MODAL ═══════════════════════════════════
   js/06a-dashboard-variants.js. Numbered 21 so it lands last; the NN- prefix is
   the cascade.

   This file styled three candidate DASHBOARD PAGES behind `?dash=a|b|c`. There
   is no dashboard page (docs/ARCHITECTURE-2026-08-07.md §1) and there are no
   three variants: A's tiles and C's week are the two views of the arm
   homepage's numbers modal, and B is the jump start at the top of that page
   (§3). Not one rule below the header changed — the treatments Mark reviewed
   from plates are the treatments that shipped. Only their HOSTS changed, and
   that is the whole diff at the top of this file.

   WHAT STILL SEPARATES a FROM b FROM c is weight order, and it still matters
   because the three now sit in three different places on one surface:

     a  three tiles at one weight and nothing above them. The modal's first view
        IS the numbers, so the numbers get the display face.
     b  one line at 54px and everything after it at 12. The 4.5x drop IS the
        answer to "which one is the intended action?" — you cannot mistake the
        second-loudest thing on the page for the first. It is the jump start.
     c  no display figure at all above the spine. The seven columns are the
        largest object, so the eye starts at the week rather than at a total.

   ONE FIGURE SHAPE, THREE SCALES. .dx-fig is label / numeral+unit / note in
   that order, everywhere, and every note keeps its box even when empty — three
   figures in a row have to be three identical rectangles or they read as the
   accident Mark called out ("two stacked and one not"). Only the SIZE changes
   per host, via the --dx-fig-* customs below.

   NO INNER SCROLLER. Nothing in this file sets overflow-y. The table and the
   chart get their own overflow-x: auto boxes so a wide child scrolls itself
   rather than pushing the document sideways — the fix, not the re-clip. The one
   y-scroller involved is .vh-modal-body in 19-verticals.css, which is a
   height-bounded dialog pane and is allowlisted as one.
   ═══════════════════════════════════════════════════════════════════════════ */

/* `.dvx` WAS A PAGE WRAPPER — its own measure, its own gutter, a 72px tail —
   because it was the body of a page. It is now a class on three things that are
   not pages: a band of the arm homepage, another band of it, and a dialog body.
   All three sit inside something that already supplies the measure, so a wrapper
   here would indent every one of them and hang the first two off the bottom of
   the page. What survives is the figure scale, which is the one thing all three
   hosts genuinely share. */
.bs .dvx {
  --dx-fig-n: 30px;
  --dx-fig-lbl: 9px;
}

/* ── shared furniture ────────────────────────────────────────────────────── */

.bs .dvx .dx-kicker {
  font-family: var(--bs-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}

.bs .dvx .dx-head { position: relative; padding-top: 4px; }
.bs .dvx .dx-back {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--bs-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 2px 0;
  cursor: pointer;
}
.bs .dvx .dx-back:hover { color: var(--bs-ink); }
.bs .dvx .dx-back:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }

.bs .dvx .dx-sec { margin-top: 38px; }
.bs .dvx .dx-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  border-bottom: 2px solid var(--bs-ink);
  padding-bottom: 7px;
  margin-bottom: 16px;
}
.bs .dvx .dx-sec-title {
  font-family: var(--bs-ed);
  font-variation-settings: 'WONK' 1;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -.012em;
  color: var(--bs-ink);
  margin: 0;
}

.bs .dvx .dx-empty {
  font-family: var(--bs-ui);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bs-ink-2);
  border-left: 2px solid var(--bs-rule);
  padding-left: 14px;
  max-width: 58ch;
}
.bs .dvx .dx-empty p { margin: 0; }
/* The empty-state's own action, not decoration: coordinator's rule,
   2026-08-09 — an empty band 2 must end in the action that fills it. Same
   .dx-link everything else here uses; only the gap above it is new, since
   every other .dx-link sits alone rather than under a paragraph. */
.bs .dvx .dx-empty .dx-link { display: inline-block; margin-top: 10px; }

.bs .dvx .dx-tail { margin-top: 34px; }
.bs .dvx .dx-link {
  font-family: var(--bs-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--bs-ink);
  border-radius: 0;
  padding: 0 0 2px;
  cursor: pointer;
}
.bs .dvx .dx-link:hover { color: var(--bs-blue); border-bottom-color: var(--bs-blue); }
.bs .dvx .dx-link:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }

/* The Plan modal's non-SAT body (js/11b-verticals.js, _vhNonSatPlanBody) —
   competition/AP/cognition have no #plan-store markup of their own (that
   page's date/score fields and 7-day calendar are SAT's; every other arm's
   target_test_date/target_score/pacing come back null by /training/plan's
   own contract), so this is fresh furniture, not a fourth lettered variant.
   Same weight as the week view's own "today" headline (.dx-c-todaytxt) —
   duplicated rather than shared because this body is not .dx-c-scoped. */
.bs .dvx .vgm-plan-today {
  font-family: var(--bs-ed);
  font-variation-settings: 'WONK' 1;
  font-weight: 900;
  font-size: clamp(21px, 2.6vw, 29px);
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--bs-ink);
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}

/* ── THE FIGURE ──────────────────────────────────────────────────────────────
   The one shape. Three rows, in this order, at every size, on every variant. */
.bs .dvx .dx-fig { min-width: 0; }
.bs .dvx .dx-fig-lbl {
  font-family: var(--bs-mono);
  font-size: var(--dx-fig-lbl);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  margin-bottom: 6px;
}
.bs .dvx .dx-fig-v {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.bs .dvx .dx-fig-n {
  font-family: var(--bs-ed);
  font-variation-settings: 'WONK' 1;
  font-weight: 900;
  font-size: var(--dx-fig-n);
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink);
}
.bs .dvx .dx-fig-u {
  font-family: var(--bs-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--bs-ink-3);
  white-space: nowrap;
}
/* Keeps its box when it is empty. Without this a figure whose note is blank is
   shorter than the two beside it, which is the exact defect this file exists to
   stop repeating. */
.bs .dvx .dx-fig-note {
  font-family: var(--bs-ui);
  font-size: 12px;
  line-height: 1.4;
  color: var(--bs-ink-2);
  margin-top: 8px;
  min-height: 2.8em;
}

/* Three of them, side by side, on one grid so they cannot come out at three
   widths. `1fr` and not `auto` deliberately: auto sizes each to its own numeral
   and the trio stops being a trio. */
.bs .dvx .dx-figrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 26px;
  border-top: 1px solid var(--bs-rule);
  border-bottom: 1px solid var(--bs-rule);
  padding: 17px 0 15px;
}

/* ── week bars, shared by a and b ────────────────────────────────────────── */
.bs .dvx .dx-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  margin-top: 22px;
}
.bs .dvx .dx-bar-track {
  height: 92px;
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid var(--bs-ink);
}
.bs .dvx .dx-bar-fill { width: 100%; background: var(--bs-camel); }
.bs .dvx .dx-bar-col.is-today .dx-bar-fill { background: var(--bs-ink); }
.bs .dvx .dx-bar-col.is-future .dx-bar-track { border-bottom-style: dashed; }
.bs .dvx .dx-bar-n,
.bs .dvx .dx-bar-dow {
  font-family: var(--bs-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.bs .dvx .dx-bar-n {
  font-size: 12px;
  font-weight: 600;
  color: var(--bs-ink);
  margin-top: 6px;
  min-height: 1.2em;
}
.bs .dvx .dx-bar-dow {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  margin-top: 2px;
}

/* ── the rating chart ────────────────────────────────────────────────────── */
/* Its own scroller, so a wide plot scrolls itself instead of pushing the
   document sideways. Never overflow-y here — see the header note. */
.bs .dvx .dx-chart-wrap { overflow-x: auto; }
.bs .dvx .dx-chart { width: 100%; min-width: 300px; height: 150px; display: block; }
.bs .dvx .dx-chart-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  margin-top: 6px;
}
/* Capped, because it is a MARK and not a chart. Left at 100% it ran the full
   width of a stacked tile at 320 and read as a second plot competing with the
   real one further down the page. */
.bs .dvx .dx-spark {
  width: 100%;
  max-width: 190px;
  height: 26px;
  display: block;
  margin-top: 12px;
}

/* ── the skill box score ─────────────────────────────────────────────────── */
/* Was capped at 760px, which was the measure a and b wanted beside their other
   furniture. Its one host now is §3's detail band on the arm homepage, where
   the cap made the table stop 250px short of the ruled kicker directly above
   it — measured at 1440: table right edge 945, section rule 1197. A box score
   runs the full column of the page it is printed on. */
.bs .dvx .dx-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.bs .dvx .dx-h {
  font-family: var(--bs-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  text-align: left;
  padding: 0 10px 6px 0;
  border-bottom: 2px solid var(--bs-ink);
  white-space: nowrap;
}
.bs .dvx .dx-h.dx-num { text-align: right; width: 74px; padding: 0 0 6px 10px; }
.bs .dvx .dx-row { cursor: pointer; transition: background .1s ease; }
.bs .dvx .dx-row:hover { background: var(--bs-stock-2); box-shadow: inset 3px 0 0 var(--bs-camel); }
.bs .dvx .dx-row:hover .dx-cell-name { color: var(--bs-blue); }
.bs .dvx .dx-row:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: -2px; }
.bs .dvx .dx-table td,
.bs .dvx .dx-table th.dx-cell-name {
  border-bottom: 1px solid var(--bs-rule);
  padding: 8px 10px 8px 0;
  vertical-align: baseline;
}
.bs .dvx .dx-cell-name {
  font-family: var(--bs-ui);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bs-ink);
  text-align: left;
  overflow-wrap: anywhere;
  transition: color .1s ease;
}
.bs .dvx .dx-table td.dx-num { text-align: right; padding: 8px 0 8px 10px; white-space: nowrap; }
.bs .dvx .dx-val {
  font-family: var(--bs-mono);
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink);
}

/* ══ a · THE NUMBERS ════════════════════════════════════════════════════════
   The tiles are the largest object on the page and they are identical. The
   student's own name is the page title — it is HIS record, and the old folio's
   "Reader:" label is gone rather than relabelled. */

.bs .dx-a { --dx-fig-n: clamp(40px, 5.4vw, 58px); --dx-fig-lbl: 9.5px; }

.bs .dx-a .dx-a-name {
  font-family: var(--bs-ed);
  font-variation-settings: 'WONK' 1;
  font-weight: 900;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--bs-ink);
  margin: 7px 0 0;
  overflow-wrap: anywhere;
}
.bs .dx-a .dx-a-sub {
  font-family: var(--bs-ui);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bs-ink-2);
  max-width: 56ch;
  margin: 11px 0 0;
}

.bs .dx-a .dx-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 30px;
  border-top: 3px solid var(--bs-ink);
  border-bottom: 3px solid var(--bs-ink);
}
/* One rule BETWEEN tiles, not a box around each: three boxes would let the eye
   rank them, and the whole claim of this variant is that they are equal. */
.bs .dx-a .dx-tile {
  padding: 20px 24px 22px;
  border-left: 1px solid var(--bs-rule);
  min-width: 0;
}
.bs .dx-a .dx-tile:first-child { border-left: 0; padding-left: 0; }
.bs .dx-a .dx-tile:last-child { padding-right: 0; }
.bs .dx-a .dx-fig-note { min-height: 3.2em; }

.bs .dvx .dx-scale {
  height: 5px;
  background: var(--bs-stock-2);
  margin-top: 14px;
  border-bottom: 1px solid var(--bs-rule);
}
.bs .dvx .dx-scale-fill { height: 100%; background: var(--bs-camel-deep); }

/* The single action. A ruled bar, not a filled button: on a page whose claim is
   that the numbers are the news, the one instruction is set as a rule across
   the measure rather than as the loudest object. */
.bs .dx-a .dx-actionbar {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  margin-top: 26px;
  padding: 14px 0 13px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--bs-ink);
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, padding .12s ease;
}
.bs .dx-a .dx-actionbar:hover { background: var(--bs-stock-2); padding-inline: 10px; }
.bs .dx-a .dx-actionbar:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }
.bs .dx-a .dx-actionbar-lbl {
  font-family: var(--bs-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  flex: 0 0 auto;
}
.bs .dx-a .dx-actionbar-txt {
  font-family: var(--bs-ed);
  font-variation-settings: 'WONK' 1;
  font-weight: 900;
  font-size: clamp(19px, 2.2vw, 25px);
  letter-spacing: -.018em;
  color: var(--bs-ink);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bs .dx-a .dx-actionbar-go {
  font-family: var(--bs-mono);
  font-size: 18px;
  color: var(--bs-blue);
  flex: 0 0 auto;
}

/* ══ b · ONE DECISION ═══════════════════════════════════════════════════════
   The name addresses the student directly — the greeting IS the name, which is
   what "Reader" was standing in for. Then one verb, one button, and a hard rule
   under which nothing is allowed to be loud. */

.bs .dx-b { --dx-fig-n: 26px; --dx-fig-lbl: 8.5px; }

/* The head takes the full measure and the CHILDREN carry their own — a measure
   on the head itself also moved the Back button, which is positioned against
   it, and at 26ch the two collided. */
.bs .dx-b .dx-b-hail {
  font-family: var(--bs-ed);
  font-variation-settings: 'WONK' 1;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--bs-ink-3);
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
.bs .dx-b .dx-b-verb {
  font-family: var(--bs-ed);
  font-variation-settings: 'WONK' 1;
  font-weight: 900;
  /* Was clamp(38px, 6.4vw, 68px) — 68px under a 56px page title, so the jump
     start outranked the name of the page it sits on. --page-lead (01-tokens.css)
     is 0.82x the front-page title at every width, which keeps this the loudest
     thing in the content column without letting it beat the masthead's own
     child. */
  font-size: var(--page-lead);
  line-height: 1.0;
  letter-spacing: -.032em;
  color: var(--bs-ink);
  margin: 8px 0 0;
  /* `break-word`, NOT `anywhere`. `anywhere` also shrinks the element's
     min-content width, so the browser was free to set "Variable Substitution"
     at 68px as four fragments — Variabl / e / Substit / ution — inside a box
     that had room for the whole phrase. This breaks a word only when a single
     word genuinely cannot fit, which is the 320 case and nothing else. */
  overflow-wrap: break-word;
  max-width: 860px;
}
.bs .dx-b .dx-b-why {
  font-family: var(--bs-ui);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--bs-ink-2);
  margin: 18px 0 0;
  max-width: 54ch;
}

.bs .dx-b .dx-b-go {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding: 17px 24px 16px;
  background: var(--bs-ink);
  color: var(--bs-sheet);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--bs-camel);
  transition: transform .12s ease, box-shadow .12s ease;
  max-width: 100%;
}
.bs .dx-b .dx-b-go:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--bs-camel); }
.bs .dx-b .dx-b-go:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 4px; }
.bs .dx-b .dx-b-go-txt {
  font-family: var(--bs-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: left;
  overflow-wrap: anywhere;
}
.bs .dx-b .dx-b-go-arrow { font-family: var(--bs-mono); font-size: 16px; color: var(--bs-camel-on-ink); }

/* The alternates. Labelled "or instead of it" and set at a fifth of the verb's
   size, because the question Mark asked — which one am I meant to press? — is a
   question about weight, and two options at the same weight is what caused it. */
.bs .dx-b .dx-b-alts { margin-top: 34px; max-width: 430px; }
.bs .dx-b .dx-b-altlist { list-style: none; margin: 9px 0 0; padding: 0; }
.bs .dx-b .dx-b-alt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bs-rule);
  border-radius: 0;
  padding: 9px 0 8px;
  text-align: left;
  cursor: pointer;
}
.bs .dx-b .dx-b-alt:hover { border-bottom-color: var(--bs-ink); }
.bs .dx-b .dx-b-alt:hover .dx-b-alt-txt { color: var(--bs-blue); }
.bs .dx-b .dx-b-alt:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }
.bs .dx-b .dx-b-alt-txt {
  font-family: var(--bs-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-ink-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.bs .dx-b .dx-b-alt-arrow { font-family: var(--bs-mono); font-size: 12px; color: var(--bs-ink-3); }

/* Everything below the rule is reference material and is set as reference. */
.bs .dx-b .dx-b-agate {
  margin-top: 52px;
  border-top: 3px solid var(--bs-ink);
  padding-top: 14px;
}
.bs .dx-b .dx-b-agate .dx-figrow { margin-top: 12px; border-top: 0; }
.bs .dx-b .dx-b-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 24px;
  max-width: 520px;
}
.bs .dx-b .dx-b-idx-t,
.bs .dx-b .dx-b-idx-v {
  border-bottom: 1px solid var(--bs-rule);
  padding: 7px 0 6px;
}
.bs .dx-b .dx-b-idx-t {
  font-family: var(--bs-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  align-self: end;
}
.bs .dx-b .dx-b-idx-v {
  font-family: var(--bs-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink);
  text-align: right;
  padding-left: 16px;
}
/* Shorter than a's. It is the only graphic below b's rule and everything below
   that rule is meant to be reference; at a's 92px it started competing with the
   decision above it, which is the one thing this variant may not allow. */
.bs .dx-b .dx-bars { margin-top: 28px; }
.bs .dx-b .dx-bar-track { height: 46px; }

/* ══ c · THE WEEK ═══════════════════════════════════════════════════════════
   The spine is the largest object; no figure above it competes. The name is the
   byline under the week's own title — this page belongs to a week, and the week
   belongs to a student. */

.bs .dx-c { --dx-fig-n: 27px; --dx-fig-lbl: 8.5px; }

.bs .dx-c .dx-c-title {
  font-family: var(--bs-ed);
  font-variation-settings: 'WONK' 1;
  font-weight: 900;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--bs-ink);
  margin: 7px 0 0;
}
.bs .dx-c .dx-c-by {
  font-family: var(--bs-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--bs-ink-2);
  margin: 9px 0 0;
  overflow-wrap: anywhere;
}
.bs .dx-c .dx-c-lede {
  font-family: var(--bs-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bs-ink-2);
  max-width: 58ch;
  margin: 12px 0 0;
}

.bs .dx-c .dx-c-spine {
  margin-top: 28px;
  border-top: 3px solid var(--bs-ink);
  border-bottom: 3px solid var(--bs-ink);
  padding: 0;
}
.bs .dx-c .dx-c-days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.bs .dx-c .dx-c-day {
  border-left: 1px solid var(--bs-rule);
  padding: 14px 8px 13px;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.bs .dx-c .dx-c-day:first-child { border-left: 0; }
/* Today is the only column with a ground. It is not a colour code — the numeral
   below it goes to the ink weight too, so the marker survives greyscale. */
.bs .dx-c .dx-c-day.is-today { background: var(--bs-stock-2); }
/* The fade is on the column ART, not on the whole cell. `opacity: .55` on the
   `li` faded its text too: the day-of-week painted 2.39:1 and the date 3.20:1
   against a 4.5 floor — MEASURED 2026-08-15, and invisible to the audit until
   it learned to read `opacity`. The bar and its axis carry most of the visual
   mass, so fading those keeps "future" reading at a glance, and the dashed
   bottom border below already says it a second time without using colour. */
.bs .dx-c .dx-c-day.is-future .dx-c-col { opacity: .55; }
.bs .dx-c .dx-c-day.is-future .dx-c-date { color: var(--bs-ink-3); }
.bs .dx-c .dx-c-dow {
  font-family: var(--bs-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}
.bs .dx-c .dx-c-date {
  font-family: var(--bs-ed);
  font-variation-settings: 'WONK' 1;
  font-weight: 900;
  font-size: 17px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink);
  margin-top: 2px;
}
.bs .dx-c .dx-c-col {
  height: 104px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 10px;
  border-bottom: 2px solid var(--bs-ink);
}
.bs .dx-c .dx-c-bar { width: 62%; background: var(--bs-camel); }
.bs .dx-c .dx-c-day.is-today .dx-c-bar { background: var(--bs-ink); }
.bs .dx-c .dx-c-day.is-blank .dx-c-col { border-bottom-color: var(--bs-rule); }
.bs .dx-c .dx-c-day.is-future .dx-c-col { border-bottom-style: dashed; }
.bs .dx-c .dx-c-n {
  font-family: var(--bs-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink);
  margin-top: 7px;
}
.bs .dx-c .dx-c-day.is-today .dx-c-n { font-weight: 700; }
.bs .dx-c .dx-c-pc {
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--bs-ink-3);
  margin-top: 2px;
  min-height: 1.2em;
}

/* Today's row hangs off the bottom of the spine — it is a day, so it belongs to
   the spine rather than to a separate call-to-action band. */
/* A one-line stamp under the spine. It carried the ranked action in variant c
   and the 17px below the label was the gap above that button; with the action
   moved to the page's jump start the padding was holding open a box with
   nothing in it. */
.bs .dx-c .dx-c-today {
  border-top: 1px solid var(--bs-ink);
  padding: 13px 0 0;
}
.bs .dx-c .dx-c-todayline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 7px 0 6px;
  text-align: left;
  cursor: pointer;
}
.bs .dx-c .dx-c-todayline:hover .dx-c-todaytxt { color: var(--bs-blue); }
.bs .dx-c .dx-c-todayline:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 3px; }
.bs .dx-c .dx-c-todaytxt {
  font-family: var(--bs-ed);
  font-variation-settings: 'WONK' 1;
  font-weight: 900;
  font-size: clamp(21px, 2.6vw, 29px);
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--bs-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.bs .dx-c .dx-c-todayarrow { font-family: var(--bs-mono); font-size: 17px; color: var(--bs-blue); }
.bs .dx-c .dx-c-todaywhy {
  font-family: var(--bs-ui);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bs-ink-2);
  max-width: 62ch;
  margin: 4px 0 0;
}

.bs .dx-c .dx-c-skills { list-style: none; margin: 0; padding: 0; }
.bs .dx-c .dx-c-skill {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 620px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bs-rule);
  border-radius: 0;
  padding: 8px 0 7px;
  text-align: left;
  cursor: pointer;
}
.bs .dx-c .dx-c-skill:hover { border-bottom-color: var(--bs-ink); }
.bs .dx-c .dx-c-skill:hover .dx-c-skill-name { color: var(--bs-blue); }
.bs .dx-c .dx-c-skill:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }
.bs .dx-c .dx-c-skill-name {
  font-family: var(--bs-ui);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bs-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.bs .dx-c .dx-c-skill-fig {
  font-family: var(--bs-mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink-3);
  white-space: nowrap;
}

/* Five weeks, same seven cells, one scale. The current week reads against its
   own history rather than against nothing. */
.bs .dx-c .dx-c-ladder { max-width: 620px; }
/* Fixed label column, then the cells, then the total pushed to the measure's
   right edge. With the label on `1fr` the cells drifted 300px away from the
   week they belong to. */
.bs .dx-c .dx-c-lrow {
  display: grid;
  grid-template-columns: 122px auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--bs-rule);
  padding: 8px 0;
}
.bs .dx-c .dx-c-lweek {
  font-family: var(--bs-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs .dx-c .dx-c-lrow:first-child .dx-c-lweek { color: var(--bs-ink); }
.bs .dx-c .dx-c-lcells { display: flex; gap: 3px; }
/* --fill is 0..1; the cell is a fixed square whose ink density is the day's
   volume, so five weeks are comparable at a glance without five axes. */
.bs .dx-c .dx-c-lcell {
  width: 15px;
  height: 15px;
  border: 1px solid var(--bs-rule);
  background: color-mix(in srgb, var(--bs-camel) calc(var(--fill, 0) * 100%), transparent);
}
.bs .dx-c .dx-c-lcell.is-future { border-style: dashed; }
.bs .dx-c .dx-c-ltot {
  font-family: var(--bs-mono);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink);
  min-width: 28px;
  text-align: right;
}

/* ── narrow ──────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  /* Below this a third of the measure cannot hold the numeral plus its unit, so
     the tiles become three ruled BANDS — still one shape, still equal weight,
     still three: the trio is preserved and only its axis changes. The threshold
     is 700 and not 900 because the numeral is `clamp(40px, 5.4vw, 58px)`: it
     shrinks with the column, so three across still set cleanly at 768. */
  .bs .dx-a .dx-tiles { grid-template-columns: minmax(0, 1fr); }
  .bs .dx-a .dx-tile {
    border-left: 0;
    border-top: 1px solid var(--bs-rule);
    padding: 18px 0 20px;
  }
  .bs .dx-a .dx-tile:first-child { border-top: 0; padding-top: 4px; }
  .bs .dx-a .dx-fig-note { min-height: 0; }
}

@media (max-width: 640px) {
  .bs .dvx .dx-head { padding-top: 26px; }
  .bs .dvx .dx-back { top: 0; right: auto; left: 0; }
  /* The trio stacks rather than crushing to 3 x ~85px, and each figure becomes
     one line of label / numeral / note. Same three rows, same order. */
  .bs .dvx .dx-figrow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bs .dvx .dx-fig-note { min-height: 0; }
  .bs .dvx .dx-fig { border-bottom: 1px solid var(--bs-rule); padding-bottom: 14px; }
  .bs .dvx .dx-figrow .dx-fig:last-child { border-bottom: 0; padding-bottom: 0; }
  .bs .dvx .dx-bars { gap: 4px; }
  .bs .dvx .dx-bar-track { height: 64px; }
  .bs .dvx .dx-h.dx-num { width: 52px; }
  .bs .dvx .dx-table td.dx-num,
  .bs .dvx .dx-h.dx-num { padding-left: 6px; }
  .bs .dvx .dx-val { font-size: 12px; }
  .bs .dvx .dx-cell-name { font-size: 13.5px; }

  .bs .dx-b .dx-b-go { width: 100%; justify-content: space-between; }

  /* Seven columns at 320 leaves ~40px each. The bar and the numerals survive
     that; the accuracy line under them does not, and it is the one item here
     that is already stated in the trio above. */
  .bs .dx-c .dx-c-day { padding: 10px 3px 11px; }
  .bs .dx-c .dx-c-date { font-size: 14px; }
  .bs .dx-c .dx-c-col { height: 72px; }
  .bs .dx-c .dx-c-n { font-size: 11px; }
  .bs .dx-c .dx-c-pc { display: none; }
  .bs .dx-c .dx-c-lcell { width: 11px; height: 11px; }
  .bs .dx-c .dx-c-lrow { gap: 8px; }
  .bs .dx-c .dx-c-lweek { font-size: 8.5px; letter-spacing: .1em; }
}