/* internal/server/static/prose.css
   Prose typography for rendered Markdown content documents. */

/* Color tokens kept in sync with the spec design system at
   docs/superpowers/spec-design-system.html and with chrome.css, so the iframe
   prose body and the surrounding chrome share the same warm off-white. */
:root {
  --wb-bg:        #fafaf9;
  --wb-surface:   #ffffff;
  --wb-text:      #1c1917;
  --wb-muted:     #78716c;
  --wb-rule:      #e7e5e4;
  --wb-hover:     rgba(28, 25, 23, 0.045);
  --wb-accent:    #b45309;
  --wb-accent-bg: #fef3c7;
  --wb-code-bg:   #292524;
  --wb-code-fg:   #e7e5e4;
  --wb-serif:     'Source Serif 4', Georgia, serif;
  --wb-sans:      'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --wb-mono:      'JetBrains Mono', Menlo, Consolas, monospace;
}

body.wb-prose {
  background: var(--wb-bg);
  color: var(--wb-text);
  font-family: var(--wb-sans);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  /* Left-aligned prose column. Fixed left gutter for breathing room from the
     chrome's sidebar; right padding keeps text off the iframe edge on narrow
     desktop viewports. The body fills the iframe horizontally so wide
     children (mermaid) can grow past the column rightward and the iframe
     scrolls naturally — no auto-margin centering trick needed. */
  padding: 48px 32px 96px 40px;
}

/* Constrain prose elements to the column width. Direct children only —
   nested elements size to their container naturally. */
.wb-prose > * {
  max-width: 800px;
}

/* Block rhythm — paragraph and list spacing copied from the spec design system
   so MD docs and authored spec docs read with the same vertical cadence. */
.wb-prose p { margin: 0 0 12px; }
.wb-prose ol, .wb-prose ul { margin: 0 0 12px; padding-left: 22px; }
.wb-prose li { margin-bottom: 2px; }
.wb-prose li::marker { color: var(--wb-muted); }

.wb-prose h1, .wb-prose h2, .wb-prose h3, .wb-prose h4 {
  font-family: var(--wb-serif);
  letter-spacing: -.01em;
  margin: 22px 0 8px;
}
.wb-prose h1 { font-size: 32px; line-height: 1.18; margin-top: 8px; }
.wb-prose h2 { font-size: 24px; line-height: 1.3; }
.wb-prose h3 { font-size: 19px; line-height: 1.35; }

.wb-prose a {
  color: var(--wb-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.wb-prose a:hover { text-decoration-thickness: 2px; }

.wb-prose code {
  font-family: var(--wb-mono);
  font-size: 0.86em;
  background: var(--wb-rule);
  padding: 1px 6px;
  border-radius: 3px;
}
.wb-prose pre {
  background: var(--wb-code-bg);
  color: var(--wb-code-fg);
  padding: 14px 18px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: var(--wb-mono);
  font-size: 14px;
  line-height: 1.55;
}
/* Code inside <pre> uses the pre's font-size, not the inline-code 0.86em
   relative size — otherwise code blocks render visibly smaller than intended. */
.wb-prose pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}
.wb-prose blockquote {
  border-left: 3px solid var(--wb-rule);
  padding: 0 12px;
  color: var(--wb-muted);
  margin: 12px 0;
}
/* Horizontal rule — left-align to the column. The user-agent default uses
   margin-inline: auto, which would center the hr inside .wb-prose > *'s
   max-width box. Explicit margin-inline: 0 keeps it flush left. */
.wb-prose hr {
  border: 0;
  border-top: 1px solid var(--wb-rule);
  height: 0;
  margin: 24px 0;
}
.wb-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.wb-prose th, .wb-prose td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--wb-rule);
  vertical-align: top;
}
.wb-prose th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wb-muted);
  border-bottom: 2px solid var(--wb-text);
}
.wb-prose img { max-width: 100%; height: auto; }

/* Mermaid: fit-to-column by default, click to expand to natural size.
   Default state inherits mermaid's own width="100%"; the diagram fits the
   prose column. Clicking adds .is-expanded which restores the SVG's
   natural pixel width — the iframe scrolls horizontally to reveal the rest.
   Click again to collapse. The post-process script in content_md.html sets
   the SVG width attribute on toggle, since CSS can't change attributes. */
.wb-prose > pre.mermaid {
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 16px 0;
  cursor: zoom-in;
}
.wb-prose > pre.mermaid.is-expanded {
  cursor: zoom-out;
  max-width: none;
  width: max-content;
}
.wb-prose > pre.mermaid.is-expanded svg {
  max-width: none !important;
  height: auto !important;
}

/* Mobile: tighten padding and shrink display heading so a phone reads naturally. */
@media (max-width: 640px) {
  body.wb-prose {
    font-size: 16px;       /* avoid iOS auto-zoom on form elements; matches comfortable mobile reading */
    padding: 24px 16px 64px;
    line-height: 1.6;
  }
  .wb-prose h1 { font-size: 26px; }
  .wb-prose h2 { font-size: 20px; }
  .wb-prose h3 { font-size: 17px; }
  .wb-prose pre {
    padding: 12px 14px;
    font-size: 12.5px;     /* code is a touch denser for narrow viewports */
  }
  /* Allow horizontal scroll on tables wider than the viewport. */
  .wb-prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Mobile: click-to-expand is disabled (the JS doesn't bind the handler).
     Reset the cursor and force fit-to-width even if .is-expanded somehow gets
     applied (e.g. resize from desktop after expanding). */
  .wb-prose > pre.mermaid,
  .wb-prose > pre.mermaid.is-expanded {
    cursor: default;
    width: 100%;
    max-width: 100%;
  }
  .wb-prose pre.mermaid svg {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ─── topic anchors & selection composer ──────────────────────────────── */

.wb-anchor {
  background: rgba(254, 243, 199, 0.4);
  color: inherit;
  border-bottom: 1px dashed var(--wb-accent);
  padding: 0 2px;
  cursor: pointer;
}

.wb-anchor--hover {
  background: rgba(254, 243, 199, 0.7);
}

.wb-anchor--selected {
  background: var(--wb-accent-bg);
  border-bottom-color: var(--wb-accent);
}

.wb-anchor-overlap {
  outline: 1px solid var(--wb-accent);
}

.wb-overlap-menu {
  position: fixed;
  z-index: 1100;
  min-width: 180px;
  background: var(--wb-surface);
  border: 1px solid var(--wb-rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(28, 25, 23, .16);
  padding: 4px;
  font: inherit;
  font-size: 12.5px;
}

.wb-overlap-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--wb-text);
  font: inherit;
  cursor: pointer;
}
.wb-overlap-menu__item:hover { background: var(--wb-hover); }

.wb-selection-trigger {
  position: fixed;
  z-index: 1000;
  height: 28px;
  padding: 0 10px;
  background: var(--wb-surface);
  color: var(--wb-text);
  border: 1px solid var(--wb-rule);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(28, 25, 23, .14);
  font: inherit;
  font-size: 12px;
  line-height: 26px;
  cursor: pointer;
}

.wb-selection-trigger:hover {
  background: var(--wb-accent-bg);
  border-color: var(--wb-accent);
}

.wb-selection-composer {
  position: fixed;
  z-index: 1000;
  width: min(280px, calc(100vw - 24px));
  background: var(--wb-surface);
  border: 1px solid var(--wb-rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(28, 25, 23, .16);
  padding: 8px;
}

.wb-selection-composer textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--wb-rule);
  border-radius: 4px;
  padding: 6px;
  font: inherit;
  resize: none;
  min-height: 60px;
  color: var(--wb-text);
}

.wb-selection-composer__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.wb-selection-composer button {
  border: 1px solid var(--wb-rule);
  border-radius: 4px;
  background: var(--wb-surface);
  color: var(--wb-text);
  padding: 4px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.wb-selection-composer button[type="submit"] {
  background: var(--wb-text);
  color: var(--wb-bg);
  border-color: var(--wb-text);
}

/* ─── margin glyphs ───────────────────────────────────────────────────── */

.wb-glyph-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 900;
}

.wb-glyph {
  position: absolute;
  right: 12px;
  width: 22px;
  height: 18px;
  border: 1px solid var(--wb-rule);
  background: var(--wb-surface);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wb-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
}
.wb-glyph:hover { background: var(--wb-accent-bg); }
.wb-glyph--selected {
  color: var(--wb-accent);
  border-color: var(--wb-accent);
  background: var(--wb-accent-bg);
}

/* Match the chrome's primary mobile breakpoint (chrome.css @768px), not the
   prose-typography 640px reflow above — the glyph gutter is a chrome concern. */
@media (max-width: 768px) {
  .wb-glyph-layer { display: none; }
}