/* =============================================================================
   ECC PROCESS PORTAL — /processes   (2026-10-09, the user's mockup)
   -----------------------------------------------------------------------------
   Top bar, ticker, sidebar, and a Home that fits ONE desktop screen: hero +
   Live System, the eight Group Companies (their own photographs, each in its
   tone), Live Activity / Latest Approved / Announcements, Quick Access + the
   Group's line. Smaller screens stack and scroll.

   A public page with no app shell and no Tailwind. Every class is prefixed
   `pp-` so nothing here collides with the staff app, and nothing reaches in.

   THREE LOOKS, ONE MARKUP — html[data-look] carries only tokens:
     A  trading floor   — black terminal, amber/green tape, monospaced figures
     B  financial paper — warm paper, serif headlines, black ticker band
     C  ECC navy & gold — the default and the mockup (#06152B, #E5B94F)
   ============================================================================= */

/* ---------------------------------------------------------------- tokens -- */
html[data-look="C"], html:not([data-look]) {
    --bg: #06152b;
    --bg-2: #041126;
    --panel: #0a203b;
    --panel-hi: #102945;
    --line: #243b55;
    --line-soft: rgba(168, 184, 204, .12);
    --ink: #f4f7fc;
    --ink-2: #a8b8cc;
    --mute: #7589a4;
    --accent: #e5b94f;
    --accent-hi: #f6d17a;
    --accent-ink: #1a1203;
    --up: #21d6a0;
    --info: #39a8ff;
    --warn: #ffbd59;
    --down: #ff6978;
    --tape-bg: #041126;
    --tape-ink: #dfe7f5;
    --tape-key: #e5b94f;
    --tape-line: #1a2f4b;
    --hero-sky: #142339;
    --display: 'Hanken Grotesk', 'Segoe UI', sans-serif;
    --body: 'Hanken Grotesk', 'Segoe UI', sans-serif;
    --num: 'IBM Plex Mono', Consolas, monospace;
    --serif: 'Instrument Serif', Georgia, serif;
    --h-weight: 700;
    --h-track: -0.025em;
    --radius: 16px;
    --radius-s: 10px;
    --shadow: 0 24px 48px -32px rgba(0, 0, 0, .85);
    color-scheme: dark;
}
html[data-look="A"] {
    --bg: #050706;
    --bg-2: #000;
    --panel: #0b100e;
    --panel-hi: #111a16;
    --line: #1f2d26;
    --line-soft: #16211c;
    --ink: #d8e6dd;
    --ink-2: #a9bdb0;
    --mute: #6f877a;
    --accent: #f5b84a;
    --accent-hi: #ffd27a;
    --accent-ink: #120c00;
    --up: #3ddc84;
    --info: #5ab0ff;
    --warn: #f5b84a;
    --down: #ff5c4d;
    --tape-bg: #000;
    --tape-ink: #cfe0d5;
    --tape-key: #f5b84a;
    --tape-line: #1f2d26;
    --hero-sky: #0a0f0c;
    --display: 'IBM Plex Mono', Consolas, monospace;
    --body: 'Hanken Grotesk', 'Segoe UI', sans-serif;
    --num: 'IBM Plex Mono', Consolas, monospace;
    --serif: 'IBM Plex Mono', Consolas, monospace;
    --h-weight: 600;
    --h-track: -0.02em;
    --radius: 4px;
    --radius-s: 3px;
    --shadow: none;
    color-scheme: dark;
}
html[data-look="B"] {
    --bg: #fff1e5;
    --bg-2: #fbe6d4;
    --panel: #fff8f1;
    --panel-hi: #fbe9da;
    --line: #d9c1ab;
    --line-soft: #ead8c6;
    --ink: #2a2725;
    --ink-2: #4d4843;
    --mute: #776b60;
    --accent: #0d7680;
    --accent-hi: #0f8d99;
    --accent-ink: #ffffff;
    --up: #0a7d5a;
    --info: #1d5fa8;
    --warn: #a35f00;
    --down: #c4132f;
    --tape-bg: #1a1817;
    --tape-ink: #fff1e5;
    --tape-key: #f6b7a5;
    --tape-line: #1a1817;
    --hero-sky: #0f1d34;
    --display: 'Instrument Serif', Georgia, serif;
    --body: 'Hanken Grotesk', 'Segoe UI', sans-serif;
    --num: 'IBM Plex Mono', Consolas, monospace;
    --serif: 'Instrument Serif', Georgia, serif;
    --h-weight: 400;
    --h-track: 0;
    --radius: 2px;
    --radius-s: 2px;
    --shadow: none;
    color-scheme: light;
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body.pp {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.55 var(--body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
html[data-look="A"] body.pp {
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px), var(--bg);
}
html[data-look="B"] body.pp {
    background: radial-gradient(rgba(120, 80, 40, .045) 1px, transparent 1px) 0 0 / 4px 4px, var(--bg);
}
.pp a { color: inherit; text-decoration: none; }
.pp a:hover { color: var(--accent); }
.pp h1, .pp h2, .pp h3 {
    font-family: var(--display);
    font-weight: var(--h-weight);
    letter-spacing: var(--h-track);
    margin: 0;
    line-height: 1.1;
}
.pp code, .pp-num { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: .92em; }
.pp-mute { color: var(--mute); }
.pp-sr, .pp-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: var(--radius-s); font-weight: 700; }
.pp-skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.pp-kicker, .pp-eyebrow {
    margin: 0 0 10px;
    font: 600 11.5px/1.2 var(--num);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex; align-items: center; gap: 10px;
}
.pp-wrap { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.pp-empty { color: var(--mute); padding: 20px 2px; margin: 0; list-style: none; }
.pp-link { color: var(--accent); font-weight: 600; font-size: 13.5px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.pp-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================= frame == */
/* The user's mockup (2026-10-09): top bar, ticker, sidebar, page. */
.pp-top {
    position: sticky; top: 0; z-index: 50;
    height: 64px; display: flex; align-items: center; gap: 18px; padding: 0 22px;
    background: var(--bg-2); border-bottom: 1px solid var(--line-soft);
}
.pp-logo { flex: none; width: 178px; display: flex; align-items: center; gap: 11px; color: var(--ink); }
.pp a.pp-logo:hover { color: var(--ink); }
.pp-emblem {
    flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 34% 28%, #f8dc8f, #d6a23d 55%, #8f6118);
    box-shadow: 0 0 0 1px rgba(229, 185, 79, .45), 0 8px 20px -10px rgba(229, 185, 79, .8);
}
.pp-emblem svg { width: 30px; height: 30px; fill: none; stroke: #2b1b03; stroke-width: 2.6; stroke-linecap: round; }
.pp-emblem svg circle { stroke-width: 1.4; opacity: .55; }
.pp-emblem svg circle.t { opacity: .3; stroke-width: 1; }
.pp-logo-t { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.pp-logo-t b { font: 800 19px/1 var(--body); letter-spacing: .01em; }
.pp-logo-t small { margin-top: 4px; font: 700 8.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.pp-top-sep { flex: none; width: 1px; height: 34px; background: var(--line); }
.pp-top-title { flex: none; display: flex; flex-direction: column; line-height: 1.25; }
.pp-top-title b { font: 700 15.5px var(--body); }
.pp-top-title small { font-size: 11.5px; color: var(--mute); }
.pp-search { position: relative; flex: 1 1 auto; max-width: 520px; margin: 0 auto; }
.pp-search > svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.pp-search input {
    width: 100%; height: 40px; padding: 0 40px 0 42px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 14px var(--body);
    transition: border-color .2s, box-shadow .2s;
}
.pp-search input::placeholder { color: var(--mute); }
.pp-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pp-search kbd { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font: 600 11px var(--num); color: var(--mute); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; }
.pp-tools { flex: none; display: flex; align-items: center; gap: 14px; }
.pp-bell { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); }
.pp a.pp-bell:hover { color: var(--ink); background: var(--panel); }
.pp-bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pp-bell i {
    position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    font: 700 10.5px/18px var(--body); font-style: normal; text-align: center; color: #fff; background: #e5484d;
    box-shadow: 0 0 0 2px var(--bg-2);
}
.pp-user { position: relative; }
.pp-user summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 12px; cursor: pointer; }
.pp-user summary::-webkit-details-marker { display: none; }
.pp-user summary:hover, .pp-user[open] summary { background: var(--panel); }
.pp-user summary > svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.pp-user[open] summary > svg { transform: rotate(180deg); }
.pp-user-ava {
    flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    font: 800 13px var(--body); color: #2b1b03; background: linear-gradient(135deg, #f8d988, #c9922f);
    box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3px rgba(229, 185, 79, .55);
}
.pp-user-ava.has-photo { padding: 0; overflow: hidden; }
.pp-user-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }   /* the Microsoft photo */
.pp-user-t { display: flex; flex-direction: column; line-height: 1.25; max-width: 180px; }
.pp-user-t b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-user-t small { font-size: 11.5px; color: var(--mute); }
.pp-user-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 240px; padding: 8px;
    background: var(--panel-hi); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .75);
}
.pp-user-mail { margin: 4px 10px 8px; padding-bottom: 8px; font-size: 12px; color: var(--mute); border-bottom: 1px solid var(--line-soft); overflow: hidden; text-overflow: ellipsis; }
.pp-user-menu a, .pp-user-menu button {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px;
    background: none; color: var(--ink); font: 600 13.5px var(--body); text-align: left; cursor: pointer;
}
.pp-user-menu a:hover, .pp-user-menu button:hover { background: var(--panel); color: var(--accent); }
.pp-user-menu svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-signin-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- ticker -- */
.pp-tape {
    position: sticky; top: 64px; z-index: 45; height: 38px;
    display: flex; align-items: stretch;
    background: var(--tape-bg); color: var(--tape-ink); border-bottom: 1px solid var(--tape-line);
    font: 500 12px/38px var(--body);
}
.pp-tape-live {
    flex: none; display: flex; align-items: center; gap: 9px; padding: 0 20px;
    font: 800 12.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--up);
    border-right: 1px solid var(--tape-line);
}
.pp-tape-live i, .pp-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--up); display: inline-block; animation: pp-pulse 2.2s infinite; }
.pp-tape-live.is-stale { color: var(--warn); }
.pp-tape-live.is-stale i { background: var(--warn); animation: none; }
.pp-tape-window { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.pp-tape-track { display: flex; width: max-content; animation: pp-scroll var(--pp-dur, 60s) linear infinite; }
.pp-tape:hover .pp-tape-track, .pp-tape:focus-within .pp-tape-track, .pp-tape.is-paused .pp-tape-track { animation-play-state: paused; }
.pp-tape-run { display: flex; flex: none; }
.pp-tick { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; white-space: nowrap; color: var(--tape-ink); border-right: 1px solid var(--tape-line); }
.pp a.pp-tick:hover span { color: var(--accent); }
.pp-tick > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 22%, transparent); }
.pp-tick b { font: 600 12px var(--num); color: var(--ink); }
.pp-tick em { font: 800 9.5px/1 var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); }
.pp-tick code { font: 600 12px var(--num); color: var(--ink); }
.pp-tick span { color: var(--ink-2); }
.pp-tick time { font: 500 11.5px var(--num); color: var(--mute); }
.pp-tick > svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-tick-process_update em { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pp-tick-process_update > i { background: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 22%, transparent); }
.pp-tick-notice em { background: #f0913f; color: #1a0c00; }
.pp-tick-notice > i { background: #f0913f; box-shadow: 0 0 0 3px rgba(240, 145, 63, .22); }
.pp-tick-news em { background: var(--info); color: #00121f; }
.pp-tick-welcome b { color: var(--accent); }
.pp-tape-pause {
    flex: none; width: 40px; border: 0; border-left: 1px solid var(--tape-line); background: transparent;
    color: var(--tape-ink); cursor: pointer; display: grid; place-items: center;
}
.pp-tape-pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pp-tape-pause .i-play { display: none; fill: currentColor; stroke: none; }
.pp-tape.is-paused .pp-tape-pause .i-play { display: block; }
.pp-tape.is-paused .pp-tape-pause .i-pause { display: none; }
.pp-tape-all { flex: none; padding: 0 20px; border-left: 1px solid var(--tape-line); font-weight: 600; color: var(--ink-2); }
@keyframes pp-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pp-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* --------------------------------------------------------------- sidebar -- */
.pp-app { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: calc(100vh - 102px); }
.pp-side {
    position: sticky; top: 102px; align-self: start; height: calc(100vh - 102px);
    display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
    padding: 14px 0 22px; background: var(--bg-2); border-right: 1px solid var(--line-soft); overflow: hidden;
}
.pp-side ul { list-style: none; margin: 0; padding: 0 10px; display: grid; gap: 4px; }
.pp-side a { position: relative; display: flex; align-items: center; gap: 13px; height: 46px; padding: 0 14px; border-radius: 10px; color: var(--ink-2); font: 600 14px var(--body); }
.pp-side a svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pp-side a:hover { color: var(--ink); background: var(--panel); }
.pp-side a.on {
    color: #fff;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
html[data-look="B"] .pp-side a.on { color: var(--ink); }
.pp-side a.on svg { color: var(--accent); }
.pp-side a.on::before { content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.pp-side-foot { display: flex; flex-direction: column; padding: 0 22px; }
.pp-skyline { width: 100%; height: 88px; margin-bottom: 18px; fill: none; stroke: color-mix(in srgb, var(--accent) 50%, transparent); stroke-width: 1; stroke-linejoin: round; }
.pp-skyline .w { stroke: var(--accent); stroke-width: 1.4; }
.pp-side-foot b { margin-bottom: 8px; font: 800 16px var(--body); letter-spacing: .02em; color: var(--accent); }
.pp-side-foot span { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.pp-side-foot i { width: 28px; height: 2px; margin-top: 14px; background: var(--accent); }
.pp-content { min-width: 0; padding: 16px 18px 22px; }
.pp-flash { margin: 0 0 14px; padding: 11px 16px; border-radius: var(--radius-s); background: var(--panel-hi); border: 1px solid var(--line); font-size: 14px; }

/* ================================================================== home == */
/* 24 columns so the splits follow the mockup: hero 62% | Live System 38%,
   three panels of a third, Quick Access 62% | the Group's line 38%. */
.pp-dash { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 16px; }
.pp-hero  { grid-column: 1 / 16; }
.pp-live  { grid-column: 16 / 25; }
.pp-firms { grid-column: 1 / -1; }
.pp-act   { grid-column: 1 / 9; }
.pp-lat   { grid-column: 9 / 17; }
.pp-ann   { grid-column: 17 / 25; }
.pp-quick { grid-column: 1 / 16; }
.pp-quote { grid-column: 16 / 25; }

/* hero — beside the Live System panel, the photograph FILLING the box (the user's
   choice, 2026-10-12, after trying a full-width hero: "the first one … it covers the
   image, I like it"). Ten slides, a new one every THREE seconds; each slide's --pos
   (home.php) keeps its subject in view: the engineers' heads, the "ECC 50" crown.
   The words, the shade and the dots never move; only the slides fade. */
.pp-hero {
    position: relative; isolation: isolate; overflow: hidden; min-height: 250px;
    display: flex; align-items: center;
    border-radius: 14px; border: 1px solid var(--line-soft); background: #061226; color: #f4f7fc;
}
/* Only the first photograph is in the page; processes.js gives each next one its
   src just before its turn (data-src), so the page does not download ten to show one. */
.pp-slides { position: absolute; inset: 0; z-index: -2; }
.pp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.pp-slide.on { opacity: 1; }
.pp-slide-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 60% 40%); }
.pp-slide-founders .pp-slide-ph { filter: brightness(.5) saturate(.8); }
html[data-look="A"] .pp-slide-ph { filter: grayscale(.7) contrast(1.05); }
html[data-look="A"] .pp-slide-founders .pp-slide-ph { filter: grayscale(.7) brightness(.5); }
/* the founders: cut out of their backgrounds, no circle, no frame (the user, 2026-10-11) */
.pp-founders { position: absolute; z-index: 1; right: 4%; bottom: 0; height: 80%; display: flex; gap: clamp(10px, 1.6vw, 24px); align-items: flex-end; }
.pp-founders figure { position: relative; margin: 0; height: 100%; }
.pp-founders img { display: block; height: 100%; width: auto; }
.pp-founders figcaption {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap; text-align: center;
    padding: 4px 10px; border-radius: 6px; background: rgba(5, 14, 32, .78); line-height: 1.25;
}
.pp-founders figcaption b { display: block; font-size: 12.5px; color: #fff; }
.pp-founders figcaption small { font-size: 10.5px; color: #e5b94f; }
.pp-founders-k {
    position: absolute; z-index: 1; right: 4%; top: 8px; margin: 0; width: min(380px, 45%); text-align: center;
    font: 700 10.5px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #e5b94f; text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
/* a caption, or a company's plate: its number, name, what it does, its live count */
.pp-hero-cap {
    position: absolute; z-index: 1; right: 16px; bottom: 11px; margin: 0; max-width: 55%; text-align: right;
    font: 600 10px/1.3 var(--num); letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 247, 252, .8);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
.pp-hero-plate {
    position: absolute; z-index: 1; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px);
    padding: 6px 12px 6px 7px; border-radius: 9px; background: rgba(5, 14, 32, .8); border: 1px solid rgba(255, 255, 255, .08);
}
.pp-hero-plate > i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; font: 600 13px var(--num); font-style: normal; color: #061226; background: var(--t); }
.pp-hero-plate span { min-width: 0; }
.pp-hero-plate b { display: block; font-size: 13.5px; color: #fff; }
.pp-hero-plate small { display: block; font-size: 11px; color: rgba(233, 238, 247, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-hero-plate em { font-style: normal; font-weight: 700; color: var(--t); }
/* the dots: the current one fills over its three seconds (paused with the slides) */
.pp-hero-dots { position: absolute; z-index: 2; left: clamp(22px, 2.6vw, 40px); bottom: 12px; display: flex; gap: 6px; }
.pp-hero-dots button { position: relative; overflow: hidden; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; background: rgba(244, 247, 252, .38); transition: width .35s; }
.pp-hero-dots button.on { width: 24px; }
.pp-hero-dots button.on::after { content: ''; position: absolute; inset: 0; background: #e5b94f; transform-origin: left; animation: pp-fill var(--slide-ms, 3s) linear forwards; }
.pp-hero.is-held .pp-hero-dots button.on::after { animation-play-state: paused; }
.pp-hero-dots button:focus-visible { outline: 2px solid #e5b94f; outline-offset: 2px; }
@keyframes pp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pp-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(120% 90% at 92% 0%, rgba(240, 180, 80, .22), transparent 55%),
        linear-gradient(90deg, rgba(5, 14, 32, .95) 0%, rgba(5, 14, 32, .85) 30%, rgba(5, 14, 32, .35) 58%, rgba(5, 14, 32, .05) 100%),
        linear-gradient(0deg, rgba(5, 14, 32, .5), transparent 45%);
}
.pp-hero-in { position: relative; padding: clamp(16px, 2.8vh, 32px) clamp(22px, 2.6vw, 40px); max-width: 640px; }
.pp-hero .pp-kicker { margin-bottom: 8px; color: #e5b94f; font: 700 11.5px/1.2 var(--body); letter-spacing: .14em; }
.pp-hero h1 { margin: 0 0 12px; font: 800 clamp(28px, min(2.4vw, 3.7vh), 42px)/1.04 var(--body); letter-spacing: -0.03em; color: #fff; }
.pp-hero h1 em { font-style: normal; color: #e5b94f; }
html[data-look="B"] .pp-hero h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
html[data-look="B"] .pp-hero h1 em { font-style: italic; color: #f6c8a0; }
html[data-look="A"] .pp-hero h1 { font-family: var(--num); font-weight: 600; letter-spacing: -0.04em; font-size: clamp(26px, min(2.8vw, 4.8vh), 42px); }
.pp-lead { margin: 0 0 18px; max-width: 56ch; font-size: 14.5px; line-height: 1.55; color: rgba(244, 247, 252, .82); }
.pp-btn-gold {
    height: 44px; padding: 0 22px; border-radius: 8px; gap: 10px;
    background: linear-gradient(180deg, #f3cf72, #d8a23f); color: #231502;
    box-shadow: 0 10px 24px -12px rgba(229, 185, 79, .9), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.pp-btn-gold svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.pp-btn-gold:hover svg { transform: translateX(3px); }
.pp a.pp-btn-gold:hover { color: #231502; }
@keyframes pp-drift { from { transform: scale(1.01); } to { transform: scale(1.07) translateX(-1.2%); } }

/* live system */
.pp-live {
    display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
    border-radius: 14px; border: 1px solid var(--line-soft);
    background: linear-gradient(165deg, var(--panel-hi), var(--panel) 60%);
}
.pp-live-h { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.pp-live-h h2 { display: flex; align-items: center; gap: 10px; font: 700 16px var(--body); letter-spacing: 0; }
.pp-live.is-stale .pp-live-dot { background: var(--warn); animation: none; }
.pp-live-time { font: 500 11.5px var(--body); color: var(--mute); white-space: nowrap; }
.pp-live-time.is-stale { color: var(--warn); }
/* ⚠ minmax(min-content, …): a cell that clips its overflow has an automatic minimum
   size of ZERO, so plain fr rows let the figures overlap on a short laptop screen. */
.pp-live-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(min-content, 1.25fr) minmax(min-content, 1fr); }
.pp-kpi {
    grid-column: span 2; min-width: 0;
    display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-content: center;
    padding: 12px 10px 12px 14px;
    border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.pp-kpi:nth-child(3) { border-right: 0; }
.pp-kpi-wide { grid-column: span 3; border-bottom: 0; align-items: center; }
.pp-kpi-wide:last-child { border-right: 0; }
.pp-kpi-ico {
    grid-row: 1 / span 3; align-self: start; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    --c: var(--accent); background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
}
.pp-kpi-wide .pp-kpi-ico { align-self: center; grid-row: 1 / span 2; }
.pp-kpi-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pp-kpi-ico.k-sky { --c: #4fb0e6; }
.pp-kpi-ico.k-violet { --c: #b98cf0; }
.pp-kpi-ico.k-white { --c: #dfe7f5; }
.pp-kpi-ico.k-white svg { fill: var(--c); stroke: none; }
.pp-kpi-ico.k-on { --c: var(--up); }
.pp-kpi-ico.k-on i { width: 16px; height: 16px; border-radius: 50%; background: var(--up); animation: pp-pulse 2.2s infinite; }
.pp-kpi b { font: 700 clamp(20px, 3.2vh, 27px)/1.05 var(--body); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink); transition: color .8s; }
.pp-kpi b.pp-bump { color: var(--up); }
.pp-kpi-l { margin-top: 2px; font-size: 12.5px; line-height: 1.25; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-kpi small { margin-top: 5px; font: 600 11px/1.25 var(--body); color: var(--mute); }
.pp-kpi small.up { color: var(--up); }

/* section heads */
.pp-sec-h, .pp-pl-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-sec-h { margin-bottom: 10px; }
.pp-sec-h h2, .pp-pl-h h2 { display: flex; align-items: center; gap: 10px; font: 700 17px var(--body); letter-spacing: -0.005em; }
html[data-look="B"] .pp-sec-h h2, html[data-look="B"] .pp-pl-h h2 { font: 400 23px var(--serif); }
.pp-sec-ico, .pp-pl-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; }
.pp-sec-ico svg, .pp-pl-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-pl-ico.i-bolt svg { fill: var(--accent); stroke: none; }
.pp-more { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pp-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.pp a.pp-more:hover svg { transform: translateX(3px); }

/* the companies — their own photographs, in each company's tone */
.pp-firm-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.pp-firm {
    --tone: var(--accent); --pic: 96px;
    position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    border-radius: 12px; border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent);
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 10%, transparent), 0 14px 30px -22px var(--tone);
    transition: transform .25s, border-color .25s, box-shadow .25s;
    animation: pp-rise .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms);
}
.pp-firm:hover { transform: translateY(-4px); border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone), 0 22px 40px -22px var(--tone); color: inherit; }
.pp-firm-pic { position: relative; display: block; height: var(--pic); overflow: hidden; background: #0b1d3a; }
.pp-firm-pic > img, .pp-firm-pic > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s; }
.pp-firm:hover .pp-firm-pic > img, .pp-firm:hover .pp-firm-pic > svg { transform: scale(1.07); }
html[data-look="A"] .pp-firm-pic > img { filter: grayscale(.55); }
.pp-firm-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--panel) 92%, transparent)); }
.pp-firm-no {
    position: absolute; right: 9px; top: calc(var(--pic) - 31px); z-index: 2;
    padding: 4px 8px; border-radius: 7px; font: 700 13.5px/1 var(--body); color: #fff;
    background: #071631; border: 1px solid color-mix(in srgb, var(--tone) 70%, transparent);
    box-shadow: 0 4px 14px -6px var(--tone);
}
.pp-firm-body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 8px 12px 8px; }
.pp-firm-id { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pp-firm-id i {
    flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
    font: 800 10px var(--body); font-style: normal; color: #071631; background: var(--tone);
}
.pp-firm-id b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-firm-sub { margin-top: 2px; font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-firm-n { margin-top: 7px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.pp-firm-n b { margin-right: 3px; font: 700 19px/1 var(--body); font-variant-numeric: tabular-nums; color: var(--ink); }
.pp-firm-d { margin-top: 3px; font: 600 11px var(--body); color: var(--mute); white-space: nowrap; }
.pp-firm-d.up { color: var(--up); }
.pp-firm-spark { width: 100%; height: 26px; margin-top: 4px; overflow: visible; }
.pp-firm-spark polygon { fill: color-mix(in srgb, var(--tone) 16%, transparent); stroke: none; }
.pp-firm-spark polyline {
    fill: none; stroke: var(--tone); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
    stroke-dasharray: 1; stroke-dashoffset: 1; animation: pp-draw 1.4s ease-out forwards; animation-delay: calc(300ms + var(--i, 0) * 90ms);
}
@keyframes pp-draw { to { stroke-dashoffset: 0; } }
@keyframes pp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* the three panels */
.pp-pl {
    min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    padding: 14px 16px 6px; border-radius: 14px; border: 1px solid var(--line-soft);
    background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 65%, var(--bg-2)));
}
html[data-look="B"] .pp-pl, html[data-look="B"] .pp-live, html[data-look="B"] .pp-quick { background: var(--panel); border: 0; border-top: 3px solid var(--ink); border-radius: 0; }
.pp-pl-h { margin-bottom: 6px; }
.pp-pl-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow: hidden; }
.pp-pl-list > li { border-bottom: 1px solid var(--line-soft); }
.pp-pl-list > li:last-child { border-bottom: 0; }
.pp-pl-empty { margin: 0; padding: 18px 2px; color: var(--mute); }
.pp-row-ico {
    flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
    --k: var(--tone, var(--accent)); color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--k) 30%, transparent);
}
.pp-row-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* live activity */
.pp-act-list > li { --k: #4fb0e6; }
.pp-act-list > li.k-update { --k: #5b8cff; }
.pp-act-list > li.k-notice { --k: #f0b03f; }
.pp-act-list a { display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 2px; color: var(--ink); }
.pp-act-list .pp-row-ico { --tone: var(--k); }
.pp-act-list time { font: 600 12px var(--num); color: var(--ink-2); white-space: nowrap; }
.pp-act-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-act-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-act-l1 code { font: 600 12px var(--num); color: var(--ink); white-space: nowrap; }
.pp-act-l1 em { font: 800 9.5px/1 var(--body); font-style: normal; letter-spacing: .05em; padding: 3px 6px; border-radius: 4px; color: #e5b94f; background: rgba(229, 185, 79, .14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-act-list .k-update em { color: #8fb0ff; background: rgba(91, 140, 255, .16); }
.pp-act-list .k-notice em { color: #f5c46a; background: rgba(240, 176, 63, .16); }
.pp-act-l2 { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-act-co { font-size: 12px; color: var(--ink-2); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.pp-pill { font: 800 9.5px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px; border-radius: 5px; color: #071631; background: var(--k); }
.pp a:hover .pp-act-l2 { color: var(--ink-2); }

/* latest approved */
.pp-lat-list > li { display: grid; grid-template-columns: 30px 104px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; }
.pp-lat-key { display: flex; flex-direction: column; min-width: 0; }
.pp-lat-key code { font: 600 12px var(--num); color: var(--ink); white-space: nowrap; }
.pp-lat-key small, .pp-lat-main small { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-lat-main { display: flex; flex-direction: column; min-width: 0; }
.pp-lat-main b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-view { padding: 6px 13px; border-radius: 7px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink); transition: border-color .2s, color .2s, background .2s; }
.pp a.pp-view:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* announcements */
.pp-ann-list a { display: grid; grid-template-columns: 92px minmax(0, 1fr) 16px; gap: 14px; align-items: center; padding: 9px 2px; color: var(--ink); }
.pp-ann-pic { display: block; aspect-ratio: 16 / 10.5; border-radius: 8px; background: var(--p) center / cover no-repeat, var(--panel-hi); }
.pp-ann-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-ann-t em, .pp-newsmeta em { font: 800 9.5px/1.3 var(--body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pp-ann-t em.k-process_update, .pp-newsmeta em.k-process_update { color: #8fb0ff; }
.pp-ann-t em.k-notice, .pp-newsmeta em.k-notice { color: #f5b45a; }
.pp-ann-t em.k-news, .pp-newsmeta em.k-news { color: #6fd0ff; }
.pp-ann-t b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-ann-body { font-size: 12px; line-height: 1.4; color: var(--mute); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pp-ann-t small { font: 500 11px var(--num); color: var(--mute); }
.pp-ann-list a > svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-ann-empty {
    flex: 1; min-height: 120px; margin: 2px 0 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 16px; text-align: center; border-radius: 10px; border: 1px dashed var(--line);
    background: radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}
.pp-ann-empty .pp-pl-ico { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); margin-bottom: 4px; }
.pp-ann-empty b { font-size: 14.5px; }
.pp-ann-empty span:last-child { font-size: 12.5px; color: var(--mute); max-width: 36ch; }

/* quick access + the Group's line */
.pp-quick { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--panel); }
.pp-quick-h { flex: none; display: flex; align-items: center; gap: 12px; padding-right: 8px; }
.pp-quick-h b { display: block; font-size: 15px; }
.pp-quick-h small { font-size: 11.5px; color: var(--mute); }
.pp-quick-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.pp-quick-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.pp-quick > a {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 10px; border: 1px solid var(--line-soft); background: var(--panel-hi); color: var(--ink);
    transition: border-color .2s, transform .2s;
}
.pp a.pp-quick > a:hover, .pp-quick > a:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.pp-quick > a > span:last-child { min-width: 0; }
.pp-quick b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pp-quick > a small { font-size: 11px; color: var(--mute); white-space: nowrap; }
.q-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.q-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-quote {
    min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 22px; padding: 12px 22px;
    border-radius: 14px; border: 1px solid var(--line-soft); overflow: hidden;
    background: linear-gradient(90deg, rgba(5, 14, 32, 0) 0%, rgba(5, 14, 32, .15) 22%, rgba(5, 14, 32, .85) 46%, #071631 64%), var(--p) left 55% / auto 150% no-repeat, #071631;
}
.pp-quote blockquote { margin: 0; font: 600 14px/1.45 var(--body); color: #f6d98a; text-align: right; }
.pp-quote-mark { flex: none; display: flex; align-items: center; gap: 9px; color: #f4f7fc; }
.pp-quote-mark .pp-emblem { width: 30px; height: 30px; }
.pp-quote-mark .pp-emblem svg { width: 22px; height: 22px; }
.pp-quote-mark b { font: 800 13.5px var(--body); letter-spacing: .03em; }

/* ONE SCREEN on a desktop — the user's "fit all page". Rows share the height
   that is left; the lists show as many rows as fit and fade at the bottom. */
@media (min-width: 1200px) and (min-height: 680px) {
    body.pp-at-home { height: 100vh; overflow: hidden; }
    .pp-at-home .pp-app { height: calc(100vh - 102px); min-height: 0; }
    .pp-at-home .pp-content { height: 100%; overflow-y: auto; padding: 14px 16px; scrollbar-width: thin; }
    /* ⚠ minmax(min-content, auto), never plain auto: the hero and the Live System panel
       clip their overflow, so their automatic minimum is ZERO and a short screen (the
       user's laptop, ~1530×710) squeezed them until the headline and button were cut
       off. Now they keep their content height and the three panels give way instead. */
    .pp-dash { height: 100%; min-height: 540px; grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(110px, 1fr) minmax(min-content, auto); gap: 14px; }
    .pp-firm-n { margin-top: 5px; }
    .pp-firm-spark { height: 22px; }
    .pp-hero { min-height: 0; }
    .pp-firm { --pic: clamp(56px, 8.6vh, 104px); }
    .pp-pl-list { mask-image: linear-gradient(180deg, #000 80%, transparent); }
}
/* A narrower desktop (1366-1480): Quick Access keeps its four labels, drops the captions. */
@media (min-width: 1200px) and (max-width: 1480px) {
    .pp-quick-h > span:last-child, .pp-quick > a small { display: none; }
    .pp-quick > a { padding: 9px 10px; }
}
/* A short laptop screen: everything tighter, so the whole page still fits. */
@media (min-width: 1200px) and (max-height: 760px) {
    .pp-content { padding-top: 10px !important; padding-bottom: 10px !important; }
    .pp-dash { gap: 10px !important; }
    .pp-hero-in { padding: 12px 26px; }
    .pp-hero .pp-kicker { margin-bottom: 4px; font-size: 10.5px; }
    .pp-hero h1 { font-size: clamp(24px, 3.6vh, 30px); margin-bottom: 10px; }
    .pp-btn-gold { height: 38px; padding: 0 18px; font-size: 13.5px; }
    .pp-hero-dots { bottom: 7px; }
    .pp-founders figcaption small, .pp-hero-plate small { display: none; }
    .pp-live-h { padding: 8px 16px; }
    .pp-live-h h2 { font-size: 14.5px; }
    .pp-kpi { padding: 6px 10px 6px 14px; column-gap: 9px; grid-template-columns: 30px minmax(0, 1fr); }
    .pp-kpi-ico { width: 30px; height: 30px; border-radius: 8px; }
    .pp-kpi-ico svg { width: 16px; height: 16px; }
    .pp-kpi b { font-size: 20px; }
    .pp-kpi-l { font-size: 12px; margin-top: 0; }
    .pp-kpi small { margin-top: 1px; font-size: 10.5px; }
    .pp-sec-h { margin-bottom: 6px; }
    .pp-sec-h h2, .pp-pl-h h2 { font-size: 15.5px; }
    .pp-firm { --pic: clamp(44px, 7vh, 60px) !important; }
    .pp-firm-body { padding: 6px 10px; }
    .pp-firm-n { margin-top: 3px; }
    .pp-firm-n b { font-size: 17px; }
    .pp-firm-d { display: none; }
    .pp-firm-spark { height: 16px !important; margin-top: 2px; }
    .pp-pl { padding: 10px 14px 4px; }
    .pp-pl-h { margin-bottom: 2px; }
    .pp-act-list a, .pp-lat-list > li { padding: 6px 2px; }
    .pp-quick, .pp-quote { padding-top: 7px !important; padding-bottom: 7px !important; }
    .pp-quick-ico, .q-ico { width: 28px; height: 28px; }
}
@media (min-width: 1200px) and (max-height: 820px) {
    .pp-lead, .pp-firm-sub { display: none; }
    .pp-hero h1 { margin-bottom: 14px; }
    .pp-dash { gap: 12px; }
    .pp-firm { --pic: clamp(50px, 8vh, 80px); }
    .pp-firm-spark { height: 20px; }
    .pp-sec-h { margin-bottom: 8px; }
    .pp-kpi { padding-top: 8px; padding-bottom: 8px; }
    .pp-live-h { padding-top: 10px; padding-bottom: 10px; }
    .pp-quick, .pp-quote { padding-top: 9px; padding-bottom: 9px; }
    .pp-quick > a { padding: 8px 10px; }
}

/* --------------------------------------------------------------- buttons -- */
.pp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px; border: 1px solid transparent; cursor: pointer;
    border-radius: 999px; background: var(--accent); color: var(--accent-ink);
    font: 700 14.5px var(--body); transition: filter .2s, transform .1s, border-color .2s, color .2s;
}
html[data-look="A"] .pp-btn, html[data-look="B"] .pp-btn { border-radius: var(--radius-s); }
.pp a.pp-btn:hover { color: var(--accent-ink); filter: brightness(1.08); }
.pp-btn:hover { filter: brightness(1.08); }
.pp-btn:active { transform: translateY(1px); }
.pp-btn[disabled] { opacity: .6; cursor: progress; }
.pp-btn-s { height: 34px; padding: 0 14px; font-size: 13px; }
.pp-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.pp a.pp-btn-ghost:hover { color: var(--accent); border-color: var(--accent); filter: none; }

/* ======================================================= inner pages ==== */
.pp-main { max-width: 1320px; margin: 0; padding: 6px 4px 24px; }
.pp-panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
html[data-look="B"] .pp-panel { border: 0; border-top: 3px solid var(--ink); border-radius: 0; background: transparent; padding: 14px 0; box-shadow: none; }
.pp-panel-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.pp-panel-h h2 { font-size: 18px; }
html[data-look="B"] .pp-panel-h h2 { font-size: 24px; }
.pp-main h1 { font-size: clamp(26px, 3.2vw, 40px); }
html[data-look="B"] .pp-main h1 { font-size: clamp(32px, 4.2vw, 52px); }

/* browse */
.pp-pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.pp-pagehead p.pp-mute { margin: 8px 0 0; }
.pp-filterform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pp-select select, .pp-input {
    height: 40px; padding: 0 12px; border-radius: var(--radius-s);
    border: 1px solid var(--line-soft); background: var(--panel); color: var(--ink); font: 14px var(--body);
}
.pp-select select { max-width: 320px; }
.pp-input { min-width: 220px; }
.pp-input:focus, .pp-select select:focus { outline: none; border-color: var(--accent); }
.pp-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: thin; }
.pp-chips a {
    flex: none; display: inline-flex; gap: 8px; align-items: center; padding: 7px 13px;
    border-radius: 999px; border: 1px solid var(--line-soft); font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--panel);
}
.pp-chips a b { font: 600 11.5px var(--num); color: var(--mute); }
.pp-chips a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pp-chips a.on b { color: var(--accent-ink); opacity: .8; }
html[data-look="A"] .pp-chips a, html[data-look="B"] .pp-chips a { border-radius: var(--radius-s); }
.pp-chips-s a { padding: 5px 11px; font-size: 12.5px; }
.pp-list { padding: 4px 8px; margin-top: 8px; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.pp-table th { text-align: left; font: 600 10.5px/1 var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 10px; border-bottom: 1px solid var(--line); }
.pp-table td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.pp-table tbody tr:hover { background: var(--panel-hi); }
.pp-c-key { width: 118px; } .pp-c-co { width: 140px; } .pp-c-fun { width: 210px; }
.pp-c-rev { width: 58px; } .pp-c-files { width: 64px; } .pp-c-date { width: 118px; }
.pp-key { color: var(--accent); font-weight: 600; white-space: nowrap; }
.pp-rowname { font-weight: 600; overflow-wrap: anywhere; }
.pp-badge { display: inline-block; margin-left: 6px; font: 600 10px/1 var(--num); letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; vertical-align: 2px; }
.pp-badge-global { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.pp-badge-restricted { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.pp-badge-live { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); margin-left: 0; }
.pp-show-s { display: none; }

/* process */
.pp-crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--mute); margin-bottom: 20px; }
.pp-crumbs a { color: var(--ink-2); }
.pp-prochead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 28px; }
.pp-procnum {
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 176px; padding: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius);
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
html[data-look="B"] .pp-procnum { border: 2px solid var(--ink); border-radius: 0; background: var(--panel); }
.pp-procnum .pp-num { font-size: 24px; font-weight: 600; color: var(--accent); }
.pp-procnum small { font: 600 11px var(--num); letter-spacing: .14em; color: var(--mute); margin-top: 4px; }
.pp-procmeta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; color: var(--ink-2); font-size: 14px; }
.pp-procmeta span + span::before { content: '·'; margin-right: 16px; color: var(--mute); }
.pp-procbadges { margin: 12px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.pp-procbadges .pp-badge { margin-left: 0; }
.pp-procgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pp-procside { display: grid; gap: 20px; }
.pp-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-doc { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--radius-s); border: 1px solid var(--line-soft); background: var(--panel-hi); }
.pp-doc-type { height: 50px; display: grid; place-items: center; border-radius: var(--radius-s); font: 700 13px var(--num); color: var(--accent); border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pp-doc-w .pp-doc-type    { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: color-mix(in srgb, var(--info) 10%, transparent); }
.pp-doc-praa .pp-doc-type { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); background: color-mix(in srgb, var(--up) 10%, transparent); }
.pp-doc-f .pp-doc-type    { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.pp-doc-d .pp-doc-type, .pp-doc-p .pp-doc-type { color: var(--ink-2); border-color: var(--line-soft); background: transparent; }
.pp-doc-t { display: flex; flex-direction: column; min-width: 0; }
.pp-doc-t small { color: var(--mute); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-doc-a { display: flex; gap: 8px; }
.pp-empty-docs { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 22px; border: 1px dashed var(--line); border-radius: var(--radius-s); }
.pp-empty-docs strong { color: var(--ink); }
.pp-cos, .pp-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.pp-cos li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.pp-cos li .pp-num { color: var(--accent); font-size: 12px; }
.pp-cos li em { font-style: normal; margin-left: auto; font: 600 10px var(--num); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.pp-related a { display: block; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.pp-related .pp-num { color: var(--accent); font-size: 12px; margin-right: 6px; }
.pp-center { max-width: 620px; margin: 40px auto; text-align: center; padding: 36px; }
.pp-center h1 { margin-bottom: 10px; }

/* --------------------------------------------------------------- sign in -- */
.pp-signin-page { display: flex; flex-direction: column; align-items: center; padding-top: clamp(32px, 7vw, 72px); padding-bottom: 24px; }
.pp-signin-page .pp-back { align-self: center; width: 100%; max-width: 440px; }
.pp-card { width: 100%; max-width: 440px; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8); }
html[data-look="B"] .pp-card { border: 0; border-top: 4px solid var(--ink); border-radius: 0; box-shadow: none; background: var(--panel); }
.pp-signin h2 { font-size: 26px; margin-bottom: 6px; }
html[data-look="B"] .pp-signin h2 { font-size: 34px; }
.pp-form { display: grid; gap: 14px; margin-top: 18px; }
.pp-field { display: grid; gap: 6px; }
.pp-field > span { font: 600 11px var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pp-field input { height: 48px; padding: 0 14px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: 16px var(--body); }
html[data-look="B"] .pp-field input { background: #fff; }
.pp-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pp-code { font: 600 26px var(--num) !important; letter-spacing: .5em; text-align: center; height: 60px !important; }
.pp-err { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); padding: 9px 12px; border-radius: var(--radius-s); font-size: 14px; margin: 14px 0 0; }
.pp-note { color: var(--ink-2); background: var(--panel-hi); padding: 9px 12px; border-radius: var(--radius-s); font-size: 14px; margin: 14px 0 0; }
.pp-fine { font-size: 12.5px; color: var(--mute); margin: 18px 0 0; }
.pp-alt { margin-top: 16px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

/* ========================================================== other pages == */
.pp-page { max-width: 1240px; padding: 6px 4px 24px; margin: 0; }
.pp-pagehead-act { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-pagehead-act svg, .pp-settings .pp-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* my activity */
.pp-trail > li { display: grid; grid-template-columns: 30px 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 2px; }
.pp-trail > li.pp-trail-day { display: block; padding: 14px 2px 6px; font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border-bottom: 0; }
.pp-trail time { font: 600 12px var(--num); color: var(--ink-2); }
.pp-trail-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-trail-main em { font: 800 9.5px var(--body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.pp-trail-main a { font-weight: 600; overflow-wrap: anywhere; }
.pp-trail-main a code { color: var(--accent); margin-right: 4px; }
.pp-trail-main small { font-size: 12px; color: var(--mute); }

/* settings */
.pp-settings { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pp-lookpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pp-lookcard {
    display: flex; flex-direction: column; gap: 6px; padding: 14px; text-align: left; cursor: pointer;
    border-radius: 12px; border: 1px solid var(--line); background: var(--panel-hi); color: var(--ink); font: inherit;
}
.pp-lookcard.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pp-lookcard b { font-size: 14px; }
.pp-lookcard small { font-size: 12px; color: var(--mute); line-height: 1.4; }
.pp-lookcard .sw { display: flex; gap: 4px; margin-bottom: 4px; }
.pp-lookcard .sw i { width: 22px; height: 22px; border-radius: 6px; }
.look-c .sw i:nth-child(1) { background: #06152b; } .look-c .sw i:nth-child(2) { background: #e5b94f; } .look-c .sw i:nth-child(3) { background: #4fb0e6; }
.look-a .sw i:nth-child(1) { background: #050706; } .look-a .sw i:nth-child(2) { background: #f5b84a; } .look-a .sw i:nth-child(3) { background: #3ddc84; }
.look-b .sw i:nth-child(1) { background: #fff1e5; } .look-b .sw i:nth-child(2) { background: #0d7680; } .look-b .sw i:nth-child(3) { background: #1a1817; }
.pp-acct { margin: 0 0 16px; display: grid; gap: 10px; }
.pp-acct div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.pp-acct dt { font: 700 10.5px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding-top: 2px; }
.pp-acct dd { margin: 0; overflow-wrap: anywhere; }

/* announcements */
.pp-newsgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.pp-newscard { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--panel); }
.pp-newscard h2 { margin: 4px 0 6px; font-size: 16px; }
.pp-newscard p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); }
.pp-newsmeta { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin: 0; font-size: 11.5px; color: var(--mute); }
.pp-newsmeta code { color: var(--ink-2); }

/* the S&P protocol: AIPMS's own document, as a light sheet on the navy */
.pp-protocol-sheet {
    --color-text: #1f2937; --color-primary: #0f3d5e; --color-danger: #b91c1c; --color-warning: #b45309;
    --color-border: #e3ddd1; --color-surface-solid: #fffdf8; --color-surface-2: #f4f0e7; --color-muted: #6b7280;
    color: var(--color-text);
}
.pp-protocol-sheet a { color: var(--color-primary); }
.pp-protocol .prot { max-width: none; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1199px) {
    .pp-top-title, .pp-top-sep { display: none; }
    .pp-hero  { grid-column: 1 / 15; }
    .pp-live  { grid-column: 15 / 25; }
    .pp-firm-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pp-firm { --pic: 104px; }
    .pp-act   { grid-column: 1 / 13; }
    .pp-lat   { grid-column: 13 / 25; }
    .pp-ann, .pp-quick, .pp-quote { grid-column: 1 / -1; }
    .pp-pl-list { max-height: 330px; }
}
@media (max-width: 980px) {
    .pp-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .pp-side { position: sticky; top: 102px; z-index: 40; height: auto; padding: 8px 0; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .pp-side ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 12px; }
    .pp-side a { height: 38px; padding: 0 12px; white-space: nowrap; font-size: 13px; }
    .pp-side a.on::before { display: none; }
    .pp-side-foot { display: none; }
    .pp-hero, .pp-live, .pp-act, .pp-lat { grid-column: 1 / -1; }
    .pp-duo, .pp-procgrid, .pp-settings { grid-template-columns: 1fr; }
    .pp-hide-m { display: none; }
    /* ⚠ A fixed-layout table keeps each <col>'s width even when that column's
       cells are display:none — the name column collapsed to nothing at 300px. */
    .pp-c-fun, .pp-c-date { width: 0; }
    .pp-user-t { display: none; }
    .pp-quick { flex-wrap: wrap; }
    .pp-quick-h { flex: 1 0 100%; }
    .pp-quick > a { flex: 1 1 calc(50% - 6px); }
}
@media (max-width: 720px) {
    .pp-founders, .pp-founders-k { display: none; }
    .pp-hero-plate small { display: none; }
    .pp-hero-cap { max-width: 60%; font-size: 9px; letter-spacing: .1em; }
    .pp-top { height: auto; flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
    .pp-logo { width: auto; }
    .pp-search { order: 3; flex: 1 0 100%; max-width: none; }
    .pp-search kbd { display: none; }
    .pp-tools { margin-left: auto; gap: 8px; }
    .pp-tape, .pp-side { position: static; }
    .pp-tape-all { display: none; }
    .pp-tick { padding: 0 16px; }
    .pp-tape-live { padding: 0 12px; }
    .pp-content { padding: 12px 12px 20px; }
    .pp-dash { gap: 12px; }
    .pp-hero-in { padding: 22px 18px 26px; }
    .pp-hero h1 { font-size: 32px; }
    .pp-hero::after { background: linear-gradient(90deg, rgba(5, 14, 32, .95) 0%, rgba(5, 14, 32, .78) 60%, rgba(5, 14, 32, .5) 100%); }
    .pp-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
    .pp-kpi, .pp-kpi-wide { grid-column: span 1; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .pp-kpi:nth-child(odd) { border-right: 1px solid var(--line-soft); }
    .pp-kpi:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
    .pp-firm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pp-firm { --pic: 92px; }
    .pp-act-list a { grid-template-columns: 30px 40px minmax(0, 1fr) auto; }
    .pp-act-co { display: none; }
    .pp-lat-list > li { grid-template-columns: 30px minmax(0, 1fr) auto; }
    .pp-lat-key { display: none; }
    .pp-quick > a { flex: 1 1 100%; }
    .pp-quote { justify-content: space-between; }
    .pp-wrap, .pp-main { padding-left: 4px; padding-right: 4px; }
    .pp-latest-meta { display: none; }
    .pp-hide-s { display: none; }
    .pp-show-s { display: block; font-size: 12.5px; margin-top: 2px; }
    .pp-c-key { width: 104px; }
    .pp-c-co, .pp-c-rev, .pp-c-files { width: 0; }
    .pp-filterform { width: 100%; }
    .pp-select { flex: 1 1 100%; }
    .pp-select select { width: 100%; max-width: none; }
    .pp-prochead { grid-template-columns: 1fr; }
    .pp-procnum { align-items: flex-start; min-width: 0; }
    .pp-doc { grid-template-columns: 46px minmax(0, 1fr); }
    .pp-doc-a { grid-column: 1 / -1; }
    .pp-input { min-width: 0; flex: 1; }
    .pp-card { padding: 26px 18px; }
    .pp-lookpick { grid-template-columns: 1fr; }
    .pp-newsgrid { grid-template-columns: 1fr; }
    .pp-newscard { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 400px) {
    .pp-logo-t small { display: none; }
    .pp-user-ava { width: 34px; height: 34px; }
}
@media (max-width: 340px) {
    .pp-firm-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pp-tape-track, .pp-firm { animation: none !important; }
    .pp-slide { transition: none; }
    .pp-hero-dots button.on::after { animation: none; transform: none; }
    .pp-firm-spark polyline { animation: none; stroke-dashoffset: 0; }
    .pp-tape-window { overflow-x: auto; }
    .pp-live-dot, .pp-tape-live i, .pp-kpi-ico.k-on i { animation: none; }
}

/* a process built in Process Studio — Phase 3 (2026-10-11) */
.pp-studio { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin: 0 0 16px;
             padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--line-soft);
             background: linear-gradient(110deg, rgba(229, 185, 79, .16), transparent 60%), var(--panel); box-shadow: var(--shadow); }
.pp-studio > div:first-child { display: grid; gap: 4px; max-width: 640px; }
.pp-studio-k { font: 700 10.5px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #e5b94f; }
.pp-studio strong { font-size: 16px; }
.pp-studio p { margin: 0; font-size: 13px; color: var(--mute); }
.pp-studio-a { display: flex; gap: 10px; flex-wrap: wrap; }

/* Sign in with Microsoft 365 - Phase 4 (2026-10-11), shown only when configured */
.pp-ms { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; margin: 6px 0 4px; background: #fff; color: #1f2937; border: 1px solid #d0d5dd; }
/* ⚠ `.pp a { color: inherit }` outranks a one-class rule: on the dark sign-in card the label inherited WHITE,
   white on white until hovered (the user, 2026-10-12). Two classes, and the same dark text on hover. */
.pp a.pp-ms, .pp a.pp-ms:hover { color: #1f2937; }
.pp a.pp-ms:hover { background: #f3f4f6; border-color: #b9c0cc; }
.pp-ms svg { width: 18px; height: 18px; }
.pp-or { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 12px; color: var(--mute); }
.pp-or::before, .pp-or::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }

/* the migration preview - the S&P team only (2026-10-12) */
.pp-studio-preview { border-style: dashed; border-color: #e5b94f; background: repeating-linear-gradient(135deg, rgba(229, 185, 79, .07) 0 12px, transparent 12px 24px), var(--panel); }

/* Browse as a tree - company > function > process > files (2026-10-12) */
.pp-viewswitch { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; flex-wrap: wrap; }
.pp-viewswitch a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-soft); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pp-viewswitch a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pp-tree details { margin: 0; }
.pp-tree summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; }
.pp-tree summary::-webkit-details-marker { display: none; }
.pp-tree summary::before { content: '\25B8'; width: 12px; color: var(--mute); transition: transform .15s; }
.pp-tree details[open] > summary::before { transform: rotate(90deg); }
.pp-tree summary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pp-tree summary b { margin-left: auto; font: 600 11.5px var(--num); color: var(--mute); }
.pp-tree-co > summary { font-weight: 800; font-size: 15px; }
.pp-tree-fun { margin-left: 14px !important; border-left: 1px dashed var(--line-soft); }
.pp-tree-fun > summary { font-weight: 700; }
.pp-tree-proc { margin-left: 22px !important; }
.pp-tree-proc > summary { font-size: 13.5px; }
.pp-tree-proc ul { list-style: none; margin: 2px 0 8px 44px; padding: 0 0 0 12px; border-left: 2px solid var(--line-soft); display: grid; gap: 4px; }
.pp-tree-proc li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.pp-tree-kind { flex: none; min-width: 44px; font: 600 10.5px var(--num); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.pp-tree-dl { margin-left: auto; text-decoration: none; color: var(--mute); }
.pp-tree-page a { font-weight: 700; }
.pp-tree-ico { width: 18px; text-align: center; }

/* =============================================================================
   THE PROCESS LIBRARY — redesigned 2026-10-13 (the user: "after login show the
   functions by default; open a function, then its processes; the process page
   full of data with easy buttons — the eye or download; professional, more
   than 4,000 staff will use it").
     Functions (the landing) · a function's processes · the process page ·
     the in-portal viewer. Tokens only, so all three looks follow.
   ============================================================================= */
.pp-btn svg, .pp-iconbtn svg, .pp-viewonly svg, .pp-lib svg, .pp-fnpage svg, .pp-proc2 svg, .pp-viewer svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.pp-btn-s svg { width: 15px; height: 15px; }
.pp-iconbtn {
    display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line-soft); background: var(--panel); color: var(--ink-2); transition: color .15s, border-color .15s, background .15s, transform .1s;
}
html[data-look="A"] .pp-iconbtn, html[data-look="B"] .pp-iconbtn { border-radius: var(--radius-s); }
.pp a.pp-iconbtn:hover, .pp-iconbtn:hover { color: var(--accent); border-color: var(--accent); }
.pp-iconbtn:active { transform: translateY(1px); }
.pp-iconbtn.is-off { opacity: .35; pointer-events: none; }
.pp-star.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.pp-star.on svg { fill: currentColor; }
.pp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--accent)); margin-right: 6px; vertical-align: 1px; }
.pp-viewonly { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--body); color: var(--mute); padding: 0 6px; white-space: nowrap; }
.pp-viewonly svg { width: 14px; height: 14px; }
.pp :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- Functions */
.pp-lib-hero {
    position: relative; overflow: hidden; padding: 28px 30px 22px; margin-bottom: 18px; border-radius: var(--radius);
    border: 1px solid var(--line-soft);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
        linear-gradient(180deg, var(--panel-hi), var(--panel));
}
.pp-lib-hero::after {                       /* a quiet drawing grid: a library of drawings */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent 35%, #000);
}
html[data-look="B"] .pp-lib-hero { border: 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 22px 0 18px; }
html[data-look="B"] .pp-lib-hero::after { display: none; }
.pp-lib-hero > * { position: relative; z-index: 1; }
.pp-lib-hero h1 { margin: 6px 0 6px; }
.pp-lib-lead { margin: 0 0 18px; color: var(--ink-2); font-size: 15px; max-width: 70ch; }
.pp-lib-lead b { color: var(--ink); font-weight: 600; }
.pp-lib-search {
    display: flex; align-items: center; gap: 10px; max-width: 760px; padding: 6px 6px 6px 16px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2);
}
html[data-look="A"] .pp-lib-search, html[data-look="B"] .pp-lib-search { border-radius: var(--radius-s); }
html[data-look="B"] .pp-lib-search { background: var(--panel); }
.pp-lib-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.pp-lib-search svg { width: 19px; height: 19px; color: var(--mute); }
.pp-lib-search input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; color: var(--ink); font: 15px var(--body); outline: none; }
.pp-lib-search .pp-btn { height: 42px; }
.pp-lib-cos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pp-lib-cos a {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--line-soft); color: var(--ink-2); background: color-mix(in srgb, var(--panel) 80%, transparent);
}
html[data-look="A"] .pp-lib-cos a, html[data-look="B"] .pp-lib-cos a { border-radius: var(--radius-s); }
.pp-lib-cos a i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--accent)); }
.pp-lib-cos a b { font: 600 11.5px var(--num); color: var(--mute); }
.pp-lib-cos a em { font-style: normal; font-size: 10.5px; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.pp-lib-cos a.on { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }

.pp-shelves { display: grid; gap: 16px; margin-bottom: 20px; }
.pp-shelf h2 { display: flex; align-items: center; gap: 8px; font: 700 13px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; }
.pp-shelf h2 svg { width: 15px; height: 15px; }
.pp-shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.pp-shelfcard {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radius-s); min-width: 0;
    background: var(--panel); border: 1px solid var(--line-soft); transition: border-color .15s, transform .15s;
}
.pp-shelfcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.pp-shelfcard .pp-num { font-size: 12px; color: var(--accent); font-weight: 600; }
.pp-shelfcard b { font-size: 14px; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-shelfcard small { color: var(--mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-lib-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.pp-fngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pp-fncard {
    position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 172px; padding: 18px 18px 16px;
    border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-soft); color: var(--ink);
    transition: border-color .18s, transform .18s, box-shadow .18s;
    animation: pp-rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms);
}
html[data-look="B"] .pp-fncard { border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: var(--panel); }
.pp-fncard:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 22px 40px -28px color-mix(in srgb, var(--accent) 70%, transparent); }
.pp-fncard-top { display: flex; justify-content: space-between; align-items: flex-start; }
.pp-fncard-ico {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
html[data-look="A"] .pp-fncard-ico, html[data-look="B"] .pp-fncard-ico { border-radius: var(--radius-s); }
.pp-fncard-ico svg { width: 24px; height: 24px; stroke-width: 1.6; }
.pp-fncard-no { font-size: 26px; font-weight: 600; color: color-mix(in srgb, var(--ink) 18%, transparent); letter-spacing: -.04em; line-height: 1; }
.pp-fncard-name { font: var(--h-weight) 17px/1.25 var(--display); letter-spacing: var(--h-track); }
html[data-look="B"] .pp-fncard-name { font-size: 21px; }
.pp-fncard-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-fncard-n { font-size: 13px; color: var(--ink-2); }
.pp-fncard-n b { font-size: 18px; color: var(--ink); margin-right: 2px; }
.pp-fncard-cos { margin-left: auto; display: inline-flex; gap: 3px; }
.pp-fncard-cos i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.pp-fncard-go { position: absolute; right: 16px; top: 72px; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .18s, transform .18s; }
.pp-fncard:hover .pp-fncard-go { opacity: 1; transform: none; }
@keyframes pp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.pp-lib-side { display: grid; gap: 16px; position: sticky; top: 12px; }
.pp-newlist { list-style: none; margin: 0; padding: 0; display: grid; }
.pp-newlist li { border-left: 3px solid var(--tone, var(--accent)); margin: 0 0 2px; }
.pp-newlist a { display: grid; gap: 2px; padding: 9px 12px; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.pp-newlist a:hover { background: var(--panel-hi); }
.pp-newlist .pp-num { font-size: 11.5px; color: var(--accent); font-weight: 600; }
.pp-newlist .pp-num em { font-style: normal; margin-left: 6px; color: var(--up); }
.pp-newlist b { font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.pp-newlist small { font-size: 12px; color: var(--mute); }
.pp-lib-tip h2 { font: 700 13px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin: 0 0 8px; }
.pp-lib-tip ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.pp-lib-tip svg { width: 14px; height: 14px; vertical-align: -2px; }
.pp kbd { font: 600 11px var(--num); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-2); }

/* ---------------------------------------------------------------- a function's processes */
.pp-fnhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 18px; }
.pp-fnhead-ico {
    display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
html[data-look="A"] .pp-fnhead-ico, html[data-look="B"] .pp-fnhead-ico { border-radius: var(--radius-s); }
.pp-fnhead-ico svg { width: 36px; height: 36px; stroke-width: 1.5; }
.pp-fnhead h1 { margin: 2px 0 4px; }
.pp-fnhead .pp-mute { margin: 0; }
.pp-fntools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.pp-fntools .pp-chips { margin: 0; flex: 1 1 100%; }
.pp-fnsearch { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--radius-s); border: 1px solid var(--line-soft); background: var(--panel); }
.pp-fnsearch:focus-within { border-color: var(--accent); }
.pp-fnsearch svg { width: 16px; height: 16px; color: var(--mute); }
.pp-fnsearch input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 14px var(--body); outline: none; }
.pp-seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--panel); }
html[data-look="A"] .pp-seg, html[data-look="B"] .pp-seg { border-radius: var(--radius-s); }
.pp-seg a { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pp-seg a.on { background: var(--accent); color: var(--accent-ink); }
html[data-look="A"] .pp-seg a, html[data-look="B"] .pp-seg a { border-radius: var(--radius-s); }

.pp-prows { display: grid; gap: 8px; }
.pp-prow {
    position: relative; display: grid; grid-template-columns: 136px minmax(0, 1fr) minmax(0, 250px) auto; gap: 16px; align-items: center;
    padding: 14px 14px 14px 18px; border-radius: var(--radius-s); background: var(--panel); border: 1px solid var(--line-soft);
    border-left: 3px solid var(--tone, var(--accent)); transition: border-color .15s, background .15s;
    animation: pp-rise .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 18ms);
}
.pp-prow:hover { background: var(--panel-hi); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-soft)); border-left-color: var(--tone, var(--accent)); }
.pp-prow-cover { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.pp-prow > :not(.pp-prow-cover) { position: relative; z-index: 1; pointer-events: none; min-width: 0; }
.pp-prow .pp-prow-acts { pointer-events: auto; }
.pp-prow-key { display: grid; gap: 3px; }
.pp-prow-key .pp-num { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.pp-prow-key em { font: 600 10.5px var(--num); font-style: normal; color: var(--mute); letter-spacing: .08em; }
.pp-prow-main { display: grid; gap: 4px; }
.pp-prow-main b { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.pp-prow-main b .pp-badge { margin-left: 8px; }
.pp-prow-main small { font-size: 12.5px; color: var(--mute); }
.pp-prow-kinds { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--ink-2); }
.pp-prow-kinds span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pp-prow-kinds svg { width: 15px; height: 15px; color: var(--mute); }
.pp-prow-acts { display: flex; gap: 6px; align-items: center; }
.pp-prow-go { border-color: transparent; background: transparent; color: var(--mute); }
.pp-prow:hover .pp-prow-go { color: var(--accent); }

/* ---------------------------------------------------------------- the process page */
.pp-phero {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 22px; align-items: start;
    padding: 24px 26px 20px; margin-bottom: 16px; border-radius: var(--radius); border: 1px solid var(--line-soft);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--accent)) 14%, transparent), transparent 45%),
        linear-gradient(180deg, var(--panel-hi), var(--panel));
}
.pp-phero::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tone, var(--accent)); }
html[data-look="B"] .pp-phero { border: 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 22px 0 18px 18px; }
.pp-phero-ico {
    grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
html[data-look="A"] .pp-phero-ico, html[data-look="B"] .pp-phero-ico { border-radius: var(--radius-s); }
.pp-phero-ico svg { width: 32px; height: 32px; stroke-width: 1.5; }
.pp-phero-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.pp-phero-k .pp-num { font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.pp-inforce {
    display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font: 700 11px var(--body);
    letter-spacing: .06em; text-transform: uppercase; color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent);
}
.pp-inforce i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 25%, transparent); }
.pp-phero h1 { margin: 8px 0 14px; max-width: 30ch; }
.pp-phero-meta { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 6px 30px; margin: 0; justify-content: start; }
.pp-phero-meta div { min-width: 0; }
.pp-phero-meta dt { font: 600 10.5px var(--num); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pp-phero-meta dd { margin: 3px 0 0; font-size: 14px; color: var(--ink); font-weight: 600; }
.pp-phero-meta dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.pp-phero-side { display: flex; gap: 8px; }
.pp-phero-acts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pp-phero-acts .pp-btn { height: 44px; }

.pp-tabs2 { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 6px 0 16px; overflow-x: auto; scrollbar-width: none; }
.pp-tabs2 button {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; background: none; cursor: pointer; white-space: nowrap;
    font: 600 14px var(--body); color: var(--mute); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pp-tabs2 button svg { width: 16px; height: 16px; }
.pp-tabs2 button b { font: 600 11px var(--num); padding: 2px 7px; border-radius: 999px; background: var(--panel-hi); color: var(--ink-2); }
.pp-tabs2 button:hover { color: var(--ink); }
.pp-tabs2 button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.pp-tabs2 button[aria-selected="true"] b { background: var(--accent); color: var(--accent-ink); }

.pp-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 12px; }
.pp-file {
    display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px 14px; padding: 16px;
    border-radius: var(--radius-s); background: var(--panel); border: 1px solid var(--line-soft); transition: border-color .15s;
}
.pp-file:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-soft)); }
.pp-file-ico {
    grid-row: span 2; display: grid; place-items: center; align-content: center; gap: 4px; height: 66px; border-radius: var(--radius-s);
    color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.pp-file-ico svg { width: 22px; height: 22px; }
.pp-file-ico em { font: 700 10px var(--num); font-style: normal; letter-spacing: .04em; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-file-w .pp-file-ico { color: var(--info); background: color-mix(in srgb, var(--info) 11%, transparent); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.pp-file-f .pp-file-ico { color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.pp-file-praa .pp-file-ico { color: var(--up); background: color-mix(in srgb, var(--up) 11%, transparent); border-color: color-mix(in srgb, var(--up) 30%, transparent); }
.pp-file-d .pp-file-ico, .pp-file-other .pp-file-ico { color: var(--ink-2); background: transparent; border-color: var(--line-soft); }
.pp-file-t { display: grid; gap: 3px; min-width: 0; }
.pp-file-t small { font: 600 10.5px var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pp-file-t b { font-size: 15px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.pp-file-t span { font-size: 12.5px; color: var(--mute); }
.pp-file-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pp-file.is-old { opacity: .85; }
.pp-file.is-old .pp-file-ico { filter: grayscale(.7); }
.pp-files-old { margin-top: 10px; }

.pp-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; }
.pp-timeline li { position: relative; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 16px; padding: 0 0 22px 0; }
.pp-timeline li::before { content: ""; position: absolute; left: 42px; top: 30px; bottom: 0; width: 1px; background: var(--line); }
.pp-timeline li:last-child::before { display: none; }
.pp-tl-rev {
    align-self: start; justify-self: center; padding: 6px 10px; border-radius: 999px; font: 600 12px var(--num);
    border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); position: relative; z-index: 1;
}
.pp-timeline li.is-now .pp-tl-rev { border-color: var(--up); color: var(--up); background: color-mix(in srgb, var(--up) 12%, var(--panel)); }
.pp-timeline b { font-size: 15px; }
.pp-timeline p { margin: 4px 0 0; }
.pp-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }

/* ---------------------------------------------------------------- the viewer */
.pp-viewer { max-width: none; display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 150px); }
.pp-vbar {
    position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 10px 12px; border-radius: var(--radius-s); background: var(--panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow);
}
.pp-vbar-t { display: grid; min-width: 0; }
.pp-vbar-t small { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-vbar-t b { font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-vbar-a, .pp-vnav, .pp-vzoom { display: flex; align-items: center; gap: 8px; }
.pp-vnav b, .pp-vzoom b { font: 600 12px var(--num); color: var(--ink-2); min-width: 44px; text-align: center; }
.pp-vbar .pp-iconbtn { width: 34px; height: 34px; }
.pp-superseded {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 10px 14px; border-radius: var(--radius-s); font-size: 13.5px;
    color: var(--ink); background: color-mix(in srgb, var(--warn) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.pp-superseded svg { width: 17px; height: 17px; color: var(--warn); }
.pp-superseded a { color: var(--accent); font-weight: 600; }
.pp-vstage { position: relative; flex: 1; min-height: 60vh; border-radius: var(--radius-s); background: var(--bg-2); border: 1px solid var(--line-soft); overflow: auto; padding: 16px; }
html[data-look="B"] .pp-vstage { background: #e9dccf; }
.pp-vload { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40vh; color: var(--mute); font-size: 14px; }
.pp-spin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: pp-turn .8s linear infinite; }
@keyframes pp-turn { to { transform: rotate(360deg); } }
.pp-vpages { display: grid; justify-items: center; gap: 16px; }
.pp-vpage { display: block; max-width: none; background: #fff; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); }
.pp-vdoc { max-width: 860px; margin: 0 auto; padding: 48px 56px; background: #fff; color: #1d1d1f; font: 15px/1.6 "Segoe UI", Calibri, sans-serif; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); }
.pp-vdoc table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.pp-vdoc td, .pp-vdoc th { border: 1px solid #c9ced6; padding: 6px 8px; vertical-align: top; }
.pp-vdoc img { max-width: 100%; height: auto; }
.pp-vsheets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-vsheets button { padding: 6px 12px; border-radius: var(--radius-s); border: 1px solid var(--line-soft); background: var(--panel); color: var(--ink-2); font: 600 12.5px var(--body); cursor: pointer; }
.pp-vsheets button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pp-vsheet { overflow: auto; background: #fff; color: #1d1d1f; border-radius: 4px; }
.pp-vsheet table { border-collapse: collapse; font: 13px "Segoe UI", Calibri, sans-serif; }
.pp-vsheet td { border: 1px solid #dde1e6; padding: 4px 8px; white-space: nowrap; }
.pp-vimg { display: block; max-width: 100%; margin: 0 auto; }
.pp-vfail { display: grid; gap: 6px; place-content: center; text-align: center; min-height: 40vh; color: var(--ink-2); font-size: 14px; }
.pp-vfail strong { font-size: 17px; color: var(--ink); }
.pp-vmark {                                   /* view only: the reader's email, faint, across the page */
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start;
    gap: 70px 90px; padding: 40px; transform: rotate(-24deg) scale(1.4); opacity: .1; z-index: 3;
}
.pp-vmark span { font: 600 15px var(--num); color: #000; white-space: nowrap; }
.pp-vnote { margin: 0; font-size: 12.5px; }
@media print { body.pp-noprint * { visibility: hidden !important; } }

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1199px) {
    .pp-lib-body { grid-template-columns: minmax(0, 1fr); }
    .pp-lib-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .pp-prow { grid-template-columns: 120px minmax(0, 1fr) auto; }
    .pp-prow-kinds { display: none; }
    .pp-phero-meta { grid-template-columns: repeat(2, minmax(0, auto)); }
}
@media (max-width: 720px) {
    .pp-lib-hero { padding: 20px 18px 16px; }
    .pp-lib-search { flex-wrap: wrap; border-radius: var(--radius-s); }
    .pp-lib-search .pp-btn { width: 100%; }
    .pp-fngrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .pp-fncard { min-height: 150px; padding: 14px; }
    .pp-fncard-no { font-size: 20px; }
    .pp-fncard-name { font-size: 15px; }
    .pp-fncard-cos { display: none; }
    .pp-fnhead { grid-template-columns: auto minmax(0, 1fr); }
    .pp-fnhead-ico { width: 54px; height: 54px; }
    .pp-fnjump { grid-column: 1 / -1; }
    .pp-prow { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 12px 12px 14px; }
    .pp-prow-key { grid-column: 1; display: flex; gap: 10px; align-items: baseline; }
    .pp-prow-main { grid-column: 1; }
    .pp-prow-acts { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; }
    .pp-prow-go { display: none; }
    .pp-phero { grid-template-columns: auto minmax(0, 1fr); padding: 18px 16px; }
    .pp-phero-ico { width: 48px; height: 48px; grid-row: auto; }
    .pp-phero-side { grid-column: 1 / -1; grid-row: 3; }
    .pp-phero-acts { grid-column: 1 / -1; }
    .pp-phero-acts .pp-btn { flex: 1 1 100%; }
    .pp-phero-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; }
    .pp-file { grid-template-columns: 48px minmax(0, 1fr); padding: 14px; }
    .pp-file-ico { height: 56px; }
    .pp-timeline li { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
    .pp-timeline li::before { left: 34px; }
    .pp-vbar { grid-template-columns: auto minmax(0, 1fr); }
    .pp-vbar-a { grid-column: 1 / -1; justify-content: space-between; flex-wrap: wrap; }
    .pp-vdoc { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .pp-fncard, .pp-prow { animation: none; }
    .pp-fncard:hover, .pp-shelfcard:hover { transform: none; }
}
.pp-c-act { width: 54px; }
.pp-table td.pp-act { padding-top: 6px; padding-bottom: 6px; text-align: right; }
.pp-table td.pp-act .pp-iconbtn { width: 34px; height: 34px; }
.pp-table td.pp-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-table thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.pp-kicker a { color: inherit; }