/* Page components — the parts of the library with no existing class family (issue #138).
   ══════════════════════════════════════════════════════════════════════════════════════════

   Almost every component in the library renders through markup the portal already ships and
   already styles: tiles are cp-tile, feature cards are visu-feature-card, report cards are
   compliance-report-card, the CTA band is visu-cta-section, the accordion is cap-card. That is
   what makes the library safe to make this broad at once — a component cannot introduce a new
   look, because there is no new look to introduce.

   Four things have no existing home, and they are here:

     .pc-steps      a numbered process
     .pc-stats      a row of headline figures
     .pc-callout    the semantic tone modifier on a compliance-notice
     .pc-laptop     a screenshot in a CSS-drawn laptop frame (issue #171)

   Written entirely against the semantic surface tokens from theme-surfaces.css, per
   Styles/README.md §2 — so each is correct on a light surface, on the chrome, and in dark mode
   without a second rule. No literal colours, and specifically no --accent as text: it is 2.24:1
   on white and is a fill only.

   Plain CSS, not SCSS, for the reason README §3 gives: `npx sass` needs Node, it is not installed
   on every machine, the Exec is ContinueOnError, and customerportal.min.css is a committed
   artifact that silently does not regenerate. A rule added to Styles/**/*.scss may never reach a
   browser. Do not name this file in Main.scss — tests assert its absence there. */

/* ── Steps ─────────────────────────────────────────────────────────────────────────────── */

.pc-steps {
    list-style: none;
    counter-reset: pc-step;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pc-step {
    counter-increment: pc-step;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* The number is drawn from the counter, never typed into the content: inserting a step renumbers
   the rest, and an author never maintains "3." by hand. */
.pc-step-marker {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chrome-fill, #001428);
    color: var(--chrome-ink, #fff);
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
}

.pc-step-marker::before { content: counter(pc-step); }

/* An icon replaces the number rather than crowding it. */
.pc-step-marker:has(i)::before { content: none; }

.pc-step-body { flex: 1 1 auto; min-width: 0; }

.pc-step-title {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--surface-ink, #0a1628);
    margin: .15rem 0 .25rem;
}

.pc-step-text {
    color: var(--surface-muted, #526880);
    margin: 0;
    line-height: 1.65;
}

.pc-step-text > *:last-child { margin-bottom: 0; }

/* ── Figures ───────────────────────────────────────────────────────────────────────────── */

.pc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pc-stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1.1rem 1.25rem;
    background: var(--surface-1, #fff);
    border: 1px solid var(--surface-rule, rgba(0, 55, 120, .1));
    border-radius: 6px;
}

.pc-stat-figure {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--surface-ink, #0a1628);
}

.pc-stat-label {
    font-family: var(--font-condensed, 'Barlow Condensed', sans-serif);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--surface-muted, #526880);
}

.pc-stat-note {
    font-size: .85rem;
    color: var(--surface-muted, #526880);
    line-height: 1.5;
}

/* ── Callout tone ──────────────────────────────────────────────────────────────────────────
   Semantic, not chromatic. An author says what a block MEANS — Info, Success, Warning, Danger —
   and the design language decides how that looks. There is no colour input anywhere in the
   authoring path, so a page cannot be authored outside the palette.

   Only the left rule and the icon carry the tone. The fill stays the neutral notice fill: four
   tinted blocks stacked would read as decoration, and Industrial Precision uses colour sparingly
   and structurally. */

.pc-callout { border-left-width: 4px; border-left-style: solid; }

.pc-callout--info { border-left-color: var(--surface-link, #0055a0); }
.pc-callout--info .compliance-notice-icon { color: var(--surface-link, #0055a0); }

.pc-callout--success { border-left-color: var(--bs-success, #198754); }
.pc-callout--success .compliance-notice-icon { color: var(--bs-success, #198754); }

/* The border carries the amber; the icon does not. --bs-warning is #ffc107, which is about
   1.6:1 on white — fine as a 4px rule, unreadable as a glyph. Darkening it would mean inventing
   a colour that is not in the palette, which is the one thing this file must not do. */
.pc-callout--warning { border-left-color: var(--bs-warning, #ffc107); }
.pc-callout--warning .compliance-notice-icon { color: var(--surface-ink, #0a1628); }

.pc-callout--danger { border-left-color: var(--bs-danger, #dc3545); }
.pc-callout--danger .compliance-notice-icon { color: var(--bs-danger, #dc3545); }

/* ── Accordion ─────────────────────────────────────────────────────────────────────────────
   The capabilities card, reused. Only what it needs to work as a section component: without
   script the panels render open, so content stays readable and findable either way. */

.pc-accordion-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
}

.pc-accordion-toggle .cap-card-chevron { margin-left: auto; transition: transform .15s ease; }

.pc-accordion-card[data-pc-open="false"] .pc-accordion-panel { display: none; }
.pc-accordion-card[data-pc-open="false"] .cap-card-chevron { transform: rotate(-90deg); }

/* ── Laptop screenshot (issue #171) ────────────────────────────────────────────────────────
   A screenshot presented in a laptop drawn entirely in CSS: bezel, camera dot, glass glare,
   hinged deck with a thumb-scoop notch, and an elliptical floor shadow. Ported from the rebrand
   theme's laptop-frame.module, restyled from that theme's literal device colours onto the
   chrome/surface tokens plus rgba() shading — no hex literals, so the guard above holds and
   dark mode needs no second rule. The wireframe placeholder renders when an item has no image
   yet: the frame is visible while a section is half-authored, and the component guide's sample
   proves the renderer without needing a seeded image. */

.pc-laptops {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin: 0 0 1.5rem;
}

.pc-laptop {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
}

.pc-laptop-screen {
    position: relative;
    background: var(--chrome-fill, #001f3f);
    padding: 14px 14px 18px;
    border-radius: 18px 18px 0 0;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.14),
        inset 0 0 0 3px rgba(255, 255, 255, 0.05),
        0 2px 10px rgba(0, 31, 63, 0.25);
}

.pc-laptop-cam {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.55) 65%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.pc-laptop-screen img {
    display: block;
    width: 100%;
    border-radius: 2px;
}

/* glass glare across bezel + screen */
.pc-laptop-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 42%);
}

.pc-laptop-base {
    position: relative;
    height: 18px;
    margin: 0 -5.5%;
    background-color: var(--chrome-muted, #c0d8ee);
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 2.5%, rgba(0, 0, 0, 0) 97.5%, rgba(0, 0, 0, 0.22)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 10%, rgba(255, 255, 255, 0.25) 52%, rgba(0, 20, 55, 0.10) 88%, rgba(0, 20, 55, 0.35) 100%);
    border-radius: 0 0 16px 16px / 0 0 9px 9px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 3px 3px -2px rgba(0, 20, 55, 0.28);
}

.pc-laptop-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 132px;
    height: 9px;
    background-color: var(--chrome-muted, #c0d8ee);
    background-image: linear-gradient(180deg, rgba(0, 20, 55, 0.30) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0.75) 100%);
    border-radius: 0 0 10px 10px;
    box-shadow: inset 0 2px 3px rgba(0, 10, 30, 0.30);
}

/* elliptical floor shadow */
.pc-laptop-base::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -15px;
    height: 16px;
    background: radial-gradient(ellipse at center, rgba(0, 31, 63, 0.30), rgba(0, 31, 63, 0) 68%);
    filter: blur(5px);
}

.pc-laptop-caption {
    text-align: center;
    margin-top: 26px;
    font-size: 0.85rem;
    color: var(--surface-muted, #526880);
}

/* The blueprint wireframe placeholder: a nav rail, three tiles, a lined table. */
.pc-laptop-ph {
    display: grid;
    grid-template-columns: 170px 1fr;
    min-height: 320px;
    background: var(--surface-2, #f2f5f9);
    border-radius: 2px;
    overflow: hidden;
}

.pc-laptop-ph-rail {
    background-color: var(--chrome-fill, #001f3f);
    background-image: repeating-linear-gradient(to bottom, transparent 0 16px, rgba(61, 184, 245, 0.16) 16px 26px);
    background-size: 65% 100%;
    background-position: 18px 18px;
    background-repeat: no-repeat;
}

.pc-laptop-ph-main {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-laptop-ph-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pc-laptop-ph-tiles > span {
    height: 56px;
    background: var(--surface-1, #fff);
    border: 1px solid var(--surface-rule, rgba(0, 55, 120, .1));
    border-top: 3px solid var(--chrome-muted, #c0d8ee);
    border-radius: 3px;
}

.pc-laptop-ph-table {
    flex: 1;
    min-height: 150px;
    background: var(--surface-1, #fff);
    border: 1px solid var(--surface-rule, rgba(0, 55, 120, .1));
    border-radius: 3px;
    background-image: repeating-linear-gradient(to bottom, transparent 0 26px, rgba(0, 55, 120, 0.05) 26px 27px);
}

@media (max-width: 560px) {
    .pc-laptop-screen { padding: 8px 8px 11px; border-radius: 11px 11px 0 0; }
    .pc-laptop-cam { top: 2px; width: 4px; height: 4px; }
    .pc-laptop-base { margin: 0 -3.5%; height: 12px; border-radius: 0 0 10px 10px / 0 0 6px 6px; }
    .pc-laptop-notch { width: 84px; height: 6px; }
    .pc-laptop-base::after { bottom: -10px; height: 10px; }
    .pc-laptop-ph { grid-template-columns: 1fr; }
    .pc-laptop-ph-rail { display: none; }
}