/* ==========================================================================
   base.css - reset, Windows 8 type ramp, Metro accent palette, shared atoms
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li,
figure, section, header, footer, nav, input, button, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* Almost every panel in here sets an explicit `display`, which would otherwise
   beat the UA stylesheet's `[hidden] { display: none }` and leave the charms,
   flyouts and switcher painted over every screen. */
[hidden] { display: none !important; }

ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { background: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, button, select { font-family: inherit; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
  background: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* Windows 8 never showed focus rings on pointer input, but keyboard users need
   them. :focus-visible gives us both behaviours for free. */
:focus { outline: none; }
:focus-visible {
  outline: 2px dotted rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

/* --- typography ----------------------------------------------------------- */
/* Segoe UI ships with Windows, so on the target platform this is the real
   thing. The fallbacks keep the metrics close on macOS/Linux. */
:root {
  --font: 'Segoe UI', 'Segoe UI Web (West European)', 'Selawik',
          -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma,
          'DejaVu Sans', sans-serif;
  --font-light: 'Segoe UI Light', 'Segoe UI', var(--font);
  --font-semilight: 'Segoe UI Semilight', 'Segoe UI', var(--font);

  /* Windows 8 type ramp */
  --type-header: 42px;
  --type-subheader: 20px;
  --type-title: 15px;
  --type-body: 15px;
  --type-caption: 12px;
}

.t-header {
  font-family: var(--font-light);
  font-weight: 200;
  font-size: var(--type-header);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.t-subheader {
  font-family: var(--font-light);
  font-weight: 300;
  font-size: var(--type-subheader);
  line-height: 1.25;
}

.t-title { font-size: var(--type-title); font-weight: 600; }
.t-body  { font-size: var(--type-body);  font-weight: 400; }
.t-caption {
  font-size: var(--type-caption);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}

/* --- Metro accent palette -------------------------------------------------
   These are the twenty official Windows 8 theme colours, verbatim. Tiles and
   accents reference them by name via `--c-<name>`.
   -------------------------------------------------------------------------- */
:root {
  --c-lime:     #a4c400;
  --c-green:    #60a917;
  --c-emerald:  #008a00;
  --c-teal:     #00aba9;
  --c-cyan:     #1ba1e2;
  --c-cobalt:   #0050ef;
  --c-indigo:   #6a00ff;
  --c-violet:   #aa00ff;
  --c-pink:     #f472d0;
  --c-magenta:  #d80073;
  --c-crimson:  #a20025;
  --c-red:      #e51400;
  --c-orange:   #fa6800;
  --c-amber:    #f0a30a;
  --c-yellow:   #e3c800;
  --c-brown:    #825a2c;
  --c-olive:    #6d8764;
  --c-steel:    #647687;
  --c-mauve:    #76608a;
  --c-sienna:   #7a3b3f;

  /* Live accent - swapped at runtime by PC Settings > Personalize. */
  --accent: #00aba9;
  --accent-dark: #007a78;
  --accent-light: #2fc4c2;

  /* Start screen background - Windows 8 derived this from the accent as a
     heavily darkened, desaturated variant. */
  --start-bg: #1a3d47;
  --start-bg-deep: #122d35;

  /* Chrome surfaces */
  --chrome-black: #1d1d1d;
  --charms-bg: rgba(24, 24, 24, 0.97);
  --appbar-bg: #1f1f1f;

  /* Motion - Windows 8's signature easing was a strong ease-out. */
  --ease-out: cubic-bezier(0.1, 0.9, 0.2, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-std: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 167ms;
  --dur-med: 250ms;
  --dur-slow: 400ms;
}

/* Tile colour utility - `data-color="teal"` paints the tile. */
[data-color='lime']    { --tile-color: var(--c-lime); }
[data-color='green']   { --tile-color: var(--c-green); }
[data-color='emerald'] { --tile-color: var(--c-emerald); }
[data-color='teal']    { --tile-color: var(--c-teal); }
[data-color='cyan']    { --tile-color: var(--c-cyan); }
[data-color='cobalt']  { --tile-color: var(--c-cobalt); }
[data-color='indigo']  { --tile-color: var(--c-indigo); }
[data-color='violet']  { --tile-color: var(--c-violet); }
[data-color='pink']    { --tile-color: var(--c-pink); }
[data-color='magenta'] { --tile-color: var(--c-magenta); }
[data-color='crimson'] { --tile-color: var(--c-crimson); }
[data-color='red']     { --tile-color: var(--c-red); }
[data-color='orange']  { --tile-color: var(--c-orange); }
[data-color='amber']   { --tile-color: var(--c-amber); }
[data-color='yellow']  { --tile-color: var(--c-yellow); }
[data-color='brown']   { --tile-color: var(--c-brown); }
[data-color='olive']   { --tile-color: var(--c-olive); }
[data-color='steel']   { --tile-color: var(--c-steel); }
[data-color='mauve']   { --tile-color: var(--c-mauve); }
[data-color='sienna']  { --tile-color: var(--c-sienna); }
[data-color='accent']  { --tile-color: var(--accent); }

/* --- screen stack --------------------------------------------------------- */
#shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.screen[hidden] { display: none; }

/* --- shared atoms --------------------------------------------------------- */

/* The circular chevron used for "back" throughout Windows 8 apps. */
.back-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.55);
  transition: border-color var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std),
              background-color var(--dur-fast) var(--ease-std);
  flex: none;
}
.back-button:hover { border-color: #fff; color: #fff; }
.back-button:active { background: #fff; color: var(--accent); border-color: #fff; }
.back-button svg { width: 18px; height: 18px; }

/* Metro scrollbar - thin, square, appears against dark chrome. */
.metro-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}
.metro-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.metro-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.28); }
.metro-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.42); }
.metro-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.62); }
.metro-scroll::-webkit-scrollbar-corner { background: transparent; }

/* --------------------------------------------------------------------------
   CONTEXT MENU
   The desktop-side menu: square, hairline border, no rounding - Windows 8
   flattened this along with everything else.
   -------------------------------------------------------------------------- */
.ctx-menu {
  position: fixed;
  z-index: 450;
  min-width: 196px;
  padding: 2px;
  background: #f2f2f2;
  border: 1px solid #a0a0a0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.32);
  animation: fade-in 90ms linear both;
}

.ctx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 6px 12px 6px 26px;
  text-align: left;
  font-size: 12px;
  color: #1a1a1a;
  position: relative;
}
.ctx-item:hover:not(.is-disabled) { background: #cce8ff; }
.ctx-item.is-disabled { color: #9a9a9a; pointer-events: none; }
.ctx-item.is-checked::before {
  content: '✓';
  position: absolute;
  left: 9px;
  font-size: 11px;
}
.ctx-arrow { color: #6a6a6a; font-size: 14px; line-height: 1; }

.ctx-sep {
  height: 1px;
  margin: 3px 8px 3px 26px;
  background: #d4d4d4;
}

/* Full-screen wash used by Sleep / Shut down / Restart. */
.power-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #000;
  display: grid;
  place-items: center;
  animation: fade-in 500ms var(--ease-std) both;
}
.power-overlay-text {
  font-family: var(--font-light);
  font-weight: 200;
  font-size: 34px;
  color: rgba(255, 255, 255, 0.9);
}
.power-overlay.is-off { background: #000; }

/* -- asleep ---------------------------------------------------------------- */

/* A sleeping machine isn't off, it's idling - hence the slow pulse, which is
   the one bit of motion on an otherwise dead screen. */
.power-overlay.is-asleep .power-overlay-text {
  font-size: 62px;
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.6);
  animation: sleep-pulse 4.5s var(--ease-std) infinite;
}

@keyframes sleep-pulse {
  0%, 100% { opacity: 0.34; }
  50%      { opacity: 1; }
}

.power-hint {
  position: absolute;
  bottom: 13%;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.38);
  animation: fade-in 800ms 1000ms var(--ease-std) both;
}

/* The fade-in above fills its final opacity, which would outrank a plain
   transition - so the animation has to be dropped, not overridden. */
.power-overlay.is-waking {
  animation: none;
  opacity: 0;
  transition: opacity 260ms var(--ease-std);
}

@media (prefers-reduced-motion: reduce) {
  .power-overlay.is-asleep .power-overlay-text { animation: none; opacity: 0.6; }
}

.power-on {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.4);
  transition: color var(--dur-med) var(--ease-std),
              border-color var(--dur-med) var(--ease-std);
  animation: fade-in 900ms 600ms var(--ease-std) both;
}
.power-on:hover { color: #fff; border-color: #fff; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Respect users who ask for less motion: keep state changes, drop the travel.
   The `.reduce-motion` class is the same switch, exposed through
   PC Settings ▸ Ease of Access. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

/* Between the first paint and js/ taking over, a booting machine shows black
   and nothing else. Set by the inline guard in index.html, cleared by boot.js
   once the power-up screen is actually up. */
html[data-booting] body { background: #000; }
html[data-booting] .screen { display: none; }