/* =========================================================================
   ATLAS — black & white, single-screen build

   One landing screen: header, hero, bottom bar. Practice and About are not
   sections you scroll to — they are overlay panels that grow out of the
   cursor-driven reveal band, the same way the menu does. Dependency-free.
   ========================================================================= */

:root {
  /* ---- monochrome palette (accent is pure black instead of blue) ---- */
  --color-background: #f4f4f2;
  --color-foreground: #141414;
  --color-foreground-rgb: 20, 20, 20;
  --color-body: #3a3a3a;
  --color-muted: #6d6d6d;
  --color-faint: #b3b3b3;
  --color-soft: rgba(var(--color-foreground-rgb), .64);
  --color-hairline: rgba(var(--color-foreground-rgb), .14);
  --color-surface: #fbfbfa;
  --color-sunken: rgba(var(--color-foreground-rgb), .055);

  --color-accent: #000000;
  --color-accent-rgb: 0, 0, 0;
  --color-accent-foreground: #f7f7f5;
  --color-accent-foreground-rgb: 247, 247, 245;
  --color-accent-muted: rgba(var(--color-accent-rgb), .82);
  --color-accent-line: rgba(var(--color-accent-rgb), .4);
  --color-accent-active-line: rgba(var(--color-accent-rgb), .5);

  --color-inverted-foreground: var(--color-accent-foreground);
  --color-inverted-body: rgba(var(--color-accent-foreground-rgb), .9);
  --color-inverted-muted: rgba(var(--color-accent-foreground-rgb), .825);
  --color-inverted-soft: rgba(var(--color-accent-foreground-rgb), .75);
  --color-inverted-faint: rgba(var(--color-accent-foreground-rgb), .58);
  --color-inverted-active-line: var(--color-inverted-soft);
  --color-inverted-line: rgba(var(--color-accent-foreground-rgb), .3);
  --color-inverted-hairline: rgba(var(--color-accent-foreground-rgb), .16);

  --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "SF Mono", Consolas, Menlo, monospace;

  --transition-duration: .35s;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);

  --layer-base: 1;
  --layer-reveal: 2;
  --layer-scrollbar: 12;
  --layer-overlay: 20;

  --reveal-position: 60%;
  --reveal-width: 1px;

  --site-gutter: clamp(1.5rem, calc(.607rem + 3.214vw), 3.5rem);
  --site-container-max: 200rem;
  --site-container-half-max: 100rem;
  --site-container-offset: max(0rem, calc(50vw - var(--site-container-half-max)));
  --site-container-width: min(100vw, var(--site-container-max));
  --site-container-inner-width: calc(var(--site-container-width) - var(--site-gutter) - var(--site-gutter));

  --site-axis-position-md: min(60vw, 120rem);
  --site-axis-position-lg: min(61.111vw, 122.222rem);

  --site-header-padding-block: clamp(.625rem, 1.7dvh, 1.125rem);
  --site-header-wordmark-height: 1.5rem;
  --site-header-wordmark-width: 7.33rem;
  --site-header-height: calc(var(--site-header-padding-block) * 2 + var(--site-header-wordmark-height) + 1px);

  --section-padding-block: clamp(2.25rem, 5dvh, 3.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none;
}
html::-webkit-scrollbar { width: 0; height: 0; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, p, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }

.site-skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: .625rem 1rem;
  background: var(--color-accent);
  color: var(--color-inverted-foreground);
  font-family: var(--font-mono);
  font-size: .75rem;
  text-decoration: none;
}
.site-skip-link:focus-visible { top: 1rem; }

.site-container {
  width: min(100%, var(--site-container-max));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.site-header__sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; border: 0; clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--site-header-padding-block);
}
.site-header::after {
  position: absolute; right: var(--site-gutter); bottom: 0; left: var(--site-gutter);
  height: 0; border-top: 1px solid var(--color-hairline); content: "";
}
.site-header__brand { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
/* the wordmark is painted with currentColor through a mask, so it inverts
   for free wherever the reveal band, the black stage or the overlay put a
   different foreground colour behind it. */
.site-header__brand-mark {
  display: block;
  width: var(--site-header-wordmark-width);
  height: var(--site-header-wordmark-height);
  background: currentColor;
  -webkit-mask-image: url("./brand/godrej-properties-black.svg");
  mask-image: url("./brand/godrej-properties-black.svg");
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
@media (max-width: 30rem) {
  :root { --site-header-wordmark-width: 6rem; --site-header-wordmark-height: 1.24rem; }
}
.site-header__nav { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); align-items: center; }

.site-header__link {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  text-decoration: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .875rem;
  letter-spacing: -.005em;
  line-height: 1.2;
  cursor: pointer;
}
.site-header__link-text { position: relative; display: inline-block; }
.site-header__link-text::after {
  position: absolute; right: 0; bottom: -.2em; left: 0;
  height: 0; border-top: 1px solid currentColor; content: "";
  opacity: 0; transform: scaleX(0); transform-origin: left center;
  transition: transform .34s var(--ease-soft), opacity .16s ease-out;
}
.site-header__link:hover .site-header__link-text::after,
.site-header__link[aria-expanded="true"] .site-header__link-text::after { opacity: 1; transform: scaleX(1); }
.site-header__link:focus-visible { outline: 2px solid currentColor; outline-offset: .3rem; }

@media (max-width: 30rem) {
  .site-header__nav { gap: 1.125rem; }
  .site-header__link { font-size: .8125rem; }
}

.site-header__menu {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  letter-spacing: -.01em;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.site-header__menu-label { display: inline-block; line-height: 1.2; }
.site-header__menu-marker { position: relative; display: block; width: 1rem; height: 1rem; color: var(--color-accent); }
.site-header__menu-marker span {
  position: absolute; display: block; width: .375rem; height: .375rem;
  background: currentColor; transform: translate(-50%, -50%) rotate(0); transform-origin: center;
  transition: top .28s var(--ease-out), left .28s var(--ease-out),
              width .28s var(--ease-out), height .28s var(--ease-out),
              opacity .22s var(--ease-out), transform .3s var(--ease-out);
}
.site-header__menu-marker span:nth-child(1) { --cross-top: 26.5625%; --cross-left: 26.5625%; --cross-rot: 45deg;  top: .1875rem; left: .1875rem; }
.site-header__menu-marker span:nth-child(2) { --cross-top: 26.5625%; --cross-left: 73.4375%; --cross-rot: -45deg; top: .1875rem; left: .8125rem; }
.site-header__menu-marker span:nth-child(3) { --cross-top: 73.4375%; --cross-left: 26.5625%; --cross-rot: -45deg; top: .8125rem; left: .1875rem; }
.site-header__menu-marker span:nth-child(4) { --cross-top: 73.4375%; --cross-left: 73.4375%; --cross-rot: 45deg;  top: .8125rem; left: .8125rem; }
.site-header__menu[data-menu-state="open"] { color: var(--color-inverted-foreground); }
.site-header__menu[data-menu-state="open"] .site-header__menu-marker { color: currentColor; }
.site-header__menu[data-menu-state="open"] .site-header__menu-marker span {
  top: var(--cross-top); left: var(--cross-left);
  width: .5rem; height: 1.7px;
  transform: translate(-50%, -50%) rotate(var(--cross-rot));
}
/* the band anchors the marker: hovering "Menu" collapses the grid to a dot */
.site-reveal[data-reveal-anchor-active="menu"] .site-header__menu-marker span {
  top: .5rem; left: .5rem; width: .375rem; height: .375rem;
  transform: translate(-50%, -50%) rotate(0);
}
.site-header--reveal::after { border-top-color: var(--color-inverted-line); }
.site-header--reveal .site-header__menu-marker { color: currentColor; }

/* -------------------------------------------------------------------------
   Buttons / links
   ------------------------------------------------------------------------- */
.site-button {
  --site-button-color: inherit;
  --site-button-accent-color: var(--color-accent);
  --site-button-font-size: clamp(1.375rem, calc(1.25rem + .35vw), 1.5rem);
  --site-button-font-weight: 600;
  --site-button-letter-spacing: -.02em;
  --site-button-bracket-x: 0px;
  --site-button-bracket-y: 0px;
  --site-button-motion-x: 3px;
  --site-button-motion-y: 1.5px;
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--site-button-color);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--site-button-font-size);
  font-weight: var(--site-button-font-weight);
  letter-spacing: var(--site-button-letter-spacing);
  line-height: 1;
  cursor: pointer;
}
.site-button::before, .site-button::after {
  display: inline-block;
  color: var(--site-button-accent-color);
  transition: transform .3s var(--ease-soft);
}
.site-button::before { order: 0; content: "["; margin-right: .25em; transform: translate(calc(var(--site-button-bracket-x) - 0px), var(--site-button-bracket-y)); }
.site-button::after  { order: 2; content: "]"; margin-left: .25em;  transform: translate(var(--site-button-bracket-x), var(--site-button-bracket-y)); }
.site-button:hover::before,
.site-button:focus-visible::before { transform: translate(calc(var(--site-button-bracket-x) - .2em), var(--site-button-bracket-y)) scale(1.12); }
.site-button:hover::after,
.site-button:focus-visible::after  { transform: translate(calc(var(--site-button-bracket-x) + .2em), var(--site-button-bracket-y)) scale(1.12); }

/* the brackets open outwards while a rule wipes in under the label — the
   same underline gesture the header links use */
/* perspective is in em so it tracks the clamped button size; ~4.5x the
   line box is what makes the rotation read as a flip rather than a slide */
.site-button__label { order: 1; position: relative; display: inline-block; perspective: 4.5em; }

/* Login flips its face on hover: the resting label rotates away over the top
   while an identical one comes up from below. */
.site-button__flip {
  position: relative;
  display: block;
  height: 1.15em;
  line-height: 1.15;
  transform-style: preserve-3d;
  /* deliberately not --ease-soft: that curve is so front-loaded the rotation
     is ~90% done in 150ms and reads as an instant swap, not a flip */
  transition: transform .5s cubic-bezier(.62, .04, .2, 1);
}
.site-button__flip-face {
  display: block;
  white-space: nowrap;
  backface-visibility: hidden;
  transform: translateZ(.575em);
}
.site-button__flip-face--back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateX(-90deg) translateZ(.575em);
}
.site-button:hover .site-button__flip,
.site-button:focus-visible .site-button__flip { transform: rotateX(90deg); }
.site-button__label::after {
  position: absolute; right: 0; bottom: -.14em; left: 0;
  height: 0; border-top: 1px solid currentColor; content: "";
  opacity: 0; transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease-soft), opacity .16s ease-out;
}
.site-button:hover .site-button__label::after,
.site-button:focus-visible .site-button__label::after { opacity: 1; transform: scaleX(1); }

/* Hovering Login parks the band on top of it, so the pointer sees the inverted
   clone rather than the button it is over. Drive the same hover off the band's
   anchor state and both layers react together. Scoped to [data-reveal-anchor-name]
   so this only flips the button the band is actually parked on — with two
   buttons now sharing .site-button__flip, an unscoped selector would flip both. */
.site-reveal[data-reveal-anchor-active="login"] [data-reveal-anchor-name="login"] .site-button__label::after { opacity: 1; transform: scaleX(1); }
.site-reveal[data-reveal-anchor-active="login"] [data-reveal-anchor-name="login"] .site-button__flip { transform: rotateX(90deg); }
.site-reveal[data-reveal-anchor-active="login"] [data-reveal-anchor-name="login"].site-button::before { transform: translate(calc(var(--site-button-bracket-x) - .2em), var(--site-button-bracket-y)) scale(1.12); }
.site-reveal[data-reveal-anchor-active="login"] [data-reveal-anchor-name="login"].site-button::after  { transform: translate(calc(var(--site-button-bracket-x) + .2em), var(--site-button-bracket-y)) scale(1.12); }
.site-reveal[data-reveal-anchor-active="login"] .site-reveal__layer--reveal .site-button {
  --site-button-accent-color: var(--color-inverted-foreground);
}

/* Same parking behaviour for the Dev-login anchor (DEBUG-only button). */
.site-reveal[data-reveal-anchor-active="devlogin"] [data-reveal-anchor-name="devlogin"] .site-button__label::after { opacity: 1; transform: scaleX(1); }
.site-reveal[data-reveal-anchor-active="devlogin"] [data-reveal-anchor-name="devlogin"] .site-button__flip { transform: rotateX(90deg); }
.site-reveal[data-reveal-anchor-active="devlogin"] [data-reveal-anchor-name="devlogin"].site-button::before { transform: translate(calc(var(--site-button-bracket-x) - .2em), var(--site-button-bracket-y)) scale(1.12); }
.site-reveal[data-reveal-anchor-active="devlogin"] [data-reveal-anchor-name="devlogin"].site-button::after  { transform: translate(calc(var(--site-button-bracket-x) + .2em), var(--site-button-bracket-y)) scale(1.12); }
.site-button:focus-visible { outline: 2px solid currentColor; outline-offset: .25rem; }

.site-button--lg {
  --site-button-font-size: clamp(1.5rem, calc(1.1rem + 1vw), 2rem);
  --site-button-font-weight: 700;
  --site-button-letter-spacing: -.03em;
  --site-button-motion-x: 4px;
  --site-button-motion-y: 2px;
}
.site-reveal__layer--reveal .site-button {
  --site-button-color: var(--color-inverted-foreground);
  --site-button-accent-color: var(--color-inverted-faint);
}

.site-text-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .1em;
  transition: opacity .2s var(--ease-out);
}
.site-text-link:hover { opacity: .65; }

/* -------------------------------------------------------------------------
   01 / Home — reveal shell
   ------------------------------------------------------------------------- */
.site-reveal {
  --reveal-axis-width: 8.75rem;
  --hero-work-axis-x: clamp(20rem, calc(var(--site-axis-position-md) - var(--site-gutter)), calc(var(--site-container-inner-width) - 14rem));
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow-x: clip;
  background: var(--color-background);
  color: var(--color-foreground);
  isolation: isolate;
}
.site-reveal__layer {
  grid-area: 1 / 1;
  display: grid;
  min-width: 0;
  min-height: 100svh;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.site-reveal__band-probe {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--reveal-position) - var(--reveal-width) / 2);
  z-index: -1; display: none; width: var(--reveal-width);
  pointer-events: none; visibility: hidden;
}
.site-reveal__layer--base { z-index: var(--layer-base); }
.site-reveal__layer--reveal {
  display: none;
  z-index: var(--layer-reveal);
  overflow: hidden;
  background: var(--color-accent);
  color: var(--color-inverted-foreground);
  clip-path: inset(0 calc(100% - var(--reveal-position) - var(--reveal-width) / 2) 0 calc(var(--reveal-position) - var(--reveal-width) / 2));
  pointer-events: none;
  transition: clip-path var(--transition-duration) var(--ease-out);
}
.site-reveal[data-reveal-instant="true"] .site-reveal__layer--reveal { transition: none; }
.site-reveal[data-reveal-active="true"] { --reveal-width: var(--reveal-axis-width); }

@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .site-reveal__band-probe { display: block; }
  /* grid, not block: the layer has to keep header / hero / footer rows so it
     stays pixel-identical to the base layer underneath the band */
  .site-reveal[data-reveal-enabled="true"] .site-reveal__layer--reveal { display: grid; }
}
/* the axis line previewed inside the band */
@media (min-width: 48rem) {
  .site-reveal__layer--reveal::before {
    position: absolute; top: calc(var(--site-header-height) - 1px); bottom: 0;
    left: calc(var(--site-container-offset) + var(--site-gutter) + var(--hero-work-axis-x));
    z-index: 0; display: block; width: 0;
    border-left: 1px solid var(--color-inverted-line);
    content: ""; opacity: 0; pointer-events: none;
    transition: opacity .18s ease-out;
  }
}
@media (min-width: 75rem) {
  .site-reveal { --hero-work-axis-x: clamp(22rem, calc(var(--site-axis-position-lg) - var(--site-gutter)), calc(var(--site-container-inner-width) - 18rem)); }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  --hero-headline-size: clamp(3.5rem, 20vw, 17rem);
  --hero-section-padding-top: clamp(2rem, min(4.25dvh, 7vw), 3.25rem);
  --hero-section-padding-bottom: clamp(2rem, min(4dvh, 6vw), 2.5rem);
  position: relative;
  display: grid;
  min-height: 0;
  overflow-x: clip;
}
.hero__section {
  z-index: 3;
  display: grid;
  min-height: inherit;
  grid-template-rows: minmax(0, .32fr) auto minmax(0, 1fr) auto;
  padding-block: var(--hero-section-padding-top) var(--hero-section-padding-bottom);
}
.hero__intro { grid-row: 2; min-width: 0; }
.hero__section-label {
  color: var(--color-body);
  font-family: var(--font-mono);
  font-size: .875rem;
  letter-spacing: .06em;
  line-height: 1.2;
}
.hero__headline {
  margin-top: clamp(1rem, min(3.2dvh, 6vw), 2.5rem);
  font-size: var(--hero-headline-size);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .88;
}
.hero__headline-line { display: block; }
.hero__description {
  max-width: 20rem;
  margin-top: clamp(1.25rem, min(2.7dvh, 5vw), 2rem);
  color: var(--color-muted);
  font-size: clamp(1rem, calc(.925rem + .32vw), 1.125rem);
  line-height: 1.56;
}
.hero__bottom { grid-row: 4; display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; }
/* groups the Login button with the DEBUG-only Dev login button underneath it,
   so .hero__bottom's space-between still only ever sees two children (meta +
   this group) and the Login button's position never shifts. */
.hero__actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.hero__meta {
  display: grid; grid-template-columns: .5rem auto; gap: .25rem .75rem; align-items: center;
  color: var(--color-body); font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .06em; line-height: 1.2; text-transform: uppercase;
}
.hero__location { display: contents; }
.hero__meta-marker { display: block; width: .5rem; height: .5rem; background: var(--color-accent); }
.hero__time { grid-column: 2; color: var(--color-muted); }

.site-reveal__layer--reveal .hero__section-label { color: var(--color-inverted-body); }
.site-reveal__layer--reveal .hero__description,
.site-reveal__layer--reveal .hero__meta,
.site-reveal__layer--reveal .hero__time { color: var(--color-inverted-body); }
.site-reveal__layer--reveal .hero__meta-marker { background: var(--color-inverted-foreground); }

/* -------------------------------------------------------------------------
   Line node  [ • ]
   ------------------------------------------------------------------------- */
.line-node {
  --line-node-color: var(--color-faint);
  --line-node-dot-color: var(--color-accent);
  --line-node-dot-size: .5625rem;
  --line-node-bracket-gap: .9375rem;
  position: absolute; display: block; width: 0; height: 0;
  color: var(--line-node-color); pointer-events: none;
  transform: translate(-50%, -50%);
}
.line-node__dot {
  position: absolute; top: 0; left: 0; z-index: 2; display: block;
  width: var(--line-node-dot-size); height: var(--line-node-dot-size);
  background: var(--line-node-dot-color); transform: translate(-50%, -50%);
}
.line-node__bracket {
  position: absolute; top: 0; display: block;
  color: var(--line-node-color); font-family: var(--font-mono); font-size: .875rem;
  line-height: 1; transform: translateY(-50%);
}
.line-node__bracket--left { right: var(--line-node-bracket-gap); }
.line-node__bracket--right { left: var(--line-node-bracket-gap); }

/* -------------------------------------------------------------------------
   Bottom bar
   ------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.125rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-footer::before {
  position: absolute; top: 0; right: var(--site-gutter); left: var(--site-gutter);
  height: 0; border-top: 1px solid var(--color-hairline); content: "";
}
.site-footer__legal,
.site-footer__links { display: flex; gap: 1.25rem; align-items: center; margin: 0; }
.site-footer .site-text-link { border-bottom-color: transparent; }
.site-footer .site-text-link:hover { border-bottom-color: currentColor; opacity: 1; color: var(--color-foreground); }
.site-reveal__layer--reveal .site-footer { color: var(--color-inverted-muted); }
.site-reveal__layer--reveal .site-footer::before { border-top-color: var(--color-inverted-line); }

/* -------------------------------------------------------------------------
   Custom scrollbar
   ------------------------------------------------------------------------- */
.site-scrollbar {
  --site-scrollbar-offset: .5rem;
  --site-scrollbar-hit-area: 1rem;
  --site-scrollbar-thumb-y: 0px;
  --site-scrollbar-thumb-height: 2rem;
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: var(--layer-scrollbar);
  width: var(--site-scrollbar-hit-area);
  opacity: 0; pointer-events: none;
  transform: translate(.125rem);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.site-scrollbar[data-site-scrollbar-visible="true"] { opacity: 1; pointer-events: none; transform: none; }
.site-scrollbar__track {
  position: absolute; top: var(--site-scrollbar-offset); right: 0; bottom: var(--site-scrollbar-offset);
  width: var(--site-scrollbar-hit-area); cursor: pointer; pointer-events: auto;
}
.site-scrollbar__thumb {
  position: absolute; top: 0; right: .25rem;
  width: .1875rem; height: var(--site-scrollbar-thumb-height);
  background: rgba(var(--color-foreground-rgb), .3);
  cursor: grab;
  transform: translate3d(0, var(--site-scrollbar-thumb-y), 0);
  transition: background .18s var(--ease-out), width .18s var(--ease-out);
}
.site-scrollbar__track:hover .site-scrollbar__thumb,
html[data-site-scrollbar-dragging="true"] .site-scrollbar__thumb {
  width: .3125rem; background: rgba(var(--color-foreground-rgb), .55);
}

/* -------------------------------------------------------------------------
   Overlay
   ------------------------------------------------------------------------- */
.site-overlay {
  --overlay-panel-padding: clamp(1.5rem, 3vw, 2.5rem);
  --overlay-panel-width: 25rem;
  --overlay-panel-left: 60%;
  --overlay-axis-left: 60%;
  --overlay-axis-right: 40%;
  position: fixed; inset: 0;
  z-index: var(--layer-overlay);
  pointer-events: none; visibility: hidden;
  transition: visibility 0s linear var(--transition-duration);
}
.site-overlay__backdrop {
  position: absolute; inset: 0; border: 0;
  background: rgba(244, 244, 242, .78);
  opacity: 0; appearance: none; cursor: pointer;
  transition: opacity var(--transition-duration) var(--ease-out);
}
.site-overlay__backdrop:focus { outline: 0; }
.site-overlay__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: grid; width: min(100vw, var(--overlay-panel-width));
  grid-template-rows: auto minmax(auto, 1fr) auto;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-accent); color: var(--color-inverted-foreground);
  transform: translate3d(100%, 0, 0);
  isolation: isolate;
  transition: transform .52s var(--ease-soft);
}
.site-overlay__panel:focus { outline: 0; }
.site-overlay__panel::before { position: absolute; z-index: 0; background: var(--color-accent); content: none; }
.site-overlay__panel > * { position: relative; z-index: 1; }
.site-overlay__panel[data-overlay-panel-active="false"] { opacity: 0; pointer-events: none; visibility: hidden; }

/* axis mode: the panel grows out of the hero band instead of sliding */
.site-overlay[data-overlay-mode="axis"] .site-overlay__panel {
  right: 0; left: 0; width: 100vw; background: transparent;
  transform: none; transition: none;
}
.site-overlay[data-overlay-mode="axis"] .site-overlay__panel::before {
  position: fixed; inset: 0;
  clip-path: inset(0 var(--overlay-axis-right) 0 var(--overlay-axis-left));
  content: "";
  transition: clip-path .52s var(--ease-soft);
}
.site-overlay[data-overlay-mode="axis"] .site-overlay__panel > :not(.site-overlay__header) {
  opacity: 0; transform: translate(.75rem);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
/* the axis panel spans the viewport so its plate can grow out of the band;
   only its children take pointer events, so a click left of the plate falls
   through to the backdrop and dismisses the overlay. */
.site-overlay[data-overlay-mode="axis"] .site-overlay__panel { pointer-events: none; }
.site-overlay[data-overlay-mode="axis"] .site-overlay__panel > * { pointer-events: auto; }
.site-overlay[data-overlay-mode="axis"] .site-overlay__header,
.site-overlay[data-overlay-mode="axis"] .panel,
.site-overlay[data-overlay-mode="axis"] .site-overlay__footer {
  width: auto;
  margin-left: var(--overlay-panel-left);
  padding-left: var(--overlay-panel-padding);
  transition: margin-left .52s var(--ease-soft);
}
.site-overlay[data-overlay-mode="axis"] .site-overlay__header { padding-right: var(--site-gutter); }

.site-overlay__eyebrow, .site-overlay__footer {
  opacity: 0; transition: opacity .22s var(--ease-out);
}
.site-overlay:not([data-overlay-mode="axis"]) .site-overlay__eyebrow,
.site-overlay:not([data-overlay-mode="axis"]) .site-overlay__footer {
  transform: translate(.625rem);
  transition: opacity .22s var(--ease-out), transform .36s var(--ease-soft);
}
.site-overlay[data-overlay-mode="axis"] .site-overlay__eyebrow {
  transform: translate(.75rem);
  transition: opacity .22s var(--ease-out), transform .36s var(--ease-soft);
}
.site-overlay[data-overlay-state="open"],
.site-overlay[data-overlay-phase="opening"] { visibility: visible; transition-delay: 0s; }
.site-overlay[data-overlay-state="open"] { pointer-events: auto; }
.site-overlay[data-overlay-state="open"] .site-overlay__backdrop { opacity: 1; }
.site-overlay[data-overlay-state="open"] .site-overlay__panel { transform: translateZ(0); }
.site-overlay[data-overlay-state="open"] .site-overlay__eyebrow,
.site-overlay[data-overlay-state="open"] .site-overlay__footer { opacity: 1; transition-delay: .14s; }
.site-overlay[data-overlay-state="open"]:not([data-overlay-mode="axis"]) .site-overlay__eyebrow,
.site-overlay[data-overlay-state="open"]:not([data-overlay-mode="axis"]) .site-overlay__footer { transform: none; transition-delay: .26s; }
.site-overlay[data-overlay-state="open"][data-overlay-mode="axis"] .site-overlay__panel::before { clip-path: inset(0 0 0 var(--overlay-panel-left)); }
.site-overlay[data-overlay-state="open"][data-overlay-mode="axis"] .site-overlay__panel > :not(.site-overlay__header) { opacity: 1; transform: none; transition-delay: .3s; }
.site-overlay[data-overlay-state="open"][data-overlay-mode="axis"] .site-overlay__eyebrow { opacity: 1; transform: none; transition-delay: .3s; }

.site-overlay__header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--site-header-height);
  padding-block: var(--site-header-padding-block);
  padding-inline: var(--overlay-panel-padding);
}
.site-overlay__eyebrow {
  display: flex; align-items: center; gap: .625rem;
  color: var(--color-inverted-muted); font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .14em; line-height: 1; text-transform: uppercase;
}
.site-overlay__marker { display: block; width: .5rem; height: .5rem; background: var(--color-inverted-foreground); }
.site-overlay__divider { color: var(--color-inverted-faint); }
.site-overlay__close { color: var(--color-inverted-foreground); }
.site-overlay__close .site-header__menu-marker { color: currentColor; }

.site-overlay__footer {
  display: flex; gap: .625rem; align-items: baseline;
  padding: 1.5rem var(--overlay-panel-padding);
  color: var(--color-inverted-muted);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em;
}

/* -------------------------------------------------------------------------
   Reduced motion / no-JS fallbacks
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-reveal__layer--reveal{ display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 47.999rem) {
  .site-footer { font-size: .625rem; gap: .5rem 1rem; }
}

/* -------------------------------------------------------------------------
   Panel content (Practice / About) — the two "sections", as overlays
   ------------------------------------------------------------------------- */
.site-overlay__panel--wide { --overlay-panel-width: 41rem; }

.panel {
  align-self: center;
  display: grid;
  gap: clamp(1.5rem, 3.4dvh, 2.5rem);
  padding: clamp(1rem, 3dvh, 2rem) var(--overlay-panel-padding);
  min-width: 0;
}
.panel__head { display: grid; gap: .75rem; }
.panel__title {
  color: var(--color-inverted-foreground);
  font-size: clamp(1.375rem, 2.3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
}
.panel__title span { display: block; }
.panel__lede {
  max-width: 26rem;
  color: var(--color-inverted-muted);
  font-size: .9375rem;
  line-height: 1.5;
}

/* --- practice list --- */
.panel__list { display: grid; }
.panel__row {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(.75rem, 1.8dvh, 1.125rem);
  border-top: 1px solid var(--color-inverted-hairline);
}
.panel__row:last-child { border-bottom: 1px solid var(--color-inverted-hairline); }
.panel__chip {
  position: relative;
  display: inline-flex; width: 2.25rem; height: 1.5rem;
  align-items: center; justify-content: center;
  overflow: hidden; isolation: isolate;
  border: 1px solid var(--color-inverted-line);
  color: var(--color-inverted-body);
  font-family: var(--font-mono); font-size: .75rem; line-height: 1;
  transition: border-color .26s var(--ease-soft);
}
.panel__chip > span { position: relative; z-index: 1; }
/* the chip fills top-down on hover, same move the axis rows used */
.panel__chip::before,
.panel__chip::after {
  position: absolute; display: flex; align-items: center; justify-content: center;
  clip-path: inset(0 0 100% 0); pointer-events: none;
  transition: clip-path .26s cubic-bezier(.2, .75, .2, 1);
}
.panel__chip::before { inset: -1px; z-index: 2; content: ""; background: var(--color-inverted-foreground); }
.panel__chip::after {
  inset: 0; z-index: 3; content: attr(data-chip-label);
  color: var(--color-accent); font-weight: 500;
}
.panel__row-body { display: grid; gap: .3125rem; min-width: 0; }
.panel__row-name {
  color: var(--color-inverted-faint);
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  transition: color .22s var(--ease-out);
}
.panel__row-desc {
  color: var(--color-inverted-soft);
  font-size: .875rem; line-height: 1.5;
  opacity: .55;
  transition: opacity .22s var(--ease-out);
}
.panel__row:hover .panel__row-name,
.panel__row:focus-within .panel__row-name { color: var(--color-inverted-foreground); }
.panel__row:hover .panel__row-desc { opacity: 1; }
.panel__row:hover .panel__chip { border-color: var(--color-inverted-foreground); }
.panel__row:hover .panel__chip::before,
.panel__row:hover .panel__chip::after { clip-path: inset(0); }

/* --- practice: surface / system pair --- */
.panel__system { position: relative; display: grid; gap: 1.25rem; padding-top: .25rem; }
.panel__system-node {
  position: relative; top: auto; left: auto;
  --line-node-color: var(--color-inverted-faint);
  --line-node-dot-color: var(--color-inverted-foreground);
  width: 0; height: .5625rem; margin-left: .875rem; transform: none;
}
.panel__system-pair { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 34rem) { .panel__system-pair { grid-template-columns: minmax(0, 1fr); } }
.panel__system-label {
  display: block; color: var(--color-inverted-foreground);
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .14em; line-height: 1.2; text-transform: uppercase;
}
.panel__system-desc {
  display: block; margin-top: .5rem;
  color: var(--color-inverted-soft); font-size: .875rem; line-height: 1.5;
}

/* --- about: the measured line, drawn on open --- */
.panel__measure {
  position: relative;
  padding-left: 4.5rem;
  padding-block: 1.75rem;
  min-height: 15rem;
}
.panel__measure-line {
  position: absolute; top: 0; bottom: 0; left: 1.75rem;
  display: block; width: 0;
  border-left: 1px solid var(--color-inverted-line);
  transform: scaleY(0); transform-origin: top center;
  transition: transform .72s var(--ease-soft) .34s;
}
.panel__endpoint { position: absolute; left: 1.75rem; }
.panel__endpoint--start { top: 0; }
.panel__endpoint--end { bottom: 0; }
.panel__tick {
  position: absolute; top: 0; left: 0; display: block;
  width: .5625rem; height: 0;
  border-top: 1px solid var(--color-inverted-line);
  transform: translate(-50%, -50%) scaleX(0);
  transition: transform .3s var(--ease-soft);
}
.panel__endpoint--start .panel__tick { transition-delay: .38s; }
.panel__endpoint--end .panel__tick { transition-delay: .96s; }
.panel__endpoint-label {
  position: absolute; top: 0; left: 1.5rem;
  color: var(--color-inverted-muted);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .18em; line-height: 1.2;
  white-space: nowrap;
  transform: translateY(-50%);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .42s var(--ease-soft);
}
.panel__endpoint--start .panel__endpoint-label { transition-delay: .44s; }
.panel__endpoint--end .panel__endpoint-label { transition-delay: 1.02s; }
.panel__node { position: absolute; top: 50%; left: 1.75rem; transform: translateY(-50%); }
.panel__node .line-node {
  top: 0; left: 0;
  --line-node-color: var(--color-inverted-faint);
  --line-node-dot-color: var(--color-inverted-foreground);
  opacity: 0;
  transition: opacity .3s var(--ease-out) .72s;
}
.panel__node-body { padding-left: 2.75rem; }
.panel__brand {
  color: var(--color-inverted-foreground);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.05;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .46s var(--ease-soft) .76s;
}
.panel__statement {
  max-width: 21rem; margin-top: .5rem;
  color: var(--color-inverted-body); font-size: .9375rem; line-height: 1.55;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .46s var(--ease-soft) .88s;
}

/* --- staged entrance, driven by the panel becoming active --- */
.panel__row, .panel__system {
  opacity: 0;
  transform: translateX(.75rem);
  transition: opacity .3s var(--ease-out), transform .46s var(--ease-soft);
}
.site-overlay[data-overlay-state="open"] [data-overlay-panel-active="true"] .panel__row,
.site-overlay[data-overlay-state="open"] [data-overlay-panel-active="true"] .panel__system {
  opacity: 1;
  transform: none;
  transition-delay: calc(.34s + var(--i, 0) * .07s);
}
.site-overlay[data-overlay-state="open"] [data-overlay-panel-active="true"] .panel__measure-line { transform: scaleY(1); }
.site-overlay[data-overlay-state="open"] [data-overlay-panel-active="true"] .panel__tick { transform: translate(-50%, -50%) scaleX(1); }
.site-overlay[data-overlay-state="open"] [data-overlay-panel-active="true"] .panel__endpoint-label,
.site-overlay[data-overlay-state="open"] [data-overlay-panel-active="true"] .panel__brand,
.site-overlay[data-overlay-state="open"] [data-overlay-panel-active="true"] .panel__statement { clip-path: inset(0); }
.site-overlay[data-overlay-state="open"] [data-overlay-panel-active="true"] .panel__node .line-node { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .panel__row, .panel__system { opacity: 1; transform: none; }
  .panel__measure-line { transform: scaleY(1); }
  .panel__tick { transform: translate(-50%, -50%) scaleX(1); }
  .panel__endpoint-label, .panel__brand, .panel__statement { clip-path: inset(0); }
  .panel__node .line-node { opacity: 1; }
}

/* -------------------------------------------------------------------------
   Login page — deliberately blank for now, tokens ready for what goes here
   ------------------------------------------------------------------------- */
.login-page {
  min-height: 100svh;
  background: var(--color-background);
  color: var(--color-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .site-button__flip { transition: none; }
}

/* =========================================================================
   App shell — icon rail that widens on hover, plus the work surface
   ========================================================================= */
.app {
  display: flex;
  min-height: 100svh;
  background: var(--color-background);
}
/* The shell is exactly one screen at every size. On desktop that means the
   profile grid is tuned to land inside it and nothing scrolls at all; on a
   phone the chrome — rail, bar, section tabs — holds still and whatever the
   panel cannot fit scrolls underneath it. dvh rather than vh so a mobile
   browser's own bars are counted. */
.login-page { height: 100svh; height: 100dvh; overflow: hidden; }
.app { height: 100%; min-height: 0; }
/* the column right of the rail — the bar lives in here, not above it */
.app__main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
/* the inside page's bar carries no wordmark and no hairline; it is only
   there to hold the height the landing header sets. */
.app__bar {
  min-height: calc(var(--site-header-wordmark-height) + var(--site-header-padding-block) * 2);
  padding-inline: clamp(.75rem, 2.4vw, 2.25rem);
}
.app__bar::after { content: none; }
.app__bar { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }

/* ------------------------------------------------------------ top search */
.app__search { position: relative; display: flex; min-width: 0; max-width: 22rem; flex: 0 1 22rem; align-items: center; }
.app__search-icon {
  position: absolute;
  left: .625rem;
  display: flex;
  color: rgba(var(--color-foreground-rgb), .4);
  pointer-events: none;
}
.app__search-icon svg { width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.app__search input {
  width: 100%;
  padding: .4375rem .75rem .4375rem 2rem;
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-foreground);
  font-family: inherit;
  font-size: .8125rem;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.app__search input::placeholder { color: rgba(var(--color-foreground-rgb), .38); }
.app__search input:hover { border-color: rgba(var(--color-foreground-rgb), .24); }
.app__search input:focus {
  border-color: rgba(var(--color-foreground-rgb), .45);
  background: #fff;
  outline: none;
}
.app__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---- results ---- */
.app__results[hidden] { display: none; }   /* display:flex below would defeat it */
.app__results {
  position: absolute;
  z-index: 40;
  top: calc(100% + .375rem);
  right: 0;
  left: 0;
  display: flex;
  max-height: 17rem;
  margin: 0;
  padding: .25rem;
  flex-direction: column;
  gap: .0625rem;
  border: 1px solid var(--color-hairline);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(var(--color-foreground-rgb), .12);
  list-style: none;
  overflow-y: auto;
}
.app__result {
  display: grid;
  padding: .4375rem .5rem;
  border-radius: .5rem;
  gap: .625rem;
  align-items: center;
  grid-template-columns: 1.625rem minmax(0, 1fr) auto;
  cursor: pointer;
}
.app__result.is-active { background: var(--color-sunken); }
.app__result-avatar {
  display: grid;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-inverted-foreground);
  font-family: var(--font-mono);
  font-size: .5625rem;
  place-items: center;
}
.app__result-text { display: flex; min-width: 0; flex-direction: column; }
.app__result-name { font-size: .8125rem; font-weight: 500; letter-spacing: -.01em; }
.app__result-role {
  color: rgba(var(--color-foreground-rgb), .5);
  font-size: .6875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app__result-id { color: rgba(var(--color-foreground-rgb), .35); font-family: var(--font-mono); font-size: .5625rem; }
.app__result--empty { color: rgba(var(--color-foreground-rgb), .45); cursor: default; font-size: .75rem; grid-template-columns: 1fr; }

/* a metric the record does not carry */
.pv-pos__value--none { color: rgba(var(--color-foreground-rgb), .35); font-weight: 500; }

@media (max-width: 48rem) {
  .app__search { flex-basis: 12rem; }
}
.app__title { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ rail */
.sidebar {
  --sidebar-width: 4rem;
  --sidebar-width-open: 16.5rem;
  --sidebar-pad: .625rem;
  --sidebar-radius: .75rem;
  position: relative;
  z-index: 2;
  display: flex;
  width: var(--sidebar-width);
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .75rem var(--sidebar-pad);
  overflow: hidden;
  border-right: 1px solid var(--color-hairline);
  background: var(--color-background);
  transition: width .38s var(--ease-soft);
}
.sidebar[data-sidebar-open="true"] { width: var(--sidebar-width-open); }
.sidebar__body { display: flex; min-height: 0; flex: 1; flex-direction: column; }

/* ------------------------------------------------------------ brand card */
.sidebar__brand {
  display: flex;
  height: 3rem;
  align-items: center;
  padding-inline: calc(var(--sidebar-pad) - .0625rem);
  border: 1px solid var(--color-hairline);
  border-radius: var(--sidebar-radius);
  background: var(--color-surface);
  color: var(--color-foreground);
  text-decoration: none;
}
/* one element in both states: collapsed it is a square that crops the
   wordmark to its glyph, open it widens and the rest of the logo appears */
.sidebar__brand-mark {
  display: block;
  width: var(--site-header-wordmark-height);
  height: var(--site-header-wordmark-height);
  flex: none;
  background: var(--color-accent);
  -webkit-mask-image: url("./brand/godrej-properties-black.svg");
  mask-image: url("./brand/godrej-properties-black.svg");
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  transition: width .38s var(--ease-soft);
}
.sidebar[data-sidebar-open="true"] .sidebar__brand-mark {
  width: var(--site-header-wordmark-width);
}

/* --------------------------------------------------------- group heading */
.sidebar__section {
  margin: 1.5rem 0 .5rem;
  padding-inline: .625rem;
  color: var(--color-foreground);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- rows */
.sidebar__nav { display: flex; flex-direction: column; gap: .125rem; }
.sidebar__link,
.sidebar__user {
  position: relative;
  display: flex;
  gap: .75rem;
  align-items: center;
  min-width: 0;
  padding: .5625rem .625rem;
  border: 1px solid transparent;
  border-radius: var(--sidebar-radius);
  color: rgba(var(--color-foreground-rgb), .55);
  font-size: .875rem;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.sidebar__link:hover { color: var(--color-foreground); background: var(--color-sunken); }
/* the current page reads as a raised card, the way the reference does */
.sidebar__link[aria-current="page"] {
  border-color: var(--color-hairline);
  background: var(--color-surface);
  color: var(--color-foreground);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(var(--color-foreground-rgb), .06);
}
.sidebar__link:focus-visible,
.sidebar__user:focus-visible,
.sidebar__brand:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.sidebar__icon,
.sidebar__avatar {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  place-items: center;
}
.sidebar__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------- user card */
.sidebar__foot { padding-top: .25rem; }
.sidebar__user {
  height: 3rem;
  padding-inline: calc(var(--sidebar-pad) - .0625rem);
  border-color: var(--color-hairline);
  background: var(--color-surface);
}
.sidebar__user:hover { background: var(--color-sunken); }
.sidebar__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-inverted-foreground);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .04em;
}
.sidebar__user-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .0625rem; }
.sidebar__user-name { color: var(--color-foreground); font-weight: 500; }
.sidebar__user-role { color: rgba(var(--color-foreground-rgb), .5); font-size: .6875rem; }
.sidebar__chev { display: block; width: 1rem; height: 1rem; flex: none; }
.sidebar__chev svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* labels are the thing the width animation is really for */
.sidebar__label {
  display: block;
  min-width: 0;
  opacity: 0;
  transform: translateX(-.375rem);
  transition: opacity .18s var(--ease-out), transform .34s var(--ease-soft);
}
.sidebar[data-sidebar-open="true"] .sidebar__label { opacity: 1; transform: none; }
.sidebar[data-sidebar-open="true"] .sidebar__nav .sidebar__link:nth-child(1) .sidebar__label { transition-delay: .04s; }
.sidebar[data-sidebar-open="true"] .sidebar__nav .sidebar__link:nth-child(2) .sidebar__label { transition-delay: .07s; }
.sidebar[data-sidebar-open="true"] .sidebar__nav .sidebar__link:nth-child(3) .sidebar__label { transition-delay: .10s; }
.sidebar[data-sidebar-open="true"] .sidebar__nav .sidebar__link:nth-child(4) .sidebar__label { transition-delay: .13s; }
.sidebar[data-sidebar-open="true"] .sidebar__nav .sidebar__link:nth-child(5) .sidebar__label { transition-delay: .16s; }

/* admin-only rows: a visibly heavier row (icon goes solid black, background
   stays tinted even at rest) plus a small "Admin" tag, so staff can tell at a
   glance which nav rows nobody else on their team can see */
.sidebar__link--admin { background: var(--color-sunken); }
.sidebar__link--admin:hover { background: rgba(var(--color-accent-rgb), .1); }
.sidebar__link--admin .sidebar__icon { color: var(--color-accent); }
.sidebar__admin-tag {
  display: inline-flex;
  align-items: center;
  margin-left: .5rem;
  padding: .0625rem .375rem;
  border-radius: .25rem;
  background: var(--color-accent);
  color: var(--color-inverted-foreground);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar__close,
.app__mobilebar { display: none; }

/* --------------------------------------------------------- work surface */
.app__content { display: flex; min-width: 0; min-height: 0; flex: 1; }
.dash {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(.75rem, 2.4vw, 2.25rem);
  background: var(--color-surface);
}
.dash__row { display: flex; gap: .5rem; }
.dash__row--fill { flex: 1; min-height: 0; }
.dash__tile { height: 5rem; flex: 1; min-width: 0; background: var(--color-sunken); }
.dash__panel { flex: 1; min-width: 0; background: var(--color-sunken); }
.dash__tile, .dash__panel { animation: app-skeleton-pulse 2.1s cubic-bezier(.4, 0, .6, 1) infinite; }
.dash__row--fill .dash__panel:nth-child(2) { animation-delay: .35s; }
.dash__row .dash__tile:nth-child(2) { animation-delay: .12s; }
.dash__row .dash__tile:nth-child(3) { animation-delay: .24s; }
.dash__row .dash__tile:nth-child(4) { animation-delay: .36s; }
@keyframes app-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* --------------------------------------------------------------- mobile */
@media (max-width: 47.999rem) {
  .app__mobilebar {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--color-hairline);
  }
  .app__mobile-toggle {
    display: inline-flex;
    padding: .375rem;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--layer-overlay);
    width: min(80vw, var(--sidebar-width-open));
    padding: 1.25rem 1.125rem;
    border-right: 1px solid var(--color-hairline);
    transform: translateX(-100%);
    transition: transform .42s var(--ease-soft);
  }
  .sidebar[data-sidebar-open="true"] { width: min(80vw, var(--sidebar-width-open)); transform: none; }
  .app::after {
    position: fixed;
    inset: 0;
    z-index: calc(var(--layer-overlay) - 1);
    background: rgba(var(--color-foreground-rgb), .3);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity .34s var(--ease-out);
  }
  .app[data-sidebar-open="true"]::after { opacity: 1; }
  .sidebar .sidebar__label { opacity: 1; transform: none; }
  .sidebar__close {
    position: absolute;
    top: 1.25rem;
    right: 1rem;
    display: inline-flex;
    padding: .25rem;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar__label, .sidebar__icon { transition: none; }
  .dash__tile, .dash__panel { animation: none; }
}

/* =========================================================================
   Employee profile — card grid over the app surface
   ========================================================================= */
.pv {
  display: grid;
  min-width: 0;
  flex: 1;
  align-content: start;
  gap: .375rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto minmax(0, 1fr);
  --pv-pad: clamp(.5rem, 1vw, .75rem);
  padding: var(--pv-pad);
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.pv-span-3 { grid-column: span 3; }
.pv-span-4 { grid-column: span 4; }
.pv-span-5 { grid-column: span 5; }
.pv-span-6 { grid-column: span 6; }
.pv-span-7 { grid-column: span 7; }
.pv-span-8 { grid-column: span 8; }
.pv-span-9 { grid-column: span 9; }
.pv-span-12 { grid-column: span 12; }
.pv-stack { display: flex; flex-direction: column; gap: .375rem; }
.pv-stack > .pv-card { flex: 1; }

.pv-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(.625rem, 1vw, .875rem);
  border: 1px solid var(--color-hairline);
  border-radius: .875rem;
  background: #fff;
}
.pv-card__head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .625rem;
}
.pv-card__meta { margin: 0; color: rgba(var(--color-foreground-rgb), .5); font-size: .75rem; }

/* the mono micro-label the reference leans on everywhere */
.pv-label,
.pv-eyebrow {
  margin: 0;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pv-eyebrow { color: rgba(var(--color-foreground-rgb), .55); }
.pv-lede .pv-eyebrow { color: rgba(var(--color-accent-foreground-rgb), .55); }
.pv-note {
  margin: auto 0 0;
  padding-top: .5rem;
  color: rgba(var(--color-foreground-rgb), .45);
  font-size: .75rem;
}
.pv-foot { margin: 0; color: rgba(var(--color-foreground-rgb), .4); font-size: .75rem; }
.pv-chip {
  display: inline-block;
  padding: .1875rem .5rem;
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- identity */
.pv-card--identity { flex-direction: row; gap: 1.25rem; align-items: center; justify-content: space-between; padding-block: .5rem; flex-wrap: wrap; }
.pv-id { display: flex; gap: .75rem; align-items: center; }
.pv-id__avatar {
  display: grid;
  width: 2.375rem;
  height: 2.375rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-inverted-foreground);
  font-family: var(--font-mono);
  font-size: .875rem;
  letter-spacing: .06em;
}
.pv-id__name { margin: .125rem 0 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.pv-id__role { margin: .0625rem 0 0; color: rgba(var(--color-foreground-rgb), .55); font-size: .75rem; }
.pv-id__facts { display: flex; margin: 0 2.25rem 0 0; gap: clamp(1.25rem, 2.2vw, 2rem); flex-wrap: wrap; }
.pv-id__facts dt {
  color: rgba(var(--color-foreground-rgb), .45);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pv-id__facts dd { margin: .1875rem 0 0; font-size: .78125rem; font-weight: 500; }

/* ---------------------------------------------------------- stat tiles */
.pv-stat__value {
  margin: .625rem 0 0;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}
.pv-stat__value--word { font-size: 1.375rem; letter-spacing: -.02em; }
.pv-stat__unit { margin-left: .3125rem; color: rgba(var(--color-foreground-rgb), .4); font-size: .875rem; font-weight: 400; letter-spacing: 0; }
.pv-stat__foot { margin: auto 0 0; padding-top: .375rem; color: rgba(var(--color-foreground-rgb), .5); font-size: .75rem; }
.pv-delta {
  margin-right: .375rem;
  padding: .0625rem .3125rem;
  border-radius: .25rem;
  background: var(--color-sunken);
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .06em;
}

/* -------------------------------------------------------------- columns */
/* A column per cycle, height against the 1-5 scale, grown on load like every
   other bar on the page. */
.pv-step {
  display: flex;
  max-height: 30rem;
  margin-block: auto;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  flex: 1;
  /* stretch, not flex-end: the column has to have a height for the bar's
     percentage to resolve against */
  align-items: stretch;
  justify-content: space-evenly;
}
.pv-step__col { display: flex; min-width: 0; max-width: 6.5rem; flex: 1; flex-direction: column; }
/* the score rides just above its own column, so the labels step with the data */
.pv-step__plot {
  display: flex;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(var(--color-foreground-rgb), .12);
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
}
.pv-step__bar {
  height: calc(var(--v) * (100% - 2.25rem) / 5);
  min-height: .25rem;
  border-radius: .25rem .25rem 0 0;
  background: rgba(var(--color-foreground-rgb), .26);
  animation: pv-rise .85s var(--ease-soft) both;
}
/* the cycle in flight carries the solid column */
.pv-step__col.is-now .pv-step__bar { background: var(--color-accent); }
@keyframes pv-rise { from { height: 0; } }
.pv-step__v {
  margin: 0 0 .5rem;
  color: rgba(var(--color-foreground-rgb), .4);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  text-align: center;
}
.pv-step__col.is-now .pv-step__v { color: var(--color-foreground); }
.pv-step__k {
  margin: .625rem 0 0;
  color: rgba(var(--color-foreground-rgb), .42);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .06em;
  text-align: center;
}
.pv-step__col.is-now .pv-step__k { color: var(--color-foreground); }
@media (prefers-reduced-motion: reduce) {
  .pv-step__bar { animation: none; }
}

/* ---- what each point on the scale is called, and who is sitting on it ---- */
.pv-scale { display: flex; margin: 0; padding: 0; flex: 1; flex-direction: column; justify-content: center; gap: .25rem; list-style: none; }
.pv-scale li {
  display: grid;
  padding: .4375rem .75rem;
  gap: .75rem;
  align-items: center;
  border-radius: .5rem;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  color: rgba(var(--color-foreground-rgb), .4);
}
.pv-scale li.is-held { background: var(--color-sunken); color: var(--color-foreground); }
.pv-scale__n { font-family: var(--font-mono); font-size: .875rem; font-weight: 500; text-align: center; }
.pv-scale__name { font-size: .8125rem; letter-spacing: -.01em; }
.pv-scale__at { display: flex; gap: .25rem; }
.pv-scale__at b {
  padding: .1875rem .375rem;
  border: 1px solid var(--color-hairline);
  border-radius: .25rem;
  color: rgba(var(--color-foreground-rgb), .6);
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-weight: 400;
  letter-spacing: .06em;
}
.pv-scale__at b.is-now { border-color: transparent; background: var(--color-accent); color: var(--color-inverted-foreground); }

.pv-bars { display: flex; height: var(--chart-h); gap: .5rem; align-items: flex-end; }
.pv-bar { display: flex; min-width: 0; flex: 1; flex-direction: column; height: 100%; justify-content: flex-end; text-align: center; }
.pv-bar__value { order: 1; font-size: .8125rem; font-weight: 500; }
.pv-bar__fill {
  order: 2;
  width: 100%;
  max-width: 5rem;
  height: var(--h);
  margin-top: .375rem;
  margin-inline: auto;
  border-radius: .25rem .25rem 0 0;
  background: var(--color-sunken);
  transition: height .5s var(--ease-soft);
}
.pv-bar__key {
  order: 3;
  padding-top: .5rem;
  border-top: 1px solid var(--color-hairline);
  color: rgba(var(--color-foreground-rgb), .45);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .06em;
}
/* the cycle in focus is the only black column, as in the reference */
.pv-bar--now .pv-bar__fill { background: var(--color-accent); }
.pv-bar--now .pv-bar__key { color: var(--color-foreground); }
.pv-bar--na .pv-bar__value { color: rgba(var(--color-foreground-rgb), .3); }
.pv-bar--na .pv-bar__fill {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--color-hairline) 0 3px, transparent 3px 6px);
}

/* --------------------------------------------------------- 360 pillars */
.pv-pillars { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-pillar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-hairline);
}
.pv-pillar__name { margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: -.01em; }
.pv-pillar__score { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.pv-gcf { display: flex; margin: .625rem 0 0; padding: 0; flex-direction: column; gap: .4375rem; list-style: none; }
.pv-gcf li { display: grid; gap: .5rem; align-items: center; grid-template-columns: 1fr auto auto; }
.pv-gcf__name { min-width: 0; color: rgba(var(--color-foreground-rgb), .65); font-size: .75rem; }
.pv-gcf__val { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; }

/* five dots, filled to --n — the dot-matrix idiom from the reference */
.pv-meter { display: flex; gap: .1875rem; }
.pv-meter i { width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--color-sunken); }
.pv-meter[style*="--n:1"] i:nth-child(-n+1),
.pv-meter[style*="--n:2"] i:nth-child(-n+2),
.pv-meter[style*="--n:3"] i:nth-child(-n+3),
.pv-meter[style*="--n:4"] i:nth-child(-n+4),
.pv-meter[style*="--n:5"] i:nth-child(-n+5) { background: var(--color-accent); }

.pv-sub {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-hairline);
  flex-wrap: wrap;
}
.pv-sub__value { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.pv-sub__meta { margin: 0 0 0 auto; color: rgba(var(--color-foreground-rgb), .45); font-size: .75rem; }

/* ------------------------------------------------------- ordinal scales */
.pv-scale-list { display: flex; margin: 0; padding: 0; flex-direction: column; gap: .875rem; list-style: none; }
/* one nomination in a full-height card sits centred, not pinned to the top */
[data-pot-centre] .pv-scale-list { margin-block: auto; }
.pv-scale-list__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .375rem; }
.pv-year { color: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; }
.pv-verdict { font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; }
.pv-scale { display: flex; gap: .1875rem; }
.pv-scale i { height: .3125rem; flex: 1; border-radius: 999px; background: var(--color-sunken); }
.pv-scale[style*="--n:1"] i:nth-child(-n+1),
.pv-scale[style*="--n:2"] i:nth-child(-n+2),
.pv-scale[style*="--n:3"] i:nth-child(-n+3),
.pv-scale[style*="--n:4"] i:nth-child(-n+4),
.pv-scale[style*="--n:5"] i:nth-child(-n+5) { background: var(--color-accent); }
.pv-scale__legend {
  margin: .375rem 0 0;
  color: rgba(var(--color-foreground-rgb), .4);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ TWR */
.pv-twr { display: flex; flex-direction: column; gap: 1.25rem; }
.pv-twr__key { margin: 0 0 .375rem; color: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }
.pv-twr__val { margin: 0 0 .625rem; font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }

/* --------------------------------------------------------- recognitions */
.pv-awards { display: grid; gap: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-award {
  padding: .5rem;
  border: 1px solid var(--color-hairline);
  border-radius: .625rem;
  background: var(--color-background);
  text-align: center;
}
.pv-award__count { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.pv-award__name { margin: .25rem 0 0; color: rgba(var(--color-foreground-rgb), .5); font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }
.pv-award--empty { opacity: .45; }
.pv-timeline { display: flex; margin: 1rem 0 0; padding: 0; flex-direction: column; list-style: none; }
.pv-timeline li {
  display: grid;
  gap: .75rem;
  align-items: center;
  padding: .3125rem 0;
  border-top: 1px solid var(--color-hairline);
  grid-template-columns: 4.5rem 1fr auto;
}
.pv-timeline__tag { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }
.pv-timeline__text { min-width: 0; color: rgba(var(--color-foreground-rgb), .65); font-size: .8125rem; }
.pv-timeline__year { color: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: .625rem; }

/* ---------------------------------------------------------- breadcrumb */
.crumb { display: flex; gap: .5rem; align-items: center; font-size: .875rem; }
.crumb a { color: rgba(var(--color-foreground-rgb), .5); text-decoration: none; transition: color .2s var(--ease-out); }
.crumb a:hover { color: var(--color-foreground); }
.crumb__sep { color: rgba(var(--color-foreground-rgb), .3); }
.crumb__here { font-weight: 600; letter-spacing: -.01em; }

@media (max-width: 68rem) {
  .pv-span-3 { grid-column: span 6; }
  .pv-span-4, .pv-span-5, .pv-span-7, .pv-span-8 { grid-column: span 12; }
  .pv-pillars { grid-template-columns: 1fr; }
  .pv-card--identity { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 40rem) {
  .pv-span-3 { grid-column: span 12; }
  .pv-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- tabs */
.pv-tabs { margin-top: 0; }
.pv-tabs__list {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-hairline);
  scrollbar-width: none;
}
.pv-tabs__list::-webkit-scrollbar { display: none; }
.pv-tab {
  position: relative;
  padding: .5rem .75rem;
  border: 0;
  margin-bottom: -1px;
  background: transparent;
  color: rgba(var(--color-foreground-rgb), .5);
  font: inherit;
  font-size: .8125rem;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s var(--ease-out);
}
.pv-tab:hover { color: var(--color-foreground); }
.pv-tab::after {
  position: absolute;
  right: .75rem;
  bottom: 0;
  left: .75rem;
  height: 1.5px;
  background: var(--color-accent);
  content: "";
  transform: scaleX(0);
  transition: transform .28s var(--ease-soft);
}
.pv-tab[aria-selected="true"] { color: var(--color-foreground); font-weight: 600; }
.pv-tab[aria-selected="true"]::after { transform: scaleX(1); }
.pv-tab:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* each panel re-opens the 12-column grid the cards are written against */
.pv-panel[hidden] { display: none; }
.pv-panel { min-height: 0; }
.pv-panel > .pv-grid {
  min-height: 100%;
  align-content: stretch;
  /* the lede sizes to its content; the card rows below absorb the slack */
  grid-template-rows: min-content;
  grid-auto-rows: auto;
}
.pv-grid { display: grid; gap: .1875rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pv-panel:not([hidden]) { animation: pv-panel-in .32s var(--ease-out) both; }
@keyframes pv-panel-in { from { opacity: 0; transform: translateY(.375rem); } to { opacity: 1; transform: none; } }

/* --------------------------------------------- in tune, cycle by cycle */
.pv-cycles { display: flex; flex-direction: column; gap: .5rem; }
.pv-cycle {
  padding: .875rem 1rem;
  border: 1px solid var(--color-hairline);
  border-radius: .625rem;
  background: var(--color-background);
}
.pv-cycle__year { margin: 0; color: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }
.pv-cycle__value { margin: .375rem 0 0; font-size: 1.625rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.pv-cycle__meta { margin: .4375rem 0 0; color: rgba(var(--color-foreground-rgb), .45); font-size: .75rem; }
/* an unpublished cycle is a placeholder, not a low score */
.pv-cycle--pending { border-style: dashed; background: transparent; }
.pv-cycle--pending .pv-cycle__value { color: rgba(var(--color-foreground-rgb), .35); font-size: 1.125rem; font-weight: 500; }

/* ------------------------------------------------------ key/value list */
.pv-kv { display: flex; margin: 0; padding: 0; flex-direction: column; list-style: none; }
.pv-kv li {
  display: grid;
  gap: .75rem;
  align-items: baseline;
  padding: .625rem 0;
  border-top: 1px solid var(--color-hairline);
  grid-template-columns: 1fr auto auto;
}
.pv-kv li:first-child { border-top: 0; padding-top: 0; }
.pv-kv span { color: rgba(var(--color-foreground-rgb), .55); font-size: .8125rem; }
.pv-kv strong { font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; }
.pv-kv em { color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .625rem; font-style: normal; }

.pv-gcf--summary li { grid-template-columns: 1fr auto auto; padding: .5rem 0; border-top: 1px solid var(--color-hairline); }
.pv-gcf--summary li:first-child { border-top: 0; }
.pv-gcf--summary .pv-gcf__name { color: var(--color-foreground); font-size: .8125rem; font-weight: 500; }

@media (max-width: 68rem) {
  .pv-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* =========================================================================
   Overview — the summary is meant to be read, not just scanned
   ========================================================================= */
.pv-card { transition: border-color .24s var(--ease-out), box-shadow .24s var(--ease-out); }
.pv-card:hover { border-color: rgba(var(--color-foreground-rgb), .28); box-shadow: 0 1px 3px rgba(var(--color-foreground-rgb), .05); }

/* ------------------------------------------------------------ the lede */
.pv-lede {
  padding: clamp(1.25rem, 2vw, 1.875rem) clamp(1.25rem, 2.2vw, 2rem);
  flex-direction: row;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  justify-content: space-between;
  border-color: transparent;
  background: var(--color-accent);
  color: var(--color-inverted-foreground);
  flex-wrap: wrap;
}
.pv-lede:hover { border-color: transparent; }
/* the whole card toggles */
.pv-lede[data-collapsible] { cursor: pointer; }
.pv-lede[data-collapsible] .pv-lede__body { cursor: text; }
.pv-lede .pv-eyebrow { color: rgba(var(--color-accent-foreground-rgb), .55); }
.pv-lede__text { min-width: 0; max-width: 64rem; flex: 1; }
.pv-lede__title { margin: .3125rem 0 0; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.pv-lede__body { margin: .5rem 0 0; color: rgba(var(--color-accent-foreground-rgb), .58); font-size: .8125rem; line-height: 1.7; }
.pv-lede__body strong { color: var(--color-inverted-foreground); font-weight: 600; }

/* ---------------------------------------------------------- half-dial */
.pv-dials { display: flex; gap: 1.25rem; flex: none; align-items: flex-end; }
.pv-dial { position: relative; width: 8.5rem; margin: 0; text-align: center; }
/* on the lede band, matched to the overview tile so the two read the same */
.pv-dial--lede { width: 6rem; }
.pv-dial--lede .pv-dial__value { bottom: 23%; font-size: 1.3125rem; }
/* 4.17 is twice the glyphs of 4 — smaller type keeps it clear of the arc */
.pv-dial--precise { width: 7rem; }
/* the pillars sit a size under the overall, so the hierarchy still reads */
.pv-dial--sm { width: 5.25rem; }
.pv-dial--sm .pv-dial__value { bottom: 20%; font-size: .9375rem; }
.pv-dial--sm .pv-dial__unit { margin-left: .125rem; font-size: .5rem; }
.pv-dial--precise .pv-dial__value { bottom: 21%; font-size: 1.1875rem; letter-spacing: -.02em; }
.pv-dial--precise .pv-dial__unit { margin-left: .1875rem; font-size: .5625rem; }
.pv-dial--lede .pv-dial__unit { margin-left: .125rem; color: rgba(var(--color-accent-foreground-rgb), .5); font-size: .6875rem; }
.pv-pillarset__item--dial .pv-pillarset__k { margin-top: .1875rem; }
.pv-dial__gauge { position: relative; }
.pv-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.pv-dial__track,
.pv-dial__fill { fill: none; stroke-linecap: round; stroke-width: 8; }
.pv-dial__track { stroke: rgba(var(--color-accent-foreground-rgb), .18); }
/* --off is the dash offset for this value: 188.5 x (1 - score/5) */
.pv-dial__fill {
  stroke: var(--color-inverted-foreground);
  stroke-dasharray: 188.5;
  stroke-dashoffset: 188.5;
  animation: pv-dial 1.1s var(--ease-soft) .15s forwards;
}
@keyframes pv-dial { to { stroke-dashoffset: var(--off); } }
.pv-dial__value { position: absolute; right: 0; bottom: 16%; left: 0; margin: 0; font-size: 1.625rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pv-dial__key { margin: .625rem 0 0; color: rgba(var(--color-accent-foreground-rgb), .5); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .09em; text-transform: uppercase; }

/* ---------------------------------------------------- tiles with spark */
.pv-stat__top { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.pv-stat__row { display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 1.125rem; }
.pv-stat__figure { min-width: 0; }
.pv-stat__figure .pv-stat__value { margin: 0; }
.pv-stat__figure .pv-stat__foot { margin: .625rem 0 0; padding-top: 0; }
.pv-stat { min-height: 0; padding: clamp(.75rem, 1vw, .9375rem); }
.pv-spark { display: flex; height: 1.5rem; gap: .1875rem; align-items: flex-end; }
.pv-spark i { width: .3125rem; height: var(--h); border-radius: .0625rem; background: rgba(var(--color-foreground-rgb), .22); }
.pv-spark i:last-child { background: var(--color-accent); }
.pv-spark i.is-empty { background: repeating-linear-gradient(180deg, var(--color-hairline) 0 2px, transparent 2px 4px); }
.pv-trend {
  margin-right: .375rem;
  padding: .0625rem .3125rem;
  border-radius: .25rem;
  background: var(--color-sunken);
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .04em;
}
.pv-trend--up { background: var(--color-accent); color: var(--color-inverted-foreground); }
.pv-trend--flat { border: 1px solid var(--color-hairline); background: transparent; color: rgba(var(--color-foreground-rgb), .55); }

/* ------------------------------------------------------ trajectory map */
/* the matrix fills the card, so its rows share the height evenly instead of
   bunching at the top when the card stretches */
.pv-matrix { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: .25rem; }
.pv-matrix__row { flex: 1; max-height: 2.25rem; }
.pv-matrix__row--head { flex: 0 0 auto; }
.pv-matrix__row { display: grid; gap: .25rem; align-items: center; grid-template-columns: 8.5rem repeat(3, minmax(0, 1fr)); }
.pv-matrix__key { color: rgba(var(--color-foreground-rgb), .6); font-size: .75rem; }
.pv-matrix__yr,
.pv-matrix__row--head .pv-matrix__key {
  color: rgba(var(--color-foreground-rgb), .68);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-align: center;
}
.pv-matrix__yr--now { color: var(--color-foreground); }
.pv-cell {
  display: grid;
  min-height: 1.375rem;
  height: 100%;
  place-items: center;
  border-radius: .375rem;
  /* one lever drives the heat: --v is the normalised result */
  background: rgba(var(--color-foreground-rgb), calc(var(--v, 0) * var(--v, 0) * var(--v, 0) * .28));
  font-size: .75rem;
  font-weight: 500;
  transition: background-color .24s var(--ease-out);
}
.pv-cell--na { background: transparent; color: rgba(var(--color-foreground-rgb), .28); }
.pv-cell--open {
  border: 1px dashed var(--color-hairline);
  background: transparent;
  color: rgba(var(--color-foreground-rgb), .4);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pv-cell--dots { background: transparent; }
/* the programme was not running that cycle — out of scope, not a miss */
.pv-cell--off {
  background: transparent;
  color: rgba(var(--color-foreground-rgb), .22);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pv-cell--void {
  background: repeating-linear-gradient(135deg, rgba(var(--color-foreground-rgb), .05) 0 4px, transparent 4px 8px);
  color: rgba(var(--color-foreground-rgb), .3);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pv-matrix__yr--void { color: rgba(var(--color-foreground-rgb), .25); }
.pv-cell--dots i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--color-accent); }

/* ------------------------------------------------------ capability edges */
.pv-edge__label {
  margin: 0 0 .375rem;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}
/* the second group gets its own rule so the two never blur together */
.pv-edge__label--split {
  margin-top: .625rem;
  padding-top: .5rem;
  border-top: 1px solid var(--color-hairline);
}
.pv-edge--low .pv-edge__name { color: rgba(var(--color-foreground-rgb), .55); }
.pv-edge__label + .pv-edge { margin-bottom: .5rem; }
.pv-edge { display: flex; margin: 0; padding: 0; flex-direction: column; gap: .25rem; list-style: none; }
.pv-edge li { display: grid; gap: .625rem; align-items: center; grid-template-columns: 1fr 3.5rem auto; }
.pv-edge__name { min-width: 0; font-size: .75rem; }
.pv-edge__bar { position: relative; height: .375rem; border-radius: 999px; background: var(--color-sunken); overflow: hidden; }
.pv-edge__bar::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: var(--color-accent);
  content: "";
}
.pv-edge--low .pv-edge__bar::after { background: rgba(var(--color-foreground-rgb), .3); }
.pv-edge__val { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; }

/* --------------------------------------------------------- step ladder */
.pv-target { margin: 0 0 1.25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.pv-steps { display: flex; margin: 0; padding: 0; flex-direction: column; gap: 0; list-style: none; counter-reset: step; }
.pv-steps li {
  position: relative;
  display: grid;
  gap: .75rem;
  align-items: center;
  padding: .375rem 0;
  grid-template-columns: .75rem 1fr auto;
  color: rgba(var(--color-foreground-rgb), .35);
  font-size: .8125rem;
}
/* the rail that joins the rungs */
.pv-steps li:not(:last-child)::before {
  position: absolute;
  top: 1.5rem;
  left: .3125rem;
  width: 1px;
  height: calc(100% - .75rem);
  background: var(--color-hairline);
  content: "";
}
.pv-steps__dot { width: .625rem; height: .625rem; border: 1.5px solid var(--color-hairline); border-radius: 50%; background: var(--color-surface); }
.pv-steps li.is-done { color: rgba(var(--color-foreground-rgb), .55); }
.pv-steps li.is-done .pv-steps__dot { border-color: var(--color-accent); background: var(--color-accent); }
.pv-steps li.is-now { color: var(--color-foreground); font-weight: 600; }
.pv-steps li.is-now .pv-steps__dot { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(var(--color-foreground-rgb), .12); }
.pv-steps__yr { color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .625rem; }

/* -------------------------------------------------------------- signals */
.pv-signals { display: flex; margin: 0; padding: 0; flex-direction: column; gap: .75rem; list-style: none; }
.pv-signals li { display: grid; gap: .625rem; grid-template-columns: .875rem 1fr; color: rgba(var(--color-foreground-rgb), .7); font-size: .8125rem; line-height: 1.45; }
.pv-signals__mark { color: var(--color-foreground); font-size: .5625rem; line-height: 1.9; }
.pv-signals__mark--flat { color: rgba(var(--color-foreground-rgb), .3); }

/* --------------------------------------------------------- award rows */
.pv-awardbars { display: flex; margin: 0; padding: 0; flex-direction: column; gap: .75rem; list-style: none; }
.pv-awardbars li { display: grid; gap: .5rem; align-items: center; grid-template-columns: 1fr auto auto; }
.pv-awardbars__name { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }
.pv-awardbars__dots { display: flex; gap: .1875rem; }
.pv-awardbars__dots i { width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-sunken); }
.pv-awardbars__dots i.on { background: var(--color-accent); }
.pv-awardbars__n { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; }
.pv-awardbars .is-empty { opacity: .4; }

@media (prefers-reduced-motion: reduce) {
  .pv-gauge__fill { animation: none; stroke-dashoffset: 33.9; }
  .pv-panel:not([hidden]) { animation: none; }
}

/* ------------------------------------------------- signals, promoted */
.pv-lede--split { align-items: center; }
.pv-signals--lede {
  display: grid;
  gap: .5rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 22rem;
  flex: 1;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid rgba(var(--color-accent-foreground-rgb), .16);
}
.pv-signals--lede li { color: rgba(var(--color-accent-foreground-rgb), .62); font-size: .8125rem; }
.pv-signals--lede strong { color: var(--color-inverted-foreground); font-weight: 600; }
.pv-signals--lede .pv-signals__mark { color: var(--color-inverted-foreground); }
.pv-signals--lede .pv-signals__mark--flat { color: rgba(var(--color-accent-foreground-rgb), .35); }

/* three headline figures riding the dark band */
.pv-pillarset { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); flex: none; align-items: flex-end; }
.pv-pillarset__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pv-pillarset__v { margin: .4375rem 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pv-pillarset__k { margin: .375rem 0 0; color: rgba(var(--color-accent-foreground-rgb), .5); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .09em; text-transform: uppercase; }

/* ------------------------------------------------------- readout strip */
.pv-readout { display: flex; margin: 1rem 0 0; padding: .875rem 0 0; border-top: 1px solid var(--color-hairline); gap: 2rem; list-style: none; flex-wrap: wrap; }
.pv-readout li { display: flex; flex-direction: column; gap: .25rem; }
.pv-readout span { color: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; }
.pv-readout strong { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
/* not .pv-trend — that is the overview's pill chip */
.pv-shift { display: inline-flex; gap: .4375rem; align-items: center; }
.pv-overall__v--none { color: rgba(var(--color-foreground-rgb), .4); font-size: 1.125rem; }

/* --------------------------------------------------- ranked factor list */
.pv-rank { display: flex; margin: 0; padding: 0; flex-direction: column; gap: .25rem; list-style: none; }
.pv-rank li { display: grid; gap: .625rem; align-items: center; grid-template-columns: 1.5rem 10rem 1fr 2rem; line-height: 1.35; }
.pv-rank__tag { color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em; }
.pv-rank__name { min-width: 0; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-rank__bar { position: relative; height: .5rem; border-radius: 999px; background: var(--color-sunken); overflow: hidden; }
.pv-rank__bar::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: var(--color-accent);
  content: "";
  animation: pv-grow .7s var(--ease-soft) both;
}
@keyframes pv-grow { from { width: 0; } }
.pv-rank li:nth-child(n + 9) .pv-rank__bar::after { background: rgba(var(--color-foreground-rgb), .3); }
.pv-rank__val { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; text-align: right; }

/* --------------------------------------------------- rater comparison */
.pv-compare { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-compare__v { margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pv-compare__k { margin: .3125rem 0 .625rem; font-size: .75rem; }
.pv-compare__bar { position: relative; display: block; height: .375rem; border-radius: 999px; background: var(--color-sunken); overflow: hidden; }
.pv-compare__bar::after { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--color-accent); content: ""; animation: pv-grow .7s var(--ease-soft) both; }
.pv-compare__m { margin: .4375rem 0 0; color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .07em; text-transform: uppercase; }
.pv-compare__item--muted .pv-compare__v { color: rgba(var(--color-foreground-rgb), .5); }
.pv-compare__item--muted .pv-compare__bar::after { background: rgba(var(--color-foreground-rgb), .3); }

/* ------------------------------------------------------- pillar spread */
.pv-spread { display: flex; margin: 0; padding: 0; flex-direction: column; gap: .875rem; list-style: none; }
.pv-spread li { display: grid; gap: .625rem; align-items: center; grid-template-columns: 7rem 1fr 3.25rem; }
.pv-spread__k { font-size: .75rem; }
.pv-spread__track { position: relative; height: .375rem; border-radius: 999px; background: var(--color-sunken); }
.pv-spread__band { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 999px; background: var(--color-accent); }
.pv-spread__v { color: rgba(var(--color-foreground-rgb), .55); font-family: var(--font-mono); font-size: .6875rem; text-align: right; }

/* ---------------------------------------------------------- slope chart */
/* the viewBox is 320 units across with 8px type inside it, so letting the svg
   fill a 800px card scaled every label and dot by 2.5x. Cap it and centre,
   then let the chart sit in the middle of whatever height the row hands it. */
.pv-slope { display: flex; flex: 1; align-items: center; }
.pv-slope svg { display: block; width: 100%; max-width: 19rem; height: auto; margin-inline: auto; }
.pv-slope__grid line { stroke: var(--color-hairline); stroke-width: 1; stroke-dasharray: 2 4; }
.pv-slope__band text { fill: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-anchor: end; text-transform: uppercase; }
.pv-slope__yr text { fill: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-anchor: middle; }
.pv-slope__line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: pv-slope 1s var(--ease-soft) .1s forwards;
}
@keyframes pv-slope { to { stroke-dashoffset: 0; } }
.pv-slope__dot { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 1.75; }
.pv-slope__dot--now { fill: var(--color-accent); }

.pv-matrix--awards .pv-matrix__row { grid-template-columns: 5rem repeat(5, minmax(0, 1fr)); }

@media (max-width: 68rem) {
  .pv-signals--lede { min-width: 0; padding-left: 0; border-left: 0; grid-template-columns: 1fr; }
  .pv-dials, .pv-pillarset { width: 100%; justify-content: space-between; }
  .pv-rank li { grid-template-columns: 1.5rem 8rem 1fr 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-dial__fill { animation: none; stroke-dashoffset: var(--off); }
  .pv-slope__line { animation: none; stroke-dashoffset: 0; }
  .pv-rank__bar::after, .pv-compare__bar::after { animation: none; }
}

/* ------------------------------------------------------- mini dial */
/* same dial as the performance tab, sized for a quarter-width tile */
.pv-dial--card { position: relative; width: 100%; max-width: 7.5rem; margin: auto; text-align: center; }
.pv-dial--card svg { display: block; width: 100%; height: auto; }
.pv-dial--card .pv-dial__track { stroke: rgba(var(--color-foreground-rgb), .13); stroke-width: 8; }
.pv-dial--card .pv-dial__fill { stroke: var(--color-accent); stroke-width: 8; }
.pv-dial--card .pv-dial__value {
  bottom: 20%;
  font-size: 1.625rem;
  line-height: 1;
}
.pv-dial--card .pv-dial__unit { margin-left: .1875rem; font-size: .8125rem; }
.pv-dial__unit { margin-left: .1875rem; color: rgba(var(--color-foreground-rgb), .4); font-size: .875rem; font-weight: 400; letter-spacing: 0; }

/* ordinal tiles: position along the scale,each label under its own segment */
/* the grade ladder: held steps solid, the tracked one pending */
.pv-ladder {
  --step-gap: .875rem;
  display: flex;
  margin-block: auto;                                /* centred, not shoved to the foot */
  padding: .75rem 0 0;
  flex-direction: column;
  gap: var(--step-gap);
  list-style: none;
}
.pv-ladder li {
  position: relative;
  display: grid;
  padding-left: 1.125rem;
  gap: 0 .625rem;
  align-items: baseline;
  grid-template-areas: "grade since";
  grid-template-columns: minmax(0, 1fr) auto;
}
/* the rail linking one grade to the next */
.pv-ladder li::before {
  position: absolute;
  top: .875rem;
  bottom: calc(var(--step-gap) * -1);
  left: .1875rem;
  width: 1px;
  background: var(--color-hairline);
  content: "";
}
.pv-ladder li:last-child::before { display: none; }

/* laid across, and scrollable: a long career can carry more grades than the
   card is wide, so the row scrolls rather than crushing them together */
.pv-ladder--flow { flex-direction: row; gap: 0; margin-block: auto; min-height: 0; overflow-x: auto; overflow-y: hidden; }
.pv-ladder--flow li {
  position: relative;
  display: flex;
  min-width: 7rem;
  padding: 1.125rem 0 0;
  gap: .1875rem;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* the rail joins each dot to the one before it, so it travels with a scroll */
.pv-ladder--flow li::before {
  position: absolute;
  top: .1875rem;
  right: 50%;
  bottom: auto;
  left: auto;
  width: 100%;
  height: 1px;
  background: var(--color-hairline);
  content: "";
}
/* the vertical rule hides the last rung's rail; across, it is the first
   rung that has nothing behind it */
.pv-ladder--flow li:last-child::before { display: block; }
.pv-ladder--flow li:first-child::before { display: none; }
.pv-ladder--flow::-webkit-scrollbar { height: 3px; }
.pv-ladder--flow::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--color-hairline); }
.pv-ladder--flow .pv-ladder__dot { top: 0; left: 50%; transform: translateX(-50%); }
.pv-ladder--flow .pv-ladder__grade,
.pv-ladder--flow .pv-ladder__since { grid-area: auto; }
.pv-ladder__dot {
  position: absolute;
  top: .3125rem;
  left: 0;
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  background: rgba(var(--color-foreground-rgb), .25);
}
.pv-ladder__grade { grid-area: grade; color: rgba(var(--color-foreground-rgb), .55); font-size: .8125rem; }
.pv-ladder__since { grid-area: since; color: rgba(var(--color-foreground-rgb), .38); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em; }
.pv-ladder .is-now .pv-ladder__dot { background: var(--color-accent); }
.pv-ladder .is-now .pv-ladder__grade { color: var(--color-foreground); font-weight: 600; }
.pv-ladder .is-now .pv-ladder__since { color: rgba(var(--color-foreground-rgb), .55); }
.pv-pos { margin: auto 0; padding-top: .75rem; }
.pv-pos__value { margin: 0 0 .625rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.pv-pos__value--role { margin-bottom: 1rem; font-size: .9375rem; line-height: 1.35; }
#panel-overview .pv-tiles .pv-stat { padding: clamp(.75rem, 1.1vw, 1rem); }
#panel-overview .pv-tiles .pv-pos__value { margin-bottom: .875rem; font-size: 1.25rem; }
/* the function sits on its own line so a long title never runs edge to edge */
.pv-pos__value--role span { display: block; margin-top: .0625rem; color: rgba(var(--color-foreground-rgb), .5); font-weight: 500; }
.pv-pos__sub { margin: 0 0 .5625rem; color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; }
.pv-pos__track,
.pv-pos__keys { display: grid; gap: .1875rem; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); }
.pv-pos__seg { height: .4375rem; border-radius: 999px; background: rgba(var(--color-foreground-rgb), .13); }
.pv-pos__seg.is-now { background: var(--color-accent); }
.pv-pos__keys {
  margin-top: .4375rem;
  color: rgba(var(--color-foreground-rgb), .35);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .04em;
  text-align: center;
}
.pv-pos__keys .is-now { color: var(--color-foreground); font-weight: 500; }

/* -------------------------------------------- matrix scale + counts */
.pv-matrix__key { display: flex; flex-direction: column; gap: .125rem; }
.pv-matrix__key em {
  color: rgba(var(--color-foreground-rgb), .35);
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-style: normal;
  letter-spacing: .07em;
  text-transform: uppercase;
}
/* recognition counts awards, so the cell carries a number and pips */
.pv-cell--count { display: flex; gap: .375rem; align-items: center; justify-content: center; background: transparent; }
.pv-cell--count b { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; }
.pv-pips { display: flex; gap: .1875rem; }
.pv-pips i { width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--color-accent); }

/* ------------------------------------------------- in tune cycles */
.pv-cycle--lead { border-color: rgba(var(--color-foreground-rgb), .3); background: var(--color-surface); }
.pv-cycle__bar { position: relative; display: block; height: .375rem; margin-top: .625rem; border-radius: 999px; background: var(--color-sunken); overflow: hidden; }
.pv-cycle__bar::after { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--color-accent); content: ""; animation: pv-grow .7s var(--ease-soft) both; }

@media (max-width: 68rem) {
  .pv-points { min-width: 0; padding-left: 0; border-left: 0; grid-template-columns: 1fr; }
}
.pv-timeline--flush { margin-top: 0; }
.pv-timeline--flush li:first-child { border-top: 0; padding-top: 0; }
.pv-timeline--compact { margin-top: auto; padding-top: 1rem; }
.pv-timeline--compact li { padding: .5rem 0; grid-template-columns: 4rem 1fr auto; }
.pv-steps { flex: 1; justify-content: space-evenly; }

/* ---------------------------------- a chart per figure on the dark band */
.pv-mini { display: flex; height: 1.75rem; gap: .1875rem; align-items: flex-end; justify-content: center; }
.pv-mini i { background: rgba(var(--color-accent-foreground-rgb), .32); }
.pv-mini i.on { background: var(--color-inverted-foreground); }
/* three-cycle trend, and the pillar bars for the 360 index */
.pv-mini--bars i { width: .375rem; height: var(--h); border-radius: .0625rem; }
/* a staircase: the band is the top step of four */
.pv-mini--stair i { width: .3125rem; height: var(--h); border-radius: .0625rem .0625rem 0 0; }
/* the same dial as everywhere else, at figure scale */
/* percentile rank: a fill to the mark, quartiles ticked behind it */
.pv-mini--dir { width: 1.25rem; height: 1.25rem; align-items: center; }
.pv-mini--dir svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--color-inverted-foreground); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; }
.pv-mini--dir.is-down svg { transform: rotate(180deg); }

.pv-mini--rank { position: relative; width: 5rem; height: 1.25rem; }
.pv-rank2__track { position: absolute; top: 50%; right: 0; left: 0; height: 2px; border-radius: 999px; background: rgba(var(--color-accent-foreground-rgb), .2); transform: translateY(-50%); }
.pv-rank2__tick { position: absolute; top: 50%; left: var(--at); width: 1px; height: .5rem; background: rgba(var(--color-accent-foreground-rgb), .24); transform: translate(-50%, -50%); }
.pv-rank2__fill { position: absolute; top: 50%; left: 0; width: var(--w); height: 2px; border-radius: 999px; background: var(--color-inverted-foreground); transform: translateY(-50%); animation: pv-grow .8s var(--ease-soft) both; }
.pv-rank2__dot { position: absolute; top: 50%; left: var(--at); width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--color-inverted-foreground); transform: translate(-50%, -50%); }
.pv-mini--arc { width: 3rem; align-items: center; }
.pv-mini--arc svg { display: block; width: 100%; height: auto; }
.pv-mini__track,
.pv-mini__fill { fill: none; stroke-linecap: round; stroke-width: 11; }
.pv-mini__track { stroke: rgba(var(--color-accent-foreground-rgb), .22); }
.pv-mini__fill {
  stroke: var(--color-inverted-foreground);
  stroke-dasharray: 207.3;
  stroke-dashoffset: 207.3;
  animation: pv-dial 1.1s var(--ease-soft) .15s forwards;
}

/* --------------------------------------------- pick the facts on show */
.pv-card--identity { position: relative; }
.pv-fieldpick { position: absolute; top: .5rem; right: .5rem; flex: none; }
.pv-fieldpick__btn {
  display: inline-flex;
  gap: .4375rem;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  background: var(--color-background);
  color: rgba(var(--color-foreground-rgb), .6);
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.pv-fieldpick__btn:hover { border-color: rgba(var(--color-foreground-rgb), .3); color: var(--color-foreground); }
.pv-fieldpick__btn svg { width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.pv-fieldpick__btn[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-foreground); }

.pv-fieldpick__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + .5rem);
  right: 0;
  width: 15rem;
  padding: .875rem;
  border: 1px solid var(--color-hairline);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(var(--color-foreground-rgb), .12);
  animation: pv-menu-in .18s var(--ease-out) both;
}
@keyframes pv-menu-in { from { opacity: 0; transform: translateY(-.25rem); } }
.pv-fieldpick__menu[hidden] { display: none; }
.pv-fieldpick__title {
  display: flex;
  justify-content: space-between;
  margin: 0 0 .625rem;
  color: rgba(var(--color-foreground-rgb), .45);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pv-fieldpick__list { display: flex; margin: 0; padding: 0; flex-direction: column; gap: .0625rem; list-style: none; }
.pv-fieldpick__list label {
  display: flex;
  gap: .625rem;
  align-items: center;
  padding: .375rem .375rem;
  border-radius: .375rem;
  font-size: .8125rem;
  cursor: pointer;
  transition: background-color .16s var(--ease-out);
}
.pv-fieldpick__list label:hover { background: var(--color-sunken); }
.pv-fieldpick__list input { width: .875rem; height: .875rem; accent-color: var(--color-accent); cursor: pointer; }
.pv-fieldpick__list .is-locked { color: rgba(var(--color-foreground-rgb), .3); cursor: not-allowed; }
.pv-fieldpick__list .is-locked:hover { background: transparent; }
.pv-fieldpick__note {
  margin: .75rem 0 0;
  padding-top: .625rem;
  border-top: 1px solid var(--color-hairline);
  color: rgba(var(--color-foreground-rgb), .4);
  font-size: .6875rem;
}

/* ------------------------------ summary card: points, full bleed */
/* the summary is a lead-in, not a section — keep it shallow */
.pv-lede--full { flex-direction: column; align-items: stretch; gap: .625rem; padding-block: clamp(.5rem, .9vw, .75rem); }
.pv-lede--full .pv-lede__title { margin: .125rem 0 0; }
.pv-lede--full .pv-lede__text { max-width: none; }
.pv-lede__points {
  display: grid;
  margin: 0;
  padding: 0;
  gap: .1875rem 1.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
}
.pv-lede__points li {
  position: relative;
  padding-left: .75rem;
  color: rgba(var(--color-accent-foreground-rgb), .58);
  font-size: .78125rem;
  line-height: 1.32;
}
.pv-lede__points li::before {
  position: absolute;
  top: .5625rem;
  left: 0;
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: rgba(var(--color-accent-foreground-rgb), .4);
  content: "";
}
.pv-lede__points strong { color: var(--color-inverted-foreground); font-weight: 600; }

@media (max-width: 84rem) {
  .pv-lede__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .pv-lede__points { grid-template-columns: 1fr; }
}

/* ------------------------------------------- summary card, collapsible */
/* pinned to the card, not to a row that changes height, so collapsing does
   not move the button */
.pv-lede { position: relative; }
/* reserves the button's height, which left the flow when it was pinned */
.pv-lede__head { display: flex; min-height: 1.75rem; gap: 1rem; align-items: flex-start; justify-content: space-between; padding-right: 1.75rem; }
.pv-lede--fold .pv-lede__row,
.pv-lede--fold .pv-lede__mini { padding-right: 1.75rem; }
.pv-lede__toggle {
  position: absolute;
  top: .5625rem;
  right: .5625rem;
  display: inline-flex;
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--color-accent-foreground-rgb), .25);
  border-radius: 50%;
  background: transparent;
  color: var(--color-inverted-foreground);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.pv-lede__toggle:hover { border-color: rgba(var(--color-accent-foreground-rgb), .55); background: rgba(var(--color-accent-foreground-rgb), .08); }
.pv-lede__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pv-lede__toggle svg {
  width: .75rem;
  height: .75rem;
  transform: rotate(180deg);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease-soft);
}
/* collapsed: the chevron points down, the points row shrinks to nothing */
.pv-lede[data-collapsed="true"] .pv-lede__toggle svg { transform: rotate(0deg); }
.pv-lede__collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .34s var(--ease-soft);
}
.pv-lede__collapse > * { min-height: 0; overflow: hidden; }
.pv-lede--full[data-collapsed="true"] { gap: 0; }
.pv-lede--full[data-collapsed="true"] .pv-lede__collapse { grid-template-rows: 0fr; }
.pv-lede--full[data-collapsed="true"] .pv-lede__points { opacity: 0; }
.pv-lede__points { transition: opacity .22s var(--ease-out); }
/* A lede that folds all the way down to a labelled strip. The vertical
   padding lives on the two rows rather than the card, so the whole height
   is carried by two grid tracks and animates in one movement. */
.pv-lede--fold { flex-direction: column; padding-block: 0; align-items: stretch; gap: 0; }
/* min-height:0 on the flex item too, or its automatic minimum size holds the
   grid open however small the track gets */
.pv-lede__fold,
.pv-lede__strip { display: grid; min-height: 0; transition: grid-template-rows .38s var(--ease-soft); }
.pv-lede__fold > *,
.pv-lede__strip > * { min-height: 0; overflow: hidden; }
.pv-lede__fold { grid-template-rows: 1fr; }
.pv-lede__strip { grid-template-rows: 0fr; }
.pv-lede__row {
  display: flex;
  padding-block: clamp(1.25rem, 2vw, 1.875rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* the padding folds with the row: overflow:hidden zeroes the content's
     minimum, but padding still floors the grid track */
  transition: padding .38s var(--ease-soft), opacity .24s var(--ease-out);
}
.pv-lede--fold .pv-lede__mini {
  display: flex;
  min-height: 0;
  padding-block: 0;
  align-items: center;
  opacity: 0;
  /* same reason as the row: its own box has to fold, or it floors the track */
  transition: min-height .38s var(--ease-soft), padding .38s var(--ease-soft), opacity .28s var(--ease-out) .06s;
}
.pv-lede--fold[data-collapsed="true"] .pv-lede__fold { grid-template-rows: 0fr; }
.pv-lede--fold[data-collapsed="true"] .pv-lede__row { padding-block: 0; opacity: 0; }
.pv-lede--fold[data-collapsed="true"] .pv-lede__strip { grid-template-rows: 1fr; }
.pv-lede--fold[data-collapsed="true"] .pv-lede__mini { min-height: 2.5rem; padding-block: .375rem; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pv-lede__fold, .pv-lede__strip, .pv-lede__row, .pv-lede--fold .pv-lede__mini { transition: none; }
}

/* On a short screen an opened summary has to come out of the padding, not out
   of the cards underneath it. */
@media (max-height: 56rem) {
  .pv-lede__row { padding-block: clamp(.875rem, 1.4vw, 1.125rem); }
  .pv-lede { padding-block: clamp(.875rem, 1.4vw, 1.125rem); }
  .pv-lede--fold { padding-block: 0; }
  .pv-lede__body { margin-top: .3125rem; }
  .pv-subtabs { padding-block: .1875rem; }
  .pv-card:not(.pv-lede) { padding: clamp(.5rem, .8vw, .75rem); }
  .pv-card__head { margin-bottom: .4375rem; }
  .pv-hier { gap: .375rem; }
  .pv-hier__aside { padding-top: .5rem; }
  .pv-edge__label { margin-bottom: .25rem; }
  .pv-readout { margin-top: .75rem; padding-top: .625rem; }
  .pv-panel--views > .pv-grid { padding-bottom: .25rem; }
  [data-eng-extremes] .pv-edge { gap: .3125rem; }
  [data-eng-movement] .pv-overall__v { font-size: 1.5rem; }
  /* the overview stacks four rows of cards, so it gives up a little of each */
  .pv-tiles { gap: .25rem; }
  .pv-tiles > .pv-card { padding: .5rem .625rem; }
  .pv-dial--card { max-width: 6.25rem; }
  .pv-dial--card .pv-dial__value { font-size: 1.375rem; }
  .pv-dial--card .pv-dial__unit { font-size: .6875rem; }
  .pv-matrix { gap: .1875rem; }
  .pv-matrix__row { max-height: 1.75rem; }
  .pv-cell { min-height: 1.125rem; }
  .pv-card--recognition .pv-dots { --cell: .375rem; }
  .pv-cal__foot { gap: .5rem; }
  /* Performance & Potential carries five cards in two rows */
  .pv-scale li { padding: .25rem .625rem; }
  .pv-slope svg { max-width: 14rem; }
  .pv-ladder { min-height: 3.25rem; }
  [data-pot-journey] .pv-readout,
  [data-perf-scale] .pv-readout { margin-top: .5rem; padding-top: .5rem; }
  .pv-lede__points li { line-height: 1.25; font-size: .75rem; }
  .pv-overall__v { font-size: 1.375rem; }
  .pv-edge { gap: .1875rem; }
  .pv-ladder { --step-gap: .625rem; padding-top: .5rem; }
  .pv-stat__foot { margin-top: .5rem; }
  /* the 360 carries fifteen rows, so it gives up the most */
  .pv-gcf { gap: .625rem; }
  .pv-gcf__list { gap: .125rem; }
  .pv-dial--sm { width: 4.5rem; }
  .pv-dial--precise { width: 6rem; }
  .pv-overall { margin-bottom: .4375rem; padding-bottom: .375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-lede__collapse, .pv-lede__points, .pv-lede__toggle svg { transition: none; }
}

/* collapsed, the card is just a labelled strip */
.pv-lede__mini {
  display: none;
  margin: 0;
  align-self: center;
  line-height: 1;
  color: rgba(var(--color-accent-foreground-rgb), .72);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pv-lede--full[data-collapsed="true"] .pv-lede__text { display: none; }
.pv-lede--full[data-collapsed="true"] .pv-lede__mini { display: block; }
.pv-lede--full[data-collapsed="true"] { padding-block: .375rem; }
.pv-eyebrow__note { color: rgba(var(--color-foreground-rgb), .3); letter-spacing: .06em; }

/* three scored tiles, sharing the width of the card beneath them */
.pv-tiles { display: grid; gap: .375rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-tiles > .pv-card { min-width: 0; }
/* the edges card stands the full height of the column beside it */
/* the edges card runs from the tiles down past the trajectory */
.pv-card--tall { grid-row: span 2; align-self: stretch; }
.pv-card--tall .pv-edge { flex: 1; justify-content: space-around; }
.pv-card--tall .pv-edge:last-of-type { margin-bottom: 0; }

@media (max-width: 68rem) {
  .pv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the headline capability figure, above the two edge lists */
.pv-overall { margin-bottom: .625rem; padding-bottom: .5rem; border-bottom: 1px solid var(--color-hairline); }
/* on its own in a card, it needs no rule under it */
.pv-overall--plain { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.pv-overall__v { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pv-overall__k { margin: .1875rem 0 .375rem; color: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; }
.pv-overall__bar { position: relative; display: block; height: .3125rem; border-radius: 999px; background: var(--color-sunken); overflow: hidden; }
.pv-overall__bar::after { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--color-accent); content: ""; animation: pv-grow .7s var(--ease-soft) both; }

/* ------------------------------------------------ overview cards as links */
/* an overview card points at its own section: hovering lifts the matching
   Talent Trajectory row, activating it opens the tab */
.pv-card--link { cursor: pointer; }
.pv-card--link:hover { border-color: rgba(var(--color-foreground-rgb), .32); box-shadow: 0 2px 8px rgba(var(--color-foreground-rgb), .07); }
.pv-card--link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* the trajectory grid answers the hover: the matched row stays lit, the rest
   step back rather than disappear */
.pv-matrix__row { transition: opacity .2s var(--ease-out); }
.pv-matrix.is-linking .pv-matrix__row:not(.is-linked):not(.pv-matrix__row--head) { opacity: .38; }
.pv-matrix__row.is-linked .pv-matrix__key { color: var(--color-foreground); font-weight: 600; }
.pv-cell { transition: background-color .24s var(--ease-out); }

/* the trajectory grid wants a little more air beneath the last row */
.pv-card--trajectory { padding-bottom: clamp(.875rem, 1.2vw, 1.125rem); }
/* and so does the recognition chart, under its legend */
.pv-card--recognition { padding-bottom: clamp(.5rem, .7vw, .625rem); }

@media (prefers-reduced-motion: reduce) {
  .pv-matrix__row,
  .pv-cell { transition: none; }
}


/* --------------------------------------------------------- reorderable */
/* fields and tabs both drag; the item under the pointer lifts out of the flow
   and the rest close up behind it */
.pv-fieldpick__list > [data-field],
.pv-fieldpick__list > [data-field].is-dragging {
  cursor: grabbing;
  opacity: .45;
}
.pv-fieldpick__list.is-reordering > [data-field] { transition: transform .18s var(--ease-out); }
.pv-fieldpick__list > [data-field] { border-radius: .3125rem; transition: background-color .18s var(--ease-out); }
.pv-fieldpick__list > [data-field]:hover { background: rgba(var(--color-foreground-rgb), .05); }

/* ------------------------------------------------------- recognition dots */
/* One column per quarter, grouped by cycle and labelled underneath. The stack
   is cumulative, so each row is one specific award and carries that award's
   mark — circle, square, diamond, ring — which is how the four programmes stay
   apart in a monochrome field. */
.pv-dots { display: flex; flex-direction: column; gap: .6875rem; }

.pv-dots__head { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pv-dots__fig { display: flex; margin: 0; gap: .4375rem; align-items: baseline; }
.pv-dots__fig b { font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pv-dots__fig span {
  color: rgba(var(--color-foreground-rgb), .42);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---- cycle filter ---- */
.pv-dots__filter { display: flex; padding: .125rem; border-radius: .5rem; background: var(--color-sunken); gap: .125rem; }
.pv-dots__opt {
  padding: .1875rem .4375rem;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  color: rgba(var(--color-foreground-rgb), .5);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .06em;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.pv-dots__opt:hover { color: var(--color-foreground); }
.pv-dots__opt.is-on { background: #fff; box-shadow: 0 1px 2px rgba(var(--color-foreground-rgb), .1); color: var(--color-foreground); }
.pv-dots__opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* ---- the field ---- */
.pv-dots__plot { display: flex; gap: clamp(.75rem, 1.8vw, 1.5rem); align-items: flex-end; }
.pv-dots__grp { display: flex; min-width: 0; flex: 1; max-width: 16rem; flex-direction: column; gap: .375rem; transition: opacity .24s var(--ease-out); }
/* focusing a cycle or an award steps the rest back rather than removing it,
   so the shape of the record never moves under you */
.pv-dots__grp.is-back { opacity: .4; }
.pv-dots__slot i.is-back { opacity: .28; }
.pv-dots__cols { display: grid; gap: .375rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* a quarter, split into one slot per programme — position is the encoding, so
   every mark can look the same */
.pv-dots__col { display: grid; gap: .125rem; grid-template-columns: repeat(var(--slots), minmax(0, 1fr)); }
/* the marks rest on the rule with headroom above, so a single row still reads
   as a plot rather than a hairline of dots */
.pv-dots__slot { display: flex; min-height: 1.25rem; flex-direction: column; gap: .25rem; align-items: center; justify-content: flex-end; }

/* fixed marks rather than aspect-ratio, so a wide slot still reads true */
.pv-dots__slot i {
  width: .375rem;
  height: .375rem;
  flex: none;
  border-radius: 50%;
  background: transparent;
  transition: background-color .3s var(--ease-out), opacity .24s var(--ease-out);
}
.pv-dots__slot i.is-on { background: rgba(var(--color-foreground-rgb), .58); }
.pv-dots__grp.is-now .pv-dots__slot i.is-on { background: var(--color-foreground); }

/* ---- quarter and cycle labels ---- */
.pv-dots__qs { display: grid; padding-top: .375rem; border-top: 1px solid var(--color-hairline); gap: .375rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-dots__qs span { color: rgba(var(--color-foreground-rgb), .35); font-family: var(--font-mono); font-size: .5rem; letter-spacing: .04em; text-align: center; }
.pv-dots__yr { margin: .125rem 0 0; color: rgba(var(--color-foreground-rgb), .55); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .08em; text-align: center; }
.pv-dots__grp.is-now .pv-dots__yr { color: var(--color-foreground); }
/* the cycle the filter is on names itself louder than the rest */
.pv-dots__grp.is-focus .pv-dots__yr { color: var(--color-foreground); font-weight: 600; }
.pv-dots__grp.is-focus .pv-dots__qs span { color: rgba(var(--color-foreground-rgb), .6); }

/* ---- legend, doubling as the award filter ---- */
.pv-dots__legend { display: flex; margin: 0; padding: .6875rem 0 0; border-top: 1px solid var(--color-hairline); gap: .375rem; list-style: none; flex-wrap: wrap; }
.pv-dots__chip {
  display: flex;
  padding: .1875rem .4375rem;
  border: 0;
  border-radius: .375rem;
  background: var(--color-sunken);
  color: rgba(var(--color-foreground-rgb), .62);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .5rem;
  gap: .3125rem;
  align-items: center;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: opacity .18s var(--ease-out), color .18s var(--ease-out);
}
.pv-dots__chip:hover { color: var(--color-foreground); }
.pv-dots__chip.is-back { opacity: .35; }
.pv-dots__chip.is-on { background: #fff; box-shadow: inset 0 0 0 1px var(--color-hairline); color: var(--color-foreground); }
.pv-dots__chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pv-dots__chip b { color: var(--color-foreground); font-weight: 600; }
/* which slot of the quarter this programme sits in */
.pv-dots__pos { display: flex; gap: .0625rem; flex: none; align-items: center; }
.pv-dots__pos i { width: .25rem; height: .25rem; border-radius: 50%; background: rgba(var(--color-foreground-rgb), .16); }
.pv-dots__pos i.is-on { background: var(--color-foreground); }

/* ------------------------------------------------------ award calendar */
/* every day of the fiscal year as a cell: weeks run left to right, days of the
   week run down, one cycle at a time. */
.pv-cal { display: flex; flex-direction: column; gap: .625rem; }
.pv-cal__head { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pv-cal__count { margin: 0; font-size: .9375rem; font-weight: 600; letter-spacing: -.02em; }

.pv-cal__years { display: flex; padding: .125rem; border-radius: .5rem; background: var(--color-sunken); gap: .125rem; }
.pv-cal__yr {
  padding: .1875rem .4375rem;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  color: rgba(var(--color-foreground-rgb), .5);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .06em;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.pv-cal__yr:hover { color: var(--color-foreground); }
.pv-cal__yr.is-on { background: #fff; box-shadow: 0 1px 2px rgba(var(--color-foreground-rgb), .1); color: var(--color-foreground); }
.pv-cal__yr:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* --gutter keeps the month strip lined up with the week columns beside the
   day labels; --weeks is how many columns the cycle spans */
.pv-cal__body { --gutter: 1.75rem; --cell-gap: .1875rem; display: flex; flex-direction: column; gap: .25rem; }
.pv-cal__months {
  display: grid;
  margin-left: calc(var(--gutter) + var(--cell-gap));
  gap: var(--cell-gap);
  grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
}
.pv-cal__months span {
  grid-column: var(--at) / span var(--span);
  color: rgba(var(--color-foreground-rgb), .55);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pv-cal__chart { display: flex; gap: var(--cell-gap); align-items: stretch; }
.pv-cal__days { display: flex; width: var(--gutter); flex: none; flex-direction: column; gap: var(--cell-gap); }
.pv-cal__days span {
  display: flex;
  flex: 1;
  align-items: center;
  color: rgba(var(--color-foreground-rgb), .45);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .04em;
}
/* flex, not grid: a month gap is a margin, and flex takes margins out of
   the free space before sharing it — so every week column stays the same
   width and its square cells keep their height */
.pv-cal__weeks { display: flex; flex: 1; gap: var(--cell-gap); }
.pv-cal__week { flex: 1 1 0; min-width: 0; }
.pv-cal__week { display: flex; flex-direction: column; gap: var(--cell-gap); }
.pv-cal__cell {
  aspect-ratio: 1;
  border-radius: .125rem;
  background: rgba(var(--color-foreground-rgb), .07);
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.pv-cal__cell.is-won { background: var(--color-accent); }
.pv-cal__cell.is-pad { background: transparent; }
.pv-cal__cell:not(.is-pad):hover { transform: scale(1.35); }
button.pv-cal__cell { padding: 0; border: 0; cursor: pointer; }
button.pv-cal__cell:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pv-cal__cell.is-sel { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--color-accent); transform: scale(1.2); }

.pv-cal__foot { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pv-cal__lead { display: flex; gap: .625rem; align-items: center; }
/* the cycle the chart is drawing, named under it */
.pv-cal__cycle {
  margin: .5rem 0 0;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-align: center;
}
.pv-cal__clear {
  padding: .1875rem .5rem;
  border: 1px solid var(--color-hairline);
  border-radius: .375rem;
  background: transparent;
  color: rgba(var(--color-foreground-rgb), .55);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.pv-cal__clear:hover:not(:disabled) { border-color: rgba(var(--color-foreground-rgb), .35); color: var(--color-foreground); }
.pv-cal__clear:disabled { cursor: default; opacity: .35; }
.pv-cal__foot .pv-note { margin: 0; padding-top: 0; }
.pv-cal__legend { display: flex; margin: 0; padding: 0; gap: .3125rem; list-style: none; }
.pv-cal__legend li { display: flex; gap: .3125rem; align-items: center; color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }
.pv-cal__legend .pv-cal__cell { width: .5rem; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .pv-dots__slot i,
  .pv-dots__grp,
  .pv-cal__cell,
  .pv-fieldpick__list.is-reordering > [data-field] { transition: none; }
}


/* =========================================================================
   ENGAGEMENT — the InTune (Gallup Q12) report
   Three views inside the one section, so none of them has to scroll.
   ========================================================================= */

/* ---- views within a section ---- */
.pv-panel--views > .pv-grid { display: flex; flex-direction: column; padding-bottom: .625rem; }
.pv-subpanel { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.pv-subpanel[hidden] { display: none; }
.pv-subpanel > .pv-grid { flex: 1; align-content: stretch; grid-auto-rows: auto; }

.pv-subtabs {
  display: flex;
  padding: .3125rem .25rem .3125rem .125rem;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pv-subtabs__list { display: flex; gap: .1875rem; }
.pv-subtabs__meta { margin: 0; color: rgba(var(--color-foreground-rgb), .38); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .07em; text-transform: uppercase; }
.pv-subtab {
  padding: .3125rem .625rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(var(--color-foreground-rgb), .5);
  font-family: inherit;
  font-size: .75rem;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.pv-subtab:hover { color: var(--color-foreground); }
.pv-subtab[aria-selected="true"] {
  border-color: var(--color-hairline);
  background: var(--color-surface);
  color: var(--color-foreground);
  font-weight: 600;
}
.pv-subtab:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* ---- the engagement hierarchy ---- */
/* each label travels with its own three rows, and the slack is split evenly
   above, between and below the two groups */
/* the slack spreads through the rows rather than pooling into bands above,
   between and below the two groups */
.pv-edge__set { display: flex; flex: 1; flex-direction: column; gap: .625rem; }
.pv-edge__grp { display: flex; flex: 1; flex-direction: column; }
.pv-edge__grp--split { padding-top: .625rem; border-top: 1px solid var(--color-hairline); }
[data-eng-extremes] .pv-edge { flex: 1; justify-content: space-evenly; gap: .375rem; margin-bottom: 0; }
/* the comparison carries six rows and two headings, the movement carries one
   figure — so the column is split two to one rather than evenly */
.pv-stack > [data-eng-extremes] { flex: 5; }
.pv-stack > [data-eng-movement] { flex: 2; }
[data-eng-movement] .pv-overall { margin-top: auto; }
[data-eng-movement] .pv-readout { margin-bottom: auto; }

.pv-hier { display: flex; margin: 0; padding: 0; flex-direction: column; flex: 1; justify-content: space-evenly; gap: .625rem; list-style: none; }
.pv-hier li {
  display: grid;
  gap: 0 .875rem;
  align-items: center;
  grid-template-areas: "name track val" "meta track val";
  grid-template-columns: 7rem minmax(0, 1fr) 2.75rem;
}
.pv-hier__aside { padding-top: .75rem; border-top: 1px solid var(--color-hairline); }
.pv-hier__name { margin: 0; grid-area: name; font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; }
.pv-hier__meta { margin: 0; grid-area: meta; color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em; }
.pv-hier__val { margin: 0; grid-area: val; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; text-align: right; }
.pv-hier__track {
  position: relative;
  display: block;
  height: .625rem;
  grid-area: track;
  border-radius: .125rem;
  background: rgba(var(--color-foreground-rgb), .07);
}
.pv-hier__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: var(--color-accent);
  animation: pv-grow .7s var(--ease-soft) both;
}
/* the company mean for the same items */
.pv-hier__mark { position: absolute; top: -.1875rem; bottom: -.1875rem; left: var(--at); width: 1px; background: rgba(var(--color-foreground-rgb), .55); }
.pv-hier__mark b {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: .1875rem;
  color: rgba(var(--color-foreground-rgb), .45);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: 400;
  letter-spacing: .04em;
  transform: translateX(-50%);
}

/* ---- every item, in a row ---- */
.pv-q12 { display: flex; flex-direction: column; flex: 1; }
.pv-q12__head,
.pv-q12__row {
  display: grid;
  gap: 0 1rem;
  align-items: center;
  grid-template-columns: 2.5rem minmax(0, 1fr) 5.5rem 3.5rem 4.5rem 3.5rem 11rem 4.5rem;
}
.pv-q12__head {
  padding-bottom: .375rem;
  border-bottom: 1px solid var(--color-hairline);
  color: rgba(var(--color-foreground-rgb), .38);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pv-q12__head > span:nth-child(n+3) { text-align: right; }
.pv-q12__head > span:nth-child(7) { text-align: left; }
/* names the ink ramp the distribution bars are drawn in */
.pv-distkey { display: flex; gap: .25rem; align-items: center; }
.pv-distkey b {
  display: block;
  width: .5rem;
  height: .5rem;
  margin-left: .3125rem;
  border-radius: .0625rem;
  background: rgba(var(--color-foreground-rgb), calc(.1 + var(--ink) * .18));
}
.pv-distkey b:first-child { margin-left: 0; }
.pv-q12__row { flex: 1; min-height: 1.0625rem; padding: .0625rem 0; line-height: 1.1; border-bottom: 1px solid rgba(var(--color-foreground-rgb), .06); }
.pv-q12__row:last-child { border-bottom: 0; }
.pv-q12__row.is-aside { border-bottom: 1px solid var(--color-hairline); }
.pv-q12__id { color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em; }
.pv-q12__name { overflow: hidden; font-size: .8125rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.pv-q12__n,
.pv-q12__delta,
.pv-q12__change { color: rgba(var(--color-foreground-rgb), .5); font-family: var(--font-mono); font-size: .6875rem; text-align: right; }
.pv-q12__mean { font-size: .875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; text-align: right; }
.pv-q12__delta.is-under { color: rgba(var(--color-foreground-rgb), .75); }
.pv-q12__delta { display: flex; gap: .25rem; align-items: center; justify-content: flex-end; }
.pv-arrow {
  width: 0;
  height: 0;
  border-right: .1875rem solid transparent;
  border-bottom: .3125rem solid currentColor;
  border-left: .1875rem solid transparent;
}
.pv-arrow--down { border-top: .3125rem solid currentColor; border-bottom: 0; }
/* the movement card carries the arrow at headline size */
.pv-arrow--lg { border-right-width: .5rem; border-left-width: .5rem; border-bottom-width: .875rem; }
.pv-arrow--lg.pv-arrow--down { border-top-width: .875rem; border-bottom-width: 0; }

/* the 1-5 split, darkest for the top box */
.pv-q12__dist { display: flex; height: .5rem; gap: 1px; overflow: hidden; border-radius: .0625rem; }
.pv-q12__dist i { width: var(--w); background: rgba(var(--color-foreground-rgb), calc(.1 + var(--ink) * .18)); }
.pv-q12__dist.is-na { color: rgba(var(--color-foreground-rgb), .3); font-family: var(--font-mono); font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }

/* percentile: the number, over the band it falls in */
.pv-q12__pct { display: flex; gap: .375rem; align-items: center; justify-content: flex-end; font-family: var(--font-mono); font-size: .6875rem; }
.pv-q12__pct.is-na { color: rgba(var(--color-foreground-rgb), .3); }
.pv-band { display: flex; gap: 1px; }
.pv-band b { display: block; width: .1875rem; height: .5rem; border-radius: .0625rem; background: rgba(var(--color-foreground-rgb), .1); }
.pv-band b.on { background: var(--color-accent); }

/* ---- movement since the last report ---- */
/* A pale bar for the prior report with the current one drawn thinner on top:
   both scores are visible, and the movement is the overhang. */
.pv-readout--head { margin-top: 0; padding-top: 0; border-top: 0; }
.pv-move { display: flex; margin: 0; padding: 0; flex-direction: column; flex: 1; gap: 0; list-style: none; }
.pv-move li {
  display: grid;
  flex: 1;
  min-height: 1.25rem;
  padding: .125rem 0;
  gap: 0 1rem;
  align-items: center;
  line-height: 1.1;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.75rem minmax(8rem, 28rem) 2.75rem 4rem;
}
.pv-move li.is-aside { border-top: 1px solid var(--color-hairline); }
.pv-move__id { color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em; }
.pv-move__name { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
/* a heading row, so the two figure columns name themselves */
.pv-move__head {
  display: grid;
  margin-top: .875rem;
  padding-bottom: .375rem;
  gap: 0 1rem;
  border-bottom: 1px solid var(--color-hairline);
  color: rgba(var(--color-foreground-rgb), .38);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.75rem minmax(8rem, 28rem) 2.75rem 4rem;
}
.pv-move__head > span:nth-child(3),
.pv-move__head > span:nth-child(5),
.pv-move__head > span:nth-child(6) { text-align: right; }
.pv-move__head .pv-key { color: rgba(var(--color-foreground-rgb), .55); }
.pv-move__was { color: rgba(var(--color-foreground-rgb), .42); font-family: var(--font-mono); font-size: .6875rem; text-align: right; }
.pv-move__now { font-family: var(--font-mono); font-size: .6875rem; text-align: right; }
.pv-move__track { display: flex; flex-direction: column; gap: .1875rem; }
.pv-move__then,
.pv-move__now-bar {
  height: .25rem;
  flex: none;
  border-radius: 999px;
  animation: pv-grow .7s var(--ease-soft) both;
}
.pv-move__then { background: rgba(var(--color-foreground-rgb), .25); }
.pv-move__now-bar { background: var(--color-accent); }

/* ---- which bar is which ---- */
.pv-move__keys { display: flex; gap: 1rem; align-items: center; justify-content: center; }
.pv-key { display: inline-flex; gap: .375rem; align-items: center; }
.pv-key i { display: block; width: .875rem; height: .25rem; border-radius: 999px; }
.pv-key__then { background: rgba(var(--color-foreground-rgb), .25); }
.pv-key__now { background: var(--color-accent); }
.pv-move__chg { display: flex; gap: .25rem; align-items: center; justify-content: flex-end; color: rgba(var(--color-foreground-rgb), .38); font-family: var(--font-mono); font-size: .6875rem; }
.pv-move__chg.is-real { color: var(--color-foreground); }

/* ---- nothing to draw ---- */
.pv-empty { display: flex; flex-direction: column; flex: 1; justify-content: center; padding: 1.5rem 0; text-align: center; }
.pv-empty__title { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.pv-empty__body { margin: .5rem auto 0; max-width: 26rem; color: rgba(var(--color-foreground-rgb), .5); font-size: .8125rem; line-height: 1.6; }

@media (max-width: 60rem) {
  .pv-q12__head > span:nth-child(7),
  .pv-q12__dist { display: none; }
  .pv-q12__head,
  .pv-q12__row { grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem 2.5rem 2.75rem 2.75rem 3.75rem; }
}


/* =========================================================================
   360° — the GCF scorecard: three pillars, twelve factors
   ========================================================================= */
/* the slack is spread through the rows rather than pooled into two gaps
   between the groups, so the card fills at an even rhythm */
.pv-gcf { display: flex; flex: 1; flex-direction: column; gap: clamp(.625rem, 1.6vh, 1.25rem); }
/* a group's share of the card follows how many factors it holds, so six
   rows are not squeezed into the same band as three */
.pv-gcf__group { display: flex; flex: var(--rows, 1); flex-direction: column; gap: .375rem; }
.pv-gcf__head { display: grid; gap: .75rem; align-items: center; grid-template-columns: 1.75rem minmax(0, 11rem) minmax(0, 1fr) 2.5rem; }
.pv-gcf__code {
  justify-self: start;
  padding: .125rem .3125rem;
  border-radius: .25rem;
  background: var(--color-accent);
  color: var(--color-inverted-foreground);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .06em;
}
.pv-gcf__pillar { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; }
.pv-gcf__score { font-size: .875rem; font-weight: 600; letter-spacing: -.02em; text-align: right; }
.pv-gcf__head .pv-gcf__bar { height: .25rem; }

.pv-gcf__list { display: flex; margin: 0; padding: 0; flex: 1; flex-direction: column; justify-content: space-evenly; gap: .25rem; list-style: none; }
.pv-gcf__list { padding-left: 2.5rem; }
.pv-gcf__list.is-split { display: grid; align-content: space-evenly; gap: .25rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the figure sits against its own name rather than in a column of its own */
.pv-gcf__list li { display: flex; gap: .625rem; align-items: baseline; line-height: 1.25; }
.pv-gcf__name { overflow: hidden; min-width: 0; color: rgba(var(--color-foreground-rgb), .72); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.pv-gcf__bar { position: relative; height: .375rem; border-radius: 999px; background: var(--color-sunken); overflow: hidden; }
.pv-gcf__bar::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: var(--color-accent);
  content: "";
  animation: pv-grow .7s var(--ease-soft) both;
}
.pv-gcf__val { flex: none; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; }

/* ---- the reports' view against everyone's ---- */
.pv-compare { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-compare__v { margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pv-compare__k { margin: .3125rem 0 0; font-size: .75rem; }
.pv-compare__bar { position: relative; display: block; height: .375rem; margin-top: .625rem; border-radius: 999px; background: var(--color-sunken); overflow: hidden; }
.pv-compare__bar::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: var(--color-accent);
  content: "";
  animation: pv-grow .7s var(--ease-soft) both;
}
.pv-compare__n { margin: .4375rem 0 0; color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .07em; text-transform: uppercase; }
.pv-compare__side--muted .pv-compare__v { color: rgba(var(--color-foreground-rgb), .4); }
.pv-compare__side--muted .pv-compare__bar::after { background: rgba(var(--color-foreground-rgb), .3); }

/* ---- best-to-worst factor, per pillar ---- */
/* one figure and a note — it does not need an equal share of the column */
.pv-stack > [data-cap-subordinate] { flex: none; }
.pv-range { display: flex; margin: 0; padding: 0; flex: 1; flex-direction: column; justify-content: space-evenly; gap: .875rem; list-style: none; }
.pv-range li { display: grid; gap: .75rem; align-items: center; grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem; }
.pv-range__name { font-size: .75rem; }
.pv-range__track { position: relative; display: block; height: .375rem; border-radius: 999px; background: var(--color-sunken); }
.pv-range__track i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--color-accent); }
.pv-range__val { color: rgba(var(--color-foreground-rgb), .55); font-family: var(--font-mono); font-size: .6875rem; text-align: right; }


/* ---- 360 trends: the run of cycles, not just the latest ---- */
.pv-run { display: flex; margin: 0; padding: 0; flex: 1; flex-direction: column; justify-content: space-evenly; gap: .25rem; list-style: none; }
.pv-run li {
  display: grid;
  gap: .875rem;
  align-items: center;
  grid-template-columns: minmax(0, 9rem) minmax(4rem, 1fr) 2.25rem 3.25rem;
}
.pv-run__name { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.pv-run__val { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; text-align: right; }
.pv-run__was { color: rgba(var(--color-foreground-rgb), .42); font-family: var(--font-mono); font-size: .6875rem; text-align: right; }
.pv-run__code { color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em; }
.pv-run__chg {
  display: flex;
  gap: .25rem;
  align-items: center;
  justify-content: flex-end;
  color: rgba(var(--color-foreground-rgb), .35);
  font-family: var(--font-mono);
  font-size: .6875rem;
}
.pv-run__chg.is-real { color: var(--color-foreground); }

/* a column per cycle, on the same 2.5-5.0 band the pillar bars use */
/* tall and narrow enough to read as columns rather than blocks */
.pv-run__bars { display: grid; height: clamp(3.5rem, 9vh, 6rem); gap: .375rem; align-items: end; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.pv-run__bars i {
  width: 100%;
  max-width: 3.5rem;
  height: var(--h);
  justify-self: center;
  min-height: .125rem;
  border-radius: .125rem .125rem 0 0;
  background: rgba(var(--color-foreground-rgb), .22);
  animation: pv-rise .8s var(--ease-soft) both;
}
.pv-run__bars i.is-now { background: var(--color-accent); }
/* the cycle names, on the same columns as the bars above them */
.pv-run__keys {
  display: grid;
  margin-top: .5rem;
  padding-top: .625rem;
  gap: .25rem;
  border-top: 1px solid var(--color-hairline);
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin-left: calc(9rem + .875rem);
  margin-right: calc(5.5rem + 1.75rem);
}
.pv-run__keys span { color: rgba(var(--color-foreground-rgb), .42); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em; text-align: center; }
.pv-run__keys .is-now { color: var(--color-foreground); }

/* the factor list is tighter: a code, a name, two figures and the movement */
.pv-run--factors li { gap: .625rem; grid-template-columns: 1.75rem minmax(0, 1fr) 2rem 2rem 3.25rem; }
.pv-run--factors .pv-run__name { font-size: .75rem; }

/* ---- Performance & Potential: the right-hand stack, weighted ---- */
#panel-performance .pv-stack > [data-pot-journey] { flex: 1.6; }
#panel-performance .pv-stack > [data-pot-centre] { flex: 1; }
#panel-performance .pv-stack > [data-pot-position] { flex: .8; }

/* ---- the overview's four rows ---- */
/* Content-sized, not weighted. `3fr 2fr` looks harmless but the panel has no
   definite height, so the fr unit is set by the tallest track divided by its
   factor — which inflated the trajectory row to three times that unit and
   pushed the whole panel off the screen. */
#panel-overview > .pv-grid { grid-template-rows: min-content min-content auto auto; }
/* the four scored tiles and the trajectory get the room; the recognition
   strip and the ladder give it up, so the panel's total is unchanged */
#panel-overview .pv-tiles { min-height: 11rem; }
.pv-card--recognition .pv-dots { gap: .375rem; }
.pv-card--recognition .pv-dots__fig b { font-size: 1.375rem; }
.pv-card--recognition .pv-dots__slot { min-height: .875rem; }
.pv-card--recognition .pv-dots__legend { padding-top: .5rem; }
/* the ladder scrolls rather than stretching the card, in case a long career
   carries more grades than the card can show */
.pv-ladder { min-height: 4rem; overflow-y: auto; overscroll-behavior: contain; }
.pv-ladder::-webkit-scrollbar { width: 3px; }
.pv-ladder::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--color-hairline); }

/* ---- a cycle-range picker in a card head ---- */
.pv-card__meta--pick { display: flex; gap: .4375rem; align-items: center; color: rgba(var(--color-foreground-rgb), .35); }
.pv-pick { display: inline-flex; }
.pv-pick select {
  padding: .125rem 1.25rem .125rem .4375rem;
  border: 1px solid var(--color-hairline);
  border-radius: .3125rem;
  background: var(--color-surface) no-repeat right .375rem center;
  background-image: linear-gradient(45deg, transparent 50%, rgba(var(--color-foreground-rgb), .5) 50%),
                    linear-gradient(135deg, rgba(var(--color-foreground-rgb), .5) 50%, transparent 50%);
  background-size: 4px 4px, 4px 4px;
  background-position: calc(100% - .625rem) 55%, calc(100% - .375rem) 55%;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .06em;
  cursor: pointer;
  appearance: none;
  transition: border-color .2s var(--ease-out);
}
.pv-pick select:hover { border-color: rgba(var(--color-foreground-rgb), .35); }
.pv-pick select:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* ---- column headings for the trend cards ---- */
.pv-run__head {
  display: grid;
  padding-bottom: .375rem;
  gap: .875rem;
  border-bottom: 1px solid var(--color-hairline);
  color: rgba(var(--color-foreground-rgb), .38);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  grid-template-columns: minmax(0, 9rem) minmax(4rem, 1fr) 2.25rem 3.25rem;
}
.pv-run__head > span:nth-child(n+3) { text-align: right; }
.pv-run__head--factors { gap: .625rem; grid-template-columns: 1.75rem minmax(0, 1fr) 2rem 2rem 3.25rem; }
.pv-run__head--factors > span:nth-child(n+3) { text-align: right; }

/* ---- a two-way switch in a card head ---- */
.pv-switch { display: flex; gap: .1875rem; padding: .125rem; border: 1px solid var(--color-hairline); border-radius: 999px; }
.pv-switch button {
  padding: .1875rem .5625rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(var(--color-foreground-rgb), .5);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.pv-switch button:hover { color: var(--color-foreground); }
.pv-switch button.is-on { background: var(--color-accent); color: var(--color-inverted-foreground); }
.pv-switch button:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* ---- year on year: the figures, with the run a hover away ---- */
.pv-yy__wrap { position: relative; display: flex; flex: 1; flex-direction: column; }
/* the table's own box, so a narrow screen can scroll it sideways without
   taking the hover card — positioned against the wrap — along with it */
.pv-yy__scroll { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.pv-yy__head,
.pv-yy li {
  display: grid;
  gap: 0 1rem;
  align-items: center;
  grid-template-columns: 2.5rem minmax(0, 1fr) repeat(var(--n), minmax(3rem, 5rem)) 5rem;
}
.pv-yy__head {
  margin-top: .875rem;
  padding-bottom: .375rem;
  border-bottom: 1px solid var(--color-hairline);
  color: rgba(var(--color-foreground-rgb), .38);
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.pv-yy__head > span:nth-child(n+3) { text-align: right; }
.pv-yy__head .is-now { color: var(--color-foreground); }
.pv-yy { display: flex; margin: 0; padding: 0; flex: 1; flex-direction: column; list-style: none; }
.pv-yy li {
  flex: 1;
  min-height: 1.375rem;
  padding: .125rem 0;
  border-bottom: 1px solid rgba(var(--color-foreground-rgb), .05);
  cursor: default;
  transition: background-color .15s var(--ease-out);
}
.pv-yy li:last-child { border-bottom: 0; }
.pv-yy li:hover { background: var(--color-sunken); }
.pv-yy li.is-lead { border-bottom: 1px solid var(--color-hairline); }
.pv-yy li.is-lead .pv-yy__name { font-weight: 600; }
.pv-yy__id { color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em; }
.pv-yy__name { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.pv-yy__v { color: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: .75rem; text-align: right; }
.pv-yy__v.is-now { color: var(--color-foreground); font-size: .8125rem; font-weight: 500; }
.pv-yy__pct {
  display: flex;
  gap: .25rem;
  align-items: center;
  justify-content: flex-end;
  color: rgba(var(--color-foreground-rgb), .35);
  font-family: var(--font-mono);
  font-size: .6875rem;
}
.pv-yy__pct.is-real { color: var(--color-foreground); }

/* the card that rises on hover */
.pv-pop {
  position: absolute;
  z-index: 3;
  width: 13.5rem;
  padding: .75rem .875rem .625rem;
  border: 1px solid var(--color-hairline);
  border-radius: .625rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(var(--color-foreground-rgb), .12);
  pointer-events: none;
}
.pv-pop[hidden] { display: none; }
.pv-pop__name { margin: 0 0 .375rem; font-size: .75rem; font-weight: 600; letter-spacing: -.01em; }
.pv-pop svg { display: block; width: 100%; height: auto; overflow: visible; }
.pv-pop__line { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-pop__dot { fill: #fff; stroke: var(--color-accent); stroke-width: 2; }
.pv-pop__dot.is-now { fill: var(--color-accent); }
.pv-pop__foot { display: flex; margin-top: .5rem; padding-top: .5rem; gap: .875rem; align-items: baseline; border-top: 1px solid var(--color-hairline); }
.pv-pop__foot span { display: flex; flex-direction: column; color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5rem; letter-spacing: .06em; }
.pv-pop__foot b { color: var(--color-foreground); font-size: .8125rem; font-weight: 600; letter-spacing: -.02em; }
.pv-pop__chg { display: flex; gap: .25rem; align-items: center; margin-left: auto; font-family: var(--font-mono); font-size: .75rem; }

/* ---- the scale, as a legend under the rating ---- */
.pv-legend { display: flex; margin-top: .875rem; padding-top: .75rem; gap: .375rem 1.25rem; border-top: 1px solid var(--color-hairline); flex-wrap: wrap; }
.pv-legend__item {
  display: flex;
  gap: .375rem;
  align-items: baseline;
  color: rgba(var(--color-foreground-rgb), .4);
  font-size: .75rem;
}
.pv-legend__item b { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; }
.pv-legend__item.is-held { color: var(--color-foreground); }
.pv-legend__item i {
  padding: .0625rem .3125rem;
  border-radius: .25rem;
  background: var(--color-sunken);
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-style: normal;
  letter-spacing: .06em;
}

/* ---- TTM as slabs: bands down the side, a column per cycle ---- */
.pv-ttm { display: flex; margin-block: auto; flex-direction: column; gap: .1875rem; }
.pv-ttm__row { display: grid; gap: .1875rem; align-items: center; grid-template-columns: 5.25rem repeat(var(--n), minmax(0, 1fr)); }
.pv-ttm__band { color: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .05em; }
.pv-ttm__cell {
  height: 1.125rem;
  border-radius: .125rem;
  background: rgba(var(--color-foreground-rgb), .05);
}
/* only the band the cycle landed on is marked */
.pv-ttm__cell.is-on { background: rgba(var(--color-foreground-rgb), .42); }
.pv-ttm__cell.is-on.is-now { background: var(--color-accent); }
.pv-ttm__row--keys { margin-top: .25rem; }
.pv-ttm__row--keys span { color: rgba(var(--color-foreground-rgb), .42); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .06em; text-align: center; }
.pv-ttm__row--keys .is-now { color: var(--color-foreground); }

/* ---- development centre: two named centres, attended or not ---- */
.pv-dc { display: flex; margin: 0; padding: 0; flex: 1; flex-direction: column; justify-content: center; gap: .625rem; list-style: none; }
.pv-dc li { display: grid; gap: .75rem; align-items: center; grid-template-columns: 2.25rem minmax(0, 1fr) auto 3.25rem; }
.pv-dc li.is-none { color: rgba(var(--color-foreground-rgb), .35); }
.pv-dc__code {
  padding: .125rem .3125rem;
  border: 1px solid var(--color-hairline);
  border-radius: .25rem;
  color: rgba(var(--color-foreground-rgb), .4);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .06em;
  text-align: center;
}
.pv-dc__code.is-on { border-color: transparent; background: var(--color-accent); color: var(--color-inverted-foreground); }
.pv-dc__name { display: flex; gap: .4375rem; align-items: baseline; font-size: .8125rem; }
.pv-dc__name i { color: rgba(var(--color-foreground-rgb), .4); font-family: var(--font-mono); font-size: .5625rem; font-style: normal; letter-spacing: .06em; }
.pv-dc__band { font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; }
.pv-dc li.is-none .pv-dc__band { font-size: .75rem; font-weight: 400; }
.pv-dc__scale { display: flex; gap: .1875rem; }
.pv-dc__scale b { display: block; width: .875rem; height: .3125rem; border-radius: 999px; background: rgba(var(--color-foreground-rgb), .12); }
.pv-dc__scale b.is-on { background: var(--color-accent); }

/* ---- recognition: one card, the programmes filtering everything under ---- */
.pv-awards { display: grid; margin-bottom: 1rem; gap: .375rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-award {
  display: flex;
  padding: .625rem .75rem;
  gap: .625rem;
  align-items: baseline;
  border: 1px solid var(--color-hairline);
  border-radius: .625rem;
  background: var(--color-surface);
  color: var(--color-foreground);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.pv-award:hover { border-color: rgba(var(--color-foreground-rgb), .3); }
.pv-award__count { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pv-award__name { margin: 0; color: rgba(var(--color-foreground-rgb), .5); font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; }
.pv-award.is-on { border-color: transparent; background: var(--color-accent); }
.pv-award.is-on .pv-award__count { color: var(--color-inverted-foreground); }
.pv-award.is-on .pv-award__name { color: rgba(var(--color-accent-foreground-rgb), .7); }
.pv-award--empty { cursor: default; opacity: .45; }
.pv-award--empty:hover { border-color: var(--color-hairline); }
.pv-award:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.pv-cal { display: flex; flex: 1; flex-direction: column; }
/* a gap where one month gives way to the next */
.pv-cal__week.is-month { margin-left: .375rem; }

/* the awards of the year on show, under the calendar they belong to */
.pv-cited__head { display: flex; margin-top: .875rem; padding-top: .875rem; gap: 1rem; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--color-hairline); }
/* a long year flows into columns instead of scrolling */
.pv-cited { margin: .625rem 0 0; padding: 0; min-height: 0; columns: var(--cols, 1); column-gap: clamp(1.5rem, 3vw, 3rem); list-style: none; }
.pv-cited li { break-inside: avoid; margin-bottom: .4375rem; }
.pv-cited li:last-child { margin-bottom: 0; }
.pv-cited li { display: grid; gap: .875rem; align-items: baseline; grid-template-columns: 6rem 4.5rem minmax(0, 1fr); }
.pv-cited__day { color: rgba(var(--color-foreground-rgb), .45); font-family: var(--font-mono); font-size: .625rem; letter-spacing: .06em; }
.pv-cited__tag {
  padding: .125rem .375rem;
  border-radius: .25rem;
  background: var(--color-sunken);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .06em;
  text-align: center;
}
.pv-cited__text { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.pv-note--detail { margin-top: .625rem; }

/* the recognition card's own short-window trims sit here, after its base
   rules — a media block earlier in the sheet would lose to them on order */
@media (max-height: 56rem) {
  .pv-awards { margin-bottom: .625rem; }
  .pv-award { padding: .4375rem .625rem; }
  .pv-award__count { font-size: 1.125rem; }
  .pv-cited li { margin-bottom: .3125rem; }
  .pv-cited__head { margin-top: .625rem; padding-top: .625rem; }
  .pv-cited li { font-size: .75rem; }
}


/* =========================================================================
   RESPONSIVE — the same record, re-laid for a tablet and for a hand

   The desktop build is a single screen with nothing to scroll: every panel is
   tuned to land inside the viewport. A phone cannot hold a twelve-column
   dashboard, so below the tablet breakpoint that rule inverts. The chrome
   holds still — rail, bar, section tabs — and the cards scroll under it.

   What does not change is the reading: the same cards, in the same order,
   carrying the same figures. Nothing is dropped for being small, only re-laid
   — a table becomes rows of two lines, a wide chart takes a scroll of its own,
   a four-up becomes a two-up. This block sits last in the sheet on purpose:
   the rules above it are written desktop-first and several depend on source
   order, so the overrides have to come after them.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TABLET — 68rem and under
   Two columns rather than twelve. The rail is still a rail and the shell is
   still one screen, but a panel may now be taller than it, so the panel row
   is content-sized and the profile surface takes the scroll.
   ------------------------------------------------------------------------- */
@media (max-width: 68rem) {
  /* minmax(0, 1fr) capped the panel row at the screen; auto lets it run on
     and hands the overflow to .pv, which is the scroll container */
  .pv { grid-template-rows: auto auto auto; gap: .3125rem; }
  .pv-panel > .pv-grid { min-height: 0; align-content: start; }
  .pv-subpanel > .pv-grid { align-content: start; }

  /* nine and six were never stepped down at all, so the tiles row and the
     Performance split kept their desktop shape the whole way to a phone.
     Nine goes full width here; six holds until the phone block. */
  .pv-span-9 { grid-column: span 12; }

  /* cards sized themselves to fill a screen-height row; with the row now
     content-sized they should size to their own content instead */
  .pv-stack > .pv-card,
  #panel-performance .pv-stack > .pv-card,
  .pv-stack > [data-eng-extremes],
  .pv-stack > [data-eng-movement],
  .pv-stack > [data-cap-subordinate] { flex: 0 0 auto; }

  #panel-overview > .pv-grid { grid-template-rows: none; }
  #panel-overview .pv-tiles { min-height: 0; }
  .pv-card--tall { grid-row: auto; }

  /* the section tabs are the main navigation once a panel is taller than the
     screen, so they ride the top of the scroller. The negative margin lets
     the background bleed back over the surface gutter it would otherwise
     leave uncovered when stuck. */
  .pv-tabs {
    position: sticky;
    z-index: 6;
    top: calc(var(--pv-pad) * -1);
    margin: calc(var(--pv-pad) * -1) calc(var(--pv-pad) * -1) 0;
    padding: var(--pv-pad) var(--pv-pad) 0;
    background: var(--color-background);
  }

  .pv-run__keys { margin-left: calc(7rem + .875rem); }
  .pv-range li { grid-template-columns: 5.5rem minmax(0, 1fr) 3rem; }
  .pv-spread li { grid-template-columns: 5.5rem minmax(0, 1fr) 3rem; }
  .pv-run li { grid-template-columns: minmax(0, 7rem) minmax(4rem, 1fr) 2.25rem 3.25rem; }
  .pv-run__head { grid-template-columns: minmax(0, 7rem) minmax(4rem, 1fr) 2.25rem 3.25rem; }
}

/* the year-on-year table is a comparison across columns, so it keeps its
   shape and takes a scroll of its own rather than being stacked. The scroll
   is on an inner box so the hover card, which is positioned against the wrap,
   stays out of it. */
@media (max-width: 68rem) {
  .pv-yy__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .pv-yy__head,
  .pv-yy li { min-width: 30rem; }
}

/* -------------------------------------------------------------------------
   2. PHONE — 48rem and under
   One column. The rail becomes a drawer (already), and the bar folds up onto
   one row beside the menu button.
   ------------------------------------------------------------------------- */
@media (max-width: 47.999rem) {
  /* the menu button had a bar to itself, costing a whole row of a short
     screen; grid areas seat it beside the title bar without moving it in
     the markup, which login.html shares */
  .app__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "menu bar" "content content";
  }
  .app__mobilebar {
    grid-area: menu;
    padding: .375rem .25rem .375rem .625rem;
    border-bottom: 1px solid var(--color-hairline);
  }
  .app__bar {
    grid-area: bar;
    min-height: 0;
    padding: .375rem .625rem .375rem .25rem;
    gap: .625rem;
    row-gap: .375rem;
    border-bottom: 1px solid var(--color-hairline);
    flex-wrap: wrap;
  }
  .app__content { grid-area: content; min-height: 0; }
  .app__title { font-size: .9375rem; }
  .app__search { flex: 1 1 9rem; max-width: none; }

  /* the drawer and the surface both clear the notch and the home indicator */
  .sidebar {
    padding-left: max(1.125rem, env(safe-area-inset-left));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .pv {
    --pv-pad: .625rem;
    gap: .5rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  /* ---- one column, everywhere ---- */
  .pv-span-3, .pv-span-4, .pv-span-5,
  .pv-span-6, .pv-span-7, .pv-span-8, .pv-span-9 { grid-column: span 12; }
  .pv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .pv-stack { gap: .5rem; }
  .pv-card:not(.pv-lede) { padding: .875rem; }
  .pv-card { border-radius: .75rem; }
  .pv-card__head { gap: .625rem; flex-wrap: wrap; }

  /* ---- identity ---- */
  .pv-card--identity { gap: .75rem; padding-block: .75rem; padding-right: 2.5rem; }
  .pv-id__facts {
    display: grid;
    width: 100%;
    margin: 0;
    gap: .625rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pv-fieldpick__menu { width: min(15rem, calc(100vw - 2.5rem)); }
  /* the results list is as wide as the field it drops from, and on a phone
     that field is a sliver — so it breaks out to the edge of the screen */
  .app__results {
    left: auto;
    right: 0;
    width: min(21rem, calc(100vw - 1.25rem));
    max-height: 60vh;
  }

  /* ---- the section tabs ---- */
  .pv-tabs__list { gap: 0; scroll-padding-inline: 1rem; }
  .pv-tab { padding: .5625rem .625rem; font-size: .8125rem; }
  .pv-tab::after { right: .625rem; left: .625rem; }

  .pv-subtabs { padding: .125rem 0 .25rem; gap: .5rem; }
  .pv-subtabs__list { min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
  .pv-subtabs__list::-webkit-scrollbar { display: none; }
  .pv-subtabs__meta { display: none; }

  /* ---- the dark summary band ---- */
  .pv-lede { padding-inline: 1rem; }
  .pv-lede__row { padding-block: 1rem; gap: 1rem; }
  .pv-lede__title { font-size: 1.0625rem; }
  .pv-lede__body { font-size: .78125rem; line-height: 1.55; }
  /* three or four figures side by side get 80px each on a phone; two up
     gives each one room to keep its dial legible */
  .pv-pillarset {
    display: grid;
    width: 100%;
    gap: .875rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pv-pillarset__item { align-items: center; }
  .pv-dial--lede { width: 100%; max-width: 6rem; }
  .pv-lede__mini { font-size: .625rem; letter-spacing: .06em; }
  .pv-lede--fold[data-collapsed="true"] .pv-lede__mini { min-height: 2.75rem; }

  /* ---- overview ---- */
  .pv-matrix__row { grid-template-columns: 5.5rem repeat(3, minmax(0, 1fr)); }
  .pv-matrix--awards .pv-matrix__row { grid-template-columns: 3.75rem repeat(5, minmax(0, 1fr)); }
  .pv-matrix__key { font-size: .6875rem; }
  .pv-cell { font-size: .6875rem; }
  /* five cycles of four quarters of four programmes is eighty slots; shared
     across a phone they are a pixel each, so the field keeps a legible slot
     and scrolls instead */
  .pv-dots__plot {
    gap: .625rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: .25rem;
  }
  .pv-dots__grp { flex: 1 0 6.5rem; max-width: none; }
  .pv-dots__cols { gap: .1875rem; }
  .pv-dots__head { gap: .625rem; }
  .pv-dots__legend { gap: .3125rem; }
  .pv-dots__qs span { font-size: .5625rem; }

  /* ---- performance ---- */
  .pv-step { gap: 1.25rem; min-height: 9rem; }
  .pv-legend { gap: .375rem .875rem; }
  .pv-ttm__row { grid-template-columns: 4.75rem repeat(var(--n), minmax(0, 1fr)); }
  .pv-dc li { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .pv-dc__scale { display: none; }          /* the band is named beside it */
  .pv-readout { gap: 1rem 1.75rem; }

  /* ---- engagement: the hierarchy ---- */
  .pv-hier li { gap: 0 .625rem; grid-template-columns: 5.5rem minmax(0, 1fr) 2.5rem; }
  .pv-hier__name { font-size: .75rem; }

  /* ---- engagement: the Q12, one item to two lines ---- */
  /* the head row names columns that no longer sit in columns, so each figure
     names itself instead */
  .pv-q12__head { display: none; }
  .pv-q12__row {
    gap: .1875rem .625rem;
    padding: .5rem 0;
    min-height: 0;
    grid-template-columns: 2.5rem minmax(0, 1fr) 3.25rem 3.5rem;
    grid-template-areas:
      "id name  name   mean"
      "n  delta change pct";
  }
  .pv-q12__id { grid-area: id; }
  .pv-q12__name { grid-area: name; white-space: normal; overflow: visible; line-height: 1.3; }
  .pv-q12__mean { grid-area: mean; font-size: 1rem; }
  .pv-q12__n { grid-area: n; }
  .pv-q12__delta { grid-area: delta; }
  .pv-q12__change { grid-area: change; }
  .pv-q12__pct { grid-area: pct; }
  .pv-q12__n,
  .pv-q12__delta,
  .pv-q12__change,
  .pv-q12__pct { justify-content: flex-start; text-align: left; font-size: .625rem; }
  .pv-q12__n::before { content: "n "; }
  .pv-q12__delta::before { content: "vs co "; }
  .pv-q12__change::before { content: "chg "; }
  .pv-q12__pct::before { content: "pct "; order: -1; }
  .pv-q12__n::before,
  .pv-q12__delta::before,
  .pv-q12__change::before,
  .pv-q12__pct::before {
    color: rgba(var(--color-foreground-rgb), .35);
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* ---- engagement: movement, one item to two lines ---- */
  .pv-move li {
    gap: .25rem .625rem;
    padding: .375rem 0;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.75rem 2.75rem;
    grid-template-areas:
      "id    name  was   now"
      "track track track chg";
  }
  .pv-move__id { grid-area: id; }
  .pv-move__name { grid-area: name; }
  .pv-move__was { grid-area: was; }
  .pv-move__now { grid-area: now; }
  .pv-move__track { grid-area: track; }
  .pv-move__chg { grid-area: chg; }
  /* the head loses its columns but keeps the key that says which bar is which */
  .pv-move__head { display: flex; justify-content: center; margin-top: .625rem; }
  .pv-move__head > span:not(.pv-move__keys) { display: none; }

  /* ---- 360: the pillar head puts its bar on a line of its own ---- */
  .pv-gcf__head {
    gap: .375rem .625rem;
    grid-template-columns: 1.75rem minmax(0, 1fr) 2.5rem;
    grid-template-areas: "code pillar score" "bar bar bar";
  }
  .pv-gcf__code { grid-area: code; }
  .pv-gcf__pillar { grid-area: pillar; }
  .pv-gcf__score { grid-area: score; }
  .pv-gcf__head .pv-gcf__bar { grid-area: bar; }
  .pv-gcf__list { padding-left: 2.375rem; }
  .pv-gcf__list.is-split { display: flex; }
  .pv-compare { gap: .875rem; }

  /* ---- 360: trends ---- */
  .pv-run li {
    gap: .375rem .625rem;
    grid-template-columns: minmax(0, 1fr) 2.5rem 3.25rem;
    grid-template-areas: "name val chg" "bars bars bars";
  }
  .pv-run__name { grid-area: name; }
  .pv-run__val { grid-area: val; }
  .pv-run__chg { grid-area: chg; }
  .pv-run__bars { grid-area: bars; height: clamp(3rem, 12vw, 4.5rem); }
  .pv-run__head { display: none; }
  .pv-run__keys { margin-inline: 0; }
  /* the factor list already fits — it only needs its columns tightened */
  .pv-run--factors li {
    gap: .5rem;
    grid-template-columns: 1.75rem minmax(0, 1fr) 2rem 2rem 3rem;
    grid-template-areas: none;
  }
  .pv-run--factors .pv-run__name,
  .pv-run--factors .pv-run__val,
  .pv-run--factors .pv-run__chg { grid-area: auto; }
  .pv-run__head--factors {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1.75rem minmax(0, 1fr) 2rem 2rem 3rem;
  }
  .pv-card__meta--pick { gap: .3125rem; }

  /* ---- recognition ---- */
  .pv-awards { gap: .375rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-award { gap: .25rem; flex-direction: column; align-items: flex-start; }
  .pv-cal__head { gap: .5rem; }
  .pv-cal__years { flex-wrap: wrap; }
  /* fifty-three week columns will not fit a phone at a readable size, so the
     chart keeps its cell size and scrolls. The two grids are given matching
     week areas so the month strip stays over its own columns. */
  .pv-cal__body {
    overflow-x: auto;
    padding-bottom: .25rem;
    overscroll-behavior-x: contain;
  }
  .pv-cal__months { min-width: calc(34rem - var(--gutter) - var(--cell-gap)); }
  .pv-cal__chart { min-width: 34rem; }
  .pv-cal__days {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
  }
  .pv-cal__foot { gap: .5rem; }
  .pv-cited { columns: 1; }
  .pv-cited li {
    gap: .125rem .625rem;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "day tag" "text text";
  }
  .pv-cited__day { grid-area: day; }
  .pv-cited__tag { grid-area: tag; justify-self: start; }
  .pv-cited__text { grid-area: text; white-space: normal; overflow: visible; }

  /* ---- a floor under the smallest type ---- */
  /* 8px mono reads on a laptop at arm's length and does not read on a phone */
  .pv-cal__months span,
  .pv-cal__days span,
  .pv-cal__legend li,
  .pv-move__head,
  .pv-run__head,
  .pv-yy__head,
  .pv-pop__foot span,
  .pv-dots__chip,
  .pv-distkey,
  .pv-q12__dist.is-na { font-size: .5625rem; }
  .pv-card__meta, .pv-note, .pv-foot { font-size: .6875rem; }
}

/* -------------------------------------------------------------------------
   3. NARROW PHONE — 30rem and under
   ------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .pv-dial--card { max-width: 6.5rem; }
  .pv-dial--card .pv-dial__value { font-size: 1.375rem; }
  .pv-id__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; }
  .pv-lede__points { gap: .3125rem; }
  .pv-hier li { grid-template-columns: 4.75rem minmax(0, 1fr) 2.25rem; }
  .pv-q12__row { grid-template-columns: 2.25rem minmax(0, 1fr) 3rem 3rem; }
  .pv-matrix__row { grid-template-columns: 4.5rem repeat(3, minmax(0, 1fr)); }
  .pv-matrix--awards .pv-matrix__row { gap: .1875rem; grid-template-columns: 3.25rem repeat(5, minmax(0, 1fr)); }
  .pv-readout { gap: .75rem 1.25rem; }
  .pv-readout strong { font-size: .9375rem; }
  .app__title { display: none; }             /* the tabs already say where you are */
  .app__search { flex-basis: 100%; }
}

/* -------------------------------------------------------------------------
   4. TOUCH — anything driven by a finger rather than a pointer
   Sizes here are about reach, not about width: a tablet with a stylus and a
   phone both land in this block.
   ------------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* iOS zooms the page when a control under 16px takes focus, and never
     zooms back out */
  .app__search input,
  .pv-pick select { font-size: 1rem; }
  .pv-pick select { padding: .3125rem 1.5rem .3125rem .625rem; }

  /* controls to a thumb's size. Padding rather than height, so the type and
     the resting look stay as drawn. */
  .pv-tab { padding-block: .8125rem; }
  .pv-subtab { padding: .5rem .875rem; }
  .pv-dots__opt,
  .pv-cal__yr { padding: .4375rem .625rem; font-size: .625rem; }
  .pv-switch button { padding: .375rem .75rem; font-size: .625rem; }
  .pv-cal__clear { padding: .375rem .75rem; font-size: .625rem; }
  .pv-dots__chip { padding: .375rem .5rem; }
  .pv-award { padding: .75rem; }
  .pv-lede__toggle { top: .375rem; right: .375rem; width: 2rem; height: 2rem; }
  .pv-fieldpick__btn { width: 2rem; height: 2rem; }
  .pv-fieldpick__list label { padding: .5625rem .375rem; }
  .app__result { padding: .625rem .5rem; }
  .app__mobile-toggle { padding: .5rem; }

  /* a calendar cell is a few pixels wide by design; the ones that carry an
     award get a hit area around them instead of being drawn larger */
  button.pv-cal__cell { position: relative; }
  button.pv-cal__cell::after {
    position: absolute;
    inset: -.375rem;
    content: "";
  }

  /* hover states are a mouse's feedback — on a finger they stick after the
     tap and read as selection */
  .pv-card:hover { border-color: var(--color-hairline); box-shadow: none; }
  .pv-card--link:hover { border-color: var(--color-hairline); box-shadow: none; }
  .pv-card--link:active { border-color: rgba(var(--color-foreground-rgb), .32); }
  .pv-cal__cell:not(.is-pad):hover { transform: none; }
  .pv-yy li:hover { background: transparent; }
  .pv-yy li.is-open { background: var(--color-sunken); }

  * { -webkit-tap-highlight-color: rgba(var(--color-foreground-rgb), .06); }
}

/* the rail widens on hover, which a touch screen cannot do — so on touch it
   is only ever the drawer, and the icon strip is never left half open */
@media (pointer: coarse) and (max-width: 47.999rem) {
  .sidebar { transition: transform .42s var(--ease-soft); }
}

/* -------------------------------------------------------------------------
   5. SHORT AND WIDE — a phone held sideways
   The bar and the tabs together take a third of the height, so both give
   back what they can.
   ------------------------------------------------------------------------- */
@media (max-height: 30rem) and (max-width: 60rem) {
  .app__bar { padding-block: .25rem; }
  .app__mobilebar { padding-block: .25rem; }
  .pv-card--identity { padding-block: .5rem; }
  .pv-id__avatar { width: 2rem; height: 2rem; font-size: .75rem; }
  .pv-id__name { font-size: 1rem; }
  .pv-tab { padding-block: .5rem; }
  .pv-lede__row { padding-block: .75rem; }
}

/* -------------------------------------------------------------------------
   6. TRAILING FIXES — clearances that follow from the two blocks above
   ------------------------------------------------------------------------- */

/* a strip that scrolls should look like one: the last inch fades rather than
   ending on a hard edge, so there is a reason to swipe it */
@media (max-width: 68rem) {
  /* the fade sits on whichever side still has something past it, so the
     strip never fades a tab that is already the last one */
  .pv-tabs__list[data-edge="end"],
  .pv-subtabs__list[data-edge="end"] {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
  }
  .pv-tabs__list[data-edge="start"],
  .pv-subtabs__list[data-edge="start"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.75rem);
    mask-image: linear-gradient(90deg, transparent, #000 1.75rem);
  }
  .pv-tabs__list[data-edge="both"],
  .pv-subtabs__list[data-edge="both"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.75rem, #000 calc(100% - 1.75rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 1.75rem, #000 calc(100% - 1.75rem), transparent);
  }
}

@media (max-width: 47.999rem) {
  .pv-dots__filter { flex-wrap: wrap; }
  .pv-cal__lead { gap: .5rem; flex-wrap: wrap; }
  /* the calendar cell's grown hit area must not spill into the next column's */
  .pv-cal__body { padding-top: .125rem; }
}

/* the fold's toggle grew for a thumb, so the text beside it has to give way
   by the same amount or the two overlap on a narrow card */
@media (pointer: coarse) {
  .pv-lede__head,
  .pv-lede--fold .pv-lede__row,
  .pv-lede--fold .pv-lede__mini { padding-right: 2.5rem; }
  .pv-lede__head { min-height: 2rem; }
  .pv-lede--fold[data-collapsed="true"] .pv-lede__mini { min-height: 2.75rem; }
  .pv-card--identity { padding-right: 2.75rem; }
}

/* =========================================================================
   OPS PANEL — Upload Center, Records browser. Staff-only tooling built on
   the same design tokens as the profile view, so it reads as part of the
   app rather than a bolted-on admin tool.
   ========================================================================= */
.upl-drop {
  display: flex; flex-direction: column; gap: .5rem; align-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.5rem;
  border: 1px dashed var(--color-hairline);
  border-radius: .75rem;
  background: var(--color-sunken);
  text-align: center;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.upl-drop:has(input:focus-visible) { border-color: var(--color-accent); }
/* toggled by upload-drop.js while a file is dragged over the zone */
.upl-drop--drag { border-color: var(--color-accent); border-style: solid; background: var(--color-surface); }
.upl-drop__hint { margin: 0; color: rgba(var(--color-foreground-rgb), .5); font-size: .8125rem; }
.upl-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem 1rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  background: var(--color-accent);
  color: var(--color-inverted-foreground);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s var(--ease-out);
}
.upl-btn:hover { opacity: .82; }
.upl-btn--ghost {
  background: transparent;
  border-color: var(--color-hairline);
  color: var(--color-foreground);
}
.upl-btn--ghost:hover { background: var(--color-sunken); opacity: 1; }
.upl-btn--ghost.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-inverted-foreground); }
.upl-btn--danger { background: transparent; border-color: var(--color-hairline); color: rgba(var(--color-foreground-rgb), .55); }
.upl-btn--danger:hover { background: var(--color-sunken); color: var(--color-foreground); opacity: 1; }
.upl-btn--sm { padding: .375rem .75rem; font-size: .75rem; }

.upl-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.upl-result {
  padding: .875rem 1rem;
  border: 1px solid var(--color-hairline);
  border-radius: .625rem;
  background: var(--color-sunken);
}
.upl-result--err { border-color: rgba(var(--color-foreground-rgb), .3); background: var(--color-surface); }
.upl-result__title { margin: 0 0 .25rem; font-weight: 600; }
.upl-result__body { margin: 0; color: var(--color-body); font-family: var(--font-mono); font-size: .8125rem; white-space: pre-wrap; }

.upl-table { width: 100%; border-collapse: collapse; }
.upl-table th {
  padding: .5rem .625rem;
  border-bottom: 1px solid var(--color-hairline);
  color: rgba(var(--color-foreground-rgb), .5);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.upl-table td {
  padding: .625rem;
  border-bottom: 1px solid var(--color-hairline);
  font-size: .8125rem;
  vertical-align: top;
}
.upl-table tr:last-child td { border-bottom: none; }
.upl-table tr:hover td { background: var(--color-sunken); }
.upl-table select,
.upl-table input[type="search"] {
  padding: .375rem .5rem;
  border: 1px solid var(--color-hairline);
  border-radius: .375rem;
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: .8125rem;
}
.upl-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.upl-muted { color: rgba(var(--color-foreground-rgb), .5); }

.upl-status {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .125rem .5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.upl-status::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }
.upl-status--success { background: var(--color-accent); color: var(--color-inverted-foreground); }
.upl-status--failed { border: 1px solid var(--color-hairline); color: var(--color-foreground); }
.upl-status--undone { color: rgba(var(--color-foreground-rgb), .4); }

.upl-msg summary { cursor: pointer; color: var(--color-body); font-size: .8125rem; }
.upl-msg summary:hover { color: var(--color-foreground); }
.upl-msg[open] summary { margin-bottom: .375rem; }
.upl-msg pre {
  margin: 0; padding: .625rem;
  border-radius: .5rem;
  background: var(--color-sunken);
  color: var(--color-body);
  font-family: var(--font-mono);
  font-size: .75rem;
  white-space: pre-wrap;
  max-width: 26rem;
}

/* toolbar: search input + filter selects + submit, one row */
.upl-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .875rem; }
.upl-toolbar input[type="search"] { flex: 1 1 12rem; }

.upl-pagination { display: flex; align-items: center; gap: .75rem; margin-top: .875rem; font-size: .8125rem; }
.upl-pagination .upl-btn--ghost[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* rows that link somewhere (e.g. records -> that employee's profile): the
   whole row is the target, not just the text, via a stretched link over one
   cell's contents - keeps one real <a> per row rather than nesting links. */
.upl-table--linked tr { position: relative; cursor: pointer; }
.upl-table--linked tr:hover td { background: var(--color-sunken); }
.upl-row-link { position: static; color: inherit; text-decoration: none; font-weight: 500; }
.upl-row-link::after { content: ""; position: absolute; inset: 0; }
.upl-row-link:hover { text-decoration: underline; }