/* The macOS stage: menu bar, dock, windows, Photo Booth.
   Everything here is MacBook-only. Shared chrome lives in ../shared/. */

/* ============================================================
   LAYER A  — THE STAGE. Only this is ever exported.
   Internal coordinate system is fixed at 1440x900 (16:10).
   ============================================================ */
#stageWrap{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:12px; box-shadow:var(--shadow-lg);
}
#stage{
  width:1440px; height:900px; transform-origin:top left;
  position:relative; overflow:hidden; border-radius:12px;
  font-family:var(--os); user-select:none;
  /* Design tokens. The editor panel writes to these live. */
  --shutterSize:54px;
  --barH:62px;         /* Photo Booth bottom bar */
  --stripH:62px;       /* history strip */
  --thumbW:88px; --thumbH:58px; --thumbGap:3px;
  --segStroke:1.2px;   /* outline weight on the mode toggle glyphs */
  --dock:rgba(162,162,170,var(--dockTint,.42));
  --dock-line:rgba(255,255,255,.6);
}
#stage[data-appearance="dark"]{
  --dock:rgba(46,44,52,var(--dockTint,.52)); --dock-line:rgba(255,255,255,.14);
}

/* the green dot macOS shows while the camera is in use, which sits right
   after Control Centre exactly as it does on a real bar */
#camOn{
  display:none; align-items:center; width:8px; height:8px; border-radius:50%;
  background:#30d158; margin-left:-9px;
}
#camOn.on{display:block}

/* ---- Dock ----
   Every measurement below is a ratio of the dock height, taken from the
   MacBook Pro Dock component: icon .7727, gap .0625, top pad .1042,
   bottom pad .1231, side pad .0742 / .0833, divider .7273 tall. */
#dock{
  --dockH:73px;
  --ico:calc(var(--dockH) * 0.7727);
  --gap:calc(var(--dockH) * 0.0625);
  --dockR:0.22;      /* corner radius as a share of dock height */
  --dockTint:0.44;   /* how much grey the translucent surface carries */
  --icoShadow:0.27;  /* drop shadow strength under each icon */
  --icoBlur:3px;     /* how far the shadow spreads */
  --icoY:2px;        /* how far it sits below the icon */
  --dotOp:0.85;      /* running-app dot */
  position:absolute; bottom:9px; left:50%; transform:translateX(-50%); z-index:9000;
  height:var(--dockH); box-sizing:border-box;
  display:flex; align-items:flex-start; gap:var(--gap);
  padding:calc(var(--dockH)*0.1042) calc(var(--dockH)*0.0833) calc(var(--dockH)*0.1231) calc(var(--dockH)*0.0742);
  border-radius:calc(var(--dockH) * var(--dockR));
  background:var(--dock); border:1px solid var(--dock-line);
  backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 8px 26px rgba(0,0,0,.26);
}
.dock-item{
  position:relative; width:var(--ico); height:var(--ico); flex:none;
  transition:transform .17s cubic-bezier(.2,.9,.3,1.25); transform-origin:center bottom;
}
.dock-item:hover{transform:translateY(-9px) scale(1.16)}
.dock-item .ico{
  width:100%; height:100%; border-radius:22.5%; display:grid; place-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.30), inset 0 .5px 0 rgba(255,255,255,.28);
  overflow:hidden;
}
.dock-item .ico img{width:100%; height:100%; object-fit:contain}
/* drop-shadow follows the icon's alpha, so transparent corners stay clean */
.dock-item .ico.has-img img{
  filter:drop-shadow(0 var(--icoY) var(--icoBlur) rgba(0,0,0,var(--icoShadow)));
}
/* a real icon PNG brings its own shape, so drop the drawn slot's dressing */
.dock-item .ico.has-img{background:none !important; box-shadow:none; border-radius:0}
.dock-item .dot{
  position:absolute; left:50%; bottom:calc(var(--dockH) * -0.0928);
  width:calc(var(--dockH)*0.0606); height:calc(var(--dockH)*0.0606);
  margin-left:calc(var(--dockH)*-0.0303);
  border-radius:50%; background:#fff; opacity:0;
  box-shadow:0 0 2px rgba(0,0,0,.30);
}
.dock-item[data-open="1"] .dot{opacity:var(--dotOp)}
.dock-item .tip{
  position:absolute; bottom:calc(100% + 13px); left:50%; transform:translateX(-50%);
  background:var(--mb); color:var(--mb-ink); border:1px solid var(--dock-line);
  padding:3px 9px; border-radius:7px; font-size:12px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s; backdrop-filter:blur(20px);
}
.dock-item:hover .tip{opacity:1}
/* swap-icon affordance, only on slots meant to hold the user's own image */
.dock-item .swap{
  position:absolute; right:-3px; top:-3px; width:15px; height:15px; border-radius:50%;
  background:var(--mb); color:var(--mb-ink); border:1px solid var(--dock-line);
  display:none; place-items:center; z-index:3;
}
.dock-item.swappable:hover .swap{display:grid}
.dock-sep{
  width:1px; flex:none; align-self:center; background:var(--dock-line);
  height:calc(var(--dockH) * 0.7273);
  margin-left:calc(var(--dockH) * 0.1518); margin-right:calc(var(--dockH) * 0.0625);
}
.dock-item.bin{align-self:flex-start}
.dock-item.bin .ico{border-radius:14%; box-shadow:none}

/* ---- Windows ---- */
.win.min{display:none}
/* minimise: suck the window down toward its dock icon */
.win.genie{
  animation:genie .42s cubic-bezier(.4,0,.75,.35) forwards;
  transform-origin:var(--gx,50%) 100%; pointer-events:none;
}
@keyframes genie{
  0%  {transform:translate(0,0) scaleX(1) scaleY(1); opacity:1; filter:blur(0)}
  55% {transform:translate(calc(var(--gdx,0px)*.5), 34%) scaleX(.46) scaleY(.62); opacity:.9; filter:blur(.4px)}
  100%{transform:translate(var(--gdx,0px), 108%) scaleX(.06) scaleY(.12); opacity:0; filter:blur(1.4px)}
}
.win.unmin{animation:unmin .34s cubic-bezier(.2,.85,.3,1) both; transform-origin:var(--gx,50%) 100%}
@keyframes unmin{
  0%  {transform:translate(var(--gdx,0px),108%) scaleX(.06) scaleY(.12); opacity:0}
  100%{transform:translate(0,0) scaleX(1) scaleY(1); opacity:1}
}
/* fullscreen: takes the whole screen, menu bar and dock step aside */
.win.fs{left:0 !important; top:0 !important; width:1440px !important; height:900px !important;
  border-radius:0; border:none; z-index:8500 !important}
/* in fullscreen the title bar tucks away and slides back when you reach for it */
.win.fs > .titlebar{
  position:absolute; top:0; left:0; right:0; z-index:20;
  transform:translateY(-100%); transition:transform .22s cubic-bezier(.3,.8,.3,1);
}
.win.fs.peek > .titlebar{transform:translateY(0)}
#stage.hasFS #menubar, #stage.hasFS #dock{opacity:0; pointer-events:none}
#menubar, #dock{transition:opacity .2s ease}
@media (prefers-reduced-motion: reduce){ .win.genie, .win.unmin{animation:none} }
.rsz{position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; z-index:5}

/* Browser window */
.win.chromeless > .titlebar{border-bottom:none; height:26px; padding-bottom:0}
.br-chrome{flex:none; background:var(--win); border-bottom:.5px solid var(--win-line); padding:0 8px 7px}
.br-tabs{display:flex; align-items:center; gap:5px; height:27px}
.br-tab{
  display:flex; align-items:center; gap:6px; height:26px; padding:0 9px; max-width:200px;
  background:var(--win-body); border-radius:8px 8px 0 0; font-size:12px; color:var(--win-ink);
  box-shadow:0 -.5px 0 var(--win-line), .5px 0 0 var(--win-line), -.5px 0 0 var(--win-line);
}
.br-tab .fav{width:12px; height:12px; border-radius:3px; background:var(--win-ink-dim); opacity:.45; flex:none}
.br-tab .tabname{outline:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.br-tab .x{color:var(--win-ink-dim); font-size:14px; line-height:1; flex:none}
.br-plus{color:var(--win-ink-dim); font-size:15px; padding:0 5px}
.br-addr{display:flex; align-items:center; gap:9px; height:30px; padding:0 2px}
.br-addr .nav{color:var(--win-ink-dim); font-size:17px; line-height:1}
.br-addr .nav.dim{opacity:.4}
.br-addr .url{
  flex:1; min-width:0; height:24px; line-height:24px; padding:0 11px; border-radius:12px;
  background:var(--field); color:var(--win-ink-dim); font-size:12px; outline:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.br-page,.ph-page{flex:1; min-height:0; background:var(--win-body); overflow:hidden; position:relative; display:flex}
.br-img{width:100%; height:100%; object-fit:cover; display:block}
.dropzone{
  flex:1; min-height:0; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; text-align:center; padding:20px;
  color:var(--win-ink-dim); font-size:13px; cursor:pointer; line-height:1.5;
  border:2px dashed var(--win-line); border-radius:8px;
  margin:10px; width:calc(100% - 20px); height:calc(100% - 20px);
}
.dropzone.over{border-color:var(--accent); color:var(--win-ink)}
.dropzone b{color:var(--win-ink); font-size:14px; font-weight:600}

/* Notes window */
.notes-body{flex:1; min-height:0; width:100%; padding:16px 20px; overflow:auto; font-size:14px; line-height:1.55; outline:none; background:var(--win-body)}
.notes-body:empty:before{content:attr(data-ph); color:var(--win-ink-dim)}

/* Music window */
.music-body{flex:1; min-height:0; width:100%; display:flex; flex-direction:column; gap:14px; padding:18px; background:var(--win-body)}
.music-art{flex:1; min-height:0; border-radius:8px; background:var(--field); display:grid; place-items:center; overflow:hidden; cursor:pointer; position:relative}
.music-art img{width:100%; height:100%; object-fit:cover}
.music-meta{display:flex; flex-direction:column; gap:2px}
.music-meta .t{font-size:14px; font-weight:600; outline:none}
.music-meta .a{font-size:12.5px; color:var(--win-ink-dim); outline:none}
.music-bar{height:4px; border-radius:2px; background:var(--field); position:relative}
.music-bar i{position:absolute; inset:0 62% 0 0; background:var(--win-ink); opacity:.75; border-radius:2px}
.music-ctl{display:flex; align-items:center; justify-content:center; gap:22px; color:var(--win-ink)}
.music-ctl svg{cursor:pointer; opacity:.85}

/* Finder window */
.finder-body{display:flex; flex:1; min-height:0; background:var(--win-body); font-size:13px}
.finder-side{width:150px; flex:none; padding:10px 8px; background:var(--field); display:flex; flex-direction:column; gap:1px}
.finder-side div{padding:5px 9px; border-radius:6px; color:var(--win-ink-dim)}
.finder-side div.on{background:rgba(127,127,140,.24); color:var(--win-ink)}
.finder-main{flex:1; padding:12px; display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:14px; align-content:start; overflow:auto}
.finder-file{display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; font-size:11.5px; color:var(--win-ink)}
.finder-file .th{width:56px; height:56px; border-radius:5px; background:var(--field); overflow:hidden}
.finder-file .th img{width:100%; height:100%; object-fit:cover}

/* ---- Photo Booth window ---- */
#pb{width:732px; height:576px}
.pb-stack{position:absolute; inset:0; display:flex; flex-direction:column; background:#000}
.pb-view{flex:1; min-height:0; position:relative; background:#000; overflow:hidden}
.pb-view canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

#pbStill{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; cursor:pointer}
.pb-msg{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; text-align:center; padding:30px;
  color:#c9c6d0; font-size:13.5px; background:#111014;
}
.pb-msg b{color:#fff; font-size:15px; font-weight:600}
.pb-msg .btn{
  margin-top:4px; background:#fff; color:#111; padding:7px 15px; border-radius:7px;
  font-size:13px; font-weight:600;
}
#countdown{
  position:absolute; inset:0; display:none; place-items:center; z-index:6;
  font-size:150px; font-weight:200; color:#fff; text-shadow:0 3px 30px rgba(0,0,0,.55);
  font-variant-numeric:tabular-nums;
}
#countdown.on{display:grid}
#countdown span{animation:cdpop .95s ease-out}
@keyframes cdpop{0%{transform:scale(.55); opacity:0}25%{transform:scale(1); opacity:1}100%{transform:scale(1.14); opacity:.15}}

/* effects grid overlay.
   Normal sits in the centre cell, so scaling from 3x to 1x reads as the
   live view zooming out to reveal the other eight. */
#pbGrid{
  position:absolute; inset:0; display:none; z-index:5; background:#000;
  transform:scale(3); transform-origin:center center;
  transition:transform .34s cubic-bezier(.32,.72,.24,1);
}
#pbGrid.mounted{display:block}
#pbGrid.on{transform:scale(1)}
@media (prefers-reduced-motion: reduce){ #pbGrid{transition:none} }
#pbGrid canvas{position:absolute; inset:0; width:100%; height:100%}
#pbGridHit{
  position:absolute; inset:0; display:grid;
  grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  transition:opacity .12s ease;
}
/* during the closing zoom the cell borders would scale into a white frame */
#pbGrid:not(.on) #pbGridHit{opacity:0; pointer-events:none}
#pbGridHit div{
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:9px;
  color:#fff; font-size:11.5px; font-weight:600; cursor:pointer; text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,.85); border:1px solid rgba(255,255,255,.14);
}
#pbGridHit div:hover{background:rgba(255,255,255,.11)}
#pbGridHit div.sel{box-shadow:inset 0 0 0 3px #fff}

/* filmstrip */
#strip{
  flex:none; height:0; overflow:hidden; background:var(--win); border-top:.5px solid var(--win-line);
  transition:height .22s cubic-bezier(.3,.8,.3,1); display:flex; align-items:stretch;
}
#strip.on{height:var(--stripH)}
#stripInner{
  flex:1; min-width:0; display:flex; gap:var(--thumbGap); padding:2px 7px;
  overflow-x:auto; overflow-y:hidden; align-items:center;
}
#stripInner::-webkit-scrollbar{height:5px}
#stripInner::-webkit-scrollbar-thumb{background:rgba(127,127,140,.4); border-radius:3px}
.thumb{
  position:relative; flex:none; width:var(--thumbW); height:var(--thumbH); cursor:pointer;
  outline:2px solid transparent; outline-offset:-2px; background:#000;
}
.thumb.sel{outline-color:var(--accent)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
/* hover to delete. Sits inside the corner, since the tiles nearly touch. */
.thumb .del{
  position:absolute; top:3px; right:3px; width:14px; height:14px; border-radius:50%;
  background:rgba(72,72,78,.88); color:#fff; display:none; place-items:center; z-index:2;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.thumb:hover .del{display:grid}
.thumb .del:hover{background:rgba(40,40,46,.95)}
/* the import-a-template tile, same box as a photo */
#stripAdd{
  flex:none; width:var(--thumbW); height:var(--thumbH); box-sizing:border-box;
  border:1px dashed var(--win-line); color:var(--win-ink-dim);
  display:grid; place-items:center; background:var(--field);
}
#stripAdd:hover{border-color:var(--accent); color:var(--accent)}


/* bottom bar */
.pb-bar{
  flex:none; height:var(--barH); display:flex; align-items:center; padding:0 12px;
  background:var(--win); border-top:.5px solid var(--win-line); position:relative;
}
.mode-grp{
  display:flex; align-items:center; gap:0; z-index:2;
  background:rgba(0,0,0,.06); border-radius:8px; padding:3px;
}
#stage[data-appearance="dark"] .mode-grp{background:rgba(255,255,255,.09)}
.mode-grp button{
  width:36px; height:23px; border-radius:6px; display:grid; place-items:center;
  color:var(--win-ink);
}
.mode-grp svg rect, .mode-grp svg path{stroke-width:var(--segStroke)}
.mode-grp button.on{background:#a3a3a9; color:#fff}
#stage[data-appearance="dark"] .mode-grp button.on{background:#75737c}
/* a segmented control hides the separator that touches the selected segment */
.mode-grp .mdiv{
  width:1px; height:14px; background:var(--win-ink); opacity:.22;
  transition:opacity .12s ease;
}
.mode-grp .mdiv.hide{opacity:0}
#shutter{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:var(--shutterSize); height:var(--shutterSize); border-radius:50%; background:var(--shutter);
  display:grid; place-items:center; color:#fff;
  transition:background .18s, color .18s, box-shadow .18s;
}
/* reviewing a photo from history: neutral outline, click to go live again */
#shutter.review{
  background:transparent; color:var(--win-ink-dim);
  box-shadow:inset 0 0 0 1.5px var(--win-ink-dim);
}
#shutter.review:hover{color:var(--win-ink); box-shadow:inset 0 0 0 1.5px var(--win-ink)}
#shutter:hover{filter:brightness(1.07)}
#shutter.review:hover{filter:none}
#shutter:active{transform:translate(-50%,-50%) scale(.94)}
#shutter[disabled]{opacity:.45; cursor:default}
.pb-right{margin-left:auto; display:flex; gap:8px; z-index:2}
.pb-btn{
  height:26px; padding:0 14px; border-radius:6px; font-size:12.5px; font-weight:400;
  background:var(--field); border:none; color:var(--win-ink);
}
.pb-btn{transition:background .1s ease, color .1s ease}
.pb-btn:active, .pb-btn.flash{background:rgba(0,0,0,.26); color:var(--win-body)}
#stage[data-appearance="dark"] .pb-btn:active,
#stage[data-appearance="dark"] .pb-btn.flash{background:rgba(255,255,255,.30); color:var(--win-ink)}

#flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:9500}
#flash.go{animation:fl .6s ease-out}
@keyframes fl{0%{opacity:0}8%{opacity:.95}100%{opacity:0}}