/* ==========================================================================
   mtemps6 — WINCH (wch)  "ساكن في الدور الكام؟" — سكشن كحلي ليلي
   مؤشر بمقبض على شكل كرتونة → ذراع الونش (SVG) بيطول للدور، الدور بينوّر،
   علم "الدور N" بيطلع معاه، والاقتراح + الارتفاع بيتحدّثوا (aria-live).
   الـ SVG بيتقلب في LTR (مفيهوش نص).
   ========================================================================== */
.mtemps6-wch-stars { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--mtemps6-deep-3) 1px, transparent 1.5px); background-size: 34px 34px; opacity: 0.8; }
/* موبايل: العنوان ← الرسمة ← اللوحة (عشان تشوف الونش وانت بتحرّك المؤشر) */
.mtemps6-wch-grid { display: grid; grid-template-areas: "head" "visual" "panel"; gap: var(--mtemps6-sp-6); align-items: center; }
.mtemps6-wch-copy { display: contents; }
.mtemps6-wch-copy .mtemps6-ui-head { grid-area: head; margin-block-end: 0; }
.mtemps6-wch-panel { grid-area: panel; }
.mtemps6-wch-visual { grid-area: visual; }
.mtemps6-wch-panel { display: grid; gap: var(--mtemps6-sp-5); padding: var(--mtemps6-pad-card); border: var(--mtemps6-hair) solid var(--mtemps6-deep-line); border-radius: var(--mtemps6-r-lg); background: var(--mtemps6-deep-2); }
.mtemps6-wch-label { display: flex; align-items: center; justify-content: space-between; gap: var(--mtemps6-sp-3); font-weight: var(--mtemps6-fw-bold); }
.mtemps6-wch-out { display: grid; place-items: center; min-width: 3.5rem; height: 3.5rem; padding-inline: var(--mtemps6-sp-2); border-radius: var(--mtemps6-r-sm); background: var(--mtemps6-accent); color: var(--mtemps6-on-accent); font-size: var(--mtemps6-fs-2xl); line-height: 1; font-variant-numeric: tabular-nums; }

/* range: مسار مخطّط زي شريط "تحذير" + مقبض كرتونة */
.mtemps6-wch-range-wrap { display: grid; gap: var(--mtemps6-sp-2); }
.mtemps6-wch-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; cursor: pointer; }
.mtemps6-wch-range:focus { outline: none; }
.mtemps6-wch-range::-webkit-slider-runnable-track { height: 0.75rem; border-radius: var(--mtemps6-r-pill); background: repeating-linear-gradient(-45deg, var(--mtemps6-deep-3) 0 8px, var(--mtemps6-deep-line) 8px 16px); }
.mtemps6-wch-range::-moz-range-track { height: 0.75rem; border-radius: var(--mtemps6-r-pill); background: repeating-linear-gradient(-45deg, var(--mtemps6-deep-3) 0 8px, var(--mtemps6-deep-line) 8px 16px); }
.mtemps6-wch-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2.5rem; height: 2.5rem; margin-top: -0.875rem; border: 3px solid var(--mtemps6-deep); border-radius: 6px; background: linear-gradient(90deg, transparent 38%, var(--mtemps6-accent) 38% 62%, transparent 62%), var(--mtemps6-cardboard); box-shadow: 0 6px 12px -4px var(--mtemps6-deep); transition: transform var(--mtemps6-dur-2) var(--mtemps6-ease-spring); }
.mtemps6-wch-range::-moz-range-thumb { width: 2.2rem; height: 2.2rem; border: 3px solid var(--mtemps6-deep); border-radius: 6px; background: linear-gradient(90deg, transparent 38%, var(--mtemps6-accent) 38% 62%, transparent 62%), var(--mtemps6-cardboard); }
.mtemps6-wch-range:hover::-webkit-slider-thumb, .mtemps6-wch-range:active::-webkit-slider-thumb { transform: rotate(-8deg) scale(1.08); }
.mtemps6-wch-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--mtemps6-accent); }
.mtemps6-wch-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--mtemps6-accent); }
.mtemps6-wch-ticks { display: flex; justify-content: space-between; padding-inline: 0.9rem; color: var(--mtemps6-on-deep-muted); font-size: var(--mtemps6-fs-2xs); font-variant-numeric: tabular-nums; }

.mtemps6-wch-result { display: grid; gap: var(--mtemps6-sp-3); }
.mtemps6-wch-height { display: flex; align-items: center; gap: var(--mtemps6-sp-2); color: var(--mtemps6-on-deep-muted); }
.mtemps6-wch-height i { color: var(--mtemps6-accent); }
.mtemps6-wch-height strong { color: var(--mtemps6-on-deep); font-variant-numeric: tabular-nums; }
.mtemps6-wch-levels { margin: 0; padding: 0; list-style: none; }
.mtemps6-wch-levels li { display: grid; gap: var(--mtemps6-sp-1); padding: var(--mtemps6-sp-4); border-inline-start: 4px solid var(--mtemps6-accent); border-radius: var(--mtemps6-r-sm); background: var(--mtemps6-deep-3); animation: mtemps6-wch-in var(--mtemps6-dur-3) var(--mtemps6-ease-spring); }
.mtemps6-wch-levels strong { color: var(--mtemps6-accent); font-size: var(--mtemps6-fs-lg); }
.mtemps6-wch-levels span { color: var(--mtemps6-on-deep-muted); font-size: var(--mtemps6-fs-sm); }
@keyframes mtemps6-wch-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- الرسمة ---------- */
.mtemps6-wch-visual { position: relative; width: min(100%, 30rem); margin-inline: auto; }
@media (max-width: 1023px) { .mtemps6-wch-visual { width: min(100%, 19rem); } }
.mtemps6-wch-svg { width: 100%; height: auto; overflow: visible; }
html[dir="ltr"] .mtemps6-wch-svg { transform: scaleX(-1); }
.mtemps6-wch-ground { fill: var(--mtemps6-deep-3); }
.mtemps6-wch-b-roof { fill: var(--mtemps6-accent); }
.mtemps6-wch-b-wall { fill: var(--mtemps6-deep-2); stroke: var(--mtemps6-deep-line); stroke-width: 2; }
.mtemps6-wch-rows rect { fill: transparent; transition: fill var(--mtemps6-dur-2); }
.mtemps6-wch-rows rect.mtemps6-is-on { fill: color-mix(in srgb, var(--mtemps6-accent) 22%, transparent); }
.mtemps6-wch-wins rect { fill: var(--mtemps6-deep-3); transition: fill var(--mtemps6-dur-2); }
.mtemps6-wch-wins rect.mtemps6-is-on { fill: var(--mtemps6-accent); }
.mtemps6-wch-arm-base { fill: var(--mtemps6-accent-2); }
.mtemps6-wch-arm-ext { fill: var(--mtemps6-accent); stroke: var(--mtemps6-deep); stroke-width: 1.5; }
.mtemps6-wch-car-plate { fill: var(--mtemps6-on-deep); }
.mtemps6-wch-t-leg { stroke: var(--mtemps6-on-deep-muted); stroke-width: 4; stroke-linecap: round; }
.mtemps6-wch-t-body { fill: var(--mtemps6-on-deep); }
.mtemps6-wch-t-tape { fill: var(--mtemps6-accent); }
.mtemps6-wch-t-cab { fill: var(--mtemps6-primary); stroke: var(--mtemps6-on-deep); stroke-width: 2; }
.mtemps6-wch-t-turret { fill: var(--mtemps6-accent); stroke: var(--mtemps6-deep); stroke-width: 3; }
.mtemps6-wch-t-wheels circle { fill: var(--mtemps6-deep); stroke: var(--mtemps6-on-deep-muted); stroke-width: 3; }
.mtemps6-wch-flag { position: absolute; inset-block-start: var(--mtemps6-flag-y, 80%); inset-inline-end: 6%; display: inline-flex; align-items: center; gap: var(--mtemps6-sp-1); padding: 0.25rem 0.7rem; border-radius: var(--mtemps6-r-xs); background: var(--mtemps6-accent); color: var(--mtemps6-on-accent); font-size: var(--mtemps6-fs-sm); font-weight: var(--mtemps6-fw-bold); white-space: nowrap; box-shadow: 0 8px 16px -8px var(--mtemps6-deep); transform: rotate(-3deg); }
.mtemps6-wch-flag b { font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .mtemps6-wch-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head visual" "panel visual"; column-gap: clamp(2.5rem, 6vw, 4rem); row-gap: var(--mtemps6-sp-6); align-items: start; } .mtemps6-wch-visual { align-self: center; } }
@media (prefers-reduced-motion: reduce) { .mtemps6-wch-levels li { animation: none; } }