/* Shared shell for the logged-out public pages (activity, profile, segment, route, club, event, challenge). */

.pp-page {
    background: var(--page-bg);
    min-height: 100vh;
    color: var(--text);
    font-family: var(--font-body);
}

.pp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.pp-nav-brand {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 0.15em;
    background: linear-gradient(135deg, var(--text) 0%, var(--blue-400) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}

.pp-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pp-nav-link {
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
}

.pp-nav-link:hover {
    color: var(--text);
}

.pp-body {
    max-width: 940px;
    margin: 0 auto;
    padding: 32px 20px 64px;
}

.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pp-btn-primary {
    background: var(--cta-gradient);
    color: var(--on-cta);
}

.pp-btn-ghost {
    border: 1px solid var(--border-strong);
    color: var(--text);
}

.pp-btn-ghost:hover {
    background: var(--surface-hover);
}

.pp-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.pp-section-title {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 0.08em;
    margin: 34px 0 14px;
    color: var(--text);
}

.pp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pp-section-head .pp-section-title {
    margin-bottom: 14px;
}

.pp-section-note {
    font-size: 13px;
    color: var(--text-muted);
}

.pp-title {
    font-family: var(--font-display);
    font-size: 46px;
    letter-spacing: 0.04em;
    line-height: 1.02;
    margin: 0 0 10px;
    color: var(--text);
    text-wrap: balance;
}

.pp-subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.pp-prose {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
}

.pp-prose p {
    margin: 0 0 12px;
}

/* Badge row */
.pp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
}

.pp-badge-sport {
    background: var(--sport-badge-bg);
    border-color: var(--sport-badge-border);
    color: var(--sport-badge-text);
    font-weight: 600;
}

/* Primary stat grid */
.pp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.pp-stat {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
}

.pp-stat-label {
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.pp-stat-value {
    font-family: var(--font-display);
    font-size: 38px;
    line-height: 1;
    color: var(--text);
}

.pp-stat-unit {
    font-size: 19px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Secondary chip stats */
.pp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.pp-chip {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 10px 14px;
}

.pp-chip-label {
    font-size: 13px;
    color: var(--text-muted);
}

.pp-chip-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

/* Map */
.pp-map {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    display: block;
    width: 100%;
}

.pp-map-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pp-map-track {
    fill: none;
    stroke: var(--accent);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pp-map-start {
    fill: var(--bg-primary);
    stroke: var(--success-text);
    stroke-width: 4;
}

.pp-map-end {
    fill: var(--bg-primary);
    stroke: var(--sport-run-text);
    stroke-width: 4;
}

/* Hero: identity overlaid on an arbitrary photo/map, so the scrim is the only thing
   guaranteeing legibility. Worst case is the top stop (.72) over a pure-white photo:
   white 7.28:1, the .75 muted tier 4.95:1. Lowering either stop breaks that floor. */
.pp-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    min-height: 320px;
}

/* No cover image: the scrim would otherwise darken a flat slab into a grey band, so paint a brand wash
   instead. The fill is FIXED (not --page-bg-immersive) because the text on it is fixed-light: a
   theme-derived wash composites to near-white on the light theme and drops white text to 1.13:1.
   Fixed navy holds in both themes: worst case (the gradient's lightest point) is 11.68:1 white
   and 7.31:1 for the .75 muted tier. */
.pp-hero-plain {
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, #1e4d7b, transparent),
        radial-gradient(ellipse 60% 50% at 85% 110%, #1a3a5c, transparent),
        #0a1628;
}

.pp-hero-plain .pp-hero-scrim {
    background: linear-gradient(180deg, rgba(10, 22, 40, 0.35) 0%, transparent 45%, rgba(10, 22, 40, 0.6) 100%);
}

.pp-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 22, 40, 0.72) 0%, rgba(10, 22, 40, 0) 30%,
        rgba(10, 22, 40, 0.35) 62%, rgba(10, 22, 40, 0.94) 100%);
}

/* Everything on the scrim is fixed-light, because the scrim itself is a fixed dark wash in
   both themes — a theme-derived foreground would invert against a background that does not. */
.pp-hero-top {
    position: absolute;
    top: 20px;
    left: 24px;
    right: 24px;
}

.pp-hero-foot {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
}

.pp-hero .pp-title,
.pp-hero-name {
    color: var(--map-overlay-text);
}

.pp-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
    color: var(--map-overlay-text-muted);
}

.pp-hero-meta a {
    color: var(--map-overlay-text);
    text-decoration: none;
}

.pp-hero .pp-badge {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--map-overlay-text-muted);
}

/* Avatars */
.pp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.pp-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cta-gradient);
    color: var(--on-cta);
    font-size: 13px;
    font-weight: 600;
}

.pp-avatar-lg {
    width: 96px;
    height: 96px;
    font-size: 32px;
    font-family: var(--font-display);
}

/* Row list (recent activities, club feed) */
.pp-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    min-height: 44px;
}

.pp-row:hover {
    background: var(--surface-hover);
}

.pp-row-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sport-badge-bg);
    color: var(--sport-badge-text);
    flex-shrink: 0;
    font-size: 17px;
}

.pp-row-body {
    flex: 1;
    min-width: 0;
}

.pp-row-title {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-row-meta {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.pp-row-trail {
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Leaderboard */
.pp-lb {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 8px 4px;
}

.pp-lb-row {
    display: grid;
    grid-template-columns: 32px 32px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    color: var(--text);
    text-decoration: none;
}

.pp-lb-row + .pp-lb-row {
    border-top: 1px solid var(--border-subtle);
}

.pp-lb-rank {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pp-lb-rank-1 { color: var(--warning-text); }
.pp-lb-rank-2 { color: var(--text-accent-soft); }
.pp-lb-rank-3 { color: var(--warning-orange-text); }

.pp-lb-name {
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-lb-date {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
}

.pp-lb-value {
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Locked teaser rows under a leaderboard */
.pp-lb-locked {
    margin-top: 10px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.pp-lb-locked-rows {
    filter: blur(3px);
    opacity: 0.5;
    pointer-events: none;
}

.pp-lb-locked-cta {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, transparent, var(--bg-primary) 90%);
}

/* Splits */
.pp-splits {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pp-split {
    display: grid;
    grid-template-columns: 34px 1fr 76px 64px;
    gap: 12px;
    align-items: center;
}

.pp-split-index,
.pp-split-elev {
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.pp-split-elev {
    text-align: right;
}

.pp-split-track {
    height: 26px;
    border-radius: 6px;
    background: var(--surface);
    overflow: hidden;
}

.pp-split-bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.3), rgba(0, 212, 255, 0.6));
}

.pp-split-bar-best {
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.35), rgba(74, 222, 128, 0.7));
}

.pp-split-pace {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.pp-split-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    font-size: 13px;
    color: var(--text-muted);
}

/* Photos */
.pp-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pp-photos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
}

/* CTA band */
.pp-cta {
    margin-top: 36px;
    border-radius: 20px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(135deg, var(--accent-focus-ring), var(--surface-elevated));
    padding: 26px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.pp-cta-title {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.05em;
    color: var(--text);
    margin-bottom: 4px;
}

.pp-cta-text {
    font-size: 15px;
    color: var(--text-muted);
    max-width: 460px;
}

.pp-cta-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Date block (event, club meets) */
.pp-datebox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.pp-datebox-month {
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pp-datebox-day {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
    color: var(--text);
}

.pp-datebox-dow {
    font-size: 12px;
    color: var(--text-muted);
}

/* Member / avatar grid */
.pp-members {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.pp-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
}

.pp-member-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.pp-member-role {
    font-size: 11px;
    color: var(--text-muted);
}

/* Progress bar (challenge) */
.pp-progress-track {
    height: 10px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
    margin: 10px 0 8px;
}

.pp-progress-fill {
    height: 100%;
    background: var(--cta-gradient);
}

/* Private / empty notice */
.pp-notice {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    color: var(--text-muted);
    font-size: 15px;
    margin: 16px 0;
}

@media (max-width: 720px) {
    .pp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-members { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pp-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-title { font-size: 34px; }
    .pp-stat-value { font-size: 30px; }
    .pp-cta { flex-direction: column; align-items: flex-start; }
    .pp-nav { padding: 16px; }
    .pp-body { padding: 24px 16px 48px; }
}

/* Club: cover + identity row */
.pp-cover {
    position: relative;
    height: 220px;
    margin: -32px -20px 0;
    overflow: hidden;
    background: var(--bg-secondary);
}

/* Same as .pp-hero-plain, and fixed for the same reason — the identity row above it is fixed-light. */
.pp-cover-plain {
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, #1e4d7b, transparent),
        radial-gradient(ellipse 60% 50% at 85% 110%, #1a3a5c, transparent),
        #0a1628;
}

.pp-cover-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The identity row overlaps the cover's lower edge and its text is theme-derived, so the scrim must
   fade to the page's own ground rather than a fixed dark wash — otherwise the light theme puts
   --text-muted on near-black. */
.pp-cover-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, var(--bg-primary) 100%);
}

.pp-identity {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    margin-top: -58px;
    position: relative;
}

.pp-identity-logo {
    width: 112px;
    height: 112px;
    border-radius: 26px;
    object-fit: cover;
    border: 3px solid var(--border-strong);
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 40px;
}

.pp-identity-body {
    flex: 1;
    min-width: 0;
    padding-bottom: 6px;
}

.pp-identity-body .pp-title {
    margin-bottom: 6px;
}

.pp-identity-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 15px;
    color: var(--text-muted);
}

.pp-identity-place {
    color: var(--text-accent-soft);
}

.pp-identity-action {
    flex-shrink: 0;
    margin-bottom: 6px;
}

.pp-club-about {
    margin: 20px 0 0;
    max-width: 660px;
}

/* Club: upcoming meets */
.pp-meets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pp-meet {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
}

.pp-meet-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-meet-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

/* Club: member grid tiles */
.pp-member {
    padding: 14px 8px;
}

.pp-avatar-md {
    width: 46px;
    height: 46px;
    font-size: 15px;
}

.pp-member-more {
    justify-content: center;
    border-color: var(--border-strong);
}

.pp-member-more-count {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1;
    color: var(--text);
}

/* Event: date block + title header */
.pp-event-head {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.pp-datebox-lg {
    min-width: 104px;
    padding: 14px 12px 16px;
    border-radius: 18px;
}

.pp-datebox-lg .pp-datebox-day {
    font-size: 48px;
}

.pp-event-head-body {
    min-width: 0;
    flex: 1;
}

.pp-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 15px;
    color: var(--text-muted);
}

.pp-event-place {
    color: var(--text-accent-soft);
}

/* success-text on success-bg composited over the page ground: 7.29:1 dark, 5.92:1 light. */
.pp-badge-open {
    background: var(--success-bg);
    border-color: var(--success-text);
    color: var(--success-text);
    font-weight: 600;
}

.pp-stat-accent {
    border-color: var(--border-strong);
}

.pp-stat-accent .pp-stat-label {
    color: var(--text);
}

/* A date is longer than a numeral, so it drops a tier rather than overflowing the tile. */
.pp-stat-value-sm {
    font-size: 28px;
}

.pp-chip-primary {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.pp-chip-series {
    border-radius: 999px;
}

.pp-event-about {
    padding: 22px 24px;
}

.pp-event-about p:last-child {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .pp-cover { height: 160px; margin: -24px -16px 0; }
    .pp-identity { flex-wrap: wrap; gap: 16px; margin-top: -44px; }
    .pp-identity-logo { width: 84px; height: 84px; border-radius: 20px; font-size: 30px; }
    .pp-identity-action { width: 100%; margin-bottom: 0; }
    .pp-meets { grid-template-columns: minmax(0, 1fr); }
    .pp-event-head { gap: 16px; }
    .pp-datebox-lg { min-width: 84px; }
    .pp-datebox-lg .pp-datebox-day { font-size: 38px; }
    .pp-stat-value-sm { font-size: 22px; }
}

/* Store badges (challenge page). The badge artwork is a fixed black plate in both themes. */
.pp-store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.pp-store-badge {
    display: inline-block;
    flex-shrink: 0;
}

.pp-store-badge svg {
    display: block;
    height: 44px;
    width: auto;
}

/* Challenge: "Active now" pill. The scrim under it is a fixed dark wash in both themes, so the
   green is fixed-light too — 8.6:1 on the scrim's composited bottom. */
.pp-hero .pp-badge-live {
    background: rgba(74, 222, 128, 0.16);
    border-color: rgba(74, 222, 128, 0.36);
    color: #4ade80;
    font-weight: 600;
}

.pp-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pp-challenge-about {
    padding: 20px 22px;
    margin-top: 22px;
}

/* Leaderboard row with a share bar between the name and the value. */
.pp-lb-row-bar {
    grid-template-columns: 32px 32px 1fr 110px auto;
}

.pp-lb-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}

.pp-lb-bar span {
    display: block;
    height: 100%;
    background: var(--cta-gradient);
}

/* Route elevation profile. The SVG is stretched to the container (preserveAspectRatio none) so the
   profile always fills the width; non-scaling-stroke keeps the line an even weight under that stretch. */
.pp-elevation {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-elevated);
}

.pp-elevation-svg {
    display: block;
    width: 100%;
    height: 200px;
}

.pp-elevation-fill {
    fill: var(--accent-focus-ring);
    stroke: none;
}

.pp-elevation-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.pp-elevation-axis {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-subtle);
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .pp-lb-row-bar { grid-template-columns: 32px 32px 1fr auto; }
    .pp-lb-bar { display: none; }
}

/* Activity: laps card */
.pp-splits-card {
    padding: 18px 20px;
}

/* Profile: identity block. Unlike the club variant it sits under no cover image, so it keeps
   its own top margin instead of the club's negative overlap. */
.pp-identity-flat {
    align-items: center;
    margin-top: 0;
}

.pp-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    font-size: 15px;
    color: var(--text-muted);
}

.pp-count strong {
    color: var(--text);
    font-weight: 600;
    margin-right: 4px;
}

/* Profile: training-rhythm heatmap, laid out like a contribution graph — month labels across the top,
   weekday labels down the left gutter, legend under the grid. Cell and gap sizes are shared by the grid,
   the label gutters and the legend swatches, so the three stay aligned; change them together.
   Bands run 0.35/0.55/0.78/1.0 alpha on --accent. These are read as a RAMP, not as individually identified
   controls, so the load-bearing measure is step-to-step separation, not each band against the card: adjacent
   steps clear 1.49-1.98:1 in both themes and the lightest band vs an empty day is 1.98 dark / 1.59 light.
   The exact count is never encoded by colour alone — every cell carries it in its title attribute, which is
   what keeps this compliant rather than the alpha values. Do not compress the spacing between steps. */
.pp-heatmap-card {
    padding: 16px;
}

.pp-heatmap-scroll {
    overflow-x: auto;
}

.pp-heatmap-months {
    display: flex;
    gap: 3px;
    margin-left: 32px;
    margin-bottom: 6px;
}

.pp-heatmap-month {
    width: 11px;
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1;
    color: var(--text-muted);
    white-space: nowrap;
}

.pp-heatmap-body {
    display: flex;
    gap: 4px;
}

/* Three labels spread over seven rows: Mon(1), Wed(3), Fri(5). The 11px cell + 3px gap gives a 14px
   row pitch, so a 28px step lands each label on every second row. */
.pp-heatmap-weekdays {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding-top: 14px;
    width: 28px;
    flex-shrink: 0;
    font-size: 11px;
    line-height: 11px;
    color: var(--text-muted);
}

.pp-heatmap-grid {
    display: flex;
    gap: 3px;
}

.pp-heatmap-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.pp-heatmap-day {
    width: 11px;
    height: 11px;
    border-radius: 2.5px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

/* Days outside the year: a gap, so a rest day never reads the same as a day that does not exist. */
.pp-heatmap-pad {
    background: transparent;
    border-color: transparent;
}

.pp-heatmap-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.pp-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pp-heatmap-legend .pp-section-note {
    margin: 0 4px;
}

.pp-heat-0 { background: var(--surface-elevated); }
.pp-heat-1 { background: color-mix(in srgb, var(--accent) 35%, transparent); border-color: transparent; }
.pp-heat-2 { background: color-mix(in srgb, var(--accent) 55%, transparent); border-color: transparent; }
.pp-heat-3 { background: color-mix(in srgb, var(--accent) 78%, transparent); border-color: transparent; }
.pp-heat-4 { background: var(--accent); border-color: transparent; }

/* Author line under a title. Unlike .pp-hero-meta this sits on the page background, so it takes
   theme-derived text rather than the hero scrim's fixed-light tokens. */
.pp-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 18px;
}

.pp-byline-muted {
    color: var(--text-muted);
}

.pp-lb-placeholder {
    display: block;
    height: 12px;
    width: 45%;
    border-radius: 4px;
    background: var(--surface-hover);
}

@media (max-width: 720px) {
    .pp-identity-flat { align-items: flex-start; }
    .pp-splits-card { padding: 14px; }
}