/* The skin (docs/plan.md, section 3.4): plain but finished, and
   disposable. Every value is a token on :root, so that U4 replaces the
   skin whole by replacing this sheet; a component carries no visual
   decision beyond its tokens. Hand-written CSS on custom properties
   with native nesting and @layer, no preprocessor. What it decides on
   purpose is hierarchy: the type scale, the spacing scale and the
   weight of each surface. The one typeface, Inter, is served from the
   application's own files under the SIL Open Font License
   (fonts/inter/OFL.txt). */

@layer tokens, base, components;

/* The sidebar's track on a wide screen, registered as a length so that
   it transitions and the page's grid, which it sizes, follows it frame
   by frame (the page's grid, below). */
@property --clarity-sidebar-track {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter/inter-latin-opsz-normal.woff2")
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens {
  :root {
    /* Type: one family, a scale of five sizes, three weights. */
    --clarity-font: "Inter", system-ui, sans-serif;
    --clarity-text-xs: 0.75rem;
    --clarity-text-sm: 0.875rem;
    --clarity-text-md: 1rem;
    --clarity-text-lg: 1.25rem;
    --clarity-text-xl: 1.75rem;
    --clarity-leading-tight: 1.25;
    --clarity-leading: 1.45;
    --clarity-weight-regular: 400;
    --clarity-weight-medium: 500;
    --clarity-weight-bold: 620;
    --clarity-numbers: "tnum" 1;
    --clarity-text-chart: var(--clarity-text-xs);
    --clarity-measure: 40rem;
    --clarity-page-width: 72rem;
    --clarity-unit-width: 3rem;
    /* The page on a wide screen, from the sidebar's breakpoint, 60rem,
       which the media queries below restate, since a query cannot read
       a token (table/sheet-query restates it too): one grid of a
       gutter, the main track, the space between it and the sidebar,
       and the sidebar's track. The sidebar's track is 0 while it is
       closed and --clarity-sidebar-width while it is open, ending at
       the viewport's right edge (Decided by Jonas, 2026-10-22). Closed,
       the main track is --clarity-main-width, or the viewport less two
       gutters where that is less, centred. Open, the main block stays
       where it stands closed while the space at its right holds the
       sidebar, whose track begins with its gap; where it does not, the
       block moves left by the shortfall at its width, until its gutter
       is --clarity-gutter; past that it narrows to what the gutter and
       the sidebar leave. A label's text keeps to its measure, 30rem,
       about 75 characters of Inter at 1rem, the top of the 45 to 75
       range; the table is as wide as its columns. --clarity-main-width
       is provisional, the widest the grant model's table grows to at
       1440 px with every published range used (docs/results/u1/
       overlap/survey/); "Stage U1, a constant page width" sets it by
       measurement. */
    --clarity-gutter: 1rem;
    --clarity-main-width: 66rem;
    --clarity-label-max: 30rem;
    /* An opened file's button cuts its label past this width
       (page.cljs). */
    --clarity-model-label-max: 12rem;
    /* The sidebar on a wide screen, the margin note's look: the gap
       between the main track and its rule, inside its track, the space
       between its rule and its text, and the rule's width. */
    --clarity-sidebar-gap: 2rem;
    --clarity-sidebar-inset: var(--clarity-space-3);
    --clarity-sidebar-rule-width: var(--clarity-line-width-strong);
    /* The sidebar's type: the small size at the body's leading, its
       headings at the tight leading. */
    --clarity-sidebar-text: var(--clarity-text-sm);
    --clarity-sidebar-leading: var(--clarity-leading);
    --clarity-sidebar-label-leading: var(--clarity-leading-tight);
    /* The model's tree: a level's step and where its guide sits in it,
       on a wide screen and on a narrow one, the gap between a guide's
       stub and the line's disclosure, operator or text, a disclosure's
       width and its triangle's half-width. */
    --clarity-tree-indent: 1.25rem;
    --clarity-tree-guide-offset: 0.375rem;
    --clarity-tree-indent-narrow: 0.75rem;
    --clarity-tree-guide-offset-narrow: 0.25rem;
    --clarity-tree-stub-gap: 0.125rem;
    --clarity-disclosure-size: 1rem;
    --clarity-disclosure-mark: 0.375rem;
    /* The ladder's mark of a rung, a circle holding its number, and the
       connector between two rungs. */
    --clarity-rung-mark-size: 1.25rem;
    --clarity-rung-connector: var(--clarity-space-3);
    /* Clears the pinned headline of one result line; the headline sets
       it to its height as drawn (table.cljs). */
    --clarity-headline-clearance: 4rem;
    --clarity-sheet-height: 60vh;
    /* Explanations (docs/plan.md, section 1): a toggletip's greatest
       width; and the sidebar's width, its track's, which holds the
       longer reading (Decided by Jonas, 2026-10-19, about 420 to 440
       px, set by measurement: section 7) and the row selected, its
       text the small size, a line of about 50 characters. */
    --clarity-tip-width: 20rem;
    --clarity-reading-width: 27rem;
    /* The sidebar's track on a wide screen: its width and, at its end,
       a gutter, so that its text and controls never touch the
       viewport's edge or a scrollbar. */
    --clarity-sidebar-width: calc(var(--clarity-reading-width)
      + var(--clarity-gutter));
    /* Motion: the sidebar's opening and closing, the page moving or
       narrowing with it in one motion (Decided by Jonas, 2026-10-22),
       short and easing out; none where the reader asks for reduced
       motion (below). */
    --clarity-motion-duration: 200ms;
    --clarity-motion-easing: cubic-bezier(0.215, 0.61, 0.355, 1);

    /* Space: a scale of quarter rems. */
    --clarity-space-1: 0.25rem;
    --clarity-space-2: 0.5rem;
    --clarity-space-3: 0.75rem;
    --clarity-space-4: 1rem;
    --clarity-space-5: 1.5rem;
    --clarity-space-6: 2rem;
    --clarity-space-7: 3rem;
    --clarity-radius: 0.25rem;
    --clarity-line-width: 1px;
    --clarity-line-width-strong: 2px;
    --clarity-focus-width: 2px;
    --clarity-focus-offset: 2px;
    --clarity-underline-offset: 0.15em;

    /* Colour: a neutral palette with one accent, rust, and a colour of
       its own for an input's number, blue, so that it is never read as
       a link or a control, which keep the accent, and the page keeps
       the spreadsheet's convention of blue inputs and black formulas
       (docs/plan.md, section 3.4). Each colour is written in OKLCH,
       converted from the hex value decided and rounded, within sRGB.
       The light values are the default; the dark ones follow below.
       The contrast check (contrast_test.cljs) holds every text and mark
       pair of both modes to WCAG 2.2 AA. */
    color-scheme: light;
    --clarity-page: oklch(1.000 0.000 0.0);
    --clarity-surface: oklch(0.967 0.003 106.4);
    --clarity-line: oklch(0.899 0.007 106.5);
    --clarity-control: oklch(0.564 0.011 106.7);
    --clarity-text: oklch(0.226 0.004 106.7);
    --clarity-text-muted: oklch(0.462 0.008 106.7);
    --clarity-accent: oklch(0.520 0.141 44.8);
    --clarity-accent-strong: oklch(0.440 0.120 44.7);
    --clarity-on-accent: oklch(1.000 0.000 0.0);
    --clarity-focus: oklch(0.520 0.141 44.8);
    --clarity-input-number: oklch(0.494 0.149 257.2);
    /* The row selected: a tint of the accent, with the accent's rule at
       its start, so that the mark is not the tint alone. */
    --clarity-selected: oklch(0.951 0.020 45.3);
    --clarity-selected-width: 4px;
    --clarity-sheet-shadow: 0 -0.5rem 1.5rem oklch(0 0 0 / 0.12);
    --clarity-raised-shadow: 0 0.25rem 1rem oklch(0 0 0 / 0.12);
    /* The band of the accent across the top of the page. */
    --clarity-band-width: 4px;
    /* Under forced colours, the system's: the colour scheme's choice in
       its selected item's colours, which forced colours would else
       replace with those of every other choice, and its focus ring in
       the text's, which the choice's opt-out leaves unadjusted. */
    --clarity-forced-selected: Highlight;
    --clarity-forced-on-selected: HighlightText;
    --clarity-forced-focus: CanvasText;
    /* The tree's guides, between the line's colour and the muted
       text's, so that they read in both modes (docs/plan.md, section
       3.3); supplementary to the indent and the level read aloud, so
       held to no minimum of contrast. */
    --clarity-tree-guide: color-mix(in oklch, var(--clarity-line),
      var(--clarity-text-muted) 45%);
    /* A density's area, a tint of the chart's mark mixed into the page,
       and of its muted mark beyond its range, defined here so that they
       resolve in each mode from that mode's tokens; the curve's line in
       the mark draws its shape, and a sparkline is decorative, hidden
       from a screen reader, which reads the row's range and median, so
       the areas are held to no minimum of contrast. */
    --clarity-chart-area: color-mix(in oklch, var(--clarity-page),
      var(--clarity-chart-mark) 35%);
    --clarity-chart-area-muted: color-mix(in oklch, var(--clarity-page),
      var(--clarity-chart-mark-muted) 35%);
    /* A problem stays within the neutral palette: the text's colour
       and a strong rule beside the row. */
    --clarity-problem: var(--clarity-text);

    /* Charts: their marks through the palette's tokens. A rule drawn
       over a chart's marks has a halo beneath it, a wider stroke of the
       page's colour, against which its contrast is taken. */
    --clarity-chart-mark: var(--clarity-accent);
    --clarity-chart-mark-muted: oklch(0.638 0.009 106.6);
    --clarity-chart-rule: var(--clarity-text);
    --clarity-chart-halo: var(--clarity-page);
    --clarity-chart-halo-width: 2px;
    --clarity-chart-axis: var(--clarity-text-muted);
    --clarity-chart-range-width: 6px;
    --clarity-chart-rule-width: 2px;
    --clarity-chart-spike-width: 4px;
    --clarity-chart-line-width: 2px;
    --clarity-chart-line-width-quiet: 1.5px;
    --clarity-chart-dash-point-answer: 2 3;
    --clarity-chart-dash-tolerance: 4 3;
    --clarity-chart-dash-loss: 6 4;
    --clarity-chart-bar-width: 8px;
    --clarity-sparkline-line-width: 1.25px;
    --clarity-sparkline-tick-width: 1.5px;
  }

  /* The dark values: under the system's dark setting unless the person
     chose Light, and whenever they chose Dark (the colour-scheme
     control, page.cljs, sets data-theme on the root). The two blocks
     are one list, which the contrast check holds equal. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --clarity-page: oklch(0.200 0.000 0.0);
      --clarity-surface: oklch(0.247 0.002 106.5);
      --clarity-line: oklch(0.328 0.005 106.7);
      --clarity-control: oklch(0.648 0.010 106.7);
      --clarity-text: oklch(0.939 0.007 106.5);
      --clarity-text-muted: oklch(0.801 0.008 98.9);
      --clarity-accent: oklch(0.800 0.120 49.6);
      --clarity-accent-strong: oklch(0.860 0.082 50.1);
      --clarity-on-accent: oklch(0.200 0.000 0.0);
      --clarity-focus: oklch(0.800 0.120 49.6);
      --clarity-input-number: oklch(0.800 0.099 257.1);
      --clarity-selected: oklch(0.259 0.030 43.3);
      --clarity-sheet-shadow: 0 -0.5rem 1.5rem oklch(0 0 0 / 0.5);
      --clarity-raised-shadow: 0 0.25rem 1rem oklch(0 0 0 / 0.5);
      --clarity-chart-mark-muted: oklch(0.632 0.009 106.6);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --clarity-page: oklch(0.200 0.000 0.0);
    --clarity-surface: oklch(0.247 0.002 106.5);
    --clarity-line: oklch(0.328 0.005 106.7);
    --clarity-control: oklch(0.648 0.010 106.7);
    --clarity-text: oklch(0.939 0.007 106.5);
    --clarity-text-muted: oklch(0.801 0.008 98.9);
    --clarity-accent: oklch(0.800 0.120 49.6);
    --clarity-accent-strong: oklch(0.860 0.082 50.1);
    --clarity-on-accent: oklch(0.200 0.000 0.0);
    --clarity-focus: oklch(0.800 0.120 49.6);
    --clarity-input-number: oklch(0.800 0.099 257.1);
    --clarity-selected: oklch(0.259 0.030 43.3);
    --clarity-sheet-shadow: 0 -0.5rem 1.5rem oklch(0 0 0 / 0.5);
    --clarity-raised-shadow: 0 0.25rem 1rem oklch(0 0 0 / 0.5);
    --clarity-chart-mark-muted: oklch(0.632 0.009 106.6);
  }

  /* Reduced motion (WCAG 2.2, SC 2.3.3): what moves changes at once. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --clarity-motion-duration: 0s;
    }
  }

  /* Under forced colours, the system's colours for the charts: forced
     colours leave an SVG's fill and stroke as they are, so a chart
     would keep the chosen mode's colours on the system's canvas. Its
     marks, rules and axes take the system's text colour, its muted
     marks GrayText, and its halos the canvas, under either mode. The
     tree's guides, which forced colours would draw in the text's
     colour, take GrayText too, as quiet as they are otherwise. */
  @media (forced-colors: active) {
    :root:not([data-theme]),
    :root[data-theme] {
      --clarity-chart-mark: CanvasText;
      --clarity-chart-mark-muted: GrayText;
      --clarity-chart-rule: CanvasText;
      --clarity-chart-halo: Canvas;
      --clarity-chart-axis: CanvasText;
      --clarity-tree-guide: GrayText;
      --clarity-chart-area: Canvas;
      --clarity-chart-area-muted: Canvas;
    }
  }
}

@layer base {
  html {
    font-family: var(--clarity-font);
    font-size: 100%;
    font-optical-sizing: auto;
    line-height: var(--clarity-leading);
    color: var(--clarity-text);
    background: var(--clarity-page);
  }

  /* The band of the accent across the top of the page. */
  body {
    margin: 0;
    border-block-start: var(--clarity-band-width) solid var(--clarity-accent);
  }

  h1,
  h2,
  h3 {
    line-height: var(--clarity-leading-tight);
    font-weight: var(--clarity-weight-bold);
    margin: 0;
  }

  h1 {
    font-size: var(--clarity-text-xl);
  }

  h2 {
    font-size: var(--clarity-text-lg);
  }

  h3 {
    font-size: var(--clarity-text-md);
  }

  p {
    margin: 0;
    max-width: var(--clarity-measure);
  }

  a {
    color: var(--clarity-accent);
    text-underline-offset: var(--clarity-underline-offset);

    &:hover {
      color: var(--clarity-accent-strong);
    }
  }

  :focus-visible {
    outline: var(--clarity-focus-width) solid var(--clarity-focus);
    outline-offset: var(--clarity-focus-offset);
  }

  /* Plot sets its own font and size on the SVG as presentation
     attributes, which any rule outranks, so that its text takes the
     page's font, figures and the chart's size. */
  svg[class^="plot-"] {
    color: var(--clarity-chart-axis);
    font-family: inherit;
    font-size: var(--clarity-text-chart);
    font-feature-settings: var(--clarity-numbers);
  }
}

@layer components {
  .clarity-chart {
    width: 100%;
    margin: 0;
  }

  /* The marks of the charts by their role (charts.cljc), over the
     attributes Plot writes. */
  .clarity-chart-range {
    stroke-width: var(--clarity-chart-range-width);
  }

  .clarity-chart-best-guess,
  .clarity-chart-threshold {
    stroke-width: var(--clarity-chart-rule-width);
  }

  .clarity-chart-point-answer {
    stroke-width: var(--clarity-chart-rule-width);
    stroke-dasharray: var(--clarity-chart-dash-point-answer);
  }

  .clarity-chart-spike {
    stroke-width: var(--clarity-chart-spike-width);
  }

  .clarity-chart-line,
  .clarity-chart-curve {
    stroke-width: var(--clarity-chart-line-width);
  }

  /* A density's area takes its fill from the mark; its line over it
     draws the edge. */
  .clarity-chart-area {
    stroke: none;
  }

  .clarity-chart-point-answer-label,
  .clarity-chart-threshold-label,
  .clarity-chart-interval-label {
    fill: var(--clarity-chart-axis);
  }

  /* The point answer's and the bar's labels stand over the curve on a
     halo, as a rule does. */
  .clarity-chart-point-answer-label,
  .clarity-chart-threshold-label {
    paint-order: stroke;
    stroke: var(--clarity-chart-halo);
    stroke-width: calc(2 * var(--clarity-chart-halo-width));
    stroke-linejoin: round;
  }

  .clarity-chart-tolerance {
    stroke-width: var(--clarity-chart-line-width-quiet);
    stroke-dasharray: var(--clarity-chart-dash-tolerance);
  }

  /* A rule's halo, beneath it: the rule's stroke widened by the halo's
     width to either side, solid under a dashed rule too. */
  .clarity-chart-halo-best-guess,
  .clarity-chart-halo-threshold,
  .clarity-chart-halo-point-answer {
    stroke-width: calc(var(--clarity-chart-rule-width)
        + 2 * var(--clarity-chart-halo-width));
  }

  .clarity-chart-halo-tolerance {
    stroke-width: calc(var(--clarity-chart-line-width-quiet)
        + 2 * var(--clarity-chart-halo-width));
  }

  .clarity-button {
    font: inherit;
    font-size: var(--clarity-text-sm);
    font-weight: var(--clarity-weight-medium);
    padding: var(--clarity-space-2) var(--clarity-space-4);
    border: var(--clarity-line-width) solid var(--clarity-accent);
    border-radius: var(--clarity-radius);
    color: var(--clarity-on-accent);
    background: var(--clarity-accent);
    cursor: pointer;

    &:hover {
      background: var(--clarity-accent-strong);
      border-color: var(--clarity-accent-strong);
    }

    &:disabled {
      color: var(--clarity-text-muted);
      background: var(--clarity-surface);
      border-color: var(--clarity-line);
      cursor: default;
    }
  }

  .clarity-button--quiet {
    color: var(--clarity-accent);
    background: var(--clarity-page);

    &:hover {
      color: var(--clarity-accent-strong);
      background: var(--clarity-surface);
    }
  }

  .clarity-field {
    display: grid;
    gap: var(--clarity-space-1);
    font-size: var(--clarity-text-sm);

    & label {
      font-weight: var(--clarity-weight-medium);
    }
  }

  .clarity-input {
    font: inherit;
    font-feature-settings: var(--clarity-numbers);
    padding: var(--clarity-space-2) var(--clarity-space-3);
    border: var(--clarity-line-width) solid var(--clarity-control);
    border-radius: var(--clarity-radius);
    color: var(--clarity-text);
    background: var(--clarity-page);

    &:disabled {
      color: var(--clarity-text-muted);
      background: var(--clarity-surface);
    }

    &[aria-invalid="true"] {
      border-width: var(--clarity-line-width-strong);
      border-color: var(--clarity-text);
    }
  }

  /* The page and rung 1's table (page.cljs, table.cljs). */
  .clarity-page {
    display: grid;
    gap: var(--clarity-space-5);
    max-width: var(--clarity-page-width);
    margin: 0 auto;
    padding: var(--clarity-space-5) var(--clarity-space-4);
  }

  /* The model switcher's line: the models, and the colour scheme at
     its end. */
  .clarity-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--clarity-space-2);
  }

  .clarity-models {
    display: flex;
    flex-wrap: wrap;
    gap: var(--clarity-space-2);
  }

  /* An opened file's button shows its label, the file's title, on one
     line, cut with an ellipsis; its full text stays its accessible
     name. A shipped model's label is the application's and shows in
     full. */
  .clarity-model-button--file {
    max-width: var(--clarity-model-label-max);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* The end of the switcher's line: the File menu, then the colour
     scheme, kept together on one line as the line wraps. */
  .clarity-switcher-end {
    display: flex;
    align-items: center;
    gap: var(--clarity-space-2);
    margin-inline-start: auto;
  }

  /* The File menu: a disclosure button over a list of buttons, the
     list raised over the page below it. */
  .clarity-file-menu {
    position: relative;
  }

  .clarity-file-menu-list {
    position: absolute;
    inset-block-start: calc(100% + var(--clarity-space-1));
    inset-inline-start: 0;
    z-index: 5;
    display: grid;
    min-width: max-content;
    margin: 0;
    padding: var(--clarity-space-1);
    list-style: none;
    border: var(--clarity-line-width) solid var(--clarity-line);
    border-radius: var(--clarity-radius);
    background: var(--clarity-page);
    box-shadow: var(--clarity-raised-shadow);

    &[hidden] {
      display: none;
    }
  }

  .clarity-file-menu-item {
    display: block;
    width: 100%;
    padding: var(--clarity-space-2) var(--clarity-space-3);
    border: 0;
    border-radius: var(--clarity-radius);
    font: inherit;
    font-size: var(--clarity-text-sm);
    text-align: start;
    color: var(--clarity-text);
    background: transparent;
    cursor: pointer;

    &:hover {
      background: var(--clarity-surface);
    }
  }

  .clarity-stale-note {
    max-width: var(--clarity-measure);
    color: var(--clarity-text);
  }

  /* The colour scheme: three radio buttons as one segmented control,
     the choice in the accent; the radios themselves are hidden, still
     focusable, and their focus rings their segment. */
  .clarity-scheme {
    display: flex;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--clarity-text-sm);
    font-weight: var(--clarity-weight-medium);
  }

  .clarity-scheme-option {
    position: relative;
    padding: var(--clarity-space-1) var(--clarity-space-3);
    border: var(--clarity-line-width) solid var(--clarity-control);
    color: var(--clarity-text);
    background: var(--clarity-page);
    cursor: pointer;

    & + & {
      margin-inline-start: calc(-1 * var(--clarity-line-width));
    }

    &:first-of-type {
      border-start-start-radius: var(--clarity-radius);
      border-end-start-radius: var(--clarity-radius);
    }

    &:last-of-type {
      border-start-end-radius: var(--clarity-radius);
      border-end-end-radius: var(--clarity-radius);
    }

    &:hover {
      background: var(--clarity-surface);
    }

    &:has(:checked) {
      z-index: 1;
      color: var(--clarity-on-accent);
      background: var(--clarity-accent);
      border-color: var(--clarity-accent);

      @media (forced-colors: active) {
        forced-color-adjust: none;
        color: var(--clarity-forced-on-selected);
        background: var(--clarity-forced-selected);
        border-color: var(--clarity-forced-selected);
      }
    }

    &:has(:focus-visible) {
      z-index: 2;
      outline: var(--clarity-focus-width) solid var(--clarity-focus);
      outline-offset: var(--clarity-focus-offset);

      @media (forced-colors: active) {
        outline-color: var(--clarity-forced-focus);
      }
    }

    & input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }
  }

  .clarity-status,
  .clarity-empty {
    color: var(--clarity-text-muted);
  }

  /* The page's status stays in the document while it is empty, so that
     a screen reader announces what appears in it; empty, it takes no
     place in the page's grid. */
  .clarity-status:empty {
    position: absolute;
  }

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

  .clarity-model {
    display: grid;
    gap: var(--clarity-space-5);
  }

  .clarity-model-head {
    display: grid;
    gap: var(--clarity-space-2);
  }

  .clarity-model-note {
    color: var(--clarity-text-muted);
    font-size: var(--clarity-text-sm);

    & summary {
      cursor: pointer;
      width: fit-content;
    }

    & p {
      margin-block-start: var(--clarity-space-1);
    }
  }

  .clarity-copy {
    padding-inline-start: var(--clarity-space-3);
    border-inline-start: var(--clarity-line-width-strong) solid
      var(--clarity-accent);
  }

  /* The headline: each result on one line, pinned at the top. */
  .clarity-headline {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    gap: var(--clarity-space-1);
    padding-block: var(--clarity-space-2);
    background: var(--clarity-page);
    border-block-end: var(--clarity-line-width) solid var(--clarity-line);
  }

  .clarity-headline:has(.clarity-history) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--clarity-space-3);
  }

  .clarity-headline-results {
    display: grid;
    gap: var(--clarity-space-1);
    min-width: 0;
  }

  /* Undo and Redo, at the headline's end. */
  .clarity-history {
    display: flex;
    gap: var(--clarity-space-2);

    & .clarity-button {
      padding: var(--clarity-space-1) var(--clarity-space-3);
    }
  }

  .clarity-headline-result {
    max-width: none;
    font-size: var(--clarity-text-md);
    font-weight: var(--clarity-weight-bold);
    line-height: var(--clarity-leading-tight);
  }

  /* A focused element scrolled into view stops below the headline,
     which would cover it (WCAG 2.2, 2.4.11), by the clearance the
     headline sets to its height. */
  html:has(.clarity-headline) {
    scroll-padding-top: var(--clarity-headline-clearance);
  }

  /* The grid and the note on the row selected, beside it in the margin
     on a wide screen and a sheet over the page's foot on a narrow one
     (below). */
  .clarity-body {
    display: grid;
    gap: var(--clarity-space-6);
    align-items: start;
  }

  .clarity-main {
    display: grid;
    gap: var(--clarity-space-6);
    min-width: 0;
  }

  /* Tabular figures sit on the numbers alone (.clarity-number): Inter's
     tnum widens the hyphen of a label. */
  .clarity-grid {
    --clarity-cell-block: var(--clarity-space-2);
    --clarity-cell-inline: var(--clarity-space-2);
    width: 100%;
    border-collapse: collapse;

    & th,
    & td {
      padding: var(--clarity-cell-block) var(--clarity-cell-inline);
      text-align: start;
      vertical-align: baseline;
      font-weight: var(--clarity-weight-regular);
    }
  }

  .clarity-row,
  .clarity-line {
    border-block-end: var(--clarity-line-width) solid var(--clarity-line);
  }

  /* The row the result is compared to, the bar, follows the result's
     operands set apart: space and a strong rule above it. The grid's
     class outweighs its cells' own padding. */
  .clarity-grid .clarity-row--comparison > * {
    border-block-start: var(--clarity-line-width-strong) solid
      var(--clarity-control);
    padding-block-start: calc(var(--clarity-cell-block)
      + var(--clarity-space-4));
  }

  .clarity-row {
    cursor: pointer;

    &:hover {
      background: var(--clarity-surface);
    }
  }

  /* The marks at a row's start sit on its first cell, where every
     browser draws a box shadow. */
  .clarity-row--problem > th,
  .clarity-row-problem-line > td {
    box-shadow: inset var(--clarity-line-width-strong) 0 0
      var(--clarity-problem);
  }

  .clarity-row--selected,
  .clarity-row--selected:hover {
    background: var(--clarity-selected);

    & > th {
      box-shadow: inset var(--clarity-selected-width) 0 0
        var(--clarity-accent);
    }
  }

  /* On a wide screen an editable input's range and value cells, where
     a double-click opens the inline editor, read as a field under the
     pointer: a text cursor, and the page's colour inside a rule, the
     two cells one box, on the row's own colour. */
  @media (min-width: 60rem) {
    .clarity-row--editable {
      & > .clarity-row-range,
      & > .clarity-row-number {
        cursor: text;
      }

      &:has(> .clarity-row-range:hover, > .clarity-row-number:hover) {
        & > .clarity-row-range,
        & > .clarity-row-number {
          background: var(--clarity-page);
        }

        & > .clarity-row-range {
          box-shadow: inset var(--clarity-line-width) var(--clarity-line-width)
            0 0 var(--clarity-control), inset 0 calc(-1 * var(--clarity-line-width))
            0 0 var(--clarity-control);
        }

        & > .clarity-row-number {
          box-shadow: inset calc(-1 * var(--clarity-line-width))
            var(--clarity-line-width) 0 0 var(--clarity-control),
            inset 0 calc(-1 * var(--clarity-line-width)) 0 0
            var(--clarity-control);
        }
      }
    }
  }

  .clarity-row-button {
    font: inherit;
    color: inherit;
    text-align: start;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* On a wide screen a row keeps to one line, the value and unit
     unbroken; on a narrow one a range's value and a unit wrap at their
     spaces, so that the grid never scrolls sideways. */
  .clarity-grid .clarity-row-number {
    text-align: end;
  }

  @media (min-width: 54rem) {
    .clarity-grid .clarity-row-number {
      white-space: nowrap;
    }
  }

  /* The range and the unit wrap at their spaces wherever the table
     would otherwise outgrow its track, which kept to one line they did
     between 60 and 65 rem and, with the shrimp model's ranges of
     billions, at 80 (docs/plan.md, section 7); with room, they keep to
     one line, the table being as wide as its columns. */

  /* On a narrow screen the tree steps less and the cells pad less, and a
     label too long for what is left is hyphenated, as the page's
     language allows, or else broken anywhere, so that a deep line still
     fits beside its value and unit. */
  @media (max-width: 53.99rem) {
    .clarity-grid {
      --clarity-tree-indent: var(--clarity-tree-indent-narrow);
      --clarity-tree-guide-offset: var(--clarity-tree-guide-offset-narrow);
      --clarity-cell-inline: var(--clarity-space-1);

      & .clarity-row-label {
        overflow-wrap: anywhere;
        hyphens: auto;
      }
    }
  }

  /* A label's text keeps to its measure; the disclosure, operator and
     indent before it are the tree's, outside it. */
  .clarity-grid .clarity-line-target {
    max-width: var(--clarity-label-max);
  }

  /* The label takes what the value and unit leave, which keep their
     own width. The model's tree indents a line a step per level below
     the first; the level is the line's --clarity-level, a datum and no
     visual decision. A row's problems are indented as its line is. */
  .clarity-grid .clarity-row-label,
  .clarity-row-problem-line > td {
    position: relative;
    padding-inline-start: calc(var(--clarity-cell-inline)
        + var(--clarity-tree-indent) * (var(--clarity-level, 1) - 1));
  }

  .clarity-grid .clarity-row-label {
    width: 100%;
  }

  /* A line's guides, one per column of its indent (tree.cljc): a pass,
     a vertical through the line; a tee, a vertical through it and a
     stub to its disclosure, operator or text; an elbow, a vertical from
     the line's top to the stub; none, nothing. The stub meets the
     middle of the line's first text line, the cell's block padding and
     half its leading down, whatever the label's wrapping; a problem's
     line has no stub. Each column's guide sits where the guides of the
     lines above and below sit, at the column's offset in its step. */
  .clarity-guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    forced-color-adjust: none;
  }

  .clarity-guide {
    --clarity-tree-stub-at: calc(var(--clarity-cell-block)
        + 1em * var(--clarity-leading) / 2
        - var(--clarity-line-width) / 2);
    position: absolute;
    /* Over the row's border too, which lies between the cells, so that
       a vertical runs on into the line below unbroken. */
    inset-block: 0 calc(-1 * var(--clarity-line-width));
    inset-inline-start: calc(var(--clarity-cell-inline)
        + var(--clarity-tree-indent) * (var(--clarity-guide-column) - 1)
        + var(--clarity-tree-guide-offset));
    border-inline-start: var(--clarity-line-width) solid
      var(--clarity-tree-guide);
  }

  .clarity-guide--none {
    display: none;
  }

  .clarity-guide--elbow {
    inset-block-end: auto;
    block-size: calc(var(--clarity-tree-stub-at)
        + var(--clarity-line-width));
  }

  .clarity-guide--tee::after,
  .clarity-guide--elbow::after {
    content: "";
    position: absolute;
    inset-block-start: var(--clarity-tree-stub-at);
    inset-inline-start: 0;
    inline-size: calc(var(--clarity-tree-indent)
        - var(--clarity-tree-guide-offset) - var(--clarity-line-width)
        - var(--clarity-tree-stub-gap));
    border-block-start: var(--clarity-line-width) solid
      var(--clarity-tree-guide);
  }

  .clarity-line-head {
    display: flex;
    align-items: baseline;
    gap: var(--clarity-space-1);
  }

  .clarity-disclosure,
  .clarity-disclosure-space {
    flex: none;
    inline-size: var(--clarity-disclosure-size);
  }

  .clarity-disclosure {
    font: inherit;
    color: var(--clarity-control);
    padding: 0;
    border: 0;
    border-radius: var(--clarity-radius);
    background: none;
    cursor: pointer;
  }

  /* A triangle drawn in the control's colour, pointing down while the
     parent is expanded and to the end while it is collapsed: the
     typeface's subset has no such glyph. */
  .clarity-disclosure-mark {
    display: inline-block;
    border-inline: var(--clarity-disclosure-mark) solid transparent;
    border-block-start: calc(var(--clarity-disclosure-mark) * 1.4) solid
      currentColor;
    vertical-align: middle;
  }

  .clarity-disclosure[aria-expanded="false"] .clarity-disclosure-mark {
    transform: rotate(-90deg);
  }

  .clarity-operator {
    color: var(--clarity-text-muted);
    font-feature-settings: var(--clarity-numbers);
  }

  /* An input's number is in the blue of inputs, in the grid and in its
     note, and a computed row's value in the text's colour, a step
     heavier, as the audience's spreadsheets set their inputs apart
     from their formulas. */
  .clarity-number--input {
    color: var(--clarity-input-number);
  }

  .clarity-row--computed {
    & .clarity-row-button,
    & .clarity-row-number .clarity-number {
      font-weight: var(--clarity-weight-medium);
      color: var(--clarity-text);
    }
  }

  /* A line without a row of its own, and a row read again, are muted. */
  .clarity-line {
    color: var(--clarity-text-muted);
    font-size: var(--clarity-text-sm);
  }

  .clarity-reference-button {
    font: inherit;
    color: inherit;
    text-align: start;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: var(--clarity-underline-offset);
  }

  /* A heading of the sidebar's parts. */
  .clarity-formula-heading {
    margin: 0;
    font-size: var(--clarity-text-xs);
    font-weight: var(--clarity-weight-bold);
    color: var(--clarity-text-muted);
  }

  .clarity-grid .clarity-row-unit {
    min-width: var(--clarity-unit-width);
    color: var(--clarity-text-muted);
    font-size: var(--clarity-text-sm);
  }

  /* Rung 2's columns before the value (docs/plan.md, section 3.3): a
     distribution's sparkline, decorative, and its range on the line,
     its coverage printed only when not 90 %, which the header states;
     the value column shows its median. The header row is shown once a
     line is a distribution, its label and unit columns named for a
     screen reader only. */
  .clarity-grid .clarity-row-range {
    text-align: end;
  }

  .clarity-grid .clarity-row-sparkline {
    vertical-align: middle;
    line-height: 0;
  }

  .clarity-grid-head th {
    padding-block: var(--clarity-space-1);
    font-size: var(--clarity-text-xs);
    font-weight: var(--clarity-weight-bold);
    color: var(--clarity-text-muted);
    white-space: nowrap;
    border-block-end: var(--clarity-line-width) solid var(--clarity-line);
    vertical-align: bottom;

    &.clarity-row-range,
    &.clarity-row-number {
      text-align: end;
    }
  }

  .clarity-sparkline {
    display: block;
    overflow: visible;
    forced-color-adjust: none;
  }

  .clarity-sparkline-area {
    fill: var(--clarity-chart-area);
  }

  .clarity-sparkline-line {
    fill: none;
    stroke: var(--clarity-chart-mark);
    stroke-width: var(--clarity-sparkline-line-width);
    stroke-linejoin: round;
  }

  .clarity-sparkline-tick {
    stroke: var(--clarity-chart-rule);
    stroke-width: var(--clarity-sparkline-tick-width);
  }

  /* The drop order as the screen narrows (Decided by Jonas,
     2026-10-19), its breakpoints measured (docs/plan.md, section 7):
     the sparkline first, below 78 rem, where the deepest label would
     wrap to a third line; then a distribution's median, below 36 rem,
     where four columns left the labels too little, so that a phone
     shows its low and high only; a number keeps its number. */
  @media (max-width: 77.99rem) {
    .clarity-grid .clarity-row-sparkline {
      display: none;
    }
  }

  /* A phone's line keeps three columns: a distribution's range moves
     into the value column, in place of its median, which it drops. */
  .clarity-grid .clarity-value-range {
    display: none;
  }

  @media (max-width: 35.99rem) {
    .clarity-grid .clarity-row-range,
    .clarity-grid .clarity-median {
      display: none;
    }

    .clarity-grid .clarity-value-range {
      display: inline;
      font-size: var(--clarity-text-sm);
    }

    .clarity-grid-head th {
      white-space: normal;
    }
  }

  /* The headline keeps to one line: a distribution's range goes first,
     below the width at which it wrapped; at rung 3, where the chance of
     clearing the bar takes the range's place (view_model.cljc), the
     chance's frequency, below the width at which the grant model's
     headline wrapped with it where it had not without it (measured,
     docs/results/u1/rung3/). */
  @media (max-width: 39.99rem) {
    .clarity-headline-range {
      display: none;
    }
  }

  @media (max-width: 74.99rem) {
    .clarity-headline-frequency {
      display: none;
    }
  }

  /* A distribution's value in its note and the outcome: its median,
     its range in full and its best guess, a line each; its charts. */
  .clarity-row-value--distribution {
    display: grid;
    gap: var(--clarity-space-1);

    & p {
      margin: 0;
    }

    /* The median leads; the range and the best guess follow at the
       text's size. */
    & p:not(:first-child) .clarity-number {
      font-size: inherit;
      font-weight: var(--clarity-weight-medium);
    }
  }

  .clarity-note-charts,
  .clarity-published-ranges,
  .clarity-reference-source {
    display: grid;
    gap: var(--clarity-space-2);
  }

  .clarity-published {
    display: grid;
    gap: var(--clarity-space-2);
    margin: 0;
    padding-inline-start: var(--clarity-space-4);

    & p {
      margin: 0;
    }
  }

  .clarity-row-problem-line td {
    padding-block-start: 0;
    border-block-end: var(--clarity-line-width) solid var(--clarity-line);
  }

  /* The outcome below the grid. */
  .clarity-outcome {
    display: grid;
    gap: var(--clarity-space-3);
  }

  /* A section's heading, set apart from the grid above it by space and
     not by a band, which would read as a header row of the table. */
  .clarity-outcome-heading {
    padding-block-start: var(--clarity-space-4);
    font-size: var(--clarity-text-lg);
  }

  /* A result: its label, its chart's caption, the chart as wide as
     the main track, which the outcome's text, kept to the measure,
     is not (charts.cljc's :main size, its height there), and the
     chance under it. */
  .clarity-result {
    display: grid;
    gap: var(--clarity-space-2);
  }

  .clarity-result-label {
    font-size: var(--clarity-text-md);
    font-weight: var(--clarity-weight-medium);
  }

  /* The sidebar, a box on a narrow screen, where it is a sheet; while
     it has nothing to show it is hidden and empty, at every width. */
  .clarity-details {
    display: grid;
    align-content: start;
    gap: var(--clarity-space-4);
    padding: var(--clarity-space-4);
    background: var(--clarity-page);
    border: var(--clarity-line-width) solid var(--clarity-line);
    border-radius: var(--clarity-radius);

    &[hidden] {
      display: none;
    }

    & p {
      margin: 0;
      max-width: none;
    }
  }

  .clarity-details-part,
  .clarity-sidebar-panel {
    display: grid;
    gap: var(--clarity-space-2);
  }

  /* Its head: the tabs and Close, quiet underlined text controls, the
     tab shown in the text's colour and bold, a tab without content
     muted and not underlined; the margin note's own marks. */
  .clarity-details-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--clarity-space-3);
  }

  .clarity-sidebar-tabs {
    display: flex;
    gap: var(--clarity-space-4);
  }

  .clarity-sidebar-tab,
  .clarity-details-head .clarity-sidebar-close {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--clarity-text-xs);
    line-height: var(--clarity-sidebar-label-leading);
    color: var(--clarity-text-muted);
    text-decoration: underline;
    text-underline-offset: var(--clarity-underline-offset);
    cursor: pointer;
  }

  .clarity-sidebar-tab--selected {
    color: var(--clarity-text);
    font-weight: var(--clarity-weight-bold);
    text-decoration: none;
  }

  .clarity-sidebar-tab:disabled {
    color: var(--clarity-text-muted);
    text-decoration: none;
    cursor: default;
  }

  /* The kicker over the row's label: its kind, muted. */
  .clarity-details-kind {
    font-size: var(--clarity-text-xs);
    color: var(--clarity-text-muted);
  }

  .clarity-details-label {
    font-size: var(--clarity-text-md);
  }

  /* Wide: the page is one grid of four tracks (the tokens' comment),
     and the sidebar sits in its own track at the viewport's right
     edge, sticky under the headline, no taller than the viewport
     leaves, scrolling within itself, with no box: a rule at its start.
     Opening it, its track grows from 0 and the sidebar, as wide as it
     is open, comes in from the right edge, past which the page clips
     it, while the main block moves or narrows in the same motion;
     closing it, the sidebar goes at once and the main block returns
     in that motion. */
  @media (min-width: 60rem) {
    /* The table is as wide as its columns: the label's up to its
       measure, the numbers' at their content. */
    .clarity-grid {
      width: auto;

      & .clarity-row-label {
        width: auto;
      }
    }

    /* The space the main block keeps free at its right, beyond its
       gap: a gutter while the sidebar is closed, the sidebar's track,
       which begins with the gap, while it is open; each track is
       written in it. */
    .clarity-page {
      --clarity-sidebar-track: 0px;
      max-width: none;
      padding-inline: 0;
      column-gap: 0;
      overflow-x: clip;
      grid-template-columns:
        [gutter-start] max(var(--clarity-gutter),
          min((100% - var(--clarity-main-width)) / 2,
            100% - max(var(--clarity-gutter), var(--clarity-sidebar-track))
              - var(--clarity-main-width)))
        [main-start] minmax(0, min(var(--clarity-main-width),
          100% - max(var(--clarity-gutter), var(--clarity-sidebar-track))
            - var(--clarity-gutter)))
        [main-end] minmax(0, 1fr)
        [sidebar-start] var(--clarity-sidebar-track)
        [sidebar-end gutter-end];
      transition: --clarity-sidebar-track var(--clarity-motion-duration)
        var(--clarity-motion-easing);
    }

    .clarity-page:has(.clarity-details--open) {
      --clarity-sidebar-track: var(--clarity-sidebar-width);
    }

    .clarity-page > * {
      grid-column: main;
    }

    .clarity-model {
      grid-column: gutter-start / gutter-end;
      grid-template-columns: subgrid;
      column-gap: 0;
    }

    .clarity-model > * {
      grid-column: main;
    }

    /* The headline spans the main track without widening it, and the
       title keeps the measure. */
    .clarity-headline,
    .clarity-ladder {
      width: 0;
      min-width: 100%;
    }

    .clarity-model-head h1 {
      max-width: var(--clarity-measure);
    }

    .clarity-body {
      grid-column: main-start / sidebar-end;
      grid-template-columns: subgrid;
      column-gap: 0;
    }

    .clarity-main {
      grid-column: main;
    }

    .clarity-details {
      grid-column: sidebar;
      justify-self: start;
      box-sizing: border-box;
      width: calc(var(--clarity-sidebar-width) - var(--clarity-sidebar-gap));
      position: sticky;
      top: var(--clarity-headline-clearance);
      align-self: start;
      /* The cap at its sticky place; `table/details` lowers it while
         the sidebar stands lower, before the page scrolls. */
      max-height: calc(100vh - var(--clarity-headline-clearance));
      overflow-y: auto;
      margin-inline-start: var(--clarity-sidebar-gap);
      /* Above its head, room for a control's focus ring, which its
         own scroll would clip. */
      padding: calc(var(--clarity-focus-width) + var(--clarity-focus-offset))
        var(--clarity-gutter) var(--clarity-space-4)
        var(--clarity-sidebar-inset);
      border: 0;
      border-inline-start: var(--clarity-sidebar-rule-width) solid
        var(--clarity-accent);
      border-radius: 0;
      background: none;
      gap: var(--clarity-space-3);
      font-size: var(--clarity-sidebar-text);
      line-height: var(--clarity-sidebar-leading);
    }

    /* The sidebar's hierarchy: the row's label or the reading's title
       bold at the tight leading; the value as the table sets it, an
       input's in the blue of inputs, a computed row's medium in the
       text's colour; the prose and the source in the text's colour,
       the basis on a line of its own. */
    .clarity-details .clarity-details-label,
    .clarity-details .clarity-reading-title {
      font-size: var(--clarity-sidebar-text);
      font-weight: var(--clarity-weight-bold);
      line-height: var(--clarity-sidebar-label-leading);
      text-wrap: balance;
    }

    .clarity-details .clarity-row-value
      .clarity-number:not(.clarity-number--input) {
      font-weight: var(--clarity-weight-medium);
    }

    .clarity-details .clarity-row-note,
    .clarity-details .clarity-row-source {
      font-size: inherit;
      color: var(--clarity-text);
    }

    .clarity-details .clarity-row-source {
      display: grid;
      gap: var(--clarity-space-1);
      justify-items: start;

      & .clarity-basis {
        margin: 0;
        color: var(--clarity-text-muted);
      }
    }
  }

  /* Narrow: the sidebar is a sheet over the page's foot (docs/plan.md,
     section 1, explanations on demand), and a focused element scrolled
     into view stops above it. */
  @media (max-width: 59.99rem) {
    .clarity-details--open {
      box-sizing: border-box;
      position: fixed;
      inset: auto 0 0;
      z-index: 3;
      max-height: var(--clarity-sheet-height);
      overflow-y: auto;
      border-radius: var(--clarity-radius) var(--clarity-radius) 0 0;
      box-shadow: 0 -1px 0 var(--clarity-line), var(--clarity-sheet-shadow);
    }

    html:has(.clarity-details--open) {
      scroll-padding-bottom: var(--clarity-sheet-height);
    }

    .clarity-main:has(~ .clarity-details--open) {
      padding-block-end: var(--clarity-sheet-height);
    }
  }

  .clarity-number {
    font-feature-settings: var(--clarity-numbers);
  }

  .clarity-unit,
  .clarity-multiple {
    color: var(--clarity-text-muted);
  }

  .clarity-multiple {
    display: block;
    font-size: var(--clarity-text-sm);
  }

  .clarity-row-source,
  .clarity-row-note {
    font-size: var(--clarity-text-sm);
  }

  .clarity-row-source {
    color: var(--clarity-text-muted);
  }

  .clarity-basis {
    display: inline-block;
    margin-inline-end: var(--clarity-space-2);
    padding-inline: var(--clarity-space-1);
    font-size: var(--clarity-text-xs);
    border: var(--clarity-line-width) solid var(--clarity-line);
    border-radius: var(--clarity-radius);
  }

  .clarity-row-problems {
    margin: 0;
    padding-inline-start: var(--clarity-space-4);
    font-size: var(--clarity-text-sm);
    font-weight: var(--clarity-weight-medium);
    color: var(--clarity-problem);
  }

  .clarity-field-message {
    color: var(--clarity-text-muted);
    font-size: var(--clarity-text-xs);
  }

  /* Rung 2's editors: the note's field, read on Enter or on leaving it,
     its problems beneath it; the inline editor across a line's range
     and value cells; the published ranges' actions; the offer of every
     first published range below the results. */
  .clarity-editor {
    justify-items: start;

    & .clarity-input {
      box-sizing: border-box;
      width: 100%;
    }
  }

  .clarity-field-problems {
    margin: 0;
    padding-inline-start: var(--clarity-space-4);
    font-size: var(--clarity-text-sm);
    font-weight: var(--clarity-weight-medium);
    color: var(--clarity-problem);
  }

  .clarity-row-editor {
    & .clarity-input {
      box-sizing: border-box;
      width: 100%;
      min-width: 10rem;
      padding: var(--clarity-space-1) var(--clarity-space-2);
    }

    & .clarity-field-problems {
      margin-block-start: var(--clarity-space-1);
    }
  }

  .clarity-published .clarity-button {
    margin-block-start: var(--clarity-space-1);
  }

  /* The ladder, above the table: every rung of U1 on one line, joined
     by a short connector, each reached rung's mark filled in the accent
     and the latest's words emphasized, the rungs still to come quiet.
     It does not navigate, so nothing in it looks like a control. */
  .clarity-ladder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--clarity-space-1) var(--clarity-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--clarity-text-sm);
    line-height: var(--clarity-leading-tight);
    color: var(--clarity-text-muted);
  }

  .clarity-rung {
    display: inline-flex;
    align-items: center;
    gap: var(--clarity-space-1);
    white-space: nowrap;

    & + .clarity-rung::before {
      content: "";
      width: var(--clarity-rung-connector);
      margin-inline-end: var(--clarity-space-1);
      border-block-start: var(--clarity-line-width) solid
        var(--clarity-control);
    }
  }

  .clarity-rung-mark {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--clarity-rung-mark-size);
    height: var(--clarity-rung-mark-size);
    font-size: var(--clarity-text-xs);
    font-feature-settings: var(--clarity-numbers);
    border: var(--clarity-line-width) solid var(--clarity-control);
    border-radius: 50%;
  }

  .clarity-rung--reached {
    color: var(--clarity-text);

    & .clarity-rung-mark {
      color: var(--clarity-on-accent);
      background: var(--clarity-accent);
      border-color: var(--clarity-accent);
    }
  }

  .clarity-rung--latest .clarity-rung-words {
    font-weight: var(--clarity-weight-bold);
  }

  /* On a phone the ladder is its marks, with the latest rung's words
     beside its mark, closer together; the other rungs' words are read,
     not shown. */
  @media (max-width: 39.99rem) {
    .clarity-ladder {
      column-gap: var(--clarity-space-1);
    }

    .clarity-rung + .clarity-rung::before {
      width: var(--clarity-space-2);
    }

    .clarity-rung:not(.clarity-rung--latest) .clarity-rung-words {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* Rung 3: the chance of clearing the bar under the result's chart,
     and the action that climbs to it. */
  .clarity-chance {
    margin: 0;
  }

  .clarity-compare {
    display: grid;
    gap: var(--clarity-space-2);
    justify-items: start;
  }

  .clarity-compare-note {
    margin: 0;
    font-size: var(--clarity-text-sm);
    color: var(--clarity-text-muted);
  }

  .clarity-every-first {
    display: grid;
    gap: var(--clarity-space-2);
    justify-items: start;
  }

  .clarity-every-first-note {
    margin: 0;
    font-size: var(--clarity-text-sm);
    color: var(--clarity-text-muted);
  }

  /* The tab bar between the table and the views without it, apart
     from the ladder: quiet text tabs on a rule, the tab shown in the
     text's colour over the accent's underline. */
  .clarity-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--clarity-space-4);
    border-block-end: var(--clarity-line-width) solid var(--clarity-line);
  }

  .clarity-tab {
    font: inherit;
    font-size: var(--clarity-text-sm);
    font-weight: var(--clarity-weight-medium);
    margin-block-end: calc(-1 * var(--clarity-line-width));
    padding: var(--clarity-space-2) 0;
    border: 0;
    border-block-end: var(--clarity-selected-width) solid transparent;
    color: var(--clarity-text-muted);
    background: none;
    cursor: pointer;

    &:hover {
      color: var(--clarity-text);
    }
  }

  .clarity-tab--selected {
    color: var(--clarity-text);
    border-block-end-color: var(--clarity-accent);
  }

  /* Rung 4: what moves the result. Each line's texts and control sit
     over its row of the chart (charts/geometry), its label and parent
     at the start, shortened with an ellipsis where the row is too
     narrow, its low and high at the end. */
  .clarity-moves {
    display: grid;
    gap: var(--clarity-space-3);
  }

  .clarity-moves-measure,
  .clarity-moves-note,
  .clarity-path {
    margin: 0;
    max-width: var(--clarity-measure);
  }

  .clarity-moves-note {
    font-size: var(--clarity-text-sm);
    color: var(--clarity-text-muted);
  }

  .clarity-swings {
    position: relative;
  }

  .clarity-swing-rows {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  .clarity-swing {
    position: absolute;
    inset-inline: 0;
    box-sizing: border-box;
  }

  /* Two lines above the line: the input's label, then its parent's
     and its low and high, so that a phone shows all three. */
  .clarity-swing-button {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    gap: 0 var(--clarity-space-3);
    width: 100%;
    height: 100%;
    padding: var(--clarity-space-1) var(--clarity-space-2) 0;
    border: 0;
    border-radius: var(--clarity-radius);
    font: inherit;
    font-size: var(--clarity-text-xs);
    line-height: var(--clarity-leading-tight);
    text-align: start;
    color: var(--clarity-text);
    background: none;
    pointer-events: auto;
  }

  button.clarity-swing-button {
    cursor: pointer;

    &:hover .clarity-swing-input {
      text-decoration: underline;
      text-underline-offset: var(--clarity-underline-offset);
    }
  }

  /* The row selected is marked at its start, as the table's is; no
     tint over the chart, which would mute its line. */
  .clarity-swing--selected .clarity-swing-button {
    box-shadow: inset var(--clarity-selected-width) 0 0 var(--clarity-accent);
  }

  /* The texts stand on the page's colour, so that the bar's rule and
     the grid pass behind them. */
  .clarity-swing-input,
  .clarity-swing-parent,
  .clarity-swing-values {
    background: var(--clarity-page);
  }

  .clarity-swing-input,
  .clarity-swing-parent {
    justify-self: start;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .clarity-swing-input {
    grid-column: 1 / -1;
    font-weight: var(--clarity-weight-medium);
  }

  .clarity-swing-parent {
    color: var(--clarity-text-muted);
  }

  .clarity-swing-values {
    justify-self: end;
    color: var(--clarity-text-muted);
    white-space: nowrap;
  }

  .clarity-swings--muted .clarity-swing-button {
    color: var(--clarity-text-muted);
  }

  .clarity-chart-swing {
    stroke-width: var(--clarity-chart-line-width);
  }

  /* Rung 5: what to measure. Each bar's texts and control sit over its
     row of the chart (charts/geometry), indented by its depth in the
     tree, its label at the start and its value at the end, on one line
     shortened with an ellipsis where the row is too narrow; the bars
     share one scale from 0, a parent's marked by its disclosure, under
     the dashed rule of the expected loss. */
  .clarity-measure {
    display: grid;
    gap: var(--clarity-space-3);
  }

  .clarity-measure-loss {
    margin: 0;
    max-width: var(--clarity-measure);
    font-weight: var(--clarity-weight-medium);
  }

  .clarity-worth-button {
    padding-inline-start: calc(var(--clarity-space-2)
        + var(--clarity-worth-depth, 0) * var(--clarity-space-4));
  }

  /* The label holds its hidden words, which would otherwise lie past
     its ellipsis and widen the page on a phone. */
  .clarity-worth-button .clarity-swing-input {
    position: relative;
    grid-column: 1;
  }

  /* A parent's disclosure, a chevron drawn by two borders, since the
     typeface has no triangle: pointing down while its group is open,
     right while folded. */
  .clarity-worth-parent .clarity-swing-input::before {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-inline-end: 0.45em;
    border-inline-end: 0.12em solid var(--clarity-text-muted);
    border-block-end: 0.12em solid var(--clarity-text-muted);
    transform: translateY(-0.2em) rotate(45deg);
  }

  .clarity-worth-parent[aria-expanded="false"] .clarity-swing-input::before {
    transform: rotate(-45deg);
  }

  .clarity-chart-worth,
  .clarity-chart-worth-parent {
    stroke-width: var(--clarity-chart-bar-width);
  }

  .clarity-chart-loss {
    stroke-width: var(--clarity-chart-rule-width);
    stroke-dasharray: var(--clarity-chart-dash-loss);
  }

  .clarity-chart-halo-loss {
    stroke-width: calc(var(--clarity-chart-rule-width)
        + 2 * var(--clarity-chart-halo-width));
  }

  .clarity-chart-loss-label {
    fill: var(--clarity-chart-axis);
    paint-order: stroke;
    stroke: var(--clarity-chart-halo);
    stroke-width: calc(2 * var(--clarity-chart-halo-width));
    stroke-linejoin: round;
  }

  /* A job's line over its muted chart: what it does or why it stopped,
     and its control. */
  .clarity-job-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--clarity-space-2) var(--clarity-space-3);
    margin: 0;
    font-size: var(--clarity-text-sm);

    & p {
      margin: 0;
    }
  }

  /* Explanations on demand (explanation.cljs): a term is a button with
     a dotted underline in the text it stands in, its toggletip a box
     below it. The tip begins where the term ends, its gap a padding of
     its own, so that the pointer moves from the term into it without
     leaving either (WCAG 2.2, SC 1.4.13). */
  .clarity-term {
    position: relative;
  }

  /* A button lays out as an inline block whatever its display: its
     padding takes a term on a line of 20 px to the 24 px of a target's
     least size (WCAG 2.2, SC 2.5.8), and the margin that takes it back
     keeps the line as it was. */
  .clarity-term-button {
    display: inline;
    padding: 0.125rem 0;
    border: 0;
    margin: -0.125rem 0;
    font: inherit;
    font-feature-settings: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    color: inherit;
    background: none;
    text-decoration: underline dotted;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--clarity-underline-offset);
    cursor: help;
  }

  /* A term whose button holds marks beside its words, a quotation's,
     underlines its words alone. */
  .clarity-term-button:has(> .clarity-term-words) {
    text-decoration: none;
  }

  .clarity-term-words {
    text-decoration: underline dotted;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--clarity-underline-offset);
  }

  .clarity-tip {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 5;
    display: block;
    width: max-content;
    max-width: min(var(--clarity-tip-width), calc(100vw - 2rem));
    padding-block-start: var(--clarity-space-1);
    font-size: var(--clarity-text-sm);
    font-weight: var(--clarity-weight-regular);
    line-height: var(--clarity-leading);
    text-align: start;
    white-space: normal;
    color: var(--clarity-text);
  }

  .clarity-tip-box {
    display: grid;
    gap: var(--clarity-space-2);
    justify-items: start;
    padding: var(--clarity-space-3);
    border: var(--clarity-line-width) solid var(--clarity-control);
    border-radius: var(--clarity-radius);
    background: var(--clarity-page);
    box-shadow: var(--clarity-raised-shadow);
  }

  .clarity-tip-more {
    padding: 0;
    border: 0;
    font: inherit;
    font-weight: var(--clarity-weight-medium);
    color: var(--clarity-accent);
    background: none;
    text-decoration: underline;
    text-underline-offset: var(--clarity-underline-offset);
    cursor: pointer;
  }

  /* Where the browser positions by anchors, the tip is fixed to its
     open term and flips to whichever side the viewport has room on,
     so that it never widens the page; where no side holds its width,
     a phone's term near the edge, it spans the viewport's width below
     or above the term, else the browser keeps it below, off the
     screen (measured, section 7). */
  @supports (position-area: block-end) {
    @position-try --clarity-tip-below-all {
      position-area: block-end span-all;
    }

    @position-try --clarity-tip-above-all {
      position-area: block-start span-all;
    }

    .clarity-term--open > .clarity-term-button {
      anchor-name: --clarity-term;
    }

    .clarity-tip {
      position: fixed;
      position-anchor: --clarity-term;
      inset: auto;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-inline, flip-block,
        flip-block flip-inline, --clarity-tip-below-all,
        --clarity-tip-above-all;
    }
  }

  .clarity-chart-caption {
    margin: 0;
    font-size: var(--clarity-text-sm);
    color: var(--clarity-text-muted);
  }

  /* The longer reading in the sidebar's Explanation tab: its title, its
     short text medium, then its paragraphs. */
  .clarity-reading {
    display: grid;
    gap: var(--clarity-space-3);
  }

  .clarity-reading-title {
    margin: 0;
    font-size: var(--clarity-text-md);
    font-weight: var(--clarity-weight-bold);
    line-height: var(--clarity-leading-tight);
  }

  .clarity-reading-short {
    font-weight: var(--clarity-weight-medium);
  }
}