/*
 * HarmoniQ component styles. Framework-free: plain class names on plain HTML.
 * Requires dist/tokens.css (all values come from --hq-* tokens; fallbacks are the light theme).
 * Set dir="rtl" on the page root; components use logical properties.
 */
.hq-card, .hq-pill, .hq-badge, .hq-stat, .hq-callout, .hq-quote, .hq-verdict {
  font-family: var(--hq-font-fa, Ravi, Tahoma, sans-serif);
  box-sizing: border-box;
}

/* Card */
.hq-card { border-radius: var(--hq-radius-md, 16px); padding: var(--hq-space-4, 32px); text-align: start; display: flex; flex-direction: column; gap: var(--hq-space-2, 16px); }
.hq-card--outline { background: var(--hq-surface-raised, #fff); border: 1px solid var(--hq-border, #DDE1E6); }
.hq-card--tint { background: var(--hq-surface-alt, #F2F4F8); border: 1px solid transparent; }
.hq-card--inverse { background: var(--hq-surface-inverse, #061727); border: 1px solid transparent; }
.hq-card__icon { width: 40px; height: 40px; color: var(--hq-accent, #0F62FE); align-self: flex-start; }
.hq-card__icon img, .hq-card__icon svg { width: 100%; height: 100%; display: block; }
.hq-card__eyebrow { font-size: 12px; line-height: 1.6; font-weight: 600; color: var(--hq-accent, #0F62FE); }
.hq-card__title { font-size: 24px; line-height: 1.4; font-weight: 700; color: var(--hq-ink, #012749); }
.hq-card__body { font-size: 16px; line-height: 1.8; color: var(--hq-text, #343A3F); }
.hq-card--inverse .hq-card__title { color: var(--hq-text-on-inverse, #fff); }
.hq-card--inverse .hq-card__body { color: var(--hq-text-on-inverse, #fff); opacity: .88; }
.hq-card--inverse .hq-card__eyebrow, .hq-card--inverse .hq-card__icon { color: var(--hq-brand, #33B1FF); }
/* surface-inverse flips to white in dark mode, where brand cyan would fall under 3:1; use the 60 step of blue (5:1 on white). */
[data-theme="dark"] .hq-card--inverse :is(.hq-card__eyebrow, .hq-card__icon) { color: var(--hq-blue-60, #0F62FE); }

/* Pill */
.hq-pill { display: inline-flex; align-items: center; border-radius: var(--hq-radius-pill, 999px); padding: 2px 12px; font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.hq-pill--blue { background: var(--hq-blue-10, #EDF5FF); color: var(--hq-blue-70, #0043CE); }
.hq-pill--cyan { background: var(--hq-cyan-10, #E5F6FF); color: var(--hq-cyan-70, #00539A); }
.hq-pill--gray { background: var(--hq-gray-20, #DDE1E6); color: var(--hq-gray-80, #343A3F); }
.hq-pill--teal { background: var(--hq-teal-10, #D9FBFB); color: var(--hq-teal-70, #005D5D); }
.hq-pill--red { background: var(--hq-red-10, #FFF1F1); color: var(--hq-red-70, #A2191F); }
.hq-pill--inverse { background: var(--hq-brand, #33B1FF); color: var(--hq-brand-deep, #061727); }

/* Number badge */
.hq-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hq-ink, #012749); color: var(--hq-surface, #fff); font-size: 13px; font-weight: 700; line-height: 1; border: 1.5px solid var(--hq-surface, #fff); }
.hq-badge--inverse { background: var(--hq-brand, #33B1FF); color: var(--hq-brand-deep, #061727); }

/* Stat */
.hq-stat { text-align: start; }
.hq-stat__value { font-size: 56px; line-height: 1.1; font-weight: 900; font-variant-numeric: tabular-nums; }
.hq-stat--ink .hq-stat__value { color: var(--hq-ink, #012749); }
.hq-stat--accent .hq-stat__value { color: var(--hq-accent, #0F62FE); }
.hq-stat__label { margin-top: 8px; font-size: 16px; line-height: 1.6; font-weight: 700; color: var(--hq-ink, #012749); }
.hq-stat__note { font-size: 14px; line-height: 1.6; color: var(--hq-text-secondary, #697077); }

/* Callout */
.hq-callout { display: flex; gap: var(--hq-space-3, 24px); align-items: center; border-radius: var(--hq-radius-sm, 8px); padding: var(--hq-space-3, 24px) var(--hq-space-4, 32px); border-inline-start: 4px solid; }
.hq-callout__kind { font-size: 18px; font-weight: 700; min-width: 64px; }
.hq-callout__body { margin: 0; font-size: 16px; line-height: 1.8; color: var(--hq-ink, #012749); }
.hq-callout--note { background: var(--hq-accent-subtle, #EDF5FF); border-color: var(--hq-accent, #0F62FE); }
.hq-callout--note .hq-callout__kind { color: var(--hq-accent, #0F62FE); }
.hq-callout--warning { background: var(--hq-negative-subtle, #FFF1F1); border-color: var(--hq-negative, #DA1E28); }
.hq-callout--warning .hq-callout__kind { color: var(--hq-negative, #DA1E28); }
.hq-callout--result { background: var(--hq-positive-subtle, #D9FBFB); border-color: var(--hq-positive, #007D79); }
.hq-callout--result .hq-callout__kind { color: var(--hq-positive, #007D79); }

/* Pull quote */
.hq-quote { margin: 0; text-align: start; }
.hq-quote__mark { color: var(--hq-brand, #33B1FF); line-height: 0; }
.hq-quote__mark .hq-icon { inline-size: var(--hq-space-6, 48px); block-size: var(--hq-space-6, 48px); }
.hq-quote__text { margin: 8px 0 0; font-size: 28px; line-height: 1.5; font-weight: 700; color: var(--hq-ink, #012749); }
.hq-quote__by { margin-top: var(--hq-space-3, 24px); display: flex; flex-direction: column; gap: 2px; }
.hq-quote__name { font-size: 16px; font-weight: 700; color: var(--hq-ink, #012749); }
.hq-quote__role { font-size: 14px; color: var(--hq-text-secondary, #697077); }
.hq-quote--dark { background: var(--hq-brand-deep, #061727); padding: var(--hq-space-6, 48px); border-radius: var(--hq-radius-md, 16px); }
.hq-quote--dark .hq-quote__text, .hq-quote--dark .hq-quote__name { color: var(--hq-text-on-inverse, #fff); }
.hq-quote--dark .hq-quote__role { color: var(--hq-cyan-30, #82CFFF); }

/* Verdict */
.hq-verdict { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--hq-text, #343A3F); }
.hq-verdict__mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--hq-white, #fff); font: 700 14px/1 Arial, sans-serif; }
.hq-verdict--do .hq-verdict__mark { background: var(--hq-teal-60, #007D79); }
.hq-verdict--dont .hq-verdict__mark { background: var(--hq-red-60, #DA1E28); }

.hq-card :focus-visible, .hq-pill:focus-visible { outline: 2px solid var(--hq-focus, #0F62FE); outline-offset: 2px; }

/* ==========================================================================
 * Web grid (proposal). 4 / 8 / 12 / 12 columns at sm / md / lg / xl.
 * Media queries cannot read CSS variables, so the breakpoint widths below
 * repeat --hq-grid-web-*-breakpoint; change both together.
 * In dir="rtl" the first column is on the right automatically.
 * ========================================================================== */
.hq-container, .hq-grid {
  --_hq-cols: var(--hq-grid-web-sm-columns);
  --_hq-gutter: var(--hq-grid-web-sm-gutter);
  --_hq-margin: var(--hq-grid-web-sm-margin);
}
@media (min-width: 672px) {
  .hq-container, .hq-grid {
    --_hq-cols: var(--hq-grid-web-md-columns);
    --_hq-gutter: var(--hq-grid-web-md-gutter);
    --_hq-margin: var(--hq-grid-web-md-margin);
  }
}
@media (min-width: 1056px) {
  .hq-container, .hq-grid {
    --_hq-cols: var(--hq-grid-web-lg-columns);
    --_hq-gutter: var(--hq-grid-web-lg-gutter);
    --_hq-margin: var(--hq-grid-web-lg-margin);
  }
}
@media (min-width: 1312px) {
  .hq-container, .hq-grid {
    --_hq-cols: var(--hq-grid-web-xl-columns);
    --_hq-gutter: var(--hq-grid-web-xl-gutter);
    --_hq-margin: var(--hq-grid-web-xl-margin);
  }
}
.hq-container { box-sizing: border-box; inline-size: 100%; max-inline-size: var(--hq-grid-web-max-width); margin-inline: auto; padding-inline: var(--_hq-margin); }
.hq-grid { display: grid; grid-template-columns: repeat(var(--_hq-cols), minmax(0, 1fr)); column-gap: var(--_hq-gutter); row-gap: var(--_hq-gutter); }
.hq-grid > * { grid-column: 1 / -1; min-inline-size: 0; }
/* Spans: .hq-col-N applies from sm up; .hq-col-md-N / -lg-N / -xl-N override from that breakpoint. */
.hq-grid > .hq-col-1 { grid-column: span 1; }
.hq-grid > .hq-col-2 { grid-column: span 2; }
.hq-grid > .hq-col-3 { grid-column: span 3; }
.hq-grid > .hq-col-4 { grid-column: span 4; }
@media (min-width: 672px) {
  .hq-grid > .hq-col-md-1 { grid-column: span 1; }
  .hq-grid > .hq-col-md-2 { grid-column: span 2; }
  .hq-grid > .hq-col-md-3 { grid-column: span 3; }
  .hq-grid > .hq-col-md-4 { grid-column: span 4; }
  .hq-grid > .hq-col-md-5 { grid-column: span 5; }
  .hq-grid > .hq-col-md-6 { grid-column: span 6; }
  .hq-grid > .hq-col-md-7 { grid-column: span 7; }
  .hq-grid > .hq-col-md-8 { grid-column: span 8; }
}
@media (min-width: 1056px) {
  .hq-grid > .hq-col-lg-1 { grid-column: span 1; }
  .hq-grid > .hq-col-lg-2 { grid-column: span 2; }
  .hq-grid > .hq-col-lg-3 { grid-column: span 3; }
  .hq-grid > .hq-col-lg-4 { grid-column: span 4; }
  .hq-grid > .hq-col-lg-5 { grid-column: span 5; }
  .hq-grid > .hq-col-lg-6 { grid-column: span 6; }
  .hq-grid > .hq-col-lg-7 { grid-column: span 7; }
  .hq-grid > .hq-col-lg-8 { grid-column: span 8; }
  .hq-grid > .hq-col-lg-9 { grid-column: span 9; }
  .hq-grid > .hq-col-lg-10 { grid-column: span 10; }
  .hq-grid > .hq-col-lg-11 { grid-column: span 11; }
  .hq-grid > .hq-col-lg-12 { grid-column: span 12; }
}
@media (min-width: 1312px) {
  .hq-grid > .hq-col-xl-1 { grid-column: span 1; }
  .hq-grid > .hq-col-xl-2 { grid-column: span 2; }
  .hq-grid > .hq-col-xl-3 { grid-column: span 3; }
  .hq-grid > .hq-col-xl-4 { grid-column: span 4; }
  .hq-grid > .hq-col-xl-5 { grid-column: span 5; }
  .hq-grid > .hq-col-xl-6 { grid-column: span 6; }
  .hq-grid > .hq-col-xl-7 { grid-column: span 7; }
  .hq-grid > .hq-col-xl-8 { grid-column: span 8; }
  .hq-grid > .hq-col-xl-9 { grid-column: span 9; }
  .hq-grid > .hq-col-xl-10 { grid-column: span 10; }
  .hq-grid > .hq-col-xl-11 { grid-column: span 11; }
  .hq-grid > .hq-col-xl-12 { grid-column: span 12; }
}

/* ==========================================================================
 * Button (proposal)
 * ========================================================================== */
.hq-button {
  --hq-button-radius: var(--hq-radius-sm);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hq-space-1);
  min-block-size: var(--hq-size-control-lg);
  padding-block: 0;
  padding-inline: var(--hq-space-3);
  border: 1px solid transparent;
  border-radius: var(--hq-button-radius);
  font-family: var(--hq-font-fa);
  font-size: var(--hq-type-body-font-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--hq-accent);
  color: var(--hq-on-accent);
}
.hq-button:hover { background: var(--hq-accent-hover); }
.hq-button:active { background: var(--hq-accent-active); }
.hq-button:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: 2px; }

.hq-button--secondary { background: transparent; color: var(--hq-accent); border-color: var(--hq-accent); }
.hq-button--secondary:hover { background: var(--hq-accent-subtle); color: var(--hq-accent-hover); border-color: var(--hq-accent-hover); }
.hq-button--secondary:active { background: var(--hq-accent-subtle); color: var(--hq-accent-active); border-color: var(--hq-accent-active); }

.hq-button--ghost { background: transparent; color: var(--hq-accent); padding-inline: var(--hq-space-2); }
.hq-button--ghost:hover { background: var(--hq-accent-subtle); color: var(--hq-accent-hover); }
.hq-button--ghost:active { background: var(--hq-accent-subtle); color: var(--hq-accent-active); }

.hq-button--danger { background: var(--hq-negative); color: var(--hq-on-negative); }
.hq-button--danger:hover, .hq-button--danger:active { background: var(--hq-negative-hover); }

.hq-button--md { min-block-size: var(--hq-size-control-md); }
.hq-button--sm { min-block-size: var(--hq-size-control-sm); padding-inline: var(--hq-space-2); font-size: var(--hq-type-body-compact-font-size); }
.hq-button--block { display: flex; inline-size: 100%; }

.hq-button__icon { flex: none; inline-size: 20px; block-size: 20px; fill: currentColor; }
.hq-button--sm .hq-button__icon { inline-size: 16px; block-size: 16px; }
.hq-button--icon-only { padding-inline: 0; aspect-ratio: 1; }

.hq-button:is(:disabled, [aria-disabled="true"]),
.hq-button:is(:disabled, [aria-disabled="true"]):is(:hover, :active) {
  background: var(--hq-disabled);
  color: var(--hq-on-disabled);
  border-color: transparent;
  cursor: not-allowed;
}
.hq-button:is(.hq-button--secondary, .hq-button--ghost):is(:disabled, [aria-disabled="true"]),
.hq-button:is(.hq-button--secondary, .hq-button--ghost):is(:disabled, [aria-disabled="true"]):is(:hover, :active) {
  background: transparent;
}
.hq-button--secondary:is(:disabled, [aria-disabled="true"]) { border-color: var(--hq-disabled); }

/* ==========================================================================
 * Shared icon size inside components (Carbon icons, 32px grid, scaled).
 * ========================================================================== */
.hq-icon { flex: none; inline-size: 20px; block-size: 20px; fill: currentColor; }
.hq-icon--sm { inline-size: 16px; block-size: 16px; }
/* Direction-bearing icons (next, previous, undo...) flip in right-to-left layouts. */
.hq-icon--mirror:dir(rtl) { transform: scaleX(-1); }

/* ==========================================================================
 * Link (proposal)
 * ========================================================================== */
/* No underline in any state (Persian descenders collide with it). Inline links are
 * SemiBold so they are not told apart from body text by color alone (WCAG 1.4.1). */
.hq-link {
  color: var(--hq-accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
}
.hq-link:hover { color: var(--hq-accent-hover); }
.hq-link:active { color: var(--hq-accent-active); }
.hq-link:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: 2px; }
.hq-link--standalone { display: inline-flex; align-items: center; gap: var(--hq-space-1); }

/* ==========================================================================
 * Text field, text area, select (proposal)
 * ========================================================================== */
.hq-field { display: flex; flex-direction: column; gap: var(--hq-space-1); font-family: var(--hq-font-fa); }
.hq-field__label { font-size: var(--hq-type-body-compact-font-size); font-weight: 600; line-height: 1.5; color: var(--hq-ink); }
.hq-field__optional { font-weight: 400; color: var(--hq-text-secondary); }
.hq-field__helper { margin: 0; font-size: var(--hq-type-body-compact-font-size); line-height: 1.6; color: var(--hq-text-secondary); }
.hq-field__error { margin: 0; display: flex; align-items: flex-start; gap: var(--hq-space-1); font-size: var(--hq-type-body-compact-font-size); line-height: 1.6; color: var(--hq-negative); }
.hq-field__error .hq-icon { inline-size: 16px; block-size: 16px; margin-block-start: 0.2em; }

.hq-input {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--hq-size-control-lg);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--hq-space-2);
  background: var(--hq-field);
  color: var(--hq-text);
  border: 1px solid var(--hq-border-control);
  border-radius: var(--hq-radius-sm);
  font-family: inherit;
  font-size: var(--hq-type-body-font-size);
  line-height: 1.5;
  letter-spacing: 0;
}
.hq-input--md { min-block-size: var(--hq-size-control-md); }
textarea.hq-input { min-block-size: calc(var(--hq-size-control-lg) * 3); padding-block: var(--hq-space-1); line-height: var(--hq-type-body-line-height); resize: vertical; }
.hq-input::placeholder { color: var(--hq-text-muted); opacity: 1; }
.hq-input:hover { border-color: var(--hq-text-secondary); }
.hq-input:focus-visible, .hq-input:focus { outline: 2px solid var(--hq-focus); outline-offset: 0; border-color: var(--hq-focus); }
.hq-input[aria-invalid="true"] { border-color: var(--hq-negative); box-shadow: inset 0 0 0 1px var(--hq-negative); }
.hq-input:disabled { background: var(--hq-disabled); color: var(--hq-on-disabled); border-color: transparent; cursor: not-allowed; }
.hq-input:read-only:not(select) { background: transparent; border-style: dashed; }

.hq-select { position: relative; }
.hq-select > .hq-input { appearance: none; padding-inline-end: calc(var(--hq-space-2) * 2 + 20px); cursor: pointer; }
.hq-select__chevron { position: absolute; inset-block-start: 50%; inset-inline-end: var(--hq-space-2); translate: 0 -50%; pointer-events: none; color: var(--hq-text-secondary); }

/* ==========================================================================
 * Checkbox and radio (proposal). Native inputs, restyled.
 * ========================================================================== */
.hq-choice-group { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--hq-space-2); font-family: var(--hq-font-fa); }
.hq-choice-group > legend { padding: 0; margin-block-end: var(--hq-space-1); }
.hq-choice-group--inline { flex-direction: row; flex-wrap: wrap; column-gap: var(--hq-space-3); }
.hq-choice-group--inline > legend { inline-size: 100%; }

.hq-choice { display: inline-flex; align-items: flex-start; gap: var(--hq-space-1); font-family: var(--hq-font-fa); font-size: var(--hq-type-body-font-size); line-height: 1.6; color: var(--hq-text); cursor: pointer; }
.hq-choice > input {
  appearance: none;
  flex: none;
  box-sizing: border-box;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  margin-block-start: calc((1.6em - 20px) / 2);
  display: grid;
  place-content: center;
  background: var(--hq-field);
  border: 1px solid var(--hq-border-control);
  cursor: pointer;
}
.hq-choice > input[type="checkbox"] { border-radius: calc(var(--hq-radius-sm) / 2); }
.hq-choice > input[type="radio"] { border-radius: 50%; }
.hq-choice > input::before { content: ""; inline-size: 12px; block-size: 12px; scale: 0; }
.hq-choice > input[type="checkbox"]::before { background: var(--hq-on-accent); clip-path: polygon(14% 44%, 0 59%, 39% 96%, 100% 22%, 86% 8%, 38% 66%); }
.hq-choice > input[type="checkbox"]:indeterminate::before { clip-path: inset(40% 0); }
.hq-choice > input[type="radio"]::before { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--hq-accent); }
.hq-choice > input:hover { border-color: var(--hq-text-secondary); }
.hq-choice > input[type="checkbox"]:is(:checked, :indeterminate) { background: var(--hq-accent); border-color: var(--hq-accent); }
.hq-choice > input[type="radio"]:checked { border-color: var(--hq-accent); }
.hq-choice > input:is(:checked, :indeterminate)::before { scale: 1; }
.hq-choice > input:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: 2px; }
.hq-choice > input[aria-invalid="true"] { border-color: var(--hq-negative); }
.hq-choice:has(> input:disabled) { color: var(--hq-on-disabled); cursor: not-allowed; }
.hq-choice > input:disabled { background: var(--hq-disabled); border-color: var(--hq-disabled); cursor: not-allowed; }
.hq-choice > input[type="checkbox"]:disabled::before { background: var(--hq-on-disabled); }
.hq-choice > input[type="radio"]:disabled::before { background: var(--hq-on-disabled); }

/* ==========================================================================
 * Tag: interactive and dismissible pills (proposal; builds on .hq-pill)
 * ========================================================================== */
button.hq-pill { border: 1px solid transparent; font-family: var(--hq-font-fa); cursor: pointer; }
button.hq-pill:focus-visible, .hq-pill__dismiss:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: 2px; }
button.hq-pill:hover { border-color: currentColor; }
button.hq-pill[aria-pressed="true"] { background: var(--hq-accent); color: var(--hq-on-accent); }
.hq-pill--dismissible { gap: 4px; padding-inline-end: 4px; }
.hq-pill__dismiss {
  appearance: none;
  display: inline-grid;
  place-items: center;
  inline-size: 16px;
  block-size: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.hq-pill__dismiss:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.hq-pill__dismiss .hq-icon { inline-size: 12px; block-size: 12px; }

/* ==========================================================================
 * Notification (proposal): system messages, not content emphasis (see Callout).
 * ========================================================================== */
.hq-notification {
  --_hq-n-accent: var(--hq-info);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--hq-space-2);
  padding-block: var(--hq-space-2);
  padding-inline: var(--hq-space-3) var(--hq-space-2);
  background: var(--hq-info-subtle);
  border-inline-start: 4px solid var(--_hq-n-accent);
  border-radius: var(--hq-radius-sm);
  font-family: var(--hq-font-fa);
  font-size: var(--hq-type-body-compact-font-size);
  line-height: 1.7;
  color: var(--hq-ink);
}
.hq-notification--positive { --_hq-n-accent: var(--hq-positive); background: var(--hq-positive-subtle); }
.hq-notification--warning { --_hq-n-accent: var(--hq-warning); background: var(--hq-warning-subtle); }
.hq-notification--negative { --_hq-n-accent: var(--hq-negative); background: var(--hq-negative-subtle); }
.hq-notification__icon { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 0.2em; fill: var(--_hq-n-accent); }
/* Carbon draws the "!" as a separate inner path; dark on the yellow triangle, in both themes. */
.hq-notification--warning .hq-notification__icon [data-icon-path="inner-path"] { fill: var(--hq-cyan-100); opacity: 1; }
.hq-notification__content { flex: 1; min-inline-size: 0; }
.hq-notification__title { margin: 0; font-weight: 700; }
.hq-notification__body { margin: 0; }
.hq-notification__close {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--hq-size-control-sm);
  block-size: var(--hq-size-control-sm);
  margin-block: calc(var(--hq-space-1) * -0.5);
  padding: 0;
  border: 0;
  border-radius: var(--hq-radius-sm);
  background: transparent;
  color: var(--hq-ink);
  cursor: pointer;
}
.hq-notification__close:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.hq-notification__close:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: 0; }

/* ==========================================================================
 * Wave 2 (proposal). Values come only from tokens. Table follows the brand
 * book's table rules; tabs, navigation, menu, modal, breadcrumb and
 * pagination have no brand-book rules yet and stay draft.
 * ========================================================================== */

/* Table: header SemiBold text-secondary with a 2px rule, hairline rows, no vertical
 * rules, no zebra, tabular figures, total row Bold with an ink rule above. */
.hq-table-wrap { inline-size: 100%; overflow-x: auto; }
.hq-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--hq-font-fa);
  font-size: var(--hq-type-body-compact-font-size);
  line-height: 1.6;
  color: var(--hq-text);
  text-align: start;
  font-variant-numeric: tabular-nums;
}
.hq-table > caption { caption-side: top; padding-block-end: var(--hq-space-1); text-align: start; font-weight: 600; color: var(--hq-ink); }
.hq-table :is(th, td) { padding-block: var(--hq-space-1); padding-inline: var(--hq-space-2); text-align: start; vertical-align: top; border-block-end: 1px solid var(--hq-border); }
.hq-table > thead > tr > th { font-weight: 600; color: var(--hq-text-secondary); vertical-align: bottom; border-block-end: 2px solid var(--hq-border-strong); }
.hq-table > tbody > tr > th { font-weight: 400; color: var(--hq-text); }
.hq-table .hq-table__num { text-align: end; }
.hq-table .hq-table__highlight { background: var(--hq-accent-subtle); }
.hq-table :is(tfoot, .hq-table__total) > :is(th, td), tr.hq-table__total > :is(th, td) { font-weight: 700; color: var(--hq-ink); border-block-start: 2px solid var(--hq-ink); border-block-end: 0; }
.hq-table__sort {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--hq-space-1);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.hq-table__sort:hover, th[aria-sort="ascending"] .hq-table__sort, th[aria-sort="descending"] .hq-table__sort { color: var(--hq-ink); }
.hq-table__sort:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: 2px; }
.hq-table__sort .hq-icon { inline-size: 16px; block-size: 16px; }

/* Harvey ball: qualitative score in ink, never red/yellow/green. */
.hq-harvey {
  --_hq-fill: 0;
  box-sizing: border-box;
  display: inline-block;
  inline-size: 20px;
  block-size: 20px;
  vertical-align: middle;
  border: 1.5px solid var(--hq-ink);
  border-radius: 50%;
  background: conic-gradient(var(--hq-ink) calc(var(--_hq-fill) * 1%), transparent 0);
}
.hq-harvey--1 { --_hq-fill: 25; }
.hq-harvey--2 { --_hq-fill: 50; }
.hq-harvey--3 { --_hq-fill: 75; }
.hq-harvey--4 { --_hq-fill: 100; }
.hq-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Tabs. Behaviour (arrow keys, hidden panels) is in components.js. */
.hq-tabs { font-family: var(--hq-font-fa); }
.hq-tablist { display: flex; gap: var(--hq-space-3); overflow-x: auto; border-block-end: 1px solid var(--hq-border); }
.hq-tab {
  appearance: none;
  flex: none;
  min-block-size: var(--hq-size-control-lg);
  margin: 0;
  margin-block-end: -1px;
  padding: 0;
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--hq-text-secondary);
  font: inherit;
  font-size: var(--hq-type-body-font-size);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.hq-tab:hover { color: var(--hq-ink); }
.hq-tab[aria-selected="true"] { color: var(--hq-ink); border-block-end-color: var(--hq-accent); }
.hq-tab:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: -2px; }
.hq-tab:disabled { color: var(--hq-on-disabled); cursor: not-allowed; }
.hq-tabpanel { padding-block-start: var(--hq-space-3); font-size: var(--hq-type-body-font-size); line-height: var(--hq-type-body-line-height); color: var(--hq-text); }
.hq-tabpanel:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: 2px; }

/* Navigation: a list of links, horizontal or vertical; the current page carries aria-current. */
.hq-nav { font-family: var(--hq-font-fa); }
.hq-nav__list { display: flex; gap: var(--hq-space-3); margin: 0; padding: 0; list-style: none; }
.hq-nav--vertical .hq-nav__list { flex-direction: column; gap: 0; }
.hq-nav__link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--hq-space-1);
  min-block-size: var(--hq-size-control-lg);
  border-block-end: 2px solid transparent;
  color: var(--hq-text-secondary);
  font-size: var(--hq-type-body-font-size);
  font-weight: 600;
  text-decoration: none;
}
.hq-nav--vertical .hq-nav__link { padding-inline: var(--hq-space-2); border-block-end: 0; border-inline-start: 2px solid transparent; }
.hq-nav__link:hover { color: var(--hq-ink); }
.hq-nav--vertical .hq-nav__link:hover { background: var(--hq-surface-alt); }
.hq-nav__link[aria-current="page"] { color: var(--hq-ink); border-color: var(--hq-accent); }
.hq-nav__link:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: -2px; }

/* Menu: a button that discloses a list of actions or links (not an ARIA menu bar). */
.hq-menu { position: relative; display: inline-block; font-family: var(--hq-font-fa); }
.hq-menu__list {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 1;
  box-sizing: border-box;
  min-inline-size: calc(var(--hq-size-control-lg) * 4);
  margin: 0;
  margin-block-start: calc(var(--hq-space-1) / 2);
  padding-block: calc(var(--hq-space-1) / 2);
  padding-inline: 0;
  list-style: none;
  background: var(--hq-surface-raised);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-radius-sm);
}
.hq-menu__list[hidden] { display: none; }
.hq-menu__item {
  appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--hq-space-1);
  inline-size: 100%;
  min-block-size: var(--hq-size-control-md);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--hq-space-2);
  border: 0;
  background: transparent;
  color: var(--hq-text);
  font: inherit;
  font-size: var(--hq-type-body-compact-font-size);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.hq-menu__item:hover { background: var(--hq-accent-subtle); color: var(--hq-ink); }
.hq-menu__item:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: -2px; }
.hq-menu__item[aria-current="true"] { font-weight: 600; color: var(--hq-ink); }
.hq-menu__item--danger { color: var(--hq-negative); }
.hq-menu__item[disabled], .hq-menu__item[aria-disabled="true"] { color: var(--hq-on-disabled); background: transparent; cursor: not-allowed; }
.hq-menu__separator { margin-block: calc(var(--hq-space-1) / 2); border-block-start: 1px solid var(--hq-border); }

/* Breadcrumb: current page last, not a link. In RTL the trail runs right to left. */
.hq-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hq-space-1); margin: 0; padding: 0; list-style: none; font-family: var(--hq-font-fa); font-size: var(--hq-type-body-compact-font-size); line-height: 1.6; }
.hq-breadcrumb > li { display: inline-flex; align-items: center; gap: var(--hq-space-1); }
.hq-breadcrumb__sep { display: inline-flex; color: var(--hq-text-secondary); }
.hq-breadcrumb__sep .hq-icon { inline-size: 16px; block-size: 16px; }
.hq-breadcrumb [aria-current="page"] { color: var(--hq-ink); }

/* Pagination */
.hq-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--hq-space-1) / 2); margin: 0; padding: 0; list-style: none; font-family: var(--hq-font-fa); }
.hq-pagination__item {
  appearance: none;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--hq-size-control-md);
  min-block-size: var(--hq-size-control-md);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--hq-space-1);
  border: 1px solid transparent;
  border-radius: var(--hq-radius-sm);
  background: transparent;
  color: var(--hq-text);
  font: inherit;
  font-size: var(--hq-type-body-compact-font-size);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
}
.hq-pagination__item:hover { background: var(--hq-accent-subtle); color: var(--hq-ink); }
.hq-pagination__item:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: 2px; }
.hq-pagination__item[aria-current="page"] { background: var(--hq-accent); color: var(--hq-on-accent); font-weight: 600; }
.hq-pagination__item:is(:disabled, [aria-disabled="true"]) { background: transparent; color: var(--hq-on-disabled); cursor: not-allowed; }
.hq-pagination__gap { display: inline-grid; place-items: center; min-inline-size: var(--hq-size-control-md); color: var(--hq-text-secondary); }

/* Modal: a native <dialog> opened with showModal(); focus is trapped by the browser. */
.hq-modal {
  box-sizing: border-box;
  margin: auto; /* resets such as `* { margin: 0 }` would otherwise pin the dialog to a corner */
  inline-size: min(calc(100vw - var(--hq-space-4)), var(--hq-grid-web-md-breakpoint));
  max-block-size: calc(100dvh - var(--hq-space-4));
  padding: 0;
  overflow: auto;
  background: var(--hq-surface-raised);
  color: var(--hq-text);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-radius-md);
  font-family: var(--hq-font-fa);
}
.hq-modal::backdrop { background: color-mix(in srgb, var(--hq-brand-deep) 75%, transparent); }
.hq-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hq-space-2); padding: var(--hq-space-3) var(--hq-space-4) 0; }
.hq-modal__title { margin: 0; font-size: var(--hq-type-h3-font-size); font-weight: 700; line-height: 1.4; color: var(--hq-ink); }
.hq-modal__body { padding: var(--hq-space-2) var(--hq-space-4); font-size: var(--hq-type-body-font-size); line-height: var(--hq-type-body-line-height); }
.hq-modal__body > :first-child { margin-block-start: 0; }
.hq-modal__body > :last-child { margin-block-end: 0; }
.hq-modal__footer { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--hq-space-2); padding: var(--hq-space-2) var(--hq-space-4) var(--hq-space-3); }

/* ───── Document (A4) — draft ─────
   doc-* type tokens are written in px but paired with Latin pt in the brand book
   and used as points in A4 files; 1pt = 4/3px, hence the * 4 / 3. */
.hq-doc {
  --hq-doc-pt: calc(4 / 3);
  box-sizing: border-box;
  inline-size: var(--hq-grid-doc-page-width, 210mm);
  min-block-size: var(--hq-grid-doc-page-height, 297mm);
  padding-block: var(--hq-grid-doc-margin-block, 20mm);
  padding-inline: var(--hq-grid-doc-margin-inline, 25mm);
  display: flex;
  flex-direction: column;
  background: var(--hq-surface);
  color: var(--hq-text);
  font-family: var(--hq-font-fa);
  font-size: calc(var(--hq-type-doc-body-font-size) * var(--hq-doc-pt));
  font-weight: var(--hq-type-doc-body-font-weight);
  line-height: var(--hq-type-doc-body-line-height);
  counter-reset: hq-doc-h;
}
.hq-doc__letterhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--hq-space-4);
  padding-block-end: var(--hq-space-2);
  border-block-end: 2px solid var(--hq-ink);
  font-size: calc(var(--hq-type-doc-header-font-size) * var(--hq-doc-pt));
  line-height: var(--hq-type-doc-header-line-height);
  color: var(--hq-text-secondary);
}
.hq-doc__logo { block-size: calc(var(--hq-space-4) * 1.5); inline-size: auto; display: block; }
.hq-doc__org { text-align: start; }
.hq-doc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--hq-space-4);
  margin-block: var(--hq-space-4) var(--hq-space-3);
}
.hq-doc__title {
  margin: 0;
  color: var(--hq-ink);
  font-size: calc(var(--hq-type-doc-title-font-size) * var(--hq-doc-pt));
  font-weight: var(--hq-type-doc-title-font-weight);
  line-height: var(--hq-type-doc-title-line-height);
}
.hq-doc__meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 var(--hq-space-2);
  margin: 0;
  font-size: calc(var(--hq-type-doc-compact-font-size) * var(--hq-doc-pt));
  line-height: var(--hq-type-doc-compact-line-height);
  color: var(--hq-text-secondary);
}
.hq-doc__meta dt { font-weight: 600; }
.hq-doc__meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.hq-doc__body { flex: 1; }
.hq-doc__body > * { margin-block: 0 var(--hq-space-1); }
.hq-doc h2 {
  counter-increment: hq-doc-h;
  counter-reset: hq-doc-h2;
  margin-block: var(--hq-space-3) var(--hq-space-1);
  color: var(--hq-ink);
  font-size: calc(var(--hq-type-doc-h1-font-size) * var(--hq-doc-pt));
  font-weight: var(--hq-type-doc-h1-font-weight);
  line-height: var(--hq-type-doc-h1-line-height);
  break-after: avoid;
}
.hq-doc h2::before { content: counter(hq-doc-h, persian) "٫ "; color: var(--hq-accent); }
.hq-doc h3 {
  counter-increment: hq-doc-h2;
  margin-block: var(--hq-space-2) 0;
  color: var(--hq-ink);
  font-size: calc(var(--hq-type-doc-h2-font-size) * var(--hq-doc-pt));
  font-weight: var(--hq-type-doc-h2-font-weight);
  line-height: var(--hq-type-doc-h2-line-height);
  break-after: avoid;
}
.hq-doc h3::before { content: counter(hq-doc-h, persian) "٫" counter(hq-doc-h2, persian) " "; color: var(--hq-text-secondary); }
.hq-doc__list { list-style: none; padding: 0; }
.hq-doc__list li { position: relative; padding-inline-start: var(--hq-space-2); }
.hq-doc__list li::before { content: "–"; position: absolute; inset-inline-start: 0; color: var(--hq-text-secondary); }
.hq-doc__footnote {
  font-size: calc(var(--hq-type-doc-footnote-font-size) * var(--hq-doc-pt));
  line-height: var(--hq-type-doc-footnote-line-height);
  color: var(--hq-text-secondary);
}
.hq-doc__signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hq-space-6);
  margin-block-start: var(--hq-space-6);
  break-inside: avoid;
}
.hq-doc__signature { padding-block-start: var(--hq-space-2); border-block-start: 1px solid var(--hq-border-strong); }
.hq-doc__signature strong { display: block; color: var(--hq-ink); }
.hq-doc__footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-block-start: var(--hq-space-4);
  padding-block-start: var(--hq-space-1);
  border-block-start: 1px solid var(--hq-border);
  font-size: calc(var(--hq-type-doc-header-font-size) * var(--hq-doc-pt));
  line-height: var(--hq-type-doc-header-line-height);
  color: var(--hq-text-secondary);
}
.hq-doc__footer > :first-child { justify-self: start; }
.hq-doc__footer > :last-child { justify-self: end; }
@media print {
  @page { size: A4; margin: 0; }
  .hq-doc { box-shadow: none; }
}

/* ───── List ─────
   Bullet, dash, ordered, steps, icon, check, description and inline lists.
   Markers sit at the inline start (the right in RTL); numbers use Persian digits. */
.hq-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--hq-space-1); color: var(--hq-text); line-height: var(--hq-type-body-line-height); }
.hq-list > li { position: relative; padding-inline-start: var(--hq-space-3); }
.hq-list > li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--hq-type-body-line-height) * 0.5em - var(--hq-space-1) / 2); inline-size: var(--hq-space-1); block-size: var(--hq-space-1); border-radius: var(--hq-radius-pill); background: var(--hq-accent); }
.hq-list .hq-list { margin-block-start: var(--hq-space-1); }
.hq-list .hq-list > li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--hq-accent); }
.hq-list--compact { gap: 0; font-size: var(--hq-type-body-compact-font-size); }
/* dash: documents and dense text */
.hq-list--dash > li::before { content: "–"; inline-size: auto; block-size: auto; inset-block-start: 0; border-radius: 0; background: none; color: var(--hq-text-secondary); }
/* ordered: Persian numerals with a separator «٫» like document headings */
.hq-list--ordered { counter-reset: hq-list; }
.hq-list--ordered > li { counter-increment: hq-list; padding-inline-start: var(--hq-space-4); }
.hq-list--ordered > li::before { content: counter(hq-list, persian) "٫"; inline-size: auto; block-size: auto; inset-block-start: 0; border-radius: 0; background: none; color: var(--hq-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
/* steps: number badge in ink (brand book L10) */
.hq-list--steps { counter-reset: hq-list; gap: var(--hq-space-2); }
.hq-list--steps > li { counter-increment: hq-list; padding-inline-start: var(--hq-space-6); min-block-size: var(--hq-space-4); }
.hq-list--steps > li::before { content: counter(hq-list, persian); inset-block-start: 0; display: grid; place-items: center; inline-size: var(--hq-space-4); block-size: var(--hq-space-4); background: var(--hq-ink); color: var(--hq-text-on-inverse); font-size: var(--hq-type-body-compact-font-size); font-weight: 700; line-height: 1; }
.hq-list__title { display: block; color: var(--hq-ink); font-weight: 700; }
.hq-list__text { display: block; color: var(--hq-text-secondary); }
/* icon: a Carbon icon per item, accent on light grounds (brand book C05) */
.hq-list--icon { gap: var(--hq-space-2); }
.hq-list--icon > li { padding-inline-start: var(--hq-space-6); min-block-size: var(--hq-space-4); }
.hq-list--icon > li::before { content: none; }
.hq-list--icon .hq-list__icon { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: var(--hq-space-4); block-size: var(--hq-space-4); fill: var(--hq-accent); color: var(--hq-accent); }
/* check: what is included; the mark is a word for screen readers via the icon's title */
.hq-list--check > li::before { content: none; }
.hq-list--check > li { padding-inline-start: var(--hq-space-4); }
.hq-list--check .hq-list__icon { position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--hq-type-body-line-height) * 0.5em - var(--hq-space-3) / 2); inline-size: var(--hq-space-3); block-size: var(--hq-space-3); fill: var(--hq-positive); }
.hq-list--check .hq-list__item--out { color: var(--hq-text-secondary); }
.hq-list--check .hq-list__item--out .hq-list__icon { fill: var(--hq-text-muted); }
/* description: term and explanation */
.hq-list--description { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--hq-space-1) var(--hq-space-3); margin: 0; }
.hq-list--description dt { color: var(--hq-ink); font-weight: 700; }
.hq-list--description dd { margin: 0; color: var(--hq-text-secondary); }
/* inline: short items on one line, separated by « · » (slide subtitles, metadata) */
.hq-list--inline { display: flex; flex-wrap: wrap; gap: 0; }
.hq-list--inline > li { padding-inline-start: 0; }
.hq-list--inline > li::before { content: none; }
.hq-list--inline > li + li::before { content: "·"; position: static; display: inline-block; inline-size: auto; block-size: auto; margin-inline: var(--hq-space-1); background: none; color: var(--hq-text-secondary); }
@media (max-width: 40rem) { .hq-list--description { grid-template-columns: 1fr; } .hq-list--description dd { margin-block-end: var(--hq-space-1); } }

/* ==========================================================================
 * Toggle (switch). A native checkbox with role="switch"; thumb sits at the start (right in RTL) when off.
 * ========================================================================== */
.hq-toggle { display: inline-flex; align-items: center; gap: var(--hq-space-1); font-family: var(--hq-font-fa); font-size: var(--hq-type-body-font-size); line-height: 1.6; color: var(--hq-text); cursor: pointer; }
.hq-toggle__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; }
.hq-toggle__track { position: relative; flex: none; inline-size: var(--hq-size-control-lg); block-size: var(--hq-space-3); border-radius: var(--hq-radius-pill); background: var(--hq-border-control); transition: background-color var(--hq-motion-duration-fast-02) var(--hq-motion-easing-standard); }
.hq-toggle__track::after { content: ""; position: absolute; inset-block-start: calc(var(--hq-space-1) / 2); inset-inline-start: calc(var(--hq-space-1) / 2); inline-size: calc(var(--hq-space-3) - var(--hq-space-1)); block-size: calc(var(--hq-space-3) - var(--hq-space-1)); border-radius: 50%; background: var(--hq-white); transition: inset-inline-start var(--hq-motion-duration-fast-02) var(--hq-motion-easing-standard); }
.hq-toggle__input:checked + .hq-toggle__track { background: var(--hq-accent); }
.hq-toggle__input:checked + .hq-toggle__track::after { inset-inline-start: calc(100% - var(--hq-space-3) + var(--hq-space-1) / 2); }
.hq-toggle__input:focus-visible + .hq-toggle__track { outline: 2px solid var(--hq-focus); outline-offset: 2px; }
.hq-toggle__input:disabled + .hq-toggle__track { background: var(--hq-disabled); }
.hq-toggle:has(.hq-toggle__input:disabled) { color: var(--hq-text-muted); cursor: not-allowed; }
.hq-toggle__state { color: var(--hq-text-secondary); font-size: var(--hq-type-body-compact-font-size); }

/* ==========================================================================
 * Search. A text field with a search icon at the start and a clear button at the end.
 * ========================================================================== */
.hq-search { position: relative; display: flex; align-items: center; inline-size: 100%; }
.hq-search__input { padding-inline-start: calc(var(--hq-space-2) + var(--hq-space-3)); padding-inline-end: calc(var(--hq-space-2) + var(--hq-space-3)); }
.hq-search__input::-webkit-search-cancel-button { display: none; }
.hq-search__icon { position: absolute; inset-inline-start: var(--hq-space-2); inline-size: var(--hq-space-3); block-size: var(--hq-space-3); color: var(--hq-text-secondary); pointer-events: none; fill: currentColor; }
.hq-search__clear { position: absolute; inset-inline-end: var(--hq-space-1); display: inline-grid; place-items: center; inline-size: var(--hq-size-control-sm); block-size: var(--hq-size-control-sm); padding: 0; border: 0; border-radius: var(--hq-radius-sm); background: transparent; color: var(--hq-text-secondary); cursor: pointer; }
.hq-search__clear:hover { background: var(--hq-surface-alt); color: var(--hq-ink); }
.hq-search__clear:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: 0; }
.hq-search__clear svg { inline-size: var(--hq-space-2); block-size: var(--hq-space-2); fill: currentColor; }

/* ==========================================================================
 * Date picker (Jalali). Text field + calendar button; the panel is built by components.js.
 * ========================================================================== */
.hq-datepicker { position: relative; display: flex; align-items: center; inline-size: 100%; max-inline-size: calc(var(--hq-space-12) * 3); }
.hq-datepicker > .hq-input { padding-inline-end: calc(var(--hq-space-2) + var(--hq-size-control-sm)); font-variant-numeric: tabular-nums; }
.hq-datepicker__button { position: absolute; inset-inline-end: var(--hq-space-1); display: inline-grid; place-items: center; inline-size: var(--hq-size-control-sm); block-size: var(--hq-size-control-sm); padding: 0; border: 0; border-radius: var(--hq-radius-sm); background: transparent; color: var(--hq-text-secondary); cursor: pointer; }
.hq-datepicker__button:hover { background: var(--hq-surface-alt); color: var(--hq-ink); }
.hq-datepicker__button:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: 0; }
.hq-datepicker__button svg { inline-size: var(--hq-space-3); block-size: var(--hq-space-3); fill: currentColor; }
.hq-datepicker__panel { position: absolute; z-index: 10; inset-block-start: calc(100% + var(--hq-space-1)); inset-inline-start: 0; inline-size: calc(var(--hq-size-control-md) * 7 + var(--hq-space-2) * 2); padding: var(--hq-space-2); background: var(--hq-surface-raised); border: 1px solid var(--hq-border); border-radius: var(--hq-radius-md); font-family: var(--hq-font-fa); }
.hq-datepicker__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--hq-space-1); }
.hq-datepicker__title { font-weight: 700; color: var(--hq-ink); font-size: var(--hq-type-body-font-size); }
.hq-datepicker__nav { display: inline-grid; place-items: center; inline-size: var(--hq-size-control-sm); block-size: var(--hq-size-control-sm); padding: 0; border: 0; border-radius: var(--hq-radius-sm); background: transparent; color: var(--hq-text); cursor: pointer; }
.hq-datepicker__nav:hover { background: var(--hq-surface-alt); }
.hq-datepicker__nav svg { inline-size: var(--hq-space-2); block-size: var(--hq-space-2); fill: currentColor; }
.hq-datepicker__grid { inline-size: 100%; border-collapse: collapse; table-layout: fixed; }
.hq-datepicker__grid th { padding-block: var(--hq-space-1); font-size: var(--hq-type-caption-font-size); font-weight: 600; color: var(--hq-text-secondary); text-align: center; }
.hq-datepicker__grid td { padding: 0; text-align: center; }
.hq-datepicker__day { inline-size: var(--hq-size-control-md); block-size: var(--hq-size-control-md); padding: 0; border: 0; border-radius: var(--hq-radius-pill); background: transparent; color: var(--hq-text); font: inherit; font-size: var(--hq-type-body-compact-font-size); font-variant-numeric: tabular-nums; cursor: pointer; }
.hq-datepicker__day:hover { background: var(--hq-surface-alt); }
.hq-datepicker__day:focus-visible { outline: 2px solid var(--hq-focus); outline-offset: -2px; }
.hq-datepicker__day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--hq-accent); color: var(--hq-accent); font-weight: 700; }
.hq-datepicker__day[aria-selected="true"] { background: var(--hq-accent); color: var(--hq-on-accent); font-weight: 700; }
.hq-datepicker__day--friday { color: var(--hq-negative); }
.hq-datepicker__foot { display: flex; justify-content: space-between; margin-block-start: var(--hq-space-1); padding-block-start: var(--hq-space-1); border-block-start: 1px solid var(--hq-border); }

/* ==========================================================================
 * File upload. A drop zone (label around a native file input) and a list of chosen files.
 * ========================================================================== */
.hq-upload { display: grid; gap: var(--hq-space-2); font-family: var(--hq-font-fa); }
.hq-upload__zone { display: grid; justify-items: center; gap: var(--hq-space-1); padding: var(--hq-space-4) var(--hq-space-3); border: 1px dashed var(--hq-border-control); border-radius: var(--hq-radius-md); background: var(--hq-surface); color: var(--hq-text); text-align: center; cursor: pointer; transition: background-color var(--hq-motion-duration-fast-02) var(--hq-motion-easing-standard), border-color var(--hq-motion-duration-fast-02) var(--hq-motion-easing-standard); }
.hq-upload__zone:hover, .hq-upload--over .hq-upload__zone { border-color: var(--hq-accent); background: var(--hq-accent-subtle); }
.hq-upload__zone:has(input:focus-visible) { outline: 2px solid var(--hq-focus); outline-offset: 2px; }
.hq-upload__zone > svg { inline-size: var(--hq-space-6); block-size: var(--hq-space-6); fill: var(--hq-accent); }
.hq-upload__action { color: var(--hq-accent); font-weight: 600; }
.hq-upload__hint { color: var(--hq-text-secondary); font-size: var(--hq-type-body-compact-font-size); }
.hq-upload__list { display: grid; gap: var(--hq-space-1); margin: 0; padding: 0; list-style: none; }
.hq-upload__file { display: flex; align-items: center; gap: var(--hq-space-2); padding: var(--hq-space-1) var(--hq-space-2); border: 1px solid var(--hq-border); border-radius: var(--hq-radius-sm); background: var(--hq-surface-raised); font-size: var(--hq-type-body-compact-font-size); }
.hq-upload__file > svg { flex: none; inline-size: var(--hq-space-3); block-size: var(--hq-space-3); fill: var(--hq-text-secondary); }
.hq-upload__name { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hq-ink); direction: ltr; text-align: end; unicode-bidi: plaintext; }
.hq-upload__size { color: var(--hq-text-secondary); font-variant-numeric: tabular-nums; }
.hq-upload__file--error { border-color: var(--hq-negative); }
.hq-upload__file--error .hq-upload__size { color: var(--hq-negative); }
.hq-upload__remove { display: inline-grid; place-items: center; inline-size: var(--hq-size-control-sm); block-size: var(--hq-size-control-sm); padding: 0; border: 0; border-radius: var(--hq-radius-sm); background: transparent; color: var(--hq-text-secondary); cursor: pointer; }
.hq-upload__remove:hover { background: var(--hq-surface-alt); color: var(--hq-negative); }
.hq-upload__remove svg { inline-size: var(--hq-space-2); block-size: var(--hq-space-2); fill: currentColor; }

/* ==========================================================================
 * Form layout (pattern). Stacked fields, a fieldset per group, actions at the end.
 * ========================================================================== */
.hq-form { display: grid; gap: var(--hq-space-3); max-inline-size: calc(var(--hq-space-12) * 6); font-family: var(--hq-font-fa); }
.hq-form__group { display: grid; gap: var(--hq-space-3); margin: 0; padding: 0; border: 0; }
.hq-form__legend { padding: 0; margin-block-end: var(--hq-space-1); font-size: var(--hq-type-h3-font-size); font-weight: 700; color: var(--hq-ink); }
.hq-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--hq-space-12) * 2)), 1fr)); gap: var(--hq-space-3); }
.hq-form__actions { display: flex; flex-wrap: wrap; gap: var(--hq-space-2); padding-block-start: var(--hq-space-2); }
.hq-form__summary { padding: var(--hq-space-2) var(--hq-space-3); border-inline-start: 4px solid var(--hq-negative); background: var(--hq-surface-alt); }
.hq-form__summary h2 { margin: 0 0 var(--hq-space-1); font-size: var(--hq-type-body-font-size); color: var(--hq-ink); }
.hq-form__summary ul { margin: 0; padding-inline-start: var(--hq-space-3); }
.hq-form__note { margin: 0; font-size: var(--hq-type-body-compact-font-size); color: var(--hq-text-secondary); }

/* ==========================================================================
 * Page patterns: hero, section, empty state, skeleton, article.
 * ========================================================================== */
.hq-hero { position: relative; display: grid; gap: var(--hq-space-3); padding-block: var(--hq-space-12); padding-inline: var(--hq-space-6); overflow: hidden; border-radius: var(--hq-radius-md); background: var(--hq-surface-alt); font-family: var(--hq-font-fa); }
.hq-hero--dark { background: var(--hq-brand-deep); color: var(--hq-gray-20); }
.hq-hero__media { position: absolute; inset: auto 0 0 0; inline-size: 100%; block-size: auto; pointer-events: none; }
.hq-hero__body { position: relative; display: grid; gap: var(--hq-space-2); max-inline-size: 40rem; }
.hq-hero__eyebrow { margin: 0; color: var(--hq-accent); font-weight: 700; font-size: var(--hq-type-body-compact-font-size); }
.hq-hero--dark .hq-hero__eyebrow { color: var(--hq-brand); }
.hq-hero__title { margin: 0; color: var(--hq-ink); font-size: var(--hq-type-display-font-size); line-height: 1.2; font-weight: 700; text-wrap: balance; }
.hq-hero--dark .hq-hero__title { color: var(--hq-white); }
.hq-hero__lead { margin: 0; font-size: var(--hq-type-lead-font-size); line-height: 1.7; color: var(--hq-text-secondary); }
.hq-hero--dark .hq-hero__lead { color: var(--hq-gray-30); }
.hq-hero__actions { display: flex; flex-wrap: wrap; gap: var(--hq-space-2); padding-block-start: var(--hq-space-1); }
.hq-hero--dark .hq-button--ghost { color: var(--hq-brand); }
.hq-hero--dark .hq-button--ghost:hover { background: var(--hq-cyan-90); color: var(--hq-white); }
.hq-hero--center { justify-items: center; text-align: center; }
.hq-hero--center .hq-hero__body { justify-items: center; }
.hq-hero--center .hq-hero__actions { justify-content: center; }
.hq-hero__title--sm { font-size: var(--hq-type-h1-font-size); }

.hq-section { display: grid; gap: var(--hq-space-4); padding-block: var(--hq-space-8); font-family: var(--hq-font-fa); }
.hq-section__head { display: grid; gap: var(--hq-space-1); max-inline-size: 44rem; }
.hq-section__title { margin: 0; color: var(--hq-ink); font-size: var(--hq-type-h2-font-size); line-height: 1.3; font-weight: 700; }
.hq-section__lead { margin: 0; color: var(--hq-text-secondary); font-size: var(--hq-type-body-font-size); line-height: 1.8; }
.hq-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--hq-space-3); }

.hq-empty { display: grid; justify-items: center; gap: var(--hq-space-2); padding: var(--hq-space-8) var(--hq-space-3); text-align: center; font-family: var(--hq-font-fa); }
.hq-empty__icon { inline-size: var(--hq-space-8); block-size: var(--hq-space-8); fill: var(--hq-accent); }
.hq-empty__code { margin: 0; font-family: var(--hq-font-serif); font-size: var(--hq-type-display-font-size); font-weight: 700; line-height: 1; color: var(--hq-brand); }
.hq-empty__title { margin: 0; color: var(--hq-ink); font-size: var(--hq-type-h3-font-size); font-weight: 700; }
.hq-empty__text { margin: 0; max-inline-size: 32rem; color: var(--hq-text-secondary); line-height: 1.8; }
.hq-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hq-space-2); padding-block-start: var(--hq-space-1); }

.hq-skeleton { display: block; block-size: var(--hq-space-2); border-radius: var(--hq-radius-sm); background: linear-gradient(90deg, var(--hq-surface-alt) 25%, var(--hq-border) 50%, var(--hq-surface-alt) 75%) 0 0 / 300% 100%; animation: hq-skeleton calc(var(--hq-motion-duration-beat) * 3) var(--hq-motion-easing-standard) infinite; }
.hq-skeleton--title { block-size: var(--hq-space-3); inline-size: 60%; }
.hq-skeleton--text { inline-size: 100%; }
.hq-skeleton--short { inline-size: 40%; }
.hq-skeleton--block { block-size: calc(var(--hq-space-12) * 1.5); border-radius: var(--hq-radius-md); }
@keyframes hq-skeleton { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .hq-skeleton { animation: none; } }

.hq-article { display: grid; gap: var(--hq-space-3); max-inline-size: 42rem; font-family: var(--hq-font-fa); color: var(--hq-text); font-size: var(--hq-type-body-font-size); line-height: 1.9; }
.hq-article > * { margin: 0; }
.hq-article__meta { display: flex; flex-wrap: wrap; gap: var(--hq-space-1) var(--hq-space-2); color: var(--hq-text-secondary); font-size: var(--hq-type-body-compact-font-size); }
.hq-article__title { color: var(--hq-ink); font-size: var(--hq-type-h1-font-size); line-height: 1.3; font-weight: 700; text-wrap: balance; }
.hq-article__lead { font-size: var(--hq-type-lead-font-size); line-height: 1.8; color: var(--hq-text-secondary); }
.hq-article h2 { color: var(--hq-ink); font-size: var(--hq-type-h2-font-size); line-height: 1.35; padding-block-start: var(--hq-space-2); }
.hq-article h3 { color: var(--hq-ink); font-size: var(--hq-type-h3-font-size); line-height: 1.4; }
.hq-article figure { display: grid; gap: var(--hq-space-1); }
.hq-article figure > img, .hq-article__placeholder { inline-size: 100%; aspect-ratio: 16 / 9; border-radius: var(--hq-radius-md); background: var(--hq-surface-alt); object-fit: cover; }
.hq-article figcaption { color: var(--hq-text-secondary); font-size: var(--hq-type-caption-font-size); }

/* ==========================================================================
 * Conceptual diagrams: 2×2 matrix, issue tree, process, timeline, hub.
 * Brand book: matrix «act first» top-right in Blue 10 / Blue 60, importance grows left to right;
 * process right to left, Cyan 20 → 80; hub core in ink, parts white with Cyan 40, links Cyan 20.
 * ========================================================================== */
.hq-matrix { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: var(--hq-space-1); margin: 0; font-family: var(--hq-font-fa); direction: ltr; }
.hq-matrix__y { grid-row: 1; grid-column: 1; align-self: start; direction: rtl; text-align: center; color: var(--hq-text-secondary); font-size: var(--hq-type-body-compact-font-size); font-weight: 600; }
.hq-matrix__x { grid-row: 2; grid-column: 2; text-align: center; color: var(--hq-text-secondary); font-size: var(--hq-type-body-compact-font-size); font-weight: 600; direction: rtl; }
.hq-matrix__grid { grid-row: 1; grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--hq-space-1); }
.hq-matrix__cell { direction: rtl; display: grid; align-content: start; gap: calc(var(--hq-space-1) / 2); min-block-size: calc(var(--hq-space-12) * 1.4); padding: var(--hq-space-3); border-radius: var(--hq-radius-sm); background: var(--hq-surface-alt); }
.hq-matrix__cell strong { color: var(--hq-ink); font-size: var(--hq-type-h3-font-size); }
.hq-matrix__cell span { color: var(--hq-text-secondary); font-size: var(--hq-type-body-compact-font-size); line-height: 1.7; }
.hq-matrix__cell--focus { background: var(--hq-accent-subtle); }
.hq-matrix__cell--focus strong { color: var(--hq-accent); }

.hq-tree { display: flex; align-items: center; gap: var(--hq-space-4); margin: 0; font-family: var(--hq-font-fa); }
.hq-tree ul { position: relative; display: grid; gap: var(--hq-space-2); margin: 0; padding: 0; padding-inline-start: var(--hq-space-4); list-style: none; }
.hq-tree li { position: relative; display: flex; align-items: center; gap: var(--hq-space-4); }
.hq-tree ul > li::before { content: ""; position: absolute; inset-inline-start: calc(var(--hq-space-4) * -1); inset-block-start: 50%; inline-size: var(--hq-space-4); border-block-start: 1px solid var(--hq-cyan-40); }
.hq-tree ul::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: calc(var(--hq-space-3)) calc(var(--hq-space-3)); border-inline-start: 1px solid var(--hq-cyan-40); }
.hq-tree__node { flex: none; inline-size: calc(var(--hq-space-12) * 1.6); padding: var(--hq-space-1) var(--hq-space-2); border: 1px solid var(--hq-cyan-40); border-radius: var(--hq-radius-sm); background: var(--hq-surface-raised); color: var(--hq-text); font-size: var(--hq-type-body-compact-font-size); line-height: 1.6; }
.hq-tree__node--root { background: var(--hq-ink); border-color: var(--hq-ink); color: var(--hq-text-on-inverse); font-weight: 700; }
.hq-tree__node--focus { border-color: var(--hq-accent); box-shadow: inset 0 0 0 1px var(--hq-accent); color: var(--hq-ink); font-weight: 600; }

.hq-process { display: flex; margin: 0; padding: 0; list-style: none; font-family: var(--hq-font-fa); counter-reset: hq-process; }
.hq-process__step { --_bg: var(--hq-cyan-20); --_fg: var(--hq-cyan-100); flex: 1; min-inline-size: 0; display: grid; gap: calc(var(--hq-space-1) / 2); padding: var(--hq-space-3) var(--hq-space-4) var(--hq-space-3) var(--hq-space-6); padding-inline: var(--hq-space-4) var(--hq-space-6); background: var(--_bg); color: var(--_fg); clip-path: polygon(100% 0, var(--hq-space-3) 0, 0 50%, var(--hq-space-3) 100%, 100% 100%, calc(100% - var(--hq-space-3)) 50%); margin-inline-start: calc(var(--hq-space-2) * -1); counter-increment: hq-process; }
.hq-process__step:first-child { margin-inline-start: 0; clip-path: polygon(100% 0, var(--hq-space-3) 0, 0 50%, var(--hq-space-3) 100%, 100% 100%); padding-inline-start: var(--hq-space-4); }
.hq-process__step:nth-child(2) { --_bg: var(--hq-cyan-40); --_fg: var(--hq-cyan-100); }
.hq-process__step:nth-child(3) { --_bg: var(--hq-cyan-60); --_fg: var(--hq-white); }
.hq-process__step:nth-child(n + 4) { --_bg: var(--hq-cyan-80); --_fg: var(--hq-white); }
.hq-process__step::before { content: counter(hq-process, persian) "٫"; font-weight: 700; opacity: 0.75; font-size: var(--hq-type-body-compact-font-size); }
.hq-process__step strong { font-size: var(--hq-type-body-font-size); }
.hq-process__step span { font-size: var(--hq-type-body-compact-font-size); line-height: 1.6; }

.hq-timeline { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; padding: 0; list-style: none; font-family: var(--hq-font-fa); }
.hq-timeline::before { content: ""; position: absolute; inset-inline: calc(100% / var(--hq-steps, 4) / 2); inset-block-start: calc(var(--hq-space-2) / 2 + 1px); border-block-start: 2px solid var(--hq-cyan-40); }
.hq-timeline__item { position: relative; display: grid; justify-items: center; gap: var(--hq-space-1); padding-inline: var(--hq-space-1); text-align: center; }
.hq-timeline__item::before { content: ""; inline-size: var(--hq-space-2); block-size: var(--hq-space-2); border-radius: 50%; border: 2px solid var(--hq-cyan-40); background: var(--hq-surface); box-sizing: border-box; }
.hq-timeline__item--current::before { background: var(--hq-accent); border-color: var(--hq-accent); }
.hq-timeline__item--done::before { background: var(--hq-cyan-40); }
.hq-timeline__when { color: var(--hq-accent); font-size: var(--hq-type-caption-font-size); font-weight: 700; }
.hq-timeline__item strong { color: var(--hq-ink); font-size: var(--hq-type-body-compact-font-size); }
.hq-timeline__item span { color: var(--hq-text-secondary); font-size: var(--hq-type-caption-font-size); line-height: 1.6; }

.hq-hub { --_n: 6; --_r: calc(var(--hq-space-12) * 1.6); position: relative; inline-size: calc(var(--_r) * 2 + var(--hq-space-12) * 1.3); aspect-ratio: 1; max-inline-size: 100%; margin: 0 auto; padding: 0; list-style: none; font-family: var(--hq-font-fa); }
.hq-hub::before { content: ""; position: absolute; inset: 50% auto auto 50%; inline-size: calc(var(--_r) * 2); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--hq-cyan-20); }
.hq-hub__core, .hq-hub__part { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; text-align: center; line-height: 1.4; }
.hq-hub__core { inline-size: calc(var(--hq-space-12) * 1.4); translate: -50% -50%; background: var(--hq-ink); color: var(--hq-text-on-inverse); font-weight: 700; font-size: var(--hq-type-body-compact-font-size); padding: var(--hq-space-1); }
.hq-hub__part { inline-size: calc(var(--hq-space-12) * 1.1); padding: var(--hq-space-1); border: 1px solid var(--hq-cyan-40); background: var(--hq-surface-raised); color: var(--hq-ink); font-size: var(--hq-type-caption-font-size); font-weight: 600;
  translate: calc(-50% + var(--_r) * sin(var(--i) * 360deg / var(--_n))) calc(-50% - var(--_r) * cos(var(--i) * 360deg / var(--_n))); }
@media (max-width: 40rem) { .hq-process { flex-direction: column; } .hq-process__step, .hq-process__step:first-child { clip-path: none; margin-inline-start: 0; padding-inline: var(--hq-space-3); } }

/* ==========================================================================
   Imagery: framed photo, text on photo (brand book: radius-md; text only on a brand-deep overlay)
   ========================================================================== */
.hq-frame { display: block; inline-size: 100%; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-radius: var(--hq-radius-md); background: var(--hq-surface-alt); }
.hq-frame > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hq-frame--4x3 { aspect-ratio: 4 / 3; }
.hq-frame--1x1 { aspect-ratio: 1; }
.hq-frame--4x5 { aspect-ratio: 4 / 5; }
.hq-frame__placeholder { display: grid; place-items: center; inline-size: 100%; block-size: 100%; color: var(--hq-text-secondary); font-family: var(--hq-font-fa); font-size: var(--hq-type-body-compact-font-size); background: repeating-linear-gradient(135deg, var(--hq-surface-alt) 0 var(--hq-space-2), var(--hq-border) var(--hq-space-2) calc(var(--hq-space-2) + 1px)); }
.hq-cover { position: relative; isolation: isolate; display: grid; align-content: end; min-block-size: calc(var(--hq-space-12) * 4); overflow: hidden; border-radius: var(--hq-radius-md); color: var(--hq-white); font-family: var(--hq-font-fa); }
.hq-cover > img, .hq-cover > .hq-frame__placeholder { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hq-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--hq-brand-deep) calc(var(--hq-opacity-overlay) * 100%), transparent); }
.hq-cover__body { display: grid; gap: var(--hq-space-1); padding: var(--hq-space-6); max-inline-size: 40rem; }
.hq-cover__title { margin: 0; color: var(--hq-white); font-size: var(--hq-type-h1-font-size); line-height: 1.3; font-weight: 700; }
.hq-cover__text { margin: 0; color: var(--hq-gray-20); line-height: 1.8; }