/* ReSiRai natural jaw - the "فک طبیعی" view.
   A real teeth arch with the two jaws facing each other, which can be spun in its
   plane and tilted. The teeth are painted in dental-graphic.css, which every view
   shares. */

.natural-odontogram {
    max-width: 660px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #dbe5f0;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 46%, #ffffff, #f4f9fd 64%, #eaf3fa);
    box-shadow: inset 0 1px 0 #fff;
}

/* The stage carries the 3D tilt, the svg carries nothing, so the two never fight. */
.natural-stage {
    transform-style: preserve-3d;
    transition: transform .08s linear;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.natural-stage.is-dragging { cursor: grabbing; transition: none; }
.natural-stage svg { display: block; width: 100%; height: auto; }

/* Palate and floor of the mouth. */
.jaw-inside {
    fill: url(#jawPalate);
    stroke: #dda295;
    stroke-width: 1.2;
}
.jaw-inside.lower { fill: #eeb0a3; }

/* Gum, drawn as a thick stroke along each arch. */
.jaw-gum {
    fill: none;
    stroke: url(#jawGum);
    stroke-width: 58;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 4px 8px rgba(99, 45, 40, .16));
}

.jaw-tooth { cursor: pointer; }

.jaw-tooth-number {
    font: 700 15px Arial, sans-serif;
    fill: #26384c;
    pointer-events: none;
}
.jaw-tooth.selected .jaw-tooth-number { fill: #0069cf; }

/* --- controls --- */
.natural-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}
.natural-control {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted-strong, #475569);
    font-size: var(--fs-xs, 12px);
    white-space: nowrap;
}
.natural-control input[type="range"] { width: 108px; }
.natural-reset { padding: 6px 11px; font-size: var(--fs-xs, 12px); }
.natural-hint { color: var(--muted, #64748b); font-size: var(--fs-xs, 12px); }

/* Visibility per view. */
.teeth-integrated-natural { display: none; }
.teeth-view-natural .teeth-integrated-natural { display: block; }
.teeth-view-natural .teeth-integrated-arch,
.teeth-view-natural .teeth-chart-body > .teeth-chart-group { display: none; }

@media (max-width: 700px) {
    .natural-odontogram { padding: 4px; }
    .natural-controls { gap: 8px 12px; }
    .natural-control input[type="range"] { width: 86px; }
    .natural-hint { flex: 1 0 100%; }
}