/* =========
   Layout vars
   ========= */
:root{
  --gap: 5px;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #0b1220;
  --muted: #656f7d;

  /* grid column widths controlled via JS when collapsing */
  --c1: 1fr;
  --c2: 1fr;
  --c3: 1fr;
  --collapsed-w: 56px; /* width of a minimized column */
}

/* =========
   Base
   ========= */
*{ box-sizing: border-box; }
html, body{ height:100%; margin:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

/* =========
   3-column grid
   ========= */
.columns{
  display: grid;
  grid-template-columns: var(--c1) var(--c2) var(--c3);
  gap: var(--gap);
  height: 100dvh;
  min-height: 100vh;
  padding: var(--gap);
}

/* each panel scrolls independently */
.panel{
  background: var(--panel);
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* hide scrollbars but keep scrollability */
  -ms-overflow-style: none;        /* IE/old Edge */
  scrollbar-width: none;           /* Firefox */
  scrollbar-gutter: stable both-edges; /* prevents layout shift on Windows */
}
.panel::-webkit-scrollbar{ width:0; height:0; } /* Chrome/Safari */

/* sticky, clickable header */
.panel__header{
  position: sticky;
  top: 0;
  background: linear-gradient(#fafbfc,#f7f8fa);
  padding: 12px 16px;
  z-index: 1;
  cursor: pointer;
  user-select: none;
}
.panel__title{
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* content area */
.panel__content{
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}

/* optional card blocks */
.card{ padding:12px; background:#f9fafb; }
.card__title{ margin:0 0 6px 0; font-size:0.98rem; font-weight:600; }
.card__text{ margin:0; color:var(--muted); }

/* media helpers */
.media{ margin:0; }
.media img{
  max-width:100%;
  height:auto;
  display:block;
}
.media__caption{
  font-size:.875rem;
  color:var(--muted);
  margin-top:6px;
}

/* typography helpers */
.subhead{ margin:.75rem 0 .25rem 0; font-size:0.98rem; font-weight:600; }
.list{ margin:.25rem 0 .75rem 1.2rem; color:var(--muted); }

/* =========
   Collapse state
   ========= */
.panel.is-collapsed{
  overflow: hidden; /* disable inner scrolling while collapsed */
}
.panel.is-collapsed .panel__content{
  display: none;
}
.panel.is-collapsed .panel__header{
  /* turn header into a full-height vertical label */
  position: static;         /* no sticky when collapsed */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 0;
  background: linear-gradient(#fafbfc,#f0f2f5);
}
/* if you later add a chevron via ::after, hide or rotate it when collapsed */
.panel.is-collapsed .panel__header::after{ content:""; }

/* =========
   Responsive
   ========= */
@media (min-width:901px){
  body{ overflow: hidden; } /* avoid double scrollbars on desktop */
}
@media (max-width:900px){
  .columns{
    grid-template-columns: 1fr;
    height: auto;
  }
  body{ overflow: auto; }
  .panel{ height: 85dvh; } /* keep each stacked panel usable */
}