/* ---------------------------------------------------------------------
   SHELL CSS — the desktop/window system only (drag, focus, minimize,
   taskbar, Start menu) and the container that holds the Wiggle iframe.
   Nothing about the Wiggle app's own internals lives here — see
   wiggle.css, which only wiggle.html loads.
   --------------------------------------------------------------------- */

:root{
  /* Single source of truth for the accent color — everything below derives
     from these three numbers, so changing the accent means editing this
     block only. Hue/lightness are fixed; saturation is what shifts between
     the Start button's "closed" (--accent-s) and "open" (-20%) states. */
  --accent-h: 30;
  --accent-s: 80%;
  --accent-l: 50%;
  --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-open: hsl(var(--accent-h), calc(var(--accent-s) - 20%), var(--accent-l));
  --accent-faded: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.35); /* same orange, low opacity — for the window titlebar */
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  height:100%; /* fallback for browsers without dvh support */
  height:100dvh; /* the real fix — 100% (and 100vh) get measured against the browser's full layout viewport on mobile Safari, which is taller than what's actually visible whenever the address bar is showing; dvh tracks the real visible area, which is what was leaving a blank gap below the taskbar and pushing the taskbar off the true bottom edge */
  overflow:hidden;
} /* the desktop metaphor doesn't scroll the page itself — individual windows scroll internally */

/* Buttons carry their own native chrome (border/background, and a default
   focus outline drawn a couple pixels outside that border) by default,
   which is what produces the "button inside a border" double-outline
   look — most visible right after a click, when the browser's own focus
   ring is showing on top of our custom border. Reset both consistently:
   the custom border is the only border, and focus is shown by thickening
   it (same technique as .window.focused) instead of a separate outline. */
#startButton, #startMenu button, #taskbarApps button, .window-controls button{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:none;
  font:inherit;
  outline:none;
}
#startButton:focus-visible, #startMenu button:focus-visible,
#taskbarApps button:focus-visible, .window-controls button:focus-visible{
  border-width:2px;
}

/* ---------- desktop + window system ---------- */
#desktop{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:url('bg.png') center/cover no-repeat; /* add bg.png alongside this file — covers the whole screen except the taskbar, which paints over it */
}

/* ---------- desktop icons ---------- */
/* Sit below windows automatically: windows get an explicit z-index (10+)
   from bringToFront(), icons get none, so windows always stack above them
   regardless of DOM order. Each icon is individually position:absolute
   (left/top set by index.html's JS) so it can be dragged anywhere within
   this container and snapped to a grid on release. */
#desktopIcons{
  position:absolute;
  top:0;left:0;right:0;
  bottom:52px; /* stays clear of the taskbar — matches its height in shell.css */
}

/* Windows-style marquee selection box — purely decorative (see the
   marquee-select block in index.html's script). Sits above the wallpaper
   and icons but below every real window. */
#selectionBox{
  position:absolute;
  border:1px dashed #3399ff;
  background:rgba(51,153,255,0.2);
  pointer-events:none; /* it only ever gets sized/positioned by script — never intercepts clicks itself */
  z-index:6;
}
#selectionBox.hidden{display:none;}

.desktop-icon{
  position:absolute;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:none;
  border:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  outline:none;
  user-select:none;
  touch-action:none; /* required so dragging on a touchscreen doesn't scroll the page — same reasoning as window titlebars */
  width:84px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:6px;
}
.desktop-icon-box{
  width:48px;
  height:48px;
  border:1px solid;
  background:rgba(255,255,255,0.85); /* same translucent-white exception used for windows, for legibility over bg.png — only shown for the plain placeholder box, apps without an icon yet */
  /* index.html's JS sets background-image inline per app (icon:'thing.png' in
     APPS) — these three just control how that image sits inside the box once
     it's there. Listed after the shorthand above so they don't get reset by
     it; apps with no icon set just keep the plain translucent box. */
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
/* Apps with a real icon image get a transparent box — just the icon itself,
   no white panel/border behind it (that's only needed as a placeholder for
   apps that don't have art yet). index.html's JS adds this class whenever
   app.icon is set. */
.desktop-icon-box.has-icon{
  background-color:transparent;
  border:none;
}
.desktop-icon:focus-visible .desktop-icon-box{border-width:2px;}

.window{
  position:absolute;
  display:flex;
  flex-direction:column;
  width:360px;
  height:320px;
  min-width:220px;
  min-height:160px;
  border:1px solid; /* outline around every window — color inherits from text color */
  background:rgba(255,255,255,0.85); /* the one intentional color in this file — a white translucent panel so window content stays legible over bg.png, per request */
}
.window.focused{border-width:2px;} /* focused window reads as "on top" structurally, not just by z-index */
.window.hidden{display:none;}
/* Per-app sizing (e.g. Wiggle needing more room) is set via the APPS array
   in index.html, not here — one place to configure a window's size. */

/* Every window is resizable from this corner (see the resize-handle
   pointer wiring in index.html's wireWindow()). Dragging still works
   correctly even when the cursor crosses over the app's iframe mid-drag,
   because the handle itself captures the pointer — same technique the
   titlebar drag and desktop-icon drag already use. The diagonal lines are
   drawn with a repeating gradient so no image asset is needed.
   z-index is explicit (not just relying on DOM order) because iframes
   sometimes composite above sibling content regardless of source order —
   without this, the handle could end up invisible/unclickable underneath
   the app's iframe in some browsers. */
.resize-handle{
  position:absolute;
  right:0;
  bottom:0;
  width:16px;
  height:16px;
  z-index:5;
  cursor:nwse-resize;
  background:repeating-linear-gradient(135deg, currentColor 0, currentColor 1.5px, transparent 1.5px, transparent 4.5px);
  opacity:0.65;
  touch-action:none; /* required so dragging on a touchscreen doesn't scroll the page instead */
}
.resize-handle:hover{opacity:1;}

.window-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-bottom:1px solid; /* separates titlebar region from body region */
  cursor:move;
  user-select:none;
  touch-action:none; /* required so dragging the titlebar on a touchscreen doesn't scroll/pinch the page */
  flex:0 0 auto;
  background:var(--accent-faded);
}
.window-controls{display:flex;gap:6px;}
.window-controls button{cursor:pointer;padding:2px 10px;border:1px solid;min-width:28px;}
.win-minimize{background:#fff;}
.win-close{background:#e33;color:#fff;}

.window-body{
  flex:1 1 auto;
  overflow:auto; /* window content can be taller than the window — it scrolls in here instead of resizing the window */
  position:relative;
  min-height:0; /* required in a flex column for the child to actually be allowed to scroll instead of overflowing */
  padding:0; /* every app is a standalone page embedded via iframe (see index.html) — if you add a plain, non-iframe app later, give its window-body its own padding override */
}
.window-body iframe{width:100%;height:100%;border:0;display:block;}

/* ---------- taskbar + start menu ---------- */
#taskbar{
  position:fixed;
  left:0;right:0;bottom:0;
  height:52px; /* still a proper bar, just a bit thinner */
  display:flex;
  align-items:stretch; /* children fill the full height instead of centering with gaps above/below */
  gap:0;
  padding:0; /* no outer padding — Start sits flush at the left edge, the tray flush at the right */
  border-top:2px solid; /* clear separation between the taskbar and the desktop above it */
  background:Canvas; /* solid, opaque — sits ON TOP of bg.png rather than showing it through */
  z-index:10000; /* always above every window */
  /* A rounder, more playful font just for the taskbar — every pre-installed,
     cross-platform option here rather than an @font-face/web font, same
     no-external-dependency approach as the rest of the site. Comic Sans
     deliberately left out of this list — falls through to plain
     sans-serif on systems that have none of these instead. */
    font-family: Arial, Helvetica, sans-serif;
}
#startButton{
  cursor:pointer;
  padding:0 24px;
  border:none;
  border-right:1px solid; /* the one divider between Start and the running-apps area — not doubled up with a border on taskbarApps too */
  font-weight:bold;
  background:var(--accent);
}
/* While the Start menu is open: Start itself drops 20 saturation points
   (visually "pressed in"), and the menu items it reveals pick up the SAME
   full-saturation accent Start normally has. The .start-open class is
   toggled by index.html's JS whenever the menu opens/closes. */
#taskbar.start-open #startButton{background:var(--accent-open);}

#startMenu{
  position:absolute;
  left:0;
  bottom:52px;
  min-width:180px;
  display:flex;
  flex-direction:column;
  border:1px solid;
  border-bottom:none; /* sits flush on top of the taskbar's top border */
}
#startMenu.hidden{display:none;}
#startMenu button{
  display:block;
  width:100%;
  text-align:left;
  cursor:pointer;
  padding:12px 16px;
  border-bottom:1px solid;
}
#startMenu button:last-child{border-bottom:none;}
/* Same piano-key alternation as #taskbarApps below — always black/white
   by position, text opposite the button's own background. */
#startMenu button:nth-child(odd){
  background:#000;
  color:#fff;
}
#startMenu button:nth-child(even){
  background:#fff;
  color:#000;
}

#taskbarApps{
  display:flex;
  gap:8px;
  flex:1 1 auto;
  overflow:auto;
  align-items:center;
  padding:0 10px;
}
#taskbarApps button{
  cursor:pointer;
  white-space:nowrap;
  height:44px;
  padding:0 18px;
  border:1px solid; /* no explicit color — defaults to currentColor, so it automatically matches whichever text color each button gets below */
}
/* Piano-key alternation: always black/white/black/white by position,
   never anything adaptive — whatever ends up 1st is black, 2nd is white,
   3rd is black, and so on, regardless of which apps they are or how many
   are open. Text is the opposite of that button's own background. */
#taskbarApps button:nth-child(odd){
  background:#000;
  color:#fff;
}
#taskbarApps button:nth-child(even){
  background:#fff;
  color:#000;
}

/* Empty for now — reserved space on the opposite side from Start. */
#taskbarTray{
  flex:0 0 auto;
  min-width:120px;
  border-left:1px solid;
  display:flex;
  align-items:center;
  justify-content:center;
}
#clock{
  font-variant-numeric:tabular-nums; /* digits don't shift width as they change, so the clock doesn't jitter side to side every second */
  font-size:18px;
}

/* ---------- mobile ---------- */
/* Below this width: swap in the mobile background, and make every window
   fill the screen instead of floating at its fixed desktop pixel size —
   an 860px Wiggle window (or even the 360px default) badly overflows a
   ~375-430px phone, and free-floating/dragging small boxes around on a
   touchscreen isn't a good interaction anyway. Windows still open/close/
   minimize exactly as before; they just aren't draggable rectangles here.
   The !important pair is intentional: index.html's JS sets left/top/
   width/height as inline styles for desktop placement, which normally
   beat any stylesheet rule regardless of specificity — this is the
   correct, standard way to override that responsively without touching
   the placement JS itself. Pincel is already full-screen at every size
   (see above), so nothing extra is needed for it here. */
@media (max-width: 768px){
  #desktop{
    background-image:url('bg_mob.png'); /* add bg_mob.png alongside this file, same as bg.png */
  }

  .window{
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:calc(100% - 52px) !important; /* 52px matches #taskbar's height above */
    min-width:0;
    min-height:0;
  }

  .window-titlebar{
    cursor:default; /* dragging a fullscreen window doesn't do anything useful here */
  }

  .resize-handle{
    display:none; /* windows are pinned fullscreen above (!important) — nothing to resize */
  }

  /* Icons stay draggable/grid-snapped the same way — the grid and its
     bounds are computed from #desktopIcons' actual size, which already
     adapts to the narrower viewport on its own. */
}