/* HL decision tool — shared styling.
 * Lifted verbatim from the q367 page so the CARD stays pixel-identical: the
 * large photo, the 56px tap targets and the 390px-first layout are what make
 * the tool work, and they were not up for redesign.
 * Everything under "added for batches" is new chrome AROUND that card.
 */
@font-face{font-family:'EB Garamond';src:url('/f/garamond.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('/f/jost.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --ivory:#F4EFE7; --stone:#D9CFC2; --espresso:#26211C; --gold:#A88A5E;
  --ivory-2:#FBF8F3; --stone-soft:#EAE3D9;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ivory); color:var(--espresso);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}

/* ---------- top bar ---------- */
.top{
  position:sticky; top:0; z-index:20;
  background:var(--ivory-2); border-bottom:1px solid var(--stone);
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-top,0)) 1rem;
  padding-top:calc(.7rem + env(safe-area-inset-top,0));
}
.brand{font-family:var(--serif);font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase}
.instruction{font-size:.92rem;margin:.25rem 0 0;color:#4A423A}
.progress{display:flex;align-items:center;gap:.6rem;margin-top:.55rem}
.bar{flex:1;height:5px;background:var(--stone);border-radius:99px;overflow:hidden}
.bar > i{display:block;height:100%;width:0%;background:var(--gold);transition:width .25s ease}
.count{font-size:.8rem;letter-spacing:.08em;white-space:nowrap;color:#5A5148}

/* ---------- section headers ---------- */
.sec{padding:1.6rem 1rem .4rem}
.sec h2{font-family:var(--serif);font-size:1.6rem;font-weight:400;margin:0}
.sec p{font-size:.9rem;margin:.3rem 0 0;color:#4A423A}

/* ---------- card ---------- */
.card{
  background:var(--ivory-2); margin:1rem;
  border:1px solid var(--stone); border-radius:2px;
  overflow:hidden;
}
.card.done{border-color:var(--gold)}
.photo{position:relative;background:var(--stone-soft);aspect-ratio:3/4}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .noimg{display:flex;height:100%;align-items:center;justify-content:center;
  font-size:.85rem;color:#6B6157;text-align:center;padding:2rem}
.badge{
  position:absolute;top:.6rem;left:.6rem;
  background:rgba(38,33,28,.86);color:var(--ivory);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.32rem .55rem;border-radius:2px;
}
.body{padding:.9rem 1rem 1rem}
.title{font-family:var(--serif);font-size:1.24rem;line-height:1.25;margin:0}
.price{font-size:1rem;margin:.35rem 0 0;letter-spacing:.02em}
.price s{color:#8A8078;margin-left:.4rem;font-size:.9em}
.meta{font-size:.86rem;margin:.6rem 0 0;color:#4A423A}
.meta b{font-weight:400;color:var(--espresso)}
.note{
  font-size:.86rem;margin:.7rem 0 0;padding:.6rem .7rem;
  background:var(--ivory);border-left:2px solid var(--gold);color:#4A423A;
}
.pairs{font-size:.82rem;margin:.5rem 0 0;color:#5A5148}

/* ---------- tap targets ---------- */
.opts{display:grid;gap:.55rem;margin-top:1rem}
.opt{
  min-height:56px; display:flex; flex-direction:column; justify-content:center;
  gap:.1rem; text-align:left; padding:.7rem 1rem;
  background:var(--ivory); border:1.5px solid var(--stone);
  border-radius:2px; cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.opt strong{font-size:.98rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.opt span{font-size:.8rem;color:#6B6157}
.opt[aria-pressed="true"]{background:var(--espresso);border-color:var(--espresso);color:var(--ivory)}
.opt[aria-pressed="true"] span{color:var(--stone)}
.opt:active{border-color:var(--gold)}

/* ---------- results ---------- */
.tools{padding:1.2rem 1rem 3rem;display:grid;gap:.6rem}
.linkbtn{
  min-height:52px;display:flex;align-items:center;justify-content:center;
  background:var(--ivory-2);border:1.5px solid var(--espresso);border-radius:2px;
  font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--espresso);cursor:pointer;
}
#results{
  margin:0 1rem 2rem;padding:1rem;background:var(--ivory-2);
  border:1px solid var(--stone);font-size:.86rem;
}
#results table{width:100%;border-collapse:collapse}
#results td{padding:.32rem 0;border-bottom:1px solid var(--stone-soft);vertical-align:top}
#results td:last-child{text-align:right;white-space:nowrap;letter-spacing:.06em}
#results h3{font-family:var(--serif);font-weight:400;margin:.2rem 0 .6rem;font-size:1.15rem}
.saving{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);
  background:var(--espresso);color:var(--ivory);padding:.5rem 1rem;border-radius:99px;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:0;
  transition:opacity .2s;pointer-events:none;z-index:30}
.saving.on{opacity:1}
.err{background:#7A2E24;color:#fff}

@media (min-width:760px){
  body{font-size:17px}
  .wrap{max-width:1100px;margin:0 auto}
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .card{margin:1rem}
  .top{padding-left:2rem;padding-right:2rem}
  .sec{padding-left:2rem;padding-right:2rem}
}

/* ---------- added for batches ---------- */
.batchlist{padding:.4rem 1rem 3rem;display:grid;gap:.7rem}
.batch{
  display:block;text-decoration:none;color:inherit;
  background:var(--ivory-2);border:1px solid var(--stone);border-radius:2px;
  padding:.9rem 1rem;min-height:56px;
}
.batch:active{border-color:var(--gold)}
.batch h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:0}
.batch .sub{font-size:.85rem;color:#4A423A;margin:.3rem 0 0}
.batch .bar{margin-top:.6rem}
.tag{
  display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.22rem .45rem;border:1px solid var(--stone);border-radius:2px;color:#5A5148;
  margin-left:.4rem;vertical-align:.12em;
}
.tag.applied{background:var(--stone-soft);border-color:var(--stone)}
.tag.open{border-color:var(--gold);color:var(--gold)}
.who{font-size:.8rem;color:#5A5148;margin-top:.45rem}
.who button{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;font-size:inherit;color:inherit}
.backlink{display:inline-block;margin:0 0 .2rem;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:#5A5148;text-decoration:none}
.empty{padding:2rem 1rem;color:#4A423A;font-size:.95rem}

/* name picker — a tap, never a text field */
.sheet{position:fixed;inset:0;background:rgba(38,33,28,.55);display:flex;
  align-items:flex-end;justify-content:center;z-index:50}
.sheet[hidden]{display:none}
.sheet .inner{background:var(--ivory-2);width:100%;max-width:560px;
  border-radius:6px 6px 0 0;padding:1.2rem 1rem calc(1.4rem + env(safe-area-inset-bottom,0))}
.sheet h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:0 0 .2rem}
.sheet p{font-size:.86rem;color:#4A423A;margin:.2rem 0 .9rem}
.names{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.names button{min-height:52px;background:var(--ivory);border:1.5px solid var(--stone);
  border-radius:2px;cursor:pointer;letter-spacing:.06em}
.names button:active{border-color:var(--gold)}

/* admin */
.field{display:block;margin:0 0 .9rem}
.field span{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:#5A5148;margin-bottom:.3rem}
.field input,.field textarea,.field select{
  width:100%;padding:.65rem .7rem;font:inherit;background:var(--ivory-2);
  border:1.5px solid var(--stone);border-radius:2px;color:inherit;min-height:48px}
.field textarea{min-height:80px}
.row{display:flex;gap:.5rem;flex-wrap:wrap}
.row > *{flex:1 1 160px}
.preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem;
  margin:.6rem 0 1rem}
.preview figure{margin:0;font-size:.7rem;line-height:1.25}
.preview img{aspect-ratio:3/4;object-fit:cover;border:1px solid var(--stone)}
.warn{background:#FBF3E6;border-left:2px solid var(--gold);padding:.6rem .7rem;
  font-size:.85rem;margin:.6rem 0}
table.results{width:100%;border-collapse:collapse;font-size:.86rem}
table.results td,table.results th{padding:.4rem .6rem .4rem 0;border-bottom:1px solid var(--stone-soft);
  vertical-align:top;text-align:left}
table.results td:last-child,table.results th:last-child{padding-right:0}
table.results th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#5A5148;font-weight:400}
table.results td.a{text-align:right;white-space:nowrap;letter-spacing:.06em}