/* 3D model page */
:root { --scene: #2a251e; }
:root[data-theme="light"] { --scene: #e7dcc6; }
.bench { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; padding: 0 0 30px; }
.stage { display: grid; gap: 12px; min-width: 0; }
#view3d { position: relative; height: clamp(420px, 70vh, 780px); background: var(--scene); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; touch-action: none; direction: ltr; }
#view3d canvas { display: block; width: 100%; height: 100%; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pin { position: absolute; transform: translate(-50%, -50%); font: 500 .7rem var(--body); background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--ink); border: 1px solid var(--gold); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
#tip { position: absolute; left: 14px; bottom: 10px; right: 14px; font: 400 .78rem var(--body); color: var(--ink); opacity: .75; pointer-events: none; }
:root[dir="rtl"] #tip { text-align: right; direction: rtl; }
#gl-error { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; padding: 16px 18px; }
.controls label { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: .88rem; color: var(--muted); }
.controls output { color: var(--ink); font-size: .85rem; }
.controls input[type=range] { grid-column: 1/-1; width: 100%; accent-color: var(--gold2); direction: ltr; }
.controls .check { display: flex; gap: 8px; align-items: center; }
.controls .check label { display: block; }
.controls input[type=checkbox] { accent-color: var(--gold2); width: 16px; height: 16px; }
.reg { padding: 0; display: flex; flex-direction: column; min-width: 0; max-height: calc(clamp(420px, 70vh, 780px) + 150px); overflow: hidden; }
#detail { padding: 18px 20px; border-bottom: 1px solid var(--line); min-height: 110px; }
#detail h2 { font-size: 1.25rem; margin-bottom: 4px; color: var(--hl); }
#detail p { color: var(--muted); font-size: .88rem; margin: 0; }
#register { overflow: auto; flex: 1; padding: 6px 0 12px; }
#register h3 { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 14px 20px 4px; }
:root[data-lang="ar"] #register h3 { font-family: var(--body); letter-spacing: 0; font-size: .85rem; }
.row { display: block; width: 100%; text-align: start; border: 0; background: none; color: var(--ink); font: 400 .88rem var(--body); padding: 5px 20px; cursor: pointer; }
.row:hover { background: var(--card2); }
.row[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.fit { padding: 40px 0; }
.fit-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-top: 20px; }
.fit-grid h3 { font-size: 1.15rem; margin-bottom: 10px; }
.fit-grid ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; color: var(--muted); font-size: .93rem; }
@media (max-width: 980px) { .bench, .fit-grid { grid-template-columns: minmax(0, 1fr); } .reg { max-height: none; } #register { max-height: 320px; } }

/* Phones: a shorter 3D view leaves page around it to scroll with a finger. */
@media (max-width: 700px) { #view3d { height: 400px; } .reg { max-height: none; } }