/* ==========================================================================
   guna.css — tri-guna bracket-depth + modality-band styling
   --------------------------------------------------------------------------
   Discovery Zone / Sankhya Calc feature.  Everything here is scoped under
   .discovery-zone so it can NEVER bleed into the existing site styles
   (assets/css/style.css).  The tri-guna colours are semantic (from
   G. Srinivasan's Secret of Sankhya deck) and are deliberately distinct from
   the INW brand palette.

     Compression / Thama   RED   #C0392B   coherent   (bracket depth 3)
     Rebounding  / Raja    GREEN #27AE60   resonant   (bracket depth 2)
     Expansion   / Sathwa  BLUE  #1565C0   expansive  (bracket depth 1)
   ========================================================================== */

.discovery-zone {
  --guna-coherent:  #C0392B; /* compression / thama  */
  --guna-resonant:  #27AE60; /* rebounding  / raja   */
  --guna-expansive: #1565C0; /* expansion   / sathwa */
  --guna-coherent-bg:  rgba(192, 57, 43, 0.06);
  --guna-resonant-bg:  rgba(39, 174, 96, 0.06);
  --guna-expansive-bg: rgba(21, 101, 192, 0.06);
}

/* --------------------------------------------------------------------------
   Tri-guna bracket-depth annotations on rendered expressions.
   Scoped to .discovery-zone .katex-expr so only Discovery-Zone maths is
   affected and the rest of the site is untouched.
   -------------------------------------------------------------------------- */
.discovery-zone .katex-expr {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.55rem 0.75rem;
  margin: 0.35rem 0;
  border-radius: 8px;
  border-left: 4px solid transparent;
  background: #ffffff;
}

.discovery-zone .katex-expr.guna-coherent {
  border-left-color: var(--guna-coherent);
  background: var(--guna-coherent-bg);
}
.discovery-zone .katex-expr.guna-resonant {
  border-left-color: var(--guna-resonant);
  background: var(--guna-resonant-bg);
}
.discovery-zone .katex-expr.guna-expansive {
  border-left-color: var(--guna-expansive);
  background: var(--guna-expansive-bg);
}

/* Nested square brackets emitted by bracketWrap() are plain KaTeX \left[ … \right];
   tint them per depth via the surrounding guna class so the nesting reads at a
   glance without touching KaTeX internals elsewhere on the site. */
.discovery-zone .katex-expr.guna-coherent  .katex .mopen,
.discovery-zone .katex-expr.guna-coherent  .katex .mclose { color: var(--guna-coherent); }
.discovery-zone .katex-expr.guna-resonant  .katex .mopen,
.discovery-zone .katex-expr.guna-resonant  .katex .mclose { color: var(--guna-resonant); }
.discovery-zone .katex-expr.guna-expansive .katex .mopen,
.discovery-zone .katex-expr.guna-expansive .katex .mclose { color: var(--guna-expansive); }

/* --------------------------------------------------------------------------
   Modality band — full-width coloured strip above a derivation card.
   -------------------------------------------------------------------------- */
.discovery-zone .modality-band {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.4rem 0.75rem;
  border-radius: 8px 8px 0 0;
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: var(--modality-color, #444);
}
.discovery-zone .modality-band .modality-label { white-space: nowrap; }

.discovery-zone .modality-compression { background: var(--guna-coherent); }
.discovery-zone .modality-rebounding  { background: var(--guna-resonant); }
.discovery-zone .modality-expansion   { background: var(--guna-expansive); }

/* --------------------------------------------------------------------------
   Derivation card container.
   -------------------------------------------------------------------------- */
.discovery-zone .derivation-card {
  border: 1px solid #e2e6ea;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(11, 30, 51, 0.06);
  margin: 1.1rem 0;
  overflow: hidden;
}
/* When a modality band sits at the top, remove the card's own top rounding gap. */
.discovery-zone .derivation-card .modality-band + .derivation-head { padding-top: 0.75rem; }

.discovery-zone .derivation-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.75rem 1rem 0.25rem;
}
.discovery-zone .derivation-symbol { font-size: 1.15rem; }
.discovery-zone .derivation-title {
  font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ocean, #0D3B6E);
}
.discovery-zone .derivation-sub {
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  font-weight: 400;
  font-size: 0.85rem;
  color: #5a6b7b;
}

.discovery-zone .derivation-path { padding: 0.25rem 1rem; }
.discovery-zone .derivation-path-name {
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7a88;
  margin: 0.4rem 0 0.15rem;
}
.discovery-zone .derivation-desc {
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #33404c;
  margin: 0.15rem 0 0.5rem;
}
.discovery-zone .derivation-value { margin: 0.25rem 1rem; }
.discovery-zone .derivation-source {
  padding: 0.5rem 1rem 0.8rem;
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  font-size: 0.78rem;
  font-style: italic;
  color: #7a8896;
  border-top: 1px solid #eef1f4;
}

/* --------------------------------------------------------------------------
   Proton mass three-column form.
   -------------------------------------------------------------------------- */
.discovery-zone .proton-columns {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 1rem;
}
.discovery-zone .proton-col-label {
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a88;
  margin-bottom: 0.25rem;
  text-align: center;
}
.discovery-zone .proton-eq {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--guna-coherent);
  text-align: center;
}
@media (max-width: 720px) {
  .discovery-zone .proton-columns { grid-template-columns: 1fr; }
  .discovery-zone .proton-eq { transform: rotate(90deg); font-size: 1.1rem; }
}

/* --------------------------------------------------------------------------
   Guna legend — compact, collapsible key.
   -------------------------------------------------------------------------- */
.discovery-zone .guna-legend {
  font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
  font-size: 0.85rem;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 0.5rem 0.9rem;
  margin: 0.75rem 0;
}
.discovery-zone .guna-legend > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ocean, #0D3B6E);
  list-style: none;
}
.discovery-zone .guna-legend > summary::-webkit-details-marker { display: none; }
.discovery-zone .guna-legend > summary::before { content: "\25B8\00a0"; }
.discovery-zone .guna-legend[open] > summary::before { content: "\25BE\00a0"; }
.discovery-zone .guna-legend ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}
.discovery-zone .guna-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.discovery-zone .guna-legend .swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
}
.discovery-zone .guna-legend .swatch.coherent  { background: var(--guna-coherent); }
.discovery-zone .guna-legend .swatch.resonant  { background: var(--guna-resonant); }
.discovery-zone .guna-legend .swatch.expansive { background: var(--guna-expansive); }
.discovery-zone .guna-legend code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: #eef1f4;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
}



/* Constant-card Hybrid mode: two-row Symbolic + Numeric layout,
   mirroring the Sankhya calculator result panel. */
.discovery-zone .derivation-hybrid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.discovery-zone .derivation-hybrid-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.discovery-zone .derivation-hybrid-tag {
  font-family: var(--sans, sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest, #2D6A4F);
}



/* --------------------------------------------------------------------------
   Canonical guna form — [[[coherent]]] . [[resonant]] . [expansive] = value
   Rendered by SankhyaRenderer.renderGunaForm() inside a constant card.
   -------------------------------------------------------------------------- */
.discovery-zone .guna-form-wrap {
  margin-top: 0.85rem;
}
.discovery-zone .guna-form {
  border: 1px solid rgba(45, 106, 79, 0.22);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  background: rgba(45, 106, 79, 0.035);
}
.discovery-zone .guna-form-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest, #2D6A4F);
  margin-bottom: 0.5rem;
}
.discovery-zone .guna-form-sub {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: #6b6b6b;
}
.discovery-zone .guna-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 1.02rem;
}
.discovery-zone .guna-form-row .katex-expr {
  padding: 0.1rem 0.28rem;
  border-radius: 5px;
}
.discovery-zone .guna-form-row .katex-expr.guna-coherent,
.discovery-zone .guna-form-row .katex-expr.guna-resonant,
.discovery-zone .guna-form-row .katex-expr.guna-expansive {
  border-left: 3px solid;
}
.discovery-zone .guna-form-op {
  color: #8a8a8a;
  font-weight: 700;
}
.discovery-zone .guna-form-note {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #555;
}

/* --------------------------------------------------------------------------
   Tri-guna FIRST + composite-forms-by-source-document layout
   (renderDerivationCard: guna_form is rendered before the composite/compact
   equivalent forms; composite paths are grouped under their source document)
   -------------------------------------------------------------------------- */
.discovery-zone .derivation-guna-first {
  margin: 0.35rem 1rem 0.6rem;
}
.discovery-zone .derivation-guna-first .guna-form {
  border-color: rgba(45, 106, 79, 0.34);
  background: rgba(45, 106, 79, 0.05);
}
.discovery-zone .derivation-composite-label {
  margin: 0.85rem 1rem 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
}
.discovery-zone .derivation-source-group {
  margin: 0.35rem 0 0.15rem;
}
.discovery-zone .derivation-source-group-label {
  margin: 0.3rem 1rem 0.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #7a6a3a;
}
.discovery-zone .derivation-source-group-label::before {
  content: "\1F4C4\00A0"; /* page emoji + nbsp */
  font-style: normal;
}
/* deck-form-only guna form (printed bracket form does not reproduce value) */
.discovery-zone .guna-form-note-warn {
  color: #8a5b00;
  background: rgba(214, 158, 46, 0.10);
  border-left: 3px solid #D69E2E;
  padding: 0.4rem 0.6rem;
  border-radius: 5px;
}
.discovery-zone .guna-form-deck-val {
  color: #8a5b00;
  font-style: italic;
}