/* ==========================================================================
   EITRI — the brief wizard

   One question per screen. Mobile is the base: the question sits at the top,
   the answers fill the middle, and the controls are pinned to the bottom of
   the viewport where a thumb already is.

   Nothing here invents a colour, a radius or a font. Every value is a token
   from system.css; this file is layout and state only.
   ========================================================================== */

.wiz{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  /* The footer is fixed on the phone, so the scrolling area needs to end
     above it or the last option is unreachable. */
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------- progress -- */
.wiz-bar{
  position:sticky;top:0;z-index:20;
  background:rgba(10,10,12,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:10px var(--gut);
}
.wiz-bar-in{
  max-width:var(--col);margin-inline:auto;
  display:flex;align-items:center;gap:12px;
}
.wiz-count{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;
}
.wiz-track{
  flex:1;height:3px;border-radius:2px;
  background:var(--panel-3);
  overflow:hidden;
}
.wiz-fill{
  height:100%;
  width:calc(var(--pct,0) * 1%);
  background:linear-gradient(90deg,var(--orange-press),var(--orange));
  transition:width .5s var(--enter);
}

/* ----------------------------------------------------------------- step -- */
.wiz-main{flex:1;width:100%;max-width:var(--col);margin-inline:auto;padding:0 var(--gut)}

.wiz-step{padding-block:clamp(1.5rem,6vw,3rem)}
.wiz-step[hidden]{display:none}

.wiz-q{
  font-size:clamp(1.5rem,1.15rem+2.2vw,2.4rem);
  font-weight:900;letter-spacing:-.03em;line-height:1.05;
  margin:0;
}
.wiz-help{color:var(--text-2);margin-top:10px;max-width:52ch}

/* Entrance. Each step animates in on its own, so moving forward feels like
   moving, not like a form redrawing. */
.wiz-step.is-live>*{
  opacity:0;transform:translate3d(0,10px,0);
  animation:wiz-in .5s var(--enter) forwards;
}
.wiz-step.is-live>*:nth-child(1){animation-delay:.02s}
.wiz-step.is-live>*:nth-child(2){animation-delay:.08s}
.wiz-step.is-live>*:nth-child(3){animation-delay:.14s}
.wiz-step.is-live>*:nth-child(4){animation-delay:.2s}
@keyframes wiz-in{to{opacity:1;transform:none}}

/* -------------------------------------------------------------- choices -- */
.opts{
  display:grid;gap:10px;
  margin-top:clamp(1.25rem,4vw,2rem);
  grid-template-columns:1fr;
}
@media (min-width:620px){ .opts{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .opts.is-wide{grid-template-columns:repeat(3,1fr)} }

.opt{
  position:relative;
  display:flex;flex-direction:column;gap:3px;
  text-align:left;
  padding:15px 46px 15px 16px;
  border:1px solid var(--line-2);
  border-radius:var(--r-tile);
  background:var(--panel);
  transition:border-color var(--hover),background var(--hover),transform .18s var(--enter);
}
.opt:hover{border-color:var(--text-3)}
.opt:active{transform:scale(.99)}
.opt b{font-weight:700;letter-spacing:-.01em}
.opt span{font-size:13px;color:var(--text-2)}

/* The tick. Drawn with borders so it needs no asset and inherits the accent. */
.opt::after{
  content:"";
  position:absolute;right:16px;top:50%;
  width:18px;height:18px;margin-top:-9px;
  border:1px solid var(--line-2);border-radius:50%;
  transition:border-color var(--hover),background var(--hover);
}
.opt[aria-pressed="true"]{border-color:var(--orange);background:var(--orange-dim)}
.opt[aria-pressed="true"]::after{
  border-color:var(--orange);
  background:
    linear-gradient(45deg,transparent 44%,var(--on-signal) 44% 56%,transparent 56%) no-repeat,
    var(--orange);
}

/* ---------------------------------------------------------------- fields -- */
.wiz-field{margin-top:clamp(1.25rem,4vw,2rem);max-width:520px}
.wiz-field input,.wiz-field textarea{
  width:100%;
  padding:14px 15px;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--r-tile);
  color:var(--text);
  /* 16px minimum, or iOS Safari zooms the page on focus. */
  font-size:16px;
}
.wiz-field textarea{min-height:150px;resize:vertical;line-height:1.6}
.wiz-field input:focus,.wiz-field textarea:focus{outline:2px solid var(--orange-focus);outline-offset:1px}
.wiz-unit{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin-top:9px;
}
.wiz-err{color:var(--red);font-size:13.5px;margin-top:9px}
.wiz-err[hidden]{display:none}

/* --------------------------------------------------------- recommendation -- */
.rec{
  margin-top:clamp(1.25rem,4vw,2rem);
  border:1px solid var(--orange-dim);
  border-left:2px solid var(--orange);
  border-radius:var(--r-card);
  background:var(--orange-dim);
  padding:16px;
}
.rec-h{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);
}
.rec ul{margin:10px 0 0;padding-left:17px;display:grid;gap:6px}
.rec li{font-size:14px;color:var(--text-2)}

/* Scoped through .opt on purpose: this badge IS a <span> inside .opt, and the
   `.opt span` rule above is one point more specific. Without the parent in the
   selector the badge renders --text-2 grey on orange — 1.9:1, unreadable. */
.opt .opt-rec{
  position:absolute;top:-9px;left:14px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-signal);background:var(--orange);
  border-radius:var(--r-pill);padding:2px 8px;
}

/* ---------------------------------------------------------------- review -- */
.rev{margin-top:clamp(1.25rem,4vw,2rem);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.rev-row{
  display:flex;justify-content:space-between;gap:16px;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
}
.rev-row:last-child{border-bottom:0}
.rev-row dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);flex:0 0 auto;padding-top:2px;
}
.rev-row dd{margin:0;text-align:right;font-weight:600}
.rev-row button{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);border-bottom:1px solid var(--line-2);
}
.rev-row button:hover{color:var(--text);border-color:var(--orange)}

/* ------------------------------------------------------------------ foot -- */
.wiz-foot{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:center;gap:10px;
  padding:12px var(--gut);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,10,12,.9);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.wiz-foot-in{
  width:100%;max-width:var(--col);margin-inline:auto;
  display:flex;align-items:center;gap:10px;
}
.wiz-foot .btn-primary{margin-left:auto}
.wiz-save{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);
}

/* ------------------------------------------------------------------ done -- */
.done-ref{
  font-family:var(--mono);font-size:clamp(1.1rem,.9rem+1.4vw,1.6rem);
  letter-spacing:.06em;color:var(--orange);
}
.terms{margin:14px 0 0;padding-left:18px;display:grid;gap:7px}
.terms li{color:var(--text-2);font-size:14.5px}

@media (prefers-reduced-motion:reduce){
  .wiz-step.is-live>*{opacity:1;transform:none;animation:none}
  .wiz-fill{transition:none}
}

/* Who the order is for, on the review screen. Only shown when nobody is
   signed in — signing in is no longer required to place an order, so this is
   the ordinary path rather than a fallback, and it is styled like one. */
.wiz-who{
  border:1px solid var(--line-2);
  border-radius:var(--r-card);
  background:var(--panel-2);
  padding:16px;
  margin-top:18px;
  display:grid;
  gap:12px;
}
.wiz-who .rec-h{margin:0}
.wiz-who .wiz-field{margin:0}
.wiz-who label.wiz-unit{display:block;margin-bottom:6px}