.pt-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
    padding: 2px;
    transition:
        transform 0.1s,
        box-shadow 0.1s;
    user-select: none;
    position: relative;
}
.pt-cell:hover {
    transform: scale(1.25);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    z-index: 20;
}
.pt-cell .pt-z {
    font-size: 0.6rem;
    opacity: 0.7;
    align-self: flex-start;
    padding-left: 3px;
}
.pt-cell .pt-sym {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.pt-cell .pt-name {
    font-size: 0.45rem;
    opacity: 0.8;
    margin-top: 1px;
}
.pt-cell .pt-mass {
    font-size: 0.5rem;
    opacity: 0.7;
}

.pt-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    border: 1px dashed #aaa;
    border-radius: 4px;
    color: #999;
    cursor: default;
}
.pt-period-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    color: var(--color-muted);
    font-weight: 600;
}
.pt-group-label {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 0.62rem;
    color: var(--color-muted);
    font-weight: 600;
    padding-bottom: 2px;
}

/* Category colours — 10 perceptually distinct pastels */
.pt-ak {
    background: #ffd0d0;
    border-color: #d04040;
    color: #7a1a1a;
}
.pt-ae {
    background: #ffe0c0;
    border-color: #d07020;
    color: #7a4010;
}
.pt-ha {
    background: #f8f8b8;
    border-color: #a8a800;
    color: #585800;
}
.pt-ml {
    background: #d8f5c0;
    border-color: #58a020;
    color: #2d5010;
}
.pt-nm {
    background: #c0f0d8;
    border-color: #20a060;
    color: #0d5030;
}
.pt-ln {
    background: #c0f0f0;
    border-color: #10a0a0;
    color: #085050;
}
.pt-tm {
    background: #c0d8f0;
    border-color: #2060c8;
    color: #103080;
}
.pt-pt {
    background: #e0e0e0;
    border-color: #909090;
    color: #404040;
}
.pt-ng {
    background: #e0c8f8;
    border-color: #8030d0;
    color: #401870;
}
.pt-an {
    background: #f0dcc0;
    border-color: #a07030;
    color: #604020;
}

@media (prefers-color-scheme: dark) {
    .pt-ak {
        background: #3d0d0d;
        border-color: #d04040;
        color: #f5b8b8;
    }
    .pt-ae {
        background: #3d2010;
        border-color: #d07020;
        color: #f5d0a0;
    }
    .pt-ha {
        background: #2e2e00;
        border-color: #a8a800;
        color: #f5f5a0;
    }
    .pt-ml {
        background: #1a2e08;
        border-color: #58a020;
        color: #c8f0a0;
    }
    .pt-nm {
        background: #0a2e1a;
        border-color: #20a060;
        color: #a0f0c8;
    }
    .pt-ln {
        background: #003030;
        border-color: #10a0a0;
        color: #a0f0f0;
    }
    .pt-tm {
        background: #081830;
        border-color: #2060c8;
        color: #a0c0f0;
    }
    .pt-pt {
        background: #282828;
        border-color: #909090;
        color: #d0d0d0;
    }
    .pt-ng {
        background: #1e0838;
        border-color: #8030d0;
        color: #ddb8f8;
    }
    .pt-an {
        background: #30180a;
        border-color: #a07030;
        color: #f0d0a0;
    }
    .pt-placeholder {
        border-color: #444;
        color: #555;
    }
}

/* Outer flex wrapper: table section + info section side by side */
.pt-outer {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    max-width: calc(1000px + 3rem + 300px + 0.75rem);
    margin: 0 auto;
}
.pt-outer > .section {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    margin: 0;
}

/* Info panel — always occupies space (visibility, not display) so table width stays stable */
#el-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    visibility: hidden;
    flex-shrink: 0;
    width: 300px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    background: var(--color-bg-card);
    font-size: 0.9rem;
}
#el-info.visible {
    visibility: visible;
}
#el-info .el-sym-big {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    align-self: center;
}
#el-info table {
    font-size: 0.82rem;
    border-collapse: collapse;
    width: 100%;
}
#el-info td {
    padding: 2px 4px 2px 0;
}
#el-info td:first-child {
    color: var(--color-muted);
}

.legend-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.4rem;
    font-size: 0.75rem;
}
.pt-legend {
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid transparent;
}

h1 {
    margin-bottom: 0.2rem;
}
.subtitle {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Embed mode — strip chrome when loaded via <iframe src="...?embed"> from other pages */
html.embed,
html.embed body {
    overflow: visible !important;
}
body.embed {
    padding: 0 !important;
}
body.embed h1,
body.embed .subtitle,
body.embed #el-info,
body.embed .home-btn,
body.embed .top-bar,
body.embed .breadcrumb,
body.embed .lang-select,
body.embed #lang-select,
body.embed .nav-icon {
    display: none !important;
}
body.embed .section {
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
}