/* CARETTA EYESIGHT — page styles (uses the LOCKED design-system tokens from site.css).
   Logical properties throughout — one file serves both LTR (/eye.html) and RTL (/he/eye.html). */

.eye-wrap{ max-width:880px; margin:0 auto; padding-inline:var(--gutter); }
.eye-section{ padding-block:clamp(40px,7vh,72px) var(--section); }
/* the hidden attribute must always win — .btn/.eye-lead set display and would override it */
.eye-wrap [hidden]{ display:none !important; }

/* — intro — */
.eye-intro{ text-align:center; }
.eye-intro h1{ margin:14px 0 18px; }
.eye-intro .lead{ max-width:46ch; margin:0 auto 10px; }
.eye-intro .small{ margin:0 auto 30px; }

/* — pair screens — */
#eye-stage[hidden]{ display:none; }
/* 26.7 — MEASURED FAILURE, founder: "you click it and it jumps huge, then a second later
   it goes small". Mechanism, reproduced frame-by-frame in Chrome (CDP) with this file
   blocked: the pair GRID lived here, but this file is loaded async (media=print swap) on
   the home page to protect LCP. Until it lands, .eye-pairing is display:block and each
   .eye-card — width:100%; aspect-ratio:4/5 — renders 560x700 instead of 270x337.5. A 2x
   card, then a snap back the instant the stylesheet applies.
   The class-level rule that follows from it: NO geometry of a screen that the home page
   renders may live in this async file. Every box rule of the pair screen (.eye-head,
   .eye-count, .eye-bar, .eye-kicker, .eye-ask, .eye-pairing, .eye-skip) now sits in
   site.css, which is render-blocking on both surfaces. /eye.html is unaffected — it loads
   site.css first, then this file. Only the fade STATE stays here (no geometry). */
.eye-pairing.eye-fade{ opacity:0; transform:translateY(8px); }
/* card primitives (.eye-card / .ec-*) and the whole pair-screen box model now live in
   site.css — shared with the first question in the home page, which loads this file
   asynchronously and must never depend on it for layout. */
.eye-skip button{ font-family:var(--sans); font-size:13px; letter-spacing:.04em; color:var(--muted); background:none; border:0;
  cursor:pointer; padding:8px 14px; border-bottom:1px solid transparent; transition:color var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard); }
.eye-skip button:hover{ color:var(--ink); border-color:var(--line); }

/* — panels / result — */
.eye-panel{ text-align:center; animation:eye-rise var(--t-arrive) var(--e-arrive) both; }
@keyframes eye-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.eye-h1{ font-family:var(--serif); font-weight:500; font-size:clamp(32px,5.4vw,52px); line-height:1.08; margin:10px 0 8px; text-wrap:balance; }
.eye-h1 .eye-amp{ color:var(--muted); font-weight:400; }
.eye-label{ font-family:var(--sans); font-size:13.5px; letter-spacing:.02em; color:var(--muted); margin:0 0 14px; }
.eye-line{ font-family:var(--serif); font-size:clamp(17px,2.2vw,20px); line-height:1.6; color:var(--ink); max-width:44ch; margin:0 auto 26px; text-wrap:balance; }
html[dir="rtl"] .eye-line{ font-family:'Frank Ruhl Libre',Georgia,serif; }
.eye-primary,.eye-zone{ margin:0 0 8px; }
.eye-zone{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,3vw,20px); }
.eye-model{ position:relative; display:block; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  transition:transform var(--t-fast) var(--e-standard), box-shadow var(--t-fast) var(--e-standard); }
.eye-model:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(0,0,0,.04), 0 22px 48px -22px rgba(35,32,32,.45); }
/* 26.7 — the tile is now the lengthways ("-v") asset (9:16). The card is held to a fixed
   3:4 so the box never depends on the file, and the planks run down the frame. */
.eye-model img{ width:100%; height:auto; display:block; aspect-ratio:3/4; object-fit:cover; }
.eye-model-nm{ position:absolute; inset-inline:0; bottom:0; display:flex; align-items:baseline; gap:10px; justify-content:center;
  padding:26px 14px 12px; color:#F4F2EC; background:linear-gradient(180deg, rgba(14,27,35,0), rgba(14,27,35,.62));
  font-family:var(--serif); font-size:18px; }
.eye-model-nm i{ font-style:normal; font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; opacity:.8; }
.eye-note{ font-family:var(--sans); font-size:13.5px; color:var(--muted); line-height:1.7; max-width:52ch; margin:14px auto 0; }
.eye-alt-k{ font-family:var(--sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px; }
html[dir="rtl"] .eye-alt-k{ letter-spacing:.04em; }
.eye-alt{ display:flex; justify-content:center; }
.eye-alt-card{ display:inline-flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:4px;
  padding:10px 18px; background:var(--surface); transition:border-color var(--t-fast) var(--e-standard); }
.eye-alt-card:hover{ border-color:var(--oak-text); }
.eye-alt-card .eye-sw{ width:30px; height:30px; border-radius:3px; border:1px solid var(--line); flex:none; }
.eye-alt-card b{ font-family:var(--serif); font-weight:500; font-size:17px; }
.eye-alt-card i{ font-style:normal; font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; color:var(--muted); margin-inline-start:6px; }

/* — the collection (stated pick) — */
.eye-coll-q{ font-family:var(--serif); font-size:clamp(18px,2.4vw,22px); margin:0 0 16px; }
html[dir="rtl"] .eye-coll-q{ font-family:'Frank Ruhl Libre',Georgia,serif; font-weight:500; }
.eye-deck .fd{ border:0; padding:0; cursor:pointer; }
.eye-deck .fd:focus-visible{ outline:2px solid var(--sea); outline-offset:2px; }
.eye-deck .fd.picked{ outline:2px solid var(--ink); outline-offset:2px; }
.eye-deck .fd.picked .fd-nm{ opacity:1; }
.eye-deck .fd.dim{ opacity:.4; }
.eye-deck .fd:disabled{ cursor:default; }
.eye-deck .fd:disabled:hover{ flex:1; }
@media (max-width:680px){ .eye-deck .fd:disabled:hover{ flex:1 1 22%; } }
.eye-coll-skip{ margin:16px 0 0; }
.eye-coll-skip button{ font-family:var(--sans); font-size:13px; color:var(--muted); background:none; border:0; cursor:pointer;
  padding:6px 12px; border-bottom:1px solid transparent; transition:color var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard); }
.eye-coll-skip button:hover{ color:var(--ink); border-color:var(--line); }
.eye-coll-skip button:disabled{ opacity:.4; cursor:default; }
.eye-stated{ font-family:var(--serif); font-size:clamp(16px,2.1vw,19px); line-height:1.6; color:var(--ink); max-width:46ch; margin:18px auto 0; text-wrap:balance; min-height:1em; }
html[dir="rtl"] .eye-stated{ font-family:'Frank Ruhl Libre',Georgia,serif; }
.eye-stated-go{ margin:10px 0 0; font-family:var(--sans); font-size:14px; }

/* — soft close — */
.eye-close{ margin-top:34px; }
.eye-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.eye-lead{ max-width:420px; margin:6px auto 0; display:grid; gap:14px; text-align:start; }
.eye-lead-note{ font-family:var(--sans); font-size:12.5px; color:var(--muted); margin:0; }
.eye-lead-err{ font-family:var(--sans); font-size:13.5px; color:var(--err-ink); margin:0; }
.eye-lead-done{ font-family:var(--sans); font-size:15px; color:var(--ink); margin:10px 0 0; }
.eye-foot{ font-family:var(--sans); font-size:12px; color:var(--muted); line-height:1.7; max-width:54ch; margin:30px auto 0; }

/* — small screens — */
@media (max-width:560px){
  .eye-zone{ grid-template-columns:1fr; }
  .eye-ctas .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .eye-pairing,.eye-card,.eye-bar > i{ transition:none; }
  .eye-panel{ animation:none; }
}