/* =========================================================================
   Homepage hero: CCO Intelligence Platform interactive preview (V2.3)
   Three simplified mini-dashboards (Staff, Management, Leadership) built by
   dev-tools/site/herodemo.mjs and driven by assets/js/cco-hero.js. Loaded on
   the homepage only. The card sits in the navy hero, continues the hero's
   square grid (site.js sets --grid-x/--grid-y and the panel offsets) and uses
   the site's navy, gold and Inter / Cormorant tokens from cco.css.
   ========================================================================= */

.pd {
  --pd-text: #EEF2F8;
  --pd-muted: #A9B6CB;
  --pd-faint: #8494AF;
  --pd-line: rgba(160,190,230,.14);
  --pd-screen: linear-gradient(180deg, #16294A 0%, #112240 100%);
  --pd-raise: rgba(255,255,255,.04);
  --pd-blue: #86B6F2;
  --pd-teal: #62C7DC;
  --pd-amber: #F0B04A;
  --pd-green: #4FCDA5;
  --pd-t: .38s;
  position: relative;
  margin: 0 var(--panel-mr, 0px) 0 var(--panel-ml, 0px);
  padding: clamp(18px, 1.9vw, 24px);
  border-radius: 16px;
  background: var(--grid-surface, #0E1F3A);
  border: 1px solid rgba(200,161,74,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 36px -24px rgba(3,9,22,.6), 0 44px 88px -48px rgba(0,0,0,.75);
  font-family: var(--sans);
  color: var(--pd-text);
}
.pd::before { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(226,199,136,.75), transparent); pointer-events: none; }
.pd.is-grid-aligned {
  background-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: var(--grid-x, 0) 0, 0 var(--grid-y, 0);
  background-repeat: repeat;
}
.pd p { margin: 0; }
.pd button { font: inherit; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pd button:focus-visible, .pd [tabindex="0"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Head and portal tabs ---------- */
.pd__head { margin: 0 0 14px; }
.hero--v21 .pd__title { margin: 0; font-family: var(--serif); font-size: clamp(25px, 2vw, 29px); line-height: 1.12; font-weight: 600; color: #fff; }
.pd__line { margin-top: 4px !important; font-size: 16px; line-height: 1.45; color: var(--pd-muted); }

.pd__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 12px; background: rgba(5,12,26,.55); border: 1px solid rgba(160,190,230,.12); }
.pd__tab { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-width: 0; min-height: 56px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: #BCC7D9; text-align: left; transition: background-color var(--pd-t) var(--ease), color var(--pd-t) var(--ease), box-shadow var(--pd-t) var(--ease); }
.pd__tab-name { font-size: 14.5px; white-space: nowrap; font-weight: 600; line-height: 1.2; }
.pd__tab-verb { font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--pd-faint); transition: color var(--pd-t) var(--ease); }
.pd__tab:hover { background: rgba(255,255,255,.045); color: #fff; }
.pd__tab[aria-selected="true"] { background: linear-gradient(180deg, rgba(200,161,74,.18), rgba(200,161,74,.06)); color: #fff; box-shadow: inset 0 0 0 1px rgba(200,161,74,.55); }
.pd__tab[aria-selected="true"] .pd__tab-verb { color: var(--gold-light); }

/* Panels share one grid cell, so the card always has the height of the
   tallest dashboard and switching portals never shifts the page. Without
   JavaScript only the first panel is shown ([hidden] on the others). */
.pd__stage { display: grid; }
.pd__panel { grid-area: 1 / 1; min-width: 0; display: flex; }
.pd__panel > .pd-screen { flex: 1 1 auto; }
.pd.is-ready .pd__panel { transition: opacity var(--pd-t) var(--ease), transform var(--pd-t) var(--ease), visibility 0s linear var(--pd-t); }
.pd.is-ready .pd__panel:not(.is-active) { opacity: 0; visibility: hidden; transform: translateY(6px); }
.pd.is-ready .pd__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.pd__note { display: flex; align-items: baseline; gap: 9px; margin-top: 12px !important; font-size: 13px; line-height: 1.45; color: var(--pd-faint); }
.pd__note::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .8; transform: translateY(-2px); }

/* ---------- Leadership Hub ---------- */
.pd-lead__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin: 8px 0 10px; }
.pd-score { display: flex; align-items: baseline; gap: 8px; }
.pd-score__v { font-family: var(--serif); font-size: 60px; font-weight: 600; line-height: .95; color: #fff; font-variant-numeric: lining-nums; }
.pd-score__of { font-size: 18px; font-weight: 600; color: var(--pd-muted); }
.pd-periods { display: grid; grid-template-columns: repeat(3, auto); gap: 4px; padding: 4px; border-radius: 10px; background: rgba(5,12,26,.42); border: 1px solid var(--pd-line); }
.pd-period { padding: 0 13px; white-space: nowrap; }
.pd-range { min-height: 22px; display: flex; align-items: center; gap: 9px; margin-bottom: 8px !important; font-size: 15px; font-weight: 500; color: var(--pd-muted); font-variant-numeric: tabular-nums; }

.pd-chart { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; flex: 1 1 auto; }
.pd-chart__y { position: relative; grid-row: 1; }
.pd-chart__y span { position: absolute; right: 0; top: var(--y); transform: translateY(-50%); font-size: 13px; font-weight: 500; color: var(--pd-faint); font-variant-numeric: tabular-nums; }
.pd-chart__plot { position: relative; grid-column: 2; height: clamp(140px, 13vw, 168px); border-radius: 6px; touch-action: pan-y; cursor: crosshair; }
.pd-chart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pd-chart__grid { stroke: rgba(160,190,230,.13); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.pd-chart__line { fill: none; stroke: var(--pd-teal); stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 6px 10px rgba(98,199,220,.22)); }
.pd-chart__end, .pd-chart__cursor { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; }
.pd-chart__end { background: var(--gold-light); box-shadow: 0 0 0 4px rgba(226,199,136,.22), 0 0 0 9px rgba(226,199,136,.08); }
.pd-chart__cursor { opacity: 0; background: #fff; border: 3px solid var(--pd-teal); transition: opacity .2s var(--ease); }
.pd-chart__cursor::after { content: ""; position: absolute; left: 50%; top: 7px; width: 1px; height: 400px; background: linear-gradient(180deg, rgba(98,199,220,.45), transparent 60%); transform: translateX(-50%); z-index: -1; }
.pd-tip { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; gap: 2px; min-width: 112px; padding: 9px 13px; border-radius: 10px; background: #F7F3EA; color: #0E1F3A; box-shadow: 0 14px 30px -12px rgba(0,0,0,.7); pointer-events: none; opacity: 0; transform: translate(var(--tx, -50%), calc(-100% - 16px)); transition: opacity .2s var(--ease); white-space: nowrap; }
.pd-tip__date { font-size: 13.5px; font-weight: 600; color: #5E6878; }
.pd-tip__v { font-size: 15px; font-weight: 600; }
.pd-tip__v b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-chart__plot.is-probing .pd-tip, .pd-chart__plot.is-probing .pd-chart__cursor { opacity: 1; }
.pd-chart__x { grid-column: 2; min-height: 20px; display: flex; justify-content: space-between; margin-top: 10px; font-size: 13.5px; font-weight: 500; color: var(--pd-faint); font-variant-numeric: tabular-nums; }
.pd-chart__x span { min-width: 0; white-space: nowrap; }
.pd-chart__x span:first-child { transform: translateX(-12%); }
.pd-chart__x span:last-child { transform: translateX(8%); }
.pd-chart__x.is-swapping, .pd-range.is-swapping { opacity: 0; }
.pd-chart__x, .pd-range { transition: opacity .2s var(--ease); }

@keyframes pd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pd-out { to { opacity: 0; transform: translateX(14px); } }
@keyframes pd-bump { 40% { transform: scale(1.18); } }

/* Compact, unboxed content on one navy surface. */
.pd { --pd-faint: #A9B6CB; padding: 22px; }
.pd__head { margin-bottom: 14px; }
.pd__tabs { padding: 0; gap: 12px; border: 0; border-bottom: 1px solid var(--pd-line); border-radius: 0; background: none; margin-bottom: 16px; }
.pd__tab { align-items: center; min-height: 44px; padding: 8px 0; border-radius: 0; border-bottom: 2px solid transparent; }
.pd__tab[aria-selected="true"] { background: none; box-shadow: none; color: var(--gold-light); border-bottom-color: var(--gold-light); }
.pd-screen { display: flex; flex-direction: column; min-width: 0; }
.pd-h { font-size: 20px; font-weight: 600; line-height: 1.3; color: #EEF2F8; }
.pd-sub { font-size: 15px; line-height: 1.5; color: var(--pd-muted); }
.pd-text { margin-top: 10px !important; font-size: 16px; line-height: 1.55; color: var(--pd-muted); max-width: 34ch; }
.pd-context { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-responsibility { margin: auto 0; padding: 24px 0; }
.pd-resolution { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 8px; }
.pd-status { color: var(--gold-light); font-size: 14px; line-height: 1.5; transition: color .25s; }
.pd-owner { color: var(--pd-muted); margin-top: 4px !important; }
.pd-action { min-height: 44px; border: 1px solid #D4B36A; border-radius: 7px; background: #D4B36A; color: #0E1F3A; padding: 10px 16px; font-size: 14px !important; font-weight: 600 !important; transition: background .25s, color .25s; }
.pd-action:hover { background: #E2C788; }
.pd-action[aria-disabled="true"] { background: transparent; color: #BDF0DF; border-color: #719D92; cursor: default; }
.pd-simple.is-complete .pd-status { color: #BDF0DF; }
.pd-lead__top { margin: 12px 0 16px; align-items: center; }
.pd-score__v { font-size: 52px; }
.pd-periods { border: 0; background: none; padding: 0; gap: 2px; }
.pd-period { padding: 0 10px; font-size: 14px !important; }
.pd-range { display: none; }
.pd-chart__plot { height: 116px; }
.pd-chart__line { stroke: #D9BE80; filter: none; }
.pd-chart__cursor { border-color: #D9BE80; }
.pd-chart__cursor::after { display: none; }
.pd-chart__area { opacity: .35; }
.pd__note { margin-top: 14px !important; font-size: 12px; }
.pd-tip.is-below { transform: translate(var(--tx, -50%), 18px); }
@media (max-width: 560px) {
  .pd { padding: 18px; border-radius: 14px; }
  .hero--v21 .pd__title { font-size: 25px; }
  .pd__line { font-size: 15px; }
  .pd__tabs { gap: 8px; margin-bottom: 18px; }
  .pd__tab-name { font-size: 14px; }
  .pd-lead__top { flex-wrap: wrap; gap: 14px; }
  .pd-periods { width: 100%; grid-template-columns: repeat(3, 1fr); }
  .pd-period { padding: 0 6px; }
  .pd-chart__plot { height: 112px; }
  .pd-chart__x span:nth-child(even) { visibility: hidden; }
  .pd-resolution { align-items: flex-start; flex-direction: column; gap: 14px; }
  .pd__note { max-width: 30ch; }
}
@media (prefers-reduced-motion: reduce) {
  .pd *, .pd *::before, .pd *::after { animation: none !important; transition: none !important; }
}

.pd-period { min-height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--pd-muted); font-weight: 600 !important; transition: color .25s, background .25s; }
.pd-period:hover { color: #fff; background: rgba(255,255,255,.05); }
.pd-period[aria-pressed="true"] { color: var(--gold-light); background: rgba(200,161,74,.12); }
.pd-chart__x { line-height: 20px; }

/* November 2026: hub tabs carry their step in the workflow (Record, Follow
   up, Oversee) so the Staff Hub to Manager Hub to Leadership Hub sequence is
   explicit; the footer pairs the demonstration notice with a link to the
   real application screenshots on /platform. */
.pd__tab { flex-direction: column; gap: 2px; }
.pd__tab .pd__tab-verb { font-size: 10.5px; letter-spacing: .12em; }
.pd__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-top: 14px; }
.pd__foot .pd__note { margin-top: 0 !important; }
.pd__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--gold-light); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(226,199,136,.45); }
.pd__link:hover { color: #fff; text-decoration-color: currentColor; }
.pd__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 560px) {
  .pd__tabs { gap: 6px; }
  .pd__tab { padding-inline: 2px; text-align: center; }
  .pd__tab-name { white-space: normal; font-size: 13.5px; line-height: 1.2; }
  .pd__tab .pd__tab-verb { font-size: 9.5px; letter-spacing: .08em; }
  .pd__foot .pd__note { max-width: none; }
}

/* =========================================================================
   November 2026 refinement: automatic portal rotation and premium finish.
   Staff Hub (Record), Manager Hub (Follow up) and Leadership Hub (Oversee)
   rotate every 5 s (assets/js/cco-hero.js). A single gold line glides under
   the active tab and fills over the interval; it is the rotation timer.
   ========================================================================= */
.pd {
  --pd-gold: #D9BE80;
  --pd-ease: cubic-bezier(.22,.61,.36,1);
  --pd-swap: .5s;
  --pd-depth:
    radial-gradient(120% 70% at 100% 0%, rgba(200,161,74,.07), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(98,140,210,.06), transparent 65%),
    linear-gradient(165deg, #142B4F 0%, #0F2140 46%, #0B1A33 100%);
  padding: clamp(18px, 2vw, 26px);
  background: var(--pd-depth);
  border: 1px solid rgba(200,161,74,.2);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.012),
    0 1px 2px rgba(3,9,22,.35),
    0 22px 44px -26px rgba(3,9,22,.7),
    0 56px 96px -56px rgba(0,0,0,.6);
}
.pd::before { left: 40px; right: 40px; background: linear-gradient(90deg, transparent, rgba(226,199,136,.55), transparent); }
.pd.is-grid-aligned {
  background-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(120% 70% at 100% 0%, rgba(200,161,74,.07), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(98,140,210,.06), transparent 65%),
    linear-gradient(165deg, #142B4F 0%, #0F2140 46%, #0B1A33 100%);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), 100% 100%, 100% 100%, 100% 100%;
  background-position: var(--grid-x, 0) 0, 0 var(--grid-y, 0), 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
}

/* ---------- Head and pause control ---------- */
.pd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pd__head-c { min-width: 0; }
.hero--v21 .pd__title { letter-spacing: -.005em; }
.pd__line { font-size: 15px; color: var(--pd-muted); }
.pd__pause { flex: 0 0 auto; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-top: 2px; padding: 0; border: 1px solid rgba(200,161,74,.24); border-radius: 50%; background: rgba(5,12,26,.35); color: var(--pd-muted); transition: color .25s var(--pd-ease), border-color .25s var(--pd-ease), background-color .25s var(--pd-ease); }
.pd__pause[hidden] { display: none; }
.pd__pause:hover { color: var(--gold-light); border-color: rgba(200,161,74,.5); background: rgba(200,161,74,.08); }
.pd__pause svg { width: 14px; height: 14px; }
.pd__pause-i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pd__play-i { fill: currentColor; display: none; }
.pd__pause.is-play .pd__pause-i { display: none; }
.pd__pause.is-play .pd__play-i { display: block; }

/* ---------- Portal tabs and the gliding gold line ---------- */
.pd__tabs { position: relative; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid rgba(160,190,230,.12); }
.pd__tab { position: relative; align-items: flex-start; min-height: 52px; padding: 8px 4px 10px; color: #AFBBCF; transition: color .45s var(--pd-ease); }
.pd__tab:hover { background: none; color: #fff; }
.pd__tab-name { font-size: 14.5px; font-weight: 600; letter-spacing: .005em; }
.pd__tab .pd__tab-verb { font-size: 10px; letter-spacing: .16em; color: #7F8EA8; transition: color .45s var(--pd-ease); }
.pd__tab[aria-selected="true"] { color: #fff; }
.pd__tab[aria-selected="true"] .pd__tab-verb { color: var(--gold-light); }
.pd__ink { display: none; }
.pd.is-ready .pd__tab[aria-selected="true"] { border-bottom-color: transparent; }
.pd.is-ready .pd__ink {
  display: block; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--ink-w, 33%);
  border-radius: 2px; background: var(--pd-gold); overflow: hidden; pointer-events: none;
  transform: translateX(var(--ink-x, 0));
  transition: transform .55s var(--pd-ease), width .55s var(--pd-ease);
}
/* While rotating, the line is a faint gold track that fills over 5 s. */
.pd.is-rotating .pd__ink { background: rgba(217,190,128,.22); }
.pd__ink-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(200,161,74,.9), #E8D19C); transform-origin: left center; transform: scaleX(0); display: none; }
.pd.is-rotating .pd__ink-fill { display: block; }
.pd__ink-fill.is-running { animation: pd-fill 5s linear forwards; }
.pd.is-paused .pd__ink-fill { animation-play-state: paused; }
@keyframes pd-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Portal transitions: fade with a slight horizontal drift ---------- */
.pd.is-ready .pd__panel { transition: opacity var(--pd-swap) var(--pd-ease), transform var(--pd-swap) var(--pd-ease), visibility 0s linear var(--pd-swap); }
.pd.is-ready .pd__panel:not(.is-active) { opacity: 0; visibility: hidden; transform: translateX(var(--pd-off, 14px)); }
.pd.is-ready .pd__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 60ms, 60ms, 0s; }
.pd.is-ready .pd__panel.is-instant { transition: none; }
.pd-screen.is-entering .pd-list > li,
.pd-screen.is-entering .pd-stat,
.pd-screen.is-entering .pd-progress { animation: pd-rise .55s var(--pd-ease) both; }
.pd-screen.is-entering .pd-list > li:nth-child(1), .pd-screen.is-entering .pd-stat:nth-child(1) { animation-delay: 120ms; }
.pd-screen.is-entering .pd-list > li:nth-child(2), .pd-screen.is-entering .pd-stat:nth-child(2) { animation-delay: 180ms; }
.pd-screen.is-entering .pd-list > li:nth-child(3), .pd-screen.is-entering .pd-stat:nth-child(3) { animation-delay: 240ms; }
.pd-screen.is-entering .pd-list > li:nth-child(4) { animation-delay: 300ms; }
.pd-screen.is-entering .pd-progress { animation-delay: 80ms; }
@keyframes pd-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- Shared content elements ---------- */
.pd-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.pd-h { font-size: 18px; letter-spacing: .002em; color: #F2F5FA; }
.pd-chip { flex: 0 0 auto; padding: 3px 9px; border: 1px solid rgba(200,161,74,.28); border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: rgba(226,199,136,.9); }
.pd-sub { margin-top: 4px !important; font-size: 14px; }
.pd-list { list-style: none; margin: 0; padding: 0; }
.pd-staff, .pd-mgmt { gap: 0; }
.pd-staff .pd-resolution, .pd-mgmt .pd-resolution { margin-top: auto; padding: 14px 0 2px; border-top: 1px solid rgba(160,190,230,.1); gap: 12px 16px; }
.pd-status { font-size: 13.5px; font-weight: 500; }
.pd-action { padding: 9px 16px; border-color: #D4B36A; background: linear-gradient(180deg, #DDBF7C, #CDAA5F); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px rgba(200,161,74,.55); transition: background .25s, color .25s, box-shadow .25s, border-color .25s; }
.pd-action:hover { background: linear-gradient(180deg, #E6CC92, #D6B56E); }
.pd-action[aria-disabled="true"] { background: transparent; box-shadow: none; }

/* ---------- Staff Hub: daily operational record ---------- */
.pd-progress { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; margin: 16px 0 6px; }
.pd-progress__l { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8C9AB3; }
.pd-progress__v { font-size: 13.5px; color: var(--pd-muted); font-variant-numeric: tabular-nums; }
.pd-progress__v b { font-family: var(--serif); font-size: 20px; font-weight: 600; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.pd-bar { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 3px; background: rgba(160,190,230,.12); overflow: hidden; }
.pd-bar__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(200,161,74,.75), var(--pd-gold)); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .7s var(--pd-ease); }
.pd-bar__fill.is-filling { animation: pd-bar .9s var(--pd-ease) both; }
@keyframes pd-bar { from { transform: scaleX(0); } }
.pd-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(160,190,230,.08); font-size: 14px; line-height: 1.4; }
.pd-item:first-child { border-top: 0; }
.pd-item__t { min-width: 0; color: #DCE3EE; }
.pd-item__m { font-size: 12.5px; color: #8C9AB3; font-variant-numeric: tabular-nums; }
.pd-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px dashed rgba(169,182,203,.5); transition: background-color .35s var(--pd-ease), border-color .35s var(--pd-ease); }
.pd-check svg { width: 10px; height: 10px; fill: none; stroke: #0E1F3A; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s var(--pd-ease); }
.pd-item.is-done .pd-check, .is-complete [data-pd-last] .pd-check { border: 1px solid var(--pd-gold); background: var(--pd-gold); }
.pd-item.is-done .pd-check svg, .is-complete [data-pd-last] .pd-check svg { opacity: 1; }
.pd-item.is-done .pd-item__t { color: #C3CCDA; }
[data-pd-last] .pd-item__t { color: #fff; font-weight: 500; }
[data-pd-last] .pd-item__m { color: var(--gold-light); }
.is-complete [data-pd-last] .pd-item__m { color: #8C9AB3; }

/* ---------- Manager Hub: follow-up queue ---------- */
.pd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 8px; border: 1px solid rgba(160,190,230,.1); border-radius: 10px; background: rgba(5,12,26,.28); }
.pd-stat { display: grid; gap: 2px; padding: 10px 12px; min-width: 0; }
.pd-stat + .pd-stat { border-left: 1px solid rgba(160,190,230,.1); }
.pd-stat b { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.pd-stat span { font-size: 11.5px; line-height: 1.3; color: #9AA8BF; }
.pd-row { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 9px 0; border-top: 1px solid rgba(160,190,230,.08); }
.pd-row:first-child { border-top: 0; }
.pd-row__c { min-width: 0; }
.pd-row__t { font-size: 14px; font-weight: 500; line-height: 1.35; color: #E6EBF3; }
.pd-row__m { margin-top: 2px !important; font-size: 12.5px; line-height: 1.4; color: #8C9AB3; }
.pd-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; transition: background-color .35s var(--pd-ease), color .35s var(--pd-ease); }
.pd-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pd-pill--amber { color: #F2C77A; background: rgba(240,176,74,.12); }
.pd-pill--blue { color: #A9CBF5; background: rgba(134,182,242,.12); }
.pd-pill--green { color: #9EDCC6; background: rgba(79,205,165,.11); }
.is-complete .pd-pill--live { color: var(--gold-light); background: rgba(200,161,74,.14); }

/* ---------- Leadership Hub: organizational health ---------- */
.pd-lead .pd-lead__top { margin: 14px 0 14px; }
.pd-score__v { font-variant-numeric: lining-nums tabular-nums; }
.pd-period[aria-pressed="true"] { color: var(--gold-light); background: rgba(200,161,74,.1); box-shadow: inset 0 0 0 1px rgba(200,161,74,.22); }
.pd-period { transition: color .3s var(--pd-ease), background-color .3s var(--pd-ease), box-shadow .3s var(--pd-ease); }
/* The chart takes any height the taller portals leave, so all three portals
   fill the same card without empty space. */
.pd-lead .pd-chart { grid-template-rows: minmax(0, 1fr) auto; }
.pd-lead .pd-chart__plot { height: auto; min-height: 116px; }
.pd-chart__area { opacity: .4; }
.pd-chart__end { background: var(--gold-light); box-shadow: 0 0 0 4px rgba(226,199,136,.16), 0 0 0 8px rgba(226,199,136,.05); }

/* ---------- Footer ---------- */
.pd__foot { margin-top: 12px; padding-top: 4px; }

@media (max-width: 560px) {
  .pd__head { margin-bottom: 14px; }
  .pd__tabs { margin-bottom: 16px; }
  .pd__tab { align-items: center; padding-inline: 2px; }
  .pd__tab .pd__tab-verb { font-size: 9px; letter-spacing: .06em; white-space: nowrap; }
  .pd-item { gap: 10px; font-size: 13.5px; }
  .pd-item__m { font-size: 12px; }
  .pd-stat { padding: 9px 10px; }
  .pd-stat b { font-size: 23px; }
  .pd-stat span { font-size: 11px; }
  .pd-row { gap: 10px; }
  .pd-row__t { font-size: 13.5px; }
  .pd-pill { padding: 2px 8px 2px 7px; font-size: 11px; }
  .pd-staff .pd-resolution, .pd-mgmt .pd-resolution { flex-direction: row; align-items: center; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .pd.is-ready .pd__panel:not(.is-active) { transform: none; }
}