/* ===========================================================================
   akshOS — the look
   warm paper desktop, chunky ink borders, hard offset shadows. no glass, no
   blur. everything solid. Space Grotesk for ui, Space Mono for the terminal.
   themes only swap the desk colour + accent; the furniture stays put.
   =========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* the hidden attribute has to beat id rules that set display (#boot/#lock use
   grid), otherwise an invisible panel keeps eating clicks. */
[hidden] { display: none !important; }

:root {
  --taskbar-h: 52px;
  --ink: #201d1a;
  --paper: #fdf5e6;
  --paper-2: #f3e7cf;
  --line: #201d1a;
  --shadow: 5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 8px;
  --text: #201d1a;
  --text-dim: #6b6357;
  font-family: "Space Grotesk", system-ui, sans-serif;
}

/* themes: each just repaints --desk + --accent. default (no attr) = sand. */
body { --desk: #e7d3ad; --accent: #ff5a3c; }
body[data-theme="mint"]   { --desk: #bfe3cf; --accent: #12897a; }
body[data-theme="tomato"] { --desk: #f4b4a3; --accent: #d63b2f; }
body[data-theme="grape"]  { --desk: #d6c6ec; --accent: #7d4bd1; }
body[data-theme="sky"]    { --desk: #b9d6ef; --accent: #2f6fd6; }
body[data-theme="noir"]   { --desk: #cbc7bd; --accent: #201d1a; }

html, body { height: 100%; overflow: hidden; }
body {
  color: var(--text);
  user-select: none;
  background-color: var(--desk);
  /* faint dotted paper grid so the desktop isn't a flat fill */
  background-image: radial-gradient(rgba(32, 29, 26, 0.11) 1.6px, transparent 1.6px);
  background-size: 24px 24px;
  transition: background-color .25s ease;
}

/* ---- boot ---------------------------------------------------------------- */
#boot {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: #201d1a; color: var(--paper);
}
.boot-logo { font-size: 60px; animation: bob 2s ease-in-out infinite; }
.boot-name { font-size: 30px; font-weight: 700; letter-spacing: .04em; }
.boot-bar { width: 220px; height: 10px; border: 2px solid var(--paper); border-radius: 99px; overflow: hidden; }
.boot-bar-fill { width: 0; height: 100%; background: var(--paper); animation: boot 1.8s steps(18) forwards; }
.boot-tip { color: #cbb89a; font-size: 13px; }
@keyframes boot { to { width: 100%; } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }

/* ---- lock ---------------------------------------------------------------- */
#lock {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-content: center; justify-items: center; gap: 42px;
  background-color: var(--desk);
  background-image: radial-gradient(rgba(32, 29, 26, 0.11) 1.6px, transparent 1.6px);
  background-size: 24px 24px;
}
.lock-clock { text-align: center; }
.lock-time { font-size: 96px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.lock-date { font-size: 18px; color: var(--text-dim); margin-top: 6px; }
.lock-card { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lock-avatar {
  width: 88px; height: 88px; border-radius: 20px; background: var(--accent);
  border: 3px solid var(--ink); box-shadow: var(--shadow);
  display: grid; place-content: center; font-size: 40px; font-weight: 700; color: var(--paper);
}
.lock-user { font-size: 22px; font-weight: 700; }
#lock-enter {
  margin-top: 2px; padding: 11px 24px; border: 3px solid var(--ink); border-radius: 10px;
  background: var(--accent); color: var(--paper); font: 700 15px "Space Grotesk", sans-serif;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .05s, box-shadow .05s;
}
#lock-enter:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
#lock-enter:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.lock-hint { font-size: 13px; color: var(--text-dim); }

/* ---- desktop ------------------------------------------------------------- */
#desktop { position: fixed; inset: 0; }

#desktop-icons {
  position: absolute; top: 16px; left: 16px;
  display: flex; flex-direction: column; flex-wrap: wrap; gap: 4px;
  max-height: calc(100% - var(--taskbar-h) - 32px);
}
.desk-icon {
  width: 92px; padding: 10px 6px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; cursor: pointer; border: 2px solid transparent;
}
.desk-icon:hover, .desk-icon:focus {
  background: var(--paper); border-color: var(--ink); box-shadow: var(--shadow-sm); outline: none;
}
.desk-icon .ico {
  font-size: 26px; width: 46px; height: 46px; display: grid; place-content: center;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm);
}
.desk-icon .lbl { font-size: 12px; font-weight: 500; }

/* ---- windows ------------------------------------------------------------- */
.window {
  position: absolute; min-width: 240px; min-height: 150px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  overflow: hidden; animation: pop .12s ease;
}
@keyframes pop { from { transform: translateY(6px) scale(.99); opacity: .3; } }
.window.maximized { border-radius: 0; box-shadow: none; }

.win-head {
  height: 40px; flex: 0 0 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 12px; background: var(--accent); cursor: grab;
  border-bottom: 3px solid var(--ink);
}
.win-head:active { cursor: grabbing; }
.win-title {
  order: 1; flex: 1 1 auto; font-size: 14px; font-weight: 700; color: var(--paper);
  display: flex; align-items: center; gap: 8px; text-shadow: 1px 1px 0 rgba(0,0,0,.18);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-title .wt-ico { font-size: 15px; text-shadow: none; }
.win-lights { order: 2; display: flex; gap: 6px; }
.light {
  width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 6px; cursor: pointer;
  color: var(--ink); font: 700 13px "Space Mono", monospace; line-height: 1;
  display: grid; place-content: center; padding: 0;
}
.light.min { background: #ffd23f; }
.light.max { background: #3ddc84; }
.light.close { background: #ff5a3c; }
.light:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
.light:active { transform: translate(1px, 1px); box-shadow: none; }

.win-body { flex: 1 1 auto; overflow: auto; position: relative; background: var(--paper); }
.resize-handle {
  position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; z-index: 5;
  background:
    linear-gradient(135deg, transparent 45%, var(--ink) 45%, var(--ink) 55%, transparent 55%),
    linear-gradient(135deg, transparent 70%, var(--ink) 70%, var(--ink) 80%, transparent 80%);
}

/* ---- taskbar ------------------------------------------------------------- */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--taskbar-h);
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--paper); border-top: 3px solid var(--ink); z-index: 500;
}
#start-btn {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  border: 3px solid var(--ink); border-radius: 8px; background: var(--accent); color: var(--paper);
  font: 700 14px "Space Grotesk", sans-serif; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .05s, box-shadow .05s;
}
#start-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
#start-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.start-glyph { font-size: 15px; }

#task-buttons { display: flex; gap: 6px; flex: 1 1 auto; overflow: hidden; }
.task-btn {
  height: 36px; max-width: 190px; padding: 0 12px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--text); border-radius: 8px; cursor: pointer;
  font: 500 13px "Space Grotesk", sans-serif; display: flex; align-items: center; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-btn.active { background: var(--accent); color: var(--paper); box-shadow: var(--shadow-sm); }
.task-btn:hover { transform: translate(-1px,-1px); }

#tray { display: flex; align-items: center; gap: 10px; }
#tray span { cursor: pointer; }
#tray-theme {
  width: 34px; height: 34px; display: grid; place-content: center; font-size: 16px;
  border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow-sm);
}
#tray-theme:hover { transform: translate(-1px,-1px); }
#clock { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; min-width: 64px; text-align: right; }

/* ---- start menu ---------------------------------------------------------- */
#start-menu {
  position: absolute; left: 10px; bottom: calc(var(--taskbar-h) + 8px);
  width: 290px; padding: 14px; z-index: 600;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow);
  animation: pop .12s ease;
}
.start-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.start-avatar {
  width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--paper);
  border: 2px solid var(--ink); display: grid; place-content: center; font-weight: 700;
}
.start-user { font-weight: 700; }
.start-sub { font-size: 12px; color: var(--text-dim); }
#start-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.start-app {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px;
  background: var(--paper-2); color: var(--text); border: 2px solid var(--ink); cursor: pointer;
  font: 500 13px "Space Grotesk", sans-serif; text-align: left;
}
.start-app:hover { background: var(--accent); color: var(--paper); }
.start-app .ico { font-size: 16px; }
.start-power {
  width: 100%; padding: 10px; border: 2px solid var(--ink); border-radius: 9px;
  background: var(--paper-2); color: var(--text); cursor: pointer; font: 500 13px "Space Grotesk", sans-serif;
}
.start-power:hover { background: var(--accent); color: var(--paper); }

/* ---- context menu (right-click desktop) ---------------------------------- */
.context-menu {
  position: absolute; z-index: 700; min-width: 190px; padding: 6px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow);
}
.ctx-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  cursor: pointer; font-size: 13px; font-weight: 500;
}
.ctx-item:hover { background: var(--accent); color: var(--paper); }
.ctx-sep { height: 2px; background: var(--ink); margin: 5px 4px; opacity: .18; }

/* ---- sticky notes (live on the desktop) ---------------------------------- */
.sticky {
  position: absolute; width: 190px; min-height: 150px; z-index: 6;
  background: #fff7a8; border: 3px solid var(--ink); border-radius: 4px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transform: rotate(-1.4deg);
}
.sticky-head {
  height: 26px; display: flex; align-items: center; justify-content: flex-end; padding: 0 6px;
  cursor: grab; background: rgba(0,0,0,.06);
}
.sticky-head:active { cursor: grabbing; }
.sticky-x { border: none; background: none; cursor: pointer; font: 700 14px "Space Mono", monospace; color: var(--ink); }
.sticky textarea {
  flex: 1; border: none; background: transparent; resize: none; outline: none; padding: 8px 10px;
  font: 14px/1.4 "Space Grotesk", sans-serif; color: var(--ink); user-select: text;
}

/* ---- app internals ------------------------------------------------------- */
.app-pad { padding: 14px; }

/* terminal */
.terminal {
  height: 100%; background: #17140f; color: #ffd79a;
  font-family: "Space Mono", monospace; font-size: 13px; padding: 12px; overflow: auto;
  cursor: text; user-select: text;
}
.terminal .line { white-space: pre-wrap; word-break: break-word; }
.terminal .prompt { color: #7ee787; }
.term-input-row { display: flex; gap: 6px; }
.term-input-row input {
  flex: 1; background: transparent; border: none; color: #ffd79a;
  font-family: inherit; font-size: 13px; outline: none;
}

/* notepad */
.notepad { display: flex; flex-direction: column; height: 100%; }
.notepad textarea {
  flex: 1; width: 100%; resize: none; border: none; padding: 14px;
  background: var(--paper); color: var(--text); font: 14px/1.6 "Space Mono", monospace;
  outline: none; user-select: text;
}
.notepad .np-bar { padding: 7px 12px; font-size: 12px; color: var(--text-dim); background: var(--paper-2); border-top: 2px solid var(--ink); }

/* calculator */
.calc { padding: 12px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.calc-screen {
  background: #17140f; color: #ffd79a; border: 2px solid var(--ink); border-radius: 8px;
  padding: 12px 14px; text-align: right; font: 700 26px "Space Mono", monospace;
  min-height: 54px; overflow: hidden;
}
.calc-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-grid button {
  border: 2px solid var(--ink); border-radius: 8px; font: 700 18px "Space Grotesk", sans-serif;
  cursor: pointer; background: var(--paper-2); color: var(--text); box-shadow: var(--shadow-sm);
  transition: transform .04s, box-shadow .04s;
}
.calc-grid button:hover { transform: translate(-1px,-1px); }
.calc-grid button:active { transform: translate(2px,2px); box-shadow: none; }
.calc-grid button.op { background: var(--accent); color: var(--paper); }
.calc-grid button.wide { grid-column: span 2; }

/* files */
.files { padding: 14px; }
.files .path { font: 700 12px "Space Mono", monospace; color: var(--text-dim); margin-bottom: 12px; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.file-item {
  padding: 10px 6px; border-radius: 9px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; align-items: center; border: 2px solid transparent;
}
.file-item:hover { background: var(--paper-2); border-color: var(--ink); }
.file-item .fi { font-size: 30px; }
.file-item .fn { font-size: 12px; }

/* settings */
.settings { padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.settings h3 { font-size: 12px; text-transform: lowercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 10px; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.theme-swatch {
  height: 58px; border-radius: 10px; cursor: pointer; border: 3px solid var(--ink);
  display: flex; align-items: end; padding: 6px; font: 700 12px "Space Grotesk", sans-serif; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.theme-swatch:hover { transform: translate(-1px,-1px); }
.theme-swatch.active { outline: 3px solid var(--accent); outline-offset: 2px; }

/* about */
.about { padding: 18px; line-height: 1.55; }
.about h2 { margin-bottom: 4px; }
.about .muted { color: var(--text-dim); font-size: 13px; }
.about ul { margin: 12px 0 0 18px; }
.about li { margin-bottom: 3px; }
.about a { color: var(--accent); font-weight: 700; }
.about code { font-family: "Space Mono", monospace; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }

/* clock */
.clock-app { display: grid; place-content: center; gap: 6px; height: 100%; text-align: center; }
.clock-time { font: 700 46px "Space Mono", monospace; font-variant-numeric: tabular-nums; }
.clock-date { color: var(--text-dim); }

/* snake */
.snake-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; height: 100%; }
.snake-wrap canvas { background: #17140f; border: 3px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow-sm); touch-action: none; }
.snake-info { font-size: 13px; color: var(--text-dim); }
.snake-info b { color: var(--text); }

/* paint */
.paint { display: flex; flex-direction: column; height: 100%; }
.paint-tools { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--paper-2); border-bottom: 3px solid var(--ink); flex-wrap: wrap; }
.paint-swatches { display: flex; gap: 5px; }
.paint-swatch { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 6px; cursor: pointer; padding: 0; }
.paint-swatch.active { outline: 2px solid var(--accent); outline-offset: 1px; }
.paint-tools input[type="range"] { width: 84px; accent-color: var(--accent); }
.paint-btn { border: 2px solid var(--ink); background: var(--paper); border-radius: 7px; padding: 5px 10px; cursor: pointer; font: 700 12px "Space Grotesk", sans-serif; box-shadow: var(--shadow-sm); }
.paint-btn:hover { transform: translate(-1px,-1px); }
.paint canvas { flex: 1; width: 100%; background: #fffdf5; cursor: crosshair; touch-action: none; }