/* Great Books Ladder: the Great Ideas pages (layouts/math/gbidea.html) and the extra bits on the ideas index
   (layouts/math/gbideas.html). On top of static/math/math.css and static/greatbooks/viz/greatbooks.css; light and dark.
   Stance colors s1-s4 (s0 = no stance): racing green, gold, blue, plum. */
.gbi{--s0:#6b7570;--s1:#00562f;--s2:#9a7a2a;--s3:#1d4f91;--s4:#8a3b5c;--son:#fff;--son2:#fff}
html[data-theme="dark"] .gbi{--s0:#9aa8a0;--s1:#6cc79a;--s2:#d8b860;--s3:#8fb1ea;--s4:#e39bb9;--son:#10160f;--son2:#10160f}
.gbi h2{font:700 1.35rem/1.25 Georgia,"Times New Roman",serif;color:var(--ink);margin:0 0 .5rem}
.gbi .s0{--c:var(--s0)}.gbi .s1{--c:var(--s1)}.gbi .s2{--c:var(--s2)}.gbi .s3{--c:var(--s3)}.gbi .s4{--c:var(--s4)}
.gbi-q{margin:0 0 1.2rem}
.gbi-qtext{font:600 1.25rem/1.45 Georgia,"Times New Roman",serif;color:var(--gb-acc);margin:0 0 .4rem;max-width:44rem}

/* the timeline strip */
.gbi-tl{margin:0 0 1.6rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem .9rem}
.gbi-tl figcaption{margin:0 0 .4rem;font-size:.92rem}
.gbi-tl figcaption span{color:var(--muted)}
.gbi-tl-bar{position:relative;height:7.4rem;margin:0 .9rem}
.gbi-axis{position:absolute;left:0;right:0;top:5.3rem;height:3px;border-radius:2px;background:var(--line2)}
.gbi-tick{position:absolute;top:5rem;width:0;height:.85rem;border-left:1px solid var(--muted)}
.gbi-tick i{position:absolute;top:1rem;left:0;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:.72rem;color:var(--muted)}
.gbi-dot{position:absolute;transform:translateX(-50%);width:1.45rem;height:1.45rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 .74rem/1 system-ui,sans-serif;background:var(--c);color:var(--son)!important;text-decoration:none!important;border:2px solid var(--card);box-sizing:border-box}
.gbi-dot.s0{color:#fff!important}
html[data-theme="dark"] .gbi-dot.s0{color:#10160f!important}
.gbi-dot.l0{top:3.7rem}.gbi-dot.l1{top:2.4rem}.gbi-dot.l2{top:1.1rem}.gbi-dot.l3{top:-.2rem}
.gbi-dot::after{content:"";position:absolute;left:50%;top:100%;width:1px;background:var(--c);opacity:.7}
.gbi-dot.l0::after{height:.25rem}.gbi-dot.l1::after{height:1.55rem}.gbi-dot.l2::after{height:2.85rem}.gbi-dot.l3::after{height:4.15rem}
.gbi-tl-list{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .45rem}
.gbi-tl-list a{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;text-decoration:none!important;color:var(--ink)!important;border:1px solid var(--line2);border-radius:999px;padding:.12rem .55rem .12rem .15rem;background:var(--paper)}
.gbi-tl-list a:hover{border-color:var(--gb-acc)}
.gbi-tl-list small{color:var(--muted)}
.gbi-n{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;border-radius:50%;background:var(--c);color:var(--son);font:700 .7rem/1 system-ui,sans-serif;flex:none}
.gbi-n.s0{color:#fff}
html[data-theme="dark"] .gbi-n.s0{color:#10160f}
.gbi-legend{list-style:none;margin:.65rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.88rem}
.gbi-legend li{display:flex;align-items:center;gap:.35rem}
.gbi-sw{display:inline-block;width:.85rem;height:.85rem;border-radius:3px;background:var(--c);flex:none}
.gbi-tl .mlp-small{margin:.4rem 0 0}

/* the stops */
.gbi-stops-sec{margin:0 0 1.6rem}
.gbi-stops{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.gbi-stop{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--c);border-radius:10px;padding:.7rem .95rem .75rem;scroll-margin-top:5rem}
.gbi-stop:target{box-shadow:0 0 0 2px var(--c)}
.gbi-when{margin:0;display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--muted)}
.gbi-stop h3{margin:.2rem 0 .25rem;font:700 1.08rem/1.3 Georgia,"Times New Roman",serif;color:var(--ink)}
.gbi-stance{margin:0 0 .3rem;display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--ink)}
.gbi-stop>p{margin:.3rem 0;font-size:1rem;line-height:1.55}
.gbi-quote{margin:.5rem 0;padding:.45rem .8rem;border-left:3px solid var(--gb-gold);background:var(--gb-tint);border-radius:0 8px 8px 0}
.gbi-quote p{margin:0;font:italic 1rem/1.5 Georgia,"Times New Roman",serif;color:var(--ink)}
.gbi-quote footer{margin:.25rem 0 0;font-size:.78rem;color:var(--muted)}
.gbi-go{margin:.45rem 0 0!important;font-size:.9rem}
.gbi-go a{font-weight:600}

/* boxes */
.gbi-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin:0 0 1rem}
.gbi-young{background:var(--gb-tint);border-color:var(--gb-line)}
.gbi-box p{margin:.35rem 0}
.gbi-talk{margin:.2rem 0 0;padding-left:1.2rem}
.gbi-talk li{margin:.3rem 0}
.gbi-see{margin:.2rem 0 .6rem}
.gbi-tagged{margin:.6rem 0 .3rem!important}
.gbi-pn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin:1.2rem 0 .6rem}
.gbi-pn a{border:1px solid var(--line2);border-radius:999px;padding:.3rem .8rem;font-size:.9rem;text-decoration:none!important;color:var(--ink)!important;background:var(--card)}
.gbi-pn a:hover{border-color:var(--gb-acc)}
.gbi-credit{margin-top:.8rem}
@media (max-width:560px){
  .gbi-tl-bar{margin:0 .7rem}
  .gbi-tick:nth-of-type(even) i{display:none}
  .gbi-qtext{font-size:1.12rem}
  .gbi-pn{justify-content:center}
}

/* the ideas index: question and stop count */
.gbh-idea h3 a{color:inherit}
.gbh-idea .gbh-iq{margin:.1rem 0 .45rem;color:var(--ink);font-size:.95rem;font-style:italic}
.gbh-idea .gbh-ilink{margin:.1rem 0 .5rem;font-size:.9rem}