/* Every shared element of the brand, plain CSS, one file each, with the four scales. A surface
   imports this file or the elements it uses (@hackersandwizards/brand/elements/<name>.css, plus
   scales.css), after tokens.css (and print.css on paper). Each element is an hw-* class, its
   variants data-* attributes, night the nearest data-theme being "dark" (a data-theme="light" inside a dark one turns its subtree back to day). The rules sit in
   @layer components, so a surface's utilities win; brand-elements measures that they still match.
   The list marker is tokens/marker.css (export ./marker.css). */
/* The four scales of the elements: one rule, sized for how each medium is seen. A medium sets only
   measures here (sizes, padding, corners, line widths, and the line colour paper needs), never a
   colour or a shape of its own. Put data-hw-scale on the page's root or on any container; an
   element without one takes the screen values, the website's.

   screen  the website and the verifier, CSS px at desk distance
   dense   the apps (os, trainer hub) and the talks site: the expert set's UI sizes, and the
           compact type steps and heights its components read
   print   documents, A4 in pt. The type sizes are print.css's paper roles, which the page loads
           (print.css owns them); this preset sets the geometry
   stage   slides on the 1440 stage, whose rem is 1/90 of the slide's width: the website's px times
           1.5 in rem, the hairline and corner the slide engine measured for a room */

[data-hw-scale="screen"] {
  --hw-label-size: var(--text-label);
  --hw-pill-size: var(--text-small);
  --hw-pill-pad: 0.125rem 0.625rem;
  --hw-table-size: var(--text-small);
  --hw-code-size: var(--text-small);
  --hw-hairline: 1px;
  --hw-line: var(--color-border);
  --hw-card-pad: var(--spacing-card);
  --hw-card-corner: var(--radius-brand);
  --hw-callout-pad: 1.25rem;
  --hw-rule-accent: 4px;
  --hw-quote-rule: 2px;
  --hw-quote-gap: 1.25rem;
  --hw-cell-pad: 0.5rem 0.75rem 0.5rem 0;
  --hw-underline: 1px;
  --hw-focus-width: 3px;
  --hw-focus-offset: 2px;
  --hw-control-size: 44px;
  --hw-control-icon: 20px;
  --hw-strip: 3px;
  --hw-code-pad: 1rem;
  --hw-code-corner: var(--radius-sm);
  --hw-frame-width: 1px;
  --hw-button-height: 2.75rem;
  --hw-button-pad: 0.5rem min(1.5rem, 24px);
  --hw-arrow-link-pad: 0.75rem;
  --hw-field-height: 3rem;
  --hw-field-pad: 1rem;
  --hw-segment-pad: 0.25rem 0.5rem;
  --hw-row-pad: 0.5rem 0.75rem;
  --hw-row-stripe: 4px;
  --hw-row-gap: 0.75rem;
  --hw-kpi-size: var(--type-stat-size);
  --hw-kpi-tracking: var(--type-stat-tracking);
}

[data-hw-scale="dense"] {
  --hw-label-size: 0.75rem;
  --hw-pill-size: 0.75rem;
  --hw-pill-pad: 0.0625rem 0.5rem;
  --hw-table-size: 0.875rem;
  --hw-code-size: 0.8125rem;
  --hw-hairline: 1px;
  --hw-line: var(--color-border);
  --hw-card-pad: 1rem;
  --hw-card-corner: var(--radius-brand);
  --hw-callout-pad: 0.75rem 1rem;
  --hw-rule-accent: 3px;
  --hw-quote-rule: 2px;
  --hw-quote-gap: 1rem;
  --hw-cell-pad: 0.375rem 0.75rem 0.375rem 0;
  --hw-underline: 1px;
  --hw-focus-width: 3px;
  --hw-focus-offset: 2px;
  --hw-control-size: 36px;
  --hw-control-icon: 20px;
  --hw-strip: 3px;
  --hw-code-pad: 0.75rem;
  --hw-code-corner: var(--radius-sm);
  --hw-frame-width: 1px;
  --hw-kpi-size: var(--text-page, 1.5rem);
  --hw-kpi-tracking: -0.01em;
  /* The compact tier (decision density-tiers, 2026-11-02): the expert set's UI text at macOS's
     13 px, its micro step at 11 px. meta repeats ui here, since a var() resolves where it is
     declared. The heights an app's components read, at their measured values: a list row's
     padding and a filter control's height. */
  --text-ui: 0.8125rem;
  --text-ui--line-height: 1.45;
  --text-meta: var(--text-ui);
  --text-meta--line-height: var(--text-ui--line-height);
  --text-micro: 0.6875rem;
  --text-micro--line-height: calc(15 / 11);
  --hw-row-pad: 0.5rem 0.75rem;
  --hw-control-height: 2.5rem;
}

/* The dense tier at the expert set's regular text: UI text 14 px, micro 12 px, every other dense
   measure kept. Set beside data-hw-scale="dense" on the same element (trainer hub, decision
   ds-roll-trainer-hub-compact, 2026-11-02: os 13, trainer hub 14). */
[data-hw-scale="dense"][data-hw-type="regular"] {
  --text-ui: 0.875rem;
  --text-ui--line-height: 1.5;
  --text-meta: var(--text-ui);
  --text-meta--line-height: var(--text-ui--line-height);
  --text-micro: 0.75rem;
  --text-micro--line-height: calc(16 / 12);
}

/* Paper is read printed and at about 70 % zoom on a laptop, where 1 pt is about 0.93 CSS px: lines
   take 1 pt in border-strong, the card's rule 3 pt, the strip 6 pt (documents, 2026-10-28). */
[data-hw-scale="print"] {
  --hw-label-size: var(--type-label-size);
  --hw-pill-size: var(--type-small-size);
  --hw-pill-pad: 2pt 7pt;
  --hw-table-size: var(--type-small-size);
  --hw-code-size: var(--type-code-size);
  --hw-hairline: 1pt;
  --hw-line: var(--color-border-strong);
  --hw-card-pad: 14pt;
  --hw-card-corner: var(--print-radius);
  --hw-callout-pad: 14pt;
  --hw-rule-accent: 3pt;
  --hw-quote-rule: 3pt;
  --hw-quote-gap: 12.5pt;
  --hw-cell-pad: 5pt 7.5pt 5pt 0;
  --hw-underline: 1pt;
  --hw-strip: 6pt;
  --hw-frame-width: 1pt;
  --hw-code-pad: 14pt;
  /* The small corner at paper size, in the ratio of print.css's brand corner (16px 4px). */
  --hw-code-corner: 4px;
}

[data-hw-scale="stage"] {
  --hw-label-size: 1.125rem;
  --hw-pill-size: 1.3125rem;
  --hw-pill-pad: 0.1875rem 0.9375rem;
  --hw-table-size: 1.3125rem;
  --hw-code-size: 1.3125rem;
  --hw-hairline: 0.09375rem;
  --hw-line: var(--color-border);
  --hw-card-pad: 2rem;
  --hw-card-corner: 1.875rem 0.46875rem;
  --hw-callout-pad: 1.875rem;
  --hw-rule-accent: 0.375rem;
  --hw-quote-rule: 0.1875rem;
  --hw-quote-gap: 1.875rem;
  --hw-cell-pad: 0.75rem 1.125rem 0.75rem 0;
  --hw-underline: 0.09375rem;
  --hw-focus-width: 0.1875rem;
  --hw-focus-offset: 0.125rem;
  --hw-control-size: 4.125rem;
  --hw-control-icon: 1.875rem;
  --hw-strip: 0.75rem;
  --hw-code-pad: 1.5rem;
  --hw-code-corner: 0.46875rem;
  /* The slide engine's dashed frame draws 2 px at the 1440 stage; a key figure takes the readout
     deck's stat size. */
  --hw-frame-width: 0.125rem;
  --hw-kpi-size: 3rem;
  --hw-kpi-tracking: 0;
}

/* The label: an eyebrow, kicker, fact name or table head. The label role (mono, capitals, its
   tracking) in teal-dark, teal-night on night. Below 48rem the label role takes the small role's
   size, so no text on a phone is under 14 px. data-tone="muted" sets it in the muted grey (a
   callout's label), data-tone="ink" in the text colour (a field's or group's name).

   Settings (scales.css sets them per medium):
     --hw-label-size    the label role's size
     --hw-label-family  the label role's family; expert.css sets Inter for the apps (design guide)
     --hw-muted         the muted grey, where a surface's --color-muted means something else
                        (expert.css: a fill) */

@layer components {
  .hw-label {
    font-family: var(--hw-label-family, var(--type-label-family));
    font-size: var(--hw-label-size, var(--type-label-size));
    font-weight: var(--type-label-weight);
    line-height: var(--type-label-line-height);
    letter-spacing: var(--type-label-tracking);
    text-transform: var(--type-label-case);
    color: var(--color-teal-dark);
  }
  .hw-label[data-tone="muted"] {
    color: var(--hw-muted, var(--color-muted));
  }
  .hw-label[data-tone="ink"] {
    color: var(--color-ink);
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-label {
      color: var(--color-teal-night);
    }
    .hw-label[data-tone="muted"] {
      color: var(--color-night-muted);
    }
    .hw-label[data-tone="ink"] {
      color: var(--color-night-ink);
    }
  }
}

/* Unlayered, so it outranks the role's size wherever the tokens sit. */
@media (max-width: 47.999rem) {
  :root {
    --text-label: var(--text-small);
  }
}

/* The pill: a label holding a value, a fact, a role or a tag. The pill corner; the hue at 15 % on
   white, its text the hue mixed 40 % into ink, weight 500 (the website's training list chip): a
   value from a scale, the hue its place on the scale. On night the hue's night tone at 20 % on
   night under night ink.

   Variants, each one meaning:
     data-tone="neutral"    a value without a scale (a fact, a free tag, an amount): ink at 7 %,
                            its text ink at 70 %
     data-variant="outline" no value set, or a plain tag: a hairline on no fill, in ink
     data-variant="add"     adds a value: the hairline dashed, on no fill, muted
     data-caps              the words in the label role (mono capitals), as a document's type tag
     data-editable          a value changed here (a menu opens on it): takes --hw-pill-edit-corner
   Trailing parts, as children after the words: hw-pill-chevron (an empty span: opens a menu that
   changes the value) and hw-pill-remove (a button: removes the value). A leading icon is an svg
   child. With any of them the pill lays its children out in a row, 0.25em apart.

   Settings:
     --hw-pill-hue         the hue (a brand hue token; teal unless the surface groups by hue)
     --hw-pill-hue-night   that hue's night tone
     --hw-pill-size        the small role's size
     --hw-pill-pad         block and inline padding
     --hw-pill-edit-corner the corner of an editable pill: the pill corner, or the apps' small
                           corner where the shape marks what can be changed
     --hw-hairline         the outline's width
     --hw-label-size       the size of a capitals pill
     --hw-label-family     the family of a capitals pill (label.css)
     --hw-muted            the muted grey (label.css) */

@layer components {
  .hw-pill {
    display: inline-block;
    box-sizing: border-box;
    border: var(--hw-hairline, 1px) solid transparent;
    border-radius: var(--radius-pill);
    padding: var(--hw-pill-pad, 0.125rem 0.625rem);
    font-family: var(--type-small-family);
    font-size: var(--hw-pill-size, var(--type-small-size));
    font-weight: 500;
    line-height: 1.5;
    color: color-mix(in srgb, var(--hw-pill-hue, var(--color-teal)) 40%, var(--color-ink));
    background: color-mix(in srgb, var(--hw-pill-hue, var(--color-teal)) 15%, white);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .hw-pill:has(> svg, > .hw-pill-chevron, > .hw-pill-remove) {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
  }
  .hw-pill > svg {
    flex: none;
    width: 1em;
    height: 1em;
  }
  .hw-pill[data-caps] {
    font-family: var(--hw-label-family, var(--type-label-family));
    font-size: var(--hw-label-size, var(--type-label-size));
    font-weight: var(--type-label-weight);
    letter-spacing: var(--type-label-tracking);
    text-transform: var(--type-label-case);
  }
  .hw-pill[data-tone="neutral"] {
    color: color-mix(in srgb, var(--color-ink) 70%, transparent);
    background: color-mix(in srgb, var(--color-ink) 7%, transparent);
  }
  .hw-pill:is([data-variant="outline"], [data-variant="add"]) {
    border-color: var(--color-border);
    color: var(--color-ink);
    background: transparent;
  }
  .hw-pill[data-variant="add"] {
    border-style: dashed;
    border-color: var(--color-border-strong);
    color: var(--hw-muted, var(--color-muted));
  }
  .hw-pill[data-editable] {
    border-radius: var(--hw-pill-edit-corner, var(--radius-pill));
  }
  .hw-pill-chevron,
  .hw-pill-remove {
    flex: none;
    width: 1em;
    height: 1em;
    border: 0;
    padding: 0;
    font: inherit;
    background-color: currentColor;
    opacity: 0.7;
    -webkit-mask: var(--_hw-pill-icon) center / contain no-repeat;
    mask: var(--_hw-pill-icon) center / contain no-repeat;
  }
  .hw-pill-chevron {
    --_hw-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  .hw-pill-remove {
    --_hw-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
    cursor: pointer;
  }
  .hw-pill-remove:hover {
    opacity: 1;
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-pill {
      color: var(--color-night-ink);
      background: color-mix(
        in srgb,
        var(--hw-pill-hue-night, var(--color-teal-night)) 20%,
        var(--color-night)
      );
    }
    .hw-pill[data-tone="neutral"] {
      color: color-mix(in srgb, var(--color-night-ink) 75%, transparent);
      background: color-mix(in srgb, white 10%, transparent);
    }
    .hw-pill:is([data-variant="outline"], [data-variant="add"]) {
      border-color: color-mix(in srgb, white 25%, transparent);
      color: var(--color-night-ink);
      background: transparent;
    }
    .hw-pill[data-variant="add"] {
      border-color: color-mix(in srgb, white 40%, transparent);
      color: var(--color-night-muted);
    }
  }
}

/* The card: the brand corner, a hairline, white, the card padding. data-variant="tint" is the
   emphasised card: teal at 7 % with a 40 % teal line. On night the card is glass, white at 7 % with
   a 15 % white line; the tinted one takes teal-night. Layout, shadow and hover stay the surface's.

   Settings:
     --hw-card-pad     the padding
     --hw-card-corner  the corner, the brand corner at the medium's size
     --hw-hairline     the line's width
     --hw-line         the line's colour: border, or border-strong on paper, where a pale 1 pt line
                       vanishes at 70 % zoom */

@layer components {
  .hw-card {
    box-sizing: border-box;
    border: var(--hw-hairline, 1px) solid var(--hw-line, var(--color-border));
    border-radius: var(--hw-card-corner, var(--radius-brand));
    padding: var(--hw-card-pad, var(--spacing-card));
    background: var(--color-white);
  }
  .hw-card[data-variant="tint"] {
    border-color: color-mix(in srgb, var(--color-teal) 40%, white);
    background: color-mix(in srgb, var(--color-teal) 7%, white);
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-card {
      border-color: color-mix(in srgb, white 15%, transparent);
      background: color-mix(in srgb, white 7%, transparent);
    }
    .hw-card[data-variant="tint"] {
      border-color: color-mix(in srgb, var(--color-teal-night) 40%, transparent);
      background: color-mix(in srgb, var(--color-teal-night) 7%, transparent);
    }
  }
}

/* The callout: a box that sums up or flags, before or beside the body ("In short"). A teal rule on
   the left, teal at 7 %, the brand corner with the rule bending into it, text in weight 500; its
   label is an hw-label with data-tone="muted". data-hue="purple" marks a result. On night the
   night tones of the hue.

   Settings:
     --hw-callout-pad   the padding
     --hw-card-corner   the corner
     --hw-rule-accent   the rule's width */

@layer components {
  .hw-callout {
    --_hue: var(--color-teal);
    box-sizing: border-box;
    border-left: var(--hw-rule-accent, 4px) solid var(--_hue);
    border-radius: var(--hw-card-corner, var(--radius-brand));
    padding: var(--hw-callout-pad, 1.25rem);
    font-weight: 500;
    background: color-mix(in srgb, var(--_hue) 7%, white);
  }
  .hw-callout[data-hue="purple"] {
    --_hue: var(--color-purple);
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-callout {
      --_hue: var(--color-teal-night);
      background: color-mix(in srgb, var(--_hue) 7%, transparent);
    }
    .hw-callout[data-hue="purple"] {
      --_hue: var(--color-purple-night);
    }
  }
}

/* The quote: the words upright behind a purple rule, in ink. data-tone="muted" sets an excerpt of a
   source in the muted grey. On night purple-night and night ink. Who said it, and any portrait,
   stay the surface's.

   Settings:
     --hw-quote-rule  the rule's width
     --hw-quote-gap   the space from the rule to the words
     --hw-muted       the grey of a muted quote (label.css) */

@layer components {
  .hw-quote {
    margin-inline: 0;
    border-left: var(--hw-quote-rule, 2px) solid var(--color-purple);
    padding-left: var(--hw-quote-gap, 1.25rem);
    color: var(--color-ink);
  }
  .hw-quote[data-tone="muted"] {
    color: var(--hw-muted, var(--color-muted));
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-quote {
      border-left-color: var(--color-purple-night);
      color: var(--color-night-ink);
    }
    .hw-quote[data-tone="muted"] {
      color: var(--color-night-muted);
    }
  }
}

/* The ruled table: hairlines under every row, no fill, no frame; column heads in the label role in
   the muted grey; cells in the small role, top-aligned, the last column flush right. On night the
   line is white at 15 %. Scrolling, stacking on a phone and column widths stay the surface's.

   Settings:
     --hw-table-size  the cells' size, the small role
     --hw-label-size  the heads' size, the label role
     --hw-label-family the heads' family (label.css)
     --hw-muted       the heads' grey (label.css)
     --hw-cell-pad    a cell's padding
     --hw-hairline    the rule's width
     --hw-line        the rule's colour */

@layer components {
  .hw-table {
    border-collapse: collapse;
    font-size: var(--hw-table-size, var(--type-small-size));
    line-height: var(--type-small-line-height);
  }
  .hw-table :is(th, td) {
    border-bottom: var(--hw-hairline, 1px) solid var(--hw-line, var(--color-border));
    padding: var(--hw-cell-pad, 0.5rem 0.75rem 0.5rem 0);
    text-align: left;
    vertical-align: top;
  }
  .hw-table :is(th, td):last-child {
    padding-right: 0;
  }
  .hw-table th {
    font-family: var(--hw-label-family, var(--type-label-family));
    font-size: var(--hw-label-size, var(--type-label-size));
    font-weight: var(--type-label-weight);
    line-height: var(--type-label-line-height);
    letter-spacing: var(--type-label-tracking);
    text-transform: var(--type-label-case);
    color: var(--hw-muted, var(--color-muted));
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-table :is(th, td) {
      border-bottom-color: color-mix(in srgb, white 15%, transparent);
    }
    .hw-table th {
      color: var(--color-night-muted);
    }
  }
}

/* The link in running text: teal-dark, underlined 0.2em below the baseline, ink on hover; on night
   teal-night, white on hover. hw-link on the link, or hw-links on a prose column to mark every link
   in it. A link that is a row, a button or a person's name is not this element.

   Settings:
     --hw-underline  the underline's thickness */

@layer components {
  :is(.hw-link, .hw-links a) {
    color: var(--color-teal-dark);
    text-decoration-line: underline;
    text-decoration-thickness: var(--hw-underline, 1px);
    text-underline-offset: 0.2em;
  }
  :is(.hw-link, .hw-links a):hover {
    color: var(--color-ink);
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    :is(.hw-link, .hw-links a) {
      color: var(--color-teal-night);
    }
    :is(.hw-link, .hw-links a):hover {
      color: var(--color-white);
    }
  }
}

/* The focus ring, on every screen: solid purple (5.4:1 on white), purple-night on night (6.4:1),
   outside the element. The ring follows the element's own corners; a link set in text rounds its
   ring with the small corner. hw-focus-ring on the page's root (or any container) turns it on for
   everything inside.

   Settings:
     --hw-focus-width   the ring's width
     --hw-focus-offset  the gap between element and ring */

@layer components {
  :is(.hw-focus-ring :focus-visible, .hw-focus-ring:focus-visible) {
    outline: var(--hw-focus-width, 3px) solid var(--color-purple);
    outline-offset: var(--hw-focus-offset, 2px);
  }
  .hw-focus-ring :is(p, li, dt, dd, td, th, blockquote, figcaption) > a:focus-visible {
    border-radius: var(--radius-sm);
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    :is(.hw-focus-ring :focus-visible, .hw-focus-ring:focus-visible) {
      outline-color: var(--color-purple-night);
    }
  }
}

/* The round icon control: a button that holds only an icon (play, pause, previous, next, theme), on
   every surface a circle. Ink at 7 %, 15 % on hover, the icon in ink; on night white at 15 % and
   25 % with a white icon. data-on="picture" is the control over a picture: solid teal, white icon.
   The icon is its svg child, sized here; the target keeps its size when text is enlarged, since the
   settings are px on screen.

   Settings:
     --hw-control-size  the circle's diameter
     --hw-control-icon  the icon's side */

@layer components {
  .hw-icon-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--hw-control-size, 44px);
    height: var(--hw-control-size, 44px);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 0;
    color: var(--color-ink);
    background: color-mix(in srgb, var(--color-ink) 7%, transparent);
    cursor: pointer;
  }
  .hw-icon-button > svg {
    flex: none;
    width: var(--hw-control-icon, 20px);
    height: var(--hw-control-icon, 20px);
  }
  .hw-icon-button:hover {
    background: color-mix(in srgb, var(--color-ink) 15%, transparent);
  }
  .hw-icon-button[data-on="picture"] {
    color: var(--color-white);
    background: var(--color-teal);
  }
  .hw-icon-button[data-on="picture"]:hover {
    background: var(--color-teal-dark);
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-icon-button:not([data-on="picture"]) {
      color: var(--color-white);
      background: color-mix(in srgb, white 15%, transparent);
    }
    .hw-icon-button:not([data-on="picture"]):hover {
      background: color-mix(in srgb, white 25%, transparent);
    }
  }
}

/* The gradient strip: the brand gradient from teal to purple, left to right, along the top edge of a
   page, a header or a document, mixed in oklab as the website draws it (Tailwind's gradient). The
   same on night.

   Settings:
     --hw-strip  the strip's height */

@layer components {
  .hw-strip {
    height: var(--hw-strip, 3px);
    background: linear-gradient(to right in oklab, var(--color-teal), var(--color-purple));
  }
}

/* The code block: the code palette's ground (night, night-2 on a night page) and text, the small
   corner, the code role, no ligatures (JetBrains Mono would join -> and == into glyphs a reader
   cannot type), scrolling sideways on screen. Syntax colours come from the code palette: Shiki
   with code-theme.json and the transformer codeClasses (code.ts) sets the hw-code-<role> classes
   below, which survive a surface that drops inline styles; a hand-set span takes a class too.
   data-variant="panel" is the run log beside a slide's text, or a panel with a header of its own:
   the card corner and a hairline of white at 7 %.

   Settings:
     --hw-code-size    the code role's size
     --hw-code-pad     the padding
     --hw-code-corner  the corner, the small corner at the medium's size
     --hw-card-corner  a panel's corner
     --hw-hairline     a panel's line */

@layer components {
  .hw-code {
    box-sizing: border-box;
    overflow-x: auto;
    border-radius: var(--hw-code-corner, var(--radius-sm));
    padding: var(--hw-code-pad, 1rem);
    font-family: var(--type-code-family);
    font-size: var(--hw-code-size, var(--type-code-size));
    font-weight: var(--type-code-weight);
    line-height: var(--type-code-line-height);
    font-variant-ligatures: none;
    color: var(--code-fg);
    background: var(--code-bg);
  }
  .hw-code[data-variant="panel"] {
    border: var(--hw-hairline, 1px) solid color-mix(in srgb, white 7%, transparent);
    border-radius: var(--hw-card-corner, var(--radius-brand));
  }
  .hw-code code {
    font: inherit;
    color: inherit;
  }
  .hw-code-comment {
    color: var(--code-comment);
  }
  .hw-code-keyword {
    color: var(--code-keyword);
  }
  .hw-code-string {
    color: var(--code-string);
  }
  .hw-code-inserted {
    color: var(--code-inserted);
  }
  .hw-code-deleted {
    color: var(--code-deleted);
  }
  .hw-code-italic {
    font-style: italic;
  }
  .hw-code-bold {
    font-weight: 700;
  }
  .hw-code-underline {
    text-decoration: underline;
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-code {
      background: var(--color-night-2);
    }
  }
}

/* The button on a client surface (website, certificate verifier): the brand corner, a teal hairline,
   weight 500 in the body role. Filled teal with white text by default, the line and fill purple on
   hover; data-variant="secondary" is the outline, teal text on no fill, purple text and line on
   hover, and with data-filled a white fill, so it stands out on a tinted ground (night: the night
   ground). From 64rem it stands 48 px tall, below 44 px. On night the outline takes white at 40 % with
   white text and a 15 % purple wash on hover. The side padding keeps its px size under enlarged
   text, so the label keeps its width on a phone. The apps' button is expert.css's btn-primary.

   Settings:
     --hw-button-height  the least height below 64rem
     --hw-button-pad     block and inline padding */

@layer components {
  .hw-button {
    display: inline-flex;
    box-sizing: border-box;
    max-width: 100%;
    min-height: var(--hw-button-height, 2.75rem);
    align-items: center;
    justify-content: center;
    border: var(--hw-hairline, 1px) solid var(--color-teal);
    border-radius: var(--radius-brand);
    padding: var(--hw-button-pad, 0.5rem min(1.5rem, 24px));
    font-family: var(--type-body-family);
    font-size: var(--type-body-size);
    font-weight: 500;
    line-height: var(--type-body-line-height);
    text-align: center;
    text-decoration: none;
    color: var(--color-white);
    background: var(--color-teal);
    cursor: pointer;
    transition:
      background-color var(--motion-fast),
      border-color var(--motion-fast),
      color var(--motion-fast);
  }
  .hw-button:hover {
    border-color: var(--color-purple);
    background: var(--color-purple);
  }
  .hw-button[data-variant="secondary"] {
    color: var(--color-teal);
    background: transparent;
  }
  .hw-button[data-variant="secondary"]:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
    background: transparent;
  }
  .hw-button[data-variant="secondary"][data-filled] {
    background: var(--color-white);
  }
  @media (min-width: 64rem) {
    .hw-button {
      min-height: 3rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hw-button {
      transition: none;
    }
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-button[data-variant="secondary"] {
      border-color: color-mix(in srgb, white 40%, transparent);
      color: var(--color-white);
    }
    .hw-button[data-variant="secondary"]:hover {
      border-color: var(--color-purple);
      color: var(--color-white);
      background: color-mix(in srgb, var(--color-purple) 15%, transparent);
    }
    .hw-button[data-variant="secondary"][data-filled] {
      background: var(--color-night);
    }
  }
}

/* The arrow link: a link that is an item in a list or the way on ("Verify another certificate →"),
   never underlined. teal-dark, ink on hover, its arrow moving 4 px along; data-tone="muted" sets it
   in the muted grey. The arrow is a span hw-arrow after the label's last word and a no-break space,
   holding the glyph in a span of its own; on a link to another site the glyph turns up and right
   (data-external on hw-arrow), since Inter's subset has no ↗. Display and spacing between links
   stay the surface's. On night teal-night, white on hover, the muted one night-muted.

   Markup: <a class="hw-arrow-link">Label<span class="hw-arrow" aria-hidden="true">&nbsp;<span>→</span></span></a>

   Settings:
     --hw-arrow-link-pad  block padding, keeping a 44 px target on one line */

@layer components {
  .hw-arrow-link {
    padding-block: var(--hw-arrow-link-pad, 0.75rem);
    text-decoration: none;
    color: var(--color-teal-dark);
  }
  .hw-arrow-link:hover {
    color: var(--color-ink);
  }
  .hw-arrow-link[data-tone="muted"] {
    color: var(--color-muted);
  }
  .hw-arrow {
    white-space: nowrap;
    font-family: var(--font-sans);
  }
  .hw-arrow > span {
    display: inline-block;
    transition: translate var(--motion-fast);
  }
  .hw-arrow-link:is(:hover, :focus-visible) .hw-arrow > span {
    translate: 4px 0;
  }
  /* One em tall, so the turned arrow's box stays inside the line; the margin keeps a line ending on
     it inside its block. */
  .hw-arrow[data-external] > span {
    margin-inline-end: 0.25em;
    line-height: 1;
    rotate: -45deg;
  }
  @media (prefers-reduced-motion: reduce) {
    .hw-arrow > span {
      transition: none;
    }
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-arrow-link {
      color: var(--color-teal-night);
    }
    .hw-arrow-link:hover {
      color: var(--color-white);
    }
    .hw-arrow-link[data-tone="muted"] {
      color: var(--color-night-muted);
    }
  }
}

/* The field with its button: an input and the button that sends it, on a client surface. The field
   is white with a border-strong hairline (3:1, WCAG 1.4.11), ink on hover, amber-dark when
   aria-invalid; the brand corner; 48 px tall; its text in the body role, its placeholder muted.
   data-joined on hw-field-row sets field and button in one framed row, the button a teal-dark
   square holding an icon (the website's search), both 44 px tall; without it the button is an hw-button beside the
   field, 0.75rem apart, stacking under 40rem (the verifier's lookup). On night the field is
   night-2 with a night-muted line and white text.

   Markup: <div class="hw-field-row"><input class="hw-field"><button class="hw-button">…</button></div>

   Settings:
     --hw-field-height  the field's least height
     --hw-field-pad     its inline padding
     --hw-field-family  its family: the body role, or mono where a reader compares the value
                        character by character (an ID) */

@layer components {
  .hw-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
  }
  .hw-field {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--hw-field-height, 3rem);
    border: var(--hw-hairline, 1px) solid var(--color-border-strong);
    border-radius: var(--radius-brand);
    padding: 0 var(--hw-field-pad, 1rem);
    font-family: var(--hw-field-family, var(--type-body-family));
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
    color: var(--color-ink);
    background: var(--color-white);
    transition: border-color var(--motion-fast);
  }
  .hw-field::placeholder {
    color: var(--color-muted);
    opacity: 1;
  }
  .hw-field:hover {
    border-color: var(--color-ink);
  }
  .hw-field[aria-invalid="true"] {
    border-color: var(--color-amber-dark);
  }
  .hw-field-row[data-joined] {
    display: flex;
    gap: 0;
    overflow: hidden;
    border: var(--hw-hairline, 1px) solid var(--color-border);
    border-radius: var(--radius-brand);
    background: var(--color-white);
  }
  /* The ring goes round the row: neither part draws its own. */
  .hw-field-row[data-joined]:has(:focus-visible) {
    outline: var(--hw-focus-width, 3px) solid var(--color-purple);
    outline-offset: var(--hw-focus-offset, 2px);
  }
  .hw-field-row[data-joined] > :focus-visible {
    outline: none;
  }
  .hw-field-row[data-joined] > .hw-field {
    width: 0;
    min-height: 2.75rem;
    min-width: 0;
    flex: 1;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .hw-field-row[data-joined] > button {
    display: flex;
    width: min(3rem, 48px);
    flex: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    color: var(--color-white);
    background: var(--color-teal-dark);
    cursor: pointer;
  }
  .hw-field-row[data-joined] > button:is(:hover, :focus-visible) {
    background: var(--color-teal);
  }
  @media (max-width: 40rem) {
    .hw-field-row:not([data-joined]) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hw-field {
      transition: none;
    }
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-field {
      border-color: var(--color-night-muted);
      color: var(--color-white);
      background: var(--color-night-2);
    }
    .hw-field::placeholder {
      color: var(--color-night-muted);
    }
    .hw-field-row[data-joined]:has(:focus-visible) {
      outline-color: var(--color-purple-night);
    }
  }
}

/* The facts list: a record's facts, each an hw-label (data-tone="muted") over its value, 4 px apart,
   so "DE" reads as the language and a name as the trainer. A dl whose children are a div per fact
   holding dt and dd. data-variant="ruled" stacks the facts between hairlines. How the facts flow
   (a row that wraps, a grid of columns) and the value's weight stay the surface's.

   Settings:
     --hw-hairline  the rule's width
     --hw-line      the rule's colour */

@layer components {
  .hw-facts {
    margin: 0;
  }
  .hw-facts > div {
    display: grid;
    align-content: start;
    gap: 0.25rem;
  }
  .hw-facts dd {
    margin: 0;
  }
  .hw-facts[data-variant="ruled"] > div {
    border-top: var(--hw-hairline, 1px) solid var(--hw-line, var(--color-border));
    padding-block: 0.625rem;
  }
  .hw-facts[data-variant="ruled"] > div:first-child {
    border-top: 0;
    padding-top: 0;
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-facts[data-variant="ruled"] > div {
      border-top-color: color-mix(in srgb, white 15%, transparent);
    }
  }
}

/* The segmented control: one choice of a few, each segment a link or button in one framed row (a
   view mode, a filter category, a page's mode). The small corner, a frame 2 px around the
   segments in the field line (the foreground at 70 % on the page, 3:1 as WCAG 1.4.11 asks of a
   control's boundary), the UI size; a segment at the foreground's 70 %, the full foreground and the muted fill
   on hover; the chosen one (aria-current, aria-pressed="true" or data-active="true") filled with the
   accent and its on-accent text. A leading hw-label names the category. On night the expert set's
   night roles.

   Settings:
     --hw-segment-pad   a segment's block and inline padding
     --hw-segment-line  the frame's colour */

@layer components {
  .hw-segmented {
    display: inline-flex;
    box-sizing: border-box;
    align-items: stretch;
    border: var(--hw-hairline, 1px) solid
      var(--hw-segment-line, color-mix(in srgb, var(--color-ink) 70%, var(--color-bg)));
    border-radius: var(--radius-sm);
    padding: 0.125rem;
    font-size: var(--text-ui, var(--type-small-size));
    background: var(--color-bg);
  }
  .hw-segmented > :is(a, button) {
    display: flex;
    align-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    padding: var(--hw-segment-pad, 0.25rem 0.5rem);
    font: inherit;
    white-space: nowrap;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-ink) 70%, transparent);
    background: transparent;
    cursor: pointer;
  }
  .hw-segmented > :is(a, button):hover {
    color: var(--color-ink);
    background: color-mix(in srgb, var(--color-ink) 7%, var(--color-bg));
  }
  .hw-segmented
    > :is([aria-current]:not([aria-current="false"]), [aria-pressed="true"], [data-active="true"]),
  .hw-segmented
    > :is(
      [aria-current]:not([aria-current="false"]),
      [aria-pressed="true"],
      [data-active="true"]
    ):hover {
    color: var(--color-white);
    background: var(--color-teal-dark);
  }
  .hw-segmented > .hw-label {
    display: flex;
    align-items: center;
    padding: 0 0.25rem 0 0.375rem;
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-segmented {
      border-color: var(
        --hw-segment-line,
        color-mix(in srgb, var(--color-night-ink) 40%, var(--color-night))
      );
      background: var(--color-night);
    }
    .hw-segmented > :is(a, button) {
      color: color-mix(in srgb, var(--color-night-ink) 70%, transparent);
    }
    .hw-segmented > :is(a, button):hover {
      color: var(--color-night-ink);
      background: var(--color-night-2);
    }
    .hw-segmented
      > :is(
        [aria-current]:not([aria-current="false"]),
        [aria-pressed="true"],
        [data-active="true"]
      ),
    .hw-segmented
      > :is(
        [aria-current]:not([aria-current="false"]),
        [aria-pressed="true"],
        [data-active="true"]
      ):hover {
      color: var(--color-night);
      background: var(--color-teal-night);
    }
  }
}

/* The list row: one record in a list, a stripe in the record's colour at its left edge, the lead
   (title and chips) shrinking with an ellipsis, the trail (figures, dates) keeping its width. The
   page's ground, a hairline under each row, the muted fill at 70 % on hover. The stripe is a span
   hw-row-stripe, its colour a background the surface sets; corner clipping belongs to the frame
   round the list. On night the expert set's night roles.

   Markup: <div class="hw-row"><span class="hw-row-stripe"></span><div>lead</div><div>trail</div></div>

   Settings:
     --hw-row-pad     block and inline padding
     --hw-row-stripe  the stripe's width
     --hw-row-gap     the gap between stripe, lead and trail
     --hw-row-fill    the fill, where a state of the record (a dimmed, lost or inactive one) takes
                      another ground: the page's ground, on night the night ground */

@layer components {
  .hw-row {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: var(--hw-row-stripe, 4px) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hw-row-gap, 0.75rem);
    border-bottom: var(--hw-hairline, 1px) solid var(--color-border);
    padding: var(--hw-row-pad, 0.5rem 0.75rem);
    background: var(--hw-row-fill, var(--color-bg));
    transition: background-color 0.1s;
  }
  .hw-row:hover {
    background: color-mix(
      in srgb,
      color-mix(in srgb, var(--color-ink) 7%, var(--color-bg)) 70%,
      transparent
    );
  }
  .hw-row > .hw-row-stripe {
    align-self: stretch;
    border-radius: 0;
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-row {
      border-bottom-color: color-mix(in srgb, white 18%, var(--color-night));
      background: var(--hw-row-fill, var(--color-night));
    }
    .hw-row:hover {
      background: color-mix(in srgb, var(--color-night-2) 70%, transparent);
    }
  }
}

/* The breadcrumb: the way back up from a detail page, an ordered list whose last item is the page
   itself and links nowhere. The UI size at the foreground's 70 %, a slash between items, the
   ancestors in the accent and underlined on hover. Spacing above and below stays the surface's. On
   night the expert set's night roles.

   Markup: <nav class="hw-breadcrumb" aria-label="Breadcrumb"><ol><li><a href="…">…</a></li><li><span aria-current="page">…</span></li></ol></nav>

   Settings: none; the size is the UI step (--text-ui). */

@layer components {
  .hw-breadcrumb {
    font-size: var(--text-ui, var(--type-small-size));
    color: color-mix(in srgb, var(--color-ink) 70%, transparent);
  }
  .hw-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .hw-breadcrumb li + li::before {
    content: "/";
    margin-right: 0.5rem;
  }
  .hw-breadcrumb a {
    text-decoration: none;
    color: var(--color-teal-dark);
  }
  .hw-breadcrumb a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-breadcrumb {
      color: color-mix(in srgb, var(--color-night-ink) 70%, transparent);
    }
    .hw-breadcrumb a {
      color: var(--color-teal-night);
    }
  }
}

/* The status box: a note whose colour says what a state means, a gap to act on (warning), a fault
   (error), something done (success) or a fact to read first (info). data-tone names it; the tone at
   40 % as a hairline, at 7 % as the ground, the brand corner and the card padding. The tone is the
   expert set's status role: on light red, amber-dark and green-dark mixed 70 % with ink, which
   clear 4.5:1 on their own wash, and teal-dark; on night red-night, amber, green and teal-night.
   The box sets no text colour: a heading in it takes the tone, the body the foreground.

   Settings:
     --hw-card-pad     the padding
     --hw-card-corner  the corner
     --hw-hairline     the line's width */

@layer components {
  .hw-status {
    --_tone: color-mix(in srgb, var(--color-amber-dark) 70%, var(--color-ink));
    box-sizing: border-box;
    border: var(--hw-hairline, 1px) solid color-mix(in srgb, var(--_tone) 40%, transparent);
    border-radius: var(--hw-card-corner, var(--radius-brand));
    padding: var(--hw-card-pad, var(--spacing-card));
    background: color-mix(in srgb, var(--_tone) 7%, transparent);
  }
  .hw-status[data-tone="error"] {
    --_tone: color-mix(in srgb, var(--color-red) 70%, var(--color-ink));
  }
  .hw-status[data-tone="success"] {
    --_tone: color-mix(in srgb, var(--color-green-dark) 70%, var(--color-ink));
  }
  .hw-status[data-tone="info"] {
    --_tone: var(--color-teal-dark);
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-status {
      --_tone: var(--color-amber);
    }
    .hw-status[data-tone="error"] {
      --_tone: var(--color-red-night);
    }
    .hw-status[data-tone="success"] {
      --_tone: var(--color-green);
    }
    .hw-status[data-tone="info"] {
      --_tone: var(--color-teal-night);
    }
  }
}

/* The dashed frame: an empty slot waiting for content, or a group of parts that belong together.
   A dashed line in the border colour, the brand corner, no fill; padding and content stay the
   surface's. On night white at 18 % over night.

   Settings:
     --hw-frame-width  the dashed line's width
     --hw-card-corner  the corner, the brand corner at the medium's size */

@layer components {
  .hw-frame {
    box-sizing: border-box;
    border: var(--hw-frame-width, 1px) dashed var(--color-border);
    border-radius: var(--hw-card-corner, var(--radius-brand));
    background: transparent;
  }
  @scope ([data-theme="dark"]) to ([data-theme="light"]) {
    .hw-frame {
      border-color: color-mix(in srgb, white 18%, var(--color-night));
    }
  }
}

/* The key figure: a figure under its label, read at a glance (a dashboard's pipeline value, a
   readout's share). The label is an hw-label child; the figure, hw-kpi-value, in the stat role's
   family and weight, figures of one width, set tight. Its colour stays the surface's, the colour of
   what the figure counts. Rules between figures and their layout stay the surface's.

   Markup: <div class="hw-kpi"><span class="hw-label" data-tone="muted">Pipeline</span><span class="hw-kpi-value">€ X</span></div>

   Settings:
     --hw-kpi-size      the figure's size
     --hw-kpi-tracking  its tracking */

@layer components {
  .hw-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .hw-kpi-value {
    font-family: var(--type-stat-family);
    font-size: var(--hw-kpi-size, var(--type-stat-size));
    font-weight: var(--type-stat-weight);
    font-variant-numeric: tabular-nums;
    line-height: var(--type-stat-line-height);
    letter-spacing: var(--hw-kpi-tracking, var(--type-stat-tracking));
  }
}

/* The prose block: Markdown read in an app (a record's notes, a handbook page, a knowledge article),
   on top of Tailwind Typography's prose, so a surface writes class="prose hw-prose". Headings step
   down to the app's page, heading and subheading sizes so they nest under the page title, an h2
   opens with a hairline, paragraphs in a list item lose their margin, inline code sits on the muted
   fill, list bullets are the brand marker (marker.css), and a task item's checkbox is painted like
   a field, ticked in the accent. Typography's colours point at the theme roles, so night follows
   the page. Tables, code blocks and quotes are the hw-* elements, marked not-prose, which the block
   only spaces. Unlike the other elements these rules sit in no layer: Typography's prose rules come
   in Tailwind's utilities layer, which a layered rule would lose to.

   Settings:
     --hw-prose-check-x  the checkbox's offset from its item's start */

.hw-prose {
  overflow-wrap: break-word;
  --hw-markers: on;
  --tw-prose-headings: var(--foreground, var(--color-ink));
  --tw-prose-body: var(--foreground, var(--color-ink));
  --tw-prose-links: var(--accent, var(--color-teal-dark));
  --tw-prose-bold: var(--foreground, var(--color-ink));
  --tw-prose-bullets: color-mix(in srgb, var(--foreground, var(--color-ink)) 70%, transparent);
  --tw-prose-counters: color-mix(in srgb, var(--foreground, var(--color-ink)) 70%, transparent);
  --tw-prose-quotes: color-mix(in srgb, var(--foreground, var(--color-ink)) 70%, transparent);
  --tw-prose-quote-borders: var(--border, var(--color-border));
  --tw-prose-hr: var(--border, var(--color-border));
  --tw-prose-code: var(--foreground, var(--color-ink));
  --tw-prose-pre-code: var(--foreground, var(--color-ink));
  --tw-prose-pre-bg: color-mix(in srgb, var(--muted, var(--color-bg)) 70%, transparent);
  --tw-prose-th-borders: var(--border, var(--color-border));
  --tw-prose-td-borders: var(--border, var(--color-border));
  --tw-prose-captions: color-mix(in srgb, var(--foreground, var(--color-ink)) 70%, transparent);
}
.hw-prose :is(table, pre) {
  max-width: none;
}
.hw-prose :is(.hw-table, .hw-code, .hw-quote) {
  margin-block: 1rem;
}
.hw-prose .hw-quote > * + * {
  margin-top: 0.75em;
}
.hw-prose :not(pre) > code {
  border-radius: var(--radius-sm);
  padding: 0.125em 0.375em;
  font-size: var(--text-ui, 0.875rem);
  font-weight: 500;
  background-color: color-mix(
    in srgb,
    var(--muted, color-mix(in srgb, var(--color-ink) 7%, var(--color-bg))) 70%,
    transparent
  );
}
.hw-prose :not(pre) > code::before,
.hw-prose :not(pre) > code::after {
  content: none;
}
.hw-prose hr {
  margin-block: 2rem;
}
.hw-prose h1 {
  margin: 1.5rem 0 0.75rem;
  font-size: var(--text-page, 1.5rem);
  line-height: 2rem;
}
.hw-prose h2 {
  margin: 1.5rem 0 0.5rem;
  border-top: var(--hw-hairline, 1px) solid var(--border, var(--color-border));
  padding-top: 1rem;
  font-size: var(--text-heading, 1.25rem);
  line-height: 1.75rem;
}
.hw-prose h3 {
  margin: 1rem 0 0.25rem;
  font-size: var(--text-subheading, 1rem);
  font-weight: 600;
  line-height: 1.5rem;
}
.hw-prose :is(h1, h2, h3):first-child {
  margin-top: 0;
}
.hw-prose h2:first-child {
  border-top: 0;
  padding-top: 0;
}
.hw-prose li > p {
  margin-block: 0;
}
.hw-prose li + li {
  margin-top: 0.25rem;
}
.hw-prose table {
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.hw-prose ul {
  list-style: none;
}
.hw-prose ul > li {
  position: relative;
}
.hw-prose li.task-list-item::before {
  content: none;
}
/* Held at full opacity although GFM emits these disabled: they are readable states, not
     controls, and the browser's grey washes them out. */
.hw-prose li.task-list-item input[type="checkbox"] {
  position: absolute;
  top: 0.375em;
  left: var(--hw-prose-check-x, -1em);
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  margin: 0;
  border: 1.5px solid var(--input, color-mix(in srgb, var(--color-ink) 70%, var(--color-bg)));
  border-radius: var(--radius-sm);
  background: transparent center / 0.75em 0.75em no-repeat;
  opacity: 1;
  cursor: default;
  appearance: none;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast);
}
.hw-prose li.task-list-item input[type="checkbox"]:checked {
  border-color: var(--accent, var(--color-teal-dark));
  background-color: var(--accent, var(--color-teal-dark));
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 L7 12 L13 4.5'/%3E%3C/svg%3E");
}
/* Night: the muted fill is night-2, and the accent a light teal, so the tick turns night on it. */
@scope ([data-theme="dark"]) to ([data-theme="light"]) {
  .hw-prose :not(pre) > code {
    background-color: color-mix(in srgb, var(--muted, var(--color-night-2)) 70%, transparent);
  }
  .hw-prose li.task-list-item input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b1118' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 L7 12 L13 4.5'/%3E%3C/svg%3E");
  }
}