/* छन्दः — the metre view.  Every class here is prefixed `chandas-`; the file
   defines nothing it does not own, and takes its colours and faces from the
   variables in styles.css. `.sk`, `.sechead` and the palette come from there.

   The page is a page: one measure, section heads set as an edition sets them,
   no boxes and no controls that look like controls. The one thing this view
   adds to the visual system is a column — an akṣara standing over the mark
   that measures it — and everything below exists to keep those two things in
   line with each other.

   Ink, deliberately:
     indigo    the weight marks and the metre's name — structure
     vermilion the gaṇa names and the pāda numbers — rubric
     gold-ink  the licence, the apparatus, the notes — annotation that is read
     gold      ornament only (2.9:1), so it carries the leaf and nothing else
     malachite a quarter that scans exactly
     crimson   a quarter that does not, which this corpus never shows */

.chandas-root{ margin:0 auto; }

/* ---------- the lesson: the metre, stated once for all hundred ---------- */
.chandas-lesson{ text-align:center; margin:6px 0 4px; }

.chandas-name{
  font-family:var(--f-sk); font-size:31px; line-height:1.5;
  color:var(--indigo); letter-spacing:.03em; margin-bottom:10px;
}

/* The लक्षण verses, set as verse: centred, generously leaded, no indent. */
.chandas-lakshana{
  font-family:var(--f-sk); font-size:18.5px; line-height:1.95;
  color:var(--ink); margin:0 auto; max-width:32em;
}
.chandas-guru{ margin-top:26px; }

/* Provenance, set as a colophon line under the verse it belongs to. */
.chandas-cite{
  font-size:12.5px; color:var(--gold-ink); letter-spacing:.06em; margin-top:3px;
}

.chandas-gloss{
  font-size:14.5px; line-height:1.85; color:var(--faint);
  margin:14px auto 0; max-width:30em;
}

/* ---------- the gaṇas, and the pattern they spell ---------- */
.chandas-ganarow,
.chandas-patternrow{
  display:flex; justify-content:center; align-items:flex-end;
  flex-wrap:wrap; row-gap:14px;
}
.chandas-ganarow{ margin:22px 0 4px; gap:16px; }
.chandas-patternrow{ margin:10px 0 2px; }

.chandas-gana{ display:flex; flex-direction:column; align-items:center; }
/* The gaṇa name is rubric: it names a part of the structure, as a marginal
   letter names a section. */
.chandas-gananame{
  font-family:var(--f-sk); font-size:19px; line-height:1.5;
  color:var(--lac); margin-top:2px;
}

.chandas-markrow{ display:flex; align-items:flex-end; gap:2px; }
.chandas-ganamarks{ padding-bottom:2px; }
.chandas-mark{
  font-family:var(--f-sk); font-size:19px; line-height:1.35;
  color:var(--indigo); min-width:.66em; text-align:center;
}

/* यतिः — the caesura, drawn as the hairline it is in a printed text, not as a
   gap the reader has to infer. */
.chandas-yati{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  margin:0 13px; align-self:stretch;
}
.chandas-yatirule{ display:block; width:1px; flex:1; min-height:2.1em; background:var(--rule); }
.chandas-yatilabel{
  font-family:var(--f-sk); font-size:11.5px; color:var(--gold-ink);
  letter-spacing:.05em; margin-top:3px; white-space:nowrap;
}

.chandas-legend{
  display:flex; justify-content:center; gap:2.2em; flex-wrap:wrap;
  font-family:var(--f-sk); font-size:14.5px; color:var(--faint); margin-top:12px;
}
.chandas-legenditem{ white-space:nowrap; }

/* The leaf between the lesson and the verse — the same ornament पाठः uses. */
.chandas-leaf{ text-align:center; color:var(--gold); font-size:15px; margin:30px 0 2px; }

/* ---------- कारणदर्शनम् — a choice set as text, never as a button ---------- */
.chandas-bar{ text-align:center; margin:6px 0 2px; }
.chandas-toggle{
  background:none; border:none; cursor:pointer; padding:2px 4px;
  font-family:var(--f-sk); font-size:13.5px; color:var(--faint);
  letter-spacing:.02em; border-bottom:1px dotted var(--rule);
}
.chandas-toggle:hover{ color:var(--ink); }
.chandas-toggle.on{ color:var(--lac); border-bottom:1px solid var(--lac); }
.chandas-toggle:focus-visible{ outline:2px solid var(--lac); outline-offset:2px; }

.chandas-causelegend{
  text-align:center; font-size:12.5px; color:var(--gold-ink);
  letter-spacing:.02em; margin:8px 0 0; line-height:1.8;
}

/* ---------- the four quarters ---------- */
.chandas-padas{ margin-top:14px; }

.chandas-pada{
  position:relative; padding:16px 0 14px 2.2rem;
  border-bottom:1px solid var(--line);
}
.chandas-pada:last-child{ border-bottom:none; }
/* The quarter's number in the margin, as a rubric number, exactly as an
   exercise entry carries one — but in Tiro, not in the display face.
   **Rozha One draws the Devanagari digits U+0966–096F as Latin-shaped
   figures**: it has the codepoints, so nothing falls back, and १ २ ३ ४ come
   out on screen as 1 2 3 4. Measured in headless Chrome, 2026-09-03. A
   Devanagari numeral in var(--f-display) is therefore roman script on the
   page, which this project does not allow anywhere user-facing. Every numeral
   in this view is set in var(--f-sk). See docs/CHANDAS.md. */
.chandas-padan{
  position:absolute; left:0; top:22px;
  font-family:var(--f-sk); font-size:16px; color:var(--lac); line-height:1;
}

/* Two halves and a caesura. The first half is right-aligned against a fixed
   share of the measure, so the यति of all four quarters falls on one vertical
   rule; the second runs on from it and the line ends ragged, as a line of
   verse does. Six gurus-and-a-laghu take about that share of the width — a
   first half that runs longer simply pushes its own rule out, which is the
   right failure. */
.chandas-row{
  display:flex; flex-wrap:nowrap; align-items:flex-start; row-gap:10px;
}
.chandas-half{
  display:flex; flex-wrap:wrap; align-items:flex-start; row-gap:10px; min-width:0;
}
.chandas-firsthalf{ flex:0 0 auto; min-width:38%; justify-content:flex-end; }

/* One akṣara, one column. The akṣara's box is a fixed height so that a
   stacked conjunct and a bare vowel put their marks on the same line; the
   glyph itself is free to overflow it. */
/* The word gap has to beat the column gap clearly, or the quarter stops
   reading as a line of Sanskrit and becomes seventeen loose syllables. */
.chandas-col{ display:flex; flex-direction:column; align-items:center; min-width:.85em; }
.chandas-wordstart{ margin-left:1em; }
.chandas-aks{
  font-family:var(--f-sk); font-size:22px; line-height:1.55; height:1.55em;
  color:var(--ink); white-space:nowrap; overflow:visible;
}
.chandas-cell{ font-size:18px; line-height:1.2; }

/* The pāda-final licence. Annotation ink, and a dotted rule under it: the
   mark is correct, and it is the *rule* under it that is being pointed at. */
.chandas-anceps{
  color:var(--gold-ink);
  border-bottom:1px dotted var(--gold-ink); padding-bottom:1px;
}
/* A real deviation. Deep crimson, so it can never be read as the vermilion
   rubric. Nothing in this corpus reaches it. */
.chandas-off{ color:var(--err); font-weight:700; }

/* Why the akṣara weighs what it weighs — off until asked for. */
.chandas-cause{
  font-size:11px; line-height:1.4; color:var(--faint); letter-spacing:.02em;
  height:0; overflow:hidden; opacity:0;
}
.chandas-showcause .chandas-cause{ height:auto; opacity:1; margin-top:1px; }

/* The daṇḍa, the printed verse number, the edition's hyphen: apparatus, set
   with the text but outside the count. */
.chandas-punct{
  font-family:var(--f-sk); font-size:19px; line-height:1.55; height:1.55em;
  color:var(--gold-ink); margin-left:.4em; white-space:nowrap;
}

.chandas-verdict{
  font-size:13px; letter-spacing:.02em; margin-top:9px; text-align:right;
}
.chandas-ok{ color:var(--ok); }
.chandas-lic{ color:var(--gold-ink); }
.chandas-bad{ color:var(--err); }

/* ---------- the notes ---------- */
.chandas-notes{
  margin-top:20px; padding-top:14px; border-top:1px dotted var(--rule);
  font-size:14.5px; line-height:1.9; color:var(--gold-ink);
  max-width:38em;
}
.chandas-notes p{ margin:0 0 4px; }
.chandas-notes p:last-child{ margin-bottom:0; color:var(--faint); }

/* ---------- narrow ----------
   Seventeen columns fit the measure comfortably; on a phone they wrap, which
   is the right failure — a printed line breaks, it does not scroll sideways.
   The word gaps and the caesura survive the break, so the wrapped line is
   still read as one quarter. */
@media (max-width:620px){
  .chandas-name{ font-size:27px; }
  .chandas-lakshana{ font-size:17px; }
  .chandas-aks{ font-size:19px; }
  .chandas-punct{ font-size:16px; }
  .chandas-mark{ font-size:17px; }
  .chandas-cell{ font-size:16px; }
  .chandas-pada{ padding-left:1.5rem; }
  .chandas-yati{ margin:0 7px; }
  /* Seventeen akṣaras will not sit on a phone's measure, so the quarter
     breaks — at the caesura, which is where a printed edition breaks a long
     metre too. The rule stays at the end of the first line, so the break is
     read as the यति and not as a defect of the screen. */
  .chandas-row{ flex-wrap:wrap; }
  .chandas-firsthalf{ flex:0 1 auto; min-width:0; justify-content:flex-start; }
  .chandas-row > .chandas-half + .chandas-yati + .chandas-half{ flex:1 1 100%; }
  .chandas-yati{ margin:0 0 0 7px; }
  .chandas-verdict{ text-align:left; }
}