/* The laptop desktop (design/desktop.md): shell, menu bar, Dock, desktop icons, windows, sheets.
   Laid out at the 1280 pt design size and scaled onto the display, like the painted canvas. */
.desktop {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.desktop.is-open { opacity: 1; }
/* Hidden, it still lays out (the painter reads it) but never takes a click from the desk. */
.desktop:not(.is-open) :is(.desk-screen, .desk-screen *, .desk-back) { pointer-events: none !important; }
.desktop :where(button) { font: inherit; color: inherit; }

/* The same pill as the resume's Back to desk, at the same place. The zoom keeps it clear of the
   lid (laptop-screen/index.js: state.backReserve). */
.desk-back {
  position: fixed; top: var(--space-4); left: var(--gutter); z-index: 1; pointer-events: auto;
  min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper-raised); color: var(--ink); font: 500 var(--text-small) / 1 var(--font-body); cursor: pointer;
  box-shadow: var(--shadow-1);
}

.desk-screen {
  position: absolute; left: 0; top: 0; width: 1280px; height: var(--desk-h, 831px); overflow: hidden;
  transform-origin: 0 0;
  transform: translate(var(--screen-x, 0), var(--screen-y, 0)) scale(var(--screen-scale, 1));
  pointer-events: auto; background: var(--paper);
  font: 400 13px / 1.4 var(--mac-font); color: var(--mac-text);
  /* Our own arrow, tip at the hotspot; an I-beam over text fields. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'%3E%3Cpath d='M3 2v17l4.4-4.1 3 6.5 2.7-1.2-3-6.4H16z' fill='%23000000' stroke='%23FFFFFF' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, default;
}
/* The display's own shape (modeller, 7 Nov): rounded top corners and the camera notch, so the live
   DOM matches the painted screen at the handover. Notch: u 0.4487 to 0.5513, top 3.16% of the height. */
.desk-screen { border-radius: 11px 11px 0 0; }
.desk-screen::after {
  content: ""; position: absolute; top: 0; left: 50%; z-index: 98; width: 131px; height: var(--menu-h, 26px);
  transform: translateX(-50%); border-radius: 0 0 3px 3px; background: #141110; pointer-events: none; /* the 3D notch: bezel colour, as measured at landing */
}
.desk-screen :is(input[type="text"], input[type="search"], textarea) { cursor: text; }
/* Like a desktop: interface text does not select on drag; reading text and fields do. */
.desk-screen { user-select: none; -webkit-user-select: none; }
.desk-screen :is(.reader, .resume-window, .msg, .term-log, .notes-welcome, .results, .about p, input, textarea) { user-select: text; -webkit-user-select: text; }
.desk-screen a { cursor: pointer; }
.desk-wallpaper, .desk-wallpaper svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Menu bar (design/desktop.md): the notch's height (--menu-h, 26 pt at 831), translucent with
   vibrancy; the left group stops before the notch zone (menu-bar.js measures). */
.desk-top {
  position: absolute; inset: 0 0 auto; z-index: 50; height: var(--menu-h, 26px); padding: 0 12px 0 10px;
  display: flex; align-items: center; background: var(--desk-bar); -webkit-backdrop-filter: var(--mac-vibrant); backdrop-filter: var(--mac-vibrant);
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1); color: var(--mac-text);
}
.menubar { display: flex; align-items: center; }
.menu-top {
  height: 22px; padding: 0 10px; border: 0; border-radius: var(--mac-radius-row); background: none;
  display: inline-flex; align-items: center; font: 400 13px / 1 var(--mac-font);
}
.menu-top[data-menu="arch"] svg { width: 12px; height: 14px; display: block; }
.menu-top[data-menu="app"] { font-weight: 700; }
.menu-top:is(:hover, [aria-expanded="true"]) { background: rgba(0, 0, 0, 0.1); }
.menu-status { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.status-glyphs { display: flex; align-items: center; gap: 14px; }
.status-glyphs svg { display: block; height: 13px; width: auto; }
.clock { font: 400 13px / 1 var(--mac-font); white-space: nowrap; }
/* Menus and context menus: vibrant panels, 22 pt rows, the system's blue highlight. */
.menu-panel, .ctx-menu {
  position: absolute; min-width: 200px; padding: 5px; z-index: 60; color: var(--mac-text); font-family: var(--mac-font);
  background: var(--mac-menu); -webkit-backdrop-filter: var(--mac-vibrant); backdrop-filter: var(--mac-vibrant);
  border-radius: var(--mac-radius-menu); box-shadow: var(--mac-shadow-menu);
}
.menu-panel { top: calc(var(--menu-h, 26px) + 1px); }
.ctx-menu { z-index: 85; }
:is(.menu-panel, .ctx-menu) [role="menuitem"] {
  display: block; width: 100%; height: 22px; padding: 0 10px; border: 0; border-radius: var(--mac-radius-row);
  background: none; text-align: left; font: 400 13px / 22px var(--mac-font); white-space: nowrap; color: inherit;
}
:is(.menu-panel, .ctx-menu) [role="menuitem"]:is(:hover, :focus) { background: var(--row-selected); color: #fff; box-shadow: none; outline: none; }
.menu-panel [aria-disabled="true"] { color: var(--mac-text-off); background: none !important; }
:is(.menu-sep, .ctx-sep) { height: 1px; margin: 5px 10px; background: rgba(0, 0, 0, 0.1); }

/* Desktop icons, top right: 64 pt real icons, labels with a soft white shadow. */
.desk-icons-host { position: absolute; left: 1192px; top: 46px; z-index: 10; }
.desk-icons { display: grid; grid-auto-rows: 92px; margin: 0; padding: 0; list-style: none; }
.desk-cell { width: 80px; }
.desk-icon { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0; border: 0; background: none; touch-action: none; }
.desk-glyph { display: block; width: 64px; height: 64px; padding: 2px; border-radius: 6px; }
.desk-glyph :is(svg, img) { width: 100%; height: 100%; display: block; }
.desk-name { padding: 1px 6px; border-radius: 4px; font: 500 12px / 1.3 var(--mac-font); color: var(--mac-text); text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 1px #fff; }
.desk-icon.is-selected .desk-glyph { background: rgba(0, 0, 0, 0.12); }
[data-wallpaper="archesDusk"] .desk-name { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.9); }
.desk-icon.is-selected .desk-name { background: var(--row-selected); color: #fff; text-shadow: none; }
.phone-only { display: none; }

/* Dock: a vibrant bar whose width follows the icons (dock.js springs their sizes). */
.desk-dock { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.dock-list {
  display: flex; align-items: flex-end; gap: 2px; height: 60px; margin: 0; padding: 4px 6px 8px; list-style: none;
  background: var(--desk-dock); -webkit-backdrop-filter: var(--mac-vibrant); backdrop-filter: var(--mac-vibrant);
  border: 0.5px solid var(--desk-dock-edge); border-radius: 16px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 30px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
}
.dock-item { display: flex; align-items: flex-end; }
.dock-app { --size: 48px; position: relative; width: var(--size); height: var(--size); padding: 0; border: 0; background: none; }
.dock-icon, .dock-icon :is(svg, img) { display: block; width: 100%; height: 100%; }
.dock-app.is-running::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: rgba(0, 0, 0, 0.75);
}
.dock-label {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: 4px 10px; border-radius: var(--mac-radius-menu); background: var(--mac-menu);
  -webkit-backdrop-filter: var(--mac-vibrant); backdrop-filter: var(--mac-vibrant); box-shadow: var(--mac-shadow-menu);
  font: 400 13px / 1.2 var(--mac-font); color: var(--mac-text); white-space: nowrap; opacity: 0; pointer-events: none;
}
.dock-list:hover .dock-app:hover .dock-label, .dock-app:focus-visible .dock-label { opacity: 1; }
.dock-sep { align-self: center; width: 1px; height: 40px; margin: 0 6px; background: rgba(0, 0, 0, 0.18); }
.dock-app.is-target { --size: 56px; filter: drop-shadow(0 0 4px var(--mac-accent)); }
.dock-app:focus-visible { outline: none; box-shadow: none; }
.dock-app:focus-visible .dock-icon { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: 1px; border-radius: 12px; }

/* Windows: macOS frames and true traffic lights. */
.desk-windows { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.win {
  position: absolute; display: grid; grid-template-rows: 28px minmax(0, 1fr); pointer-events: auto; color: var(--mac-text);
  background: var(--window-bg); border-radius: var(--mac-radius-window); box-shadow: var(--mac-shadow-window-off); overflow: hidden;
  font-family: var(--mac-font);
}
.win[hidden] { display: none; }
.win.is-focused { box-shadow: var(--mac-shadow-window); }
.win:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.5), var(--mac-shadow-window); }
.win-bar {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--window-bar-off); box-shadow: inset 0 -0.5px 0 var(--window-line); user-select: none;
}
.win.is-focused .win-bar { background: var(--window-bar); }
.win-lights { position: absolute; left: 8px; top: 0; bottom: 0; display: flex; align-items: center; }
.light { width: 20px; height: 20px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.light > span {
  display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%;
  background: var(--light-close); box-shadow: inset 0 0 0 0.5px var(--light-close-edge); color: transparent;
}
.light-min > span { background: var(--light-min); box-shadow: inset 0 0 0 0.5px var(--light-min-edge); }
.light-fill > span { background: var(--light-fill); box-shadow: inset 0 0 0 0.5px var(--light-fill-edge); }
.light svg { width: 8px; height: 8px; display: block; }
.win-lights:hover .light > span { color: rgba(0, 0, 0, 0.5); }
.win:not(.is-focused) .light > span { background: var(--light-idle); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.win-title { margin: 0; max-width: 60%; font: 600 13px / 1 var(--mac-font); color: var(--mac-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win:not(.is-focused) .win-title { color: var(--mac-text-off); }
.win-done { display: none; }
.win-body { position: relative; min-height: 0; overflow: auto; }
.win-shield { position: absolute; inset: 0; display: none; }
.win:not(.is-focused) .win-shield { display: block; }
.desk-screen :focus-visible { outline: 3px solid rgba(0, 122, 255, 0.5); outline-offset: 1px; box-shadow: none; }
.desk-screen:focus { outline: none; box-shadow: none; }

/* Controls shared by the apps */
.button {
  padding: 3px 12px; border: 0; border-radius: 6px; background: #fff; color: var(--mac-text);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.08); font: 400 13px / 1.4 var(--mac-font);
}
.button.is-primary { background: var(--mac-accent); color: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.1); }
.button:disabled { opacity: 0.5; }
.tool { min-width: 28px; height: 26px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--radius-control); background: none; font-size: 18px; line-height: 1; }
.tool:hover:not(:disabled) { background: rgba(42, 33, 28, 0.07); }
.tool:disabled { opacity: 0.35; }

/* Sheets, drag ghost, the power screen */
.sheet-scrim { position: absolute; inset: 0; z-index: 70; display: grid; justify-items: center; align-items: start; background: rgba(42, 33, 28, 0.18); }
.sheet { width: min(300px, 92%); margin-top: 48px; padding: 20px; background: var(--mac-menu); -webkit-backdrop-filter: var(--mac-vibrant); backdrop-filter: var(--mac-vibrant); border-radius: 12px; box-shadow: var(--mac-shadow-menu); text-align: center; }
.sheet-title { margin: 0; font: 700 13px / 1.3 var(--mac-font); }
.sheet-body { margin: 6px 0 0; font: 400 11px / 1.4 var(--mac-font); color: var(--mac-text); }
.sheet-actions { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.sheet-actions .button { flex: 1; }
.drag-ghost { position: absolute; left: 0; top: 0; z-index: 80; margin: -28px 0 0 -28px; width: 80px; display: flex; flex-direction: column; align-items: center; opacity: 0.8; pointer-events: none; }
.drag-icon, .drag-icon :is(svg, img) { display: block; width: 56px; height: 56px; }
.drag-name { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--window-bg); font-size: 12px; white-space: nowrap; }
.desk-power { position: absolute; inset: 0; z-index: 99; display: grid; place-items: center; background: #000; }
.desk-power[hidden] { display: none; }
.power-mark { display: grid; justify-items: center; gap: 40px; }
.power-mark svg { width: 52px; height: 64px; display: block; }
.boot-bar { display: block; width: 160px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.boot-bar span { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
/* Menu bar extra: the Bitcoin price (btc.js). Tabular numerals; a subtle tint after a move. */
.menu-extra { height: 22px; padding: 0 6px; border: 0; border-radius: var(--mac-radius-row); background: none; font: 400 13px / 1 var(--mac-font); color: var(--mac-text); font-variant-numeric: tabular-nums; transition: color 600ms ease; }
.menu-extra:is(:hover, [aria-expanded="true"]) { background: rgba(0, 0, 0, 0.1); }
.menu-extra[data-move="up"] { color: #1B7F3B; }
.menu-extra[data-move="down"] { color: #B3261E; }
.btc-panel { min-width: 180px; padding: 8px 12px; font: 400 12px / 1.5 var(--mac-font); color: var(--mac-text-2); }
.btc-panel p { margin: 0; }
.btc-title { font-weight: 600; color: var(--mac-text); }
.btc-big { font: 600 17px / 1.4 var(--mac-font); color: var(--mac-text); font-variant-numeric: tabular-nums; }
.btc-source { margin-top: 4px !important; font-size: 11px; }