/* ═══════════════════════════════════════════════════════════════════
   SHUTTER BUDDY · Photo Drop — /shutter-buddy/
   The photo twin of SHARE It Studio. Snap · Select · Share.
   Uploads go to Supabase storage bucket "ffh-photo-drop" and table
   public.ffh_photo_submissions (see supabase/sql/2026-09-25-shutter-buddy.sql).
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --orange:#e8450a; --orange-2:#c73a08; --gold:#f59e0b; --navy:#0f2044;
  --bg:#f3f5f9; --surface:#ffffff; --sunken:#e9edf4; --ink:#141c33; --ink-2:#44506b; --mute:#6b7792;
  --line:#dde3ec; --line-2:#c6cfdc; --ok:#15803d; --ok-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7; --bad:#b91c1c; --bad-bg:#fee2e2;
  --accent:var(--orange); --focus:#2563eb;
  --display:'Bricolage Grotesque','Figtree',system-ui,sans-serif; --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r:12px; --side:236px; --nav-h:56px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0a1430; --surface:#111f45; --sunken:#0c1838; --ink:#eef2fa; --ink-2:#c3cde0; --mute:#93a0ba; --line:#22345f; --line-2:#2e4478; --ok-bg:#12351f; --warn-bg:#3a2a0c; --bad-bg:#3a1414; --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --focus:#60a5fa; color-scheme:dark; }
}
:root[data-theme="dark"]{ --bg:#0a1430; --surface:#111f45; --sunken:#0c1838; --ink:#eef2fa; --ink-2:#c3cde0; --mute:#93a0ba; --line:#22345f; --line-2:#2e4478; --ok-bg:#12351f; --warn-bg:#3a2a0c; --bad-bg:#3a1414; --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --focus:#60a5fa; color-scheme:dark; }

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:15px/1.5 var(--body); -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
h1,h2,h3{font-family:var(--display); letter-spacing:-.01em; text-wrap:balance; margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

main{padding-block:28px 120px; padding-inline:clamp(16px,4vw,44px); max-width:1040px; width:100%}
.hero{display:flex; gap:18px; align-items:flex-start; margin-bottom:22px}
.hero h1{font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.08; font-weight:800}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero p{color:var(--ink-2); max-width:62ch; margin:.5em 0 0}
.chipline{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; padding:4px 10px; border-radius:99px; background:var(--sunken); color:var(--ink-2)}

section.step{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(16px,2.6vw,26px); margin-bottom:16px; scroll-margin-top:80px}
.step-h{display:flex; gap:12px; align-items:baseline; margin-bottom:14px}
.step-h .num{font:600 .8rem var(--mono); color:var(--accent); flex:none}
.step-h h2{font-size:1.28rem; font-weight:800}
.step-h p{margin:.2em 0 0; color:var(--mute); font-size:.9rem}

/* ── Drop zone ── */
.drop{border:2px dashed var(--line-2); border-radius:14px; padding:26px 16px; text-align:center; background:var(--sunken); cursor:pointer; transition:border-color .15s, background .15s}
.drop:hover,.drop.over{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%, var(--sunken))}
.drop b{display:block; font-family:var(--display); font-size:1.15rem}
.drop span{color:var(--mute); font-size:.88rem}
.drop .big{display:inline-flex; align-items:center; gap:8px; margin-top:12px; background:var(--accent); color:#fff; font-weight:700; padding:12px 20px; border-radius:11px; border:0; font-size:1rem}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; margin-top:14px}
.th{position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--sunken); border:2px solid transparent; cursor:pointer}
.th img{width:100%; height:100%; object-fit:cover; display:block}
.th.pick{border-color:var(--accent)}
.th .x{position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(10,15,30,.72); color:#fff; font-size:.9rem; line-height:1}
.th .star{position:absolute; left:4px; top:4px; font-size:.68rem; font-weight:700; background:var(--accent); color:#fff; padding:2px 6px; border-radius:6px}
.th .st{position:absolute; inset:auto 0 0 0; font:500 .66rem var(--mono); color:#fff; background:rgba(10,15,30,.7); padding:3px 6px}
.th .st.ok{background:rgba(21,128,61,.9)} .th .st.err{background:rgba(185,28,28,.9)}
.gridbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; font-size:.86rem; color:var(--mute)}
.linkbtn{background:none; border:0; color:var(--accent); font-weight:600; padding:0; cursor:pointer}

/* ── Channel picker ── */
.chgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px}
.ch{display:flex; gap:10px; align-items:center; text-align:left; padding:10px; border-radius:11px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; position:relative}
.ch:hover{border-color:var(--line-2)}
.ch .ico{width:38px; height:38px; border-radius:9px; display:grid; place-items:center; font-size:1.2rem; flex:none; color:#fff}
.ch b{display:block; font-size:.9rem; line-height:1.2}
.ch small{display:block; color:var(--mute); font-size:.74rem; line-height:1.3}
.ch[aria-pressed="true"]{border-color:var(--c); background:color-mix(in srgb,var(--c) 9%, var(--surface))}
.ch .prim{position:absolute; top:-8px; right:8px; font:600 .62rem var(--mono); text-transform:uppercase; letter-spacing:.06em; background:var(--c); color:#fff; padding:2px 6px; border-radius:5px}
.ch .live{font:600 .6rem var(--mono); color:var(--ok); text-transform:uppercase}

/* ── Brand step ── */
.brandwrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:20px; align-items:start}
.opts{display:flex; flex-direction:column; gap:14px}
.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg button{border:1.5px solid var(--line); background:var(--surface); padding:8px 12px; border-radius:10px; font-weight:600; font-size:.86rem; cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%, var(--surface)); color:var(--ink)}
.tog{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1.5px solid var(--line); border-radius:11px; cursor:pointer; background:var(--surface)}
.tog input{margin-top:3px; accent-color:var(--accent); width:18px; height:18px}
.tog b{display:block; font-size:.92rem}
.tog small{color:var(--mute); font-size:.8rem}
.tog:has(input:checked){border-color:var(--accent)}
.preview{background:var(--sunken); border-radius:14px; padding:12px; position:sticky; top:16px}
.preview canvas{width:100%; height:auto; display:block; border-radius:8px; background:#0b1227; touch-action:none; cursor:grab}
.preview canvas:active{cursor:grabbing}
.pvframe{display:flex; gap:8px; align-items:center; justify-content:space-between; font-size:.78rem; color:var(--ink-2); margin-top:6px}
.pvframe button{border:1px solid var(--line-2); background:var(--surface); border-radius:99px; padding:3px 10px; font-size:.74rem; font-weight:600; cursor:pointer}
.preview .cap{display:flex; justify-content:space-between; gap:8px; font-size:.78rem; color:var(--mute); margin-top:8px}

label.f{display:flex; flex-direction:column; gap:5px; font-size:.84rem; font-weight:600; color:var(--ink-2)}
label.f small{font-weight:400; color:var(--mute)}
input[type=text],input[type=email],input[type=date],select,textarea{width:100%; border:1.5px solid var(--line); background:var(--surface); border-radius:10px; padding:10px 12px; font-size:16px; color:var(--ink)}
textarea{min-height:88px; resize:vertical}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.hint{font-size:.8rem; color:var(--mute)}
.tagcloud{display:flex; flex-wrap:wrap; gap:6px}
.tag{font:500 .74rem var(--mono); padding:3px 8px; border-radius:6px; background:var(--sunken); color:var(--ink-2)}
.tag.c{background:color-mix(in srgb,var(--c) 16%, var(--surface)); color:var(--ink)}

.dests{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
.consent{display:flex; gap:10px; align-items:flex-start; background:var(--warn-bg); border-radius:11px; padding:12px; font-size:.88rem}
.consent input{margin-top:3px; accent-color:var(--accent); width:18px; height:18px; flex:none}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:11px; padding:12px 18px; font-weight:700; cursor:pointer; font-size:.95rem}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary:disabled{opacity:.45; cursor:not-allowed}
.btn.ghost{background:var(--sunken); color:var(--ink)}
.btn.sm{padding:7px 11px; font-size:.82rem; border-radius:9px}

.prog{height:6px; background:var(--sunken); border-radius:6px; overflow:hidden; margin-top:6px}
.prog i{display:block; height:100%; width:0; background:var(--accent); transition:width .2s}

.notice{border-radius:11px; padding:12px 14px; font-size:.88rem; margin-bottom:14px}
.notice.warn{background:var(--warn-bg); color:var(--ink)}
.notice.ok{background:var(--ok-bg); color:var(--ink)}
.notice.bad{background:var(--bad-bg); color:var(--ink)}

/* ── Done ── */
.done{text-align:center; padding:30px 12px}
.done h2{font-size:1.7rem}
.done p{color:var(--ink-2)}

/* ── Queue (admin) ── */
.qtools{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px}
.qtools select{width:auto}
.qstats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-bottom:14px}
.qstat{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.qstat b{display:block; font:800 1.4rem var(--display); font-variant-numeric:tabular-nums}
.qstat span{font-size:.76rem; color:var(--mute); text-transform:uppercase; letter-spacing:.06em}
.batch{background:var(--surface); border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden}
.batch-h{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line)}
.batch-h b{font-family:var(--display); font-size:1.02rem}
.batch-h .m{font-size:.8rem; color:var(--mute)}
.qitems{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; padding:12px}
.qi{border:1px solid var(--line); border-radius:11px; overflow:hidden; display:flex; flex-direction:column; background:var(--bg)}
.qi img{aspect-ratio:9/16; max-height:420px; object-fit:contain; width:100%; background:#0b1430}
.qv{display:flex; gap:4px; flex-wrap:wrap; padding:8px 9px 0}
.qv button{border:1px solid var(--line-2); background:var(--surface); border-radius:99px; padding:3px 10px; font-size:.74rem; font-weight:600; cursor:pointer}
.qv button[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.qv button[data-open]{margin-left:auto}
.qv .nob{font-size:.74rem; color:var(--mute); align-self:center}
.qi .b{padding:9px; display:flex; flex-direction:column; gap:7px; font-size:.82rem}
.qi textarea{min-height:60px; font-size:14px; padding:7px 9px}
.status{font:600 .66rem var(--mono); text-transform:uppercase; letter-spacing:.06em; padding:2px 7px; border-radius:5px; align-self:flex-start}
.status.submitted{background:var(--warn-bg); color:var(--warn)} .status.tagged{background:#e0e7ff; color:#3730a3} .status.approved,.status.published{background:var(--ok-bg); color:var(--ok)} .status.archived{background:var(--sunken); color:var(--mute)}
dialog{border:0; border-radius:16px; padding:0; max-width:640px; width:calc(100% - 32px); background:var(--surface); color:var(--ink)}
dialog::backdrop{background:rgba(5,10,25,.6)}
dialog .dh{padding:16px 18px; border-bottom:1px solid var(--line)}
dialog .db{padding:16px 18px; display:flex; flex-direction:column; gap:10px}
dialog .df{padding:12px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end}
dialog textarea{font:13px/1.4 var(--mono); min-height:200px}

/* ── Customize button + edited badge ── */
.cust{width:100%; margin-top:10px; background:linear-gradient(90deg,#e8450a,#db2777 55%,#7c3aed); color:#fff}
.th .ed-b{position:absolute; right:4px; bottom:4px; font-size:.7rem; background:rgba(10,15,30,.72); color:#fff; padding:2px 6px; border-radius:6px}

/* ── Story editor (full screen, Instagram-style, always dark) ── */
.ed{position:fixed; inset:0; z-index:2147483600; background:#05070d; color:#fff; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); color-scheme:dark}
.ed-top{display:flex; align-items:center; gap:8px; padding:10px 12px}
.ed-top .t{flex:1; text-align:center; font:700 .95rem var(--body)}
.ib{width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:1.1rem; display:grid; place-items:center; cursor:pointer}
.ib.on{background:#fff; color:#05070d}
.ed-done{border:0; background:#fff; color:#05070d; font-weight:800; padding:10px 18px; border-radius:99px; cursor:pointer}
.ed-stage{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:4px 12px; position:relative}
#edc{max-width:100%; max-height:100%; border-radius:12px; touch-action:none; cursor:grab; background:#111}
.ed-trash{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:1.4rem; pointer-events:none; transition:transform .12s, background .12s}
.ed-trash.hot{background:#dc2626; transform:translateX(-50%) scale(1.2)}
.ed-hint{position:absolute; top:10px; left:50%; transform:translateX(-50%); font-size:.78rem; background:rgba(0,0,0,.55); padding:5px 10px; border-radius:99px; pointer-events:none; text-align:center; max-width:92%; width:max-content}
.ed-tools{display:flex; justify-content:center; gap:10px; padding:8px 12px}
.ed-tools .tb{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.7rem; color:#cbd2e1; background:none; border:0; cursor:pointer}
.ed-tools .tb .ib{pointer-events:none}
.ed-tools .tb[aria-pressed="true"] .ib{background:#fff; color:#05070d}
.ed-panel{background:#0e1220; border-top:1px solid #1f2638; padding:12px; max-height:42vh; overflow-y:auto}
.ed-panel textarea{width:100%; min-height:54px; background:#161c2e; border:1px solid #2a3350; color:#fff; border-radius:10px; padding:9px 11px; font-size:16px}
.ed-row{display:flex; gap:8px; overflow-x:auto; padding:8px 0; scrollbar-width:none}
.ed-row::-webkit-scrollbar{display:none}
.fontb{flex:none; border:1.5px solid #2a3350; background:#161c2e; color:#fff; border-radius:10px; padding:7px 12px; font-size:1rem; cursor:pointer; white-space:nowrap}
.fontb[aria-pressed="true"]{border-color:#fff; background:#fff; color:#05070d}
.sw{flex:none; width:32px; height:32px; border-radius:50%; border:3px solid #0e1220; box-shadow:0 0 0 1.5px #3a4466; cursor:pointer}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2.5px #fff}
.ed-sl{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:center; font-size:.78rem; color:#cbd2e1; margin-top:4px}
.ed-sl input{accent-color:#e8450a; width:100%}
.stk{display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:8px}
.stk button{aspect-ratio:1; border:0; border-radius:12px; background:#161c2e; color:#fff; font-size:1.6rem; cursor:pointer; display:grid; place-items:center; padding:4px}
.stk button img{max-width:100%; max-height:100%}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.chips button{border:0; border-radius:8px; padding:7px 10px; font:800 .8rem var(--body); cursor:pointer; color:#fff}
.flt{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px}
.flt button{flex:none; border:0; background:none; color:#cbd2e1; font-size:.72rem; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer}
.flt canvas{width:64px; height:64px; border-radius:10px; border:2px solid transparent; object-fit:cover}
.flt button[aria-pressed="true"] canvas{border-color:#fff}
.flt button[aria-pressed="true"]{color:#fff}
.ed-sub{font:700 .7rem var(--mono); text-transform:uppercase; letter-spacing:.08em; color:#8b94ad; margin:6px 0 2px}
.ed-act{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.ed-act button{border:0; border-radius:9px; padding:8px 12px; background:#1c2338; color:#fff; font-weight:600; font-size:.82rem; cursor:pointer}
.ed-act .danger{background:#3a1414; color:#fecaca}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── Channel groups, video tiles, Out & About panel (2026-09-30) ── */
.chgrp{grid-column:1/-1; font:700 .7rem var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--mute); margin:8px 2px 0}
.chgrp:first-child{margin-top:0}
.th .vid-b{position:absolute; left:4px; bottom:4px; font:600 .66rem var(--mono); color:#fff; background:rgba(10,15,30,.75); padding:2px 6px; border-radius:6px}
.th .vid-ph{display:grid; place-items:center; width:100%; height:100%; font-size:2rem; background:#111a33}
.oa-panel{display:flex; flex-direction:column; gap:12px; background:linear-gradient(135deg, color-mix(in srgb,#f7941d 10%, var(--surface)), var(--surface)); border:1.5px solid color-mix(in srgb,#f7941d 45%, var(--line)); border-radius:14px; padding:14px}
.oa-h b{display:block; font-family:var(--display); font-size:1.08rem}
.oa-h small{color:var(--mute); font-size:.8rem}
.oa-panel .seg{flex-wrap:wrap}

/* ── Send receipt: what landed, what didn't, and why ── */
.skiplist ul{margin:6px 0 4px 18px; padding:0}
.skiplist li{margin:2px 0; word-break:break-word}
.progtxt{font-size:.8rem; color:var(--ink-2); margin-top:6px; font-weight:600}
.donelist{text-align:left; margin:18px auto 0; max-width:560px}
.donelist h3{font-size:.95rem; margin:16px 0 8px}
.receipt{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.rc{display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; border-radius:12px; background:var(--surface); border:1px solid var(--line)}
.rc img,.rc .rc-ph{width:44px; height:44px; border-radius:8px; object-fit:cover; flex:none; display:grid; place-items:center; background:var(--line)}
.rc-t{flex:1; min-width:0; display:flex; flex-direction:column}
.rc-t b{font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rc-t small{font-size:.76rem; color:var(--ink-2)}
.rc-i{font-weight:800; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; color:#fff}
.rc.ok .rc-i{background:#16a34a} .rc.bad .rc-i{background:#dc2626} .rc.skip .rc-i{background:#a3a3a3}
.rc.bad{border-color:#fca5a5}

/* ── Out & About: header + bottom bar controls ── */
.oa-sub{font-weight:800; font-size:.86rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2); border-top:1px solid var(--line); padding-top:12px; margin-top:4px}
.oa-sub small{font-weight:500; text-transform:none; letter-spacing:0; margin-left:6px; color:var(--mute)}
.seg.swatches button{display:inline-flex; align-items:center; gap:6px}
.seg.swatches .sw{width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.2); display:inline-block}
[hidden]{display:none !important}