/* admin-help.css — the crew studio's Help requests tab (admin-help.js): request cards and the photo picker.
   Uses the studio's own tokens (admin-theme.css), so it follows the light/dark studio theme. */
.nav-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--soi-terracotta);color:#fff;font:600 11px/1 var(--sans,system-ui)}

.help-list{display:grid;gap:14px;margin-top:20px}
.help-card{display:grid;grid-template-columns:112px 1fr;gap:16px;padding:16px;background:var(--soi-surface);border:1px solid var(--soi-sand);border-radius:var(--radius-card,16px)}
.help-card.is-found{opacity:.78}
.help-selfie{width:112px;height:140px;object-fit:cover;border-radius:12px;background:var(--soi-linen)}
.help-selfie.is-gone{display:grid;place-items:center;font-size:12px;color:var(--soi-umber-soft)}
.help-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.help-body .eyebrow{margin:0}
.help-contact{margin:0;font-weight:600;overflow-wrap:anywhere}
.help-contact a{color:inherit}
.help-meta{margin:0;font-size:13px;color:var(--soi-umber-soft)}
.help-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;padding-top:8px}
.help-actions .publish-btn{width:auto;padding-inline:18px}
@media (max-width:560px){.help-card{grid-template-columns:84px 1fr}.help-selfie{width:84px;height:108px}}

.help-picker{width:min(1000px,calc(100vw - 24px));max-height:calc(100svh - 24px);padding:0;border:1px solid var(--soi-sand);border-radius:var(--radius-card,16px);background:var(--soi-surface);color:inherit;overflow:hidden}
.help-picker[open]{display:flex;flex-direction:column}
.help-picker{margin:auto}   /* admin-theme.css zeroes every margin, which pinned these dialogs to the top-left corner */
.help-picker::backdrop{background:rgba(0,0,0,.6)}
.help-picker-head{position:relative;display:flex;align-items:center;gap:16px;padding:16px 56px 16px 16px;border-bottom:1px solid var(--soi-sand)}
.help-picker-head h3{margin:2px 0}
.help-picker-head .eyebrow{margin:0}
.help-picker-note{margin:0;font-size:13px;color:var(--soi-umber-soft)}
.help-picker-selfie{flex:none;width:88px;height:110px;object-fit:cover;border-radius:12px;background:var(--soi-linen)}
.help-picker-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:999px;font-size:22px;line-height:1}
.help-grid{flex:1 1 auto;min-height:0;overflow:auto;display:grid;grid-auto-rows:max-content;align-content:start;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:12px}
.help-thumb{position:relative;aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--soi-linen);cursor:pointer}
.help-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.help-tick{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:var(--verdict-same,#3FB950);color:#fff;font:700 14px/1 var(--sans,system-ui);opacity:0;transform:scale(.6);transition:opacity 140ms ease,transform 220ms cubic-bezier(.34,1.56,.64,1)}
.help-thumb[aria-pressed=true]{border-color:var(--verdict-same,#3FB950)}
.help-thumb[aria-pressed=true] .help-tick{opacity:1;transform:scale(1)}
.help-thumb.is-had{cursor:default;opacity:.45}
.help-had{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:999px;background:#14232DCC;color:#fff;font:600 11px/1.4 var(--sans,system-ui)}
.help-picker-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--soi-sand)}
.help-picker-foot .publish-btn{width:auto;padding-inline:22px}
.help-picker-status{margin:0;font-size:13px;color:var(--soi-umber-soft)}
@media (max-width:560px){.help-grid{grid-template-columns:repeat(3,1fr)}.help-picker-selfie{width:64px;height:80px}}

/* The picker's three tabs (Face match / Around the same time / All photos), the tools row under them, and the tiles:
   .help-main is the tile's own button, .help-pick the circle that picks (All photos), .help-expand the ⤢ that opens it large. */
.help-tabs{display:flex;gap:4px;padding:10px 16px 0;border-bottom:1px solid var(--soi-sand);overflow-x:auto}
.help-tabs [role=tab]{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--soi-umber-soft);font:600 14px/1.2 var(--sans,system-ui);cursor:pointer}
.help-tabs [role=tab][aria-selected=true]{color:inherit;border-bottom-color:currentColor}
.help-tab-count{min-width:22px;padding:2px 7px;border-radius:999px;background:var(--soi-linen);font-size:12px;text-align:center}
.help-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;padding:10px 16px}
.help-tools:empty{display:none}
.help-tools-note{margin:0;font-size:13px;color:var(--soi-umber-soft)}
.help-slider{display:flex;align-items:center;gap:12px;font-size:14px}
.help-slider b{display:inline-block;min-width:3.2em}
.help-slider input{width:min(280px,50vw);accent-color:var(--verdict-same,#3FB950)}
.help-tile{position:relative;aspect-ratio:1;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--soi-linen)}
.help-tile.is-picked{border-color:var(--verdict-same,#3FB950)}
.help-tile.is-had{opacity:.55}
.help-tile.is-had.opens{opacity:.7}
.help-main{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.help-main img{width:100%;height:100%;object-fit:cover;display:block}
.help-tile.opens .help-main{cursor:zoom-in}
.help-tile .help-tick{pointer-events:none}
.help-tile.is-picked .help-tick{opacity:1;transform:scale(1)}
.help-badge{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:999px;background:#14232DCC;color:#fff;font:600 11px/1.4 var(--sans,system-ui)}
.help-badge--top{bottom:auto;top:6px}
.help-pick,.help-expand{position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;border-radius:999px;display:grid;place-items:center;cursor:pointer;font:700 14px/1 var(--sans,system-ui)}
.help-pick{border:2px solid #fff;background:#14232D66;color:transparent;box-shadow:0 1px 4px #0006}
.help-pick[aria-pressed=true]{background:var(--verdict-same,#3FB950);border-color:var(--verdict-same,#3FB950);color:#fff}
.help-expand{top:auto;bottom:6px;right:6px;border:0;background:#14232DCC;color:#fff;font-size:15px;opacity:.85}
.help-expand:hover,.help-expand:focus-visible{opacity:1}

/* The large view: the photo fills the screen, a bar with previous / pick / next under it. */
.help-viewer{width:min(1400px,calc(100vw - 24px));height:calc(100svh - 24px);max-height:none;margin:auto;padding:0;border:0;border-radius:var(--radius-card,16px);background:#0B1116;color:#fff;overflow:hidden}
.help-viewer[open]{display:flex;flex-direction:column}
.help-viewer::backdrop{background:rgba(0,0,0,.85)}
.help-viewer-img{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;display:block}
.help-viewer-close{position:absolute;top:10px;right:10px;z-index:1;width:40px;height:40px;border:0;border-radius:999px;background:#ffffff26;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.help-viewer-bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid #ffffff1f}
.help-viewer-meta{flex:1 1 auto;min-width:0;margin:0;font-size:13px;color:#ffffffb3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.help-viewer-nav{flex:none;width:44px;height:44px;border:0;border-radius:999px;background:#ffffff1f;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.help-viewer-nav:disabled{opacity:.3;cursor:default}
.help-viewer-pick{flex:none;width:auto;padding-inline:18px}
.help-viewer-pick.is-on{background:var(--verdict-same,#3FB950);border-color:var(--verdict-same,#3FB950)}
@media (max-width:560px){.help-viewer{width:100vw;height:100svh;border-radius:0}.help-viewer-bar{flex-wrap:wrap}.help-viewer-meta{order:-1;flex-basis:100%;white-space:normal}.help-viewer-pick{flex:1}}