/* ============================================================
   BSLR — interactive field-capture demo
   Loaded only by /modules/field-capture.html. Everything is scoped
   under .capdemo so it cannot collide with bslr.css.
   Values match the app's mobile mockup, not the website:
   #CFDEE7 field borders, #1B8A5A resolved state, 135deg appbar.
   ============================================================ */

.capdemo{
  --cbrand:#336380; --cbrand-d:#27506A; --cbrand-t:#F1F6F9; --cfbd:#CFDEE7;
  --caccent:#EC8822; --caccent-d:#D4761A; --cink:#0F172A; --cmuted:#64748B;
  --cok:#1B8A5A; --cborder:#E2E8F0;
  display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:44px;
}

/* ---- screen switcher ---- */
.capdemo-tabs{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  background:#fff; border:1px solid var(--cborder); border-radius:999px; padding:6px;
}
.capdemo-tabs button{
  border:0; background:none; cursor:pointer; font:inherit; font-size:14px; font-weight:600;
  color:var(--cmuted); padding:9px 18px; border-radius:999px; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease;
}
.capdemo-tabs button:hover{ color:var(--cbrand); background:var(--cbrand-t) }
.capdemo-tabs button[aria-selected="true"]{ background:var(--cbrand); color:#fff }

/* ---- device ---- */
.capdemo-phone{
  width:390px; max-width:100%; background:#fff;
  border:1px solid var(--cfbd); border-radius:26px; overflow:hidden;
  box-shadow:0 18px 44px rgba(51,99,128,.16);
  display:flex; flex-direction:column;
}
.capdemo-bar{
  background:linear-gradient(135deg,var(--cbrand-d),var(--cbrand)); color:#fff;
  padding:13px 15px; display:flex; align-items:center; gap:9px; flex:none;
}
.capdemo-bar .wm{ font-weight:800; font-size:14px; letter-spacing:.14em }
.capdemo-bar .tn{
  margin-left:auto; font-size:10px; background:rgba(255,255,255,.18);
  padding:4px 9px; border-radius:20px; white-space:nowrap;
}
/* Height follows the panel so a short screen carries no dead space, capped so
   the long ones scroll inside the device instead of stretching the page. */
.capdemo-screen{ min-height:440px; max-height:620px; overflow-y:auto; -webkit-overflow-scrolling:touch }
.capdemo-panel{ padding:15px; display:flex; flex-direction:column; gap:12px }
.capdemo-panel[hidden]{ display:none }
/* .capdemo .cond / .fork set display:flex, whose (0,2,0) specificity beats the
   UA's [hidden]{display:none} at (0,1,0) — so hiding them needs this to win. */
.capdemo [hidden]{ display:none !important }

/* ---- shared field furniture ---- */
.capdemo .step{ display:flex; gap:5px }
.capdemo .step i{ flex:1; height:4px; border-radius:4px; background:var(--cfbd) }
.capdemo .step i.on{ background:var(--caccent) }
.capdemo .q{ font-weight:800; font-size:19px; color:var(--cbrand-d); line-height:1.25 }
.capdemo .sub{ font-size:12px; color:var(--cmuted); margin-top:3px; line-height:1.5 }
.capdemo .fl{ display:block; font-size:11px; font-weight:600; color:var(--cmuted); margin-bottom:5px }
.capdemo .fl em{ color:var(--caccent-d); font-style:normal }
.capdemo .inp,.capdemo .sel{
  width:100%; border:1px solid var(--cfbd); border-radius:10px; padding:10px 12px;
  font:inherit; font-size:13.5px; background:#fff; color:var(--cink);
}
.capdemo .row{ display:flex; gap:10px } .capdemo .row>div{ flex:1; min-width:0 }
.capdemo .hint{ font-size:10.5px; color:var(--cmuted); line-height:1.5 }

/* ---- front door cards ---- */
.capdemo .cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.capdemo .icard{
  background:#fff; border:1px solid var(--cfbd); border-radius:14px; padding:12px;
  cursor:pointer; font:inherit; color:inherit; text-align:left; min-height:110px;
  display:flex; flex-direction:column; gap:2px;
  transition:border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.capdemo .icard:hover{ border-color:var(--cbrand) }
.capdemo .icard.on{ border-color:var(--caccent); box-shadow:inset 0 0 0 2px var(--caccent); background:#FDF4EA }
.capdemo .icard svg{ margin-bottom:6px }
.capdemo .icard b{ font-size:12.5px; font-weight:700; color:var(--cbrand-d); line-height:1.3 }
.capdemo .icard span{ font-size:10px; color:var(--cmuted); line-height:1.4 }
.capdemo .icard.wide{ grid-column:1/-1; min-height:0; flex-direction:row; align-items:center; gap:11px }
.capdemo .icard.wide svg{ margin:0; flex:none }
/* navigation hint, not product chrome — kept faint so the frame reads as real UI */
.capdemo .icard .goes{ font-size:8.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:#9AA3AF; margin-top:4px }

/* ---- chips ---- */
.capdemo .chips{ display:flex; flex-wrap:wrap; gap:7px }
.capdemo .chip{
  border:1px solid var(--cfbd); background:#fff; border-radius:20px; padding:7px 13px;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--cmuted); cursor:pointer;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.capdemo .chip:hover{ border-color:var(--cbrand) }
.capdemo .chip.on{ background:var(--cbrand); border-color:var(--cbrand); color:#fff }

/* ---- segmented control ---- */
.capdemo .seg{ display:flex; border:1px solid var(--cfbd); border-radius:10px; overflow:hidden }
.capdemo .seg button{
  flex:1; padding:10px 6px; font:inherit; font-size:12px; font-weight:600;
  color:var(--cmuted); background:#fff; border:0; cursor:pointer; transition:.12s ease;
}
.capdemo .seg button+button{ border-left:1px solid var(--cfbd) }
.capdemo .seg button[aria-pressed="true"]{ background:var(--cbrand); color:#fff }

/* ---- conditional block: the whole point ---- */
.capdemo .cond{
  border-left:3px solid var(--caccent); padding-left:11px;
  display:flex; flex-direction:column; gap:11px;
  animation:capreveal .22s ease-out;
}
.capdemo .cond.ok{ border-left-color:var(--cok) }
.capdemo .tag{
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--caccent-d);
}
.capdemo .cond.ok .tag{ color:var(--cok) }
@keyframes capreveal{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .capdemo .cond{ animation:none } }

/* ---- photo / fork / cta ---- */
.capdemo .photo{
  border:1.5px dashed var(--cfbd); border-radius:14px; padding:13px; text-align:center;
  background:var(--cbrand-t); cursor:pointer; font:inherit; width:100%;
  color:var(--cmuted); font-size:11.5px;
}
.capdemo .photo b{ display:block; color:var(--cbrand); font-size:13px; margin-bottom:2px }
.capdemo .photo.done{ border-style:solid; border-color:#BCE5D2; background:#F0FAF5 }
.capdemo .photo.done b{ color:var(--cok) }
.capdemo .fork{ border-top:1px dashed var(--cfbd); padding-top:12px; display:flex; flex-direction:column; gap:9px }
.capdemo .fq{ font-weight:800; font-size:14px; color:var(--cbrand-d); line-height:1.35 }
.capdemo .fopt{
  display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--cfbd);
  border-radius:14px; padding:11px; cursor:pointer; background:#fff; font:inherit;
  text-align:left; color:inherit; transition:.12s ease;
}
.capdemo .fopt:hover{ border-color:var(--cbrand) }
.capdemo .fopt[aria-pressed="true"]{ border-color:var(--cok); background:#F0FAF5 }
.capdemo .fopt .dot{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--cfbd);
  margin-top:2px; flex:none;
}
.capdemo .fopt[aria-pressed="true"] .dot{ border-color:var(--cok); background:var(--cok); box-shadow:inset 0 0 0 3px #F0FAF5 }
.capdemo .fopt b{ display:block; font-size:12.5px }
.capdemo .fopt i{ font-style:normal; font-size:10.5px; color:var(--cmuted); line-height:1.45 }
.capdemo .cta{
  width:100%; border:0; border-radius:12px; padding:13px; font:inherit;
  font-weight:800; font-size:14px; color:#fff; background:var(--caccent); cursor:pointer;
  box-shadow:0 3px 10px rgba(236,136,34,.32);
}
.capdemo .cta:hover{ background:var(--caccent-d) }
.capdemo .toast{
  background:#F0FAF5; border:1px solid #BCE5D2; color:var(--cok);
  font-size:11.5px; border-radius:10px; padding:9px 11px; font-weight:600;
}

/* ---- caption under the device ---- */
.capdemo-note{
  font-size:13.5px; color:var(--cmuted); text-align:center; max-width:52ch; line-height:1.55;
}
.capdemo-note b{ color:var(--cink); font-weight:600 }
.capdemo-fallback{ max-width:340px }

@media (max-width:640px){
  .capdemo{ margin-top:32px }
  .capdemo-tabs{ border-radius:14px; width:100% }
  .capdemo-tabs button{ flex:1 1 auto; padding:10px 12px; font-size:13px }
  .capdemo-screen{ max-height:560px }
}