/* components.css — buttons, hero chrome details, syntax-color spans. */

/* Buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.btn:hover, .btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.btn:focus-visible {
    outline: 2px solid var(--accent-glow);
    outline-offset: 2px;
}
.btn:active { transform: translateY(0); }

.btn-sm { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }

.btn-primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--accent);
    color: var(--bg);
    box-shadow: 0 0 24px 4px var(--accent-glow);
    transform: translateY(-1px);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover {
    background: var(--accent-soft);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.nav-cta-icon { flex: none; }

/* Hero chrome details ------------------------------------------------- */

.dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin: 0 4px;
    box-shadow: 0 0 8px var(--accent);
    animation: dot-pulse 1.6s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.7); }
}

.caret {
    display: inline-block;
    width: 0.55ch;
    color: var(--accent);
    animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink {
    50% { opacity: 0; }
}

/* Hero identity line (Cloud & AI-Native Architect.) ----------------- */

.hero-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-sans);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.hi-anchor {
    font-size: clamp(var(--text-xl), 3.2vw, var(--text-2xl));
    font-weight: 600;
    color: var(--ink);
}
.hi-amp {
    font-size: clamp(var(--text-xl), 3.2vw, var(--text-2xl));
    font-weight: 400;
    color: var(--accent);
    font-style: italic;
}
.hi-noun {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--ink-muted);
    align-self: flex-end;
    padding-bottom: 4px;
    position: relative;
    display: inline-block;
}
.hi-noun-text { position: relative; z-index: 1; }
.hi-noun-text::after {
    content: '•';
    color: var(--accent);
    font-size: 0.65em;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    text-shadow: 0 0 10px var(--accent-glow), 0 0 20px var(--accent-glow);
    animation: dot-breathe 2s ease-in-out infinite;
}
@keyframes dot-breathe {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%       { opacity: 1;   transform: scale(1.25); }
}

.hi-agents {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}
.hi-agent {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px 1px var(--accent-glow);
    opacity: 0;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.hi-agent-1 {
    animation-name: agent-fly-1;
    animation-duration: 7.5s;
    animation-delay: 0.6s;
}
.hi-agent-2 {
    animation-name: agent-fly-2;
    animation-duration: 9s;
    animation-delay: 1.4s;
}
.hi-agent-3 {
    animation-name: agent-fly-3;
    animation-duration: 8.2s;
    animation-delay: 2.1s;
}
@keyframes agent-fly-1 {
    0%   { transform: translate(-30px, -10px); opacity: 0; }
    15%  { opacity: 1; }
    50%  { transform: translate(80px, -22px); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(160px, 4px); opacity: 0; }
}
@keyframes agent-fly-2 {
    0%   { transform: translate(180px, 14px); opacity: 0; }
    15%  { opacity: 1; }
    50%  { transform: translate(60px, 26px); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(-40px, 12px); opacity: 0; }
}
@keyframes agent-fly-3 {
    0%   { transform: translate(40px, -28px); opacity: 0; }
    20%  { opacity: 1; }
    50%  { transform: translate(110px, 0); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate(40px, 28px); opacity: 0; }
}

/* Mobile: shrink the agent flight distances so they don't escape a
   360px-wide viewport. Same shape, half the travel. */
@media (max-width: 600px) {
    @keyframes agent-fly-1 {
        0%   { transform: translate(-15px, -8px); opacity: 0; }
        15%  { opacity: 1; }
        50%  { transform: translate(45px, -14px); opacity: 1; }
        85%  { opacity: 1; }
        100% { transform: translate(85px, 4px); opacity: 0; }
    }
    @keyframes agent-fly-2 {
        0%   { transform: translate(95px, 10px); opacity: 0; }
        15%  { opacity: 1; }
        50%  { transform: translate(35px, 18px); opacity: 1; }
        85%  { opacity: 1; }
        100% { transform: translate(-20px, 8px); opacity: 0; }
    }
    @keyframes agent-fly-3 {
        0%   { transform: translate(20px, -18px); opacity: 0; }
        20%  { opacity: 1; }
        50%  { transform: translate(60px, 0); opacity: 1; }
        80%  { opacity: 1; }
        100% { transform: translate(20px, 18px); opacity: 0; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .hi-noun-text::after {
        animation: none;
        opacity: 0.7;
        transform: scale(1);
    }
    .hi-agent { display: none; }
}

/* Off-screen pause: when #hero leaves the viewport, freeze the looping
   identity-line cursor blink and the three flying agent dots. The hero is
   visually unchanged while visible; the only difference is that paint work
   stops the moment it scrolls away. */
#hero[data-paused="true"] .hi-noun-text::after,
#hero[data-paused="true"] .hi-agent,
#hero[data-paused="true"] .caret,
#hero[data-paused="true"] .dot {
    animation-play-state: paused;
}

/* Used by .bento-card-foot .kw and other nested keyword spans */
.kw { color: var(--accent); }

/* Hero name char wrapper (for the scramble animation) ---------------- */

.hero-name .char {
    display: inline-block;
    will-change: transform, opacity;
}

/* Hero tagline word wrapper (for token-stream reveal) ---------------- */

.hero-tagline .word {
    display: inline-block;
    will-change: transform, filter, opacity;
}
.hero-tagline .word::after {
    content: "\00a0";
}

/* Certification Badge Rail (spec 10) --------------------------------- */

.cert-rail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-12);
    height: 180px;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    /* Tiny edge fade so badges don't hard-pop at the absolute viewport edges */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1.5%, black 98.5%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 1.5%, black 98.5%, transparent 100%);
}
.cert-rail > * { pointer-events: auto; }

.cert-rail-list {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    width: max-content;
    padding: 0;
    margin: 0;
    height: 100%;
    animation: cert-ticker 36s linear infinite;
    will-change: transform;
}
.cert-rail-list:hover {
    animation-play-state: paused;
}

/* Off-screen pause: when the cert rail leaves the viewport, freeze the
   ticker. Resumes from the same offset when scrolled back into view, so
   the visual identity is preserved while the GPU layer stops repainting. */
.cert-rail[data-paused="true"] .cert-rail-list {
    animation-play-state: paused;
}

@keyframes cert-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--cert-ticker-dist, -33.33%)); }
}

.cert-tile {
    position: relative;
    list-style: none;
    flex: 0 0 130px;
    width: 130px;
    height: 130px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.04);
    /* No backdrop-filter: the tile background is rgba(255,255,255,0.04)
       over a solid black hero, so blur(8px) had nothing to actually blur.
       Removing it eliminates 20 simultaneous GPU blur layers — pure win
       on Windows compositors with no visible difference. */
    box-shadow: 0 0 24px rgba(0, 255, 209, 0.18);
    overflow: visible;
    cursor: pointer;
    padding: 0;
    transform-style: preserve-3d;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}
/* will-change is transient by design — pin the GPU layer only when the
   tile is actually being interacted with, not for all 20 tiles at rest. */
.cert-tile:hover,
.cert-tile:focus-visible {
    will-change: transform, box-shadow;
}

/* Real anchor wrapping each cert. Sized to fill the tile so the existing
   percentage-based <img> layout still resolves correctly, with a
   focus-visible ring for keyboard users that respects the rounded shape. */
.cert-tile-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
    outline: none;
}
.cert-tile-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: inherit;
}

.cert-tile img {
    position: relative;
    z-index: 1;
    display: block;
    width: 84%;
    height: 84%;
    margin: 8%;
    object-fit: contain;
}

/* AI badges: extra cyan ring + stronger glow */
.cert-tile.is-ai {
    box-shadow: 0 0 28px rgba(0, 255, 209, 0.32);
}
.cert-tile.is-ai::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-md) + 2px);
    border: 1px solid var(--accent);
    pointer-events: none;
    opacity: 0.65;
}

/* Shimmer sweep — diagonal highlight that crosses the badge surface.
   Uses clip-path sweep (compositor-safe in Chrome 108+) instead of
   background-position (paint-bound), eliminating per-tile repaints on scroll. */
.cert-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(
        115deg,
        transparent 25%,
        rgba(0, 255, 209, 0.26) 50%,
        transparent 75%
    );
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    will-change: clip-path, opacity;
    animation: cert-shimmer 7s linear infinite;
    animation-delay: var(--shimmer-delay, 0s);
}

@keyframes cert-shimmer {
    0%   { clip-path: inset(0 110% 0 -10% round var(--radius-md)); opacity: 0; }
    15%  { clip-path: inset(0 90%  0 -10% round var(--radius-md)); opacity: 1; }
    50%  { clip-path: inset(0 40%  0  40% round var(--radius-md)); opacity: 1; }
    70%  { clip-path: inset(0 -10% 0  90% round var(--radius-md)); opacity: 0; }
    100% { clip-path: inset(0 110% 0 -10% round var(--radius-md)); opacity: 0; }
}

/* Off-screen pause for the per-tile shimmer. Frozen while the rail is
   not visible so compositor layer cost goes to zero. (Reduced-motion guard
   for the shimmer + ticker is already covered ~80 lines below.) */
.cert-rail[data-paused="true"] .cert-tile::after {
    animation-play-state: paused;
}

/* Magnetic hover: pronounced lift + scale to make the badge feel alive */
.cert-tile:hover,
.cert-tile:focus-visible {
    outline: none;
    transform: translateY(-12px) scale(1.35);
    border-color: var(--accent);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 56px rgba(0, 255, 209, 0.6);
    z-index: 5;
}

/* Popover with credential detail — anchored ABOVE the tile so the rail's
   overflow:hidden doesn't clip it (the rail clips below). */
.cert-tile-popover {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    transform: translateX(-50%) translateY(6px);
    min-width: 240px;
    max-width: 300px;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 255, 209, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 200ms var(--ease-out),
        transform 200ms var(--ease-out),
        visibility 200ms;
    z-index: 11;
}
.cert-tile-popover::after {
    /* tiny pointer triangle on bottom edge (since popover is above tile) */
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-strong);
    border-right: 1px solid var(--border-strong);
    transform: translateX(-50%) rotate(45deg);
}
.cert-tile:hover .cert-tile-popover,
.cert-tile:focus-visible .cert-tile-popover,
.cert-tile.is-open .cert-tile-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.cert-tile-popover-name {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ink);
    font-size: var(--text-sm);
    line-height: 1.3;
    margin-bottom: 4px;
}
.cert-tile-popover-meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}
.cert-tile-popover-meta .issuer {
    color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .cert-tile::after { animation: none; opacity: 0; }
    .cert-tile:hover,
    .cert-tile:focus-visible {
        transform: translateY(-4px) scale(1.1);
    }
    .cert-tile-popover { transition: opacity 0s, visibility 0s; }
    /* Stop the marquee; let users swipe through the row manually */
    .cert-rail { overflow-x: auto; }
    .cert-rail-list { animation: none; transform: none; }
}

@media (max-width: 900px) {
    .cert-rail { height: 144px; }
    .cert-tile { flex: 0 0 100px; width: 100px; height: 100px; }
    .cert-rail-list { gap: var(--space-4); }
}

@media (max-width: 600px) {
    .cert-rail { height: 108px; bottom: var(--space-8); }
    .cert-tile { flex: 0 0 79px; width: 79px; height: 79px; }
    .cert-rail-list { gap: var(--space-3); }
}

/* Bento certs card upgrade: render badge images alongside text */
.cert-item .cert-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: var(--space-2);
    vertical-align: middle;
    object-fit: contain;
}
.cert-item-img-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.cert-item-img-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0, 255, 209, 0.18));
}
@media (max-width: 375px) {
    .cert-item-img-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Career Trajectory (spec 04) ---------------------------------------- */

.section-trajectory {
    display: block;
    max-width: 1100px;
    padding-top: var(--space-16);
    padding-bottom: var(--space-24);
}

.trail-header {
    max-width: 760px;
    margin-bottom: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.trail-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

/* Three rhythmic beats stacked, each slightly smaller than a hero name
   but big enough to anchor the section. */
.trail-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: var(--space-3) 0 var(--space-2);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(var(--text-xl), 3.6vw, 2.5rem);
    letter-spacing: -0.025em;
    line-height: 1.04;
    color: var(--ink);
}
.trail-title span {
    display: block;
}
/* Each line tints down progressively so the eye reads top-to-bottom */
.trail-title span:nth-child(1) { color: var(--ink); }
.trail-title span:nth-child(2) { color: var(--ink); opacity: 0.86; }
.trail-title span:nth-child(3) { color: var(--accent); }

/* Stats — a three-cell metric strip. Big tabular numerals on top, small
   uppercase labels below, hairline dividers between cells, brand-era
   accent on each numeral so the strip foreshadows the timeline below. */
.trail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: var(--space-4) 0;
}
.trail-stat {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-1);
    padding: 0 var(--space-5);
}
.trail-stat + .trail-stat::before {
    /* hairline divider between cells */
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: var(--border);
}
.trail-stat:first-child { padding-left: 0; }
.trail-stat:last-child  { padding-right: 0; }

.trail-stat-value {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(var(--text-2xl), 4.4vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
}
.trail-stat-unit {
    font-size: 0.55em;
    font-weight: 600;
    margin-left: 2px;
    color: var(--ink-muted);
    letter-spacing: 0;
}
.trail-stat-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Per-era colour on the numeral so the strip reads as a colour journey */
.trail-stat[data-era="accenture"] .trail-stat-value { color: var(--era-accenture); }
.trail-stat[data-era="ey"]        .trail-stat-value { color: var(--era-ey); }
.trail-stat[data-era="deloitte"]  .trail-stat-value { color: var(--era-deloitte); }

@media (max-width: 640px) {
    .trail-stats {
        padding: var(--space-4) 0;
    }
    .trail-stat { padding: 0 var(--space-4); }
}

.trail-grid {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: stretch;
}

/* --- Rail (left column) --- */

.trail-rail {
    position: relative;
    height: 100%;
}
.trail-rail-svg {
    position: sticky;
    top: var(--nav-h);
    width: 100%;
    height: calc(100vh - var(--nav-h));
    pointer-events: none;
}
.trail-rail-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0.92;
    /* drop-shadow removed: CSS filter on a position:sticky element forces
       Chrome to repaint on every scroll frame. Higher opacity compensates. */
}

.trail-stations {
    list-style: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.trail-station {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    pointer-events: auto;
}
.trail-station-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--ink-subtle);
    transition:
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}
.trail-station[data-era="accenture"] .trail-station-dot.is-active {
    background: var(--era-accenture); border-color: var(--era-accenture);
    box-shadow: 0 0 12px var(--era-accenture);
}
.trail-station[data-era="ey"] .trail-station-dot.is-active {
    background: var(--era-ey); border-color: var(--era-ey);
    box-shadow: 0 0 12px var(--era-ey);
}
.trail-station[data-era="deloitte"] .trail-station-dot.is-active {
    background: var(--era-deloitte); border-color: var(--era-deloitte);
    box-shadow: 0 0 12px var(--era-deloitte);
}
.trail-station-year {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    letter-spacing: 0.04em;
    transition: color var(--dur-base) var(--ease-out);
    position: relative;
    z-index: 1;
    background: var(--bg);
    padding: 0 var(--space-1);
}
.trail-station .trail-station-dot.is-active + .trail-station-year {
    color: var(--ink);
}

/* --- Companies (right column) --- */

.trail-companies {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.trail-company {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    will-change: opacity, transform;
}

.company-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.company-logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--border) inset;
}
.company-logo svg { width: 100%; height: 100%; display: block; }

.company-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.company-name {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.company-tenure {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}
.company-mode {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.65rem;
    color: var(--ink-subtle);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}
.company-year-chip {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    letter-spacing: 0.06em;
    margin-bottom: var(--space-1);
}

/* --- Role rows nested under each company --- */

.role-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-left: 28px;
    border-left: 1px solid var(--border);
    margin-left: 28px;
}
.trail-company[data-era="accenture"] .role-list { border-left-color: rgba(161, 0, 255, 0.25); }
.trail-company[data-era="ey"] .role-list        { border-left-color: rgba(255, 230, 0, 0.25); }
.trail-company[data-era="deloitte"] .role-list  { border-left-color: rgba(134, 188, 37, 0.30); }

.role-tile {
    position: relative;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition:
        border-color var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
    will-change: opacity, transform;
}
.role-tile:hover {
    border-color: var(--border-strong);
    background: var(--bg-card);
}
.role-tile.is-pulsing {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-soft), 0 0 28px var(--accent-glow);
}
.role-tile::before {
    /* nub on the left spine, aligned with role tile */
    content: "";
    position: absolute;
    left: -34px;
    top: var(--space-4);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-subtle);
    box-shadow: 0 0 0 3px var(--bg);
}
.trail-company[data-era="accenture"] .role-tile::before { background: var(--era-accenture); }
.trail-company[data-era="ey"]        .role-tile::before { background: var(--era-ey); }
.trail-company[data-era="deloitte"]  .role-tile::before { background: var(--era-deloitte); }

.role-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 4px;
}
.role-period {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-bottom: 2px;
}
.role-period .sep { color: var(--ink-subtle); }
.role-duration { color: var(--ink-subtle); }
.role-location {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    margin-bottom: var(--space-3);
}
.role-skills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.role-skills::before {
    content: "◆";
    color: var(--accent);
    font-size: 0.7rem;
    margin-right: var(--space-1);
}
.skill-pill {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink);
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}
.skill-pill.is-hidden { display: none; }
.skill-pill-extra {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-muted);
    padding: 3px 9px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.skill-pill-extra:hover,
.skill-pill-extra:focus-visible {
    color: var(--ink);
    border-color: var(--accent);
    outline: none;
}

@media (max-width: 768px) {
    .section-trajectory { padding-top: var(--space-12); padding-bottom: var(--space-16); }
    .trail-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .trail-rail { display: none; }
    .trail-companies { gap: var(--space-12); }
    .company-header { gap: var(--space-3); }
    .company-logo { width: 44px; height: 44px; }
    .company-name { font-size: var(--text-lg); }
    .company-year-chip { display: block; }
    .role-list { padding-left: 0; border-left: 0; margin-left: 0; }
    .role-tile { padding: var(--space-3) var(--space-4); }
    .role-tile::before { display: none; }
    .role-title { font-size: var(--text-sm); }
}

@media (prefers-reduced-motion: reduce) {
    .trail-rail-line { stroke-dashoffset: 0 !important; }
    .role-tile.is-pulsing { animation: none; }
}

/* Capabilities -------------------------------------------------------- */

.cap-axis {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Same per-axis indirection as .cap-card so the axis tag and divider
       pick up the right tint. Defaults to mint. */
    --card-accent:      var(--accent);
    --card-accent-soft: var(--accent-soft);
}
.cap-axis[data-axis="ai-native"] {
    --card-accent:      var(--axis-ai);
    --card-accent-soft: var(--axis-ai-soft);
}
.cap-axis[data-axis="cloud"] {
    --card-accent:      var(--axis-cloud);
    --card-accent-soft: var(--axis-cloud-soft);
}
.cap-axis[data-axis="business"] {
    --card-accent:      var(--axis-biz);
    --card-accent-soft: var(--axis-biz-soft);
}
.cap-axis-head {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--card-accent-soft);
    cursor: default;
}
/* Hover sweep: a thin accent-coloured underline draws in from left to
   right over the static border, with a soft glow. Pairs with subtle
   forward shifts on the tag and title. */
.cap-axis-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: var(--card-accent);
    box-shadow: 0 0 10px var(--card-accent-glow);
    transition: width var(--dur-base) var(--ease-out);
    pointer-events: none;
}
.cap-axis-head:hover::after {
    width: 100%;
}
.cap-axis-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--card-accent);
    letter-spacing: 0.08em;
    transition:
        transform var(--dur-base) var(--ease-out),
        letter-spacing var(--dur-base) var(--ease-out);
}
.cap-axis-head:hover .cap-axis-tag {
    transform: translateX(3px);
    letter-spacing: 0.12em;
}
.cap-axis-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--ink);
    letter-spacing: -0.01em;
    transition:
        transform var(--dur-base) var(--ease-out),
        text-shadow var(--dur-base) var(--ease-out);
}
.cap-axis-head:hover .cap-axis-title {
    transform: translateX(2px);
    text-shadow: 0 0 18px var(--card-accent-glow);
}
@media (prefers-reduced-motion: reduce) {
    .cap-axis-head::after,
    .cap-axis-tag,
    .cap-axis-title { transition: none; }
}
.cap-axis-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cap-card {
    --cap-bracket: 10px;
    /* Per-axis accent indirection: each axis sets these three custom props,
       and every card-internal rule reads through --card-accent so colour
       theming follows the axis automatically. Defaults to mint. */
    --card-accent:      var(--accent);
    --card-accent-soft: var(--accent-soft);
    --card-accent-glow: var(--accent-glow);
    position: relative;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    padding-right: calc(var(--space-5) + 3.5rem); /* room for oversized numeral */
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow: hidden;
    transition:
        border-color var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
    will-change: transform, opacity;
}
.cap-card[data-axis="ai-native"] {
    --card-accent:      var(--axis-ai);
    --card-accent-soft: var(--axis-ai-soft);
    --card-accent-glow: var(--axis-ai-glow);
}
.cap-card[data-axis="cloud"] {
    --card-accent:      var(--axis-cloud);
    --card-accent-soft: var(--axis-cloud-soft);
    --card-accent-glow: var(--axis-cloud-glow);
}
.cap-card[data-axis="business"] {
    --card-accent:      var(--axis-biz);
    --card-accent-soft: var(--axis-biz-soft);
    --card-accent-glow: var(--axis-biz-glow);
}
.cap-card:hover {
    border-color: var(--border-strong);
    background: linear-gradient(135deg, var(--bg-elev), var(--bg-card));
}

.cap-bracket {
    position: absolute;
    width: var(--cap-bracket);
    height: var(--cap-bracket);
    border-color: var(--card-accent-soft);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
    transition: border-color var(--dur-base) var(--ease-out);
}
.cap-bracket-tl {
    top: 6px; left: 6px;
    border-top-width: 1px;
    border-left-width: 1px;
}
.cap-bracket-br {
    bottom: 6px; right: 6px;
    border-bottom-width: 1px;
    border-right-width: 1px;
}
.cap-card:hover .cap-bracket { border-color: var(--card-accent); }

.cap-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, var(--card-accent-soft) 45%, var(--card-accent-soft) 55%, transparent 100%);
    opacity: 0;
    transform: translateX(-100%);
}
.cap-card.is-scanned .cap-scan {
    animation: cap-scan-sweep 1.1s var(--ease-out) forwards;
}
@keyframes cap-scan-sweep {
    0%   { opacity: 0; transform: translateX(-100%); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(100%); }
}

/* Card head: oversized axis numeral pinned top-right, label below. */
.cap-card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.cap-index {
    position: absolute;
    top: var(--space-2);
    right: var(--space-4);
    font-family: var(--font-mono);
    font-size: clamp(2.6rem, 4vw, 3.4rem);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--card-accent);
    opacity: 0.22;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;
    transition: opacity var(--dur-base) var(--ease-out);
}
.cap-card:hover .cap-index { opacity: 0.32; }
.cap-label {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--ink);
    letter-spacing: -0.005em;
}

/* Context: collapsed to a single clipped line by default; reveals on
   hover or keyboard focus (Progressive Disclosure — the very pattern the
   AI-Native axis names). max-height + line-clamp avoids a layout jump
   between cards. */
.cap-context {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-muted);
    line-height: 1.5;
    font-style: italic;
    margin-top: -2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    overflow: hidden;
    transition: -webkit-line-clamp var(--dur-base) var(--ease-out);
}
.cap-card:hover .cap-context,
.cap-card:focus-within .cap-context {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.cap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin-top: var(--space-1);
    padding: 0;
}
/* Top-5 + reveal: chips beyond the 5th are tagged .cap-chip-extra and
   hidden while the list is collapsed. The "+N more" trigger toggles
   data-collapsed on the <ul>. */
.cap-chips[data-collapsed="true"] > li.cap-chip-extra { display: none; }
.cap-chips[data-collapsed="false"] > li.cap-chip-more-wrap { display: none; }

/* Skill chips are presentational labels — non-clickable. They still get a
   per-axis hover accent so the section feels alive, but no cursor: pointer
   and no click-to-scroll behaviour. The "+N more" reveal button below is
   the only real <button> in the chip list. */
.cap-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink);
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
    cursor: default;
    line-height: 1.3;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}
.cap-chip-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--ink-muted);
    transition: color var(--dur-fast) var(--ease-out);
}
.cap-chip-label {
    display: inline-block;
}
.cap-chip:hover {
    color: var(--card-accent);
    border-color: var(--card-accent);
    background: var(--card-accent-soft);
}
.cap-chip:hover .cap-chip-icon {
    color: var(--card-accent);
}

/* "+N more" / "Show fewer" — the only interactive button in the chip list.
   Dashed border + accent text marks it as a different affordance. */
.cap-chip-more {
    border: 1px dashed var(--border-strong);
    background: transparent;
    color: var(--card-accent);
    cursor: pointer;
}
.cap-chip-more:hover, .cap-chip-more:focus-visible {
    color: var(--card-accent);
    border-color: var(--card-accent);
    background: var(--card-accent-soft);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .cap-scan { display: none; }
    .cap-chip { transition: none; }
    .cap-chip:hover { transform: none; }
    .cap-context { transition: none; }
    .cap-index { transition: none; }
    .cap-chip-icon { transition: none; }
}

/* Coarse-pointer (touch) tap-target bumps — meet WCAG 2.5.5 where layout
   permits. Visual sizing stays close to desktop; we add min height/padding
   so fingers have something to land on. */
@media (any-pointer: coarse) {
    .cap-chip {
        min-height: 40px;
        padding: 10px 14px;
        font-size: 0.78rem;
    }
    .btn {
        min-height: var(--tap-min);
    }
    .btn-sm {
        min-height: 36px;
    }
    /* Cert tiles: use .is-open to show the popover on tap (CSS hook
       already in place at line ~402; main.js wires the click). */
    .cert-tile { -webkit-tap-highlight-color: transparent; }
}

/* Custom cursor (spec 08) -------------------------------------------- */

.cursor {
    position: fixed;
    top: 0; left: 0;
    width: 28px; height: 28px;
    pointer-events: none;
    z-index: 80;
    will-change: transform, width, height;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.cursor-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--accent);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
    transition:
        width var(--dur-base) var(--ease-out),
        height var(--dur-base) var(--ease-out),
        filter var(--dur-base) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}
.cursor-corner-tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 2px; }
.cursor-corner-tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; border-top-right-radius: 2px; }
.cursor-corner-bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; border-bottom-left-radius: 2px; }
.cursor-corner-br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 2px; }

.cursor.is-magnet .cursor-corner {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}
.cursor.is-hidden { opacity: 0; }

/* Hide the magnetic cursor while the agent panel is open. Otherwise the
   brackets stay snapped to whichever magnet was last under the mouse
   (e.g., the Resume nav link) and stop tracking the page until the
   panel closes. The native OS pointer is unaffected. */
body[data-agent-panel-open="true"] .cursor { display: none; }

/* Hide custom cursor on touch / coarse pointers */
@media (any-pointer: coarse), (prefers-reduced-motion: reduce) {
    .cursor { display: none !important; }
}

/* Reduced-motion: kill the chrome animations ------------------------- */

@media (prefers-reduced-motion: reduce) {
    .dot, .caret { animation: none; }
}

/* Resume gate modal --------------------------------------------------- */

.resume-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--ink);
    padding: 0;
    width: min(440px, calc(100vw - var(--space-8)));
    max-width: 100%;
    max-height: calc(100vh - var(--space-8));
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--accent-soft);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}

.resume-modal[open] {
    opacity: 1;
}

.resume-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.resume-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8);
}

.resume-form-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.resume-form-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    letter-spacing: 0.05em;
}

.resume-form-head h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.2;
}

.resume-form-sub {
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

#g-signin-btn {
    display: flex;
    justify-content: center;
    margin: var(--space-2) 0 var(--space-1);
    min-height: 44px;
}

.resume-form-google-note {
    color: var(--ink-subtle);
    font-size: var(--text-xs);
    text-align: center;
}

.resume-loading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.resume-error {
    color: var(--danger);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: rgba(255, 92, 92, 0.08);
    border: 1px solid rgba(255, 92, 92, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}

.resume-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.resume-form-actions .btn {
    min-height: 44px;
}

[data-resume-submit][disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.resume-loading {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: var(--space-2);
    border: 2px solid var(--accent-soft);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: resume-spin 700ms linear infinite;
    vertical-align: middle;
}

@keyframes resume-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
    .resume-modal {
        width: calc(100vw - var(--space-4));
        margin: var(--space-4);
    }
    .resume-form {
        padding: var(--space-6);
        gap: var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .resume-modal {
        transition: none;
        transform: none;
    }
    .resume-loading { animation: none; }
}

/* Writing section (spec 14) ----------------------------------------- */

.posts-header {
    max-width: 760px;
    margin-bottom: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.posts-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    letter-spacing: 0.06em;
}
.posts-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
}
.posts-sub {
    color: var(--ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
    max-width: 620px;
}

.posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 760px;
}

/* Post filter chips (spec 25) ---------------------------------------- */

.post-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    max-width: 760px;
    margin-bottom: var(--space-4);
}

.post-filter-chip {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.post-filter-chip:hover,
.post-filter-chip:focus-visible {
    border-color: var(--border-strong);
    color: var(--ink);
    outline: none;
}
.post-filter-chip.is-active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* Post rows — flat anchor cards (spec 25) ----------------------------- */

.post-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "title arrow"
        "preview preview"
        "foot foot";
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elev);
    color: inherit;
    text-decoration: none;
    position: relative;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.post-row:hover,
.post-row:focus-visible {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 1px var(--accent-glow) inset;
    outline: none;
}

.post-row-title {
    grid-area: title;
    color: var(--ink-strong);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-row-preview {
    grid-area: preview;
    color: var(--ink-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--space-2);
}

.post-row-foot {
    grid-area: foot;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    margin-top: var(--space-3);
}

.post-row-date {
    color: var(--ink-muted);
}

.post-row-tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.post-row-tag {
    color: var(--accent);
    letter-spacing: 0.02em;
}

.post-row-arrow {
    grid-area: arrow;
    align-self: start;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.35;
    transition: transform var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.post-row:hover .post-row-arrow,
.post-row:focus-visible .post-row-arrow {
    color: var(--accent);
    transform: translate(2px, -2px);
}

@media (max-width: 600px) {
    .post-row {
        padding: var(--space-3) var(--space-4);
    }
    .post-row-title {
        font-size: var(--text-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-row {
        transition: border-color var(--dur-fast) var(--ease-out);
    }
    .post-row-arrow {
        transition: color var(--dur-fast) var(--ease-out);
    }
    .post-row:hover .post-row-arrow,
    .post-row:focus-visible .post-row-arrow {
        transform: none;
    }
}

/* Nav flyout — recent posts dropdown on the Writing link (spec 14) ---- */

.nav-link-group {
    position: relative;
}

.nav-flyout {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    min-width: 320px;
    max-width: 420px;
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
    z-index: 100;
}
/* Invisible bridge: extends the flyout's hover hit-area up across the
   space-2 gap so the mouse moving from link → panel doesn't fall into a
   "no-element" zone and close the dropdown. pointer-events: auto must be
   explicit (it inherits from .nav-flyout, which is "none" until hovered). */
.nav-flyout::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--space-2));
    left: 0;
    right: 0;
    height: var(--space-2);
    pointer-events: auto;
}
.nav-link-group:hover .nav-flyout,
.nav-link-group:focus-within .nav-flyout,
.nav-link-group.is-open .nav-flyout {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-flyout-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
}

.nav-flyout-link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.4;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.nav-flyout-link-title {
    flex: 1 1 auto;
    min-width: 0;
    /* Wrap long titles inside the panel; cap at 3 lines so the dropdown
       stays compact even when LinkedIn's og:description is very long. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.nav-flyout-link::after {
    content: "↗";
    flex: 0 0 auto;
    /* line-height matches the title's so the arrow optically aligns with
       the first wrapped line, not the vertical centre of the link. */
    line-height: 1.4;
    color: var(--ink-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    transition: color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.nav-flyout-link:hover,
.nav-flyout-link:focus-visible {
    background: var(--bg-card);
    color: var(--accent);
    outline: none;
}
.nav-flyout-link:hover::after,
.nav-flyout-link:focus-visible::after {
    color: var(--accent);
    transform: translate(2px, -2px);
}

.nav-flyout-foot {
    display: block;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    transition: color var(--dur-fast) var(--ease-out);
}
.nav-flyout-foot:hover,
.nav-flyout-foot:focus-visible {
    color: var(--ink);
    outline: none;
}

/* Touch / coarse-pointer: the JS in initPostsFlyoutEager() handles the
   "first tap opens, second tap navigates" pattern with the .is-open class.
   No display:none override here — that would break iPad / Windows-touch /
   laptop-with-touch-and-mouse, where the flyout should still work. The
   mobile nav drawer (separate component) is what truly small viewports get. */

/* ---------- Agent chat widget (spec 21) -------------------------------- */
/* Floating "Ask my agent" FAB + slide-in panel. Mounted into <div id="agent-root">.
   Spec #20 §Templates is the design source; spec #21 adds prewarm + cold-start
   loading copy. Plain text only — no Markdown rendering on assistant content. */

.agent-widget-host {
    position: fixed;
    inset: auto var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)) auto;
    z-index: 60;
    pointer-events: none;
}
.agent-widget-host > * { pointer-events: auto; }

.agent-fab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    background: var(--bg-card);
    color: var(--accent);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 0 var(--accent-glow);
    transition:
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}
.agent-fab:hover,
.agent-fab:focus-visible {
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 24px 0 var(--accent-glow);
    outline: none;
}
.agent-fab svg { color: var(--accent); }

/* Pulsing halo: a sibling layer with a STATIC box-shadow whose only
   animated property is opacity. Animating opacity is GPU-composited and
   essentially free; animating box-shadow (the prior approach) forced a
   full repaint of the FAB's bounding box every frame — visible as scroll
   jank on Windows where the FAB stays fixed in the viewport. Visual
   result is identical to before. */
.agent-fab-pulse {
    position: relative;
}
.agent-fab-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 24px 6px var(--accent-glow);
    opacity: 0;
    pointer-events: none;
    animation: agent-fab-pulse-opacity 4.5s ease-in-out infinite;
}
@keyframes agent-fab-pulse-opacity {
    0%, 70%, 100% { opacity: 0; }
    35%           { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .agent-fab-pulse::after { animation: none; }
}

.agent-panel {
    position: fixed;
    inset: auto var(--space-4) calc(var(--space-4) + 56px + env(safe-area-inset-bottom)) auto;
    width: 380px;
    max-height: min(72vh, 640px);
    background: var(--bg-elev);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    display: none;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    transform: translateY(8px);
    opacity: 0;
    transition:
        transform var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}
.agent-panel.is-open {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}
/* Expanded view: ~25% wider + taller for long answers. Mobile (<= 720px) is
   already full-screen and ignores this. */
.agent-panel.is-expanded {
    width: 620px;
    min-height: min(60vh, 560px);
    max-height: min(92vh, 900px);
}
@media (prefers-reduced-motion: reduce) {
    .agent-panel { transition: none; transform: none; }
}

.agent-panel-head {
    position: relative;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.agent-panel-title {
    margin: 0;
    font-size: var(--text-base);
    color: var(--ink);
    letter-spacing: 0.01em;
}
.agent-panel-head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.agent-panel-close,
.agent-panel-expand,
.agent-panel-minimize {
    /* Spec 26: bump from 36px to --tap-min (44px) so thumb-taps on phones
       hit reliably and we align with the spec-24 tap-target rule. */
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 0 var(--space-1);
    background: transparent;
    border: none;
    color: var(--ink-muted);
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.agent-panel-close { font-size: 1.5rem; }
.agent-panel-close:hover,
.agent-panel-close:focus-visible,
.agent-panel-expand:hover,
.agent-panel-expand:focus-visible,
.agent-panel-minimize:hover,
.agent-panel-minimize:focus-visible {
    color: var(--accent);
    outline: none;
}
.agent-panel-expand[aria-pressed="true"] { color: var(--accent); }

/* Minimized state — only the header bar is visible. */
.agent-panel.is-minimized {
    max-height: none;
    min-height: auto;
    cursor: pointer;
}
.agent-panel.is-minimized .agent-panel-body,
.agent-panel.is-minimized .agent-input-row,
.agent-panel.is-minimized .agent-panel-foot,
.agent-panel.is-minimized .agent-panel-drag-zone { display: none; }
.agent-panel.is-minimized .agent-panel-head { border-bottom: none; }

.agent-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    /* `scroll` (not `auto`) forces the scrollbar to render even on macOS
       where overlay scrollbars hide by default — visitors couldn't
       discover the scrollable region until they touched it. */
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    scrollbar-width: thin;
    /* Brighter thumb so it's visible on the dark panel without dominating. */
    scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.06);
    scrollbar-gutter: stable;
}
/* WebKit (Safari, Chrome) — overlay scrollbar override. */
.agent-panel-body::-webkit-scrollbar {
    width: 10px;
}
.agent-panel-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 5px;
}
.agent-panel-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 36px;
}
.agent-panel-body::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: padding-box;
}
/* Gradient hint shown via JS when content overflows — works on mobile where
   native overlay scrollbars are invisible by default. */
.agent-panel-body.has-overflow::after {
    content: '';
    position: sticky;
    bottom: 0;
    display: block;
    flex-shrink: 0;
    align-self: stretch;
    height: 40px;
    background: linear-gradient(transparent, var(--bg-elev));
    pointer-events: none;
}

.agent-prompts {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.agent-prompts.is-hidden { display: none; }
.agent-prompts-head {
    margin: 0;
    color: var(--ink-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
}
.agent-prompt-chip {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    cursor: pointer;
    min-height: 44px;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}
.agent-prompt-chip:hover,
.agent-prompt-chip:focus-visible {
    border-color: var(--accent);
    background: var(--accent-soft);
    outline: none;
}

/* Action chips. Same visual weight as .agent-prompt-chip — just a leading
   mail icon as subtle differentiator. Rendered above the question chips in
   renderStarters() so it sits at the top of the starter row. */
.agent-action-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    cursor: pointer;
    min-height: 44px;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}
.agent-action-chip:hover,
.agent-action-chip:focus-visible {
    border-color: var(--accent);
    background: var(--accent-soft);
    outline: none;
}
.agent-action-chip-icon {
    flex-shrink: 0;
    color: var(--ink-subtle);
}
.agent-action-chip:hover .agent-action-chip-icon,
.agent-action-chip:focus-visible .agent-action-chip-icon {
    color: var(--accent);
}

.agent-transcript {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.agent-message { padding: 0; }
.agent-message p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.agent-message-user p {
    align-self: flex-end;
    background: var(--accent-soft);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-left: var(--space-6);
}
.agent-message-assistant p {
    color: var(--ink);
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--accent);
}
.agent-message-system p {
    color: var(--ink-muted);
    font-style: italic;
    border-left: 2px solid var(--ink-subtle);
    padding: var(--space-2) var(--space-3);
}
.agent-message-text a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.agent-input-row {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
.agent-input {
    flex: 1 1 auto;
    resize: none;
    min-height: 44px;
    max-height: 120px;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elev);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.4;
}
.agent-input:focus-visible {
    outline: none;
    border-color: var(--accent);
}
/* Spec 26: prevent iOS Safari from force-zooming when the input is
   focused. iOS triggers zoom whenever a focused form control's computed
   font-size is below 16px. Coarse-pointer scope keeps the desktop
   typography untouched. */
@media (any-pointer: coarse) {
    .agent-input { font-size: 16px; }
}
.agent-send {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.agent-send:disabled { opacity: 0.4; cursor: progress; }
.agent-send:hover:not(:disabled) { filter: brightness(1.1); }

.agent-panel-foot {
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--ink-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
}
.agent-panel-foot a {
    color: var(--accent);
    text-decoration: none;
}
.agent-panel-foot a:hover,
.agent-panel-foot a:focus-visible {
    text-decoration: underline;
    outline: none;
}

.agent-live {
    position: absolute;
    width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* ==================== Spec #24 — Conversation upgrades ==================== */

/* Typing caret — blinks while the agent is streaming a response. */
.agent-cursor {
    display: inline-block;
    width: 0.5ch;
    height: 1em;
    background: var(--accent);
    margin-left: 1px;
    vertical-align: -0.1em;
    animation: agent-cursor-blink 1s steps(2, end) infinite;
}
@keyframes agent-cursor-blink { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .agent-cursor { animation: none; opacity: 1; }
}

/* Inline citation superscripts [1], [2], [3]. */
sup.agent-cite {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;
}
sup.agent-cite a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-soft);
    padding: 0 2px;
}
sup.agent-cite a:hover,
sup.agent-cite a:focus-visible {
    background: var(--accent-soft);
    outline: none;
}

/* Clickable source list rendered below assistant messages with citations. */
.agent-sources {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}
.agent-source-link {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    text-decoration: none;
    padding: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agent-source-link:hover,
.agent-source-link:focus-visible {
    color: var(--accent);
    text-decoration: underline;
    outline: none;
}
.agent-source-internal {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--ink-subtle);
    cursor: default;
    user-select: none;
}

/* Follow-up suggestion chips — rendered after a response completes. */
.agent-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.agent-suggestion-chip {
    text-align: left;
    padding: var(--space-1) var(--space-3);
    background: var(--bg-card);
    color: var(--ink-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    cursor: pointer;
    min-height: 36px;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}
.agent-suggestion-chip:hover,
.agent-suggestion-chip:focus-visible {
    border-color: var(--accent);
    color: var(--ink);
    background: var(--accent-soft);
    outline: none;
}

/* CTA button — Topmate / LinkedIn off-ramp on personal/off-topic punts. */
.agent-cta-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow var(--dur-fast) var(--ease-out);
}
.agent-cta-action:hover,
.agent-cta-action:focus-visible {
    box-shadow: 0 0 24px var(--accent-glow);
    outline: none;
}

/* Scroll nudge bubble — appears above the FAB when Career section enters view. */
.agent-nudge {
    position: fixed;
    bottom: calc(var(--space-4) + 56px + env(safe-area-inset-bottom));
    right: var(--space-4);
    max-width: 240px;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: var(--z-agent-nudge);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink);
}
.agent-nudge-text { flex: 1; }
.agent-nudge-dismiss {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 var(--space-1);
}
.agent-nudge-dismiss:hover { color: var(--ink); }

/* Transparency / explainer modal — centered in the viewport via native showModal(). */
.agent-explainer-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--ink);
    width: min(520px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--space-5);
    z-index: 100;
}
.agent-explainer-dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
.agent-explainer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.agent-explainer-title {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--accent);
    margin: 0;
}
.agent-explainer-close {
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.agent-explainer-close:hover { color: var(--ink); }
.agent-explainer-body p {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--ink-muted);
    margin-bottom: var(--space-3);
}
.agent-explainer-body p:last-child { margin-bottom: 0; }
.agent-explainer-body .agent-highlight {
    color: var(--accent);
    /* The terms are wrapped in <strong> for semantics; override the UA
       bold so color alone carries the emphasis. */
    font-weight: inherit;
    /* Keep tracking inherited; do not change line-height. */
}
.agent-explainer-foot {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.agent-explainer-foot a {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--accent);
    text-decoration: none;
}
.agent-explainer-foot a:hover { text-decoration: underline; }

/* Explainer trigger button in the panel footer. */
.agent-explainer-trigger {
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.agent-explainer-trigger:hover,
.agent-explainer-trigger:focus-visible {
    color: var(--accent-strong, var(--accent));
    text-decoration-style: solid;
    outline: none;
}

/* Inline retry button — shown after mid-stream network failure. */
.agent-retry-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: transparent;
    color: var(--ink-muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    cursor: pointer;
    transition:
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}
.agent-retry-inline:hover,
.agent-retry-inline:focus-visible {
    color: var(--ink);
    border-color: var(--accent-soft);
    outline: none;
}

/* ==================== Spec 22 — Mobile overhaul ==================== */
/* Hidden by default on desktop. Each block below opts elements back in
   for ≤767px viewports only — desktop remains untouched. */

.hero-mobile-actions { display: none; }
.mobile-bottombar { display: none; }
.mobile-section-progress { display: none; }
.agent-panel-drag-handle { display: none; }
.agent-panel-drag-zone { display: none; }

@media (max-width: 767px) {
    /* Spec 22.1: keep the original animated cert ticker on mobile — the
       static chip didn't add value. Lift the rail above the persistent
       bottom-bar so they don't collide. The 600px breakpoint already sets
       height: 108px and bottom: var(--space-8); we override `bottom` here
       to clear the bar (≈ 88px tall including safe-area). */
    .cert-rail {
        bottom: calc(var(--space-3) + env(safe-area-inset-bottom) + 96px);
    }

    /* Spec 22.1: hero CTA + cert chip removed from mobile. The bottom-bar
       is the canonical "Ask my agent" entry point and the cert rail is the
       canonical cert surface. The .hero-mobile-actions wrapper stays
       display:none (declared above) so neither child renders. */

    /* Spec 22.1: bottom-bar replaces the FAB on mobile entirely. The FAB
       was previously hidden only when the panel was open, leaving it
       visible alongside the bar otherwise — three "Ask my agent" entry
       points at once. Hide it at every panel state on phones. */
    .agent-fab { display: none !important; }

    /* Persistent bottom-bar (primary mobile CTA surface). */
    .mobile-bottombar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(8, 10, 18, 0.85) 30%,
            rgba(8, 10, 18, 0.95) 100%
        );
        -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
        border-top: 1px solid var(--border);
        transform: translateY(0);
        transition: transform var(--dur-base) var(--ease-out);
    }
    .mobile-bottombar[data-hidden="true"] { transform: translateY(110%); }
    .mobile-bottombar-btn {
        flex: 1;
        min-height: 48px;
        padding: var(--space-2) var(--space-4);
        background: var(--bg-card);
        color: var(--ink);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        transition:
            border-color var(--dur-fast) var(--ease-out),
            background var(--dur-fast) var(--ease-out);
    }
    .mobile-bottombar-btn:hover,
    .mobile-bottombar-btn:focus-visible {
        border-color: var(--accent);
        outline: none;
    }
    .mobile-bottombar-btn-primary {
        background: var(--accent);
        color: var(--bg);
        border-color: var(--accent);
        font-weight: 600;
    }
    .mobile-bottombar-btn-primary:hover,
    .mobile-bottombar-btn-primary:focus-visible {
        background: var(--accent);
        color: var(--bg);
        opacity: 0.92;
    }
    @media (prefers-reduced-motion: reduce) {
        .mobile-bottombar { transition: none; }
        .mobile-bottombar[data-hidden="true"] { transform: translateY(0); }
    }

    /* Section-progress strip — sits above the fixed nav. */
    .mobile-section-progress {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        z-index: 11;
        gap: 2px;
        padding: 0 var(--space-2);
        pointer-events: auto;
        background: transparent;
    }
    .mobile-section-progress-dot {
        position: relative;
        flex: 1;
        height: 4px;
        background: var(--border);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background var(--dur-fast) var(--ease-out);
    }
    .mobile-section-progress-dot[aria-current="true"] { background: var(--accent); }
    /* Larger invisible hit area so 4px-tall dots still meet 44px tap target. */
    .mobile-section-progress-dot::after {
        content: "";
        position: absolute;
        inset: -20px 0 -20px 0;
    }
    @media (prefers-reduced-motion: reduce) {
        .mobile-section-progress-dot { transition: none; }
    }

    /* Hide FAB and bottom-bar while the agent panel is open so neither
       sits behind the bottom sheet. */
    body[data-agent-panel-open="true"] .agent-fab,
    body[data-agent-panel-open="true"] .mobile-bottombar { display: none !important; }

    /* Spec 26: lock the underlying page while the bottom sheet is open so
       it doesn't scroll behind the panel and pull-to-refresh can't fire.
       Don't use `position: fixed` body — it conflicts with scroll-restore.js
       and jumps the page to the top on close. */
    body[data-agent-panel-open="true"] {
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* Agent panel becomes a bottom sheet (replaces the old ≤720px rule).
       Spec 26: use dynamic viewport units (dvh) so the panel reacts to the
       URL bar collapsing/expanding on iOS Safari, plus a `min()` clamp so
       large-screen phones (Pro Max, Ultra) don't get a wastefully tall
       sheet. The visualViewport JS hook (assets/js/agent-widget.js) sets
       --agent-vv-height when the soft keyboard is open; the third
       declaration prefers it when present, otherwise falls back to dvh. */
    .agent-panel {
        inset: auto 0 0 0;
        width: auto;
        max-height: 80vh;
        max-height: min(80dvh, 720px);
        max-height: min(calc(var(--agent-vv-height, 80dvh) - 24px), 720px);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        touch-action: pan-y;
        transform: translateY(100%);
    }
    .agent-panel.is-open { transform: translateY(0); }
    .agent-panel.is-expanded {
        min-height: 60vh;
        min-height: 60dvh;
        max-height: 92vh;
        max-height: min(92dvh, 920px);
    }

    /* Drag handle — visible only on mobile; rendered by agent-widget.js.
       Spec 26: pad the drag zone and head with safe-area-inset so the
       handle and header controls don't tuck under the iPhone notch in
       landscape. */
    .agent-panel-drag-handle {
        display: block;
        width: 44px;
        height: 4px;
        margin: var(--space-2) auto 0;
        background: var(--border-strong);
        border-radius: 2px;
        flex-shrink: 0;
        pointer-events: none;
    }
    .agent-panel-drag-zone {
        display: block;
        padding: var(--space-1) env(safe-area-inset-right) var(--space-2) env(safe-area-inset-left);
        cursor: grab;
        flex-shrink: 0;
        touch-action: none;
    }
    .agent-panel-drag-zone:active { cursor: grabbing; }
    .agent-panel-head {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
        padding-right: max(var(--space-4), env(safe-area-inset-right));
    }

    /* Spec 26: landscape phones are short and the keyboard eats most of the
       available height. Let the panel claim almost the full viewport,
       prefer the visualViewport-measured height when present, and shrink
       the head padding to reclaim a few rows for the conversation. */
    @media (orientation: landscape) and (max-height: 500px) {
        .agent-panel {
            max-height: 96dvh;
            max-height: min(96dvh, calc(var(--agent-vv-height, 96dvh) - 8px));
        }
        .agent-panel.is-expanded {
            max-height: 96dvh;
        }
        .agent-panel-head {
            padding-top: var(--space-2);
            padding-bottom: var(--space-2);
        }
    }

    /* Capabilities — collapsed-by-default on mobile. */
    .cap-axis[data-mobile-collapsed="true"] .cap-axis-cards { display: none; }
    .cap-axis-mobile-preview {
        display: none;
        flex-wrap: wrap;
        gap: var(--space-1);
        margin-top: var(--space-3);
        list-style: none;
        padding: 0;
    }
    .cap-axis[data-mobile-collapsed="true"] .cap-axis-mobile-preview { display: flex; }
    .cap-axis-mobile-preview li {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--ink-muted);
        padding: 2px var(--space-2);
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 999px;
    }
    .cap-axis-mobile-toggle {
        display: none;
        width: 100%;
        margin-top: var(--space-3);
        min-height: 44px;
        padding: var(--space-2) var(--space-3);
        background: transparent;
        border: 1px dashed var(--border);
        border-radius: var(--radius-md);
        color: var(--ink-muted);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        cursor: pointer;
        text-align: left;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        transition:
            border-color var(--dur-fast) var(--ease-out),
            color var(--dur-fast) var(--ease-out);
    }
    .cap-axis[data-mobile-collapsed] .cap-axis-mobile-toggle { display: flex; }
    .cap-axis-mobile-toggle:hover,
    .cap-axis-mobile-toggle:focus-visible {
        border-color: var(--accent);
        color: var(--ink);
        outline: none;
    }
    .cap-axis-mobile-toggle-arrow { transition: transform var(--dur-fast) var(--ease-out); }
    .cap-axis[data-mobile-collapsed="false"] .cap-axis-mobile-toggle-arrow { transform: rotate(90deg); }
    @media (prefers-reduced-motion: reduce) {
        .cap-axis-mobile-toggle-arrow { transition: none; }
    }

    /* Trajectory — collapse companies behind <details> on mobile. The
       <details>/<summary> wrappers are inserted in main.js after trajectory
       init; the .company-header is moved inside <summary>. */
    .trail-company[data-mobile-collapsible] > details > summary {
        list-style: none;
        cursor: pointer;
        min-height: 44px;
        padding: var(--space-3) 0;
        position: relative;
    }
    .trail-company[data-mobile-collapsible] > details > summary::-webkit-details-marker {
        display: none;
    }
    .trail-company[data-mobile-collapsible] > details > summary .company-header {
        margin: 0;
    }
    .trail-company-summary-arrow {
        position: absolute;
        right: var(--space-2);
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-mono);
        color: var(--ink-muted);
        transition: transform var(--dur-fast) var(--ease-out);
        pointer-events: none;
    }
    .trail-company[data-mobile-collapsible] > details[open] .trail-company-summary-arrow {
        transform: translateY(-50%) rotate(90deg);
    }
    /* Hide the rail decoration entirely on mobile — nothing to measure. */
    .trail-rail { display: none; }
    @media (prefers-reduced-motion: reduce) {
        .trail-company-summary-arrow { transition: none; }
    }
}