/* Chapter 8: forty agents in a ring of circles around Chip. Fits one screen.
   Left: the agent in focus, its week as a dial, and your team. Right: the constellation. */

.lib { height: 320vh; }
.lib__inner { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 88px var(--gutter) 28px; width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr); gap: 3vw; align-items: center; }
.lib__side { display: grid; gap: 16px; align-content: center; }
.lib__side .h { font-size: clamp(36px, 3.8vw, 60px); }

/* The agent in focus. */
.ld { --c: #0a0a0a; --o: 1; border-radius: 26px; padding: 20px; display: grid; gap: 14px;
  opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 48px)) scale(calc(0.95 + var(--o) * 0.05)); }
.ld header { display: flex; align-items: center; gap: 14px; }
.ld__x { margin-left: auto; align-self: flex-start; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 400 20px/1 var(--sans); color: var(--grey-2); background: #f3f2ed; cursor: pointer; transition: background-color 200ms, color 200ms; }
@media (hover: hover) and (pointer: fine) { .ld__x:hover { background: var(--ink); color: #fff; } }
.ld__hire { --dip: 0; transform: scale(calc(1 - var(--dip) * 0.1)); box-shadow: 0 0 0 calc(var(--dip) * 9px) rgba(201, 166, 97, 0.32); }
.ld__mark { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--ink); flex: 0 0 auto; }
.ld__mark .monad-svg { width: 46px; height: 46px; }
.ld header b { display: block; font-size: 21px; letter-spacing: -0.02em; }
.ld header small { color: color-mix(in srgb, var(--c) 65%, #0a0a0a); font-size: 11.5px; }
.ld > p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--grey-1); }
.ld__when { display: grid; grid-template-columns: 128px 1fr; gap: 18px; align-items: center; padding: 12px; border-radius: 20px; background: #f8f7f3; }
.ld__when > div { display: grid; gap: 2px; align-content: center; }
.ld__when .mono { color: var(--grey-3); font-size: 10.5px; margin-top: 6px; }
.ld__when .mono:first-child { margin-top: 0; }
.ld__when b { font-size: 15px; letter-spacing: -0.01em; }
.ld__when small { color: var(--grey-1); font-size: 13px; }
.ld__dial { width: 128px; height: 128px; overflow: visible; }
.ld__dial path { fill: none; stroke: #e6e3da; stroke-width: 7; stroke-linecap: round; }
.ld__dial path.is-on { stroke: var(--c); }
.ld__dial text { font: 500 6px var(--mono); fill: var(--grey-3); text-anchor: middle; }
.ld__dial .ld__dialt { font: 600 10px var(--sans); fill: var(--ink); }
.ld__dial .ld__diald { font-size: 6px; }
.ld__hire { justify-self: start; font: 500 14px var(--sans); padding: 11px 18px; border-radius: 999px; background: var(--ink); color: #fff; cursor: pointer; transition: background-color 250ms; }
.ld__hire:active { transform: scale(0.96); }
.ld__hire.is-hired { background: color-mix(in srgb, var(--c) 16%, #fff); color: color-mix(in srgb, var(--c) 60%, #0a0a0a); }

.lib__team { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lib__team .mono { color: var(--grey-2); }
.lib__faces { display: flex; }
.lib__faces span { width: 30px; height: 30px; border-radius: 50%; margin-right: -6px; background: #fff; box-shadow: 0 0 0 2px #faf9f6, 0 0 0 3px color-mix(in srgb, var(--c) 60%, transparent); color: var(--ink); }
.lib__faces .monad-svg { width: 30px; height: 30px; }

/* The constellation, drawn in a fixed 700px world and scaled with --k. */
.lib__field { position: relative; width: 100%; max-width: calc(100dvh - 130px); aspect-ratio: 1; justify-self: center; }
.lib__sky { --k: 1; position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; transform: scale(var(--k)); }
.lib__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lib__teamring { fill: rgba(201, 166, 97, 0.05); stroke: rgba(201, 166, 97, 0.5); stroke-dasharray: 2 5; }
.lib__arc { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0.55; }
.lib__tethers line { stroke-width: 1.2; opacity: 0.45; }
.lib__cat { position: absolute; translate: -50% -50%; font-size: 11px; color: color-mix(in srgb, var(--c) 70%, #0a0a0a); white-space: nowrap; }
.lib__chip { position: absolute; left: 350px; top: 350px; width: 120px; height: 120px; margin: -60px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); box-shadow: 0 0 0 1px var(--hairline), 0 0 60px rgba(201, 166, 97, 0.3), 0 20px 40px -24px rgba(20, 20, 30, 0.4); }
.lib__chip .monad-svg { width: 84px; height: 84px; }
.lib__chip b { position: absolute; bottom: -24px; font-size: 11px; color: #7a6231; font-weight: 500; }

.lb { position: absolute; width: 46px; height: 46px; margin: -23px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--ink);
  background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent), 0 8px 18px -10px rgba(20, 20, 30, 0.35);
  transition: transform 300ms var(--spring), box-shadow 300ms var(--ease-out); }
.lb .monad-svg { width: 34px; height: 34px; }
.lb__tip { position: absolute; top: 52px; left: 50%; translate: -50% 0; font: 500 11.5px var(--sans); white-space: nowrap; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: #fff; opacity: 0; pointer-events: none; transition: opacity 200ms; z-index: 3; }
.lb:hover, .lb:focus-visible { transform: scale(1.18); z-index: 4; }
.lb:hover .lb__tip, .lb:focus-visible .lb__tip, .lb.is-selected .lb__tip { opacity: 1; }
.lb.is-selected { transform: scale(1.3); z-index: 5; box-shadow: 0 0 0 2px var(--c), 0 0 0 8px color-mix(in srgb, var(--c) 18%, transparent), 0 12px 24px -10px rgba(20, 20, 30, 0.4); }
.lb.is-hired { width: 58px; height: 58px; margin: -29px; background: color-mix(in srgb, var(--c) 10%, #fff); box-shadow: 0 0 0 2px var(--c), 0 10px 22px -10px rgba(20, 20, 30, 0.4); }
.lb.is-hired .monad-svg { width: 44px; height: 44px; }
.lb.is-hired .lb__tip { top: 62px; }

@media (min-width: 901px) and (max-height: 860px) {
  .lib { padding-top: 80px; }
  .lib__side .lede { display: none; }
  .ld { padding: 16px; gap: 10px; }
  .ld__when { grid-template-columns: 104px 1fr; }
  .ld__dial { width: 104px; height: 104px; }
}
@media (max-width: 900px) {
  /* Phones: the ring fills the width and the agent card rises over it; × moves to the next. */
  .lib { height: 340vh; }
  .lib__inner { padding: 80px var(--gutter) 16px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; gap: 8px; }
  .lib__side { display: contents; }
  .lib__side .h { font-size: 30px; }
  .lib__side .lede { display: none; }
  .lib__team { order: 2; justify-content: center; }
  .lib__field { order: 3; max-width: 100%; align-self: start; margin-top: 4px; }
  .ld { order: 4; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 16px; z-index: 6; padding: 16px; gap: 10px;
    box-shadow: 0 30px 60px -24px rgba(20, 20, 30, 0.45), 0 0 0 1px var(--hairline);
    pointer-events: none; }
  .ld.is-open { pointer-events: auto; }
  .ld > p { font-size: 13.5px; }
  .ld__mark { width: 46px; height: 46px; }
  .ld__mark .monad-svg { width: 36px; height: 36px; }
  .ld header b { font-size: 18px; }
  .ld__when { grid-template-columns: 96px 1fr; gap: 12px; padding: 10px; }
  .ld__dial { width: 96px; height: 96px; }
}
@media (min-width: 901px) { .ld__x { display: none; } }