/* =============================================================
   kahla.xyz
   A desktop, but lit. Warm paper windows on a grainy gradient
   field. No flat black void.
   Terminal green is reserved for system and status labels only.
   ============================================================= */

:root {
  --void:        #0B0B0C;
  --ink:         #16161A;
  --ink-soft:    #2A2A31;
  --ember:       #D4622A;
  --ember-hot:   #FF8A4C;
  --violet:      #5B3FCC;
  --coolant:     #1FA0A8;
  --paper:       #F2EDE6;
  --paper-dim:   #DDD5C9;
  --paper-line:  #C7BEB0;
  --sys:         #00FF41;

  --chrome-h:    34px;
  --taskbar-h:   44px;
  --notch:       12px;

  --font-ui:   "Chakra Petch", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-body: "Inter", system-ui, sans-serif;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

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

.sys {
  font-family: var(--font-mono);
  color: var(--sys);
  letter-spacing: .08em;
}

/* -------------------------------------------------------------
   BOOT
   ------------------------------------------------------------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--void);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vw;
}
.boot.done { opacity: 0; pointer-events: none; transition: opacity .45s ease; }

.boot-log {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.6vw, 14px);
  line-height: 1.9;
  color: var(--sys);
  text-shadow: 0 0 12px rgba(0, 255, 65, .35);
  white-space: pre-wrap;
}
.boot-skip {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 237, 230, .32);
}

/* -------------------------------------------------------------
   DESKTOP AND WALLPAPER
   ------------------------------------------------------------- */
.desktop {
  position: relative;
  height: 100dvh;
  width: 100%;
  padding: clamp(20px, 3vw, 44px);
  padding-bottom: calc(var(--taskbar-h) + 24px);
  animation: fadeUp .6s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.wallpaper { position: fixed; inset: 0; z-index: 0; background: var(--void); }
.wall-layer { position: absolute; inset: -20%; filter: blur(60px); opacity: .95; }

/* Ember: burnt orange bleeding up into violet. The default. */
[data-theme="ember"] .wall-a {
  background: radial-gradient(closest-side at 30% 85%, var(--ember-hot), transparent 72%);
}
[data-theme="ember"] .wall-b {
  background: radial-gradient(closest-side at 78% 18%, var(--violet), transparent 68%);
  opacity: .8;
}
[data-theme="ember"] .wall-c {
  background: radial-gradient(closest-side at 55% 55%, #B03A6E, transparent 60%);
  opacity: .45;
}

/* Coolant: teal and deep blue with one warm bruise. */
[data-theme="coolant"] .wall-a {
  background: radial-gradient(closest-side at 18% 20%, var(--ember), transparent 62%);
  opacity: .75;
}
[data-theme="coolant"] .wall-b {
  background: radial-gradient(closest-side at 22% 92%, #1D6FD0, transparent 70%);
}
[data-theme="coolant"] .wall-c {
  background: radial-gradient(closest-side at 72% 60%, var(--coolant), transparent 66%);
  opacity: .6;
}

/* Violet: Kayde adjacent, quieter, more midnight. */
[data-theme="violet"] .wall-a {
  background: radial-gradient(closest-side at 70% 25%, var(--violet), transparent 70%);
}
[data-theme="violet"] .wall-b {
  background: radial-gradient(closest-side at 25% 80%, #7A2E9E, transparent 68%);
  opacity: .7;
}
[data-theme="violet"] .wall-c {
  background: radial-gradient(closest-side at 50% 50%, var(--ember), transparent 45%);
  opacity: .28;
}

/* Void: for when you want restraint. Still not flat black. */
[data-theme="void"] .wall-a {
  background: radial-gradient(closest-side at 50% 100%, var(--ember), transparent 60%);
  opacity: .18;
}
[data-theme="void"] .wall-b { background: none; }
[data-theme="void"] .wall-c { background: none; }

/* The grain. This is what stops the gradient looking like a
   default hero background. */
.grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: grainDrift 1.2s steps(4) infinite;
}
@keyframes grainDrift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .5) 0 1px,
    transparent 1px 3px
  );
}

/* -------------------------------------------------------------
   BRAND
   ------------------------------------------------------------- */
.brand { position: relative; z-index: 1; margin-bottom: clamp(24px, 4vh, 48px); }

.brand-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(26px, 4.2vw, 52px);
  letter-spacing: .16em;
  line-height: 1;
  color: var(--paper);
  text-shadow: 2px 0 0 rgba(212, 98, 42, .55), -2px 0 0 rgba(91, 79, 204, .35);
}
.brand-line {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: .06em;
  color: rgba(242, 237, 230, .74);
}
.brand-line .sys { margin-right: 6px; }

/* -------------------------------------------------------------
   ICONS
   ------------------------------------------------------------- */
.icon-grid {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, 96px);
  gap: 8px 4px;
  max-width: 520px;
}

.icon {
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.icon:hover, .icon:focus-visible {
  background: rgba(11, 11, 12, .42);
  border-color: rgba(212, 98, 42, .55);
  transform: translateY(-2px);
}
.icon:hover .icon-label { color: var(--ember-hot); }

.icon-art {
  width: 40px;
  height: 40px;
  color: var(--paper);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
.icon:hover .icon-art { color: var(--ember-hot); }

.icon-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--paper);
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
  transition: color .16s ease;
}

/* -------------------------------------------------------------
   WINDOWS
   ------------------------------------------------------------- */
.window-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  min-height: 180px;
  pointer-events: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(11, 11, 12, .9);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .1) inset;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  animation: winIn .18s ease both;
}
@keyframes winIn {
  from { opacity: 0; transform: scale(.98) translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.window.minimised { display: none; }
.window.maximised {
  inset: 0 0 var(--taskbar-h) 0 !important;
  width: auto !important;
  height: auto !important;
  clip-path: none;
}

.title-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--chrome-h);
  padding: 0 6px 0 12px;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink-soft) 100%);
  color: var(--paper-dim);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.window.focused .title-bar {
  background: linear-gradient(90deg, var(--ember) 0%, #8E3A6B 100%);
  color: #fff;
}
.title-bar:active { cursor: grabbing; }

.title-text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-btns { display: flex; gap: 4px; }
.win-btn {
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  background: rgba(242, 237, 230, .14);
  border: 1px solid rgba(242, 237, 230, .3);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  color: inherit;
}
.win-btn:hover { background: rgba(242, 237, 230, .95); color: var(--ink); }
.win-btn.close:hover { background: #E03A3A; color: #fff; border-color: #E03A3A; }

.win-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(199, 190, 176, .28) 27px 28px),
    var(--paper);
}
.win-body::-webkit-scrollbar { width: 12px; }
.win-body::-webkit-scrollbar-track { background: var(--paper-dim); }
.win-body::-webkit-scrollbar-thumb { background: var(--ink-soft); border: 3px solid var(--paper-dim); }

/* Links window ------------------------------------------------ */
.link-group + .link-group { margin-top: 22px; }
.link-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ember);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--paper-line);
  margin-bottom: 10px;
}

.link-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-left: 2px solid transparent;
  transition: background .14s ease, border-color .14s ease, padding-left .14s ease;
}
.link-row:hover, .link-row:focus-visible {
  background: rgba(212, 98, 42, .1);
  border-left-color: var(--ember);
  padding-left: 16px;
  outline: none;
}
.link-name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.link-note {
  flex: 1;
  font-size: 12px;
  color: #6D655B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-arrow {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ember);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .14s ease, transform .14s ease;
}
.link-row:hover .link-arrow, .link-row:focus-visible .link-arrow {
  opacity: 1;
  transform: none;
}

/* Text window ------------------------------------------------- */
.win-body h2 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 12px;
}
.win-body h2 + p { margin-top: 0; }
.win-body p {
  font-size: 14px;
  line-height: 28px;
  color: #2E2A26;
  margin-bottom: 20px;
}
.win-body p:last-child { margin-bottom: 0; }
.win-body h2:not(:first-child) { margin-top: 8px; }

/* Terminal window --------------------------------------------- */
.win-body.terminal {
  background: var(--void);
  padding: 18px;
  background-image: repeating-linear-gradient(to bottom, rgba(0, 255, 65, .04) 0 1px, transparent 1px 3px);
}
.terminal pre {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--sys);
  text-shadow: 0 0 10px rgba(0, 255, 65, .3);
  white-space: pre-wrap;
}

/* System window ----------------------------------------------- */
.sys-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 12px;
}
.wall-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.wall-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--paper-line);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  transition: border-color .14s ease, transform .14s ease;
}
.wall-opt:hover { transform: translateY(-1px); }
.wall-opt[aria-pressed="true"] {
  border-color: var(--ember);
  box-shadow: inset 0 0 0 1px var(--ember);
}
.wall-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink);
  flex: none;
}
.sys-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  color: #6D655B;
  border-top: 1px solid var(--paper-line);
  padding-top: 12px;
}

/* -------------------------------------------------------------
   TASKBAR
   ------------------------------------------------------------- */
.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  height: var(--taskbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: rgba(11, 11, 12, .82);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(212, 98, 42, .5);
}

.start {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px 0 10px;
  background: var(--ember);
  color: #0B0B0C;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: lowercase;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.start:hover { background: var(--ember-hot); }
.start-mark { width: 10px; height: 10px; background: #0B0B0C; }

.task-list { flex: 1; display: flex; gap: 6px; list-style: none; overflow: hidden; }
.task-btn {
  height: 30px;
  max-width: 190px;
  padding: 0 12px;
  background: rgba(242, 237, 230, .07);
  border: 1px solid rgba(242, 237, 230, .16);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(242, 237, 230, .8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-btn:hover { background: rgba(242, 237, 230, .14); }
.task-btn.active { border-color: var(--ember); color: var(--ember-hot); }

.tray {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 14px;
  border-left: 1px solid rgba(242, 237, 230, .16);
}
.tray-status { font-size: 10px; }
.tray-clock {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(242, 237, 230, .8);
  min-width: 44px;
  text-align: right;
}

/* Start menu -------------------------------------------------- */
.start-menu {
  position: fixed;
  bottom: var(--taskbar-h);
  left: 10px;
  z-index: 300;
  width: 240px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--void);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
  clip-path: polygon(0 var(--notch), var(--notch) 0, 100% 0, 100% 100%, 0 100%);
}
.start-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  text-align: left;
}
.start-item:hover { background: var(--ember); color: #fff; }
.start-item svg { width: 18px; height: 18px; flex: none; }

/* -------------------------------------------------------------
   MOBILE. Windows go fullscreen, dragging is off, the metaphor
   survives contact with a thumb.
   ------------------------------------------------------------- */
@media (max-width: 720px) {
  .desktop { padding: 20px 16px calc(var(--taskbar-h) + 20px); }

  .icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    max-width: none;
    gap: 4px;
  }
  .icon { width: auto; }

  .window,
  .window.maximised {
    inset: 0 0 var(--taskbar-h) 0 !important;
    width: auto !important;
    height: auto !important;
    clip-path: none;
  }
  .title-bar { cursor: default; height: 44px; }
  .win-btn { width: 32px; height: 28px; font-size: 14px; }
  .task-list { display: none; }
  .link-note { display: none; }
  .link-name { font-size: 17px; }
  .link-row { padding: 14px 10px; }
  .wall-picker { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}