/*
 * 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); }

/* 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 { font-family: var(--hq-font-serif, "IBM Plex Serif", Georgia, serif); font-weight: 700; font-size: 80px; line-height: .8; color: var(--hq-brand, #33B1FF); }
.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: #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: #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; }

/* ==========================================================================
 * 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; }