/* HEARING.co.il · audiogram reader · 29.10.2026
   Visual identity: HEARING's own — warm paper, ink, deep teal frame, serif headings, editorial "worksheet" look.
   Ear marks follow the clinical convention (right = red O, left = blue X) in HEARING's own shades. */
.aud {
  --aud-paper: var(--paper, #fbf7f1);
  --aud-ink: var(--ink, #1d2329);
  --aud-ink-2: var(--ink-2, #4f5963);
  --aud-frame: #0b6870;
  --aud-frame-tint: #e4f0ef;
  --aud-grid: #d9d2c5;
  --aud-grid-2: #ece6db;
  --aud-right: #b3261e;
  --aud-left: #1f4fa8;
}
.aud-tool {
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--aud-paper);
  border: 2px solid var(--aud-frame);
  border-radius: 6px;
  box-shadow: 6px 6px 0 var(--aud-frame-tint);
}
.aud-tool h2 { margin-top: 0; font-family: var(--display, serif); }
.aud-how { color: var(--aud-ink-2); }
.aud-key { display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: .75rem; font-weight: 600; white-space: nowrap; }
.aud-key-r { color: var(--aud-right); font-weight: 800; }
.aud-key-l { color: var(--aud-left); font-weight: 800; }
.aud-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 900px) { .aud-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.aud-chart { margin: 0; }
.aud-chart svg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--aud-grid); direction: ltr; }
.aud-chart figcaption { font-size: .875rem; color: var(--aud-ink-2); margin-top: .4rem; }
.aud-text-h { font-weight: 600; margin: .6rem 0 .2rem; }
.aud-text { font-size: .95rem; margin: 0; padding-inline-start: 1.1rem; }
.aud-plot { fill: #fff; }
.aud-g { stroke: var(--aud-grid); stroke-width: 1; }
.aud-g2 { stroke: var(--aud-grid-2); stroke-width: 1; }
.aud-lab { font: 17px system-ui, sans-serif; fill: var(--aud-ink-2); }
.aud-ax { font: 600 17px system-ui, sans-serif; fill: var(--aud-ink); }
.aud-r { fill: none; stroke: var(--aud-right); stroke-width: 2.5; }
.aud-l { stroke: var(--aud-left); stroke-width: 2.5; stroke-linecap: round; }
.aud-r-line { fill: none; stroke: var(--aud-right); stroke-width: 1.5; }
.aud-l-line { fill: none; stroke: var(--aud-left); stroke-width: 1.5; stroke-dasharray: 5 4; }
.aud-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.aud-table caption { text-align: start; font-weight: 600; padding-bottom: .4rem; }
.aud-table th, .aud-table td { padding: .3rem .4rem; border-bottom: 1px solid var(--aud-grid-2); text-align: start; }
.aud-table thead th { border-bottom: 2px solid var(--aud-frame); }
.aud-table select { width: 100%; min-height: 2.25rem; font: inherit; border: 1px solid var(--aud-grid); border-radius: 4px; background: #fff; color: var(--aud-ink); }
.aud-table select:focus-visible, .aud-clear:focus-visible { outline: 3px solid var(--focus, #b3470a); outline-offset: 2px; }
.aud-clear { margin-top: .75rem; min-height: 2.5rem; padding: 0 1rem; font: inherit; font-weight: 600; color: var(--aud-frame); background: #fff; border: 2px solid var(--aud-frame); border-radius: 4px; cursor: pointer; }
.aud-clear:hover { background: var(--aud-frame-tint); }
.aud-note { margin: 1rem 0 0; font-size: .9rem; color: var(--aud-ink-2); border-inline-start: 3px solid var(--aud-frame); padding-inline-start: .6rem; }