/* Pinch: shared styles for the deeper chapters. */

/* hero table: 4 columns by 3 rows at every width */
.ptable { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) {
  .ptable { gap: 6px; }
  .ptable .tile { padding: 7px 8px; border-radius: 11px; }
  .ptable .tile .sym { font-size: 24px; }
  .ptable .tile .nm { font-size: 11.5px; margin-top: 2px; }
  .ptable .tile .vb { display: none; }
}

/* structure elements: dashed inner border */
.tile.structure {
  outline: 1.5px dashed color-mix(in srgb, var(--on-el) 40%, transparent);
  outline-offset: -5px;
}

/* part dividers */
.part { padding: 88px 0 12px; max-width: 40em; scroll-margin-top: 56px; }
.part .eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.part-title {
  font-family: var(--f-display);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  font-weight: 700;
  margin: 8px 0 10px;
  font-variation-settings: "SOFT" 100;
}
.part-sub { font-size: clamp(17px, 2vw, 20px); line-height: 1.45; color: var(--ink-2); margin: 0; border-left: 3px solid var(--line-2); padding-left: 14px; }

/* shared element wheel (js/lib/wheel-draw.js) */
.wheel-shape.draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: wheel-draw .45s ease-out forwards; }
@keyframes wheel-draw { to { stroke-dashoffset: 0; } }
.wheel-node[role="button"] { cursor: pointer; }
.wheel-node[role="button"]:focus-visible circle { stroke: var(--ink); stroke-width: 3; }

/* palate: basic and advanced rounds */
.quiz-rounds { margin-bottom: 14px; }
.quiz-rounds .chip { background: transparent; color: var(--paper); border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); }
.quiz-rounds .chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* contents rail: grouped by part, each group folds, the whole rail folds */
.toc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.toc-fold {
  flex: none; width: 30px; height: 30px; margin: 2px -6px 0 0; padding: 0;
  display: grid; place-items: center; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer;
  transition: background .2s, color .2s, transform .25s;
}
.toc-fold:hover { color: var(--ink); background: var(--paper-2); }
.toc-fold svg { width: 16px; height: 16px; }
#toc-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-right: -10px; padding-right: 10px; gap: 10px; scrollbar-width: thin; }
.toc-group > ol { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.toc-group.closed > ol { display: none; }
.toc-gh {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 4px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 10.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  border-radius: 8px;
}
.toc-gh:hover { color: var(--ink); background: var(--paper-2); }
.toc-gh .pn {
  flex: none; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center;
  border: 1px solid var(--line-2); font-size: 10px; letter-spacing: 0;
}
.toc-group.current .toc-gh { color: var(--ink); }
.toc-group.current .toc-gh .pn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.toc-gh .pt { flex: 1; }
.toc-gh .chev { width: 12px; height: 12px; flex: none; transition: transform .2s; }
.toc-group.closed .toc-gh .chev { transform: rotate(-90deg); }
.toc-group > ol a { padding-left: 12px; font-size: 14px; }

/* the whole rail, folded */
@media (min-width: 1180px) {
  .toc { transition: width .25s ease, padding .25s ease; }
  .page { transition: padding-left .25s ease; }
  .rail-shut { --rail: 56px; }
  .rail-shut .toc { width: 56px; padding: 22px 10px; overflow: hidden; }
  .rail-shut .toc-top { flex-direction: column; align-items: center; }
  .rail-shut .toc-brand { font-size: 0; }
  .rail-shut .toc-brand span { font-size: 30px; }
  .rail-shut .toc-fold { margin: 6px 0 0; }
  .rail-shut .toc-fold svg { transform: rotate(180deg); }
  .rail-shut .toc-sub, .rail-shut .toc-foot, .rail-shut #toc-list { display: none; }
  .rail-shut .toc-progress { width: 3px; height: auto; flex: 1; margin: 18px auto 0; }
  .rail-shut .toc-progress i { width: 100% !important; height: var(--prog, 0%); }
}
@media (prefers-reduced-motion: reduce) { .toc, .page, .toc-fold, .toc-gh .chev { transition: none !important; } }

/* phone sheet: same groups */
.tocsheet #toc-sheet-list { display: block; }
.sheet-group + .sheet-group { margin-top: 14px; }
.sheet-gh { font: 600 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 2px 8px; }
.sheet-gh span { color: var(--ink); margin-right: 8px; }
.sheet-group ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tocsheet .sheet { max-height: calc(100dvh - 16px); overflow-y: auto; }