/* ==========================================================================
   CrushyOS - retro browser-OS shell for /meet-crushy
   Phase i tokenized the --os-* contract + the "orangelabz" default theme.
   Phase ii adds three more skins as [data-os-theme="y2k"|"synth"|"pixel"]
   blocks that ONLY re-declare the --os-* tokens. Nothing in the chrome below
   hard-codes a themed colour, font, radius, shadow, border, cursor or
   wallpaper - every one of those is a variable, so a whole-OS restyle is a
   pure token swap and a 5th theme stays a single block.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---- Token contract (orangelabz default) ------------------------------- */
:root,
[data-os-theme="orangelabz"]{
  --os-accent:#e8692d;
  --os-accent-deep:#d65a23;
  --os-accent-2:#e8692d;          /* secondary highlight (themes repoint) */
  --os-ink:#1f1a16;               /* primary text */
  --os-line:var(--os-ink);        /* borders/outlines */
  --os-cream:#fff7ec;             /* window / control surface */
  --os-paper:#f3ead7;
  --os-paper-2:#ecdfc4;
  --os-close:#d8422a;
  --os-on-accent:#fff7ec;
  --os-muted:#7a6a58;
  --os-sel:rgba(232,105,45,.16);  /* icon selection tint */

  --os-font:'Fredoka',system-ui,sans-serif;
  --os-font-body:'Nunito',system-ui,sans-serif;
  --os-font-comic:'Baloo 2',system-ui,sans-serif;
  --os-font-tag:var(--os-font);   /* small uppercase labels (pixel repoints) */

  --os-titlebar-h:38px;
  --os-taskbar-h:52px;
  --os-radius:0px;                 /* orangelabz = hard sticker corners */
  --os-shadow:4px 4px 0 var(--os-ink);
  --os-shadow-lg:6px 6px 0 var(--os-ink);
  --os-shadow-sm:3px 3px 0 var(--os-ink);
  --os-shadow-xs:2px 2px 0 var(--os-ink);
  --os-glow:none;
  --os-border:2px solid var(--os-line);

  /* chrome accents that differ by skin (gloss / neon / flat) */
  --os-titlebar-bg:var(--os-accent);
  --os-titlebar-inset:none;             /* inner highlight / glow */
  --os-titlebar-text-shadow:none;
  --os-btn-bg:var(--os-cream);

  /* wallpaper: base colour + image stack + size, plus decorative toggles */
  --os-bg:var(--os-paper);
  --os-wallpaper:
    radial-gradient(closest-side at 82% 26%, rgba(232,105,45,.10), rgba(232,105,45,0) 70%),
    var(--os-halftone);
  --os-wallpaper-size:auto,var(--os-halftone-size);
  --os-watermark-opacity:.045;          /* the giant Crushy blob silhouette */
  --os-scanline-opacity:0;              /* CRT overlay (pixel only) */

  /* halftone dot field painted on the paper */
  --os-halftone:radial-gradient(rgba(31,26,22,.06) 1.4px,transparent 1.5px);
  --os-halftone-size:16px 16px;

  /* chunky ink+orange retro arrow, hotspot at 4,3 */
  --os-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 3 L5 25 L11 19 L15 27 L19 25 L15 17 L23 17 Z' fill='%23e8692d' stroke='%231f1a16' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3;
}

/* ==========================================================================
   Theme: y2k - "Aqua Bubblegum" (Frutiger-Aero / MSN-XP)
   ========================================================================== */
[data-os-theme="y2k"]{
  --os-accent:#0058e6;
  --os-accent-deep:#0046b8;
  --os-accent-2:#8fd400;                 /* lime */
  --os-ink:#1b2a3a;
  --os-line:#2f5b86;
  --os-cream:#eaf6ff;                     /* mist window body */
  --os-paper:#cfe6fb;
  --os-paper-2:#b6d7f2;
  --os-close:#e5484d;
  --os-on-accent:#ffffff;
  --os-muted:#5a7590;
  --os-sel:rgba(143,212,0,.24);

  --os-font:'Nunito',system-ui,sans-serif;
  --os-font-body:'Nunito',system-ui,sans-serif;
  --os-font-tag:'Nunito',system-ui,sans-serif;

  --os-radius:10px;
  --os-shadow:0 8px 20px rgba(20,70,140,.28);
  --os-shadow-lg:0 12px 30px rgba(20,70,140,.34);
  --os-shadow-sm:0 3px 8px rgba(20,70,140,.24);
  --os-shadow-xs:0 2px 5px rgba(20,70,140,.22);
  --os-glow:none;
  --os-border:2px solid var(--os-line);

  --os-titlebar-bg:linear-gradient(180deg,#5fa0f7 0%,#3f8cf3 46%,#0058e6 100%);
  --os-titlebar-inset:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 5px rgba(0,40,120,.35);
  --os-titlebar-text-shadow:0 1px 1px rgba(0,30,90,.5);
  --os-btn-bg:linear-gradient(180deg,#ffffff 0%,#dcecfb 100%);

  --os-bg:#8fc9f5;
  --os-wallpaper:linear-gradient(180deg,#3f8cf3 0%,#8fc9f5 42%,#cdeeb0 53%,#6fae52 100%);
  --os-wallpaper-size:cover;
  --os-watermark-opacity:0;
  --os-scanline-opacity:0;

  /* glossy white Aero pointer */
  --os-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 3 L5 25 L11 19 L15 27 L19 25 L15 17 L23 17 Z' fill='%23ffffff' stroke='%232f5b86' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M7 6 L7 14 L10 12 Z' fill='%23dcecfb'/%3E%3C/svg%3E") 4 3;
}

/* ==========================================================================
   Theme: synth - "Outrun" (neon)
   ========================================================================== */
[data-os-theme="synth"]{
  --os-accent:#ff2975;
  --os-accent-deep:#8c1eff;
  --os-accent-2:#00d0ff;                  /* cyan */
  --os-ink:#eaf3ff;                        /* light text on void */
  --os-line:#00d0ff;
  --os-cream:#160a2b;                      /* near-black window body */
  --os-paper:#1a0b38;
  --os-paper-2:#26124e;
  --os-close:#ff2975;
  --os-on-accent:#ffffff;
  --os-muted:#a48fd6;
  --os-sel:rgba(0,208,255,.18);

  --os-font:'Orbitron',system-ui,sans-serif;
  --os-font-body:'Nunito',system-ui,sans-serif;
  --os-font-tag:'Orbitron',system-ui,sans-serif;

  --os-radius:4px;
  --os-glow:0 0 18px rgba(255,41,117,.55), 0 0 6px rgba(0,208,255,.5);
  --os-shadow:var(--os-glow);
  --os-shadow-lg:0 0 30px rgba(255,41,117,.6), 0 0 12px rgba(0,208,255,.55);
  --os-shadow-sm:0 0 12px rgba(0,208,255,.45);
  --os-shadow-xs:0 0 8px rgba(255,41,117,.4);
  --os-border:1px solid var(--os-line);

  --os-titlebar-bg:linear-gradient(180deg,#ff2975 0%,#8c1eff 100%);
  --os-titlebar-inset:inset 0 0 12px rgba(0,208,255,.35);
  --os-titlebar-text-shadow:0 0 8px rgba(0,208,255,.95), 0 0 2px rgba(255,255,255,.8);
  --os-btn-bg:linear-gradient(180deg,rgba(255,41,117,.22),rgba(140,30,255,.22));

  --os-bg:#0d0221;
  --os-wallpaper:linear-gradient(180deg,#0d0221 0%,#2a0845 45%,#7a1a5e 78%,#ff2975 100%);
  --os-wallpaper-size:cover;
  --os-watermark-opacity:0;
  --os-scanline-opacity:0;

  /* neon glow arrow (cyan blade, magenta bloom) */
  --os-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 3 L5 25 L11 19 L15 27 L19 25 L15 17 L23 17 Z' fill='none' stroke='%23ff2975' stroke-width='5' opacity='0.55' stroke-linejoin='round'/%3E%3Cpath d='M5 3 L5 25 L11 19 L15 27 L19 25 L15 17 L23 17 Z' fill='%230d0221' stroke='%2300d0ff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3;
}

/* ==========================================================================
   Theme: pixel - "CRT" (retro game / paint)
   ========================================================================== */
[data-os-theme="pixel"]{
  --os-accent:#e43b44;
  --os-accent-deep:#a12a30;
  --os-accent-2:#2ac3de;
  --os-ink:#12121b;
  --os-line:var(--os-ink);
  --os-cream:#f4f4e8;
  --os-paper:#c0cbdc;
  --os-paper-2:#8b9bb4;
  --os-close:#e43b44;
  --os-on-accent:#f4f4e8;
  --os-muted:#4a5568;
  --os-sel:rgba(228,59,68,.22);

  --os-font:'VT323',ui-monospace,monospace;
  --os-font-body:'VT323',ui-monospace,monospace;
  --os-font-tag:'Press Start 2P',ui-monospace,monospace;

  --os-radius:0px;
  --os-shadow:4px 4px 0 var(--os-ink);
  --os-shadow-lg:6px 6px 0 var(--os-ink);
  --os-shadow-sm:3px 3px 0 var(--os-ink);
  --os-shadow-xs:2px 2px 0 var(--os-ink);
  --os-glow:none;
  --os-border:3px solid var(--os-line);   /* chunky */

  --os-titlebar-bg:var(--os-accent);
  --os-titlebar-inset:none;
  --os-titlebar-text-shadow:none;
  --os-btn-bg:var(--os-cream);

  --os-bg:#c0cbdc;
  --os-wallpaper:repeating-conic-gradient(#c0cbdc 0 25%, #b3bfd0 0 50%);
  --os-wallpaper-size:16px 16px;
  --os-watermark-opacity:0;
  --os-scanline-opacity:.16;

  /* blocky pixel-art arrow, crisp edges, hotspot 4,2 */
  --os-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2 1 L2 12 L5 9 L7 13 L9 12 L7 8 L11 8 Z' fill='%23f4f4e8' stroke='%2312121b' stroke-width='2' stroke-linejoin='miter'/%3E%3C/svg%3E") 4 2;
}
[data-os-theme="pixel"] *{font-size-adjust:none}
/* VT323 renders a touch small; nudge the body copy up a hair for legibility */
[data-os-theme="pixel"] .app-p,
[data-os-theme="pixel"] .app-lede{font-size:16px}

html,body{height:100%}
html{-webkit-text-size-adjust:100%;overflow:hidden}
body{
  font-family:var(--os-font-body);
  color:var(--os-ink);
  background:var(--os-bg);
  overflow:hidden;
  height:100vh;
  user-select:none;
  -webkit-user-select:none;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
html,body{overscroll-behavior:none}

.os-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Keyboard-focus ring, consistent across every interactive control. */
.os-ctrl:focus-visible,.os-btn:focus-visible,.dock-btn:focus-visible,
.sm-item:focus-visible,.os-icon:focus-visible,.theme-tile:focus-visible,
#startBtn:focus-visible,.tb-win:focus-visible,#tray .tray-swatch:focus-visible,
.cy-tool:focus-visible,.msn-input:focus-visible,.msn-send:focus-visible,
.msn-nudge:focus-visible,.msn-emo:focus-visible{
  outline:3px solid var(--os-accent);outline-offset:2px;
}

/* ==========================================================================
   Boot splash
   ========================================================================== */
#boot{
  position:fixed;inset:0;z-index:9000;
  padding:env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:var(--os-accent);
  color:var(--os-on-accent);
  cursor:pointer;
  transition:opacity .5s ease;
}
#boot.is-gone{opacity:0;pointer-events:none}
#boot .boot-blob{
  width:120px;height:120px;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  background:var(--os-cream);
  border:3px solid var(--os-line);
  box-shadow:var(--os-shadow-lg);
  position:relative;
  animation:bootbob 1.6s ease-in-out infinite;
}
#boot .boot-blob::before,#boot .boot-blob::after{
  content:"";position:absolute;top:44px;width:15px;height:20px;border-radius:50%;
  background:var(--os-ink);
}
#boot .boot-blob::before{left:34px}
#boot .boot-blob::after{right:34px}
@keyframes bootbob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
#boot .boot-title{font-family:var(--os-font);font-weight:700;font-size:30px;letter-spacing:.02em}
#boot .boot-bar{width:220px;height:12px;border:2px solid var(--os-line);background:var(--os-cream);overflow:hidden}
#boot .boot-bar i{display:block;height:100%;width:0;background:var(--os-ink);animation:bootfill 1.3s ease forwards}
@keyframes bootfill{to{width:100%}}
#boot .boot-hint{font-family:var(--os-font-body);font-weight:700;font-size:12px;opacity:.85}

/* ==========================================================================
   Desktop + wallpaper
   ========================================================================== */
#desktop{
  position:fixed;inset:0 0 var(--os-taskbar-h) 0;
  overflow:hidden;
  touch-action:none;   /* the pet drag owns touch here so the browser can't reclaim it as a pan; inner scrollers (.os-body) opt back in */
  cursor:var(--os-cursor),auto;
  background-color:var(--os-bg);
  background-image:var(--os-wallpaper);
  background-size:var(--os-wallpaper-size);
}
/* the big watermark Crushy blob silhouette (orangelabz; other skins zero it) */
#desktop::after{
  content:"";position:absolute;right:-40px;bottom:-30px;width:min(46vw,540px);height:min(46vw,540px);
  background:var(--os-ink);opacity:var(--os-watermark-opacity);pointer-events:none;
  -webkit-mask:var(--os-blob-mask) center/contain no-repeat;
  mask:var(--os-blob-mask) center/contain no-repeat;
}
:root{
  --os-blob-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 8c34 0 62 20 74 52 10 27 2 52-6 78-8 26-30 46-68 46S38 168 30 140c-8-27-18-53-6-80C36 28 66 8 100 8Z'/%3E%3C/svg%3E");
}

/* ---- decorative wallpaper layers (theme-scoped; behind all windows) ----- */
/* y2k: translucent bubbles drifting up the Bliss sky */
[data-os-theme="y2k"] #desktop::before{
  content:"";position:absolute;inset:-60px 0 0 0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 82%, rgba(255,255,255,.55) 0 5px, rgba(255,255,255,.12) 6px 15px, transparent 16px),
    radial-gradient(circle at 26% 60%, rgba(255,255,255,.5) 0 3px, rgba(255,255,255,.1) 4px 11px, transparent 12px),
    radial-gradient(circle at 68% 74%, rgba(255,255,255,.55) 0 7px, rgba(255,255,255,.12) 8px 22px, transparent 23px),
    radial-gradient(circle at 84% 40%, rgba(255,255,255,.5) 0 4px, rgba(255,255,255,.1) 5px 13px, transparent 14px),
    radial-gradient(circle at 46% 88%, rgba(255,255,255,.5) 0 5px, rgba(255,255,255,.1) 6px 16px, transparent 17px);
  background-repeat:no-repeat;
  animation:y2kbubbles 16s linear infinite;
}
@keyframes y2kbubbles{from{transform:translateY(0)}to{transform:translateY(-60px)}}

/* synth: a sun above an animated perspective grid */
[data-os-theme="synth"] #desktop::before{
  content:"";position:absolute;left:-50%;right:-50%;bottom:0;height:52%;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,208,255,.5) 1px,transparent 1px),
    linear-gradient(90deg, rgba(255,41,117,.5) 1px, transparent 1px);
  background-size:46px 46px;
  transform:perspective(280px) rotateX(64deg);
  transform-origin:bottom center;
  animation:synthgrid 1.4s linear infinite;
}
@keyframes synthgrid{from{background-position:0 0}to{background-position:0 46px}}
[data-os-theme="synth"] #desktop::after{
  content:"";right:auto;left:50%;bottom:36%;
  width:220px;height:220px;border-radius:50%;
  transform:translateX(-50%);
  -webkit-mask:none;mask:none;
  background:linear-gradient(180deg,#ffd84d 0%,#ff8a3d 40%,#ff2975 70%,#8c1eff 100%);
  opacity:.95;
  box-shadow:0 0 70px rgba(255,41,117,.5);
}

/* desktop icon grid, top-left, column-first flow */
#icons{
  position:absolute;inset:14px auto auto 14px;
  display:flex;flex-direction:column;flex-wrap:wrap;
  gap:6px;max-height:calc(100vh - var(--os-taskbar-h) - 28px);
  z-index:1;
}
.os-icon{
  width:92px;padding:10px 6px 8px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  cursor:var(--os-cursor),auto;
  border:2px solid transparent;border-radius:6px;
  text-align:center;color:var(--os-ink);
}
.os-icon:hover{background:rgba(127,127,127,.14)}
.os-icon.is-sel{background:var(--os-sel);border-color:var(--os-line)}
.os-icon .glyph{
  width:52px;height:52px;display:grid;place-items:center;
  background:var(--os-cream);border:2px solid var(--os-line);
  border-radius:var(--os-radius);
  box-shadow:var(--os-shadow-sm);
}
.os-icon .glyph svg{width:32px;height:32px;display:block}
.os-icon .lbl{
  font-family:var(--os-font);font-weight:600;font-size:12.5px;line-height:1.15;
  max-width:100%;text-shadow:0 1px 2px rgba(255,255,255,.35);
}

/* ==========================================================================
   Windows
   ========================================================================== */
.os-window{
  position:absolute;
  min-width:260px;min-height:150px;
  display:flex;flex-direction:column;
  background:var(--os-cream);
  border:var(--os-border);
  box-shadow:var(--os-shadow-lg);
  border-radius:var(--os-radius);
  overflow:hidden;
  cursor:var(--os-cursor),auto;
}
.os-window.is-max{
  box-shadow:none;
}
.os-titlebar{
  height:var(--os-titlebar-h);flex:0 0 auto;
  display:flex;align-items:center;gap:8px;
  padding:0 6px 0 10px;
  background:var(--os-titlebar-bg);
  color:var(--os-on-accent);
  border-bottom:2px solid var(--os-line);
  box-shadow:var(--os-titlebar-inset);
  touch-action:none;
  cursor:grab;
}
.os-window.is-max .os-titlebar{cursor:default}
.os-titlebar:active{cursor:grabbing}
.os-window.is-max .os-titlebar:active{cursor:default}
.os-titlebar .tb-glyph{width:20px;height:20px;flex:0 0 auto;display:grid;place-items:center}
.os-titlebar .tb-glyph svg{width:18px;height:18px}
.os-titlebar .tb-title{
  flex:1 1 auto;min-width:0;
  font-family:var(--os-font);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:var(--os-titlebar-text-shadow);
}
.os-ctrls{display:flex;gap:5px;flex:0 0 auto}
.os-ctrl{
  width:24px;height:24px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--os-cream);color:var(--os-ink);
  border:2px solid var(--os-line);
  border-radius:var(--os-radius);
  font-family:var(--os-font);font-weight:700;font-size:13px;line-height:1;
  cursor:pointer;
}
.os-ctrl svg{width:12px;height:12px;display:block}
.os-ctrl:hover{filter:brightness(1.08)}
.os-ctrl.is-close:hover{background:var(--os-close);color:#fff}
.os-ctrl.is-close:hover svg{stroke:#fff}
.os-body{
  flex:1 1 auto;overflow:auto;touch-action:pan-y;
  background:var(--os-cream);
  padding:0;
  cursor:auto;user-select:text;-webkit-user-select:text;
}

/* scrollbars inside windows keep the retro feel */
.os-body{scrollbar-width:thin;scrollbar-color:var(--os-accent) var(--os-paper-2)}
.os-body::-webkit-scrollbar{width:12px;height:12px}
.os-body::-webkit-scrollbar-thumb{background:var(--os-accent);border:2px solid var(--os-line)}
.os-body::-webkit-scrollbar-track{background:var(--os-paper-2)}

/* ---- shared window-body content helpers -------------------------------- */
.app-pad{padding:20px 22px 24px}
.app-h{font-family:var(--os-font);font-weight:700;font-size:22px;margin-bottom:6px;line-height:1.1}
.app-lede{font-family:var(--os-font-body);font-weight:600;color:var(--os-muted);max-width:48ch;line-height:1.5}
.app-p{font-family:var(--os-font-body);font-size:14.5px;line-height:1.6;margin-top:12px;max-width:52ch}
.app-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.os-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--os-font);font-weight:600;font-size:14px;
  padding:9px 16px;cursor:pointer;
  border:2px solid var(--os-line);
  border-radius:var(--os-radius);
  background:var(--os-btn-bg);color:var(--os-ink);
  box-shadow:var(--os-shadow-sm);
  transition:transform .08s ease,box-shadow .08s ease,filter .08s ease;
}
.os-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--os-shadow);filter:brightness(1.03)}
.os-btn:active{transform:translate(2px,2px);box-shadow:var(--os-shadow-xs)}
.os-btn.is-primary{background:var(--os-accent);color:var(--os-on-accent);border-color:var(--os-line)}
.about-shot{
  border:2px solid var(--os-line);box-shadow:var(--os-shadow-sm);
  border-radius:var(--os-radius);
  margin:16px 0 4px;background:var(--os-paper-2);width:100%;height:auto;
}
.app-tag{
  display:inline-block;font-family:var(--os-font-tag);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--os-accent-deep);
  border:2px solid var(--os-accent-deep);padding:3px 9px;margin-bottom:12px;
  border-radius:var(--os-radius);
}

/* ==========================================================================
   Customize (Display Properties) - theme swatch tiles
   ========================================================================== */
.cz-wrap{padding:18px 20px 22px}
.cz-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;
}
.theme-tile{
  display:block;text-align:left;cursor:pointer;
  padding:6px;background:var(--os-paper);
  border:2px solid transparent;border-radius:var(--os-radius);
  transition:border-color .1s ease,box-shadow .1s ease,transform .1s ease;
}
.theme-tile:hover{border-color:var(--os-line);transform:translateY(-1px)}
.theme-tile.is-active{border-color:var(--os-accent);box-shadow:var(--os-shadow-xs)}
/* the mini preview renders off the tile's OWN theme vars (data-os-theme) */
.tile-screen{
  height:92px;overflow:hidden;
  border:2px solid var(--os-line);border-radius:var(--os-radius);
  background-color:var(--os-bg);
  background-image:var(--os-wallpaper);
  background-size:var(--os-wallpaper-size);
  padding:9px;
}
.tile-win{
  height:100%;display:flex;flex-direction:column;overflow:hidden;
  background:var(--os-cream);
  border:2px solid var(--os-line);border-radius:var(--os-radius);
  box-shadow:var(--os-shadow-xs);
}
.tile-bar{
  height:15px;flex:0 0 auto;display:flex;align-items:center;gap:3px;padding:0 5px;
  background:var(--os-titlebar-bg);box-shadow:var(--os-titlebar-inset);
}
.tile-bar i{width:5px;height:5px;border-radius:50%;background:var(--os-on-accent);opacity:.9}
.tile-body{flex:1 1 auto;padding:7px 8px}
.tile-body b{display:block;font-family:var(--os-font);font-size:12px;color:var(--os-ink)}
.tile-body span{display:block;height:4px;margin-top:5px;width:72%;background:var(--os-accent);border-radius:2px}
.tile-body span+span{width:46%;background:var(--os-line);opacity:.45}
/* label + active marker use the OUTER (current) theme, so always readable */
.tile-label{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:8px;font-family:var(--os-font);font-weight:700;font-size:13px;color:var(--os-ink);
}
.tile-mark{
  display:none;font-family:var(--os-font-tag);font-weight:700;font-size:9px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--os-accent);
}
.theme-tile.is-active .tile-mark{display:inline}

/* ==========================================================================
   Taskbar + start menu
   ========================================================================== */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:var(--os-taskbar-h);z-index:8000;
  display:flex;align-items:center;gap:8px;padding:0 8px;
  background:var(--os-cream);
  border-top:2px solid var(--os-line);
  box-shadow:0 -3px 0 rgba(0,0,0,.10);
}
#startBtn{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  height:38px;padding:0 15px 0 12px;
  font-family:var(--os-font);font-weight:700;font-size:15px;
  background:var(--os-accent);color:var(--os-on-accent);
  border:2px solid var(--os-line);box-shadow:var(--os-shadow-xs);
  border-radius:var(--os-radius);
  cursor:pointer;
}
#startBtn:hover{background:var(--os-accent-deep)}
#startBtn.is-open{background:var(--os-accent-deep);box-shadow:inset 2px 2px 0 rgba(0,0,0,.3)}
#startBtn .sb-blob{
  width:20px;height:20px;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  background:var(--os-cream);border:2px solid var(--os-line);flex:0 0 auto;
}
#taskbar .tb-windows{
  flex:1 1 auto;display:flex;align-items:center;gap:6px;overflow:hidden;height:100%;
}
.tb-win{
  display:inline-flex;align-items:center;gap:7px;
  max-width:190px;height:36px;padding:0 12px;
  font-family:var(--os-font);font-weight:600;font-size:13px;
  background:var(--os-paper);color:var(--os-ink);
  border:2px solid var(--os-line);
  border-radius:var(--os-radius);
  cursor:pointer;white-space:nowrap;overflow:hidden;
}
.tb-win .tw-glyph{width:16px;height:16px;flex:0 0 auto}
.tb-win .tw-glyph svg{width:16px;height:16px;display:block}
.tb-win .tw-label{overflow:hidden;text-overflow:ellipsis}
.tb-win:hover{background:var(--os-paper-2)}
.tb-win.is-active{background:var(--os-accent);color:var(--os-on-accent);box-shadow:inset 2px 2px 0 rgba(0,0,0,.22)}
.tb-win.is-min{opacity:.72;font-style:italic}

#tray{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding-right:4px}
#tray .tray-swatch{
  width:26px;height:26px;flex:0 0 auto;cursor:pointer;
  background:var(--os-accent);border:2px solid var(--os-line);box-shadow:var(--os-shadow-xs);
  border-radius:var(--os-radius);
}
#tray .tray-swatch:hover{transform:translate(-1px,-1px);filter:brightness(1.05)}
#clock{
  font-family:var(--os-font);font-weight:700;font-size:14px;letter-spacing:.02em;
  min-width:74px;text-align:center;
  padding:6px 10px;background:var(--os-paper);border:2px solid var(--os-line);
  border-radius:var(--os-radius);
}

#start-menu{
  position:fixed;left:8px;bottom:calc(var(--os-taskbar-h) + 6px);z-index:8500;
  width:266px;max-width:calc(100vw - 16px);
  max-height:calc(100vh - var(--os-taskbar-h) - 16px);
  background:var(--os-cream);border:var(--os-border);box-shadow:var(--os-shadow-lg);
  border-radius:var(--os-radius);
  display:none;flex-direction:column;overflow:hidden;
}
#start-menu.is-open{display:flex}
#start-menu .sm-head{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:var(--os-titlebar-bg);color:var(--os-on-accent);border-bottom:2px solid var(--os-line);
  box-shadow:var(--os-titlebar-inset);
}
#start-menu .sm-head .sm-blob{
  width:26px;height:26px;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  background:var(--os-cream);border:2px solid var(--os-line);flex:0 0 auto;
}
#start-menu .sm-head b{font-family:var(--os-font);font-weight:700;font-size:16px}
#start-menu .sm-head span{font-family:var(--os-font-body);font-weight:700;font-size:11px;opacity:.85;display:block}
#start-menu .sm-list{padding:6px}
.sm-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 12px;cursor:pointer;text-align:left;
  border:2px solid transparent;border-radius:var(--os-radius);
  font-family:var(--os-font);font-weight:600;font-size:14.5px;color:var(--os-ink);
  background:transparent;
}
.sm-item .sm-glyph{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center}
.sm-item .sm-glyph svg{width:24px;height:24px}
.sm-item:hover{background:var(--os-accent);color:var(--os-on-accent);border-color:var(--os-line)}
.sm-item:hover .sm-glyph svg [data-fill]{fill:var(--os-on-accent)}
#start-menu .sm-foot{
  border-top:2px solid var(--os-line);padding:10px 14px;
  font-family:var(--os-font-body);font-weight:700;font-size:11px;color:var(--os-muted);
  display:flex;align-items:center;justify-content:space-between;
}

/* ==========================================================================
   Toast (tray theme-cycle feedback)
   ========================================================================== */
.os-toast{
  position:fixed;left:50%;bottom:calc(var(--os-taskbar-h) + 16px);z-index:8700;
  transform:translateX(-50%) translateY(8px);opacity:0;
  transition:opacity .2s ease,transform .2s ease;
  font-family:var(--os-font);font-weight:700;font-size:14px;
  padding:9px 16px;background:var(--os-cream);color:var(--os-ink);
  border:var(--os-border);box-shadow:var(--os-shadow-lg);border-radius:var(--os-radius);
  pointer-events:none;white-space:nowrap;max-width:calc(100vw - 24px);
}
.os-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ==========================================================================
   CRT scanline overlay (only visible when --os-scanline-opacity > 0)
   ========================================================================== */
#crt{
  position:fixed;inset:0;z-index:8900;pointer-events:none;
  opacity:var(--os-scanline-opacity);
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}

/* ==========================================================================
   Crushy pet layer + dial + speech bubble (Phase iii)

   The pet is the OrangeVerse "guest" inside the OS: he stays orange in every
   skin, so this whole block is deliberately theme-INDEPENDENT (its own fixed
   cream/ink comic palette, NOT the --os-* tokens). Cream/ink reads clearly on
   all four skins, including the dark synth void.
   ========================================================================== */
#petLayer{
  position:fixed;inset:0;z-index:5000;pointer-events:none;overflow:hidden;
}
#petLayer canvas{position:absolute;inset:0}
/* static fallback when WebGL2 is unavailable / the renderer throws */
#petLayer .pet-still{
  position:absolute;right:24px;bottom:calc(var(--os-taskbar-h) + 24px);
  width:120px;height:auto;pointer-events:none;
  filter:drop-shadow(4px 5px 0 rgba(0,0,0,.28));
  animation:petStillBob 3.4s ease-in-out infinite;
}
@keyframes petStillBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* comic palette, fixed (theme-independent guest) */
#cyDial,#cyBubble{
  --cy-cream:#fff7ec;--cy-cream-2:#ffe7cf;--cy-ink:#1f1a16;
  --cy-ink-soft:rgba(31,26,22,.9);
  --cy-font:'Baloo 2','Nunito',system-ui,sans-serif;
}

/* ---- Radial dial (the launcher) --------------------------------------- */
#cyDial{
  position:fixed;inset:0;z-index:8800;display:none;pointer-events:auto;
}
#cyDial.is-open{display:block}
#cyDial .cy-ring{position:absolute;left:0;top:0}
.cy-tool{
  position:absolute;left:0;top:0;width:56px;height:56px;display:grid;place-items:center;
  border-radius:50%;background:var(--cy-cream);border:3px solid var(--cy-ink);
  box-shadow:4px 5px 0 var(--cy-ink-soft);
  cursor:pointer;color:var(--cy-ink);opacity:0;
  transform:translate(-50%,-50%) scale(.2);
  transition:transform .34s cubic-bezier(.2,1.5,.4,1),opacity .18s,background .15s;
}
.cy-tool svg{width:27px;height:27px}
.cy-tool:hover{background:var(--cy-cream-2);transform:var(--rest) scale(1.14)!important;z-index:2}
/* hover label (wheel mode) */
.cy-tool-lbl{
  position:absolute;bottom:122%;left:50%;transform:translateX(-50%) translateY(4px);
  white-space:nowrap;background:var(--cy-ink);color:var(--cy-cream);
  font:700 11.5px/1 var(--cy-font);padding:4px 9px;border-radius:8px;
  opacity:0;transition:opacity .14s,transform .14s;pointer-events:none;
}
.cy-tool-lbl::after{content:"";position:absolute;left:50%;bottom:-5px;
  transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--cy-ink)}
.cy-tool:hover .cy-tool-lbl{opacity:1;transform:translateX(-50%) translateY(0)}
.cy-tool-lbl.lbl-below{bottom:auto;top:122%;transform:translateX(-50%) translateY(-4px)}
.cy-tool-lbl.lbl-below::after{bottom:auto;top:-5px}
.cy-tool:hover .cy-tool-lbl.lbl-below{transform:translateX(-50%) translateY(0)}
/* always-on row label (column / edge mode) */
.cy-tool-rlbl{
  position:absolute;top:50%;transform:translateY(-50%);
  white-space:nowrap;max-width:168px;overflow:hidden;text-overflow:ellipsis;
  background:var(--cy-ink);color:var(--cy-cream);font:700 12px/1 var(--cy-font);
  padding:6px 10px;border-radius:9px;box-shadow:3px 4px 0 var(--cy-ink-soft);pointer-events:none;
}
.cy-tool-rlbl.on-left{right:124%}
.cy-tool-rlbl.on-right{left:124%}
.cy-tool-rlbl::after{content:"";position:absolute;top:50%;width:8px;height:8px;
  background:var(--cy-ink);transform:translateY(-50%) rotate(45deg)}
.cy-tool-rlbl.on-left::after{right:-3px}
.cy-tool-rlbl.on-right::after{left:-3px}

/* ---- Speech bubble ---------------------------------------------------- */
#cyBubble{
  position:fixed;z-index:8700;pointer-events:none;display:none;opacity:0;
  transform:translate(-50%,-100%) scale(.92);transform-origin:bottom center;
  transition:opacity .12s ease,transform .12s cubic-bezier(.2,1.3,.4,1);
  width:max-content;max-width:260px;min-width:56px;
  padding:12px 16px;border-radius:20px;
  background:var(--cy-cream);color:var(--cy-ink);border:3px solid var(--cy-ink);
  box-shadow:5px 6px 0 var(--cy-ink-soft);
  font:700 15px/1.45 var(--cy-font);
  white-space:normal;overflow-wrap:break-word;
}
#cyBubble.is-show{opacity:1;transform:translate(-50%,-100%) scale(1)}
#cyBubble::after{content:"";position:absolute;left:28px;bottom:-13px;width:18px;height:18px;
  background:var(--cy-cream);border-right:3px solid var(--cy-ink);border-bottom:3px solid var(--cy-ink);
  transform:rotate(45deg);border-bottom-right-radius:4px}
#cyBubble .cy-caret{opacity:.5}

/* ==========================================================================
   Crushy Messenger (Phase iv) - MSN / Windows Live Messenger inside the window

   The window chrome (titlebar) stays themed via --os-*, but the message area
   uses its OWN fixed light MSN skin so it reads clearly on every OS skin,
   including the dark synth void. Crushy stays orange (the guest), user bubbles
   are the brand orange gradient, Crushy bubbles are a soft MSN panel.
   ========================================================================== */
.msn{
  --msn-ink:#1e2f3e;
  --msn-sub:#5f7690;
  --msn-line:#c6d7e8;
  --msn-crushy:#eef4fb;          /* Crushy bubble fill */
  --msn-area:linear-gradient(180deg,#f6faff 0%,#e9f1fa 100%);
  --msn-head:linear-gradient(180deg,#ffffff 0%,#e8f1fb 100%);
  --msn-accent:#e8692d;
  --msn-accent-deep:#d65a23;
  --msn-avatar-grad:radial-gradient(circle at 34% 30%,#ffd39a 0%,#f6913f 34%,#e8692d 66%,#c9531f 100%);

  height:100%;display:flex;flex-direction:column;overflow:hidden;
  background:var(--msn-area);color:var(--msn-ink);
  font-family:'Nunito',system-ui,sans-serif;
  cursor:auto;
}

/* --- contact header --- */
.msn-head{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:9px 12px;background:var(--msn-head);
  border-bottom:1px solid var(--msn-line);
}
.msn-avatar{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  background:var(--msn-avatar-grad);
  border:2px solid #fff;
  box-shadow:0 1px 3px rgba(20,60,110,.35),inset 0 -2px 4px rgba(150,50,0,.35);
}
.msn-avatar.sm{width:26px;height:26px;align-self:flex-end;border-width:1.5px}
.msn-who{display:flex;flex-direction:column;line-height:1.15;flex:1 1 auto;min-width:0}
.msn-who b{font-family:'Fredoka',system-ui,sans-serif;font-weight:700;font-size:15px;color:var(--msn-ink)}
.msn-status{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--msn-sub)}
.msn-dot{width:8px;height:8px;border-radius:50%;background:#3fb950;box-shadow:0 0 0 3px rgba(63,185,80,.22)}
.msn-nudge{
  flex:0 0 auto;font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:12px;
  color:var(--msn-accent-deep);background:#fff;border:1.5px solid var(--msn-line);
  padding:5px 11px;border-radius:999px;cursor:pointer;transition:background .1s,transform .06s;
}
.msn-nudge:hover{background:#fff4ec;border-color:var(--msn-accent)}
.msn-nudge:active{transform:translateY(1px)}

/* --- message list --- */
.msn-list{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  padding:14px 14px 10px;display:flex;flex-direction:column;gap:9px;
  scrollbar-width:thin;scrollbar-color:#b7cbe0 transparent;
}
.msn-list::-webkit-scrollbar{width:9px}
.msn-list::-webkit-scrollbar-thumb{background:#b7cbe0;border-radius:5px}
.msn-list::-webkit-scrollbar-track{background:transparent}

.msn-row{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.msn-row.is-user{justify-content:flex-end}
.msn-row.is-crushy{justify-content:flex-start}
.msn-row.is-system{justify-content:center}

.msn-bubble{
  position:relative;max-width:80%;
  padding:9px 13px;font-size:14px;line-height:1.45;font-weight:600;
  border-radius:16px;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;
  animation:msnPop .18s cubic-bezier(.2,1.3,.4,1);
}
@keyframes msnPop{from{opacity:0;transform:translateY(5px) scale(.97)}to{opacity:1;transform:none}}
.msn-bubble.is-user{
  background:linear-gradient(180deg,#f6913f 0%,#e8692d 100%);
  color:#fff;border-bottom-right-radius:5px;
  box-shadow:0 1px 3px rgba(200,80,20,.4);
}
.msn-bubble.is-crushy{
  background:var(--msn-crushy);color:var(--msn-ink);
  border:1px solid var(--msn-line);border-bottom-left-radius:5px;
  box-shadow:0 1px 2px rgba(30,60,100,.12);
}
.msn-sys{
  font-size:11.5px;font-weight:700;color:var(--msn-sub);
  background:rgba(255,255,255,.6);border:1px solid var(--msn-line);
  padding:3px 11px;border-radius:999px;
}

/* typing indicator (3 bouncing dots) */
.msn-typing{display:inline-flex;gap:4px;align-items:center;padding:2px 2px}
.msn-typing i{width:7px;height:7px;border-radius:50%;background:var(--msn-sub);opacity:.55;
  animation:msnBlink 1.1s infinite ease-in-out}
.msn-typing i:nth-child(2){animation-delay:.16s}
.msn-typing i:nth-child(3){animation-delay:.32s}
@keyframes msnBlink{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:.95}}

/* --- footer: composer or capacity card --- */
.msn-foot{flex:0 0 auto;border-top:1px solid var(--msn-line);background:var(--msn-head)}
.msn-composer{display:flex;align-items:center;gap:8px;padding:10px 12px}
.msn-emo{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:#fff;border:1.5px solid var(--msn-line);color:#e0a13a;font-size:18px;line-height:1;
  cursor:pointer;transition:background .1s}
.msn-emo:hover{background:#fff7ea;border-color:var(--msn-accent)}
.msn-input{
  flex:1 1 auto;min-width:0;height:38px;padding:0 15px;
  font-family:'Nunito',system-ui,sans-serif;font-size:14px;font-weight:600;color:var(--msn-ink);
  background:#fff;border:1.5px solid var(--msn-line);border-radius:999px;outline:none;
  cursor:text;
}
.msn-input::placeholder{color:#9fb3c8;font-weight:600}
.msn-input:focus{border-color:var(--msn-accent);box-shadow:0 0 0 3px rgba(232,105,45,.16)}
.msn-input:disabled{background:#f1f5fa;color:var(--msn-sub)}
.msn-send{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,#f6913f,#e8692d);
  border:none;box-shadow:0 2px 5px rgba(200,80,20,.42);
  transition:transform .07s,filter .1s,background .12s;
}
.msn-send:hover{filter:brightness(1.05)}
.msn-send:active{transform:scale(.94)}
.msn-send .ic-stop{display:none}
.msn-foot.is-generating .msn-send{background:linear-gradient(180deg,#8aa0b6,#5f7690);box-shadow:0 2px 5px rgba(60,90,120,.4)}
.msn-foot.is-generating .msn-send .ic-send{display:none}
.msn-foot.is-generating .msn-send .ic-stop{display:block}

/* --- at-capacity ("napping Crushy") card --- */
.msn-cap{
  position:relative;padding:16px 18px 18px;text-align:center;
  background:linear-gradient(180deg,#fff8f0 0%,#ffeede 100%);
}
.msn-cap-zzz{
  font-family:'Fredoka',system-ui,sans-serif;font-weight:700;color:var(--msn-accent);
  font-size:15px;line-height:1;margin-bottom:2px;height:20px;
}
.msn-cap-zzz span{font-size:19px;opacity:.85;margin-left:2px}
.msn-cap-zzz span:last-child{font-size:23px;opacity:.7}
.msn-cap-h{font-family:'Fredoka',system-ui,sans-serif;font-weight:700;font-size:16px;color:#7a3c14;margin-bottom:6px}
.msn-cap-p{font-size:13px;font-weight:600;line-height:1.5;color:#8a5a34;max-width:34ch;margin:0 auto 12px}
.msn-cap-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.msn-cap-btn{
  font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:13.5px;cursor:pointer;
  padding:8px 18px;border-radius:999px;color:#fff;
  background:linear-gradient(180deg,#f6913f,#e8692d);border:none;box-shadow:0 2px 5px rgba(200,80,20,.4);
  transition:transform .07s,filter .1s}
.msn-cap-btn:hover{filter:brightness(1.05)}
.msn-cap-btn:active{transform:translateY(1px)}
.msn-cap-wake{
  font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:13.5px;cursor:pointer;
  padding:8px 16px;border-radius:999px;color:var(--msn-accent-deep);
  background:#fff;border:1.5px solid #f0c19a;transition:background .1s}
.msn-cap-wake:hover{background:#fff3e8}
.msn-cap-note{display:block;margin-top:10px;font-size:11px;font-weight:700;color:#b98a5f;font-style:italic}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  #petLayer .pet-still{animation:none}
}

/* --- MSN nudge: shake the whole window --- */
.os-window.msn-nudged{animation:msnNudge .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes msnNudge{
  10%,90%{transform:translate(-2px,1px)}
  20%,80%{transform:translate(4px,-2px)}
  30%,50%,70%{transform:translate(-7px,3px)}
  40%,60%{transform:translate(7px,-3px)}
}

/* ==========================================================================
   Screen Peek (Phase v) - a STATIC, explicitly-disclaimed mock of the desktop
   app's screen-awareness. This web page never reads your screen; the framed
   picture below is scripted. Themed entirely via --os-* so it restyles per skin.
   ========================================================================== */
.peek-wrap{padding:18px 20px 22px}
.peek-frame{
  margin:14px 0 16px;
  border:2px solid var(--os-line);border-radius:var(--os-radius);
  box-shadow:var(--os-shadow-sm);background:var(--os-paper-2);overflow:hidden;
}
.peek-topbar{
  display:flex;align-items:center;gap:6px;padding:7px 10px;
  background:var(--os-titlebar-bg);box-shadow:var(--os-titlebar-inset);
  border-bottom:2px solid var(--os-line);
}
.peek-topbar i{width:9px;height:9px;border-radius:50%;background:var(--os-on-accent);opacity:.9}
.peek-screen{
  position:relative;min-height:150px;padding:14px;
  display:flex;flex-direction:column;gap:12px;
  background:
    radial-gradient(closest-side at 82% 22%, rgba(232,105,45,.10), transparent 70%),
    var(--os-paper);
}
.peek-note{
  align-self:flex-start;max-width:80%;
  background:var(--os-cream);border:2px solid var(--os-line);
  box-shadow:var(--os-shadow-xs);border-radius:var(--os-radius);
  padding:9px 12px;
}
.peek-note b{
  display:block;font-family:var(--os-font-tag);font-weight:700;font-size:10px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--os-accent-deep);margin-bottom:3px;
}
.peek-note span{font-family:var(--os-font-body);font-weight:700;font-size:14px;color:var(--os-ink)}
.peek-todo{
  list-style:none;display:flex;flex-direction:column;gap:6px;
  background:var(--os-cream);border:2px solid var(--os-line);
  box-shadow:var(--os-shadow-xs);border-radius:var(--os-radius);
  padding:10px 12px;max-width:88%;
}
.peek-todo li{
  position:relative;padding-left:24px;
  font-family:var(--os-font-body);font-weight:700;font-size:13.5px;color:var(--os-ink);
}
.peek-todo li::before{
  content:"";position:absolute;left:0;top:1px;width:15px;height:15px;
  border:2px solid var(--os-line);border-radius:3px;background:var(--os-cream);
}
.peek-todo li.done{color:var(--os-muted);text-decoration:line-through}
.peek-todo li.done::before{background:var(--os-accent);border-color:var(--os-line)}
.peek-todo li.done::after{
  content:"";position:absolute;left:4px;top:4px;width:7px;height:4px;
  border-left:2px solid var(--os-on-accent);border-bottom:2px solid var(--os-on-accent);
  transform:rotate(-45deg);
}
.peek-blob{
  position:absolute;right:12px;bottom:10px;width:46px;height:46px;
  border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  background:#e8692d;border:2px solid var(--os-line);box-shadow:var(--os-shadow-xs);
}
.peek-blob::before,.peek-blob::after{
  content:"";position:absolute;top:17px;width:6px;height:9px;border-radius:50%;background:#1f1a16;
}
.peek-blob::before{left:13px}.peek-blob::after{right:13px}
.peek-disc{
  color:var(--os-ink);font-weight:700;
  border-left:3px solid var(--os-accent);padding-left:12px;margin-top:2px;
}

/* ==========================================================================
   Bottom dock (Phase v, mobile) - replaces the taskbar on phones.
   ========================================================================== */
#dock{display:none}
.dock-btn{
  flex:1 1 0;max-width:78px;height:48px;min-height:48px;
  display:grid;place-items:center;
  background:transparent;color:var(--os-ink);
  border:2px solid transparent;border-radius:var(--os-radius);
  cursor:pointer;touch-action:manipulation;
}
.dock-btn .dock-glyph{width:30px;height:30px;display:grid;place-items:center}
.dock-btn .dock-glyph svg{width:26px;height:26px}
.dock-btn.is-open:not(.is-active){border-color:var(--os-line)}
.dock-btn.is-active{background:var(--os-accent);color:var(--os-on-accent);box-shadow:var(--os-shadow-xs)}
.dock-btn.is-active .dock-glyph svg [data-fill]{fill:var(--os-on-accent)}

/* ==========================================================================
   Mobile mode (Phase v) - stamped as [data-os="mobile"] on <html>.
   Windows become full-bleed sheets; only the focused one is visible (the rest
   are display:none with their state kept in the DOM). No floating, no drag.
   ========================================================================== */
[data-os="mobile"]{
  --status-h:env(safe-area-inset-top, 0px);
  --dock-h:calc(58px + env(safe-area-inset-bottom));
}
[data-os="mobile"] body{touch-action:manipulation;height:100dvh}
[data-os="mobile"] #desktop{inset:0;height:100dvh}
[data-os="mobile"] #taskbar{display:none}
[data-os="mobile"] #start-menu{display:none !important}
[data-os="mobile"] #icons{display:none}
[data-os="mobile"] #dock{
  position:fixed;left:0;right:0;bottom:0;z-index:8000;
  height:var(--dock-h);padding:0 8px env(safe-area-inset-bottom);
  display:flex;align-items:center;justify-content:space-around;gap:6px;
  background:var(--os-cream);border-top:2px solid var(--os-line);
  box-shadow:0 -3px 0 rgba(0,0,0,.10);
}
/* while the soft keyboard is up the dock would hide behind it - drop it. */
[data-os="mobile"].kb-open #dock{transform:translateY(120%)}

/* a window becomes a full-bleed sheet pinned between the status inset + dock. */
[data-os="mobile"] .os-window{
  position:fixed !important;
  inset:var(--status-h) 0 var(--dock-h) 0 !important;
  width:auto !important;height:auto !important;
  min-width:0 !important;min-height:0 !important;
  border-left:none;border-right:none;border-radius:0 !important;
  box-shadow:none !important;
}
/* lift the focused sheet above the keyboard; the composer rides its bottom. */
[data-os="mobile"].kb-open .os-window{bottom:var(--kb, 0px) !important}
[data-os="mobile"] .os-window.is-max{inset:var(--status-h) 0 var(--dock-h) 0 !important}
[data-os="mobile"] .os-titlebar{height:48px;cursor:default}
[data-os="mobile"] .os-titlebar:active{cursor:default}
[data-os="mobile"] .os-titlebar .is-min,
[data-os="mobile"] .os-titlebar .is-max{display:none}
[data-os="mobile"] .os-ctrl{width:40px;height:40px}
[data-os="mobile"] .os-ctrl svg{width:15px;height:15px}
/* pet still-fallback clears the dock instead of the (hidden) taskbar. */
[data-os="mobile"] #petLayer .pet-still{bottom:calc(var(--dock-h) + 18px)}
/* when a sheet is foreground the pet layer hides so the blob never floats over
   an app; the IntersectionObserver then pauses the RAF loop automatically. */
[data-os="mobile"].sheet-open #petLayer{display:none}

/* Landscape phone: the pet is parked/paused (JS), dock stays icon-only. */
@media (max-height:480px) and (pointer:coarse){
  [data-os="mobile"] #dock{height:calc(46px + env(safe-area-inset-bottom))}
  [data-os="mobile"] .dock-btn{height:40px;min-height:40px}
}

/* Touch devices: neutralise sticky :hover transforms (they latch after a tap). */
@media (hover:none){
  .os-btn:hover{transform:none;box-shadow:var(--os-shadow-sm);filter:none}
  .os-btn:active{transform:translate(1px,1px);box-shadow:var(--os-shadow-xs)}
  .sm-item:hover{background:transparent;color:var(--os-ink);border-color:transparent}
  .theme-tile:hover{transform:none;border-color:transparent}
  .os-icon:hover{background:transparent}
  .tb-win:hover{background:var(--os-paper)}
  .cy-tool:hover{transform:var(--rest) !important;background:var(--cy-cream)}
}