/* The Mac app's own stylesheet (loaded for everyone, but every rule starts with html[data-mac…], which only mac.js sets,
   and only inside the Mac app). The look is design.css, untouched: the design's Mac view (.app.mac, .lights, .upd …)
   is used exactly as it is. This file only holds what a real Mac window needs and a drawn one does not.
   It never restyles a design piece.

   1. What is behind the window. In the design the Mac window sits on a drawn desktop (.stage[data-p=mac]): a soft glow of
      the member's colour near the top left, and the menu is see-through over it (.app.mac .side). A real window has no
      drawn desktop behind it, so the page paints that same glow itself, in the same place the design's picture has it
      (measured from the window's own corner: the design's stage is 1488 x 1020 with the window at 64, 80, so
      "18% 8%" is 203.84px, 1.6px from the window's corner and "92% 100%" is 55.04px in from the right, 80px under the bottom).
      Only where the window is the frame (html[data-mac-window]): when sample mode draws the design's own window and
      desktop for the pictures, the design's own desktop is there and nothing is added behind it. */
html[data-mac-window] body{background:var(--stage)}
html[data-mac-window] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 600px at 203.84px 1.6px,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),radial-gradient(900px 700px at calc(100% - 55.04px) calc(100% + 80px),color-mix(in srgb,var(--fg) 10%,transparent),transparent 70%)}

/* 2. The three window buttons. The design draws them in the menu's top row (.lights). In the real window the Mac draws
      its own, in that very place (desktop/src-tauri/tauri.conf.json, trafficLightPosition), so the design's three dots keep
      their room and are not painted twice. A window that has no buttons of its own (the picture tool's stand-in window)
      says so, and the design's dots are drawn. An older Mac app, whose window still has a title bar with the buttons in it,
      gets no dots and no room for them. */
html[data-mac=overlay]:not([data-mac-lights=drawn]) .lights i{visibility:hidden}
html[data-mac=titled] .lights{display:none}

/* 3. A narrow Mac window gets the design's Phone view (today's rule: the layout follows the window's width).
      The design draws the phone inside an iPhone: a pretend status bar (9:41, signal, battery: 54px) above the top bar and
      a pretend home bar (30px) under the tab bar. A Mac window has neither. The 54px row stays, because that is where the
      Mac's own three window buttons sit in a narrow window (the window is dragged by it), and the 30px are not needed.
      Every other number is the design's: 44px top bar (98 - 54), 53px tab bar (83 - 30). */
html[data-mac] .app.phone{--mx-st:0px;--mx-sb:0px;--topH:calc(44px + var(--mx-st));--botH:calc(53px + var(--mx-sb))}
html[data-mac=overlay] .app.phone{--mx-st:54px}
html[data-mac] .phone .top{padding-top:var(--mx-st)}
html[data-mac] .phone .tabbar{height:var(--botH);padding-bottom:var(--mx-sb)}
html[data-mac] .phone .sbar,html[data-mac] .phone .hind{display:none}