/* iMobile calculator v2 (shared engine styles). Scoped to .icalc */
/* Font: inherits --font from /components/shared.css. No @import here, it would delay calc.js. */

.icalc{
  /* All colour comes from the global tokens in /components/shared.css.
     --accent follows the page's data-intent. */
  --g:var(--accent);--g2:var(--accent-ink);--gbg:var(--accent-wash);
  --navy:var(--ink);--navy2:rgba(255,255,255,.18);
  --text:var(--ink);
  --bdr:var(--divider);--card:var(--page-2);--white:var(--card);
  --amber:var(--quote);--cyan:var(--teal);
  --blue:var(--ink);--blue-bg:var(--page-2);
  font-family:var(--font);color:var(--text);
  -webkit-font-smoothing:antialiased;
  width:100%;max-width:600px;margin:0 auto;
  background:var(--white);
}
.icalc *,.icalc *::before,.icalc *::after{box-sizing:border-box;margin:0;padding:0}
@media(min-width:640px){
  .icalc{border:1px solid var(--bdr);border-radius:20px;box-shadow:0 4px 32px rgba(0,0,0,.07);overflow:hidden}
}

/* Header + progress */
.ic-hdr{background:var(--navy);padding:.9rem 1.25rem .75rem}
.ic-hdr-title{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.ic-hdr-sub{font-size:.7rem;color:var(--sub);margin-top:.15rem}
.ic-prog{height:4px;background:var(--navy2)}
.ic-prog-fill{height:100%;background:var(--g);width:0;transition:width .3s ease}

/* Step header */
.ic-sthdr{padding:.7rem 1.25rem .6rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:.6rem;min-height:56px}
.ic-sthdr-text{min-width:0}
.ic-stnum{width:23px;height:23px;border-radius:50%;background:var(--g);color:#fff;font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ic-sttitle{font-size:.92rem;font-weight:800;color:var(--text)}
.ic-stsub{font-size:.7rem;color:var(--muted);margin-top:1px}
.ic-body{padding:1rem 1.25rem 1.1rem}
/* Stable floor for the card. Without it the card collapses to a sliver on the
   short steps (the storage row is only ~78px of content) and everything below
   jumps up the page. Scoped to a step's body so the dark header and the step
   header stay put, and so the /offer/<code> page, which uses .ic-body outside
   .ic-step, is not padded out. No max-height: the model grid and the condition
   cards grow past this normally. Values picked by measuring the real steps,
   smaller on phones where the card is edge to edge and a gap reads larger. */
.icalc .ic-step > .ic-body{min-height:190px}
@media(min-width:640px){.icalc .ic-step > .ic-body{min-height:230px}}

/* The default (?grid=series) card floor. One family at a time makes the model
   step short, so the card holds one height across model, storage and SIM
   instead of dropping to a sliver. The base floor above still applies to the
   ?grid=scroll and ?grid=full rollback paths. Floors are the measured model step: 446px at 390 wide, 354px at
   1280, rounded up. Condition and result still grow past this.
   Flooring to the result step instead (636px) would sit 560px of white under
   four storage pills, so the anchor is the model step, not the tallest step. */
.icalc[data-grid="series"] .ic-step > .ic-body{min-height:460px}
@media(min-width:640px){.icalc[data-grid="series"] .ic-step > .ic-body{min-height:370px}}
.ic-step{animation:icIn .22s ease}
.ic-step.ic-quiet{animation:none}
@keyframes icIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* Model grid */
.ic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}

/* Model step layouts. ?grid=series is the default (see GRID_MODE in calc.js);
   ?grid=scroll and ?grid=full are the rollback paths. */
/* ?grid=scroll : about three rows, the rest scrolls inside the card */
.ic-grid-cap{max-height:396px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:.25rem;
  scrollbar-width:thin;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent 100%)}
.ic-grid-cap::-webkit-scrollbar{width:6px}
.ic-grid-cap::-webkit-scrollbar-thumb{background:var(--divider);border-radius:3px}
.ic-grid-more{font-size:.68rem;font-weight:600;color:var(--muted);text-align:center;padding-top:.5rem}
@media(min-width:640px){.ic-grid-cap{max-height:432px}}

/* ?grid=series (default) : one family at a time behind a chip row */
.ic-series{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem}
.ic-series-chip{font-family:var(--font);font-size:.74rem;font-weight:700;line-height:1;color:var(--sub);
  background:var(--card);border:1.5px solid var(--bdr);border-radius:50px;padding:.5rem .7rem;cursor:pointer;
  min-height:34px;transition:all .15s;-webkit-tap-highlight-color:transparent}
.ic-series-chip:hover{border-color:var(--divider)}
.ic-series-chip.sel{background:var(--g);border-color:var(--g);color:#fff}
@media(min-width:480px){.ic-grid{grid-template-columns:repeat(4,1fr)}}
.ic-model{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .35rem .6rem;border:1.5px solid var(--bdr);border-radius:12px;background:var(--white);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;font-family:var(--font);width:100%}
.ic-model:active{transform:scale(.95)}
.ic-model:hover,.ic-model.sel{border-color:var(--g);background:var(--gbg);box-shadow:0 0 0 1px var(--g)}
.ic-model-img{width:100%;height:72px;object-fit:contain;object-position:bottom}
.ic-model-icon{width:100%;height:72px;display:flex;align-items:flex-end;justify-content:center;color:var(--sub)}
.ic-model-icon svg{height:62px;width:auto}
.ic-model-name{font-size:.64rem;font-weight:700;color:var(--text);text-align:center;line-height:1.25}

/* Pills */
.ic-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.ic-pill{padding:.55rem 1.1rem;border-radius:50px;border:1.5px solid var(--bdr);background:var(--card);color:var(--sub);font-family:var(--font);font-size:.88rem;font-weight:600;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;min-height:44px}
.ic-pill:active{transform:scale(.96)}
.ic-pill:hover{border-color:var(--g);color:var(--g);background:var(--gbg)}
.ic-pill.sel{border-color:var(--g);background:var(--g);color:#fff;box-shadow:0 2px 8px rgba(58,125,30,.25)}

/* Lock buttons */
.ic-locks{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.ic-lock{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.8rem .9rem;border:1.5px solid var(--bdr);border-radius:12px;background:var(--white);cursor:pointer;font-family:var(--font);text-align:left;transition:all .15s;min-height:56px;-webkit-tap-highlight-color:transparent}
.ic-lock:hover,.ic-lock.sel{border-color:var(--g);background:var(--gbg);box-shadow:0 0 0 1px var(--g)}
.ic-lock-label{font-size:.88rem;font-weight:800;color:var(--text)}
.ic-lock-sub{font-size:.68rem;color:var(--muted)}

/* Condition cards (same design as /sell/iphone) */
.ic-conds{display:flex;flex-direction:column;gap:.55rem}
.ic-cond{display:flex;align-items:flex-start;gap:.85rem;padding:.9rem 1rem;border:1.5px solid var(--bdr);border-radius:12px;background:var(--white);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;text-align:left;font-family:var(--font);width:100%}
.ic-cond:active{transform:scale(.99)}
.ic-cond:hover,.ic-cond.sel{border-color:var(--g);background:var(--gbg);box-shadow:0 0 0 1px var(--g)}
.ic-cond.is-new:hover,.ic-cond.is-new.sel{border-color:var(--blue);background:var(--blue-bg);box-shadow:0 0 0 1px var(--blue)}
.ic-radio{width:18px;height:18px;border:2px solid var(--bdr);border-radius:50%;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ic-cond.sel .ic-radio{border-color:var(--g);background:var(--g)}
.ic-cond.is-new.sel .ic-radio{border-color:var(--blue);background:var(--blue)}
.ic-cond.sel .ic-radio::after{content:'';width:6px;height:6px;background:var(--card);border-radius:50%}
.ic-cond-main{flex:1;min-width:0}
.ic-cond-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
.ic-cond-title{font-size:.88rem;font-weight:800;color:var(--text);margin-bottom:2px}
.ic-cond-price{font-size:1.15rem;font-weight:900;color:var(--text);white-space:nowrap;letter-spacing:-.02em;line-height:1.1}
.ic-cond-price.na{font-size:.72rem;font-weight:700;color:var(--muted);text-align:right;max-width:7rem;white-space:normal}
.ic-cond-grade{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.3rem}
.cg-new{color:var(--blue)}.cg-a{color:var(--g)}.cg-b{color:var(--cyan)}.cg-c{color:var(--amber)}
.ic-cond-desc{font-size:.77rem;color:var(--sub);line-height:1.5;margin-bottom:.2rem}
.ic-cond-note{display:inline-block;font-size:.64rem;font-weight:700;color:var(--blue);background:var(--blue-bg);border-radius:20px;padding:2px 8px;margin:.15rem 0 .1rem}
.ic-req{list-style:none;display:flex;flex-direction:column;gap:.2rem;margin-top:.3rem}
.ic-req li{font-size:.71rem;color:var(--sub);display:flex;gap:.35rem;align-items:flex-start;line-height:1.4}
.ic-req li::before{content:'✓';color:var(--g);font-weight:700;font-size:.68rem;flex-shrink:0;margin-top:1px}
.ic-cond-foot{font-size:.74rem;color:var(--muted);text-align:center;margin-top:.8rem;line-height:1.5}

/* Price loading skeleton + failure notice */
.ic-skel{display:inline-block;width:3.4rem;height:1.15rem;border-radius:6px;vertical-align:middle;background:linear-gradient(90deg,var(--divider) 25%,var(--page-2) 50%,var(--divider) 75%);background-size:200% 100%;animation:icShimmer 1.2s ease-in-out infinite}
.ic-skel-lg{width:9rem;height:3rem;border-radius:10px;background:linear-gradient(90deg,var(--page-2) 25%,var(--divider) 50%,var(--page-2) 75%);background-size:200% 100%}
@keyframes icShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.ic-skel{animation:none}.ic-step{animation:none}}
.ic-alert{font-size:.8rem;line-height:1.5;color:var(--quote);background:var(--page-2);border:1px solid var(--divider);border-radius:10px;padding:.65rem .85rem;margin-bottom:.7rem}
.ic-alert a{color:var(--quote);font-weight:800;white-space:nowrap}

/* Result: white quote card */
.ic-quote{background:var(--white);border:1.5px solid var(--bdr);border-radius:16px;padding:1.1rem 1.1rem 1.2rem;box-shadow:0 2px 14px rgba(15,25,35,.05)}
.ic-specs{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;margin:0}
.ic-spec{min-width:0}
.ic-spec:first-child,.ic-spec:nth-child(4){grid-column:1/-1}
.ic-spec dt{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ic-spec dd{margin:0;font-size:.9rem;font-weight:700;color:var(--text);line-height:1.3;overflow-wrap:anywhere}
.ic-spec:first-child dd{font-size:1.05rem;font-weight:800}
.ic-q-label{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--bdr)}
.ic-q-price{font-size:3.2rem;font-weight:900;letter-spacing:-.04em;line-height:1.05;color:var(--text);margin:.15rem 0 .1rem}
.ic-q-price.na{font-size:1.4rem;letter-spacing:-.02em;margin:.35rem 0}
.ic-skel-q{width:8.5rem;height:2.8rem;border-radius:10px}
.ic-q-note{display:inline-block;font-size:.66rem;font-weight:700;color:var(--blue);background:var(--blue-bg);border-radius:20px;padding:2px 9px;margin-top:.2rem}
.ic-q-valid{font-size:.8rem;font-weight:600;color:var(--g);margin-top:.3rem}
.ic-q-fail{font-size:.9rem;font-weight:600;line-height:1.5;color:var(--quote);background:var(--page-2);border:1px solid var(--divider);border-radius:10px;padding:.65rem .85rem;margin-top:.4rem}
.ic-q-fail a{color:var(--quote);font-weight:800;white-space:nowrap}
.ic-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1rem;border-radius:12px;font-family:var(--font);font-size:.95rem;font-weight:800;text-decoration:none;transition:all .15s;width:100%}
.ic-btn-g{background:var(--g);color:#fff}
.ic-btn-g:hover{background:var(--g2)}

/* Lock this price */
.ic-lockform{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bdr);text-align:left}
.ic-lock-lbl{display:block;font-size:.74rem;font-weight:700;color:var(--sub);margin-bottom:.35rem}
.ic-email{display:block;width:100%;min-height:48px;padding:0 .85rem;border-radius:10px;border:1.5px solid var(--bdr);background:var(--card);color:var(--text);font-family:var(--font);font-size:16px}
.ic-email:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px var(--accent-wash)}
.ic-email:disabled{opacity:.7}
.ic-agree{display:flex;align-items:flex-start;gap:.55rem;margin:.75rem 0 .85rem;font-size:.76rem;line-height:1.45;color:var(--sub);cursor:pointer}
.ic-agree input{width:18px;height:18px;margin-top:1px;flex-shrink:0;accent-color:var(--g)}
.ic-agree a{color:var(--g);font-weight:700}
.ic-lock-btn{display:block;width:100%;min-height:50px;border-radius:12px;border:none;background:var(--g);color:#fff;font-family:var(--font);font-size:1rem;font-weight:800;cursor:pointer;transition:background .15s}
.ic-lock-btn:hover{background:var(--g2)}
.ic-lock-btn:disabled{background:var(--muted);cursor:not-allowed}
.ic-lock-btn.is-busy{background:var(--g2);color:#fff;opacity:1}
.ic-lock-btn.is-busy::before{content:'';display:inline-block;width:15px;height:15px;margin-right:.5rem;vertical-align:-2px;border:2px solid rgba(255,255,255,.45);border-top-color:var(--divider);border-radius:50%;animation:icSpin .7s linear infinite}
@media(prefers-reduced-motion:reduce){.ic-lock-btn.is-busy::before{animation:none}}
.ic-lock-msg{font-size:.78rem;font-weight:600;margin-top:.5rem;min-height:1em}
.ic-lock-msg.err{color:#b91c1c}
.ic-lock-msg.ic-suggest{color:var(--text);font-size:.85rem;line-height:1.5;overflow-wrap:anywhere}
.ic-suggest-yes{background:none;border:none;padding:.7rem .15rem;margin:-.55rem 0;color:var(--g);font-family:var(--font);font-size:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px;cursor:pointer;overflow-wrap:anywhere}
.ic-suggest-keep{display:block;min-height:44px;background:none;border:none;padding:.45rem 0 .1rem;margin:0;color:var(--muted);font-family:var(--font);font-size:.74rem;font-weight:600;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.ic-suggest-yes:focus-visible,.ic-suggest-keep:focus-visible{outline:2px solid var(--g);outline-offset:2px;border-radius:4px}
.ic-fine{font-size:.68rem;color:var(--muted);text-align:center;margin-top:.7rem;line-height:1.5}
.ic-restart{display:block;margin:.6rem auto 0;background:none;border:none;color:var(--g);font-family:var(--font);font-size:.8rem;font-weight:700;cursor:pointer;padding:.5rem}

/* Offer confirmation (after lock, and /offer/<code>) */
.ic-stnum-ok{font-size:.8rem}
.ic-offer{position:relative;background:var(--white);border:1.5px solid var(--bdr);border-radius:16px;padding:1.2rem 1.1rem;box-shadow:0 2px 14px rgba(15,25,35,.05)}
.ic-offer-label{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ic-offer-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;font-size:2.3rem;font-weight:800;letter-spacing:.06em;color:var(--text);line-height:1.15;margin:.1rem 0 .95rem;overflow-wrap:anywhere}
.ic-offer-price{font-size:2.6rem;font-weight:900;letter-spacing:-.04em;line-height:1.05;color:var(--text);margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--bdr)}
.ic-offer-until{font-size:.85rem;font-weight:700;color:var(--g);margin:.3rem 0 1rem}
.ic-offer-msg{font-size:.9rem;font-weight:700;color:var(--quote);background:var(--page-2);border:1px solid var(--divider);border-radius:10px;padding:.6rem .8rem;margin:0 0 .9rem}
.ic-offer-msg a{color:var(--quote)}
.ic-offer-inactive .ic-specs,.ic-offer-inactive .ic-offer-price,.ic-offer-expired .ic-specs,.ic-offer-expired .ic-offer-price{opacity:.55}
.ic-offer-paid .ic-offer-code,.ic-offer-paid .ic-offer-price{color:var(--muted)}
.ic-badge{position:absolute;top:1rem;right:1rem;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:3px 10px}
.ic-badge-paid{background:var(--divider);color:var(--sub)}
.ic-hours{font-size:.8rem;color:var(--sub);text-align:center;margin-top:.75rem}
.ic-hours a,.ic-save a{color:var(--g);font-weight:700}
.ic-save{font-size:.74rem;color:var(--muted);text-align:center;margin-top:.45rem;overflow-wrap:anywhere}

/* Back row + states */
.ic-back{display:inline-flex;align-items:center;gap:.25rem;padding:0 .7rem;border-radius:8px;border:1.5px solid var(--bdr);background:var(--white);color:var(--sub);font-family:var(--font);font-size:.76rem;font-weight:700;cursor:pointer;min-height:36px;flex-shrink:0;white-space:nowrap}
.ic-back:hover{border-color:var(--text);color:var(--text)}
.ic-state{padding:2.2rem 1.25rem;text-align:center;font-size:.86rem;color:var(--muted);line-height:1.6}
.ic-state a{color:var(--g);font-weight:700}
.ic-spin{display:inline-block;width:22px;height:22px;border:3px solid var(--bdr);border-top-color:var(--g);border-radius:50%;animation:icSpin .8s linear infinite;margin-bottom:.6rem}
@keyframes icSpin{to{transform:rotate(360deg)}}