main.rupa-main {
  display: grid;
  grid-template-columns: 1.4fr 280px 1fr;
  gap: 1rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  align-items: start;
}
/* Explicit column AND row placement, since which panel is "left" vs "right"
   changes per mode (summary: รูป only; samutthana: รูป left / causes right;
   cittaja: activities left / จิต right) -- DOM order alone can't express
   that, unlike index.html where content never swaps sides (see CONTEXT.md).
   grid-row is pinned too, not just grid-column: auto-placement's row cursor
   isn't guaranteed to land info-panel in row 1 alongside a definite-column
   item that comes after it in DOM order (samutthana-panel) but before it
   (cittaja-citta-panel, even display:none) -- observed landing info-panel
   in row 2 without this. */
#rupa-panel, #cittaja-activity-panel { grid-column: 1; grid-row: 1; }
#info-panel { grid-column: 2; grid-row: 1; }
#samutthana-panel, #cittaja-citta-panel, #kalapa-panel, #bhumi-panel, #birth-context-panel { grid-column: 3; grid-row: 1; }

/* กำเนิด ๔ static reference block (รูปปวัตติกมนัย, กำเนิด sub-view) -- not a
   selector column like the other right-side panels, so it spans the full
   width below the two-panel row instead of joining column 3. */
#kamnoet-reference-panel { grid-column: 1 / -1; grid-row: 2; }

/* #kalapa-panel is reused as the LEFT panel of รูปปวัตติกมนัย's กำเนิด
   sub-view (filtered to the 9 กัมมชกลาป), unlike its own รูปกลาปนัย tab where
   it's the right panel -- override its column there, or it stacks on top of
   #birth-context-panel in the same column-3 cell. */
main.rupa-main.mode-rupapavatti #kalapa-panel { grid-column: 1; grid-row: 1; }

/* cittaja mode's right panel (121 จิต, rows up to 8-wide) needs more room
   than the default narrow 1fr track, but not the full remaining space --
   1.4fr there ate up all the leftover width as dead space past the widest
   row (~525px including padding). A fixed track sized to that content
   fits it without the leftover gap. */
main.rupa-main.mode-cittaja {
  grid-template-columns: 260px 280px 560px;
}

@media (max-width: 860px) {
  main.rupa-main { grid-template-columns: 1fr; }
  #rupa-panel, #cittaja-activity-panel, #info-panel, #samutthana-panel, #cittaja-citta-panel, #kalapa-panel,
  #bhumi-panel, #birth-context-panel, #kamnoet-reference-panel {
    grid-column: 1;
  }
  .info-panel { order: -1; position: static; }
}

/* Always-visible bounding box around the นิปผันน (18) / อนิปผันน (10) groups --
   pure nested containers, no overlay/toggle state (see CONTEXT.md). */
.rupa-bucket {
  border: 2px dashed var(--accent);
  border-radius: 12px;
  padding: 0.75rem 0.75rem 0.25rem;
  margin-bottom: 1rem;
}
.rupa-bucket:last-child { margin-bottom: 0; }
.bucket-label {
  margin: 0 0 0.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
}

.rupa-group { margin-bottom: 1rem; }
.rupa-group:last-child { margin-bottom: 0; }

.rupa-node {
  --node-color: var(--citta-color);
  --node-soft: var(--citta-soft);
  width: 4.4rem;
  height: 4.4rem;
  font-size: 0.72rem;
}

/* รูปสมุฏฐานนัย: always-on 3-way border coding (independent of click/highlight
   state) -- see #samutthana-legend markup in rupa.html. Just overrides the
   .node border color; no new CSS property needed. */
.rupa-node.samutthana-ekanta { border-color: var(--accent); }
.rupa-node.samutthana-anekanta { border-color: var(--cetasika-color); }
.rupa-node.samutthana-nakutoci { border-color: var(--text-muted); }

.legend-swatch { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-swatch::before {
  content: "";
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 3px solid;
}
.legend-swatch.samutthana-ekanta::before { border-color: var(--accent); }
.legend-swatch.samutthana-anekanta::before { border-color: var(--cetasika-color); }
.legend-swatch.samutthana-nakutoci::before { border-color: var(--text-muted); }

/* Cause nodes (สมุฏฐานนัย right panel), activity nodes (จิตตชรูปนัย left
   panel), and กลาป nodes (กลาปนัย right panel) share a third node color,
   distinct from รูป (purple) and เจตสิก (green). */
.cause-node, .activity-node, .kalapa-node {
  --node-color: var(--rupa-cause-color);
  --node-soft: var(--rupa-cause-soft);
  width: 4.4rem;
  height: 4.4rem;
  font-size: 0.72rem;
}

/* กลาป names run long (e.g. วจีวิญญัติสัททลหุตาทิเตรสกกลาป) -- a touch wider
   than the other cause/activity nodes so the text doesn't overflow badly. */
.kalapa-node {
  width: 5.2rem;
  height: 5.2rem;
  font-size: 0.66rem;
}

/* รูปกลาปนัย's กาย ๓ ส่วน region filter -- reuses .lens-overlay's layout/
   select/button base styling (see style.css), just needs its own active
   state since it's a group of plain buttons, not a <select>. */
.region-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* รูปปวัตติกมนัย's nested sub-tab bar (ภูมิ / กำเนิด) -- deliberately a
   distinct class from .mode-switch/.mode-btn (smaller, pill-shaped, using
   the --rupa-cause-* vars instead of --accent) so it reads as one level
   down from the top-level tab bar, not a clone of it. */
.subtab-switch[hidden] { display: none; }
.subtab-switch {
  display: flex;
  gap: 0.5rem;
  max-width: 1320px;
  margin: 0.5rem auto 1.5rem;
  padding: 0 1rem;
}
.subtab-btn {
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--rupa-cause-color);
  background: transparent;
  color: var(--rupa-cause-color);
  cursor: pointer;
}
.subtab-btn.active {
  background: var(--rupa-cause-soft);
  font-weight: 600;
}

/* รูปปวัตติกมนัย's ปฏิสนธิกาล-capability border coding (ภูมิ sub-view only)
   -- always-on, independent of click state, same pattern as
   .samutthana-ekanta/.samutthana-nakutoci above. Reuses those same 2 colors
   since the two border-coded tabs are never shown at once. */
.rupa-node.patisandhi-capable { border-color: var(--accent); }
.rupa-node.patisandhi-incapable { border-color: var(--text-muted); }

.legend-swatch.patisandhi-capable::before { border-color: var(--accent); }
.legend-swatch.patisandhi-incapable::before { border-color: var(--text-muted); }

/* กำเนิด ๔ static reference block -- a plain definitions list, not a
   clickable-node panel, so no .node-family styling needed. */
.reference-deflist dt { font-weight: 600; margin-top: 0.6rem; }
.reference-deflist dt:first-child { margin-top: 0; }
.reference-deflist dd { margin: 0.15rem 0 0 1rem; color: var(--text-muted); }
.reference-deflist .reference-note {
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 0.75rem;
  color: var(--text-muted);
}

.node.is-ineligible {
  opacity: var(--dim-opacity);
  cursor: default;
  pointer-events: none;
}

/* สมุฏฐานนัย's causes panel (5 items), จิตตชรูปนัย's activity panel (7
   items), and กลาปนัย's กลาป panel (23 items) are the "selector" side next
   to a long list (28 รูป / 121 จิต) -- without sticky they scroll out of
   view while the long list is still being scrolled, unlike #info-panel
   which already sticks. */
#samutthana-panel, #cittaja-activity-panel, #kalapa-panel, #bhumi-panel, #birth-context-panel {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

@media (max-width: 860px) {
  #samutthana-panel, #cittaja-activity-panel, #kalapa-panel, #bhumi-panel, #birth-context-panel {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}