/*
 * CANONICAL: shared/css/sangeet-theme.css
 * Sync into each room (and hub) with: powershell -File shared/sync-to-rooms.ps1
 * Audio Engines Owner — one product look across Sangeet Yatra.
 *
 * Default = practice parchment (singing / madal / tabla / piano interiors).
 * Add class "theme-journey" on <html> or <body> for hub / room landing pages.
 */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
  /* Parchment */
  --bg: #fdf6e9;
  --panel: #fffaf0;
  --ink: #3d2b1f;
  --muted: #7a6a58;
  --terra: #b5451d;
  --terra-soft: #c8663a;
  --ochre: #d9a441;
  --green: #5c7a4a;
  --blue: #3a6ea5;
  --line: #e7d8bf;
  --shadow: 0 6px 24px rgba(90, 60, 30, 0.10);
  --radius: 14px;

  /* Aliases so older piano CSS (--accent / --warm) maps onto parchment */
  --accent: #b5451d;
  --accent-soft: #c8663a;
  --warm: #d9a441;

  /* Journey tokens (also available on parchment pages if needed) */
  --mist: #e8f0ec;
  --sand: #c4a574;
  --leaf: #2f6b5a;
  --leaf-deep: #1e463b;
  --glow: #f0d9a8;

  /* Occasional accents (piano quest CTA, etc.) */
  --sun: #f0b429;
  --sky: #3d8fd1;

  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}

a { color: var(--terra); }
a:hover { color: var(--terra-soft); }

h1, .brand-display {
  font-family: var(--font-display);
  font-weight: 600;
}

/* —— Journey / landing (hub + room homes) —— */
html.theme-journey,
html.theme-journey body,
body.theme-journey {
  --ink: #1a2e28;
  --mist: #e8f0ec;
  --sand: #c4a574;
  --leaf: #2f6b5a;
  --leaf-deep: #1e463b;
  --glow: #f0d9a8;
  --line: rgba(232, 240, 236, 0.12);
  color: var(--mist);
  background:
    radial-gradient(ellipse 90% 70% at 15% 12%, rgba(47, 107, 90, 0.45), transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 80%, rgba(196, 165, 116, 0.16), transparent 50%),
    linear-gradient(165deg, #0c1814 0%, #152820 42%, #0a1411 100%);
  min-height: 100vh;
  line-height: 1.55;
}

html.theme-journey a,
body.theme-journey a {
  color: var(--glow);
}
html.theme-journey a:hover,
body.theme-journey a:hover {
  color: var(--sand);
}

/* —— Page shell ——
   Sidebar, main column and footer: the frame every book page is drawn in. It was
   written out in all 26 places that style a page — eight rooms' shared.css plus
   the singing, theory and tools pages, which carry theirs inline — and had
   drifted into two dialects, one 200px wide and one 230–240px. That is the same
   navigation on every page, so it is declared here once.

   Descendants are written `:where(.wrap) > nav a`, which carries exactly the
   specificity the rooms' own `nav a` did — one class-free ancestor, two type
   selectors — while matching only the sidebar. The scoping matters in both
   directions. A bare `nav a` would reach the hub index and room landing pages,
   whose navs are page content with their own styling. A plain `.wrap > nav a`
   would outrank `.sy-home` and the book-index accordion below and capture their
   links. And putting the whole thing inside :where() drops it to a single type
   selector, which then loses to any later `a` or `h2` rule — the accordion's
   links turned terracotta and the sidebar's headings grew to content size. */
.wrap {
  display: flex;
  max-width: 1180px;
  margin: 0 auto;
}

/* No top padding: the pinned hub link below holds that space itself. A sticky
   child parks below its container's padding, so padding here would be a strip
   above the pinned link that scrolling links show through. */
.wrap > nav {
  align-self: flex-start;
  position: sticky;
  top: 0;
  width: 200px;
  min-width: 200px;
  height: 100vh;
  overflow-y: auto;
  padding: 0 12px 18px;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

:where(.wrap) > nav .brand {
  display: block;
  margin: 0 0 6px;
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--terra);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
}
:where(.wrap) > nav .brand small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
:where(.wrap) > nav .brand:hover { color: var(--terra-soft); }

:where(.wrap) > nav h2 {
  margin: 15px 0 4px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

:where(.wrap) > nav a {
  display: block;
  padding: 4px 8px;
  border-radius: 7px;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.3;
  text-decoration: none;
}
:where(.wrap) > nav a:hover { background: #f3e6cf; }
:where(.wrap) > nav a.sub {
  padding: 2px 8px 2px 18px;
  color: var(--muted);
  font-size: 0.78rem;
}
:where(.wrap) > nav a.sub:hover { color: var(--ink); }
:where(.wrap) > nav a.top { margin-top: 4px; font-weight: 600; }

main {
  flex: 1;
  min-width: 0;
  padding: 40px clamp(20px, 5vw, 56px);
}

footer {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}
.sy-rooms-foot { margin-top: 0.75rem; font-size: 0.88rem; }
.sy-rooms-foot a { color: var(--terra); text-decoration: none; }
.sy-rooms-foot a:hover { color: var(--terra-soft, var(--terra)); }
.sy-foot-label {
  font-weight: 800;
  color: var(--ink);
  margin-right: 0.35rem;
}
.sy-rooms-foot .sy-foot-label:not(:first-of-type) { margin-left: 0.9rem; }

/* Rooms and tools, parked at the bottom of the sidebar until opened.
   Closed, it stays in view under the pinned home link. Open, it scrolls
   with the book so the lists are not a second card on top of the page. */
.sy-site-switcher {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 18px 0 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.sy-site-switcher[open] { position: static; }
.sy-switcher-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}
.sy-switcher-summary::-webkit-details-marker { display: none; }
.sy-switcher-summary::before {
  content: "\25B8";
  width: 10px;
  font-size: 9px;
  color: var(--muted);
}
.sy-site-switcher[open] > .sy-switcher-summary::before { content: "\25BE"; }
.sy-switcher-summary:hover { color: var(--terra); }
.sy-switcher-body { padding: 0 0 8px; }
.sy-switcher-group { margin: 0; }
.sy-switcher-label {
  margin: 8px 0 2px;
  padding: 0 8px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
:where(.wrap) > nav .sy-switcher-group a {
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Below this the sidebar becomes the drawer sangeet-mobile-nav.js builds, which
   reveals it again with `display: block !important`. Scoped to the sidebar so the
   hub index and room landing pages keep their own navs. */
@media (max-width: 820px) {
  .wrap > nav { display: none; }
}

/* —— Pinned hub link (left nav) ——
   The sidebar is its own scroll container, so `top: 0` pins this to the sidebar
   rather than to the page: home stays in reach from the bottom of a long book
   index. */
.sy-home {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  margin: 0 0 10px;
  padding: 18px 0 7px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--terra);
  text-decoration: none;
}
.sy-home:hover { color: var(--terra-soft); }
.sy-home:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

/* —— Book-index accordion (left nav) —— */
#sy-book-index { margin-top: 2px; }
.sy-book-theory { margin: 0; }
.sy-book-sec { margin-top: 6px; }
/* A one-page chapter is the page itself, lined up with the section titles. */
#sy-book-index a.sy-book-solo {
  display: block;
  margin-top: 6px;
  padding: 4px 8px;
  border-left: 0;
  border-radius: 7px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
#sy-book-index a.sy-book-solo:hover { background: #f3e6cf; }
#sy-book-index a.sy-book-solo:focus-visible {
  outline: 2px solid var(--terra); outline-offset: 2px;
}
#sy-book-index a.sy-book-solo[aria-current="page"] {
  color: var(--terra);
  font-weight: 700;
  background: transparent;
  border-left-color: transparent;
}
.sy-book-toggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%; margin: 0; padding: 4px 8px;
  border: 0; background: transparent; border-radius: 7px;
  font: inherit; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; text-align: left;
}
.sy-book-toggle:hover { background: #f3e6cf; }
.sy-book-toggle:focus-visible {
  outline: 2px solid var(--terra); outline-offset: 2px;
}
.sy-book-toggle.is-here { color: var(--terra); font-weight: 700; }
.sy-book-chevron {
  display: inline-block; width: 10px; flex-shrink: 0;
  font-size: 9px; opacity: 0.7; line-height: 1;
}
.sy-book-chevron::before { content: "\25B8"; }
.sy-book-toggle[aria-expanded="true"] .sy-book-chevron::before { content: "\25BE"; }
.sy-book-pages { margin: 2px 0 0; }
#sy-book-index a {
  padding: 5px 8px 5px 22px;
  border-left: 3px solid transparent;
  border-radius: 6px;
}
.sy-book-theory a {
  padding: 4px 8px;
  border-left: none;
}
#sy-book-index a.sub { padding: 2px 8px 2px 28px; }
#sy-book-index .sy-book-group { margin: 6px 0 2px; }
#sy-book-index .sy-book-group-label {
  padding: 6px 8px 2px 22px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
#sy-book-index a[aria-current="page"] {
  font-weight: 400;
  color: var(--terra);
  background: transparent;
  border-left-color: var(--terra);
}
#sy-book-index a.sub[aria-current="page"] {
  font-size: 0.875rem;
}

/* Book pager — the previous and next chapter, built by sangeet-book-nav.js from
   the same index the sidebar draws. Prev sits left and next right even when only
   one of them exists, so the arrow a reader reaches for never moves. */
#sy-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 32px 0 8px;
}
#sy-pager a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}
#sy-pager a:hover { border-color: var(--terra); background: #fdf6e9; }
#sy-pager a span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #7a6a55);
}
#sy-pager a strong { font-size: 0.98rem; line-height: 1.3; }
/* The next link is the one being reached for, so it keeps the right-hand column
   and its own emphasis whether or not a previous link exists beside it. */
.sy-pager-prev span::before { content: "\2190\00a0"; }
.sy-pager-next {
  grid-column: 2;
  text-align: right;
  border-color: var(--terra) !important;
}
.sy-pager-next span::after { content: "\00a0\2192"; }
@media (max-width: 640px) {
  #sy-pager { grid-template-columns: 1fr; }
  .sy-pager-next { grid-column: 1; }
}

/* “From theory” banner — a room page saying which shared theory chapter it applies.
   Rooms already used the class; the look lives here so every room reads the same. */
.from-theory {
  font-size: 0.85rem;
  color: var(--muted);
  border-left: 3px solid var(--ochre);
  padding: 6px 12px;
  margin: 0 0 14px;
}
.from-theory strong { color: var(--ink); }

/* Compact data tables — size to content, don’t stretch full main width */
table {
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
th, td {
  padding: 0.4em 0.7em;
  vertical-align: top;
}
th {
  white-space: nowrap;
}

.from-theory a {
  color: var(--ink);
  font-weight: 700;
}

h1 .np {
  color: var(--terra);
}

.lead {
  font-size: 1.12rem;
  color: #4a3728;
  line-height: 1.6;
}

.note {
  background: #fbf1da;
  border-left: 5px solid var(--ochre);
  border-radius: 8px;
  color: #5a4a34;
  margin: 18px 0;
  padding: 12px 18px;
}

.tip {
  background: #eef3e7;
  border-left-color: var(--green);
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 18px 0;
  padding: 20px 22px;
}

/* Canonical buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--terra);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
}
.btn:hover {
  background: var(--terra-soft);
  color: #fff;
}
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn.ghost:hover {
  border-color: var(--terra);
  color: var(--terra);
}