/* /codebase/ (codebase.php): the engine measured from its git history. Amber draws what changes
   over time (like the site's loudness contours), cobalt the sizes of parts. The file map's shades
   are one cobalt ramp, checked for step contrast and against the page in both themes. */
:root {
  --heat-1: #93a2f0;
  --heat-2: #6a80e9;
  --heat-3: #4460e0;
  --heat-4: #2239b8;
  --heat-on-1: #1a1c2b;
  --heat-on-2: #1a1c2b;
  --heat-on-3: #fff;
  --heat-on-4: #fff;
}
:root[data-theme="dark"] {
  --heat-1: #374690;
  --heat-2: #4a5fcc;
  --heat-3: #7084f2;
  --heat-4: #aab7ff;
  --heat-on-1: #e4e7f0;
  --heat-on-2: #e4e7f0;
  --heat-on-3: #151826;
  --heat-on-4: #151826;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --heat-1: #374690;
    --heat-2: #4a5fcc;
    --heat-3: #7084f2;
    --heat-4: #aab7ff;
    --heat-on-1: #e4e7f0;
    --heat-on-2: #e4e7f0;
    --heat-on-3: #151826;
    --heat-on-4: #151826;
  }
}

/* display-font headings wait for Anybody like the rest of the site's (header.php) */
.wl-fonts-pending :is(.cb-hero h1, .cb-subhead) { visibility: hidden; }

/* ---------------------------------------------------------------- hero */
.cb-hero { padding: 56px 0 8px; }
.cb-hero h1 {
  --display: "Anybody", "Anybody 800 118", "Instrument Sans", system-ui, sans-serif;
  font: 800 clamp(2.4rem, 6.4vw, 4.6rem)/0.95 var(--display);
  font-variation-settings: "wdth" 118;
  margin: 0;
  letter-spacing: -0.01em;
}
.cb-lede { font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.4; max-width: 36ch; margin: 18px 0 0; font-weight: 500; }
.cb-headline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 56px; margin-top: 44px; }
.cb-figure { margin: 0; display: flex; flex-direction: column; }
.cb-figure-value { font: 600 clamp(3.6rem, 11vw, 7.2rem)/0.9 var(--body); letter-spacing: -0.035em; }
.cb-figure-label { color: var(--slate); margin-top: 12px; font-size: 1.05rem; }
.cb-ladder { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; row-gap: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ladder li { display: flex; flex-direction: column; padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--line); }
.cb-ladder li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.cb-ladder span { color: var(--slate); font-weight: 400; font-size: 0.86rem; }
.cb-facts { margin-top: 44px; }

/* ---------------------------------------------------------------- shared */
.cb-subhead {
  --display: "Anybody", "Anybody 700 105", "Instrument Sans", system-ui, sans-serif;
  font: 700 1.35rem/1.2 var(--display);
  font-variation-settings: "wdth" 105;
  margin: 64px 0 6px;
}
.cb-note { color: var(--slate); max-width: var(--measure); margin: 0 0 20px; font-size: 0.95rem; }
.codebase .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-details { margin-top: 28px; }
.cb-details summary { cursor: pointer; font-weight: 600; color: var(--cobalt); width: max-content; max-width: 100%; }
.cb-details summary:hover { color: var(--cobalt-ink); }
.cb-details[open] summary { margin-bottom: 14px; }
.cb-details table { font-size: 0.9rem; }
.cb-log td:nth-child(3) { min-width: 22ch; }
.cb-files td:last-child { min-width: 30ch; color: var(--slate); }
.cb-source { margin: 72px 0 0; color: var(--slate); font-size: 0.92rem; max-width: var(--measure); }

.cb-bar { display: block; flex: none; height: 14px; width: calc((100% - 6.5rem) * var(--f, 0)); min-width: 2px; background: var(--cobalt); border-radius: 0 4px 4px 0; }
.cb-bar-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-bar-value small { color: var(--slate); font-weight: 400; font-size: 0.85rem; margin-left: 4px; }

.cb-spark { display: block; width: 100%; height: 30px; overflow: visible; }
.cb-spark-area { fill: var(--area); }
.cb-spark-line { fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* the tooltip (assets/codebase.js), shared by the chart, the map, the chips and the hours */
.cb-tip {
  position: fixed; left: 0; top: 0; z-index: 40;
  max-width: min(340px, calc(100vw - 24px));
  padding: 10px 12px;
  background: var(--menu-bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--menu-shadow);
  font-size: 0.86rem; line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
}
.cb-tip[hidden] { display: none; }
.cb-tip strong { display: block; font-weight: 600; }
.cb-tip .dim { color: var(--slate); }
.cb-tip code { font-size: 0.92em; }
[data-tip] { cursor: default; }

/* ---------------------------------------------------------------- growth chart */
.cb-growth { margin: 0; }
.cb-chart { position: relative; padding-left: 3.4rem; }
.cb-releases { position: relative; height: 26px; }
.cb-release { position: absolute; bottom: 5px; transform: translateX(-50%); font: 500 0.8rem/1 var(--mono); color: var(--cobalt); white-space: nowrap; }
.cb-release.is-end { transform: translateX(calc(-100% + 4px)); }
.cb-release.is-row-2 { bottom: 22px; }
.cb-plot { position: relative; height: clamp(220px, 34vw, 380px); border-bottom: 1px solid var(--ink); touch-action: pan-y; }
.cb-plot:focus-visible { outline: 3px solid var(--amber); outline-offset: 8px; }
.cb-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cb-grid, .cb-days { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cb-days { opacity: 0.7; }
.cb-rel { fill: none; stroke: var(--cobalt); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.55; }
.cb-area { fill: var(--area); }
.cb-line { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cb-ytick { position: absolute; right: calc(100% + 10px); transform: translateY(50%); font-size: 0.78rem; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-end, .cb-cross-dot { position: absolute; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--paper); }
.cb-end-label { position: absolute; right: 12px; bottom: 10px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-plot.is-active .cb-end-label { visibility: hidden; }
.cb-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--ink); pointer-events: none; }
.cb-cross[hidden] { display: none; }
.cb-cross-dot { left: 0; }
.cb-xaxis { position: relative; height: 30px; }
.cb-xtick { position: absolute; top: 7px; padding-left: 5px; font-size: 0.78rem; color: var(--slate); white-space: nowrap; }
.cb-growth figcaption { color: var(--slate); font-size: 0.92rem; margin-top: 6px; max-width: var(--measure); }

/* ---------------------------------------------------------------- capabilities */
.cb-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 24px; }
.cb-tile { display: flex; flex-direction: column; border-top: 2px solid var(--ink); padding-top: 10px; }
.cb-tile-label { color: var(--slate); font-size: 0.9rem; }
.cb-tile-value { font: 600 2.4rem/1.1 var(--body); margin-top: 4px; }
.cb-tile-note { color: var(--slate); font-size: 0.84rem; }
.cb-tile .cb-spark { margin-top: auto; padding-top: 12px; height: 42px; }

.cb-matrix { table-layout: fixed; min-width: 760px; }
.cb-matrix-scroll { overflow-x: auto; }
.cb-matrix thead th { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.cb-matrix thead th:first-child { width: 170px; }
.cb-col-date { display: block; font-weight: 400; color: var(--slate); font-size: 0.8rem; }
.cb-matrix th[scope="row"] { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.cb-row-count { display: block; font-weight: 400; color: var(--slate); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.cb-matrix td { padding-top: 12px; padding-bottom: 12px; }
.cb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cb-chips li { padding: 2px 8px; border-radius: 4px; background: var(--paper-2); font-size: 0.86rem; line-height: 1.5; }
.cb-chips.is-code li { font-family: var(--mono); font-size: 0.8rem; }
.cb-chips li:hover { background: var(--line); }
.cb-none { color: var(--slate); opacity: 0.5; }
.cb-commands td:first-child code { white-space: nowrap; }
.cb-commands td:nth-child(2) { color: var(--slate); min-width: 28ch; }
.cb-commands td:last-child { white-space: nowrap; font-family: var(--mono); font-size: 0.86rem; }

@media (max-width: 760px) {
  .cb-matrix, .cb-matrix tbody, .cb-matrix tr, .cb-matrix th, .cb-matrix td { display: block; width: auto; min-width: 0; }
  .cb-matrix thead { display: none; }
  .cb-matrix tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .cb-matrix th[scope="row"] { border: 0; padding: 0 0 4px; }
  .cb-row-count { display: inline; margin-left: 8px; }
  .cb-matrix td { border: 0; padding: 6px 0; }
  .cb-matrix td::before { content: attr(data-label); display: block; color: var(--slate); font-size: 0.82rem; margin-bottom: 4px; }
  .cb-matrix td.is-empty { display: none; }
}

/* ---------------------------------------------------------------- parts */
.cb-parts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cb-part { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(90px, 2fr); gap: 10px 32px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cb-part-name h3 { font: 600 1.05rem/1.3 var(--body); margin: 0; }
.cb-part-name p { margin: 2px 0 0; color: var(--slate); font-size: 0.9rem; }
.cb-part-size { display: flex; align-items: center; gap: 10px; }
.cb-part-spark { height: 34px; }
@media (max-width: 760px) {
  .cb-part { grid-template-columns: minmax(0, 1fr) 90px; }
  .cb-part-name { grid-column: 1 / -1; }
}

/* the file map: two layouts (see codebase.php), the narrow one for a narrow column */
.cb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px; font-size: 0.86rem; color: var(--slate); }
.cb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cb-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.cb-legend .heat-1, .cb-cell.heat-1 { background-color: var(--heat-1); color: var(--heat-on-1); }
.cb-legend .heat-2, .cb-cell.heat-2 { background-color: var(--heat-2); color: var(--heat-on-2); }
.cb-legend .heat-3, .cb-cell.heat-3 { background-color: var(--heat-3); color: var(--heat-on-3); }
.cb-legend .heat-4, .cb-cell.heat-4 { background-color: var(--heat-4); color: var(--heat-on-4); }
.cb-map-wrap { container-type: inline-size; }
.cb-map { position: relative; aspect-ratio: 1000 / 560; }
.cb-group, .cb-cell { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.cb-group { border-top: 2px solid var(--ink); }
.cb-group-name { display: none; position: absolute; left: 1px; top: 3px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; line-height: 1.2; }
.cb-group-name b { font-weight: 400; color: var(--slate); font-variant-numeric: tabular-nums; }
.cb-group.gw .cb-group-name { display: block; }
.cb-cell { border: 1px solid var(--paper); border-radius: 4px; background-clip: padding-box; overflow: hidden; padding: 4px 6px; font: 500 11.5px/15px var(--mono); }
.cb-cell-name, .cb-cell-lines { display: none; white-space: nowrap; }
.cb-cell-lines { font-variant-numeric: tabular-nums; opacity: 0.85; }
.cb-cell.lw1 .cb-cell-name, .cb-cell.lw2 .cb-cell-name, .cb-cell.lw2 .cb-cell-lines { display: block; }
.cb-cell:hover, .cb-cell.is-tipped { box-shadow: inset 0 0 0 2px var(--ink); }
/* assets/codebase.js measures each label at the size it is drawn (is-fitted) */
.cb-map.is-fitted .cb-cell .cb-cell-name, .cb-map.is-fitted .cb-cell .cb-cell-lines, .cb-map.is-fitted .cb-group .cb-group-name { display: none; }
.cb-map.is-fitted .cb-cell.fit-1 .cb-cell-name, .cb-map.is-fitted .cb-cell.fit-2 .cb-cell-lines, .cb-map.is-fitted .cb-group.fit-1 .cb-group-name { display: block; }
.cb-map.is-fitted .cb-group.fit-1:not(.fit-2) .cb-group-name b { display: none; }
@container (max-width: 699.98px) {
  .cb-map { aspect-ratio: 328 / 600; }
  .cb-group, .cb-cell { left: var(--nx); top: var(--ny); width: var(--nw); height: var(--nh); }
  .cb-group.gw .cb-group-name { display: none; }
  .cb-group.gn .cb-group-name { display: block; }
  .cb-cell.lw1 .cb-cell-name, .cb-cell.lw2 .cb-cell-name, .cb-cell.lw2 .cb-cell-lines { display: none; }
  .cb-cell.ln1 .cb-cell-name, .cb-cell.ln2 .cb-cell-name, .cb-cell.ln2 .cb-cell-lines { display: block; }
}

/* ---------------------------------------------------------------- around the engine */
.cb-around { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; }
.cb-around .cb-subhead { margin-top: 8px; }
.cb-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cb-bars li { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 16px; align-items: center; }
.cb-bars-label { font-weight: 600; font-size: 0.95rem; }
.cb-bars-label small { display: block; color: var(--slate); font-weight: 400; font-size: 0.8rem; line-height: 1.35; }
.cb-bars-track { display: flex; align-items: center; gap: 10px; }
.cb-emoji { display: inline-block; width: 1.6em; }
.cb-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; height: 150px; border-bottom: 1px solid var(--ink); margin-top: 28px; }
.cb-hour { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.cb-hour-bar { position: relative; display: block; width: 100%; max-width: 24px; height: var(--v); background: var(--cobalt); border-radius: 4px 4px 0 0; }
.cb-hour:hover .cb-hour-bar { background: var(--cobalt-ink); }
.cb-hour-value { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 0.8rem; font-weight: 600; }
.cb-hours-axis { position: relative; height: 26px; font-size: 0.78rem; color: var(--slate); }
.cb-hours-axis span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.cb-hours-axis span:first-child { transform: none; }
.cb-hours-axis span:last-child { transform: translateX(-100%); }

@media (max-width: 860px) {
  .cb-around { grid-template-columns: minmax(0, 1fr); }
  .cb-around > div + div .cb-subhead { margin-top: 56px; }
}
@media (max-width: 600px) {
  .cb-chart { padding-left: 2.9rem; }
  .cb-xtick.is-odd, .cb-xtick.is-crowded { display: none; }
  .cb-bars li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cb-ladder li { padding-right: 12px; margin-right: 12px; }
}