/* =========================================================================
   GUIDE PAGE
   Components only guide_obsidian.html needs: the step sidebar, progress
   tracker, code panels and copy buttons. Everything else on that page comes
   from styles.css, and every value here is built from its tokens so the
   light and dark themes stay in sync.
   ========================================================================= */

/* Self-hosted JetBrains Mono: one variable file covering the 400-500 range. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root {
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Code panels stay dark in both themes: they read as terminal output, and
     the syntax colours below need a dark ground to hold their contrast. */
  --code-bg: rgba(4, 18, 10, 0.55);
  --code-border: rgba(255, 255, 255, 0.12);
  --code-text: #d7e6dc;
  --code-muted: #7f9a8b;

  /* Literal colours, not accents: they mirror the group colours the reader
     sets in Obsidian's graph view, so they must stay blue and green. */
  --node-article: #6cb6ff;
  --node-concept: #4ade80;
  --node-pdf: #f0c674;
}

html.light {
  --code-bg: rgba(8, 26, 17, 0.92);
  --code-border: rgba(255, 255, 255, 0.14);
}

/* --- Page hero lead ------------------------------------------------------- */
.page-lead {
  margin: 1.25rem 0 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.page-lead strong {
  color: var(--text-primary);
}

/* --- Two-column shell ----------------------------------------------------- */
.guide-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 5rem;
}

@media (min-width: 1024px) {
  .guide-layout {
    /* Sidebar narrow enough that the prompt panels keep a readable measure. */
    grid-template-columns: 17rem 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.guide-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* Grid items default to min-width:auto, which lets the wide code panels
     stretch the column instead of scrolling inside it. */
  min-width: 0;
}

/* --- Sidebar -------------------------------------------------------------- */
@media (min-width: 1024px) {
  .guide-aside {
    position: sticky;
    /* Clears the 5rem sticky header, plus breathing room. */
    top: 6.5rem;
  }
}

.guide-panel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
}

/* The sidebar is a reference panel, not a link card: no lift, no bloom. */
.guide-panel::after {
  content: none;
}

.panel-label {
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.guide-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.guide-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background-color 0.3s var(--ease-glass), color 0.3s var(--ease-glass),
    border-color 0.3s var(--ease-glass);
}

.guide-nav-link .icon {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .guide-nav-link:hover {
    background-color: var(--chip-bg);
    color: var(--text-primary);
  }
}

.guide-nav-link.is-current {
  background-color: var(--accent-soft);
  border-color: var(--accent-ring);
  color: var(--accent-strong);
  font-weight: 600;
}

.guide-nav-link.is-current .icon {
  color: var(--accent-strong);
}

/* --- Progress tracker ----------------------------------------------------- */
.progress-block {
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
}

.progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-head .panel-label {
  margin-bottom: 0;
}

.progress-percent {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.progress-track {
  margin: 0.85rem 0 1.1rem;
  height: 0.4rem;
  border-radius: 999px;
  background-color: var(--chip-bg);
  border: 1px solid var(--chip-border);
  overflow: hidden;
}

.progress-fill {
  width: 0;
  height: 100%;
  background: var(--accent-gradient);
  transition: width 0.4s var(--ease-glass);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.8rem;
}

.checklist label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.3s var(--ease-glass);
}

@media (hover: hover) and (pointer: fine) {
  .checklist label:hover {
    color: var(--text-primary);
  }
}

.checklist-item {
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent-strong);
}

/* --- Section shells ------------------------------------------------------- */
.guide-section {
  padding: 1.75rem;
  border-radius: 1.25rem;
}

/* Static content panels, so drop the card lift and hover bloom. */
.guide-section::after {
  content: none;
}

@media (min-width: 768px) {
  .guide-section {
    padding: 2rem;
  }
}

.guide-section > * + * {
  margin-top: 1.5rem;
}

.guide-section p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.guide-section p strong {
  color: var(--text-primary);
}

.step-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.step-number {
  display: flex;
  flex-shrink: 0;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 8px 20px -10px rgba(0, 103, 71, 0.9);
}

.step-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.section-note {
  font-size: 0.8rem !important;
  color: var(--text-muted) !important;
}

/* --- Customizer ----------------------------------------------------------- */
.customizer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .customizer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.customizer .section-note {
  margin-top: 0.35rem;
}

.customizer-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.customizer-field label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.customizer-field input {
  width: 9rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--chip-border);
  border-radius: 0.65rem;
  background-color: var(--chip-bg);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  transition: border-color 0.3s var(--ease-glass);
}

.customizer-field input:focus {
  outline: none;
  border-color: var(--accent);
}

/* --- Code panels ---------------------------------------------------------- */
.code-panel {
  border: 1px solid var(--code-border);
  border-radius: 0.85rem;
  background-color: var(--code-bg);
  overflow: hidden;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--code-border);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--code-muted);
}

.head-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--node-concept);
}

.head-label.is-warn {
  color: var(--node-pdf);
}

.code-body {
  display: block;
  padding: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--code-text);
  overflow-x: auto;
}

/* Prompts and file contents are authored as literal text in the markup. */
.code-body.is-prompt {
  white-space: pre-wrap;
  word-break: break-word;
}

.code-body.is-command {
  color: var(--node-concept);
}

.code-note {
  padding: 0.9rem;
}

.code-note p {
  margin: 0 0 0.75rem;
  font-size: 0.8rem !important;
  color: var(--code-muted) !important;
}

.code-note p strong {
  color: var(--code-text);
}

.inline-code-block {
  display: block;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--code-border);
  border-radius: 0.6rem;
  background-color: rgba(0, 0, 0, 0.25);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--node-article);
  overflow-x: auto;
}

/* Vault tree */
.tree-comment {
  color: var(--code-muted);
}

.tree-root {
  color: var(--node-article);
  font-weight: 700;
}

.tree-pdf {
  color: var(--node-pdf);
  font-weight: 600;
}

.tree-okf,
.tree-concept {
  color: var(--node-concept);
  font-weight: 600;
}

.tree-article {
  color: var(--node-article);
}

/* --- Prompt blocks -------------------------------------------------------- */
.prompt-block {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.prompt-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.prompt-label.is-alt {
  color: var(--text-secondary);
}

.prompt-label.is-muted {
  color: var(--text-muted);
}

/* --- Copy buttons --------------------------------------------------------- */
.copy-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.3s var(--ease-glass), background-color 0.3s var(--ease-glass),
    border-color 0.3s var(--ease-glass);
}

.copy-button.is-filled {
  padding: 0.3rem 0.65rem;
  border-color: var(--chip-border);
  background-color: var(--chip-bg);
  color: var(--text-secondary);
  text-transform: none;
}

.copy-button.is-bare {
  padding: 0.2rem;
  color: var(--code-muted);
}

@media (hover: hover) and (pointer: fine) {
  .copy-button:hover {
    color: var(--accent-strong);
  }

  .copy-button.is-filled:hover {
    border-color: var(--accent-ring);
    background-color: var(--accent-soft);
  }
}

.copy-button:active {
  transform: translateY(1px);
}

/* --- Graph group cards ---------------------------------------------------- */
.group-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .group-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.group-card {
  padding: 0.75rem;
  border: 1px solid var(--code-border);
  border-radius: 0.7rem;
  background-color: rgba(0, 0, 0, 0.2);
}

.group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--code-text);
}

.swatch {
  height: 0.7rem;
  width: 0.7rem;
  flex-shrink: 0;
  border-radius: 999px;
}

.swatch.is-blue {
  background-color: var(--node-article);
}

.swatch.is-green {
  background-color: var(--node-concept);
}

.group-query {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--code-border);
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.3);
}

.group-code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--code-text);
  overflow-x: auto;
}

/* --- Inset cards (tips, settings) ---------------------------------------- */
.inset-card {
  padding: 1.1rem;
  border: 1px solid var(--chip-border);
  border-radius: 0.85rem;
  background-color: var(--chip-bg);
}

/* Not flex: these headings can contain inline <code>, which a flex context
   would turn into its own item and break onto a line of its own. */
.inset-card h3 {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.inset-card h3 .icon {
  margin-right: 0.4rem;
  color: var(--text-muted);
}

.inset-card p {
  font-size: 0.8rem !important;
}

.inset-card ol {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.inset-card ol strong {
  color: var(--text-primary);
}

.emphasis {
  font-weight: 600;
  color: var(--accent-strong);
}

/* --- Inline code ---------------------------------------------------------- */
/* Scoped to unclassed <code> plus the explicit chip, so it can't reach the
   block-level .code-body panels. */
.guide-section code:not([class]),
.guide-section code.code-chip {
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--chip-border);
  border-radius: 0.4rem;
  background-color: var(--chip-bg);
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent-strong);
}

kbd {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--chip-border);
  border-radius: 0.35rem;
  background-color: var(--chip-bg);
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-primary);
}

/* --- Icons ---------------------------------------------------------------- */
/* Inline SVG sized like the text it sits in. */
.icon {
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.icon.accent {
  color: var(--accent-strong);
}

/* --- Toast ---------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--glass-shadow);
  opacity: 0;
  transform: translateY(1.5rem);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-glass), transform 0.3s var(--ease-glass);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity 0.3s var(--ease-glass);
    transform: none;
  }
}