/* ═══════════════════════════════════════════════════════════════════════════
   CHIKARA OS · shell.css
   System chrome: boot, status bar, screen container, app-view grammar,
   overlay grammar, launch transition, toast, shared controls (icon buttons,
   chips, overlays bars). Nothing in this file knows about a specific app.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 0 · SHELL TOKENS ──────────────────────────────────────────────────── */

:root {
  --shell-status-h: calc(46px + var(--safe-top));
  --shell-edge:     1.25rem;             /* side padding for shell surfaces */
  --shell-radius:   var(--r-lg);
  --shell-dur-in:   480ms;
  --shell-dur-out:  360ms;
  --shell-ease:     var(--ease-architect);
  --z-home:   100;
  --z-appview:200;
  --z-overlay:300;
  --z-launch: 400;
  --z-toast:  500;
}

/* ─── 1 · BOOT ──────────────────────────────────────────────────────────── */

#boot {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background-color: var(--surface-bg);
  transition:
    opacity 720ms var(--ease-architect),
    visibility 720ms var(--ease-architect);
}
#boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot__inner {
  text-align: center;
  transform: translateY(-2vh);
}
.boot__mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.35rem;
  display: block;
}
.boot__word {
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: .42em;
  font-weight: 500;
  color: var(--text-primary);
  padding-left: .42em; /* optical balance for the trailing letter-space */
}
.boot__tag {
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: .55rem;
}
.boot__bar {
  width: 132px;
  height: 2px;
  background: rgba(201,151,58,.16);
  margin: 1.9rem auto 0;
  border-radius: 2px;
  overflow: hidden;
}
.boot__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold-spec);
  background-size: 340% 100%;
  animation:
    boot-load 1.6s var(--ease-architect) forwards,
    gold-sweep 4s ease-in-out infinite;
}
@keyframes boot-load { to { width: 100%; } }

/* ─── 2 · STATUS BAR ────────────────────────────────────────────────────── */

.statusbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--shell-status-h);
  padding: var(--safe-top) calc(var(--shell-edge) + var(--safe-right)) 0 calc(var(--shell-edge) + var(--safe-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 250;
  pointer-events: none;
  color: var(--text-primary);
  transition: color var(--dur-base) var(--ease-material);
}
.statusbar > * { pointer-events: auto; }

.statusbar__left,
.statusbar__right {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
}
.statusbar__center {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + 46px / 2);
  transform: translate(-50%, -50%);
  color: var(--accent);
  opacity: .55;
  pointer-events: none;
}
.statusbar__mark { width: 18px; height: 18px; display: block; }

.statusbar__time {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.statusbar__conn {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: inherit;
  opacity: .78;
  transition: opacity var(--dur-base) var(--ease-material);
}
.statusbar__conn svg { display: block; }
/* When offline (set by JS via body[data-connection="offline"]) the icon dims
   and gains a small hairline slash treatment via colour change only. */
body[data-connection="offline"] .statusbar__conn {
  opacity: 1;
  color: var(--accent);
}

.statusbar__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: inherit;
  opacity: .78;
  border-radius: var(--r-sm);
  transition: opacity var(--dur-base) var(--ease-material);
}
.statusbar__icon:hover { opacity: 1; }

.notif-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-spec);
  background-size: 300% 100%;
  animation: gold-sweep 4s ease-in-out infinite;
  box-shadow: 0 0 0 2px var(--surface-bg);
}

/* Status bar reads light over immersive app views (toggled by JS) */
body[data-chrome="dark"] .statusbar { color: #F6F0E2; }
body[data-chrome="dark"] .notif-dot { box-shadow: 0 0 0 2px #0A0708; }

/* ─── 3 · SCREEN CONTAINER ──────────────────────────────────────────────── */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: var(--z-home);
}

/* ─── 4 · APP VIEW GRAMMAR ──────────────────────────────────────────────── */

/* An app view is a full-screen section that slides over the home. Apps are
   their own world; they cover the shell chrome beneath them. */
.appview {
  position: fixed;
  inset: 0;
  z-index: var(--z-appview);
  display: flex;
  flex-direction: column;
  background-color: var(--surface-bg);
  transform: translate3d(100%, 0, 0);
  transition: transform var(--shell-dur-in) var(--shell-ease);
  pointer-events: none;
  will-change: transform;
  contain: layout paint;
}

.appview.is-open {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  box-shadow: -8px 0 44px rgba(31,26,22,.10);
}
html[data-theme="obsidian"] .appview.is-open {
  box-shadow: -8px 0 44px rgba(0,0,0,.55);
}

/* Subtle Gamazine continuity inside app views, so they feel part of the
   same OS even though they are opaque. */
.appview::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--gamazine-mesh), var(--material-grain);
  background-size: 420% 420%, 340px 340px;
  background-position: 0% 50%, 0 0;
  background-blend-mode: soft-light, overlay;
  opacity: calc(var(--mesh-op) * .55);
  animation: gamazine-drift var(--dur-sweep) ease-in-out infinite;
}
.appview > * { position: relative; z-index: 1; }

.appview__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: calc(var(--safe-top) + 14px) calc(var(--shell-edge) + var(--safe-right)) 14px calc(var(--shell-edge) + var(--safe-left));
  min-height: var(--shell-status-h);
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg,
    rgba(255,251,239,.72),
    rgba(255,251,239,.35));
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
}
html[data-theme="obsidian"] .appview__bar {
  background: linear-gradient(180deg,
    rgba(31,24,27,.72),
    rgba(31,24,27,.35));
}

.appview__title { flex: 1 1 auto; min-width: 0; }
.appview__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.appview__title h2 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: -.004em;
  line-height: 1.15;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appview__spacer { flex: 0 0 34px; }

/* ─── 5 · OVERLAY GRAMMAR ───────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  visibility: hidden;
}
.overlay.is-open {
  pointer-events: auto;
  visibility: visible;
}

.overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 8, .32);
  -webkit-backdrop-filter: blur(2px) saturate(.9);
  backdrop-filter: blur(2px) saturate(.9);
  opacity: 0;
  transition: opacity var(--shell-dur-out) var(--ease-material);
  cursor: pointer;
}
.overlay.is-open .overlay__scrim { opacity: 1; }

.overlay__panel {
  position: absolute;
  background-color: var(--surface-bg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  will-change: transform, opacity;
}

/* Full-screen overlays: library, search */
.overlay--full .overlay__panel {
  inset: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  transform: translate3d(0, 3%, 0) scale(.985);
  opacity: 0;
  transition:
    transform var(--shell-dur-in) var(--ease-architect),
    opacity   var(--shell-dur-in) var(--ease-architect);
}
.overlay--full.is-open .overlay__panel {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

/* Panel overlays: control centre, notifications */
.overlay--panel .overlay__panel {
  left: var(--safe-left);
  right: var(--safe-right);
  bottom: 0;
  top: auto;
  max-height: 82vh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-bottom: var(--safe-bottom);
  transform: translate3d(0, 12%, 0);
  opacity: 0;
  transition:
    transform var(--shell-dur-in) var(--ease-architect),
    opacity   var(--shell-dur-out) var(--ease-material);
}
.overlay--panel.is-open .overlay__panel {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.overlay--panel .overlay__scrim {
  background: rgba(10, 7, 8, .38);
}

/* Overlay header bar (used by library, notifications) */
.overlay__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 14px calc(var(--shell-edge) + var(--safe-right)) 14px calc(var(--shell-edge) + var(--safe-left));
  min-height: 56px;
  border-bottom: 1px solid var(--hairline);
}
.overlay__title { flex: 1 1 auto; min-width: 0; }
.overlay__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.overlay__title h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.004em;
  line-height: 1.15;
  color: var(--text-primary);
}

/* Prevent body scroll bleed while an overlay is open */
body[data-overlay="true"] { overscroll-behavior: none; }

/* ─── 6 · ICON BUTTON ───────────────────────────────────────────────────── */

.iconbtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text-secondary);
  background: transparent;
  transition:
    color var(--dur-fast) var(--ease-material),
    background-color var(--dur-fast) var(--ease-material),
    transform var(--dur-fast) var(--ease-material);
}
.iconbtn:hover { color: var(--text-primary); background: rgba(31,26,22,.05); }
html[data-theme="obsidian"] .iconbtn:hover { background: rgba(246,240,226,.06); }
.iconbtn:active { transform: scale(.9); }

.iconbtn svg { display: block; }

/* ─── 7 · CHIP ──────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  padding: .42rem .82rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--hairline);
  background: transparent;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-material),
    background-color var(--dur-fast) var(--ease-material),
    border-color var(--dur-fast) var(--ease-material);
}
.chip:hover { color: var(--text-primary); }
.chip.is-active {
  color: #241A0A;
  background: var(--gold-spec);
  background-size: 340% 100%;
  border-color: transparent;
  animation: gold-sweep 20s ease-in-out infinite;
}

/* ─── 8 · LAUNCH TRANSITION ─────────────────────────────────────────────── */

.launch {
  position: fixed;
  inset: 0;
  z-index: var(--z-launch);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background-color: var(--surface-bg);
  transition:
    opacity 260ms var(--ease-material),
    visibility 260ms var(--ease-material);
}
.launch.is-on {
  opacity: 1;
  visibility: visible;
}
.launch__fill {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 50% 40%,
      var(--accent-glow) 0%,
      transparent 70%);
  opacity: .8;
}
.launch__mark {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  animation: launch-rise 620ms var(--ease-architect) both;
}
.launch__mark img {
  width: 72px;
  height: 72px;
}
.launch__label {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-secondary);
  animation: launch-fade 720ms 180ms var(--ease-material) both;
}

@keyframes launch-rise {
  0%   { transform: scale(.72) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.04) translateY(0);  opacity: 1; }
  100% { transform: scale(1) translateY(0);     opacity: 1; }
}
@keyframes launch-fade {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── 9 · TOAST ─────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
  transform: translate(-50%, 12px);
  z-index: var(--z-toast);
  padding: .72rem 1.1rem;
  border-radius: var(--r-pill);
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-2);
  color: var(--text-primary);
  font-size: var(--t-small);
  letter-spacing: .005em;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 320ms var(--ease-material),
    transform 320ms var(--ease-architect);
  max-width: min(88vw, 420px);
  text-align: center;
}
.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast__key {
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: .6rem;
}

/* ─── 10 · REDUCED MOTION ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .appview,
  .overlay__panel,
  .overlay__scrim,
  .launch,
  .launch__mark,
  .launch__label {
    transition-duration: .001ms !important;
    animation: none !important;
  }
  .appview { transform: none; opacity: 0; }
  .appview.is-open { opacity: 1; }
  .overlay--full .overlay__panel,
  .overlay--panel .overlay__panel {
    transform: none;
  }
}