@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   PRAVARINE_BASE — v4, ported near-verbatim from the user's
   verified standalone artifact "Pravarine BASE (standalone).html"
   (2026-07-29). That reference already solved the responsive-width
   problem correctly (clamp()-bounded side columns + a true
   minmax(0,1fr) centre column) — this snippet deliberately does NOT
   reinvent that math. Almost every visual rule lives as an inline
   style on the element itself, copied straight from the reference,
   so this file only needs to hold what inline styles can't do:
   Obsidian-pane integration, animations, and :hover states.
   ============================================================ */

/* ------------------------------------------------------------------
   REAL root cause, found 2026-07-29 by opening Obsidian's own DevTools
   (Ctrl+Shift+I) and walking the live DOM with getComputedStyle() —
   not guessed, not theorized, actually inspected:

   `cssclasses: [cyb-page]` from frontmatter lands DIRECTLY on the view
   root element itself — `.markdown-source-view.mod-cm6` in Live Preview,
   `.markdown-preview-view` in Reading View. It is NOT a wrapping
   ancestor around those elements. Every rule below that was written as
   `.cyb-page .markdown-source-view.mod-cm6 X` (a 3-part descendant
   chain) could therefore never match — CSS can't treat an element as
   its own ancestor. Confirmed live: `.cm-sizer` and `.cm-content` were
   still sitting at Obsidian's native `max-width: 700px` (the
   "readable line length" cap, `is-readable-line-width` class was
   present) with auto margins — a fixed 700px column centered in a much
   wider pane. That's the actual, measured cause of the dead space on
   both sides, in Live Preview mode specifically (the mode the note is
   normally viewed/edited in). The 2-part rules (e.g.
   `.cyb-page .markdown-preview-sizer`) worked fine all along, since
   cyb-page's real ancestor (markdown-preview-view) genuinely IS a
   distinct ancestor of markdown-preview-sizer — only the 3-part,
   self-referencing ones were silently dead. Fix: compound `.cyb-page`
   directly onto the view-root class (no space) so the selector matches
   the actual DOM instead of an assumed one. */
.markdown-source-view.mod-cm6.cyb-page,
.markdown-preview-view.cyb-page,
.markdown-source-view.mod-cm6.cyb-page .cm-content,
.markdown-source-view.mod-cm6.cyb-page .cm-sizer,
.markdown-source-view.mod-cm6.cyb-page .cm-scroller,
.markdown-preview-view.cyb-page .markdown-preview-sizer {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.markdown-source-view.mod-cm6.cyb-page .inline-title,
.markdown-preview-view.cyb-page .inline-title,
.markdown-preview-view.cyb-page .markdown-preview-sizer > .mod-header { display: none; }

/* Per-code-block wrapper override (still needed on top of the above —
   this is a second, independent width cap Obsidian applies to the
   auto-generated wrapper around each rendered code block). Selector
   fixed the same way: cyb-page compounded onto the real view-root
   class instead of assumed as a separate ancestor. */
.markdown-preview-view.cyb-page div:has(> .block-language-dataviewjs) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
.markdown-source-view.mod-cm6.cyb-page .cm-preview-code-block:has(> .block-language-dataviewjs) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
}

.cyb, .cyb * { box-sizing: border-box; }
.cyb {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #f3f6f4;
  -webkit-font-smoothing: antialiased;
  /* The reference's clamp()s use vw, which measures the whole Obsidian
     window (sidebar included) — not this pane. On a narrow pane that
     makes both side columns hit their clamp() ceiling and starves the
     centre column. container-type turns this element into the query
     context so the note's own dataviewjs block can use cqw instead,
     measuring against the pane itself. */
  container-type: inline-size;
}
.cyb input { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.cyb input::placeholder { color: rgba(255,255,255,.42); }
.cyb a { color: #4ee7aa; text-decoration: none; }
.cyb a:hover { color: #9fe0c6; }

@keyframes pv-scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(700%); } }
@keyframes pv-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* the reference's 4 style-hover attributes, ported as real :hover rules
   (need !important since they're overriding the element's own inline style) */
.pv-add-btn:hover { background: rgba(255,255,255,.26) !important; }
.pv-done-btn:hover { box-shadow: 0 0 12px rgba(243,246,244,.65) !important; opacity: 1 !important; }
.pv-capture-btn:hover { background: rgba(41,199,136,.34) !important; color: #f3f6f4 !important; }
.pv-resume.active:hover {
  border: 1px solid rgba(62,232,159,.6) !important;
  background: linear-gradient(90deg,rgba(41,199,136,.26),rgba(41,199,136,.06)) !important;
}
.pv-resume.neutral:hover {
  border: 1px solid rgba(62,232,159,.45) !important;
  background: linear-gradient(90deg,rgba(41,199,136,.16),rgba(41,199,136,.03)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cyb * { animation: none !important; transition: none !important; }
}

/* ---------- FULLSCREEN FILL (2026-10-23) ----------
   Zen only (`body.galvania-zen`, set by engine/Zen.js). Out of zen nothing
   here applies. In zen the deck stopped at its content height and left a
   band of Obsidian background under it. The chain is fixed by the note's
   own script: .cyb-page > outer (padding) > deck > grid, with the grid's
   rows `auto minmax(0,1fr) auto`. So the outer takes the viewport, the
   deck stretches to it as a flex column, and the grid's middle row
   absorbs the extra height. */
body.galvania-zen .cyb-page > div { min-height: 100vh; }
body.galvania-zen .cyb-page > div > div { display: flex; flex-direction: column; }
body.galvania-zen .cyb-page > div > div > div { flex: 1 1 auto; }

/* ---------- HEADROOM (2026-10-27, per Pranesh) ----------
   The dataviewjs block's own wrapper margins added space above the deck.
   Zeroed on this note only, so the deck starts right under the header. */
.markdown-preview-view.cyb-page .markdown-preview-sizer > div:has(> .block-language-dataviewjs),
.markdown-preview-view.cyb-page .block-language-dataviewjs,
.markdown-preview-view.cyb-page .markdown-preview-pusher {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}