/* /reading — the library as a filesystem.
   Chosen from two design rounds (docs/design-previews/reading-tree-options.html
   holds the runners-up): a tree with foldable field directories and a floating
   preview card beside the hovered book.

   Loaded only by reading/index.html, after the shared cv stylesheets; nothing
   here is reachable from index.html. No colour literals: every value reads the
   palette variables from base.css / theme.css, so this file never becomes a
   copy verify-design-tokens.py has to police.

   Field accents follow the blog's category colours where the fields overlap
   (security=red, psychology=pink, AI=mauve per blog/content/categories/) and
   claim unused accents for the fields the blog does not have. Peach sits
   beside red on purpose: social engineering is the human half of the security
   shelf next to it, and the two should read as neighbours rather than as
   unrelated fields.

   ELEVEN shelves, eleven accents, and the palette now holds exactly eleven.
   The count is not a coincidence and the next field will hit the same wall, so
   the cost is worth stating: a shelf's colour cannot be invented here. Adding
   a token to design/tokens.json makes it *missing* from every non-partial copy
   the validator checks, so the accent has to be declared in hub/css/style.css,
   blog/static/css/style.css, cv/css/base.css, cv/css/theme.css AND cv's inline
   critical CSS -- three surfaces changed to colour one shelf on a fourth.
   sky and maroon were added that way, deliberately, when 73 books stopped
   fitting nine fields; both are Catppuccin members the repo simply had not
   adopted. Three accents remain unclaimed upstream (sapphire, flamingo,
   rosewater), so a twelfth field is possible at the same cross-surface price.
   Merging two fields is always the cheaper answer. Hardcoding a hex here is
   not an option at all -- see the no-colour-literals rule above.

   Adding a field is three edits, not one: the class below, the shelf markup,
   and the fieldClasses array in reading.js -- that array is what clears the
   previous book's accent off the popover, so a field missing from it keeps
   whatever colour the last hovered shelf left behind. */

.rd .f-scifi   { --f: var(--lavender); }
.rd .f-sec     { --f: var(--red); }
.rd .f-soceng  { --f: var(--peach); }
.rd .f-psy     { --f: var(--pink); }
.rd .f-neuro   { --f: var(--blue); }
.rd .f-ai      { --f: var(--mauve); }
/* habits takes sky and fiction takes maroon, not the other way round: fiction
   sits directly above philosophy in column two, and sky against philosophy's
   teal measured dE 15 -- the closest adjacent pair on the page, and visibly so.
   Swapped, no two neighbouring shelves land under dE 25. Check this when
   adding a field; palette variety is not the same as legible separation. */
.rd .f-habits  { --f: var(--sky); }
.rd .f-power   { --f: var(--yellow); }
.rd .f-risk    { --f: var(--green); }
.rd .f-fiction { --f: var(--maroon); }
.rd .f-phi     { --f: var(--teal); }

/* ── Page framing ───────────────────────────────────────────────────── */

#reading { padding-top: 28px; }

.rd-epigraph {
  color: var(--subtext0);
  font-size: 0.88rem;
  margin: 10px 0 26px;
  max-width: 72ch;
}

.rd-epigraph .em { color: var(--mauve); }

/* ── The tree ───────────────────────────────────────────────────────── */

/* Two FIXED columns, deliberately not CSS multicol: multicol rebalances on
   every height change, so folding a directory on the left would make one
   migrate across from the right. Each .tree-col owns its categories for
   good; folding only ever collapses vertically inside its own column. */
.tree {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 56px;
  align-items: start;
  margin-top: 14px;
}

@media (min-width: 900px) {
  .tree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tree-col { min-width: 0; }

/* Each directory is a thought; the gap is what lets the eye land on the
   next one. */
.tree-dir {
  margin-bottom: 30px;
}

.tree-dir:last-child { margin-bottom: 0; }

.tree-row {
  display: flex;
  align-items: baseline;
  gap: 0 10px;
  padding: 1px 0;
  border-radius: 3px;
}

@media (hover: hover) {
  .tree-row:hover { background: color-mix(in srgb, var(--surface0) 45%, transparent); }
}

.tree-glyph {
  color: var(--surface2);
  white-space: pre;
  flex-shrink: 0;
  user-select: none;
}

.tree-dirname {
  color: var(--f);
  font-weight: 600;
}

.tree-dirname .icon { width: 14px; height: 14px; color: var(--f); vertical-align: -2px; }

.tree-count {
  color: var(--overlay0);
  font-size: 0.8rem;
}

.tree-file { color: var(--text); font-size: 0.9rem; }

.tree-author {
  color: var(--overlay1);
  font-size: 0.8rem;
}

.tree-author::before { content: '# '; color: var(--overlay0); }

.tree-summary {
  grid-column: 1 / -1;
  color: var(--overlay1);
  font-size: 0.85rem;
  margin-top: 26px;
}

@media (max-width: 480px) {
  .tree-file { font-size: 0.84rem; }
  .tree-author { display: none; }
  .tree-dir { margin-bottom: 22px; }
  /* At 1rem, "artificial-intelligence/" no longer fits beside the rail, the
     chevron and its count on a 390px screen, and a directory name that
     hyphenates mid-word reads as a defect. */
  .tree-dirname { font-size: 0.88rem; }
}

/* ── Folding directories ────────────────────────────────────────────── */

/* Directory rows are buttons; same reset as .project-group-header. */
.tree-dir-toggle {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0 10px;
  padding: 1px 0;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

@media (hover: hover) {
  .tree-dir-toggle:hover { background: color-mix(in srgb, var(--surface0) 45%, transparent); }
}

.tree-dir-toggle .chevron {
  width: 13px;
  height: 13px;
  color: var(--overlay1);
  align-self: center;
  transition: transform 0.3s ease;
}

.tree-dir-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }

/* Same grid-rows collapse the project groups use: height animates without
   animating height. */
.tree-files {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.tree-files.open { grid-template-rows: 1fr; }

.tree-files-inner { overflow: hidden; }

/* A folded shelf's rows must leave the tab order too, or the keyboard lands
   the preview on books that are not visible. visibility (not display) so the
   grid-rows collapse still animates. */
.tree-files:not(.open) .tree-files-inner { visibility: hidden; }

/* ── Floating preview ───────────────────────────────────────────────── */

.explore-wrap {
  position: relative;
}

.tree-row[tabindex] { cursor: default; }

.tree-row.previewing {
  background: color-mix(in srgb, var(--surface0) 60%, transparent);
}

.tree-row.previewing .tree-file { color: var(--f); }

/* A popover beside the book under the cursor. It is allowed to cover
   neighbouring rows — the reader summoned it by pointing, and it vanishes
   the moment the pointer leaves the tree. pointer-events none so it can
   never steal the hover that keeps it alive. JS sets top/left; the flip to
   the row's left side near the frame edge is JS too. */
.tree-pop {
  position: absolute;
  top: 0;
  left: 0;
  width: min(300px, 86vw);
  padding: 12px 15px;
  border: 1px solid var(--surface1);
  border-left: 2px solid var(--f, var(--surface2));
  border-radius: 6px;
  background: var(--crust);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 5;
}

.tree-pop.show { opacity: 1; }

/* Touch screens have no hover: the popover never shows, the fold still
   works, and every row already carries its author inline. */
@media (hover: none) {
  .tree-pop { display: none; }
}

.tree-pop-title {
  color: var(--f, var(--text));
  font-weight: 600;
  margin-bottom: 1px;
}

.tree-pop-author {
  color: var(--overlay1);
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.tree-pop-why {
  color: var(--subtext0);
  font-size: 0.84rem;
  line-height: 1.65;
}

.tree-pop-field {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--f, var(--overlay0)) 10%, transparent);
  color: var(--f, var(--overlay1));
  border: 1px solid color-mix(in srgb, var(--f, var(--overlay0)) 20%, transparent);
}