/* Site layout. Controls and terminal surfaces live in base.css and viewer.css. */
main,
.site-header,
.site-footer,
#boot-status {
    width: min(var(--content-width), calc(100% - var(--page-gutter) * 2));
    margin-inline: auto;
}
main {
    padding-top: var(--page-space);
    min-height: 60vh;
}
.site-header-bar {
    background: #1b1d22e8;
    border-bottom: 1px solid var(--line);
}
.site-header {
    min-height: 5.5rem;
    padding-block: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}
.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-3);
    color: var(--strong);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.04em;
}
.brand-avatar {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}
.site-header nav,
.site-footer nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.site-header nav a,
.site-footer nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding-inline: var(--space-3);
    border-radius: var(--radius-control);
    font-size: var(--control-font);
    text-align: center;
}
.site-header nav a[aria-current='page'],
.site-footer nav a[aria-current='page'] {
    color: var(--strong);
    background: var(--surface);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-top: var(--space-8);
    padding-block: var(--space-5);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8125rem;
}
.page-heading {
    margin-bottom: var(--space-6);
    max-width: 52rem;
}
.page-heading p {
    max-width: 70ch;
    color: var(--muted);
}
.guide-intro,
.guide-workflow {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}
.guide-intro .page-heading {
    margin: 0;
    padding-block: var(--space-5);
}
.guide-intro h1 {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
}
.guide-intro .page-heading > p:not(.eyebrow) {
    font-size: 1.125rem;
}
.guide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.guide-start,
.guide-note {
    min-width: 0;
    padding: var(--panel-padding);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface);
}
.guide-start form {
    display: grid;
    gap: var(--space-3);
    margin-block: var(--space-5) var(--space-3);
}
.guide-start > .button {
    width: 100%;
}
.guide-start > .muted {
    margin-top: var(--space-4);
    font-size: var(--control-font);
}
.guide-feedback {
    margin: 0;
    color: var(--danger);
    font-size: var(--control-font);
}
.guide-section {
    margin-top: var(--space-8);
    scroll-margin-top: var(--space-5);
}
.feature-grid.guide-features {
    padding: 0;
    border: 0;
    margin-top: var(--space-5);
}
.guide-features h3 {
    margin-top: var(--space-5);
}
.guide-steps {
    list-style: none;
    counter-reset: guide-step;
    padding: 0;
    margin: var(--space-6) 0 0;
}
.guide-steps li {
    position: relative;
    counter-increment: guide-step;
    padding-left: var(--space-7);
}
.guide-steps li + li {
    margin-top: var(--space-6);
}
.guide-steps li::before {
    content: counter(guide-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--control-font);
}
.guide-steps pre,
.guide-note pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: var(--space-4);
    background: var(--header);
}
.guide-steps pre code,
.guide-note pre code {
    overflow-wrap: anywhere;
}
.guide-steps p a {
    text-decoration: underline;
}
.guide-note .button {
    margin-top: var(--space-2);
}
@media (max-width: 900px) {
    .guide-intro,
    .guide-workflow {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }
    .guide-intro .page-heading {
        padding: 0;
    }
}
.hero-intro {
    max-width: 48rem;
    margin: var(--space-4) auto var(--space-7);
    text-align: center;
}
.hero-intro h1 {
    margin-block: var(--space-4) var(--space-5);
    font-size: clamp(2.25rem, 5vw, 4rem);
}
.hero-intro p {
    max-width: 38rem;
    margin: 0 auto var(--space-5);
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: var(--muted);
}
.eyebrow,
.feature-number,
.metadata-eyebrow {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.eyebrow,
.feature-number {
    font-family: var(--font-mono);
}
.hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.homepage-demo,
.demo-fallback {
    width: min(56rem, 100%);
    margin: 0 auto var(--space-7);
}
.demo-fallback,
.feature-grid article,
.metadata-card,
.uploader-card,
.host-card,
.component-error {
    padding: var(--panel-padding);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface);
    min-width: 0;
}
.demo-fallback {
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}
.demo-fallback h2,
.demo-fallback p {
    margin: 0;
}
.demo-fallback p {
    max-width: 26rem;
    color: var(--muted);
}
.homepage-demo-shell > tbt-demo:not(:empty) + .demo-fallback {
    display: none;
}
.homepage-demo .terminal-surface {
    min-height: 0;
}
.demo-caption,
.release-note {
    margin: var(--space-4) 0 0;
    color: var(--muted);
    font-size: 0.8125rem;
    text-align: center;
}
.demo-caption a {
    display: inline-block;
    margin-inline-start: var(--space-2);
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    padding-block: var(--space-7);
    border-top: 1px solid var(--line);
}
.feature-grid h2 {
    margin-top: var(--space-5);
    font-size: 1.375rem;
}
.feature-grid p {
    color: var(--muted);
}
.player {
    min-width: 0;
}
.player > .muted {
    margin-top: var(--space-5);
    font-size: var(--control-font);
}
.source-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: var(--space-3);
    padding: var(--panel-padding);
    margin-bottom: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface);
}
.source-label,
.annotation-form label,
.inline-form label {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
    font-size: var(--control-font);
    color: var(--muted);
}
.source-label input {
    width: 100%;
}
.file-button {
    position: relative;
}
.file-button input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
}
.toolbar,
.search,
.export-buttons,
.playback-tools,
.annotation-form,
.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    min-width: 0;
}
.toolbar {
    justify-content: space-between;
    gap: var(--space-5);
}
.search input {
    flex: 1 1 10rem;
    width: 12rem;
    min-width: 0;
}
.search {
    flex: 1 1 20rem;
}
.annotation-form label {
    flex: 1 1 10rem;
}
.review-panel {
    margin-top: var(--space-4);
    padding: var(--panel-padding);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--header);
}
.review-panel summary {
    min-height: var(--control-height);
    display: list-item;
    align-content: center;
    color: var(--strong);
    font-weight: 550;
    list-style-position: inside;
    cursor: pointer;
}
.review-panel[open] > summary {
    margin-bottom: var(--space-5);
}
.review-panel > :not(summary) + :not(summary) {
    margin-top: var(--space-4);
}
.review-panel textarea {
    display: block;
    width: 100%;
    min-height: 7rem;
    margin-top: var(--space-2);
}
.review-panel li {
    margin-block: var(--space-3);
    overflow-wrap: anywhere;
}
.review-panel li > button {
    margin: var(--space-1);
}
.review-panel label:has(> input[type='checkbox']) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.secondary {
    margin-top: var(--space-6);
}
.inspector {
    min-width: 0;
}
.inspector > .muted a {
    text-decoration: underline;
}
.inspector-heading {
    align-items: center;
    margin-block: var(--space-6) var(--space-5);
}
.inspector-heading h2 {
    flex: 1 1 16rem;
    margin: 0;
}
.inspector-empty .button,
.inspector-empty button {
    margin-top: var(--space-2);
}
.inspector pre {
    max-height: 26rem;
    margin: 0;
    padding: var(--space-4);
    background: var(--bg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
}
.inspector-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.inspector-pagination span {
    font-size: var(--control-font);
    color: var(--muted);
}
.inspector-events {
    max-height: 34rem;
    overflow: auto;
}
.inspector-event {
    border-top: 1px solid var(--line);
    padding-block: var(--space-2);
}
.inspector-event summary {
    font-family: var(--font-mono);
    font-size: var(--control-font);
    overflow-wrap: anywhere;
}
.inspector-event[open] summary {
    margin-bottom: var(--space-3);
}
.inspector-files,
.inspector-reference {
    display: grid;
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}
.inspector-files li,
.inspector-reference > div {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
}
.inspector-files .muted {
    font-size: var(--control-font);
}
.inspector-reference dt {
    color: var(--strong);
}
.inspector-reference dd {
    margin: 0;
    color: var(--muted);
}
.inspector-notice {
    margin-top: var(--space-5);
    padding: var(--panel-padding);
    border-left: 2px solid var(--accent);
    background: var(--surface);
}
.settings-panel > :last-child {
    margin-bottom: 0;
}
.settings-panel h2 {
    font-size: 1.25rem;
}
.recording-context {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-block: var(--space-5);
}
.metadata-card {
    flex: 1 1 26rem;
}
.uploader-card {
    flex: 0 1 18rem;
}
.metadata-card h2 {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}
.metadata-eyebrow {
    margin-bottom: var(--space-3);
}
.metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-5);
    margin: 0;
}
.metadata-grid dt {
    color: var(--muted);
    font-size: 0.75rem;
}
.metadata-grid dd {
    margin: var(--space-1) 0 0;
    color: var(--strong);
    font-size: var(--control-font);
    overflow-wrap: anywhere;
}
.recording-description {
    max-width: 80ch;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.profile-identity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.profile-avatar {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg);
}
.profile-initial {
    display: grid;
    place-items: center;
    font-size: 1.5rem;
}
.profile-login {
    color: var(--strong);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.uploader-card > p:not(.metadata-eyebrow) {
    margin: var(--space-4) 0 var(--space-2);
    font-size: 0.8125rem;
}
.profile-link {
    font-size: var(--control-font);
}
.prose,
.host-panel {
    max-width: 56rem;
    margin-inline: auto;
}
.prose {
    max-width: 76ch;
    overflow-wrap: anywhere;
}
.prose > h2 {
    margin-top: var(--space-7);
    scroll-margin-top: var(--space-5);
}
.prose pre {
    margin-block: var(--space-5);
}
:is(.prose, .settings-panel, .demo-caption, .release-note) a:not(.button),
.profile-link {
    text-decoration: underline;
}
.host-controls {
    display: grid;
    gap: var(--space-5);
}
.host-controls p {
    margin: 0;
}
.host-summary {
    font-size: 1.125rem;
    color: var(--strong);
}
.inline-form input {
    width: 100%;
}
.inline-form label {
    flex: 1 1 12rem;
    max-width: 24rem;
}
.empty-state {
    max-width: 44rem;
    padding-block: var(--space-7);
}
.skip-link {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--accent);
    color: var(--bg);
    border-radius: var(--radius-control);
}
.skip-link:not(:focus) {
    width: 1px;
    height: 1px;
    padding: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}
.export-terminal {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 1280px;
    height: 720px;
}
#boot-status {
    margin-block: var(--space-5);
    color: var(--muted);
    font-size: var(--control-font);
}
.terminal-skeleton {
    min-height: 20rem;
    padding: var(--panel-padding);
    background: var(--surface);
    border-radius: var(--radius-panel);
}
.terminal-skeleton div {
    height: 0.75rem;
    width: 75%;
    margin-top: var(--space-4);
    background: var(--line);
    border-radius: var(--space-1);
}
.terminal-skeleton div:last-child {
    width: 40%;
}
tbt-shell,
tbt-terminal,
tbt-demo,
tbt-release,
tbt-host,
tbt-settings,
tbt-help,
acl-boundary,
acl-dynamic {
    display: block;
}
@media (max-width: 900px) {
    .source-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .source-label {
        grid-column: 1 / -1;
    }
    .uploader-card {
        flex-basis: 100%;
    }
    .feature-grid {
        gap: var(--space-4);
    }
}
@media (max-width: 760px) {
    .site-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .brand {
        align-self: flex-start;
    }
    .site-header nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-1);
    }
    .site-header nav a {
        padding-inline: var(--space-2);
        line-height: 1.25;
    }
    .feature-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        margin-top: var(--space-7);
    }
    .site-footer nav {
        column-gap: var(--space-3);
    }
    .site-footer nav a {
        padding-inline: 0;
    }
    .page-heading {
        margin-bottom: var(--space-5);
    }
}
@media (max-width: 480px) {
    .source-bar {
        grid-template-columns: minmax(0, 1fr);
    }
    .hero-actions > .button {
        flex: 1 1 auto;
    }
    .search input {
        flex-basis: 100%;
        width: 100%;
    }
    .inline-form label {
        max-width: none;
    }
    .inline-form > button {
        width: 100%;
    }
}