/* Shared result picture, scoped to keep switch-off pages unchanged. */
@font-face { font-family: 'AssessmentShiftDisplay'; src: url('/fonts/print/NewsreaderDisplay-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'AssessmentShiftDisplay'; src: url('/fonts/print/NewsreaderDisplay-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'AssessmentShiftText'; src: url('/fonts/print/NewsreaderText-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'AssessmentShiftText'; src: url('/fonts/print/NewsreaderText-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'AssessmentShiftSans'; src: url('/fonts/print/InterText-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'AssessmentShiftSans'; src: url('/fonts/print/InterText-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'AssessmentShiftMono'; src: url('/fonts/print/JetBrainsMono-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
.assessment-shift {
  --shift-panel: var(--lab-panel, var(--bg-card, #fffdf9));
  --shift-ink: var(--lab-ink, var(--text-primary, #241e1b));
  --shift-muted: var(--lab-muted, var(--text-muted, #655b52));
  --shift-line: var(--lab-line, var(--border, #cec4b8));
  --shift-accent: var(--lab-accent, var(--accent, #a3463c));
  --shift-d: var(--d, var(--disc-d, #ac3939));
  --shift-i: var(--i, var(--disc-i, #875900));
  --shift-c: var(--c, var(--disc-c, #356d9c));
  --shift-s: var(--s, var(--disc-s, #367243));
  --shift-serif: var(--lab-serif, 'AssessmentShiftDisplay', Georgia, serif);
  --shift-text: var(--lab-text, 'AssessmentShiftText', Georgia, serif);
  --shift-sans: var(--lab-sans, 'AssessmentShiftSans', Arial, sans-serif);
  --shift-mono: var(--lab-mono, 'AssessmentShiftMono', monospace);
  color: var(--shift-ink);
  margin: 2rem 0 3rem;
  padding: 1.6rem 0;
  border-block: 1px solid var(--shift-line);
  font-family: var(--shift-sans);
}
.assessment-shift[hidden] { display: none !important; }
.assessment-shift *, .assessment-shift *::before, .assessment-shift *::after { box-sizing: border-box; min-width: 0; }
.assessment-shift .assessment-shift__title {
  margin: 0 0 1.5rem;
  font: 400 clamp(2.125rem, 4vw, 2.25rem)/1.16 var(--shift-serif);
  letter-spacing: -.02em;
  color: var(--shift-ink);
}
.assessment-shift__legend { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.assessment-shift__legend-item { display: flex; align-items: center; gap: .5rem; color: var(--shift-muted); font-size: .9375rem; line-height: 1.35; }
.assessment-shift__legend-item[hidden] { display: none; }
.assessment-shift__legend-item svg { width: 18px; height: 18px; flex: none; }
.assessment-shift__legend-marker { fill: var(--shift-ink); stroke: var(--shift-ink); stroke-width: 2; }
.assessment-shift[data-shift-phase="full"] .assessment-shift__legend-marker--five,
.assessment-shift[data-shift-phase="static"] .assessment-shift__legend-marker--five { fill: none; }
.assessment-shift__composition { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.25rem); align-items: start; }
.assessment-shift__picture { margin: 0; width: 100%; max-width: 560px; justify-self: center; }
.assessment-shift__grid { display: block; width: 100%; height: auto; background: var(--shift-panel); }
.assessment-shift__quadrant--d { fill: var(--shift-d); fill-opacity: .1; }
.assessment-shift__quadrant--i { fill: var(--shift-i); fill-opacity: .1; }
.assessment-shift__quadrant--c { fill: var(--shift-c); fill-opacity: .1; }
.assessment-shift__quadrant--s { fill: var(--shift-s); fill-opacity: .1; }
.assessment-shift__rule { fill: none; stroke: var(--shift-line); stroke-width: .45; opacity: .55; }
.assessment-shift__axes, .assessment-shift__border { fill: none; stroke: var(--shift-line); stroke-width: 1; }
.assessment-shift__letter { font: 500 22px 'AssessmentShiftDisplay', Georgia, serif; }
.assessment-shift__letter--d { fill: var(--shift-d); }
.assessment-shift__letter--i { fill: var(--shift-i); }
.assessment-shift__letter--c { fill: var(--shift-c); }
.assessment-shift__letter--s { fill: var(--shift-s); }
.assessment-shift__axis-label { font: 500 10px var(--shift-mono); fill: var(--shift-muted); }
.assessment-shift__shade { fill: var(--shift-ink); fill-opacity: .12; stroke: var(--shift-ink); stroke-opacity: .55; stroke-width: 1.2; }
.assessment-shift__shade--old { fill-opacity: .05; stroke-dasharray: 3 4; stroke-opacity: .4; }
.assessment-shift__dot { fill: var(--shift-ink); stroke: var(--shift-panel); stroke-width: 2.5; }
.assessment-shift__old-dot { fill: var(--shift-panel); stroke: var(--shift-ink); stroke-width: 1.7; }
.assessment-shift__path { stroke: var(--shift-ink); stroke-width: 1.5; opacity: .45; }
.assessment-shift__pulse { stroke: var(--shift-ink); stroke-width: 1.4; }
.assessment-shift__phase { margin-top: .625rem; padding-top: .5rem; border-top: 1px solid var(--shift-line); text-align: center; font: 500 .75rem/1.4 var(--shift-mono); color: var(--shift-muted); }
.assessment-shift__readout { min-width: 0; container: score-readout / inline-size; }
.assessment-shift .assessment-shift__score-label { margin: 0 0 1rem; color: var(--shift-muted); font: 500 .75rem/1.4 var(--shift-mono); letter-spacing: .04em; }
.assessment-shift__scores { display: grid; grid-template-columns: 22px minmax(0, 1fr) 40px; gap: .35rem 8px; align-items: center; font-size: 15px; }
.assessment-shift__score { display: contents; }
.assessment-shift__score--d { --shift-style: var(--shift-d); }
.assessment-shift__score--i { --shift-style: var(--shift-i); }
.assessment-shift__score--s { --shift-style: var(--shift-s); }
.assessment-shift__score--c { --shift-style: var(--shift-c); }
.assessment-shift__score-letter { grid-column: 1; color: var(--shift-style); font: 500 1.375rem/1 'AssessmentShiftDisplay', Georgia, serif; }
.assessment-shift__score-name { grid-column: 2 / -1; min-width: 0; white-space: nowrap; color: var(--shift-ink); line-height: 1.3; }
.assessment-shift__value { grid-column: 3; margin-bottom: .7rem; padding-right: 8px; text-align: right; font: 600 1rem/1.2 var(--shift-sans); font-variant-numeric: tabular-nums; color: var(--shift-ink); }
.assessment-shift__track { grid-column: 1 / 3; margin-bottom: .7rem; min-width: 0; position: relative; height: 18px; background: var(--shift-line); }
.assessment-shift__fill { position: absolute; left: 0; top: 4px; bottom: 4px; background: var(--shift-style); z-index: 1; }
.assessment-shift__previous { position: absolute; left: 0; top: 0; bottom: 0; border: 2px dotted var(--shift-ink); opacity: .8; z-index: 2; }
.assessment-shift .assessment-shift__scale { margin: 1rem 0; font-size: .8rem; line-height: 1.5; color: var(--shift-muted); }
.assessment-shift .assessment-shift__caption { margin: 1.625rem 0 0; padding-top: 1rem; border-top: 1px solid var(--shift-line); font: italic 400 1.25rem/1.45 var(--shift-text); }
.assessment-shift .assessment-shift__replay {
  margin-top: 1.25rem;
  min-height: 48px;
  padding: .75rem 1.125rem;
  border: 1.5px solid var(--shift-ink);
  border-radius: 0;
  background: transparent;
  color: var(--shift-ink);
  font: 600 1rem/1.2 var(--shift-sans);
  cursor: pointer;
}
.assessment-shift .assessment-shift__replay:hover { background: var(--shift-ink); color: var(--shift-panel); }
.assessment-shift .assessment-shift__replay:focus-visible, .assessment-shift__narrow:focus-visible { outline: 3px solid var(--shift-accent); outline-offset: 3px; }
.assessment-shift__description { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.assessment-shift--five { display: grid; justify-items: center; gap: .75rem; }
.assessment-shift--five .assessment-shift__picture { max-width: 430px; }
.assessment-shift--five .assessment-shift__free-description { max-width: 46ch; margin: 0; font-size: 1rem; line-height: 1.6; text-align: center; color: var(--shift-muted); }
.assessment-shift .assessment-shift__narrow { min-height: 44px; display: inline-flex; align-items: center; color: var(--shift-accent); font-size: 1.05rem; text-underline-offset: .2em; }
#assessment-shift-completion { padding: 2rem; background: var(--shift-panel); }
@media (min-width: 1000px) {
  .assessment-shift:not(.assessment-shift--five) { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); column-gap: 2.25rem; align-items: start; }
  .assessment-shift:not(.assessment-shift--five) > .assessment-shift__title { grid-column: 1; grid-row: 1; margin-bottom: 1rem; }
  .assessment-shift__legend { grid-column: 1; grid-row: 2; flex-direction: column; }
  .assessment-shift__stage { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 799px) {
  .assessment-shift__composition { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .assessment-shift__picture { max-width: 430px; }
  #assessment-shift-completion { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .assessment-shift *, .assessment-shift *::before, .assessment-shift *::after { animation: none !important; transition: none !important; }
}

/* 22px letter + 152px longest name + 140px track + 40px number + three 8px gaps. */
@container score-readout (min-width: 378px) {
  .assessment-shift__scores { grid-template-columns: 22px 152px minmax(140px, 1fr) 40px; row-gap: 1rem; }
  .assessment-shift__score-letter, .assessment-shift__score-name, .assessment-shift__track, .assessment-shift__value { grid-column: auto; margin-bottom: 0; }
}