/* Driftr v45: Outfits pill, sheet, gallery, compose, viewer, dress field; Ticket at the Door; Tickets tab.
   Owner: FE-OUTFITS+DOOR. Every class here starts with of- or door- (plan 3.6); d- classes are only scoped under
   our own containers, never restyled globally. Tokens only (theme.css). Raw colors only where plan 3.6 allows:
   the photo viewer (#141416, #EEE8DE) and the scanner surface of the door sheet (#FFFFFF, #000000). */

/* ---------- the day pill: 32 px raised face inside a 44 px target; sage dot = new photos (R5) ---------- */
.of-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);padding:0 2px;border:0;background:transparent;color:var(--ink);cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent;}
.of-pill-face{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-pill);background:var(--ground);box-shadow:var(--e1);font:500 var(--fs-label)/1 var(--font);white-space:nowrap;transition:box-shadow 120ms var(--ease);}
.of-pill-n{font-variant-numeric:tabular-nums;margin-inline-start:.3em;} /* the " n" leading space collapses inside the flex face */
.of-pill:active .of-pill-face{box-shadow:var(--in);}
.of-dot{position:absolute;top:4px;right:0;width:8px;height:8px;border-radius:50%;background:var(--sage-ink);box-shadow:0 0 0 2px var(--ground);}
.of-dress{font:500 var(--fs-label)/1.4 var(--font);color:var(--ink-2);}

/* ---------- the panel section for one event (Outfits-Event board) ---------- */
.of-panel{padding:4px 0 0;}
.of-panel-head{display:flex;align-items:center;gap:6px;margin:0;}
.of-panel-line{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:var(--tap);padding:6px 0;border:0;background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer;}
.of-looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;}
.of-look{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;}
.of-look-photo{display:block;width:100%;height:96px;border-radius:var(--r-sm);overflow:hidden;background:var(--well);box-shadow:var(--e1);}
.of-look-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.of-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;}
.of-add{padding:10px 18px;}

/* ---------- the Outfits sheet ---------- */
.of-sheet-body{display:flex;flex-direction:column;}
.of-scope{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;margin:0 calc(var(--gutter) * -1);padding:8px var(--gutter) 6px;scroll-padding-inline:var(--gutter);scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);}
.of-scope::-webkit-scrollbar,.of-shelf::-webkit-scrollbar{display:none;}
.of-scope .d-chip,.of-chiprow .d-chip{min-height:var(--tap);flex:none;}
.of-far{margin:12px 0 4px;}
.of-card{margin-top:12px;padding:18px;}
.of-headline{margin:0;font:600 1.25rem/1.3 var(--font);letter-spacing:-.02em;}
.of-why{margin:4px 0 0;}
.of-wear{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.of-piece{display:flex;align-items:flex-start;gap:12px;font:400 var(--fs-body-sm)/1.4 var(--font);}
.of-piece .d-ic{color:var(--ink-2);margin-top:1px;}
.of-bring{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;}
.of-bring-l{display:inline-flex;align-items:center;gap:6px;}
.of-bring-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.of-bring-chip{padding:4px 10px;border-radius:var(--r-sm);background:var(--ground);box-shadow:var(--in-sm);font:500 var(--fs-label)/1.4 var(--font);color:var(--ink);}
.of-change{margin:12px 0 0;font:500 var(--fs-body-sm)/1.4 var(--font);color:var(--ink);}
.of-notes{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;}
.of-people{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.of-person{display:flex;align-items:center;gap:10px;min-height:32px;}
.of-person .d-av{width:24px;height:24px;font-size:.625rem;}
.of-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;}
.of-lens{display:flex;flex-direction:column;gap:6px;flex:1 1 220px;min-width:0;}
.of-lens-seg,.of-cover{padding:0;}
.of-lens-seg button,.of-cover button{min-height:var(--tap);padding:6px 8px;font-size:var(--fs-label);}
.of-hintlink{margin-left:auto;}
.of-gallery{margin-top:22px;}
.of-gal-title{font-size:var(--fs-body-sm);}
.of-poster{margin-top:6px;}
.of-who{display:flex;align-items:center;gap:10px;min-height:var(--tap);}
.of-who .d-av{width:32px;height:32px;font-size:.75rem;}
.of-who-name{font:600 var(--fs-body-sm)/1.3 var(--font);}
.of-who-n{margin-left:auto;}
.of-shelf{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:6px var(--gutter) 12px;scroll-padding-left:var(--gutter);scrollbar-width:none;}
.of-thumb{flex:none;width:136px;display:flex;flex-direction:column;gap:4px;scroll-snap-align:start;min-width:0;}
.of-thumb-btn{position:relative;display:block;width:136px;height:170px;padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;background:var(--well);box-shadow:var(--e1);cursor:pointer;}
.of-thumb-btn img{width:100%;height:100%;object-fit:cover;display:block;}
.of-tagged{position:absolute;left:6px;bottom:6px;display:flex;}
.of-tagged .d-av{width:18px;height:18px;font-size:.5rem;box-shadow:0 0 0 1.5px var(--ground);}
.of-tagged .d-av+.d-av{margin-left:-6px;}
.of-thumb-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.of-primary-l{display:inline-flex;align-items:center;gap:12px;}
.of-primary-r{font-weight:500;}

/* ---------- compose ---------- */
.of-compose{display:flex;flex-direction:column;gap:14px;padding-bottom:4px;}
.of-compose-thumb{width:120px;height:150px;border-radius:var(--r-sm);object-fit:cover;box-shadow:var(--e1);transition:opacity 120ms var(--ease);}
.of-compose-thumb.is-busy{opacity:.5;}
.of-chiprow{display:flex;flex-wrap:wrap;gap:8px;}
/* a For chip takes the row's width before its name cuts ("7:45 pm Emmer & Rye") */
.of-chiprow .d-chip{max-width:100%;}
.of-chip-text{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.of-sublabel{font:500 var(--fs-label)/1.4 var(--font);color:var(--ink-2);}
.of-inside{margin:0;color:var(--ink);font-weight:500;}
.of-audience{margin:0;}
.of-who-chip .d-av{width:24px;height:24px;font-size:.625rem;margin-left:-6px;}

/* ---------- the viewer: its own screen, photos read true in both themes ---------- */
.of-viewer{position:fixed;inset:0;z-index:300;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#141416;color:#EEE8DE;outline:none;touch-action:pan-y;}
.of-viewer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(8px + env(safe-area-inset-top)) 12px 4px 20px;}
.of-viewer-count{margin:0;color:#EEE8DE;}
.of-viewer-stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:0 12px;}
.of-viewer-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-sm);user-select:none;-webkit-user-drag:none;}
.of-viewer-panel{display:flex;flex-direction:column;gap:4px;padding:12px 20px calc(20px + env(safe-area-inset-bottom));}
.of-viewer-who{display:flex;align-items:center;gap:10px;}
.of-viewer-who .d-av{box-shadow:none;}
.of-viewer-name{font:600 var(--fs-body-sm)/1.3 var(--font);}
.of-viewer-dim{margin:0;color:#EEE8DE;opacity:.78;}
.of-viewer-cap{margin:2px 0 0;color:#EEE8DE;}
.of-viewer-act{display:flex;align-items:center;gap:8px;margin-top:6px;min-height:var(--tap);}
.of-viewer-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);padding:0 10px;border:0;border-radius:var(--r-pill);background:transparent;color:#EEE8DE;font:600 var(--fs-body-sm)/1 var(--font);cursor:pointer;}
.of-viewer-btn .d-ic{width:24px;height:24px;}
.of-heart[aria-pressed="true"] .d-ic{fill:var(--brass);stroke:var(--brass);}
.of-viewer-del{margin-left:auto;text-decoration:underline;text-underline-offset:3px;}

/* ---------- dress field (item dialogs) and the day hint ---------- */
.of-select{appearance:none;-webkit-appearance:none;background-image:var(--select-caret);background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;min-height:var(--tap);}
.of-meaning{margin:0;}
.of-sub{margin-top:6px;}
.of-modest{display:flex;flex-direction:column;gap:8px;}
.of-switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:var(--tap);padding:0;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;}
.of-nudge{margin:0;color:var(--ink);}
.of-link{min-height:var(--tap);padding:10px 2px;font-size:var(--fs-label);text-decoration:underline;text-underline-offset:3px;}
.of-hint{display:flex;flex-direction:column;gap:12px;}

/* ---------- Ticket at the Door: the white scanner surface in both themes ---------- */
.d-sheet.door-sheet{background:var(--tile);color:#000000;}
.door-sheet .d-grabber{background:rgba(0,0,0,.12);box-shadow:none;}
.door-sheet .d-sheet-head{align-items:flex-start;}
.door-sheet .d-sheet-head .d-btn-icon{background:#FFFFFF;color:#000000;box-shadow:0 1px 3px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.08);flex:none;}
.door-sheet .d-av{box-shadow:none;}
.door-readout{margin:0;font-weight:600;color:#000000;}
.door-title{margin-top:4px;color:#000000;}
.door-muted{margin:2px 0 0;color:rgba(0,0,0,.64);}
.door-center{text-align:center;}
.door-perf{margin:8px 0 0;border-top:1px solid rgba(0,0,0,.10);}
.door-stage{display:flex;flex-direction:column;align-items:center;padding:12px 0 0;touch-action:pan-y;}
.door-code{margin:0;display:flex;align-items:center;justify-content:center;width:260px;min-height:260px;}
.door-qr-svg,.door-qr-svg svg{display:block;width:260px;height:260px;}
.door-img{display:block;max-width:260px;max-height:320px;width:auto;height:auto;}
.door-holder{margin:12px 0 0;text-align:center;color:#000000;}
.door-stub{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,auto));justify-content:space-between;gap:8px;width:100%;margin:12px 0 0;text-align:center;}
.door-stub dt{font:500 var(--fs-label)/1.4 var(--font);color:rgba(0,0,0,.64);margin:0;}
.door-stub dd{font:600 1rem/1.35 var(--font);margin:2px 0 0;white-space:nowrap;color:#000000;}
.door-actions{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:0;}
.door-actions:empty{display:none;}
.door-swap{color:#000000;font-size:var(--fs-body-sm);padding:10px 8px;}
.door-pager-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px;}
.door-pager{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:var(--r-pill);background:rgba(0,0,0,.05);box-shadow:inset 1px 1px 3px rgba(0,0,0,.10);}
.door-pg{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);min-width:var(--tap);padding:6px;border:0;border-radius:var(--r-pill);background:transparent;color:rgba(0,0,0,.64);font:600 var(--fs-body-sm)/1 var(--font);cursor:pointer;}
.door-pg .d-av{width:32px;height:32px;font-size:.8125rem;}
.door-pg[aria-selected="true"]{background:#FFFFFF;color:#000000;box-shadow:0 1px 3px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);padding-right:16px;}
.door-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.10);}
.door-bright,.door-offline{display:inline-flex;align-items:center;gap:8px;margin:0;}
.door-offline{color:#000000;font-weight:500;}
.door-offline[hidden]{display:none;}

/* ---------- Tickets tab: a road grouped by day ---------- */
.door-thead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;}
.door-road{list-style:none;margin:16px 0 0;}
.door-dayhead{padding:14px 0 2px;}
.door-dayhead p{margin:0;}
.door-trow{list-style:none;}
.door-trow-body{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 0;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;}
.door-trow-body:active{opacity:.7;}
.door-trow-main{display:flex;flex-direction:column;min-width:0;}
.door-trow-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.door-trow-face .d-av{box-shadow:0 0 0 2px var(--ground);}
.door-trow-ic{color:var(--ink-2);}
.door-note{margin:20px 0 0;}
.door-empty{margin-top:24px;min-height:160px;}
.door-empty-pebble{top:12px;margin-top:0;}
.door-empty p{margin-top:4px;}
.door-empty-btn{margin-top:16px;}

/* ticket dialog */
.door-select{appearance:none;-webkit-appearance:none;background-image:var(--select-caret);background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
.door-dlg{display:flex;flex-direction:column;gap:14px;padding-bottom:8px;}
.door-dlg-stage{display:flex;align-items:center;justify-content:center;width:100%;height:200px;border-radius:var(--r-md);background:var(--well);box-shadow:var(--in);overflow:hidden;text-align:center;padding:12px;}
.door-dlg-stage img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.door-dlg-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.door-dlg-status{margin:0;}
.door-dlg-foot{display:flex;align-items:center;gap:12px;}
.door-dlg-foot .d-btn-wide{flex:1;}

@media (prefers-reduced-motion:reduce){
  .of-pill-face,.of-compose-thumb{transition:opacity 120ms linear;}
}