/* ---------- Карта зубов: интерактивная зубная формула ----------
   Единственное место в макете, где разрешена смелость. Всё остальное намеренно тихое. */

/* Сцена шире панели ровно настолько, чтобы 16 зубов челюсти встали в одну дугу.
   Если места не хватает, квадранты переносятся сами — flex-wrap ниже. */
.odo { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s-4); align-items: start; }
.odo > * { min-width: 0; }
@media (max-width: 1000px) { .odo { grid-template-columns: 1fr; } }

.odo__stage {
  border: 1px solid var(--line-steel); border-radius: var(--radius-m);
  background: var(--steel-lift); padding: var(--s-3);
}

.odo__jaw {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-on-steel-soft); margin-bottom: var(--s-2);
}
.odo__jaw span:last-child { text-transform: none; letter-spacing: 0; color: var(--ink-on-steel-soft); }

.odo__arch { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.odo__quad { display: flex; gap: 2px; }
.odo__arch--lower { margin-top: var(--s-3); }
.odo__arch--lower .odo__tooth { flex-direction: column-reverse; }

.odo__mid {
  height: 1px; background: var(--line-steel); margin-block: var(--s-3);
  position: relative;
}
.odo__mid::after {
  content: 'линия смыкания'; position: absolute; left: 50%; top: -9px;
  transform: translateX(-50%); background: var(--steel-lift); padding: 0 10px;
  font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-on-steel-soft); text-transform: uppercase;
}

/* Дуга: резцы ближе к линии смыкания, моляры дальше — как в настоящем зубном ряду.
   --i растёт от зуба мудрости (0) к центральному резцу (7). */
.odo__tooth {
  --lift: calc(var(--i, 0) * 2.2px);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: clamp(30px, 2.6vw, 36px); padding: 6px 2px;
  background: transparent; border: 0; cursor: pointer; color: var(--ink-on-steel-soft);
  transform: translateY(var(--lift));
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.odo__arch--lower .odo__tooth { transform: translateY(calc(var(--lift) * -1)); }
.odo__tooth:hover { color: var(--ink-on-steel); }
.odo__tooth:hover .odo__crown { border-color: var(--ink-on-steel-soft); }

.odo__crown {
  width: 100%; aspect-ratio: 3 / 4; border: 1.5px solid var(--line-steel);
  border-radius: 40% 40% 26% 26%; background: var(--steel-deep);
  display: grid; place-items: center;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.odo__crown svg { width: 62%; height: 62%; }
.odo__crown path, .odo__crown line { stroke: currentColor; }

/* Форма коронки различает группы зубов — это не декор, а способ узнать свой зуб */
.odo__tooth[data-group="incisor"] .odo__crown { border-radius: 18% 18% 34% 34%; }
.odo__tooth[data-group="canine"] .odo__crown { border-radius: 50% 50% 30% 30%; }
.odo__tooth[data-group="premolar"] .odo__crown { border-radius: 34% 34% 28% 28%; }
.odo__tooth[data-group="molar"] .odo__crown { border-radius: 26% 26% 22% 22%; }
.odo__tooth[data-group="wisdom"] .odo__crown { border-style: dashed; }

.odo__tooth[aria-pressed="true"] { color: var(--steel-deep); }
.odo__tooth[aria-pressed="true"] .odo__crown {
  background: var(--indicator-lit); border-color: var(--indicator-lit);
}
.odo__tooth[aria-pressed="true"] .odo__num { color: var(--indicator-lit); }

.odo__num {
  font-family: var(--font-num); font-size: 0.75rem; color: var(--ink-on-steel-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- Панель с разбором выбранного зуба ---------- */

.odo__panel {
  border: 1px solid var(--line-steel); border-radius: var(--radius-m);
  background: var(--steel-deep); padding: var(--s-3); min-height: 340px;
}
.odo__code {
  font-family: var(--font-num); font-size: 2.5rem; line-height: 1;
  color: var(--indicator-lit); font-variant-numeric: tabular-nums;
}
.odo__title { margin-top: 6px; color: var(--ink-on-steel); font-size: 1.35rem; }
.odo__where { color: var(--ink-on-steel-soft); font-size: var(--text-sm); margin-top: 4px; }

.odo__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-steel); border: 1px solid var(--line-steel);
  margin-block: var(--s-3); }
.odo__facts div { background: var(--steel-deep); padding: 10px 12px; }
.odo__facts dt { font-size: 0.75rem; color: var(--ink-on-steel-soft); letter-spacing: 0.04em; }
.odo__facts dd { margin: 3px 0 0; color: var(--ink-on-steel); font-family: var(--font-display); font-size: 0.95rem; }

.odo__worklist { list-style: none; padding: 0; margin: 0; }
.odo__worklist li {
  display: flex; justify-content: space-between; gap: var(--s-2);
  padding: 11px 0; border-top: 1px solid var(--line-steel);
  font-size: var(--text-sm); color: var(--ink-on-steel-soft);
}
.odo__worklist b { color: var(--ink-on-steel); font-weight: 500; }
.odo__note { display: block; font-weight: 400; font-size: 0.75rem; color: var(--ink-on-steel-soft); margin-top: 2px; }
.odo__worklist span { font-family: var(--font-display); color: var(--ink-on-steel); white-space: nowrap; }

.odo__empty { color: var(--ink-on-steel-soft); font-size: var(--text-sm); }
.odo__empty strong { display: block; color: var(--ink-on-steel); font-family: var(--font-display);
  font-size: 1.15rem; margin-bottom: 8px; font-weight: 500; }

.odo__privacy {
  margin-top: var(--s-3); border-top: 1px solid var(--line-steel); padding-top: 12px;
  font-size: var(--text-xs); color: var(--ink-on-steel-soft);
}

.odo__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--s-3);
  font-size: var(--text-xs); color: var(--ink-on-steel-soft); }
.odo__legend b { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--line-steel);
  background: var(--steel-deep); vertical-align: -2px; margin-right: 6px; }
.odo__legend .is-dashed { border-style: dashed; }
.odo__legend .is-on { background: var(--indicator-lit); border-color: var(--indicator-lit); }

.odo__hint { font-size: var(--text-xs); color: var(--ink-on-steel-soft); margin-top: var(--s-2); }

/* Превью карты на главной */
.odopreview { display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.odopreview i {
  display: block; width: 14px; border: 1.5px solid var(--line-steel);
  border-radius: 28% 28% 20% 20%; background: var(--steel-deep);
}
.odopreview i:nth-child(4), .odopreview i:nth-child(9) { background: var(--indicator-lit); border-color: var(--indicator-lit); }

/* На узком экране дуга разворачивается в два ряда по квадрантам: восемь зубов в строке
   помещаются при ширине зуба 38px, и не приходится делать схему прокручиваемой вбок. */
@media (max-width: 560px) {
  .odo__stage { padding: 10px; }
  .odo__arch { flex-direction: column; align-items: center; gap: 10px; }
  .odo__quad { justify-content: center; gap: 3px; }
  /* 8 зубов в строку при ширине окна 360px: 8×35 + 7×3 + отступы = 323px */
  .odo__tooth { width: 35px; }
}