/*
 * The article page's structural stylesheet — milestone 5.5.
 *
 * Linked only by `/journal/<slug>` (HA\Render\SiteAssets), immediately after
 * `site.css` and before everything the Admin generates, so the owner's Custom
 * CSS still beats it.
 *
 * Structure only, exactly like `site.css`: every colour, size, radius and
 * padding is a custom property `public/assets/generated/layout.css` carries
 * for both device configurations (`--article-*`, milestone 3.8's field
 * family), or a palette token. There is no literal hex here and no value that
 * expresses a decision the Layout screen owns.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * THE NUMBER TABLES AT THE FOOT OF THIS FILE
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * A block's per-instance numbers — an image's width percentage, its border
 * width, its corner radius, its margins, and a cover's focal point — cannot
 * ride an inline `style` attribute: the site CSP is `style-src 'self'` with no
 * `'unsafe-inline'`, so the browser would drop every one of them while the
 * markup still showed them (docs/12-open-questions.md#q22).
 *
 * They cannot ride `layout.css` either: that file is per *scope*, and these
 * are per *instance* — two image blocks in one article routinely differ in all
 * five.
 *
 * So HA\Render\NumberClasses carries each value as a **tens** class and a
 * **units** class, and the rules below turn the pair back into a number:
 *
 *     class="ha-mt-t1 ha-mt-u2"   ->   --ha-mt-t: 1; --ha-mt-u: 2
 *     margin-top: calc((var(--ha-mt-t, 0) * 10 + var(--ha-mt-u, 0)) * 1px)
 *
 * 0–200 costs 31 rules instead of 201, and the author's value is carried
 * exactly — nothing rounds a margin to a step. `tests/Unit/SiteArticleTest.php`
 * asserts that every class that class can emit has a rule here, so the two
 * cannot drift.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * The article card
 * ═════════════════════════════════════════════════════════════════════════ */

.ha-article {
  --ha-border: var(--ha-hairline);
  --ha-shadow: none;
  --ha-hero-radius: var(--article-hero-radius);

  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--article-body-width);
  margin: 0 auto;
  /*
   * Owner change (m/footer-single-line): the reading page carried too much
   * empty space above the article and below its last block. The article
   * section (`#ha-section-article`) carries no padding of its own — this card
   * is what sets the section's vertical inset — so the top and bottom are
   * halved here, 48px -> 24px, while the horizontal 56px is left as the
   * design's own measure. The narrow value is halved in step below (24 -> 12).
   */
  padding: 24px 56px;
  border: var(--ha-border);
  border-radius: 28px;
  background: var(--ha-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--ha-shadow);
}

.ha-article__back {
  align-self: flex-start;
  color: var(--link);
  font-size: var(--type-size-meta);
  font-weight: var(--weight-label);
  text-decoration: none;
}

.ha-article__back:hover {
  text-decoration: underline;
}

.ha-article__chip {
  --ha-cat-color: var(--teal-deep);

  align-self: flex-start;
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--ha-pill);
  background: color-mix(in srgb, var(--ha-cat-color) 12%, transparent);
  color: var(--ha-cat-color);
  font-size: var(--article-chip-size);
  font-weight: var(--weight-label);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ha-article__title {
  margin: 0;
  color: var(--article-title-color);
  font-size: var(--article-title-size);
  font-weight: var(--weight-article-title);
  line-height: 1.12;
  text-wrap: pretty;
}

.ha-article__meta {
  margin: 0;
  color: var(--article-meta-color);
  font-size: var(--article-meta-size);
  font-weight: var(--weight-label);

  /* docs/02 §3.6: "right-aligned by default, switchable to left". */
  text-align: right;
}

.ha-article__hero {
  --ha-cat-tint: var(--placeholder-bg);

  overflow: hidden;
  height: var(--article-hero-height);
  border-radius: var(--ha-hero-radius);
  background: var(--placeholder-bg);
}

.ha-article__hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /*
   * Milestone 2.4's authored focal point, finally read by something: the point
   * of the picture that survives the crop. No classes means the centre.
   */
  object-position:
    calc((var(--ha-fx-t, 5) * 10 + var(--ha-fx-u, 0)) * 1%)
    calc((var(--ha-fy-t, 5) * 10 + var(--ha-fy-u, 0)) * 1%);
}

/*
 * The reading column. docs/02 §3.6: "Shell ≈ 1180px, text measure ≈ 760px" —
 * both are Admin fields, and the second is what keeps a line of Slovak prose
 * readable inside the first.
 *
 * font-weight rides --weight-longform (docs/04 §Weight rules: "Long-form
 * article body, in the reading column | 400 — the only place 400 is
 * allowed"). Wired at milestone `owner-look-2026-09-16` — before this the
 * body had no font-weight rule of its own and silently inherited 700 from
 * .ha-site, the gap docs/phase-log.md's Phase 3 entry booked as "a
 * reading-comfort wiring opportunity, not a violation". This is a visible
 * change on the live site's article pages: long-form body text renders at
 * 400 from here on, not 700. The owner can set --weight-longform back to
 * 700 through the Typography screen if that reads better in practice.
 */
.ha-article__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--article-body-measure);
  color: var(--article-body-color);
  font-size: var(--article-body-size);
  font-weight: var(--weight-longform);
  line-height: 1.75;
  text-wrap: pretty;
}

.ha-article__share-mid {
  margin: 12px 0;
}

.ha-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.ha-article__tags .ha-chip {
  color: var(--article-tags-color);
}

.ha-article__share {
  --ha-share-pad: var(--article-share-pad);
}

.ha-article__share .ha-share {
  padding: var(--article-share-pad);
  border-radius: var(--article-share-radius);
  background: var(--article-share-bg);
}

.ha-share--compact {
  padding: 16px 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Blocks — the nine types (docs/03 §7)
 * ═════════════════════════════════════════════════════════════════════════ */

.ha-block {
  min-width: 0;
  margin: 0 0 22px;
}

.ha-block:last-child {
  margin-bottom: 0;
}

/* The two sanitised HTML types. Everything inside is the author's own markup —
 * since 2026-09-28 including its own `style` attributes (docs/12 Q24, second
 * decision), which win over the rules below. flow-root keeps a picture the
 * author floated inside its own block instead of spilling into the next. */
.ha-block__rich { display: flow-root; }
.ha-block__rich > :first-child { margin-top: 0; }
.ha-block__rich > :last-child { margin-bottom: 0; }

.ha-block__rich a {
  color: var(--link);
}

.ha-block__rich img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.ha-block__rich blockquote {
  margin: 0 0 16px;
  padding-left: 18px;
  border-left: 3px solid color-mix(in srgb, var(--teal) 40%, transparent);
  color: var(--text-soft);
}

.ha-block__rich pre,
.ha-block__rich code {
  font-family: monospace;
  font-size: .95em;
}

.ha-block__rich pre {
  overflow-x: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* ── Image ──────────────────────────────────────────────────────────────── */

.ha-block__figure {
  --ha-edge: var(--ha-hairline-color);

  margin: calc((var(--ha-mt-t, 0) * 10 + var(--ha-mt-u, 0)) * 1px)
    auto
    calc((var(--ha-mb-t, 0) * 10 + var(--ha-mb-u, 0)) * 1px);
  width: calc((var(--ha-w-t, 10) * 10 + var(--ha-w-u, 0)) * 1%);
  max-width: 100%;
}

.ha-block__img {
  display: block;
  width: 100%;
  height: auto;
  border-color: var(--ha-edge);
  border-radius: calc((var(--ha-rad-t, 0) * 10 + var(--ha-rad-u, 0)) * 1px);
  border-style: none;
  border-width: calc((var(--ha-bw-t, 0) * 10 + var(--ha-bw-u, 0)) * 1px);
}

.ha-block__img-link {
  display: block;
}

.ha-block__caption {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--type-size-meta);
}

/*
 * milestone 5.10: a credit is small text and needs 4.5:1. `--text-faint` (the
 * palette's "captions" token) reaches only 3.7–4.1:1 on the glass card across
 * the light palettes, so the credit wears `--text-muted` — the adjacent darker
 * meta token that clears the floor everywhere. `--text-faint` stays for the
 * placeholder-tint role that is not text; the audit's owner note records that
 * the token is sub-AA wherever it carries a string.
 */
.ha-block__credit {
  display: block;
  color: var(--text-muted);
  font-size: var(--type-size-eyebrow);
}

/*
 * Size — the four the editor offers, as a ceiling on the exact `widthPct`
 * beside it. Both controls are live and they compose: `medium` at 80% is 80%
 * of 65%, and neither silently overrides the other.
 *
 * `full` lifts the ceiling rather than setting a width, so it is `widthPct`
 * that decides. Inside the reading column that makes it and `large` coincide
 * — the column is `--article-body-measure`, an Admin field, and a picture
 * cannot be wider than the box it is in. Saying so here is better than
 * inventing a bleed the design never draws.
 */
.ha-i--size-small { max-width: 40%; }
.ha-i--size-medium { max-width: 65%; }
.ha-i--size-large { max-width: 100%; }
.ha-i--size-full { max-width: none; }

/* Alignment. `margin: auto` above is the centre; these are the other two. */
.ha-i--align-left { margin-left: 0; margin-right: auto; }
.ha-i--align-right { margin-left: auto; margin-right: 0; }

/* Text wrap. Deliberately not applied below 761px — a floated picture in a
   narrow column leaves a two-word gutter. */
@media (min-width: 761px) {
  .ha-i--wrap-left { float: left; margin-right: 24px; }
  .ha-i--wrap-right { float: right; margin-left: 24px; }
}

/* Fit. "Fill frame" is the browser's own default for an unsized image. */
.ha-i--fit-contain .ha-block__img { object-fit: contain; }
.ha-i--fit-original .ha-block__img { width: auto; max-width: 100%; }

/* Border style — "None" is the base above, so only four rules are needed. */
.ha-i--border-solid .ha-block__img { border-style: solid; }
.ha-i--border-dashed .ha-block__img { border-style: dashed; }
.ha-i--border-double .ha-block__img { border-style: double; }
.ha-i--border-inset .ha-block__img {
  border-style: none;
  box-shadow: inset 0 0 0
    calc((var(--ha-bw-t, 0) * 10 + var(--ha-bw-u, 0)) * 1px) var(--ha-edge);
}

/* Shadow. */
.ha-i--shadow-soft .ha-block__img { box-shadow: var(--ha-soft-shadow); }
.ha-i--shadow-deep .ha-block__img {
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 22%, transparent);
}
.ha-i--shadow-lifted .ha-block__img {
  box-shadow: 0 22px 50px color-mix(in srgb, var(--ink) 18%, transparent);
  transform: translateY(-2px);
}

/* Caption position. "Under" is the base; "hidden" never reaches the markup. */
.ha-i--caption-overlay {
  position: relative;
}

.ha-i--caption-overlay .ha-block__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--paper);
}

.ha-i--caption-overlay .ha-block__credit {
  color: var(--paper);
}

/* ── Video ──────────────────────────────────────────────────────────────── */

.ha-block__frame,
.ha-block__video {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 18px;
  background: var(--placeholder-bg);
}

.ha-v--aspect-16-9 .ha-block__frame,
.ha-v--aspect-16-9 .ha-block__video { aspect-ratio: 16 / 9; }
.ha-v--aspect-4-3 .ha-block__frame,
.ha-v--aspect-4-3 .ha-block__video { aspect-ratio: 4 / 3; }
.ha-v--aspect-1-1 .ha-block__frame,
.ha-v--aspect-1-1 .ha-block__video { aspect-ratio: 1 / 1; }
.ha-v--aspect-9-16 .ha-block__frame,
.ha-v--aspect-9-16 .ha-block__video { aspect-ratio: 9 / 16; }

.ha-v--size-small { max-width: 40%; }
.ha-v--size-medium { max-width: 65%; }
.ha-v--size-large { max-width: 100%; }
.ha-v--size-full { max-width: none; }

/* ── Audio ──────────────────────────────────────────────────────────────── */

.ha-block__audio {
  display: block;
  width: 100%;
}

.ha-block__audio-title {
  margin: 0 0 8px;
  font-weight: var(--weight-label);
}

.ha-block__download {
  display: inline-block;
  margin-top: 8px;
  color: var(--link);
  font-size: var(--type-size-meta);
  font-weight: var(--weight-label);
}

/*
 * "Show cover art" — there is no artwork field on an audio block, so what the
 * switch shows is the design's own idiom for a picture that is not there: a
 * tinted panel. The tint is the category's when the page has one.
 */
.ha-a--cover-on {
  padding: 18px;
  border-radius: 18px;
  background: var(--ha-cat-tint, var(--placeholder-bg));
}

.ha-block__transcript {
  margin-top: 10px;
  font-size: var(--type-size-meta);
}

.ha-block__transcript summary {
  cursor: pointer;
  color: var(--link);
  font-weight: var(--weight-label);
}

/* ── Quote ──────────────────────────────────────────────────────────────── */

.ha-block__quote {
  margin: 0;
  padding: 18px 24px;
  border-left: 3px solid var(--teal);
  background: color-mix(in srgb, var(--teal) 7%, transparent);
  border-radius: 0 18px 18px 0;
}

.ha-block__quote-text {
  margin: 0;
  font-style: italic;
  text-wrap: pretty;
}

/*
 * milestone 5.10: on the teal-tinted quote panel `--text-muted` lands at
 * 4.49:1 under Still Water — a hair under the floor the tint pushes it below —
 * so the attribution wears `--text-soft`, one step darker, which clears it
 * (6.1:1) on every palette while staying quieter than the quote's own body.
 */
.ha-block__quote-author {
  display: block;
  margin-top: 10px;
  color: var(--text-soft);
  font-size: var(--type-size-meta);
  font-style: normal;
  font-weight: var(--weight-label);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Table ──────────────────────────────────────────────────────────────── */

.ha-block__table-scroll {
  overflow-x: auto;
}

.ha-block__table {
  border-collapse: collapse;
  font-size: var(--type-size-meta);
}

.ha-block__table th,
.ha-block__table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.ha-block__table th {
  font-weight: var(--weight-label);
}

.ha-t--width-full { width: 100%; }
.ha-t--width-fit { width: auto; }

.ha-t--style-rows tr + tr th,
.ha-t--style-rows tr + tr td {
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.ha-t--style-grid th,
.ha-t--style-grid td {
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.ha-t--style-striped tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

/* ── Embed ──────────────────────────────────────────────────────────────── */

.ha-block__embed {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 18px;
  background: var(--placeholder-bg);
}

/* ── Divider ────────────────────────────────────────────────────────────── */

.ha-block__divider {
  height: 0;
  margin: 12px 0;
  border: 0;
}

.ha-d--line {
  border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}

.ha-d--dots {
  border-top: 2px dotted color-mix(in srgb, var(--ink) 30%, transparent);
}

.ha-d--space {
  margin: 26px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Related, previous/next, booking
 * ═════════════════════════════════════════════════════════════════════════ */

.ha-related {
  margin: 0;
}

.ha-related__heading {
  margin: 0 0 16px;
  font-size: var(--type-size-h2);
  font-weight: var(--weight-heading);
}

.ha-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.ha-related__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ha-related__media {
  --ha-cat-tint: var(--placeholder-bg);

  overflow: hidden;
  height: 120px;
  border-radius: 14px;
  background: var(--ha-cat-tint);
}

.ha-related__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ha-related__kicker {
  --ha-cat-color: var(--text-muted);

  margin: 0;
  color: var(--ha-cat-color);
  font-size: var(--type-size-eyebrow);
  font-weight: var(--weight-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ha-related__title {
  margin: 0;
  font-size: var(--type-size-card-title);
  font-weight: var(--weight-card-title);
}

.ha-related__link {
  color: var(--text);
  text-decoration: none;
}

.ha-related__link:hover {
  text-decoration: underline;
}

.ha-related__date {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--type-size-meta);
}

.ha-neighbours {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

.ha-neighbours__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: var(--ha-touch);
  min-width: 0;
  padding: 10px 14px;
  border: var(--ha-hairline);
  border-radius: 18px;
  color: var(--text);
  text-decoration: none;
}

.ha-neighbours__link--next {
  margin-left: auto;
  text-align: right;
}

.ha-neighbours__label {
  color: var(--text-muted);
  font-size: var(--type-size-eyebrow);
  font-weight: var(--weight-label);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ha-neighbours__title {
  font-weight: var(--weight-card-title);
}

.ha-booking {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 18px 22px;
  border-radius: var(--article-booking-radius);
  background: color-mix(in srgb, var(--article-booking-bg) 16%, transparent);
}

.ha-booking__phone,
.ha-booking__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ha-touch);
  padding: 0 18px;
  border-radius: var(--ha-pill);
  border: var(--ha-hairline);
  background: var(--white);
  color: var(--teal-deep);
  font-weight: var(--weight-label);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Narrow widths
 * ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .ha-article {
    /*
     * docs/02 §3.6 asked for "24px 22px at narrow widths"; the owner change
     * above halves the vertical half in step (one fluid build) — 24px -> 12px
     * top and bottom, 22px horizontal kept.
     */
    padding: 12px 22px;
    border-radius: 22px;
  }

  .ha-neighbours__link {
    width: 100%;
  }

  .ha-neighbours__link--next {
    margin-left: 0;
    text-align: left;
  }
}

/*
 * `article.meta.side` and the other article selects, per configuration —
 * `ha-o--…` above 860px, `ha-on--…` at 860px and below (HA\Render\LayoutFields).
 * Only the values that differ from this file's own base need a rule.
 */
@media (min-width: 861px) {
  .ha-o--article-meta-side-left { text-align: left; }
  .ha-o--article-title-align-center { text-align: center; }
  .ha-o--article-title-weight-bold { font-weight: var(--weight-label); }
  .ha-o--article-chip-weight-regular { font-weight: var(--weight-body); }
  .ha-o--article-hero-corner-top-left-arch {
    --ha-hero-radius: var(--ha-arch) var(--article-hero-radius) var(--article-hero-radius) var(--article-hero-radius);
  }
  .ha-o--article-hero-corner-top-arch {
    --ha-hero-radius: var(--ha-arch) var(--ha-arch) var(--article-hero-radius) var(--article-hero-radius);
  }
  .ha-o--article-hero-tint-on { background: var(--ha-cat-tint); }
}

@media (max-width: 860px) {
  .ha-on--article-meta-side-left { text-align: left; }
  .ha-on--article-title-align-center { text-align: center; }
  .ha-on--article-title-weight-bold { font-weight: var(--weight-label); }
  .ha-on--article-chip-weight-regular { font-weight: var(--weight-body); }
  .ha-on--article-hero-corner-top-left-arch {
    --ha-hero-radius: var(--ha-arch) var(--article-hero-radius) var(--article-hero-radius) var(--article-hero-radius);
  }
  .ha-on--article-hero-corner-top-arch {
    --ha-hero-radius: var(--ha-arch) var(--ha-arch) var(--article-hero-radius) var(--article-hero-radius);
  }
  .ha-on--article-hero-tint-on { background: var(--ha-cat-tint); }
}

/*
 * The design's card-hover transition was tested at .6s, then .3s, and the
 * client chose instant (docs/02 §9). Nothing here animates.
 */
@media (prefers-reduced-motion: reduce) {
  .ha-i--shadow-lifted .ha-block__img {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * The number tables — see the header of this file
 * ═════════════════════════════════════════════════════════════════════════ */
.ha-w-t0 { --ha-w-t: 0; }
.ha-w-t1 { --ha-w-t: 1; }
.ha-w-t2 { --ha-w-t: 2; }
.ha-w-t3 { --ha-w-t: 3; }
.ha-w-t4 { --ha-w-t: 4; }
.ha-w-t5 { --ha-w-t: 5; }
.ha-w-t6 { --ha-w-t: 6; }
.ha-w-t7 { --ha-w-t: 7; }
.ha-w-t8 { --ha-w-t: 8; }
.ha-w-t9 { --ha-w-t: 9; }
.ha-w-t10 { --ha-w-t: 10; }
.ha-w-u0 { --ha-w-u: 0; }
.ha-w-u1 { --ha-w-u: 1; }
.ha-w-u2 { --ha-w-u: 2; }
.ha-w-u3 { --ha-w-u: 3; }
.ha-w-u4 { --ha-w-u: 4; }
.ha-w-u5 { --ha-w-u: 5; }
.ha-w-u6 { --ha-w-u: 6; }
.ha-w-u7 { --ha-w-u: 7; }
.ha-w-u8 { --ha-w-u: 8; }
.ha-w-u9 { --ha-w-u: 9; }

.ha-bw-t0 { --ha-bw-t: 0; }
.ha-bw-t1 { --ha-bw-t: 1; }
.ha-bw-t2 { --ha-bw-t: 2; }
.ha-bw-u0 { --ha-bw-u: 0; }
.ha-bw-u1 { --ha-bw-u: 1; }
.ha-bw-u2 { --ha-bw-u: 2; }
.ha-bw-u3 { --ha-bw-u: 3; }
.ha-bw-u4 { --ha-bw-u: 4; }
.ha-bw-u5 { --ha-bw-u: 5; }
.ha-bw-u6 { --ha-bw-u: 6; }
.ha-bw-u7 { --ha-bw-u: 7; }
.ha-bw-u8 { --ha-bw-u: 8; }
.ha-bw-u9 { --ha-bw-u: 9; }

.ha-rad-t0 { --ha-rad-t: 0; }
.ha-rad-t1 { --ha-rad-t: 1; }
.ha-rad-t2 { --ha-rad-t: 2; }
.ha-rad-t3 { --ha-rad-t: 3; }
.ha-rad-t4 { --ha-rad-t: 4; }
.ha-rad-u0 { --ha-rad-u: 0; }
.ha-rad-u1 { --ha-rad-u: 1; }
.ha-rad-u2 { --ha-rad-u: 2; }
.ha-rad-u3 { --ha-rad-u: 3; }
.ha-rad-u4 { --ha-rad-u: 4; }
.ha-rad-u5 { --ha-rad-u: 5; }
.ha-rad-u6 { --ha-rad-u: 6; }
.ha-rad-u7 { --ha-rad-u: 7; }
.ha-rad-u8 { --ha-rad-u: 8; }
.ha-rad-u9 { --ha-rad-u: 9; }

.ha-mt-t0 { --ha-mt-t: 0; }
.ha-mt-t1 { --ha-mt-t: 1; }
.ha-mt-t2 { --ha-mt-t: 2; }
.ha-mt-t3 { --ha-mt-t: 3; }
.ha-mt-t4 { --ha-mt-t: 4; }
.ha-mt-t5 { --ha-mt-t: 5; }
.ha-mt-t6 { --ha-mt-t: 6; }
.ha-mt-t7 { --ha-mt-t: 7; }
.ha-mt-t8 { --ha-mt-t: 8; }
.ha-mt-t9 { --ha-mt-t: 9; }
.ha-mt-t10 { --ha-mt-t: 10; }
.ha-mt-t11 { --ha-mt-t: 11; }
.ha-mt-t12 { --ha-mt-t: 12; }
.ha-mt-t13 { --ha-mt-t: 13; }
.ha-mt-t14 { --ha-mt-t: 14; }
.ha-mt-t15 { --ha-mt-t: 15; }
.ha-mt-t16 { --ha-mt-t: 16; }
.ha-mt-t17 { --ha-mt-t: 17; }
.ha-mt-t18 { --ha-mt-t: 18; }
.ha-mt-t19 { --ha-mt-t: 19; }
.ha-mt-t20 { --ha-mt-t: 20; }
.ha-mt-u0 { --ha-mt-u: 0; }
.ha-mt-u1 { --ha-mt-u: 1; }
.ha-mt-u2 { --ha-mt-u: 2; }
.ha-mt-u3 { --ha-mt-u: 3; }
.ha-mt-u4 { --ha-mt-u: 4; }
.ha-mt-u5 { --ha-mt-u: 5; }
.ha-mt-u6 { --ha-mt-u: 6; }
.ha-mt-u7 { --ha-mt-u: 7; }
.ha-mt-u8 { --ha-mt-u: 8; }
.ha-mt-u9 { --ha-mt-u: 9; }

.ha-mb-t0 { --ha-mb-t: 0; }
.ha-mb-t1 { --ha-mb-t: 1; }
.ha-mb-t2 { --ha-mb-t: 2; }
.ha-mb-t3 { --ha-mb-t: 3; }
.ha-mb-t4 { --ha-mb-t: 4; }
.ha-mb-t5 { --ha-mb-t: 5; }
.ha-mb-t6 { --ha-mb-t: 6; }
.ha-mb-t7 { --ha-mb-t: 7; }
.ha-mb-t8 { --ha-mb-t: 8; }
.ha-mb-t9 { --ha-mb-t: 9; }
.ha-mb-t10 { --ha-mb-t: 10; }
.ha-mb-t11 { --ha-mb-t: 11; }
.ha-mb-t12 { --ha-mb-t: 12; }
.ha-mb-t13 { --ha-mb-t: 13; }
.ha-mb-t14 { --ha-mb-t: 14; }
.ha-mb-t15 { --ha-mb-t: 15; }
.ha-mb-t16 { --ha-mb-t: 16; }
.ha-mb-t17 { --ha-mb-t: 17; }
.ha-mb-t18 { --ha-mb-t: 18; }
.ha-mb-t19 { --ha-mb-t: 19; }
.ha-mb-t20 { --ha-mb-t: 20; }
.ha-mb-u0 { --ha-mb-u: 0; }
.ha-mb-u1 { --ha-mb-u: 1; }
.ha-mb-u2 { --ha-mb-u: 2; }
.ha-mb-u3 { --ha-mb-u: 3; }
.ha-mb-u4 { --ha-mb-u: 4; }
.ha-mb-u5 { --ha-mb-u: 5; }
.ha-mb-u6 { --ha-mb-u: 6; }
.ha-mb-u7 { --ha-mb-u: 7; }
.ha-mb-u8 { --ha-mb-u: 8; }
.ha-mb-u9 { --ha-mb-u: 9; }

.ha-fx-t0 { --ha-fx-t: 0; }
.ha-fx-t1 { --ha-fx-t: 1; }
.ha-fx-t2 { --ha-fx-t: 2; }
.ha-fx-t3 { --ha-fx-t: 3; }
.ha-fx-t4 { --ha-fx-t: 4; }
.ha-fx-t5 { --ha-fx-t: 5; }
.ha-fx-t6 { --ha-fx-t: 6; }
.ha-fx-t7 { --ha-fx-t: 7; }
.ha-fx-t8 { --ha-fx-t: 8; }
.ha-fx-t9 { --ha-fx-t: 9; }
.ha-fx-t10 { --ha-fx-t: 10; }
.ha-fx-u0 { --ha-fx-u: 0; }
.ha-fx-u1 { --ha-fx-u: 1; }
.ha-fx-u2 { --ha-fx-u: 2; }
.ha-fx-u3 { --ha-fx-u: 3; }
.ha-fx-u4 { --ha-fx-u: 4; }
.ha-fx-u5 { --ha-fx-u: 5; }
.ha-fx-u6 { --ha-fx-u: 6; }
.ha-fx-u7 { --ha-fx-u: 7; }
.ha-fx-u8 { --ha-fx-u: 8; }
.ha-fx-u9 { --ha-fx-u: 9; }

.ha-fy-t0 { --ha-fy-t: 0; }
.ha-fy-t1 { --ha-fy-t: 1; }
.ha-fy-t2 { --ha-fy-t: 2; }
.ha-fy-t3 { --ha-fy-t: 3; }
.ha-fy-t4 { --ha-fy-t: 4; }
.ha-fy-t5 { --ha-fy-t: 5; }
.ha-fy-t6 { --ha-fy-t: 6; }
.ha-fy-t7 { --ha-fy-t: 7; }
.ha-fy-t8 { --ha-fy-t: 8; }
.ha-fy-t9 { --ha-fy-t: 9; }
.ha-fy-t10 { --ha-fy-t: 10; }
.ha-fy-u0 { --ha-fy-u: 0; }
.ha-fy-u1 { --ha-fy-u: 1; }
.ha-fy-u2 { --ha-fy-u: 2; }
.ha-fy-u3 { --ha-fy-u: 3; }
.ha-fy-u4 { --ha-fy-u: 4; }
.ha-fy-u5 { --ha-fy-u: 5; }
.ha-fy-u6 { --ha-fy-u: 6; }
.ha-fy-u7 { --ha-fy-u: 7; }
.ha-fy-u8 { --ha-fy-u: 8; }
.ha-fy-u9 { --ha-fy-u: 9; }

.ha-bc--ink { --ha-edge: var(--ink); }
.ha-bc--teal { --ha-edge: var(--teal); }
.ha-bc--teal-deep { --ha-edge: var(--teal-deep); }
.ha-bc--sage { --ha-edge: var(--sage); }
.ha-bc--lake { --ha-edge: var(--lake); }
.ha-bc--paper { --ha-edge: var(--paper); }
.ha-bc--white { --ha-edge: var(--white); }
.ha-bc--text { --ha-edge: var(--text); }
.ha-bc--text-soft { --ha-edge: var(--text-soft); }
.ha-bc--text-muted { --ha-edge: var(--text-muted); }
.ha-bc--text-faint { --ha-edge: var(--text-faint); }
.ha-bc--link { --ha-edge: var(--link); }
.ha-bc--green-mid { --ha-edge: var(--green-mid); }
.ha-bc--green-deep { --ha-edge: var(--green-deep); }
.ha-bc--blue-deep { --ha-edge: var(--blue-deep); }
.ha-bc--base-a { --ha-edge: var(--base-a); }
.ha-bc--base-b { --ha-edge: var(--base-b); }
.ha-bc--base-c { --ha-edge: var(--base-c); }
.ha-bc--wash-a { --ha-edge: var(--wash-a); }
.ha-bc--wash-b { --ha-edge: var(--wash-b); }
.ha-bc--wash-c { --ha-edge: var(--wash-c); }
.ha-bc--tint-massage { --ha-edge: var(--tint-massage); }
.ha-bc--tint-kinesiology { --ha-edge: var(--tint-kinesiology); }
.ha-bc--tint-cures { --ha-edge: var(--tint-cures); }
.ha-bc--tint-advice { --ha-edge: var(--tint-advice); }
.ha-bc--placeholder-bg { --ha-edge: var(--placeholder-bg); }
.ha-bc--placeholder-text { --ha-edge: var(--placeholder-text); }

/* ── The text editor's style vocabulary (docs/12 Q24, decided 2026-09-02) ──
 * Authored colour, highlight, size, font, line height and alignment arrive as
 * these classes — never as an inline style, which the CSP would drop. The set
 * is closed: HA\Support\TextStyles is the list, the sanitiser keeps nothing
 * else, and the colours are palette tokens (the swatch and highlight tokens
 * seeded by migration 0040, with a core token behind each as the fallback). */

.ha-block__rich .ha-c-ink { color: var(--ink); }
.ha-block__rich .ha-c-teal { color: var(--teal); }
.ha-block__rich .ha-c-lake { color: var(--lake); }
.ha-block__rich .ha-c-sage { color: var(--sage); }
.ha-block__rich .ha-c-rust { color: var(--swatch-rust, var(--ink)); }
.ha-block__rich .ha-c-amber { color: var(--swatch-amber, var(--ink)); }
.ha-block__rich .ha-c-slate { color: var(--swatch-slate, var(--text-muted)); }
.ha-block__rich .ha-c-white { color: var(--white); }

.ha-block__rich .ha-bg-sand,
.ha-block__rich .ha-bg-mint,
.ha-block__rich .ha-bg-sky,
.ha-block__rich .ha-bg-peach,
.ha-block__rich .ha-bg-olive {
  padding: 0 .15em;
  border-radius: 3px;
  box-decoration-break: clone;
}
.ha-block__rich .ha-bg-sand { background-color: var(--highlight-sand, var(--wash-a)); }
.ha-block__rich .ha-bg-mint { background-color: var(--highlight-mint, var(--wash-c)); }
.ha-block__rich .ha-bg-sky { background-color: var(--highlight-sky, var(--wash-b)); }
.ha-block__rich .ha-bg-peach { background-color: var(--highlight-peach, var(--base-a)); }
.ha-block__rich .ha-bg-olive { background-color: var(--highlight-olive, var(--base-c)); }

.ha-block__rich .ha-size-13 { font-size: 13px; }
.ha-block__rich .ha-size-14 { font-size: 14px; }
.ha-block__rich .ha-size-15 { font-size: 15px; }
.ha-block__rich .ha-size-16 { font-size: 16px; }
.ha-block__rich .ha-size-17 { font-size: 17px; }
.ha-block__rich .ha-size-18 { font-size: 18px; }
.ha-block__rich .ha-size-19 { font-size: 19px; }
.ha-block__rich .ha-size-20 { font-size: 20px; }
.ha-block__rich .ha-size-21 { font-size: 21px; }
.ha-block__rich .ha-size-22 { font-size: 22px; }
.ha-block__rich .ha-size-23 { font-size: 23px; }
.ha-block__rich .ha-size-24 { font-size: 24px; }
.ha-block__rich .ha-size-25 { font-size: 25px; }
.ha-block__rich .ha-size-26 { font-size: 26px; }
.ha-block__rich .ha-size-27 { font-size: 27px; }
.ha-block__rich .ha-size-28 { font-size: 28px; }

.ha-block__rich .ha-font-hyperlegible { font-family: var(--font-body, system-ui, sans-serif); }
.ha-block__rich .ha-font-sans { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.ha-block__rich .ha-font-serif { font-family: Georgia, "Times New Roman", serif; }
.ha-block__rich .ha-font-mono { font-family: "Courier New", Courier, monospace; }

.ha-block__rich .ha-lh-14 { line-height: 1.4; }
.ha-block__rich .ha-lh-16 { line-height: 1.6; }
.ha-block__rich .ha-lh-175 { line-height: 1.75; }
.ha-block__rich .ha-lh-20 { line-height: 2; }

.ha-block__rich .ha-align-left { text-align: left; }
.ha-block__rich .ha-align-center { text-align: center; }
.ha-block__rich .ha-align-right { text-align: right; }
.ha-block__rich .ha-align-justify { text-align: justify; }