/*
 * Research Phenotype: the card's shared look and its figures. Linked by the members' card
 * (/dashboard/tools/phenotype.html) and the public questionnaire (/tools/phenotype/), after
 * /css/tokens.css; each page's own stylesheet adds only what is particular to it.
 *
 * Editorial and precise: Newsreader for what is read (the label, the reading, the numbers),
 * Inter for what labels (small capitals, captions, scales). Ink for data, a soft gold tint for
 * areas, gold only on the Δ, the last-author share and the gap's rule. Colours come from the
 * tokens; no figure is read by colour alone (every series has a word beside it, and every figure
 * has a text equivalent, .ph-sr). Mobile first, to a 760 px reading column.
 */

/* ------------------------------------------------------------------ type and structure */

.ph-card { --ph-rest: color-mix(in srgb, var(--delta) 24%, var(--card)); --ph-area: color-mix(in srgb, var(--gold) 30%, var(--card)); }
.ph-card .ph-num, .ph-head-big, .ph-radar-val, .ph-numeral-value, .ph-axis-value { font-variant-numeric: lining-nums tabular-nums; }
.ph-kicker { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; line-height: 1.3; }
.ph-h3 { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.2; letter-spacing: -.005em; color: var(--ink); margin: 0; }
.ph-section { padding: 34px 0 6px; border-top: 1px solid var(--hairline); margin-top: 30px; }
.ph-section-head { margin: 0 0 18px; }
.ph-caption { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }
.ph-fine { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.ph-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------------ the masthead */

.ph-mast { padding: 0 0 4px; }
.ph-mast-top { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.ph-mast-top .ph-kicker { margin: 0; }
.ph-delta { width: 22px; height: auto; fill: var(--gold); flex: 0 0 auto; display: block; }
.ph-mast-top .ph-delta { width: 20px; }
.ph-label { font-family: var(--serif); font-weight: 450; font-size: clamp(52px, 15.5vw, 86px); line-height: .98; letter-spacing: -.022em; color: var(--ink); margin: 0 0 18px; font-optical-sizing: auto; overflow-wrap: break-word; }
.ph-label:focus { outline: none; }
.ph-label:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 4px; }
.ph-reading { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--text); margin: 0 0 20px; max-width: 31em; }
.ph-meta { font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ph-mast .ph-meta:first-of-type { padding-top: 14px; border-top: 1px solid var(--hairline); }
@media (min-width: 720px) {
  .ph-reading { font-size: 21px; }
  .ph-h3 { font-size: 26px; }
}

/* ---------------------------------------------------------------------------- figures */

.ph-fig { margin: 0; position: relative; }
.ph-key { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.ph-key-item { display: inline-flex; align-items: center; gap: 7px; }
.ph-key-group { color: var(--text); font-weight: 500; flex-basis: 100%; }
@media (min-width: 560px) { .ph-key-group { flex-basis: auto; } }
.ph-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; }
.ph-swatch-lead, .ph-swatch-first { background: var(--ink); }
.ph-swatch-rest, .ph-swatch-middle { background: var(--ph-rest); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--delta) 40%, transparent); }
.ph-swatch-last { background: var(--gold); border-radius: 50%; }
.ph-swatch-line { height: 2px; width: 16px; border-radius: 1px; background: var(--gold-ink); }

/* The radar. The box is square; the axis labels sit around it as buttons. */
.ph-radar-box { position: relative; width: min(100%, 440px); aspect-ratio: 1 / 1; margin: 0 auto; }
.ph-radar { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ph-radar-ring { fill: none; stroke: var(--hairline); stroke-width: 1; }
.ph-radar-rim { stroke: color-mix(in srgb, var(--hairline) 60%, var(--muted)); }
.ph-radar-spoke { stroke: var(--hairline); stroke-width: 1; transition: stroke .2s; }
.ph-radar-spoke.is-active { stroke: var(--ink); stroke-width: 1.5; }
.ph-radar-tick { font-family: var(--sans); font-size: 10px; fill: var(--muted); }
.ph-radar-shape { fill: var(--ph-area); fill-opacity: .9; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1 1; }
.ph-radar-dot { fill: var(--ink); stroke: var(--card); stroke-width: 2; }
.ph-radar-dot-missing { fill: var(--card); stroke: var(--field-border); stroke-dasharray: 2 2; }
.ph-rough .ph-radar-shape { stroke-dasharray: 1 1; stroke-width: 1.75; }
.ph-radar-axis {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  min-width: 64px; max-width: 96px; min-height: 44px; padding: 4px 6px; margin: 0;
  font: inherit; color: var(--text); background: none; border: 0; border-radius: 8px; text-align: center; line-height: 1.15;
}
button.ph-radar-axis { cursor: pointer; }
button.ph-radar-axis:hover { background: var(--tint); }
button.ph-radar-axis:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; background: var(--tint); }
.ph-radar-name { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.ph-radar-val { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); margin-top: 1px; }
button.ph-radar-axis .ph-radar-name { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
button.ph-radar-axis:hover .ph-radar-name { text-decoration-color: var(--ink); color: var(--ink); }
.ph-fig-radar .ph-caption { text-align: center; max-width: 34em; margin: 8px auto 0; }
@media (min-width: 720px) {
  .ph-radar-axis { max-width: 120px; }
  .ph-radar-name { font-size: 11px; }
  .ph-radar-val { font-size: 25px; }
}

/* The trajectory: two scales around a plot, years under it. */
.ph-plot { display: grid; grid-template-columns: 30px minmax(0, 1fr) 36px; gap: 0 8px; }
.ph-plot-area { position: relative; padding-top: 30px; }
.ph-plot-svg { display: block; width: 100%; height: 170px; overflow: visible; }
.ph-plot-axis { position: relative; height: 170px; margin-top: 30px; font-family: var(--sans); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ph-plot-axis-l { text-align: right; }
.ph-plot-axis-r { text-align: left; color: var(--gold-ink); }
.ph-tick { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.ph-plot-axis-r .ph-tick { left: 0; right: auto; }
.ph-grid { stroke: var(--hairline); stroke-width: 1; }
.ph-base { stroke: color-mix(in srgb, var(--hairline) 50%, var(--muted)); stroke-width: 1; }
.ph-window { fill: var(--gold-tint); }
.ph-window-tag { position: absolute; bottom: calc(100% - 28px); font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .08em; line-height: 1.15; text-transform: uppercase; color: var(--gold-ink); text-align: center; }
.ph-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.ph-bar-lead { fill: var(--ink); }
.ph-bar-rest { fill: var(--ph-rest); }
.ph-bar-now .ph-bar-lead { fill: color-mix(in srgb, var(--ink) 70%, var(--card)); }
.ph-bar-now .ph-bar-rest { fill: color-mix(in srgb, var(--delta) 14%, var(--card)); stroke: var(--field-border); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.ph-line { fill: none; stroke: var(--gold-ink); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ph-clip { transform-box: fill-box; transform-origin: 0 50%; }
.ph-plot-x { display: flex; margin-top: 6px; font-family: var(--sans); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ph-x { flex: 1 1 0; text-align: center; min-width: 0; white-space: nowrap; }
.ph-x-end { color: var(--text); }
@media (max-width: 519.98px) {
  .ph-x:not(.ph-x-end):nth-child(even) { visibility: hidden; }
}
@media (min-width: 720px) {
  .ph-plot-svg, .ph-plot-axis { height: 210px; }
}

/* The authorship ribbon. */
.ph-ribbon { display: flex; height: 16px; border-radius: 3px; overflow: hidden; background: var(--hairline); gap: 2px; }
.ph-seg { display: block; height: 100%; transform-origin: 0 50%; }
.ph-seg-first { background: var(--ink); }
.ph-seg-middle { background: var(--ph-rest); }
.ph-seg-last { background: var(--gold); }
.ph-ribbon-key { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; padding: 0; margin: 12px 0 0; }
.ph-ribbon-item { display: flex; flex-direction: column; gap: 2px; }
.ph-ribbon-num { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.05; color: var(--ink); }
.ph-ribbon-last .ph-ribbon-num { color: var(--gold-ink); }
.ph-ribbon-name { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text); }
.ph-ribbon-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .ph-ribbon-num { font-size: 26px; } }

/* Horizontal bars (co-authors, topics, the momentum windows). */
.ph-hbars, .ph-mbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ph-hbar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; line-height: 1.35; margin: 0 0 4px; }
.ph-hbar-label { color: var(--text); min-width: 0; }
.ph-hbar-val { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--ink); flex: 0 0 auto; }
.ph-track { height: 8px; background: color-mix(in srgb, var(--hairline) 55%, var(--card)); border-radius: 2px; overflow: hidden; }
.ph-fill { display: block; height: 100%; background: var(--ink); border-radius: 2px; transform-origin: 0 50%; }
.ph-hbar:not(.ph-hbar-top) .ph-fill { background: color-mix(in srgb, var(--ink) 62%, var(--card)); }
.ph-hbar-top .ph-hbar-label { font-weight: 500; color: var(--ink); }
.ph-scale { display: flex; justify-content: space-between; margin: 6px 0 0; font-family: var(--sans); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ph-scale-unit { margin: 0; font-size: 10.5px; color: var(--muted); text-align: right; letter-spacing: .04em; }
.ph-mbar-before .ph-fill { background: var(--ph-rest); }
.ph-mbar-recent .ph-fill { background: var(--ink); }
.ph-mbar .ph-track { height: 14px; }

/* Concentration: the ring with the top share, the five bars beside it. */
.ph-conc { display: grid; gap: 18px; align-items: center; }
.ph-ring { position: relative; width: 148px; height: 148px; margin: 0 auto; }
.ph-ring-svg { width: 100%; height: 100%; display: block; }
.ph-ring-track { fill: none; stroke: color-mix(in srgb, var(--hairline) 70%, var(--card)); stroke-width: 9; }
.ph-ring-arc { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: butt; }
.ph-ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ph-ring-num { font-family: var(--serif); font-size: 36px; font-weight: 500; color: var(--ink); line-height: 1; }
.ph-ring-cap { font-size: 11px; color: var(--muted); margin-top: 4px; }
.ph-callout { font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--ink); margin: 0 0 14px; }
@media (min-width: 560px) { .ph-conc { grid-template-columns: 148px minmax(0, 1fr); gap: 28px; } .ph-ring { margin: 0; } }

/* Large numerals with small captions. */
.ph-numerals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; margin: 0; }
.ph-numeral { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 2px solid var(--ink); padding-top: 10px; }
.ph-numeral-value { margin: 0; font-family: var(--serif); font-size: clamp(34px, 10vw, 48px); font-weight: 500; line-height: 1; color: var(--ink); white-space: nowrap; }
.ph-numeral-suffix { font-size: .6em; margin-left: 2px; }
.ph-numeral-cap { font-size: 12px; line-height: 1.4; color: var(--muted); margin: 8px 0 0; }

/* The gauge: the nearest label's side shaded, the line, and you. */
.ph-gauge { padding: 40px 0 0; }
.ph-gauge-track { position: relative; height: 10px; background: color-mix(in srgb, var(--hairline) 70%, var(--card)); border-radius: 5px; }
.ph-gauge-zone { position: absolute; top: 0; bottom: 0; background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold-line); border-radius: 5px; transform-origin: 0 50%; }
.ph-gauge-zone-tag { position: absolute; top: 18px; left: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--gold-ink); white-space: nowrap; }
.ph-gauge-threshold { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--gold-ink); }
.ph-gauge-you { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--card); }
.ph-gauge-you-tag { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 12.5px; color: var(--text); white-space: nowrap; }
.ph-gauge-you-tag b { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); }
.ph-gauge .ph-scale { margin-top: 34px; }

/* ------------------------------------------------------------ the gap and the moves */

.ph-pull { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); }
.ph-pull p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--text); max-width: 34em; }
.ph-pull-lead { display: block; font-style: normal; font-size: 26px; line-height: 1.25; color: var(--ink); margin: 0 0 10px; }
@media (min-width: 720px) { .ph-pull p { font-size: 20.5px; } .ph-pull-lead { font-size: 30px; } }

.ph-move-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: none; }
.ph-move { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; align-items: start; background: var(--paper); border: 1px solid var(--hairline); border-radius: 12px; padding: 18px 18px 18px 14px; }
.ph-move-n { font-family: var(--serif); font-size: 46px; font-weight: 400; line-height: .9; color: var(--ink); text-align: center; font-variant-numeric: lining-nums; }
.ph-move-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); }
@media (min-width: 720px) { .ph-move { grid-template-columns: 56px minmax(0, 1fr); padding: 22px 24px 22px 16px; } .ph-move-n { font-size: 56px; } .ph-move-text { font-size: 16px; } }

@media print {
  .ph-radar-axis { color: var(--text); }
  .ph-move { break-inside: avoid; }
  .ph-fig { break-inside: avoid; }
}