/* /periodic-table: the page around the example. The table's own styles are in periodic-table.css. */
.pt-page-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding: 44px 0 34px; }
.pt-page-intro h1 { font-size: clamp(2.7rem, 4.3vw, 3.9rem); letter-spacing: -.05em; margin-bottom: 18px; }
.pt-page-intro .lead { max-width: 720px; margin: 0; }
.pt-page-intro .project-actions { margin: 0; }
.pt-stage { margin-bottom: 64px; }
.pt-unavailable { max-width: 760px; padding: 24px 28px; border-left: 3px solid var(--orange); background: #fff8f4; }
.pt-live { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--ink-soft); }
.pt-live > p:first-child { flex: 1 1 320px; margin: 0; }
.pt-live .btn { min-height: 40px; padding: 8px 16px; }
.pt-live-status { flex-basis: 100%; margin: 0; }
.pt-live-status:empty { display: none; }

.pt-code-section { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; padding: 60px 0; border-top: 1px solid var(--line); }
.pt-code-intro h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); margin: 0 0 24px; }
.pt-code-intro p { color: var(--ink-soft); font-size: .94rem; }
.pt-code { min-width: 0; align-self: start; border: 1px solid var(--line); }
.pt-code-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 14px 0 6px; border-bottom: 1px solid var(--line); }
.pt-code-bar:has(> [hidden]:first-child):has(> [hidden]:last-child) { display: none; }
.pt-code-tabs { display: flex; min-width: 0; overflow-x: auto; }
.pt-code-tabs [role="tab"] { flex: 0 0 auto; padding: 13px 12px 11px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-soft); font: .74rem/1.4 var(--mono); cursor: pointer; }
.pt-code-tabs [role="tab"]:hover { color: var(--ink); }
.pt-code-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.pt-code-tabs [role="tab"]:focus-visible { outline-offset: -3px; }
.pt-file-name { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line); font: 500 .74rem/1.5 var(--mono); letter-spacing: 0; }
.pt-file-name span { color: var(--ink-soft); font-weight: 400; }
.pt-file + .pt-file .pt-file-name { border-top: 1px solid var(--line); }
.pt-code.is-tabbed .pt-file-name { display: none; }
.pt-file pre { max-height: 620px; margin: 0; border: 0; padding: 20px 22px; font-size: .76rem; line-height: 1.65; overflow: auto; }
.pt-file pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Copy feedback, as on the tools pages. */
.copy-control { display: inline-grid; align-items: center; justify-items: center; padding: 4px 8px; border-radius: 5px; }
.copy-control > span { grid-area: 1 / 1; white-space: nowrap; }
.copy-confirmation { display: inline-flex; align-items: center; gap: 5px; visibility: hidden; }
.copy-confirmation svg { width: 16px; height: 16px; flex-shrink: 0; }
.copy-control[data-copied="true"], .copy-control[data-copied="true"]:hover { color: #246246; background: #eaf5ee; text-decoration: none; }
.copy-control[data-copied="true"] .copy-label { visibility: hidden; }
.copy-control[data-copied="true"] .copy-confirmation { visibility: visible; }
.copy-feedback-notice[data-error="true"] { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); height: auto; padding: 14px 18px; clip: auto; overflow: visible; white-space: normal; border: 1px solid #cbd5e3; border-radius: 8px; background: #fff; color: var(--ink); box-shadow: 0 4px 20px #18202b18; font-size: .85rem; line-height: 1.6; }

.pt-fields { padding: 60px 0 40px; border-top: 1px solid var(--line); }
.pt-fields h2, .pt-faq h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin: 0 0 28px; }
.pt-fields dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 40px; margin: 0 0 28px; }
.pt-fields dt { font: 500 .78rem/1.5 var(--mono); color: var(--ink); }
.pt-fields dd { margin: 4px 0 0; color: var(--ink-soft); font-size: .9rem; }
.pt-fields-links { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .9rem; font-weight: 600; }
.pt-faq { max-width: 860px; padding: 40px 0 56px; }
.pt-faq details { border-top: 1px solid var(--line); }
.pt-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.pt-faq summary { padding: 16px 0; font-weight: 600; cursor: pointer; }
.pt-faq details p { margin: 0 0 18px; color: var(--ink-soft); font-size: .94rem; }

@media (max-width: 1000px) {
    .pt-page-intro, .pt-code-section { grid-template-columns: 1fr; }
    .pt-code-section { gap: 28px; }
}
@media (max-width: 760px) {
    .pt-page-intro { padding: 32px 0 26px; }
    .pt-file pre { max-height: 480px; padding: 16px; }
    .pt-fields, .pt-code-section { padding: 44px 0; }
}