/* =============================================================
   Dani's Templates — the macOS look
   The parts of a fake Mac screen that more than one simulator needs:
   the appearance tokens, the wallpaper layer, the menu bar and the
   generic window frame. Every number here was measured off a real
   macOS screenshot at 2x, so do not adjust them by eye.

   Shared by every simulator. Edit here and both change together.
   Simulator-specific chrome (the dock, Photo Booth, the Messages
   window) lives beside that simulator's index.html.
   ============================================================= */

/* Appearance tokens. Set on the stage rather than :root, because the
   simulated desktop has its own light and dark, independent of the
   viewer's OS. Shell.setAppearance() writes data-appearance. */
#stage{
  --tbH:28px;          /* window title bar */
  --winR:10px;         /* window corner radius */
  --ltSize:12px;       /* traffic light dot */
  --ltGap:8px;
  --ltGlyph:8px;       /* the mark inside a traffic light */
  --mb:rgba(250,250,252,.62);        /* menu bar */
  --mb-ink:#16151a;
  --win:#f2f1f4;                      /* window chrome */
  --win-body:#fbfbfd;
  --win-ink:#1c1b20;
  --win-ink-dim:#79767f;
  --win-line:rgba(0,0,0,.13);
  --win-shadow:0 22px 48px rgba(0,0,0,.24), 0 1px 3px rgba(0,0,0,.16);
  --field:rgba(0,0,0,.05);
}
#stage[data-appearance="dark"]{
  --mb:rgba(16,15,19,.6); --mb-ink:#f3f2f6;
  --win:#38363d; --win-body:#232228; --win-ink:#f1f0f4; --win-ink-dim:#a09da8;
  --win-line:rgba(255,255,255,.13);
  --win-shadow:0 22px 52px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.5);
  --field:rgba(255,255,255,.08);
}

#wallpaper{position:absolute; inset:0; background-size:cover; background-position:center}

/* ---- Menu bar ---- */
#menubar{
  /* 24px tall, 13px type, 13px left inset, titles on 9px of padding each side,
     status items on 16px gaps. All measured off a real macOS bar at 2x. */
  position:absolute; top:0; left:0; right:0; height:24px; z-index:9000;
  background:var(--mb); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  display:flex; align-items:center; gap:0; padding:0 0 0 13px;
  color:var(--mb-ink); font-size:13px; letter-spacing:0;
}
/* a menu title is a box with padding, not a gap — that is what makes the
   rhythm read as native, since wide words sit no further apart than narrow ones */
#menubar .mb-app, #menubar .mb-i{padding:0 9px; white-space:nowrap}
#menubar .mb-app{font-weight:600}
#menubar .mb-sp{flex:1}
#menubar .mb-right{
  display:flex; align-items:center; gap:16px; padding-right:16px; font-size:13px;
}
#menubar .mb-right svg{display:block}
#spark{
  width:14px; height:14px; display:grid; place-items:center; color:var(--mb-ink);
  margin-right:6px; flex:none; position:relative;
}
/* First visit only: a small nudge so the panel is findable at all.
   Stops the moment it is clicked, and never comes back. */
#spark.attract svg{animation:sparkNudge 2.8s ease-in-out infinite}
#spark.attract::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1.5px solid currentColor; opacity:0; pointer-events:none;
  animation:sparkRing 2.8s ease-out infinite;
}
@keyframes sparkNudge{
  0%,55%,100%{transform:translateY(0) scale(1) rotate(0)}
  62%{transform:translateY(-3px) scale(1.22) rotate(-9deg)}
  70%{transform:translateY(0) scale(1) rotate(0)}
  77%{transform:translateY(-2px) scale(1.12) rotate(7deg)}
  85%{transform:translateY(0) scale(1) rotate(0)}
}
@keyframes sparkRing{
  0%,54%{transform:scale(.55); opacity:0}
  63%{opacity:.42}
  100%{transform:scale(1.6); opacity:0}
}
@media (prefers-reduced-motion: reduce){
  #spark.attract svg{animation:none}
  #spark.attract::after{animation:none}
}
#spark svg{width:14px; height:14px; display:block}
#spark:hover{opacity:.7}
#spark.spin svg{animation:sparkSpin .62s cubic-bezier(.34,.75,.28,1)}
@keyframes sparkSpin{
  0%{transform:rotate(0) scale(1)}
  55%{transform:rotate(200deg) scale(1.3)}
  100%{transform:rotate(360deg) scale(1)}
}
@media (prefers-reduced-motion: reduce){ #spark.spin svg{animation:none} }
/* day and date, then the time, with the wider gap macOS puts between them */
#clock{display:flex; align-items:center; gap:7px}
#clock b{font-weight:400}
#clock .t{font-variant-numeric:tabular-nums}

/* ---- The generic window frame ----
   Deliberately generic. A window that holds the visitor's own screenshot
   must not be a pixel-copy of a real app. */
.win{
  position:absolute; display:flex; flex-direction:column;
  background:var(--win-body); border-radius:var(--winR); overflow:hidden;
  box-shadow:var(--win-shadow); border:.5px solid var(--win-line);
  color:var(--win-ink);
}
.titlebar{
  height:var(--tbH); flex:none; display:flex; align-items:center; padding:0 7px;
  background:var(--win); border-bottom:.5px solid var(--win-line);
  cursor:grab; position:relative;
}
.titlebar:active{cursor:grabbing}
.lights{display:flex; gap:var(--ltGap); z-index:2}
.light{
  width:var(--ltSize); height:var(--ltSize); border-radius:50%;
  display:grid; place-items:center; position:relative;
}
/* the clickable area reaches well past the dot, which is 12px by spec */
.light::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(var(--ltSize) + 11px); height:calc(var(--tbH) - 2px);
}
.light svg{opacity:0; width:var(--ltGlyph); height:var(--ltGlyph); position:relative; z-index:1}
.lights:hover .light svg{opacity:.55}
.l-close{background:#ff5f57} .l-min{background:#febc2e} .l-max{background:#28c840}
.win-title{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-size:13px; font-weight:600; color:var(--win-ink); letter-spacing:.005em;
}
.win-title span{pointer-events:auto}
.win-body{flex:1; min-height:0; overflow:hidden; position:relative; display:flex; flex-direction:column}