/* =====================================================================
   Shared LiF components — header, navigation, actions, state panels.
   Reused by every later feature journey. Tokens only; no literals.
   ===================================================================== */

/* ---- Sidebar ---- */
.lif-sidebar {
  background: var(--lif-surface);
  border-right: 1px solid var(--lif-hairline);
  padding: var(--lif-space-5) var(--lif-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--lif-space-5);
}
.lif-app[data-sidebar="hidden"] .lif-sidebar { display: none; }

.lif-sidebar__mark {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-lg);
  letter-spacing: 0.01em;
  color: var(--lif-accent-deep);
}
.lif-sidebar__nav-title {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lif-ink-soft);
  margin-bottom: var(--lif-space-2);
}
.lif-nav__list { list-style: none; display: flex; flex-direction: column; gap: var(--lif-space-1); }
.lif-nav__link {
  display: block;
  padding: var(--lif-space-2) var(--lif-space-3);
  border-radius: var(--lif-radius-sm);
  border-left: 3px solid transparent;
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  color: var(--lif-ink);
  text-decoration: none;
  transition: background var(--lif-motion-quick) var(--lif-motion-ease);
}
.lif-nav__link:hover { background: var(--lif-accent-quiet); color: var(--lif-ink); }
/* A feature page and a page beneath it both mark the same area as the
   one the member is in. */
.lif-nav__link[aria-current] {
  background: var(--lif-accent-quiet);
  border-left-color: var(--lif-accent-strong);
  font-weight: 600;
}

/* On a narrow screen the menu is a drawer over the Playground, not a
   list the member must scroll past to be welcomed. */
@media (max-width: 60rem) {
  .lif-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(20rem, 86vw);
    z-index: 15;
    overflow-y: auto;
    box-shadow: var(--lif-shadow);
  }
}

/* ---- Header ---- */
.lif-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lif-space-4);
  justify-content: space-between;
}
.lif-header__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lif-space-3); }

.lif-button {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  padding: var(--lif-space-2) var(--lif-space-4);
  border-radius: var(--lif-radius-lg);
  border: 1px solid var(--lif-hairline);
  background: var(--lif-surface-raised);
  color: var(--lif-ink);
  cursor: pointer;
  transition: background var(--lif-motion-quick) var(--lif-motion-ease);
}
.lif-button:hover { background: var(--lif-accent-quiet); }

/* For Me / Whole Playground. Persistent and understandable, visually
   secondary to the member's purpose, and never styled as a lock or a
   privacy switch. */
.lif-scope { display: flex; align-items: center; gap: var(--lif-space-2); }
.lif-scope__legend {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-xs);
  color: var(--lif-ink-soft);
}
.lif-scope__options { display: flex; gap: var(--lif-space-1); background: var(--lif-surface); border-radius: var(--lif-radius-lg); padding: var(--lif-space-1); }
.lif-scope__option {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  padding: var(--lif-space-2) var(--lif-space-4);
  border: 1px solid transparent;
  border-radius: var(--lif-radius-lg);
  background: transparent;
  color: var(--lif-ink-soft);
  cursor: pointer;
}
.lif-scope__option[aria-pressed="true"] {
  background: var(--lif-surface-raised);
  border-color: var(--lif-accent);
  color: var(--lif-ink);
  font-weight: 600;
}

/* ---- Actions ---- */
.lif-action {
  display: inline-block;
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  padding: var(--lif-space-2) var(--lif-space-4);
  border-radius: var(--lif-radius-lg);
  /* The deepest tone in the palette is used so the label keeps at least
     4.5:1 against it in every LiF Aspect theme. Hover adds an underline
     rather than a lighter colour, so meaning never rests on colour. */
  background: var(--lif-accent-deep);
  color: var(--lif-accent-ink);
  text-decoration: none;
  transition: box-shadow var(--lif-motion-quick) var(--lif-motion-ease);
}
.lif-action:hover { background: var(--lif-accent-deep); color: var(--lif-accent-ink); text-decoration: underline; }
.lif-action--quiet {
  background: transparent;
  color: var(--lif-accent-deep);
  border: 1px solid var(--lif-hairline);
  text-decoration: underline;
}
.lif-action--quiet:hover { background: var(--lif-accent-quiet); color: var(--lif-accent-deep); }

/* ---- Shared state panels: loading, empty, quiet, restricted, error,
       offline, stale and not-yet-open. Each says what happened, whether
       the member's work is safe, and what can be done next. ---- */
.lif-state {
  border: 1px solid var(--lif-hairline);
  border-left: 4px solid var(--lif-status-quiet);
  border-radius: var(--lif-radius);
  background: var(--lif-surface);
  padding: var(--lif-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--lif-space-2);
  align-items: flex-start;
}
.lif-state__title { font-family: var(--lif-font-ui); font-weight: 600; }
.lif-state__body { color: var(--lif-ink-soft); max-width: var(--lif-measure); }
.lif-state--empty, .lif-state--quiet { border-left-color: var(--lif-status-restful); }
.lif-state--restricted { border-left-color: var(--lif-status-attention); }
.lif-state--error { border-left-color: var(--lif-status-problem); }
.lif-state--offline { border-left-color: var(--lif-status-attention); }

/* Loading keeps the page shape and never shows a misleading zero. */
.lif-loading { display: flex; flex-direction: column; gap: var(--lif-space-5); }
.lif-loading__block {
  border-radius: var(--lif-radius);
  background: var(--lif-surface);
  border: 1px solid var(--lif-hairline);
}
.lif-loading__block--welcome { height: 8rem; }
.lif-loading__block--cards { height: 18rem; }
.lif-loading__pulse { animation: lif-breathe 2.4s var(--lif-motion-ease) infinite; }
@keyframes lif-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }

/* A calm notice strip above content that is still usable but not fresh. */
.lif-notice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lif-space-3);
  align-items: center;
  padding: var(--lif-space-3) var(--lif-space-4);
  border: 1px solid var(--lif-hairline);
  border-radius: var(--lif-radius);
  background: var(--lif-surface);
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
}
.lif-notice[hidden] { display: none; }