/* ==========================================================================
   PANELS — the two side columns
   --------------------------------------------------------------------------
   Left  (Category): categories, their articles, and an information box that
                     describes whatever the pointer is on.
   Right (Outline):  the headings of the open article, and nothing else.

   Both panes are flat. The bevel belongs to the window around them; the only
   thing dividing the three columns is the rule the workspace grid shows
   through. Every edge here is axis-aligned, including the icons.

   CONTENTS
     01  shared shell and header
     02  left — category tree
     03  left — information box
     04  pixel icons
     05  right — article outline
   ========================================================================== */


/* ==========================================================================
   01  SHARED SHELL AND HEADER
   The header carries the pane's name and, at its right end, the control that
   expands or collapses every entry under it.
   ========================================================================== */

.panel, .outlinecol, .content {
  min-height: 0;
  overflow: hidden;
}
.panel, .outlinecol {
  background: var(--face-alt);
  display: flex;
  flex-direction: column;
}

.panel-h {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--f-panel);
  line-height: var(--f-panel);
  letter-spacing: 1.5px;
  color: var(--accent-ink);
  background: var(--accent-dk);
  padding: 7px 6px 6px 10px;
  border-bottom: 2px solid var(--ink);
}
.panel-h .sp { flex: 1; }

/* expand / collapse all — a pixel plus that loses its stem when open */
.foldall {
  flex: none;
  width: 15px; height: 15px;
  display: block;
  background: color-mix(in srgb, var(--accent-ink) 20%, transparent);
  border: 1px solid var(--accent-ink);
  cursor: pointer;
  position: relative;
}
.foldall:hover { background: var(--sel); }
.foldall::before,
.foldall::after {
  content: "";
  position: absolute;
  background: var(--accent-ink);
}
.foldall::before { left: 2px; top: 6px; width: 9px; height: 1px; }
.foldall::after  { left: 6px; top: 2px; width: 1px; height: 9px; }
.foldall:hover::before, .foldall:hover::after { background: var(--sel-ink); }

/* open: the vertical stroke goes, leaving a minus */
body:has(#cat-open:checked) .foldall[for="cat-open"]::after,
body:has(#ol-open:checked)  .foldall[for="ol-open"]::after { display: none; }


/* ==========================================================================
   02  LEFT — CATEGORY TREE
   Rows use the .btn-flat behaviour: flat until pointed at.
   ========================================================================== */

/* The tree grows to fill the pane and scrolls inside it. The pane itself
   still clips, so the CATEGORY header stays put while the list moves under
   it. Whether a bar appears is up to the content: with everything collapsed
   there are four rows and nothing scrolls at all. */
.tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 6px;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  font-size: var(--f-size);
}

.tree-cat { color: var(--ink); padding-left: 4px; }
.tree-art { color: var(--ink); padding-left: 8px; }

.tw { flex: none; color: var(--ink-dim); letter-spacing: -1px; }


/* collapsed: categories only */
body:not(:has(#cat-open:checked)) .tree-art { display: none; }


/* ==========================================================================
   03  LEFT — INFORMATION BOX
   Reports on whatever the pointer is over. Every describable control carries
   data-info="key"; the box holds one paragraph per key and the state machine
   in main.css shows the matching one. With nothing hovered it falls back to
   the default paragraph.
   ========================================================================== */

.infobox {
  margin-top: auto;
  padding: 14px 12px 16px;
  border-top: 1px solid var(--line);
  font-size: var(--f-sm);
  line-height: 16px;
  color: var(--ink-dim);
  min-height: 288px;
}
.infobox .tip { display: none; }
.infobox .tip-default { display: block; }
.infobox b { color: var(--ink); font-weight: 400; }
.infobox .tip-h {
  display: block;
  color: var(--ink);
  letter-spacing: 1px;
  margin-bottom: 6px;
}


/* ==========================================================================
   04  PIXEL ICONS
   clip-path on whole-pixel, axis-aligned coordinates.
   ========================================================================== */

.ico { flex: none; background: currentColor; }

.ico-cat {
  width: 14px; height: 11px;
  clip-path: polygon(0 0, 6px 0, 6px 2px, 14px 2px, 14px 11px, 0 11px);
}
.ico-art {
  width: 10px; height: 12px;
  clip-path: polygon(0 0, 7px 0, 7px 3px, 10px 3px, 10px 12px, 0 12px);
}


/* ==========================================================================
   05  RIGHT — ARTICLE OUTLINE
   --------------------------------------------------------------------------
   Chapter headings are links: each one lives on its own page of the article.
   The headings under a chapter share that chapter's page, so they lead
   nowhere the chapter above them does not already lead. They are listed as
   plain text — no button, no hover, no press — because presenting them as
   controls would promise a jump the site cannot make.

   Chapters only, by default. The control in the pane header shows the rest.
   ========================================================================== */

.outline {
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 10px 12px;
}

.ol-link {
  gap: 8px;
  padding: 4px 7px;
  line-height: 22px;
  font-size: var(--f-size);
  color: var(--link);
  overflow: hidden;
}
.ol-link .n { flex: none; color: var(--ink-dim); }
.ol-link .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* the headings inside a chapter: listed, never clickable */
.ol-sub {
  display: none;
  margin: 1px 0 6px 10px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
body:has(#ol-open:checked) .ol-sub { display: block; }

.ol-leaf {
  display: block;
  font-size: var(--f-sm);
  line-height: 18px;
  padding: 2px 6px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
.ol-leaf::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin: 0 6px 3px 0;
  background: var(--pop);
}