/* Analyze scene 03 - Company Pillars (2026-10): the ranked ladder, the
   scroll tour's chapters (laid out by analyze_tour.css) and the detailed
   cards' masonry. Its own file, as the Verdict's is analyze_dial.css -
   loaded only on Analyze (index.html's head_extra).
*/

/* ------------------------------------------------------------------
   Scene 3 - Company Pillars ladder. A real <table> (it IS the exact-
   values disclosure the radar's aria-label points to), styled as a
   ranked ladder of pills; td cells stay attribute-free by contract.
   ------------------------------------------------------------------ */
.pillar-ladder {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.4rem;
}
.pillar-ladder thead th {
    padding: 0 0.85rem 0.15rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    color: rgb(148 163 184);
}
.pillar-ladder thead th + th { text-align: right; }
/* Near-opaque panel rows: data rows must occlude the site's ambient
   constellation layer, not let its lines run through the numbers. */
.pillar-ladder tbody tr {
    background: rgb(17 23 34 / 0.92); /* --color-panel */
    transition: background-color 0.2s ease;
}
.pillar-ladder tbody tr:hover,
.pillar-ladder tbody tr.is-active { background: rgb(28 36 49 / 0.96); } /* --color-border */
.pillar-ladder tbody th,
.pillar-ladder tbody td { padding: 0.7rem 0.85rem; }
.pillar-ladder tbody th {
    width: 100%;
    text-align: left;
    font-weight: 600;
    color: rgb(226 232 240);
}
.pillar-ladder tbody td {
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-mono);
}
.pillar-ladder tbody td:nth-of-type(1) {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}
.pillar-ladder tbody td:nth-of-type(2) {
    font-size: 0.75rem;
    color: rgb(148 163 184);
}
.pillar-ladder tbody tr > :first-child { border-radius: 0.85rem 0 0 0.85rem; }
.pillar-ladder tbody tr > :last-child { border-radius: 0 0.85rem 0.85rem 0; }
.ladder-bar {
    display: block;
    height: 0.3rem;
    margin-top: 0.5rem;
    border-radius: 9999px;
    background: rgb(148 163 184 / 0.14);
    overflow: hidden;
}
.ladder-bar-fill {
    display: block;
    height: 100%;
    width: calc(var(--score, 0) * 1%);
    border-radius: inherit;
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 80ms + 0.3s);
}
.scenes-ready [data-reveal]:not(.is-revealed) .ladder-bar-fill { transform: scaleX(0); }

/* The tour (laid out by analyze_tour.css): the radar on the stage, sized
   to the room the sticky stage has; one chapter per scored pillar. A
   chapter's bar fills as the chapter is read - in step with its spoke
   growing on the radar. Hidden only under .scenes-ready (motion on), so
   reduced-motion and no-JS readers get every bar from the start. */
.pillar-tour-chart {
    position: relative;
    width: min(100%, 42rem, calc(100vh - var(--tour-top) - 4rem));
    width: min(100%, 42rem, calc(100svh - var(--tour-top) - 4rem));
    aspect-ratio: 1;
}
@media (max-width: 1023.98px) {
    .pillar-tour-chart { width: min(100%, 38svh, 24rem); }
}
/* Tablets have the height to let the shape own the screen, as it does on
   desktop; phones keep the room for the chapter passing beneath. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .pillar-tour-chart { width: min(100%, 44svh, 32rem); }
}
.pillar-chapter-rank {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(148 163 184);
}
.pillar-chapter-name {
    margin-top: 0.35rem;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}
.pillar-chapter-score {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-family: var(--font-mono);
}
.pillar-chapter-value { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1; }
.pillar-chapter-scale { font-size: 0.85rem; color: rgb(148 163 184); }
.pillar-chapter-weight { margin-left: auto; font-size: 0.75rem; color: rgb(148 163 184); }
.pillar-chapter .ladder-bar { height: 0.4rem; margin-top: 0.85rem; }
.pillar-chapter .ladder-bar-fill { transition-delay: 0.15s; }
.scenes-ready .is-touring .scene-tour-step:not(.is-read) .ladder-bar-fill { transform: scaleX(0); }
.pillar-chapter-note {
    margin-top: 0.9rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgb(203 213 225);
}
.pillar-summary {
    max-width: 46rem;
    margin: 3rem auto 0;
}
.pillar-summary-title {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(148 163 184);
}

/* The pillar cards follow the ladder full-width here, so let them use
   it: 2-3 masonry columns instead of one long stack. Scoped to the
   scene - the same partial must still fit a phone-width column. */
@media (min-width: 1024px) {
    .analyze-scene--pillars .bullpen-breakdown-cards {
        columns: 2;
        column-gap: 0.85rem;
    }
    .analyze-scene--pillars .bullpen-breakdown-cards > * {
        break-inside: avoid;
        margin: 0 0 0.85rem;
    }
}
@media (min-width: 1536px) {
    .analyze-scene--pillars .bullpen-breakdown-cards { columns: 3; }
}

/* Reduced motion: bars are simply there. Print: every bar at its true
   length - read, revealed or not - since paper can't scroll to fill one. */
@media (prefers-reduced-motion: reduce) {
    .ladder-bar-fill { transition: none; }
}
@media print {
    .ladder-bar-fill { transform: none !important; }
}