/* ---- Karan OS mobile/touch theme ---- */
/* Every rule scoped under body.mobile. JS adds this class on coarse-pointer/narrow devices. */

/* Chrome sizes live in ONE place. Everything that must clear the top/bottom
   system furniture (#desktop, panels, KIRA, app bars) reads --chrome-t/--chrome-b
   instead of hard-coding pixels, so adding the nav bar reflows them all at once.
   Defaults are in css/system.css :root (30px / 0px = today's desktop). */
body.mobile {
  --navbar-h: 56px;
  --chrome-t: calc(38px + env(safe-area-inset-top));
  --chrome-b: calc(var(--navbar-h) + env(safe-area-inset-bottom));
}

body.mobile * { -webkit-tap-highlight-color: transparent; }

/* ---- nav bar ---- */
/* Home · Apps · Recents. Built only on mobile (js/navbar.js gates on the class),
   so on desktop this whole section has nothing to match. .glass supplies the
   blur/border; only layout and touch feedback live here. */
body.mobile #navbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 600;
  height: var(--chrome-b);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
body.mobile #navbar .nb-btn {
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text);
  opacity: .72;
  position: relative;
}
body.mobile #navbar .nb-btn svg {
  width: 26px;
  height: 26px;
  pointer-events: none; /* taps always land on the button, never the glyph */
}
body.mobile #navbar .nb-btn:active {
  opacity: 1;
  background: rgba(120,120,128,.22);
}
/* Recents earns a dot while the current Space holds windows. */
body.mobile #navbar .nb-btn.on { opacity: 1; }
body.mobile #navbar .nb-btn.on::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- menubar ---- */
/* Touch-real: 38px + the notch inset, and padding that pushes the row below it. */
body.mobile #menubar {
  font-size: 12px;
  gap: 8px;
  padding: 0 8px;
  height: calc(38px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
body.mobile #menubar .mb-right { gap: 8px; }
/* Fill the bar's full 38px content height — the menubar is the only home for
   CC/NC on mobile, so its items have to be real finger targets. */
body.mobile #menubar .mb-item { padding: 11px 8px; }

@media (max-width: 500px) {
  body.mobile #menubar .mb-item[data-act="mission"],
  body.mobile #menubar .mb-weather {
    display: none;
  }
}

/* spaces pills - touch targets (secondary path to Spaces; the primary is a
   horizontal swipe on #navbar) */
body.mobile .mb-spaces i {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

/* ---- dock ---- */
body.mobile #dock {
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  justify-content: flex-start;
}
body.mobile #dock::-webkit-scrollbar { display: none; }
body.mobile #dock .dicon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  transform: none !important;
}
body.mobile #dock .dicon svg {
  width: 40px;
  height: 40px;
}
body.mobile #dock .dicon:hover .tip { opacity: 0; }
/* The dock is hidden, NOT skipped: js/dock.js still builds it, so every
   `#dock [data-app="…"]` selector (genie minimize target, selftests, app code)
   keeps resolving. Recents + Apps cover both of its jobs on touch, and the
   bottom chrome shrinks vs. today. Declared after the block above so it wins. */
body.mobile #dock { display: none; }

/* ---- windows: effectively fullscreen ---- */
/* CSS beats wm.js's cached inline geometry, so a rotation or resize reflows
   every window for free with zero JS. Minimize's inline display:none is a
   different property and is untouched by this. */
body.mobile .window {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
}
body.mobile .window .titlebar {
  height: 44px;
  padding: 0 12px;
  gap: 10px;
}
body.mobile .window .tl { gap: 10px; }
body.mobile .window .tl span {
  width: 20px;
  height: 20px;
}
body.mobile .window .wtitle {
  font-size: 14px;
}
body.mobile .window .rsz {
  width: 34px;
  height: 34px;
}

/* ---- buttons / inputs inside windows ---- */
body.mobile .tool-btn {
  min-height: 34px;
  font-size: 14px;
  padding: 6px 14px;
}
body.mobile input,
body.mobile textarea,
body.mobile select {
  font-size: 16px;
}

/* ---- launchpad ---- */
body.mobile #launchpad .lp-grid {
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 20px 8px;
  width: 92vw;
}
body.mobile #launchpad .lp-app .lp-ic,
body.mobile #launchpad .lp-app .lp-ic svg {
  width: 52px;
  height: 52px;
}
body.mobile #launchpad .lp-search {
  width: 88vw;
}

/* ---- control center / notification center ---- */
body.mobile #ccpanel,
body.mobile #ncpanel {
  width: min(92vw, 340px);
  right: 8px;
}
/* --chrome-b already carries the safe-area inset, so these keep only the gap. */
body.mobile #ncpanel {
  bottom: calc(var(--chrome-b) + 24px);
}

/* ---- KIRA ---- */
body.mobile #kira {
  width: min(92vw, 300px);
  right: 16px;
  bottom: calc(var(--chrome-b) + 40px);
}

/* ---- spotlight ---- */
body.mobile #spotlight {
  padding-top: 10vh;
}
body.mobile #spotlight .sp-box {
  width: 92vw;
}
body.mobile #spotlight input {
  font-size: 18px;
}

/* ---- lock screen ---- */
body.mobile #lock .lk-time {
  font-size: 64px;
}

/* ---- calculator ---- */
body.mobile .calc button {
  font-size: 18px;
}

/* ---- context / menu popovers: finger targets ---- */
body.mobile #ctxmenu .mi,
body.mobile .menu-pop .mi {
  padding: 12px 14px;
}

/* ---- misc touch-friendliness fixes ---- */
body.mobile .settings .sw {
  width: 32px;
  height: 32px;
}
body.mobile .finder .fgrid {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}
body.mobile .app-side .side {
  width: 130px;
}
body.mobile #island {
  top: calc(8px + env(safe-area-inset-top));
  font-size: 13px;
  padding: 8px 16px;
  max-width: 90vw;
}
body.mobile #mc-hint {
  top: calc(12px + env(safe-area-inset-top));
}