@font-face {
  font-family: "Silkscreen";
  src: url("fonts/Silkscreen-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Silkscreen";
  src: url("fonts/Silkscreen-Bold.ttf") format("truetype");
  font-weight: 700;
}

:root {
  --bg: #140c08;
  --bg-2: #24160f;
  --ui-alpha: 1; /* Settings → Panel opacity */
  --panel-top: rgb(66 44 33 / calc(0.92 * var(--ui-alpha)));
  --panel-bottom: rgb(36 23 16 / calc(0.94 * var(--ui-alpha)));
  --raised: rgba(255, 220, 180, 0.045);
  --line: rgba(255, 205, 150, 0.1);
  --line-strong: rgba(255, 205, 150, 0.2);
  --brick: #5a4a42;
  --accent: #e8742a;
  --accent-dark: #a9481a;
  --amber: #f2a93b;
  --glow: #ffd27a;
  --text: #fbe7c6;
  --muted: #c6a98e;
  --danger: #f2876a;
  --sign-ink: #4a1d07; /* dark outline on sign text, like the wallpaper's sign */

  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 12px;
  --shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25);

  --pixel: "Silkscreen", "Courier New", monospace;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

/* Browser surfaces, themed */
html { scrollbar-color: var(--brick) var(--bg); scrollbar-width: thin; }
::selection { background: var(--amber); color: var(--bg); }
input, textarea { caret-color: var(--amber); }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

/* Pixel icons (drawn in newtab.js) */
.pi { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; }

/* ---------- Time-of-day lighting ----------
   The glows are registered properties so they fade between phases instead of jumping.
   body[data-time] is set from sunrise/sunset in newtab.js; dusk matches the wallpaper. */
@property --g-main { syntax: "<color>"; inherits: true; initial-value: rgba(232, 116, 42, 0.2); }
@property --g-sky { syntax: "<color>"; inherits: true; initial-value: rgba(255, 190, 100, 0.14); }
@property --g-low { syntax: "<color>"; inherits: true; initial-value: rgba(242, 169, 59, 0.1); }
@property --bg-top { syntax: "<color>"; inherits: true; initial-value: #24160f; }
@property --stars { syntax: "<number>"; inherits: true; initial-value: 0; }

body[data-time="dawn"] {
  --g-main: rgba(240, 140, 100, 0.16); --g-sky: rgba(255, 170, 150, 0.18);
  --g-low: rgba(242, 169, 59, 0.08); --bg-top: #2a1a17; --stars: 0.2;
}
body[data-time="day"] {
  --g-main: rgba(255, 180, 100, 0.16); --g-sky: rgba(255, 225, 170, 0.2);
  --g-low: rgba(242, 169, 59, 0.1); --bg-top: #2e1d14; --stars: 0;
}
body[data-time="dusk"] {
  --g-main: rgba(232, 116, 42, 0.22); --g-sky: rgba(255, 190, 100, 0.14);
  --g-low: rgba(242, 169, 59, 0.1); --bg-top: #24160f; --stars: 0;
}
body[data-time="night"] {
  --g-main: rgba(232, 116, 42, 0.1); --g-sky: rgba(255, 200, 120, 0.05);
  --g-low: rgba(242, 169, 59, 0.06); --bg-top: #1a100b; --stars: 0.7;
}
/* at night the welcome sign glows like a lit lantern */
body[data-time="night"] .sign { box-shadow: 0 24px 70px -12px rgba(232, 116, 42, 0.8), 0 2px 6px rgba(0, 0, 0, 0.3); }

body {
  /* lantern glows over dark soil, the warm counterpart of a neon dashboard glow */
  background:
    radial-gradient(ellipse 55% 45% at 72% 38%, var(--g-main), transparent 70%),
    radial-gradient(ellipse 40% 35% at 30% 8%, var(--g-sky), transparent 70%),
    radial-gradient(ellipse 45% 40% at 55% 100%, var(--g-low), transparent 70%),
    linear-gradient(160deg, var(--bg-top) 0%, var(--bg) 65%);
  background-attachment: fixed;
  transition: --g-main 3s, --g-sky 3s, --g-low 3s, --bg-top 3s, --stars 3s;
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}

/* Pixel stars, only visible at night (and faintly at dawn); fog adds a low haze */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--stars); }
.sky::before, .sky::after {
  content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 2px; background: transparent;
}
.sky::before {
  box-shadow:
    8vw 6vh 0 #ffe9c4, 17vw 14vh 0 #ffe9c4, 26vw 4vh 0 #ffd27a, 34vw 18vh 0 #ffe9c4, 41vw 9vh 0 #ffe9c4,
    49vw 3vh 0 #ffd27a, 57vw 15vh 0 #ffe9c4, 63vw 7vh 0 #ffe9c4, 71vw 20vh 0 #ffd27a, 78vw 5vh 0 #ffe9c4,
    85vw 12vh 0 #ffe9c4, 92vw 3vh 0 #ffd27a, 12vw 26vh 0 #ffe9c4, 46vw 28vh 0 #ffe9c4, 88vw 27vh 0 #ffe9c4;
}
.sky::after {
  width: 3px; height: 3px;
  box-shadow:
    21vw 10vh 0 #fff4de, 53vw 22vh 0 #fff4de, 67vw 2vh 0 #fff4de, 96vw 16vh 0 #fff4de, 3vw 17vh 0 #fff4de;
  animation: twinkle 4s steps(2) infinite;
}
@keyframes twinkle { 50% { opacity: 0.3; } }
body[data-wx="fog"]::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgba(210, 185, 160, 0.07) 70%, rgba(210, 185, 160, 0.12));
}

/* Optional custom background with a warm dark overlay */
.bg-image {
  position: fixed; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  image-rendering: pixelated;
  display: none;
}
.bg-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 12, 8, 0.6), rgba(20, 12, 8, 0.88));
}
body.has-bg .bg-image { display: block; }
body.has-bg { background: var(--bg); }

/* ---------- Shell ---------- */
.app {
  display: grid; grid-template-columns: 252px minmax(0, 1fr);
  gap: 24px; padding: 18px 24px 18px 18px;
  min-height: 100vh;
  max-width: 1480px; margin: 0 auto;
}

.panel {
  background: linear-gradient(165deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}
.panel-title { font: 700 16px var(--pixel); color: var(--text); margin: 0; }
.panel-sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky; top: 18px; align-self: start;
  height: calc(100vh - 36px);
  display: flex; flex-direction: column;
  padding: 18px 14px 14px;
  background: linear-gradient(180deg, rgb(48 31 23 / calc(0.95 * var(--ui-alpha))), rgb(26 16 11 / calc(0.95 * var(--ui-alpha))));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow-y: auto; scrollbar-width: thin;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font: 400 16px var(--pixel); letter-spacing: 0; text-transform: uppercase;
  white-space: nowrap; padding: 0 8px;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px;
  background: var(--accent); color: #fff1dc;
  box-shadow: inset 0 -2px 0 rgba(74, 29, 7, 0.45), 0 1px 0 rgba(0, 0, 0, 0.35);
}
.rule {
  height: 1px; margin: 12px 4px 10px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.side-label {
  font: 700 11px var(--sans); color: var(--muted); letter-spacing: 1.2px;
  text-transform: uppercase; margin: 22px 12px 10px;
}
.side-nav { display: flex; flex-direction: column; gap: 4px; }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 7px 12px;
  background: transparent; border: 0; border-radius: var(--r-lg);
  color: var(--muted); font: 600 14px var(--sans); text-align: left;
  cursor: pointer; text-decoration: none;
  transition: background-color 0.18s, color 0.18s;
}
.nav-item:hover { color: var(--text); background: var(--raised); }
.nav-icon {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 18px;
  background: rgba(255, 220, 180, 0.07); color: var(--amber);
  transition: background-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.nav-item.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(255, 220, 180, 0.08), rgba(255, 220, 180, 0.02));
  box-shadow: inset 0 0 0 1px var(--line);
}
.nav-item.active .nav-icon {
  background: var(--accent); color: #fff1dc;
  box-shadow: inset 0 -2px 0 rgba(74, 29, 7, 0.45), 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Notes: one compact row in the sidebar's darker orange, so it doesn't compete with School */
.notes-card {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  position: sticky; bottom: 0; z-index: 1; /* always in view, even when the sidebar scrolls */
  padding: 10px 12px; border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px),
    linear-gradient(150deg, var(--accent-dark), #7f3412);
  color: #fff1dc;
  box-shadow: 0 10px 24px -12px rgba(169, 72, 26, 0.6);
}
.notes-card-icon {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 18px;
  background: #fff1dc; color: var(--accent-dark);
}
.notes-card h2 { font: 400 16px var(--pixel); margin: 0; flex: 1; text-shadow: 1px 1px 0 var(--sign-ink); }
.notes-card p { display: none; }
.notes-card-btn {
  padding: 8px 12px; border: 0; border-radius: var(--r-md);
  background: rgba(40, 16, 5, 0.55); color: #fff1dc;
  font: 700 12px var(--sans); letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: background-color 0.18s;
}
.notes-card-btn:hover { background: rgba(40, 16, 5, 0.85); }

/* ---------- Main ---------- */
.main { min-width: 0; padding-bottom: 60px; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 4px 22px;
}
.search { margin-right: auto; }

.search {
  display: flex; align-items: center; gap: 10px;
  flex: 0 1 440px; min-width: 0;
  padding: 0 16px; border-radius: var(--r-lg);
  background: rgb(20 12 8 / calc(0.65 * var(--ui-alpha)));
  border: 1px solid var(--line-strong);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.search:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(242, 169, 59, 0.15); }
.search-icon { font-size: 18px; color: var(--amber); display: inline-flex; }
.search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--text); font: 15px var(--sans); padding: 12px 0;
}
.search input::placeholder { color: var(--muted); }

.top-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  font: 600 13px var(--sans); letter-spacing: 0.3px;
  background: transparent; color: var(--muted);
  border: 0; border-radius: var(--r-md); padding: 10px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.18s, background-color 0.18s;
}
.icon-btn .pi { font-size: 18px; }
.icon-btn:hover { color: var(--text); background: var(--raised); }
body.editing #editToggle { color: var(--bg); background: var(--amber); }
.mobile-only { display: none; }

/* ---------- The sign: the wallpaper's orange "now playing" sign as a slim strip ---------- */
.sign {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px;
  min-height: 112px; padding: 16px 24px 16px 140px; margin-bottom: 24px;
  border-radius: var(--r-xl);
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #f08a3a 0%, var(--accent) 45%, #c95a1c 100%);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
  color: #fff1dc;
  /* 1px outline all round plus a 2px drop: the wallpaper sign's own lettering treatment */
  text-shadow:
    -1px 0 0 var(--sign-ink), 1px 0 0 var(--sign-ink),
    0 -1px 0 var(--sign-ink), 0 1px 0 var(--sign-ink),
    2px 2px 0 var(--sign-ink);
}
/* Silkscreen sits on an 8px grid, so every size it uses is a multiple of 8 */
.sign-time { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sign-clockrow { display: flex; align-items: center; gap: 14px; }
.clock { font: 700 40px/1 var(--pixel); white-space: nowrap; }
/* the date stacked beside the clock, like the small print on the wallpaper's sign */
.sign-date { display: flex; flex-direction: column; gap: 4px; font: 400 16px/1 var(--pixel); text-transform: uppercase; white-space: nowrap; }
.greeting { font: 600 14px/1.3 var(--sans); margin: 0; text-shadow: -1px 0 0 var(--sign-ink), 1px 0 0 var(--sign-ink), 0 -1px 0 var(--sign-ink), 0 1px 0 var(--sign-ink); }

/* Day progress: 24 pixel blocks, one per hour */
.daybar { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 380px; justify-self: center; width: 100%; }
.daybar-blocks { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.daybar-blocks i { height: 12px; border-radius: 2px; background: rgba(74, 29, 7, 0.4); }
.daybar-blocks i.on { background: #fff1dc; box-shadow: 0 1px 0 var(--sign-ink); }
.daybar-blocks i.now { background: var(--glow); box-shadow: 0 0 0 1px var(--sign-ink); }
.daybar-label { font: 700 12px var(--sans); text-shadow: -1px 0 0 var(--sign-ink), 1px 0 0 var(--sign-ink), 0 -1px 0 var(--sign-ink), 0 1px 0 var(--sign-ink); }
.daybar.off .daybar-blocks { opacity: 0.45; }

.weather {
  font: 400 16px var(--pixel); color: inherit; text-shadow: inherit;
  background: rgba(74, 29, 7, 0.3); border: 0; border-radius: var(--r-md);
  padding: 9px 14px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background-color 0.18s;
}
.weather:hover { background: rgba(74, 29, 7, 0.5); }
.weather:empty { display: none; }
.weather .pi { font-size: 18px; filter: drop-shadow(1px 1px 0 var(--sign-ink)); }
.weather .wx-place { font: 700 12px var(--sans); text-shadow: -1px 0 0 var(--sign-ink), 1px 0 0 var(--sign-ink), 0 -1px 0 var(--sign-ink), 0 1px 0 var(--sign-ink); }

/* The record is the sign's picture, spinning half off the left edge */
.record {
  position: absolute; left: -44px; top: 50%;
  width: 160px; height: 160px; margin-top: -80px; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 27px, #2a170d 27px 30px, transparent 30px),
    repeating-radial-gradient(circle, #3a2318 0 3px, #241309 3px 6px);
  box-shadow: 0 0 0 5px #2a170d, 0 14px 30px -10px rgba(40, 16, 5, 0.7);
  display: grid; place-items: center;
  animation: spin 12s linear infinite;
}
.record::before {
  /* light glint across the grooves */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 210, 160, 0.12) 12%, transparent 18% 58%, rgba(255, 210, 160, 0.08) 62%, transparent 68%);
}
.record span {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 4px #c8571d;
  position: relative;
}
.record span::after {
  content: ""; position: absolute; left: 20px; top: 20px;
  width: 10px; height: 10px; border-radius: 50%; background: #2a170d;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* In daylight the sign is a little less lit than at dusk and night */
body[data-time="day"] .sign { filter: saturate(0.88) brightness(0.97); }

.mobile-due { display: none; }

/* ---------- Groups & tiles ---------- */
/* The board (board.js): groups and widgets share one grid, like an iPhone home screen.
   Rows are 29px so a widget cell (4 rows) is 176px tall; each group spans as many rows as its links need. */
.groups {
  display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
  grid-auto-rows: 29px; grid-auto-flow: row dense; gap: 20px;
}
.group { position: relative; padding: 22px 22px 24px; scroll-margin-top: 18px; min-width: 0; }
.group.lead { border-color: rgba(242, 169, 59, 0.3); background: linear-gradient(165deg, rgb(80 52 37 / calc(0.95 * var(--ui-alpha))), var(--panel-bottom)); } /* School: full width, a little warmer */

.group-head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.group-icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 18px;
  background: var(--accent); color: #fff1dc;
  box-shadow: inset 0 -2px 0 rgba(74, 29, 7, 0.45), 0 1px 0 rgba(0, 0, 0, 0.35);
}
.group-head h2 {
  font: 700 16px var(--pixel); color: var(--text);
  margin: 0;
}
body.editing .group-head h2 { border-bottom: 2px dashed var(--muted); cursor: text; }
body.editing .group-head h2:focus { outline: none; border-bottom-color: var(--glow); }
.group-count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.group-tools { display: none; margin-left: auto; gap: 2px; }
body.editing .group-tools { display: flex; }
.mini {
  font: 600 12px var(--sans); color: var(--muted);
  background: transparent; border: 0; border-radius: 8px; cursor: pointer; padding: 7px 9px;
  display: inline-flex; align-items: center;
}
.mini .pi { font-size: 10px; }
.mini:hover { color: var(--text); background: var(--raised); }
.mini.del:hover { color: var(--danger); }

.tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px;
  min-height: 40px;
}

.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 8px 14px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 200, 140, 0.09), rgba(255, 200, 140, 0.04));
  border: 1px solid var(--line-strong);
  color: var(--text); text-decoration: none; font: inherit;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(242, 169, 59, 0.6);
  background: linear-gradient(180deg, rgba(255, 200, 140, 0.14), rgba(255, 200, 140, 0.06));
  box-shadow: 0 14px 26px -14px rgba(232, 116, 42, 0.6);
  outline: none;
}
.tile .ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255, 241, 220, 0.94);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}
.tile .ico img { width: 32px; height: 32px; }
.tile .letter {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-dark); color: #fff1dc; font: 700 24px var(--pixel);
}
.tile .ico:has(.letter) { background: none; box-shadow: none; }
.tile .name {
  font-size: 13px; font-weight: 600; text-align: center; line-height: 1.25;
  max-width: 100%; overflow: hidden; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

.tile.add {
  background: transparent; color: var(--muted); display: none;
  border: 1px dashed var(--line-strong);
  font: 600 13px var(--sans);
}
.tile.add:hover, .tile.add:focus-visible { color: var(--glow); border-color: var(--amber); }
.tile.add .plus { font: 700 24px var(--pixel); }
body.editing .tile.add { display: flex; }
body.editing .tile:not(.add) { cursor: grab; border-style: dashed; border-color: var(--line-strong); }
/* The tile being dragged leaves a glowing slot where it will land */
.tile.dragging {
  opacity: 0.35; transform: none; box-shadow: none;
  border: 1px dashed var(--glow); background: rgba(255, 210, 122, 0.06);
}
body.dragging-links .tile:not(.dragging):hover { transform: none; box-shadow: none; }
body.dragging-links .tiles { min-height: 90px; } /* empty groups stay big enough to drop into */

.empty {
  grid-column: 1 / -1; margin: 0; padding: 10px 2px;
  color: var(--muted); font-size: 14px;
}

.add-group-wrap { display: none; margin-top: 28px; text-align: center; }
body.editing .add-group-wrap { display: block; }

/* ---------- Buttons & dialogs ---------- */
.btn {
  font: 600 13px var(--sans); color: var(--text); letter-spacing: 0.2px;
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 11px 16px; cursor: pointer;
  transition: border-color 0.18s, background-color 0.18s;
}
.btn:hover { border-color: var(--amber); }
.btn.primary { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff1dc; text-shadow: 1px 1px 0 var(--sign-ink); }
.btn.primary:hover { background: #8f3c15; border-color: var(--amber); }
.btn.small { padding: 7px 12px; font-size: 12px; }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(224, 102, 74, 0.35); }
.btn.danger:hover { border-color: var(--danger); }

dialog {
  background: linear-gradient(165deg, #3a271d, #1f130d);
  color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  padding: 28px; width: min(450px, calc(100vw - 32px));
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}
dialog::backdrop { background: rgba(10, 6, 4, 0.65); backdrop-filter: blur(4px); }
dialog h3 { font: 700 16px var(--pixel); color: var(--amber); margin: 0 0 22px; }
dialog label, dialog .field {
  display: flex; flex-direction: column; gap: 8px;
  font: 600 13px var(--sans); color: var(--muted); margin-bottom: 16px;
}
dialog label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--text); }
dialog input:not([type=checkbox]), dialog select {
  font: 14px var(--sans); color: var(--text);
  background: rgba(20, 12, 8, 0.6); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 10px 12px; outline: none;
}
dialog input:focus, dialog select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.15); }
dialog input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.sync-status {
  margin: 0; padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(20, 12, 8, 0.45); border: 1px solid var(--line);
  color: var(--text); font: 400 13px/1.45 var(--sans);
}
.sync-status.problem { color: #ffb59e; border-color: rgba(224, 102, 74, 0.4); }
.two { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.dialog-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.spacer { flex: 1; }

/* ---------- Notes drawer ---------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 6;
  width: min(380px, 92vw); padding: 18px;
  transform: translateX(105%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drawer.open { transform: translateX(0); }
.drawer-body {
  height: 100%; padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(165deg, #3a271d, #1f130d);
  border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer textarea {
  flex: 1; resize: none; color: var(--text);
  background: rgba(20, 12, 8, 0.6); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  outline: 0; padding: 14px; font: 14px/1.6 var(--sans);
}
.drawer textarea:focus { border-color: var(--amber); }
.hint { color: var(--muted); font-size: 12px; }

/* ---------- Sidebar: Coming up ---------- */
.side-head { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 12px 8px; }
.side-head .side-label { margin: 0; }
.side-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--amber); font: 600 12px var(--sans);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242, 169, 59, 0.4);
}
.side-link:hover { color: var(--glow); text-decoration-color: currentColor; }

.coming-up { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cu-day-group { display: flex; flex-direction: column; gap: 1px; }
.cu-day-head { margin: 0 0 2px 12px; font: 700 12px var(--sans); color: var(--amber); }
.cu-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px 5px 12px; border-radius: var(--r-md);
  transition: background-color 0.18s;
}
.cu-row:hover { background: var(--raised); }
.cu-row input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer; }
.cu-open {
  min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.cu-title { min-width: 0; font: 600 13px/1.3 var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-more { align-self: flex-start; margin: 1px 0 0 37px; font-size: 12px; }

/* The kind, written out; tests and quizzes are solid, homework is outlined, events are quiet */
.kind-tag {
  flex: none; padding: 1px 6px; border-radius: 5px;
  font: 700 11px/1.4 var(--sans); letter-spacing: 0.4px; text-transform: uppercase;
  background: var(--kfill); color: var(--kink);
  box-shadow: inset 0 0 0 1px var(--kline);
}
.kind-tag.k-project { box-shadow: none; outline: 1px dashed var(--kline); outline-offset: -1px; }

.cu-pinned {
  width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px;
  cursor: pointer; text-align: left;
  padding: 8px 12px; border-radius: var(--r-md); color: var(--text); font: inherit;
  background: rgba(169, 72, 26, 0.28);
  border: 1px solid rgba(232, 116, 42, 0.45);
  box-shadow: inset 0 -2px 0 rgba(74, 29, 7, 0.5);
}
.cu-pinned:hover { border-color: var(--amber); }
.cu-pin-title { font: 600 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-pin-when { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.cu-pin-count { grid-row: 1 / span 1; font: 400 24px/1 var(--pixel); color: var(--glow); }

.cu-empty { padding: 4px 12px; }
.cu-empty p { margin: 0 0 6px; color: var(--muted); font-size: 13px; }

/* Kinds by weight, staying inside the wallpaper's warm palette:
   --kfill fill, --kline edge, --kink text, --kbar the bar on narrow screens */
.k-test       { --kind: var(--accent); --kfill: #b4501d; --kline: var(--glow); --kink: #fff1dc; --kbar: var(--accent); }
.k-quiz       { --kind: var(--accent); --kfill: var(--accent-dark); --kline: var(--accent-dark); --kink: #fff1dc; --kbar: var(--accent); }
.k-project    { --kind: var(--amber); --kfill: transparent; --kline: rgba(242, 169, 59, 0.75); --kink: var(--text); --kbar: rgba(242, 169, 59, 0.7); }
.k-assignment { --kind: var(--amber); --kfill: transparent; --kline: rgba(242, 169, 59, 0.6); --kink: var(--text); --kbar: rgba(242, 169, 59, 0.55); }
.k-event      { --kind: var(--muted); --kfill: rgba(255, 220, 180, 0.07); --kline: transparent; --kink: var(--muted); --kbar: rgba(255, 220, 180, 0.25); }
.k-no_school  { --kind: #9fc39a; --kfill: rgba(159, 195, 154, 0.14); --kline: transparent; --kink: #cfe6ca; --kbar: rgba(159, 195, 154, 0.5); }

/* ---------- Calendar window ---------- */
.cal-dialog {
  width: min(1180px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px));
  max-width: none; max-height: none; padding: 0; overflow: hidden;
}
.cal-dialog[open] { display: flex; }
.cal-dialog.drop-hover { outline: 2px dashed var(--amber); outline-offset: -8px; }
.cal-shell { display: flex; flex-direction: column; width: 100%; min-height: 0; }

.cal-top {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.cal-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.cal-title { font: 400 24px var(--pixel); margin: 0 8px; min-width: 250px; text-align: center; white-space: nowrap; }
.cal-nav #calToday { margin-left: 8px; padding: 8px 14px; }
.cal-dialog.list-view :is(#calPrev, #calNext, #calToday) { display: none; }

.cal-views {
  display: flex; padding: 3px; gap: 2px; border-radius: var(--r-md);
  background: rgba(20, 12, 8, 0.55); border: 1px solid var(--line);
}
.seg {
  font: 600 13px var(--sans); color: var(--muted); background: none; border: 0;
  padding: 7px 14px; border-radius: 9px; cursor: pointer;
  transition: background-color 0.18s, color 0.18s;
}
.seg:hover { color: var(--text); }
.seg[aria-pressed="true"] { background: var(--accent-dark); color: #fff1dc; text-shadow: 1px 1px 0 var(--sign-ink); }

.cal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.cal-main { min-height: 0; padding: 14px 16px 16px 20px; overflow: auto; display: flex; flex-direction: column; }
.cal-main .deadline-list { max-width: 720px; }

.cal-grid {
  flex: 1; display: grid; gap: 6px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--rows, 6), minmax(76px, 1fr));
}
.cal-grid[hidden], .deadline-list[hidden], .week-grid[hidden], .week-bar[hidden] { display: none; }

/* Week view: the side panel steps aside and seven tall tiles share the width */
.cal-dialog:is(.week-view, .list-view, .plan-view) .cal-body { grid-template-columns: minmax(0, 1fr); }
.cal-dialog:is(.week-view, .list-view, .plan-view) .cal-side { display: none; }
.cal-dialog.week-view .cal-main { padding: 14px 20px 18px; gap: 12px; }

.week-bar { display: flex; flex-direction: column; gap: 8px; }
.week-bar .drop-zone {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; text-align: left;
}
.week-bar .drop-icon { font-size: 18px; }
.week-bar .drop-title { margin: 0; font-size: 16px; }
.week-bar .drop-text { margin: 0; flex: 1; min-width: 200px; }
.week-bar .drop-zone .hint { display: none; }
.week-bar #photoPick { padding: 9px 14px; }

.week-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
}
.wk-day {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(255, 220, 180, 0.04);
  transition: border-color 0.15s, background-color 0.15s;
}
.wk-day.past { background: rgba(255, 220, 180, 0.02); }
.wk-day.past .wk-items { opacity: 0.6; }
.wk-day.selected { border-color: rgba(242, 169, 59, 0.55); }
.wk-day.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wk-day.drop-target { border-color: var(--glow); background: rgba(255, 210, 122, 0.1); }

.wk-head {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 2px;
  padding: 10px 12px 8px; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--text); cursor: pointer; text-align: left;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.wk-head:hover { background: rgba(255, 220, 180, 0.05); }
.wk-dow { font: 700 11px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.wk-num { grid-row: 2; font: 400 24px/1 var(--pixel); }
.wk-count { grid-row: 2; font-size: 11px; color: var(--muted); align-self: end; }
.wk-day.is-today .wk-dow { color: var(--amber); }
.wk-day.is-today .wk-num { color: var(--glow); }

.wk-items { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.wk-empty { margin: 4px 2px; color: var(--muted); font-size: 12px; }
.wk-item {
  position: relative; display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 8px 8px 7px; border-radius: 10px; cursor: grab;
  background: var(--kfill); color: var(--kink);
  box-shadow: inset 0 0 0 1px var(--kline);
}
.wk-item.k-project { box-shadow: none; outline: 1px dashed var(--kline); outline-offset: -1px; }
.wk-item.pinned { box-shadow: inset 0 0 0 2px var(--glow); }
.wk-item.dragging { opacity: 0.4; }
.wk-item input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; margin: 1px 0 0; flex: none; }
.wk-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wk-title { font: 600 13px/1.3 var(--sans); overflow-wrap: anywhere; }
/* bottom line of a week item: kind tag and tools on one row, course underneath */
.wk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 22px; }
.wk-meta { order: 3; flex: 1 1 100%; min-width: 0; font-size: 11px; color: var(--muted); overflow-wrap: break-word; }
.wk-item:is(.k-test, .k-quiz) .wk-meta { color: #ffe3c2; }
.wk-item.done .wk-title { text-decoration: line-through; opacity: 0.6; }
/* pin and remove sit at the end of the item's bottom line and show on hover or keyboard focus */
.wk-tools { order: 2; display: flex; gap: 0; margin: 0 -4px 0 auto; opacity: 0; transition: opacity 0.15s; }
.wk-item:hover .wk-tools, .wk-item:focus-within .wk-tools { opacity: 1; }
.wk-tools .mini { padding: 3px 5px; color: inherit; opacity: 0.8; }

.wk-add { padding: 0 8px 8px; }
.wk-add-btn {
  width: 100%; padding: 7px; border-radius: 10px; cursor: pointer;
  border: 1px dashed var(--line-strong); background: none; color: var(--muted);
  font: 600 12px var(--sans);
}
.wk-add-btn:hover { color: var(--glow); border-color: var(--amber); }
.wk-add-form { display: flex; flex-direction: column; gap: 6px; }
.wk-add-form[hidden] { display: none; }
.wk-add-form input, .wk-add-form select {
  width: 100%; font: 13px var(--sans); color: var(--text);
  background: rgba(20, 12, 8, 0.6); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 7px 8px; outline: none;
}
.wk-add-form input:focus, .wk-add-form select:focus { border-color: var(--amber); }
.cal-dow { font: 700 11px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 0 6px 2px; }
.cal-cell {
  min-width: 0; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(255, 220, 180, 0.04);
  transition: border-color 0.15s, background-color 0.15s;
}
.cal-cell:hover { border-color: var(--line-strong); background: rgba(255, 220, 180, 0.07); }
.cal-cell.weekend { background: rgba(255, 220, 180, 0.02); }
.cal-cell.out { opacity: 0.4; }
.cal-cell.past .cal-chip { opacity: 0.6; }
.cal-cell.selected { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.cal-cell:focus-visible { outline-offset: 1px; }
.cal-cell.drop-target { border-color: var(--glow); background: rgba(255, 210, 122, 0.1); }
.cal-num { font: 400 16px/24px var(--pixel); min-width: 24px; align-self: flex-start; text-align: center; color: var(--muted); }
.cal-cell:not(.out):not(.past) .cal-num { color: var(--text); }
.cal-cell.is-today .cal-num {
  background: var(--accent-dark); color: #fff1dc; border-radius: 8px; padding: 0 6px;
  text-shadow: 1px 1px 0 var(--sign-ink);
}
.cal-chips { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.cal-chip {
  /* up to two lines, so titles read instead of cutting off after a word; weight shows the kind */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font: 600 12px/1.3 var(--sans); padding: 2px 6px; border-radius: 6px; cursor: grab;
  background: var(--kfill); color: var(--kink);
  box-shadow: inset 0 0 0 1px var(--kline);
  overflow: hidden; overflow-wrap: anywhere;
}
.cal-chip.done { text-decoration: line-through; opacity: 0.55; }
.cal-chip.pinned { box-shadow: inset 0 0 0 1px var(--glow); }
.cal-more { font: 600 11px var(--sans); color: var(--muted); padding-left: 4px; }

.cal-side {
  min-height: 0; overflow-y: auto; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
  border-left: 1px solid var(--line); background: rgba(20, 12, 8, 0.25);
}
.day-title { font: 400 16px var(--pixel); margin: 0; }
.day-when { margin: -10px 0 0; color: var(--muted); font-size: 13px; }
.day-items { display: flex; flex-direction: column; gap: 2px; }
.dl-info.jump { cursor: pointer; }
.dl-info.jump:hover .dl-title { text-decoration: underline; text-underline-offset: 3px; }
.drop-zone {
  padding: 18px; border-radius: var(--r-lg); text-align: center;
  border: 1px dashed var(--line-strong); background: rgba(20, 12, 8, 0.35);
  transition: border-color 0.18s, background-color 0.18s;
}
.cal-dialog.drop-hover .drop-zone { border-color: var(--amber); background: rgba(242, 169, 59, 0.08); }
.drop-icon { font-size: 27px; color: var(--amber); display: inline-flex; }
.drop-title { margin: 8px 0 4px; font: 400 16px var(--pixel); }
.drop-text { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.drop-zone .hint { margin: 12px 0 0; line-height: 1.45; }

.read-status {
  margin: 0; padding: 10px 12px; border-radius: var(--r-md); font-size: 13px; line-height: 1.45;
  background: rgba(20, 12, 8, 0.45); border: 1px solid var(--line);
}
.read-status.busy::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px;
  background: var(--amber); animation: blink 0.8s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.15; } }
.read-status.problem { color: #ffb59e; border-color: rgba(224, 102, 74, 0.4); }
.read-status.ask, .read-status.need-key { border-color: rgba(242, 169, 59, 0.45); }
.status-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.key-inline input {
  flex: 1; min-width: 160px; font: 13px ui-monospace, Consolas, monospace; color: var(--text);
  background: rgba(20, 12, 8, 0.6); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 7px 10px; outline: none;
}
.key-inline input:focus { border-color: var(--amber); }
.read-status.ok { color: #c9e3c4; border-color: rgba(159, 195, 154, 0.4); }
.cal-dialog.reading #photoPick { opacity: 0.5; pointer-events: none; }

.manual-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; }
#manDate { min-width: 128px; }
.manual-form input, .manual-form select {
  font: 14px var(--sans); color: var(--text); min-width: 0;
  background: rgba(20, 12, 8, 0.6); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 9px 10px; outline: none;
}
.manual-form input:focus, .manual-form select:focus { border-color: var(--amber); }
#manTitle { grid-column: 1 / -1; }

.deadline-list { display: flex; flex-direction: column; }
.dl-week { font: 700 11px var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 16px 2px 6px; }
.dl-week:first-child { margin-top: 4px; }
.dl-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 8px; border-radius: var(--r-md);
}
/* a small pixel square in the item's kind color */
.dl-row::before { content: ""; width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--kfill); box-shadow: inset 0 0 0 1.5px var(--kline); }
.dl-row:hover { background: var(--raised); }
.dl-row input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.dl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-title { font: 600 14px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-meta { font-size: 12px; color: var(--muted); }
.dl-row.done .dl-title { text-decoration: line-through; color: var(--muted); }
.dl-pin.on { color: var(--glow); }
.dl-empty { color: var(--muted); font-size: 13px; margin: 6px 2px; }

/* ---------- Review dialog ---------- */
dialog.wide { width: min(680px, calc(100vw - 32px)); }
.review-note {
  margin: -8px 0 16px; padding: 10px 12px; border-radius: var(--r-md); font-size: 13px; line-height: 1.45;
  background: rgba(242, 169, 59, 0.08); border: 1px solid rgba(242, 169, 59, 0.3);
}
.rv-head, .rv-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 184px 116px 120px; gap: 8px; align-items: center;
}
.rv-head { font: 700 11px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 0 2px 6px; }
.rv-rows { max-height: min(50vh, 420px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.rv-row input:not([type=checkbox]), .rv-row select { width: 100%; padding: 8px 9px; }
.rv-flag { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-row:has(.rv-check:not(:checked)) :is(.rv-title, .rv-date, .rv-kind) { opacity: 0.5; }
#reviewAdd:disabled { opacity: 0.5; cursor: default; }
.review-cost { flex: 1; text-align: right; color: var(--muted); font-size: 12px; }

/* ---------- Hourly forecast ---------- */
#forecastDialog { width: min(640px, calc(100vw - 32px)); }
.forecast-summary { margin: -8px 0 18px; font-size: 14px; line-height: 1.5; }
.forecast-hours {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: 4px;
  overflow-x: auto; padding-bottom: 4px;
}
.fc-hour {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 2px; border-radius: var(--r-md); background: rgba(20, 12, 8, 0.4);
}
.fc-hour:first-child { background: rgba(232, 116, 42, 0.18); }
.fc-hour.wet { box-shadow: inset 0 -3px 0 rgba(180, 205, 230, 0.5); }
.fc-time { font: 600 11px var(--sans); color: var(--muted); white-space: nowrap; }
.fc-icon { font-size: 18px; color: var(--amber); display: inline-flex; }
.fc-temp { font: 400 16px var(--pixel); }
.fc-pop { font: 600 11px var(--sans); color: #b9d3ea; min-height: 14px; }

/* ---------- API key field ---------- */
.key-row { display: flex; gap: 8px; }
.key-row input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace !important; }
.field-note { margin: 0; color: var(--muted); font: 400 12px/1.5 var(--sans); }
.field-note a { color: var(--amber); text-underline-offset: 2px; }
dialog input:invalid:not(:placeholder-shown) { border-color: var(--danger); }

/* ---------- Falling pixel leaves ---------- */
.leaves { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.leaf {
  position: absolute; top: 0;
  width: 3px; height: 3px; background: transparent;
  /* a tiny 4x4 pixel leaf drawn with shadows */
  box-shadow:
    3px 0 currentColor, 6px 0 currentColor,
    0 3px currentColor, 3px 3px currentColor, 6px 3px currentColor, 9px 3px currentColor,
    0 6px currentColor, 3px 6px currentColor, 6px 6px currentColor,
    3px 9px rgba(90, 50, 20, 0.9);
  color: var(--amber);
  opacity: 0.5;
  animation: fall linear infinite;
}
.leaf.o { color: var(--accent); }
.leaf.g { color: var(--glow); opacity: 0.35; }
@keyframes fall {
  0%   { transform: translate(0, -20px) rotate(0deg) scale(var(--s, 1)); }
  50%  { transform: translate(calc(var(--drift) * 0.6), 50vh) rotate(90deg) scale(var(--s, 1)); }
  100% { transform: translate(var(--drift), 105vh) rotate(180deg) scale(var(--s, 1)); }
}

/* Rain: short pixel streaks falling fast at a slight slant */
.drop {
  position: absolute; top: 0;
  width: 2px; height: 14px;
  background: linear-gradient(180deg, transparent, rgba(255, 228, 196, 0.9));
  animation: rain linear infinite;
}
@keyframes rain {
  from { transform: translate(0, -30px) rotate(8deg); }
  to   { transform: translate(-14vh, 105vh) rotate(8deg); }
}

/* Snow: tiny pixel plus-shaped flakes drifting down */
.flake {
  position: absolute; top: 0;
  width: 3px; height: 3px; background: #fff4de;
  box-shadow: 3px 0 #fff4de, -3px 0 #fff4de, 0 3px #fff4de, 0 -3px #fff4de;
  opacity: 0.7;
  animation: snowfall linear infinite;
}
@keyframes snowfall {
  0%   { transform: translate(0, -20px) scale(var(--s, 1)); }
  50%  { transform: translate(calc(var(--drift) * -0.5), 50vh) scale(var(--s, 1)); }
  100% { transform: translate(var(--drift), 105vh) scale(var(--s, 1)); }
}

/* With Windows animations turned off, the weather stays as a still scene instead of falling
   (unless Settings says to let it move anyway, which puts .motion-on on the body) */
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) .leaf, body:not(.motion-on) .flake { animation: none; transform: translateY(var(--y)) scale(var(--s, 1)); }
  body:not(.motion-on) .drop { animation: none; transform: translateY(var(--y)) rotate(8deg); }
  body:not(.motion-on) .sky::after { animation: none; }
  body:not(.motion-on) .record { animation: none; }
  .drawer, .tile, .nav-item { transition: none; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .sign { grid-template-columns: auto minmax(0, 1fr); gap: 12px 24px; }
  .daybar { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; max-width: none; }
  .sign-end { justify-self: end; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; padding: 16px; }
  .sidebar { display: none; }
  .mobile-only { display: inline-flex; }
  .topbar { flex-wrap: wrap; }
  .search { order: 3; flex: 1 1 100%; }
  /* School first, then what's due, then the clock */
  .main { display: flex; flex-direction: column; }
  .topbar { order: 0; }
  /* Coming up joins the board right after the first item (board.js puts it there) */
  .groups { order: 1; gap: 16px; margin-bottom: 16px; }
  .mobile-due { display: block; grid-column: 1 / -1; padding: 18px 18px 14px; }
  .mobile-due .side-head { margin: 0 0 8px; }
  .sign { order: 4; margin: 8px 0 0; }
  .add-group-wrap { order: 4; }
}
@media (max-width: 560px) {
  .sign { padding: 14px 16px 14px 104px; gap: 10px 16px; }
  .sign .record { left: -56px; }
  .clock { font-size: 32px; }
  .sign-date { font-size: 16px; }
  .greeting { white-space: normal; }
  .two { grid-template-columns: 1fr; }
}
/* Calendar on narrower screens: the day panel moves under the grid; chips become color bars */
@media (max-width: 900px) {
  .cal-dialog { width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .cal-body { grid-template-columns: 1fr; grid-auto-rows: max-content; overflow-y: auto; }
  .cal-main, .cal-side { min-height: auto; overflow: visible; }
  .cal-side { border-left: 0; border-top: 1px solid var(--line); }
  .cal-grid { grid-template-rows: auto repeat(var(--rows, 6), minmax(58px, 1fr)); }
  .cal-chip { font-size: 0; padding: 0; height: 5px; }
  .cal-chip::before { display: none; }
  .cal-chip { background: var(--kbar); box-shadow: none; }
  /* the week becomes a stack of days */
  .week-grid { grid-template-columns: 1fr; }
  .wk-items { overflow: visible; }
  .wk-tools { opacity: 1; position: static; background: none; margin-left: auto; }
}
@media (max-width: 640px) {
  .cal-top { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .cal-nav { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; min-width: 0; }
  .cal-title { min-width: 0; font-size: 16px; margin: 0 4px; }
  .cal-nav #calToday { margin-left: 4px; }
  .cal-views { order: 3; }
  .cal-main { padding: 10px; }
  .cal-grid { gap: 3px; }
  .cal-cell { padding: 3px; }
  .rv-head { display: none; }
  .rv-row { grid-template-columns: 20px 1fr 1fr; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .rv-title { grid-column: 2 / -1; }
  .rv-flag { grid-column: 2 / -1; }
  .rv-date { grid-column: 2; }
}

/* ---------- Placeholders, toast, calendar legend ---------- */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 16px; border-radius: var(--r-lg);
  background: #2e1d14; color: var(--text); font: 600 13px var(--sans);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, 12px); opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast[hidden] { display: none; }
.toast-undo {
  font: 700 12px var(--sans); letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--glow); background: rgba(255, 210, 122, 0.08);
  border: 1px solid rgba(255, 210, 122, 0.35); border-radius: var(--r-md);
  padding: 7px 12px; cursor: pointer;
}
.toast-undo:hover { background: rgba(255, 210, 122, 0.16); }
.toast-undo[hidden] { display: none; }

.cal-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cal-legend[hidden] { display: none; }
.cal-grid .cal-week { display: contents; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* When the sidebar holds more than fits, its lower edge fades above the pinned notes card */
.sidebar.overflowing {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent calc(100% - 72px), #000 calc(100% - 70px));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent calc(100% - 72px), #000 calc(100% - 70px));
}
/* inside a dialog the toast sits on the dialog's own bottom edge, not straddling it */
dialog .toast { position: absolute; bottom: 16px; }

.two-times { display: flex; gap: 12px; }
dialog input[type="range"] { accent-color: var(--amber); padding: 0; border: 0; background: none; width: 100%; }
dialog label.range-head { flex-direction: row; justify-content: space-between; align-items: baseline; }
#opacityOut { color: var(--amber); font-weight: 700; }
.two-times label.inline { flex-direction: row; align-items: center; gap: 8px; margin: 0; color: var(--text); }

/* keyboard focus on tiles keeps a real outline, not just the hover lift */
.tile:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.greeting { max-width: 36ch; }
.wk-foot .kind-tag { font-size: 11px; padding: 0 5px; }

/* Review: titles wrap, the weekday sits by the date, guesses and weekend due dates stand out */
.rv-row textarea.rv-title {
  width: 100%; resize: none; font: 14px/1.35 var(--sans); color: var(--text);
  background: rgba(20, 12, 8, 0.6); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 6px 9px; outline: none; min-height: 0;
}
.rv-row textarea.rv-title:focus { border-color: var(--amber); }
.rv-datebox { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rv-datebox .rv-date { min-width: 0; flex: 1; }
.rv-dow { font: 700 11px var(--sans); color: var(--muted); text-transform: uppercase; width: 28px; flex: none; }
.rv-row { padding: 4px 6px; border-radius: var(--r-md); }
.rv-row.unsure { background: rgba(242, 169, 59, 0.1); box-shadow: inset 0 0 0 1px rgba(242, 169, 59, 0.45); }
.rv-row.unsure .rv-flag, .rv-row.weekend-due .rv-flag { color: var(--glow); font-weight: 600; }
.rv-row.weekend-due .rv-dow { color: var(--glow); }
.read-thumb {
  float: left; width: 56px; height: 56px; object-fit: cover; margin: 0 12px 4px 0;
  border-radius: 8px; border: 1px solid var(--line-strong);
}
.read-status::after { content: ""; display: block; clear: both; }
.read-status .side-link { align-self: center; }

/* review titles grow to fit (up to three lines) instead of scrolling; flags wrap */
.rv-row textarea.rv-title { field-sizing: content; max-height: 4.3em; overflow: hidden; }
.rv-flag { white-space: normal; line-height: 1.3; }
/* ---------- Plan: the weekly time-block grid ---------- */
.plan-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.plan-wrap[hidden] { display: none; }
.cal-dialog.plan-view .cal-main { padding: 12px 20px 16px; }
.plan-bar { display: flex; align-items: center; gap: 12px; }
.plan-hint { margin: 0; flex: 1; color: var(--muted); font-size: 13px; }

.plan-scroll {
  flex: 1; min-height: 0; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(20, 12, 8, 0.35);
}
.plan-grid {
  display: grid; grid-template-columns: 56px repeat(7, minmax(112px, 1fr));
  grid-template-rows: auto calc(var(--rows) * var(--row-h));
  min-width: 840px;
}
.plan-corner, .plan-head {
  position: sticky; top: 0; z-index: 3;
  background: #2b1c14; border-bottom: 1px solid var(--line-strong);
}
.plan-corner { left: 0; z-index: 4; }
.plan-head { padding: 8px 8px 6px; border-left: 1px solid var(--line); min-width: 0; }
.plan-dayname { display: flex; align-items: baseline; gap: 6px; }
.plan-dayname span { font: 700 11px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.plan-dayname b { font: 400 16px var(--pixel); }
.plan-head.is-today .plan-dayname span { color: var(--amber); }
.plan-head.is-today .plan-dayname b { color: var(--glow); }
.plan-due { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; min-height: 18px; }
.plan-due-chip {
  font: 600 11px/1.3 var(--sans); padding: 1px 6px; border-radius: 5px; cursor: grab;
  background: var(--kfill); color: var(--kink); box-shadow: inset 0 0 0 1px var(--kline);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-due-more { font: 600 11px var(--sans); color: var(--muted); }

.plan-times { position: sticky; left: 0; z-index: 2; background: #22160f; border-right: 1px solid var(--line); }
.plan-times span {
  position: absolute; right: 8px; transform: translateY(-50%);
  font: 600 11px var(--sans); color: var(--muted); white-space: nowrap;
}
.plan-times span:first-child { transform: none; top: 2px !important; }

.plan-col {
  position: relative; border-left: 1px solid var(--line); cursor: crosshair; touch-action: none;
  /* a line every hour, a fainter one every half hour */
  background:
    repeating-linear-gradient(to bottom, rgba(255, 220, 180, 0.09) 0 1px, transparent 1px calc(var(--row-h) * 2)),
    repeating-linear-gradient(to bottom, rgba(255, 220, 180, 0.035) 0 1px, transparent 1px var(--row-h));
}
.plan-col.is-today { background-color: rgba(242, 169, 59, 0.035); }
.plan-col.drop-target { background-color: rgba(255, 210, 122, 0.1); }

.plan-school {
  position: absolute; left: 0; right: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255, 220, 180, 0.05) 0 6px, transparent 6px 12px);
  border-block: 1px dashed rgba(255, 220, 180, 0.14);
  font: 700 11px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: rgba(198, 169, 142, 0.7);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 6px;
}
.plan-now { position: absolute; left: -1px; right: 0; height: 2px; background: var(--glow); z-index: 2; pointer-events: none; }
.plan-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 2px; background: var(--glow); }

/* Blocks use the same weight system as deadlines: study solid, practice outlined, project dashed, breaks quiet */
.c-study    { --kfill: #8f3c15; --kline: #b4501d; --kink: #fff1dc; }
.c-practice { --kfill: rgba(242, 169, 59, 0.08); --kline: rgba(242, 169, 59, 0.7); --kink: var(--text); }
.c-project  { --kfill: rgba(242, 169, 59, 0.05); --kline: rgba(242, 169, 59, 0.6); --kink: var(--text); }
.c-break    { --kfill: rgba(159, 195, 154, 0.14); --kline: transparent; --kink: #cfe6ca; }
.c-free     { --kfill: rgba(255, 220, 180, 0.08); --kline: transparent; --kink: var(--muted); }

.plan-block {
  position: absolute; z-index: 1; overflow: hidden; cursor: grab; touch-action: none;
  display: flex; flex-direction: column; gap: 1px; padding: 4px 7px;
  border-radius: 8px; background: var(--kfill); color: var(--kink);
  box-shadow: inset 0 0 0 1px var(--kline), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  font-family: var(--sans);
}
.plan-block.c-project { box-shadow: none; outline: 1px dashed var(--kline); outline-offset: -1px; }
.plan-block:focus-visible { outline: 2px solid var(--glow); outline-offset: 1px; }
.plan-block.dragging { z-index: 5; cursor: grabbing; opacity: 0.92; box-shadow: inset 0 0 0 1px var(--kline), 0 10px 20px -8px rgba(0, 0, 0, 0.6); }
.plan-block-title { font: 600 12px/1.25 var(--sans); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
.plan-block-time { font: 600 11px/1.2 var(--sans); opacity: 0.8; white-space: nowrap; }
.plan-block.short { flex-direction: row; align-items: center; gap: 6px; padding-block: 1px; }
.plan-block.short .plan-block-title { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; }
.plan-block.short .plan-block-time { display: none; }
.plan-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.plan-ghost {
  background: rgba(255, 210, 122, 0.12); box-shadow: inset 0 0 0 1px var(--glow); color: var(--glow);
  font: 600 11px var(--sans); pointer-events: none; z-index: 4;
}

/* the block editor sits next to the block or column it came from */
.plan-editor {
  position: absolute; z-index: 10; width: 280px;
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: linear-gradient(165deg, #3a271d, #24170f);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.75);
}
.plan-editor :is(input:not([type=checkbox]), select) {
  width: 100%; min-width: 0; font: 13px var(--sans); color: var(--text);
  background: rgba(20, 12, 8, 0.6); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 7px 8px; outline: none;
}
.plan-editor :is(input, select):focus { border-color: var(--amber); }
.plan-editor .pe-title { font-size: 14px; font-weight: 600; }
.pe-row { display: flex; align-items: center; gap: 6px; }
.pe-to { color: var(--muted); font-size: 12px; }
dialog .plan-editor label.pe-weekly { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font: 600 13px var(--sans); color: var(--text); }
.pe-weekly input { accent-color: var(--accent); width: 15px; height: 15px; }
.pe-note { margin: -2px 0 0; color: var(--muted); font-size: 12px; }
.pe-note[hidden] { display: none; }
.pe-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; }

/* the greeting doubles as a link to the plan when it's about a planned block */
.greeting.is-link { cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 241, 220, 0.5); }
.greeting.is-link:hover { text-decoration-color: #fff1dc; }

@media (max-width: 640px) {
  .plan-hint { display: none; }
  .plan-editor { left: 8px !important; right: 8px; width: auto; }
}
/* "Use this week again": two clear choices, each saying what it does */
.plan-reuse { width: 320px; }
.pr-lead { margin: 0 0 2px; font: 600 13px var(--sans); }
.pr-option {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: var(--r-md); font: inherit; color: var(--text);
  background: rgba(20, 12, 8, 0.45); border: 1px solid var(--line-strong);
}
.pr-option:hover, .pr-option:focus-visible { border-color: var(--amber); background: rgba(242, 169, 59, 0.08); }
.pr-option strong { font: 700 13px var(--sans); }
.pr-option span { font-size: 12px; line-height: 1.4; color: var(--muted); }

/* ---------- Seasonal decorations (season.js): fall, and Halloween in October ----------
   Pixel sprites at whole-number scales (2px per pixel, 3px for the moon and ghost) so they stay crisp. */
.decor, .decor * { pointer-events: none; }
.main { position: relative; }

/* A string of lanterns, pumpkins and leaves across the top of the page, above the search bar */
.season-fall .topbar { padding-top: 16px; }
.garland {
  position: absolute; left: 0; right: 0; top: -18px; height: 34px; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='14' viewBox='0 0 112 14' shape-rendering='crispEdges'%3E%3Cpath d='M0 2 Q56 18 112 2' fill='none' stroke='%238a6142' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0 / 112px 14px;
}
.garland-item {
  position: absolute; top: 9px; translate: -50% 0; transform-origin: 50% 0;
  animation: sway 3.6s ease-in-out var(--sway-delay, 0s) infinite alternate;
}
.garland-item .sprite { display: block; }
.g-lantern .sprite, .g-lanternPurple .sprite { width: 14px; height: 22px; }
.g-pumpkin .sprite { width: 22px; height: 18px; }
.g-leafRed .sprite, .g-leafAmber .sprite { width: 14px; height: 14px; rotate: 180deg; } /* hung by the stem */
@keyframes sway { from { rotate: -6deg; } to { rotate: 6deg; } }
/* the lanterns are lit once the sun's going down */
body:is([data-time="dusk"], [data-time="night"]) .g-lantern { filter: drop-shadow(0 0 5px rgba(255, 190, 90, 0.6)); }
body:is([data-time="dusk"], [data-time="night"]) .g-lanternPurple { filter: drop-shadow(0 0 5px rgba(196, 150, 255, 0.5)); }

/* On the sign: a pumpkin beside the weather, outlined in the sign's ink like its lettering */
.sign { isolation: isolate; }
.sign-end { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sign-pumpkin {
  display: inline-flex; flex: none;
  filter: drop-shadow(2px 0 0 var(--sign-ink)) drop-shadow(-2px 0 0 var(--sign-ink)) drop-shadow(0 2px 0 var(--sign-ink)) drop-shadow(0 -2px 0 var(--sign-ink));
}
.sign-pumpkin .sprite { display: block; width: 22px; height: 18px; }
.sign-pumpkin.lit .sprite { width: 26px; height: 22px; }
.sign-pumpkin.lit .px-y { animation: flicker 2.8s steps(1, end) infinite; }
@keyframes flicker { 0%, 100% { fill: #ffd27a; } 36% { fill: #ffb54a; } 41% { fill: #ffe7a8; } 68% { fill: #ffc15c; } }

/* A cobweb in the sign's top corner and a spider on a thread, both behind the sign's contents */
.sign-web { position: absolute; top: 0; right: 0; z-index: -1; width: 48px; height: 48px; color: rgba(255, 241, 220, 0.45); }
.sign-web svg { display: block; width: 48px; height: 48px; }
.sign-spider {
  position: absolute; top: -20px; right: 30%; z-index: -1;
  display: flex; flex-direction: column; align-items: center;
  animation: dangle 5s steps(6) infinite alternate;
}
.sign-spider i { width: 2px; height: 34px; background: rgba(255, 241, 220, 0.55); }
.sign-spider .sprite { display: block; width: 14px; height: 10px; }
@keyframes dangle { from { translate: 0 -6px; } to { translate: 0 8px; } }

/* A ghost peeking over the School panel, from behind it. It ducks when you reach for a link. */
.season-halloween .group.lead { position: relative; }
.season-halloween .group.lead::before {
  content: ""; position: absolute; z-index: -1; top: -24px; right: 72px;
  width: 27px; height: 33px; pointer-events: none;
  background: var(--spr-ghost) center / 100% 100% no-repeat; image-rendering: pixelated;
  clip-path: inset(0 0 6px 0); /* the panel is a touch see-through; keep the tail from showing through it */
  animation: peek 3.2s steps(2) infinite alternate;
  transition: transform 0.45s steps(4);
}
.season-halloween .group.lead:is(:hover, :focus-within)::before { transform: translateY(30px); }
@keyframes peek { from { translate: 0 0; } to { translate: 0 -3px; } }

/* Moon and bats, behind everything, only once the sun's going down */
.season-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 3s; }
body:is([data-time="dusk"], [data-time="night"]) .season-sky { opacity: 1; }
.moon { position: absolute; top: 26px; right: 24vw; }
body[data-time="dusk"] .moon { opacity: 0.7; }
.moon .sprite { display: block; width: 48px; height: 48px; filter: drop-shadow(0 0 16px rgba(246, 231, 200, 0.22)); }
.bat { position: absolute; left: 0; top: var(--by); animation: fly var(--bd) linear var(--bdelay) infinite; }
.bat .sprite { display: block; width: 26px; height: 12px; animation: flap 0.36s steps(1, end) infinite; }
.bat-0 { --by: 10px; --bd: 34s; --bdelay: -6s; }
.bat-1 { --by: 34px; --bd: 47s; --bdelay: -22s; scale: 0.75; }
.bat-2 { --by: 4px; --bd: 41s; --bdelay: -33s; scale: 0.85; }
@keyframes fly {
  from { translate: -40px 0; }
  25% { translate: 25vw 16px; }
  50% { translate: 50vw -4px; }
  75% { translate: 75vw 12px; }
  to { translate: calc(100vw + 40px) 0; }
}
@keyframes flap { 50% { transform: scaleY(0.5); } }

/* Halloween dusk and night lean purple at the top of the sky */
body.season-halloween[data-time="dusk"] { --g-sky: rgba(160, 100, 210, 0.16); }
body.season-halloween[data-time="night"] { --g-sky: rgba(130, 90, 200, 0.12); --g-low: rgba(123, 79, 176, 0.08); }

/* a few red maple leaves among the amber ones */
.leaf.r { color: #c9472a; opacity: 0.55; }

/* With Windows animations off, it's a still scene: bats hang by the moon, nothing sways */
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) :is(.garland-item, .sign-pumpkin .px-y, .sign-spider, .bat, .bat .sprite) { animation: none; }
  body:not(.motion-on).season-halloween .group.lead::before { animation: none; transition: none; }
  body:not(.motion-on) .bat { left: auto; right: calc(24vw + 58px); }
  body:not(.motion-on) .bat-1 { right: calc(24vw - 30px); --by: 70px; }
  body:not(.motion-on) .bat-2 { display: none; }
}

@media (max-width: 900px) {
  .garland { top: -16px; }
  .moon { right: 24px; top: 30px; }
  body:not(.motion-on) .bat { right: 96px; }
}
/* on a phone the sign stacks: clock, school day, then pumpkin and weather; the spider sits this one out */
@media (max-width: 560px) {
  .sign { grid-template-columns: minmax(0, 1fr); }
  .sign-clockrow { flex-wrap: wrap; row-gap: 6px; }
  .sign-date { flex-direction: row; gap: 8px; }
  .sign-end { justify-self: start; }
  .sign-spider { display: none; }
}
/* ---------- Widgets (widgets.js): iPhone-style cards under School ----------
   A grid of square-ish cells: small is one cell, medium two across, large two by two. */
.widget {
  position: relative; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; padding: 16px;
}
.w-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.w-body.is-empty { justify-content: center; align-items: flex-start; gap: 12px; }
.w-head {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; white-space: nowrap; min-width: 0;
  font: 700 11px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.w-head .w-sub { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.w-empty-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.w-more { margin: 0; color: var(--muted); font-size: 12px; }

/* an Edit button that shows on hover; in Edit mode a toolbar instead */
.w-edit { position: absolute; top: 8px; right: 8px; opacity: 0; background: rgba(26, 16, 11, 0.85); transition: opacity 0.15s; }
.widget:hover .w-edit, .widget:focus-within .w-edit { opacity: 1; }
.widget:hover:has(.w-edit) .w-head .w-sub, .widget:focus-within:has(.w-edit) .w-head .w-sub { visibility: hidden; }
.w-tools {
  position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; padding: 2px; max-width: calc(100% - 12px);
  background: rgba(26, 16, 11, 0.92); border: 1px solid var(--line-strong); border-radius: 10px;
}
body.editing .widget { cursor: grab; border-style: dashed; border-color: var(--line-strong); }
.widget.dragging { opacity: 0.35; border-color: var(--glow); }
.widget-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-xl); background: transparent;
  color: var(--muted); font: 600 13px var(--sans); cursor: pointer;
}
.widget-add .plus { font: 700 24px var(--pixel); }
.widget-add:hover, .widget-add:focus-visible { color: var(--glow); border-color: var(--amber); }

/* checkable lists: goals and to-dos */
.w-list { list-style: none; margin: 0; padding: 0 2px 0 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; flex: 1; }
.w-list li { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.35; }
.w-list label { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; cursor: pointer; overflow-wrap: anywhere; }
.w-list input[type="checkbox"] { accent-color: var(--amber); width: 15px; height: 15px; margin: 2px 0 0; flex: none; }
.w-list li.done span { color: var(--muted); text-decoration: line-through; }
.w-x { flex: none; border: 0; background: none; color: var(--muted); font-size: 9px; padding: 4px; border-radius: 6px; cursor: pointer; opacity: 0; }
.w-list li:hover .w-x, .w-x:focus-visible { opacity: 1; }
.w-x:hover { color: var(--danger); }
.w-clear { margin-left: auto; border: 0; background: none; padding: 0; color: var(--amber); font: 600 12px var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; }
.w-clear:hover { text-decoration: underline; }
.w-clear + .w-sub, .w-head:has(.w-clear) .w-sub { margin-left: 0; }
.w-addrow input {
  width: 100%; font: 14px var(--sans); color: var(--text);
  background: rgba(20, 12, 8, 0.5); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
}
.w-addrow input:focus { outline: none; border-color: var(--amber); }

/* goals: the reason, in your own words, front and centre */
.w-why {
  margin: 0; padding-left: 12px; border-left: 3px solid var(--amber);
  font: 600 16px/1.45 var(--sans); color: var(--text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; flex: none;
}
.size-s .w-why { font-size: 14px; -webkit-line-clamp: 5; }
.w-goal-line { margin: auto 0 0; display: flex; align-items: baseline; gap: 8px; font: 600 13px/1.35 var(--sans); color: var(--text); min-width: 0; }
.w-goal-line span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-goal-tag { flex: none; font: 700 10px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--bg); background: var(--amber); padding: 2px 6px; border-radius: 4px; }
.size-l .w-why { font-size: 18px; -webkit-line-clamp: 6; }

/* countdown */
.w-count { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 0; }
.size-m .w-count { flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
.w-count-text { display: flex; flex-direction: column; gap: 4px; }
.w-big { font: 700 48px/1 var(--pixel); color: var(--glow); text-shadow: 2px 2px 0 var(--sign-ink); }
.w-big.word { font-size: 32px; }
.w-unit { font: 600 13px var(--sans); color: var(--muted); }
.w-when { font: 700 15px var(--sans); color: var(--text); }

/* focus timer */
.w-timer .w-body { align-items: center; justify-content: center; text-align: center; gap: 10px; }
.w-timer .w-head { align-self: stretch; }
.w-head.is-break { color: #9fc39a; }
.t-time { font: 700 40px/1 var(--pixel); color: var(--text); font-variant-numeric: tabular-nums; }
.size-m .t-time { font-size: 48px; }
.w-timer.running .t-time { color: var(--glow); text-shadow: 2px 2px 0 var(--sign-ink); }
.t-ctrl { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.t-pips { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.t-pips i { width: 8px; height: 8px; border-radius: 2px; background: rgba(255, 220, 180, 0.12); }
.t-pips i.on { background: var(--amber); }
.t-pips span { margin-left: 6px; }

/* today's plan: blocks use the same category weights as the Plan tab */
.w-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; flex: 1; }
.w-block {
  width: 100%; display: flex; align-items: baseline; gap: 10px; text-align: left; cursor: pointer;
  padding: 7px 10px; border-radius: 10px; font: 600 13px var(--sans);
  background: var(--kfill); border: 1px solid var(--kline); color: var(--kink);
}
.w-block.c-project { border-style: dashed; }
.w-block time { flex: none; min-width: 58px; font-weight: 700; opacity: 0.85; }
.w-block-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-block.past { opacity: 0.45; }
.w-block.now { outline: 2px solid var(--glow); outline-offset: 1px; }
.w-now-tag { flex: none; font: 700 10px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--glow); }
.w-block.now .w-now-tag { order: 3; margin-left: auto; }
.w-block.stacked { flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; padding: 10px 12px; }
.w-block.stacked .w-now-tag { order: 0; margin: 0; }
.w-block.stacked .w-block-title { white-space: normal; font-size: 15px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.w-block.stacked time { order: 3; min-width: 0; font-weight: 600; }
.w-block:hover { filter: brightness(1.12); }

/* photo frame: the picture fills the card, inside a thin dark frame */
.widget.w-photo { padding: 0; }
.w-photo .w-body { position: relative; gap: 0; }
.w-photo .w-body.is-empty { padding: 16px; }
.w-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-img.pixel { image-rendering: pixelated; }
.widget.w-photo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 4px rgba(42, 23, 13, 0.55), inset 0 0 0 5px rgba(255, 205, 150, 0.14);
}
.w-caption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 28px 16px 14px;
  font: 600 14px/1.3 var(--sans); color: #fff1dc; text-shadow: 1px 1px 0 var(--sign-ink);
  background: linear-gradient(transparent, rgba(20, 12, 8, 0.85));
}

/* the gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border-radius: var(--r-lg); background: rgba(20, 12, 8, 0.45); border: 1px solid var(--line-strong);
}
.gallery-card h4 { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 14px var(--sans); color: var(--text); }
.gallery-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--accent-dark); color: #fff1dc; }
.gallery-card p { margin: 0; flex: 1; color: var(--muted); font-size: 13px; line-height: 1.4; }
.gallery-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.gallery-sizes .btn { display: inline-flex; align-items: center; gap: 6px; }
.sz { display: inline-block; height: 8px; border: 1.5px solid currentColor; border-radius: 2px; }
.sz-s { width: 8px; }
.sz-m { width: 16px; }
.sz-l { width: 16px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .w-edit { transition: none; }
}

/* ---------- Board editing (board.js): grips, resize corners, the lifted item ---------- */
.grip { display: inline-flex; color: var(--muted); font-size: 16px; cursor: grab; padding: 6px 2px; margin: -6px -4px -6px -6px; border-radius: 6px; touch-action: none; }
.grip:hover { color: var(--glow); background: var(--raised); }
.grip:active { cursor: grabbing; }
.board-item.dragging { opacity: 0.35; outline: 2px dashed var(--glow); outline-offset: 2px; }
body.dragging-board .board-item:not(.dragging) { transition: none; }

/* bottom-right corner: drag it to resize */
.resize-handle {
  position: absolute; right: 4px; bottom: 4px; z-index: 3; width: 22px; height: 22px;
  cursor: nwse-resize; touch-action: none; border-radius: 6px;
  background:
    linear-gradient(var(--muted), var(--muted)) right 5px bottom 5px / 10px 2px no-repeat,
    linear-gradient(var(--muted), var(--muted)) right 5px bottom 5px / 2px 10px no-repeat;
}
.group > .resize-handle { cursor: ew-resize; }
.resize-handle:hover, .resizing .resize-handle {
  background-color: rgba(26, 16, 11, 0.85);
  background-image: linear-gradient(var(--glow), var(--glow)), linear-gradient(var(--glow), var(--glow));
}
.board-item.resizing { outline: 2px solid var(--glow); outline-offset: 2px; z-index: 4; }
.resize-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  padding: 6px 12px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  background: #2e1d14; border: 1px solid var(--amber); color: var(--glow); font: 700 16px var(--pixel);
}

/* widgets size their text to their own width */
.widget { container-type: inline-size; }
@container (max-width: 150px) {
  .t-time { font-size: 32px; }
  .w-big { font-size: 40px; }
  .w-big.word { font-size: 24px; }
}
@container (min-width: 360px) {
  .size-l .t-time, .size-m .t-time { font-size: 64px; }
}
/* tall and narrow: the why gets more lines */
.size-t .w-why { -webkit-line-clamp: 9; }
.size-t .w-count, .size-l .w-count { justify-content: center; }
.size-t .t-ctrl { flex-direction: column; align-items: stretch; }
.widget.size-t .w-block time { min-width: 0; }
.sz-t { width: 8px; height: 16px; }
.w-tools .mini { padding: 6px 5px; }
.groups > .mobile-due { align-self: start; }

/* Settings → Sync: the Cloudflare server */
.cloud-box { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cloud-box label { margin: 0; }
.cloud-box [hidden] { display: none; }
.cloud-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cloud-actions .field-note { flex: 1 1 100%; }
.cloud-actions .field-note:empty { display: none; }

/* ---------- Notepad widget: a page of lined pixel paper ----------
   Stepped 4px corners instead of rounded ones, a hard pixel drop shadow instead of a soft one,
   a spiral coil punched through the top, ruled lines that scroll with the writing, and a red margin. */
.widget.w-notepad { background: none; border-color: transparent; box-shadow: none; padding: 4px 10px 10px 4px; }
body.editing .widget.w-notepad { border-color: var(--line-strong); }
.w-notepad .w-body { gap: 0; filter: drop-shadow(4px 4px 0 rgba(20, 12, 8, 0.6)); }
.np-paper {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: #f1e2c6; color: #3a2318;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
/* the spiral: a punched hole and a wire loop every 12px, on a slightly darker strip */
.np-coil {
  flex: none; height: 16px; background-color: #e3cfa8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' shape-rendering='crispEdges'%3E%3Crect x='3' y='9' width='6' height='4' fill='%232a170d'/%3E%3Crect x='4' y='1' width='1' height='10' fill='%237a6a58'/%3E%3Crect x='7' y='1' width='1' height='10' fill='%237a6a58'/%3E%3Crect x='5' y='0' width='2' height='1' fill='%237a6a58'/%3E%3Crect x='5' y='1' width='2' height='1' fill='%23d8c8b0'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 6px 0; background-size: 12px 16px;
  border-bottom: 2px solid rgba(122, 82, 54, 0.25);
}
.np-title {
  margin: 8px 40px 0 38px; flex: none;
  font: 700 16px/1 var(--pixel); text-transform: uppercase; color: #a9481a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-pencil { position: absolute; top: 22px; right: 10px; pointer-events: none; }
.np-pencil .sprite { display: block; width: 22px; height: 20px; }
/* 16px text: anything smaller makes the iPhone zoom in when you tap to type */
.np-text {
  flex: 1; min-height: 0; width: 100%; resize: none; border: 0; outline: none; margin: 0;
  padding: 4px 12px 8px 38px; color: #3a2318; caret-color: #a9481a;
  font: 500 16px/24px var(--sans);
  background:
    linear-gradient(90deg, transparent 28px, rgba(201, 71, 42, 0.55) 28px, rgba(201, 71, 42, 0.55) 30px, transparent 30px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 23px, rgba(122, 82, 54, 0.3) 23px, rgba(122, 82, 54, 0.3) 24px);
  background-attachment: local; background-position: 0 4px;
  scrollbar-width: thin; scrollbar-color: #c9b48f transparent;
}
.np-text::placeholder { color: rgba(58, 35, 24, 0.42); }
.np-paper:focus-within { box-shadow: inset 0 0 0 2px var(--amber); }
.w-notepad .w-edit { top: 22px; right: 36px; }