/* A single interactive piece on its own page (/science/ix/<kind>/), and the
 * pop-out links in every card head. Tokens only. The pieces size themselves
 * from their container (.ix is a size container), so the page only gives the
 * piece room; the projector view (.is-proj) gives it the whole width and sets
 * the type larger. */

.ix-page {
    width: min(100%, 76rem);
    margin: 0 auto;
    padding: 16px;
}
.ix-page-nav { margin: 0 0 4px; font-weight: 700; }
.ix-page-nav a { color: var(--teal-deep); text-decoration: none; }
.ix-page-nav a:hover { text-decoration: underline; }
.ix-page-body .ix { margin-top: 8px; }

.ix-page.is-proj { width: 100%; max-width: none; padding: 12px 24px; font-size: 1.35rem; }
.ix-page.is-proj .ix-card { font-size: 1.35rem; }
.ix-page.is-proj .ix-head b { font-size: 1.5rem; }
.ix-page.is-proj .ix-head small { font-size: 1.05rem; }
.ix-page.is-proj .ix-chip,
.ix-page.is-proj .ix-btn { font-size: 1.2rem; min-height: 56px; }
.ix-page.is-proj .ix-page-nav { font-size: 1rem; }
@media (min-width: 1700px) {
    .ix-page.is-proj { font-size: 1.6rem; }
    .ix-page.is-proj .ix-card { font-size: 1.6rem; }
}

.ix-popout {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-left: auto;
    align-self: flex-start;
    font-size: 0.82rem;
    font-weight: 700;
}
.ix-popout a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    color: var(--teal-deep);
    text-decoration: none;
    white-space: nowrap;
}
.ix-popout a:hover,
.ix-popout a:focus-visible { text-decoration: underline; }
@media (max-width: 520px) {
    .ix-head { flex-wrap: wrap; }
    .ix-popout { margin-left: 50px; }
}
/* the phone's compact cards and full-screen dialog have their own header */
.sci-ixdlg .ix-popout { display: none; }
@media print { .ix-popout, .ix-page-nav { display: none; } }