/* glass.css -- the shared desktop kit: menu bar, Dock, Finder-style windows and Liquid Glass.
   The landing page (desktop.html) uses it first; the project dashboards (FoldView next) will too.
   Everything is prefixed lg- so it can sit beside a project's own styles. glass.js adds the
   refraction in Chromium; everywhere else the glass is blur + tint + rim light. */

:root {
  --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", "Inter",
    "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --lg-menubar-h: 30px;
  --lg-dock-icon: 54px;
  --lg-r-window: 26px;

  --lg-text: #f5f5f7;
  --lg-text-2: rgba(235, 235, 245, .66);
  --lg-text-3: rgba(235, 235, 245, .40);
  --lg-accent: #0a84ff;
  --lg-accent-text: #64aaff;
  /* GLASS OPACITY (System Settings > Appearance; Jay, 2026-10-23, after iPadOS 26's clear widgets): 0 clear to 1 opaque.
     A window's own title-bar slider sets --lg-op on that window alone, so the window tint is worked out on .lg-window
     from these parts (rgb, and the alpha at 0, which climbs to 1 at 1); glass.js scales every filter's blur with it. */
  --lg-op: .30;
  --lg-win-rgb: 28 28 32;
  --lg-win-a: 0;                          /* at 0 the slider leaves the glass clear (Jay, 2026-10-24: "even less opaque") */
  --lg-window-tint: rgb(var(--lg-win-rgb) / calc(var(--lg-win-a) + (1 - var(--lg-win-a)) * var(--lg-op)));
  --lg-panel-tint: rgba(255, 255, 255, .07);
  /* THE FROST (Jay, 2026-10-24: "Anything that's a 'tile' will look better if it looks like the frosted glass of the left
     panel"): the sidebar's own tint and rims, worn by every tile, toolbar capsule, field and chip button */
  --lg-frost: var(--lg-panel-tint);
  --lg-frost-hover: rgba(255, 255, 255, .12);
  --lg-frost-rims: inset 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .12);
  --lg-control: rgba(255, 255, 255, .10);
  --lg-hover: rgba(255, 255, 255, .08);
  --lg-selected: rgba(255, 255, 255, .15);
  --lg-dock-tint: rgb(255 255 255 / calc(.04 + .16 * var(--lg-op)));
  --lg-rim: rgba(255, 255, 255, .78);
  --lg-rim-dim: rgba(255, 255, 255, .32);
  --lg-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .22);
  --lg-label-bg: rgba(44, 44, 48, .88);
  color-scheme: dark;
}

/* Light appearance: the system's choice, unless the Control Center button pinned one. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --lg-text: #1d1d1f;
    --lg-text-2: rgba(60, 60, 67, .68);
    --lg-text-3: rgba(60, 60, 67, .42);
    --lg-accent-text: #0a6cf0;
    --lg-win-rgb: 246 246 248; --lg-win-a: .02;
    --lg-panel-tint: rgba(255, 255, 255, .42); --lg-frost-hover: rgba(255, 255, 255, .6);
    --lg-control: rgba(255, 255, 255, .55);
    --lg-hover: rgba(0, 0, 0, .05);
    --lg-selected: rgba(0, 0, 0, .08);
    --lg-dock-tint: rgb(255 255 255 / calc(.08 + .42 * var(--lg-op)));
    --lg-rim: rgba(255, 255, 255, .90);
    --lg-rim-dim: rgba(255, 255, 255, .70);
    --lg-shadow: 0 30px 80px rgba(0, 0, 0, .28), 0 4px 14px rgba(0, 0, 0, .14);
    --lg-label-bg: rgba(250, 250, 252, .90);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --lg-text: #1d1d1f;
  --lg-text-2: rgba(60, 60, 67, .68);
  --lg-text-3: rgba(60, 60, 67, .42);
  --lg-accent-text: #0a6cf0;
  --lg-win-rgb: 246 246 248; --lg-win-a: .02;
  --lg-panel-tint: rgba(255, 255, 255, .42); --lg-frost-hover: rgba(255, 255, 255, .6);
  --lg-control: rgba(255, 255, 255, .55);
  --lg-hover: rgba(0, 0, 0, .05);
  --lg-selected: rgba(0, 0, 0, .08);
  --lg-dock-tint: rgb(255 255 255 / calc(.08 + .42 * var(--lg-op)));
  --lg-rim: rgba(255, 255, 255, .90);
  --lg-rim-dim: rgba(255, 255, 255, .70);
  --lg-shadow: 0 30px 80px rgba(0, 0, 0, .28), 0 4px 14px rgba(0, 0, 0, .14);
  --lg-label-bg: rgba(250, 250, 252, .90);
  color-scheme: light;
}

/* ---- the desktop ------------------------------------------------------------------------- */
html { background: #1f3346; }
.lg-desktop {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  font-family: var(--lg-font);
  font-size: 13px;
  color: var(--lg-text);
  background: #1f3346 url("wallpaper.jpg") center / cover no-repeat;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.lg-desktop button { font: inherit; color: inherit; }
.lg-desktop a { color: inherit; text-decoration: none; }
.lg-desktop input { user-select: text; }
.lg-workspace { position: fixed; inset: var(--lg-menubar-h) 0 0 0; }

/* Wallpapers (System Settings > Wallpaper): the photo by default; the others are drawn, so the glass has colour to bend.
   Dusk is Jay's iPad home screen. Dock size (Desktop & Dock) moves --lg-dock-icon, which the Dock measures from. */
:root {
  --lg-wp-dusk: radial-gradient(48% 52% at 18% 20%, #3f95ba, transparent 72%), radial-gradient(52% 56% at 36% 90%, #e5485f, transparent 70%),
    radial-gradient(46% 50% at 76% 26%, #6a5fd0, transparent 72%), radial-gradient(50% 50% at 90% 88%, #1b2a6e, transparent 70%),
    linear-gradient(160deg, #24496c, #2b1d4f);
  --lg-wp-aurora: radial-gradient(55% 45% at 28% 16%, #35d3aa, transparent 70%), radial-gradient(50% 55% at 76% 34%, #7b5cff, transparent 72%),
    radial-gradient(60% 50% at 50% 96%, #0b5170, transparent 70%), linear-gradient(170deg, #0d2b3a, #1a1240);
  --lg-wp-graphite: radial-gradient(70% 60% at 28% 18%, #50555f, transparent 70%), radial-gradient(60% 60% at 82% 86%, #23262d, transparent 70%),
    linear-gradient(160deg, #3b3f47, #141619);
}
:root[data-wallpaper="dusk"] .lg-desktop { background: var(--lg-wp-dusk); }
:root[data-wallpaper="aurora"] .lg-desktop { background: var(--lg-wp-aurora); }
:root[data-wallpaper="graphite"] .lg-desktop { background: var(--lg-wp-graphite); }
:root[data-docksize="small"] { --lg-dock-icon: 44px; }
:root[data-docksize="large"] { --lg-dock-icon: 66px; }

/* ---- the open folder (iPadOS 26): everything behind blurs, a big title, one square sheet of glass --------------------- */
.lg-fs {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 5vh, 64px);
  padding: 24px 16px 4vh;
  background: rgba(8, 10, 16, 0);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  backdrop-filter: blur(0) saturate(100%);
  font-family: var(--lg-font);
  user-select: none;
  transition: background .3s, backdrop-filter .3s, -webkit-backdrop-filter .3s;
}
.lg-fs[hidden] { display: none; }
.lg-fs.is-open { background: rgba(8, 10, 16, .14); -webkit-backdrop-filter: blur(30px) saturate(135%); backdrop-filter: blur(30px) saturate(135%); }
.lg-fs-title {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 68px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .16);
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .25s, transform .4s cubic-bezier(.2, .9, .3, 1);
}
.lg-fs.is-open .lg-fs-title { opacity: 1; transform: none; transition-delay: .05s; }
.lg-fs-panel {
  --lg-tint: rgba(255, 255, 255, .13);
  --lg-blur: 26px;
  --lg-sat: 165%;
  --lg-rim: rgba(255, 255, 255, .92);
  --lg-rim-dim: rgba(255, 255, 255, .30);
  --lg-shadow: 0 30px 90px rgba(0, 0, 0, .22), inset 0 0 40px rgba(255, 255, 255, .06);
  box-sizing: border-box;
  width: min(640px, 92vw);
  aspect-ratio: 1;
  max-height: 72vh;
  padding: clamp(26px, 8%, 52px) clamp(18px, 6%, 44px);
  border-radius: clamp(38px, 11%, 72px);
  overflow: auto;
  opacity: 0;
  transform: translate(var(--fs-x, 0), var(--fs-y, 0)) scale(var(--fs-s, .6));
  transition: transform .44s cubic-bezier(.2, .95, .25, 1.04), opacity .22s;
}
.lg-fs.is-open .lg-fs-panel { opacity: 1; transform: none; }
.lg-fs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3.4vh, 34px) 8px; }
.lg-fs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  text-decoration: none;
  font: 500 clamp(12px, 1.1vw, 15px)/1.2 var(--lg-font);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.lg-fs-item:focus-visible { outline: none; }
.lg-fs-item:focus-visible .lg-fs-icon { border-radius: 24%; box-shadow: 0 0 0 3px var(--lg-accent); }
.lg-fs-icon { width: clamp(58px, 64%, 100px); aspect-ratio: 1; transition: transform .16s, filter .16s; }
.lg-fs-icon > svg { display: block; width: 100%; height: 100%; }
.lg-fs-item:active .lg-fs-icon { transform: scale(.9); filter: brightness(.8); }
.lg-fs-label { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; }
.lg-fs-label > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lg-fs-note { min-height: 1.2em; margin: 18px 0 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
/* the badges: a blue dot is new (not opened yet); a cloud is not here yet. Launchpad's labels use them too. */
.lg-fs-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #0a84ff; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .4); }
.lg-fs-cloud { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .lg-fs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .lg-fs, .lg-fs-title, .lg-fs-panel { transition: none; } }

/* ---- the glass material ------------------------------------------------------------------ */
.lg-glass {
  position: relative;
  isolation: isolate;
  background: var(--lg-tint, rgba(255, 255, 255, .10));
  -webkit-backdrop-filter: blur(var(--lg-blur, 24px)) saturate(var(--lg-sat, 180%));
  backdrop-filter: blur(var(--lg-blur, 24px)) saturate(var(--lg-sat, 180%));
  box-shadow: var(--lg-shadow);
}
/* PUNCHED (Jay, 2026-10-25: "punch through to whatever's behind. If it's the only window, then all the way to the
   wallpaper. If there's a window behind, then the pixel color of what's behind"): a window holding tiles carries its glass
   on a pane of its own (.lg-pane, glass.js punch()), cut through wherever a tile's picture sits (--lg-holes, an SVG mask
   redrawn when the pictures move); the sheen is cut the same way. The window itself keeps its shadow and its rim. */
.lg-glass.lg-punched { background: transparent; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.lg-pane {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
  background: var(--lg-tint, rgba(255, 255, 255, .10));
  -webkit-backdrop-filter: blur(var(--lg-blur, 24px)) saturate(var(--lg-sat, 180%));
  backdrop-filter: blur(var(--lg-blur, 24px)) saturate(var(--lg-sat, 180%));
  -webkit-mask: var(--lg-holes, none);
  mask: var(--lg-holes, none);
}
.lg-punched::after { -webkit-mask: var(--lg-holes, none); mask: var(--lg-holes, none); }
/* A float (glass.js punch(), Jay 2026-10-26: "consistent even for DIVs that are non-tiles"): a picture that is not a
   tile's -- FoldView's stage, Studying's code and diagrams -- drops its own fill and stands on what is behind the window,
   like a tile's picture. A panel between it and the window that has a fill of its own carries that fill on its ::before,
   cut under the float (--lg-panel-holes). */
.lg-float { background: transparent !important; box-shadow: none !important; }
.lg-holed { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important; isolation: isolate; }
.lg-holed::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
                    background: var(--lg-holed-bg); box-shadow: var(--lg-holed-shadow);
                    -webkit-backdrop-filter: var(--lg-holed-bf); backdrop-filter: var(--lg-holed-bf);
                    -webkit-mask: var(--lg-panel-holes, none); mask: var(--lg-panel-holes, none); }
/* under the pictures only: the window's blur, scaled by its own slider from none (left) to its full frost (right), no tint */
.lg-pane-haze {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: blur(calc(var(--lg-op, .3) * 22px)) saturate(calc(1 + .7 * var(--lg-op, .3)));
  backdrop-filter: blur(calc(var(--lg-op, .3) * 22px)) saturate(calc(1 + .7 * var(--lg-op, .3)));
  -webkit-mask: var(--lg-holes-only, linear-gradient(transparent 0 0));
  mask: var(--lg-holes-only, linear-gradient(transparent 0 0));
}
/* Rim: a crisp hairline all the way round, brightest along the top where the light falls and up a little again at the
   bottom, as on iPadOS 26's widgets. (Jay, 2026-10-23: the old diagonal rim, bright at two corners and gone between,
   read as uneven; "the frosted borders still aren't QUITE right".) */
.lg-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, var(--lg-rim), var(--lg-rim-dim) 22%, var(--lg-rim-dim) 78%,
    color-mix(in srgb, var(--lg-rim) 50%, var(--lg-rim-dim)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* Sheen: a soft lift across the top of the pane, behind the content. */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 45%);
  /* A soft light just inside the top rim. The haze and the lower shade that once covered the bend's stair-steps are
     gone: the bend is now gentle and anti-aliased, and on iPadOS 26's widgets the rim is one clean line. */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, var(--lg-edge-light, .22)),
    /* and a soft light band just inside the rim, the thickness of glass the Watch folder's sheet shows (2026-10-24) */
    inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 18px rgba(255, 255, 255, .07);
}

/* ---- scroll bars, as macOS draws them (Jay, 2026-10-23) ---------------------------------
   A thin rounded thumb, no track and no arrows, shown while the pointer is over the pane that scrolls. Chromium and
   Safari style ::-webkit-scrollbar; Firefox takes its own thin bar. Chromium ignores these rules on any element that
   sets scrollbar-width or scrollbar-color, so those stay in the Firefox-only block. */
::-webkit-scrollbar { width: 11px; height: 11px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* always there, faintly (Jay, 2026-10-24: "Photos doesn't have a scrollbar"), firmer under the pointer */
::-webkit-scrollbar-thumb { min-height: 28px; min-width: 28px; border: 3px solid transparent; border-radius: 8px; background: rgba(128, 128, 128, .32) padding-box; }
:hover::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, .55); }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: rgba(128, 128, 128, .82); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, .55) transparent; }
}

/* ---- menu bar (Tahoe: no bar, just the items over the wallpaper) -------------------------- */
.lg-menubar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--lg-menubar-h);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.lg-mi {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: none;
  white-space: nowrap;
  cursor: default;
}
.lg-desktop .lg-mi { color: #fff; }
.lg-mi:hover { background: rgba(255, 255, 255, .20); }
.lg-mi svg { width: 15px; height: 15px; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.lg-mi svg.lg-stroke { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.lg-mi.lg-app { font-weight: 700; }
.lg-mi.lg-logo { padding: 0 8px; }
.lg-mi.lg-logo svg { width: 16px; height: 16px; }
.lg-about-mark .lg-apple { color: var(--lg-text); opacity: .9; }
.lg-mi img { display: block; width: auto; height: 17px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
.lg-about-mark img { width: 100%; height: 100%; object-fit: contain; }
.lg-clock { font-variant-numeric: tabular-nums; }
/* iPadOS's right-hand corner: volume, Wi-Fi, battery -- all live (shell.js) */
.lg-status { padding: 0 6px; }
.lg-mi.lg-status svg { width: 18px; height: 15px; }
.lg-mi.lg-status svg.is-off { opacity: .5; }
.lg-mi.lg-status svg.lg-batt { width: 25px; height: 13px; }
.lg-status small { margin-left: 5px; font-size: 12px; font-variant-numeric: tabular-nums; }
.lg-pop {
  position: fixed;
  top: calc(var(--lg-menubar-h) + 6px);
  right: 12px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 250px;
  box-sizing: border-box;
  padding: 12px 14px 14px;
  border-radius: 18px;
  --lg-tint: var(--lg-window-tint);
  font: 13px var(--lg-font);
  color: var(--lg-text);
}
.lg-pop[hidden] { display: none; }
.lg-pop b { font-weight: 600; }
.lg-pop input[type=range] { width: 100%; margin: 0; accent-color: var(--lg-accent); }
.lg-spacer { flex: 1; }

/* ---- windows ------------------------------------------------------------------------------ */
.lg-window {
  position: absolute;
  display: flex;
  min-width: 300px;
  overflow: hidden;
  border-radius: var(--lg-r-window);
  /* worked out here, not inherited from :root, so a window's own --lg-op (its title-bar slider) is the one it uses */
  --lg-tint: rgb(var(--lg-win-rgb) / calc(var(--lg-win-a) + (1 - var(--lg-win-a)) * var(--lg-op)));
  --lg-blur: calc(2px + 46px * var(--lg-op));
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .26s;
}
.lg-window[hidden] { display: none; }
.lg-window.is-minimized { opacity: 0; pointer-events: none; }
/* Fill (Option-click the green button, or double-click the title bar): the desktop between the menu bar and the Dock,
   whatever size the Dock is. */
.lg-window.is-zoomed {
  left: 8px !important;
  top: 8px !important;
  width: calc(100vw - 16px) !important;
  height: calc(100vh - var(--lg-menubar-h) - var(--lg-dock-icon) - 40px) !important;
}
/* Full Screen (the green button, as on Tahoe): the window takes the whole screen; the menu bar and the Dock step aside. */
.lg-fullscreen .lg-workspace { inset: 0; }
.lg-fullscreen .lg-menubar, .lg-fullscreen .lg-dock-wrap { visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.lg-window.is-fullscreen { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; box-shadow: none; }

/* A window's own glass opacity (glass.js opacitySlider): a slim slider at the right of the title bar, quiet until the
   window is hovered. It breaks the macOS convention on purpose (Jay, 2026-10-23): some apps need to be read seriously. */
.lg-winop { display: inline-flex; flex: none; align-items: center; gap: 6px; margin-left: 12px; color: var(--lg-text-2); opacity: .5; transition: opacity .2s; }
.lg-window:hover .lg-winop, .lg-winop:focus-within { opacity: 1; }
.lg-sim-bar .lg-winop { position: absolute; right: 14px; top: 50%; z-index: 1; margin: 0; transform: translateY(-50%); }
.lg-winop svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lg-winop svg path { fill: currentColor; stroke: none; }
.lg-winop input { width: 72px; height: 16px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: default; }
.lg-winop input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: color-mix(in srgb, currentColor 45%, transparent); }
.lg-winop input::-moz-range-track { height: 3px; border-radius: 2px; background: color-mix(in srgb, currentColor 45%, transparent); }
.lg-winop input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .3); -webkit-appearance: none; }
.lg-winop input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .3); }
@media (max-width: 720px) { .lg-winop input { width: 52px; } }

/* Framed (glass.js EMBEDDED): a kit page inside a desktop window. The host draws the frame, the glass, the menu bar and
   the Dock; the page's own window fills the frame, clear, so the host window's glass is the one you see. */
.lg-embedded, .lg-embedded body { background: transparent !important; }
.lg-embedded .lg-workspace { inset: 0; }
.lg-embedded .lg-window {
  left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
  border-radius: 0; box-shadow: none; --lg-tint: transparent;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.lg-embedded .lg-window::before, .lg-embedded .lg-window::after, .lg-embedded .lg-traffic { display: none; }

/* Resize strips (glass.js): invisible, just inside the frame, above the content; corners take the diagonal. */
.lg-rz { position: absolute; z-index: 40; }
.lg-rz-n, .lg-rz-s { left: 16px; right: 16px; height: 6px; cursor: ns-resize; }
.lg-rz-n { top: 0; }
.lg-rz-s { bottom: 0; }
.lg-rz-e, .lg-rz-w { top: 16px; bottom: 16px; width: 6px; cursor: ew-resize; }
.lg-rz-e { right: 0; }
.lg-rz-w { left: 0; }
.lg-rz-ne, .lg-rz-nw, .lg-rz-se, .lg-rz-sw { width: 16px; height: 16px; }
.lg-rz-ne { top: 0; right: 0; cursor: nesw-resize; }
.lg-rz-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.lg-rz-nw { top: 0; left: 0; cursor: nwse-resize; }
.lg-rz-se { bottom: 0; right: 0; cursor: nwse-resize; }
.lg-window.is-zoomed .lg-rz-n, .lg-window.is-fullscreen .lg-rz, .lg-embedded .lg-rz { display: none; }
html.lg-resizing iframe { pointer-events: none; }
html.lg-resizing, html.lg-resizing * { -webkit-user-select: none; user-select: none; }
@media (max-width: 720px) { .lg-rz { display: none; } }

/* The key window's body takes the keyboard (glass.js focusIn) but is no control, so it shows no focus ring. */
.lg-window :is(.lg-sim-body, .lg-main, .lg-content):focus { outline: none; }

.lg-traffic { display: flex; gap: 8px; padding: 4px 6px 14px; }
.lg-tl {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .22);
  cursor: default;
}
.lg-tl-close { background: #ff5f57; }
.lg-tl-min { background: #febc2e; }
.lg-tl-zoom { background: #28c840; }
.lg-window:not(.is-front) .lg-tl, .lg-tl:disabled { background: rgba(128, 128, 128, .45); }
/* NO GLYPHS IN THE TRAFFIC LIGHTS (Jay, 2026-10-24: "the -, +, and x in the circular buttons, get rid of them") */
/* A FRAMED PAGE'S OWN BACK AND FORWARD, never wired, give way to its window's, which are (sim.js openPage) */
.lg-embedded .lg-capsule:has(> button[aria-label="Back"]:disabled) { display: none; }

/* Sidebar: an inset pane that floats inside the window, like Tahoe's. */
.lg-sidebar {
  flex: none;
  width: 196px;
  margin: 8px 0 8px 8px;
  padding: 10px 8px;
  overflow-y: auto;
  border-radius: 18px;
  background: var(--lg-frost);
  box-shadow: var(--lg-frost-rims);
}
.lg-frost { background: var(--lg-frost); box-shadow: var(--lg-frost-rims); }   /* the sidebar's glass, for anything else that is a tile */
.lg-frost:is(button, a):hover { background: var(--lg-frost-hover); }
.lg-side-head { padding: 12px 8px 4px; font-size: 11px; font-weight: 600; color: var(--lg-text-3); }
.lg-side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-size: 13px;
  cursor: default;
}
.lg-side-item svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--lg-accent-text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-side-item:hover { background: var(--lg-hover); }
.lg-side-item.is-selected { background: var(--lg-selected); }

.lg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lg-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 8px 14px 0 12px;
  cursor: default;
}
.lg-capsule, .lg-search {
  border-radius: 999px;
  background: var(--lg-frost);
  box-shadow: var(--lg-frost-rims);
}
.lg-capsule { display: flex; }
.lg-capsule button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--lg-text-2);
}
.lg-capsule button:disabled { opacity: .45; }
.lg-capsule svg, .lg-search svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lg-title { margin: 0; font-size: 15px; font-weight: 700; }
.lg-search { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; color: var(--lg-text-2); }
.lg-search input { width: 150px; border: 0; outline: 0; background: none; font: inherit; color: var(--lg-text); }
.lg-search input::placeholder { color: var(--lg-text-3); }

/* Finder icon view: grouped like Today / Yesterday, folders with a blue item line. */
.lg-content { flex: 1; overflow: auto; padding: 4px 18px 18px; }
.lg-group { margin: 14px 4px 8px; font-size: 13px; font-weight: 700; color: var(--lg-text-2); }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.lg-side-item:focus-visible, .lg-mi:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: -2px; }
.lg-folder svg { display: block; width: 76px; height: 62px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
/* (.lg-tile, the Finder-folder tile, retired 2026-10-24: the name is the general dashboard tile in page.css now) */
.lg-empty { padding: 40px; text-align: center; color: var(--lg-text-3); }

/* About this PC */
/* A dialog sits over other windows, so it gets a more solid tint than the Projects window. */
.lg-about { width: 300px; --lg-tint: rgba(36, 36, 40, .84); }
:root[data-theme="light"] .lg-about { --lg-tint: rgba(248, 248, 250, .86); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lg-about { --lg-tint: rgba(248, 248, 250, .86); }
}
.lg-about-in { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 22px 18px; text-align: center; }
.lg-about-in .lg-traffic { align-self: flex-start; padding: 2px 0 6px; }
.lg-about-mark { width: 96px; height: 96px; margin: 2px 0 10px; }
.lg-about-mark svg { width: 100%; height: 100%; }
.lg-about-name { margin: 0; font-size: 22px; font-weight: 700; }
.lg-about-role { margin: 2px 0 14px; font-size: 12px; color: var(--lg-text-2); }
.lg-about-specs { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0 0 16px; font-size: 12px; text-align: left; }
.lg-about-specs dt { text-align: right; color: var(--lg-text-2); }
.lg-about-specs dd { margin: 0; }
.lg-about-specs span { color: var(--lg-text-3); }
.lg-button {
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--lg-frost);
  box-shadow: var(--lg-frost-rims);
  font-size: 13px;
  font-weight: 500;
}
.lg-button:hover { background: var(--lg-frost-hover); }
.lg-about-credit { margin: 14px 0 0; font-size: 10.5px; color: var(--lg-text-3); }
.lg-about-credit a { text-decoration: underline; }

/* ---- the Dock ------------------------------------------------------------------------------ */
.lg-dock-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 900;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.lg-dock {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: calc(var(--lg-dock-icon) + 14px);
  padding: 0 7px;
  border-radius: 26px;
  pointer-events: auto;
  --lg-tint: var(--lg-dock-tint);
  --lg-blur: 12px;
  --lg-sat: 160%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25), 0 1px 4px rgba(0, 0, 0, .12);
}
.lg-dock-item {
  position: relative;
  flex: none;
  width: var(--lg-dock-icon);
  height: var(--lg-dock-icon);
  margin: 0 3px 7px;
  transition: width .16s ease-out, height .16s ease-out;
}
.lg-dock.is-live .lg-dock-item { transition-duration: .06s; }
.lg-dock-item > a, .lg-dock-item > button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  -webkit-user-drag: none;
}
.lg-icon { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .28)); }
.lg-dock-item.is-running::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--lg-text);
  opacity: .75;
}
.lg-dock-sep {
  flex: none;
  width: 1px;
  height: calc(var(--lg-dock-icon) - 8px);
  margin: 0 7px 11px;
  background: rgba(255, 255, 255, .30);
}
.lg-dock-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--lg-label-bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(255, 255, 255, .2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--lg-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
}
.lg-dock-item:hover .lg-dock-label { opacity: 1; }
.lg-dock-item.is-bouncing { animation: lg-bounce .56s cubic-bezier(.3, .7, .4, 1); }
/* A project whose app did not answer on load (shell.js): dimmed. The dot means its window is open, as on a Mac. */
.lg-dock-item.is-down > a { opacity: .42; }
@keyframes lg-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-24px); }
  70% { transform: translateY(0); }
  85% { transform: translateY(-5px); }
}

/* ---- System Settings > Appearance: Liquid Glass "Tinted" and the icon styles ------------------------- */
:root[data-glass="tinted"] { --lg-win-a: .72; --lg-dock-tint: rgba(30, 30, 36, .50); }
:root[data-theme="light"][data-glass="tinted"] { --lg-win-a: .76; --lg-dock-tint: rgba(255, 255, 255, .58); }
@media (prefers-color-scheme: light) {
  :root[data-glass="tinted"]:not([data-theme="dark"]) { --lg-win-a: .76; --lg-dock-tint: rgba(255, 255, 255, .58); }
}
:root[data-icons="dark"] .lg-icon { filter: brightness(.6) saturate(.85) drop-shadow(0 3px 6px rgba(0, 0, 0, .28)); }
:root[data-icons="clear"] .lg-icon { filter: grayscale(1) brightness(1.3) opacity(.78) drop-shadow(0 3px 6px rgba(0, 0, 0, .28)); }
:root[data-icons="tinted"] .lg-icon { filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(2.4) drop-shadow(0 3px 6px rgba(0, 0, 0, .28)); }

@media (prefers-reduced-motion: reduce) {
  .lg-dock-item, .lg-window { transition: none; }
  .lg-dock-item.is-bouncing { animation: none; }
}

/* ---- phones: no hover, so no magnifier; one full-width window ------------------------------- */
@media (max-width: 720px) {
  .lg-window {
    left: 8px !important;
    top: 8px !important;
    width: calc(100vw - 16px) !important;
    height: calc(100% - 104px) !important;
  }
  .lg-about { height: auto !important; }
  .lg-sidebar, .lg-capsule, .lg-hide-sm { display: none; }
  .lg-search input { width: 90px; }
  .lg-dock-wrap { left: 8px; right: 8px; }
  .lg-dock { --lg-dock-icon: 44px; max-width: 100%; overflow-x: auto; }
}