/* Hatchery components and recipes.
   Rules: every value comes from a tier 2 or tier 3 variable in hatchery/tokens/hatchery.css.
   No literal colour, length, font, timing or sound appears in this file; tests/lint.mjs fails the build if one does.
   Components read the surrounding surface through --hx-ctx-*, so a text colour can never land on the wrong surface. */

/* ---------- Surface context ---------- */
[data-surface] { background: var(--hx-ctx-bg); color: var(--hx-ctx-text); }
[data-surface="base"]    { --hx-ctx-bg: var(--hx-surface-base-bg);    --hx-ctx-text: var(--hx-surface-base-text);    --hx-ctx-muted: var(--hx-surface-base-muted);    --hx-ctx-rule: var(--hx-surface-base-rule);    --hx-ctx-rule-strong: var(--hx-surface-base-rule-strong);    --hx-ctx-focus: var(--hx-surface-base-focus); }
[data-surface="sunken"]  { --hx-ctx-bg: var(--hx-surface-sunken-bg);  --hx-ctx-text: var(--hx-surface-sunken-text);  --hx-ctx-muted: var(--hx-surface-sunken-muted);  --hx-ctx-rule: var(--hx-surface-sunken-rule);  --hx-ctx-rule-strong: var(--hx-surface-sunken-rule-strong);  --hx-ctx-focus: var(--hx-surface-sunken-focus); }
[data-surface="raised"]  { --hx-ctx-bg: var(--hx-surface-raised-bg);  --hx-ctx-text: var(--hx-surface-raised-text);  --hx-ctx-muted: var(--hx-surface-raised-muted);  --hx-ctx-rule: var(--hx-surface-raised-rule);  --hx-ctx-rule-strong: var(--hx-surface-raised-rule-strong);  --hx-ctx-focus: var(--hx-surface-raised-focus); }
[data-surface="feature"] { --hx-ctx-bg: var(--hx-surface-feature-bg); --hx-ctx-text: var(--hx-surface-feature-text); --hx-ctx-muted: var(--hx-surface-feature-muted); --hx-ctx-rule: var(--hx-surface-feature-rule); --hx-ctx-rule-strong: var(--hx-surface-feature-rule-strong); --hx-ctx-focus: var(--hx-surface-feature-focus); }
[data-surface="media"]   { --hx-ctx-bg: var(--hx-surface-media-bg);   --hx-ctx-text: var(--hx-surface-media-text);   --hx-ctx-muted: var(--hx-surface-media-muted);   --hx-ctx-rule: var(--hx-surface-media-rule);   --hx-ctx-rule-strong: var(--hx-surface-media-rule-strong);   --hx-ctx-focus: var(--hx-surface-media-focus); }
[data-surface="inverse"] { --hx-ctx-bg: var(--hx-surface-inverse-bg); --hx-ctx-text: var(--hx-surface-inverse-text); --hx-ctx-muted: var(--hx-surface-inverse-muted); --hx-ctx-rule: var(--hx-surface-inverse-rule); --hx-ctx-rule-strong: var(--hx-surface-inverse-rule-strong); --hx-ctx-focus: var(--hx-surface-inverse-focus); }

/* ---------- Type roles: one class per typography token ---------- */
.hx-type-display, .hx-type-headline, .hx-type-heading, .hx-type-subheading, .hx-type-statement, .hx-type-body, .hx-type-body-print,
.hx-type-small, .hx-type-caption, .hx-type-caption-print, .hx-type-data, .hx-type-data-print, .hx-type-key-figure, .hx-type-key-figure-print {
  font-family: var(--t-family); font-size: var(--t-size); font-weight: var(--t-weight); line-height: var(--t-line-height); letter-spacing: var(--t-tracking);
  margin: 0;
}
.hx-type-display      { --t-family: var(--hx-typography-display-family); --t-size: var(--hx-typography-display-size); --t-weight: var(--hx-typography-display-weight); --t-line-height: var(--hx-typography-display-line-height); --t-tracking: var(--hx-typography-display-tracking); }
.hx-type-headline     { --t-family: var(--hx-typography-headline-family); --t-size: var(--hx-typography-headline-size); --t-weight: var(--hx-typography-headline-weight); --t-line-height: var(--hx-typography-headline-line-height); --t-tracking: var(--hx-typography-headline-tracking); }
.hx-type-heading      { --t-family: var(--hx-typography-heading-family); --t-size: var(--hx-typography-heading-size); --t-weight: var(--hx-typography-heading-weight); --t-line-height: var(--hx-typography-heading-line-height); --t-tracking: var(--hx-typography-heading-tracking); }
.hx-type-subheading   { --t-family: var(--hx-typography-subheading-family); --t-size: var(--hx-typography-subheading-size); --t-weight: var(--hx-typography-subheading-weight); --t-line-height: var(--hx-typography-subheading-line-height); --t-tracking: var(--hx-typography-subheading-tracking); }
.hx-type-statement    { --t-family: var(--hx-typography-statement-family); --t-size: var(--hx-typography-statement-size); --t-weight: var(--hx-typography-statement-weight); --t-line-height: var(--hx-typography-statement-line-height); --t-tracking: var(--hx-typography-statement-tracking); }
.hx-type-body         { --t-family: var(--hx-typography-body-family); --t-size: var(--hx-typography-body-size); --t-weight: var(--hx-typography-body-weight); --t-line-height: var(--hx-typography-body-line-height); --t-tracking: var(--hx-typography-body-tracking); max-width: var(--hx-layout-measure); }
.hx-type-body-print   { --t-family: var(--hx-typography-body-print-family); --t-size: var(--hx-typography-body-print-size); --t-weight: var(--hx-typography-body-print-weight); --t-line-height: var(--hx-typography-body-print-line-height); --t-tracking: var(--hx-typography-body-print-tracking); }
.hx-type-small        { --t-family: var(--hx-typography-small-family); --t-size: var(--hx-typography-small-size); --t-weight: var(--hx-typography-small-weight); --t-line-height: var(--hx-typography-small-line-height); --t-tracking: var(--hx-typography-small-tracking); }
.hx-type-caption      { --t-family: var(--hx-typography-caption-family); --t-size: var(--hx-typography-caption-size); --t-weight: var(--hx-typography-caption-weight); --t-line-height: var(--hx-typography-caption-line-height); --t-tracking: var(--hx-typography-caption-tracking); }
.hx-type-caption-print { --t-family: var(--hx-typography-caption-print-family); --t-size: var(--hx-typography-caption-print-size); --t-weight: var(--hx-typography-caption-print-weight); --t-line-height: var(--hx-typography-caption-print-line-height); --t-tracking: var(--hx-typography-caption-print-tracking); }
.hx-type-data         { --t-family: var(--hx-typography-data-family); --t-size: var(--hx-typography-data-size); --t-weight: var(--hx-typography-data-weight); --t-line-height: var(--hx-typography-data-line-height); --t-tracking: var(--hx-typography-data-tracking); font-stretch: var(--hx-typography-data-stretch); font-variant-numeric: var(--hx-typography-data-numerals); }
.hx-type-data-print   { --t-family: var(--hx-typography-data-print-family); --t-size: var(--hx-typography-data-print-size); --t-weight: var(--hx-typography-data-print-weight); --t-line-height: var(--hx-typography-data-print-line-height); --t-tracking: var(--hx-typography-data-print-tracking); font-stretch: var(--hx-typography-data-print-stretch); font-variant-numeric: var(--hx-typography-data-print-numerals); }
.hx-type-key-figure   { --t-family: var(--hx-typography-key-figure-family); --t-size: var(--hx-typography-key-figure-size); --t-weight: var(--hx-typography-key-figure-weight); --t-line-height: var(--hx-typography-key-figure-line-height); --t-tracking: var(--hx-typography-key-figure-tracking); font-variant-numeric: var(--hx-typography-key-figure-numerals); }
.hx-type-key-figure-print { --t-family: var(--hx-typography-key-figure-print-family); --t-size: var(--hx-typography-key-figure-print-size); --t-weight: var(--hx-typography-key-figure-print-weight); --t-line-height: var(--hx-typography-key-figure-print-line-height); --t-tracking: var(--hx-typography-key-figure-print-tracking); font-variant-numeric: var(--hx-typography-key-figure-print-numerals); }
.hx-muted { color: var(--hx-ctx-muted); }

/* ---------- 1. Symbol (rendered by <hx-symbol>, decorative unless labelled) ---------- */
hx-symbol { display: inline-block; width: var(--hx-symbol-size, var(--hx-layout-symbol-min)); height: var(--hx-symbol-size, var(--hx-layout-symbol-min)); flex: none; color: var(--hx-brand-mark-primary); }
hx-symbol svg { display: block; width: 100%; height: 100%; }
hx-symbol .hx-symbol__b { fill: var(--hx-symbol-secondary, var(--hx-brand-mark-secondary)); }
hx-symbol .hx-symbol__a { fill: currentColor; }
hx-symbol[tone="one"] .hx-symbol__b { fill: currentColor; }
hx-symbol .hx-symbol__open { transform-box: fill-box; transform-origin: center; transition: transform var(--hx-motion-endorse-duration) var(--hx-motion-endorse-easing); }

/* ---------- 2. Lockup and 3. Endorsement line (links or plain) ----------
   Always Archivo (font-family.hatchery, locked): inside a venture the line keeps Hatchery's voice and takes only the venture's colour. */
.hx-lockup, .hx-endorsement {
  display: inline-flex; align-items: center; color: inherit; text-decoration: none;
  font-family: var(--hx-font-family-hatchery); font-weight: var(--hx-weight-emphasis);
  border-radius: var(--hx-radius-mark);
  transition: text-decoration-color var(--hx-motion-press-duration) var(--hx-motion-press-easing);
}
.hx-lockup { --l: var(--hx-typography-body-size); gap: var(--hx-space-gap-tight); font-size: var(--l); line-height: var(--hx-typography-subheading-line-height); }
.hx-lockup[data-size="small"] { --l: var(--hx-typography-caption-size); }
.hx-lockup[data-size="large"] { --l: var(--hx-typography-heading-size); }
.hx-lockup hx-symbol { --hx-symbol-size: var(--l); color: currentColor; }
.hx-endorsement { gap: var(--hx-space-gap-tight); font-size: var(--hx-typography-caption-size); line-height: var(--hx-typography-caption-line-height); }
.hx-endorsement hx-symbol { --hx-symbol-size: var(--hx-layout-symbol-min); color: currentColor; }
a.hx-lockup, a.hx-endorsement { min-height: var(--hx-layout-target-min); }
a.hx-lockup:hover .hx-symbol__open, a.hx-endorsement:hover .hx-symbol__open,
a.hx-lockup:focus-visible .hx-symbol__open, a.hx-endorsement:focus-visible .hx-symbol__open { transform: rotate(var(--hx-motion-hover-turn)); }
a.hx-lockup:hover, a.hx-endorsement:hover { text-decoration: underline; text-decoration-thickness: var(--hx-border-rule-width); text-underline-offset: var(--hx-space-gap-tight); }
a.hx-lockup:active, a.hx-endorsement:active { text-decoration: underline; text-decoration-thickness: var(--hx-border-focus-width); }

/* ---------- Focus, shared by every interactive component ---------- */
:where(a, button, [tabindex]):focus-visible {
  outline: var(--hx-border-focus-width) solid var(--hx-ctx-focus, var(--hx-surface-base-focus));
  outline-offset: var(--hx-border-focus-offset);
}

/* ---------- 4. Panel ---------- */
.hx-panel {
  position: relative; display: flex; flex-direction: column; gap: var(--hx-space-gap);
  padding: var(--hx-space-inset-panel); border-radius: var(--hx-radius-surface); isolation: isolate; overflow: hidden;
}
.hx-panel[data-density="compact"] { padding: var(--hx-space-inset-panel-compact); gap: var(--hx-space-gap-tight); }
.hx-panel > :not(hx-facet-field):not(.hx-fold) { position: relative; z-index: 1; }
a.hx-panel { text-decoration: none; min-height: var(--hx-layout-target-min); transition: box-shadow var(--hx-motion-hover-duration) var(--hx-motion-hover-easing); }
a.hx-panel:hover { box-shadow: inset 0 0 0 var(--hx-border-rule-width) var(--hx-ctx-rule-strong); }
a.hx-panel:active { box-shadow: inset 0 0 0 var(--hx-border-focus-width) var(--hx-ctx-rule-strong); }
.hx-panel[aria-busy="true"] > .hx-settle { visibility: hidden; }
.hx-panel[aria-busy="true"]::after {
  content: attr(data-loading-label); position: relative; z-index: 1; color: var(--hx-ctx-muted);
  font: var(--hx-typography-caption-weight) var(--hx-typography-caption-size) / var(--hx-typography-caption-line-height) var(--hx-typography-caption-family);
}
.hx-panel[data-state="error"] { box-shadow: inset 0 0 0 var(--hx-border-focus-width) var(--hx-ctx-rule-strong); }
.hx-panel__message { display: flex; align-items: baseline; gap: var(--hx-space-gap-tight); }

/* Text settles after its panel is built. Opacity only. */
.hx-settle { animation: hx-settle var(--hx-motion-enter-duration) var(--hx-motion-enter-easing) both; animation-delay: var(--hx-settle-delay, 0s); }
@keyframes hx-settle { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 5. Facet field (decorative, built by <hx-facet-field>) ---------- */
hx-facet-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; display: block; }
hx-facet-field .hx-facet {
  position: absolute; width: var(--f-size); height: var(--f-size); background: var(--f-tone);
  transform-origin: center; animation: hx-facet var(--hx-motion-build-duration) var(--hx-motion-build-easing) both; animation-delay: var(--f-delay);
  animation-play-state: paused;
}
hx-facet-field[data-built] .hx-facet, hx-facet-field[data-building] .hx-facet { animation-play-state: running; }
hx-facet-field .hx-facet[data-half="a"] { clip-path: polygon(0 0, 100% 0, 0 100%); }
hx-facet-field .hx-facet[data-half="b"] { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
@keyframes hx-facet {
  from { opacity: 0; transform: rotate(calc(var(--hx-motion-build-turn) * var(--f-dir))) scale(var(--hx-motion-build-scale-from)); }
  to { opacity: 1; transform: none; }
}
hx-facet-field[surface="base"]    { --f-1: var(--hx-facet-field-base-tone-1);    --f-2: var(--hx-facet-field-base-tone-2);    --f-3: var(--hx-facet-field-base-tone-3);    --f-s1: var(--hx-facet-field-base-speckle-1);    --f-s2: var(--hx-facet-field-base-speckle-2); }
hx-facet-field[surface="feature"] { --f-1: var(--hx-facet-field-feature-tone-1); --f-2: var(--hx-facet-field-feature-tone-2); --f-3: var(--hx-facet-field-feature-tone-3); --f-s1: var(--hx-facet-field-feature-speckle-1); --f-s2: var(--hx-facet-field-feature-speckle-2); }
hx-facet-field[surface="media"]   { --f-1: var(--hx-facet-field-media-tone-1);   --f-2: var(--hx-facet-field-media-tone-2);   --f-3: var(--hx-facet-field-media-tone-3);   --f-s1: var(--hx-facet-field-media-speckle-1);   --f-s2: var(--hx-facet-field-media-speckle-2); }
/* Once built, a field paints its own backdrop in its first tone, so a gap left by a later turn shows the field's own
   colour, never the panel or the page behind it. Facets already cover the field, so the backdrop is unseen. (Changed in
   1.1.0: before, a built field was transparent.) */
hx-facet-field[data-built] { background: var(--f-1); }
/* Data settles to one flat tone after the build (Stage 3 fix) */
hx-facet-field[data-flat][data-built] .hx-facet { background: var(--f-1); }

/* ---------- 6. Number label ---------- */
.hx-number { color: var(--hx-ctx-muted); font: var(--hx-typography-caption-weight) var(--hx-typography-caption-size) / var(--hx-typography-caption-line-height) var(--hx-typography-caption-family); font-variant-numeric: var(--hx-typography-data-numerals); margin: 0; }

/* ---------- 7. Caption ---------- */
.hx-caption { color: var(--hx-ctx-muted); margin: 0; font: var(--hx-typography-caption-weight) var(--hx-typography-caption-size) / var(--hx-typography-caption-line-height) var(--hx-typography-caption-family); }

/* ---------- 8. Display headline block ---------- */
.hx-display { display: flex; flex-direction: column; gap: var(--hx-space-gap); margin: 0; }
.hx-panel { container-type: inline-size; }
.hx-display__line { overflow-wrap: break-word; hyphens: manual; font-family: var(--hx-typography-display-family);
  font-size: var(--hx-display-size, clamp(var(--hx-typography-headline-size), calc(var(--hx-layout-display-fluid) * 1cqi), var(--hx-typography-display-size))); font-weight: var(--hx-typography-display-weight); line-height: var(--hx-typography-display-line-height); letter-spacing: var(--hx-typography-display-tracking); margin: 0; }
.hx-display[data-size="headline"] .hx-display__line { font-size: var(--hx-typography-headline-size); line-height: var(--hx-typography-headline-line-height); letter-spacing: var(--hx-typography-headline-tracking); }

/* ---------- 9. Key figure ---------- */
.hx-figure { display: flex; flex-direction: column; gap: 0; margin: 0; padding-block: var(--hx-space-gap-tight); border-bottom: var(--hx-border-rule-width) solid var(--hx-ctx-rule); }
.hx-figure__value { font-family: var(--hx-typography-key-figure-family); font-size: var(--hx-typography-key-figure-size); font-weight: var(--hx-typography-key-figure-weight); line-height: var(--hx-typography-key-figure-line-height); letter-spacing: var(--hx-typography-key-figure-tracking); font-variant-numeric: var(--hx-typography-key-figure-numerals); }
.hx-figure__label { font: var(--hx-typography-small-weight) var(--hx-typography-small-size) / var(--hx-typography-small-line-height) var(--hx-typography-small-family); }
.hx-figure[aria-busy="true"] .hx-figure__value, .hx-figure[data-state="error"] .hx-figure__value { color: var(--hx-ctx-muted); }
.hx-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hx-layout-column-min)), 1fr)); column-gap: var(--hx-space-gap-loose); border-top: var(--hx-border-rule-width) solid var(--hx-ctx-rule-strong); }

/* ---------- 10. Status: marker and word, never the marker alone ---------- */
.hx-status { display: inline-flex; align-items: center; gap: var(--hx-space-gap-tight); white-space: nowrap; }
.hx-status::before { content: ""; width: var(--hx-layout-marker); height: var(--hx-layout-marker); flex: none; clip-path: polygon(0 0, 100% 0, 0 100%); background: var(--hx-status-proceed); }
.hx-status[data-status="hold"]::before { background: var(--hx-status-hold); }

/* ---------- 11. Data table, on a native table ---------- */
.hx-table-wrap { overflow-x: auto; max-width: 100%; }
.hx-table-wrap:focus-visible { outline-offset: 0; }
.hx-table { width: 100%; border-collapse: collapse; color: inherit;
  font: var(--hx-typography-data-weight) var(--hx-typography-data-size) / var(--hx-typography-data-line-height) var(--hx-typography-data-family);
  font-stretch: var(--hx-typography-data-stretch); font-variant-numeric: var(--hx-typography-data-numerals); }
.hx-table caption { text-align: start; caption-side: top; padding-block-end: var(--hx-space-gap-tight); color: var(--hx-ctx-muted);
  font: var(--hx-typography-caption-weight) var(--hx-typography-caption-size) / var(--hx-typography-caption-line-height) var(--hx-typography-caption-family); }
.hx-table th, .hx-table td { text-align: start; padding: var(--hx-space-cell) var(--hx-space-inset-control) var(--hx-space-cell) 0; border-bottom: var(--hx-border-rule-width) solid var(--hx-ctx-rule); vertical-align: baseline; }
.hx-table thead th { font-weight: var(--hx-weight-emphasis); border-top: var(--hx-border-rule-width) solid var(--hx-ctx-rule-strong); border-bottom-color: var(--hx-ctx-rule-strong); }
.hx-table tbody th { font-weight: var(--hx-weight-emphasis); }
.hx-table .hx-num { text-align: end; white-space: nowrap; }
.hx-table tfoot th, .hx-table tfoot td { font-weight: var(--hx-weight-strong); border-bottom: none; border-top: var(--hx-border-rule-width) solid var(--hx-ctx-rule-strong); }
.hx-table[aria-busy="true"] tbody { visibility: hidden; }
.hx-table__message td { color: var(--hx-ctx-text); }

/* ---------- 12. Fold mark (decorative) ---------- */
.hx-fold { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: var(--hx-layout-fold-mark); height: var(--hx-layout-fold-mark); background: var(--hx-brand-fold-mark); clip-path: polygon(0 0, 100% 0, 0 100%); z-index: 1; }

/* ---------- 13. Disclaimer, always set last ---------- */
.hx-disclaimer { color: var(--hx-ctx-muted); margin: 0; padding-block-start: var(--hx-space-gap-tight); border-top: var(--hx-border-rule-width) solid var(--hx-ctx-rule);
  font: var(--hx-typography-caption-weight) var(--hx-typography-caption-size) / var(--hx-typography-caption-line-height) var(--hx-typography-caption-family); }

/* ---------- 14. Button, on a native button (moved from recipes in Stage 9: it is a component) ---------- */
.hx-button {
  font: var(--hx-weight-emphasis) var(--hx-typography-small-size) / var(--hx-typography-small-line-height) var(--hx-font-family-reading);
  min-height: var(--hx-layout-target-min); padding-inline: var(--hx-space-gap); border: var(--hx-border-rule-width) solid var(--hx-ctx-rule-strong);
  background: transparent; color: inherit; cursor: pointer; border-radius: var(--hx-radius-control);
  transition: background-color var(--hx-motion-hover-duration) var(--hx-motion-hover-easing);
}
.hx-button:hover { background: var(--hx-ctx-rule); }
/* Primary: one per view, for the main action. Added in Stage 9: DESIGN.md described it and the action.primary
   tokens existed, but no component used them, so the agent proof's main action could only be an outline. */
.hx-button[data-variant="primary"] { background: var(--hx-action-primary); color: var(--hx-action-primary-text); border-color: var(--hx-action-primary); font-weight: var(--hx-weight-strong); padding-inline: var(--hx-space-gap-loose); }
.hx-button[data-variant="primary"]:hover { background: var(--hx-action-primary-hover); border-color: var(--hx-action-primary-hover); }
.hx-button[data-variant="primary"]:active { box-shadow: inset 0 0 0 var(--hx-border-focus-width) var(--hx-action-primary-text); }
.hx-button:active { box-shadow: inset 0 0 0 var(--hx-border-focus-width) var(--hx-ctx-rule-strong); }
.hx-button:disabled, .hx-button[aria-disabled="true"], .hx-button[data-variant="primary"]:disabled { cursor: not-allowed; color: var(--hx-action-disabled-text); border-color: var(--hx-action-disabled); background: transparent; }
.hx-button[aria-busy="true"] { cursor: progress; }

a.hx-button { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- 15. Sound switch. Added in Stage 9: sound is off until the person turns it on, and the agent proof
   showed nothing let them. One per page, near the content that sounds. The button text says the state. ---------- */
.hx-button[data-hx-sound-switch][aria-pressed="true"] { box-shadow: inset 0 0 0 var(--hx-border-focus-width) var(--hx-ctx-rule-strong); }

/* ---------- 16. Icon button (1.1.0): a native button that holds a drawn icon and no text. The sound switch and the motion
   switch use it; the button's aria-label is its name. No border, no background at rest; the icon takes the surface's text
   colour, drawn at one and a half rule widths. The icon is the target less the control inset on each side. Hover and press
   follow .hx-button. ---------- */
.hx-icon-button {
  --icon-size: calc(var(--hx-layout-target-min) - 2 * var(--hx-space-inset-control));
  display: inline-grid; place-items: center; flex: none; margin: 0; padding: 0;
  min-width: var(--hx-layout-target-min); min-height: var(--hx-layout-target-min);
  border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: var(--hx-radius-control);
  transition: background-color var(--hx-motion-hover-duration) var(--hx-motion-hover-easing);
}
.hx-icon-button[hidden] { display: none; }
.hx-icon-button svg { display: block; width: var(--icon-size); height: var(--icon-size); stroke-width: calc(var(--hx-border-rule-width) * 1.5); }
.hx-icon-button path { vector-effect: non-scaling-stroke; } /* the line is drawn at that width, whatever size the icon is */
.hx-icon-button:hover { background: var(--hx-ctx-rule); }
.hx-icon-button:active { box-shadow: inset 0 0 0 var(--hx-border-focus-width) var(--hx-ctx-rule-strong); }

/* ---------- 17. Text link (1.1.0): a plain text action. It takes the surface's text colour and is underlined only when
   pointed at or focused. For going somewhere; doing something here is a button. ---------- */
a.hx-link {
  display: inline-flex; align-items: center; min-height: var(--hx-layout-target-min);
  border: 0; color: inherit; text-decoration: none;
  font-family: var(--hx-font-family-reading); font-size: var(--hx-typography-small-size); line-height: var(--hx-typography-small-line-height); font-weight: var(--hx-weight-strong);
}
a.hx-link:hover, a.hx-link:focus-visible { text-decoration: underline; text-decoration-thickness: var(--hx-border-rule-width); text-underline-offset: var(--hx-space-gap-tight); }
a.hx-link:active { text-decoration-thickness: var(--hx-border-focus-width); }

/* ---------- 18. Dialog (1.1.0): a flat modal panel on a native <dialog>, opened with showModal() (the script's Dialog section
   wires the opener, the closer and the focus). The backdrop is the inverse surface itself, the graphite, opaque: depth is a change
   of surface, never a shadow, blur or dimming. The panel takes its surface from data-surface. Its content sits in
   .hx-dialog__content, which scrolls when the screen is too short, so the panel never outgrows the viewport.
   With data-entrance="build" the dialog holds an <hx-facet-field trigger="manual"> before the content: the facets build the panel out
   of the graphite and fade away, and only then does the content settle, on the flat surface, so no words ever sit on facets.
   Reduced motion needs nothing here: the build tokens already turn the build into a fade. ---------- */
.hx-dialog {
  box-sizing: border-box; margin: auto; padding: 0; border: 0; border-radius: var(--hx-radius-surface); overflow: hidden;
  width: min(calc(var(--hx-layout-column-min) * 4), calc(100% - 2 * var(--hx-layout-margin-phone)));
  max-width: none; max-height: calc(100% - 2 * var(--hx-layout-margin-phone));
}
.hx-dialog[open] { display: flex; flex-direction: column; }
/* A build-entrance dialog holds focus itself while it builds (the script's Dialog section); that is not a control, so it gets no ring on the graphite. */
.hx-dialog[data-entrance="build"]:focus-visible { outline: none; }
.hx-dialog::backdrop { background: var(--hx-surface-inverse-bg); }
.hx-dialog__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--hx-space-gap); min-height: 0; overflow: auto; padding: var(--hx-space-inset-panel); }
/* The panel is graphite until built, like the stage: the facets build it out of the dark, and the flat surface is under them by the time
   they are built. The content is held back until then, fades in after the field has faded out, and waits again at the next open. */
.hx-dialog[data-entrance="build"]:has(> hx-facet-field:not([data-built])) { background: transparent; }
.hx-dialog[data-entrance="build"] > hx-facet-field { transition: opacity var(--hx-motion-enter-duration) var(--hx-motion-enter-easing); }
.hx-dialog[data-entrance="build"] > hx-facet-field[data-built] { opacity: 0; }
.hx-dialog[data-entrance="build"] > hx-facet-field:not([data-built]) ~ .hx-dialog__content { opacity: 0; }
.hx-dialog[data-entrance="build"] > hx-facet-field[data-built] ~ .hx-dialog__content {
  animation: hx-settle var(--hx-motion-enter-duration) var(--hx-motion-enter-easing) both; animation-delay: var(--hx-motion-enter-duration);
}

/* Print-only content, such as where to book when the button can't be pressed. Added in Stage 9. */
.hx-print-only { display: none; }

/* ---------- Print: the same components switch to their print type roles ---------- */
@media print {
  .hx-type-body { --t-size: var(--hx-typography-body-print-size); --t-line-height: var(--hx-typography-body-print-line-height); }
  .hx-caption, .hx-number, .hx-disclaimer, .hx-table caption { font-size: var(--hx-typography-caption-print-size); }
  .hx-table { font-size: var(--hx-typography-data-print-size); }
  .hx-table th, .hx-table td { padding-block: var(--hx-space-cell-print); }
  .hx-panel { padding: var(--hx-space-inset-panel-print); }
  .hx-figure__value { font-size: var(--hx-typography-key-figure-print-size); letter-spacing: var(--hx-typography-key-figure-print-tracking); }
  hx-facet-field .hx-facet { animation: none; }
  .hx-settle { animation: none; }
  .hx-no-print, [data-hx-sound-switch], [data-hx-motion-switch] { display: none; }
  .hx-print-only { display: revert; }
}