/* ═══════════════════════════════════════════════════════════
   Reader Inc. — wrist concept
   Styles for the watch device and its demo rig only. Everything
   else on watch.html comes from core.css + parts.css.
   ═══════════════════════════════════════════════════════════ */

/* ── the rig: device on the left, controls on the right ── */
.wf-rig{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
@media(max-width:900px){.wf-rig{grid-template-columns:1fr;justify-items:center}}

.wf-stage{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}

/* ── band + case ── */
.wf-band{position:relative;display:flex;flex-direction:column;align-items:center}
.wf-band::before,.wf-band::after{
  content:"";width:104px;height:clamp(34px,5vw,58px);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid var(--bd);
}
.wf-band::before{border-radius:16px 16px 6px 6px;border-bottom:0;
  clip-path:polygon(6% 0,94% 0,100% 100%,0 100%)}
.wf-band::after{border-radius:6px 6px 16px 16px;border-top:0;
  clip-path:polygon(0 0,100% 0,94% 100%,6% 100%)}

.wf-case{
  position:relative;width:clamp(210px,26vw,268px);
  aspect-ratio:396/484;               /* the real thing, near enough */
  border-radius:clamp(46px,6vw,60px);
  background:linear-gradient(150deg,#2A2A34,#101017 42%,#1C1C24);
  border:1px solid var(--bd-2);
  padding:9px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),
             0 0 0 1px rgba(255,255,255,.04) inset,
             var(--glow-v);
}
/* crown + side button */
.wf-case::before,.wf-case::after{
  content:"";position:absolute;left:100%;
  background:linear-gradient(180deg,#3A3A46,#1A1A22);
  border:1px solid var(--bd-2);border-left:0;
}
.wf-case::before{top:26%;width:7px;height:34px;border-radius:0 4px 4px 0}
.wf-case::after{top:47%;width:5px;height:46px;border-radius:0 3px 3px 0;opacity:.7}

/* ── the glass ── */
.wf-glass{
  position:relative;height:100%;border-radius:clamp(38px,5vw,52px);
  background:radial-gradient(120% 90% at 50% 0%,#0E0E15,#000 70%);
  overflow:hidden;display:grid;
  grid-template-rows:auto 1fr auto;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.wf-glass:focus-visible{outline:2px solid var(--v-lt);outline-offset:3px}

/* status row */
.wf-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 0;font:500 10px/1 var(--mono);
  letter-spacing:.06em;color:var(--fg-3);
}
.wf-top b{color:var(--v-lt);font-weight:600}
.wf-batt{display:inline-flex;align-items:center;gap:4px}
.wf-batt i{width:15px;height:8px;border:1px solid var(--fg-4);border-radius:2px;position:relative}
.wf-batt i::before{content:"";position:absolute;inset:1.5px;right:auto;width:8px;background:var(--lime);border-radius:1px}

/* the reading area — the word never moves */
.wf-face{
  display:grid;grid-template-rows:1fr auto 1fr;
  align-items:center;justify-items:center;padding:0 12px;min-height:0;
}
.wf-ico{
  grid-row:1;align-self:end;width:clamp(40px,5.4vw,54px);height:clamp(40px,5.4vw,54px);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.wf-ico svg{width:100%;height:100%;fill:none;stroke:var(--c-lt);
  stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.wf-ico .mod{stroke:var(--v-lt);stroke-width:1.1}
.wf-ico .pro{stroke:var(--fg-2)}

.wf-word{
  grid-row:2;font:600 clamp(24px,3.1vw,32px)/1.05 var(--sans);
  letter-spacing:-.02em;color:var(--fg);text-align:center;
  max-width:100%;overflow-wrap:anywhere;
}
.wf-word.long{font-size:clamp(18px,2.3vw,23px)}
.wf-word.longer{font-size:clamp(15px,1.9vw,19px)}

/* pairing mode: icon behind the word */
.wf-face.behind .wf-ico{grid-row:2;align-self:center;margin:0;
  width:clamp(68px,9vw,92px);height:clamp(68px,9vw,92px);opacity:.3}
.wf-face.behind .wf-word{grid-row:2;position:relative;z-index:1}
/* pairing mode: word only */
.wf-face.plain .wf-ico{display:none}

/* footer row inside the glass */
.wf-bot{padding:0 18px 15px;display:flex;flex-direction:column;gap:8px}
.wf-track{height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.wf-fill{height:100%;width:0;background:var(--grad);transition:width .18s linear}
.wf-meta{display:flex;justify-content:space-between;font:500 9.5px/1 var(--mono);
  letter-spacing:.08em;color:var(--fg-4);text-transform:uppercase}

/* tap-to-start veil */
.wf-veil{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;
  background:radial-gradient(120% 90% at 50% 50%,rgba(10,10,16,.86),rgba(0,0,0,.95));
  backdrop-filter:blur(2px);padding:0 26px;transition:opacity .3s var(--e);
}
.wf-veil[hidden]{display:none}
.wf-veil b{font:600 14px/1.3 var(--sans);color:var(--fg)}
.wf-veil span{font:500 10px/1.5 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3)}

/* ── motion grammar, four primitives of the twenty-eight ── */
@media(prefers-reduced-motion:no-preference){
  .wf-ico[data-mo="pulse"] svg{animation:wfPulse 1.6s var(--e-io) infinite}
  .wf-ico[data-mo="travel"] svg{animation:wfTravel 1.5s var(--e-io) infinite}
  .wf-ico[data-mo="fall"] svg{animation:wfFall 1.5s var(--e-io) infinite}
  .wf-ico[data-mo="draw"] svg{animation:wfDraw .5s var(--e) 1}
  .wf-word{animation:wfIn .13s var(--e)}
}
@keyframes wfPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes wfTravel{0%{transform:translateX(-13%)}100%{transform:translateX(13%)}}
@keyframes wfFall{0%{transform:translateY(-11%)}70%{transform:translateY(9%)}100%{transform:translateY(-11%)}}
@keyframes wfDraw{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes wfIn{from{opacity:.25}to{opacity:1}}

/* ── controls ── */
.wf-ctl{display:flex;flex-direction:column;gap:20px;width:100%;max-width:520px}
.wf-row{display:flex;flex-direction:column;gap:9px}
.wf-lab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.wf-lab em{font-style:normal;color:var(--v-lt);font-size:12px}

.wf-seg{display:flex;flex-wrap:wrap;gap:7px}
.wf-seg button{
  font:500 13px/1 var(--sans);color:var(--fg-2);
  padding:9px 14px;border-radius:999px;border:1px solid var(--bd);
  background:var(--surf);cursor:pointer;transition:.22s var(--e);
}
.wf-seg button:hover{border-color:var(--bd-3);color:var(--fg);transform:translateY(-1px)}
.wf-seg button[aria-pressed="true"]{
  background:rgba(124,92,255,.16);border-color:rgba(185,166,255,.5);color:var(--fg)}

input[type=range].wf-range{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--v) var(--p,40%),rgba(255,255,255,.12) var(--p,40%));
  cursor:pointer;
}
input[type=range].wf-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:19px;height:19px;border-radius:50%;
  background:var(--fg);border:3px solid var(--bg-2);box-shadow:0 2px 10px rgba(0,0,0,.6)}
input[type=range].wf-range::-moz-range-thumb{
  width:19px;height:19px;border:3px solid var(--bg-2);border-radius:50%;
  background:var(--fg);box-shadow:0 2px 10px rgba(0,0,0,.6)}

/* live resolver readout */
.wf-tier{
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;
  padding:16px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--bd);
}
.wf-tier dt{font:500 10px/1.5 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-4)}
.wf-tier dd{margin:0;font:500 13.5px/1.5 var(--sans);color:var(--fg-2)}
.wf-tier dd b{color:var(--fg);font-weight:600}
.wf-tier dd code{font-size:11.5px}

.wf-src{margin-top:22px}
.wf-src summary{font:500 13px/1 var(--sans);color:var(--fg-3);cursor:pointer;
  padding:11px 0;border-top:1px solid var(--bd);transition:color .2s}
.wf-src summary:hover{color:var(--fg-2)}
.wf-src p{margin:6px 0 0;font:400 15px/1.7 var(--serif);color:var(--fg-2)}