/*
 * מד הטבעת - CSS מבני מינימלי (full-stack-engineer, 4ג). המעצב מלטש.
 * צבעים, פונטים, כפתורים, שדות ופוקוס - מ-sby.css (custom properties --sby-*, .sby-button, .sby-form__*).
 * פריסה בתכונות לוגיות בלבד (RTL). פינות 0, בלי צל, בלי גרדיאנט. אין רוחב קבוע מעל 100%.
 *
 * חשוב: המסגרת, העיגול והסרגל מקבלים את הגודל שלהם בפיקסלים מה-JS לפי הכיול. לא לשנות להם רוחב / גובה
 * / padding / border-box ב-CSS - זה מה שהופך פיקסלים למילימטרים.
 */

.sby-ring-sizer { max-inline-size: 100%; min-inline-size: 0; }
.sby-ring-sizer__app { display: grid; gap: 1.5rem; min-inline-size: 0; }
.sby-ring-sizer__lead { margin: 0; max-inline-size: 60ch; font-size: var(--sby-fs-lead); font-weight: 300; line-height: 1.7; }

/* בחירת הדרך: שלושה כפתורי מצב, הראשון מימין */
.sby-ring-sizer__methods { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sby-ring-sizer__method {
	flex: 1 1 10rem;
	min-block-size: 48px;
	padding: 0.65rem 1rem;
	border: 1px solid var(--sby-line-strong);
	border-radius: 0;
	background: transparent;
	color: var(--sby-ivory);
	font: inherit;
	cursor: pointer;
}
.sby-ring-sizer__method:hover { border-color: var(--sby-champagne); color: var(--sby-champagne-light); }
.sby-ring-sizer__method[aria-pressed="true"] { border-color: var(--sby-champagne); background: var(--sby-charcoal-light); color: var(--sby-white); box-shadow: inset 0 -2px 0 var(--sby-champagne); }

.sby-ring-sizer__notice { margin: 0; padding: 0.9rem 1.1rem; border: 1px solid var(--sby-line-strong); border-inline-start: 2px solid var(--sby-champagne); background: var(--sby-charcoal); color: var(--sby-ivory); }

/* עבודה + תוצאה: תוצאה משמאל במחשב (RTL: העבודה מימין), מתחת במובייל */
.sby-ring-sizer__layout { display: grid; gap: 2rem; min-inline-size: 0; }
.sby-ring-sizer__work { min-inline-size: 0; }
@media (min-width: 1024px) {
	.sby-ring-sizer__layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); align-items: start; }
	.sby-ring-sizer__result { position: sticky; inset-block-start: calc(var(--sby-header-height) + var(--sby-admin) + 1.5rem); }
}

.sby-ring-sizer__panel { display: grid; gap: 1.25rem; min-inline-size: 0; }
.sby-ring-sizer__title { margin: 0; font-size: var(--sby-fs-h3); }
.sby-ring-sizer__title:focus { outline: none; }
.sby-ring-sizer__instructions,
.sby-ring-sizer__privacy,
.sby-ring-sizer__steps { margin: 0; max-inline-size: 65ch; }
.sby-ring-sizer__privacy { font-size: var(--sby-fs-small); color: var(--sby-muted); }
.sby-ring-sizer__steps { padding-inline-start: 1.25rem; display: grid; gap: 0.4rem; }

/* כיול: המסגרת צמודה להתחלת השורה (ימין), הידית בקצה הנגדי */
.sby-ring-sizer__card-stage { display: flex; justify-content: flex-start; align-items: flex-start; min-inline-size: 0; padding-block: 0.5rem; touch-action: none; cursor: ew-resize; }
.sby-ring-sizer__card { position: relative; flex: none; max-inline-size: 100%; box-sizing: border-box; border: 1px solid var(--sby-champagne); background: var(--sby-charcoal-light); }
.sby-ring-sizer__card-handle { position: absolute; inset-block: 0; inset-inline-end: -1px; inline-size: 14px; background: var(--sby-champagne); }

/* שורת שליטה: − טווח + ושדה מספרי */
.sby-ring-sizer__control { display: grid; gap: 0.5rem; min-inline-size: 0; }
.sby-ring-sizer__control-row { display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }
.sby-ring-sizer__range { flex: 1 1 auto; min-inline-size: 0; min-block-size: 44px; accent-color: var(--sby-champagne); }
.sby-ring-sizer__nudge.sby-button { flex: none; min-block-size: 44px; min-inline-size: 44px; padding: 0; font-size: 1.25rem; }
.sby-ring-sizer__number-field { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.sby-ring-sizer__number-label { font-weight: 400; color: var(--sby-muted); }
.sby-ring-sizer__number.sby-form__input { inline-size: 8rem; min-block-size: 44px; text-align: center; }

.sby-ring-sizer__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sby-ring-sizer__actions .sby-button { white-space: normal; text-align: center; }
.sby-ring-sizer__calibrated { margin: 0; font-size: var(--sby-fs-small); color: var(--sby-muted); }
.sby-ring-sizer__recalibrate { min-block-size: 44px; padding: 0 0.25rem; border: 0; background: none; color: var(--sby-champagne); font: inherit; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.sby-ring-sizer__recalibrate:hover { color: var(--sby-champagne-light); }

/* טבעת קיימת: עיגול במרכז, הקצה החיצוני שלו = הקוטר */
.sby-ring-sizer__ring-stage { display: grid; place-items: center; min-inline-size: 0; max-inline-size: 100%; border: 1px solid var(--sby-line); background: var(--sby-black); touch-action: none; cursor: nwse-resize; }
.sby-ring-sizer__circle { box-sizing: border-box; border: 2px solid var(--sby-champagne); border-radius: 50%; }

/* סרגל: האפס בהתחלת השורה (ימין), או למעלה כשהוא אנכי (טלפון לאורכו) */
.sby-ring-sizer__ruler { position: relative; box-sizing: content-box; max-inline-size: 100%; block-size: 4.5rem; border-block-end: 1px solid var(--sby-champagne); background: var(--sby-charcoal); touch-action: none; cursor: pointer; }
.sby-ring-sizer__ruler.is-vertical { inline-size: 6rem; border-block-end: 0; border-inline-start: 1px solid var(--sby-champagne); }
.sby-ring-sizer__ticks { position: absolute; inset: 0; }
.sby-ring-sizer__tick,
.sby-ring-sizer__tick-label,
.sby-ring-sizer__marker { position: absolute; --pos: calc(var(--mm, 0) * var(--sby-rs-px-per-mm, 3.78) * 1px); }
.sby-ring-sizer__tick { inset-block-end: 0; inset-inline-start: var(--pos); inline-size: 1px; block-size: 0.6rem; background: var(--sby-muted); }
.sby-ring-sizer__tick--mid { block-size: 1rem; }
.sby-ring-sizer__tick--major { block-size: 1.5rem; background: var(--sby-champagne); }
.sby-ring-sizer__tick-label { inset-block-end: 1.7rem; inset-inline-start: var(--pos); transform: translateX(50%); font-size: 0.8125rem; line-height: 1; color: var(--sby-ivory); }
.sby-ring-sizer__marker { inset-block: 0; inset-inline-start: var(--pos); inline-size: 2px; margin-inline-start: -1px; background: var(--sby-white); }
.sby-ring-sizer__ruler.is-vertical .sby-ring-sizer__tick { inset-block-end: auto; inset-block-start: var(--pos); inset-inline-start: 0; inline-size: 0.6rem; block-size: 1px; }
.sby-ring-sizer__ruler.is-vertical .sby-ring-sizer__tick--mid { inline-size: 1rem; }
.sby-ring-sizer__ruler.is-vertical .sby-ring-sizer__tick--major { inline-size: 1.5rem; }
.sby-ring-sizer__ruler.is-vertical .sby-ring-sizer__tick-label { inset-block-end: auto; inset-block-start: var(--pos); inset-inline-start: 1.8rem; transform: translateY(-50%); }
.sby-ring-sizer__ruler.is-vertical .sby-ring-sizer__marker { inset-block: auto; inset-block-start: var(--pos); inset-inline: 0; inline-size: auto; block-size: 2px; margin: -1px 0 0; }
[dir="ltr"] .sby-ring-sizer__tick-label { transform: translateX(-50%); }
.sby-ring-sizer__ruler:not(.is-vertical) .sby-ring-sizer__tick-label--zero { transform: none; }
.sby-ring-sizer__ruler.is-vertical .sby-ring-sizer__tick-label--zero { transform: none; }

/* מצלמה */
.sby-ring-sizer__camera,
.sby-ring-sizer__camera-intro { display: grid; gap: 1rem; min-inline-size: 0; }
.sby-ring-sizer__camera-intro p { margin: 0; max-inline-size: 65ch; }
.sby-ring-sizer__select.sby-form__input { max-inline-size: 22rem; }
.sby-ring-sizer__video,
.sby-ring-sizer__canvas { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; background: var(--sby-black); }
.sby-ring-sizer__canvas { touch-action: none; cursor: crosshair; }
.sby-ring-sizer__status:empty,
.sby-ring-sizer__step:empty { display: none; }
.sby-ring-sizer__status,
.sby-ring-sizer__step { margin: 0; }

/* תוצאה */
.sby-ring-sizer__result { display: grid; gap: 1rem; min-inline-size: 0; padding: 1.5rem; border: 1px solid var(--sby-line-strong); background: var(--sby-charcoal); }
.sby-ring-sizer__readout { min-inline-size: 0; }
.sby-ring-sizer__empty { margin: 0; color: var(--sby-muted); }
.sby-ring-sizer__sizes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem 1rem; margin: 0; align-items: baseline; }
.sby-ring-sizer__term { color: var(--sby-ivory); }
.sby-ring-sizer__value { margin: 0; color: var(--sby-white); font-family: var(--sby-font-heading); font-size: var(--sby-fs-h3); text-align: end; }
.sby-ring-sizer__value--il { font-size: var(--sby-fs-price); color: var(--sby-champagne-light); }
.sby-ring-sizer__note { margin: 0; font-size: var(--sby-fs-small); }
.sby-ring-sizer__disclaimer { margin: 0; padding-block-start: 0.75rem; border-block-start: 1px solid var(--sby-line); font-size: var(--sby-fs-small); color: var(--sby-champagne); }
.sby-ring-sizer__result .sby-ring-sizer__actions .sby-button { flex: 1 1 12rem; }

/* =========================================================================
 * ליטוש (4ב, web-designer, 23.10) - המעטפת. המסגרת, העיגול והסרגל מקבלים גודל מה-JS - לא נוגעים בגודל / ריפוד / גבול שלהם 
 * ====================================================================== */
.sby-page--ring-sizer .sby-section--ring-sizer { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 7vw, 6rem); background: var(--sby-black); }
.sby-ring-sizer__app { gap: 2rem; }
.sby-ring-sizer__lead { color: var(--sby-ivory); }
.sby-ring-sizer__methods { gap: 0; border-block-end: 1px solid var(--sby-line-strong); }
.sby-ring-sizer__method {
	flex: 1 1 9rem;
	min-block-size: 56px;
	margin-block-end: -1px;
	border: 0;
	border-block-end: 2px solid transparent;
	background: none;
	color: var(--sby-ivory);
	font-size: 1.0625rem;
	transition: color 200ms var(--sby-ease), border-color 200ms var(--sby-ease), background-color 200ms var(--sby-ease);
}
.sby-ring-sizer__method:hover { border-color: var(--sby-line-strong); color: var(--sby-champagne-light); background: rgb(201 168 120 / 0.04); }
.sby-ring-sizer__method[aria-pressed="true"] { border-color: var(--sby-champagne); background: none; color: var(--sby-white); box-shadow: none; font-weight: 600; }
.sby-ring-sizer__method:focus-visible { outline-offset: -3px; }
.sby-ring-sizer__layout { gap: 2.5rem; }
@media (min-width: 1024px) { .sby-ring-sizer__layout { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); column-gap: clamp(3rem, 6vw, 6rem); } }
.sby-ring-sizer__title { font-size: clamp(1.625rem, 2.2vw, 2.125rem); color: var(--sby-white); }
.sby-ring-sizer__notice { font-size: var(--sby-fs-small); }
.sby-ring-sizer__ring-stage { border-color: var(--sby-line-strong); }
.sby-ring-sizer__result { padding: 2rem 1.75rem; border-color: var(--sby-line-strong); border-block-start: 1px solid var(--sby-champagne); }
.sby-ring-sizer__result .sby-ring-sizer__title { font-size: 1.5rem; }
.sby-ring-sizer__value--il { font-size: clamp(2.5rem, 4vw, 3.25rem); line-height: 1.1; }
/* פס הגרירה: קו שיער וידית עגולה בזהב (במקום הפס האפור של הדפדפן) */
.sby-ring-sizer__range { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.sby-ring-sizer__range::-webkit-slider-runnable-track { block-size: 1px; background: var(--sby-line-strong); }
.sby-ring-sizer__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; inline-size: 22px; block-size: 22px; margin-block-start: -11px; border: 1px solid var(--sby-champagne); border-radius: 50%; background: var(--sby-black); transition: background-color 200ms var(--sby-ease); }
.sby-ring-sizer__range:hover::-webkit-slider-thumb,
.sby-ring-sizer__range:active::-webkit-slider-thumb { background: var(--sby-champagne); }
.sby-ring-sizer__range::-moz-range-track { block-size: 1px; background: var(--sby-line-strong); }
.sby-ring-sizer__range::-moz-range-progress { block-size: 1px; background: var(--sby-champagne); }
.sby-ring-sizer__range::-moz-range-thumb { inline-size: 20px; block-size: 20px; border: 1px solid var(--sby-champagne); border-radius: 50%; background: var(--sby-black); }
.sby-ring-sizer__range:focus-visible { outline: 2px solid var(--sby-champagne); outline-offset: 4px; }

/* שלוש לשוניות הדרך ("על המסך", "עם כרטיס", "במצלמה") בשורה אחת גם ב-390 - קודם "במצלמה" ירדה לשורה שנייה (ביקורת עיצוב 25.10) */
@media (max-width: 600px) {
	.sby-ring-sizer__methods { flex-wrap: nowrap; }
	.sby-ring-sizer__method { flex: 1 1 0; min-inline-size: 0; padding-inline: 0.25rem; font-size: 0.9375rem; line-height: 1.25; }
}