/* ============================================================
   CLARION LABS — APP SHELL  (shell.css)
   Persistent frame: sidebar + topbar + content. Used by every
   screen. The big masthead is GONE — brand appears once, quietly.
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: var(--shell-w) 1fr;
  min-height: 100vh;
  background: var(--paper);
}

/* ---------- SIDEBAR ---------- */
.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--s6) var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
}
.side-brand { padding: var(--s2) var(--s4) var(--s6); }
.side-brand .nm { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.side-brand .tg { font-family: var(--ui); font-size: 9.5px; letter-spacing: 0.32em; text-transform: lowercase; color: var(--forest); margin-top: 3px; }

.nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px var(--s4); border-radius: var(--r);
  font-family: var(--ui); font-weight: 500; font-size: 15px; color: var(--ink-2);
  text-decoration: none; cursor: pointer; position: relative;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav-item svg { width: 19px; height: 19px; opacity: 0.85; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.is-active { background: var(--forest-wash); color: var(--forest-ink); font-weight: 600; }
.nav-item.is-active svg { opacity: 1; }

.nav-sep { height: 1px; background: var(--line); margin: var(--s4) var(--s4); border: none; }
.nav-group-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s2) var(--s4); cursor: pointer;
  font-family: var(--ui); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4);
}
.nav-group-label svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.nav-group.collapsed .nav-group-label svg { transform: rotate(-90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 2px; overflow: hidden; transition: max-height var(--t-slow) var(--ease), opacity var(--t) var(--ease); max-height: 500px; }
.nav-group.collapsed .nav-group-items { max-height: 0; opacity: 0; }
.nav-sub {
  display: block; padding: 9px var(--s4) 9px calc(var(--s4) + 30px);
  font-family: var(--ui); font-weight: 500; font-size: 14px; color: var(--ink-3);
  text-decoration: none; border-radius: var(--r); cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav-sub:hover { background: var(--surface-2); color: var(--ink); }
.nav-sub.is-active { color: var(--forest-ink); background: var(--forest-wash); font-weight: 600; }

/* ---------- MAIN ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s3);
  padding: var(--s4) var(--s8);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.top-link { font-family: var(--ui); font-weight: 500; font-size: 14px; color: var(--ink-3); text-decoration: none; cursor: pointer; transition: color var(--t) var(--ease); }
.top-link:hover { color: var(--ink); }
.member-badge {
  font-family: var(--ui); font-weight: 600; font-size: 13px; color: var(--forest-ink);
  white-space: nowrap;
  padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--forest); background: var(--forest-wash);
}
.topbar .icon-btn[aria-label="More"] { font-size: 18px; line-height: 0; }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  transition: all var(--t) var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-btn svg { width: 17px; height: 17px; }

.content { flex: 1; padding: var(--s8) var(--s8) var(--s10); max-width: var(--maxw); width: 100%; margin: 0 auto; }

/* ---------- floating actions ---------- */
.fab {
  position: fixed; right: var(--s7); bottom: var(--s7); z-index: 40;
  width: 56px; height: 56px; border-radius: var(--r-pill); border: none; cursor: pointer;
  background: linear-gradient(180deg, var(--forest-bright), var(--forest)); color: #fff;
  display: grid; place-items: center; box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}
.fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--e3); }
.fab svg { width: 24px; height: 24px; }
.help-fab {
  position: fixed; left: var(--s6); bottom: var(--s6); z-index: 40;
  width: 40px; height: 40px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-3);
  display: grid; place-items: center; box-shadow: var(--e1);
  transition: all var(--t) var(--ease);
}
.help-fab:hover { color: var(--ink); }

/* ---------- page entrance ----------
   NOTE: never gate whole-page visibility on an animation clock — if the
   engine doesn't tick (background tab, throttled load) the page blanks.
   Entrance is handled entirely by the hardened [data-reveal] system. */

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { justify-content: space-between; }
  .content { padding: var(--s6) var(--s5) var(--s10); }
}

/* page grid used by Home */
.page-head { margin-bottom: var(--s7); }
.page-head .greeting { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.02em; line-height: 1.02; }
.page-head .sub { font-family: var(--body); font-size: 17px; color: var(--ink-2); margin-top: 8px; }