.pi-public-shell {
    background: var(--pi-bg);
    color: var(--pi-text);
    display: grid;
    min-height: 100vh;
    min-width: 0;
    grid-template-rows: auto 1fr auto;
}

.pi-public-header,
.pi-public-footer {
    align-items: center;
    background: color-mix(in srgb, var(--pi-surface) 92%, transparent);
    border-color: var(--pi-border-soft);
    display: flex;
    gap: var(--pi-space-4);
    justify-content: space-between;
    padding: var(--pi-space-4) clamp(var(--pi-space-4), 4vw, var(--pi-space-8));
}

.pi-public-header {
    border-bottom: 1px solid var(--pi-border-soft);
    position: sticky;
    top: 0;
    z-index: 20;
}

.pi-public-footer {
    border-top: 1px solid var(--pi-border-soft);
    color: var(--pi-text-muted);
    font-size: var(--pi-font-sm);
}

.pi-public-footer nav,
.pi-public-nav,
.pi-public-actions,
.pi-public-brand {
    align-items: center;
    display: flex;
    gap: var(--pi-space-3);
}

.pi-public-brand {
    color: var(--pi-text);
    font-weight: 850;
    min-width: 0;
    text-decoration: none;
}

.pi-public-brand img {
    border-radius: var(--pi-radius-sm);
    height: 32px;
    object-fit: contain;
    width: 32px;
}

.pi-public-nav a,
.pi-public-footer a {
    color: var(--pi-text-secondary);
    font-weight: 700;
    text-decoration: none;
}

.pi-public-nav a:hover,
.pi-public-footer a:hover {
    color: var(--pi-primary);
}

.pi-public-main {
    display: grid;
    gap: var(--pi-space-6);
    margin: 0 auto;
    max-width: 1180px;
    min-width: 0;
    padding: clamp(var(--pi-space-4), 4vw, var(--pi-space-8));
    width: 100%;
}

.pi-public-page {
    display: grid;
    gap: var(--pi-space-6);
    min-width: 0;
}

.pi-public-hero {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--pi-primary) 14%, transparent), transparent 54%),
        var(--pi-surface);
    border: 1px solid var(--pi-border-soft);
    border-radius: var(--pi-radius-xl);
    box-shadow: var(--pi-shadow-xs);
    display: grid;
    gap: var(--pi-space-4);
    padding: var(--pi-space-6);
}

.pi-public-hero h1,
.pi-public-section h2,
.pi-public-card h2,
.pi-public-card h3 {
    color: var(--pi-text);
    letter-spacing: 0;
    line-height: var(--pi-line-tight);
    margin: 0;
}

.pi-public-hero h1 {
    font-size: var(--pi-font-3xl);
    font-weight: 850;
}

.pi-public-hero p,
.pi-public-section p,
.pi-public-card p {
    color: var(--pi-text-secondary);
    margin: 0;
}

.pi-public-card,
.pi-public-section {
    background: var(--pi-surface);
    border: 1px solid var(--pi-border-soft);
    border-radius: var(--pi-radius-lg);
    box-shadow: var(--pi-shadow-xs);
    display: grid;
    gap: var(--pi-space-4);
    min-width: 0;
    padding: var(--pi-space-5);
}

.pi-public-grid {
    display: grid;
    gap: var(--pi-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pi-public-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pi-public-metric {
    background: var(--pi-surface-secondary);
    border: 1px solid var(--pi-border-soft);
    border-radius: var(--pi-radius-md);
    display: grid;
    gap: var(--pi-space-1);
    min-width: 0;
    padding: var(--pi-space-4);
}

.pi-public-metric span {
    color: var(--pi-text-muted);
    font-size: var(--pi-font-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.pi-public-metric strong {
    color: var(--pi-text);
    font-size: var(--pi-font-xl);
    overflow-wrap: anywhere;
}

.pi-public-profile-cta {
    align-items: center;
    background: var(--pi-surface-secondary);
    border: 1px solid var(--pi-border-soft);
    border-radius: var(--pi-radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--pi-space-3);
    justify-content: space-between;
    padding: var(--pi-space-4);
}

.pi-public-read-list {
    display: grid;
    gap: var(--pi-space-3);
}

.pi-public-read-item {
    background: var(--pi-surface-secondary);
    border: 1px solid var(--pi-border-soft);
    border-radius: var(--pi-radius-md);
    display: grid;
    gap: var(--pi-space-2);
    min-width: 0;
    padding: var(--pi-space-4);
}

.pi-public-read-item strong {
    color: var(--pi-text);
    overflow-wrap: anywhere;
}

.pi-public-read-item small {
    color: var(--pi-text-muted);
}

.pi-public-goal-header {
    align-items: flex-start;
    display: flex;
    gap: var(--pi-space-4);
    justify-content: space-between;
}

.pi-public-goal-header > * {
    min-width: 0;
}

.pi-public-sharer {
    align-items: center;
    display: flex;
    gap: var(--pi-space-4);
    min-width: 0;
}

.pi-public-sharer__avatar {
    align-items: center;
    background: var(--pi-surface-secondary);
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius-xl);
    color: var(--pi-primary);
    display: inline-flex;
    flex: 0 0 64px;
    font-size: var(--pi-font-xl);
    font-weight: 850;
    height: 64px;
    justify-content: center;
    overflow: hidden;
    width: 64px;
}

.pi-public-sharer__avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.pi-public-chip-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pi-space-2);
}

.pi-public-chart {
    height: 320px;
    min-height: 320px;
    width: 100%;
}

.pi-public-day-grid {
    display: grid;
    gap: var(--pi-space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pi-public-day {
    background: var(--pi-surface-secondary);
    border: 1px solid var(--pi-border-soft);
    border-radius: var(--pi-radius-md);
    display: grid;
    gap: var(--pi-space-1);
    min-width: 0;
    padding: var(--pi-space-3);
}

.pi-public-day__result {
    color: var(--pi-text);
    font-size: var(--pi-font-size-md);
    font-weight: 700;
}

.pi-public-day__target {
    color: var(--pi-text-muted);
}

.pi-public-day--positive {
    background: color-mix(in srgb, var(--pi-success) 10%, var(--pi-surface));
    border-color: color-mix(in srgb, var(--pi-success) 38%, var(--pi-border-soft));
}

.pi-public-day--negative {
    background: color-mix(in srgb, var(--pi-danger) 10%, var(--pi-surface));
    border-color: color-mix(in srgb, var(--pi-danger) 38%, var(--pi-border-soft));
}

.pi-public-positive {
    color: var(--pi-success);
}

.pi-public-negative {
    color: var(--pi-danger);
}

.pi-public-muted {
    color: var(--pi-text-muted);
}

.pi-public-filter {
    align-items: end;
    display: grid;
    gap: var(--pi-space-4);
    grid-template-columns: minmax(0, 1fr) minmax(160px, .35fr) auto auto;
}

.pi-public-directory-grid {
    display: grid;
    gap: var(--pi-space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pi-public-mentor-card {
    align-content: start;
    background: var(--pi-surface);
    border: 1px solid var(--pi-border-soft);
    border-radius: var(--pi-radius-lg);
    box-shadow: var(--pi-shadow-xs);
    display: grid;
    gap: var(--pi-space-4);
    min-width: 0;
    padding: var(--pi-space-5);
}

.pi-public-mentor-head {
    align-items: center;
    display: grid;
    gap: var(--pi-space-3);
    grid-template-columns: auto minmax(0, 1fr);
}

.pi-public-mentor-avatar {
    border-radius: var(--pi-radius-xl);
    height: 64px;
    object-fit: cover;
    width: 64px;
}

.pi-public-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pi-space-2);
    justify-content: center;
}

.pi-public-pagination a,
.pi-public-pagination span {
    align-items: center;
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius-md);
    color: var(--pi-text-secondary);
    display: inline-flex;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    min-width: 36px;
    padding: 0 var(--pi-space-3);
    text-decoration: none;
}

.pi-public-pagination .is-active {
    background: var(--pi-primary);
    border-color: var(--pi-primary);
    color: var(--pi-primary-contrast);
}

@media (max-width: 900px) {
    .pi-public-nav {
        display: none;
    }

    .pi-public-grid,
    .pi-public-grid--3,
    .pi-public-day-grid,
    .pi-public-directory-grid,
    .pi-public-filter {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pi-public-header,
    .pi-public-footer {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .pi-public-brand span {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pi-public-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .pi-public-actions .pi-button {
        flex: 1 1 0;
        min-width: 0;
    }

    .pi-public-hero,
    .pi-public-card,
    .pi-public-section {
        padding: var(--pi-space-4);
    }

    .pi-public-hero h1 {
        font-size: var(--pi-font-2xl);
    }

    .pi-public-goal-header,
    .pi-public-sharer,
    .pi-public-profile-cta {
        align-items: stretch;
        flex-direction: column;
    }
}