/* type scaled up 1.22x from the 13px base, floored at 12px, with the boxes and columns
   that hold text widened to match. */
/* Superhero Inventory - app styles.
   Follows the STR dashboard design system: light page, white cards, 22px radius,
   colour used only as signal. */

/* Tokens live on every root the app renders into. The drawer, lightbox and toast are
   appended to <body>, outside .shi-app, so scoping the custom properties to .shi-app
   alone left var(--ink) undefined there and painted white text on a white button. */
/* Every one of these is appended to document.body rather than inside .shi-app, so each one
   has to be named here or its var() lookups resolve to nothing and it paints untinted. */
.shi-app,
.shi-drawer,
.shi-scrim,
.shi-lb,
.shi-toast,
.shi-ask,
.shi-scan,
.shi-cam{
  --bg-page:#f4f6f8; --bg-card:#fff; --border:#cfd8e3; --border-light:#e8edf2; --border-inner:#eef2f7;
  --ink:#0f172a; --ink-muted:#2d3748; --ink-faint:#3f4a5a;
  --green:#28ae63; --green-text:#197a45; --green-bg:#e6f6ea; --green-border:#d1ecd8;
  --blue:#178fda; --blue-bg:#e8f4ff; --blue-border:#d4e8fb;
  --amber:#d97706; --amber-bg:#fffbeb; --amber-border:#fde68a;
  --red:#ef4444; --red-bg:#fef2f2; --red-border:#fecaca;
  --purple:#7c3aed; --purple-bg:#fdf8ff; --purple-border:#ddd6fe;
  --orange:#d4571f;
  /* The site blue. #0c71c3 is --b2 on the home page and the exact colour the Concierge
     app uses for its primary buttons, active tabs and focus rings. */
  --brand:#0c71c3; --brand-dark:#0a63ab;
  --shadow:0 1px 0 rgba(15,23,42,.03), 0 8px 22px rgba(15,23,42,.03);
}

.shi-app{
  
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; color:var(--ink);
  max-width:1180px; margin:0 auto; padding:0 6px 60px;
  
}
/* Every root the app renders into, not just .shi-app. The drawer, lightbox and toast are
   appended to <body>, and without border-box an input at width:100% overflows its grid
   column by its own padding and border, which is what made the edit form overlap. */
.shi-app,.shi-app *,.shi-app *::before,.shi-app *::after,
.shi-drawer,.shi-drawer *,.shi-drawer *::before,.shi-drawer *::after,
.shi-lb,.shi-lb *,.shi-toast,.shi-toast *,
.shi-ask,.shi-ask *,.shi-ask *::before,.shi-ask *::after{box-sizing:border-box}
.shi-app h1,.shi-app h2,.shi-app h3{line-height:1.25;margin:0;color:var(--ink)}
.shi-app p{margin:0 0 10px}
.shi-app button{font-family:inherit}
.shi-app a{text-decoration:none}
/* ---------- loading ---------- */
/* The mascot idles over a barcode while the app fetches, because scanning is what the
   product does and this screen is otherwise a bare line of grey text. Everything here is
   CSS, so it costs no extra request: the mascot PNG is already on the page.
   The scan line is hard-coded rgba(12,113,195,x) rather than var(--brand) only because the
   sweep needs alpha stops; the colour is the same #0c71c3. */
.shi-loading{padding:56px 0 60px;text-align:center;color:var(--ink-faint)}

.shi-loading-stage{position:relative;width:96px;margin:0 auto 18px;padding-bottom:10px}
.shi-loading-art{display:block;width:100%;height:auto;
  animation:shi-bob 1.9s ease-in-out infinite alternate}
/* Sold separately from the bob so the ground shadow tightens as he rises. */
.shi-loading-shadow{position:absolute;left:50%;bottom:0;width:58px;height:9px;margin-left:-29px;
  border-radius:50%;background:rgba(15,23,42,.16);filter:blur(2px);
  animation:shi-shadow 1.9s ease-in-out infinite alternate}
@keyframes shi-bob{from{transform:translateY(0)}to{transform:translateY(-7px)}}
@keyframes shi-shadow{from{transform:scaleX(1);opacity:.5}to{transform:scaleX(.78);opacity:.26}}

/* Uneven bar widths, or it reads as a comb rather than a barcode. */
.shi-loading-scan{position:relative;width:172px;height:26px;margin:0 auto 14px;overflow:hidden}
.shi-loading-scan::before{content:"";position:absolute;inset:0;opacity:.3;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 9px, transparent 9px 11px,
    var(--ink) 11px 13px, transparent 13px 18px, var(--ink) 18px 21px, transparent 21px 24px)}
.shi-loading-scan::after{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:34px;
  background:linear-gradient(90deg,rgba(12,113,195,0),rgba(12,113,195,.9) 45%,
    rgba(12,113,195,.95) 55%,rgba(12,113,195,0));
  animation:shi-scan 1.7s ease-in-out infinite}
@keyframes shi-scan{0%{transform:translateX(-34px)}50%{transform:translateX(172px)}
  100%{transform:translateX(-34px)}}

.shi-loading-text{font-size:16px;color:var(--ink-faint)}

/* The inline one, for a panel that fills in after the page is already up. */
.shi-spin{display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-2px;
  border:2px solid var(--border);border-top-color:var(--brand);border-radius:50%;
  animation:shi-rot .7s linear infinite}
@keyframes shi-rot{to{transform:rotate(360deg)}}

/* Motion is decoration here, never the message: the words say it is loading on their own.
   The scan line parks in the middle of the barcode rather than vanishing off the end. */
@media (prefers-reduced-motion:reduce){
  .shi-loading-art,.shi-loading-shadow,.shi-loading-scan::after{animation:none}
  .shi-loading-scan::after{left:50%;margin-left:-17px;opacity:.6}
  .shi-spin{animation-duration:2.4s}
}
@media (max-width:600px){
  .shi-loading{padding:40px 0 44px}
  .shi-loading-stage{width:78px}
  .shi-loading-scan{width:150px}
}

.shi-gate{max-width:520px;margin:40px auto;text-align:center;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.shi-gate-btn{display:inline-block;padding:11px 24px;border-radius:9px;background:#d4571f;color:#fff;
  font-weight:600;border:2px solid #d4571f}

/* ---------- header ---------- */
/* Same shape as the Concierge app: mascot beside the page's own heading, with the theme's
   duplicate title turned off by the page-no-title template. */
/* No site header above this any more, so the app owns the top inset. The max() keeps
   the logo clear of a notch or status bar on phones. */
.shi-head{display:flex;align-items:center;gap:14px;padding:max(14px,env(safe-area-inset-top)) 0 12px;flex-wrap:wrap}
.shi-headtext{min-width:0}
.shi-app .shi-h1{margin:0;font-size:30px;line-height:1.1;font-weight:700;color:var(--ink)}
.shi-mascot{width:56px;height:56px;object-fit:contain;flex:0 0 auto;display:block}
.shi-title{font-size:23px;font-weight:700;line-height:1.1}
.shi-sub{font-size:15px;color:var(--ink-muted)}
.shi-head-pills{margin-left:auto;display:flex;gap:6px;align-items:center;flex:0 0 auto}
.shi-head-right{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

.shi-tag{padding:2px 7px;border-radius:4px;font-size:12px;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--border-light);background:#f8fafc;color:var(--ink-muted);white-space:nowrap;display:inline-block}
.shi-tag.p0{background:#ecfdf5;color:#15803d;border-color:#bbf7d0}
.shi-tag.p1{background:#fefce8;color:#a16207;border-color:#fef08a}
.shi-tag.p2{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.shi-tag.p3{background:#fdf8ff;color:#6d28d9;border-color:#ddd6fe}
.shi-tag.p4{background:#fff1f2;color:#be123c;border-color:#fecdd3}

.shi-pill{padding:4px 11px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--border);
  background:#fff;color:var(--ink-muted);cursor:pointer}
.shi-pill[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.shi-app button:focus-visible,.shi-app input:focus-visible,.shi-app select:focus-visible,
.shi-app textarea:focus-visible,.shi-app a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.shi-calline{font-size:15px;color:var(--ink-muted);padding:0 0 12px;max-width:70ch}
.shi-tag b{font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- tabs ---------- */
.shi-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-light);margin-bottom:20px;overflow-x:auto}
.shi-tab{background:none;border:0;border-bottom:2px solid transparent;padding:9px 14px;font-size:16px;
  font-weight:600;color:var(--ink-muted);cursor:pointer;white-space:nowrap}
.shi-tab[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.shi-tab .n{font-size:12px;color:#d92020;font-weight:700;margin-left:5px}

/* ---------- kpis ---------- */
.shi-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
.shi-kpi-toggle{display:none}
.shi-kpi{background:var(--bg-card);border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.shi-kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.shi-kpi-label{font-size:15px;font-weight:600;color:var(--ink-muted)}
.shi-kpi-badge{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex:none}
.shi-kpi-val{font-size:34px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.shi-kpi-sub{font-size:15px;color:var(--ink-faint);margin-top:3px}

/* ---------- filters ---------- */
.shi-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.shi-filters .sep{width:1px;height:18px;background:var(--border-light);margin:0 4px}

/* ---- filter dropdowns ---- */
/* The pill shows the current choice; the alternatives live in a menu under it. A pill
   that is actually filtering keeps the solid brand fill from .shi-pill[aria-pressed],
   so an active filter still reads at a glance with the options hidden. */
.shi-dd{position:relative;display:inline-flex}
.shi-dd-btn{display:inline-flex;align-items:center;gap:7px;max-width:15em}
.shi-dd-btn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shi-dd-cx{width:11px;height:8px;flex:0 0 auto;opacity:.75;transition:transform .15s ease}
.shi-dd.open .shi-dd-cx{transform:rotate(180deg)}
.shi-dd-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;
  min-width:100%;width:max-content;max-width:min(280px,calc(100vw - 40px));
  max-height:320px;overflow-y:auto;
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:5px;
  box-shadow:0 2px 6px rgba(15,23,42,.06),0 16px 36px rgba(15,23,42,.16);
}
.shi-dd-opt{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border:none;border-radius:8px;background:none;
  font-family:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;
}
.shi-dd-opt:hover,.shi-dd-opt:focus-visible{background:#eef4fb;color:var(--brand);outline:none}
.shi-dd-opt[aria-selected="true"]{font-weight:700}
.shi-dd-opt[aria-selected="true"]::after{
  content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto;
}

/* ---- quiet footer action under a list ---- */
.shi-foot{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:14px;padding:14px 16px;
  border:1px solid var(--border-light);border-radius:14px;background:var(--bg-card);
}
.shi-foot-t{font-size:15px;font-weight:700;color:var(--ink)}
.shi-foot-s{font-size:13.5px;color:var(--ink-muted);margin-top:2px}
.shi-foot .shi-btn{margin-left:auto}
@media (max-width:600px){
  .shi-foot{gap:10px}
  .shi-foot .shi-btn{margin-left:0;width:100%;justify-content:center}
}
.shi-input,.shi-select,.shi-textarea{border:1px solid var(--border);border-radius:8px;padding:7px 10px;
  font-size:16px;font-family:inherit;background:#fff;color:var(--ink);width:100%}
.shi-search{border-radius:999px;padding:5px 12px;font-size:15px;min-width:200px;width:auto}

/* ---------- card & rows ---------- */
.shi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
/* The group heading is the collapse control, so it is a real button: the whole strip is
   the target, and it reaches the keyboard without extra wiring. */
.shi-grp{display:flex;align-items:baseline;gap:8px;padding:15px 20px 8px;
  width:100%;background:none;border:0;border-bottom:1px solid var(--border-light);
  font-family:inherit;color:var(--ink);text-align:left;cursor:pointer}
.shi-grp:hover{background:#f7fafd}
.shi-grp:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.shi-grp-cx{width:11px;height:8px;flex:0 0 auto;align-self:center;color:var(--ink-faint);
  transition:transform .15s ease}
.shi-grp[aria-expanded="false"] .shi-grp-cx{transform:rotate(-90deg)}
.shi-grp-t{font-size:16px;font-weight:600}
/* The count carries the group when it is shut and the rows are not there to be counted. */
.shi-grp-n{align-self:center;font-size:13px;font-weight:700;color:var(--ink-muted);
  background:var(--bg-page);border:1px solid var(--border-light);border-radius:999px;
  padding:1px 9px;font-variant-numeric:tabular-nums}
.shi-grp-s{font-size:15px;color:var(--ink-faint)}
.shi-grp-c{margin-left:auto;align-self:center}

.shi-row{display:grid;grid-template-columns:62px 1fr 168px 132px 104px 76px;gap:10px;align-items:center;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #f5f5f5;
  padding:9px 20px;cursor:pointer;font-size:16px;color:var(--ink)}
.shi-row:hover{background:#f8fafc}
.shi-row:last-child{border-bottom:0}
.shi-nm{font-weight:600;display:block}
.shi-mt{font-size:15px;color:var(--ink-faint);display:block;margin-top:1px}
.shi-lc{font-size:15px;color:var(--ink-muted)}
.shi-num{font-variant-numeric:tabular-nums;font-size:15px;text-align:right}
.shi-empty{padding:40px 20px;text-align:center;color:var(--ink-faint)}

.shi-st{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid;
  white-space:nowrap;display:inline-block}
.shi-st.out,.shi-st.critical{background:var(--red-bg);color:#b91c1c;border-color:var(--red-border)}
.shi-st.low{background:var(--amber-bg);color:#92400e;border-color:var(--amber-border)}
.shi-st.ok{background:var(--green-bg);color:#136b33;border-color:var(--green-border)}
.shi-st.info{background:var(--blue-bg);color:#0369a1;border-color:var(--blue-border)}

.shi-bar{height:4px;background:#f0f0f0;border-radius:2px;overflow:hidden;margin-top:5px;max-width:190px}
.shi-bar i{display:block;height:100%;border-radius:2px}

/* ---------- buttons ---------- */
.shi-btn{border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 14px;
  font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.shi-btn:hover{background:#f8fafc}
.shi-btn.dark{background:var(--brand);color:#fff;border-color:var(--brand)}
.shi-btn.dark:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.shi-btn.warn{color:#b91c1c;border-color:var(--red-border);background:var(--red-bg)}
.shi-btn[disabled]{opacity:.5;cursor:default}
.shi-btnrow{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- drawer ---------- */
.shi-scrim{position:fixed;inset:0;background:rgba(15,23,42,.3);opacity:0;pointer-events:none;
  transition:opacity .18s;z-index:9998}
.shi-scrim.on{opacity:1;pointer-events:auto}
.shi-drawer{position:fixed;top:0;right:0;height:100%;width:min(540px,100%);background:#fff;
  border-left:1px solid var(--border);z-index:9999;transform:translateX(100%);transition:transform .22s ease;
  overflow-y:auto;box-shadow:-14px 0 40px rgba(15,23,42,.1);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.5;color:#0f172a}
.shi-drawer.on{transform:none}
/* The sticky header must sit above everything in the body that scrolls under it. The photo
   remove buttons are positioned and come later in the DOM, so an equal z-index let them win. */
.shi-dh{padding:20px 22px 14px;border-bottom:1px solid var(--border-light);position:sticky;top:0;
  background:#fff;z-index:20}
.shi-dx{position:absolute;top:16px;right:16px;border:1px solid var(--border);background:#fff;border-radius:999px;
  width:27px;height:27px;cursor:pointer;color:var(--ink-muted);font-size:18px;line-height:1}
.shi-dt{font-size:21px;font-weight:700;margin:6px 0 2px;padding-right:34px}
.shi-dh-foot{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.shi-dh-acts{margin-left:auto}
.shi-db{padding:18px 22px 70px}
/* Sticky save bar at the foot of the item form. Negative side margins span the drawer's
   full width past .shi-db's padding; the negative bottom margin swallows that padding so
   the bar sits flush at the end of the scroll instead of floating 70px above it. */
.shi-formbar{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;align-items:center;
  margin:22px -22px -70px;padding:12px 22px max(12px,calc(env(safe-area-inset-bottom) + 12px));
  background:#fff;border-top:1px solid var(--border);box-shadow:0 -6px 22px rgba(15,23,42,.12)}
.shi-formbar .shi-btn{flex:0 0 auto;white-space:nowrap}
.shi-blk{margin-bottom:22px}
.shi-bl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.shi-switchrow{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--ink)}
.shi-switchrow .shi-switch{position:absolute;opacity:0;width:0;height:0}
.shi-switchui{flex:0 0 auto;width:38px;height:22px;border-radius:11px;background:#cfd6e0;position:relative;transition:background .15s}
.shi-switchui::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.shi-switch:checked + .shi-switchui{background:var(--brand,#0c71c3)}
.shi-switch:checked + .shi-switchui::after{left:19px}
.shi-switch:focus-visible + .shi-switchui{outline:2px solid var(--brand,#0c71c3);outline-offset:2px}
.shi-spec{display:grid;grid-template-columns:142px 1fr;gap:5px 12px;font-size:15px;margin:0}
.shi-spec dt{color:var(--ink-muted)}
.shi-spec dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;word-break:break-word}

/* A note is read on a phone, in a garage, holding the thing it is about. */
.shi-note{border-radius:6px;padding:11px 13px;font-size:16px;line-height:1.5;border:1px solid;
  white-space:pre-wrap;overflow-wrap:anywhere}
.shi-note.amber{background:var(--amber-bg);border-color:var(--amber-border);color:#78350f}
.shi-note.blue{background:var(--blue-bg);border-color:var(--blue-border);color:#0c4a6e}
.shi-note.green{background:var(--green-bg);border-color:var(--green-border);color:#14532d}
.shi-note.red{background:var(--red-bg);border-color:var(--red-border);color:#7f1d1d}

/* media */
.shi-media{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
/* isolate, so the remove button's z-index stays inside the tile instead of competing with
   the sticky header for the drawer's stacking context */
.shi-thwrap{position:relative;aspect-ratio:1;isolation:isolate}
.shi-th{position:relative;width:100%;height:100%;border-radius:9px;border:1px solid var(--border-light);
  background:#f8fafc;overflow:hidden;display:block;padding:0;cursor:zoom-in}
.shi-th img{width:100%;height:100%;object-fit:cover;display:block}
/* A photo whose request failed: say so in the tile instead of leaving an empty box.
   The onerror handler removes the <img> and adds .broken to the button. */
.shi-th.broken{display:flex;align-items:center;justify-content:center;background:#fff7ed;
  border-color:#fdba74;color:#9a3412;font-size:10px;font-weight:600;text-align:center;padding:4px}
.shi-th.broken::after{content:"Would not load"}
/* Same for the full-screen viewer, which is otherwise pure black. */
.shi-lb-fail{color:#e2e8f0;font-size:15px;text-align:center;line-height:1.7;padding:24px}
.shi-lb-fail a{color:#7dd3fc}
.shi-th.vid{background:#0f172a;color:#cbd5e1;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:3px;font-size:12px;font-weight:600;border-color:#0f172a}
.shi-thwrap .rm{position:absolute;top:4px;right:4px;width:23px;height:23px;border-radius:999px;border:0;
  background:rgba(15,23,42,.72);color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0;z-index:2}

/* ---------- lightbox ---------- */
.shi-lb{position:fixed;inset:0;z-index:10002;background:rgba(8,12,20,.93);
  display:none;align-items:center;justify-content:center}
.shi-lb.on{display:flex}
body.shi-lb-open{overflow:hidden}
.shi-lb-stage{max-width:92vw;max-height:86vh;display:flex;align-items:center;justify-content:center}
.shi-lb-media{max-width:92vw;max-height:86vh;width:auto;height:auto;display:block;
  border-radius:6px;box-shadow:0 18px 60px rgba(0,0,0,.5);background:#0f172a}
.shi-lb-x{position:absolute;top:16px;right:18px;width:46px;height:46px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(15,23,42,.65);color:#fff;
  font-size:27px;line-height:1;cursor:pointer;padding:0;z-index:2}
.shi-lb-x:hover{background:rgba(255,255,255,.16)}
.shi-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:68px;
  border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(15,23,42,.5);
  color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:0}
.shi-lb-nav:hover{background:rgba(255,255,255,.16)}
.shi-lb-nav.prev{left:14px}
.shi-lb-nav.next{right:14px}
.shi-lb-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#e2e8f0;
  font-size:15px;padding:0 70px;pointer-events:none;word-break:break-word}
.shi-lb-count{color:#94a3b8;margin-left:8px}
@media (max-width:560px){
  .shi-lb-nav{width:36px;height:48px;font-size:27px}
  .shi-lb-cap{padding:0 16px;bottom:10px}
}
.shi-doc{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border-inner);font-size:15px}
.shi-doc:last-child{border-bottom:0}
.shi-doc .g{width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex:none}
.shi-doc .dn{font-weight:600;display:block}
.shi-doc .ds{color:var(--ink-faint);font-size:15px}
.shi-doc .dlink{flex:1;min-width:0;color:var(--ink);text-decoration:none;display:block}
.shi-doc .dlink:hover .dn,.shi-doc .dlink:focus-visible .dn{color:var(--brand);text-decoration:underline}
.shi-doc .dlink .dn{overflow-wrap:anywhere}

/* counter */
.shi-counter{display:flex;align-items:center;gap:14px;margin:2px 0 10px;flex-wrap:wrap}
/* Flex-centred rather than relying on line-height: a glyph sits on its baseline, so
   line-height:1 leaves the minus and plus riding high in the circle rather than centred. */
.shi-cbtn{width:46px;height:46px;border-radius:999px;border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;
  font-size:24px;font-weight:600;color:var(--ink);cursor:pointer;line-height:1;
  transition:background .12s ease,border-color .12s ease,color .12s ease}
/* One hover for both counter buttons. The mark is drawn with currentColor, so colouring
   the button colours the mark with it. :active carries the same feedback to touch, where
   hover never fires at all. */
.shi-cb:hover,.shi-cbtn:hover{background:#eaf3fc;border-color:var(--brand);color:var(--brand)}
.shi-cb:active,.shi-cbtn:active{background:#d6e7f7;border-color:var(--brand-dark);color:var(--brand-dark)}
.shi-cb:focus-visible,.shi-cbtn:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-color:var(--brand);color:var(--brand)}
/* The drawn plus and minus. Sized per button; the 20x20 viewBox is already centred, so
   there is nothing to nudge and both marks match each other exactly. */
.shi-pm{display:block;width:17px;height:17px}
.shi-cbtn .shi-pm{width:21px;height:21px}
.shi-cnum{font-size:37px;font-weight:700;font-variant-numeric:tabular-nums;width:112px;text-align:center;
  border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);padding:2px 4px;
  font-family:inherit;cursor:text}
.shi-cnum:hover{border-color:var(--border-light);background:#f8fafc}
.shi-cnum:focus{border-color:var(--brand);background:#fff;outline:none}
.shi-cunit{font-size:15px;color:var(--ink-muted);text-align:center}

/* ledger */
.shi-led{font-size:15px}
.shi-led div{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--border-inner)}
.shi-led div:last-child{border-bottom:0}
.shi-led .w{color:var(--ink-faint);width:78px;flex:none;font-variant-numeric:tabular-nums}
.shi-led .q{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}

/* form */
.shi-field{margin-bottom:12px;min-width:0}
.shi-field .shi-input,.shi-field .shi-select,.shi-field .shi-textarea{max-width:100%}
.shi-field label{display:block;font-size:14px;font-weight:600;color:var(--ink-muted);margin-bottom:4px}
.shi-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shi-two>*{min-width:0}
.shi-hint{font-size:15px;color:var(--ink-faint);margin-top:4px}

/* ---------- restock ---------- */
.shi-vend{padding:15px 20px;border-bottom:1px solid var(--border-light)}
.shi-vend:last-child{border-bottom:0}
.shi-vh{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.shi-vn{font-weight:600}
.shi-vt{margin-left:auto;font-weight:700;color:var(--green-text);font-variant-numeric:tabular-nums}
.shi-line{display:grid;grid-template-columns:22px 1fr 144px 104px 88px;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--border-inner);font-size:15px;cursor:pointer}
.shi-line:last-child{border-bottom:0}
.shi-line.done .shi-nm{text-decoration:line-through;color:var(--ink-faint)}
.shi-chk{width:15px;height:15px;accent-color:var(--green);cursor:pointer}

/* ---------- geolocation ---------- */
.shi-geobar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;max-width:520px}
.shi-geo-status{font-size:15px;color:var(--ink-muted);flex:1;min-width:180px}

/* ---------- per property sections ---------- */
.shi-propsec{margin-bottom:30px}
.shi-prophead{display:flex;align-items:baseline;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.shi-prophead-name{font-size:18px;font-weight:700}
.shi-prophead-addr{font-size:15px;color:var(--ink-faint)}

/* ---------- lists: expandable rows, bulk assign ---------- */
.shi-orglabel{font-size:14px;font-weight:600;color:var(--ink-muted);margin-right:2px}
.shi-expand{flex:1;min-width:140px;display:flex;align-items:baseline;gap:8px;background:none;border:0;
  padding:0;text-align:left;cursor:pointer;color:var(--ink);flex-wrap:wrap}
.shi-caret{color:var(--ink-faint);font-size:12px;width:12px;flex:none}
/* A shelf or bin sits indented under its closet, with a small chevron so the nesting reads. */
.shi-listrow.sub{padding-left:44px;background:#fbfcfd}
.shi-listrow.sub .shi-nm::before{content:"\203a";color:var(--ink-faint);margin-right:6px;font-weight:400}
.shi-listrow.sub+.shi-sublist{padding-left:62px}
.shi-dd-opt.sub{padding-left:30px}
.shi-dd-opt.sub::before{content:"\203a";color:var(--ink-faint);margin-right:6px}
.shi-listrow.unsorted{background:var(--amber-bg)}
.shi-listrow.unsorted .shi-nm{color:#92400e}
.shi-listrow.open{border-bottom:0}
.shi-sublist{padding:2px 20px 12px 38px;border-bottom:1px solid #f5f5f5;background:#fcfdfe}
.shi-subhead{padding:6px 0}
.shi-orgrow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border-inner)}
.shi-orgrow:last-child{border-bottom:0}
.shi-orgrow.picked{background:var(--blue-bg)}
.shi-orgthumb{width:40px;height:40px;flex:none;border-radius:6px;object-fit:cover;
  border:1px solid var(--border-light);background:#f8fafc;display:block}
.shi-orgthumb.empty{display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);font-size:17px}
.shi-orgname{flex:1;min-width:140px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--ink)}
.shi-orgname:hover .shi-nm{text-decoration:underline}

.shi-bulk{position:sticky;bottom:0;z-index:30;padding:10px 0 0;margin-top:8px}
.shi-bulk-in{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--brand);color:#fff;
  border-radius:999px;padding:10px 16px;box-shadow:0 10px 30px rgba(15,23,42,.22)}
.shi-bulk-n{font-weight:700;font-variant-numeric:tabular-nums}
.shi-bulk-lbl{font-size:13px;color:rgba(255,255,255,.85)}
.shi-bulk-warn{font-size:15px;color:#fecaca}
.shi-bulk .shi-input{background:#fff;color:var(--ink)}
/* On a coloured bar the primary action has to invert, or a blue button on a blue bar
   vanishes and the quiet one ends up looking like the main action. */
.shi-bulk .shi-btn.dark{background:#fff;color:var(--brand);border-color:#fff;
  font-weight:700;padding:8px 20px}
.shi-bulk .shi-btn.dark:hover{background:#e8f2fb;border-color:#e8f2fb;color:var(--brand-dark)}
.shi-bulk .shi-btn:not(.dark){background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.shi-bulk .shi-btn:not(.dark):hover{background:rgba(255,255,255,.18);color:#fff;
  border-color:rgba(255,255,255,.75)}
.shi-bulk .shi-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- lists ---------- */
.shi-listrow{display:flex;align-items:center;gap:8px;padding:9px 20px;
  border-bottom:1px solid #f5f5f5;flex-wrap:wrap}
.shi-listrow:last-of-type{border-bottom:0}
.shi-listrow.editing{background:#f8fafc;align-items:flex-start}
.shi-listrow .shi-input{width:auto;flex:1;min-width:160px}
.shi-listadd{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--border-light);background:#fafafa}
.shi-listadd .shi-input{flex:1;width:auto}

/* ---------- count mode ---------- */
.shi-count-wrap{max-width:520px}
.shi-crow{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid #f5f5f5}
.shi-crow:last-of-type{border-bottom:0}
.shi-cctrl{margin-left:auto;display:flex;align-items:center;gap:8px}
.shi-cb{width:36px;height:36px;border-radius:999px;border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;
  font-size:20px;line-height:1;cursor:pointer;color:var(--ink);
  transition:background .12s ease,border-color .12s ease,color .12s ease}
.shi-cn{width:74px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;font-size:18px;
  border:1px solid var(--border-light);border-radius:8px;background:#fff;color:var(--ink);
  padding:5px 4px;font-family:inherit;cursor:text}
.shi-cn:focus{border-color:var(--brand);outline:none}
/* spinners are useless sitting between real plus and minus buttons */
.shi-cn::-webkit-outer-spin-button,.shi-cn::-webkit-inner-spin-button,
.shi-cnum::-webkit-outer-spin-button,.shi-cnum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.shi-cn[type=number],.shi-cnum[type=number]{-moz-appearance:textfield;appearance:textfield}
.shi-crow.moved{background:#f4f9ff}
.shi-was{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  background:var(--blue-bg);border:1px solid var(--blue-border);color:#0369a1;
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.shi-was b{font-weight:700}
.shi-was b.up{color:var(--green)}
.shi-was b.down{color:#b91c1c}
/* ---------- label scanner ---------- */
.shi-scan{position:fixed;inset:0;z-index:10010;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(15,23,42,.62)}
.shi-scan-card{width:min(420px,100%);background:var(--bg-card);border-radius:18px;padding:16px;
  text-align:center;box-shadow:0 20px 60px rgba(15,23,42,.35)}
/* Deliberately does NOT size the video. html5-qrcode places its white corner markers in
   pixels worked out from the video dimensions IT set, so forcing the video into a square
   with object-fit:cover cropped the picture while leaving the overlay where it was, and
   the corners stopped matching what the camera was actually showing. The library owns the
   layout in here; this only rounds the corner and stops it collapsing before the camera
   starts. */
.shi-scan-view{border-radius:12px;overflow:hidden;background:#0f172a;min-height:220px}
.shi-scan-msg{font-size:15px;color:var(--ink-muted);margin:12px 0 14px;line-height:1.45;min-height:2.9em}
@media (prefers-reduced-motion:reduce){.shi-scan{transition:none}}

/* ---------- people ---------- */
.shi-person{display:flex;align-items:center;gap:12px;padding:12px 20px;
  border-bottom:1px solid var(--border-inner)}
.shi-person:last-child{border-bottom:0}
.shi-person-n{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;
  font-size:15.5px;font-weight:600;color:var(--ink)}
.shi-person-e{font-size:13.5px;font-weight:400;color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shi-person-r{font-size:13px;color:var(--ink-muted);text-transform:capitalize;flex:0 0 auto}
.shi-person-a{margin-left:auto;flex:0 0 auto}
.shi-person-a .shi-pill{white-space:nowrap}
.shi-person-add{padding:12px 20px;border-bottom:1px solid var(--border-inner)}
.shi-invite{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;margin-bottom:4px}
.shi-invite .shi-btn{margin-left:auto;flex:0 0 auto;white-space:nowrap}
@media (max-width:700px){
  .shi-invite{padding:14px;gap:10px}
  .shi-invite .shi-btn{margin-left:0;width:100%;justify-content:center}
}
@media (max-width:700px){
  .shi-person-add{padding:12px 14px}
  .shi-person-add .shi-btn{width:100%;justify-content:center}
}
@media (max-width:700px){
  /* Same treatment as the rows: name and email take the full width, role and the switch
     share the line under it, rather than three things fighting over one narrow row. */
  .shi-person{flex-wrap:wrap;gap:6px 10px;padding:12px 14px}
  .shi-person-n{flex:0 0 100%}
  .shi-person-r{order:2}
  .shi-person-a{order:3}
}

/* The count's save bar. Pinned to the bottom and only rendered once something has
   changed, because at the end of a ninety-row closet list nobody ever saw it. */
.shi-savebar{
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  background:var(--bg-card); border-top:1px solid var(--border);
  box-shadow:0 -6px 26px rgba(15,23,42,.13);
  padding:11px max(16px,env(safe-area-inset-right)) max(11px,calc(env(safe-area-inset-bottom) + 11px))
              max(16px,env(safe-area-inset-left));
  animation:shi-rise .18s ease-out;
}
.shi-savebar-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px}
.shi-savebar-t{font-size:15px;color:var(--ink-muted)}
/* flex:0 0 auto is the actual fix for the label wrapping: the button was being squeezed
   by the text beside it until "Save count" broke across two lines. */
.shi-savebar .shi-btn{margin-left:auto;flex:0 0 auto;white-space:nowrap}
/* Keeps the last row and the hint clear of the bar. */
.shi-savebar-space{height:76px}
@keyframes shi-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.shi-savebar{animation:none}}

/* ---------- labels sheet ---------- */
.shi-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shi-label{border:1px dashed var(--border);border-radius:12px;padding:14px;text-align:center;background:#fff}
.shi-label canvas,.shi-label img{width:104px;height:104px;display:block;margin:0 auto 8px}
.shi-label .ln{font-weight:700;font-size:16px}
.shi-label .ls{font-size:15px;color:var(--ink-muted)}

/* ---------- small dialog ---------- */
.shi-ask{position:fixed;inset:0;z-index:10005;background:rgba(15,23,42,.42);
  display:flex;align-items:center;justify-content:center;padding:20px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.5;color:var(--ink)}
.shi-ask-card{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;
  box-shadow:0 24px 60px rgba(15,23,42,.28);padding:22px 24px;width:min(460px,100%);
  max-height:90vh;overflow-y:auto}
.shi-ask-title{font-size:20px;font-weight:700;margin-bottom:4px}
.shi-ask-hint{font-size:15px;color:var(--ink-muted);margin-bottom:16px;max-width:44ch}
.shi-ask-form .shi-field{margin-bottom:14px}

/* ---------- toast ---------- */
.shi-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:16px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:10000}
.shi-toast.on{opacity:1;transform:translateX(-50%)}

@media (max-width:980px){
  .shi-kpis{grid-template-columns:repeat(3,1fr)}
  .shi-row{grid-template-columns:56px 1fr 104px 72px}
  .shi-row .sm{display:none}
  .shi-line{grid-template-columns:22px 1fr 100px 84px}
  .shi-line .sm{display:none}
  .shi-labels{grid-template-columns:repeat(2,1fr)}
}

/* ---------- phones ----------
   The theme constrains its content column, which left the app in a narrow strip, and the
   row grid squeezed the name into whatever was left between the tag and the badge. On a
   phone the row stops being a table: tag and status share the top line, and the name and
   its detail get the full width underneath. */
@media (max-width:700px){
  /* Widen by relaxing the theme's own content column rather than breaking out with vw.
     A vw breakout counts the scrollbar in its width, so on any browser with a classic
     scrollbar it ends up a few pixels wider than the page and you get a sideways scroll. */
  body.shi-page .wp-block-post-content,
  body.shi-page .entry-content,
  body.shi-page .wp-block-group.is-layout-constrained{
    max-width:none; padding-left:0; padding-right:0;
  }
  .shi-app{
    width:100%; max-width:none; margin-left:0; margin-right:0;
    padding-left:8px; padding-right:8px;
    overflow-x:clip;   /* belt and braces: nothing inside may push the page sideways */
  }

  .shi-row{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:6px 10px; padding:13px 14px;
  }
  .shi-row > :first-child{order:1}                       /* property tag */
  .shi-row > :last-child{order:2; margin-left:auto}      /* status badge */
  .shi-row > :nth-child(2){order:3; flex:0 0 100%; min-width:0}   /* name and detail */
  .shi-row .shi-nm{font-size:17px}
  .shi-row .shi-mt{margin-top:3px}
  .shi-bar{max-width:none}

  /* the shopping list gets the same treatment */
  .shi-line{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:6px 10px; padding:12px 0;
  }
  .shi-line > :first-child{order:1}                      /* tick box */
  .shi-line > :nth-child(2){order:2; flex:1 1 auto; min-width:0}
  .shi-line > :nth-child(4){order:3; margin-left:auto}    /* quantity to order */
  .shi-line > :last-child{order:4}                        /* line total */

  .shi-vend{padding:14px}
  /* The subtitle was being squeezed into whatever space was left between the count and
     the status pill, wrapping to three lines in a narrow middle column. Same fix as the
     item rows: the identifying bits share the top line, the description gets the full
     width underneath. The header comes out SHORTER than it was, not taller. */
  /* The drawer's close button was a 27px circle with a hairline border and a faint glyph:
     under the 44px minimum touch target, and easy to miss against the white header.
     Filled, darker and full size. Deliberately not brand blue, which would compete with
     the Edit button sitting just below it. */
  .shi-dx{
    top:10px; right:10px; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-page); border:1px solid var(--border);
    color:var(--ink); font-size:28px; font-weight:600;
  }
  .shi-dx:active{background:#dfe6ee}
  /* Keep the header's top lines clear of it. The action row underneath is nowhere near the
     button, so it takes the padding back rather than sitting inset from the right edge. */
  .shi-dh{padding:16px 62px 12px 16px}
  .shi-dh-foot{margin-right:-46px}
  .shi-dt{padding-right:0}

  .shi-grp{
    flex-wrap:wrap; align-items:center;
    gap:4px 9px; padding:13px 14px 11px;
  }
  .shi-grp-cx{order:1}
  .shi-grp-t{order:2}
  .shi-grp-n{order:3}
  .shi-grp-c{order:4; margin-left:auto}
  .shi-grp-s{order:5; flex:0 0 100%; margin:0; font-size:14px; line-height:1.35}
  .shi-listrow{padding:11px 14px}
  .shi-sublist{padding:2px 14px 12px 26px}
  .shi-crow{padding:12px 14px}
  .shi-listadd{padding:12px 14px}
  .shi-filters{gap:6px}
  /* On a phone the search box was one more pill in the row and easy to miss. It gets its
     own full-width line under the filters, bigger text and a magnifier, so it reads as
     the search and not as a filter. Desktop keeps the compact inline box. */
  .shi-filters .shi-search{
    flex:0 0 100%; width:100%; min-width:0; order:9; margin-top:6px;
    font-size:17px; padding:12px 14px 12px 44px; border:2px solid #b9cbe4; border-radius:14px;
    background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") no-repeat 14px center / 21px 21px;
    box-shadow:0 2px 8px rgba(15,23,42,.06)}
  .shi-filters .shi-search:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(12,113,195,.18)}
  .shi-filters .shi-search::placeholder{color:#64748b}
  /* The Clear button beside the Count Mode search follows it onto its own line. */
  .shi-filters .shi-search + .shi-btn{order:10}
  .shi-head{gap:10px}
  .shi-head-right{width:100%; margin-left:0}
  .shi-head-right .shi-btn{flex:1; justify-content:center; text-align:center}
  .shi-head-pills .shi-pill{padding:4px 9px; font-size:12.5px}
  .shi-head-pills .shi-langsel{max-width:104px}
  .shi-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .shi-pill-txt{display:none}
  .shi-head-pills [data-act="geo-toggle"]{padding:4px 8px}

  /* The six figures ate the whole screen before you saw a single item. */
  .shi-kpi-toggle{
    display:flex; align-items:center; gap:9px; width:100%;
    background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
    padding:11px 14px; margin-bottom:12px; cursor:pointer;
    font-family:inherit; font-size:15px; color:var(--ink); text-align:left;
  }
  .shi-kpi-toggle .cx{color:var(--ink-faint); font-size:12px; width:12px; flex:none}
  .shi-kpi-toggle .lbl{font-weight:700}
  .shi-kpi-toggle .sum{margin-left:auto; color:var(--ink-muted); font-size:14px;
    font-variant-numeric:tabular-nums; text-align:right}
  .shi-kpis.collapsed{display:none}
  .shi-kpis{grid-template-columns:repeat(2,1fr); margin-bottom:14px}
}
@media (max-width:600px){
  .shi-mascot{width:44px;height:44px}
  .shi-app .shi-h1{font-size:24px}
  .shi-note{font-size:17px;padding:12px 14px}
}
@media (max-width:520px){
  .shi-kpis{grid-template-columns:repeat(2,1fr)}
  .shi-kpi{padding:14px}.shi-kpi-val{font-size:28px}
  .shi-two{grid-template-columns:1fr}
  .shi-labels{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.shi-app *,.shi-drawer,.shi-scrim,.shi-toast{transition:none!important}}

@media print{
  body *{visibility:hidden}
  .shi-print,.shi-print *{visibility:visible}
  .shi-print{position:absolute;left:0;top:0;width:100%}
  .shi-noprint{display:none!important}
  .shi-labels{grid-template-columns:repeat(3,1fr)}
}

/* ---------- in-page camera ---------- */
/* Unlike the label scanner above, sizing the video here is safe and wanted: nothing draws
   an overlay on top of this one, so there is no marker to fall out of step with the frame.
   object-fit:contain rather than cover on purpose - the whole frame is what gets captured,
   so the whole frame is what you should be looking at while you line the shot up. */
.shi-cam{position:fixed;inset:0;z-index:10010;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(15,23,42,.72)}
.shi-cam-card{width:min(480px,100%);background:var(--bg-card);border-radius:18px;padding:16px;
  text-align:center;box-shadow:0 20px 60px rgba(15,23,42,.35)}
.shi-cam-view{position:relative;border-radius:12px;overflow:hidden;background:#0f172a;
  aspect-ratio:3/4;max-height:60vh;display:flex;align-items:center;justify-content:center}
/* .shi-cam-video sets display:block, which would otherwise beat the browser's [hidden]. */
.shi-cam-view [hidden]{display:none!important}
.shi-cam-video,.shi-cam-shot{display:block;width:100%;height:100%;object-fit:contain}
.shi-cam-rec{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;background:rgba(15,23,42,.75);color:#fff;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.shi-cam-rec i{width:9px;height:9px;border-radius:50%;background:#ef4444;
  animation:shi-blink 1.1s steps(1,end) infinite}
@keyframes shi-blink{50%{opacity:.15}}
.shi-cam-msg{font-size:15px;color:var(--ink-muted);margin:12px 0 14px;line-height:1.45;min-height:2.9em}
/* The shutter is the whole point of this dialog, so it gets the width and the weight, and
   the things you press by mistake get neither. */
.shi-cam-bar{display:flex;flex-direction:column;gap:10px}
.shi-cam-go{width:100%;padding:13px 18px;font-size:17px;border-radius:14px}
.shi-cam-alt{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.shi-cam-quiet{border-color:transparent;background:transparent;color:var(--ink-faint);padding:6px 12px}
.shi-cam-quiet:hover{background:#f1f5f9}
/* Stop and save is the same big control turned red, not the tinted pill .warn gives. */
.shi-btn.shi-cam-go.warn{background:#dc2626;border-color:#dc2626;color:#fff}
.shi-btn.shi-cam-go.warn:hover{background:#b91c1c;border-color:#b91c1c}
@media (prefers-reduced-motion:reduce){.shi-cam-rec i{animation:none}}

/* settings tab: this app's own section under the shared account panel */
.shi-setrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border-inner)}
.shi-setrow:last-of-type{border-bottom:0}
.shi-setrow label{font-size:14px;font-weight:600;color:var(--ink-muted);display:inline-flex;align-items:center;gap:6px}
.shi-setrow .shi-input.narrow{width:84px;padding:4px 8px}
.shi-setname{font-weight:600;min-width:12em}
.shi-link{background:none;border:0;padding:0;color:var(--brand);font-weight:600;cursor:pointer;font-family:inherit;font-size:inherit;text-decoration:underline;text-underline-offset:2px}
.shi-setperson{padding-left:22px}
.shi-setperson .shi-setname{font-weight:500}
.shi-setrow select.shi-accsel{width:auto;padding:4px 8px;font-size:14px;margin-left:auto}
.shi-setperson .shi-st{margin-left:auto}

/* the language pill in the header: a select drawn as a pill */
.shi-langsel{-webkit-appearance:none;appearance:none;padding-right:28px;font-family:inherit;line-height:1.35;max-width:130px;cursor:pointer;
  background-color:#fff;background-repeat:no-repeat;background-position:right 10px center;background-size:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%232d3748' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.shi-langsel option{background:#fff;color:var(--ink)}

/* Not included on the account (entitlements, 2026-09-15) */
.shi-notice-off{background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:10px 14px;border-radius:10px;margin-bottom:12px}
/* Top menu tabs: the underline marks the selected one. No box (focus ring) around a tab that is pressed or was just clicked. */
.shi-app .shi-tab:focus,.shi-app .shi-tab:focus-visible,.shi-app .shi-tab:active,.shi-tabs .shi-tab:focus,.shi-tabs .shi-tab:focus-visible,.shi-tabs .shi-tab:active{outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent}