/* ---------------------------------------------------------------------------
 * Trial Lens Assortment App
 *
 * PLACEHOLDER PALETTE. Colours are a neutral professional stand-in pending the
 * CooperVision brand asset pack (spec Q13). Swap the tokens below; nothing
 * else references raw colour values.
 * ------------------------------------------------------------------------- */

:root {
  /* CooperVision green, in place of the placeholder navy. Contrast against
   * white, measured: 900 13.9:1 · 700 7.0:1 · 600 5.4:1 — all clear of AA. */
  --brand-900:#0d3320; --brand-700:#17663a; --brand-600:#1d7a45; --brand-100:#e3f1e8;
  --ink:#16232b; --ink-2:#4a5c66; --ink-3:#7b8b94;
  --bg:#f4f6f8; --surface:#fff; --line:#dfe5ea;
  --ok:#1f7a4d; --ok-bg:#e6f4ec;
  --warn:#a8500a; --warn-bg:#fdf0e3;
  --miss:#a3242b; --miss-bg:#fdeaeb;
  --radius:12px; --tap:48px;
  --shadow:0 1px 2px rgba(11,58,82,.06), 0 4px 16px rgba(11,58,82,.06);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
  padding-bottom:env(safe-area-inset-bottom);
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}

/* ---- shell ---- */
.app{max-width:820px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:20;background:var(--brand-900);color:#fff;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  display:flex;align-items:center;gap:10px;min-height:56px;
}
.topbar h1{font-size:1.02rem;font-weight:600;margin:0;flex:1;line-height:1.25}
.topbar .sub{display:block;font-weight:400;font-size:.76rem;opacity:.75;margin-top:1px}
.iconbtn{
  background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:9px;
  min-width:40px;height:40px;padding:0 11px;font-size:.85rem;font-weight:500;
}
.iconbtn:active{background:rgba(255,255,255,.26)}

main{flex:1;padding:14px 14px 118px}
.stack{display:flex;flex-direction:column;gap:12px}

/* ---- generic surfaces ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:14px}
h2{font-size:1.02rem;margin:0 0 3px}
h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:16px 0 7px}
p.hint{color:var(--ink-2);font-size:.87rem;margin:0;line-height:1.45}

.banner{
  background:var(--warn-bg);border:1px solid #f0d5b4;border-radius:10px;
  padding:10px 12px;font-size:.82rem;color:var(--warn);line-height:1.45;
}
.banner strong{font-weight:650}

/* ---- buttons ---- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:var(--tap);border:0;border-radius:11px;background:var(--brand-700);
  color:#fff;font-weight:600;font-size:.97rem;padding:0 16px;
}
.btn:active{background:var(--brand-900)}
.btn[disabled]{background:#b9c5cc;color:#f4f7f9}
.btn.secondary{background:var(--surface);color:var(--brand-700);border:1.5px solid var(--line)}
.btn.secondary:active{background:var(--brand-100)}
.btn.ghost{background:transparent;color:var(--ink-2);border:0;min-height:40px;font-weight:500}
.btn.danger{background:transparent;color:var(--miss);border:1.5px solid #ecc9cb}
.btn-row{display:flex;gap:9px}
.btn-row .btn{flex:1}

/* ---- inputs ---- */
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:.79rem;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field input,.field select{
  width:100%;min-height:var(--tap);padding:0 12px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--surface);
}
.field input:focus,.field select:focus{outline:2px solid var(--brand-600);outline-offset:-1px;border-color:transparent}

.search{position:relative;margin-bottom:10px}
.search input{width:100%;min-height:var(--tap);padding:0 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface)}

/* ---- list rows ---- */
.rowbtn{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:0;border-bottom:1px solid var(--line);
  padding:12px 14px;min-height:var(--tap);
}
.rowbtn:last-child{border-bottom:0}
.rowbtn:active{background:var(--brand-100)}
.rowbtn .grow{flex:1;min-width:0}
.rowbtn .title{font-weight:600;font-size:.95rem;display:block}
.rowbtn .meta{font-size:.8rem;color:var(--ink-3);display:block;margin-top:2px}
.rowbtn .chev{color:var(--ink-3);font-size:1.2rem;flex:none}
.list{overflow:hidden}

/* ---- checklist: dense exception rows (H2/H3) ---- */
.instr{padding:12px 14px}
.instr b{font-size:.95rem;display:block;margin-bottom:3px}
.instr u{text-underline-offset:2px}

.lensrow{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:0;border-bottom:1px solid var(--line);
  padding:0 12px 0 10px;min-height:56px;
}
.lensrow:last-child{border-bottom:0}
.lensrow:active{background:var(--brand-100)}
.lensrow-name{flex:1;min-width:0;font-weight:600;font-size:.95rem;line-height:1.25}

/* Mandatory carries a bar AND the group heading — never colour alone. */
.lensrow.is-must{border-left:4px solid var(--brand-900);padding-left:10px}
.lensrow.is-opt{border-left:4px solid var(--line);padding-left:10px}

.flag{
  flex:none;font-size:.82rem;font-weight:650;padding:7px 11px;border-radius:8px;
  border:1.5px solid var(--line);color:var(--ink-3);background:var(--surface);
  min-width:104px;text-align:center;
}
.lensrow.is-missing{background:var(--miss-bg)}
.lensrow.is-missing .lensrow-name{color:var(--miss)}
.lensrow.is-missing .flag{background:var(--miss);border-color:var(--miss);color:#fff}

/* ---- segmented scope control ---- */
.segbar{display:flex;gap:0;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.segbar button{
  flex:1;min-height:42px;border:0;background:var(--surface);
  font-weight:600;font-size:.86rem;color:var(--ink-2);
}
.segbar button[aria-pressed="true"]{background:var(--brand-900);color:#fff}

/* ---- disclosure ---- */
.adv{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.adv summary{font-weight:600;font-size:.9rem;cursor:pointer;color:var(--brand-700)}
.adv[open] summary{margin-bottom:4px}

/* ---- success ---- */
.success{text-align:center;padding:22px 16px}
.success .tick{
  width:56px;height:56px;margin:0 auto 12px;border-radius:50%;
  background:var(--ok-bg);color:var(--ok);font-size:1.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.success h2{margin-bottom:5px}

/* ---- sticky footer ---- */
.footer{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding:10px 14px calc(env(safe-area-inset-bottom) + 10px);
}
.footer-inner{max-width:820px;margin:0 auto;display:flex;align-items:center;gap:11px}
.footer .count{font-size:.78rem;color:var(--ink-2);line-height:1.25;flex:none;white-space:nowrap}
.footer .count b{display:block;font-size:1rem;color:var(--ink)}
.footer .count.compact b{font-size:.88rem}
.footer .grow{flex:1;min-width:0}
.footer .btn{flex:1;width:auto}
.footer .grow + .btn{flex:0 0 auto;width:auto;min-width:128px}

.progress{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:9px}
.progress i{display:block;height:100%;background:var(--brand-600);transition:width .18s ease}

/* ---- basket ---- */
.bline{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line)}
.bline:last-child{border-bottom:0}
.bline.off{background:var(--warn-bg)}
.bline .grow{flex:1;min-width:0}
.bline .title{font-weight:600;font-size:.93rem;display:block;line-height:1.3}
.bline .meta{font-size:.76rem;color:var(--ink-3);display:block;margin-top:2px;font-variant-numeric:tabular-nums}
.qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;flex:none}
.qty button{width:40px;height:40px;border:0;background:var(--surface);font-size:1.15rem;font-weight:600;color:var(--brand-700)}
.qty button:active{background:var(--brand-100)}
.qty span{min-width:34px;text-align:center;font-weight:650;font-variant-numeric:tabular-nums}
.remove{border:0;background:transparent;color:var(--ink-3);font-size:1.15rem;width:34px;height:40px;flex:none}
.remove:active{color:var(--miss)}

.empty{text-align:center;padding:34px 18px;color:var(--ink-3)}
.empty .big{font-size:2rem;margin-bottom:8px}

/* ---- summary / preview ---- */
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.89rem}
.kv:last-child{border-bottom:0}
.kv dt{color:var(--ink-2);flex:none}
.kv dd{margin:0;font-weight:600;text-align:right;word-break:break-word}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;font-size:.76rem;white-space:nowrap}
th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}
th{background:var(--bg);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);position:sticky;top:0}
td.filled{font-weight:650;color:var(--ink);background:var(--ok-bg)}
td.tbc{color:var(--warn);background:var(--warn-bg);font-weight:650}
td.blank{color:#c3ccd2}

.pill{display:inline-block;font-size:.72rem;font-weight:650;padding:3px 8px;border-radius:20px}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.miss{background:var(--miss-bg);color:var(--miss)}
.pill.neutral{background:var(--bg);color:var(--ink-3);border:1px solid var(--line)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px;text-align:center}
.stat b{display:block;font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:.71rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}

.proto{
  text-align:center;font-size:.73rem;color:var(--ink-3);padding:18px 14px 6px;line-height:1.5;
}

@media (min-width:700px){
  main{padding:20px 20px 96px}
  .stats{gap:12px}
}

/* ---- order lines: fit set vs individual lenses ---- */
.oline{padding:12px 14px;border-bottom:1px solid var(--line)}
.oline:last-child{border-bottom:0}
.oline.off{background:var(--warn-bg)}
.oline-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.oline-head .grow{flex:1;min-width:0}
.oline-head .title{font-weight:600;font-size:.95rem;display:block;line-height:1.3}
.oline-head .meta{font-size:.76rem;color:var(--ink-3);display:block;margin-top:2px}
.oline-qty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}

/* Stacked selectable rows — clearer than a segmented control when each
 * option needs a line of explanation. */
.optrows{border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.optrows button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:0;border-bottom:1px solid var(--line);background:var(--surface);
  padding:11px 12px;min-height:56px;
}
.optrows button:last-child{border-bottom:0}
.optrows button[aria-pressed="true"]{background:var(--brand-100)}
.optrows .dot{
  flex:none;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line);background:var(--surface);
}
.optrows button[aria-pressed="true"] .dot{
  border-color:var(--brand-700);box-shadow:inset 0 0 0 4px var(--brand-700);
}
.optrows b{display:block;font-size:.9rem;font-weight:650;line-height:1.25}
.optrows i{display:block;font-style:normal;font-size:.76rem;color:var(--ink-3);margin-top:2px;line-height:1.3}

.btn.sm{min-height:42px;font-size:.88rem;margin-top:10px}
.segbar.sm button{min-height:38px;font-size:.82rem}

.powers{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.powerchip{
  font-size:.78rem;font-weight:600;padding:5px 9px;border-radius:7px;
  background:var(--brand-100);color:var(--brand-900);font-variant-numeric:tabular-nums;
}
.powerchip b{font-weight:700}

/* Power grid — the parameter step, adapted from the consumer PDP pattern. */
.powergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px}
.pw{
  min-height:44px;border:1.5px solid var(--line);border-radius:9px;
  background:var(--surface);font-weight:600;font-size:.86rem;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.pw:active{background:var(--brand-100)}
.pw.on{background:var(--brand-900);border-color:var(--brand-900);color:#fff}

/* ---- brand ---- */
.signin{display:flex;flex-direction:column;justify-content:center;min-height:100dvh;padding:24px 16px}
.brand{text-align:center;margin-bottom:18px}
.brand img{width:132px;height:auto;display:inline-block}
.topbar .mark{
  width:30px;height:30px;flex:none;border-radius:6px;background:#fff;padding:3px;
}

/* ---- email preview ---- */
.mailprev{margin-top:10px}
.mailprev b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:4px}
.mailprev p{margin:0;font-size:.88rem;font-weight:600;line-height:1.35;word-break:break-word}
.mailprev pre{
  margin:0;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  font-size:.74rem;line-height:1.45;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2);
}

/* ===========================================================================
 * ENTRY SCREENS — monochromatic
 *
 * One hue does all the work. Every value below is drawn from the CooperVision
 * mark itself (its greens run #0f4e2b → #369942 → #c3da46), so depth, separation
 * and emphasis come from tone rather than from adding colours.
 *
 * The mark is the only fully saturated thing on the screen until the moment of
 * decision, when the button takes on that saturation. Scoped to .gate — the
 * working app stays light, so entering it feels like stepping into daylight.
 * ========================================================================= */

.gate {
  --g-void:#050d09; --g-deep:#0a1811; --g-surface:#0e2117; --g-raised:#12291d;
  --g-line:#1b3a28; --g-line-lit:#27553a;
  /* Measured on the entry background: dim 7.1:1 · mid 10.6:1 · high 15.6:1 */
  --g-dim:#8aa899; --g-mid:#a8c2b4; --g-high:#e4f0e8;
  --g-foot:#7d9a8a; --g-placeholder:#749686;
  --g-live:#3fa14a; --g-live-lit:#4cbb56;

  position:fixed; inset:0; overflow-y:auto;
  background:var(--g-void);
  /* Light gathering behind the mark — the field opening up, not a decoration. */
  background-image:
    radial-gradient(120% 65% at 50% 0%, #14311f 0%, #0a1811 45%, var(--g-void) 78%);
  color:var(--g-mid);
  display:flex; align-items:center; justify-content:center;
  padding:48px 24px calc(48px + env(safe-area-inset-bottom));
}

.gate-inner{width:100%;max-width:340px;text-align:center}

/* Each element surfaces from the field rather than sliding in. */
.gate-mark, .gate-lede, .gate-form, .gate-foot { animation:gate-rise .9s cubic-bezier(.16,.7,.3,1) both; }
.gate-lede{animation-delay:.10s}
.gate-form{animation-delay:.20s}
.gate-foot{animation-delay:.32s}
@keyframes gate-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.gate-mark{margin-bottom:34px}
.gate-mark img{width:118px;height:auto;display:inline-block}

.gate-lede{margin-bottom:38px}
.gate-lede h1{
  font-size:2rem; line-height:1.1; font-weight:600; letter-spacing:-.02em;
  color:var(--g-high); margin:0 0 12px;
}
.gate-lede p{margin:0;font-size:.92rem;line-height:1.55;color:var(--g-mid)}

.gate-form{margin-bottom:40px}
.gate-field{display:block;text-align:left;margin-bottom:14px}
.gate-field span{
  display:block;font-size:.82rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--g-dim);margin-bottom:9px;
}
.gate-field input, .gate-field select{
  width:100%;min-height:54px;padding:0 16px;
  background:var(--g-surface);color:var(--g-high);
  border:1px solid var(--g-line);border-radius:10px;
  font-size:1rem;letter-spacing:.02em;
  transition:border-color .35s ease, background-color .35s ease;
}
.gate-field select{appearance:none;background-image:none}
.gate-field input::placeholder{color:var(--g-placeholder);letter-spacing:.2em}
.gate-field input:focus, .gate-field select:focus{
  outline:none;border-color:var(--g-line-lit);background:var(--g-raised);
}
.gate-field input:disabled{opacity:.5}

/* The one saturated note, at the point of decision. */
.gate-btn{
  width:100%;min-height:54px;border:0;border-radius:10px;
  background:var(--g-live);color:#03170b;
  font-size:1rem;font-weight:650;letter-spacing:.01em;
  transition:background-color .35s ease, opacity .35s ease;
}
.gate-btn:hover{background:var(--g-live-lit)}
.gate-btn:active{background:#369942}
.gate-btn:disabled{background:var(--g-line-lit);color:var(--g-dim)}

.gate-error{
  margin:0 0 14px;font-size:.87rem;line-height:1.5;color:#e8a19c;
  border-left:2px solid #7d3a36;padding-left:11px;text-align:left;
}

.gate-foot{
  margin:0;font-size:.78rem;line-height:1.7;color:var(--g-foot);letter-spacing:.01em;
}

@media (prefers-reduced-motion:reduce){
  .gate-mark,.gate-lede,.gate-form,.gate-foot{animation:none}
}