/* =====================================================================
   WINDOW MANAGER + DESKTOP CHROME
   Menubar, sidebar, desktop zones, windows, dock, toast.
   Uses theme variables only.
   ===================================================================== */

/* ===== menubar ===== */
.menubar {
  display: flex; align-items: center; gap: 16px;
  background: var(--chrome); color: var(--on-chrome); border-bottom: var(--b); padding: 8px 18px;
}
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 800; font-size: 26px; }
.search {
  display: flex; align-items: center; gap: 8px; background: var(--surface); color: var(--ink); border: var(--b);
  padding: 0 6px 0 14px; height: 36px; flex: 0 1 340px;
}
.search input { border: none; background: transparent; outline: none; flex: 1; min-width: 0; font-size: 14px; }
.search:focus-within { outline: 2px dashed var(--ink); outline-offset: 2px; }
.clock { margin-left: auto; font-weight: 700; font-size: 16px; display: flex; gap: 16px; align-items: center; }

/* ===== layout ===== */
.app {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px;
  padding: 20px 14px 90px; max-width: 1640px; margin: 0 auto;
}
main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.page { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.page[hidden] { display: none; }
.page-soon { padding: 30px 0; }

/* sidebar (calm modes) */
.side {
  background: var(--paper); border: var(--b); box-shadow: var(--sh); padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 14px; align-self: start; max-height: calc(100vh - 28px); overflow: auto;
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px;
  border: var(--line) solid transparent; background: none; font-weight: 700; font-size: 13px; width: 100%;
}
.nav-btn svg { width: 64px; height: 50px; }
.nav-btn:hover { background: var(--hover); }
.nav-btn[aria-current="page"] { background: var(--accent-2); border: var(--b); }
.side-foot { margin-top: 10px; border-top: var(--b); padding: 12px 0 0 6px; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.me { width: 40px; height: 40px; border: var(--b); background: var(--chrome); color: var(--on-chrome); display: grid; place-items: center; flex: 0 0 40px; }

/* header */
.head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
h1 { font-family: var(--display); font-weight: 800; font-size: 52px; letter-spacing: -.04em; margin: 0; line-height: 1; }
.tag { margin: 6px 0 0; font-size: 15px; }
.week { display: flex; border: var(--b); box-shadow: var(--sh); background: var(--paper); align-items: center; }
.week div { text-align: center; padding: 6px 12px; border-right: var(--b); line-height: 1.15; }
.week div:last-child { border-right: none; }
.week small { font-size: 12px; display: block; }
.week b { font-size: 20px; font-weight: 400; }
.week .now { background: var(--accent); color: var(--on-accent); }

/* desk: the area windows live in.
   Flow (default, phones): two columns of zones that windows stack into.
   Floating (.floating, wide screens): windows are placed freely by --x/--y/--w/--h. */
.desk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.zone { display: flex; flex-wrap: wrap; gap: 20px; align-content: flex-start; align-items: flex-start; min-width: 0; }
.zone-side { flex-direction: column; align-items: stretch; }
.zone > .win { flex-shrink: 0; } /* never squeeze a window shorter than its content */
.zone-main > .win { flex: 1 1 380px; }
.zone > .win.min { flex: 0 0 auto; align-self: flex-start; }
.empty-desk { display: none; grid-column: 1 / -1; padding: 40px 0; margin: 0; text-align: center; }
.desk:not(:has(.win:not(.hidden))) .empty-desk { display: block; }

.desk.floating { display: block; min-height: max(calc(100vh - 230px), var(--desk-h, 0px)); }
.desk.floating .zone { display: contents; }
.desk.floating .win {
  position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 380px); height: var(--h, auto);
  z-index: var(--z, 1); max-width: 100%;
}
.desk.floating .win.min { width: auto; height: auto; }
.desk.floating .win .body { overflow: auto; min-height: 0; }
.desk.floating .title { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.desk.floating .title button { cursor: pointer; }
.desk.floating .win.dragging { box-shadow: var(--sh-lg); will-change: transform; }
.desk.floating .win.dragging .body { pointer-events: none; }
.desk.floating .win.dragging .title { cursor: grabbing; }
.desk.floating .win.max { position: fixed; left: var(--max-side); right: var(--max-side); top: 70px; bottom: auto; width: auto; height: auto; max-height: calc(100vh - 170px); max-width: none; z-index: 50; }
.desk.floating .empty-desk { position: absolute; inset: 0 0 auto; }

/* resize grip (floating only) */
.resize-grip { display: none; }
.desk.floating .resize-grip {
  display: block; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 45%, var(--outline) 45% 52%, transparent 52% 64%, var(--outline) 64% 71%, transparent 71% 82%, var(--outline) 82% 89%, transparent 89%);
}
.desk.floating .win.min .resize-grip, .desk.floating .win.max .resize-grip { display: none; }

/* ===== windows ===== */
.win { background: var(--paper); border: var(--b); box-shadow: var(--sh); display: flex; flex-direction: column; min-width: 0; }
.win.hidden { display: none; }
.win.min .body { display: none; }
/* Maximized: as wide as the window's content needs (--max-w, set per window), centered, and only as tall as
   its content (up to the screen). No stretching to fill the screen with empty space. */
.win.max {
  --max-side: max(6vw, calc((100vw - var(--max-w, 1100px)) / 2));
  position: fixed; left: var(--max-side); right: var(--max-side); top: 70px; bottom: auto; max-height: calc(100vh - 170px);
  z-index: 50; box-shadow: var(--sh-lg); overflow: hidden;
}
.win.max .body { overflow: auto; min-height: 0; } /* the title bar stays put, the content scrolls if it's taller than the screen */
.win:focus { outline: none; }

.title {
  display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px;
  border-bottom: var(--b); font-weight: 700; font-size: 14px;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
}
.win.min .title { border-bottom: none; }
.win.min { cursor: default; }
.title h2 { flex: 1; margin: 0; font-size: inherit; font-weight: inherit; }
.title button { width: 22px; height: 22px; padding: 0; border: var(--b); background: var(--paper); display: grid; place-items: center; }
.title button svg { width: 11px; height: 11px; }
.title button:hover { background: var(--chrome); }
.title button[data-a="close"] { background: var(--accent-2); }
.title button[data-a="close"]:hover { background: var(--chrome); }
/* full screen: only the exit X (the max button, re-iconed) — no minimize or close */
.win.max .title button[data-a="min"], .win.max .title button[data-a="close"] { display: none; }
.win.max .title button[data-a="max"] { background: var(--accent-2); }
.win.max .title button[data-a="max"]:hover { background: var(--chrome); }

.t-orange { background: linear-gradient(90deg, var(--orange-deep), var(--orange)); }
.t-purple { background: linear-gradient(90deg, var(--purple-deep), var(--purple)); }
.t-green  { background: linear-gradient(90deg, var(--green-deep), var(--green)); }
.t-peach  { background: linear-gradient(90deg, var(--peach-deep), var(--peach)); }
.t-yellow { background: linear-gradient(90deg, var(--yellow-deep), var(--yellow)); }
.t-blue   { background: linear-gradient(90deg, var(--blue-deep), var(--blue)); }

.body { padding: 14px 18px; flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.shade { position: fixed; inset: 0; z-index: 40; display: none; background: var(--shade); backdrop-filter: blur(3px); }
.shade.on { display: block; }

/* ===== dock / taskbar ===== */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px; background: var(--chrome); color: var(--on-chrome);
  border-top: var(--b); padding: 6px 12px; overflow-x: auto;
}
.dock .brand { font-size: 20px; padding-right: 6px; }
.dock .wbtn {
  display: flex; align-items: center; gap: 8px; border: var(--b); padding: 4px 12px;
  font-weight: 700; font-size: 14px; white-space: nowrap; background: var(--surface); color: var(--ink);
}
.dock .wbtn.closed { opacity: .6; border-style: dashed; background: transparent; color: var(--on-chrome); }
.dock .wbtn.min { background: var(--hover); }
.dock .tidy { margin-left: auto; border: var(--b); background: var(--surface); color: var(--ink); padding: 4px 12px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.dock .tidy + .all { margin-left: 0; }
.dock .vsep, .menubar .vsep { background: var(--outline); }
.dock .sw { width: 12px; height: 12px; border: var(--b); }
.dock .all {
  margin-left: auto; background: var(--ink); color: var(--surface); border: var(--b);
  padding: 4px 14px; font-weight: 700; font-size: 14px; white-space: nowrap;
}

/* ===== toast ===== */
.toast {
  position: fixed; left: 50%; bottom: 72px; transform: translate(-50%, 20px);
  background: var(--paper); color: var(--ink); border: var(--b); box-shadow: var(--sh);
  padding: 10px 18px; opacity: 0; transition: .25s; pointer-events: none; z-index: 60; font-size: 14px;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.toast.has-action.show { pointer-events: auto; }
.toast button { border: var(--b); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13px; padding: 2px 10px; }

/* ===== responsive ===== */
@media (max-width: 1320px) {
  .app { grid-template-columns: 180px minmax(0, 1fr); }
  .desk { grid-template-columns: minmax(0, 1fr); }
  .zone-side { flex-direction: row; align-items: flex-start; }
  .zone-side > .win { flex: 1 1 290px; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; flex-direction: row; overflow-x: auto; max-height: none; }
  .nav-btn { min-width: 96px; }
  .nav-btn svg { width: 56px; height: 44px; }
  .side-foot { display: none; }
  h1 { font-size: 40px; }
  .menubar .search, #mDate { display: none; }
  .menubar { gap: 10px; padding: 6px 12px; }
  .menubar .brand { font-size: 20px; white-space: nowrap; }
  .menubar .brand svg { width: 40px; height: 32px; }
  .win.max { --max-side: 10px; top: 10px; max-height: calc(100vh - 20px); }
  .dock .lbl, .dock .brand { display: none; }
}

/* theme button (menubar) */
.theme-btn {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border: var(--b); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px;
}
.theme-btn:hover { background: var(--hover); }
@media (max-width: 860px) { .theme-btn .lbl { display: none; } }

/* ===== dock: apps button + front marker ===== */
.dock .apps-btn {
  display: flex; align-items: center; gap: 8px; border: var(--b); padding: 4px 12px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.dock .apps-btn[aria-expanded="true"] { background: var(--ink); color: var(--surface); }
.dock .wbtn.front { box-shadow: inset 0 -4px 0 var(--accent); }
.dock-empty { font-size: 13px; opacity: .7; white-space: nowrap; }

/* ===== app drawer ===== */
.drawer {
  position: fixed; left: 12px; bottom: 58px; z-index: 45;
  width: min(620px, calc(100vw - 24px)); max-height: min(70vh, 640px);
  display: flex; flex-direction: column;
  background: var(--surface); border: var(--b); box-shadow: var(--sh-lg);
}
.drawer[hidden] { display: none; }
.drawer .title { cursor: default; }
.drawer-body { padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.drawer input[type="search"] {
  height: 38px; border: var(--b); background: var(--field); padding: 0 12px; font-size: 14px; outline: none;
}
.drawer input[type="search"]:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }
.drawer-h { margin: 4px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.drawer-none { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: var(--b); background: var(--field); padding: 0 0 8px; min-height: 96px; overflow: hidden;
}
.tile:hover { background: var(--hover); }
.tile-sw { align-self: stretch; height: 12px; border-bottom: var(--b); margin-bottom: 6px; }
.tile b, .tile .tile-blurb, .tile .tile-state { padding: 0 10px; }
.tile b { font-size: 14px; }
.tile .tile-blurb { font-size: 12px; line-height: 1.35; flex: 1; }
.tile .tile-state { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tile.is-open .tile-state::before, .tile.is-minimized .tile-state::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: var(--b); background: var(--accent);
}
.tile.is-minimized .tile-state::before { background: transparent; }
.tile.is-closed .tile-state { opacity: .6; }

@media (max-width: 860px) {
  .drawer { left: 8px; right: 8px; width: auto; bottom: 54px; max-height: 75vh; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .dock .apps-btn .lbl { display: inline; }
}

/* how wide each window gets when maximized (it's only as tall as its content) */
#win-today { --max-w: 760px; }
#win-focus { --max-w: 1300px; }
#win-projects { --max-w: 760px; }
#win-appearance { --max-w: 640px; }
#win-rest { --max-w: 520px; } /* placeholder: nothing to spread out yet */

/* appearance settings: drop down from the theme button in the top-right corner (src/shell.js) */
.appear-pop { position: fixed; top: 58px; right: 16px; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 140px); z-index: 80; box-shadow: var(--sh-lg); transform-origin: top right; animation: appear-drop .14s ease-out; }
.appear-pop[hidden] { display: none; }
.appear-pop .body { overflow-y: auto; }
.appear-pop .title { cursor: default; }
@keyframes appear-drop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .appear-pop { animation: none; } }