/* ═══════════════════════════════════════════════════════════════════════
   chautari — the house viewers

   The chrome shared by every page that carries a parametric model beside a
   ledger: /brahmasthan, /brahmasthan/v4 and /tiny-house. It borrows the grid,
   the frame and the slider from model.css rather than restating them — the
   houses are looked at through one instrument — and adds only what those
   pages need and /body-house/model does not: the switches, the ledger of
   levels, and the row of stations under the frame.

   Was assets/brahmasthan.css until a second house started using it. A
   stylesheet named after one project and linked by three is exactly the kind
   of leftover this site's own principle 5 forbids in a building.
   ═══════════════════════════════════════════════════════════════════════ */

/* The row of stations sits under the frame, not beside it: ten of them will
   not fit in a 20rem column at a size a thumb can hit. On a wide screen the
   panel runs the full height of both, so every placement is stated — leaving
   any of the three to auto-flow puts the panel in the frame's column.        */
.rig-views{
  padding:clamp(.7rem,1.2vw,1rem) clamp(.9rem,1.4vw,1.2rem);
}
@media (min-width:1000px){
  .rig{grid-template-rows:1fr auto}
  .rig-stage{grid-column:1;grid-row:1}
  .rig-views{grid-column:1;grid-row:2}
  .rig-read{grid-column:2;grid-row:1 / span 2;overflow:auto;min-height:0}
}
.rig-views .tabs{gap:.3rem}
.rig-views .tabs button{padding:.46rem .8rem}
.rig-views .stage-note{padding-left:0;margin-top:.7rem;display:block;line-height:1.6}

/* two links on one closing rail — the row component is the hero's, and the
   only thing it does not do there is centre itself, because there it is
   ranged left under a hero. Here it sits in a centred .head. */
.head .hero-links{justify-content:center;margin-top:0}

/* ── the controls ──────────────────────────────────────────────────────  */
.ctrl{margin-top:1.1rem}
.ctrl:first-of-type{margin-top:1.3rem}
.ctrl > label{
  display:block;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.45rem;
}
.ctrl.is-off > label{opacity:.45}
.ctrl.is-off input[type="range"]{pointer-events:none;opacity:.45}

/* a switch, drawn as a rule that fills rather than as a box that ticks —
   the same gold as everything else that reports a state on this site */
.sw{
  display:flex;align-items:center;gap:.7rem;cursor:pointer;
  padding:.62rem 0;border-top:1px solid var(--line);
}
.sw:last-of-type{border-bottom:1px solid var(--line)}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{
  flex:0 0 auto;position:relative;display:block;
  width:1.8rem;height:.55rem;border-radius:999px;
  background:rgba(157,106,18,.16);
  box-shadow:inset 0 0 0 1px rgba(157,106,18,.2);
  transition:background .4s ease;
}
.sw i::after{
  content:"";position:absolute;top:50%;left:0;
  width:.8rem;height:.8rem;border-radius:50%;
  transform:translate(0,-50%);
  background:radial-gradient(circle at 34% 30%,#fbf3e2,#d9c9a6);
  box-shadow:0 0 0 1px rgba(157,106,18,.28);
  transition:transform .4s ease,background .4s ease,box-shadow .4s ease;
}
.sw span{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);transition:color .4s ease;
}
.sw:hover span{color:var(--gold)}
.sw input:checked + i{background:rgba(157,106,18,.34)}
.sw input:checked + i::after{
  transform:translate(1rem,-50%);
  background:radial-gradient(circle at 34% 30%,#f6cb7a,#a8701a);
  box-shadow:0 0 0 1px rgba(36,26,12,.35),0 0 12px -2px #f6cb7a;
}
.sw input:checked ~ span{color:rgba(36,29,21,.78)}
.sw input:focus-visible + i{box-shadow:0 0 0 2px var(--gold)}

.ctrl-set{margin-top:1.2rem}

/* ── the ledger of levels ──────────────────────────────────────────────  */
.lvl{
  width:100%;border-collapse:collapse;margin-top:1.3rem;
  padding-top:1rem;border-top:1px solid var(--line);
}
.lvl caption{
  caption-side:top;text-align:left;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);padding:1rem 0 .5rem;border-top:1px solid var(--line);
}
.lvl th,.lvl td{padding:.42rem 0;text-align:left;vertical-align:baseline;font-size:.74rem;line-height:1.5}
.lvl th{
  font-weight:300;color:#1e1810;white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-right:.8rem;width:1%;
}
.lvl td{color:var(--ink-faint)}
.lvl tr.is-on th{color:var(--gold)}
.lvl tr.is-on td{color:var(--ink-soft)}
.lvl .r{font-size:.62rem;letter-spacing:.1em;color:var(--ink-faint);display:block}

.rig-read .foot-note{
  margin-top:auto;padding-top:1.1rem;
  font-size:.68rem!important;line-height:1.6;color:var(--ink-faint);
}

@media (max-width:999px){
  .rig-views{grid-column:auto;grid-row:auto}
}