/* ═══════════════════════════════════════════════════════════════════════════
   RJ.OS v1.0 — core styles: tokens, boot, shell chrome, windows, components.
   App styles live in css/apps/*.css and are scoped to .app-<id>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ────────────────────────────────────────────────────────────────
   Mode (dark | light) × accent (amber | phosphor | ice). Any subtree can pin a mode with
   data-mode="dark" — RJ TV pins its picture, the one surface that stays dark in light mode.
   Text tokens (--text … --dim) meet WCAG AA on every panel token of their mode. */
:root, [data-mode='dark'] {
  --bg: #030303;
  --bg-2: #080807;
  --panel: #0c0b09;
  --panel-2: #12100d;
  --panel-3: #1b1813;
  --line: #24201a;
  --line-2: #342d24;
  --line-3: #4b4133;
  --text: #ede6d8;
  --text-2: #bdb3a3;
  --muted: #9a917f;
  --dim: #8b8274;
  --green: #9fd36b;
  --red: #ff5c49;

  /* chrome */
  --chrome: #000;
  --chrome-line: #17140f;
  --chrome-hover: #1b1813;
  --surface-pop: #0d0b09;
  --bar-active: #15120e;
  --scrim: rgba(0, 0, 0, 0.62);
  --label-shadow: 0 1px 2px #000, 0 0 10px #000, 0 0 4px #000;
  --label-bg: rgba(8, 7, 5, 0.66);
  --boot-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  --shadow-win: 0 30px 80px -12px rgba(0, 0, 0, 0.9), 0 10px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.6);

  /* card system (inspired by pixel neo-brutalism): borders, hard offset shadows, title strips */
  --nb-line: #7a6b55;
  --nb-card: #13110d;
  --nb-band: #070605;
  --nb-band-2: #0b0a08;
  --nb-head-bg: #1d1912;
  --nb-head-fg: var(--acc);
  --nb-tag-bg: var(--acc-a10);
  --nb-tag-fg: var(--acc);
  --nb-tag-line: var(--acc-a35);
  --nb-fill: var(--acc);
  --nb-fill-ink: var(--acc-ink);
  --nb-shadow: 4px 4px 0 #463b2e;
  --nb-shadow-sm: 3px 3px 0 #463b2e;

  /* keys: buttons and keycaps need a visible edge on black */
  --key-face: #1d1a15;
  --key-line: #a8987c;
  --key-edge: #574a38;
  --kbd-line: #7a6b55;
  --cta-bg: var(--acc);
  --cta-fg: var(--acc-ink);
  --cta-line: var(--acc);
  --cta-edge: var(--acc-lo);

  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-dot: 'Doto', 'JetBrains Mono', ui-monospace, monospace;
  --topbar-h: 30px;
  --ticker-h: 26px;
  --dock-h: 78px;
  --radius: 8px;
  --radius-sm: 5px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  color-scheme: dark;
}
/* accents — dark */
:root, [data-mode='dark'] {
  --acc: #ffa51f; --acc-hi: #ffc35e; --acc-hot: #ffe6bb; --acc-lo: #a8640b; --acc-deep: #4a2c06; --acc-ink: #1b1003;
  --acc-a06: rgba(255, 165, 31, 0.06); --acc-a10: rgba(255, 165, 31, 0.1); --acc-a20: rgba(255, 165, 31, 0.2); --acc-a35: rgba(255, 165, 31, 0.35);
  --led-off: #160f06;
}
[data-theme='phosphor'], [data-theme='phosphor'] [data-mode='dark'] {
  --acc: #6cf08c; --acc-hi: #a6f7b6; --acc-hot: #e2ffe8; --acc-lo: #2f8a49; --acc-deep: #0f3019; --acc-ink: #03140a;
  --acc-a06: rgba(108, 240, 140, 0.06); --acc-a10: rgba(108, 240, 140, 0.1); --acc-a20: rgba(108, 240, 140, 0.2); --acc-a35: rgba(108, 240, 140, 0.35);
  --led-off: #07120a;
}
[data-theme='ice'], [data-theme='ice'] [data-mode='dark'] {
  --acc: #7cc4ff; --acc-hi: #b0dbff; --acc-hot: #e6f4ff; --acc-lo: #2f6c9e; --acc-deep: #0d2639; --acc-ink: #03111c;
  --acc-a06: rgba(124, 196, 255, 0.06); --acc-a10: rgba(124, 196, 255, 0.1); --acc-a20: rgba(124, 196, 255, 0.2); --acc-a35: rgba(124, 196, 255, 0.35);
  --led-off: #07101a;
}

/* light — the face print's paper, ink lines, hard shadows */
[data-mode='light'] {
  --bg: #fbf8f0;
  --bg-2: #f4efe4;
  --panel: #fffefa;
  --panel-2: #f5f0e6;
  --panel-3: #ebe4d6;
  --line: #e0d7c7;
  --line-2: #cbbfab;
  --line-3: #a59781;
  --text: #1c1814;
  --text-2: #463f36;
  --muted: #5f574c;
  --dim: #6b6256;
  --green: #2f6b17;
  --red: #b52f1b;

  --chrome: #fffefa;
  --chrome-line: #1c1814;
  --chrome-hover: #efe9dd;
  --surface-pop: #ffffff;
  --scrim: rgba(60, 45, 20, 0.28);
  --label-shadow: 0 0 2px #fbf8f0, 0 0 6px rgba(251, 248, 240, 0.95), 0 1px 0 #fbf8f0;
  --label-bg: rgba(255, 253, 247, 0.9);
  --boot-shadow: 0 0 8px rgba(251, 248, 240, 0.95);
  --shadow-win: 6px 6px 0 #1c1814;
  --shadow-pop: 4px 4px 0 #1c1814;

  --nb-line: #1c1814;
  --nb-card: #fffefa;
  --nb-band: #f4efe4;
  --nb-band-2: #fbf8f0;
  --nb-head-bg: var(--nb-fill); /* title strips: the accent fill with ink text, like the active window bar */
  --nb-head-fg: #1c1814;
  --nb-tag-fg: #1c1814;
  --nb-tag-line: #1c1814;
  --nb-fill-ink: #1c1814;
  --nb-shadow: 4px 4px 0 #1c1814;
  --nb-shadow-sm: 3px 3px 0 #1c1814;

  --key-face: var(--nb-card);
  --key-line: var(--nb-line);
  --key-edge: var(--nb-line);
  --kbd-line: var(--line-3);
  --cta-bg: var(--nb-head-bg);
  --cta-fg: var(--nb-head-fg);
  --cta-line: var(--nb-line);
  --cta-edge: var(--nb-line);
  color-scheme: light;
}
/* accents — light (text-safe darker accent + bright fills for cards and active title bars; print ink for the face) */
[data-mode='light'] {
  --acc: #994f00; --acc-hi: #d97a06; --acc-hot: #7a3c00; --acc-lo: #e2a24f; --acc-deep: #f6dcb3; --acc-ink: #ffffff;
  --acc-a06: rgba(153, 79, 0, 0.06); --acc-a10: rgba(153, 79, 0, 0.1); --acc-a20: rgba(153, 79, 0, 0.18); --acc-a35: rgba(153, 79, 0, 0.32);
  --led-off: #d9d0c1;
  --nb-tag-bg: #ffc861; --nb-fill: #ffb43a; --bar-active: #ffb43a;
  --print-ink: #e07201;
}
[data-theme='phosphor'][data-mode='light'] {
  --acc: #1a6e33; --acc-hi: #2c9a4c; --acc-hot: #0f4a22; --acc-lo: #78c88c; --acc-deep: #d3f0da; --acc-ink: #ffffff;
  --acc-a06: rgba(26, 110, 51, 0.06); --acc-a10: rgba(26, 110, 51, 0.1); --acc-a20: rgba(26, 110, 51, 0.18); --acc-a35: rgba(26, 110, 51, 0.32);
  --nb-tag-bg: #a8ebb8; --nb-fill: #7ee69a; --bar-active: #8fe9a7;
  --print-ink: #1f8a46;
}
[data-theme='ice'][data-mode='light'] {
  --acc: #1d5f9a; --acc-hi: #2c7fc4; --acc-hot: #0d3a61; --acc-lo: #88bce6; --acc-deep: #d5e8f8; --acc-ink: #ffffff;
  --acc-a06: rgba(29, 95, 154, 0.06); --acc-a10: rgba(29, 95, 154, 0.1); --acc-a20: rgba(29, 95, 154, 0.18); --acc-a35: rgba(29, 95, 154, 0.32);
  --nb-tag-bg: #b2d9f7; --nb-fill: #8cc8f5; --bar-active: #9fd0f6;
  --print-ink: #1f6cb0;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 13px/1.6 var(--font-mono);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow: hidden; overscroll-behavior: none; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--acc); color: var(--acc-ink); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 1.5px solid var(--acc); outline-offset: 2px; }
img, svg, canvas, video { display: block; }
p { margin: 0 0 0.9em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* Pixel icon palette */
.px-icon { image-rendering: pixelated; flex: none; }
.px-a { fill: var(--acc); }
.px-b { fill: var(--acc-lo); }
.px-c { fill: var(--acc-hot); }
.px-d { fill: #1a140b; }
.px-e { fill: var(--text-2); }
.px-f { fill: var(--acc-deep); }
.glyph { flex: none; }

/* Scroll areas */
.scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid transparent; background-clip: padding-box; border-radius: 10px; }
.scroll::-webkit-scrollbar-thumb:hover { background-color: var(--acc-lo); }

/* ── OS root ──────────────────────────────────────────────────────────────── */
.os { position: fixed; inset: 0; overflow: hidden; background: var(--bg); isolation: isolate; }
#wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; touch-action: none; }
.desk-hit { position: absolute; inset: 0; z-index: 1; touch-action: none; }

/* ── Boot ─────────────────────────────────────────────────────────────────── */
.boot { position: absolute; inset: 0; z-index: 9500; pointer-events: none; }
.boot-log {
  position: absolute; margin: 0; font: 400 12px/1.62 var(--font-mono); color: var(--text-2);
  white-space: pre; text-shadow: var(--boot-shadow); max-width: calc(100vw - 32px); overflow: hidden;
}
.boot-log .ok { color: var(--green); }
.boot-log .wait { color: var(--acc); }
.boot-log .info { color: var(--muted); }
.boot-log .hl { color: var(--text); }
.boot-log .acc { color: var(--acc); }
.boot-log .cur { display: inline-block; width: 0.62em; height: 1.05em; vertical-align: -2px; background: var(--acc); animation: blink 1.06s steps(1) infinite; }
.boot-tag {
  position: absolute; font: 500 11px/1 var(--font-mono); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--acc); opacity: 0; transition: opacity 0.6s;
}
.boot-tag.on { opacity: 0.9; }
.boot-skip {
  position: absolute; right: 18px; bottom: 16px; font-size: 11px; color: var(--dim); pointer-events: auto;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-pop);
  opacity: 0; transition: opacity 0.4s, color 0.2s, border-color 0.2s;
}
.boot-skip.on { opacity: 1; }
.boot-skip:hover { color: var(--text); border-color: var(--line-3); }
.boot-skip kbd { font: inherit; color: var(--text-2); }
@keyframes blink { 50% { opacity: 0; } }

/* Phase visibility: chrome slides in only once the desktop session starts */
.topbar, .dock, .desktop, .conky { transition: transform 0.7s var(--ease-out), opacity 0.6s; }
.os:not([data-phase='desktop']) .topbar { transform: translateY(-110%); }
.os:not([data-phase='desktop']) .dock { transform: translate(-50%, 160%); }
.os:not([data-phase='desktop']) .desktop,
.os:not([data-phase='desktop']) .conky { opacity: 0; pointer-events: none; }

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 9000;
  display: flex; align-items: center; gap: 2px; padding: 0 6px;
  background: var(--chrome); border-bottom: 1px solid var(--chrome-line); font-size: 12px; color: var(--text-2); -webkit-user-select: none; user-select: none;
}
.tb-btn {
  height: 22px; padding: 0 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-2); white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.tb-btn:hover, .tb-btn.is-open { background: var(--chrome-hover); color: var(--text); }
.tb-logo { font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.tb-logo .led { display: inline-flex; gap: 2px; }
.tb-logo .led i { width: 4px; height: 4px; border-radius: 1px; background: var(--acc); box-shadow: 0 0 6px var(--acc); }
.tb-logo .led i:nth-child(2) { opacity: 0.55; }
.tb-logo .led i:nth-child(3) { opacity: 0.25; }
.tb-app { color: var(--text); font-weight: 600; }
.tb-clock { position: absolute; left: 50%; transform: translateX(-50%); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.tb-icon { width: 28px; padding: 0; justify-content: center; }
.tb-icon.is-on { color: var(--acc); }
.tb-pitch { color: var(--acc); border: 1px solid var(--acc-a35); margin-right: 6px; font-weight: 600; letter-spacing: 0.02em; }
.tb-pitch:hover { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.tb-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); padding: 0 8px; }
.tb-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* ── Desktop icons ────────────────────────────────────────────────────────── */
.desktop {
  position: absolute; z-index: 10; top: calc(var(--topbar-h) + var(--ticker-h) + 14px); left: 14px; bottom: calc(var(--dock-h) + 6px);
  display: flex; align-items: flex-start; gap: 10px;
}
/* Groups (Start · 3D worlds · Showcase · Folders): a small header over a column block; every block shares one row
   grid. --rows, --cell-h and --cell-w come from shell.js; .is-scroll only when the groups can't fit beside the panel. */
.desktop { gap: 12px; }
.desktop.is-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-bottom: 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.desk-group { display: flex; flex-direction: column; gap: 4px; flex: none; }
.dicon .dl-phone { display: none; }
.os.is-mobile .dicon .dl-wide, .desktop.is-tight .dicon .dl-wide { display: none; }
.os.is-mobile .dicon .dl-phone, .desktop.is-tight .dicon .dl-phone { display: inline; }
.desk-group-h { margin: 0; padding-left: 6px; height: 14px; font: 600 9.5px/14px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.desk-col { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 7), var(--cell-h, 88px)); grid-auto-columns: var(--cell-w, 94px); gap: 4px 2px; }
.dicon {
  position: relative; width: var(--cell-w, 94px); height: var(--cell-h, 92px); padding: 6px 3px 3px; display: flex; flex-direction: column; align-items: center;
  gap: clamp(3px, calc(var(--cell-h, 92px) - 84px), 6px); border-radius: 8px; border: 1px solid transparent; color: var(--text); outline-offset: -2px;
}
.dicon-ic { position: relative; display: grid; place-items: center; }
.dicon .px-icon { --s: clamp(32px, calc(var(--cell-h, 92px) - 46px), 46px); width: var(--s); height: var(--s); filter: drop-shadow(0 0 12px var(--acc-a20)); transition: transform 0.2s var(--ease-out); }
.dicon-link {
  position: absolute; left: -5px; bottom: -3px; width: 16px; height: 16px; border-radius: 4px; background: var(--bg);
  box-shadow: 0 0 0 1px var(--acc-a35);
}
.dicon-link::before { content: ''; position: absolute; inset: 0; background: var(--acc); -webkit-mask: var(--link-arrow) center / 12px no-repeat; mask: var(--link-arrow) center / 12px no-repeat; }
:root { --link-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 11L11 5M6 5h5v5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dicon-sub { position: absolute; right: -7px; bottom: -3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--bg); box-shadow: 0 0 0 1px var(--acc-a35); }
.dicon-sub .px-icon { --s: 16px; filter: none; }
.dicon-badge {
  position: absolute; top: -5px; right: -16px; padding: 1px 4px; border-radius: 3px; background: var(--acc); color: var(--acc-ink);
  font: 700 8.5px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; box-shadow: 0 0 10px var(--acc-a35);
}
.dicon-l {
  font-size: 11px; line-height: 1.25; text-align: center; max-width: 90px; padding: 1px 5px 2px; border-radius: 4px;
  background: var(--label-bg); text-shadow: var(--label-shadow); word-break: break-word;
}
.dicon:hover { background: rgba(255, 255, 255, 0.035); }
.dicon:hover .px-icon { transform: translateY(-2px); }
.dicon.is-sel { background: var(--acc-a10); border-color: var(--acc-a35); }
.dicon.is-sel .dicon-l { background: var(--acc); color: var(--acc-ink); text-shadow: none; }

/* ── Conky (desktop system monitor widget) ────────────────────────────────── */
.conky {
  position: absolute; z-index: 9; right: 24px; top: calc(var(--topbar-h) + var(--ticker-h) + 22px); width: 296px;
  font-size: 11.5px; line-height: 1.55; color: var(--text-2); -webkit-user-select: none; user-select: none;
}
.conky-name { font: 800 30px/1 var(--font-dot); color: var(--acc); letter-spacing: 0.02em; text-shadow: 0 0 18px var(--acc-a35); }
.conky-role { color: var(--text); margin-top: 8px; font-size: 12px; }
.conky-sub { color: var(--muted); }
.conky-sec { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.conky-h { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.conky-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; }
.conky-row b { color: var(--text); font-weight: 600; }
.conky-row .v { color: var(--acc); font-weight: 600; }
.conky-bar { height: 4px; margin: 3px 0 7px; background: repeating-linear-gradient(90deg, var(--acc-deep) 0 5px, transparent 5px 7px); position: relative; }
.conky-bar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--acc) 0 5px, transparent 5px 7px); box-shadow: 0 0 8px var(--acc-a35); }
.conky-mods { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-2); }
.conky-mods span::before { content: '▪ '; color: var(--acc); }
.conky-actions { display: flex; gap: 6px; margin-top: 14px; pointer-events: auto; flex-wrap: wrap; }
.conky-link { width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; pointer-events: auto; }
.conky-link:hover b { color: var(--acc); }
.conky-ask { display: block; width: 100%; padding: 3px 0; border: 0; background: none; font: inherit; color: var(--text-2); text-align: left; line-height: 1.45; cursor: pointer; pointer-events: auto; }
.conky-ask span { color: var(--acc); }
.conky-ask:hover { color: var(--acc); }

/* ── Windows ──────────────────────────────────────────────────────────────── */
.windows { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.win {
  position: absolute; display: flex; flex-direction: column; pointer-events: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow-win); overflow: hidden; min-width: 300px; min-height: 180px;
  transform-origin: 50% 60%;
}
.win.is-active { border-color: var(--acc-a35); }
.win.is-anim { transition: left 0.28s var(--ease-out), top 0.28s var(--ease-out), width 0.28s var(--ease-out), height 0.28s var(--ease-out), border-radius 0.28s; }
.win.is-max { border-radius: 0; border-left-width: 0; border-right-width: 0; }
.win.is-opening { animation: win-open 0.32s var(--ease-out) both; }
.win.is-closing { animation: win-close 0.2s var(--ease-io) both; pointer-events: none; }
.win.is-minimizing { transition: transform 0.32s var(--ease-io), opacity 0.32s; opacity: 0; pointer-events: none; }
.win.is-min { display: none; }
@keyframes win-open { from { opacity: 0; transform: scale(0.94) translateY(8px); filter: brightness(1.8); } to { opacity: 1; transform: none; filter: none; } }
@keyframes win-close { to { opacity: 0; transform: scale(0.96); } }

.win-bar {
  position: relative; height: 36px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 11px;
  background: var(--panel-2); border-bottom: 1px solid var(--line); -webkit-user-select: none; user-select: none; touch-action: none; cursor: default;
}
.win.is-active .win-bar { background: var(--bar-active); }
.win.is-active .win-bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc) 30%, var(--acc) 70%, transparent); opacity: 0.85;
}
.win-bar .px-icon { width: 16px; height: 16px; }
.win-title {
  flex: 1; min-width: 0; text-align: center; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px;
}
.win.is-active .win-title { color: var(--text-2); }
.win-title b { color: var(--text); font-weight: 600; }
.win-ctl { display: flex; gap: 2px; }
.win-ctl button { width: 28px; height: 24px; border-radius: 5px; display: grid; place-items: center; color: var(--muted); }
.win-ctl button:hover { background: var(--panel-3); color: var(--text); }
.win-ctl .wc-close:hover { background: var(--red); color: #1a0603; }
.win-back { display: none; }
.win-body { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; container-type: inline-size; }
.win-body[data-mode='dark'] { background: var(--panel); color: var(--text); color-scheme: dark; }
.win-body > * { flex: 1; min-height: 0; }
.win-rz { position: absolute; z-index: 5; touch-action: none; }
.win-rz[data-rz='n'] { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.win-rz[data-rz='s'] { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.win-rz[data-rz='e'] { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.win-rz[data-rz='w'] { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.win-rz[data-rz='ne'] { right: -3px; top: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.win-rz[data-rz='nw'] { left: -3px; top: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
.win-rz[data-rz='se'] { right: -3px; bottom: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.win-rz[data-rz='sw'] { left: -3px; bottom: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.win.is-max .win-rz { display: none; }
.win.is-dragging, .win.is-dragging * { -webkit-user-select: none; user-select: none; }
.win.is-dragging iframe, .win.is-resizing iframe { pointer-events: none; }
.snap-ghost {
  position: absolute; z-index: 99; pointer-events: none; border: 1px solid var(--acc); border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--acc-a06) 0 6px, transparent 6px 12px); opacity: 0;
  transition: left 0.18s var(--ease-out), top 0.18s var(--ease-out), width 0.18s var(--ease-out), height 0.18s var(--ease-out), opacity 0.15s;
}
.snap-ghost.on { opacity: 1; }

/* ── Dock ─────────────────────────────────────────────────────────────────── */
.dock {
  position: absolute; z-index: 8000; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px; padding: 6px; max-width: calc(100vw - 24px);
  background: var(--surface-pop); border: 1px solid var(--line-2); border-radius: 15px; box-shadow: var(--shadow-pop);
}
.dock-btn {
  position: relative; width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 11px;
  transition: transform 0.2s var(--ease-out), background 0.15s;
}
.dock-btn .px-icon { width: 32px; height: 32px; }
.dock-btn:hover { background: var(--panel-3); transform: translateY(-4px); }
.dock-btn:active { transform: translateY(-1px); }
.dock-btn .run { position: absolute; bottom: 2px; left: 50%; width: 4px; height: 3px; border-radius: 2px; background: var(--acc); transform: translateX(-50%); opacity: 0; transition: width 0.2s, opacity 0.2s; box-shadow: 0 0 6px var(--acc); }
.dock-btn.is-running .run { opacity: 0.9; }
.dock-btn.is-focused .run { width: 14px; opacity: 1; }
.dock-btn.is-pitch { background: var(--acc-a10); box-shadow: inset 0 0 0 1px var(--acc-a35); }
.dock-btn.is-pitch:hover { background: var(--acc-a20); }
.dock-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  padding: 4px 8px; border-radius: 5px; background: var(--chrome); border: 1px solid var(--line-2); color: var(--text);
  font-size: 11px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s, transform 0.15s;
}
.dock-btn:hover .dock-tip, .dock-btn:focus-visible .dock-tip { opacity: 1; transform: translateX(-50%); }
.dock-sep { width: 1px; height: 34px; background: var(--line-2); margin: 0 5px; flex: none; }

/* ── Welcome bar (first visit) ────────────────────────────────────────────── */
.welcome {
  position: absolute; z-index: 8100; left: 50%; bottom: calc(var(--dock-h) + 8px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; max-width: calc(100vw - 32px);
  background: var(--surface-pop); border: 1px solid var(--acc-a35); border-radius: 12px; box-shadow: var(--shadow-pop);
  animation: welcome-in 0.6s var(--ease-out) both;
}
.welcome.out { animation: welcome-out 0.35s var(--ease-io) forwards; }
@keyframes welcome-in { from { opacity: 0; transform: translate(-50%, 16px); } }
@keyframes welcome-out { to { opacity: 0; transform: translate(-50%, 12px); } }
.welcome .px-icon { width: 22px; height: 22px; }
.welcome-t { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 6px; }
.welcome-t b { color: var(--text); }
.os.is-mobile .welcome { display: none; }

/* ── Menus / context menu ─────────────────────────────────────────────────── */
.menu {
  position: fixed; z-index: 9800; min-width: 230px; padding: 5px; background: var(--surface-pop); border: 1px solid var(--line-2);
  border-radius: 9px; box-shadow: var(--shadow-pop); font-size: 12.5px; animation: pop 0.14s var(--ease-out);
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 6px;
  color: var(--text-2); text-align: left; white-space: nowrap;
}
.menu-item .px-icon { width: 16px; height: 16px; }
.menu-item:hover, .menu-item.is-hl { background: var(--acc); color: var(--acc-ink); }
.menu-item:hover .px-icon rect, .menu-item.is-hl .px-icon rect { fill: var(--acc-ink); }
.menu-item .k { margin-left: auto; padding-left: 18px; font-size: 11px; color: var(--dim); }
.menu-item:hover .k { color: var(--acc-ink); opacity: 0.7; }
.menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu-label { padding: 7px 10px 4px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.menu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.menu-head img { width: 42px; height: 42px; border-radius: 6px; border: 1px solid var(--line-2); object-fit: cover; }
.menu-head b { display: block; color: var(--text); font-size: 13px; }
.menu-head span { font-size: 11px; color: var(--muted); }

/* ── Launcher (rofi-style, Ctrl/⌘ K) ──────────────────────────────────────── */
.launcher-wrap {
  position: fixed; inset: 0; z-index: 9700; background: var(--scrim);
  display: flex; justify-content: center; align-items: flex-start; padding: 13vh 16px 16px; animation: fade 0.15s;
}
@keyframes fade { from { opacity: 0; } }
.launcher {
  width: min(640px, 100%); background: var(--surface-pop); border: 1px solid var(--acc-a35); border-radius: 12px;
  box-shadow: var(--shadow-pop); overflow: hidden; animation: pop 0.18s var(--ease-out);
}
.launcher-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.launcher-row .p { color: var(--acc); font-weight: 600; }
.launcher input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 500 15px var(--font-mono); caret-color: var(--acc); }
.launcher input::placeholder { color: var(--dim); }
.launcher-list { max-height: min(52vh, 460px); padding: 6px; }
.launcher-item {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; width: 100%;
  padding: 8px 10px; border-radius: 7px; text-align: left;
}
.launcher-item .px-icon { width: 24px; height: 24px; }
.launcher-item .g { color: var(--muted); display: grid; place-items: center; }
.launcher-item.is-hl { background: var(--acc-a10); box-shadow: inset 2px 0 0 var(--acc); }
.launcher-item.is-hl .li-k { color: var(--muted); }
.li-t { color: var(--text); font-size: 13px; }
.li-t mark { background: none; color: var(--acc); }
.li-d { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.launcher-empty { padding: 22px; color: var(--muted); text-align: center; }
.launcher-cats { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.launcher-cats::-webkit-scrollbar { display: none; }
.launcher-cat {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; font: 500 11.5px var(--font-mono); color: var(--muted);
}
.launcher-cat .n { color: var(--dim); font-size: 10.5px; }
.launcher-cat:hover { color: var(--text); border-color: var(--acc-a35); }
.launcher-cat[aria-pressed='true'] { background: var(--nb-fill); border-color: var(--nb-fill); color: var(--nb-fill-ink); }
.launcher-cat[aria-pressed='true'] .n { color: inherit; opacity: 0.7; }
.launcher-head { padding: 10px 10px 4px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.launcher-head:first-child { padding-top: 4px; }
.launcher-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--dim); }

/* ── Toasts (notify-send) ─────────────────────────────────────────────────── */
.toasts {
  position: fixed; z-index: 9600; top: calc(var(--topbar-h) + var(--ticker-h) + 10px); right: 12px; width: min(350px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto; display: grid; grid-template-columns: 26px 1fr auto; gap: 11px; align-items: start;
  padding: 11px 10px 11px 12px; background: var(--surface-pop); border: 1px solid var(--line-2); border-left: 2px solid var(--acc);
  border-radius: 9px; box-shadow: var(--shadow-pop); animation: toast-in 0.4s var(--ease-out);
}
.toast.out { animation: toast-out 0.25s var(--ease-io) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
.toast .px-icon { width: 24px; height: 24px; }
.toast-t { font-weight: 600; font-size: 12.5px; color: var(--text); }
.toast-b { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.toast-a { margin-top: 8px; }
.toast-x { color: var(--dim); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; }
.toast-x:hover { color: var(--text); background: var(--panel-3); }

/* ── CRT post-process (toggle in tray) ────────────────────────────────────── */
.crt-fx { position: fixed; inset: 0; z-index: 99990; pointer-events: none; display: none; }
.os[data-crt='on'] .crt-fx { display: block; }
.crt-fx::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px);
  animation: crt-roll 9s linear infinite;
}
.crt-fx::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6);
}
@keyframes crt-roll { to { background-position: 0 300px; } }

/* ── Shutdown / power ─────────────────────────────────────────────────────── */
.power-screen {
  position: fixed; inset: 0; z-index: 99995; background: #000; display: grid; place-items: center; text-align: center;
  color: var(--muted); font-size: 12px; cursor: pointer;
}
.power-screen .crt-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--acc-hot); box-shadow: 0 0 30px var(--acc); animation: crt-off 0.7s var(--ease-io) forwards; }
@keyframes crt-off { 0% { transform: scaleX(1); opacity: 1; } 60% { transform: scaleX(0.02); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }
.power-screen p { opacity: 0; animation: fade-in 0.8s 0.9s forwards; }
.power-screen b { color: var(--acc); font-weight: 500; }
@keyframes fade-in { to { opacity: 1; } }
.os.is-powering-off { animation: tube-off 0.45s var(--ease-io) forwards; }
.os.is-waking { animation: tube-on 0.38s var(--ease-out); }
@keyframes tube-on { 0% { transform: scale(0, 0.006); filter: brightness(4); } 45% { transform: scale(1, 0.006); filter: brightness(3); } 100% { transform: scale(1); filter: brightness(1); } }
.power-screen.is-idle { cursor: default; }
.power-screen p { padding: 0 24px; line-height: 1.6; }
@keyframes tube-off { 0% { transform: scale(1); filter: brightness(1); } 60% { transform: scale(1, 0.006); filter: brightness(3); } 100% { transform: scale(0, 0.006); filter: brightness(4); } }

/* ═══ Shared components (apps use these) ═════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 14px;
  border-radius: 6px; border: 1px solid var(--kbd-line); background: var(--panel-2); color: var(--text);
  font-size: 12px; font-weight: 500; white-space: nowrap; text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn:hover { border-color: var(--acc-lo); background: var(--panel-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn .px-icon { width: 16px; height: 16px; }
.btn--primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
.btn--primary:hover { background: var(--acc-hi); border-color: var(--acc-hi); }
.btn--primary .px-icon rect { fill: var(--acc-ink); }
.btn--ghost { background: transparent; }
.btn--sm { height: 26px; padding: 0 10px; font-size: 11.5px; gap: 6px; }
.btn--lg { height: 40px; padding: 0 18px; font-size: 13px; }
.btn--icon { width: 32px; padding: 0; }
.btn--sm.btn--icon { width: 26px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--kbd-line); color: var(--text-2); font-size: 11.5px; background: transparent; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
button.chip:hover { border-color: var(--line-3); color: var(--text); }
.chip.is-on, .chip[aria-pressed='true'] { border-color: var(--acc); color: var(--acc); background: var(--acc-a10); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 12px; overflow-x: auto; scrollbar-width: none; flex: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 10px 12px 9px; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab[aria-selected='true'] { color: var(--acc); border-bottom-color: var(--acc); }

.tile { padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); min-width: 0; }
.tile-k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tile-v { font: 800 32px/1.05 var(--font-dot); color: var(--acc); margin-top: 8px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 22px var(--acc-a35); }
.tile-v.is-text { font-size: 24px; }
.tile-s { font-size: 11.5px; color: var(--text-2); margin-top: 6px; line-height: 1.45; }

.kbd {
  display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--kbd-line); border-bottom-width: 2px;
  border-radius: 4px; font: 500 10.5px/16px var(--font-mono); color: var(--text); text-align: center; background: var(--panel-3);
}
.label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.h1 { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.h2 { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); }
.h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); }
.display { font-family: var(--font-dot); font-weight: 800; letter-spacing: 0.01em; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.acc { color: var(--acc); }
.ok { color: var(--green); }
.bad { color: var(--red); }
.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap;
}
.badge--acc { border-color: var(--acc-a35); color: var(--acc); background: var(--acc-a06); }
.badge--ok { color: var(--green); border-color: rgba(159, 211, 107, 0.35); }
.badge .led { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.redact { display: inline-block; background: var(--text-2); color: transparent; border-radius: 2px; -webkit-user-select: none; user-select: none; line-height: 1.1; padding: 0 2px; }
.rule { height: 1px; border: 0; margin: 16px 0; background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 8px); }
.list-dash li { position: relative; padding-left: 18px; margin: 6px 0; }
.list-dash li::before { content: '›'; position: absolute; left: 4px; color: var(--acc); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 9px 11px;
  color: var(--text); font-size: 12.5px; outline: none; transition: border-color 0.15s; resize: vertical;
}
.input:focus { border-color: var(--acc); }
.input::placeholder { color: var(--dim); }
.app-pad { padding: 18px 20px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; min-height: 44px; }
.toolbar .path { flex: 1; min-width: 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar { display: flex; gap: 14px; align-items: center; padding: 5px 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); background: var(--panel); flex: none; white-space: nowrap; overflow: hidden; }
.empty { display: grid; place-items: center; text-align: center; color: var(--muted); padding: 40px 20px; }

/* ═══ Ticker: name + metrics running like a market tape, right under the top bar ═══ */
.ticker {
  position: absolute; z-index: 8900; left: 0; right: 0; top: var(--topbar-h); height: var(--ticker-h);
  display: flex; align-items: center; overflow: hidden; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
  background: var(--surface-pop); color: var(--text-2); padding: 0; text-align: left;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  transition: opacity 0.6s;
}
.ticker-track { display: flex; white-space: nowrap; font-size: 11px; animation: ticker 46s linear infinite; will-change: transform; }
.ticker-track span { padding: 0 16px; }
.ticker-track b { color: var(--acc); font-weight: 700; }
.ticker-track .tk-name { font: 800 13px var(--font-dot); color: var(--acc); letter-spacing: 0.04em; }
.ticker-track .tk-up { color: var(--green); }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track .tk-k { color: var(--muted); letter-spacing: 0.08em; }
@keyframes ticker { to { transform: translateX(-50%); } }
.os:not([data-phase='desktop']) .ticker { opacity: 0; pointer-events: none; }

/* ═══ Phones (≤ 760px): the same desktop — wallpaper, icon grid, dock as taskbar, maximized windows ═══ */
.m-only { display: none !important; }
.os.is-mobile { --topbar-h: 34px; --dock-h: 66px; }
.os.is-mobile .m-only { display: flex !important; }
.os.is-mobile .conky, .os.is-mobile .tb-app, .os.is-mobile .tb-hide-m, .os.is-mobile .tb-clock { display: none; }
.os.is-mobile .topbar { padding: 0 6px; }
.os.is-mobile .tb-btn { height: 26px; }
.os.is-mobile .tb-icon { width: 30px; }
.os.is-mobile .desktop {
  top: calc(var(--topbar-h) + var(--ticker-h) + 8px); left: 4px; right: 4px; bottom: auto;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: auto; align-content: start; gap: 2px 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 8px;
}
/* Phones: a brand Space's compact card pinned just above the Space chips (main.js sets its bottom); the icon groups
   scroll above it. Wider screens show the full card top right instead. */
.sp-desk-card { display: none; }
.os.is-mobile .sp-desk-card:not([hidden]) { display: block; position: absolute; z-index: 11; left: 8px; right: 8px; bottom: 120px; pointer-events: none; }
.os.is-mobile.has-windows .sp-desk-card, .os:not([data-phase='desktop']) .sp-desk-card { display: none !important; }
.sp-mini { padding: 8px 10px 9px 13px; pointer-events: auto; box-shadow: 3px 3px 0 color-mix(in srgb, var(--bk-line, #2e261d) 80%, #000); }
.sp-mini.sp-in { animation: sp-mini-in 0.36s var(--ease-out); }
@keyframes sp-mini-in { from { opacity: 0; transform: translateY(10px); } }
.sp-mini-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-mini .sp-mini-logo { --bk-logo-h: 18px; height: 18px; min-width: 0; max-width: 46%; } /* over the kit's own logo height */
.brand-namoh .sp-mini .sp-mini-logo { --bk-logo-h: 24px; height: 24px; }
.brand-stratiq .sp-mini .sp-mini-logo { --bk-logo-h: 14px; height: 14px; }
.sp-mini .sp-status { height: 18px; padding: 0 7px; font-size: 8.5px; }
.sp-mini .sp-mini-go { margin-left: auto; flex: none; min-height: 28px; height: 28px; padding: 0 10px; font-size: 11px; }
.sp-mini-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--bk-line); }
.sp-mini-f { min-width: 0; padding: 0 8px; }
.sp-mini-f:first-child { padding-left: 0; }
.sp-mini-f + .sp-mini-f { border-left: 1px solid color-mix(in srgb, var(--bk-line) 70%, transparent); }
.sp-mini-f b { display: flex; align-items: baseline; gap: 3px; font: 700 14px/1.15 var(--bk-font-display, var(--font-dot)); color: var(--bk-accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-stratiq .sp-mini-f b { font-family: var(--bk-font-mono); font-weight: 600; }
.brand-namoh .sp-mini-f b { font-family: var(--bk-font-text); }
.sp-mini-f span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 2px; font: 500 9.5px/1.25 var(--bk-font-text, var(--font-mono)); color: var(--bk-ink-2); overflow: hidden; } /* two lines at most */
.sp-mini-proof { font: 700 9px/1 var(--font-mono); font-style: normal; color: var(--green); }
.sp-mini-proof--reported { color: var(--bk-ink-2); }

/* Phones: the same groups, in the desktop's order, as headed sections of one grid that scrolls above the chips */
.os.is-mobile .desk-group, .os.is-mobile .desk-col { display: contents; }
.os.is-mobile .desk-group-h { grid-column: 1 / -1; height: auto; padding: 10px 8px 2px; font-size: 10px; }
.os.is-mobile .desk-group:first-child .desk-group-h { padding-top: 2px; }
.os.is-mobile .dicon { width: auto; height: var(--m-row, 78px); padding: 5px 2px 2px; gap: clamp(2px, calc(var(--m-row, 78px) - 73px), 5px); }
.os.is-mobile .dicon .px-icon { --s: clamp(26px, calc(var(--m-row, 78px) - 41px), 34px); }
.os.is-mobile .dicon-sub .px-icon { --s: 14px; }
.os.is-mobile .dicon-sub { width: 19px; height: 19px; }
.os.is-mobile .dicon-badge { right: -12px; }
.os.is-mobile .dicon-l { font-size: 10px; max-width: 100%; padding: 0 2px; }
.os.is-mobile.has-windows .ticker { opacity: 0; pointer-events: none; }
.os.is-mobile .dock { bottom: calc(8px + env(safe-area-inset-bottom)); padding: 5px; gap: 2px; border-radius: 14px; }
.os.is-mobile .dock .m-hide { display: none; }
.os.is-mobile .dock-btn { width: 44px; height: 44px; border-radius: 10px; }
.os.is-mobile .dock-btn .px-icon { width: 28px; height: 28px; }
.os.is-mobile .dock-btn:hover { transform: none; }
.os.is-mobile .dock-tip { display: none; }
.os.is-mobile .dock-sep { height: 26px; margin: 0 3px; }
.os.is-mobile .win { min-width: 0; }
.os.is-mobile .win-bar { height: 40px; padding: 0 4px 0 10px; }
.os.is-mobile .win-ctl button { width: 34px; height: 30px; }
.os.is-mobile .win-rz { display: none; }
.os.is-mobile .welcome { bottom: calc(var(--dock-h) + 40px); width: calc(100vw - 16px); flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
.os.is-mobile .welcome-t { white-space: normal; flex: 1 1 100%; order: -1; margin: 0; }
.os.is-mobile .welcome > span:first-child { display: none; }
.os.is-mobile .toasts { top: auto; bottom: calc(var(--dock-h) + 12px + env(safe-area-inset-bottom)); right: 8px; left: 8px; width: auto; flex-direction: column-reverse; }
.os.is-mobile .app-pad { padding: 16px; }
.os.is-mobile .split { grid-template-columns: 1fr; }
@media (max-width: 359px) { .os.is-mobile .desktop { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ═══ Raised boxes and keys — ink-edged on paper, edge-lit on black (tokens: --nb-*) ═══ */
:root .btn { border: 2px solid var(--nb-line); box-shadow: var(--nb-shadow-sm); background: var(--nb-card); transition: transform 0.1s, box-shadow 0.1s, background 0.15s; }
:root .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--nb-line); border-color: var(--nb-line); background: var(--nb-card); }
:root .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--nb-line); }
:root .btn--primary { background: var(--nb-fill); color: var(--nb-fill-ink); }
:root .btn--primary:hover { background: var(--nb-fill); }
:root .btn--ghost { box-shadow: none; border-color: transparent; background: transparent; }
:root .btn--ghost:hover { border-color: var(--nb-line); box-shadow: var(--nb-shadow-sm); }
:root .tile { border: 2px solid var(--nb-line); background: var(--nb-card); box-shadow: var(--nb-shadow); }

/* ═══ Dark mode chrome: edge-lit frames and hard shadows, so windows and panels read as raised on black ═══ */
[data-mode='dark'] .tb-pitch { background: var(--acc); color: var(--acc-ink); border: 2px solid var(--acc); box-shadow: 2px 2px 0 #2e261d; }
[data-mode='dark'] .tb-pitch:hover { background: var(--acc-hi); border-color: var(--acc-hi); }
[data-mode='dark'] .win { border: 2px solid #4f4436; border-radius: 6px; box-shadow: 5px 5px 0 #1d1914, 0 24px 60px -16px rgba(0, 0, 0, 0.85); }
[data-mode='dark'] .win.is-active { border-color: var(--acc-lo); box-shadow: 6px 6px 0 #2e261d, 0 30px 80px -16px rgba(0, 0, 0, 0.9); }
[data-mode='dark'] .win.is-max { box-shadow: none; }
[data-mode='dark'] .win-bar { border-bottom: 2px solid #3a3128; }
[data-mode='dark'] .ticker { border-bottom: 2px solid var(--nb-line); }
[data-mode='dark'] .dock, [data-mode='dark'] .menu, [data-mode='dark'] .toast, [data-mode='dark'] .launcher, [data-mode='dark'] .welcome { border: 2px solid var(--nb-line); box-shadow: 4px 4px 0 #2e261d; }
[data-mode='dark'] .input { border: 2px solid var(--kbd-line); }

/* ═══ Light mode chrome: paper, ink and hard shadows ═══ */
[data-mode='light'] .topbar { border-bottom-width: 2px; }
[data-mode='light'] .tb-logo .led i { box-shadow: none; }
[data-mode='light'] .tb-pitch { border: 2px solid var(--nb-line); background: var(--nb-fill); color: var(--nb-fill-ink); box-shadow: 2px 2px 0 var(--nb-line); }
[data-mode='light'] .tb-pitch:hover { background: var(--nb-fill); color: var(--nb-fill-ink); border-color: var(--nb-line); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--nb-line); }
[data-mode='light'] .win { border: 2px solid var(--nb-line); border-radius: 6px; box-shadow: 4px 4px 0 rgba(28, 24, 20, 0.35); }
[data-mode='light'] .win.is-active { border-color: var(--nb-line); box-shadow: var(--shadow-win); }
[data-mode='light'] .win.is-max { box-shadow: none; }
[data-mode='light'] .win-bar { border-bottom: 2px solid var(--nb-line); }
[data-mode='light'] .win.is-active .win-bar::before { display: none; }
[data-mode='light'] .win.is-active .win-title { color: var(--text); font-weight: 700; }
[data-mode='light'] .win-ctl button { color: var(--text-2); }
[data-mode='light'] .win-ctl button:hover { background: var(--nb-tag-bg); color: var(--nb-fill-ink); box-shadow: inset 0 0 0 2px var(--nb-line); }
[data-mode='light'] .win-ctl .wc-close:hover { background: var(--red); color: #fff; }
[data-mode='light'] .dock { border: 2px solid var(--nb-line); box-shadow: var(--shadow-pop); }
[data-mode='light'] .dock-btn:hover { background: var(--chrome-hover); }
[data-mode='light'] .dock-btn.is-pitch { background: var(--nb-fill); box-shadow: inset 0 0 0 2px var(--nb-line); }
[data-mode='light'] .dock-btn .run { box-shadow: none; background: var(--nb-line); }
[data-mode='light'] .ticker { border-bottom: 2px solid var(--nb-line); }
[data-mode='light'] .menu, [data-mode='light'] .toast, [data-mode='light'] .launcher, [data-mode='light'] .welcome { border: 2px solid var(--nb-line); box-shadow: var(--shadow-pop); }
[data-mode='light'] .toast { border-left-width: 6px; border-left-color: var(--nb-fill); }
[data-mode='light'] .launcher-item.is-hl { background: var(--nb-fill); box-shadow: inset 3px 0 0 var(--nb-line); }
[data-mode='light'] .launcher-item.is-hl .li-d, [data-mode='light'] .launcher-item.is-hl .li-k, [data-mode='light'] .launcher-item.is-hl .li-t mark { color: var(--text); }
[data-mode='light'] .menu-item:hover, [data-mode='light'] .menu-item.is-hl { background: var(--nb-fill); color: var(--nb-fill-ink); }
[data-mode='light'] .menu-item:hover .px-icon rect, [data-mode='light'] .menu-item.is-hl .px-icon rect { fill: var(--nb-fill-ink); }
[data-mode='light'] .menu-item:hover .k, [data-mode='light'] .menu-item.is-hl .k { color: var(--nb-fill-ink); }
[data-mode='light'] .dicon.is-sel { background: rgba(255, 180, 58, 0.25); border-color: var(--nb-line); }
[data-mode='light'] .dicon.is-sel .dicon-l { background: var(--nb-fill); color: var(--nb-fill-ink); }
[data-mode='light'] .dicon-sub { background: var(--panel); box-shadow: 0 0 0 2px var(--nb-line); }
[data-mode='light'] .dicon-link { background: var(--panel); box-shadow: 0 0 0 2px var(--nb-line); }
[data-mode='light'] .dicon-link::before { background: var(--text); }
[data-mode='light'] .dicon-badge { background: var(--nb-fill); color: var(--nb-fill-ink); box-shadow: 1px 1px 0 var(--nb-line); outline: 1.5px solid var(--nb-line); }
[data-mode='light'] .dicon .px-icon { filter: drop-shadow(2px 2px 0 rgba(28, 24, 20, 0.55)); }
[data-mode='light'] .conky-name { text-shadow: none; }
[data-mode='light'] .conky-bar { background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 7px); }
[data-mode='light'] .conky-bar i { box-shadow: none; }
[data-mode='light'] .chip { border-color: var(--nb-line); color: var(--text); background: var(--nb-card); }
[data-mode='light'] .chip.is-on, [data-mode='light'] .chip[aria-pressed='true'] { background: var(--nb-fill); color: var(--nb-fill-ink); border-color: var(--nb-line); }
[data-mode='light'] .tile-v { text-shadow: none; }
[data-mode='light'] .badge--acc { background: var(--nb-tag-bg); border-color: var(--nb-line); color: var(--nb-tag-fg); }
[data-mode='light'] .kbd { border-color: var(--nb-line); }
[data-mode='light'] .input { border: 2px solid var(--nb-line); background: var(--nb-card); }
[data-mode='light'] .input:focus { box-shadow: var(--nb-shadow-sm); border-color: var(--nb-line); }
[data-mode='light'] .tabs { border-bottom: 2px solid var(--nb-line); }
[data-mode='light'] .tab[aria-selected='true'] { color: var(--text); border-bottom-color: var(--nb-fill); border-bottom-width: 4px; font-weight: 700; }
[data-mode='light'] .toolbar, [data-mode='light'] .statusbar { border-color: var(--nb-line); }
[data-mode='light'] .boot-log .ok { color: var(--green); }
[data-mode='light'] .switch[aria-checked='true'] i { box-shadow: none; background: #fff; }
[data-mode='light'] .crt-fx::before { background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(60, 40, 10, 0.08) 2px 3px); }
[data-mode='light'] .power-screen { background: var(--bg); }
[data-mode='light'] .power-screen .crt-line { background: var(--nb-line); box-shadow: none; }
[data-mode='light'] .crt-fx::after { background: radial-gradient(ellipse at center, transparent 62%, rgba(60, 40, 10, 0.22) 100%); box-shadow: none; }

/* ═══ Spaces (sp-): RJ · GEIPL · STRATIQ · HeyElda · NAMOH ═══════════════════════════════════════════════════════
   js/core/spaces.js puts the brand kit (.brand-<id>, css/brands.css) and the Space's accents (--sp-acc-d / -l, --sp-fill,
   from js/spaces-data.js) on .os. The RJ Space sets none of them, so every --sp-* below falls back to today's accent. */
.os { --sp-acc: var(--sp-acc-d, var(--acc)); --sp-fill-c: var(--sp-fill, var(--acc)); }
[data-mode='light'] .os { --sp-acc: var(--sp-acc-l, var(--acc)); --sp-fill-c: var(--sp-fill, var(--nb-fill)); }

/* Top bar: the switcher (workspaces) and, in a brand Space, its logo in place of "Desktop" */
.sp-switch { display: flex; align-items: center; gap: 2px; margin: 0 4px 0 2px; padding-left: 6px; border-left: 1px solid var(--line-2); height: 20px; }
.sp-pill {
  height: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px 0 5px; border-radius: 5px; border: 1px solid transparent;
  color: var(--muted); font: 500 11px/1 var(--font-mono); letter-spacing: 0.03em; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sp-pill:hover { background: var(--chrome-hover); color: var(--text); }
.sp-mark { width: 14px; height: 14px; object-fit: contain; flex: none; }
.sp-mark-wrap { display: inline-grid; place-items: center; color: var(--acc); flex: none; }
.sp-mark--rj { width: 15px; height: 13px; }
.sp-pill:not([aria-pressed='true']) .sp-mark { opacity: 0.78; }
.sp-pill[data-space='rj'] .sp-name { display: none; } /* RJ's mark is the monogram itself */
.sp-pill[data-space='rj'] { padding: 0 6px; }
.sp-pill:hover .sp-mark { opacity: 1; }
.sp-pill[aria-pressed='true'] {
  color: var(--sp-acc); font-weight: 700; border-color: color-mix(in srgb, var(--sp-acc) 50%, transparent);
  background: color-mix(in srgb, var(--sp-acc) 13%, transparent);
}
.sp-tb-brand { display: none; align-items: center; height: 22px; padding: 0 6px 0 4px; }
.sp-tb-brand .bk-logo { height: 16px; }
[data-mode='light'] .sp-pill[aria-pressed='true'] { color: var(--text); border-color: var(--nb-line); background: color-mix(in srgb, var(--sp-fill-c) 38%, var(--panel)); box-shadow: 2px 2px 0 var(--nb-line); }
.brand-namoh .sp-tb-brand .bk-logo { height: 21px; }
.brand-stratiq .sp-tb-brand .bk-logo { height: 12px; }
.os:not([data-space='rj']) .topbar:not(.sp-has-app) .sp-tb-brand { display: inline-flex; }
.os:not([data-space='rj']) .topbar:not(.sp-has-app) .tb-app { display: none; }
.tb-app { min-width: 0; max-width: clamp(64px, calc(50vw - 524px), 280px); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1260px) {
  .sp-pill:not([aria-pressed='true']) .sp-name { display: none; }
  .sp-pill:not([aria-pressed='true']) { padding: 0 5px; }
  .tb-app { max-width: clamp(56px, calc(50vw - 400px), 280px); }
}
@media (max-width: 980px) { .sp-pill .sp-name { display: none; } .sp-pill { padding: 0 5px; } .tb-app { max-width: clamp(48px, calc(50vw - 330px), 200px); } }
.os.is-mobile .sp-switch { display: none; }
.os.is-mobile:not([data-space='rj']) .sp-tb-brand { display: inline-flex; min-width: 0; padding-right: 0; }
.os.is-mobile .sp-tb-brand .bk-logo { max-width: 32vw; }

/* Dock: a brand Space's apps slide in; the office link wears the shortcut arrow */
.dock.sp-swap > * { animation: sp-dock-in 0.34s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 26ms); }
@keyframes sp-dock-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } }
@media (prefers-reduced-motion: reduce) { .dock.sp-swap > * { animation: none; } }
html[data-motion='reduce'] .dock.sp-swap > * { animation: none; }
.os:not([data-space='rj']) .dock-btn .run { background: var(--sp-acc); box-shadow: 0 0 6px var(--sp-acc); }
[data-mode='dark'] .os:not([data-space='rj']) .dock { border-color: color-mix(in srgb, var(--sp-acc) 55%, var(--nb-line)); }
.sp-dock-link::before {
  content: ''; position: absolute; right: 4px; bottom: 5px; width: 14px; height: 14px; border-radius: 4px; background: var(--bg);
  box-shadow: 0 0 0 1px var(--acc-a35);
}
.sp-dock-link::after { content: ''; position: absolute; right: 4px; bottom: 5px; width: 14px; height: 14px; background: var(--acc); -webkit-mask: var(--link-arrow) center / 10px no-repeat; mask: var(--link-arrow) center / 10px no-repeat; }
[data-mode='light'] .sp-dock-link::before { background: var(--panel); box-shadow: 0 0 0 2px var(--nb-line); }
[data-mode='light'] .sp-dock-link::after { background: var(--text); }

/* Proof labels: Verified · Reported · Projection */
.sp-proof {
  display: inline-flex; align-items: center; gap: 4px; height: 15px; padding: 0 5px; border-radius: 3px; flex: none;
  font: 600 8.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--green);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 8%, transparent);
}
.sp-proof i { font-style: normal; }
.sp-proof--verified i::before { content: '✓'; }
.sp-proof--reported { color: var(--acc); }
.sp-proof--reported i::before { content: '~'; }
.sp-proof--projection { color: var(--muted); }
.sp-proof--projection i::before { content: '↗'; }
.sp-meter { display: flex; align-items: center; gap: 8px; margin: 3px 0 7px; }
.sp-meter .conky-bar { flex: 1; margin: 0; }

/* Story Mode entry: START HERE in the RJ Space's Conky (a chip once seen), and above the icon grid on phones */
.sp-story { position: relative; pointer-events: auto; margin-bottom: 16px; }
.sp-story-go {
  display: grid; grid-template-columns: 1fr auto; width: 100%; padding: 12px 14px 11px; text-align: left; color: var(--nb-fill-ink);
  background: var(--nb-fill); border: 2px solid var(--nb-fill); border-radius: 6px; box-shadow: var(--nb-shadow);
  transition: transform 0.12s, box-shadow 0.12s;
}
.sp-story-go:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #463b2e; }
.sp-story-go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #463b2e; }
.sp-story-k { grid-column: 1; font: 800 21px/1 var(--font-dot); letter-spacing: 0.05em; text-transform: uppercase; }
.sp-story-t { grid-column: 1; margin-top: 8px; font-weight: 700; font-size: 12.5px; line-height: 1.3; }
.sp-story-m { grid-column: 1; font-size: 11px; line-height: 1.35; opacity: 0.8; }
.sp-story-arrow { grid-column: 2; grid-row: 2 / span 2; align-self: end; font-size: 18px; line-height: 1; font-weight: 700; }
.sp-story-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--nb-fill-ink); opacity: 0.7; }
.sp-story-x:hover { opacity: 1; background: color-mix(in srgb, var(--nb-fill-ink) 14%, transparent); }
.sp-story-chip {
  display: none; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 8px; border-radius: 999px; font: 600 11.5px/1 var(--font-mono);
  color: var(--acc); border: 1px solid var(--acc-a35); background: var(--acc-a06); animation: sp-pop 0.3s var(--ease-out);
}
.sp-story-chip .px-icon { width: 16px; height: 16px; }
.sp-story-chip:hover { background: var(--acc-a20); }
.sp-story[data-state='chip'] { margin-bottom: 12px; }
.sp-story[data-state='chip'] .sp-story-go, .sp-story[data-state='chip'] .sp-story-x { display: none; }
.sp-story[data-state='chip'] .sp-story-chip { display: inline-flex; }
@keyframes sp-pop { from { opacity: 0; transform: scale(0.8); } }
[data-mode='light'] .sp-story-go { border-color: var(--nb-line); }
[data-mode='light'] .sp-story-go:hover { box-shadow: 5px 5px 0 var(--nb-line); }
[data-mode='light'] .sp-story-go:active { box-shadow: 1px 1px 0 var(--nb-line); }
[data-mode='light'] .sp-story-chip { color: var(--text); border: 2px solid var(--nb-line); background: var(--nb-fill); box-shadow: 2px 2px 0 var(--nb-line); }
[data-mode='light'] .sp-story-chip .px-icon rect { fill: var(--nb-fill-ink); }
/* a short screen keeps the whole Conky in view with the Story entry on top */
@media (max-height: 719px) { .sp-conky-rj .sp-conky-ask { display: none; } }
/* Phones: round Space chips above the dock, Story first. Until Story Mode has been seen the Story chip is filled and
   pulses once, softly; after that it matches the other chips. The row is kept slim: the portrait gets the rest. */
.sp-chips {
  display: none; position: absolute; z-index: 7900; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 4px);
  align-items: center; gap: 8px; transition: opacity 0.6s;
}
.os.is-mobile .sp-chips { display: flex; }
.os.is-mobile.has-windows .sp-chips, .os:not([data-phase='desktop']) .sp-chips { opacity: 0; pointer-events: none; }
.sp-chip {
  position: relative; width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-pop); border: 1.5px solid var(--line-3); box-shadow: 2px 2px 0 #2e261d; transition: border-color 0.15s, background 0.15s;
}
.sp-chip::after { content: ''; position: absolute; inset: -6px -4px; } /* a 40 px touch target around the 32 px chip */
.sp-chip .sp-mark { width: 17px; height: 17px; }
.sp-chip .sp-mark--rj { width: 16px; height: 13px; }
.sp-chip:not([aria-pressed='true']) .sp-mark { opacity: 0.8; }
.sp-chip[aria-pressed='true'] { border: 2px solid var(--sp-acc); background: color-mix(in srgb, var(--sp-acc) 16%, var(--surface-pop)); }
.sp-chip--story {
  width: auto; padding: 0 11px 0 8px; border-radius: 999px; display: inline-flex; gap: 6px;
  font: 700 11.5px/1 var(--font-mono); color: var(--acc); border-color: var(--acc-a35);
}
.sp-chip--story .px-icon { width: 16px; height: 16px; }
.sp-chip--story.is-new { color: var(--nb-fill-ink); background: var(--nb-fill); border: 2px solid var(--nb-fill); animation: sp-story-pulse 1.6s var(--ease-out) 1.2s 1 backwards; }
.sp-chip--story.is-new .px-icon rect { fill: var(--nb-fill-ink); }
@keyframes sp-story-pulse { 0% { box-shadow: 2px 2px 0 #2e261d, 0 0 0 0 var(--acc-a35); } 60% { box-shadow: 2px 2px 0 #2e261d, 0 0 0 9px rgba(0, 0, 0, 0); } 100% { box-shadow: 2px 2px 0 #2e261d, 0 0 0 0 rgba(0, 0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .sp-chip--story.is-new { animation: none; } }
html[data-motion='reduce'] .sp-chip--story.is-new { animation: none; }
.sp-chip-sep { width: 1px; height: 20px; background: var(--line-3); margin: 0 1px; }
[data-mode='light'] .sp-chip { border: 2px solid var(--nb-line); box-shadow: 2px 2px 0 var(--nb-line); background: var(--panel); }
[data-mode='light'] .sp-chip[aria-pressed='true'] { background: color-mix(in srgb, var(--sp-fill-c) 34%, #fff); border-color: var(--nb-line); }
[data-mode='light'] .sp-chip--story { color: var(--text); }
[data-mode='light'] .sp-chip--story.is-new { border-color: var(--nb-line); background: var(--nb-fill); }
[data-mode='light'] .sp-chip--story.is-new { animation-name: sp-story-pulse-light; }
@keyframes sp-story-pulse-light { 0% { box-shadow: 2px 2px 0 var(--nb-line), 0 0 0 0 rgba(255, 180, 58, 0.7); } 60% { box-shadow: 2px 2px 0 var(--nb-line), 0 0 0 9px rgba(255, 180, 58, 0); } 100% { box-shadow: 2px 2px 0 var(--nb-line), 0 0 0 0 rgba(255, 180, 58, 0); } }

/* A brand Space's Conky card: the brand's ground, logo, type and accent (tokens from css/brands.css) */
.sp-conky {
  position: relative; padding: 15px 15px 15px 19px; border-radius: 8px; overflow: hidden; pointer-events: auto;
  background: var(--bk-ground, var(--panel)); color: var(--bk-ink, var(--text)); border: 1px solid var(--bk-line, var(--line-2));
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--bk-line, #2e261d) 80%, #000);
}
.sp-conky::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--bk-accent), var(--bk-accent-2, var(--bk-accent))); }
.sp-conky.sp-in { animation: sp-conky-in 0.42s var(--ease-out); }
@keyframes sp-conky-in { from { opacity: 0; transform: translateX(14px); } }
.sp-conky-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; min-width: 0; }
.sp-conky-logo { height: 34px; min-width: 0; }
.brand-namoh .sp-conky-logo { height: 46px; }
.brand-stratiq .sp-conky-logo { height: 24px; }
.sp-status {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 20px; padding: 0 8px; border-radius: 999px;
  font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--bk-accent-text); border: 1px solid color-mix(in srgb, var(--bk-accent-text) 45%, transparent);
}
.sp-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sp-conky-line { margin: 12px 0 0; font: 700 15.5px/1.32 var(--bk-font-head, var(--font-mono)); letter-spacing: -0.01em; color: var(--bk-ink); text-wrap: balance; }
.brand-namoh .sp-conky-line { font-weight: 400; font-size: 17px; letter-spacing: 0; }
.sp-conky-sec { margin-top: 13px; padding-top: 10px; border-top: 1px dashed var(--bk-line); }
.sp-conky .conky-h { color: var(--bk-ink-2); }
.sp-fact { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 4px 0 7px; }
.sp-fact + .sp-fact { border-top: 1px solid color-mix(in srgb, var(--bk-line) 60%, transparent); padding-top: 7px; }
.sp-fact-k { font: 500 11.5px/1.3 var(--bk-font-text, var(--font-mono)); color: var(--bk-ink-2); }
.sp-fact-v { font: 700 18px/1.1 var(--bk-font-display, var(--font-dot)); color: var(--bk-accent-text); text-align: right; letter-spacing: -0.01em; }
.brand-stratiq .sp-fact-v { font-family: var(--bk-font-mono); font-weight: 600; }
.brand-namoh .sp-fact-v { font-family: var(--bk-font-text); font-weight: 700; font-size: 17px; } /* Marcellus' 1 and 0 read as I and O */
.sp-fact-s { font: 400 10.5px/1.35 var(--bk-font-text, var(--font-mono)); color: var(--bk-ink-2); opacity: 0.85; align-self: center; }
.sp-fact .sp-proof { justify-self: end; align-self: center; }
.sp-conky .conky-ask { color: var(--bk-ink-2); font-family: var(--bk-font-text, var(--font-mono)); font-size: 12px; }
.sp-conky .conky-ask span, .sp-conky .conky-ask:hover { color: var(--bk-accent-text); }
.sp-conky .conky-actions { margin-top: 14px; }
.sp-conky .btn { font-family: var(--bk-font-head, var(--font-mono)); font-weight: 700; color: var(--bk-ink); background: transparent; border-color: var(--bk-line); box-shadow: 3px 3px 0 color-mix(in srgb, var(--bk-line) 70%, #000); }
.sp-conky .btn:hover { border-color: var(--bk-accent-text); background: transparent; box-shadow: 4px 4px 0 color-mix(in srgb, var(--bk-line) 70%, #000); }
.sp-conky .btn--primary.sp-cta, .sp-conky .btn--primary.sp-cta:hover { background: var(--bk-cta-bg); color: var(--bk-cta-fg); border-color: var(--bk-cta-bg); }
.sp-conky .sp-proof--verified { color: color-mix(in srgb, var(--green) 85%, var(--bk-ink)); }
[data-mode='light'] .sp-conky { border: 2px solid var(--nb-line); box-shadow: var(--nb-shadow); border-radius: 6px; }
[data-mode='light'] .sp-conky .btn { border-color: var(--nb-line); box-shadow: var(--nb-shadow-sm); }
[data-mode='light'] .sp-conky .btn:not(.sp-cta) { color: var(--bk-ink); }
[data-mode='light'] .sp-conky .btn--primary.sp-cta { border-color: var(--nb-line); }

/* The desktop brand card's facts: a hero number, then tiles (phrase + icon, or value over name), each with its proof */
.sp-facts { display: flex; flex-direction: column; gap: 10px; }
.sp-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-hero-v { font: 700 34px/1 var(--bk-font-display, var(--font-dot)); color: var(--bk-accent-text); letter-spacing: -0.01em; }
.brand-stratiq .sp-hero-v { font-family: var(--bk-font-mono); font-weight: 600; }
.brand-namoh .sp-hero-v { font-family: var(--bk-font-text); font-weight: 700; font-size: 32px; }
.sp-hero-k { margin-top: 4px; font: 600 10.5px/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bk-ink); }
.sp-hero-s { margin-top: 3px; font: 400 11px/1.4 var(--bk-font-text, var(--font-mono)); color: var(--bk-ink-2); }
.sp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-tile { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 10px 8px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--bk-line) 75%, transparent); background: color-mix(in srgb, var(--bk-accent) 6%, transparent); }
.sp-tile-ic { color: var(--bk-accent-text); line-height: 0; }
.sp-tile-ic .px-icon { width: 18px; height: 18px; filter: none; }
.sp-tile-t { font: 700 13px/1.25 var(--bk-font-head, var(--font-mono)); color: var(--bk-ink); }
.sp-tile-v { font: 700 19px/1.05 var(--bk-font-display, var(--font-dot)); color: var(--bk-accent-text); }
.brand-stratiq .sp-tile-v { font-family: var(--bk-font-mono); font-weight: 600; }
.brand-namoh .sp-tile-v { font-family: var(--bk-font-text); }
.sp-tile-k { font: 600 9.5px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bk-ink); }
.sp-tile-s { font: 400 10.5px/1.35 var(--bk-font-text, var(--font-mono)); color: var(--bk-ink-2); }
.sp-tile .sp-proof { align-self: flex-start; margin-top: 2px; }

/* Launcher rows for Spaces */
.sp-li-mark { display: grid; place-items: center; width: 24px; height: 24px; }
.sp-li-mark .sp-mark { width: 20px; height: 20px; }
.sp-li-mark .sp-mark--rj { width: 20px; height: 17px; }

/* Idle: in the HeyElda Space, Elda sleeps, very dimly, above the message */
.sp-idle-elda { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-100% - 34px)); opacity: 0; pointer-events: none; animation: sp-elda-in 1.8s 0.9s forwards; }
.sp-idle-elda svg { display: block; transform-origin: 50% 100%; animation: sp-elda-breathe 7s ease-in-out infinite; }
@keyframes sp-elda-in { to { opacity: 0.15; } }
@keyframes sp-elda-breathe { 50% { transform: scale(1.018, 0.984); } }
[data-mode='light'] .sp-idle-elda { animation-name: sp-elda-in-light; }
@keyframes sp-elda-in-light { to { opacity: 0.32; } }

/* Narrower desktops: the Conky gives way to the portrait; only the RJ Space's Story entry stays (top right) */
@media (max-width: 1180px) {
  .conky { width: auto; right: 16px; top: calc(var(--topbar-h) + var(--ticker-h) + 12px); }
  .sp-conky-rj > :not(.sp-story), .os:not([data-space='rj']) .conky { display: none; }
  .sp-story--desk { margin: 0; }
  .sp-story--desk .sp-story-go { grid-template-columns: auto auto auto; column-gap: 10px; align-items: center; padding: 7px 40px 7px 12px; box-shadow: var(--nb-shadow-sm); }
  .sp-story--desk .sp-story-k { font-size: 14px; }
  .sp-story--desk .sp-story-t { grid-column: 2; grid-row: 1; margin: 0; }
  .sp-story--desk .sp-story-m { display: none; }
  .sp-story--desk .sp-story-arrow { grid-column: 3; grid-row: 1; align-self: center; font-size: 15px; }
  .sp-story--desk .sp-story-x { top: 50%; transform: translateY(-50%); right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
html[data-motion='reduce'] *, html[data-motion='reduce'] *::before, html[data-motion='reduce'] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
}
/* Settings → Text size: app windows render larger (the screen apps — terminal, TV, arcade — keep their own scale) */
html[data-text='large'] .win-body:not(.is-screen) { zoom: 1.12; }
html[data-text='larger'] .win-body:not(.is-screen) { zoom: 1.25; }