/* Dev Journey — shared tokens, header, footer and sync dialog (every page but the lab player).
   Look: "B1 terminal" — warm near-black, amber accent, teal for success, mono for UI details. */
:root {
  --ln-bg: #101114;
  --ln-tint: #0c0d10;
  --ln-panel: #15161a;
  --ln-term: #0a0b0d;
  --ln-line: #2a2c33;
  --ln-line-strong: #3a3d46;
  --ln-text: #e8e4da;
  --ln-strong: #f4f1ea;
  --ln-muted: #a9a59b;
  --ln-faint: #8a867c;
  --ln-accent: #f2b24a;
  --ln-accent-hover: #ffc56b;
  --ln-accent-ink: #101114;
  --ln-good: #8fd0c5;
  --ln-bad: #f2867a;
  --ln-flame: #f2b24a;
  --ln-radius: 6px;
  --ln-width: 77.5rem;
  --ln-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --ln-mono: "JetBrains Mono", "JetBrainsMono Nerd Font", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
html, body { background: var(--ln-bg); }
.ln-wrap { max-width: var(--ln-width); margin: 0 auto; padding: 0 1.5rem; }

/* header */
.ln-header { position: sticky; top: 0; z-index: 10; background: var(--ln-tint); border-bottom: 1px solid var(--ln-line); font-family: var(--ln-mono); font-size: 0.875rem; }
.ln-header-inner { display: flex; align-items: center; gap: 1.6rem; height: 56px; }
.ln-header .ln-logo { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--ln-text); text-decoration: none; }
.ln-logo-mark { background: var(--ln-accent); color: var(--ln-accent-ink); padding: 2px 7px; border-radius: 3px; font: 700 0.85rem/1.4 var(--ln-mono); }
.ln-nav { display: flex; gap: 1.4rem; }
.ln-header .ln-nav a { color: var(--ln-muted); text-decoration: none; }
.ln-header .ln-nav a:hover, .ln-header .ln-nav a.is-active { color: var(--ln-text); }
.ln-nav a.is-active { box-shadow: inset 0 -2px 0 var(--ln-accent); padding-bottom: 2px; }
.ln-header-spacer { flex: 1; }
.ln-header .ln-icon-btn { color: var(--ln-muted); display: grid; place-items: center; min-width: 32px; min-height: 32px; }
.ln-icon-btn:hover { color: var(--ln-text); }
.ln-flame { color: var(--ln-muted); white-space: nowrap; }
.ln-flame-n { color: var(--ln-accent); }
.ln-avatar {
  position: relative; display: inline-flex; align-items: center; text-decoration: none; border: 1px solid var(--ln-line-strong); background: transparent; color: var(--ln-text);
  border-radius: 4px; padding: 0.45rem 0.9rem; min-height: 36px; cursor: pointer; font: inherit;
}
.ln-avatar:hover { border-color: var(--ln-muted); }
.ln-avatar .sync-indicator { position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ln-tint); background: var(--ln-faint); font-size: 0; }
.ln-avatar .sync-indicator[data-state="synced"] { background: var(--ln-good); }
.ln-avatar .sync-indicator[data-state="error"] { background: var(--ln-bad); }
.ln-avatar .sync-indicator[data-state="pending"] { background: var(--ln-accent); }

.ln-footer { border-top: 1px solid var(--ln-line); padding: 1.6rem 0 2.4rem; font: 0.8rem/1.6 var(--ln-mono); color: var(--ln-faint); }
.ln-footer a { color: var(--ln-muted); }

/* sync dialog (built by sync.js) */
.modal-backdrop[hidden] { display: none; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, 0.6); }
.modal { width: min(26rem, 100%); background: var(--ln-panel); color: var(--ln-text); border: 1px solid var(--ln-line-strong); border-radius: 8px; padding: 1.4rem; font-family: var(--ln-font); }
.modal h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.modal-help { margin: 0 0 1rem; color: var(--ln-muted); font-size: 0.88rem; }
.modal-label { display: block; font: 600 0.78rem var(--ln-mono); margin-bottom: 0.3rem; color: var(--ln-muted); }
.modal-input { width: 100%; box-sizing: border-box; padding: 0.6rem 0.7rem; border: 1px solid var(--ln-line-strong); border-radius: 4px; background: var(--ln-term); color: var(--ln-text); font: 0.95rem var(--ln-mono); }
.modal-actions { display: flex; gap: 0.5rem; margin-top: 1.1rem; align-items: center; }
.modal-spacer { flex: 1; }
.modal-status { min-height: 1.3em; margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--ln-muted); }
.modal-status[data-state="synced"] { color: var(--ln-good); }
.modal-status[data-state="error"] { color: var(--ln-bad); }
.modal .btn { border: 1px solid var(--ln-line-strong); background: transparent; color: var(--ln-text); border-radius: 4px; padding: 0.5rem 0.95rem; font: inherit; font-size: 0.88rem; cursor: pointer; min-height: 36px; }
.modal .btn-primary { background: var(--ln-accent); border-color: var(--ln-accent); color: var(--ln-accent-ink); font-weight: 600; }
.modal .btn-danger { color: var(--ln-bad); }

/* shared bits: the ~/path title strip and the ASCII progress bar */
.ln-strip { display: flex; gap: 1rem; align-items: center; padding: 0.5rem 1rem; border-bottom: 1px solid var(--ln-line); font: 0.8rem var(--ln-mono); color: var(--ln-faint); }
.ln-strip > :last-child:not(:first-child) { margin-left: auto; }
.ln-ascii { font-family: var(--ln-mono); color: var(--ln-good); white-space: pre; letter-spacing: 0.02em; }

@media (max-width: 640px) {
  .ln-nav { display: none; }
  .ln-header-inner { gap: 1rem; }
}