/* ==========================================================================
   W.D.D — Jarvis-style HUD theme
   ========================================================================== */
/* The colour palette (themes, light mode, brightness) is in palette.css, loaded before this file. */
/* Light surfaces need solid buttons and no holo effects; the Lab theme drops the effects in both modes. */
:root[data-mode='light'] .btn:hover { color: var(--c); }
:root[data-mode='light'] .btn.primary { background: var(--c); color: #fff; border-color: var(--c); }
:root[data-mode='light'] .btn.primary:hover { background: color-mix(in srgb, var(--c) 85%, black); color: #fff; }
:root[data-mode='light'] .displays-map .dm.me { color: #fff; background: var(--acc); }
:root[data-mode='light'] .ico { background: var(--acc); }
:root[data-mode='light'] .tb-logo svg, :root[data-mode='light'] .logo-mark, :root[data-mode='light'] .boot .ring, :root[data-theme='lab'] .tb-logo svg, :root[data-theme='lab'] .logo-mark, :root[data-theme='lab'] .boot .ring, :root[data-theme='mango'] .tb-logo svg, :root[data-theme='mango'] .logo-mark, :root[data-theme='mango'] .boot .ring { filter: none; }
:root[data-mode='light'] .h-title, :root[data-mode='light'] .tb-logo .w, :root[data-mode='light'] .logo-title, :root[data-mode='light'] .boot-pct, :root[data-mode='light'] .identify .big,
:root[data-theme='lab'] .h-title, :root[data-theme='lab'] .tb-logo .w, :root[data-theme='lab'] .logo-title, :root[data-theme='lab'] .boot-pct, :root[data-theme='lab'] .identify .big,
:root[data-theme='mango'] .h-title, :root[data-theme='mango'] .tb-logo .w, :root[data-theme='mango'] .logo-title, :root[data-theme='mango'] .boot-pct, :root[data-theme='mango'] .identify .big { text-shadow: none; }
:root[data-mode='light'] .dot, :root[data-theme='lab'] .dot, :root[data-theme='mango'] .dot { box-shadow: none; }
:root[data-mode='light'] .toast, :root[data-mode='light'] .menu, :root[data-mode='light'] .tooltip { box-shadow: 0 8px 24px rgba(20, 40, 60, .18); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* iOS: no larger text in landscape */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 15px; font-weight: var(--fw); -webkit-font-smoothing: antialiased; }
/* From the home screen (no browser bars), iOS can make height:100% the screen less the status bar, leaving the dock
   floating that far above the bottom. There, take the full screen height: nothing can be hidden behind browser bars. */
@media (display-mode: fullscreen), (display-mode: standalone) { html, body { height: max(100%, 100vh); } }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acc); }
::selection { background: rgba(var(--acc-rgb), .35); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(var(--acc-rgb), .25); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

#hud-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
#scanlines { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--scanline) 2px 3px);
  mix-blend-mode: multiply; }
:root:not([data-scanlines='on']) #scanlines { display: none; }
#app { position: fixed; inset: 0; z-index: 1; }

/* ---------- primitives ---------- */
.mono { font-family: var(--f-mono); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.hidden { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

.btn {
  --c: var(--acc); --c-rgb: var(--acc-rgb);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; border: 1px solid rgba(var(--c-rgb), .45); background: rgba(var(--c-rgb), .08);
  color: var(--c); font-weight: 600; cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .08s, color .15s;
}
.btn:hover { background: rgba(var(--c-rgb), .2); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.primary { background: rgba(var(--c-rgb), .22); }
.btn.danger { --c: var(--danger); --c-rgb: 255, 77, 109; }
.btn.warn { --c: var(--acc2); --c-rgb: var(--acc2-rgb); }
.btn.small { min-height: 28px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.icon { width: 34px; min-height: 34px; }
.btn svg { width: 16px; height: 16px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label, .label { font-family: var(--f-display); color: var(--text-dim); }
.input, select.input, textarea.input {
  width: 100%; padding: 9px 12px; background: var(--input-bg); border: 1px solid var(--line); outline: none;
  color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--acc); }
select.input option { background: var(--panel-solid); }
textarea.input { resize: vertical; min-height: 70px; }
.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; user-select: none; }
.check input { accent-color: var(--acc); width: 16px; height: 16px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--line); font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.chip.ok { color: var(--ok); border-color: rgba(125,255,154,.4); }
.chip.warn { color: var(--acc2); border-color: rgba(var(--acc2-rgb),.45); }
.chip.guest-left { font-variant-numeric: tabular-nums; }
.chip.guest-left.warn { animation: guest-left-pulse 1.6s ease-in-out infinite; }
@keyframes guest-left-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .chip.guest-left.warn { animation: none; } }
.chip.bad { color: var(--danger); border-color: rgba(255,77,109,.45); }
.chip.acc { color: var(--acc); border-color: var(--line-strong); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.panel {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.brackets { position: relative; }

.h-title { font-family: var(--f-display); text-transform: uppercase; font-weight: 700; color: var(--acc); text-shadow: 0 0 12px rgba(var(--acc-rgb), .5); }
.sep { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); margin: 6px 0; }
.error-text { color: var(--danger); font-size: 14px; min-height: 18px; }

/* ---------- toasts ---------- */
#toasts { position: fixed; right: calc(18px + var(--safe-r)); top: calc(var(--top-edge) + 14px); z-index: 9500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; min-width: 240px; max-width: 380px; padding: 10px 14px 10px 16px; background: var(--panel-solid); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--acc); font-size: 14px; box-shadow: var(--glow); animation: toastIn .35s cubic-bezier(.2,.9,.2,1.2); }
.toast.warn { border-left-color: var(--acc2); }
.toast.error { border-left-color: var(--danger); }
.toast.ok { border-left-color: var(--ok); }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastIn { from { transform: translateX(40px); opacity: 0; } }
@keyframes toastOut { to { transform: translateX(40px); opacity: 0; } }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; z-index: 8000; background: var(--scrim); backdrop-filter: blur(3px); display: grid; place-items: center; animation: fade .2s; }
.modal { width: min(520px, 92vw); max-height: 88vh; overflow: auto; padding: 22px 24px; animation: modalIn .28s cubic-bezier(.2,.9,.2,1.1); }
.modal h2 { margin: 0 0 14px; font-size: 15px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@keyframes fade { from { opacity: 0; } }
@keyframes modalIn { from { transform: scale(.94) translateY(8px); opacity: 0; } }

/* ==========================================================================
   Auth / picker screens
   ========================================================================== */
.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; animation: fade .4s; overflow: auto; }
.auth-panel { width: min(430px, 94vw); padding: 34px 32px 28px; }
.logo-block { text-align: center; margin-bottom: 22px; }
.setup-net-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
/* first-run setup: what the server is for (all of W.D.D, or only lending its folders) */
.setup-use { display: grid; gap: 8px; margin: 4px 0 6px; }
.setup-use .field { margin: 0; }
.setup-use .pick-card { width: 100%; font: inherit; color: inherit; padding: 10px 14px; }
.setup-use .pick-card:hover { transform: none; }
.pick-card.on { border-color: var(--acc); background: rgba(var(--acc-rgb), .16); box-shadow: inset 3px 0 0 var(--acc); }
.setup-wifi { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; margin-bottom: 6px; }
.setup-wifi-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; font-size: 14px; }
.setup-wifi-row:hover:not(:disabled) { border-color: var(--line); background: rgba(var(--acc-rgb), .06); }
.setup-wifi-row:disabled { cursor: default; opacity: .7; }
.setup-wifi-row .bars { font-family: var(--f-mono); color: var(--acc); width: 34px; }
.setup-wifi-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-mark { width: 88px; height: 88px; margin: 0 auto 12px; display: block; filter: drop-shadow(0 0 14px rgba(var(--acc-rgb), .7)); }
.logo-mark .spin { transform-origin: 50px 50px; animation: spin 12s linear infinite; }
.logo-mark .spin-r { transform-origin: 50px 50px; animation: spin 7s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.logo-title { font-family: var(--f-display); font-weight: 900; font-size: 30px; letter-spacing: .5em; margin-right: -.5em; color: var(--acc); text-shadow: 0 0 18px rgba(var(--acc-rgb), .8); }
.logo-sub { font-family: var(--f-display); font-size: 10px; letter-spacing: .42em; color: var(--text-dim); margin-top: 6px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab { flex: 1; padding: 10px 6px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; color: var(--text-dim);
  font-family: var(--f-display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.tab.active { color: var(--acc); border-bottom-color: var(--acc); text-shadow: 0 0 10px rgba(var(--acc-rgb), .6); }
.pair-input { text-align: center; font-size: 26px; letter-spacing: .5em; text-transform: uppercase; }

.picker { width: min(760px, 96vw); padding: 26px 28px; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 14px 0; }
.pick-card { position: relative; padding: 14px 16px; border: 1px solid var(--line); background: rgba(var(--acc-rgb), .04); cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s, transform .15s; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.pick-card:hover { background: rgba(var(--acc-rgb), .14); border-color: var(--acc); transform: translateY(-2px); }
.pick-card .t { font-family: var(--f-display); font-size: 13px; letter-spacing: .12em; color: var(--acc); }
.pick-card .s { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
.pick-card.new { border-style: dashed; display: grid; place-items: center; color: var(--text-dim); min-height: 84px; }

/* ==========================================================================
   Boot sequence
   ========================================================================== */
.boot { position: fixed; inset: 0; z-index: 7000; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(var(--acc-rgb), .07), transparent 60%); pointer-events: auto; }
.boot.out { animation: bootOut .6s forwards; }
@keyframes bootOut { to { opacity: 0; transform: scale(1.08); filter: blur(4px); } }
.boot svg { width: min(58vmin, 520px); height: auto; overflow: visible; }
.boot .ring { fill: none; stroke: var(--acc); stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), .9)); }
.boot .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.2s cubic-bezier(.6,.1,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.boot .rot { transform-origin: 250px 250px; animation: spin 4s linear infinite; }
.boot .rot-r { transform-origin: 250px 250px; animation: spin 6s linear infinite reverse; }
.boot-text { font-family: var(--f-display); font-weight: 900; fill: var(--acc); letter-spacing: 10px; font-size: 38px; }
.boot-log { position: fixed; left: 30px; bottom: 30px; font-family: var(--f-mono); font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.boot-log .ok { color: var(--ok); }
.boot-log div { animation: fade .2s; }
.boot-pct { position: fixed; right: 30px; bottom: 30px; font-family: var(--f-display); font-size: 42px; color: var(--acc); text-shadow: var(--glow); }

/* ==========================================================================
   Desktop
   ========================================================================== */
.desk { position: absolute; inset: 0; animation: deskIn .7s cubic-bezier(.2,.8,.2,1); }
@keyframes deskIn { from { opacity: 0; transform: scale(1.02); } }

.topbar { position: absolute; left: 0; right: 0; top: 0; height: var(--top-edge); z-index: 5000; display: flex; align-items: center; gap: 10px;
  padding: var(--safe-t) max(14px, var(--safe-r)) 0 max(14px, var(--safe-l));
  background: var(--bar-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.tb-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.tb-logo svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), .8)); }
.tb-logo .w { font-family: var(--f-display); font-weight: 900; letter-spacing: .32em; color: var(--acc); font-size: 15px; text-shadow: 0 0 10px rgba(var(--acc-rgb), .6); }
.tb-logo .s { font-family: var(--f-display); font-size: 8px; letter-spacing: .3em; color: var(--text-faint); display: block; margin-top: 1px; }
.tb-sep { width: 1px; height: 24px; background: var(--line); }
.tb-item { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.tb-item b { color: var(--text); font-weight: normal; }
.tb-btn { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--text-dim);
  font-family: var(--f-mono); font-size: 12px; transition: all .15s; }
.tb-btn:hover { border-color: var(--line); color: var(--acc); background: rgba(var(--acc-rgb), .07); }
.tb-btn svg { width: 16px; height: 16px; }
.tb-clock { font-family: var(--f-display); font-size: 15px; letter-spacing: .12em; color: var(--acc); min-width: 92px; text-align: right; }
.tb-clock small { display: block; font-size: 8px; letter-spacing: .3em; color: var(--text-faint); }

.displays-map { display: flex; gap: 4px; align-items: flex-end; padding: 3px 6px; border: 1px solid var(--line); cursor: pointer; }
.displays-map .dm { position: relative; width: 26px; height: 17px; border: 1px solid rgba(var(--acc-rgb), .45); display: grid; place-items: center; font-family: var(--f-mono); font-size: 9px; color: var(--text-dim); transition: all .2s; }
.displays-map .dm.lg { border-color: rgba(var(--acc2-rgb), .7); color: var(--acc2); }
.displays-map .dm.me { background: rgba(var(--acc-rgb), .3); color: #fff; box-shadow: 0 0 8px rgba(var(--acc-rgb), .6); }
.displays-map .dm.online::after { content: ''; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 5px var(--ok); }

.workspace { position: absolute; left: var(--safe-l); right: var(--safe-r); top: var(--top-edge); bottom: var(--bottom-edge); z-index: 10; }
/* Hidden top bar (Settings › Appearance): the workspace takes its height; the clock and link status live in a tray instead. */
:root[data-topbar='off'] { --topbar-h: 0px; }
/* Safe areas (a phone's notch or island, rounded corners, home bar). They are zero on desktops and the kiosk; on a
   phone (viewport-fit=cover, and always when W.D.D runs from the home screen) the bars grow into them and the
   workspace stays clear of them. Anything placed against the bars uses --top-edge / --bottom-edge. The dock only
   keeps the part of the home-bar inset its buttons need to stay off the swipe line (inset less 14px): the rest
   goes to the desktop. */
:root { --safe-t: env(safe-area-inset-top, 0px); --safe-b: max(0px, env(safe-area-inset-bottom, 0px) - 14px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --top-edge: calc(var(--topbar-h) + var(--safe-t)); --bottom-edge: calc(var(--dock-h) + var(--safe-b)); }
:root[data-topbar='off'] .topbar { display: none; }
.dock-tray { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; padding: 0 4px 0 8px; }
.dock-tray .tb-clock { font-size: 13px; min-width: 0; line-height: 1.1; }
.dock-tray .tb-clock small { font-size: 7px; }
/* The link chip and clock keep a fixed width, so the tray doesn't twitch as the latency and the time tick over */
.dock-tray .chip { width: calc(13ch + 22px); justify-content: center; font-variant-numeric: tabular-nums; }
.dock-tray .tb-clock { width: 88px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .dock-tray .tb-clock small { display: none; } .dock-tray { gap: 6px; } }
.snap-preview { position: absolute; z-index: 4000; pointer-events: none; border: 1px solid var(--acc); background: rgba(var(--acc-rgb), .08); box-shadow: inset 0 0 40px rgba(var(--acc-rgb), .15); transition: all .12s; }

.dock { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bottom-edge); z-index: 5000; display: flex; align-items: center; gap: 4px; padding: 0 10px var(--safe-b);
  background: var(--dock-bg); border-top: 1px solid var(--line); backdrop-filter: blur(8px); overflow-x: hidden; }
.dock-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; flex: none; }
.dock.drop-remove { border-color: rgba(255,77,109,.6); box-shadow: inset 0 0 24px rgba(255,77,109,.18); }

/* ---------- desktop shortcuts (grid scales with the UI: cells are CSS lengths) ---------- */
.desk-icons { position: absolute; inset: 0; z-index: 0; pointer-events: none; --cell-w: 96px; --cell-h: 104px; --cell-pad: 12px; }
.desk-icon { position: absolute; width: var(--cell-w); height: var(--cell-h); padding: 8px 4px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; pointer-events: auto; touch-action: none; user-select: none; color: var(--text);
  transition: left .18s cubic-bezier(.2,.8,.2,1), top .18s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s, opacity .15s; }
.desk-icon:hover { background: rgba(var(--acc-rgb), .08); border-color: var(--line); }
.desk-icon:focus-visible { outline: 1px solid var(--acc); outline-offset: -1px; }
.desk-icon-glyph { position: relative; width: 52px; height: 52px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--acc-rgb), .07); }
.desk-icon-glyph .ico { width: 30px; height: 30px; }
.desk-icon.running .desk-icon-glyph::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 12px; height: 2px; margin-left: -6px; background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.desk-icon-label { max-width: 100%; font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; letter-spacing: .02em; text-shadow: var(--label-shadow);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.desk-icon.off { opacity: .45; }
.desk-icon.lifted { opacity: .25; }
.desk-icon.ghost { position: fixed; left: 0; top: 0; margin: calc(var(--cell-h) / -2) 0 0 calc(var(--cell-w) / -2); --cell-w: 96px; --cell-h: 104px; z-index: 9700; pointer-events: none; opacity: .85; transition: none; }
.desk-icon.ghost.removing { opacity: .4; filter: grayscale(1); }
.desk-cell-hint { position: absolute; width: var(--cell-w); height: var(--cell-h); border: 1px dashed var(--acc); border-radius: 8px; background: rgba(var(--acc-rgb), .08); box-shadow: inset 0 0 18px rgba(var(--acc-rgb), .15); transition: left .08s, top .08s; }
body.desk-dragging, body.desk-dragging * { cursor: grabbing !important; }
.tooltip { position: fixed; z-index: 9600; padding: 5px 10px; background: var(--panel-solid); border: 1px solid var(--line-strong); font-family: var(--f-mono); font-size: 12px; pointer-events: none; white-space: nowrap; box-shadow: var(--glow); }

.ico { display: inline-block; background: var(--acc); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* ---------- windows ---------- */
.win { position: absolute; display: flex; flex-direction: column; min-width: 220px; min-height: 140px;
  animation: winIn .38s cubic-bezier(.2,.9,.25,1.05);
  /* a change inside a window (a widget updating its text) lays out that window only, not the whole
     screen and every other window: the window manager always gives a window its size (wm.js) */
  contain: size layout; }
.win::before { content: ''; position: absolute; inset: 12px 8px 4px; box-shadow: var(--win-shadow), 0 0 30px rgba(var(--acc-rgb), .06); z-index: -1; pointer-events: none; }
.win.closing { animation: winOut .22s forwards; pointer-events: none; }
@keyframes winIn { from { opacity: 0; transform: scale(.92) translateY(10px); } }
@keyframes winOut { to { opacity: 0; transform: scale(.94); } }
.win-shell { position: absolute; inset: 0; background: color-mix(in srgb, var(--panel-win), transparent var(--glass)); border: 1px solid var(--line); border-radius: 8px; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transition: border-color .2s, background .2s; }
.win.focused .win-shell { border-color: var(--line-strong); }
:root:not([data-mode='light'])[data-theme='mark42'] { --panel-win: rgba(26, 13, 4, .86); }
:root:not([data-mode='light'])[data-theme='friday'] { --panel-win: rgba(22, 6, 28, .86); }
:root:not([data-mode='light'])[data-theme='ultron'] { --panel-win: rgba(28, 5, 7, .86); }
:root:not([data-mode='light'])[data-theme='stealth'] { --panel-win: rgba(14, 17, 20, .88); }
/* pinned as the desktop background: fills the whole screen behind the top bar,
   the dock, the icons and every window, without chrome */
.win.pinned { min-width: 0; min-height: 0; animation: none; position: fixed; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; }
.win.pinned::before, .win.pinned .win-shell, .win.pinned .win-bar, .win.pinned > .rz { display: none; }
.win-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 6px 0 12px; cursor: grab; user-select: none; touch-action: none;
  border-bottom: 1px solid rgba(var(--acc-rgb), .18); background: var(--ink); border-radius: 8px 8px 0 0; }
.win-bar:active { cursor: grabbing; }
.win-bar .ico { width: 15px; height: 15px; flex: none; }
.win-title { font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-status { font-family: var(--f-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.win-btns { margin-left: auto; display: flex; gap: 2px; flex: none; }
.win-btn { width: 28px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--text-dim); cursor: pointer; display: grid; place-items: center; transition: all .12s; }
.win-btn svg { width: 14px; height: 14px; }
.win-btn:hover { color: var(--acc); border-color: var(--line); background: rgba(var(--acc-rgb), .1); }
.win-btn.close:hover { color: var(--danger); border-color: rgba(255,77,109,.5); background: rgba(255,77,109,.12); }
.win-btn.on { color: var(--acc2); }
.win-body { position: relative; z-index: 1; flex: 1; min-height: 0; overflow: hidden; }
.win-body.scroll { overflow: auto; }
.win.maximized .win-shell, .win.maximized .win-bar { border-radius: 0; }
.win.dragging, .win.resizing { transition: none !important; }
.win.dragging .win-body, .win.resizing .win-body { pointer-events: none; }
.win.settling { transition: left .22s cubic-bezier(.2,.8,.2,1), top .22s cubic-bezier(.2,.8,.2,1), width .22s cubic-bezier(.2,.8,.2,1), height .22s cubic-bezier(.2,.8,.2,1); }
/* a window's resize handles: direct children only (a widget's own .rz, e.g. TrunkDeck's apps, is not one) */
.win > .rz { position: absolute; z-index: 5; touch-action: none; }
.win > .rz.n { top: -4px; left: 10px; right: 10px; height: 8px; cursor: n-resize; }
.win > .rz.s { bottom: -4px; left: 10px; right: 10px; height: 8px; cursor: s-resize; }
.win > .rz.e { right: -4px; top: 10px; bottom: 10px; width: 8px; cursor: e-resize; }
.win > .rz.w { left: -4px; top: 10px; bottom: 10px; width: 8px; cursor: w-resize; }
.win > .rz.ne { right: -4px; top: -4px; width: 14px; height: 14px; cursor: ne-resize; }
.win > .rz.nw { left: -4px; top: -4px; width: 14px; height: 14px; cursor: nw-resize; }
.win > .rz.se { right: -4px; bottom: -4px; width: 16px; height: 16px; cursor: se-resize; }
.win > .rz.sw { left: -4px; bottom: -4px; width: 14px; height: 14px; cursor: sw-resize; }
.win.maximized > .rz { display: none; }
.win-error { padding: 24px; color: var(--danger); font-family: var(--f-mono); font-size: 13px; white-space: pre-wrap; }
.win-error-actions { display: flex; gap: 8px; margin-top: 14px; white-space: normal; }
.win-loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 11px; letter-spacing: .3em; color: var(--text-dim); }
.win-loading::before { content: ''; width: 46px; height: 46px; border: 2px solid var(--line); border-top-color: var(--acc); border-radius: 50%; animation: spin 1s linear infinite; position: absolute; transform: translateY(-34px); }

.menu { position: fixed; z-index: 9400; min-width: 200px; padding: 6px; background: var(--panel-solid); border: 1px solid var(--line-strong); box-shadow: var(--glow); animation: fade .12s; }
.menu .mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; background: none; border: none; text-align: left; cursor: pointer; font-size: 14px; color: var(--text); }
.menu .mi:hover { background: rgba(var(--acc-rgb), .14); color: var(--acc); }
.menu .mi[disabled] { opacity: .4; pointer-events: none; }
.menu .mh { padding: 6px 12px 4px; font-family: var(--f-display); color: var(--text-faint); }

/* identify overlay */
.identify { position: fixed; inset: 0; z-index: 9800; display: grid; place-items: center; pointer-events: none; animation: identify 2.6s forwards; }
.identify .big { font-family: var(--f-display); font-weight: 900; font-size: min(22vw, 260px); color: var(--acc); text-shadow: 0 0 40px rgba(var(--acc-rgb), .9); line-height: 1; text-align: center; }
.identify .big small { display: block; font-size: 22px; letter-spacing: .5em; margin-top: 18px; }
@keyframes identify { 0% { opacity: 0; transform: scale(.8); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* command palette */
.palette { position: fixed; left: 50%; top: 16vh; transform: translateX(-50%); width: min(580px, 92vw); z-index: 8500; padding: 10px; }
.palette .input { font-size: 17px; padding: 12px 14px; }
.palette-list { max-height: 50vh; overflow: auto; margin-top: 8px; }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; }
.palette-item .ico { width: 18px; height: 18px; }
.palette-item.sel { background: rgba(var(--acc-rgb), .16); box-shadow: inset 2px 0 0 var(--acc); }
.palette-item .k { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--text-faint); }

/* ---------- widget content helpers ---------- */
.w-pad { padding: 14px 16px; }
.w-section { margin-bottom: 18px; }
.w-section > h3 { margin: 0 0 10px; font-family: var(--f-display); color: var(--acc); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.w-section > h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-family: var(--f-display); color: var(--text-faint); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 8px; border-bottom: 1px solid rgba(var(--acc-rgb), .08); vertical-align: middle; }
.table tr:hover td { background: rgba(var(--acc-rgb), .04); }
.stage-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.overlay-ui { position: absolute; z-index: 3; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-family: var(--f-mono); font-size: 13px; }
.kv > :nth-child(odd) { color: var(--text-faint); }

.empty { padding: 28px; text-align: center; color: var(--text-faint); font-family: var(--f-mono); font-size: 13px; }

@media (max-width: 760px) {
  .tb-hide-sm { display: none !important; }
  .tb-logo .s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* on/off switch: <label class="switch"><input type="checkbox"><i></i><span>Label</span></label> */
.slider { -webkit-appearance: none; appearance: none; width: 220px; height: 4px; border-radius: 2px; background: var(--line); accent-color: var(--acc); cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--acc); border: 2px solid var(--panel-solid); box-shadow: 0 0 0 1px var(--line-strong); }
.slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--acc); border: 2px solid var(--panel-solid); }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 12px; color: var(--text-dim); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { position: relative; width: 34px; height: 18px; border: 1px solid var(--line-strong); background: rgba(var(--acc-rgb), .06); transition: background .15s, border-color .15s; flex: none; }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--text-faint); transition: transform .15s, background .15s, box-shadow .15s; }
.switch input:checked + i { background: rgba(var(--acc-rgb), .22); border-color: var(--acc); }
.switch input:checked + i::after { transform: translateX(16px); background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.switch input:focus-visible + i { outline: 1px solid var(--acc); outline-offset: 2px; }
.switch input:disabled + i { opacity: .4; cursor: not-allowed; }
.st-card.off { opacity: .55; }
.st-card.off:hover { opacity: .8; }

/* ==========================================================================
   Shared controls: square panels, plain readable buttons and labels.
   These keep the :root[data-layout='taskbar'] prefix on purpose, for its weight: widgets'
   stylesheets were written against it (a widget's `.x .btn { padding }` loses to these).
   <html> always carries data-layout="taskbar" (index.html, theme.js applyPrefs).
   ========================================================================== */
:root[data-layout='taskbar'] .panel, :root[data-layout='taskbar'] .modal, :root[data-layout='taskbar'] .menu, :root[data-layout='taskbar'] .tooltip, :root[data-layout='taskbar'] .toast { border-radius: 8px; }
/* buttons: plain, readable, no shouting */
:root[data-layout='taskbar'] .btn { border-radius: 6px; text-transform: none; letter-spacing: 0; font-size: 14px; padding: 7px 14px; border-color: rgba(var(--c-rgb), .45); }
:root[data-layout='taskbar'] .btn.small { font-size: 12.5px; padding: 4px 10px; border-radius: 5px; }
:root[data-layout='taskbar'] .btn.icon { border-radius: 6px; }
:root[data-layout='taskbar'] .btn:hover { box-shadow: none; }
:root[data-layout='taskbar'] .input, :root[data-layout='taskbar'] select.input, :root[data-layout='taskbar'] textarea.input { border-radius: 6px; font-family: var(--f-body); font-size: 14.5px; }
:root[data-layout='taskbar'] .input:focus { box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .25); }
:root[data-layout='taskbar'] .chip { border-radius: 999px; font-family: var(--f-body); letter-spacing: 0; font-weight: 600; }
:root[data-layout='taskbar'] .field > label, :root[data-layout='taskbar'] .label { letter-spacing: .04em; font-size: 11.5px; text-transform: none; font-weight: 600; }
:root[data-layout='taskbar'] .h-title { letter-spacing: .06em; }
:root[data-layout='taskbar'] .w-section > h3 { letter-spacing: .06em; font-size: 12.5px; text-transform: none; }
:root[data-layout='taskbar'] .table th { letter-spacing: .04em; text-transform: none; font-size: 11.5px; font-weight: 600; }
:root[data-layout='taskbar'] .menu .mh { letter-spacing: .06em; text-transform: none; font-size: 11px; }

/* ---------- the taskbar: Start button, open-window buttons, Start menu ---------- */
.dock-start { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; flex: none; border: 1px solid transparent; border-radius: 7px; background: none; cursor: pointer; color: var(--text);
  font-family: var(--f-body); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.dock-start:hover, .dock-start.on { background: rgba(var(--acc-rgb), .14); border-color: var(--line); }
.dock-start-logo { display: flex; width: 22px; height: 22px; color: var(--acc); }
.dock-start-logo svg { width: 22px; height: 22px; }
.dock-win { display: flex; align-items: center; gap: 8px; height: 40px; flex: 0 1 190px; min-width: 44px; padding: 0 12px 0 10px; border: 1px solid transparent; border-radius: 7px;
  background: rgba(var(--acc-rgb), .05); cursor: pointer; color: var(--text); font-family: var(--f-body); font-size: 13.5px; font-weight: 600; position: relative; }
.dock-win:hover { background: rgba(var(--acc-rgb), .14); border-color: var(--line); }
.dock-win.active { background: rgba(var(--acc-rgb), .18); border-color: var(--line-strong); }
.dock-win.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--acc); }
.dock-win.min { opacity: .6; }
.dock-win .ico, .dock-win svg { width: 16px; height: 16px; flex: none; }
.dock-win-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-menu { position: absolute; left: 8px; bottom: calc(var(--bottom-edge) + 6px); z-index: 5100; background: color-mix(in srgb, var(--panel), transparent var(--glass)); width: min(640px, calc(100vw - 16px)); max-height: min(70vh, 640px); overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px;
  animation: startIn .16s cubic-bezier(.2,.9,.2,1); box-shadow: var(--win-shadow); }
@supports (height: 1dvh) { .start-menu { max-height: min(70dvh, 640px); } }
@keyframes startIn { from { opacity: 0; transform: translateY(8px); } }
.start-search { font-family: var(--f-body); font-size: 15px; }
/* phones zoom the page in on an input whose text is under 16px when it's focused: the Start menu's search is 16px there */
@media (pointer: coarse), (max-width: 600px) { :root .start-menu input.start-search { font-size: 16px; } }   /* over the layouts' .input sizes */
/* …and every dialog's fields (prompts, "New library", any widget's modal): typing in one never zooms the page */
@media (pointer: coarse), (max-width: 600px) { :root .modal.panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), :root .modal.panel select, :root .modal.panel textarea { font-size: 16px; } }   /* .modal.panel: over the layouts' select.input / textarea.input */
.start-body { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; min-height: 0; flex: 1; }
.start-apps { overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.start-side { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); padding-left: 12px; min-height: 0; }
.start-group { font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 8px 8px 4px; }
/* a category's heading opens and closes it (desktop.js startMenu) */
.start-group-toggle { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; cursor: pointer; }
.start-group-toggle:hover, .start-group-toggle:focus-visible { color: var(--text-dim); background: color-mix(in srgb, var(--acc), transparent 90%); outline: none; }
.start-group-toggle .start-chev { display: inline-block; transition: transform .15s; }
.start-group-toggle.open .start-chev { transform: rotate(90deg); }
.start-group-toggle .start-count { font-weight: 600; letter-spacing: 0; opacity: .8; }
.start-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; background: none; cursor: pointer; text-align: left; color: var(--text); font: inherit; touch-action: pan-y; }
.start-item:hover { background: rgba(var(--acc-rgb), .12); border-color: var(--line); }
.start-item.off { opacity: .5; }
.start-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(var(--acc-rgb), .08); color: var(--acc); position: relative; }
.start-ico .ico { width: 20px; height: 20px; }
.start-item.running .start-ico::after { content: ''; position: absolute; right: -2px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.start-text { min-width: 0; display: flex; flex-direction: column; }
.start-text b { font-weight: 600; font-size: 14px; }
.start-text small { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-user { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text); }
.start-user small { display: block; font-size: 11px; color: var(--text-faint); text-transform: capitalize; }
/* Phones: one column that scrolls as a whole, sized to fit between the top bar and the dock. */
@media (max-width: 640px) {
  .start-menu { left: 6px; right: 6px; width: auto; max-height: calc(100vh - var(--top-edge) - var(--bottom-edge) - 16px); }
  @supports (height: 1dvh) { .start-menu { max-height: calc(100dvh - var(--top-edge) - var(--bottom-edge) - 16px); } }
  .start-body { display: flex; flex-direction: column; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .start-apps { overflow: visible; flex: none; padding-right: 0; }
  .start-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 8px; flex: none; }
}

/* ---------- integrated lab assistant (Settings › Appearance): the avatar lives on the
   line along the top of the dock, behind the windows; bubbles and the text box float above. ---------- */
.la-layer { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; z-index: 0; pointer-events: none; overflow: hidden; color: var(--acc); }
.la-layer.raised { z-index: 4500; }
:root:not([data-mode='light']) .la-layer { filter: drop-shadow(0 0 2px rgba(var(--acc-rgb), .5)); }
.la-ink { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.la-ground { stroke-width: 2.6; }
.la-fill { fill: currentColor; }
.la-extra { stroke-width: 1.4; opacity: .8; }
.la-lens { opacity: .78; stroke: none; }
.la-frame { stroke-width: 1.9; }
.la-hit { fill: transparent; pointer-events: all; cursor: pointer; }
/* Flyboy (assistant/fly.js): line = the desktop's line colour filled with the panel colour; colour = flat cartoon fills in a dark line */
.fb.colour { --fb-body: #2f69ad; --fb-dark: #22508a; --fb-ink: #0c1520; --fb-eye: #e8231a; --fb-rim: #ff8f1f; --fb-wing: #fff; --fb-shine: rgba(255, 255, 255, .55); --fb-glint: #fff; --fb-can: #e3261d; --fb-band: #ffb02e; }
.fb.line { --fb-body: var(--panel-solid); --fb-dark: var(--panel-solid); --fb-ink: currentColor; --fb-eye: color-mix(in srgb, currentColor 14%, var(--panel-solid)); --fb-rim: color-mix(in srgb, currentColor 40%, var(--panel-solid));
  --fb-wing: var(--panel-solid); --fb-shine: currentColor; --fb-glint: color-mix(in srgb, currentColor 55%, var(--panel-solid)); --fb-can: var(--panel-solid); --fb-band: currentColor; }
.la-layer.full { top: 0; z-index: 4500; }   /* Flyboy sits on the windows, so he's in front of them */
.la-layer:has(.fb.colour) { filter: none; }
.fb-body { fill: var(--fb-body); }
.fb-dark { fill: var(--fb-dark); }
.fb-outline { fill: none; stroke: var(--fb-ink); stroke-width: 2.4; stroke-linejoin: round; }
.fb-tube-o { fill: none; stroke: var(--fb-ink); stroke-linecap: round; }
.fb-tube-f { fill: none; stroke: var(--fb-body); stroke-linecap: round; }
.fb-shine { fill: none; stroke: var(--fb-shine); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.fb-eye { fill: var(--fb-eye); }
.fb-eye-line { fill: none; stroke: var(--fb-ink); stroke-width: 2.2; }
.fb-rim { fill: var(--fb-rim); }
.fb-glint { fill: var(--fb-glint); opacity: .9; }
.fb-lid { fill: var(--fb-body); }
.fb-mouth { fill: var(--fb-ink); }
.fb-ink { fill: none; stroke: var(--fb-ink); stroke-width: 2; stroke-linecap: round; }
.fb-wing { fill: var(--fb-wing); stroke: var(--fb-ink); stroke-width: 2.2; }
.fb-ghost { fill: var(--fb-wing); stroke: var(--fb-ink); stroke-width: 1.2; }
.fb-can-body { fill: var(--fb-can); stroke: var(--fb-ink); stroke-width: 2; }
.fb-can-band { fill: none; stroke: var(--fb-band); stroke-width: 1.6; }
.fb-can-top { fill: var(--fb-body); stroke: var(--fb-ink); stroke-width: 1.4; }
.fb-lens { fill-opacity: .55; stroke: var(--fb-ink); stroke-width: 1.6; }
.fb-lens.a { fill: #ff3b4a; } .fb-lens.b { fill: #2fd6ff; }
.fb-zz { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .8; stroke-linejoin: round; }
.fb-hic { font: 700 11px var(--f-display); fill: currentColor; }
/* his line replaces the dock's top border */
.desk.has-assistant:not(:has(.la-layer.full)) .dock { border-top-color: transparent; }   /* Lineo draws that line himself */
.la-over { position: absolute; inset: 0; z-index: 5200; pointer-events: none; } /* over the Start menu (the tour talks about it), under modals and the palette */
.la-bubble, .la-ask { position: absolute; left: 0; top: 0; pointer-events: auto; background: var(--panel-solid); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: var(--win-shadow); animation: laPop .18s cubic-bezier(.2,.9,.3,1.3); transform-origin: var(--tail, 70%) 100%; }
.la-bubble { max-width: min(360px, calc(100vw - 24px)); padding: 9px 14px; font-size: 14.5px; line-height: 1.42; transition: opacity .18s; }
.la-bubble.small { font-size: 13px; padding: 6px 11px; }
.la-bubble.hear { font-style: italic; color: var(--text-dim); border-style: dashed; }
.la-bubble.tour { max-width: min(400px, calc(100vw - 24px)); border-color: var(--acc); }
.la-bubble:has(.la-x) { padding-right: 28px; }
.la-bubble.out { opacity: 0; }
.la-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 38vh; overflow: auto; }
.la-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.la-x { position: absolute; top: 3px; right: 6px; width: 20px; height: 20px; border: none; background: none; color: var(--text-faint); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.la-x:hover { color: var(--text); }
.la-tail { position: absolute; bottom: -7px; left: var(--tail, 70%); width: 12px; height: 12px; margin-left: -6px; background: var(--panel-solid);
  border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: rotate(45deg); }
.la-bubble.tour .la-tail { border-color: var(--acc); }
.la-bubble.hear .la-tail { border-style: dashed; }
.la-ask { width: min(380px, calc(100vw - 24px)); padding: 8px; }
.la-ask-row { display: flex; gap: 6px; align-items: center; }
.la-hint { font-size: 11.5px; color: var(--text-faint); margin: 5px 2px 0; }
.la-spot { position: absolute; border: 2px solid var(--acc2); border-radius: 10px; pointer-events: none; transition: left .15s, top .15s, width .15s, height .15s;
  box-shadow: 0 0 0 4px rgba(var(--acc2-rgb), .18), 0 0 26px rgba(var(--acc2-rgb), .45); animation: laSpot 1.4s ease-in-out infinite; }
@keyframes laPop { from { transform: scale(.6); opacity: 0; } }
@keyframes laSpot { 50% { box-shadow: 0 0 0 9px rgba(var(--acc2-rgb), .08), 0 0 34px rgba(var(--acc2-rgb), .6); } }
/* the microphone latch at the right end of the dock */
.dock-mic { position: relative; flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; height: 40px; padding: 0 12px 0 10px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--acc); cursor: pointer;
  transition: background .15s; }
.dock-mic:hover { background: rgba(var(--acc-rgb), .12); border-color: var(--line); }
.dock-mic .dock-mic-label { display: block; font-family: var(--f-body); font-size: 13px; font-weight: 600; color: var(--text); }
.dock-mic.on .ico { animation: pulse 1.2s infinite; }
.dock-mic.busy { color: var(--acc2); }
.dock-mic.on { background: rgba(var(--acc-rgb), .16); border-color: var(--acc); color: var(--acc); }
.dock-chat.on .ico { animation: none; }
.dock-mic + .dock-tray { margin-left: 4px; }
@media (max-width: 900px) { .dock-mic .dock-mic-label { display: none; } }

/* Mango controls: Apple's tighter tracking and rounder corners (after the shared controls so they win over them). */
:root[data-theme='mango'] .h-title, :root[data-theme='mango'] .win-title, :root[data-theme='mango'] .w-section > h3, :root[data-theme='mango'] .field > label, :root[data-theme='mango'] .label, :root[data-theme='mango'] .table th, :root[data-theme='mango'] .menu .mh, :root[data-theme='mango'] .tb-clock { letter-spacing: .02em; }
:root[data-theme='mango'] .btn, :root[data-theme='mango'] .input, :root[data-theme='mango'] select.input, :root[data-theme='mango'] textarea.input, :root[data-theme='mango'] .chip { border-radius: 8px; }
:root[data-theme='mango'] .btn.small, :root[data-theme='mango'] .btn.icon { border-radius: 6px; }
:root[data-theme='mango'] .panel, :root[data-theme='mango'] .win-shell, :root[data-theme='mango'] .menu, :root[data-theme='mango'] .toast, :root[data-theme='mango'] .tooltip, :root[data-theme='mango'] .modal { border-radius: 12px; }
:root[data-theme='mango'] .win-bar { border-radius: 12px 12px 0 0; }
:root[data-theme='mango'] .win.maximized .win-shell, :root[data-theme='mango'] .win.maximized .win-bar { border-radius: 0; }
:root[data-theme='mango'] .btn.primary { background: var(--acc); color: #fff; border-color: var(--acc); }
:root[data-theme='mango'] .btn.primary:hover { background: color-mix(in srgb, var(--acc) 85%, black); color: #fff; }

/* The taskbar's open windows (a row that can shrink) and its right end: the assistant's mic and the tray (link light and clock) */
.dock-wins { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; height: 100%; }
.dock-end { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
/* Widgets cast to a Looking Glass (a browser, not WDD-OS): small icons at the right end; click or right-click to close or bring back */
.dock-cast { display: flex; align-items: center; gap: 2px; flex: none; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; }
.dock-cast-btn { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; }
.dock-cast-btn:hover { background: color-mix(in srgb, var(--acc) 22%, transparent); }
.dock-cast-group { display: flex; align-items: center; gap: 1px; }
.dock-cast-group + .dock-cast-group { margin-left: 4px; padding-left: 4px; border-left: 1px solid var(--line); }
.dock-cast-btn.on { background: color-mix(in srgb, var(--acc) 35%, transparent); color: var(--acc); }
/* the chat panel of a Lab Assistant widget cast to a Looking Glass (desktop.js _castChat) */
.cast-chat { position: fixed; right: calc(16px + var(--safe-r)); bottom: calc(var(--bottom-edge) + 10px); z-index: 5200; width: min(380px, calc(100vw - 32px)); max-height: min(60vh, 560px);
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; background: var(--panel-solid); border: 1px solid var(--line-strong); box-shadow: var(--glow); animation: fade .12s; }
.cast-chat-head { display: flex; align-items: center; gap: 6px; }
.cast-chat-head .btn.on { color: var(--acc); background: rgba(var(--acc-rgb), .18); }
.cast-chat-title { font-family: var(--f-display); font-weight: 700; letter-spacing: .12em; font-size: 12px; color: var(--acc); }
.cast-chat-sub { font-family: var(--f-mono); font-size: 11px; color: var(--text-faint); }
.cast-chat-log { flex: 1; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.cast-chat-msg { max-width: 90%; padding: 6px 10px; font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.cast-chat-msg.user { align-self: flex-end; background: rgba(var(--acc-rgb), .12); border: 1px solid rgba(var(--acc-rgb), .3); }
.cast-chat-msg.user.pending { opacity: .6; }
.cast-chat-msg.assistant { align-self: flex-start; border-left: 2px solid var(--acc); background: var(--well); }
.cast-chat-msg.tool { align-self: flex-start; font-family: var(--f-mono); font-size: 11px; color: var(--text-faint); padding: 1px 10px; }
.cast-chat-msg.system { align-self: center; font-family: var(--f-mono); font-size: 12px; color: var(--acc2); text-align: center; }
.cast-chat-state { align-self: flex-start; font-family: var(--f-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-dim); }
.cast-chat-in { display: flex; gap: 6px; }
.cast-chat-in .input { flex: 1; min-width: 0; }

/* Phones (touch screen under 900px): the dock keeps what matters, open windows,
   the link light and the mic. No clock, no "LINK" or status words (the light and the milliseconds say it), the Start
   button is just its logo and sits clear of rounded screen corners, and window buttons are narrower. */
@media (pointer: coarse) and (max-width: 900px) {
  .tb-clock, .dock-tray .chip-word { display: none; }
  .dock-tray { gap: 6px; padding: 0; }
  .dock-tray .chip { width: auto; min-width: calc(6ch + 20px); padding: 2px 8px; gap: 5px; }
  /* the edge space (clear of rounded corners) is inside Start and the right end */
  .dock { gap: 3px; padding: 0 0 var(--safe-b); }
  /* a wider Start with its logo centred (plus any safe-area inset, e.g. a notch in landscape) */
  .dock-start { width: calc(60px + env(safe-area-inset-left)); padding: 0 0 0 env(safe-area-inset-left); justify-content: center; border-radius: 0; }
  .dock-start-label { display: none; }
  .dock-sep { margin: 0 2px; }
  .dock-win { flex: none; width: 40px; min-width: 0; padding: 0; justify-content: center; }
  .dock-win-title { display: none; }
  /* lots of windows: only their row scrolls, between Start and the mic and link light */
  .dock-wins { overflow-x: auto; scrollbar-width: none; gap: 3px; }
  .dock-wins::-webkit-scrollbar { display: none; }
  .dock-end { gap: 4px; padding: 0 max(8px, env(safe-area-inset-right)) 0 4px; }
  .dock-mic { width: 38px; padding: 0; justify-content: center; }
}

/* ==========================================================================
   Luna: the early-2000s desktop (Settings › Appearance › Colours, and the Windows XP theme).
   The blue chrome (title bars, taskbar, green Start button, tray) shows in both modes;
   light mode adds the beige windows and white, bevelled controls. After the shared controls so it wins over them.
   ========================================================================== */
/* (Luna's palette is in palette.css.) */
:root[data-theme='luna'] .h-title, :root[data-theme='luna'] .tb-logo .w, :root[data-theme='luna'] .logo-title, :root[data-theme='luna'] .boot-pct { text-shadow: none; }
:root[data-theme='luna'] .tb-logo svg, :root[data-theme='luna'] .logo-mark, :root[data-theme='luna'] .boot .ring { filter: none; }
:root[data-theme='luna'] .dot { box-shadow: none; }
:root[data-theme='luna'] input[type='checkbox'], :root[data-theme='luna'] input[type='radio'], :root[data-theme='luna'] input[type='range'] { accent-color: #21a121; }

/* windows: a blue title bar with rounded top corners, a blue frame, the red close button */
:root[data-theme='luna'] .win-shell { border: 3px solid var(--xp-frame-off); border-top: none; border-radius: 8px 8px 0 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-theme='luna'] .win.focused .win-shell { border-color: var(--xp-frame); }
:root[data-theme='luna'] .win-bar { height: 30px; padding: 0 5px 0 8px; gap: 6px; background: var(--xp-bar-off); border-radius: 8px 8px 0 0; }
:root[data-theme='luna'] .win.focused .win-bar { background: var(--xp-bar); }
:root[data-theme='luna'] .win-bar .ico { background: #fff; }
:root[data-theme='luna'] .win-title { font-family: var(--f-display); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff; text-shadow: 1px 1px #0f1089; }
:root[data-theme='luna'] .win:not(.focused) .win-title { color: #d8e4f8; text-shadow: none; }
:root[data-theme='luna'] .win-status { color: rgba(255, 255, 255, .75); font-family: var(--f-body); }
:root[data-theme='luna'] .win-body { margin: 0 3px 3px; }
:root[data-theme='luna'] .win.pinned .win-body { margin: 0; }   /* a background window has no frame: edge to edge */
:root[data-theme='luna'] .win-btns { gap: 2px; }
:root[data-theme='luna'] .win-btn { position: relative; width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; color: #fff;
  background: radial-gradient(130% 130% at 22% 18%, #a9c8ff 0%, #5b93fb 28%, #2d68e6 62%, #1d52d4 100%);
  box-shadow: inset -1px -1px 1px rgba(0, 25, 120, .45), inset 1px 1px 1px rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 30, 140, .25); }
:root[data-theme='luna'] .win-btn svg { width: 11px; height: 11px; stroke-width: 3; filter: drop-shadow(0 0 .5px rgba(0, 0, 0, .3)); }
:root[data-theme='luna'] .win-btn:hover { color: #fff; border-color: #fff; background: radial-gradient(130% 130% at 22% 18%, #cfe0ff 0%, #78a8ff 28%, #3f7cf3 62%, #2a62e0 100%); }
:root[data-theme='luna'] .win-btn:active { background: radial-gradient(130% 130% at 78% 82%, #a9c8ff 0%, #3e78ef 40%, #1a49c4 100%); }
:root[data-theme='luna'] .win-btn.close { background: radial-gradient(130% 130% at 22% 18%, #f9c2a8 0%, #ec7a50 28%, #da5426 62%, #c1410f 100%); box-shadow: inset -1px -1px 1px rgba(110, 20, 0, .45), inset 1px 1px 1px rgba(255, 255, 255, .35), 0 0 0 1px rgba(120, 30, 0, .25); }
:root[data-theme='luna'] .win-btn.close:hover { color: #fff; border-color: #fff; background: radial-gradient(130% 130% at 22% 18%, #ffd6c2 0%, #f69168 28%, #e8663a 62%, #cf4c18 100%); }
/* XP's own glyphs for minimize, maximize and close: a bar, a box with a thick top, a thick X */
:root[data-theme='luna'] .win-btn[data-a='min'] svg, :root[data-theme='luna'] .win-btn[data-a='max'] svg, :root[data-theme='luna'] .win-btn.close svg { display: none; }
:root[data-theme='luna'] .win-btn[data-a='min']::before { content: ''; position: absolute; left: 6px; bottom: 5px; width: 7px; height: 3px; background: #fff; }
:root[data-theme='luna'] .win-btn[data-a='max']::before { content: ''; position: absolute; left: 4px; top: 4px; width: 11px; height: 11px; box-sizing: border-box; border: 1px solid #fff; border-top-width: 3px; }
:root[data-theme='luna'] .win.maximized .win-btn[data-a='max']::before { left: 3px; top: 7px; width: 8px; height: 8px; }
:root[data-theme='luna'] .win.maximized .win-btn[data-a='max']::after { content: ''; position: absolute; left: 7px; top: 3px; width: 8px; height: 8px; box-sizing: border-box; border: 1px solid #fff; border-top-width: 2px; border-left: none; border-bottom: none; box-shadow: -1px 3px 0 -2px #fff; }
:root[data-theme='luna'] .win-btn.close::before, :root[data-theme='luna'] .win-btn.close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.4px; margin: -1.2px 0 0 -6px; background: #fff; border-radius: 1px; transform: rotate(45deg); }
:root[data-theme='luna'] .win-btn.close::after { transform: rotate(-45deg); }
:root[data-theme='luna'] .win:not(.focused) .win-btn { opacity: .75; }
:root[data-theme='luna'] .win-btn.on { color: #ffe08a; }
:root[data-theme='luna'] .win.maximized .win-shell, :root[data-theme='luna'] .win.maximized .win-bar { border-radius: 0; }

/* the taskbar: blue, with the green Start button at the left and the light-blue tray at the right */
:root[data-theme='luna'] { --dock-h: 40px; }
:root[data-theme='luna'] .dock { padding: 0 0 var(--safe-b); gap: 4px; background: var(--xp-task); border: none; backdrop-filter: none; }
:root[data-theme='luna'] .dock-sep { display: none; }
:root[data-theme='luna'] .dock-start { height: 100%; padding: 0 28px 0 16px; justify-content: center; margin-right: 8px; border: none; border-radius: 0 14px 14px 0; background: var(--xp-start);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .45), inset 0 -4px 5px rgba(0, 40, 0, .35), inset -5px 0 6px rgba(0, 50, 0, .35), inset 3px 0 3px rgba(255, 255, 255, .15), 2px 0 4px rgba(0, 0, 0, .45);
  color: #fff; font-family: var(--f-display); font-size: 20px; font-style: italic; font-weight: 700; letter-spacing: .01em; text-transform: lowercase; text-shadow: 1px 1px 2px rgba(0, 0, 0, .6); }
:root[data-theme='luna'] .dock-start:hover { background: var(--xp-start); filter: brightness(1.1) saturate(1.05); }
:root[data-theme='luna'] .dock-start.on { filter: brightness(.85); }
:root[data-theme='luna'] .dock-start-logo { display: none; }   /* XP's Start is just the word */
/* (it's centred on the button's flat body, a little left of the middle: the rounded, shaded end makes that side look shorter,
   and a pixel high: most of the word is short lowercase, which reads low against the shaded bottom edge) */
:root[data-theme='luna'] .dock-start-label { position: relative; top: -1px; left: 2px; }
:root[data-theme='luna'] .dock-win { height: 30px; flex-basis: 170px; padding: 0 10px 0 8px; border: none; border-radius: 3px; color: #fff; background: #3c81f3; font-family: var(--f-body); font-size: 12.5px; font-weight: 400;
  box-shadow: inset -1px 0 rgba(0, 0, 0, .3), inset 1px 1px 1px rgba(255, 255, 255, .2); }
:root[data-theme='luna'] .dock-win:hover { background: #53a3ff; border: none; }
:root[data-theme='luna'] .dock-win.active { background: #1e52b7; box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .25), inset 1px 0 1px rgba(0, 0, 0, .7); border: none; }
:root[data-theme='luna'] .dock-win.active::after { display: none; }
:root[data-theme='luna'] .dock-win.min { opacity: 1; background: #3c81f3; }
:root[data-theme='luna'] .dock-win .ico { background: #fff; }
:root[data-theme='luna'] .dock-end { height: 100%; gap: 6px; padding: 0 12px 0 10px; background: var(--xp-tray); border-left: 1px solid #1042af; box-shadow: inset 1px 0 1px #18bbff; }
:root[data-theme='luna'] .dock-tray { padding: 0; }
:root[data-theme='luna'] .dock-tray .tb-clock { color: #fff; font-family: var(--f-body); font-size: 12px; letter-spacing: 0; text-shadow: none; }
:root[data-theme='luna'] .dock-tray .tb-clock small { color: rgba(255, 255, 255, .7); letter-spacing: .04em; }
:root[data-theme='luna'] .dock-tray .chip { color: #fff; border-color: rgba(255, 255, 255, .35); font-family: var(--f-body); }
:root[data-theme='luna'] .dock-mic { height: 30px; color: #fff; }
:root[data-theme='luna'] .dock-mic .dock-mic-label { color: #fff; }
:root[data-theme='luna'] .dock-mic:hover, :root[data-theme='luna'] .dock-mic.on { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; }
/* phones: compact icon-only window buttons and a logo-only Start, like the other themes */
@media (pointer: coarse) and (max-width: 900px) {
  :root[data-theme='luna'] .dock-win { flex: none; width: 40px; min-width: 0; padding: 0; justify-content: center; }
  :root[data-theme='luna'] .dock-start { width: auto; padding: 0 18px 0 calc(10px + env(safe-area-inset-left)); margin-right: 4px; font-size: 18px; }
  :root[data-theme='luna'] .dock-start-label { display: inline; }
  :root[data-theme='luna'] .dock-end { padding: 0 max(8px, env(safe-area-inset-right)) 0 6px; }
}
:root[data-theme='luna'] .topbar { background: var(--xp-task); border-bottom: none; backdrop-filter: none; }
:root[data-theme='luna'] .topbar, :root[data-theme='luna'] .topbar .tb-item, :root[data-theme='luna'] .topbar .tb-item b, :root[data-theme='luna'] .topbar .tb-btn, :root[data-theme='luna'] .topbar .tb-clock, :root[data-theme='luna'] .tb-logo .w { color: #fff; }
:root[data-theme='luna'] .topbar .tb-logo .s, :root[data-theme='luna'] .topbar .tb-clock small { color: rgba(255, 255, 255, .7); }

/* the Start menu: a blue band on top, programs on white, places on light blue */
:root[data-theme='luna'] .start-menu { padding: 12px 0 0; gap: 10px; border: 1px solid #0831d9; border-radius: 8px 8px 0 0; box-shadow: 3px 3px 8px rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, #1868ce, #0e60cb 24px, #0e60cb 46px, #1f71d8 60px) top / 100% 62px no-repeat, var(--panel-solid); }
:root[data-theme='luna'] .start-search { width: auto; margin: 0 12px; }   /* width:100% + margin would overrun the menu's right edge */
:root[data-theme='luna'] .start-body { gap: 0; border-top: 2px solid #f0a33c; }
:root[data-theme='luna'] .start-apps { padding: 6px 4px 8px 6px; }
:root[data-theme='luna'] .start-side { padding: 6px 6px 8px; border-left: 1px solid #95bdee; background: rgba(var(--acc-rgb), .1); }
:root[data-theme='luna'] .start-item { border-radius: 0; border: none; }
:root[data-theme='luna'] .start-item:hover { background: #316ac5; color: #fff; }
:root[data-theme='luna'] .start-item:hover small { color: rgba(255, 255, 255, .85); }
:root[data-theme='luna'] .start-ico { background: none; }
:root[data-theme='luna'] .start-group { color: var(--text-faint); letter-spacing: .04em; text-transform: none; font-size: 11.5px; border-bottom: 1px solid var(--line); margin: 4px 6px 2px; padding: 6px 2px 2px; }

/* desktop shortcuts: white labels with a drop shadow, straight on the wallpaper */
:root[data-theme='luna'] .desk-icon { border-radius: 3px; border-color: transparent; }
:root[data-theme='luna'] .desk-icon:hover { background: rgba(255, 255, 255, .12); border-color: transparent; }
:root[data-theme='luna'] .desk-icon-glyph { border: none; border-radius: 10px; background: rgba(255, 255, 255, .88); box-shadow: 1px 2px 4px rgba(0, 0, 0, .35); }
:root[data-theme='luna'] .desk-icon-label { color: #fff; font-family: var(--f-body); font-weight: 400; letter-spacing: 0; }

/* light mode: beige windows and white, bevelled controls */
:root[data-mode='light'][data-theme='luna'] .btn { --c: #003c74; border: 1px solid #003c74; border-radius: 3px; color: #000; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: 12.5px; font-weight: 400;
  padding: 4px 14px; min-height: 26px; background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%); box-shadow: none; }
:root[data-mode='light'][data-theme='luna'] .btn:hover { color: #000; background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%);
  box-shadow: inset 1px 1px #fff0cf, inset -1px -1px #fdd889, inset 2px 2px #fbc761, inset -2px -2px #e5a01a; }
:root[data-mode='light'][data-theme='luna'] .btn:active { background: linear-gradient(180deg, #cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1); }
:root[data-mode='light'][data-theme='luna'] .btn.primary { color: #000; background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%); font-weight: 700;
  box-shadow: inset 1px 1px #cee7ff, inset -1px -1px #98b8ea, inset 2px 2px #bcd4f6, inset -2px -2px #89ade4; }
:root[data-mode='light'][data-theme='luna'] .btn.small { padding: 2px 10px; min-height: 24px; font-size: 12px; }
:root[data-mode='light'][data-theme='luna'] .btn.icon { padding: 0; width: 30px; min-height: 30px; }
:root[data-mode='light'][data-theme='luna'] .btn.icon.small { width: 26px; min-height: 26px; }
:root[data-mode='light'][data-theme='luna'] .btn.danger { color: #a01b0b; }
:root[data-mode='light'][data-theme='luna'] .btn.ghost { border-color: transparent; background: transparent; }
:root[data-mode='light'][data-theme='luna'] .btn.ghost:hover { border-color: #003c74; background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%); }
:root[data-mode='light'][data-theme='luna'] .input, :root[data-mode='light'][data-theme='luna'] select.input, :root[data-mode='light'][data-theme='luna'] textarea.input { border: 1px solid #7f9db9; border-radius: 0; background: #fff; color: #000; font-family: var(--f-body); }
:root[data-mode='light'][data-theme='luna'] .input:focus { box-shadow: none; border-color: #316ac5; }
:root[data-mode='light'][data-theme='luna'] .chip { border-radius: 3px; }
:root[data-mode='light'][data-theme='luna'] .panel, :root[data-mode='light'][data-theme='luna'] .modal { border-radius: 0; }
:root[data-mode='light'][data-theme='luna'] .menu { padding: 2px; border: 1px solid #aca899; border-radius: 0; background: #fff; box-shadow: 2px 2px 3px rgba(0, 0, 0, .35); }
:root[data-mode='light'][data-theme='luna'] .menu .mi { border-radius: 0; font-family: var(--f-body); font-size: 13px; }
:root[data-mode='light'][data-theme='luna'] .menu .mi:hover { background: #316ac5; color: #fff; }
:root[data-mode='light'][data-theme='luna'] .menu .mi:hover svg, :root[data-mode='light'][data-theme='luna'] .menu .mi:hover .ico { color: #fff; background-color: #fff; }
:root[data-mode='light'][data-theme='luna'] .tooltip { background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 0; font-family: var(--f-body); }
:root[data-mode='light'][data-theme='luna'] ::-webkit-scrollbar { width: 16px; height: 16px; }
:root[data-mode='light'][data-theme='luna'] ::-webkit-scrollbar-track { background: #f4f3ee; }
:root[data-mode='light'][data-theme='luna'] ::-webkit-scrollbar-thumb { border: 1px solid #fff; border-radius: 3px; background: linear-gradient(90deg, #c9d8fc, #b8cbf7 50%, #a8bff3); box-shadow: inset 0 0 0 1px #8ba5e6; }
:root[data-mode='light'][data-theme='luna'] .start-menu { background: linear-gradient(180deg, #1868ce, #0e60cb 24px, #0e60cb 46px, #1f71d8 60px) top / 100% 62px no-repeat, #fff; }
:root[data-mode='light'][data-theme='luna'] .start-side { background: #d3e5fa; }

/* Claude+ is a dark holographic stage: in Luna's light mode it keeps a dark backdrop and the dark palette inside, like a
   media player's video area, instead of turning grey on the beige window. */
:root[data-mode='light'][data-theme='luna'] .win[data-widget='claudeplus'] .cp {
  background: radial-gradient(ellipse at 50% 38%, #142640 0%, #0b1628 58%, #050b16 100%); color: var(--text);
  --text: #eef3fb; --text-dim: rgba(238, 243, 251, .7); --text-faint: rgba(238, 243, 251, .46);
  --acc: #4a94ff; --acc-rgb: 74, 148, 255; --line: rgba(160, 190, 240, .24); --line-strong: rgba(74, 148, 255, .65);
  --panel: rgba(30, 47, 77, .92); --panel-solid: #1e2f4d; --well: rgba(0, 0, 0, .3); --ink: rgba(255, 255, 255, .04); --nav-bg: rgba(0, 0, 0, .2); --input-bg: rgba(0, 0, 0, .3);
}

/* Claude and Lounge get a traditional Windows look in the XP themes: the stage is the deep navy of classic Windows title
   bars (their holograms are additive light, which needs a dark ground), and their controls sit on a beige dialog strip
   (white highlight above, grey rule) with dark text and XP controls */
:root[data-mode='light'][data-theme='luna'] .win[data-widget='companion'] .cp,
:root[data-mode='light'][data-theme='luna'] .win[data-widget='lounge'] .lg {
  background: linear-gradient(180deg, #0a246a 0%, #10307c 50%, #1d4a96 100%); color: var(--text);
  --text: #fff; --text-dim: rgba(255, 255, 255, .78); --text-faint: rgba(255, 255, 255, .55);
  --acc: #8fb6ff; --acc-rgb: 143, 182, 255; --line: rgba(166, 202, 240, .35); --line-strong: rgba(166, 202, 240, .7);
  --well: rgba(0, 0, 0, .25); --ink: rgba(255, 255, 255, .05);
}
:root[data-mode='light'][data-theme='luna'] .win[data-widget='companion'] .cp-bottom,
:root[data-mode='light'][data-theme='luna'] .win[data-widget='lounge'] .lg-bottom {
  background: linear-gradient(180deg, #f8f7f2, #ece9d8); border-top: 1px solid #fff; box-shadow: 0 -1px 0 #aca899; padding-top: 10px; color: var(--text);
  --text: #111; --text-dim: rgba(0, 0, 0, .66); --text-faint: rgba(0, 0, 0, .5);
  --acc: #0a53e4; --acc-rgb: 10, 83, 228; --line: #aca899; --line-strong: #7f9db9; --well: #fff; --ink: rgba(0, 0, 0, .03);
}
:root[data-mode='light'][data-theme='luna'] .win[data-widget='lounge'] .lg-seg { background: rgba(0, 0, 0, .25); }
:root[data-mode='light'][data-theme='luna'] .win[data-widget='lounge'] .lg-mixer { background: #ece9d8; border-color: #aca899; backdrop-filter: none; box-shadow: 2px 2px 4px rgba(0, 0, 0, .25);
  --text: #111; --text-dim: rgba(0, 0, 0, .66); --text-faint: rgba(0, 0, 0, .5); --acc: #0a53e4; --acc-rgb: 10, 83, 228; --line: #aca899; color: var(--text); }

/* Media Player in the XP themes: its controls sit on the video, so they're white (like Windows Media Player's), not XP's black */
:root[data-mode='light'][data-theme='luna'] .mb-ctrl { --text: #f2f5fb; --text-dim: rgba(242, 245, 251, .78); --text-faint: rgba(242, 245, 251, .55); color: var(--text); }
:root[data-mode='light'][data-theme='luna'] .mb-ctrl .btn, :root[data-mode='light'][data-theme='luna'] .mb-ctrl .btn.ghost { color: #fff; background: transparent; border-color: transparent; box-shadow: none; }
:root[data-mode='light'][data-theme='luna'] .mb-ctrl .btn:hover, :root[data-mode='light'][data-theme='luna'] .mb-ctrl .btn.ghost:hover { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); box-shadow: none; }
:root[data-mode='light'][data-theme='luna'] .mb-ctrl .btn .ico { background: #fff; }

/* ==========================================================================
   Galvanator 01 (Settings › Appearance › Colours, and the Galvanator themes): a Danish living room in 2037.
   Soft rounded glass panels with hairline edges and deep, soft shadows, quiet title bars, ivory icons, no glow
   and no shouting capitals. Amber is rare: it marks what is active or what matters (a focused field, a primary
   button, the window you're in). The palette is in palette.css. After the shared controls and Luna so it wins.
   ========================================================================== */
:root[data-theme='galvanator'] { --text-rgb: 232, 228, 218; --danger-rgb: 196, 87, 74; --g-r: 18px; }
:root[data-mode='light'][data-theme='galvanator'] { --text-rgb: 23, 24, 23; --danger-rgb: 168, 57, 44; }
:root[data-theme='galvanator'] :is(.h-title, .tb-logo .w, .logo-title, .boot-pct, .identify .big) { text-shadow: none; }
:root[data-theme='galvanator'] :is(.tb-logo svg, .logo-mark, .boot .ring) { filter: none; }
:root[data-theme='galvanator'] .dot { box-shadow: none; }
:root[data-theme='galvanator'] :is(input[type='checkbox'], input[type='radio'], input[type='range']) { accent-color: var(--acc); }
:root[data-theme='galvanator'] ::selection { background: rgba(var(--acc-rgb), .35); }

/* windows: floating glass panels */
:root[data-theme='galvanator'] .win::before { inset: 14px 8px 2px; border-radius: var(--g-r); box-shadow: var(--win-shadow); }
:root[data-theme='galvanator'] .win-shell { border-radius: var(--g-r); border-color: var(--line); backdrop-filter: blur(24px) saturate(1.1); -webkit-backdrop-filter: blur(24px) saturate(1.1); }
:root[data-theme='galvanator'] .win.focused .win-shell { border-color: rgba(var(--text-rgb), .22); }
:root[data-theme='galvanator'] .win-bar { height: 42px; padding: 0 12px 0 20px; gap: 10px; background: none; border-radius: var(--g-r) var(--g-r) 0 0; }
:root[data-theme='galvanator'] .win-bar .ico { width: 14px; height: 14px; opacity: .7; }
:root[data-theme='galvanator'] .win-title { font-family: var(--f-body); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
:root[data-theme='galvanator'] .win.focused .win-title { color: var(--text-dim); }
:root[data-theme='galvanator'] .win-btns { gap: 8px; }
:root[data-theme='galvanator'] .win-btn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(var(--text-rgb), .2); color: transparent; transition: color .15s, border-color .15s, background .15s; }
:root[data-theme='galvanator'] .win-btn svg { width: 10px; height: 10px; stroke-width: 2.4; }
:root[data-theme='galvanator'] .win-btns:hover .win-btn, :root[data-theme='galvanator'] .win-btn.on { color: var(--text-dim); }   /* the marks show when you reach for them */
:root[data-theme='galvanator'] .win-btn.on { border-color: rgba(var(--acc-rgb), .7); color: var(--acc); }
:root[data-theme='galvanator'] .win-btn:hover { color: var(--text); border-color: rgba(var(--text-rgb), .5); background: rgba(var(--text-rgb), .08); }
:root[data-theme='galvanator'] .win-btn.close:hover { color: var(--danger); border-color: rgba(var(--danger-rgb), .6); background: rgba(var(--danger-rgb), .12); }
:root[data-theme='galvanator'] .win-body { border-radius: 0 0 var(--g-r) var(--g-r); }
:root[data-theme='galvanator'] .win.maximized :is(.win-shell, .win-bar, .win-body), :root[data-theme='galvanator'] .win.pinned .win-body { border-radius: 0; }
:root[data-theme='galvanator'] .win.maximized::before { border-radius: 0; }

/* panels, dialogs, menus, notifications */
:root[data-theme='galvanator'] :is(.panel, .modal) { border-radius: var(--g-r); }
:root[data-theme='galvanator'] .modal { box-shadow: var(--win-shadow); }
:root[data-theme='galvanator'] .menu { padding: 6px; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--win-shadow);
  background: color-mix(in srgb, var(--panel-solid) 90%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
:root[data-theme='galvanator'] .menu .mi { border-radius: 9px; font-family: var(--f-body); }
:root[data-theme='galvanator'] .menu .mi:hover { background: rgba(var(--text-rgb), .08); color: var(--text); }
:root[data-theme='galvanator'] .menu .mh { font-family: var(--f-body); letter-spacing: .16em; }
:root[data-theme='galvanator'] .toast { border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; box-shadow: var(--win-shadow);
  background: color-mix(in srgb, var(--panel-solid) 86%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); animation: galvToastIn .9s cubic-bezier(.2, .7, .2, 1); }
:root[data-theme='galvanator'] .toast.warn { border-left: 2px solid var(--acc2); }
:root[data-theme='galvanator'] .toast.error { border-left: 2px solid var(--danger); }
:root[data-theme='galvanator'] .toast.ok { border-left: 2px solid var(--ok); }
@keyframes galvToastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
:root[data-theme='galvanator'] .tooltip { border-radius: 8px; font-family: var(--f-body); }

/* controls: ivory and quiet; amber only for the primary action and focus */
:root[data-theme='galvanator'] .btn { --c: var(--text); --c-rgb: var(--text-rgb); border-radius: 999px; text-transform: none; letter-spacing: .01em; font-weight: 500;
  border-color: rgba(var(--c-rgb), .22); background: rgba(var(--c-rgb), .05); }
:root[data-theme='galvanator'] .btn:hover { color: var(--c); background: rgba(var(--c-rgb), .12); box-shadow: none; }
:root[data-theme='galvanator'] .btn.primary { --c: var(--acc); --c-rgb: var(--acc-rgb); border-color: rgba(var(--c-rgb), .6); background: rgba(var(--c-rgb), .14); }
:root[data-theme='galvanator'] .btn.danger { --c: var(--danger); --c-rgb: var(--danger-rgb); }
:root[data-theme='galvanator'] .btn.warn { --c: var(--acc2); --c-rgb: var(--acc2-rgb); }
:root[data-theme='galvanator'] .btn.ghost { border-color: transparent; background: transparent; }
:root[data-theme='galvanator'] .btn.ghost:hover { background: rgba(var(--c-rgb), .1); }
:root[data-theme='galvanator'] :is(.input, select.input, textarea.input) { border-radius: 10px; font-family: var(--f-body); }
:root[data-theme='galvanator'] .input:focus { border-color: rgba(var(--acc-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .16); }
:root[data-theme='galvanator'] .chip { border-radius: 999px; font-family: var(--f-body); letter-spacing: .02em; }

/* the top bar: no line, a large thin clock */
:root[data-theme='galvanator'] .topbar { border-bottom: none; backdrop-filter: blur(16px); }
:root[data-theme='galvanator'] .tb-logo svg { color: var(--acc); }
:root[data-theme='galvanator'] :is(.tb-btn, .dock-start) svg { color: var(--acc); }
:root[data-theme='galvanator'] .tb-logo .w { font-family: var(--f-body); font-weight: 600; letter-spacing: .3em; color: var(--text); }
:root[data-theme='galvanator'] .tb-btn:hover { color: var(--text); background: rgba(var(--text-rgb), .07); }
:root[data-theme='galvanator'] .tb-clock { font-family: var(--f-body); font-weight: 300; font-size: 18px; letter-spacing: .04em; color: var(--text); font-variant-numeric: tabular-nums; }
:root[data-theme='galvanator'] .tb-clock small { font-weight: 500; letter-spacing: .24em; }

/* the taskbar: a rail floating above the floor, not a bar welded to the screen's edge */
:root[data-theme='galvanator'] { --dock-h: 64px; }
:root[data-theme='galvanator'] .dock { left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); bottom: calc(8px + var(--safe-b)); height: calc(var(--dock-h) - 14px); padding-bottom: 0; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--win-shadow); backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1); }
:root[data-theme='galvanator'] :is(.dock-start, .dock-win, .dock-mic) { border-radius: 10px; }
:root[data-theme='galvanator'] :is(.dock-start, .dock-win) { height: 38px; font-weight: 500; }
:root[data-theme='galvanator'] .dock-start-logo { color: var(--acc); }
:root[data-theme='galvanator'] .dock-win { background: none; }
:root[data-theme='galvanator'] :is(.dock-start:hover, .dock-start.on, .dock-win:hover) { background: rgba(var(--text-rgb), .08); border-color: transparent; }
:root[data-theme='galvanator'] .dock-win.active { background: rgba(var(--text-rgb), .1); border-color: transparent; }
:root[data-theme='galvanator'] .dock-win.active::after { left: 50%; right: auto; width: 4px; height: 4px; margin-left: -2px; bottom: 3px; border-radius: 50%; }
:root[data-theme='galvanator'] .start-menu { bottom: calc(var(--bottom-edge) + 4px); left: 12px; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--win-shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
:root[data-theme='galvanator'] .start-item { border-radius: 10px; }
:root[data-theme='galvanator'] .start-item:hover { background: rgba(var(--text-rgb), .07); border-color: transparent; }
:root[data-theme='galvanator'] .start-ico { border-radius: 10px; background: rgba(var(--text-rgb), .06); }
:root[data-theme='galvanator'] .start-group { letter-spacing: .18em; font-weight: 500; }
:root[data-theme='galvanator'] .start-item.running .start-ico::after { background: var(--acc); }
@media (pointer: coarse) and (max-width: 900px) {
  /* phones: the rail goes back to the edge, out of the way of the screen's rounded corners and gestures */
  :root[data-theme='galvanator'] { --dock-h: 54px; }
  :root[data-theme='galvanator'] .dock { left: 0; right: 0; bottom: 0; height: var(--bottom-edge); padding-bottom: var(--safe-b); border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
  :root[data-theme='galvanator'] .start-menu { left: 8px; }
}

/* desktop shortcuts: objects resting in the room */
:root[data-theme='galvanator'] .desk-icon { border-radius: 14px; }
:root[data-theme='galvanator'] .desk-icon:hover { background: rgba(var(--text-rgb), .06); border-color: transparent; }
:root[data-theme='galvanator'] .desk-icon-glyph { border-radius: 16px; border-color: rgba(var(--text-rgb), .14); background: color-mix(in srgb, var(--panel-solid) 55%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
:root[data-theme='galvanator'] .desk-icon.running .desk-icon-glyph::after { width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; box-shadow: none; }
:root[data-theme='galvanator'] .desk-icon-label { font-family: var(--f-body); font-weight: 500; letter-spacing: .02em; }

/* the pointer: a thin ivory arrow, and a small diamond over anything you can press (both outlined, so they read on any surface) */
:root[data-theme='galvanator'], :root[data-theme='galvanator'] body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2v17l4.6-4.2 3 6.7 2.4-1.1-3-6.5 6.5-.4z' fill='%23e8e4da' stroke='%23171817' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, default; }
:root[data-theme='galvanator'] :is(button:not(:disabled), a[href], [role='button'], [role='radio'], select, summary, label.check, .btn, .mi, .chip, .desk-icon, .start-item, .dock-win, .dock-start, .tb-btn, .tb-logo) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 3.5 20.5 12 12 20.5 3.5 12z' fill='none' stroke='%23171817' stroke-width='3.4' stroke-linejoin='round'/%3E%3Cpath d='M12 3.5 20.5 12 12 20.5 3.5 12z' fill='none' stroke='%23e8e4da' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='1.7' fill='%23c68b52' stroke='%23171817' stroke-width='.8'/%3E%3C/svg%3E") 12 12, pointer; }
:root[data-theme='galvanator'] :is(input:not([type]), input[type='text'], input[type='search'], input[type='password'], input[type='email'], input[type='url'], input[type='number'], textarea, [contenteditable='true']) { cursor: text; }

/* the quiet boot (boot.js, a theme with boot: 'quiet'): a name, a line drawn across, a short checklist */
.boot.quiet { background: var(--bg); align-content: center; gap: 0; }
.boot-q { width: min(420px, 80vw); display: grid; gap: 22px; font-family: var(--f-body); color: var(--text); }
.boot-q-name { font-size: 30px; font-weight: 200; letter-spacing: .5em; margin-right: -.5em; text-align: center; animation: fade 1.2s both; }
.boot-q-sub { font-size: 10.5px; font-weight: 500; letter-spacing: .32em; color: var(--text-faint); text-align: center; text-transform: uppercase; margin-top: -12px; animation: fade 1.2s .2s both; }
.boot-q-line { height: 1px; background: rgba(var(--acc-rgb), .8); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .3s ease-out; }
.boot-q-log { display: grid; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.boot-q-log div { display: flex; gap: 10px; animation: fade .5s both; }
.boot-q-log span { flex: 1; border-bottom: 1px dotted rgba(var(--acc-rgb), .25); transform: translateY(-4px); }
.boot-q-log b { font-weight: 500; color: var(--text); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boot.quiet.out { animation: bootQuietOut 1.2s forwards; }
@keyframes bootQuietOut { to { opacity: 0; } }

/* Settings › Appearance › Fade the top bar and taskbar when idle (theme.js sets data-idle): they dissolve slowly and come straight back */
.topbar, .dock, .dock-tray, .desk-icons { transition: opacity .35s ease; }
:root[data-idle='on'] :is(.topbar, .dock, .dock-tray, .desk-icons) { opacity: 0; transition: opacity 2.4s ease; }

/* A wallpaper (Settings › Appearance › Desktop background, or a theme's) takes the HUD canvas's place */
:root[data-wallpaper='on'] #hud-bg { display: none; }
:root[data-wallpaper='on'] body { background: var(--bg) var(--wallpaper) center / cover no-repeat; }

/* A Looking Glass display on the Looking Glass (desktop.js _holoMode): a hologram screen. No bars,
   icons or background; the newest 3D widget fills the panel without its frame. */
:root.holo-mode body { background: #000 !important; }
:root.holo-mode #hud-bg, :root.holo-mode #scanlines,
:root.holo-mode .topbar, :root.holo-mode .dock, :root.holo-mode .desk-icons { display: none !important; }
:root.holo-mode .win:not(.holo-front) { display: none !important; }
:root.holo-mode .win.holo-front {
  position: fixed !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important;
  transform: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #000 !important; z-index: 10 !important;
}
:root.holo-mode .win.holo-front > .win-bar, :root.holo-mode .win.holo-front > .win-shell, :root.holo-mode .win.holo-front > .rz { display: none !important; }
:root.holo-mode .win.holo-front > .win-body { position: absolute !important; inset: 0 !important; }
/* AR glasses in side-by-side 3D (desktop.js _stereoMode): the maximized 3D widget fills them without its frame, each
   eye a half of the screen; nothing else is drawn (it would be split between the eyes) */
:root.stereo-mode body { background: #000 !important; }
:root.stereo-mode #hud-bg, :root.stereo-mode #scanlines,
:root.stereo-mode .topbar, :root.stereo-mode .dock, :root.stereo-mode .desk-icons { display: none !important; }
:root.stereo-mode .win:not(.stereo-front) { display: none !important; }
:root.stereo-mode .win.stereo-front {
  position: fixed !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important;
  transform: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #000 !important; z-index: 30 !important; clip-path: none !important;
}
:root.stereo-mode .win.stereo-front::before, :root.stereo-mode .win.stereo-front > .win-bar, :root.stereo-mode .win.stereo-front > .win-shell,
:root.stereo-mode .win.stereo-front > .rz { display: none !important; }
:root.stereo-mode .win.stereo-front > .win-body { position: absolute !important; inset: 0 !important; }
/* shown side by side (stereo-overlay.js): the window one eye wide over the left half, the canvas in its
   place showing the left eye's half of its two-eye picture; the right eye's copy over the right half */
:root.stereo-shown .win.stereo-front { width: 50vw !important; }
.stage-canvas.stereo-canvas { object-fit: cover; object-position: 0 0; }
:root.stereo-mode .win.stereo-front.stereo-mirror { left: 50vw !important; width: 50vw !important; z-index: 31 !important; background: transparent !important; pointer-events: none !important; }
.stereo-catcher { position: fixed; inset: 0; z-index: 32; cursor: none; background: transparent; }
.stereo-pointer { position: fixed; left: 0; top: 0; z-index: 33; pointer-events: none; width: 22px; height: 22px; margin: -2px 0 0 -2px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 9-6 1.5L8 19z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* the depth readout, once per eye */
.stereo-depth { position: fixed; inset: 0; z-index: 50; display: flex; pointer-events: none; }
.stereo-depth > span { flex: 1; display: flex; align-items: center; justify-content: center; }
.stereo-depth > span > b { padding: 10px 18px; background: rgba(0, 0, 0, .7); color: var(--acc); font: 600 14px var(--f-display); letter-spacing: .2em; border-radius: 6px; }
/* An immersive window (wm.js setImmersive, a widget's fullscreen button): it alone fills the screen without its
   frame and the bars are hidden, but unlike a hologram it keeps its frosted glass over the desktop background */
:root.immersive-mode .topbar, :root.immersive-mode .dock, :root.immersive-mode .desk-icons { display: none !important; }
:root.immersive-mode .win:not(.immersive):not(.pinned) { display: none !important; }
:root.immersive-mode .win.immersive {
  position: fixed !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important;
  transform: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 20 !important; clip-path: none !important;
}
:root.immersive-mode .win.immersive::before, :root.immersive-mode .win.immersive > .win-bar,
:root.immersive-mode .win.immersive > .rz { display: none !important; }
:root.immersive-mode .win.immersive > .win-shell { border: 0 !important; border-radius: 0 !important; }
:root.immersive-mode .win.immersive > .win-body { position: absolute !important; inset: 0 !important; }
/* a browser's Looking Glass desktop: the logo hologram behind (no 3D widget there yet) */
.holo-logo { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: #000; }
.holo-logo .stage-canvas { display: block; width: 100%; height: 100%; }
.holo-hint {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: #6b7280; font: 600 14px var(--f-display, sans-serif); letter-spacing: .3em; z-index: 5; pointer-events: none;
}
.glasses-hint { z-index: 60; color: var(--acc, #52c4cc); font-size: 28px; background: rgba(0, 0, 0, .55); }
.holo-hint small { font: 13px var(--f-body, sans-serif); letter-spacing: 0; max-width: 60%; text-align: center; }
.holo-depth { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50; padding: 10px 18px; background: rgba(0, 0, 0, .7);
  color: #e5e7eb; font: 600 18px var(--f-display, sans-serif); letter-spacing: .2em; border-radius: 6px; pointer-events: none; }

/* ==========================================================================
   Settings kit: a page header, sections, setting rows, list rows and a segmented control, built by `kit` in
   /js/widget-kit.js. Settings is made of it, and a widget's own options can be too (KB: Widget Look and Layout Guide).
   ========================================================================== */
.set-head { display: flex; gap: 14px; align-items: center; }
.set-head-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--acc); color: var(--bg); flex: none; box-shadow: var(--glow); }
.set-head h2 { margin: 0; font: 700 24px/1.15 var(--f-display); text-wrap: balance; }
.set-head p { margin: 3px 0 0; color: var(--text-dim); font-size: 14px; max-width: 64ch; }
/* a section: its heading over one rounded surface (what a page appends to it lands on the surface) */
.set-sec { position: relative; margin-top: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink); padding: 12px 16px; }
.set-sec > .set-sec-h { position: absolute; left: 4px; top: -26px; margin: 0; font: 600 11.5px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
/* sections that are already a set of boxes (cards, tiles, columns) don't get one around them */
.set-sec:has(> .st-grid, > .mon-tiles, > .mon-graphs, > .st-cols, > .st-hero, > .set-cards), .set-sec.set-bare { background: none; border: 0; padding: 0; }
/* a setting: label and hint on the left, the control on the right; stacked when the window is narrow */
.set-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, auto); gap: 6px 18px; align-items: center; padding: 10px 0; min-height: 52px; }
.set-sec > .set-row + .set-row, .set-sec > .set-li + .set-row, .set-sec > .set-row + .set-li { border-top: 1px solid var(--line); }
.set-sec > .set-sec-h + .set-row { padding-top: 2px; }
.set-sec > .set-row:last-child { padding-bottom: 2px; }
.set-row > .set-l { font-size: 14px; font-weight: 500; color: var(--text); }
.set-row > .set-l .set-h { font-size: 12px; font-weight: 400; color: var(--text-faint); line-height: 1.4; margin-top: 2px; }
.set-row > .set-c { min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: flex-end; }
@container (max-width: 520px) { .set-row { grid-template-columns: 1fr; } .set-row > .set-c { justify-content: flex-start; } }
/* a list row: an icon, a name with its chips, one line under it, actions on the right */
.set-li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 14px; min-height: 48px; }
.set-li + .set-li { border-top: 1px solid var(--line); }
.set-sec > .set-li { padding-left: 0; padding-right: 0; }
.set-li.off .set-li-m, .set-li.off .set-li-i { opacity: .6; }
.set-li-i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--acc-rgb), .12); color: var(--acc); }
.set-li-m { min-width: 0; }
.set-li-t { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.set-li-t b { font-weight: 600; }
.set-li-t small { font: 11.5px var(--f-mono); color: var(--text-faint); }
.set-li-s { font-size: 12.5px; color: var(--text-faint); overflow-wrap: anywhere; }
.set-li-a { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
@container (max-width: 560px) { .set-li { grid-template-columns: auto minmax(0, 1fr); } .set-li-a { grid-column: 2; justify-content: flex-start; } }
/* a few choices side by side: the one in use is raised */
.set-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 8px; background: var(--well); border: 1px solid var(--line); flex-wrap: wrap; }
.set-seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; color: var(--text-dim); font: 500 13px var(--f-body); }
.set-seg button:hover { color: var(--text); }
.set-seg button[aria-pressed='true'] { background: var(--panel-solid); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.set-seg button:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.set-seg button:disabled { opacity: .45; cursor: default; }
/* the switch: a pill with a round knob, filled with the accent when on */
.switch i { width: 36px; height: 20px; border-radius: 999px; border-color: var(--line-strong); background: var(--well); }
.switch i::after { top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-dim); }
.switch input:checked + i { background: var(--acc); border-color: var(--acc); box-shadow: var(--glow); }
.switch input:checked + i::after { transform: translateX(16px); background: var(--bg); box-shadow: none; }
.switch input:focus-visible + i { outline: 2px solid var(--acc); outline-offset: 2px; }
/* a setting's checkbox (label.check in a section) is drawn as the same switch */
.set-sec label.check input[type='checkbox'] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--well); cursor: pointer; transition: background .15s, border-color .15s; }
.set-sec label.check input[type='checkbox']::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-dim); transition: transform .15s, background .15s; }
.set-sec label.check input[type='checkbox']:checked { background: var(--acc); border-color: var(--acc); box-shadow: var(--glow); }
.set-sec label.check input[type='checkbox']:checked::after { transform: translateX(16px); background: var(--bg); }
.set-sec label.check input[type='checkbox']:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.set-sec label.check input[type='checkbox']:disabled { opacity: .45; cursor: default; }
/* the primary button is filled with the accent (themes with buttons of their own keep theirs) */
.btn.primary { background: var(--c); border-color: var(--c); color: var(--bg); }
.btn.primary:hover { background: color-mix(in srgb, var(--c) 85%, var(--text)); color: var(--bg); box-shadow: none; }
/* a form field (label, input, hint) standing on its own in a section takes the row's shape too: label and hint left,
   input right. Fields a page puts side by side (in a .row or a grid) stay stacked. */
.set-sec > .field, .set-sec > .col > .field { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 340px); grid-template-areas: 'l c' 'h c'; gap: 2px 18px; align-items: center; padding: 10px 0; }
:is(.set-sec > .field, .set-sec > .col > .field) > label { grid-area: l; font: 500 14px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text); }
:is(.set-sec > .field, .set-sec > .col > .field) > :nth-child(2) { grid-area: c; min-width: 0; }
:is(.set-sec > .field, .set-sec > .col > .field) > :nth-child(3) { grid-area: h; font-size: 12px; color: var(--text-faint); }
.set-sec > .field + .field, .set-sec > .col > .field + .field, .set-sec > .set-row + .field, .set-sec > .field + .set-row { border-top: 1px solid var(--line); }
@container (max-width: 520px) { .set-sec > .field, .set-sec > .col > .field { grid-template-columns: 1fr; grid-template-areas: 'l' 'c' 'h'; } }