/*
 * HD SofT Näkötesti — widgetin tyylit (hdsoft-nakotesti.php lataa vain näkötestisivulla).
 *
 * Värit tulevat Bricksin Color Managerin muuttujista (--primary, --light, --dark);
 * fallback-arvot ovat vain latausjärjestyksen varalta, kuten consent/hdsoft-consent-theme.css:ssä.
 * Fontit periytyvät Theme Stylestä. Testimerkit (E, taulu, Amsler) piirretään aina mustalla
 * valkoiselle: näkötestin kontrastin on oltava vakio teemasta riippumatta.
 *
 * Napin pinta on brändisinistä tummennettuna: valkoinen #1684B8:lla on 4,18:1 (alle WCAG AA:n),
 * 82 % + musta antaa 5,8:1 (sama ratkaisu kuin evästebannerissa).
 */
.hdnt, .hdnt-promo {
  --hdnt-accent: color-mix(in srgb, var(--primary, #1684B8) 82%, black);
  --hdnt-accent-soft: color-mix(in srgb, var(--primary, #1684B8) 12%, white);
  --hdnt-ink: #141b2b;
  --hdnt-muted: var(--dark, #58585A);
  --hdnt-line: #d1d2d4;
  --hdnt-surface: #ffffff;
  --hdnt-paper: var(--light, #f3f5f8);
  --hdnt-ok: #1d7448; --hdnt-ok-soft: #e1f2e8;
  --hdnt-mild: #4f6a12; --hdnt-mild-soft: #eef3dc;
  --hdnt-warn: #8f5a00; --hdnt-warn-soft: #fbefd6;
  --hdnt-crit: #b0261d; --hdnt-crit-soft: #fbe3e0;
  --hdnt-radius: 10px;
}
/* Bricksin juurifontti on 10 px (html { font-size: 62.5% }), joten rem-yksiköt jäisivät
   pieniksi: kaikki mitat ovat em-yksiköitä tämän perusfontin suhteen. Vähintään 16 px,
   koska käyttäjistä moni näkee huonosti. */
.hdnt, .hdnt-promo { font-size: clamp(16px, 1.0625rem, 20px); }
.hdnt {
  color: var(--hdnt-ink);
  display: flex; flex-direction: column; gap: 1.25em;
  line-height: 1.55;
  min-width: 0;
}
.hdnt *, .hdnt *::before, .hdnt *::after { box-sizing: border-box; }
.hdnt h3, .hdnt h4 { margin: 0; text-wrap: balance; }
.hdnt p { margin: 0; max-width: 68ch; }
.hdnt [hidden] { display: none !important; }
.hdnt-small { font-size: 0.9em; }
.hdnt-muted { color: var(--hdnt-muted); }
.hdnt :focus-visible { outline: 3px solid var(--hdnt-accent); outline-offset: 2px; }

.hdnt-bar { display: flex; flex-wrap: wrap; gap: 0.75em 1.5em; align-items: center; justify-content: space-between; }
.hdnt-tabs { display: flex; flex-wrap: wrap; gap: 0.5em; }
.hdnt-tabs button {
  font: inherit; font-size: 0.95em; font-weight: 600; cursor: pointer;
  padding: 0.55em 0.9em; border-radius: 999px; border: 1px solid var(--hdnt-line);
  background: var(--hdnt-surface); color: var(--hdnt-ink);
  display: inline-flex; align-items: center; gap: 0.45em;
}
.hdnt-n { width: 1.6em; height: 1.6em; border-radius: 50%; display: inline-grid; place-items: center; background: var(--hdnt-accent-soft); color: var(--hdnt-accent); font-size: 0.85em; }
.hdnt-tabs button[aria-selected="true"] { background: var(--hdnt-accent); border-color: var(--hdnt-accent); color: #fff; }
.hdnt-tabs button[aria-selected="true"] .hdnt-n { background: #fff; color: var(--hdnt-accent); }
.hdnt-done { color: var(--hdnt-ok); }
.hdnt-tabs button[aria-selected="true"] .hdnt-done { color: #fff; }
.hdnt-units { display: flex; flex-wrap: wrap; gap: 0.5em 1em; font-size: 0.9em; color: var(--hdnt-muted); }
.hdnt-units select { font: inherit; padding: 0.3em 0.4em; border-radius: 6px; border: 1px solid var(--hdnt-line); background: var(--hdnt-surface); color: var(--hdnt-ink); }

.hdnt-step { background: var(--hdnt-surface); border: 1px solid var(--hdnt-line); border-radius: var(--hdnt-radius); padding: clamp(1em, 3vw, 1.5em); display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.hdnt-step > [data-va-setup] { display: flex; flex-direction: column; gap: 1em; }
.hdnt-note { border-radius: var(--hdnt-radius); padding: 0.85em 1em; display: flex; flex-direction: column; gap: 0.35em; background: var(--hdnt-accent-soft); align-items: flex-start; }
.hdnt-note.hdnt-ok { background: var(--hdnt-ok-soft); }
.hdnt-note.hdnt-mild { background: var(--hdnt-mild-soft); }
.hdnt-note.hdnt-warn { background: var(--hdnt-warn-soft); }
.hdnt-note.hdnt-crit { background: var(--hdnt-crit-soft); }
.hdnt-notes { display: flex; flex-direction: column; gap: 0.6em; }
.hdnt-list { margin: 0; padding-inline-start: 1.3em; display: flex; flex-direction: column; gap: 0.3em; max-width: 68ch; }

.hdnt-btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--hdnt-line); background: var(--hdnt-surface); color: var(--hdnt-ink);
  padding: 0.7em 1.1em;
}
.hdnt-btn.hdnt-primary { background: var(--hdnt-accent); border-color: var(--hdnt-accent); color: #fff; }
.hdnt-btn.hdnt-danger { color: var(--hdnt-crit); }
.hdnt-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hdnt-row { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; }

.hdnt fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; min-width: 0; }
.hdnt legend { font-weight: 600; margin-bottom: 0.5em; padding: 0; }
.hdnt-choices { display: flex; flex-wrap: wrap; gap: 0.5em; }
.hdnt-choices label {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 0.85em;
  border: 1px solid var(--hdnt-line); border-radius: 8px; background: var(--hdnt-surface); cursor: pointer;
}
.hdnt-choices label:has(input:checked) { border-color: var(--hdnt-accent); background: var(--hdnt-accent-soft); }
.hdnt-choices input { accent-color: var(--hdnt-accent); width: 1.1em; height: 1.1em; margin: 0; }
.hdnt-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25em; }
@media (max-width: 680px) { .hdnt-grid2 { grid-template-columns: minmax(0, 1fr); } }

/* kalibrointi: mitat tulevat JS:stä millimetreinä × px/mm */
.hdnt-cal-area { background: #ffffff; border-radius: var(--hdnt-radius); border: 1px solid var(--hdnt-line); padding: 1.5em 1em; display: flex; flex-direction: column; align-items: flex-start; gap: 1em; overflow-x: auto; }
.hdnt-card { border-radius: 3.2mm; border: 2px solid var(--hdnt-accent); background: repeating-linear-gradient(135deg, var(--hdnt-accent-soft) 0 10px, #ffffff 10px 20px); position: relative; flex: none; }
.hdnt-card span { position: absolute; inset-inline-start: 10px; bottom: 8px; font-size: 13px; color: var(--hdnt-accent); font-weight: 600; }
.hdnt-ruler { height: 26px; border-top: 3px solid #000; position: relative; flex: none; direction: ltr; }
.hdnt-ruler i { position: absolute; top: -3px; width: 0; height: 22px; border-inline-start: 2px solid #000; transform: translateX(-1px); }
.hdnt-ruler i.hdnt-half { height: 12px; }
.hdnt-paper { height: 3em; border: 2px dashed #000; border-top: 0; position: relative; flex: none; background: #fafafa; }
.hdnt-paper span { position: absolute; inset-inline-start: 8px; bottom: 6px; font-size: 13px; color: #333; }
.hdnt-cal-caption { color: #333a48; font-size: 0.9em; }
.hdnt input[type="range"] { width: 100%; accent-color: var(--hdnt-accent); height: 34px; }

/* testi */
.hdnt-run { display: flex; flex-direction: column; gap: 0.9em; background: var(--hdnt-surface); }
.hdnt-run:fullscreen { padding: 16px; background: #ffffff; }
.hdnt-stage { background: #ffffff; border-radius: var(--hdnt-radius); border: 1px solid var(--hdnt-line); height: max(320px, 62vh); width: 100%; overflow: hidden; }
.hdnt-run:fullscreen .hdnt-stage { height: calc(100vh - 230px); border: 0; }
.hdnt-stage canvas { width: 100%; height: 100%; display: block; }
.hdnt-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.1em; align-items: center; }
@media (max-width: 680px) { .hdnt-controls { grid-template-columns: minmax(0, 1fr); } }
.hdnt-run-status { display: flex; flex-direction: column; gap: 0.4em; min-width: 0; }
/* Suunnat ovat absoluuttisia (vasen on vasen myös arabiaksi ja persiaksi), joten
   ruudukkoa ei peilata RTL-sivulla. */
.hdnt-pad { direction: ltr; display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 56px); gap: 6px; justify-self: end; }
@media (max-width: 680px) { .hdnt-pad { justify-self: center; } }
.hdnt-pad button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--hdnt-line); background: var(--hdnt-surface); color: var(--hdnt-ink); font-size: 26px; font-weight: 700; display: grid; place-items: center; }
.hdnt-pad button:active { background: var(--hdnt-accent-soft); }
.hdnt-pad .hdnt-up { grid-column: 2; grid-row: 1; }
.hdnt-pad .hdnt-left { grid-column: 1; grid-row: 2; }
.hdnt-pad .hdnt-right { grid-column: 3; grid-row: 2; }
.hdnt-pad .hdnt-down { grid-column: 2; grid-row: 3; }
.hdnt-pad .hdnt-none { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 1.1; text-align: center; padding: 2px; }
.hdnt-dots { display: flex; gap: 6px; }
.hdnt-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hdnt-line); }
.hdnt-dots i.hdnt-c { background: var(--hdnt-ok); border-color: var(--hdnt-ok); }
.hdnt-dots i.hdnt-w { background: var(--hdnt-crit); border-color: var(--hdnt-crit); }

.hdnt-done-view { display: flex; flex-direction: column; gap: 0.6em; }
.hdnt-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 1.1em; }
.hdnt-big { font-size: 3em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hdnt-chip { display: inline-block; padding: 0.15em 0.6em; border-radius: 999px; font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.hdnt-chip.hdnt-ok { background: var(--hdnt-ok-soft); color: var(--hdnt-ok); }
.hdnt-chip.hdnt-mild { background: var(--hdnt-mild-soft); color: var(--hdnt-mild); }
.hdnt-chip.hdnt-warn { background: var(--hdnt-warn-soft); color: var(--hdnt-warn); }
.hdnt-chip.hdnt-crit { background: var(--hdnt-crit-soft); color: var(--hdnt-crit); }

/* näkötaulu */
.hdnt-chart { background: #ffffff; border: 1px solid var(--hdnt-line); border-radius: var(--hdnt-radius); padding: 1em; display: flex; flex-direction: column; gap: 0.6em; overflow-x: auto; }
.hdnt-chart-row { display: flex; align-items: center; gap: 1em; padding: 0.2em 0.4em; border-radius: 8px; direction: ltr; }
.hdnt-chart-row canvas { display: block; flex: none; }
.hdnt-chart-row.hdnt-picked { background: var(--hdnt-accent-soft); }
.hdnt-row-pick { font: inherit; font-size: 0.85em; cursor: pointer; margin-inline-start: auto; flex: none; border: 1px solid var(--hdnt-line); border-radius: 6px; background: #ffffff; color: var(--hdnt-ink); padding: 0.25em 0.5em; font-variant-numeric: tabular-nums; }

/* amsler */
.hdnt-amsler-wrap { background: #ffffff; border-radius: var(--hdnt-radius); border: 1px solid var(--hdnt-line); padding: 1.25em 0.75em; display: flex; justify-content: center; overflow-x: auto; }
.hdnt-amsler-wrap canvas { display: block; flex: none; }

/* tulokset */
.hdnt-table-wrap { overflow-x: auto; }
.hdnt table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
.hdnt th, .hdnt td { text-align: start; padding: 0.55em 0.6em; border-bottom: 1px solid var(--hdnt-line); vertical-align: middle; }
.hdnt th { color: var(--hdnt-muted); font-weight: 600; font-size: 0.78em; letter-spacing: 0.05em; text-transform: uppercase; }
.hdnt td.hdnt-val { font-weight: 700; font-size: 1.15em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hdnt-copy-fallback { width: 100%; font: inherit; font-size: 0.9em; }
.hdnt-disclaimer { font-size: 0.9em; color: var(--hdnt-muted); border-top: 1px solid var(--hdnt-line); padding-top: 0.8em; }

/* tuotemainokset (palvelimella renderöity [hdsoft_promot]) */
.hdnt-promo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--brxw-grid-gap, 1.5em); }
@media (max-width: 860px) { .hdnt-promo { grid-template-columns: minmax(0, 1fr); } }
.hdnt-promo a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--hdnt-line); border-radius: var(--hdnt-radius); overflow: hidden; background: var(--hdnt-surface); color: var(--hdnt-ink); text-decoration: none; }
.hdnt-promo a:hover { border-color: var(--hdnt-accent); }
.hdnt-promo a:focus-visible { outline: 3px solid var(--hdnt-accent); outline-offset: 2px; }
.hdnt-promo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--hdnt-paper); }
.hdnt-promo img.hdnt-contain { object-fit: contain; padding: 0.75em; }
.hdnt-promo-body { display: flex; flex-direction: column; gap: 0.4em; padding: var(--brxw-space-m, 1.25em); flex-grow: 1; }
.hdnt-promo-body strong { font-size: 1.1em; }
.hdnt-promo-cta { margin-top: auto; color: var(--hdnt-accent); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .hdnt *, .hdnt-promo * { transition: none !important; animation: none !important; } }