/* ─────────────────────────────────────────────────────────
   Makers Schedule · Windows 95 ♡ Cute Edition
   ───────────────────────────────────────────────────────── */

:root {
  /* Win95 chrome */
  --w95-face: #c0c0c0;
  --w95-face-2: #d4d0c8;
  --w95-light: #ffffff;
  --w95-shadow: #808080;
  --w95-dark: #404040;
  --w95-black: #000000;
  --w95-titlebar-1: #000080;
  --w95-titlebar-2: #1084d0;

  /* Cute kitsch palette */
  --cute-pink: #ffb3d9;
  --cute-hotpink: #ff5b9c;
  --cute-magenta: #d63384;
  --cute-yellow: #fff5a0;
  --cute-lemon: #ffd84d;
  --cute-mint: #b8f5d8;
  --cute-green: #7be07f;
  --cute-sky: #aee0ff;
  --cute-blue: #56b6ff;
  --cute-lavender: #d4b3ff;
  --cute-cream: #fff7e8;
  --cute-paper: #fffaf0;

  /* Desktop */
  --desktop-teal: #1f8a8a;
  --desktop-teal-2: #008b8b;

  /* Status */
  --danger: #ff3357;
  --self-stroke: #ff2980;

  --radius-sm: 0px;   /* 95 ain't round */
  --radius-md: 0px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 22px;
  --space-2xl: 32px;

  --font-pixel: 'Pixelify Sans', 'DotGothic16', 'DungGeunMo', 'Galmuri11', 'Tahoma', sans-serif;
  --font-ui: 'DotGothic16', 'Tahoma', 'Verdana', 'Gulim', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-vt: 'VT323', 'Courier New', monospace;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 100ms;
  --dur-med: 180ms;
}

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

html, body {
  margin: 0;
  min-height: 100%;
}

html {
  background: var(--desktop-teal);
  color-scheme: light;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--w95-black);
  -webkit-font-smoothing: never;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  text-size-adjust: 100%;

  /* Win95 desktop teal + tiny dot pattern + soft pastel sunbeam */
  background:
    radial-gradient(ellipse 70% 60% at 70% -10%, rgba(255, 182, 219, 0.42), transparent 65%),
    radial-gradient(ellipse 60% 60% at -10% 110%, rgba(174, 224, 255, 0.36), transparent 65%),
    radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1.4px) 0 0 / 6px 6px,
    linear-gradient(180deg, #2aa2a2 0%, var(--desktop-teal-2) 100%);
  padding-bottom: 38px; /* leave room for taskbar */
}

button, input { font: inherit; }
button { cursor: pointer; }
h1, h2, p, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
strong { font-weight: 700; color: var(--cute-magenta); }

/* Crisp pixel text everywhere */
* {
  image-rendering: pixelated;
}

/* ─────────────────────────────────────────────────────────
   Window chrome (Win95 panel)
   ───────────────────────────────────────────────────────── */

.panel-window {
  position: relative;
  background: var(--w95-face);
  /* outset 3D border */
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow:
    inset 1px 1px 0 0 var(--w95-face-2),
    inset -1px -1px 0 0 var(--w95-shadow),
    2px 2px 0 0 rgba(0,0,0,0.55);
}

/* The data-label ::before becomes a real Win95 title bar */
.panel-window::before {
  content: attr(data-label);
  display: block;
  margin: 2px;
  padding: 3px 22px 3px 7px;
  background:
    linear-gradient(90deg, var(--cute-hotpink), var(--cute-magenta) 50%, #6a3ab8);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.45);
  line-height: 1.5;
  position: relative;
}

/* Fake _ □ ✕ buttons in the title bar */
.panel-window::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 50px;
  height: 16px;
  background:
    /* close X */
    linear-gradient(45deg, transparent 44%, #000 44% 56%, transparent 56%) 36px 0/14px 14px no-repeat,
    linear-gradient(135deg, transparent 44%, #000 44% 56%, transparent 56%) 36px 0/14px 14px no-repeat,
    /* maximize box */
    linear-gradient(#000, #000) 18px 0/12px 1px no-repeat,
    linear-gradient(#000, #000) 18px 12px/12px 1px no-repeat,
    linear-gradient(#000, #000) 18px 0/1px 13px no-repeat,
    linear-gradient(#000, #000) 30px 0/1px 13px no-repeat,
    /* minimize underscore */
    linear-gradient(#000, #000) 1px 12px/11px 2px no-repeat,
    var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
}

/* ─────────────────────────────────────────────────────────
   Boot screen (Win95 startup)
   ───────────────────────────────────────────────────────── */

#boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #000;
  transition: opacity 0.55s var(--ease-out);
}

#boot.gone {
  opacity: 0;
  pointer-events: none;
}

.boot-screen {
  width: min(540px, calc(100vw - 32px));
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 40px 24px;
  background: #000;
  text-align: center;
}

.boot-flag svg {
  filter: drop-shadow(2px 4px 0 rgba(255,255,255,0.06));
  animation: bootflag 1.6s var(--ease-out) infinite alternate;
}
@keyframes bootflag {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}

.boot-os {
  font-family: var(--font-pixel);
  font-size: 22px;
  letter-spacing: 1px;
  color: #fff;
  margin: 0;
}
.boot-os sup { font-size: 11px; vertical-align: super; }

.boot-title {
  font-family: var(--font-pixel);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #ff5b9c, #ffd84d 40%, #56b6ff 70%, #b388ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 0 transparent;
  margin: 0;
}

.boot-loading {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.boot-loading span {
  width: 10px;
  height: 10px;
  background: #fff;
  animation: bootdot 1s steps(5, end) infinite;
}
.boot-loading span:nth-child(1) { background: #ff5b6e; animation-delay: 0s; }
.boot-loading span:nth-child(2) { background: #ffd84d; animation-delay: 0.12s; }
.boot-loading span:nth-child(3) { background: #7be07f; animation-delay: 0.24s; }
.boot-loading span:nth-child(4) { background: #56b6ff; animation-delay: 0.36s; }
.boot-loading span:nth-child(5) { background: #d4b3ff; animation-delay: 0.48s; }
@keyframes bootdot {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-6px); opacity: 1; }
}

.boot-copy {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: #c0c0c0;
}

/* legacy boot lines kept hidden but JS still toggles them */
.boot-legacy { display: none; }

/* matrix canvas — disable old hacker rain */
#matrix-canvas { display: none; }

/* blinking caret (used in hint and modal title) */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.cursor::after {
  content: '_';
  margin-left: 2px;
  color: var(--cute-hotpink);
  font-weight: 700;
  animation: blink 1s step-end infinite;
}

/* ─────────────────────────────────────────────────────────
   Top window title bar (the whole app)
   ───────────────────────────────────────────────────────── */

.terminal-nav.win-window-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 30px;
  padding: 4px 4px 4px 8px;
  background: linear-gradient(90deg, var(--w95-titlebar-1) 0%, var(--w95-titlebar-2) 70%, #b388ff 100%);
  border-bottom: 2px solid var(--w95-dark);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 0 0 rgba(0,0,0,0.35);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.win-icon { display: inline-flex; }

.nav-logo {
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 18px;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.45);
}

.brand-sub {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255,255,255,0.86);
  font-size: 11px;
  font-weight: 400;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Win95 buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 10px;
  background: var(--w95-face);
  color: var(--w95-black);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: none;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow: inset 1px 1px 0 0 var(--w95-face-2), inset -1px -1px 0 0 var(--w95-shadow);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out);
}

.btn:hover {
  filter: brightness(1.04);
}

.btn:active,
.btn[aria-pressed='true'] {
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
  box-shadow: inset 1px 1px 0 0 var(--w95-shadow), inset -1px -1px 0 0 var(--w95-face-2);
  padding: 4px 9px 2px 11px;
}

.btn:focus-visible {
  outline: 1px dotted var(--w95-black);
  outline-offset: -4px;
}

.btn-primary {
  background: linear-gradient(180deg, #ffe5f1 0%, var(--cute-pink) 50%, var(--cute-hotpink) 100%);
  color: #2a002a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.btn-danger {
  background: linear-gradient(180deg, #ffd6df 0%, #ff8aa3 60%, #ff3357 100%);
  color: #2c0010;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.btn-outline {
  background: linear-gradient(180deg, #fffbe5 0%, var(--cute-yellow) 60%, var(--cute-lemon) 100%);
  color: #382a00;
}

/* Top bar status pills */
.store-chip,
.me-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 8px;
  background: var(--w95-face);
  color: var(--w95-black);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark); /* inset */
  box-shadow: inset 1px 1px 0 0 var(--w95-shadow), inset -1px -1px 0 0 var(--w95-face-2);
}

.me-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--self-stroke);
  border: 1px solid #000;
  box-shadow: 0 0 0 1px #fff inset;
}

.win-controls {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
}
.win-ctrl {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 16px;
  background: var(--w95-face);
  color: var(--w95-black);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow: inset 1px 1px 0 0 var(--w95-face-2);
  text-shadow: none;
}
.win-ctrl.close {
  background: linear-gradient(180deg, #ff8aa3 0%, #ff3357 100%);
  color: #fff;
  font-weight: 900;
}

/* ─────────────────────────────────────────────────────────
   Layout
   ───────────────────────────────────────────────────────── */

.shell-layout {
  width: min(1380px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-lg) calc(var(--space-2xl) + 8px);
}

.console-board { min-width: 0; display: grid; gap: var(--space-md); }
.side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Inner padding for any panel-window content (after the title bar) */
.console-heading,
.matrix-frame,
.panel,
.sticky-note,
#name-form {
  padding: 14px;
}
.console-heading { padding-top: 10px; }

/* ─────────────────────────────────────────────────────────
   Heading window
   ───────────────────────────────────────────────────────── */

.console-heading {
  display: grid;
  gap: 6px;
}

.section-label {
  color: var(--cute-magenta);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.screen-title {
  color: #1a002a;
  font-family: var(--font-pixel);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow:
    2px 2px 0 #ffd84d,
    4px 4px 0 var(--cute-hotpink),
    6px 6px 0 var(--cute-blue);
  display: flex;
  align-items: center;
  gap: 10px;
}
.screen-title-deco {
  color: var(--cute-hotpink);
  font-family: var(--font-pixel);
  text-shadow: 2px 2px 0 #ffd84d;
  animation: spin 8s linear infinite;
  display: inline-block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.terminal-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--w95-dark);
}
.terminal-lines span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--cute-cream);
  border: 1px solid var(--w95-shadow);
  box-shadow: 1px 1px 0 0 #000;
}
.terminal-lines strong {
  color: var(--cute-magenta);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────
   Matrix frame (the schedule grid)
   ───────────────────────────────────────────────────────── */

.matrix-frame {
  background: var(--w95-face);
}

.board-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: end;
  margin-bottom: 6px;
}

.corner {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  color: var(--w95-dark);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.day-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(48px, 1fr));
  gap: 4px;
  padding-bottom: 4px;
}

.day-label {
  display: grid;
  place-items: center;
  cursor: default;
  min-height: 36px;
  font-family: var(--font-pixel);
  font-size: 22px;
  font-weight: 700;
  color: #1a002a;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow: inset 1px 1px 0 0 rgba(255,255,255,0.7), 1px 1px 0 0 #000;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}
/* Each day a different pastel — rainbow row */
.day-row .day-label:nth-child(1) { background: linear-gradient(180deg, #ffe1ee, var(--cute-pink)); }
.day-row .day-label:nth-child(2) { background: linear-gradient(180deg, #fff7c8, var(--cute-yellow)); }
.day-row .day-label:nth-child(3) { background: linear-gradient(180deg, #d8f9e8, var(--cute-mint)); }
.day-row .day-label:nth-child(4) { background: linear-gradient(180deg, #e8d6ff, var(--cute-lavender)); }
.day-row .day-label:nth-child(5) { background: linear-gradient(180deg, #d6efff, var(--cute-sky)); }

.board-body {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
}

.hour-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hour-cell {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px 0 0;
  color: var(--w95-dark);
  font-family: var(--font-vt);
  font-size: 18px;
  letter-spacing: 0.5px;
}
.hour-cell .emoji { display: none; }

/* The actual heat grid — Win95 inset frame around an off-white "BMP" canvas */
.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(48px, 1fr));
  grid-auto-rows: minmax(38px, 1fr);
  gap: 2px;
  padding: 3px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark); /* inset */
  background:
    repeating-linear-gradient(45deg, #fffaf0 0 6px, #fff5e1 6px 12px);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* ─────────────────────────────────────────────────────────
   Heat cells — cute pink → magenta → red rainbow
   (overrides the original --heat-rgb based scheme)
   ───────────────────────────────────────────────────────── */

.cell {
  --cell-power: var(--heat-power, 0);
  --cell-alpha: 0;
  --heat-rgb: 255, 224, 72;
  --heat-opacity: 0;
  --heat-border: 0;
  --heat-glow: 0;
  --heat-glow-size: 0px;
  --heat-glow-alpha: 0;
  --heat-sheen: 0;

  position: relative;
  min-width: 0;
  border: 1px solid rgba(184, 152, 120, 0.85);
  border-radius: 0;
  outline: 0;
  cursor: crosshair;
  background:
    linear-gradient(rgba(var(--heat-rgb), var(--heat-opacity)), rgba(var(--heat-rgb), var(--heat-opacity))),
    var(--cute-paper);
  box-shadow:
    inset 0 0 0 1px rgba(var(--heat-rgb), var(--heat-border)),
    inset 1px 1px 0 0 rgba(255,255,255,0.92),
    0 0 var(--heat-glow-size) rgba(var(--heat-rgb), var(--heat-glow-alpha));
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-med) var(--ease-out);
  opacity: 0;
  transform: scale(0.96);
  animation: cell-in 280ms var(--ease-out) forwards;
  animation-delay: var(--cell-delay, 0ms);
  padding: 0;
}

@keyframes cell-in {
  to { opacity: 1; transform: scale(1); }
}

.cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 38%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 1px, rgba(0,0,0,0.04) 1px 3px);
  opacity: var(--heat-sheen, 0);
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}

/* Tiny pixel sparkle at higher heat */
.cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.95) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,0.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(var(--heat-rgb), 0.65), transparent 64%);
  opacity: var(--heat-glow, 0);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}

.cell:hover {
  z-index: 2;
  transform: translate(-1px, -1px);
  box-shadow:
    2px 2px 0 0 #000,
    inset 0 0 0 2px rgba(var(--heat-rgb), 0.95),
    inset 1px 1px 0 0 #fff,
    0 0 20px rgba(var(--heat-rgb), 0.5);
}

.cell:focus-visible {
  outline: 2px dashed var(--cute-hotpink);
  outline-offset: -2px;
}

/* My cells: hot pink dashed border + tiny ♡ in corner */
.cell.is-self {
  border-color: var(--self-stroke);
  box-shadow:
    inset 0 0 0 2px var(--self-stroke),
    inset 2px 2px 0 0 #fff,
    1px 1px 0 0 #000;
}
.cell.is-self::after {
  content: '♥';
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 0.6px var(--cute-hotpink);
  text-shadow: 1px 1px 0 var(--cute-hotpink);
  background: none;
  display: grid;
  place-items: start end;
  padding: 1px 3px 0 0;
  opacity: 1;
}

.cell.is-pulse {
  animation: cell-pulse 700ms var(--ease-out) 2;
}
@keyframes cell-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 91, 156, 0.7); }
  100% { box-shadow: 0 0 0 12px rgba(255, 91, 156, 0); }
}

.grid.is-self-only .cell:not(.is-self) {
  --cell-alpha: 0.04 !important;
  --heat-opacity: 0.08 !important;
  --heat-border: 0 !important;
  --heat-glow: 0 !important;
  --heat-glow-size: 0px !important;
  --heat-glow-alpha: 0 !important;
  --heat-sheen: 0 !important;
  opacity: 0.5;
}

.hint {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.2px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.55);
  padding: 4px 8px;
  display: inline-block;
}

/* ─────────────────────────────────────────────────────────
   Side panels (top times, members, legend)
   ───────────────────────────────────────────────────────── */

.panel { background: var(--w95-face); }

.card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #1a002a;
  padding-bottom: 4px;
  border-bottom: 2px dotted var(--cute-hotpink);
}
.card-deco {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--cute-yellow);
  border: 1px solid #000;
  box-shadow: 1px 1px 0 0 #000;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--cute-magenta);
  flex: 0 0 auto;
}

.count-pill {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  min-height: 18px;
  padding: 0 6px;
  background: var(--cute-pink);
  border: 1px solid #000;
  box-shadow: 1px 1px 0 0 #000;
  color: #2a002a;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
}

/* TOP CONVERGENCE — list of glossy 3D pill rows */
.best-list {
  display: grid;
  gap: 6px;
}
.best-list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--cute-cream);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow: 1px 1px 0 0 #000;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: transform var(--dur-fast) var(--ease-out);
}
.best-list li:nth-child(odd)  { background: #fff3e0; }
.best-list li:nth-child(even) { background: #e8f7ff; }
.best-list li:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 0 #000;
}
.best-list li:active {
  transform: translate(0, 0);
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
}

.best-rank {
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  color: var(--cute-magenta);
}
.best-when {
  font-size: 12px;
  font-weight: 700;
  color: #1a002a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.best-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--cute-yellow);
  border: 1px solid #000;
  box-shadow: 1px 1px 0 0 #000;
  font-size: 11px;
  font-weight: 700;
  color: #2a002a;
}

.card-empty,
.protocol-card p {
  font-family: var(--font-ui);
  font-size: 12px;
  color: #2a002a;
  line-height: 1.6;
}

/* MEMBERS list — pastel pill chips */
.members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  background: var(--cute-cream);
  color: #1a002a;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow: 1px 1px 0 0 #000;
}
.member-chip .swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--member-color, var(--cute-hotpink));
  border: 1px solid #000;
  flex: 0 0 auto;
}
.member-chip.is-me {
  background: linear-gradient(180deg, #ffd6e7, var(--cute-pink));
  outline: 2px dashed var(--self-stroke);
  outline-offset: -2px;
}
.member-delete-btn {
  min-height: 20px;
  padding: 0 6px;
  background: linear-gradient(180deg, #ffd6df, #ff8aa3);
  color: #2c0010;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow: 1px 1px 0 0 #000;
  cursor: pointer;
}
.member-delete-btn:hover { filter: brightness(1.06); }
.member-delete-btn:active {
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
}

/* LEGEND bar - 6 heat steps */
.legend-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  height: 22px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
  background: var(--cute-paper);
}
.legend-bar span {
  background: var(--legend-heat, #ffe048);
  border-right: 1px solid rgba(0,0,0,0.15);
}
.legend-bar span:nth-child(1) { --legend-heat: #ffe048; }
.legend-bar span:nth-child(2) { --legend-heat: #ffc245; }
.legend-bar span:nth-child(3) { --legend-heat: #ff8618; }
.legend-bar span:nth-child(4) { --legend-heat: #ff5310; }
.legend-bar span:nth-child(5) { --legend-heat: #ff2305; }
.legend-bar span:nth-child(6) { --legend-heat: #ff0000; }
.legend-bar span:last-child { border-right: 0; }
.legend-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: #1a002a;
}

/* Sticky-note (readme) — pastel paper sticker, NOT a window */
.sticky-note {
  position: relative;
  background:
    linear-gradient(180deg, #fff7a0 0%, var(--cute-yellow) 100%);
  border: 1px solid #b89c00;
  box-shadow:
    2px 2px 0 0 rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.7);
  transform: rotate(-1.5deg);
  padding: 14px 14px 16px;
}
.sticky-note::before, .sticky-note::after { display: none; }
.sticky-note .card-title {
  border-bottom: 2px dotted #b89c00;
  color: #4a3000;
}
.sticky-note .card-deco {
  background: var(--cute-pink);
  color: var(--cute-magenta);
}
.sticky-note p {
  font-family: var(--font-ui);
  color: #4a3000;
}

/* ─────────────────────────────────────────────────────────
   Tooltip (Win95 callout)
   ───────────────────────────────────────────────────────── */

.tooltip {
  position: fixed;
  z-index: 120;
  max-width: min(280px, calc(100vw - 24px));
  padding: 6px 10px;
  background: #ffffe1; /* classic OS tooltip */
  color: #000;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.4);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  pointer-events: none;
  transform: none;
}
.tooltip strong {
  color: var(--cute-magenta);
}
.tooltip .tip-names {
  display: block;
  margin-top: 2px;
  color: var(--w95-dark);
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────
   Modal (login dialog)
   ───────────────────────────────────────────────────────── */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--w95-black);
}
.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.modal[open] { animation: modal-in 220ms var(--ease-out); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

#name-form {
  width: min(440px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
}
#name-form .section-label { margin-top: 4px; }
#name-form h2 {
  font-family: var(--font-pixel);
  font-size: 26px;
  font-weight: 700;
  color: #1a002a;
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0 var(--cute-pink);
}
.modal-sub {
  font-family: var(--font-ui);
  font-size: 12px;
  color: #2a002a;
  line-height: 1.55;
}
.field {
  display: grid;
  gap: 4px;
}
.field span {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--cute-magenta);
}
.field input {
  height: 32px;
  width: 100%;
  padding: 0 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  background: #fff;
  color: #000;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark); /* inset */
  outline: 0;
}
.field input:focus {
  outline: 2px dotted var(--cute-hotpink);
  outline-offset: -4px;
}

.form-error {
  padding: 6px 8px;
  background: #fff0f3;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────
   Mobile safety bar (floating)
   ───────────────────────────────────────────────────────── */

.mobile-safety-bar { display: none; }

/* ─────────────────────────────────────────────────────────
   Taskbar
   ───────────────────────────────────────────────────────── */

.taskbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: var(--w95-face);
  border-top: 2px solid var(--w95-light);
  box-shadow: inset 0 1px 0 0 var(--w95-light);
}

.start-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  background: var(--w95-face);
  color: #000;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  box-shadow: inset 1px 1px 0 0 var(--w95-face-2);
  cursor: pointer;
}
.start-btn:active {
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
}

.task-divider {
  width: 0;
  height: 22px;
  border-left: 1px solid var(--w95-shadow);
  border-right: 1px solid var(--w95-light);
  margin: 0 2px;
}

.task-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 6px;
  background: var(--w95-face);
  color: #000;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  border: 2px solid;
  /* taskbar item appears pressed = active app */
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
  box-shadow: inset 1px 1px 0 0 var(--w95-shadow);
}
.task-app-icon { display: inline-flex; }

.tray {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  background: var(--w95-face);
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
  box-shadow: inset 1px 1px 0 0 var(--w95-shadow);
}
.tray-pixel { display: inline-flex; }
.tray-clock {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: #000;
}

/* ─────────────────────────────────────────────────────────
   Desktop stickers (decorative, behind content)
   ───────────────────────────────────────────────────────── */

.desktop-stickers {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.sticker {
  position: absolute;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.45));
}
.sticker-flower { top: 56px; right: 18px; transform: rotate(12deg); }
.sticker-disk   { top: 130px; left: 12px; transform: rotate(-8deg); }
.sticker-cd     { bottom: 70px; left: 24px; transform: rotate(15deg); animation: spin 12s linear infinite; }
.sticker-heart  { bottom: 200px; right: 10px; transform: rotate(-12deg); }
.sticker-star   { top: 52%; right: 6px; transform: rotate(8deg); }
.sticker-ribbon {
  top: 220px;
  right: -14px;
  padding: 4px 28px;
  background: linear-gradient(90deg, var(--cute-hotpink), var(--cute-magenta));
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  border: 1px solid #000;
  transform: rotate(-26deg);
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.45);
}

/* Make sure interactive stuff sits above stickers */
.terminal-nav,
.shell-layout,
.taskbar,
.modal,
.mobile-safety-bar,
#boot { position: relative; z-index: 5; }
.terminal-nav.win-window-bar { z-index: 30; }
.taskbar { z-index: 50; }
.tooltip { position: fixed; z-index: 120; }
#boot { z-index: 9999; }

/* ─────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────── */

@media (max-width: 1060px) {
  .shell-layout { grid-template-columns: 1fr; }
  .side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
  .sticky-note { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { padding-bottom: 96px; }

  .terminal-nav.win-window-bar {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    padding: 6px;
    gap: 6px;
  }
  .brand { flex-wrap: wrap; gap: 6px; }
  .brand-sub { font-size: 10px; }
  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .topbar-actions .store-chip { display: none; }
  .topbar-actions .me-chip { grid-column: span 1; justify-content: flex-start; }
  .topbar-actions .btn { width: 100%; padding-inline: 4px; font-size: 11px; }
  .win-controls { display: none; }

  .shell-layout {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }
  .side { grid-template-columns: 1fr; gap: 10px; }

  .console-heading,
  .matrix-frame,
  .panel,
  .sticky-note,
  #name-form { padding: 10px; }

  .screen-title {
    font-size: 24px;
    text-shadow:
      1px 1px 0 #ffd84d,
      2px 2px 0 var(--cute-hotpink),
      3px 3px 0 var(--cute-blue);
  }
  .screen-title-deco { display: none; }

  .terminal-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .board-head, .board-body { grid-template-columns: 30px minmax(0, 1fr); }
  .corner { font-size: 9px; padding-right: 4px; }
  .day-label { min-height: 28px; font-size: 16px; }
  .day-row, .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid {
    grid-auto-rows: 22px;
    gap: 1px;
    padding: 2px;
  }
  .hour-cell {
    min-height: 22px;
    font-size: 12px;
    padding-right: 4px;
  }
  .cell { border-width: 1px; }
  .cell.is-self { box-shadow: inset 0 0 0 2px var(--self-stroke); }
  .cell.is-self::after { font-size: 7px; padding: 0 2px 0 0; }

  .grid.is-edit-locked { touch-action: pan-y; }
  .grid.is-edit-locked .cell { cursor: default; pointer-events: none; }
  .grid.is-edit-locked .cell:hover { transform: none; box-shadow: inset 1px 1px 0 0 #fff; }

  .hint { font-size: 11px; line-height: 1.4; padding: 4px 0; }

  .mobile-safety-bar {
    position: fixed;
    right: 8px;
    left: 8px;
    bottom: calc(36px + env(safe-area-inset-bottom));
    z-index: 60;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: var(--w95-face);
    border: 2px solid;
    border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
    box-shadow: 2px 2px 0 0 #000;
  }
  .mobile-safety-bar .btn {
    min-height: 38px;
    width: 100%;
    font-size: 12px;
  }
  #edit-mode-status {
    font-family: var(--font-ui);
    font-size: 11px;
    color: #1a002a;
    line-height: 1.35;
  }
  .is-mobile-editing .mobile-safety-bar {
    background: linear-gradient(180deg, #ffe1ee, var(--cute-pink));
    border-color: var(--cute-hotpink) var(--w95-dark) var(--w95-dark) var(--cute-hotpink);
  }
  .is-mobile-editing .mobile-safety-bar .btn {
    background: linear-gradient(180deg, #fff5a0, var(--cute-lemon));
  }

  .sticker-disk, .sticker-cd, .sticker-ribbon { display: none; }
  .sticker-flower { top: 110px; right: 6px; transform: rotate(12deg) scale(0.8); }
  .sticker-heart  { bottom: 150px; right: 4px; transform: rotate(-12deg) scale(0.8); }
  .sticker-star   { top: 40%; right: 4px; transform: rotate(8deg) scale(0.8); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}