/* ==========================================================================
   KubaOS desktop.css - P1+P2
   Token-driven. No frameworks. No glassmorphism. Radius scale: windows 10,
   menus 8, buttons 6, icon halo 6 (deliberately varied).
   ========================================================================== */

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #1e293b;
  --navy-deep: #0f172a;
  --amber: #e8a020;
  --amber-soft: #fde68a;
  --paper: #f6f3ec;
  --surface: #ffffff;
  --ink: #1c2433;
  --ink-muted: #5b6578;
  --green-term: #7dd87d;
  --danger: #c0392b;

  --radius-win: 10px;
  --radius-menu: 8px;
  --radius-btn: 6px;
  --radius-halo: 6px;

  --taskbar-h: 48px;
  --titlebar-h: 34px;
  --cell-w: 96px;
  --cell-h: 104px;
  --desk-pad: 12px;

  --shadow-active: 0 18px 50px rgba(15, 23, 42, 0.35);
  --shadow-inactive: 0 8px 22px rgba(15, 23, 42, 0.2);
  --shadow-menu: 0 10px 30px rgba(15, 23, 42, 0.28);

  --font-ui: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: Consolas, 'Cascadia Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--navy-deep);
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

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

.kt-sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

.kt-glyph {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
}

/* progress-cursor flash for the fake desktop Refresh */
body.kt-busy, body.kt-busy * { cursor: progress !important; }

/* ==========================================================================
   noscript
   ========================================================================== */

.kt-noscript {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: auto;
  background: var(--navy-deep);
  color: var(--paper);
  padding: 48px 24px;
}
.kt-noscript h1 { color: var(--amber); font-weight: 800; margin: 0 0 12px; }
.kt-noscript a { color: var(--amber-soft); }
.kt-noscript ul { line-height: 1.7; max-width: 760px; }
.kt-noscript p { max-width: 760px; }

/* ==========================================================================
   wallpaper layers
   ========================================================================== */

.kt-wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--navy-deep);
  background-size: cover;
  background-position: center;
}
body.kt-wp-floorplan .kt-wallpaper { background-image: url('../img/wallpapers/floorplan.svg'); }
body.kt-wp-dawn .kt-wallpaper { background-image: url('../img/wallpapers/dawn.svg'); }
body.kt-wp-nightshift .kt-wallpaper { background-image: url('../img/wallpapers/nightshift.svg'); }
body.kt-wp-crt .kt-wallpaper { background-image: url('../img/wallpapers/crt.svg'); }
/* M5 generated wallpapers (no SVG asset): aurora + six solid colours + the
   uploaded custom image. These rules were missing — main.js (_allWpClasses) and
   the Settings picker offer them, but nothing painted them, so selecting any of
   them (or uploading a picture) left the wallpaper unchanged. */
body.kt-wp-aurora .kt-wallpaper {
  background-image:
    radial-gradient(ellipse at 28% 18%, rgba(45,170,125,0.45), transparent 55%),
    radial-gradient(ellipse at 72% 32%, rgba(96,86,206,0.42), transparent 58%),
    radial-gradient(ellipse at 50% 82%, rgba(40,120,160,0.35), transparent 60%);
  background-color: #0a1326;
}
body.kt-wp-solid-1 .kt-wallpaper { background-image: linear-gradient(160deg, #243349, #16202f); background-color: #1e293b; }
body.kt-wp-solid-2 .kt-wallpaper { background-image: linear-gradient(160deg, #56657a, #374252); background-color: #475569; }
body.kt-wp-solid-3 .kt-wallpaper { background-image: linear-gradient(160deg, #c98a24, #9c6612); background-color: #b9791a; }
body.kt-wp-solid-4 .kt-wallpaper { background-image: linear-gradient(160deg, #2f7a59, #1d4e39); background-color: #2d6a4f; }
body.kt-wp-solid-5 .kt-wallpaper { background-image: linear-gradient(160deg, #6e2f60, #46203f); background-color: #5e2750; }
body.kt-wp-solid-6 .kt-wallpaper { background-image: linear-gradient(160deg, #2a2f37, #181c22); background-color: #23272e; }
body.kt-wp-custom .kt-wallpaper { background-image: var(--kt-custom-wp); }

/* ==========================================================================
   desktop + icons
   ========================================================================== */

.kt-desktop {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.kt-icon {
  position: absolute;
  width: var(--cell-w);
  height: var(--cell-h);
  padding: 6px 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-halo);
  border: 1px solid transparent;
  cursor: default;
  touch-action: none;
}
.kt-icon .kt-icon-glyph { width: 48px; height: 48px; flex: 0 0 auto; }
.kt-icon .kt-icon-glyph svg { width: 48px; height: 48px; display: block; }
.kt-icon .kt-icon-label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.9), 0 0 8px rgba(15, 23, 42, 0.5);
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.kt-icon.kt-selected {
  background: rgba(232, 160, 32, 0.18);
  border-color: rgba(232, 160, 32, 0.65);
}
.kt-icon.kt-cut { opacity: 0.5; }
.kt-icon.kt-dragging { opacity: 0.35; }
.kt-icon.kt-drop-hover {
  background: rgba(232, 160, 32, 0.32);
  border-color: var(--amber);
}
.kt-icon.kt-binning {
  transition: transform 160ms ease-in, opacity 160ms ease-in;
  transform: scale(0.1);
  opacity: 0;
}

.kt-icon .kt-rename-input {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  text-align: center;
  border: 1px solid var(--amber);
  border-radius: 4px;
  padding: 1px 2px;
  background: var(--surface);
  color: var(--ink);
}

/* marquee selection rectangle */
.kt-marquee {
  position: fixed;
  z-index: 5;
  border: 1px dashed var(--amber);
  background: rgba(232, 160, 32, 0.1);
  pointer-events: none;
}

/* drag ghost */
.kt-drag-ghost {
  position: fixed;
  z-index: 9300;
  pointer-events: none;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kt-drag-ghost svg { width: 44px; height: 44px; }
.kt-drag-ghost .kt-ghost-count {
  background: var(--amber);
  color: var(--navy-deep);
  font-weight: 800;
  font-size: 13px;
  border-radius: 999px;
  padding: 2px 9px;
}

/* ==========================================================================
   windows
   ========================================================================== */

.kt-windows { position: fixed; inset: 0 0 var(--taskbar-h) 0; z-index: 2; pointer-events: none; }

.kt-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 220px;
  background: var(--paper);
  border-radius: var(--radius-win);
  box-shadow: var(--shadow-inactive), inset 0 0 0 1px rgba(15, 23, 42, 0.1);
  contain: layout paint;
  pointer-events: auto;
  overflow: hidden;
}
.kt-window.kt-active {
  box-shadow: var(--shadow-active), inset 0 0 0 1px rgba(15, 23, 42, 0.14), inset 0 1px 0 var(--amber);
}
.kt-window.kt-opening { animation: ktWinIn 140ms ease-out; }
@keyframes ktWinIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.kt-window.kt-minimizing {
  transition: transform 180ms ease-in, opacity 180ms ease-in;
  opacity: 0;
}
.kt-window.kt-minimized { display: none; }
.kt-window.kt-maximized {
  inset: 0 0 0 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0;
  transform: none !important;
}
.kt-window.kt-dragging-win { will-change: transform; }

.kt-win-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--titlebar-h);
  flex: 0 0 var(--titlebar-h);
  padding: 0 4px 0 10px;
  background: var(--navy);
  color: #fff;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.kt-window:not(.kt-active) .kt-win-titlebar {
  background: #4b5666;
  color: rgba(255, 255, 255, 0.75);
}
.kt-win-titlebar .kt-win-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.kt-win-titlebar .kt-win-icon svg { width: 16px; height: 16px; display: block; }
.kt-win-title {
  flex: 1 1 auto;
  font-size: 13.5px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kt-win-buttons { display: flex; gap: 2px; flex: 0 0 auto; }
.kt-win-btn {
  width: 34px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: inherit;
}
.kt-win-btn svg { width: 12px; height: 12px; }
.kt-win-btn:hover { background: rgba(255, 255, 255, 0.14); }
.kt-win-btn.kt-btn-close:hover { background: var(--danger); color: #fff; }

.kt-win-body {
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
  font-size: 14px;
}

/* resize handles: 8 hit areas */
.kt-rs { position: absolute; z-index: 3; touch-action: none; }
.kt-rs-n  { top: -4px; left: 12px; right: 12px; height: 8px; cursor: n-resize; }
.kt-rs-s  { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: s-resize; }
.kt-rs-e  { right: -4px; top: 12px; bottom: 12px; width: 8px; cursor: e-resize; }
.kt-rs-w  { left: -4px; top: 12px; bottom: 12px; width: 8px; cursor: w-resize; }
.kt-rs-ne { top: -4px; right: -4px; width: 14px; height: 14px; cursor: ne-resize; }
.kt-rs-nw { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nw-resize; }
.kt-rs-se { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: se-resize; }
.kt-rs-sw { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: sw-resize; }
.kt-window.kt-maximized .kt-rs { display: none; }

/* snap preview overlay */
.kt-snap-preview {
  position: fixed;
  z-index: 9400;
  border: 2px solid var(--amber);
  background: rgba(232, 160, 32, 0.14);
  border-radius: var(--radius-win);
  pointer-events: none;
  transition: left 120ms ease, top 120ms ease, width 120ms ease, height 120ms ease;
}

/* generic stub window body */
.kt-stub-body { padding: 22px; color: var(--ink-muted); }
.kt-stub-body .kt-stub-title { color: var(--ink); font-weight: 700; margin: 0 0 6px; font-size: 15px; }
.kt-stub-body p { margin: 0; }

/* ==========================================================================
   taskbar
   ========================================================================== */

.kt-taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--taskbar-h);
  z-index: 8000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: linear-gradient(180deg, #26334a 0%, var(--navy) 100%);
  border-top: 1px solid rgba(246, 243, 236, 0.14);
  color: #e9edf4;
  user-select: none;
  -webkit-user-select: none;
}

.kt-start-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px 0 8px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.kt-start-btn svg { width: 22px; height: 22px; }
.kt-start-btn:hover, .kt-start-btn.kt-open { background: rgba(232, 160, 32, 0.22); }

.kt-tb-windows {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  height: 100%;
}
.kt-tb-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  max-width: 180px;
  min-width: 0;
  padding: 0 10px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 2px solid transparent;
  font-size: 13px;
  color: #dbe2ec;
}
.kt-tb-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.kt-tb-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kt-tb-btn:hover { background: rgba(255, 255, 255, 0.14); }
.kt-tb-btn.kt-active {
  background: rgba(232, 160, 32, 0.2);
  border-bottom-color: var(--amber);
  color: #fff;
}
.kt-tb-btn.kt-min { opacity: 0.65; }

.kt-ach-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 700;
  color: #e9edf4;
}
.kt-ach-chip svg { width: 16px; height: 16px; }
.kt-ach-chip:hover { background: rgba(255, 255, 255, 0.12); }

.kt-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-btn);
  line-height: 1.25;
}
.kt-clock:hover { background: rgba(255, 255, 255, 0.12); }
.kt-clock-time { font-size: 13.5px; font-weight: 700; }
.kt-clock-date { font-size: 11px; color: #aab4c4; }

/* clock popover */
.kt-clock-pop {
  position: fixed;
  z-index: 8200;
  right: 8px;
  bottom: calc(var(--taskbar-h) + 8px);
  width: 260px;
  background: var(--surface);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow-menu);
  padding: 16px;
  color: var(--ink);
  animation: ktMenuIn 120ms ease-out;
}
.kt-clock-pop .kt-pop-time { font-size: 30px; font-weight: 800; color: var(--navy); }
.kt-clock-pop .kt-pop-date { font-size: 14px; margin-top: 2px; }
.kt-clock-pop .kt-pop-ver { font-size: 12px; color: var(--ink-muted); margin-top: 10px; }
.kt-clock-pop .kt-pop-line { font-size: 13px; color: var(--ink-muted); margin-top: 6px; font-style: italic; }

/* ==========================================================================
   start menu
   ========================================================================== */

.kt-start {
  position: fixed;
  z-index: 8100;
  left: 8px;
  bottom: calc(var(--taskbar-h) + 8px);
  width: 460px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - var(--taskbar-h) - 24px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow-menu);
  animation: ktMenuIn 120ms ease-out;
  overflow: hidden;
}
.kt-start-search-wrap { padding: 12px 12px 8px; }
.kt-start-search-wrap input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid rgba(28, 36, 51, 0.25);
  border-radius: var(--radius-btn);
  background: var(--paper);
  color: var(--ink);
}
.kt-start-search-wrap input:focus-visible { outline-offset: 0; }
.kt-start-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px 12px 8px;
  overflow: auto;
}
.kt-start-col h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 8px 8px 4px;
}
.kt-start-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  text-align: left;
  color: var(--ink);
}
.kt-start-item svg { width: 22px; height: 22px; flex: 0 0 auto; }
.kt-start-item:hover, .kt-start-item:focus-visible { background: rgba(232, 160, 32, 0.16); }
.kt-start-item.kt-hidden { display: none; }
.kt-start-empty { font-size: 13px; color: var(--ink-muted); padding: 8px; }
.kt-start-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid rgba(28, 36, 51, 0.12);
  background: var(--paper);
}

/* ==========================================================================
   context menus
   ========================================================================== */

.kt-menu {
  position: fixed;
  z-index: 9500;
  min-width: 190px;
  max-width: 300px;
  background: var(--surface);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow-menu);
  padding: 4px;
  animation: ktMenuIn 120ms ease-out;
}
@keyframes ktMenuIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.kt-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 13.5px;
  text-align: left;
  color: var(--ink);
  white-space: nowrap;
}
.kt-menu-item:hover, .kt-menu-item:focus-visible {
  background: rgba(232, 160, 32, 0.18);
  outline-offset: -2px;
}
.kt-menu-item[aria-disabled="true"] { color: var(--ink-muted); }
.kt-menu-item.kt-danger { color: var(--danger); }
.kt-menu-item .kt-menu-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.kt-menu-item .kt-menu-check { width: 14px; flex: 0 0 auto; color: var(--amber); font-weight: 800; }
.kt-menu-item .kt-menu-sub { width: 12px; height: 12px; flex: 0 0 auto; color: var(--ink-muted); }
.kt-menu-sep {
  height: 1px;
  margin: 4px 8px;
  background: rgba(28, 36, 51, 0.12);
}

/* ==========================================================================
   toasts
   ========================================================================== */

.kt-toasts {
  position: fixed;
  z-index: 9600;
  right: 12px;
  bottom: calc(var(--taskbar-h) + 12px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.kt-toast {
  pointer-events: auto;
  min-width: 220px;
  max-width: 340px;
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--radius-menu);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.4);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  animation: ktToastIn 160ms ease-out;
}
.kt-toast.kt-toast-ach {
  border-left: 3px solid var(--amber);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.kt-toast.kt-toast-ach svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.kt-toast .kt-toast-title { font-weight: 700; color: var(--amber-soft); }
.kt-toast.kt-toast-out { opacity: 0; transition: opacity 200ms ease-in; }
/* v1.1 A4: toast with one action button (sound-discovery moment) */
.kt-toast.kt-toast-action {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kt-toast.kt-toast-action .kt-toast-text { flex: 1 1 auto; }
.kt-toast .kt-toast-btn {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-btn);
  background: var(--amber);
  color: var(--navy-deep);
}
.kt-toast .kt-toast-btn:hover { background: var(--amber-soft); }
@keyframes ktToastIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   dialogs
   ========================================================================== */

.kt-dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 9690;
  background: rgba(15, 23, 42, 0.45);
}
.kt-dialog {
  position: fixed;
  z-index: 9700;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow: auto;
  background: var(--paper);
  border-radius: var(--radius-win);
  box-shadow: var(--shadow-active);
  padding: 18px 20px 16px;
  animation: ktWinIn 140ms ease-out;
}
.kt-dialog h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.kt-dialog .kt-dialog-msg { margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.kt-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.kt-btn {
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid rgba(28, 36, 51, 0.25);
}
.kt-btn:hover { background: #f1ede2; }
.kt-btn.kt-btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.kt-btn.kt-btn-primary:hover { background: #2b3b54; }
.kt-btn.kt-btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.kt-btn.kt-btn-danger:hover { background: #a93226; }
.kt-btn.kt-btn-sm { padding: 4px 10px; font-size: 12.5px; }

/* properties dialog rows */
.kt-props { margin: 0 0 16px; }
.kt-props .kt-prop-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  padding: 5px 0;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(28, 36, 51, 0.08);
}
.kt-props .kt-prop-row:last-child { border-bottom: 0; }
.kt-props .kt-prop-key { color: var(--ink-muted); }
.kt-props .kt-prop-val { overflow-wrap: anywhere; }
.kt-prop-ro {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-muted);
  padding-top: 6px;
}

/* ==========================================================================
   folder + bin windows
   ========================================================================== */

.kt-folder-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #efe9dd;
  border-bottom: 1px solid rgba(28, 36, 51, 0.12);
  flex-wrap: wrap;
}
.kt-crumbs {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
}
.kt-crumb {
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--ink);
  white-space: nowrap;
}
.kt-crumb:hover { background: rgba(232, 160, 32, 0.18); }
.kt-crumb[aria-current="true"] { font-weight: 700; }
.kt-crumb-sep { color: var(--ink-muted); }

.kt-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  outline: none;
  min-height: 100%;
}
.kt-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 150px;
  gap: 8px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  border-bottom: 1px solid rgba(28, 36, 51, 0.1);
  user-select: none;
  -webkit-user-select: none;
}
.kt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 150px;
  gap: 8px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 13.5px;
  cursor: default;
  border: 1px solid transparent;
  user-select: none;
  -webkit-user-select: none;
}
.kt-row:hover { background: rgba(30, 41, 59, 0.06); }
.kt-row[aria-selected="true"] {
  background: rgba(232, 160, 32, 0.18);
  border-color: rgba(232, 160, 32, 0.55);
}
.kt-row.kt-cut { opacity: 0.5; }
.kt-row .kt-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.kt-row .kt-row-name svg { width: 18px; height: 18px; flex: 0 0 auto; }
.kt-row .kt-row-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-row .kt-row-type, .kt-row .kt-row-mod {
  font-size: 12.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kt-row .kt-rename-input {
  font: inherit;
  font-size: 13.5px;
  border: 1px solid var(--amber);
  border-radius: 4px;
  padding: 1px 4px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.kt-list-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13.5px;
}

/* bin rows: name | location | deleted | actions */
.kt-bin-head, .kt-bin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) 130px 150px;
  gap: 8px;
  align-items: center;
}
.kt-bin-row .kt-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

/* ==========================================================================
   boot screen
   ========================================================================== */

.kt-boot {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background: var(--navy-deep);
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 300ms ease-out;
}
.kt-boot.kt-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 300ms ease-out, visibility 0s 300ms;
}
.kt-boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: min(320px, 80vw);
}
.kt-boot-k { width: 96px; height: 96px; }
.kt-boot-kpath {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.kt-boot.kt-booting .kt-boot-kpath {
  animation: ktKDraw 900ms ease-out forwards;
}
@keyframes ktKDraw {
  to { stroke-dashoffset: 0; }
}
.kt-boot-bar {
  width: 220px;
  height: 4px;
  border-radius: 2px;
  background: rgba(246, 243, 236, 0.14);
  overflow: hidden;
}
.kt-boot-fill {
  width: var(--boot-p, 0%);
  height: 100%;
  border-radius: 2px;
  background: var(--amber);
  transition: width 1600ms linear;
}
.kt-boot-msg {
  margin: 0;
  font-size: 13px;
  color: #8fa0b8;
  min-height: 1.4em;
  text-align: center;
}

/* ==========================================================================
   reduced motion (OS setting or the Settings toggle via body.kt-reduce-fx)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* includes body's own pseudo-elements: the CRT overlay lives on body::after */
body.kt-reduce-fx, body.kt-reduce-fx::before, body.kt-reduce-fx::after,
body.kt-reduce-fx *, body.kt-reduce-fx *::before, body.kt-reduce-fx *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ==========================================================================
   small screens (<820px) per spec section 8
   ========================================================================== */

@media (max-width: 819px) {
  :root {
    --cell-w: 88px;
    --cell-h: 96px;
  }
  .kt-window {
    inset: 0 0 0 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    transform: none !important;
  }
  .kt-rs { display: none; }
  .kt-start { width: calc(100vw - 16px); }
  .kt-start-cols { grid-template-columns: 1fr; }
  .kt-clock-date { display: none; }
  .kt-list-head, .kt-row { grid-template-columns: minmax(0, 1fr) 90px; }
  .kt-row .kt-row-mod, .kt-list-head .kt-head-mod { display: none; }
  .kt-bin-head, .kt-bin-row { grid-template-columns: minmax(0, 1fr) 130px; }
  .kt-bin-head .kt-head-loc, .kt-bin-row .kt-row-loc,
  .kt-bin-head .kt-head-del, .kt-bin-row .kt-row-del { display: none; }
}

/* ==========================================================================
   P3: tool launcher windows
   ========================================================================== */

.kt-launcher {
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  overflow-y: auto;
}
.kt-launcher-head { display: flex; align-items: center; gap: 14px; }
.kt-launcher-icon svg { width: 56px; height: 56px; display: block; }
.kt-launcher-name { margin: 0; font-size: 19px; font-weight: 800; color: var(--navy); }
.kt-launcher-host { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.kt-launcher-blurb { margin: 0; font-size: 14px; line-height: 1.55; }

/* H2 launcher profile: sectioned detail (problem / what it does / built) */
.kt-launcher-section { display: flex; flex-direction: column; gap: 6px; }
.kt-launcher-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.kt-launcher-text { margin: 0; font-size: 13.5px; line-height: 1.5; }
.kt-launcher-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kt-launcher-note { margin: 4px 0 0; font-size: 12px; color: var(--ink-muted); }

.kt-launcher-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.kt-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.08);
  color: var(--navy);
  border: 1px solid rgba(30, 41, 59, 0.14);
}
.kt-launcher-actions { display: flex; gap: 8px; margin-top: 4px; }
.kt-launcher-foot {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  border-top: 1px solid rgba(30, 41, 59, 0.1);
  padding-top: 10px;
}

/* ==========================================================================
   P3: notepad
   ========================================================================== */

.kt-note-root { display: flex; flex-direction: column; height: 100%; }
.kt-note-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #efe9dd;
  border-bottom: 1px solid rgba(28, 36, 51, 0.12);
  flex-wrap: wrap;
}
.kt-note-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-muted);
}
.kt-note-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #58a45c;
  flex: 0 0 auto;
}
.kt-note-dot.kt-dirty { background: var(--amber); }
.kt-note-ta {
  flex: 1 1 auto;
  width: 100%;
  resize: none;
  border: 0;
  outline: none;
  padding: 12px 14px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ==========================================================================
   P3: About Kubatools.pdf viewer
   ========================================================================== */

.kt-pdf-root { display: flex; flex-direction: column; height: 100%; }
.kt-pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #efe9dd;
  border-bottom: 1px solid rgba(28, 36, 51, 0.12);
  flex-wrap: wrap;
}
.kt-pdf-zoom { font-size: 12.5px; min-width: 42px; text-align: center; color: var(--ink-muted); }
.kt-pdf-pageind { font-size: 12.5px; color: var(--ink-muted); margin-left: 10px; }
.kt-pdf-spacer { flex: 1 1 auto; }
.kt-pdf-scroll {
  --page-width: 640px;
  flex: 1 1 auto;
  overflow: auto;
  background: #8b93a3;
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.kt-page {
  width: var(--page-width);
  max-width: 100%;
  min-height: calc(var(--page-width) * 1.4142);
  background: var(--surface);
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.35);
  padding: calc(var(--page-width) * 0.085);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.kt-page p { margin: 0 0 14px; overflow-wrap: anywhere; }
.kt-page-title {
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  border-bottom: 3px solid var(--amber);
  padding-bottom: 8px;
}
.kt-page-lead { font-size: 15px; }
.kt-page-tool { margin: 0 0 16px; }
.kt-page-toolname {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--navy);
  display: inline-block;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 1px;
}
.kt-page-toolproblem {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-muted);
}
.kt-page-toollink { margin: 0; font-size: 13px; }
.kt-pdf-link { color: #9a6a10; text-decoration-color: rgba(232, 160, 32, 0.6); }
.kt-pdf-link:hover { color: var(--navy); }
.kt-page-privacy { color: var(--ink-muted); font-size: 13px; }
.kt-page-footer { color: var(--ink-muted); font-size: 12.5px; }

/* ==========================================================================
   P3: terminal
   ========================================================================== */

.kt-term-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--navy-deep);
  color: var(--green-term);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: text;
}
.kt-term-out {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px 4px;
}
.kt-term-line { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; min-height: 1.2em; }
.kt-term-line.kt-term-echo { color: #b9c4d4; }
.kt-term-line.kt-term-err { color: var(--amber-soft); }
.kt-term-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 12px 10px;
}
.kt-term-prompt { color: var(--amber); white-space: nowrap; }
.kt-term-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--green-term);
  font-family: inherit;
  font-size: inherit;
  caret-color: var(--amber);
  padding: 2px 0;
}
.kt-term-input:focus-visible { outline: none; }

/* ==========================================================================
   P3: Deep Clean
   ========================================================================== */

.kt-dc-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
}
.kt-dc-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 326px;
  background: var(--navy);
  border-radius: 8px;
  padding: 7px 12px;
}
.kt-dc-counter {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--amber);
  min-width: 44px;
  text-align: center;
}
.kt-dc-face {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  width: 40px;
  height: 32px;
  border-radius: 7px;
  background: var(--paper);
  color: var(--navy);
  border: 1px solid rgba(28, 36, 51, 0.3);
}
.kt-dc-face:hover { background: var(--amber-soft); }
.kt-dc-board {
  display: grid;
  grid-template-columns: repeat(9, 34px);
  grid-auto-rows: 34px;
  gap: 2px;
  background: rgba(30, 41, 59, 0.16);
  padding: 4px;
  border-radius: 8px;
  touch-action: manipulation;
}
.kt-dc-cell {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: linear-gradient(180deg, #d9dee8 0%, #c2cad8 100%);
  border: 1px solid rgba(30, 41, 59, 0.25);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
  cursor: default;
  padding: 0;
}
.kt-dc-cell:hover { background: #e6eaf2; }
.kt-dc-cell svg { width: 20px; height: 20px; }
.kt-dc-cell.kt-open {
  background: var(--paper);
  border-color: rgba(30, 41, 59, 0.12);
}
.kt-dc-cell.kt-open:hover { background: var(--paper); }
.kt-dc-cell.kt-mine { background: #f3d9d4; }
.kt-dc-cell.kt-dc-hit { background: var(--danger); animation: ktDcPulse 700ms ease-in-out 3; }
@keyframes ktDcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
  50% { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0.45); }
}
.kt-dc-cell.kt-n1 { color: #2563ab; }
.kt-dc-cell.kt-n2 { color: #2f7d3a; }
.kt-dc-cell.kt-n3 { color: #c0392b; }
.kt-dc-cell.kt-n4 { color: #5b3a9b; }
.kt-dc-cell.kt-n5 { color: #8a4b12; }
.kt-dc-cell.kt-n6 { color: #157f86; }
.kt-dc-cell.kt-n7 { color: #1c2433; }
.kt-dc-cell.kt-n8 { color: #5b6578; }
.kt-dc-board.kt-dc-win { animation: ktDcSparkle 900ms ease-in-out 2; }
@keyframes ktDcSparkle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 160, 32, 0); }
  50% { box-shadow: 0 0 26px 6px rgba(232, 160, 32, 0.55); }
}
.kt-dc-msg {
  margin: 0;
  min-height: 1.3em;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--danger);
}
.kt-dc-caption {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-muted);
  text-align: center;
}
.kt-dc-best { font-weight: 700; }

/* ==========================================================================
   P3: settings
   ========================================================================== */

/* v1.2: Settings is the two-pane shell (nav left, panel right) the M5
   sections were written for. The 4-tab shell + its CSS are retired. */
.kt-settings { display: flex; flex-direction: column; height: 100%; }
.kt-settings-2pane { flex-direction: row; align-items: stretch; }
.kt-set-nav {
  flex: 0 0 172px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  overflow-y: auto;
  background: #efe9dd;
  border-right: 1px solid rgba(28, 36, 51, 0.12);
}
.kt-set-navbtn {
  text-align: left;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-btn);
  color: var(--ink-muted);
}
.kt-set-navbtn:hover { background: rgba(232, 160, 32, 0.14); color: var(--ink); }
.kt-set-navbtn.kt-active {
  background: var(--paper);
  color: var(--navy);
  box-shadow: inset 2px 0 0 var(--amber);
}
.kt-set-panel { flex: 1 1 auto; overflow: auto; padding: 16px 18px; }
.kt-set-h {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
}
.kt-set-toggle + .kt-set-h, .kt-wp-row + .kt-set-h { margin-top: 18px; }
.kt-wp-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.kt-wp-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border-radius: 8px;
  border: 2px solid transparent;
}
.kt-wp-thumb:hover { background: rgba(232, 160, 32, 0.12); }
.kt-wp-thumb.kt-current { border-color: var(--amber); }
.kt-wp-pic {
  width: 96px;
  height: 60px;
  border-radius: 5px;
  background-color: var(--navy-deep);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}
.kt-thumb-floorplan { background-image: url('../img/wallpapers/floorplan.svg'); }
.kt-thumb-dawn { background-image: url('../img/wallpapers/dawn.svg'); }
.kt-thumb-nightshift { background-image: url('../img/wallpapers/nightshift.svg'); }
.kt-thumb-crt { background-image: url('../img/wallpapers/crt.svg'); }
/* M5 picker swatches for the generated wallpapers — match the applied colours. */
.kt-thumb-aurora {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(45,170,125,0.6), transparent 60%),
    radial-gradient(ellipse at 70% 35%, rgba(96,86,206,0.55), transparent 60%);
  background-color: #0a1326;
}
.kt-thumb-solid-1 { background-color: #1e293b; }
.kt-thumb-solid-2 { background-color: #475569; }
.kt-thumb-solid-3 { background-color: #b9791a; }
.kt-thumb-solid-4 { background-color: #2d6a4f; }
.kt-thumb-solid-5 { background-color: #5e2750; }
.kt-thumb-solid-6 { background-color: #23272e; }
.kt-wp-pic.kt-locked { filter: grayscale(0.9) brightness(0.55); }
.kt-wp-name { font-size: 12px; color: var(--ink); }
.kt-set-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13.5px;
}
.kt-set-toggle input { accent-color: var(--amber); width: 16px; height: 16px; }
.kt-set-line { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; }
.kt-set-ver { color: var(--ink-muted); font-size: 12.5px; }
.kt-set-action { margin: 0 0 16px; }
.kt-set-desc { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.kt-ach-list { display: flex; flex-direction: column; gap: 8px; }
.kt-ach-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid rgba(28, 36, 51, 0.1);
}
.kt-ach-row.kt-locked { opacity: 0.66; background: #eceef2; }
.kt-ach-icon svg { width: 26px; height: 26px; display: block; }
.kt-ach-sil {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #c6ccd6;
  color: #7d8696;
  font-weight: 800;
  font-size: 15px;
}
.kt-ach-name { font-weight: 700; font-size: 13.5px; color: var(--navy); }
.kt-ach-line { font-size: 12.5px; color: var(--ink-muted); margin-top: 1px; }
.kt-ach-date { font-size: 11.5px; color: var(--ink-muted); margin-top: 3px; }

/* ==========================================================================
   P3/P4: CRT scanlines (toggle unlocks with the CRT wallpaper).
   Subtle scanlines + a slight green tint; the faint flicker only runs
   when motion is allowed (media query + the Settings reduce toggle).
   ========================================================================== */

body.kt-crt-scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9880;
  pointer-events: none;
  background-color: rgba(125, 216, 125, 0.05);
  background-image: repeating-linear-gradient(
    0deg,
    rgba(15, 23, 42, 0.18) 0 1px,
    transparent 1px 3px
  );
}
@media (prefers-reduced-motion: no-preference) {
  body.kt-crt-scanlines:not(.kt-reduce-fx)::after {
    animation: ktCrtFlicker 5s steps(50) infinite;
  }
}
@keyframes ktCrtFlicker {
  0%, 44%, 56%, 100% { opacity: 1; }
  50% { opacity: 0.93; }
}

/* ==========================================================================
   P3: 404 page (standalone, reuses window chrome classes)
   ========================================================================== */

.kt-404-stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 16px;
}
.kt-404-window {
  position: static;
  width: min(440px, 100%);
  min-height: 0;
}
.kt-404-body { padding: 22px 20px; font-size: 14.5px; line-height: 1.6; flex: 0 0 auto; }
.kt-404-body p { margin: 0; }
.kt-404-btn { display: inline-block; margin-top: 16px; text-decoration: none; }

/* ==========================================================================
   P3: small screens
   ========================================================================== */

@media (max-width: 819px) {
  .kt-dc-board {
    grid-template-columns: repeat(9, minmax(30px, 1fr));
    grid-auto-rows: minmax(30px, auto);
    width: 100%;
    max-width: 340px;
  }
  .kt-dc-cell { width: auto; height: auto; aspect-ratio: 1; }
  .kt-pdf-scroll { --page-width: 100%; padding: 14px 8px; }
  .kt-page { min-height: 0; padding: 22px 18px; }
  /* narrow windows: the settings nav stacks on top, scrolls sideways */
  .kt-settings-2pane { flex-direction: column; }
  .kt-set-nav {
    flex: 0 0 auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(28, 36, 51, 0.12);
  }
  .kt-set-navbtn { white-space: nowrap; }
}

/* ==========================================================================
   P4: KSOD (5.10) - amber on navy, above everything except nothing
   ========================================================================== */

.kt-ksod {
  position: fixed;
  inset: 0;
  z-index: 9930;
  background: var(--navy-deep);
  color: var(--amber);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.kt-ksod-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  max-width: 580px;
}
.kt-ksod-face {
  font-family: var(--font-ui);
  font-size: 92px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
}
.kt-ksod-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.kt-ksod-err { font-size: 14px; color: var(--amber-soft); }
.kt-ksod-progress { font-size: 14px; margin-top: 20px; }
.kt-ksod-hint { font-size: 13px; color: #8fa0b8; min-height: 1.2em; }

/* ==========================================================================
   P4: shutdown screen (spec 4) - one full-screen button, fades to black
   ========================================================================== */

.kt-shutdown {
  position: fixed;
  inset: 0;
  z-index: 9910;
  width: 100%;
  height: 100%;
  background: #000;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  font-family: var(--font-ui);
  cursor: pointer;
  opacity: 0;
  transition: opacity 700ms ease-in;
}
.kt-shutdown.kt-on { opacity: 1; }
.kt-shutdown:focus-visible { outline: none; }
.kt-shutdown .kt-shutdown-main {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #e9edf4;
}
.kt-shutdown .kt-shutdown-sub {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: #5b6578;
}

/* ==========================================================================
   P4: matrix rain canvas (terminal `matrix`)
   ========================================================================== */

.kt-matrix {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9750;
  pointer-events: none;
  opacity: 1;
  transition: opacity 400ms ease-out;
}
.kt-matrix.kt-matrix-out { opacity: 0; }

/* ==========================================================================
   v1.1 M2 - THEMES (A5). body[data-theme] swaps a handful of custom props.
   Navy is the :root default; the others only override what changes. WCAG AA
   text contrast is held in every theme. Retro 95 is defined here but withheld
   from the picker (KT.theme.list) until the M5 BIOS unlock.
   ========================================================================== */

/* Industrial: steel greys, amber hazard accent on active title bars, square
   corners. */
body[data-theme="industrial"] {
  --navy: #3a4250;
  --navy-deep: #2a313c;
  --paper: #e9ebee;
  --surface: #f7f8fa;
  --ink: #20262f;
  --ink-muted: #59616d;
  --radius-win: 2px;
  --radius-menu: 2px;
  --radius-btn: 2px;
  --radius-halo: 2px;
}
body[data-theme="industrial"] .kt-window.kt-active .kt-win-titlebar {
  background-image: repeating-linear-gradient(135deg,
    rgba(232, 160, 32, 0.16) 0 10px, transparent 10px 20px);
}

/* Night Shift: near-black, dim amber, for the 2am readers. */
body[data-theme="nightshift"] {
  --navy: #14181f;
  --navy-deep: #0a0d12;
  --amber: #d8922a;
  --amber-soft: #e7c98a;
  --paper: #1b2029;
  --surface: #232a35;
  --ink: #e7ecf3;
  --ink-muted: #9aa6b6;
}
/* dim-paper themes need light list separators + hovers re-tuned */
body[data-theme="nightshift"] .kt-row:hover { background: rgba(255, 255, 255, 0.06); }
body[data-theme="nightshift"] .kt-list-head,
body[data-theme="nightshift"] .kt-row { border-color: rgba(255, 255, 255, 0.08); }

/* Retro 95: grey bevels, navy title gradient. LOCKED (not in the picker) until
   the M5 BIOS egg. Defined now so the unlock is a one-line theme switch. */
body[data-theme="retro"] {
  --navy: #000080;
  --navy-deep: #008080;
  --amber: #000080;
  --amber-soft: #c3c7cb;
  --paper: #c0c0c0;
  --surface: #ffffff;
  --ink: #000000;
  --ink-muted: #404040;
  --radius-win: 0;
  --radius-menu: 0;
  --radius-btn: 0;
  --radius-halo: 0;
}
body[data-theme="retro"] .kt-win-titlebar {
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
}
body[data-theme="retro"] .kt-window {
  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff,
    inset -2px -2px 0 #808080, 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   v1.1 M2 - LIVE WALLPAPER "Floor Plan" (A1). DOM/CSS layer behind icons,
   built by main.js from a small data array. Pointer-events:none so all desk
   clicks/marquee pass through. <=15 animated elements, low contrast. Under
   reduced motion main.js renders NOTHING here (static SVG is the fallback).
   ========================================================================== */

.kt-wallpaper-live {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: 0;            /* same band as the static wallpaper, above it */
  pointer-events: none;
  overflow: hidden;
}
.kt-wl-block {
  position: absolute;
  border: 1.5px solid rgba(232, 160, 32, 0.16);
  border-radius: 3px;
  background: rgba(232, 160, 32, 0.02);
}
.kt-wl-led {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6fae5a;
  box-shadow: 0 0 5px rgba(111, 174, 90, 0.5);
  animation: ktLed 4.5s ease-in-out infinite;
  animation-delay: var(--led-delay, 0s);
  opacity: 0.55;
}
@keyframes ktLed {
  0%, 100% { background: #6fae5a; box-shadow: 0 0 5px rgba(111, 174, 90, 0.5); }
  50% { background: #d8922a; box-shadow: 0 0 6px rgba(216, 146, 42, 0.6); }
}
.kt-wl-forklift {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: rgba(232, 160, 32, 0.5);
  box-shadow: 0 0 8px rgba(232, 160, 32, 0.35);
  offset-path: var(--fork-path);
  offset-rotate: auto;
  animation: ktForkliftOffset 90s linear infinite;
}
@keyframes ktForkliftOffset {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
/* Fallback for engines without offset-path: a keyframed translate loop around a
   rough rectangle. @supports keeps the offset-path path primary where present. */
@supports not (offset-path: path("M0 0")) {
  .kt-wl-forklift {
    animation: ktForkliftTranslate 90s linear infinite;
  }
  @keyframes ktForkliftTranslate {
    0%   { transform: translate(12vw, 18vh); }
    25%  { transform: translate(80vw, 18vh); }
    50%  { transform: translate(80vw, 72vh); }
    75%  { transform: translate(12vw, 72vh); }
    100% { transform: translate(12vw, 18vh); }
  }
}

/* ==========================================================================
   v1.1 M2 - DESKTOP WIDGETS (A3): borderless cards, draggable, persisted.
   ========================================================================== */

.kt-widgets-layer {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: 1;           /* same band as icons; below windows (z-index 2) */
  pointer-events: none; /* only the widgets themselves take pointer events */
}
.kt-widget {
  position: absolute;
  pointer-events: auto;
  color: #fff;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.9);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 8px;
  padding: 10px 14px;
}
.kt-widget:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kt-widget.kt-dragging { opacity: 0.55; }

/* Shift Board */
.kt-wg-shiftboard { min-width: 190px; }
.kt-wg-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber-soft);
  margin: 0 0 7px;
}
.kt-wg-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  line-height: 1.7;
}
.kt-wg-row .kt-wg-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.kt-wg-incident { cursor: pointer; }
.kt-wg-incident:hover .kt-wg-val { color: var(--amber-soft); }
/* ticking slide on numeric updates - reduced motion drops the slide (16.7) */
.kt-wg-val.kt-tick { animation: ktTick 320ms ease-out; }
@keyframes ktTick {
  from { transform: translateY(-3px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}

/* Analog clock widget */
.kt-wg-clock { width: 96px; height: 96px; padding: 0; }
.kt-wg-clock svg { width: 96px; height: 96px; display: block; filter: drop-shadow(0 2px 5px rgba(15,23,42,0.6)); }
.kt-wg-clock .kt-clk-hand { transform-box: fill-box; transform-origin: center bottom; }
.kt-wg-clock .kt-clk-sec { transition: transform 180ms cubic-bezier(.4,2,.55,.44); }

/* Sticky note (A3) - fs node of type sticky, rendered on the desktop */
.kt-sticky {
  position: absolute;
  pointer-events: auto; /* the layer is pointer-events:none; without this, clicks fall through */
  z-index: 1;
  width: 156px;
  min-height: 120px;
  background: #f0b84a;
  color: #3a2a06;
  border-radius: 2px 2px 10px 2px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  touch-action: none;
}
.kt-sticky.kt-dragging { opacity: 0.6; }
.kt-sticky.kt-binning {
  transition: transform 160ms ease-in, opacity 160ms ease-in;
  transform: scale(0.1);
  opacity: 0;
}
.kt-sticky textarea {
  flex: 1 1 auto;
  width: 100%;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
}
.kt-sticky textarea::placeholder { color: rgba(58, 42, 6, 0.5); }
/* the corner cross (v1.2): bins the note, one click */
.kt-sticky-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  color: rgba(58, 42, 6, 0.55);
  font-size: 15px;
  line-height: 1;
}
.kt-sticky-x:hover { background: rgba(58, 42, 6, 0.14); color: #3a2a06; }
.kt-sticky textarea { padding-right: 14px; }

/* ==========================================================================
   v1.1 M2 - ICON HUES (B1) + SILHOUETTES (B2) + SIZES (B3)
   ========================================================================== */

/* B1 hue ramp: one accent per tool, fed to the glyph through --tool-accent
   (custom properties inherit through the <use> shadow boundary). Tile + base
   strokes stay navy/amber; only the one accent element changes. */
.kt-icon[data-tool="cic-maker"]         { --tool-accent: #e57a3c; } /* warm red-amber */
.kt-icon[data-tool="sop-maker"]         { --tool-accent: #8fae3a; } /* green-amber */
.kt-icon[data-tool="panel-instructions"]{ --tool-accent: #4f7bb0; } /* blue-steel */
.kt-icon[data-tool="panel-measurement"] { --tool-accent: #2f9aa0; } /* teal-steel */
.kt-icon[data-tool="sop-studio"]        { --tool-accent: #8a6bbf; } /* violet-steel */
.kt-icon[data-tool="kpscan"]            { --tool-accent: #f08a1d; } /* signal-orange */
.kt-icon[data-tool="mentid"]            { --tool-accent: #4cb3a6; } /* soft-teal */

/* B2 three on-desktop shape classes:
   - tools/apps keep the tile glyph (no extra class needed)
   - documents (.kt-shape-doc) use the page-with-fold silhouette, no tile
   - folders keep the folder silhouette (the glyph already is one)
   The glyph swap is done in JS (glyphFor); this just removes any tile framing
   and sizes the page glyph to read as a distinct silhouette. */
.kt-icon.kt-shape-doc .kt-icon-glyph svg { filter: drop-shadow(0 2px 4px rgba(15,23,42,0.45)); }

/* B3 icon sizes: cell + glyph scale together. medium is the default (the
   :root --cell-w/h). main.js stamps body with the size class at boot. */
body.kt-icons-small { --cell-w: 72px; --cell-h: 84px; }
body.kt-icons-small .kt-icon .kt-icon-glyph,
body.kt-icons-small .kt-icon .kt-icon-glyph svg { width: 38px; height: 38px; }
body.kt-icons-small .kt-icon .kt-icon-label { font-size: 11px; }
body.kt-icons-large { --cell-w: 120px; --cell-h: 128px; }
body.kt-icons-large .kt-icon .kt-icon-glyph,
body.kt-icons-large .kt-icon .kt-icon-glyph svg { width: 64px; height: 64px; }
body.kt-icons-large .kt-icon .kt-icon-label { font-size: 13.5px; }

/* ==========================================================================
   v1.1 M2 - MICRO-REACTIVITY (A6). All transform/opacity, all reduced-motion
   gated (the blanket @media + body.kt-reduce-fx rules already zero animations
   and transitions; these add the interactive transforms which those rules
   neutralise to 0.01ms under reduced motion).
   ========================================================================== */

.kt-icon { transition: transform 120ms ease, background-color 120ms ease; }
.kt-icon:hover { transform: translateY(-2px) rotate(-1deg); }
.kt-icon:active { transform: scale(0.94); }
.kt-icon.kt-dragging:hover { transform: none; }

.kt-tb-btn, .kt-start-btn, .kt-ach-chip, .kt-speaker, .kt-tray-btn, .kt-clock {
  transition: transform 90ms ease, background-color 120ms ease;
}
.kt-tb-btn:active, .kt-start-btn:active, .kt-ach-chip:active,
.kt-speaker:active, .kt-tray-btn:active, .kt-clock:active { transform: translateY(1px); }

/* bin lid tilt when a dragged item is near (A6) - JS toggles .kt-bin-near */
.kt-icon.kt-bin-near .kt-icon-glyph { transform: rotate(-9deg); transition: transform 140ms ease; }

/* empty-desktop double-click ripple (A6) */
.kt-ripple {
  position: fixed;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(232, 160, 32, 0.5);
  pointer-events: none;
  animation: ktRipple 1500ms ease-out forwards;
}
@keyframes ktRipple {
  from { transform: scale(0.3); opacity: 0.8; }
  to { transform: scale(7); opacity: 0; }
}

/* boot progress sticks at ~95% then snaps (A6) - JS sets the two phases */
.kt-boot-fill.kt-boot-stick { transition: width 400ms ease-out; }
.kt-boot-fill.kt-boot-snap { transition: width 160ms cubic-bezier(.2,.8,.2,1); }

/* ==========================================================================
   v1.1 M2 - taskbar speaker (A4)
   ========================================================================== */

.kt-speaker, .kt-tray-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-btn);
  color: #e9edf4;
}
.kt-speaker svg, .kt-tray-btn svg { width: 18px; height: 18px; }
.kt-speaker:hover, .kt-tray-btn:hover { background: rgba(255, 255, 255, 0.12); }
.kt-speaker.kt-sound-on { color: var(--amber); }

/* ==========================================================================
   v1.1 M2 - reduced-motion blanket additions (16.7). The global @media and
   body.kt-reduce-fx rules already kill animations/transitions to ~0. These
   extra rules turn OFF the ambient layers entirely (LEDs, forklift, ripple)
   so nothing renders as static-but-mid-frame, and remove interactive lifts.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kt-wl-led, .kt-wl-forklift { animation: none !important; }
  .kt-wl-led { background: #6fae5a; box-shadow: none; }
  .kt-icon:hover, .kt-icon:active { transform: none; }
  .kt-ripple { display: none; }
}
body.kt-reduce-fx .kt-wl-led,
body.kt-reduce-fx .kt-wl-forklift { animation: none !important; }
body.kt-reduce-fx .kt-wl-led { background: #6fae5a; box-shadow: none; }
body.kt-reduce-fx .kt-icon:hover,
body.kt-reduce-fx .kt-icon:active { transform: none; }
body.kt-reduce-fx .kt-ripple { display: none; }

/* small screens: widgets + stickies stay usable; live wallpaper trims via JS */
@media (max-width: 819px) {
  .kt-wg-shiftboard { min-width: 150px; font-size: 12px; }
  .kt-sticky { width: 132px; }
}