/* base.css — tokens, reset, page layout, stage (DESIGN §2.1, §2.4). The mission card floats over the stage (mission.css, §16). */
:root {
  /* page chrome (editorial, like the course site; NOT the Mac). The mission card and the welcome override these with light glass tokens */
  --lab-bg: #ebe9e4; --lab-ink: #111; --lab-ink-2: #4a4843; --lab-ink-3: #5f5c55;
  --lab-line: rgba(17, 17, 17, .14); --lab-accent: #8a5400; --lab-ease: cubic-bezier(.2, .7, .2, 1);
  /* mac light */
  --mac-win-bg: #fff; --mac-bar: #ececec; --mac-bar-line: #d4d4d4; --mac-text: #1d1d1f; --mac-text-2: #6e6e73;
  --mac-sidebar: rgba(246, 246, 246, .92); --mac-hair: rgba(0, 0, 0, .12); --mac-accent: #0a6cff;
  --mac-sel: rgba(10, 108, 255, .14); --mac-sel-strong: #0a6cff; --mac-sel-inactive: rgba(0, 0, 0, .10);
  --mac-red: #fe5c60; --mac-yellow: #fac902; --mac-green: #37c85d; --mac-light-off: #d4d4d4;
  --mac-radius: 20px; --mac-tl: 13px; --mac-tl-gap: 11px; --mac-bar-h: 32px; --mac-shadow-on: 0 22px 60px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .35);
  --mac-shadow-off: 0 8px 24px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .25);
  /* z scale (stage). #lab-windows is one stacking context at --z-windows; the window counter inside it is a plain integer */
  --z-desktop: 1; --z-windows: 2; --z-dock: 900; --z-menubar: 1000; --z-menu: 1100;
  --z-spotlight: 1200; --z-toast: 1300; --z-dnd: 2000;
  --lab-font-ui: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  /* the fake Mac prefers the visitor's own system font by name (nothing is shipped); on Windows it falls through to Noto Sans TC */
  --mac-font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --lab-font-mono: "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", "DejaVu Sans Mono", Consolas, "Noto Sans TC", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { /* page chrome only: the fake Mac and the glass card stay light */
    --lab-bg: #070707; --lab-ink: #f1efe9; --lab-ink-2: #b9b6ae; --lab-ink-3: #85827b;
    --lab-line: rgba(241, 239, 233, .16); --lab-accent: #f0b545;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--lab-bg);
  color: var(--lab-ink);
  font-family: var(--lab-font-ui);
  font-size: 14px;
  line-height: 1.7;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- layout */
#lab-root {
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}
#lab-screen {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background: #070b1c;
}

/* ----------------------------------------------------------------- stage */
#lab-stage {
  --lab-font-ui: var(--mac-font);
  font-family: var(--mac-font);
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
  color: var(--mac-text);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
html.lab-small #lab-stage { touch-action: none; }
/* CC0 photo "Lake Tahoe" (Clara Marie, Wikimedia Commons), cover-fitted. The gradient under it is the fallback if the file
   does not load, and the colour behind both is the lake blue, so a missing photo never leaves a black screen. */
#lab-wall {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 0;
  background-color: #1f6f93;
  /* top layer: a soft blue tint under the menu bar (the real one adapts to the picture), so white text stays readable on bright sky */
  background-image: linear-gradient(180deg, rgba(14, 54, 104, .52) 0, rgba(14, 54, 104, .3) 30px, rgba(14, 54, 104, 0) 140px),
    url("../img/wallpaper.jpg"), linear-gradient(180deg, #6db3dd 0%, #3b8fc2 38%, #1f7a9c 62%, #155a6e 100%);
  background-size: 100% 140px, cover, cover;
  background-position: 0 0, 60% 62%, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
#lab-desktop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: var(--z-desktop); pointer-events: auto; }
#lab-windows { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: var(--z-windows); isolation: isolate; pointer-events: none; }
#lab-menubar { position: absolute; left: 0; right: 0; top: 0; z-index: var(--z-menubar); }
#lab-dock { position: absolute; left: 0; right: 0; bottom: 8px; z-index: var(--z-dock); pointer-events: none; }
#lab-overlays { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: var(--z-menu); pointer-events: none; }
#lab-dnd { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: var(--z-dnd); pointer-events: none; }
#lab-overlays > * { pointer-events: auto; }
#lab-modal-root { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 3000; pointer-events: none; }
#lab-modal-root > * { pointer-events: auto; }

body.lab-dragging, body.lab-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
body.lab-dragging-win * { cursor: default !important; }
/* dragging desktop icons keeps the plain arrow, as the Finder does (the icons themselves move with it) */
body.lab-dd-own, body.lab-dd-own * { cursor: default !important; }
body.lab-resizing { -webkit-user-select: none; user-select: none; }

/* ---------------------------------------- thin overlay scrollbars inside the fake Mac */
#lab-stage * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
#lab-stage *:hover, #lab-stage .lab-scrolling { scrollbar-color: rgba(0, 0, 0, .28) transparent; }
#lab-stage .theme-dark *:hover, #lab-stage .theme-dark .lab-scrolling { scrollbar-color: rgba(255, 255, 255, .3) transparent; }
#lab-stage ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
#lab-stage ::-webkit-scrollbar-corner { background: transparent; }
#lab-stage ::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background-color .15s; }
#lab-stage *:hover::-webkit-scrollbar-thumb, #lab-stage .lab-scrolling::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .28); }
#lab-stage .theme-dark *:hover::-webkit-scrollbar-thumb, #lab-stage .theme-dark .lab-scrolling::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); }

/* ---------------------------------------------------------------- helpers */
.lab-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.lab-ico { display: inline-flex; }
.lab-mono { font-family: var(--lab-font-mono); font-size: .92em; }

/* text-style buttons and links used by our own chrome (rail, welcome, notices) */
.lab-linkbtn {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--lab-ink-2);
  text-decoration: underline; text-decoration-color: var(--lab-line); text-underline-offset: 3px; cursor: pointer;
  transition: color .15s, text-decoration-color .15s;
}
.lab-linkbtn:hover { color: var(--lab-ink); text-decoration-color: var(--lab-ink-2); }
.lab-linkbtn.is-ready { text-decoration-color: var(--lab-accent); color: var(--lab-ink); }
.lab-textbtn {
  background: none; border: 1px solid var(--lab-line); border-radius: 0; padding: 7px 16px; margin: 0;
  font: inherit; color: var(--lab-ink); cursor: pointer; transition: border-color .15s;
}
.lab-textbtn:hover { border-color: var(--lab-ink-2); }
.lab-textbtn.is-primary { text-decoration: underline; text-decoration-color: var(--lab-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lab-linkbtn:focus-visible, .lab-textbtn:focus-visible, .lab-rail-strip:focus-visible,
.lab-mrow:focus-visible, .lab-disc:focus-visible, .lab-nextbtn:focus-visible, .lab-rail-link:focus-visible {
  outline: 2px solid var(--lab-accent); outline-offset: 2px;
}
.lab-dock-item:focus-visible, .lab-mb-title:focus-visible, .lab-mb-btn:focus-visible, .lab-fsbtn:focus-visible,
.lab-sheet-btn:focus-visible, .lab-tl-btn:focus-visible {
  outline: 2px solid #f0b545; outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}