/* Design A v4 — real branching tree, computed layout, pan+zoom.
   Cards = groups (real member topics stack as rows inside). A node that
   isn't a true member of any multi-topic group ("ungrouped", e.g.
   getcracked's "Miscellaneous") is its own standalone single-item card,
   exactly like the source site — never folded into its parent's row list. */
body{overflow:hidden}
main#tapp{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden}
.canvas-wrap{flex:1;min-width:0;position:relative;display:flex}
.tcanvas{flex:1;min-width:0;overflow:auto;position:relative;cursor:grab;background:
  radial-gradient(circle,var(--dot) 1px,transparent 1px) 0 0/22px 22px, var(--bg)}
.tcanvas.dragging{cursor:grabbing}
/* same hover-reveal thin scrollbar as .scroller/.qwrap/.railbody/.sb-body elsewhere on the site */
.tcanvas{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .3s ease}
.tcanvas:hover{scrollbar-color:var(--line-2) transparent}
.tcanvas::-webkit-scrollbar{width:12px;height:12px}
.tcanvas::-webkit-scrollbar-track{background:transparent}
.tcanvas::-webkit-scrollbar-thumb{background-color:transparent;border-radius:99px;border:3.5px solid transparent;
  background-clip:content-box;transition:background-color .3s ease}
.tcanvas:hover::-webkit-scrollbar-thumb{background-color:var(--line-2);background-clip:content-box}
.tcanvas::-webkit-scrollbar-corner{background:transparent}

#tree-scroll{position:relative}
#tree-inner{position:absolute;left:0;top:0;transform-origin:0 0}
#tree-inner.measuring{visibility:hidden}
#tree-svg{position:absolute;left:0;top:0;pointer-events:none;width:100%;height:100%}
#tree-svg path{fill:none;stroke-width:2;stroke:var(--line-2)}

.gcard{position:absolute;width:230px;background:var(--card);border:1.5px solid var(--line-2);
  border-radius:13px;box-shadow:var(--lift);overflow:hidden}
.gcard-head{position:relative;box-sizing:border-box;display:flex;align-items:flex-start;gap:8px;
  padding:9px 12px;border-top:3px solid var(--spine,var(--muted));font-size:11.5px;font-weight:700;
  letter-spacing:.02em;line-height:15px;color:var(--ink);border-bottom:1px solid var(--line)}
.gcard-head .gc-label{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard-head .gc-cnt{flex:none;font-size:10.5px;font-weight:700;color:var(--faint);margin-top:1px}
.gcard.single .gcard-head{border-bottom:none;cursor:pointer;transition:.12s}
.gcard.single .gcard-head:hover{background:var(--card-2)}
.gcard.single.sel .gcard-head{background:var(--card-2);box-shadow:inset 3px 0 0 var(--spine,var(--teal))}
.gcard.single.sel .gcard-head .gc-label{color:var(--ink);font-weight:700}

.grow{position:relative;height:30px;box-sizing:border-box;display:flex;align-items:center;gap:7px;padding:0 12px 0 14px;
  font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;transition:.12s;border-bottom:1px solid var(--line-2)}
.grow:last-child{border-bottom:none}
.grow:hover{background:var(--card-2);color:var(--ink)}
.grow.sel{background:var(--card-2);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--spine,var(--teal))}
.grow .gr-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow .gr-dots,.gr-dots{display:flex;gap:4px;flex:none}
.grow .gr-dots span,.gr-dots span{width:5px;height:5px;border-radius:50%}
.gr-dots .r{background:var(--blue)}.gr-dots .q{background:var(--teal)}.gr-dots .p{background:var(--clay)}
.grow.branch-source{position:relative}
.grow.branch-source::after{content:'';position:absolute;right:-1px;top:50%;width:6px;height:6px;
  border-radius:50%;background:var(--spine,var(--muted));transform:translate(50%,-50%)}

.tctrl{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:6px;z-index:5}
.tctrl button{background:var(--card);border:1.5px solid var(--line-2);border-radius:10px;
  width:34px;height:34px;font:inherit;font-size:16px;font-weight:700;color:var(--ink-2);
  box-shadow:var(--lift-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tctrl button:hover{border-color:var(--teal);color:var(--teal)}
.tctrl #recenter{width:auto;padding:0 14px;font-size:12.5px}
.tctrl #zoomlabel{width:44px;text-align:center;font-size:11.5px;font-weight:700;color:var(--faint)}

/* ================= self-tracked progress ================= */
/* thin overlay strip along the bottom edge of a topic row / standalone card /
   group header. Absolutely positioned so it adds no height — the build
   measures card heights, and row-anchored connectors depend on row height. */
.gr-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line);pointer-events:none}
.gr-bar>i{display:block;height:100%;width:0;background:var(--spine,var(--teal));transition:width .3s ease}
.gcard.single .gr-bar{border-radius:0 0 11px 11px}

/* overall progress — lives in the header, which the sidebar never covers */
.progress-pill{display:flex;align-items:center;gap:9px;padding:6px 13px;border-radius:999px;
  background:var(--card);border:1.5px solid var(--line-2);box-shadow:var(--lift);
  font-size:12px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pp-track{width:64px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.pp-fill{height:100%;width:0;border-radius:99px;background:var(--teal);transition:width .3s ease}
#progressPct{min-width:30px;text-align:right}

/* ================= sidebar content ================= */
.sb-progress{padding-bottom:2px}
.sb-progress-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.sb-progress-bar>i{display:block;height:100%;width:0;border-radius:99px;background:var(--teal);transition:width .3s ease}
.sb-progress-label{margin-top:7px;font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

.sb-desc{font-size:13.5px;line-height:1.72;color:var(--ink-2)}
.sb-desc p{margin:0 0 .85em}.sb-desc>p:last-child{margin-bottom:0}
.sb-desc code{font-family:var(--mono);font-size:.92em;background:var(--card-2);padding:.1em .35em;
  border-radius:5px;border:1px solid var(--line)}

.sb-sec-head{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:9px;
  border-bottom:1.5px solid var(--line-2);font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.sb-count{font-size:12px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}
.sb-subhead{margin:14px 0 2px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.sb-sec-head+.sb-table{margin-top:2px}

.sb-table{display:flex;flex-direction:column}
.sb-row{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--line)}
.sb-row:last-child{border-bottom:none}
/* resource rows: tag + section on the first line, the (often long) title
   given the full width beneath — a narrow panel can't fit a 4-column table
   on one line without truncating the one column that matters */
.sb-row.res{display:grid;grid-template-columns:18px auto 1fr;grid-template-areas:"chk tag meta" "chk name name";
  column-gap:11px;row-gap:6px;align-items:center}
.sb-row.res .sb-check{grid-area:chk;align-self:start;margin-top:1px}
.sb-row.res .sb-tag{grid-area:tag;justify-self:start}
.sb-row.res .sb-meta{grid-area:meta;justify-self:end;text-align:right}
.sb-row.res .sb-name{grid-area:name}

.sb-name{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
a.sb-name{text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1.5px;
  text-underline-offset:3px;transition:color .12s,text-decoration-color .12s}
a.sb-name:hover{color:var(--teal);text-decoration-color:var(--teal)}
.sb-name.plain{color:var(--ink-2)}
.sb-row:has(input:checked) .sb-name{color:var(--muted)}
.sb-meta{font-size:11.5px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.sb-row .lvl{flex:none;width:auto;text-align:right}

.sb-tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;
  border-radius:999px;color:var(--muted);background:var(--card-2);white-space:nowrap}
.sb-tag.tag-clay{color:var(--clay);background:color-mix(in srgb,var(--clay) 14%,transparent)}
.sb-tag.tag-teal{color:var(--teal);background:color-mix(in srgb,var(--teal) 14%,transparent)}
.sb-tag.tag-blue{color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent)}
.sb-tag.tag-violet{color:var(--violet);background:color-mix(in srgb,var(--violet) 14%,transparent)}

.sb-check{position:relative;flex:none;width:18px;height:18px;cursor:pointer}
.sb-check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sb-box{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;box-sizing:border-box;
  border:1.5px solid var(--line-2);background:var(--card-2);transition:background .12s,border-color .12s}
.sb-box svg{width:12px;height:12px;stroke:#fff;stroke-width:3;opacity:0;transition:opacity .12s}
.sb-check:hover .sb-box{border-color:var(--teal)}
.sb-check input:checked+.sb-box{background:var(--teal);border-color:var(--teal)}
.sb-check input:checked+.sb-box svg{opacity:1}
.sb-check input:focus-visible+.sb-box{outline:2px solid var(--teal);outline-offset:2px}

/* ================= not-yet-scraped questions/problems ================= */
/* named, not linked, not tickable, not counted — a dashed marker holds the
   checkbox's slot so titles stay aligned with the tickable rows above */
.sb-na{flex:none;width:18px;height:18px;display:grid;place-items:center}
.sb-na::before{content:"";width:8px;height:8px;border-radius:50%;box-sizing:border-box;border:1.5px dashed var(--faint)}
.sb-row.na .sb-name{color:var(--muted);font-weight:500}
.sb-row.na .lvl{opacity:.65}

/* ================= touch / small screens ================= */
@supports (height:100dvh){html,body{height:100dvh}}   /* mobile URL bar: 100% can overshoot the visible area */
.tcanvas{touch-action:pan-x pan-y;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}              /* our own pinch-zoom owns 2-finger gestures; no accidental text selection while panning */

@media (pointer:coarse){
  /* the visible box stays 18px, the tappable area grows to ~36px */
  .sb-check input{inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px)}
  .sb-row{padding-top:12px;padding-bottom:12px}
}
@media (max-width:760px){
  #hdr .progress-pill{padding:6px 11px;gap:0}
  #hdr #progressPct{min-width:0;text-align:center}
  #hdr .pp-track{display:none}                          /* percentage only — the bar has no room next to the theme toggle */
  .sb-close{width:40px;height:40px}
  .sb-close svg{width:18px;height:18px}
  .sb-head{padding:16px 16px 14px}
  .sb-body{padding:16px 16px calc(28px + env(safe-area-inset-bottom))}
  .tctrl{right:12px;bottom:calc(14px + env(safe-area-inset-bottom));gap:8px}
  .tctrl button{width:40px;height:40px}
  .tctrl #recenter{padding:0 16px}
}