/* ===== Ubuntu desktop emulation — base ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; }
:root {
  /* Yaru palette */
  --aubergine:#77216F; --aubergine-d:#5E2750; --aubergine-dd:#2C001E;
  --orange:#E95420; --orange-d:#C7470F; --orange-l:#F7A47E;
  --warm-gray:#AEA79F; --cool-gray:#333333; --ink:#111111;
  --paper:#FAFAFA; --light:#F7F7F7; --mid:#E9E7E4; --line:#D9D5D0;
  --dark-1:#1E1E1E; --dark-2:#2B2B2B; --dark-3:#3D3D3D;

  --accent:#E95420; --accent-text:#ffffff; --accent-soft:rgba(233,84,32,.16);
  --accent-dim:rgba(233,84,32,.5);

  --font:"Ubuntu","Ubuntu Beta","Cantarell","Noto Sans",sans-serif;
  --mono:"Ubuntu Mono","Noto Sans Mono",ui-monospace,monospace;

  /* light theme surfaces */
  --bg:#F5F4F2; --fg:#1B1B1B; --bg-surface:#FFFFFF; --bg-header:#EBE8E4;
  --bg-header-unf:#F5F4F2; --bg-side:#EFECE9; --bg-input:#FFFFFF;
  --fg-dim:#5E5C5A; --fg-faint:#8B8783;
  --border:#D8D4CF; --border-strong:#C9C4BE;
  --sel-bg:var(--accent); --sel-fg:#fff;
  --hover:rgba(0,0,0,.06); --active:rgba(0,0,0,.10);
  --menu-bg:#FFFFFF; --menu-fg:#1B1B1B;
  --popover-bg:rgba(24,24,24,.96); --popover-fg:#EDEDED;
  --topbar-bg:rgba(20,20,20,.92); --topbar-fg:#F2F2F2;
  --dock-bg:rgba(22,22,22,.78);
  --win-radius:12px;
  --shadow-1:0 1px 3px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.14);
  --shadow-2:0 2px 6px rgba(0,0,0,.22),0 16px 42px rgba(0,0,0,.30);
  --shadow-pop:0 4px 22px rgba(0,0,0,.38);
}
body.dark {
  --bg:#262626; --fg:#EDEDED; --bg-surface:#2E2E2E; --bg-header:#303030;
  --bg-header-unf:#2B2B2B; --bg-side:#282828; --bg-input:#1F1F1F;
  --fg-dim:#B9B6B3; --fg-faint:#8B8783;
  --border:#454442; --border-strong:#555350;
  --hover:rgba(255,255,255,.07); --active:rgba(255,255,255,.12);
  --menu-bg:#2E2E2E; --menu-fg:#EDEDED;
  --light:#3A3A3A; --mid:#333231; --line:#454442; --paper:#2E2E2E;
}
body { font-family:var(--font); color:var(--fg); background:#000;
  -webkit-font-smoothing:antialiased; user-select:none; cursor:default; }
button { font-family:var(--font); border:none; background:none; color:inherit; cursor:default; }
input, textarea { font-family:var(--font); }
img { -webkit-user-drag:none; }
.hidden { display:none !important; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:rgba(120,115,110,.55); border-radius:6px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(120,115,110,.8); background-clip:content-box; border:2px solid transparent; }
::-webkit-scrollbar-track { background:transparent; }

/* accent variants */
body[data-accent="orange"]{--accent:#E95420;--accent-soft:rgba(233,84,32,.16);--accent-dim:rgba(233,84,32,.5)}
body[data-accent="bark"]{--accent:#787859;--accent-soft:rgba(120,120,89,.22);--accent-dim:rgba(120,120,89,.5)}
body[data-accent="sage"]{--accent:#657B69;--accent-soft:rgba(101,123,105,.22);--accent-dim:rgba(101,123,105,.5)}
body[data-accent="olive"]{--accent:#4B8501;--accent-soft:rgba(75,133,1,.18);--accent-dim:rgba(75,133,1,.5)}
body[data-accent="viridian"]{--accent:#03875B;--accent-soft:rgba(3,135,91,.18);--accent-dim:rgba(3,135,91,.5)}
body[data-accent="prussian"]{--accent:#0073A8;--accent-soft:rgba(0,115,168,.18);--accent-dim:rgba(0,115,168,.5)}
body[data-accent="blue"]{--accent:#19B6EE;--accent-soft:rgba(25,182,238,.20);--accent-dim:rgba(25,182,238,.55)}
body[data-accent="purple"]{--accent:#7764D8;--accent-soft:rgba(119,100,216,.20);--accent-dim:rgba(119,100,216,.55)}
body[data-accent="magenta"]{--accent:#B34CB3;--accent-soft:rgba(179,76,179,.20);--accent-dim:rgba(179,76,179,.55)}
body[data-accent="red"]{--accent:#E61B34;--accent-soft:rgba(230,27,52,.16);--accent-dim:rgba(230,27,52,.5)}

/* generic controls */
.btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:6px;
  background:var(--light); border:1px solid var(--border); color:var(--fg); font-size:13px; }
.btn:hover { background:var(--mid); }
.btn:active { background:var(--border); }
.btn.suggested { background:var(--accent); border-color:transparent; color:var(--accent-text); }
.btn.suggested:hover { filter:brightness(1.08); }
.btn.destructive { background:#E01B24; border-color:transparent; color:#fff; }
.btn.destructive:hover { background:#C01A22; }
.btn.flat { background:transparent; border-color:transparent; }
.btn.flat:hover { background:var(--hover); }
.btn:disabled, .btn.disabled { opacity:.45; pointer-events:none; }
.switch { position:relative; width:44px; height:24px; border-radius:14px; background:rgba(0,0,0,.28);
  transition:background .18s; flex:none; cursor:default; }
body.dark .switch { background:rgba(255,255,255,.22); }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:left .18s cubic-bezier(.2,.8,.3,1); }
.switch.on { background:var(--accent); }
.switch.on::after { left:22px; }
.switch.disabled { opacity:.4; pointer-events:none; }
input[type=range] { -webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
  background:linear-gradient(to right,var(--accent) var(--fill,50%),rgba(125,120,115,.35) var(--fill,50%)); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:1px solid rgba(0,0,0,.18); box-shadow:0 1px 4px rgba(0,0,0,.35); }
input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:1px solid rgba(0,0,0,.18); }
.spin { display:inline-block; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(0,0,0,.15);
  border-top-color:var(--accent); animation:rot 0.8s linear infinite; }
@keyframes rot { to { transform:rotate(360deg); } }

/* session layers */
.session-layer { position:fixed; inset:0; z-index:9000; background:#000; }
#boot-screen { display:flex; align-items:center; justify-content:center; }
.boot-inner { display:flex; flex-direction:column; align-items:center; gap:26px; margin-top:14vh; animation:fadein .5s; }
.boot-logo { width:74px; height:74px; background:url("../assets/logo.svg") center/contain no-repeat; }
.boot-word { color:#fff; font-size:30px; font-weight:300; letter-spacing:.5px; }
.boot-word::first-letter { font-weight:400; }
.boot-spinner { display:flex; gap:7px; margin-top:10px; }
.boot-spinner span { width:8px; height:8px; border-radius:50%; background:#3a3a3a; animation:bootdot 1.1s infinite; }
.boot-spinner span:nth-child(1){animation-delay:0s}.boot-spinner span:nth-child(2){animation-delay:.1s}
.boot-spinner span:nth-child(3){animation-delay:.2s}.boot-spinner span:nth-child(4){animation-delay:.3s}
.boot-spinner span:nth-child(5){animation-delay:.4s}
@keyframes bootdot { 0%,100%{background:#3a3a3a;transform:scale(1)} 45%{background:var(--orange);transform:scale(1.25)} }
@keyframes fadein { from{opacity:0} to{opacity:1} }
#off-screen { display:flex; align-items:center; justify-content:center; cursor:pointer; }
.off-hint { color:rgba(255,255,255,.28); font-size:14px; letter-spacing:.4px; animation:fadein 1.2s; }

/* narrow viewport advisory */
#narrow-advisory { position:fixed; inset:0; z-index:9500; background:radial-gradient(120% 120% at 50% 0%,#3d1638 0%,#1c0a1a 70%);
  display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; }
.na-card { max-width:340px; color:#eee; display:flex; flex-direction:column; align-items:center; gap:14px; }
.na-logo { width:64px; height:64px; background:url("../assets/logo.svg") center/contain no-repeat; }
.na-card h2 { font-weight:400; font-size:24px; }
.na-card p { font-size:14px; line-height:1.55; color:#cdc9c6; }
.na-card button { background:var(--orange); color:#fff; border-radius:8px; padding:9px 22px; font-size:14px; }
.na-card button:hover { background:#f06a3a; }


/* ---------- accessibility ---------- */
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-radius:4px; }
.wbtn:focus-visible, .dock-item:focus-visible, .ctx-item:focus-visible, .side-item:focus-visible, .grid-cell:focus-visible { outline:2px solid var(--accent); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}