/* ==========================================================================
 * FindAnyItem "Try it" section: interactive demo of the app on sample data.
 * Markup lives in index.html (#try-it); behaviour in assets/demo/try-it.js.
 * Mobile-first: under 640px the phone frame disappears and the demo fills
 * the viewport width, because the visitor is already holding a phone.
 * The demo UI mirrors the app's widgets (home_screen_box_list.dart,
 * box_list_item.dart, box_details_screen.dart, box_item_widget.dart).
 * ========================================================================== */

.tryit{background:var(--navy-900);color:var(--on-dark);padding:64px 0;overflow:hidden}
.tryit-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;max-width:1180px}
.tryit .section-title{color:#fff;margin-top:18px}
.tryit .section-lead{color:var(--on-dark-mute)}
.tryit-prompts{display:flex;flex-direction:column;gap:10px;margin-top:26px;max-width:440px}
.tryit-prompt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;
  border:1px solid var(--navy-line);background:var(--navy-card);color:var(--on-dark);
  border-radius:12px;padding:14px 16px;font-size:14.5px;font-weight:500;line-height:1.3;
  transition:border-color .2s,transform .2s,background .2s
}
.tryit-prompt:hover,.tryit-prompt:focus-visible{border-color:var(--blue-bright);background:#16223a;transform:translateX(2px);outline:none}
.tryit-prompt.active{border-color:var(--blue-bright);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.tryit-prompt em{font-style:normal;font-weight:700;color:#fff}
.tryit-prompt svg{flex:none;width:18px;height:18px;color:var(--on-dark-mute)}
.tryit-note{margin-top:18px;font-size:12.5px;color:var(--on-dark-mute)}
.tryit-reset{color:var(--blue-bright);font-weight:600;font-size:12.5px;padding:0;margin-left:6px;text-decoration:underline;text-underline-offset:3px}
.tryit-stores{display:none;gap:10px;margin-top:18px}
.tryit-stores a{display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;border:1px solid #cbd5e1;border-radius:9px;padding:9px 14px;font-size:13px;font-weight:700;text-decoration:none}

/* ---- phone frame (desktop / tablet) ---- */
.tryit-visual{display:flex;justify-content:center}
.tryit-frame{
  position:relative;width:320px;aspect-ratio:1080/2280;border-radius:46px;
  background:#0d0f14;border:10px solid #1b1f28;box-shadow:0 0 0 2px #2b3140,0 34px 70px -20px rgba(0,0,0,.8);
  padding:0;overflow:hidden
}
.tryit-frame:before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:88px;height:24px;background:#0d0f14;border-radius:14px;z-index:6;pointer-events:none}
/* .has-img: Craig's cafe photo, pre-cropped to 860x1333 around the phone
   (try-it-phone.jpg). --screen-inset = the white screen measured in that crop
   (top right bottom left), set inline in index.html. */
.tryit-frame.has-img{width:420px;aspect-ratio:860/1333;border-radius:22px;border:0;box-shadow:0 34px 70px -20px rgba(0,0,0,.8);overflow:hidden;
  background:var(--frame-img) var(--frame-pos,center)/cover no-repeat}
.tryit-frame.has-img:before{display:none}
.tryit-frame.has-img .tryit-screen{position:absolute;inset:var(--screen-inset,16.43% 23.02% 10.2% 23.26%);border-radius:9.5%/4.6%}
.tryit-screen{position:absolute;inset:0;background:var(--light);color:var(--ink);overflow:hidden;font-family:var(--font);
  -webkit-user-select:none;user-select:none}

/* ---- demo UI ---- */
.fd{position:absolute;inset:0;display:flex;flex-direction:column;font-size:14px;line-height:1.3;background:var(--light)}
.fd-status{flex:none;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:11px;font-weight:600;color:var(--ink)}
.fd-status.dark{background:#2196F3;color:#fff}
.fd-status span:last-child{letter-spacing:.5px}
.fd-head{flex:none;padding:6px 16px 10px;text-align:center}
.fd-head h3{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.fd-head p{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.fd-head p b{color:var(--ink-2);font-weight:700}
.fd-body{flex:1;overflow-y:auto;padding:4px 14px 14px;scrollbar-width:thin}
.fd-body.pad0{padding:0 0 14px}
.fd-pills{display:flex;gap:10px;padding:2px 14px 12px}
.fd-pill{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#fff;font-weight:700;font-size:12.5px;border-radius:999px;padding:10px 8px;box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}
.fd-pill svg{width:16px;height:16px;flex:none}
.fd-pill.green{background:#43A047}.fd-pill.blue{background:#2196F3}
.fd-ibtn{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#757575}
.fd-ibtn svg{width:18px;height:18px}
.fd-ibtn:hover{background:rgba(0,0,0,.06)}

/* location panel: white container, grey header, accordion body */
.fd-panel{background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:12px;overflow:hidden}
.fd-panel-head{display:flex;align-items:center;gap:12px;background:#EEEEEE;border-radius:16px;padding:12px;cursor:pointer;user-select:none}
.fd-panel-head:active{background:#E4E4E4}
.fd-licon{flex:none;width:40px;height:40px;border-radius:10px;border:2px solid #fff;display:grid;place-items:center;color:#fff}
.fd-licon svg{width:20px;height:20px}
.fd-ltext{flex:1;min-width:0}
.fd-ltext b{display:block;font-size:15px;font-weight:600;color:rgba(0,0,0,.87)}
.fd-ltext small{display:block;font-size:12.5px;color:#757575;margin-top:2px}
.fd-panel-body{height:0;overflow:hidden;transition:height .3s ease-in-out}
.fd-panel.open .fd-panel-body{height:auto}
.fd-panel-inner{padding:10px 12px 12px}

/* box row (BoxListItem) */
.fd-boxrow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 6px 10px 10px;margin-bottom:8px;box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer}
.fd-boxrow:last-child{margin-bottom:0}
.fd-boxrow:active{transform:scale(.99)}
.fd-shape{flex:none;width:36px;height:36px}
.fd-shape svg{width:100%;height:100%;display:block}
.fd-shape.sm{width:28px;height:28px}
.fd-catbar{flex:none;width:4px;height:56px;border-radius:2px}
.fd-boxtext{flex:1;min-width:0}
.fd-boxtext b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-boxtext small{display:block;font-size:12px;color:#757575;margin-top:2px}
.fd-boxtext .fd-id{font-size:11px;font-weight:600;color:#757575;margin:0 0 1px}
.fd-new{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:#fff;background:#673AB7;border-radius:999px;padding:3px 7px}

/* nav (4 tabs, like home_screen_ui) */
.fd-nav{flex:none;display:flex;justify-content:space-evenly;background:#fff;box-shadow:0 -2px 8px rgba(0,0,0,.06);padding:8px 0 10px}
.fd-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:#616161;padding:4px 10px;border-radius:10px}
.fd-nav button svg{width:22px;height:22px}
.fd-nav button.on{color:#2196F3}
.fd-nav button:hover{background:var(--light)}

/* blue app bar (box details, search, results) */
.fd-appbar{flex:none;display:flex;align-items:center;gap:2px;background:#2196F3;color:#fff;padding:4px 6px 8px}
.fd-abtn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.fd-abtn svg{width:20px;height:20px}
.fd-abtn:hover{background:rgba(255,255,255,.15)}
.fd-abspace{flex:1}
.fd-abtitle{flex:1;font-size:17px;font-weight:600;padding-left:6px}

/* box details header card */
.fd-boxcard{background:#fff;border-radius:12px;margin:12px 14px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.fd-boxcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fd-boxcard-top b{display:block;font-size:18px;font-weight:700;color:var(--ink);line-height:1.2}
.fd-boxcard-top small{display:block;font-size:12.5px;color:#757575;margin-top:3px}
.fd-id2{font-size:12.5px;color:#9E9E9E;white-space:nowrap}
.fd-desc{font-size:12.5px;color:#616161;margin:10px 0 0}
.fd-boxcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:12.5px;color:#757575}
.fd-locline{display:inline-flex;align-items:center;gap:4px}
.fd-locline svg{width:14px;height:14px}
.fd-boxcard-foot b{font-size:14px;color:var(--ink)}

/* items (BoxItemWidget) */
.fd-items{padding:0 14px}
.fd-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #EEEEEE;border-radius:12px;padding:10px;margin-bottom:8px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.fd-item.anim{opacity:0;transform:translateY(8px);animation:fdIn .35s forwards}
.fd-iic{flex:none;width:38px;height:38px;border-radius:10px;background:#F5F5F5;display:grid;place-items:center;color:#757575}
.fd-iic svg{width:20px;height:20px}
.fd-itext{flex:1;min-width:0}
.fd-iname{display:flex;align-items:center;gap:6px}
.fd-iname b{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-x{flex:none;font-style:normal;font-size:10.5px;font-weight:700;color:#1565C0;background:#E3F2FD;border-radius:6px;padding:2px 6px}
.fd-iline{display:flex;align-items:center;gap:6px;margin-top:3px}
.fd-iline small{flex:1;min-width:0;font-size:12px;color:#757575;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-cond{flex:none;font-style:normal;font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 6px;background:#F5F5F5;color:#616161}
.fd-cond.c-new{background:#E8F5E9;color:#2E7D32}.fd-cond.c-excellent{background:#E0F2F1;color:#00796B}.fd-cond.c-good{background:#E3F2FD;color:#1976D2}
.fd-cond.c-fair{background:#FFF3E0;color:#EF6C00}.fd-cond.c-poor{background:#FBE9E7;color:#D84315}.fd-cond.c-damaged{background:#FFEBEE;color:#C62828}
.fd-val{flex:none;font-size:12.5px;font-weight:700;color:#424242}
.fd-total{display:flex;justify-content:space-between;padding:8px 6px 4px;font-size:13px;color:var(--ink-2)}
.fd-total b{color:var(--ink)}

/* empty box state */
.fd-empty{text-align:center;padding:18px 22px 10px}
.fd-empty-ic{display:inline-grid;place-items:center;width:64px;height:64px;color:#BDBDBD}
.fd-empty-ic svg{width:56px;height:56px}
.fd-empty-t{font-size:15px;font-weight:600;color:#616161;margin:6px 0 16px}
.fd-empty-s{font-size:12px;color:#9E9E9E;margin:12px 0 18px}
.fd-feat{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}
.fd-feat span{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#616161;background:#fff;border-radius:10px;padding:9px 10px}
.fd-feat svg{width:16px;height:16px;color:#2196F3;flex:none}
.fd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#2196F3;color:#fff;font-weight:600;font-size:14px;border-radius:12px;padding:12px 18px;box-shadow:0 6px 16px -8px rgba(33,150,243,.8)}
.fd-btn svg{width:18px;height:18px}
.fd-btn.wide{display:flex;width:100%;margin-top:10px}

/* search */
.fd-search{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #2196F3;border-radius:14px;padding:9px 10px 9px 12px;margin:12px 14px 10px}
.fd-search svg{width:18px;height:18px;color:#2196F3;flex:none}
.fd-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:14px;color:var(--ink);background:transparent}
.fd-search input::placeholder{color:#9AA3B2}
.fd-mic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--light);display:grid;place-items:center;color:var(--ink-2)}
.fd-mic.live{background:#FDECEC;color:#D32F2F;animation:fdPulse 1s infinite}
@keyframes fdPulse{0%,100%{box-shadow:0 0 0 0 rgba(211,47,47,.35)}50%{box-shadow:0 0 0 7px rgba(211,47,47,0)}}
.fd-hint{color:var(--ink-3);font-size:12.5px;text-align:center;padding:22px 16px;line-height:1.5}
.fd-res{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 12px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.06);border:1px solid transparent}
.fd-res:hover{border-color:#CFE0FF}
.fd-res>span:last-child{min-width:0}
.fd-res b{display:block;font-size:14px;color:var(--ink)}
.fd-res b mark{background:#FFF3C4;color:inherit;border-radius:3px;padding:0 1px}
.fd-res small{display:block;font-size:12px;color:#757575;margin-top:2px}
.fd-loc{display:inline-flex;align-items:center;gap:4px;background:#E3EEFF;color:var(--blue-deep);font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;margin-top:6px}
.fd-loc svg{width:11px;height:11px}
.fd-count{font-size:11.5px;color:var(--ink-3);padding:6px 2px 8px}

/* QR label screen */
.fd-label{background:#fff;border-radius:14px;padding:18px;margin:12px 0;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.fd-label-qr{width:140px;height:140px;margin:0 auto 10px}
.fd-label-qr svg{width:100%;height:100%}
.fd-label b{display:block;font-size:16px;color:var(--ink)}
.fd-label small{display:block;font-size:12.5px;color:#757575;margin-top:2px}

/* camera views */
.fd-cam{position:absolute;inset:0;background:#0b0f16;color:#fff;display:flex;flex-direction:column}
.fd-cam-view{position:relative;flex:1;overflow:hidden;background:radial-gradient(120% 80% at 50% 40%,#2a3140 0%,#0b0f16 70%)}
.fd-cam-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.95)}
.fd-cam-view.qr:after{content:"";position:absolute;left:50%;top:48%;width:110px;height:150px;transform:translate(-50%,-50%) rotate(-6deg);background:#fff;border-radius:6px;opacity:.9}
.fd-cam-qr{position:absolute;left:50%;top:48%;width:72px;height:72px;transform:translate(-50%,-62%) rotate(-6deg);z-index:2}
.fd-cam-qr svg{width:100%;height:100%}
.fd-cam-label{position:absolute;left:50%;top:48%;transform:translate(-50%,42px) rotate(-6deg);z-index:2;color:#111;font-size:10px;font-weight:800;text-align:center;line-height:1.2}
.fd-cam-label span{display:block;font-weight:500;font-size:8.5px;color:#444}
.fd-frame{position:absolute;inset:18% 12%;z-index:3;pointer-events:none}
.fd-frame i{position:absolute;width:28px;height:28px;border:3px solid #fff;border-radius:6px}
.fd-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.fd-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.fd-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.fd-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.fd-line{position:absolute;left:14%;right:14%;top:20%;height:2px;background:linear-gradient(90deg,transparent,#4DA3FF,transparent);box-shadow:0 0 12px #4DA3FF;z-index:3;animation:fdScan 1.6s ease-in-out infinite}
@keyframes fdScan{0%{top:20%}50%{top:78%}100%{top:20%}}
.fd-cam-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:40px 14px 0;z-index:4}
.fd-cam-top button{color:#fff;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.35);display:grid;place-items:center}
.fd-cam-top button svg{width:18px;height:18px}
.fd-cam-top span{font-size:13px;font-weight:700;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.fd-cam-bottom{flex:none;padding:14px 16px 20px;text-align:center;background:#0b0f16}
.fd-cam-bottom p{font-size:12.5px;color:#B8C0CC;margin-bottom:12px;min-height:16px}
.fd-shutter{width:62px;height:62px;border-radius:50%;background:#fff;border:5px solid #B8C0CC;margin:0 auto;display:block;transition:transform .15s}
.fd-shutter:active{transform:scale(.92)}
.fd-prog{height:4px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden;margin:0 auto 10px;width:70%}
.fd-prog i{display:block;height:100%;width:0;background:#4DA3FF;transition:width 2.2s linear}
.fd-found{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);background:#43A047;color:#fff;font-weight:700;font-size:13px;padding:9px 14px;border-radius:999px;z-index:5;box-shadow:0 8px 20px -6px rgba(0,0,0,.6);animation:fdPop .3s ease-out}
@keyframes fdPop{from{transform:translateX(-50%) scale(.7);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}

/* detected items */
.fd-det{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 12px;margin-bottom:6px;opacity:0;transform:translateY(8px);animation:fdIn .35s forwards}
@keyframes fdIn{to{opacity:1;transform:none}}
.fd-det>span:nth-child(2){flex:1;min-width:0}
.fd-det b{display:block;font-size:13.5px;color:var(--ink);font-weight:600}
.fd-det small{display:block;font-size:11.5px;color:#757575}
.fd-conf{flex:none;font-size:11px;font-weight:700;color:#2E7D32;background:#E8F5E9;padding:3px 7px;border-radius:999px;white-space:nowrap}
.fd-check{flex:none;width:20px;height:20px;border-radius:6px;background:#2196F3;display:grid;place-items:center;color:#fff}
.fd-check svg{width:13px;height:13px}

/* toast */
.fd-toast{position:absolute;left:50%;bottom:78px;transform:translateX(-50%) translateY(10px);background:#1F2937;color:#fff;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:999px;opacity:0;transition:opacity .25s,transform .25s;z-index:20;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.fd-toast.show{opacity:1;transform:translateX(-50%)}

/* screen transition */
.fd.enter{animation:fdSlide .28s ease-out}
@keyframes fdSlide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* ---- responsive ---- */
@media (max-width:1024px){
  .tryit-inner{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:820px){
  .tryit{padding:48px 0}
  .tryit-inner{grid-template-columns:1fr;gap:28px}
  .tryit-text{text-align:center}
  .tryit .section-title{margin-top:12px}
  .tryit-prompts{margin:22px auto 0}
  .tryit-prompt{text-align:left}
}
@media (max-width:640px){
  /* the visitor is already holding a phone: drop the frame, fill the width */
  .tryit{padding:40px 0 36px}
  .tryit-inner{gap:20px}
  .tryit-visual{margin:0 -4px}
  .tryit-frame,.tryit-frame.has-img{width:100%;aspect-ratio:auto;height:min(78vh,640px);border:0;border-radius:18px;background:#0d0f14;box-shadow:0 20px 40px -18px rgba(0,0,0,.8);overflow:hidden}
  .tryit-frame:before,.tryit-frame.has-img:before{display:none}
  .tryit-frame.has-img .tryit-screen{inset:0;border-radius:18px}
  .fd-status{display:none}
  .fd-head{padding-top:14px}
  .fd-appbar{padding-top:10px}
  .fd-cam-top{padding-top:14px}
  /* order on a phone: title, lead, task chips, DEMO, store badges, note */
  .tryit-text{display:contents}
  .tryit-inner{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .tryit-inner>.eyebrow{order:1;align-self:center}
  .tryit-inner>.eyebrow-bar{order:2;align-self:center}
  .tryit-inner>.section-title{order:3;text-align:center}
  .tryit-inner>.section-lead{order:4;text-align:center}
  .tryit-inner>.tryit-prompts{order:5}
  .tryit-inner>.tryit-visual{order:6;margin-top:18px}
  .tryit-inner>.tryit-stores{order:7;margin-top:20px}
  .tryit-inner>.tryit-note{order:8}
  .tryit-prompts{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;max-width:none;margin-top:16px}
  .tryit-prompt{padding:9px 12px;font-size:13px;border-radius:999px;gap:6px}
  .tryit-prompt svg{display:none}
  .tryit-stores{display:flex;justify-content:center;flex-wrap:wrap}
  .tryit-note{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .fd-line,.fd-mic.live,.fd.enter,.fd-det,.fd-found,.fd-item.anim{animation:none}
  .fd-det,.fd-item.anim{opacity:1;transform:none}
  .fd-panel-body{transition:none}
}

/* ---- item details bottom sheet (box_details_screen _showItemDetailsSheet) ---- */
.fd-sheet-wrap{position:absolute;inset:0;z-index:30}
.fd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .22s}
.fd-sheet-wrap.in .fd-backdrop{background:rgba(0,0,0,.45)}
.fd-sheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;background:#fff;border-radius:20px 20px 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.7,.2,1);box-shadow:0 -8px 30px rgba(0,0,0,.2)}
.fd-sheet-wrap.in .fd-sheet{transform:none}
.fd-handle{width:40px;height:4px;border-radius:2px;background:#E0E0E0;margin:10px auto 0;flex:none}
.fd-sheet-head{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid #EEEEEE;flex:none}
.fd-sheet-ic{flex:none;width:48px;height:48px;border-radius:10px;background:#E3F2FD;display:grid;place-items:center;color:#1E88E5}
.fd-sheet-ic svg{width:24px;height:24px}
.fd-sheet-t{flex:1;min-width:0}
.fd-sheet-t b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.fd-sheet-t small{display:block;font-size:12.5px;color:#757575;margin-top:2px}
.fd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fd-chip-ai{font-style:normal;font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 6px;background:#EDE7F6;color:#5E35B1}
.fd-sheet-scroll{overflow-y:auto;padding:4px 16px 8px;scrollbar-width:thin}
.fd-sheet-scroll .fd-sect{padding:10px 0 4px;font-size:11px;color:#9E9E9E}
.fd-sheet-scroll .fd-sect.top{border-top:1px solid #EEEEEE;margin-top:8px;padding-top:12px}
.fd-drow{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:13.5px}
.fd-drow svg{flex:none;width:20px;height:20px;color:#757575}
.fd-drow span{color:#757575;flex:1}
.fd-drow b{font-weight:600;color:var(--ink);text-align:right}
.fd-drow b.on{color:#2E7D32}
.fd-tags{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 4px}
.fd-tags span{font-size:11.5px;color:#1565C0;background:#E3F2FD;border-radius:999px;padding:4px 10px}
.fd-uses{display:flex;flex-direction:column;gap:6px;padding:2px 0 4px}
.fd-uses span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#424242}
.fd-uses svg{width:14px;height:14px;color:#43A047;flex:none}
.fd-sheet-foot{flex:none;display:flex;gap:10px;padding:12px 16px 16px;border-top:1px solid #EEEEEE}
.fd-sheet-foot .fd-btn{flex:1;padding:11px 14px}
.fd-obtn{flex:1;border:1px solid #BDBDBD;border-radius:12px;padding:11px 14px;font-size:14px;font-weight:600;color:#424242;background:#fff}
@media (prefers-reduced-motion:reduce){.fd-sheet,.fd-backdrop{transition:none}}

/* ---- item status badges (ItemStatusBadge: Lent = teal, Restock = deep orange) ---- */
.fd-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fd-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border-radius:12px;padding:3px 8px;line-height:1}
.fd-badge svg{width:13px;height:13px}
.fd-badge.lent{background:rgba(0,150,136,.15);border:1px solid rgba(0,150,136,.3);color:#00796B}
.fd-badge.restock{background:rgba(255,87,34,.15);border:1px solid rgba(255,87,34,.3);color:#D84315}
.fd-chips .fd-badges{margin-top:0}
.fd-drow b small{font-weight:500;color:#9E9E9E;font-size:11.5px}
.fd-btn.slim{display:flex;width:100%;padding:9px 14px;font-size:13px;margin:4px 0 6px;background:#fff;color:#1976D2;border:1px solid #BBDEFB;box-shadow:none}

/* Inside the photo frame the screen is only ~225px wide, so the demo renders at
   its 300px design width and is scaled down to fit (try-it.js sets --fd-scale
   and --fd-h from the real screen size; 1 on phones where the frame is gone). */
.tryit-frame.has-img .fd{inset:auto;left:0;top:0;width:300px;height:var(--fd-h,100%);transform:scale(var(--fd-scale,1));transform-origin:0 0}

/* ---- scan recognition overlay ---- */
.fd-boxes{position:absolute;inset:0;z-index:3;pointer-events:none}
.fd-box{position:absolute;border:2px solid #4DA3FF;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 14px rgba(77,163,255,.55);animation:fdBoxIn .28s cubic-bezier(.2,.9,.3,1.4) both}
.fd-box span{position:absolute;left:-2px;top:-17px;background:#1E88E5;color:#fff;font-size:9.5px;font-weight:700;line-height:1;padding:3px 6px;border-radius:4px 4px 4px 0;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.fd-box span i{font-style:normal;font-weight:500;opacity:.85;margin-left:2px}
.fd-boxes.done .fd-box{border-color:#43A047;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 12px rgba(67,160,71,.5)}
.fd-boxes.done .fd-box span{background:#43A047}
@keyframes fdBoxIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.pulse{animation:fdPulseBtn 1.1s ease-in-out infinite}
@keyframes fdPulseBtn{0%,100%{box-shadow:0 0 0 0 rgba(33,150,243,.55)}60%{box-shadow:0 0 0 12px rgba(33,150,243,0)}}
.fd-shutter.pulse{animation-name:fdPulseShutter}
@keyframes fdPulseShutter{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}60%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.fd-box,.pulse,.fd-shutter.pulse{animation:none}}
.fd-box.inlabel span{top:2px;left:2px;border-radius:4px}
.fd-box.rlabel span{left:auto;right:-2px;border-radius:4px 4px 0 4px}
.fd-box.inlabel.rlabel span{right:2px;border-radius:4px}

/* ---- detection results: pinned action bar + swipe-to-remove rows ---- */
.fd-actbar{flex:none;display:flex;gap:8px;align-items:center;padding:10px 12px 12px;background:#fff;border-top:1px solid #EEEEEE}
.fd-actbar .fd-btn{flex:1.4;padding:10px 8px;font-size:13px;gap:6px}
.fd-actbar .fd-btn svg{width:16px;height:16px}
.fd-btn.green{background:#43A047;box-shadow:0 6px 16px -8px rgba(67,160,71,.8)}
.fd-btn.green.pulse{animation:fdPulseGreen 1.1s ease-in-out infinite}
@keyframes fdPulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(67,160,71,.55)}60%{box-shadow:0 0 0 12px rgba(67,160,71,0)}}
.fd-btn.grey{background:#ECEFF1;color:#37474F;box-shadow:none}
.fd-btn[disabled]{opacity:.45;pointer-events:none}
.fd-tbtn{flex:1;padding:10px 6px;font-size:13px;font-weight:600;color:#1976D2;border-radius:12px}
.fd-tbtn:hover{background:#E3F2FD}
.fd-swipe{position:relative;overflow:hidden;border-radius:12px;margin-bottom:6px;opacity:0;transform:translateY(8px);animation:fdIn .35s forwards;touch-action:pan-y;cursor:grab}
.fd-swipe .fd-det{position:relative;margin:0;transition:transform .22s ease-out;background:#fff;user-select:none}
.fd-swipe-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding-right:14px;background:#E53935;color:#fff;font-size:12px;font-weight:700}
.fd-swipe-bg svg{width:14px;height:14px}
.fd-swipe.armed .fd-swipe-bg{background:#C62828}
.fd-swipe.gone{transition:max-height .25s ease-in,margin .25s ease-in,opacity .2s;max-height:0;margin-bottom:0;opacity:0}
.fd-swipe{max-height:80px}
@media (prefers-reduced-motion:reduce){.fd-btn.green.pulse{animation:none}.fd-swipe{animation:none;opacity:1;transform:none}}
/* keep the three results buttons on one line at 300px */
.fd-actbar{gap:6px;padding:10px 10px 12px}
.fd-actbar .fd-btn,.fd-actbar .fd-tbtn{white-space:nowrap;font-size:12px;padding:10px 6px;min-width:0}
.fd-actbar .fd-tbtn{flex:.75}
.fd-actbar .fd-btn.green{flex:1.6}
.fd-actbar .fd-btn.grey{flex:.9}

/* rows re-rendered after a removal must not replay the entrance animation */
.fd-swipe.shown{animation:none;opacity:1;transform:none}
/* coach: animated arrow + instruction under the first row, and a nudge on the row */
.fd-coach{position:absolute;left:14px;right:14px;z-index:5;display:flex;align-items:center;gap:8px;background:#1F2937;color:#fff;font-size:12px;border-radius:10px;padding:9px 12px;box-shadow:0 8px 20px rgba(0,0,0,.35);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none}
.fd-coach:before{content:"";position:absolute;left:26px;top:-6px;width:12px;height:12px;background:#1F2937;transform:rotate(45deg)}
.fd-coach.in{opacity:1;transform:none}
.fd-coach b{font-weight:800}
.fd-coach-arrow{flex:none;width:22px;height:22px;display:grid;place-items:center;color:#4DA3FF;animation:fdArrow 1.1s ease-in-out infinite}
.fd-coach-arrow svg{width:20px;height:20px}
@keyframes fdArrow{0%,100%{transform:translateX(3px)}50%{transform:translateX(-5px)}}
.fd-swipe.nudge .fd-det{animation:fdNudge 1.6s ease-in-out infinite}
@keyframes fdNudge{0%,55%,100%{transform:translateX(0)}25%{transform:translateX(-22px)}}
.fd-swipe.nudge .fd-swipe-bg{background:#E53935}
#fdDetList{position:relative}
@media (prefers-reduced-motion:reduce){.fd-coach-arrow,.fd-swipe.nudge .fd-det{animation:none}}

/* Rows are visible by default: only the wrapper animates in, the white row
   never depends on an animation fill (a red underlay showed wherever that
   fill was interrupted). The red underlay is hidden unless the row is
   actually being swiped, nudged by the coach, or leaving - so it can never
   bleed through the rounded corners either. */
.fd-swipe .fd-det{opacity:1;transform:none;animation:none}
.fd-swipe-bg{opacity:0;transition:opacity .12s}
.fd-swipe.swiping .fd-swipe-bg,.fd-swipe.nudge .fd-swipe-bg,.fd-swipe.gone .fd-swipe-bg{opacity:1}
.fd-swipe{background:transparent}

/* Phones: the frame is dropped, so the photo-frame scaling rule above must not
   apply. This block is LAST on purpose - it must follow that rule in source
   order to win at equal specificity. */
@media (max-width:640px){
  .tryit-frame.has-img .fd{inset:0;width:auto;height:auto;transform:none}
}

/* ---- use-case cards drive the demo ---- */
.usecase[data-usecase]{cursor:pointer;outline:none}
.usecase-pic{position:relative;display:block}
.usecase-chip{position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);white-space:nowrap;font-style:normal;font-size:11.5px;font-weight:700;color:#fff;background:rgba(37,99,235,.95);border-radius:999px;padding:6px 11px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.usecase[data-usecase]:hover .usecase-chip,.usecase[data-usecase]:focus-visible .usecase-chip{opacity:1;transform:translate(-50%,0)}
.usecase[data-usecase]:focus-visible .usecase-img{box-shadow:0 0 0 3px var(--blue-bright)}
@media (hover:none){.usecase-chip{opacity:1;transform:translate(-50%,0);font-size:10.5px;padding:5px 9px}}