:root { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; font-synthesis: none; color-scheme: light; --bg: #edf2f7; --bg-elevated: rgb(255 255 255 / 72%); --panel: rgb(250 252 255 / 76%); --panel-strong: #fbfdff; --panel-soft: rgb(226 233 242 / 72%); --glass: rgb(252 254 255 / 68%); --glass-strong: rgb(250 252 255 / 84%); --glass-chrome: rgb(252 254 255 / 74%); --material-inset: rgb(235 241 248 / 82%); --material-deep: rgb(225 233 243 / 90%); --ambient-gold: rgb(231 185 87 / 20%); --ambient-violet: rgb(102 89 184 / 15%); --field: #f8fbfe; --text: #172033; --text-muted: #5d6a7d; --text-faint: #8491a3; --line: rgb(104 124 150 / 22%); --line-strong: rgb(93 113 139 / 38%); --accent: #087e98; --accent-soft: #dff5f8; --accent-text: #07586b; --gold: #e7b957; --gold-strong: #9a6a12; --focus: #bd8730; --primary: #e7b957; --primary-text: #172033; --success: #247a5a; --warning: #9a6a12; --danger: #b34148; --shadow-soft: 0 12px 32px rgb(33 49 72 / 8%); --shadow: 0 18px 44px rgb(26 45 72 / 11%); --shadow-large: 0 30px 80px rgb(16 31 52 / 20%); --sidebar-width: 14rem; --radius-large: 1.35rem; --radius-medium: 0.95rem; --radius-small: 0.65rem; } /* 0.8.1 editorial workspaces */ .fundus-editor-surface .piece-script-panel > .piece-panel-heading { display: none; } .fundus-editor-surface .piece-script-panel > .piece-writing-stack { grid-row: 1 / span 2; width: 100%; justify-self: stretch; } .fundus-editor-surface .piece-writing-stack { gap: 1rem; } .fundus-editor-surface .piece-writing-stack .rich-markdown-surface { min-height: 7rem; border-color: color-mix(in srgb, var(--gold) 22%, var(--line-strong)); border-radius: 0.8rem; background: color-mix(in srgb, var(--field) 96%, var(--gold) 4%); } .fundus-editor-surface .piece-writing-stack .rich-markdown-field:nth-child(2) .rich-markdown-surface { min-height: 12rem; } .fundus-editor-surface .piece-meta-details, .fundus-editor-surface .piece-presentation-panel, .fundus-editor-surface .piece-media-panel { border-color: color-mix(in srgb, var(--gold) 22%, var(--line)); } .fundus-editor-surface .piece-presentation-panel { padding: 0.9rem; border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line)); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--material-inset) 84%, transparent); } .planning-workspace { grid-template-columns: minmax(0, 1fr); } .planning-workspace > .source-pane { display: none; } .planning-workspace.library-open { grid-template-columns: minmax(18rem, 0.62fr) minmax(32rem, 1.7fr); } .planning-workspace > .source-pane.library-open { display: block; } .planning-workspace .run-pane { width: min(100%, 74rem); justify-self: center; padding: clamp(1rem, 2vw, 1.5rem); } .planning-workspace.library-open .run-pane { width: 100%; } .pane-heading-actions { display: flex; align-items: center; gap: 0.5rem; } .pane-heading-actions > span { padding: 0.3rem 0.55rem; border-radius: 2rem; background: var(--material-deep); color: var(--text-muted); font-size: 0.7rem; font-weight: 680; } .piece-library-button { display: flex; align-items: center; gap: 0.35rem; } .planning-workspace .run-section { padding: 0; overflow: hidden; border-color: color-mix(in srgb, var(--category) 24%, var(--line)); background: color-mix(in srgb, var(--material-inset) 90%, transparent); } .planning-workspace .section-drag-handle { padding: 0.8rem 7rem 0.8rem 0.8rem; border-left: 0.22rem solid var(--category); background: color-mix(in srgb, var(--category) 7%, transparent); } .planning-workspace .usage-list { gap: 0; margin: 0; border-top: 1px solid var(--line); } .planning-workspace .usage-row { min-height: 3rem; padding: 0.55rem 0.8rem 0.55rem 1rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--material-deep) 74%, transparent); } .planning-workspace .usage-drag-copy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .planning-workspace .section-placeholder, .planning-workspace .section-editor { margin-inline: 1rem; } .planning-workspace .section-editor { margin-bottom: 0.7rem; } .live-current { border-color: color-mix(in srgb, var(--gold) 26%, var(--line)); background: color-mix(in srgb, var(--glass) 94%, var(--bg)); } .live-current-scroll { padding-inline: clamp(1rem, 4vw, 4.5rem); } .live-piece-heading { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 0.9rem; } .live-piece-context { display: flex; grid-column: 1 / -1; align-items: center; gap: 0.45rem; color: var(--gold-strong); font-size: 0.62rem; font-weight: 760; letter-spacing: 0.06em; text-transform: uppercase; } .live-piece-context span + span { padding-left: 0.45rem; border-left: 1px solid var(--line-strong); color: var(--text-faint); } .live-script-section { max-width: 64rem; padding-block: 1rem; } .live-intro .prompter-copy { font-size: calc(var(--prompt-size) * 1.08); } .moderation-card { margin-block: 0.35rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line)); border-radius: 0.85rem; background: color-mix(in srgb, var(--gold) 5%, var(--material-inset)); } .search-page { width: min(100%, 92rem); } .search-page-heading, .search-results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } .search-page-heading h1, .search-results-heading h2 { margin: 0.1rem 0 0; } .search-page-heading p:not(.eyebrow) { margin: 0.35rem 0 0; color: var(--text-muted); } .search-filter-trigger { display: none; } .search-workspace { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: 1rem; align-items: start; } .search-filter-panel { position: sticky; top: 5.25rem; padding: 0.9rem; border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); border-radius: var(--radius-large); background: color-mix(in srgb, var(--glass) 94%, transparent); box-shadow: var(--shadow-soft); } .search-filter-panel > header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem; } .search-filter-panel h2 { margin: 0.1rem 0 0; font-size: 1.1rem; } .search-filter-panel .dialog-close { display: none; } .search-filter-panel nav { display: grid; gap: 0.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); } .search-filter-panel nav a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.65rem; border: 1px solid transparent; border-radius: 0.65rem; color: var(--text-muted); font-size: 0.75rem; } .search-filter-panel nav a.active { border-color: color-mix(in srgb, var(--gold) 36%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, var(--material-inset)); color: var(--text); } .search-filter-panel nav strong { color: var(--gold-strong); font-size: 0.68rem; } .search-facet-form { display: grid; gap: 0.65rem; margin-top: 0.85rem; } .search-facet-form label { display: grid; gap: 0.25rem; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; } .search-facet-form select { width: 100%; } .search-facet-form .text-button { text-align: center; } .search-results { min-width: 0; } .search-results-heading { padding: 0.35rem 0 0.8rem; border-bottom: 1px solid var(--line); } .search-results-heading > span { padding: 0.3rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--gold) 10%, var(--panel)); color: var(--gold-strong); font-size: 0.68rem; } .search-result-group { margin-top: 1.2rem; } .search-result-list > a { padding: 1rem 1.1rem; border-radius: 0.85rem; background: color-mix(in srgb, var(--glass) 84%, transparent); } .search-start-state { display: grid; min-height: 22rem; place-items: center; align-content: center; text-align: center; color: var(--text-muted); } .search-start-state .app-icon { font-size: 2rem; color: var(--gold-strong); } .search-start-state h2, .search-start-state p { margin: 0.45rem 0 0; } @media (max-width: 72rem) { .planning-workspace, .planning-workspace.library-open { display: block; } .planning-workspace > .source-pane, .planning-workspace > .source-pane.library-open { display: block; } .planning-workspace .piece-library-button, .planning-workspace .source-pane .pane-heading-actions .dialog-close { display: none; } } /* 0.9.0 post quick navigation and selection language. */ .post-library-workspace .post-page-heading { align-items: flex-end; margin-bottom: 0.9rem; padding: 0 0 0.9rem; } .post-library-workspace .post-page-heading h1 { margin: 0; font-size: clamp(1.45rem, 2vw, 1.9rem); } .post-library-heading, .post-library-heading > div, .post-nav-group > header, .post-overview-group > header { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; } .post-library-heading { margin-bottom: 0.75rem; } .post-library-heading > div { align-items: baseline; } .post-library-heading h2, .post-overview-group h3 { margin: 0; } .post-library-heading > span, .post-overview-group > header > span { padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--panel-strong); color: var(--text-muted); font-size: 0.7rem; } .post-workspace.post-editor-overlay { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr) clamp(19rem, 23vw, 22rem); } .post-editor-overlay > .post-navigation, .post-editor-overlay > .post-editor, .post-editor-overlay > .post-inspector { border: 1px solid color-mix(in srgb, var(--gold) 12%, var(--line)); border-radius: var(--radius-medium); box-shadow: inset 0 1px rgb(255 255 255 / 7%); } .post-editor-overlay > .post-navigation { padding: 0; overflow: hidden; border-right: 1px solid color-mix(in srgb, var(--gold) 12%, var(--line)); background: color-mix(in srgb, var(--panel-strong) 96%, transparent); } .post-editor-overlay .post-navigation > header { min-height: 4.3rem; background: transparent; } .post-nav-group { padding-bottom: 0.7rem; } .post-nav-group > header { padding: 0.35rem 0.3rem; color: var(--text-muted); font-size: 0.68rem; font-weight: 760; letter-spacing: 0.035em; text-transform: uppercase; } .post-nav-group > header span { display: flex; align-items: center; gap: 0.4rem; } .post-nav-group > header b { color: var(--text-faint); } .post-quick-create button { display: flex; width: 100%; align-items: center; gap: 0.45rem; justify-content: flex-start; padding: 0.55rem 0.6rem; border: 1px dashed color-mix(in srgb, var(--gold) 48%, var(--line)); border-radius: 0.62rem; background: transparent; color: var(--gold-strong); font-size: 0.72rem; font-weight: 720; } .post-content-overview { gap: 0.85rem; } .post-overview-group { display: grid; gap: 0.65rem; padding: 0.9rem; border: 1px solid color-mix(in srgb, var(--gold) 16%, var(--line)); border-radius: var(--radius-medium); background: var(--panel-strong); } .post-overview-items { display: grid; gap: 0.45rem; } .post-overview-items article { display: grid; gap: 0.45rem; padding: 0.7rem; border: 1px solid var(--line); border-radius: 0.68rem; background: transparent; } .post-overview-items article > p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-muted); font-size: 0.72rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .post-overview-open { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; } .post-overview-open small { color: var(--text-faint); } .post-overview-copy-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } .post-overview-copy-actions button { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 0.55rem; background: transparent; color: var(--accent-text); font-size: 0.68rem; } .post-editor-overlay :is(.post-writing-section, .post-editor-section, .post-overview-group), .post-create-menu > div, .post-material-form { background: var(--panel-strong); } .post-editor-overlay .post-editor-scroll :is(input, select, textarea), .post-editor-overlay .post-inspector :is(input, select, textarea), .post-editor-overlay .post-editor-context-toolbar select, .post-create-menu input { background: color-mix(in srgb, var(--panel-strong) 97%, var(--gold) 3%); } /* Checkbox and radio semantics remain accessible, but selection is shown by the surface. */ label:has(> input[type='checkbox']), label:has(> input[type='radio']) { position: relative; border: 1px solid var(--line); border-radius: 0.65rem; background: transparent; cursor: pointer; } label:has(> input[type='checkbox']:checked), label:has(> input[type='radio']:checked) { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, var(--panel-strong)); box-shadow: none; color: var(--text); } label > input[type='checkbox'], label > input[type='radio'] { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; opacity: 0; } label:has(> input[type='checkbox']:focus-visible), label:has(> input[type='radio']:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .inline-check, .filter-checkbox, .editor-filter-check { min-height: 2.35rem; align-items: center; padding: 0.5rem 0.65rem; } @media (max-width: 72rem) { .post-workspace.post-editor-overlay { display: block; } .post-editor-overlay > .post-navigation, .post-editor-overlay > .post-editor, .post-editor-overlay > .post-inspector { border: 0; border-radius: 0; } } @media (max-width: 52rem) { .fundus-editor-surface .piece-script-panel > .piece-writing-stack { width: 100%; } .search-page { padding-inline: 1rem; } .search-page-heading { align-items: flex-start; } .search-filter-trigger { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .search-workspace { display: block; } .search-filter-panel { display: none; position: fixed; z-index: 80; inset: calc(var(--mobile-header) + env(safe-area-inset-top) + 0.4rem) 0.5rem calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 0.4rem); overflow-y: auto; background: var(--bg-elevated); box-shadow: var(--shadow-large); } .search-filter-panel.open { display: block; } .search-filter-panel .dialog-close { display: grid; } .search-page-form { margin-block: 1rem; } .live-current-scroll { padding-inline: 0.9rem; } .moderation-card { padding: 0.8rem; } } /* Postproduktion reuses the editorial three-column workbench. */ .post-overview-page { width: min(100%, 92rem); } .post-overview-heading { align-items: flex-end; } .post-overview-filters { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(11rem, 0.55fr) minmax(11rem, 0.55fr) auto; align-items: end; gap: 0.7rem; margin-bottom: 1.25rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: color-mix(in srgb, var(--glass) 92%, transparent); box-shadow: var(--shadow-soft); } .post-show-library > header, .post-show-row, .post-show-counts, .post-show-counts > div { display: flex; align-items: center; } .post-show-library > header { justify-content: space-between; margin-bottom: 0.75rem; } .post-show-library h2, .post-show-row h3 { margin: 0; } .post-show-library > header > span { padding: 0.3rem 0.65rem; border-radius: 2rem; background: var(--material-deep); color: var(--text-muted); } .post-show-list { display: grid; gap: 0.45rem; } .post-show-row { min-width: 0; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: var(--shadow-soft); } .post-show-row:hover { border-color: color-mix(in srgb, var(--gold) 48%, var(--line)); background: color-mix(in srgb, var(--gold) 5%, var(--panel)); } .post-show-primary { min-width: 15rem; flex: 1; } .post-show-primary p { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.78rem; } .post-progress { color: var(--gold-strong); font-size: 0.65rem; font-weight: 760; letter-spacing: 0.06em; text-transform: uppercase; } .post-show-counts { gap: clamp(0.75rem, 2vw, 1.6rem); margin: 0; } .post-show-counts > div { min-width: 3.5rem; flex-direction: column-reverse; } .post-show-counts dt { color: var(--text-faint); font-size: 0.64rem; } .post-show-counts dd { margin: 0; font-size: 1rem; font-weight: 740; } .post-workspace { display: grid; height: calc(100dvh - 4.25rem); min-height: 36rem; grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr) clamp(19rem, 23vw, 22rem); overflow: hidden; } .post-workspace.left-collapsed { grid-template-columns: 3.5rem minmax(0, 1fr) clamp(19rem, 23vw, 22rem); } .post-workspace.right-collapsed { grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr) 3.5rem; } .post-workspace.left-collapsed.right-collapsed { grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; } .post-navigation, .post-inspector, .post-editor { min-width: 0; min-height: 0; } .post-navigation, .post-inspector { display: flex; flex-direction: column; background: color-mix(in srgb, var(--glass) 94%, var(--bg)); } .post-navigation { border-right: 1px solid var(--line); } .post-inspector { border-left: 1px solid var(--line); } .post-navigation > header, .post-inspector > header, .post-editor-header { display: flex; min-height: 4.3rem; align-items: center; justify-content: space-between; gap: 0.55rem; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--glass-chrome) 96%, transparent); } .post-navigation > header h1, .post-inspector > header h2, .post-editor-header h2 { margin: 0.1rem 0 0; font-size: 1rem; line-height: 1.2; } .post-navigation > header > a, .post-navigation > header > button, .post-inspector > header > button { display: grid; width: 2.2rem; height: 2.2rem; flex: none; place-items: center; padding: 0; } .post-navigation-body, .post-inspector-scroll, .post-editor-scroll { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } .post-navigation-body { display: grid; align-content: start; gap: 0.65rem; padding: 0.75rem; } .post-material-button, .post-item-search { display: flex; align-items: center; gap: 0.45rem; width: 100%; } .post-material-button { justify-content: flex-start; padding: 0.65rem 0.7rem; border-color: color-mix(in srgb, var(--gold) 32%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, var(--material-inset)); } .post-material-button span { flex: 1; text-align: left; } .post-material-button b, .post-nav-group summary b { color: var(--text-faint); font-size: 0.7rem; } .post-item-search { padding: 0.1rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--field); } .post-item-search input { min-width: 0; padding-inline: 0; border: 0; background: transparent; box-shadow: none; } .post-nav-group { border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; } .post-nav-group > summary { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.3rem; font-size: 0.72rem; font-weight: 760; letter-spacing: 0.035em; text-transform: uppercase; } .post-nav-group > summary span { display: flex; align-items: center; gap: 0.4rem; } .post-nav-group > div { display: grid; gap: 0.18rem; } .post-nav-group > div > button { display: grid; gap: 0.12rem; justify-items: start; width: 100%; padding: 0.55rem 0.6rem; border-color: transparent; background: transparent; text-align: left; } .post-nav-group > div > button.active { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); background: color-mix(in srgb, var(--gold) 11%, var(--material-inset)); box-shadow: inset 2px 0 var(--gold); } .post-nav-group button span { max-width: 100%; overflow: hidden; font-size: 0.8rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; } .post-nav-group button small { color: var(--text-faint); font-size: 0.63rem; } .post-create-item > summary { padding: 0.45rem 0.6rem; color: var(--accent-text); font-size: 0.72rem; } .post-create-item form { display: grid; gap: 0.45rem; padding: 0.55rem; } .post-editor { display: flex; flex-direction: column; background: color-mix(in srgb, var(--material-inset) 72%, var(--bg)); } .post-editor-header { padding-inline: clamp(1rem, 3vw, 2.2rem); } .post-editor-header h2 { font-size: 1.2rem; } .post-editor-actions, .post-section-toolbar, .post-editor-section > header, .post-writing-section > header, .post-thumbnail-section > header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .post-editor-actions > span { color: var(--text-muted); font-size: 0.72rem; } .post-editor-scroll { display: grid; flex: 1; align-content: start; gap: 1rem; width: 100%; max-width: 70rem; margin-inline: auto; padding: clamp(1rem, 3vw, 2.2rem); } .post-title-field > span { display: flex; justify-content: space-between; } .post-title-field > div, .copy-field { display: flex; align-items: flex-start; gap: 0.4rem; } .post-title-field input { font-size: 1.15rem; font-weight: 720; } .post-title-field input, .copy-field > :first-child { min-width: 0; flex: 1; } .post-title-field button, .copy-field button { display: grid; width: 2.55rem; height: 2.55rem; flex: none; place-items: center; padding: 0; } .post-writing-section, .post-editor-section { display: grid; gap: 0.7rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--panel-strong) 96%, transparent); } .post-writing-section h3, .post-editor-section h3, .post-section-toolbar h3, .post-thumbnail-section h3 { margin: 0; } .post-writing-section textarea { min-height: 24rem; font-size: 0.95rem; line-height: 1.65; } .post-writing-section.exact-source { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); } .post-writing-section.exact-source textarea { background: color-mix(in srgb, var(--field) 94%, var(--accent-soft)); } .post-field-grid, .post-thumbnail-upload { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .post-thumbnail-upload { align-items: end; } .post-thumbnail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.7rem; } .post-thumbnail-grid figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--material-inset); } .post-thumbnail-grid figure.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); } .post-thumbnail-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .post-thumbnail-grid figcaption { display: grid; gap: 0.4rem; padding: 0.6rem; } .post-thumbnail-grid figcaption > span, .post-thumbnail-grid figcaption > div { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; } .post-thumbnail-grid figcaption > span { min-width: 0; font-size: 0.72rem; } .post-thumbnail-grid figcaption b { color: var(--gold-strong); font-size: 0.62rem; } .post-thumbnail-grid figcaption form { display: inline; } .post-editor-tabs { position: relative; z-index: 2; display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--line); } .post-editor-tabs button { position: relative; z-index: 3; flex: none; padding: 0.65rem 0.8rem; border: 0; border-radius: 0; background: transparent; } .post-editor-tabs button.active { box-shadow: inset 0 -2px var(--gold); color: var(--gold-strong); } .post-tab-panel { display: grid; gap: 1rem; } .post-tab-panel[hidden] { display: none; } .monospace { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; } .post-empty-editor { display: grid; max-width: 30rem; margin: auto; justify-items: center; padding: 2rem; text-align: center; } .post-empty-editor h2 { margin-bottom: 0; } .post-empty-editor p { color: var(--text-muted); } .post-inspector-scroll { display: grid; align-content: start; gap: 0; } .post-inspector-scroll > section { display: grid; gap: 0.55rem; padding: 0.85rem; border-bottom: 1px solid var(--line); } .post-inspector-scroll label:not(.inline-check) { display: grid; gap: 0.3rem; } .post-inspector-scroll h3 { margin: 0; font-size: 0.78rem; letter-spacing: 0.035em; text-transform: uppercase; } .post-inspector-scroll p { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; margin: 0; font-size: 0.72rem; } .post-inspector-scroll p span { color: var(--text-muted); text-align: right; } .post-timecode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; } .post-inspector .post-ai-note { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); } .post-inspector .post-ai-note p { display: block; color: var(--text-muted); line-height: 1.5; } .post-inspector > footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding: 0.7rem 0.8rem; border-top: 1px solid var(--line); background: var(--panel-strong); } .post-mobile-switch { display: none; } .post-material-dialog { width: min(56rem, calc(100vw - 2rem)); max-height: min(48rem, calc(100dvh - 2rem)); padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line)); border-radius: var(--radius-large); background: var(--panel-strong); box-shadow: var(--shadow-large); } .post-material-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); background: var(--glass-chrome); } .post-material-dialog h2, .post-material-content h3 { margin: 0; } .post-material-content { display: grid; gap: 1rem; max-height: calc(100dvh - 8rem); padding: 1rem; overflow-y: auto; } .post-material-content > section { display: grid; gap: 0.7rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .post-material-list { display: grid; gap: 0.35rem; } .post-material-list article { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--material-inset); } .post-recording-part { padding: 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--material-inset); } .post-recording-part > summary span { display: grid; } .post-recording-part > form { margin-top: 0.65rem; } .post-material-list article > div { display: grid; min-width: 0; } .post-material-list small { color: var(--text-muted); } .post-material-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 0.65rem; padding: 0.75rem; border-radius: var(--radius-medium); background: var(--material-inset); } @media (max-width: 72rem) { .post-overview-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-show-row { align-items: flex-start; } .post-show-counts { flex-wrap: wrap; } .post-workspace, .post-workspace.left-collapsed, .post-workspace.right-collapsed, .post-workspace.left-collapsed.right-collapsed { display: block; height: auto; min-height: calc(100dvh - 4.25rem); overflow: visible; } .post-mobile-switch { position: sticky; top: 4.25rem; z-index: 12; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem; padding: 0.45rem; border-bottom: 1px solid var(--line); background: var(--glass-chrome); backdrop-filter: blur(20px); } .post-mobile-switch button.active { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--panel)); } .post-navigation, .post-inspector { display: none; min-height: calc(100dvh - 8rem); border: 0; } .post-workspace.show-navigation .post-navigation, .post-workspace.show-details .post-inspector { display: flex; } .post-workspace.show-navigation .post-editor, .post-workspace.show-details .post-editor { display: none; } .post-workspace.show-navigation .post-navigation > header > button, .post-workspace.show-details .post-inspector > header > button { display: none; } .post-navigation-body, .post-inspector-scroll { overflow: visible; } .post-editor { min-height: calc(100dvh - 8rem); } .post-editor-scroll { overflow: visible; } } @media (max-width: 52rem) { .post-overview-filters, .post-field-grid, .post-thumbnail-upload, .post-material-form { grid-template-columns: minmax(0, 1fr); } .post-show-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .post-show-counts { grid-column: 1 / -1; justify-content: space-between; order: 3; width: 100%; padding-top: 0.5rem; border-top: 1px solid var(--line); } .post-show-counts > div { min-width: 2.5rem; } .post-workspace, .post-workspace.left-collapsed, .post-workspace.right-collapsed, .post-workspace.left-collapsed.right-collapsed { min-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav)); } .post-mobile-switch { top: calc(var(--mobile-header) + env(safe-area-inset-top)); } .post-editor-header { align-items: flex-start; padding: 0.65rem 0.8rem; } .post-editor-header h2 { font-size: 1rem; } .post-editor-actions { flex-direction: column-reverse; align-items: flex-end; } .post-editor-scroll { padding: 0.8rem; } .post-writing-section, .post-editor-section { padding: 0.8rem; } .post-writing-section textarea { min-height: 18rem; } .post-editor-tabs { margin-inline: -0.8rem; padding-inline: 0.8rem; } .post-inspector > footer { position: static; } .post-material-dialog { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; } .post-material-content { max-height: calc(100dvh - 4.5rem); padding-bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 1rem); } } .completion-dialog { width: min(38rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: var(--radius-large); background: var(--panel-strong); color: var(--text); } .completion-dialog::backdrop { background: rgb(3 8 16 / 68%); } .completion-dialog form { display: grid; gap: 1rem; padding: 1.25rem; } .completion-dialog h2, .completion-dialog p { margin: 0; } .completion-dialog fieldset { display: grid; gap: 0.5rem; max-height: 15rem; overflow-y: auto; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-medium); } .completion-dialog footer, .completion-counts, .check-row { display: flex; align-items: center; gap: 0.75rem; } .completion-dialog footer { justify-content: flex-end; } .completion-counts { flex-wrap: wrap; } .completion-counts span { padding: 0.45rem 0.65rem; border-radius: 999px; background: var(--panel-soft); } .check-row input { width: auto; } .check-row span { display: grid; } .share-management { max-height: min(82dvh, 54rem); padding: clamp(1rem, 2.5vw, 1.4rem); overflow-y: auto; } .share-management-dialog { width: min(64rem, calc(100% - 2rem)); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-large); background: color-mix(in srgb, var(--bg-elevated) 94%, transparent); box-shadow: var(--shadow); color: var(--text); overflow: hidden; backdrop-filter: blur(24px) saturate(1.12); } .share-management-dialog::backdrop { background: rgb(3 8 16 / 58%); backdrop-filter: blur(5px); } .share-catalog-panel { display: grid; gap: 0.75rem; margin-bottom: 0.75rem; padding: 1rem; } .share-catalog-panel .panel-heading { margin: 0; } .share-catalog-panel h2 { margin: 0.15rem 0 0; font-size: 1rem; } .share-catalog-panel .catalog-note { margin: 0; } .share-create-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.8rem; margin-top: 1rem; } .share-create-form label, .share-edit-form label { display: grid; gap: 0.35rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; } .share-create-form :is(input, select), .share-edit-form :is(input, select), .integration-form :is(input, select) { width: 100%; min-width: 0; min-height: 2.65rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); color: var(--text); font: inherit; } .share-create-form :is(input, select):focus-visible, .share-edit-form :is(input, select):focus-visible, .integration-form :is(input, select):focus-visible { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 1px; } .share-create-form button { align-self: end; } .share-intro { max-width: 58rem; margin: 0; color: var(--text-muted); font-size: 0.76rem; } .share-show-list { display: grid; gap: 0.75rem; margin-top: 1rem; } .share-show-card { padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel-soft); } .share-show-card > header, .share-row summary { display: grid; align-items: center; gap: 0.75rem; } .share-show-card > header { grid-template-columns: minmax(0, 1fr) auto; } .share-show-card > header > div, .share-row summary > span:nth-child(2) { display: grid; min-width: 0; } .share-show-card > header a { color: var(--text); font-weight: 760; } .share-show-card small, .share-row small { color: var(--text-muted); font-size: 0.68rem; } .share-list { display: grid; gap: 0.4rem; margin-top: 0.75rem; } .share-row { border-top: 1px solid var(--line); } .share-row summary { grid-template-columns: auto minmax(0, 1fr) auto auto; min-height: 3.25rem; cursor: pointer; list-style: none; } .share-row summary::-webkit-details-marker { display: none; } .share-row-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); } .share-row summary > span:nth-child(3) { padding: 0.2rem 0.45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.65rem; font-weight: 700; } .share-row summary > span.locked { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); color: var(--danger); } .share-edit-area { display: grid; gap: 0.75rem; padding: 0.75rem 0 0.25rem 2.75rem; } .share-edit-area > p { margin: 0; color: var(--text-muted); font-size: 0.74rem; } .share-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .share-edit-form input, .share-edit-form select { width: 100%; } .share-result { display: grid; gap: 0.25rem; } .share-result a { overflow-wrap: anywhere; } .share-result > div { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .guest-shell { min-height: 100dvh; } .share-page { width: min(58rem, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) 0; } .share-gate { width: min(30rem, 100%); margin: 8vh auto 0; } .share-heading { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); } .share-heading h1 { margin: 0.25rem 0; font-size: clamp(2rem, 6vw, 4rem); } .shared-rundown, .historical-rundown { display: grid; gap: 1rem; margin-top: 1.25rem; } .shared-section { padding: clamp(1rem, 2.5vw, 1.35rem); } .historical-section { padding: clamp(1rem, 2.5vw, 1.35rem); } .shared-section > header, .historical-section > header, .shared-usage-heading, .historical-usage > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .shared-section h2, .shared-usage h3, .historical-section h2, .historical-usage h3 { margin: 0; } .shared-usage, .historical-usage { margin-top: 0.75rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel-soft); } .shared-usage img { max-width: min(100%, 32rem); max-height: 22rem; margin-top: 0.8rem; border-radius: var(--radius-medium); object-fit: contain; } .output-image-only { display: grid; height: 100%; place-items: center; } .output-image-only img { width: 100%; height: 100%; object-fit: contain; } .shared-copy, .historical-usage section, .historical-usage details { margin-top: 0.8rem; } .historical-show-page { width: min(72rem, 100%); } .historical-usage p { white-space: pre-wrap; } @media (max-width: 42rem) { .share-create-form, .share-edit-form { grid-template-columns: 1fr; } .share-row summary { grid-template-columns: auto minmax(0, 1fr) auto; } .share-row summary > .app-icon:last-child { display: none; } .share-edit-area { padding-left: 0; } .completion-dialog footer, .shared-section > header, .historical-section > header, .shared-usage-heading, .historical-usage > header { align-items: stretch; flex-direction: column; } } :root[data-theme='dark'] { color-scheme: dark; --bg: #0b1220; --bg-elevated: rgb(11 18 32 / 68%); --panel: rgb(12 24 42 / 72%); --panel-strong: #111d30; --panel-soft: rgb(7 16 30 / 76%); --glass: rgb(10 22 39 / 64%); --glass-strong: rgb(10 22 39 / 84%); --glass-chrome: rgb(9 20 36 / 72%); --material-inset: rgb(6 15 28 / 72%); --material-deep: rgb(4 11 22 / 82%); --ambient-gold: rgb(231 185 87 / 32%); --ambient-violet: rgb(102 89 184 / 24%); --field: #101a2b; --text: #fff7e8; --text-muted: #a9b6c8; --text-faint: #7f91a8; --line: rgb(139 162 192 / 23%); --line-strong: rgb(161 181 207 / 40%); --accent: #67dde8; --accent-soft: #17394c; --accent-text: #baf8ff; --gold: #e7b957; --gold-strong: #f0c96f; --focus: #e7b957; --primary: #e7b957; --primary-text: #0b1220; --success: #69d6a5; --warning: #e7b957; --danger: #ff8d91; --shadow-soft: 0 14px 38px rgb(0 0 0 / 18%); --shadow: 0 22px 52px rgb(0 0 0 / 28%); --shadow-large: 0 36px 90px rgb(0 0 0 / 48%); } * { box-sizing: border-box; } html { min-width: 20rem; background: var(--bg); scrollbar-gutter: stable; } body { margin: 0; min-width: 20rem; min-height: 100vh; background: radial-gradient(ellipse 52rem 36rem at 14% -6%, var(--ambient-gold), transparent 66%), radial-gradient(ellipse 58rem 44rem at 94% 18%, var(--ambient-violet), transparent 68%), var(--bg); background-attachment: fixed; color: var(--text); font-size: 0.95rem; line-height: 1.5; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button { color: inherit; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea { caret-color: var(--gold); } input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus, select:focus, textarea:focus { border-color: var(--focus) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 13%, transparent); outline: 0; } ::placeholder { color: var(--text-faint); opacity: 0.82; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .app-shell { min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: var(--sidebar-width); flex-direction: column; padding: 1.25rem 0.85rem 1rem; border-right: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); background: var(--glass); box-shadow: inset -1px 0 rgb(255 255 255 / 8%), 10px 0 34px rgb(0 0 0 / 12%); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); overflow-y: auto; } .brand { display: flex; align-items: center; gap: 0.7rem; min-height: 2.7rem; padding: 0 0.65rem; font-size: 1.12rem; font-weight: 720; letter-spacing: -0.025em; } .brand-mark { display: flex; width: 1.65rem; height: 1.65rem; align-items: flex-end; justify-content: center; gap: 0.14rem; padding: 0.37rem; border-radius: 0.53rem; background: var(--gold); box-shadow: 0 7px 18px color-mix(in srgb, var(--gold) 22%, transparent); } .brand-mark i { display: block; width: 0.16rem; border-radius: 1rem; background: var(--panel-strong); } .brand-mark i:nth-child(1) { height: 0.46rem; } .brand-mark i:nth-child(2) { height: 0.78rem; } .brand-mark i:nth-child(3) { height: 0.6rem; } .main-navigation { display: grid; gap: 0.28rem; margin-top: 1.5rem; } .main-navigation a, .utility-navigation a { display: flex; align-items: center; gap: 0.82rem; min-height: 2.65rem; padding: 0.45rem 0.7rem; border-radius: 0.8rem; color: var(--text-muted); font-weight: 590; transition: background-color 140ms ease, color 140ms ease, transform 140ms ease; } .main-navigation a:hover, .utility-navigation a:hover { background: color-mix(in srgb, var(--panel-strong) 66%, transparent); color: var(--text); } .main-navigation a.active, .utility-navigation a.active { border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line)); background: color-mix(in srgb, var(--gold) 11%, var(--glass-strong)); box-shadow: inset 0 1px rgb(255 255 255 / 8%); color: var(--text); } .sidebar-footer { display: grid; gap: 0.85rem; margin-top: auto; } .utility-navigation { display: grid; padding-top: 0.85rem; border-top: 1px solid var(--line); } .theme-toggle { display: flex; width: 100%; align-items: center; gap: 0.65rem; padding: 0.65rem 0.72rem; border: 1px solid var(--line); border-radius: 0.75rem; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.82rem; font-weight: 620; } .theme-toggle:hover { background: var(--panel); color: var(--text); } .theme-symbol { display: grid; width: 1.4rem; height: 1.4rem; place-items: center; border-radius: 50%; color: var(--gold); font-size: 1.12rem; line-height: 1; } .mobile-header, .mobile-navigation { display: none; } #main-content { min-height: 100vh; margin-left: var(--sidebar-width); } .page-wrap { width: min(100%, 92rem); margin: 0 auto; padding: 2rem clamp(1.5rem, 3vw, 3.25rem) 3rem; } .narrow-page { max-width: 74rem; } .page-heading { margin-bottom: 1rem; } .page-heading h1 { max-width: 24ch; margin: 0; font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 690; letter-spacing: -0.04em; line-height: 1.08; } .eyebrow { margin: 0; color: var(--accent); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.115em; text-transform: uppercase; } .page-intro { max-width: 42rem; margin: 0.35rem 0 0; color: var(--text-muted); font-size: 0.88rem; } .split-heading, .show-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } .heading-stat { display: flex; align-items: baseline; gap: 0.38rem; padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 0.65rem; background: var(--panel); } .heading-stat strong { font-size: 1rem; line-height: 1; } .heading-stat span { color: var(--text-muted); font-size: 0.7rem; } .preview-notice { margin: 0 0 0.85rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: var(--radius-small); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); color: var(--accent-text); } .preview-notice summary { display: flex; align-items: center; gap: 0.55rem; min-height: 2.35rem; padding: 0.45rem 0.7rem; cursor: pointer; list-style: none; } .preview-notice summary::-webkit-details-marker { display: none; } .preview-notice strong { font-size: 0.72rem; } .preview-notice p { margin: 0; padding: 0 0.7rem 0.65rem 1.8rem; color: var(--text-muted); font-size: 0.72rem; } .preview-dot { flex: 0 0 auto; width: 0.48rem; height: 0.48rem; border: 2px solid var(--accent); border-radius: 50%; } .preview-chevron { margin-left: auto; color: var(--text-muted); font-size: 0.85rem; transition: transform 140ms ease; } .preview-notice[open] .preview-chevron { transform: rotate(180deg); } .library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .search-field { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--line); background: var(--field); color: var(--text-muted); } .search-field { width: min(100%, 24rem); height: 2.5rem; padding: 0 0.9rem; border-radius: 0.88rem; box-shadow: 0 6px 20px rgba(48, 48, 43, 0.035); } .search-field span:first-child { font-size: 1.35rem; line-height: 1; transform: rotate(-15deg); } .search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); } .search-field input::placeholder { color: var(--text-faint); } .search-field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 13%, transparent); } .search-field input:focus { box-shadow: none; } .filter-tabs, .mobile-pane-switch { display: flex; padding: 0.22rem; border-radius: 0.76rem; background: var(--panel-soft); } .filter-tabs { height: 2.5rem; } .filter-tabs button, .mobile-pane-switch button { padding: 0.48rem 0.82rem; border: 0; border-radius: 0.58rem; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.78rem; font-weight: 640; } .filter-tabs button { height: 2rem; padding-block: 0.35rem; white-space: nowrap; } .filter-tabs button.active, .mobile-pane-switch button.active { background: color-mix(in srgb, var(--gold) 11%, var(--glass-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent); color: var(--text); } .piece-grid { display: grid; gap: 0; overflow: visible; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px) saturate(1.08); } .piece-card { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(8.5rem, 0.9fr) minmax(12rem, auto); align-items: center; gap: 1rem; min-width: 0; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); transition: background-color 150ms ease, border-color 150ms ease; } .piece-card:last-child { border-bottom: 0; } .piece-card:hover, .piece-card:focus-within { background: color-mix(in srgb, var(--glass-strong) 84%, transparent); } .source-card > div, .live-kicker { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; } .category-label { display: inline-flex; align-items: center; gap: 0.42rem; color: var(--text-muted); font-size: 0.68rem; font-weight: 720; letter-spacing: 0.075em; text-transform: uppercase; } .category-label i { display: inline-block; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--category); box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--category) 16%, transparent); } .status-label { padding: 0.24rem 0.5rem; border-radius: 2rem; background: var(--panel-soft); color: var(--text-muted); font-size: 0.66rem; font-weight: 680; } .status-label.ready { background: color-mix(in srgb, var(--success) 14%, var(--panel)); color: var(--success); } .piece-primary { min-width: 0; } .piece-primary h2 { margin: 0 0 0.2rem; font-size: 0.98rem; font-weight: 670; letter-spacing: -0.015em; line-height: 1.25; overflow-wrap: anywhere; } .piece-primary p { margin: 0; color: var(--text-muted); font-size: 0.76rem; line-height: 1.4; } .piece-classification { display: grid; min-width: 0; gap: 0.45rem; } .piece-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; } .piece-tags span { padding: 0.28rem 0.52rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--text-muted); font-size: 0.67rem; } .piece-state { display: flex; align-items: flex-end; flex-direction: column; gap: 0.3rem; color: var(--text-faint); font-size: 0.66rem; } .piece-facts { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 0.7rem; } .piece-state b { color: var(--text); font-weight: 680; } .empty-state { padding: 1.5rem; text-align: center; } .empty-state { border: 1px dashed var(--line-strong); border-radius: var(--radius-large); } .empty-state > span { color: var(--text-faint); font-size: 1.4rem; } .empty-state h2 { margin: 0.35rem 0 0.2rem; font-size: 1rem; } .empty-state p { margin: 0 0 0.8rem; color: var(--text-muted); font-size: 0.78rem; } .empty-state button { padding: 0.65rem 0.9rem; border: 0; border-radius: 0.65rem; background: var(--primary); color: var(--primary-text); cursor: pointer; font-weight: 650; } .show-summary { display: flex; align-items: center; gap: 0.5rem; } .show-summary > div { display: grid; min-width: 5.8rem; padding: 0.35rem 0.7rem; border-left: 1px solid var(--line-strong); } .show-summary strong { font-size: 1rem; } .show-summary span { color: var(--text-muted); font-size: 0.68rem; } .live-link { display: flex; align-items: center; gap: 0.55rem; min-height: 2.45rem; padding: 0.55rem 0.8rem; border-radius: 0.72rem; background: var(--primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--gold) 18%, transparent); color: var(--primary-text); font-size: 0.78rem; font-weight: 680; } .live-link span { color: inherit; font-size: 1rem; } .show-heading-copy { min-width: 0; } .show-title { margin: 0.3rem 0 0; font-size: 0.9rem; font-weight: 680; overflow-wrap: anywhere; } .show-date { margin: 0.08rem 0 0; color: var(--text-muted); font-size: 0.72rem; } .mobile-pane-switch { display: none; } .builder-workspace { display: grid; grid-template-columns: minmax(15rem, 0.72fr) minmax(24rem, 1.45fr); gap: 0.75rem; align-items: start; } .builder-pane { min-width: 0; padding: 0.9rem; border: 1px solid color-mix(in srgb, var(--gold) 12%, var(--line)); border-radius: var(--radius-medium); background: var(--glass); box-shadow: inset 0 1px rgb(255 255 255 / 7%), var(--shadow-soft); -webkit-backdrop-filter: blur(20px) saturate(1.16); backdrop-filter: blur(20px) saturate(1.16); } .pane-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; } .pane-heading h2 { margin: 0.12rem 0 0; font-size: 1.12rem; letter-spacing: -0.02em; } .pane-heading > span { padding: 0.3rem 0.55rem; border-radius: 2rem; background: var(--material-deep); color: var(--text-muted); font-size: 0.7rem; font-weight: 680; } .source-list { display: grid; gap: 0; border-top: 1px solid var(--line); } .source-card { padding: 0.72rem 0.2rem; border-bottom: 1px solid var(--line); } .source-card > div > span:last-child { color: var(--text-faint); font-size: 0.68rem; } .source-card h3 { margin: 0.42rem 0 0.12rem; font-size: 0.88rem; line-height: 1.25; overflow-wrap: anywhere; } .source-card p { margin: 0; color: var(--text-muted); font-size: 0.7rem; } .reserve-box { margin-top: 0.65rem; padding: 0.7rem; border: 1px dashed color-mix(in srgb, var(--gold) 48%, var(--line)); border-radius: 0.9rem; background: color-mix(in srgb, var(--gold) 7%, transparent); } .reserve-box > div { display: flex; align-items: center; gap: 0.65rem; } .reserve-box > div > span { color: var(--gold); font-size: 1.2rem; } .reserve-box div div { display: grid; } .reserve-box strong { font-size: 0.78rem; } .reserve-box small { color: var(--text-muted); font-size: 0.67rem; } .reserve-box p { margin: 0.65rem 0 0; color: var(--text-muted); font-size: 0.7rem; } .run-list { display: grid; gap: 0.5rem; } .run-section { padding: 0.78rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--material-inset); } .run-section > header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; } .run-section > header > strong { color: var(--text-muted); font-size: 0.72rem; } .run-section h3 { margin: 0.13rem 0 0; font-size: 0.95rem; letter-spacing: -0.012em; overflow-wrap: anywhere; } .section-number { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 0.65rem; background: color-mix(in srgb, var(--category) 18%, var(--material-deep)); color: var(--text-muted); font-size: 0.67rem; font-weight: 750; } .usage-list { display: grid; gap: 0.42rem; margin: 0.55rem 0 0 2.8rem; } .usage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.55rem 0.65rem; border-radius: 0.72rem; border: 1px solid transparent; background: var(--material-deep); transition: background-color 140ms ease, border-color 140ms ease; } .usage-row:hover, .usage-row:focus-within { border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); background: color-mix(in srgb, var(--gold) 4%, var(--material-deep)); } .section-drag-handle, .usage-drag-copy { position: relative; } .section-drag-handle { padding-right: 7rem; } .usage-drag-copy { padding-left: 1.2rem; } .usage-drag-copy::before { position: absolute; top: 50%; left: -0.2rem; color: var(--text-faint); font-size: 1rem; line-height: 1; content: '⠿'; transform: translateY(-50%); } .usage-row div { display: grid; min-width: 0; } .usage-row strong { font-size: 0.78rem; overflow-wrap: anywhere; } .usage-row small { color: var(--text-muted); font-size: 0.65rem; } .usage-status { padding: 0.2rem 0.4rem; border-radius: 2rem; color: var(--text-muted); font-size: 0.61rem; font-weight: 690; } .usage-status.current { background: color-mix(in srgb, var(--gold) 12%, var(--panel)); color: var(--gold-strong); } .section-placeholder { margin: 0.5rem 0 0 2.8rem; padding: 0.5rem 0.65rem; border: 1px dashed var(--line-strong); border-radius: 0.7rem; color: var(--text-muted); font-size: 0.7rem; } .live-controller-shell { height: 100vh; height: 100dvh; min-height: 0; margin-left: 0 !important; padding: 0 !important; overflow: hidden; } .live-page { display: grid; position: relative; isolation: isolate; width: 100%; height: 100vh; height: 100dvh; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0.55rem; padding: max(0.65rem, env(safe-area-inset-top)) max(0.65rem, env(safe-area-inset-right)) max(0.65rem, env(safe-area-inset-bottom)) max(0.65rem, env(safe-area-inset-left)); } .live-command-header { display: grid; position: relative; z-index: 60; gap: 0.4rem; min-width: 0; padding: 0.45rem 0.55rem; border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line)); border-radius: 0.9rem; background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(20px) saturate(1.08); } .live-context-row, .live-status-row { display: grid; min-width: 0; align-items: center; } .live-context-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; } .live-status-row { grid-template-columns: minmax(8rem, 1fr) auto auto auto; gap: 0.45rem; padding-top: 0.35rem; border-top: 1px solid var(--line); } .live-output-state, .live-context-summary, .live-next-inline { display: flex; min-width: 0; align-items: center; gap: 0.55rem; } .live-output-state > div { display: grid; min-width: 0; } .live-output-state small, .live-next-inline small, .section-countdown span, .total-countdown span, .total-countdown small { color: var(--text-faint); font-size: 0.59rem; font-weight: 720; letter-spacing: 0.06em; text-transform: uppercase; } .timer-label { display: flex; align-items: center; justify-content: center; gap: 0.25rem; } .live-output-state strong { overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; } .live-context-summary { gap: 0.45rem; } .live-context-title { display: block; min-width: 0; max-width: min(34rem, 42vw); padding: 0.28rem 0.34rem; border: 0; border-radius: 0.42rem; background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 760; text-align: left; } .live-context-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-context-title:hover, .live-context-title:focus-visible, .live-context-title.expanded { background: var(--panel-soft); } .live-context-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .live-context-title.expanded span { overflow: visible; white-space: normal; } .live-next-inline { flex: 1 1 20rem; gap: 0.2rem; padding-left: 0.45rem; border-left: 1px solid var(--line); } .live-next-inline small { flex: 0 0 auto; letter-spacing: 0; text-transform: none; } .live-next-inline .live-context-title { flex: 1 1 auto; font-size: 0.7rem; } .live-pulse { width: 0.48rem; height: 0.48rem; flex: 0 0 auto; border-radius: 50%; background: #d65c55; box-shadow: 0 0 0 0.25rem color-mix(in srgb, #d65c55 15%, transparent); } .live-pulse.paused { background: #d69b3e; box-shadow: 0 0 0 0.25rem color-mix(in srgb, #d69b3e 15%, transparent); } .section-countdown, .total-countdown { display: grid; min-width: 6.8rem; gap: 0.08rem; padding: 0.38rem 0.55rem; border: 1px solid var(--line); border-radius: 0.65rem; background: var(--panel-soft); text-align: center; } .section-timer-control, .total-timer-control { display: flex; align-items: stretch; gap: 0.3rem; } .section-timer-control > form, .total-timer-control > form { display: flex; } .timer-reset-menu { position: relative; } .timer-reset-menu > summary { display: grid; width: 1.65rem; height: 100%; min-height: 2rem; place-items: center; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--panel-soft); color: var(--text-muted); cursor: pointer; list-style: none; } .timer-reset-menu > summary::-webkit-details-marker { display: none; } .timer-reset-menu > form { position: absolute; z-index: 220; top: calc(100% + 0.35rem); right: 0; width: max-content; padding: 0.4rem; border: 1px solid var(--line-strong); border-radius: 0.65rem; background: var(--glass-strong); box-shadow: var(--shadow); backdrop-filter: blur(18px); } .timer-reset-menu > form button { font-size: 0.65rem; } .live-timer-toggle { display: grid; width: 2.15rem; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 0.65rem; background: color-mix(in srgb, #d65c55 12%, var(--panel-soft)); color: #d65c55; cursor: pointer; font-size: 0.85rem; } .live-timer-toggle.paused { background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft)); color: var(--accent-strong); } .live-timer-toggle:hover, .live-timer-toggle:focus-visible { border-color: currentColor; } .total-countdown { color: var(--text); cursor: pointer; font: inherit; } .total-countdown:hover, .total-countdown:focus-visible { border-color: var(--gold); } .section-countdown strong, .total-countdown strong { font-size: 0.78rem; font-variant-numeric: tabular-nums; } .total-countdown small { color: var(--gold-strong); font-size: 0.5rem; letter-spacing: 0; text-transform: none; } .section-countdown.warning { border-color: #f3ba63; color: #b87600; } .section-countdown.overrun { border-color: #ff776d; color: #d24d45; } .live-output-state > .live-output-icon { display: grid; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; place-items: center; border-radius: 0.45rem; background: var(--panel-soft); color: var(--text-faint); } .live-output-control.active .live-output-icon { background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft)); color: var(--accent-strong); } .live-output-control { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 0.55rem; } .live-output-control .live-output-state { min-width: 0; } .live-output-control form { display: flex; flex: 0 0 auto; } .live-output-control button { padding: 0.32rem 0.48rem; font-size: 0.62rem; } .live-run-button { display: flex; min-height: 2rem; align-items: center; gap: 0.38rem; padding: 0.35rem 0.55rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--panel-soft); color: var(--text); cursor: pointer; font-size: 0.67rem; font-weight: 740; } .live-run-button:hover, .live-run-button.active { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--panel-soft)); color: var(--accent-strong); } .live-run-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .live-run-button .app-icon:last-child { transition: transform 140ms ease; } .live-run-button.active .app-icon:last-child { transform: rotate(180deg); } .live-menu-trigger { display: flex; width: fit-content; align-items: center; gap: 0.32rem; padding: 0.48rem 0.65rem; border: 1px solid var(--line); border-radius: 0.65rem; background: var(--panel-soft); cursor: pointer; font-size: 0.7rem; font-weight: 750; } .live-menu-trigger:hover, .live-menu-trigger[aria-expanded='true'] { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--panel-soft)); } .live-menu-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .live-menu-popover { position: fixed; z-index: 200; top: max(3.5rem, calc(env(safe-area-inset-top) + 3rem)); right: max(0.65rem, env(safe-area-inset-right)); display: grid; width: min(22rem, calc(100vw - 1.3rem)); max-height: calc(100dvh - 4rem - env(safe-area-inset-top)); overflow-y: auto; padding: 0.7rem; border: 1px solid var(--line-strong); border-radius: 0.8rem; background: var(--glass-strong); box-shadow: var(--shadow-large); backdrop-filter: blur(24px); overscroll-behavior: contain; } .live-menu-show small, .live-menu-show strong { display: block; } .live-menu-show small { color: var(--text-faint); font-size: 0.6rem; font-weight: 720; letter-spacing: 0.07em; text-transform: uppercase; } .live-menu-popover .live-menu-show > strong { margin-top: 0.15rem; color: var(--text); font-size: 0.78rem; letter-spacing: normal; overflow-wrap: anywhere; text-transform: none; } .live-menu-popover section { display: grid; gap: 0.4rem; padding: 0.6rem; } .live-menu-popover section + section { border-top: 1px solid var(--line); } .live-menu-popover section > strong { color: var(--text-faint); font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; } .live-menu-show-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem; } .live-menu-show-heading > span:first-child { min-width: 0; } .live-show-state { flex: 0 0 auto; padding: 0.25rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--success) 14%, var(--panel)); color: var(--success); font-size: 0.58rem; font-weight: 780; } .live-show-state.paused { background: color-mix(in srgb, var(--warning) 14%, var(--panel)); color: var(--warning); } .live-menu-hint { margin: 0; color: var(--text-faint); font-size: 0.65rem; } .live-view-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .live-view-controls .text-button, .live-view-controls .theme-toggle { min-height: 2.35rem; font-size: 0.65rem; } .live-output-settings > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.45rem; cursor: pointer; list-style: none; } .live-output-settings > summary::-webkit-details-marker { display: none; } .live-output-settings > summary > span { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 750; } .live-output-settings > summary > small { color: var(--text-faint); font-size: 0.58rem; } .live-output-settings > summary > .app-icon { transition: transform 140ms ease; } .live-output-settings[open] > summary > .app-icon { transform: rotate(90deg); } .live-output-settings-body { display: grid; gap: 0.4rem; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--line); } .live-output-settings-body p { margin: 0 0 0.15rem; color: var(--text-faint); font-size: 0.62rem; line-height: 1.4; } .live-menu-navigation { display: grid; gap: 0.2rem; padding: 0.7rem 0.6rem 0.55rem; border-top: 1px solid var(--line); } .live-menu-navigation a { display: flex; align-items: center; gap: 0.4rem; } .live-menu-navigation small { color: var(--text-faint); font-size: 0.58rem; } .live-menu-popover a { font-size: 0.72rem; font-weight: 700; } .font-control { display: flex; width: fit-content; padding: 0.18rem; border: 1px solid var(--line); border-radius: 0.65rem; background: var(--panel); } .font-control button { width: 2.25rem; height: 2rem; border: 0; border-radius: 0.5rem; background: transparent; cursor: pointer; font-size: 0.75rem; font-weight: 700; } .font-control button:hover { background: var(--panel-soft); } .live-message { margin: 0; padding: 0.45rem 0.65rem; font-size: 0.7rem; } .live-messages { display: grid; gap: 0.35rem; } .live-messages:empty { display: none; } .live-workspace { display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: 0.65rem; } .live-page.without-rail .live-workspace { grid-template-columns: minmax(0, 1fr); } .live-page.without-rail .live-rail { display: none; } .live-current { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(20px) saturate(1.08); } .live-current-scroll { height: 100%; overflow-y: auto; padding: clamp(1rem, 2.2vw, 2rem); overscroll-behavior: contain; scrollbar-gutter: stable; } .live-piece-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.35rem 0.65rem; padding-bottom: 0.5rem; } .live-piece-position { color: var(--accent); font-size: 0.65rem; font-weight: 750; letter-spacing: 0.055em; text-transform: uppercase; white-space: nowrap; } .live-piece-time { color: var(--text-muted); font-size: 0.68rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .live-current h1 { min-width: 0; max-width: none; margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.9rem); font-weight: 690; letter-spacing: -0.035em; line-height: 1.08; overflow-wrap: anywhere; } .live-script-section { max-width: 58rem; padding: 0.75rem 0; border-top: 1px solid var(--line); } .live-script-section > span { display: block; margin-bottom: 0.45rem; color: var(--accent); font-size: 0.64rem; font-weight: 780; letter-spacing: 0.08em; text-transform: uppercase; } .prompter-copy, .live-script-section .live-markdown { max-width: 45ch; font-family: ui-serif, Georgia, serif; font-size: var(--prompt-size); line-height: 1.47; } .moderation-card .live-markdown { font-family: inherit; font-size: max(1rem, calc(var(--prompt-size) * 0.82)); line-height: 1.5; } .transition-card { border-top-color: color-mix(in srgb, var(--gold) 50%, var(--line)); } .live-markdown > :first-child, .prompter-copy > :first-child { margin-top: 0; } .live-markdown > :last-child, .prompter-copy > :last-child { margin-bottom: 0; } .live-support-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.45rem; padding-top: 0.9rem; border-top: 1px solid var(--line); } .research-details, .live-materials { min-width: min(100%, 15rem); max-width: min(100%, 34rem); padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 0.65rem; background: color-mix(in srgb, var(--panel-soft) 76%, transparent); } .research-details summary, .live-materials summary { cursor: pointer; font-size: 0.7rem; font-weight: 740; } .research-details .live-markdown, .live-materials > :not(summary) { margin-top: 0.65rem; } .research-details .live-markdown, .live-materials p, .live-materials li { font-size: 0.76rem; line-height: 1.5; } .live-materials ul { display: grid; gap: 0.5rem; padding: 0; list-style: none; } .live-materials li, .live-materials small { display: block; } .live-materials small { color: var(--text-muted); } .live-empty-copy { color: var(--text-muted); } .live-empty { display: grid; place-items: center; padding: 1rem; text-align: center; } .live-empty > div { max-width: 34rem; } .live-empty h1 { margin-inline: auto; } .live-rail { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); padding: 0.65rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px) saturate(1.06); } .live-rail > header, .live-reserve > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; } .live-rail > header > div { display: grid; } .live-rail > header strong { font-size: 0.8rem; } .live-rail > header span { color: var(--text-muted); font-size: 0.62rem; } .live-rail > header > button { display: none; width: 2rem; height: 2rem; place-items: center; padding: 0; } .progress-track { height: 0.22rem; margin: 0.55rem 0; overflow: hidden; border-radius: 1rem; background: var(--panel-soft); } .progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--gold); } .live-run-scroll { min-height: 0; overflow-y: auto; padding-right: 0.15rem; overscroll-behavior: contain; } .rail-section { border-top: 1px solid var(--line); } .rail-section > summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem; padding: 0.55rem 0.25rem; cursor: pointer; list-style: none; } .rail-section > summary > span { padding-top: 0.08rem; color: var(--text-faint); font-size: 0.59rem; font-weight: 760; } .rail-section > summary > div { display: grid; min-width: 0; } .rail-section > summary strong { font-size: 0.7rem; overflow-wrap: anywhere; } .rail-section > summary small { color: var(--text-faint); font-size: 0.58rem; } .rail-section.active > summary { color: var(--gold-strong); } .rail-section-items { display: grid; gap: 0.3rem; padding: 0 0 0.45rem; } .rail-section-items > p { margin: 0 0.25rem 0.35rem; color: var(--text-faint); font-size: 0.64rem; } .live-run-item, .live-reserve-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.3rem; border: 1px solid transparent; border-radius: 0.6rem; background: color-mix(in srgb, var(--panel-soft) 70%, transparent); } .live-run-item.current { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--panel)); } .live-run-item.selected .live-run-select { background: color-mix(in srgb, var(--accent) 8%, transparent); } .live-run-item.presented { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent); } .live-run-item.done { opacity: 0.68; } .live-run-item.skipped { border-style: dashed; opacity: 0.62; } .live-run-item > .live-run-select { min-width: 0; } .live-run-actions, .live-reserve-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.2rem; } .live-run-actions form, .live-reserve-actions form { display: flex; } .live-run-order { position: relative; } .live-run-order > summary, .live-run-actions > form button { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 0.45rem; background: transparent; color: var(--text-muted); cursor: pointer; list-style: none; } .live-run-order > summary:hover, .live-run-order[open] > summary, .live-run-actions > form button:hover { border-color: var(--line); background: var(--panel-soft); color: var(--text); } .live-run-order > div { display: flex; position: absolute; z-index: 10; top: calc(100% + 0.2rem); right: 0; gap: 0.2rem; padding: 0.25rem; border: 1px solid var(--line-strong); border-radius: 0.55rem; background: var(--glass-strong); box-shadow: var(--shadow-soft); } .live-run-order > div button { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; padding: 0; } .live-run-select { display: grid; width: 100%; min-width: 0; padding: 0.45rem 0.5rem; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; } .live-run-select:disabled { cursor: default; opacity: 1; } .live-run-select:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft)); } .live-run-select:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .live-run-select strong, .live-reserve-item strong { font-size: 0.67rem; overflow-wrap: anywhere; } .live-run-select small, .live-reserve-item small { color: var(--text-faint); font-size: 0.56rem; } .live-run-actions { margin-right: 0.28rem; } .live-reserve { margin-top: 0.45rem; border-top: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line)); } .live-reserve > summary { padding: 0.6rem 0.25rem; cursor: pointer; color: var(--gold-strong); font-size: 0.68rem; font-weight: 760; list-style: none; } .live-reserve > div { display: grid; gap: 0.3rem; padding-bottom: 0.35rem; } .live-reserve-item { padding: 0.4rem 0.5rem; } .live-reserve-item > div { display: grid; min-width: 0; } .live-reserve-item > form { display: flex; } .live-reserve-actions { min-width: 0; } .live-reserve-item > form button { font-size: 0.6rem; } .live-reserve p { margin: 0.4rem; color: var(--text-muted); font-size: 0.64rem; } .live-rail-backdrop { display: none; } .live-action-bar { display: flex; min-width: 0; align-items: center; justify-content: flex-end; padding: 0.4rem 0.55rem; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: 0.9rem; background: var(--glass-strong); box-shadow: var(--shadow-soft); backdrop-filter: blur(22px) saturate(1.08); } .live-footer-actions { display: grid; width: min(100%, 42rem); align-items: center; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: end; gap: 0.4rem; } .live-footer-actions form { display: flex; } .live-footer-actions button { min-height: 2.2rem; white-space: nowrap; } .live-finished-label { color: var(--gold-strong); font-size: 0.75rem; } @media (min-width: 46.001rem) and (max-height: 36rem) { .live-page { gap: 0.35rem; padding: max(0.4rem, env(safe-area-inset-top)) max(0.4rem, env(safe-area-inset-right)) max(0.4rem, env(safe-area-inset-bottom)) max(0.4rem, env(safe-area-inset-left)); } .live-command-header, .live-action-bar { padding: 0.4rem 0.55rem; } .section-countdown, .total-countdown { padding: 0.25rem 0.45rem; } .live-workspace { gap: 0.45rem; } .live-current-scroll { padding: clamp(0.75rem, 1.7vw, 1.25rem); } .live-piece-heading { padding-bottom: 0.4rem; } .live-script-section { padding: 0.7rem 0; } } @media (max-width: 46rem) { .live-page { gap: 0.4rem; padding: max(0.4rem, env(safe-area-inset-top)) max(0.4rem, env(safe-area-inset-right)) max(0.4rem, env(safe-area-inset-bottom)) max(0.4rem, env(safe-area-inset-left)); } .live-command-header { gap: 0.2rem; padding: 0.32rem 0.4rem; } .live-context-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem; } .live-context-summary { gap: 0.25rem; } .live-context-title { max-width: 34vw; padding-inline: 0.25rem; } .live-next-inline { gap: 0.12rem; padding-left: 0.25rem; } .live-status-row { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 0.3rem; padding-top: 0.2rem; } .live-output-state strong { max-width: 8rem; } .live-output-control { gap: 0.3rem; } .live-output-control button { padding-inline: 0.35rem; } .section-countdown, .total-countdown { min-width: 4.8rem; padding: 0.28rem 0.4rem; } .live-run-button { padding-inline: 0.45rem; } .live-workspace, .live-page.without-rail .live-workspace { grid-template-columns: minmax(0, 1fr); } .live-page.without-rail .live-rail, .live-rail { display: grid; position: fixed; z-index: 80; inset: max(0.4rem, env(safe-area-inset-top)) max(0.4rem, env(safe-area-inset-right)) max(0.4rem, env(safe-area-inset-bottom)) auto; width: min(22rem, calc(100% - 0.8rem - env(safe-area-inset-left))); transform: translateX(calc(100% + 1rem)); visibility: hidden; transition: transform 160ms ease, visibility 0s linear 160ms; } .live-rail.open { transform: translateX(0); visibility: visible; transition-delay: 0s; } .live-rail > header > button { display: grid; } .live-rail-backdrop.visible { display: block; position: fixed; z-index: 70; inset: 0; border: 0; background: color-mix(in srgb, var(--bg) 56%, transparent); backdrop-filter: blur(3px); } .live-current-scroll { padding: 0.9rem; } .live-current h1 { font-size: clamp(1.15rem, 5.5vw, 1.65rem); } .live-piece-heading { min-width: 0; gap: 0.3rem 0.45rem; } .live-piece-time { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; } .live-support-actions { display: grid; } .research-details, .live-materials { width: 100%; min-width: 0; } .live-action-bar { padding: 0.35rem; } .live-footer-actions { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; gap: 0.3rem; } .live-footer-actions form, .live-footer-actions button { width: 100%; } .live-footer-actions button { min-height: 2.2rem; padding-inline: 0.4rem; white-space: normal; overflow-wrap: anywhere; font-size: 0.64rem; } .live-finished-label { grid-column: 1 / -1; text-align: center; } } @media (max-width: 30rem) { .live-status-row { grid-template-columns: minmax(0, 1fr) auto auto; } .live-output-control { grid-column: 1 / -1; } } @media (max-width: 23rem) { .live-context-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); } .live-context-title { max-width: none; } .live-next-inline { grid-column: 2; padding-left: 0; border-left: 0; } .live-status-row { grid-template-columns: minmax(0, 1fr) auto; } .live-output-control { grid-column: 1 / -1; } .live-footer-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .heinzlive-output { min-height: 100vh; padding: clamp(2rem, 6vw, 6rem); background: radial-gradient(circle at 12% 15%, rgb(103 221 232 / 12%), transparent 32rem), #0b1220; color: #fff7e8; font-family: Inter, ui-sans-serif, system-ui, sans-serif; } .output-connection { position: fixed; top: 1rem; right: 1rem; display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.65rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 2rem; background: rgb(11 18 32 / 78%); color: rgb(255 247 232 / 68%); font-size: 0.68rem; backdrop-filter: blur(10px); } .output-connection span { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #67dde8; } .output-connection.problem { color: #ffd0cb; } .output-connection.problem span { background: #ff776d; } .output-content { display: grid; max-width: 88rem; min-height: calc(100vh - clamp(4rem, 12vw, 12rem)); align-content: center; margin: 0 auto; } .output-kicker, .output-sources > span { color: #67dde8; font-size: clamp(0.68rem, 1.2vw, 0.9rem); font-weight: 760; letter-spacing: 0.14em; text-transform: uppercase; } .output-topics { max-width: 100%; margin: 0 0 0.55rem; overflow-wrap: anywhere; color: #f3ba63; font-size: clamp(0.72rem, 1.4vw, 1rem); font-weight: 800; letter-spacing: 0.09em; line-height: 1.35; text-transform: uppercase; } .output-content h1, .output-idle h1 { max-width: 16ch; margin: 0.45rem 0 1.5rem; font-size: clamp(2.8rem, 8vw, 8rem); letter-spacing: -0.055em; line-height: 0.94; } .output-copy { max-width: 44ch; font-family: ui-serif, Georgia, serif; font-size: clamp(1.4rem, 2.8vw, 2.7rem); line-height: 1.35; } .output-copy a, .output-sources a { color: #e7b957; } .output-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem; margin-top: 2rem; } .output-images img { width: 100%; max-height: 48vh; object-fit: contain; border-radius: 1.2rem; background: rgb(255 255 255 / 5%); } .output-sources { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 14%); } .output-sources a { font-size: 0.85rem; } .output-link-card { grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); } .output-link-image { display: grid; min-height: 20rem; place-items: center; border-radius: 1.4rem; background: rgb(255 255 255 / 5%); overflow: hidden; } .output-link-image img { width: 100%; max-height: 68vh; object-fit: contain; } .output-link-copy h1, .output-video h1 { max-width: 24ch; font-size: clamp(2rem, 4.5vw, 5rem); line-height: 1; } .output-link-copy > p:not(.output-kicker) { max-width: 38ch; color: rgb(255 247 232 / 78%); font-size: clamp(1.1rem, 2vw, 1.65rem); line-height: 1.45; } .output-link-copy a, .output-fallback a, .output-video-source a { display: inline-flex; margin-top: 1rem; color: #e7b957; font-weight: 740; } .output-video { grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; gap: 1rem; } .output-video header { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; } .output-video header h1 { margin: 0; } .output-player { display: grid; min-height: 0; place-items: center; } .output-player iframe { width: min(100%, calc((100vh - 13rem) * 16 / 9)); aspect-ratio: 16 / 9; border: 0; border-radius: 1rem; background: #000; } .output-video.portrait .output-player iframe { width: min(100%, calc((100vh - 13rem) * 9 / 16)); aspect-ratio: 9 / 16; } .output-fallback { display: grid; min-height: min(55vh, 32rem); place-content: center; padding: 2rem; border: 1px solid rgb(255 255 255 / 14%); border-radius: 1.2rem; background: rgb(255 255 255 / 5%); text-align: center; } .presentation-test-status { position: fixed; z-index: 2; top: 1rem; right: 1rem; padding: 0.45rem 0.7rem; border: 1px solid rgb(255 255 255 / 16%); border-radius: 2rem; background: rgb(11 18 32 / 82%); color: #67dde8; font-size: 0.7rem; font-weight: 750; } .output-idle { display: grid; min-height: calc(100vh - clamp(4rem, 12vw, 12rem)); place-content: center; text-align: center; } .output-idle .brand-mark { margin: 0 auto 1.5rem; transform: scale(1.5); } .output-idle h1 { max-width: 18ch; font-size: clamp(2.4rem, 6vw, 5.5rem); } .output-idle p { margin: 0; color: rgb(255 247 232 / 62%); font-size: clamp(0.9rem, 1.8vw, 1.3rem); } @media (max-width: 52rem) { .rss-entry-list { grid-template-columns: 1fr; } .rss-selection-actions { align-items: stretch; flex-direction: column-reverse; } .rss-selection-actions button { width: 100%; } .catalog-setting-row { grid-template-columns: minmax(0, 1fr) auto; } .heinzlive-output { padding: 1.2rem; } .output-link-card { grid-template-columns: 1fr; align-content: center; gap: 1.25rem; } .output-link-image { min-height: 12rem; } .output-link-image img { max-height: 40vh; } .output-video { min-height: calc(100dvh - 2.4rem); } .output-video header { align-items: flex-start; flex-direction: column; gap: 0; } .output-player iframe { width: 100%; } } .dashboard-page { max-width: 90rem; } .dashboard-heading, .dashboard-quick-actions, .dashboard-next-stream > header, .dashboard-pieces > header, .dashboard-side-stack section > header, .dashboard-stream-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .dashboard-heading { margin-bottom: 1rem; } .dashboard-heading h1, .dashboard-next-stream h2, .dashboard-pieces h2, .dashboard-side-stack h2 { margin: 0; } .dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17rem, 0.75fr); gap: 1rem; } .dashboard-next-stream, .dashboard-side-stack section, .dashboard-pieces { padding: clamp(1rem, 2vw, 1.4rem); border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); border-radius: var(--radius-large); background: color-mix(in srgb, var(--glass) 92%, transparent); box-shadow: inset 0 1px rgb(255 255 255 / 7%); } .dashboard-next-stream > header p { margin: 0.35rem 0 0; color: var(--text-muted); } .dashboard-run-list { display: grid; gap: 0.2rem; margin: 1.2rem 0; } .dashboard-run-section { display: grid; grid-template-columns: 0.28rem minmax(0, 1fr); gap: 0.8rem; padding: 0.72rem 0; border-bottom: 1px solid var(--line); } .run-marker { border-radius: 999px; background: var(--marker); } .dashboard-run-section > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; } .dashboard-run-section p { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: 0.82rem; } .dashboard-run-section small { color: var(--text-faint); } .dashboard-side-stack, .dashboard-mini-list { display: grid; gap: 0.65rem; } .dashboard-side-stack section > header { margin-bottom: 0.8rem; } .dashboard-mini-list a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); } .dashboard-mini-list a > span { display: grid; gap: 0.25rem; } .dashboard-mini-list small { color: var(--text-muted); } .dashboard-pieces { margin-top: 1rem; } .dashboard-pieces > header { margin-bottom: 1rem; } .dashboard-piece-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; } .dashboard-piece-grid a { display: grid; align-content: start; gap: 0.45rem; min-height: 8.5rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel); } .dashboard-piece-grid a:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); } .dashboard-piece-grid p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--text-muted); font-size: 0.82rem; } @media (max-width: 62rem) { .dashboard-grid, .dashboard-piece-grid { grid-template-columns: 1fr; } .dashboard-heading { align-items: flex-start; flex-direction: column; } } @media (max-width: 34rem) { .dashboard-quick-actions, .dashboard-stream-actions { width: 100%; align-items: stretch; flex-direction: column; } } .quiet-panel { border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px) saturate(1.08); } .planned-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; align-items: center; margin-top: 1.25rem; padding: 1rem; text-align: left; } .planned-panel h2 { margin: 0; font-size: 0.98rem; letter-spacing: -0.015em; } .planned-panel > p:last-child { grid-column: 2; margin: 0.18rem 0 0; color: var(--text-muted); font-size: 0.78rem; } .planned-icon { display: grid; grid-row: 1 / span 2; width: 2.35rem; height: 2.35rem; margin: 0; place-items: center; border-radius: 0.7rem; background: var(--accent-soft); color: var(--accent); font-size: 1.15rem; } .settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .taxonomy-panel { padding: 1rem; } .taxonomy-panel h2 { margin: 0.2rem 0 0.7rem; font-size: 0.95rem; } .taxonomy-list { display: flex; flex-wrap: wrap; gap: 0.45rem; } .taxonomy-list span { display: flex; align-items: center; gap: 0.4rem; min-width: 0; padding: 0.32rem 0.55rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--text-muted); font-size: 0.7rem; overflow-wrap: anywhere; } .taxonomy-list i { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--tax-color); } .settings-footnote { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.72rem; } .auth-shell { min-height: 100vh; background: radial-gradient( circle at 12% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 28rem ), var(--bg); } .auth-header { display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; padding: 0.65rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-elevated) 86%, transparent); backdrop-filter: blur(20px); } .auth-header .theme-toggle { width: auto; } .auth-main { display: grid; min-height: calc(100vh - 4.25rem); padding: clamp(1.25rem, 6vw, 4rem) 1rem; place-items: start center; } .auth-card { width: min(100%, 30rem); padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--panel); box-shadow: var(--shadow); } .auth-card h1 { margin: 0.3rem 0 0.5rem; font-size: clamp(1.6rem, 5vw, 2.1rem); letter-spacing: -0.04em; line-height: 1.1; } .auth-card > p:not(.eyebrow), .quiet-copy { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.85rem; } .oauth-consent { margin: clamp(1.25rem, 6vw, 4rem) auto; } .oauth-permission { display: grid; gap: 0.2rem; margin: 1.25rem 0; padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel-soft); } .oauth-permission span, .oauth-redirect { color: var(--text-muted); font-size: 0.8rem; } .oauth-actions { display: flex; justify-content: flex-end; gap: 0.7rem; } .auth-form, .compact-form { display: grid; gap: 0.85rem; } .auth-form label, .compact-form label { display: grid; gap: 0.32rem; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; } .auth-form input, .compact-form input, .compact-form select, .inline-account-form select { width: 100%; min-height: 2.65rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); color: var(--text); } .primary-button, .secondary-button, .logout-button, .mobile-logout, .text-button { border: 0; cursor: pointer; font-weight: 700; } .primary-button { min-height: 2.7rem; padding: 0.6rem 0.9rem; border-radius: var(--radius-small); background: var(--primary); box-shadow: 0 7px 18px color-mix(in srgb, var(--gold) 18%, transparent); color: var(--primary-text); } .primary-button:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 90%, white); box-shadow: 0 10px 24px color-mix(in srgb, var(--gold) 24%, transparent); } .secondary-button, .logout-button { min-height: 2.35rem; padding: 0.48rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: color-mix(in srgb, var(--glass) 72%, transparent); } .secondary-button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--gold) 42%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, var(--glass)); } .primary-button:disabled, .secondary-button:disabled, .text-button:disabled { cursor: not-allowed; opacity: 0.55; } .logout-button { width: 100%; color: var(--text-muted); text-align: left; } .mobile-logout { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: transparent; color: var(--text-muted); } .text-button { padding: 0.25rem; background: transparent; color: var(--accent); font-size: 0.7rem; } .auth-link { display: inline-block; margin-top: 1rem; color: var(--accent); font-size: 0.78rem; font-weight: 700; } .field-hint { margin: -0.35rem 0 0; color: var(--text-faint); font-size: 0.68rem; } .form-message { margin: 0 0 1rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-small); font-size: 0.76rem; } .form-message.error { border-color: color-mix(in srgb, var(--danger) 68%, var(--line)); background: color-mix(in srgb, var(--danger) 13%, var(--panel)); color: var(--text); } .form-message.success { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); background: color-mix(in srgb, var(--success) 10%, var(--panel)); } .account-summary { display: grid; padding: 0 0.7rem; } .account-summary span { font-size: 0.75rem; font-weight: 700; } .account-summary small { color: var(--text-faint); font-size: 0.65rem; } .account-panel, .invite-panel { padding: 1rem; } .account-panel { margin-bottom: 0.75rem; } .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .panel-heading h2, .invite-panel h2, .section-heading { margin: 0.18rem 0 0.7rem; font-size: 1rem; } .mail-mode, .account-status { padding: 0.22rem 0.45rem; border-radius: 2rem; background: var(--accent-soft); color: var(--accent-text); font-size: 0.65rem; font-weight: 700; } .account-status.locked { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); color: var(--danger); } .account-list { display: grid; border-top: 1px solid var(--line); } .account-row { display: grid; grid-template-columns: minmax(10rem, 1fr) auto minmax(11rem, auto) auto; align-items: center; gap: 0.7rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); } .account-row > div, .invitation-list span { display: grid; min-width: 0; } .account-row small, .invitation-list small { color: var(--text-muted); font-size: 0.68rem; overflow-wrap: anywhere; } .inline-account-form { display: flex; align-items: center; gap: 0.35rem; } .inline-account-form select { min-height: 2.2rem; padding-block: 0.35rem; } .management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .invitation-list { display: grid; } .invitation-list > div { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); } .section-heading { margin-top: 1rem; } .editable-taxonomy span { padding-right: 0.25rem; } .editable-taxonomy form { display: inline-flex; } .editable-taxonomy button { display: grid; width: 1.25rem; height: 1.25rem; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-faint); cursor: pointer; } .taxonomy-form { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.75rem; } .taxonomy-form label:first-of-type { min-width: 0; flex: 1; } .taxonomy-form input:not([type='color']) { width: 100%; min-height: 2.25rem; padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 0.55rem; background: var(--field); color: var(--text); } .taxonomy-form input[type='color'] { width: 2.3rem; height: 2.25rem; padding: 0.2rem; border: 1px solid var(--line); border-radius: 0.55rem; background: var(--panel-strong); } .template-picker { position: relative; z-index: 8; } .template-picker summary { display: flex; min-height: 2.5rem; align-items: center; gap: 0.35rem; padding: 0.55rem 0.8rem; border-radius: 0.72rem; background: var(--primary); box-shadow: 0 8px 22px color-mix(in srgb, var(--gold) 20%, transparent); color: var(--primary-text); cursor: pointer; list-style: none; font-size: 0.8rem; font-weight: 720; } .template-picker summary::-webkit-details-marker, .filter-picker summary::-webkit-details-marker, .piece-actions summary::-webkit-details-marker { display: none; } .fundus-heading-actions { display: flex; align-items: center; gap: 0.55rem; } .template-popover { position: absolute; top: calc(100% + 0.5rem); right: 0; width: min(42rem, calc(100vw - var(--sidebar-width) - 4rem)); padding: 0.7rem; border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); border-radius: var(--radius-medium); background: var(--glass-strong); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(22px) saturate(1.18); backdrop-filter: blur(22px) saturate(1.18); } .template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .template-management { margin-top: 0.6rem; } .template-picker .template-management > summary { min-height: auto; padding: 0.35rem 0; background: transparent; box-shadow: none; color: var(--text-muted); } .template-management form { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid var(--line); } .template-grid button { display: grid; width: 100%; min-height: 5rem; gap: 0.2rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); color: var(--text); cursor: pointer; text-align: left; } .template-grid button span { color: var(--text-muted); font-size: 0.7rem; line-height: 1.35; } .library-filters { position: relative; z-index: 6; margin-bottom: 0.85rem; } .fundus-search-row { display: flex; align-items: center; gap: 0.55rem; } .fundus-search-row .search-field { width: min(100%, 34rem); } .filter-picker { position: relative; } .filter-picker summary { display: flex; min-height: 2.5rem; align-items: center; gap: 0.4rem; padding: 0.45rem 0.72rem; border: 1px solid var(--line); border-radius: 0.72rem; background: var(--glass); color: var(--text-muted); cursor: pointer; list-style: none; font-size: 0.75rem; font-weight: 700; white-space: nowrap; } .filter-picker[open] summary { border-color: color-mix(in srgb, var(--gold) 46%, var(--line)); color: var(--text); } .filter-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; display: grid; width: min(38rem, calc(100vw - var(--sidebar-width) - 4rem)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; padding: 0.8rem; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: var(--radius-medium); background: var(--glass-strong); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(22px) saturate(1.18); backdrop-filter: blur(22px) saturate(1.18); } .filter-panel > label { display: grid; gap: 0.2rem; color: var(--text-muted); font-size: 0.62rem; font-weight: 700; } .filter-panel select { min-width: 0; height: 2.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 0.7rem; background: var(--field); color: var(--text); } .filter-checkbox { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; margin: -0.35rem 0 0.75rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 680; cursor: pointer; } .filter-checkbox input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); } .library-filter-options { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; } .library-filter-options .filter-checkbox { margin: 0; } .filter-actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; gap: 0.45rem; padding-top: 0.65rem; border-top: 1px solid var(--line); } .piece-usage-history { margin-top: 0.35rem; color: var(--text-muted); font-size: 0.65rem; } .piece-usage-history p { margin: 0; } .piece-usage-history a { color: var(--accent); font-weight: 700; } .piece-usage-history p span { margin-left: 0.3rem; color: var(--text-faint); } .piece-usage-history details { margin-top: 0.25rem; } .piece-usage-history summary { width: fit-content; cursor: pointer; font-weight: 680; } .piece-usage-history ul { display: grid; gap: 0.2rem; margin: 0.3rem 0 0; padding-left: 1rem; } .piece-usage-history li a { margin-left: 0.35rem; } .text-link { color: var(--accent); font-size: 0.72rem; font-weight: 720; } .piece-card { position: relative; grid-template-columns: auto minmax(0, 1.65fr) minmax(8rem, 0.85fr) minmax(9rem, auto) auto; } .piece-favorite-form { position: absolute; top: 0.35rem; left: 0.35rem; z-index: 3; } .piece-favorite { display: grid; width: 1.8rem; height: 1.8rem; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--glass-strong); color: var(--text-faint); font-size: 1rem; line-height: 1; cursor: pointer; } .piece-favorite.active, .piece-favorite:hover, .piece-favorite:focus-visible { border-color: #f3ba63; color: #f3ba63; } .piece-editor-kicker { display: flex; align-items: center; gap: 0.65rem; } .piece-card:has(.piece-actions[open]) { z-index: 5; } .piece-thumbnail { width: 3.8rem; height: 3.8rem; border-radius: 0.72rem; object-fit: cover; } .piece-thumbnail-placeholder { display: grid; place-items: center; background: var(--panel-soft); color: var(--text-faint); border: 1px solid var(--line); } .piece-thumbnail-placeholder svg { width: 1.35rem; height: 1.35rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; } .piece-primary h2 a:hover, .piece-card:focus-within .piece-primary h2 a { color: var(--accent); } .piece-primary h2 a::after { position: absolute; inset: 0; content: ''; } .piece-card :is(a, button, input, summary) { position: relative; z-index: 2; } .piece-actions { position: relative; z-index: 4; } .piece-actions summary { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid var(--line); border-radius: 0.68rem; background: var(--glass-strong); color: var(--text-muted); cursor: pointer; list-style: none; font-size: 0.65rem; letter-spacing: 0.08em; } .piece-actions[open] summary { border-color: color-mix(in srgb, var(--gold) 46%, var(--line)); color: var(--text); } .piece-actions-popover { position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 5; display: grid; min-width: 9.5rem; gap: 0.15rem; padding: 0.35rem; border: 1px solid var(--line); border-radius: 0.72rem; background: var(--glass-strong); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); } .piece-actions-popover button { width: 100%; justify-content: flex-start; padding: 0.5rem 0.6rem; } .danger-text { color: var(--danger) !important; } .capture-panel { padding: clamp(1rem, 2vw, 1.35rem); border-color: color-mix(in srgb, var(--gold) 18%, var(--line)); } .capture-panel h2, .inbox-list h2 { margin: 0.18rem 0 0.8rem; font-size: 1rem; } .capture-form, .upload-form { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) auto; align-items: end; gap: 0.65rem; } .capture-form label, .upload-form label { display: grid; gap: 0.25rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; } .capture-form label span { color: var(--text-faint); font-weight: 500; } .capture-form input, .upload-form input { width: 100%; min-height: 2.6rem; padding: 0.5rem 0.65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); color: var(--text); } .inbox-list { display: grid; gap: 0.45rem; margin-top: 1rem; } .inbox-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0.9rem; border: 1px solid transparent; border-radius: var(--radius-small); background: color-mix(in srgb, var(--glass) 68%, transparent); font-size: 0.76rem; transition: background-color 140ms ease, border-color 140ms ease; } .inbox-item:hover, .inbox-item:focus-visible { border-color: var(--line); background: var(--glass-strong); } .inbox-item > span:first-child { display: grid; } .inbox-item small { color: var(--text-muted); } .inbox-item > span:last-child { color: var(--accent); font-weight: 720; } .archive-list { display: grid; gap: 0.65rem; } .archive-list article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel); } .archive-list h2 { margin: 0; font-size: 0.92rem; } .archive-list p { margin: 0.15rem 0 0; color: var(--text-muted); font-size: 0.74rem; } .editor-page { max-width: 82rem; } .editor-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .editor-header h1 { margin: 0.25rem 0 0; font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -0.035em; } .back-link { color: var(--text-muted); font-size: 0.72rem; font-weight: 700; } .save-indicator { display: flex; align-items: center; gap: 0.45rem; color: var(--text-muted); font-size: 0.72rem; } .save-indicator i { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--accent); } .save-indicator.problem, .editor-savebar .problem { color: var(--danger); } .save-indicator.problem i { background: var(--danger); } .piece-editor { display: grid; gap: 0.75rem; } .editor-section { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--panel); } .section-title { margin-bottom: 0.8rem; } .section-title h2 { margin: 0.15rem 0 0; font-size: 1rem; } .section-title small { color: var(--text-muted); font-size: 0.68rem; } .split-section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .editor-fields, .markdown-grid { display: grid; gap: 0.65rem; } .two-columns, .markdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wide-field { grid-column: 1 / -1; } .presentation-mode-picker { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.85rem; } .presentation-mode-picker label { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--panel-soft); font-size: 0.74rem; font-weight: 700; } .presentation-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.8rem; } .presentation-settings > label, .presentation-text-field { display: grid; gap: 0.35rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; } .presentation-preview-actions { display: flex; align-items: center; gap: 0.75rem; } .presentation-preview-actions small, .presentation-source-summary small { color: var(--text-faint); font-size: 0.66rem; } .presentation-source-summary { display: grid; gap: 0.2rem; padding: 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); } .presentation-source-summary span { color: var(--text-muted); font-size: 0.68rem; } .presentation-source-summary small { overflow-wrap: anywhere; } .editor-fields label, .markdown-grid > label, .source-row label { display: grid; min-width: 0; gap: 0.25rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; } .editor-fields input, .editor-fields select, .editor-fields textarea, .markdown-grid textarea, .source-row input { width: 100%; min-width: 0; padding: 0.55rem 0.65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); color: var(--text); } .editor-fields input, .editor-fields select, .source-row input { min-height: 2.6rem; } .editor-fields textarea, .markdown-grid textarea { resize: vertical; } .taxonomy-editor fieldset { margin: 0 0 0.75rem; padding: 0; border: 0; } .taxonomy-editor legend { margin-bottom: 0.4rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; } .choice-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; } .choice-grid label { display: flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.55rem; border: 1px solid var(--line); border-radius: 2rem; font-size: 0.7rem; } .choice-grid i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--choice-color); } .private-field { padding: 0.65rem; border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line)); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--gold) 6%, var(--panel)); } .markdown-preview { min-height: 3.2rem; padding: 0.65rem; border: 1px dashed var(--line); border-radius: var(--radius-small); color: var(--text-muted); font-size: 0.76rem; font-weight: 400; line-height: 1.55; overflow-wrap: anywhere; } .markdown-preview > :first-child { margin-top: 0; } .markdown-preview > :last-child { margin-bottom: 0; } .markdown-preview a { color: var(--accent); text-decoration: underline; } .markdown-preview pre { overflow-x: auto; padding: 0.5rem; border-radius: 0.4rem; background: var(--panel-soft); } .source-list { display: grid; gap: 0.55rem; } .source-row { display: grid; grid-template-columns: minmax(8rem, 0.65fr) minmax(14rem, 1.5fr) minmax(8rem, 0.6fr) auto; align-items: end; gap: 0.5rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--line); } .editor-savebar { position: sticky; z-index: 5; bottom: 0.75rem; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--bg-elevated) 92%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px); } .editor-savebar span { color: var(--text-muted); font-size: 0.7rem; } .media-editor { margin-top: 0.75rem; } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem; margin-bottom: 0.75rem; } .media-grid figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel-soft); } .media-grid img { display: block; width: 100%; height: 8rem; object-fit: cover; } .media-grid figcaption { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.45rem; font-size: 0.65rem; } .editor-actions { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; } .worksheet-page { max-width: 94rem; } .worksheet-editor { gap: 1rem; } .worksheet-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; } .worksheet-heading { min-width: 0; flex: 1; } .worksheet-title { display: block; margin-top: 0.3rem; } .worksheet-title textarea { width: 100%; height: 1.2em; padding: 0; resize: none; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-small); outline-offset: 0.3rem; background: var(--field); color: var(--text); font: inherit; font-size: clamp(1.65rem, 3.3vw, 2.8rem); font-weight: 760; letter-spacing: -0.045em; } .editor-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); align-items: start; gap: 1rem; } .editorial-worksheet { display: grid; min-width: 0; gap: 0.8rem; } .source-feature { display: grid; min-height: 8.5rem; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--panel); } .source-feature.has-image { grid-template-columns: minmax(9rem, 0.32fr) minmax(0, 1fr); } .source-feature img { width: 100%; height: 100%; min-height: 8.5rem; object-fit: cover; } .source-feature > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; padding: 1rem 1.15rem; } .source-feature h2, .writing-sheet h2, .context-card h2 { margin: 0.15rem 0 0; font-size: 1rem; } .source-feature p:not(.eyebrow) { margin: 0.3rem 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; } .source-feature small { max-width: 100%; margin-top: 0.2rem; overflow-wrap: anywhere; color: var(--text-faint); font-size: 0.66rem; } .source-feature a, .source-feature .text-button { margin-top: 0.65rem; color: var(--accent); font-size: 0.72rem; font-weight: 750; } .writing-sheet { padding: clamp(1rem, 2vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--panel); } .writing-sheet-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .writing-sheet-heading small, .script-heading > p:last-child { color: var(--text-faint); font-size: 0.67rem; } .editorial-field { padding: 1rem 0; border-bottom: 1px solid var(--line); } .editorial-field.private-field { margin: 0.85rem 0 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line)); background: color-mix(in srgb, var(--gold) 5%, var(--panel)); } .editorial-field > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .editorial-field h3 { margin: 0; font-size: 0.9rem; } .editorial-field header p { margin: 0.18rem 0 0; color: var(--gold-strong); font-size: 0.63rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .editorial-edit-button { flex: 0 0 auto; color: var(--accent); } .editorial-input { display: block; margin-top: 0.65rem; } .editorial-input textarea { width: 100%; min-height: 9rem; padding: 0.8rem; resize: vertical; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); color: var(--text); font: inherit; font-size: 0.82rem; line-height: 1.6; } .editorial-field > .markdown-preview { min-height: 0; margin-top: 0.55rem; padding: 0; border: 0; color: var(--text); font-size: 0.82rem; } .editorial-empty { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; padding: 0.6rem 0; border: 0; border-radius: 0; background: transparent; color: var(--text-muted); text-align: left; } .editorial-empty:hover { color: var(--text); } .editorial-empty small { flex: 0 0 auto; color: var(--accent); font-size: 0.64rem; font-weight: 750; } .script-heading { padding: 1.4rem 0 0.3rem; } .script-heading > p:last-child { margin: 0.25rem 0 0; } .script-sections .editorial-field:last-child { padding-bottom: 0; border-bottom: 0; } .editor-context { position: sticky; top: 1rem; display: grid; max-height: calc(100vh - 2rem); gap: 0.7rem; overflow-y: auto; overscroll-behavior: contain; } .context-card { padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--panel) 96%, transparent); } .context-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.7rem; } .context-close, .mobile-editor-tools { display: none; } .context-empty, .context-summary-copy, .asset-summary p, .audience-preview p { margin: 0.4rem 0; color: var(--text-muted); font-size: 0.72rem; line-height: 1.5; } .context-wide-action { width: 100%; margin-top: 0.65rem; } .context-card .source-list { gap: 0.7rem; } .context-card .source-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.65fr); gap: 0.4rem; padding: 0 0 0.7rem; } .context-card .source-row label:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .context-card .source-row label:nth-child(3) { grid-column: 2; grid-row: 1; } .context-card .source-row > button { grid-column: 1 / -1; } .context-card .source-row label, .context-fields > label, .presentation-settings > label { display: grid; gap: 0.22rem; color: var(--text-muted); font-size: 0.66rem; font-weight: 700; } .context-card input:not([type='checkbox'], [type='radio']), .context-card select, .context-card textarea { width: 100%; min-width: 0; padding: 0.5rem 0.58rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); color: var(--text); } .classification-summary, .context-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; } .classification-summary > *, .context-tags span { padding: 0.3rem 0.48rem; border-radius: 2rem; background: var(--panel-soft); color: var(--text-muted); font-size: 0.64rem; } .classification-summary strong { background: var(--accent-soft); color: var(--accent); } .context-edit-toggle { margin-top: 0.65rem; color: var(--accent); } .context-fields, .presentation-controls { display: grid; gap: 0.7rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); } .context-fields[hidden], .presentation-controls[hidden] { display: none; } .context-fields fieldset { margin: 0; padding: 0; border: 0; } .context-fields legend { margin-bottom: 0.35rem; color: var(--text-muted); font-size: 0.66rem; font-weight: 700; } .context-fields .choice-grid label { padding: 0.3rem 0.45rem; font-size: 0.64rem; } .audience-preview { padding: 0.7rem; border-radius: var(--radius-small); background: var(--panel-soft); } .audience-preview > span { color: var(--accent); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .audience-preview > strong { display: block; margin-top: 0.3rem; font-size: 0.82rem; } .audience-preview .markdown-preview { min-height: 0; margin-top: 0.4rem; padding: 0; border: 0; font-size: 0.7rem; } .presentation-card-actions { display: grid; gap: 0.45rem; margin-top: 0.65rem; } .presentation-card-actions .text-button { justify-self: start; color: var(--accent); } .presentation-card-actions .secondary-button { width: 100%; text-align: center; } .presentation-controls .editorial-field { padding: 0.2rem 0 0; border: 0; } .presentation-controls .presentation-settings { grid-template-columns: 1fr; margin-top: 0; } .presentation-controls .presentation-preview-actions { align-items: stretch; flex-direction: column; } .asset-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .supporting-editor-section { max-width: calc(100% - 24rem); } .shows-page { max-width: 78rem; } .shows-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } .show-view-toggle { display: flex; padding: 0.2rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--panel-soft); } .show-view-toggle button { display: flex; min-height: 2.2rem; align-items: center; gap: 0.4rem; padding: 0.4rem 0.65rem; border: 0; border-radius: 0.58rem; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.7rem; font-weight: 740; } .show-view-toggle button[aria-pressed='true'] { background: var(--panel); box-shadow: var(--shadow-soft); color: var(--gold-strong); } .show-create-panel, .show-library, .show-settings { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px) saturate(1.08); } .show-create-panel h2, .show-library h2 { margin: 0.15rem 0 0; font-size: 1rem; } .show-create-panel > summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 760; list-style: none; } .show-create-heading { margin-top: 1rem; } .show-create-form { display: grid; grid-template-columns: minmax(12rem, 1.3fr) minmax(11rem, 0.85fr) minmax(10rem, 0.85fr) auto; align-items: end; gap: 0.65rem; margin-top: 0.9rem; } .show-template-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.55rem; padding: 0; border: 0; } .show-template-grid legend { margin-bottom: 0.35rem; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; } .show-template-grid label { display: grid; position: relative; grid-template-columns: auto auto 1fr; align-items: start; gap: 0.55rem; padding: 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); cursor: pointer; } .show-template-grid label:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); } .show-template-grid span, .show-template-grid small { display: block; } .show-template-grid small { margin-top: 0.15rem; color: var(--text-muted); font-size: 0.64rem; } .show-create-form label, .show-settings-form label, .section-edit-form label, .add-section-form label, .usage-edit-form label, .usage-command-row label { display: grid; min-width: 0; gap: 0.25rem; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; } .show-create-form input, .show-create-form select, .show-settings-form input, .show-settings-form select, .show-settings-form textarea, .section-edit-form input, .section-edit-form select, .add-section-form input, .add-section-form select, .usage-edit-form input, .usage-edit-form textarea, .usage-command-row select, .source-add-form select, .builder-filter input, .builder-filter select, .reserve-usage select { width: 100%; min-width: 0; min-height: 2.45rem; padding: 0.48rem 0.58rem; border: 1px solid var(--line-strong); border-radius: 0.65rem; background: var(--field); color: var(--text); } .template-notes { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.7rem; color: var(--text-faint); font-size: 0.65rem; } .template-notes p { margin: 0; } .show-library { margin-top: 0.8rem; } .show-library > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; } .show-library > header > span { padding: 0.25rem 0.5rem; border-radius: 2rem; background: var(--panel-soft); color: var(--text-muted); font-size: 0.68rem; } .show-card-list { display: grid; gap: 0.5rem; } .preparation-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 0.5rem; } .preparation-list a { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel-soft); } .preparation-copy, .preparation-copy > span:last-child { display: grid; min-width: 0; } .preparation-copy { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem; } .preparation-topics { display: flex; gap: 0.2rem; color: var(--accent-text); } .preparation-list small { overflow: hidden; color: var(--text-muted); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; } .effort { padding: 0.2rem 0.45rem; border-radius: 2rem; background: var(--panel-strong); color: var(--text-muted); font-size: 0.62rem; } .show-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel-soft); } .show-card:hover { border-color: var(--line-strong); background: var(--panel-strong); } .show-card h3 { margin: 0.25rem 0 0.1rem; font-size: 0.92rem; } .show-card p { margin: 0; color: var(--text-muted); font-size: 0.7rem; } .show-state { color: var(--text-muted); font-size: 0.62rem; font-weight: 750; text-transform: uppercase; } .show-state.ready, .show-state.live { color: var(--accent-text); } .show-card-facts { display: flex; align-items: center; gap: 1rem; color: var(--text-muted); font-size: 0.68rem; } .show-card-facts span { display: grid; } .show-card-facts strong { color: var(--text); font-size: 0.78rem; } .show-month-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; } .show-month-toolbar h3 { margin: 0.15rem 0 0; font-size: 1.15rem; } .show-month-navigation { display: flex; align-items: center; gap: 0.3rem; } .show-month-navigation a { display: grid; min-width: 2.2rem; min-height: 2.2rem; place-items: center; padding: 0.35rem 0.55rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--panel-soft); font-size: 0.68rem; font-weight: 730; } .show-calendar-weekdays, .show-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .show-calendar-weekdays { border: 1px solid var(--line); border-bottom: 0; border-radius: 0.8rem 0.8rem 0 0; background: var(--panel-soft); } .show-calendar-weekdays span { padding: 0.45rem; color: var(--text-faint); font-size: 0.62rem; font-weight: 750; text-align: center; } .show-calendar-grid { overflow: hidden; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 0 0 0.8rem 0.8rem; } .show-calendar-day { min-width: 0; min-height: 7.5rem; padding: 0.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel-soft) 75%, transparent); } .show-calendar-day.outside { min-height: 3.25rem; background: color-mix(in srgb, var(--panel-soft) 32%, transparent); color: var(--text-faint); } .show-calendar-day > strong { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; font-size: 0.68rem; } .show-calendar-day.today > strong { background: var(--gold); color: #152238; } .show-calendar-events { display: grid; gap: 0.3rem; margin-top: 0.35rem; } .show-calendar-event { display: grid; min-width: 0; gap: 0.08rem; padding: 0.38rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--panel); } .show-calendar-event:hover { border-color: var(--accent); background: var(--panel-strong); } .show-calendar-event.live, .show-calendar-event.ready { border-left: 0.2rem solid var(--accent); } .show-calendar-event time, .show-calendar-event small { color: var(--text-faint); font-size: 0.54rem; } .show-calendar-event span { font-size: 0.65rem; font-weight: 730; overflow-wrap: anywhere; } .show-calendar-event small { text-transform: uppercase; } .show-agenda { display: none; } .show-undated { margin-top: 0.8rem; } @media (max-width: 52rem) { .shows-heading { align-items: stretch; flex-direction: column; } .show-view-toggle, .show-view-toggle button { width: 100%; } .show-view-toggle button { justify-content: center; } .show-calendar { display: none; } .show-agenda { display: grid; gap: 0.65rem; } .show-agenda-day { display: grid; grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr); gap: 0.65rem; padding: 0.65rem 0; border-top: 1px solid var(--line); } .show-agenda-day h3 { margin: 0; font-size: 0.78rem; text-transform: capitalize; } .show-agenda-day > div { display: grid; gap: 0.35rem; } .show-agenda-event { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; padding: 0.65rem; border: 1px solid var(--line); border-radius: 0.65rem; background: var(--panel-soft); } .show-agenda-event time { color: var(--accent-text); font-size: 0.7rem; font-weight: 740; } .show-agenda-event span, .show-agenda-event small { display: grid; min-width: 0; } .show-agenda-event strong { overflow-wrap: anywhere; } .show-agenda-event small { margin-top: 0.15rem; color: var(--text-faint); font-size: 0.58rem; text-transform: uppercase; } } @media (max-width: 32rem) { .show-month-toolbar { align-items: stretch; flex-direction: column; } .show-month-navigation { justify-content: space-between; } .show-agenda-day { grid-template-columns: minmax(0, 1fr); } } .show-settings { margin-bottom: 0.75rem; } .show-settings > summary, .usage-editor > summary, .section-editor > summary { cursor: pointer; font-size: 0.74rem; font-weight: 750; } .show-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.8rem; } .show-settings-form .wide-field, .usage-edit-form .wide-field { grid-column: 1 / -1; } .show-settings-form small { color: var(--text-faint); font-weight: 500; } .copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.4rem; } .copy-field button, .row-actions > button, .row-actions > form > button { min-width: 2.35rem; min-height: 2.35rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--panel-soft); color: var(--text-muted); cursor: pointer; } .usage-row .row-actions { display: flex; align-items: center; gap: 0.18rem; padding: 0.16rem; border: 1px solid var(--line); border-radius: 0.7rem; background: color-mix(in srgb, var(--gold) 3%, var(--material-deep)); } .row-actions > form > button, .usage-edit-button { border: 0; background: transparent; } .row-actions > form > button:hover:not(:disabled), .usage-edit-button:hover { background: color-mix(in srgb, var(--gold) 10%, var(--panel-soft)); color: var(--gold-strong); } .usage-edit-button { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; padding: 0; border: 0; border-radius: 0.6rem; background: transparent; color: var(--text-muted); cursor: pointer; } .usage-edit-button:hover { background: color-mix(in srgb, var(--gold) 10%, var(--panel-soft)); color: var(--gold-strong); } .piece-editor-route { min-height: calc(100dvh - 2rem); } .piece-editor-dialog { display: none; width: min(76rem, calc(100vw - 2rem)); height: min(54rem, calc(100dvh - 2rem)); max-width: none; max-height: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line-strong)); border-radius: var(--radius-large); background: var(--glass); box-shadow: var(--shadow-large); color: var(--text); -webkit-backdrop-filter: blur(28px) saturate(1.12); backdrop-filter: blur(28px) saturate(1.12); } .piece-editor-dialog[open] { display: grid; } .piece-editor-dialog::backdrop { background: color-mix(in srgb, var(--bg) 46%, transparent); -webkit-backdrop-filter: blur(6px) saturate(0.95); backdrop-filter: blur(6px) saturate(0.95); } .piece-dialog-header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem 0.75rem; border-bottom: 1px solid var(--line); background: var(--glass-chrome); box-shadow: inset 0 1px rgb(255 255 255 / 10%); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.12); } .piece-dialog-heading { min-width: 0; flex: 1; } .piece-dialog-heading > .eyebrow { margin-bottom: 0.18rem; } .piece-dialog-heading > small { display: block; margin-top: 0.25rem; color: var(--text-faint); font-size: 0.65rem; } .piece-dialog-title { display: block; } .piece-dialog-title textarea { width: 100%; min-width: 0; height: 1.55em; padding: 0.16rem 0.45rem; resize: none; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 0.55rem; outline-offset: 0.2rem; background: var(--field); color: var(--text); font: inherit; font-size: clamp(1.25rem, 2.5vw, 1.85rem); font-weight: 760; letter-spacing: -0.035em; } .piece-dialog-tabs { display: flex; min-width: 0; gap: 0.25rem; padding: 0.45rem 1rem; border-bottom: 1px solid var(--line); background: var(--glass-chrome); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.12); } .piece-dialog-tabs button { padding: 0.48rem 0.72rem; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text-muted); font-size: 0.72rem; font-weight: 740; cursor: pointer; } .piece-dialog-tabs button.active { background: color-mix(in srgb, var(--gold) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 48%, transparent); color: var(--text); } .piece-dialog-workspace { min-width: 0; min-height: 0; padding: clamp(0.85rem, 2vw, 1.4rem); overflow: auto; overscroll-behavior: contain; background: var(--material-deep); } .piece-dialog-form { display: block; } .piece-editor-panel { width: min(100%, 62rem); margin: 0 auto; } .piece-editor-panel[hidden] { display: none; } .piece-panel-heading, .piece-subsection-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .piece-panel-heading h2, .piece-panel-heading h3, .piece-subsection-heading h3 { margin: 0.12rem 0 0; font-size: 1.05rem; } .piece-panel-heading small, .piece-subsection-heading small { color: var(--text-faint); font-size: 0.65rem; } .piece-writing-stack { display: grid; gap: 0.8rem; } .piece-writing-stack .markdown-editor-field:first-child { padding-top: 0; } .piece-writing-stack .markdown-editor-field:last-child { border-bottom: 0; } .markdown-editor-field { display: block; padding: 0.75rem 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; } .markdown-editor-field.private-field { padding: 0.85rem; border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); border-radius: var(--radius-medium); background: var(--material-inset); } .markdown-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.45rem; } .markdown-editor-heading > span:first-child { font-size: 0.76rem; font-weight: 760; } .markdown-editor-heading small { margin-left: 0.4rem; color: var(--gold-strong); font-size: 0.58rem; letter-spacing: 0.04em; text-transform: uppercase; } .markdown-toolbar { display: flex; flex-wrap: wrap; gap: 0.2rem; } .markdown-toolbar button { min-width: 1.8rem; padding: 0.22rem 0.4rem; border: 1px solid var(--line); border-radius: 0.45rem; background: var(--material-inset); color: var(--text-muted); font-size: 0.65rem; cursor: pointer; } .markdown-editor-field textarea { display: block; width: 100%; min-height: 5.5rem; padding: 0.75rem 0.8rem; resize: vertical; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); box-shadow: inset 0 1px 2px rgb(0 0 0 / 5%); color: var(--text); font: inherit; font-size: 0.88rem; line-height: 1.55; } .piece-meta-details, .piece-source-editor, .piece-media-panel { margin-top: 0.9rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--material-inset); } .piece-meta-details summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-size: 0.75rem; font-weight: 740; } .piece-meta-details summary small { color: var(--text-faint); font-size: 0.64rem; font-weight: 600; } .piece-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.8rem; } .piece-meta-grid > label, .piece-meta-grid fieldset, .piece-source-editor label, .piece-presentation-controls > label, .piece-presentation-controls .presentation-settings > label { display: grid; gap: 0.25rem; margin: 0; color: var(--text-muted); font-size: 0.66rem; font-weight: 700; } .piece-meta-grid input:not([type='checkbox']), .piece-meta-grid select, .piece-meta-grid textarea, .piece-source-editor input, .piece-presentation-controls input:not([type='radio']), .piece-presentation-controls select, .piece-presentation-controls textarea, .piece-dialog-secondary-actions select { width: 100%; min-width: 0; padding: 0.55rem 0.62rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); color: var(--text); } .piece-meta-grid .wide-field, .piece-meta-grid fieldset { grid-column: 1 / -1; } .piece-meta-grid fieldset { padding: 0; border: 0; } .piece-source-editor .source-row { display: grid; grid-template-columns: minmax(8rem, 0.8fr) minmax(14rem, 1.5fr) minmax(8rem, 0.6fr) auto; align-items: end; gap: 0.5rem; padding: 0.6rem 0; border-top: 1px solid var(--line); } .piece-source-summary { margin-top: 0.9rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--glass) 78%, transparent); } .piece-source-summary strong, .piece-source-summary small { display: block; margin-top: 0.3rem; overflow-wrap: anywhere; } .piece-source-summary small, .piece-source-summary p:not(.eyebrow) { color: var(--text-muted); font-size: 0.7rem; } .piece-presentation-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr); align-items: start; gap: 1rem; } .piece-presentation-controls, .piece-presentation-controls .presentation-settings { display: grid; gap: 0.7rem; } .piece-presentation-preview { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: var(--radius-medium); background: var(--presentation-bg, #0b1220); color: #fff7e8; } .piece-presentation-preview > .output-content { min-height: 20rem; padding: 1rem; } .piece-presentation-preview .output-content h1 { max-width: none; margin: 0.35rem 0 0.75rem; font-size: clamp(1.55rem, 3vw, 2.4rem); line-height: 1; } .piece-presentation-preview .output-copy, .piece-presentation-preview .output-link-copy > p:not(.output-kicker) { font-size: 0.9rem; } .piece-presentation-preview .output-link-card { grid-template-columns: 1fr; gap: 0.8rem; } .piece-presentation-preview .output-link-image { min-height: 10rem; } .piece-presentation-preview .output-sources { margin-top: 1rem; } .piece-presentation-preview > p, .piece-presentation-preview > h4, .piece-presentation-preview > img { margin: 0.8rem; } .piece-presentation-preview > img { max-width: calc(100% - 1.6rem); max-height: 12rem; object-fit: contain; } .preview-markdown-source { white-space: pre-wrap; } .piece-dialog-footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.65rem 1rem; border-top: 1px solid var(--line); background: var(--glass-chrome); box-shadow: inset 0 -1px rgb(255 255 255 / 8%), 0 -10px 30px rgb(0 0 0 / 10%); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.12); } .piece-dialog-secondary-actions, .piece-dialog-primary-action { display: flex; align-items: center; gap: 0.55rem; } .piece-dialog-secondary-actions form { display: flex; align-items: center; gap: 0.3rem; } .template-save-menu { position: relative; } .template-save-menu > summary { cursor: pointer; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; } .template-save-menu > form { position: absolute; z-index: 4; bottom: calc(100% + 0.7rem); left: 0; display: grid; width: min(28rem, calc(100vw - 2rem)); padding: 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-medium); background: var(--glass-strong); box-shadow: var(--shadow); } .template-save-menu label { display: grid; gap: 0.2rem; color: var(--text-muted); font-size: 0.66rem; } .piece-dialog-primary-action span { color: var(--text-muted); font-size: 0.66rem; } .route-editor-error { position: fixed; z-index: 100; top: 1rem; left: 50%; transform: translateX(-50%); } .usage-editor-dialog { width: min(60rem, calc(100vw - 2rem)); max-width: none; max-height: min(52rem, calc(100dvh - 2rem)); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-large); background: var(--bg-elevated); box-shadow: var(--shadow-large); color: var(--text); } .usage-editor-dialog::backdrop { background: color-mix(in srgb, #07110e 62%, transparent); backdrop-filter: blur(6px); } .usage-editor-dialog > header { display: flex; position: sticky; z-index: 2; top: 0; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-elevated) 94%, transparent); backdrop-filter: blur(16px); } .usage-editor-dialog h2, .usage-editor-dialog h3 { margin: 0.12rem 0 0; } .usage-editor-dialog h2 { font-size: 1.2rem; } .usage-editor-dialog h3 { font-size: 0.95rem; } .dialog-close { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel-soft); color: var(--text-muted); font-size: 1.25rem; cursor: pointer; } .usage-dialog-scroll { display: grid; gap: 0.8rem; max-height: calc(100dvh - 7rem); padding: 0.9rem; overflow: auto; } .usage-dialog-message { margin: 0; } .usage-dialog-editor { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); align-items: stretch; gap: 0.8rem; } .usage-dialog-editor > .primary-button { grid-column: 1 / -1; justify-self: end; } .usage-dialog-editor input, .usage-dialog-editor textarea, .usage-dialog-actions select { width: 100%; min-width: 0; padding: 0.6rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 0.7rem; background: var(--field); color: var(--text); } .usage-dialog-actions { display: grid; grid-template-columns: minmax(14rem, 1fr) auto minmax(13rem, auto) auto; align-items: end; gap: 0.65rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel-soft); } .usage-dialog-actions > div { display: grid; gap: 0.3rem; } .usage-dialog-actions small { color: var(--text-faint); font-size: 0.62rem; line-height: 1.35; } .usage-dialog-actions form, .usage-dialog-actions label { display: flex; align-items: end; gap: 0.4rem; } .usage-dialog-actions label { min-width: 9rem; flex-direction: column; align-items: stretch; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; } .row-actions > button:disabled, .row-actions > form > button:disabled { cursor: not-allowed; opacity: 0.35; } .settings-submit { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } .settings-submit span { color: var(--text-muted); font-size: 0.68rem; } .builder-filter { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 0.7fr) auto; gap: 0.35rem; margin-bottom: 0.45rem; } .plan-piece-create { margin-bottom: 0.55rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); } .plan-piece-create > summary { cursor: pointer; font-size: 0.72rem; font-weight: 750; } .plan-piece-create form { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 0.8fr); gap: 0.45rem; margin-top: 0.6rem; } .plan-piece-create label { display: grid; gap: 0.2rem; color: var(--text-muted); font-size: 0.64rem; } .plan-piece-create button { grid-column: 1 / -1; } .drag-remove-target { display: grid; gap: 0.15rem; margin-bottom: 0.55rem; padding: 0.75rem; border: 1px dashed var(--danger); border-radius: var(--radius-small); background: color-mix(in srgb, var(--danger) 9%, var(--panel-soft)); } .drag-remove-target span { color: var(--text-muted); font-size: 0.68rem; } .builder-filter-options { display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; margin-bottom: 0.35rem; } .builder-filter-options .filter-checkbox { margin: 0; } .builder-source-list { display: grid; border-top: 1px solid var(--line); } .builder-source-card { padding: 0.72rem 0.2rem; border-bottom: 1px solid var(--line); transition: opacity 140ms ease, transform 140ms ease; } .source-drag-copy { cursor: grab; } .source-drag-copy:active { cursor: grabbing; } .source-drag-copy > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .source-drag-copy > div:first-child > span:last-child, .builder-source-card p { color: var(--text-muted); font-size: 0.67rem; } .planned-label { display: inline-block; margin-top: 0.35rem; padding: 0.16rem 0.4rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.61rem; font-weight: 760; } .builder-source-card h3 { margin: 0.4rem 0 0.12rem; font-size: 0.86rem; } .builder-source-card p { margin: 0; } .drag-hint { display: block; margin-top: 0.35rem; color: var(--text-faint); font-size: 0.61rem; } .builder-source-card.is-dragging { opacity: 0.45; transform: scale(0.985); } .editable-run-section.is-dragging, .editable-usage.is-dragging, .reserve-usage.is-dragging { opacity: 0.38; } .drag-insert-preview { border: 1px dashed color-mix(in srgb, var(--accent) 68%, var(--line-strong)); background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text-muted); animation: reveal-drop-preview 140ms ease-out; } .drag-insert-preview strong { color: var(--text); } .section-drag-slot, .usage-drag-slot, .reserve-drag-slot { display: grid; } .section-drag-slot { gap: 0.35rem; } .usage-drag-slot, .reserve-drag-slot { gap: 0.42rem; } .section-insert-preview { display: grid; min-height: 4.1rem; align-content: center; gap: 0.15rem; padding: 0.72rem 0.85rem; border-radius: var(--radius-medium); } .section-insert-preview span, .usage-insert-preview small, .reserve-insert-preview small { color: var(--accent-text); font-size: 0.65rem; font-weight: 720; text-transform: uppercase; letter-spacing: 0.04em; } .usage-insert-preview { display: grid; min-height: 3.35rem; align-content: center; gap: 0.08rem; padding: 0.55rem 0.65rem; border-radius: 0.72rem; } .usage-insert-preview strong, .reserve-insert-preview strong { font-size: 0.78rem; } .reserve-insert-preview { display: grid; min-height: 3.35rem; align-content: center; gap: 0.08rem; margin-top: 0.55rem; padding: 0.55rem 0.65rem; border-radius: 0.72rem; } @keyframes reveal-drop-preview { from { opacity: 0; transform: scaleY(0.78); } } .source-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem; margin-top: 0.55rem; } .editable-run-section { position: relative; transition: border-color 140ms ease, background-color 140ms ease, opacity 140ms ease; } .section-drag-handle, .usage-drag-copy { cursor: grab; } .section-drag-handle:active, .usage-drag-copy:active { cursor: grabbing; } .editable-run-section > .row-actions { position: absolute; top: 0.68rem; right: 4.7rem; } .row-actions { display: flex; gap: 0.25rem; } .row-actions > form { display: flex; } .row-actions > button, .row-actions > form > button { min-width: 1.8rem; min-height: 1.8rem; padding: 0; } .editable-usage { grid-template-columns: minmax(0, 1fr) auto; transition: opacity 140ms ease, background-color 140ms ease; } .usage-editor { grid-column: 1 / -1; padding-top: 0.3rem; border-top: 1px solid var(--line); } .usage-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.55rem; } .usage-command-row, .usage-command-row > form, .section-edit-form, .add-section-form { display: flex; align-items: end; gap: 0.45rem; flex-wrap: wrap; } .usage-command-row { justify-content: space-between; margin-top: 0.55rem; } .usage-command-row label, .section-edit-form label, .add-section-form label { flex: 1 1 8rem; } .section-editor { margin: 0.55rem 0 0 2.8rem; } .section-edit-form { margin: 0.55rem 0; } .add-section-form { margin-top: 0.8rem; padding: 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-medium); } .editable-reserve { margin-top: 0.8rem; transition: border-color 140ms ease, background-color 140ms ease, opacity 140ms ease; } .editable-run-section.drop-ready, .editable-reserve.drop-ready { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); } .builder-source-card.is-updating, .editable-run-section.is-updating, .editable-reserve.is-updating, .show-settings.is-updating, .add-section-form.is-updating { opacity: 0.58; pointer-events: none; } .editable-reserve > header > div { display: flex; align-items: center; gap: 0.65rem; } .editable-reserve > header > div > span { color: var(--gold); font-size: 1.2rem; } .editable-reserve > header div div { display: grid; } .reserve-usage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, auto) auto auto; align-items: end; gap: 0.5rem; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); } .reserve-usage > div { display: grid; } .reserve-usage small { color: var(--text-muted); font-size: 0.65rem; } .reserve-usage > form { display: flex; align-items: end; gap: 0.35rem; } .hidden-command-form { display: none; } @media (max-width: 72rem) { .piece-card { grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 0.7fr) auto; } .piece-state { grid-column: 2 / 4; align-items: flex-start; } .source-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .editor-workspace { grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem); } .supporting-editor-section { max-width: calc(100% - 21rem); } .show-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 72rem) { .page-wrap { padding-inline: 2rem; } .mobile-pane-switch { display: flex; width: 100%; margin-bottom: 0.65rem; } .mobile-pane-switch button { flex: 1; } .builder-workspace { display: block; } .builder-pane.mobile-hidden { display: none; } } @media (max-width: 64rem) and (min-width: 52.001rem) { .library-toolbar { align-items: stretch; flex-direction: column; } .library-toolbar .filter-tabs { align-self: flex-start; } } @media (max-width: 52rem) { :root { --mobile-header: 4rem; --mobile-nav: 4.6rem; } .sidebar { display: none; } .mobile-header { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; height: calc(var(--mobile-header) + env(safe-area-inset-top)); align-items: center; justify-content: space-between; padding: env(safe-area-inset-top) calc(0.85rem + env(safe-area-inset-right)) 0 calc(0.45rem + env(safe-area-inset-left)); border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); background: var(--glass); box-shadow: 0 8px 28px rgb(0 0 0 / 12%); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); } .mobile-header .theme-toggle { width: auto; } .mobile-header .theme-toggle span:last-child { display: none; } .mobile-header .theme-toggle { padding: 0.48rem; border: 0; } .mobile-navigation { position: fixed; inset: auto 0 0; z-index: 30; display: grid; height: calc(var(--mobile-nav) + env(safe-area-inset-bottom)); grid-template-columns: repeat(4, 1fr); padding: 0.45rem calc(0.35rem + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(0.35rem + env(safe-area-inset-left)); border-top: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); background: var(--glass); box-shadow: 0 -8px 28px rgb(0 0 0 / 12%); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); } .mobile-navigation:has(a:nth-child(5)) { grid-template-columns: repeat(5, 1fr); } .mobile-navigation:has(a:nth-child(6)) { grid-template-columns: repeat(6, 1fr); } .mobile-navigation a { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; border-radius: 0.65rem; color: var(--text-faint); font-size: clamp(0.54rem, 2.2vw, 0.65rem); font-weight: 620; } .mobile-navigation a.active { background: color-mix(in srgb, var(--gold) 13%, var(--panel)); color: var(--text); } .mobile-navigation a svg { width: 1.25rem; height: 1.25rem; } #main-content { margin-left: 0; padding: calc(var(--mobile-header) + env(safe-area-inset-top)) 0 calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 1rem); } .page-wrap { width: 100%; padding: 1.25rem calc(1rem + env(safe-area-inset-right)) 2rem calc(1rem + env(safe-area-inset-left)); } .page-heading h1 { font-size: 1.75rem; } .template-grid, .two-columns, .markdown-grid, .capture-form, .upload-form, .source-row { grid-template-columns: 1fr; } .show-create-form, .show-settings-form, .usage-edit-form, .usage-dialog-editor, .presentation-settings, .builder-filter { grid-template-columns: 1fr; } .wide-field { grid-column: auto; } .editor-header { align-items: flex-start; flex-direction: column; } .worksheet-header { align-items: flex-start; flex-direction: column; gap: 0.6rem; } .worksheet-title textarea { height: 2.3em; font-size: 1.65rem; line-height: 1.12; } .mobile-editor-tools { position: sticky; top: calc(var(--mobile-header) + 0.45rem); z-index: 12; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; padding: 0.35rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--bg-elevated) 92%, transparent); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); } .mobile-editor-tools button, .mobile-editor-tools a { min-width: 0; padding: 0.55rem 0.3rem; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text-muted); font-size: 0.65rem; font-weight: 750; text-align: center; } .mobile-editor-tools button[aria-expanded='true'] { background: var(--accent-soft); color: var(--accent); } .editor-workspace { display: block; } .source-feature.has-image { grid-template-columns: 6.5rem minmax(0, 1fr); } .source-feature, .source-feature img { min-height: 7.5rem; } .source-feature > div { padding: 0.85rem; } .writing-sheet { margin-top: 0.7rem; padding: 0.9rem; border-radius: var(--radius-medium); } .writing-sheet-heading { align-items: flex-start; flex-direction: column; gap: 0.35rem; } .editorial-field.private-field { padding: 0.75rem; } .editorial-empty { align-items: flex-start; flex-direction: column; gap: 0.2rem; } .editor-context { position: static; max-height: none; overflow: visible; } .editor-context.context-open::before { position: fixed; inset: 0; z-index: 38; background: color-mix(in srgb, var(--text) 28%, transparent); content: ''; } .editor-context .context-card { display: none; } .editor-context .context-card.mobile-active { position: fixed; inset: calc(var(--mobile-header) + 0.5rem) 0.5rem calc(var(--mobile-nav) + 0.5rem); z-index: 40; display: block; overflow-y: auto; padding: 1rem; border-radius: var(--radius-large); background: var(--panel-strong); box-shadow: var(--shadow); overscroll-behavior: contain; } .context-close { display: inline-grid; width: 2rem; height: 2rem; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel-soft); color: var(--text); font-size: 1.2rem; } .supporting-editor-section { max-width: none; scroll-margin-top: calc(var(--mobile-header) + 4.5rem); } .worksheet-editor:has(.editor-context.context-open) .editor-savebar { visibility: hidden; } .editor-section { padding: 0.85rem; border-radius: var(--radius-medium); } .editor-savebar { position: static; justify-content: space-between; } .split-section-title, .archive-list article { align-items: stretch; flex-direction: column; } .editor-actions { align-items: stretch; flex-direction: column; } .editor-actions form, .editor-actions button { width: 100%; } .show-heading, .live-header { align-items: flex-start; flex-direction: column; gap: 0.75rem; } input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea, .icon-picker-popover input[type='search'] { font-size: 1rem; } .icon-picker-popover { display: grid; max-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav) - 1rem); grid-template-rows: auto minmax(0, 1fr) auto; } .icon-picker-grid { min-height: 0; overflow-y: auto; } .usage-editor-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: var(--radius-medium); } .usage-dialog-scroll { max-height: calc(100dvh - 5.5rem); padding: 0.65rem; } .usage-dialog-actions { grid-template-columns: 1fr; align-items: stretch; } .usage-dialog-actions form, .usage-dialog-actions button { width: 100%; } .piece-editor-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; } .piece-dialog-header { padding: calc(0.75rem + env(safe-area-inset-top)) calc(0.8rem + env(safe-area-inset-right)) 0.6rem calc(0.8rem + env(safe-area-inset-left)); } .piece-dialog-heading > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inline-title-trigger, .inline-title-editor input:not([type='hidden']) { font-size: 1.3rem; line-height: 1.12; } .piece-dialog-tabs { overflow-x: auto; padding: 0.4rem 0.6rem; scrollbar-width: none; } .piece-dialog-tabs button { flex: 1 0 auto; padding-inline: 0.55rem; } .piece-dialog-workspace { padding: 0.7rem; } .piece-panel-heading, .piece-subsection-heading, .markdown-editor-heading { align-items: flex-start; flex-direction: column; gap: 0.4rem; } .markdown-toolbar { width: 100%; } .markdown-toolbar button { min-height: 2rem; } .piece-meta-details summary { align-items: flex-start; flex-direction: column; gap: 0.2rem; } .piece-meta-grid, .piece-source-editor .source-row, .piece-presentation-layout { grid-template-columns: 1fr; } .piece-source-editor .source-row { align-items: stretch; } .piece-source-editor .source-row > button { justify-self: start; } .piece-presentation-preview > .output-content { min-height: 16rem; } .piece-dialog-footer { align-items: center; padding: 0.5rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom)); } .piece-dialog-secondary-actions { display: grid; min-width: 0; max-width: calc(100% - 11rem); grid-auto-columns: max-content; grid-auto-flow: column; align-items: center; overflow-x: auto; } .piece-dialog-secondary-actions form { flex: 0 0 auto; } .piece-dialog-secondary-actions .text-button { white-space: nowrap; } .piece-dialog-primary-action { margin-left: auto; } .piece-dialog-primary-action span { display: none; } .library-toolbar { align-items: stretch; flex-direction: column; } .split-heading { align-items: flex-start; flex-direction: column; } .fundus-heading-actions { width: 100%; } .template-picker { margin-left: auto; } .template-popover, .filter-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; left: auto; width: calc(100vw - 2rem); max-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav) - 1rem); overflow-y: auto; } .template-grid { grid-template-columns: 1fr; } .fundus-search-row { align-items: stretch; flex-wrap: wrap; } .fundus-search-row .search-field { width: 100%; flex: 1 0 100%; } .filter-picker { margin-left: auto; } .filter-panel { grid-template-columns: 1fr; } .library-filter-options, .filter-actions { grid-column: auto; } .search-field { width: 100%; } .filter-tabs { width: 100%; overflow-x: auto; } .filter-tabs button { flex: 1 0 auto; } .piece-grid { gap: 0.7rem; overflow: visible; border: 0; border-radius: 0; background: transparent; } .piece-card { display: flex; align-items: stretch; flex-direction: column; gap: 0.7rem; grid-template-columns: none; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel); } .piece-thumbnail { width: 100%; height: 8rem; } .piece-thumbnail-placeholder { display: grid; width: 3.25rem; height: 3.25rem; } .piece-card:last-child { border-bottom: 1px solid var(--line); } .piece-classification { gap: 0.55rem; } .piece-primary, .piece-classification, .piece-state { min-width: 0; width: 100%; } .piece-primary h2 { font-size: 1.08rem; } .piece-state { display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--line); } .piece-facts { justify-content: flex-start; } .piece-actions { position: absolute; top: 0.8rem; right: 0.8rem; } .show-summary { width: 100%; flex-wrap: wrap; } .show-summary > div { flex: 1; } .live-link { flex: 1 0 100%; justify-content: center; } .builder-pane { padding: 0.85rem; } .usage-list, .section-placeholder { margin-left: 0; } .usage-row { grid-template-columns: minmax(0, 1fr) auto; } .usage-row .row-actions { align-self: center; } .show-card, .show-card-facts { align-items: flex-start; } .show-card { flex-direction: column; align-items: stretch; } .show-card-facts { flex-direction: row; align-items: center; gap: 0.7rem; } .show-card-facts span { display: flex; align-items: baseline; gap: 0.25rem; } .show-settings-form .wide-field, .usage-edit-form .wide-field { grid-column: auto; } .copy-field, .reserve-usage { grid-template-columns: 1fr; } .copy-field button, .reserve-usage > button, .reserve-usage > form > button { width: 100%; } .editable-run-section > .row-actions { position: static; margin: 0.5rem 0 0 2.8rem; } .section-drag-handle { padding-right: 0; } .section-editor { margin-left: 0; } .settings-grid { grid-template-columns: 1fr; } .management-grid { grid-template-columns: 1fr; } .account-row { grid-template-columns: minmax(0, 1fr) auto; } .inline-account-form, .account-row > form:last-child { grid-column: 1 / -1; } .inline-account-form select { flex: 1; } } @media (max-width: 24rem) { .page-wrap { padding-inline: 0.75rem; } .piece-state { align-items: flex-start; flex-direction: column; gap: 0.25rem; } .run-section > header { grid-template-columns: auto minmax(0, 1fr); } .run-section > header > strong { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* Horizontal application chrome and the three-pane Fundus workspace. */ .app-header { position: fixed; inset: 0 0 auto; z-index: 30; display: grid; height: 4.25rem; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 3rem); padding: 0 clamp(1rem, 2vw, 2rem); border-bottom: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line)); background: var(--glass); box-shadow: 0 10px 34px rgb(0 0 0 / 12%); -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25); } .app-header .main-navigation { display: flex; justify-content: center; gap: 0.3rem; margin: 0; } .app-header .main-navigation a { min-height: 2.5rem; padding-inline: 0.85rem; } .app-header-actions { display: flex; align-items: center; gap: 0.45rem; } .global-search-form label { display: flex; min-width: 13rem; align-items: center; gap: 0.5rem; padding: 0.38rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel-strong) 72%, transparent); color: var(--text-muted); } .global-search-form input { min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--text); } .global-search-form input::placeholder { color: var(--text-faint); } .app-header-actions .theme-toggle { width: auto; padding: 0.45rem; border: 0; } .app-header-actions .theme-toggle > span:last-child { display: none; } .header-utility-link, .account-menu > summary { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel-strong) 72%, transparent); color: var(--text-muted); cursor: pointer; list-style: none; } .header-utility-link.active { border-color: color-mix(in srgb, var(--gold) 52%, var(--line)); color: var(--gold-strong); } .account-menu { position: relative; } .account-menu > div { position: absolute; top: calc(100% + 0.55rem); right: 0; display: grid; min-width: 12rem; gap: 0.25rem; padding: 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-medium); background: var(--glass-strong); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); } .user-menu-popover header { display: grid; padding: 0.2rem 0.35rem 0.65rem; border-bottom: 1px solid var(--line); } .user-menu-popover fieldset { margin: 0; padding: 0.65rem 0 0.35rem; border: 0; } .user-menu-popover legend { padding: 0 0.35rem 0.4rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 680; } .user-menu-link { display: flex; width: 100%; align-items: center; gap: 0.55rem; padding: 0.6rem; border: 0; border-radius: 0.65rem; background: transparent; color: var(--text); cursor: pointer; font: inherit; text-align: left; } .user-menu-link:hover { background: var(--panel); } .theme-menu-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; } .theme-menu-options button { display: grid; min-width: 3.4rem; gap: 0.25rem; place-items: center; padding: 0.5rem 0.35rem; border: 1px solid var(--line); border-radius: 0.65rem; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.72rem; } .theme-menu-options button.active { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: color-mix(in srgb, var(--gold) 12%, var(--panel)); color: var(--text); } .mobile-global-search { flex: 1; max-width: 15rem; margin-left: auto; } .mobile-global-search label { min-width: 0; } .search-page-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; margin: 1.5rem 0 2rem; } .search-page-form label { display: flex; align-items: center; gap: 0.65rem; padding: 0 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-medium); background: var(--panel); color: var(--text-muted); } .search-page-form input { width: 100%; border: 0; background: transparent; box-shadow: none; } .search-result-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .result-group-heading, .result-title { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .result-group-heading { margin-bottom: 0.65rem; } .result-group-heading h2 { margin: 0; } .result-group-heading > span { display: grid; min-width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 999px; background: var(--panel); color: var(--text-muted); font-size: 0.75rem; } .search-result-list { display: grid; gap: 0.55rem; } .search-result-list > a { display: grid; gap: 0.35rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--glass) 90%, transparent); } .search-result-list > a:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); background: var(--panel); } .search-result-list small { color: var(--gold-strong); font-weight: 680; } .search-result-list p { margin: 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.45; } @media (max-width: 52rem) { .search-result-columns { grid-template-columns: 1fr; } .mobile-header .brand-name, .mobile-header .brand-version { display: none; } .mobile-global-search input { font-size: 0.82rem; } } .account-menu small { color: var(--text-muted); } .app-shell > #main-content { margin-left: 0; padding-top: 4.25rem; } .fundus-workspace { display: grid; width: 100%; min-height: calc(100dvh - 4.25rem); grid-template-columns: minmax(13rem, 16rem) minmax(28rem, 1fr) minmax(19rem, 25rem); gap: 0.85rem; padding: 0.85rem; } .fundus-list-workspace { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); } .fundus-workspace:has(.fundus-navigation.collapsed) { grid-template-columns: 4.1rem minmax(0, 1fr) minmax(19rem, 25rem); } .fundus-list-workspace:has(.fundus-navigation.collapsed) { grid-template-columns: 4.1rem minmax(0, 1fr); } .stream-workspace { display: grid; min-height: calc(100dvh - 4.25rem); grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: 0.85rem; padding: 0.85rem; } .stream-workspace:has(.stream-navigation.collapsed) { grid-template-columns: 4.1rem minmax(0, 1fr); } .stream-workspace > .shows-page { width: 100%; padding-top: 1rem; } .stream-detail-workspace { display: grid; min-height: calc(100dvh - 4.25rem); grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: 0.85rem; padding: 0.85rem; } .stream-detail-workspace:has(.stream-navigation.collapsed) { grid-template-columns: 4.1rem minmax(0, 1fr); } .stream-detail-workspace > .page-wrap { width: 100%; padding-top: 1rem; } .fundus-navigation, .fundus-list-pane, .fundus-context-pane, .fundus-editor-surface { min-width: 0; border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); border-radius: var(--radius-large); background: color-mix(in srgb, var(--glass) 92%, transparent); box-shadow: inset 0 1px rgb(255 255 255 / 7%); } .fundus-navigation { position: sticky; top: 5.1rem; height: calc(100dvh - 5.95rem); padding: 1rem 0.7rem; overflow-y: auto; } .fundus-navigation header { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.25rem 0.55rem 0.8rem; } .fundus-navigation header > button, .collapsed-search-button { display: grid; width: 2rem; height: 2rem; flex: none; place-items: center; border: 1px solid var(--line); border-radius: 0.6rem; background: transparent; color: var(--text-muted); cursor: pointer; } .context-search { margin-bottom: 0.75rem; } .context-search label { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: 0.68rem; background: var(--material-inset); color: var(--text-muted); } .context-search input { min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 0.76rem; } .fundus-navigation.collapsed { padding-inline: 0.55rem; overflow: hidden; } .fundus-navigation.collapsed header { justify-content: center; padding-inline: 0; } .fundus-navigation.collapsed header > div, .fundus-navigation.collapsed nav a span, .fundus-navigation.collapsed nav a strong, .fundus-navigation.collapsed section h2 { display: none; } .fundus-navigation.collapsed nav a { grid-template-columns: 1fr; place-items: center; } .collapsed-search-button { width: 100%; margin-bottom: 0.5rem; } .piece-card { position: relative; } .piece-row-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .piece-card form, .piece-card details, .piece-card .piece-primary h2 a { position: relative; z-index: 2; } .piece-card .piece-primary { position: relative; z-index: 2; pointer-events: none; } .piece-card .piece-primary h2 a { pointer-events: auto; } .piece-card .piece-primary details { pointer-events: auto; } .fundus-navigation h1 { margin: 0.12rem 0 0; font-size: 1.45rem; } .fundus-navigation h2 { margin: 1.15rem 0.55rem 0.45rem; color: var(--text-faint); font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase; } .fundus-navigation nav { display: grid; gap: 0.16rem; } .fundus-navigation nav a { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; min-height: 2.25rem; padding: 0.42rem 0.55rem; border: 1px solid transparent; border-radius: 0.68rem; color: var(--text-muted); font-size: 0.73rem; font-weight: 650; } .fundus-navigation nav a strong { color: var(--text-faint); font-size: 0.64rem; } .fundus-navigation nav a:hover, .fundus-navigation nav a.active { border-color: color-mix(in srgb, var(--gold) 38%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--material-inset)); color: var(--text); } .fundus-list-pane { padding: clamp(1rem, 2vw, 1.4rem); } .fundus-list-pane .page-heading h1 { font-size: clamp(1.45rem, 2vw, 1.9rem); } .fundus-list-pane .piece-grid { gap: 0.45rem; } .fundus-list-pane .piece-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.7rem; } .fundus-list-pane .piece-thumbnail { grid-column: 1; grid-row: 1 / 3; } .fundus-list-pane .piece-primary { grid-column: 2; grid-row: 1; } .fundus-list-pane .piece-classification, .fundus-list-pane .piece-state { grid-column: 2; } .fundus-list-pane .piece-classification { grid-row: 2; } .fundus-list-pane .piece-state { grid-column: 3; grid-row: 2; } .fundus-list-pane .piece-actions { grid-column: 3; grid-row: 1; } .fundus-context-pane { position: sticky; top: 5.1rem; height: fit-content; padding: 1.15rem; } .fundus-context-pane h2 { margin: 0.25rem 0 0.55rem; } .fundus-context-pane > p:not(.eyebrow) { color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; } .fundus-overview-counts { display: grid; gap: 0.35rem; margin: 1rem 0; } .fundus-overview-counts div { display: flex; justify-content: space-between; padding: 0.55rem 0; border-bottom: 1px solid var(--line); } .fundus-overview-counts dt, .fundus-overview-counts dd { margin: 0; font-size: 0.74rem; } .fundus-overview-counts dd { color: var(--gold-strong); font-weight: 760; } .fundus-context-hint { display: flex; align-items: flex-start; gap: 0.55rem; padding-top: 0.8rem; } .fundus-editor-workspace .piece-editor-route { grid-column: 2 / 4; min-width: 0; } .fundus-editor-surface { display: grid; width: 100%; height: calc(100dvh - 5.95rem); max-width: none; max-height: none; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; } .fundus-editor-surface .piece-dialog-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.85fr); grid-auto-rows: max-content; align-content: start; gap: 1rem; padding: 1rem; } .fundus-editor-surface .piece-dialog-form, .fundus-editor-surface .piece-script-panel { display: contents; } .fundus-editor-surface .piece-script-panel > .piece-panel-heading, .fundus-editor-surface .piece-script-panel > .piece-writing-stack { grid-column: 1; } .fundus-editor-surface .piece-script-panel > .piece-panel-heading { grid-row: 1; } .fundus-editor-surface .piece-script-panel > .piece-writing-stack { grid-row: 2; } .fundus-editor-surface .piece-script-panel > .piece-meta-details { grid-column: 2; grid-row: 1; margin-top: 0; } .fundus-editor-surface .piece-research-panel { grid-column: 1; grid-row: 3 / span 2; width: 100%; } .fundus-editor-surface .piece-presentation-panel { grid-column: 2; grid-row: 2 / span 2; width: 100%; } .fundus-editor-surface .piece-media-panel { grid-column: 2; grid-row: 4; width: 100%; margin-top: 0; } .fundus-editor-surface .piece-presentation-layout, .fundus-editor-surface .piece-meta-grid { grid-template-columns: 1fr; } .fundus-editor-surface .piece-meta-grid .wide-field, .fundus-editor-surface .piece-meta-grid fieldset { grid-column: auto; } .fundus-editor-surface .piece-presentation-preview > .output-content { min-height: 15rem; } .rich-markdown-surface { min-height: 5.5rem; padding: 0.75rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); box-shadow: inset 0 1px 2px rgb(0 0 0 / 5%); font-size: 0.88rem; line-height: 1.55; } .rich-markdown-field > [hidden] { display: none !important; } .rich-markdown-content { position: relative; min-height: 4rem; outline: 0; } .rich-markdown-content > :first-child { margin-top: 0; } .rich-markdown-content > :last-child { margin-bottom: 0; } .rich-markdown-content:empty::before, .rich-markdown-content:has(> p:only-child > br.ProseMirror-trailingBreak)::before { position: absolute; inset: 0 auto auto 0; color: var(--text-faint); content: attr(data-placeholder); pointer-events: none; } .fundus-editor-surface .piece-presentation-controls { padding: 0.8rem; border: 1px solid color-mix(in srgb, #e7b957 32%, #30435c); border-radius: var(--radius-medium); background: #0b1220; color: #fff7e8; } .fundus-editor-surface .piece-presentation-controls :is(.field-label, label) { color: #a9b6c8; } .fundus-editor-surface .piece-presentation-controls :is(input:not([type='radio']), textarea, select), .fundus-editor-surface .piece-presentation-controls .rich-markdown-surface { border-color: #30435c; background: #152238; color: #fff7e8; } .fundus-editor-surface .piece-presentation-controls > label:has(input[name='outputTitle']) input { font-size: 1.35rem; font-weight: 760; letter-spacing: -0.025em; } .fundus-editor-surface .piece-presentation-panel:has(input[value='text']:checked) .piece-presentation-preview { display: none; } .markdown-toolbar button.active { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: color-mix(in srgb, var(--gold) 12%, var(--material-inset)); color: var(--text); } .markdown-source-warning { margin: 0 0 0.45rem; color: var(--gold-strong); font-size: 0.68rem; } @media (max-width: 78rem) { .fundus-workspace { grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr); } .fundus-context-pane { display: none; } .fundus-editor-workspace .piece-editor-route { grid-column: 2; } } @media (max-width: 52rem) { .app-header { display: none; } .app-shell > #main-content { padding-top: calc(var(--mobile-header) + env(safe-area-inset-top)); } .fundus-workspace { min-height: auto; grid-template-columns: minmax(0, 1fr); padding: 0.7rem; } .stream-workspace, .stream-workspace:has(.stream-navigation.collapsed), .stream-detail-workspace, .stream-detail-workspace:has(.stream-navigation.collapsed) { min-height: auto; grid-template-columns: minmax(0, 1fr); padding: 0.7rem; } .stream-workspace > .shows-page { padding-inline: 0.3rem; } .fundus-navigation { position: static; display: block; height: auto; padding: 0.45rem; overflow: hidden; } .fundus-navigation header, .fundus-navigation section { display: none; } .fundus-navigation > nav { display: flex; overflow-x: auto; scrollbar-width: thin; } .fundus-navigation > nav a { min-width: max-content; grid-template-columns: auto auto auto; } .fundus-editor-workspace .fundus-navigation { display: none; } .fundus-editor-workspace .piece-editor-route { grid-column: 1; } .fundus-editor-surface { height: auto; min-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav) - 2rem); } .fundus-editor-surface .piece-dialog-workspace { display: block; overflow: visible; } .fundus-editor-surface .piece-dialog-form, .fundus-editor-surface .piece-script-panel { display: block; } .fundus-editor-surface .piece-editor-panel, .fundus-editor-surface .piece-meta-details, .fundus-editor-surface .piece-media-panel { margin-top: 1rem; } .fundus-editor-surface .piece-dialog-footer { position: sticky; z-index: 6; bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom)); align-items: flex-end; flex-direction: column-reverse; } } /* Shared editor controls introduced for the compact piece workflow. */ html:has(.heinzlive-output.empty), body:has(.heinzlive-output.empty), .heinzlive-output.empty { background: transparent !important; } .heinzlive-output.empty { min-height: 100vh; padding: 0; } .template-popover { width: min(64rem, calc(100vw - var(--sidebar-width) - 4rem)); max-height: calc(100dvh - 8rem); overflow-y: auto; } .template-grid { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); } .piece-primary h2 a { position: static; } .piece-card :is(button, input, summary), .piece-card a:not(.piece-primary h2 a) { position: relative; z-index: 2; } .inbox-item > a { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 1rem; } .inbox-item > a > span:first-child { display: grid; } .inbox-item > a > span:last-child { color: var(--accent); font-weight: 720; } .inline-title-editor { min-width: 0; } .inline-title-trigger { display: flex; max-width: 100%; align-items: center; gap: 0.55rem; padding: 0.1rem 0; border: 0; background: transparent; color: var(--text); cursor: text; font-size: clamp(1.25rem, 2.5vw, 1.85rem); font-weight: 760; letter-spacing: -0.035em; line-height: 1.12; text-align: left; } .inline-title-trigger > span:first-child { overflow-wrap: anywhere; } .inline-title-trigger .app-icon { color: var(--text-faint); } .inline-title-editor label, .inline-title-editor input:not([type='hidden']) { display: block; width: 100%; } .inline-title-editor input:not([type='hidden']) { padding: 0.16rem 0.45rem; border: 1px solid var(--line-strong); border-radius: 0.55rem; background: var(--field); color: var(--text); font-size: clamp(1.25rem, 2.5vw, 1.85rem); font-weight: 760; letter-spacing: -0.035em; } .choice-picker { display: grid; gap: 0.45rem; } .choice-picker-selected { display: flex; flex-wrap: wrap; gap: 0.35rem; } .choice-picker-selected > span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.55rem; border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--gold) 10%, var(--panel)); color: var(--text); font-size: 0.68rem; } .choice-picker-menu, .icon-picker details { position: relative; } .choice-picker-menu > summary, .icon-picker summary { width: fit-content; cursor: pointer; color: var(--accent); font-size: 0.7rem; font-weight: 720; list-style: none; } .choice-picker-popover, .icon-picker-popover { position: absolute; z-index: 20; top: calc(100% + 0.35rem); left: 0; width: min(32rem, calc(100vw - 3rem)); max-height: min(28rem, 60dvh); overflow: auto; padding: 0.65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-medium); background: var(--panel-strong); box-shadow: var(--shadow); } .piece-subsection-heading .choice-picker-popover { right: 0; left: auto; } @media (min-width: 52.001rem) { .topic-management-panel .icon-picker-popover { right: 0; left: auto; } } .choice-picker-search { display: grid !important; grid-template-columns: auto 1fr; align-items: center; } .choice-picker-search input, .icon-picker-popover input { width: 100%; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--field); color: var(--text); } .choice-picker-options { display: grid; gap: 0.3rem; margin-top: 0.55rem; } .choice-picker-options > label { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-small); cursor: pointer; } .choice-picker-options > label.active { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); } .choice-picker-options span, .choice-picker-options small { display: block; } .choice-picker-close { width: 100%; justify-content: center; margin-top: 0.55rem; padding: 0.5rem; border-top: 1px solid var(--line); } .choice-picker-options small { color: var(--text-faint); font-size: 0.62rem; } .icon-picker summary { display: inline-flex; align-items: center; gap: 0.35rem; } .icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.35rem; margin-top: 0.55rem; } .icon-picker-grid button { display: grid; min-height: 4.5rem; place-items: center; gap: 0.25rem; padding: 0.45rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); cursor: pointer; font-size: 0.58rem; } .icon-picker-grid button.active { border-color: var(--gold); color: var(--gold-strong); } .topic-settings-list { display: grid; gap: 0.35rem; margin: 0.8rem 0; } .topic-settings-list > details { padding: 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-small); } .topic-settings-list summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none; } .topic-edit-form { display: grid; gap: 0.6rem; margin: 0.7rem 0; } .topic-edit-form label { display: grid; gap: 0.25rem; font-size: 0.68rem; font-weight: 700; } .topic-edit-form input { padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--field); color: var(--text); } .tool-management { padding: clamp(0.85rem, 2vw, 1.2rem); } .tool-management .panel-heading { align-items: center; } .compact-add-button { display: inline-flex; width: fit-content; align-items: center; gap: 0.4rem; padding: 0.48rem 0.7rem; border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--gold) 10%, var(--glass)); color: var(--gold-strong); cursor: pointer; font-size: 0.7rem; font-weight: 760; } .catalog-note { margin: 0.45rem 0 0.85rem; color: var(--text-faint); font-size: 0.68rem; } .catalog-settings-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.45rem; } .catalog-settings-list > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-width: 0; padding: 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--panel-soft) 82%, transparent); color: var(--text); cursor: pointer; text-align: left; } .catalog-settings-list > button:hover { border-color: color-mix(in srgb, var(--gold) 44%, var(--line)); background: color-mix(in srgb, var(--gold) 7%, var(--panel-soft)); } .catalog-settings-list > button.inactive { opacity: 0.68; } .catalog-entry-icon, .management-dialog-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line)); border-radius: 0.72rem; background: color-mix(in srgb, var(--gold) 9%, var(--panel)); color: var(--gold-strong); font-size: 1rem; } .catalog-entry-copy, .catalog-entry-copy strong, .catalog-entry-copy small { display: block; min-width: 0; } .catalog-entry-copy strong { font-size: 0.78rem; overflow-wrap: anywhere; } .catalog-entry-copy small { margin-top: 0.12rem; color: var(--text-faint); font-size: 0.62rem; line-height: 1.35; } .catalog-settings-list > button > .app-icon { color: var(--text-faint); } .management-dialog { display: none; grid-template-rows: auto minmax(0, 1fr); width: min(40rem, calc(100vw - 2rem)); max-height: min(46rem, calc(100dvh - 2rem)); padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line)); border-radius: var(--radius-large); background: var(--glass-strong); color: var(--text); box-shadow: var(--shadow); backdrop-filter: blur(24px) saturate(1.12); } .management-dialog[open] { display: grid; } .management-dialog::backdrop { background: rgb(3 8 18 / 46%); backdrop-filter: blur(6px); } .management-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); } .management-dialog-title { display: flex; min-width: 0; align-items: center; gap: 0.75rem; } .management-dialog-title h2 { margin: 0.1rem 0 0; font-size: 1.05rem; overflow-wrap: anywhere; } .management-dialog-form { display: grid; min-height: 0; overflow-y: auto; } .management-dialog-fields, .management-dialog-selections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; padding: 1rem 1.1rem; } .management-dialog-selections { padding-top: 0; } .management-dialog-fields label, .management-dialog-selections > div, .field-label { display: grid; gap: 0.3rem; font-size: 0.68rem; font-weight: 720; } .management-dialog-fields .wide-field, .management-dialog-selections .toggle-row { grid-column: 1 / -1; } .management-dialog input:not([type='checkbox'], [type='hidden']), .management-dialog select, .management-dialog textarea { width: 100%; padding: 0.62rem 0.68rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--field); color: var(--text); font: inherit; } .management-dialog textarea { min-height: 6.5rem; resize: vertical; } .management-dialog .toggle-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-soft); cursor: pointer; } .management-dialog .toggle-row span, .management-dialog .toggle-row strong, .management-dialog .toggle-row small { display: block; } .management-dialog .toggle-row small { margin-top: 0.12rem; color: var(--text-faint); font-size: 0.62rem; font-weight: 500; } .management-dialog footer { display: flex; position: sticky; bottom: 0; justify-content: flex-end; gap: 0.55rem; padding: 0.8rem 1.1rem calc(0.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--glass-strong) 94%, transparent); backdrop-filter: blur(18px); } .icon-picker-hint { margin: 0.6rem 0 0; color: var(--text-faint); font-size: 0.62rem; } .tool-assignment-name { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.45rem; } .tool-assignment-name > span, .tool-assignment-name strong, .tool-assignment-name small { display: block; } .media-presentation-choice { display: grid; position: relative; height: 100%; cursor: pointer; } .media-presentation-choice input { position: absolute; z-index: 2; top: 0.55rem; left: 0.55rem; } .media-presentation-choice span, .media-none { padding: 0.45rem; font-size: 0.68rem; font-weight: 700; } .media-presentation-choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--gold); } .upload-form .upload-select { display: flex; grid-column: 1 / -1; align-items: center; gap: 0.45rem; } .upload-form .upload-select input { width: auto; min-height: auto; } .usage-media-picker { margin-top: 0.8rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-medium); } .usage-media-picker > label { display: flex; align-items: center; gap: 0.4rem; } .template-save-menu > form { max-height: min(30rem, calc(100dvh - 6rem)); overflow-y: auto; } .deleted-pieces { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); } .catalog-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--panel-soft) 82%, transparent); overflow: hidden; } .catalog-setting-row.inactive { opacity: 0.68; } .catalog-entry-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-width: 0; padding: 0.65rem; border: 0; background: transparent; color: var(--text); text-align: left; } button.catalog-entry-main { cursor: pointer; } button.catalog-entry-main:hover { background: color-mix(in srgb, var(--gold) 7%, var(--panel-soft)); } .catalog-entry-main > .app-icon { color: var(--text-faint); } .catalog-entry-actions { display: flex; align-items: center; padding: 0.35rem; border-left: 1px solid var(--line); } .catalog-entry-actions form { display: flex; } .catalog-entry-actions button { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; padding: 0; border: 0; border-radius: 0.55rem; background: transparent; color: var(--text-muted); cursor: pointer; } .catalog-entry-actions button:hover, .catalog-entry-actions button:focus-visible { background: var(--panel); color: var(--text); } .rss-selection-dialog { width: min(66rem, calc(100vw - 2rem)); } .rss-selection-form { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; } .rss-selection-content { display: grid; min-height: 0; align-content: start; gap: 0.85rem; padding: 1rem 1.1rem; overflow-y: auto; } .rss-source-filters { display: flex; gap: 0.4rem; padding-bottom: 0.25rem; overflow-x: auto; scrollbar-width: thin; } .rss-source-filters button { flex: 0 0 auto; padding: 0.48rem 0.72rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); color: var(--text-muted); cursor: pointer; font: inherit; font-size: 0.68rem; font-weight: 720; } .rss-source-filters button.active { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); color: var(--text); } .rss-result-summary, .rss-pagination { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .rss-result-summary { color: var(--text-faint); font-size: 0.68rem; } .rss-entry-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } .rss-entry { display: grid; position: relative; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.7rem; min-width: 0; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--panel-soft) 90%, transparent); cursor: pointer; } .rss-entry:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .rss-entry.selected { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); box-shadow: none; } [data-theme='light'] .rss-entry.selected { background: color-mix(in srgb, var(--gold) 9%, #fff); } .rss-entry:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .rss-entry-state { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--text-faint); } .rss-entry.selected .rss-entry-state { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); background: color-mix(in srgb, var(--gold) 15%, var(--panel)); color: var(--gold-strong); } .rss-entry-copy, .rss-entry-copy > * { min-width: 0; } .rss-entry-copy { display: grid; gap: 0.25rem; } .rss-entry-copy small { color: var(--text-faint); font-size: 0.62rem; } .rss-entry-copy strong { font-size: 0.78rem; overflow-wrap: anywhere; } .rss-entry-copy p { display: -webkit-box; margin: 0; color: var(--text-muted); font-size: 0.68rem; line-height: 1.45; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .rss-entry-copy a { width: fit-content; font-size: 0.65rem; font-weight: 720; } .rss-selected-label { position: absolute; top: 0.55rem; right: 0.6rem; padding: 0.2rem 0.42rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.55rem; font-weight: 780; } .rss-entry.selected .rss-entry-copy small { padding-right: 4.8rem; } .rss-pagination { justify-content: center; font-size: 0.68rem; } .rss-category-selection { display: grid; gap: 0.25rem; padding-top: 0.8rem; border-top: 1px solid var(--line); } .rss-category-selection > small { color: var(--text-faint); font-size: 0.62rem; } .rss-selection-actions { display: flex; justify-content: space-between; gap: 0.7rem; } .technical-token-result { display: grid; align-content: start; gap: 0.8rem; padding: 1rem 1.1rem; overflow-y: auto; } .technical-token-result code { padding: 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--panel-soft); overflow-wrap: anywhere; user-select: all; } .technical-token-result .primary-button { width: fit-content; } .dialog-form-message { margin: 1rem 1.1rem 0; } @media (max-width: 52rem) { .choice-picker-popover, .icon-picker-popover { position: fixed; inset: calc(var(--mobile-header) + env(safe-area-inset-top) + 0.5rem) calc(0.5rem + env(safe-area-inset-right)) calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 0.5rem) calc(0.5rem + env(safe-area-inset-left)); width: auto; max-height: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; } .icon-picker-popover input[type='search'] { font-size: 1rem; } .icon-picker-grid { min-height: 0; overflow-y: auto; } .piece-subsection-heading .choice-picker-popover { right: calc(0.5rem + env(safe-area-inset-right)); left: calc(0.5rem + env(safe-area-inset-left)); } .choice-picker-selected { max-height: 4.5rem; overflow-y: auto; } .tool-management .panel-heading { align-items: flex-start; } .catalog-settings-list { grid-template-columns: 1fr; } .management-dialog { height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: none; inset: calc(0.5rem + env(safe-area-inset-top)) calc(0.5rem + env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) calc(0.5rem + env(safe-area-inset-left)); margin: 0; } .management-dialog-form { max-height: none; } .management-dialog-fields, .management-dialog-selections { grid-template-columns: 1fr; } .management-dialog-fields .wide-field, .management-dialog-selections .toggle-row { grid-column: auto; } .management-dialog footer button { flex: 1; } } /* Keep the 0.8.1 workspace overrides after the legacy component rules. */ .fundus-editor-surface .piece-script-panel > .piece-writing-stack { grid-row: 1 / span 2; width: 100%; justify-self: stretch; } .planning-workspace { grid-template-columns: minmax(0, 1fr); } .live-current { border-color: color-mix(in srgb, var(--gold) 26%, var(--line)); background: color-mix(in srgb, var(--glass) 94%, var(--bg)); } .live-current-scroll { padding-inline: clamp(1rem, 4vw, 4.5rem); } @media (max-width: 52rem) { .fundus-editor-surface .piece-script-panel > .piece-writing-stack { width: 100%; } .live-current-scroll { padding-inline: 0.9rem; } } /* 0.8.2 piece writing room */ .fundus-editor-surface .piece-dialog-header { padding: 0.85rem clamp(1rem, 2vw, 1.5rem) 0; } .fundus-editor-surface .piece-dialog-heading { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 1.25rem; } .fundus-editor-surface .piece-editor-kicker, .fundus-editor-surface .piece-dialog-title, .fundus-editor-surface .piece-editor-facts { grid-column: 1; } .piece-editor-facts { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0.7rem; } .piece-editor-facts span { padding: 0.2rem 0.48rem; border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--gold) 7%, transparent); color: var(--text-muted); font-size: 0.64rem; font-weight: 680; } .piece-editor-view-switch { display: flex; grid-column: 2; grid-row: 1 / span 3; align-self: end; gap: 0.2rem; } .piece-editor-view-switch button { min-height: 2.35rem; padding: 0.45rem 0.7rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font-size: 0.7rem; font-weight: 740; cursor: pointer; } .piece-editor-view-switch button.active { border-bottom-color: var(--gold); color: var(--text); } .piece-editor-view-switch .piece-context-switch { display: none; } .fundus-editor-surface .piece-dialog-workspace { display: grid; grid-template-columns: minmax(0, 1fr) clamp(19rem, 23vw, 22rem); grid-auto-rows: max-content; align-content: start; gap: 1rem; padding: 1rem; } .fundus-editor-surface .piece-dialog-form, .fundus-editor-surface .piece-script-panel { display: contents; } .fundus-editor-surface .piece-script-panel > .piece-writing-stack, .fundus-editor-surface .piece-research-panel { grid-column: 1; grid-row: 1 / span 4; width: 100%; margin: 0; align-self: start; align-content: start; justify-self: stretch; } .fundus-editor-surface .piece-writing-stack[hidden] { display: none; } .fundus-editor-surface .piece-research-panel { display: grid; gap: 1rem; } .fundus-editor-surface .piece-research-panel[hidden] { display: none; } .fundus-editor-surface .piece-research-panel > .piece-panel-heading { margin-bottom: 0; } .fundus-editor-surface .piece-meta-details, .fundus-editor-surface .piece-presentation-panel, .fundus-editor-surface .piece-media-panel { grid-column: 2; width: 100%; margin: 0; } .fundus-editor-surface .piece-meta-details { grid-row: 1; } .fundus-editor-surface .piece-presentation-panel { grid-row: 2; } .fundus-editor-surface .piece-media-panel { grid-row: 3; } .piece-writing-document { gap: 1rem; } .piece-writing-document .rich-markdown-field, .fundus-editor-surface .piece-research-panel > .rich-markdown-field { padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); border-radius: 1rem; background: color-mix(in srgb, var(--panel-strong) 90%, var(--gold) 2%); box-shadow: 0 0.45rem 1.4rem rgb(18 35 58 / 5%); } .piece-writing-document .markdown-editor-heading, .fundus-editor-surface .piece-research-panel > .rich-markdown-field .markdown-editor-heading { min-height: 2.85rem; margin: 0; padding: 0.55rem 0.7rem 0.5rem 0.9rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--material-inset) 54%, transparent); } .piece-writing-document .markdown-editor-heading > span:first-child, .fundus-editor-surface .piece-research-panel > .rich-markdown-field .markdown-editor-heading > span:first-child { font-size: 0.82rem; letter-spacing: -0.01em; } .piece-writing-document .rich-markdown-surface, .fundus-editor-surface .piece-research-panel > .rich-markdown-field .rich-markdown-surface, .piece-writing-document .markdown-editor-field textarea, .fundus-editor-surface .piece-research-panel > .rich-markdown-field textarea { min-height: 4.75rem; padding: 1rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 0.94rem; line-height: 1.7; } .piece-writing-document .rich-markdown-field:nth-child(2) .rich-markdown-surface { min-height: 7rem; } .fundus-editor-surface .piece-writing-stack .rich-markdown-content, .fundus-editor-surface .piece-research-panel > .rich-markdown-field .rich-markdown-content { max-width: 78ch; } .fundus-editor-surface .piece-meta-details, .fundus-editor-surface .piece-presentation-panel, .fundus-editor-surface .piece-media-panel { padding: 0.85rem; border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); border-radius: 1rem; background: color-mix(in srgb, var(--panel-strong) 82%, var(--material-inset)); box-shadow: 0 0.45rem 1.4rem rgb(18 35 58 / 5%); } .fundus-editor-surface .piece-meta-details summary { min-height: 1.8rem; } .fundus-editor-surface .piece-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.65rem; } .fundus-editor-surface .piece-meta-grid .wide-field, .fundus-editor-surface .piece-meta-grid fieldset { grid-column: 1 / -1; } .fundus-editor-surface .piece-meta-grid textarea { min-height: 3.7rem; } @media (min-width: 52.01rem) and (max-width: 70rem) { .fundus-editor-surface .piece-dialog-workspace { grid-template-columns: minmax(0, 1fr) minmax(17rem, 19rem); gap: 0.75rem; padding: 0.75rem; } } .fundus-editor-surface .piece-presentation-panel > .piece-panel-heading { align-items: center; margin-bottom: 0.75rem; } .fundus-editor-surface .piece-presentation-panel > .piece-panel-heading .secondary-button { padding: 0.4rem 0.55rem; font-size: 0.62rem; } .fundus-editor-surface .piece-presentation-layout { grid-template-columns: 1fr; } .fundus-editor-surface .piece-presentation-controls { padding: 0; border: 0; background: transparent; color: var(--text); } .fundus-editor-surface .piece-presentation-controls :is(.field-label, label) { color: var(--text-muted); } .fundus-editor-surface .presentation-mode-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; } .fundus-editor-surface .presentation-mode-picker label { justify-content: center; padding: 0.48rem 0.4rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--material-inset); } .fundus-editor-surface .presentation-mode-picker label:has(input:checked) { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); background: color-mix(in srgb, var(--gold) 13%, var(--material-inset)); color: var(--text); } .piece-inline-presentation-preview { display: grid; gap: 0.8rem; margin-top: 0.2rem; padding: 0.9rem; border: 1px solid color-mix(in srgb, var(--gold) 34%, #30435c); border-radius: 0.85rem; background: #0b1220; color: #fff7e8; } .piece-inline-presentation-preview .output-kicker { margin: 0; color: #d6ad58; font-size: 0.6rem; } .fundus-editor-surface .piece-inline-presentation-preview label, .fundus-editor-surface .piece-inline-presentation-preview .markdown-editor-heading { color: #b8c3d2; } .fundus-editor-surface .piece-inline-presentation-preview :is(input:not([type='radio']), textarea, .rich-markdown-surface) { border-color: #30435c; background: #152238; color: #fff7e8; } .fundus-editor-surface .piece-inline-presentation-preview input[name='outputTitle'] { font-size: 1.2rem; font-weight: 760; letter-spacing: -0.025em; } .fundus-editor-surface .piece-presentation-panel:has(input[value='text']:checked) .piece-presentation-preview { display: none; } .fundus-editor-surface .piece-presentation-preview > .output-content { min-height: 13rem; } @media (max-width: 52rem) { .fundus-editor-surface .piece-dialog-header { padding: 0.75rem 0.75rem 0; } .fundus-editor-surface .piece-dialog-heading { display: block; } .fundus-editor-surface .piece-dialog-title textarea { font-size: 1.25rem; } .piece-editor-view-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-right: -2.8rem; } .piece-editor-view-switch .piece-context-switch { display: block; } .piece-editor-view-switch button { min-width: 0; padding-inline: 0.3rem; font-size: 0.64rem; } .fundus-editor-surface .piece-dialog-workspace { display: block; padding: 0.75rem; overflow: visible; } .fundus-editor-surface .piece-dialog-form, .fundus-editor-surface .piece-script-panel { display: block; } .fundus-editor-surface .piece-meta-grid { grid-template-columns: 1fr; } .fundus-editor-surface .piece-meta-grid .wide-field, .fundus-editor-surface .piece-meta-grid fieldset { grid-column: auto; } .fundus-editor-surface .piece-writing-stack, .fundus-editor-surface .piece-research-panel, .fundus-editor-surface .piece-meta-details, .fundus-editor-surface .piece-presentation-panel, .fundus-editor-surface .piece-media-panel { width: 100%; margin: 0; } .fundus-editor-surface .piece-context-panel.mobile-context-hidden { display: none; } .fundus-editor-surface .piece-presentation-panel, .fundus-editor-surface .piece-media-panel { margin-top: 0.75rem; } .piece-writing-document .markdown-editor-heading, .fundus-editor-surface .piece-research-panel > .rich-markdown-field .markdown-editor-heading { align-items: flex-start; flex-direction: column; } .markdown-toolbar { width: 100%; } .markdown-toolbar button { min-height: 2.35rem; min-width: 2.35rem; } .fundus-editor-surface .piece-dialog-footer { align-items: stretch; padding: 0.65rem 0.75rem; } .fundus-editor-surface .piece-dialog-secondary-actions { display: flex; width: 100%; max-width: none; flex-wrap: wrap; justify-content: flex-start; row-gap: 0.35rem; overflow: visible; } .fundus-editor-surface .piece-dialog-primary-action { width: 100%; justify-content: flex-end; } } /* 0.8.2 editorial document correction */ .fundus-navigation.editor-context { display: flex; flex-direction: column; } .fundus-navigation.editor-context header { flex: none; } .fundus-navigation .editor-navigation-close { display: none; } .editor-overview-link { display: flex; min-height: 2.5rem; align-items: center; gap: 0.5rem; margin-bottom: 0.65rem; padding: 0.5rem 0.55rem; border-radius: 0.65rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 720; } .editor-overview-link:hover { background: var(--material-inset); color: var(--text); } .fundus-navigation.editor-context.collapsed .editor-overview-link { justify-content: center; padding-inline: 0; } .fundus-navigation.editor-context.collapsed .editor-overview-link span { display: none; } .editor-piece-filters { position: relative; margin: -0.25rem 0 0.65rem; } .editor-piece-filters > summary { display: flex; min-height: 2.25rem; align-items: center; gap: 0.45rem; padding: 0.4rem 0.55rem; border-radius: 0.6rem; color: var(--text-muted); cursor: pointer; font-size: 0.7rem; font-weight: 720; } .editor-piece-filters > summary:hover, .editor-piece-filters[open] > summary { background: var(--material-inset); color: var(--text); } .editor-piece-filters > form { position: absolute; z-index: 12; top: calc(100% + 0.35rem); left: 0; display: grid; width: min(21rem, calc(100vw - 2rem)); gap: 0.55rem; padding: 0.75rem; border: 1px solid var(--line-strong); border-radius: 0.85rem; background: var(--glass-strong); box-shadow: var(--shadow); } .editor-piece-filters label { display: grid; gap: 0.25rem; color: var(--text-muted); font-size: 0.66rem; font-weight: 700; } .editor-piece-filters select { width: 100%; min-width: 0; padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.55rem; background: var(--field); color: var(--text); } .editor-piece-filters .editor-filter-check { display: flex; align-items: center; gap: 0.45rem; } .fundus-navigation .editor-piece-list { display: grid; min-height: 0; gap: 0.2rem; overflow-y: auto; } .fundus-navigation .editor-piece-list a { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.55rem; padding: 0.55rem; border: 1px solid transparent; border-radius: 0.7rem; } .fundus-navigation .editor-piece-list a > span { display: grid; min-width: 0; gap: 0.18rem; } .fundus-navigation .editor-piece-list strong, .fundus-navigation .editor-piece-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fundus-navigation .editor-piece-list strong { font-size: 0.72rem; } .fundus-navigation .editor-piece-list small { color: var(--text-faint); font-size: 0.6rem; } .fundus-navigation .editor-piece-list a.active { border-color: color-mix(in srgb, var(--gold) 42%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--material-inset)); } .fundus-navigation.editor-context.collapsed .editor-piece-list a { grid-template-columns: 1fr; place-items: center; } .fundus-navigation.editor-context.collapsed .editor-piece-list a > span { display: none; } .fundus-editor-surface { grid-template-rows: auto minmax(0, 1fr); } .fundus-editor-surface .piece-dialog-header { align-items: center; padding: 0.75rem 1rem 0; } .fundus-editor-surface .piece-dialog-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 0 1rem; } .piece-editor-title-row { display: flex; min-width: 0; grid-column: 1; grid-row: 1; align-items: center; gap: 0.55rem; } .piece-editor-title-row .inline-title-editor { min-width: 0; } .piece-editor-title-row .inline-title-trigger { font-size: clamp(1.35rem, 2.4vw, 1.85rem); } .piece-editor-header-actions { position: relative; display: flex; grid-column: 2; grid-row: 1; align-items: center; justify-content: flex-end; gap: 0.45rem; } .piece-editor-header-actions .save-indicator { max-width: 12rem; overflow: hidden; color: var(--text-faint); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; } .compact-save-button, .piece-action-menu > summary { min-height: 2.15rem; padding: 0.4rem 0.65rem; border: 1px solid var(--line); border-radius: 0.6rem; background: transparent; color: var(--text-muted); font-size: 0.68rem; font-weight: 720; cursor: pointer; } .compact-save-button:hover, .piece-action-menu > summary:hover, .piece-action-menu[open] > summary { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); color: var(--text); } .piece-action-menu { position: relative; } .piece-action-menu > div { position: absolute; z-index: 20; top: calc(100% + 0.45rem); right: 0; display: grid; width: min(19rem, calc(100vw - 2rem)); gap: 0.2rem; padding: 0.55rem; border: 1px solid var(--line-strong); border-radius: 0.85rem; background: var(--glass-strong); box-shadow: var(--shadow); } .piece-action-menu > div > form, .piece-action-menu > div > form button, .piece-action-menu .template-save-menu { width: 100%; } .piece-action-menu > div > form button, .piece-action-menu .template-save-menu > summary { display: flex; min-height: 2.35rem; align-items: center; padding: 0.45rem 0.55rem; } .piece-action-menu .template-save-menu > form { position: static; width: 100%; margin-top: 0.35rem; box-shadow: none; } .fundus-editor-surface .piece-editor-view-switch { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-top: 0.35rem; } .piece-editor-view-switch .piece-list-switch { display: none; } .fundus-editor-surface .piece-dialog-workspace { gap: 0.8rem; padding: 0.8rem; } .piece-writing-document { gap: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 12%, var(--line)); border-radius: 0.95rem; background: color-mix(in srgb, var(--panel-strong) 74%, transparent); box-shadow: 0 0.65rem 1.8rem rgb(18 35 58 / 4%); } .piece-writing-document .rich-markdown-field, .fundus-editor-surface .piece-research-panel > .rich-markdown-field { padding: 0; overflow: visible; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 0; background: transparent; box-shadow: none; transition: background-color 120ms ease, box-shadow 120ms ease; } .piece-writing-document .rich-markdown-field:last-child { border-bottom: 0; } .piece-writing-document .rich-markdown-field:focus-within, .fundus-editor-surface .piece-research-panel > .rich-markdown-field:focus-within { background: color-mix(in srgb, var(--gold) 5%, var(--field)); box-shadow: inset 3px 0 color-mix(in srgb, var(--gold) 70%, var(--accent)); } .piece-writing-document .markdown-editor-heading, .fundus-editor-surface .piece-research-panel > .rich-markdown-field .markdown-editor-heading { min-height: 0; margin: 0; padding: 0.85rem 1rem 0.25rem; border: 0; background: transparent; } .fundus-editor-surface .rich-markdown-field .markdown-toolbar, .piece-writing-document .rich-markdown-field .markdown-toolbar { display: none; } .fundus-editor-surface .rich-markdown-field:focus-within .markdown-toolbar, .piece-writing-document .rich-markdown-field:focus-within .markdown-toolbar { display: flex; } .markdown-toolbar-toggle { display: none; align-items: center; gap: 0.3rem; border: 0; background: transparent; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; } .piece-writing-document .rich-markdown-surface, .fundus-editor-surface .piece-research-panel > .rich-markdown-field .rich-markdown-surface, .piece-writing-document .markdown-editor-field textarea, .fundus-editor-surface .piece-research-panel > .rich-markdown-field textarea { min-height: 3.4rem; padding: 0.45rem 1rem 0.95rem; border: 0; background: transparent; box-shadow: none; font-size: 0.95rem; line-height: 1.68; } .piece-writing-document .rich-markdown-field:nth-child(2) .rich-markdown-surface { min-height: 4.6rem; } .fundus-editor-surface .piece-meta-details, .fundus-editor-surface .piece-presentation-panel, .fundus-editor-surface .piece-media-panel { padding: 0.75rem; border-color: color-mix(in srgb, var(--gold) 14%, var(--line)); background: color-mix(in srgb, var(--panel-strong) 68%, transparent); box-shadow: none; } .piece-context-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; } .piece-context-heading h2 { margin: 0; font-size: 0.9rem; } .piece-context-heading small { color: var(--text-faint); font-size: 0.58rem; text-transform: uppercase; } .fundus-editor-surface .piece-meta-grid { gap: 0.45rem; margin: 0; } .fundus-editor-surface .piece-meta-grid fieldset { margin-top: 0.15rem; } .fundus-editor-surface .piece-meta-grid :is(input:not([type='checkbox']), select) { padding: 0.45rem 0.5rem; background: color-mix(in srgb, var(--field) 70%, transparent); } .piece-more-details { margin-top: 0.55rem; border-top: 1px solid var(--line); } .piece-more-details > summary { min-height: 2.3rem; padding: 0.6rem 0.1rem 0; color: var(--text-muted); cursor: pointer; font-size: 0.68rem; font-weight: 720; } .piece-more-details > div { display: grid; gap: 0.55rem; padding-top: 0.55rem; } .piece-more-details label, .piece-more-details fieldset { display: grid; gap: 0.25rem; margin: 0; padding: 0; border: 0; color: var(--text-muted); font-size: 0.66rem; font-weight: 700; } .piece-more-details :is(select, textarea) { width: 100%; min-width: 0; padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.55rem; background: var(--field); color: var(--text); } .fundus-editor-surface .presentation-mode-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; } .fundus-editor-surface .presentation-mode-picker label { min-width: 0; padding: 0.42rem 0.2rem; font-size: 0.59rem; } .fundus-editor-surface .piece-presentation-panel > .piece-panel-heading { margin-bottom: 0.55rem; } .piece-inline-presentation-preview { margin-top: 0.1rem; padding: 0.75rem; } @media (max-width: 52rem) { .fundus-editor-workspace:not(.mobile-piece-list-open) .fundus-navigation.editor-context { display: none; } .fundus-editor-workspace.mobile-piece-list-open .fundus-navigation.editor-context { position: fixed; z-index: 40; inset: calc(var(--mobile-header) + env(safe-area-inset-top) + 0.5rem) 0.65rem calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 0.5rem); display: flex; height: auto; padding: 0.75rem; overflow: hidden; background: color-mix(in srgb, var(--panel-strong) 96%, var(--bg)); box-shadow: var(--shadow-large); -webkit-backdrop-filter: none; backdrop-filter: none; } .fundus-navigation.editor-context .editor-navigation-close { display: grid; } .fundus-navigation.editor-context header { display: flex; } .fundus-navigation.editor-context header > button:not(.editor-navigation-close) { display: none; } .fundus-navigation.editor-context header > div { display: block; } .fundus-editor-surface .piece-dialog-header { align-items: flex-start; padding: 0.65rem 0.7rem 0; } .fundus-editor-surface .piece-dialog-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; } .piece-editor-title-row, .piece-editor-header-actions, .fundus-editor-surface .piece-editor-view-switch { grid-column: 1; } .piece-editor-header-actions { grid-row: 2; justify-content: flex-start; } .piece-editor-header-actions .save-indicator { max-width: 8rem; } .fundus-editor-surface .piece-editor-view-switch { grid-row: 3; display: grid; width: calc(100% + 2.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0.1rem -2.5rem 0 0; } .piece-editor-view-switch .piece-list-switch, .piece-editor-view-switch .piece-context-switch { display: block; } .piece-editor-view-switch button { min-height: 2.75rem; padding: 0.35rem 0.15rem; font-size: 0.6rem; } .fundus-editor-surface .markdown-toolbar-toggle, .piece-writing-document .markdown-toolbar-toggle { display: inline-flex; min-height: 2.35rem; margin-left: auto; cursor: pointer; } .piece-writing-document .markdown-editor-heading, .fundus-editor-surface .piece-research-panel > .rich-markdown-field .markdown-editor-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-top: 0.6rem; } .fundus-editor-surface .rich-markdown-field .markdown-toolbar { grid-column: 1 / -1; width: 100%; } .fundus-editor-surface .presentation-mode-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } .piece-action-menu > div { right: auto; left: 0; } } /* 0.8.2 intermediate-width navigation correction */ .brand-version { padding: 0.18rem 0.38rem; border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: 999px; color: var(--text-faint); font-size: 0.58rem; font-weight: 720; letter-spacing: 0.02em; } .fundus-navigation :is(nav a, header button, .editor-overview-link) > .app-icon { width: 1.1rem; height: 1.1rem; } @media (max-width: 78rem) { .fundus-workspace:has(.fundus-navigation.collapsed) { grid-template-columns: 4.1rem minmax(0, 1fr); } } @media (min-width: 52.01rem) and (max-width: 70rem) { .app-header { gap: 0.65rem; padding-inline: 0.75rem; } .app-header .main-navigation { gap: 0.18rem; } .app-header .main-navigation a { min-width: 2.75rem; justify-content: center; padding-inline: 0.6rem; } .app-header .main-navigation a > span { display: none; } .global-search-form label { min-width: clamp(10rem, 23vw, 13rem); } } @media (max-width: 52rem) { .fundus-workspace:has(.fundus-navigation.collapsed) { grid-template-columns: minmax(0, 1fr); } } /* 0.8.2 editorial workspace alignment */ .fundus-editor-surface .piece-dialog-heading { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0.4rem; } .fundus-editor-surface .piece-dialog-header { position: relative; z-index: 12; } .piece-editor-title-row { grid-column: 1; grid-row: 1; } .piece-editor-header-actions { grid-column: 1; grid-row: 2; justify-content: flex-start; } .fundus-editor-surface .piece-editor-view-switch { grid-column: 1; grid-row: 3; margin-top: 0; } .fundus-navigation .editor-piece-list { padding-right: 0.3rem; scrollbar-gutter: stable; } .fundus-navigation.editor-context.collapsed .editor-piece-list { padding-right: 0; scrollbar-gutter: auto; } /* Live uses the same quiet document and rundown language as Pieces and Streams. */ .live-page { gap: 0.45rem; } .live-command-header, .live-action-bar { border-color: color-mix(in srgb, var(--gold) 16%, var(--line)); background: color-mix(in srgb, var(--panel-strong) 88%, var(--bg)); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .live-command-header { padding: 0.4rem 0.55rem; } .live-status-row { border-top-color: color-mix(in srgb, var(--line) 72%, transparent); } .section-countdown, .total-countdown, .live-run-button, .live-menu-trigger, .timer-reset-menu > summary { background: color-mix(in srgb, var(--material-inset) 72%, transparent); } .live-workspace { gap: 0.5rem; } .live-current, .live-rail { border-color: color-mix(in srgb, var(--gold) 14%, var(--line)); background: color-mix(in srgb, var(--panel-strong) 88%, var(--bg)); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .live-current-scroll { padding: clamp(0.9rem, 2vw, 1.7rem); } .live-piece-heading, .live-twitch-tags, .live-script-document, .live-support-actions { width: min(100%, 68rem); margin-inline: auto; } .live-piece-heading { padding-bottom: 0.8rem; } .live-script-document { overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 14%, var(--line)); border-radius: 0.95rem; background: color-mix(in srgb, var(--panel-strong) 76%, transparent); } .live-script-section, .moderation-card { max-width: none; margin: 0; padding: 1rem 1.1rem; border: 0; border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent); border-radius: 0; background: transparent; } .live-script-section:first-child { border-top: 0; } .live-script-section > span, .live-script-section > .eyebrow { margin: 0 0 0.45rem; color: var(--accent); } .live-intro .prompter-copy, .live-script-section .live-markdown { max-width: 58ch; } .moderation-card .live-markdown { font-family: inherit; } .transition-card { border-top-color: color-mix(in srgb, var(--gold) 28%, var(--line)); } .live-script-document .live-empty-copy { margin: 0; padding: 2rem 1.1rem; } .live-support-actions { margin-top: 0.75rem; padding-top: 0; border-top: 0; } .live-rail { padding: 0.75rem; } .rail-section-items { gap: 0; padding-bottom: 0.5rem; } .live-run-item { border: 0; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 0; background: transparent; } .live-run-item.current { border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, var(--material-inset)); box-shadow: inset 3px 0 var(--gold); } .live-run-item.selected:not(.current) { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 3px 0 color-mix(in srgb, var(--accent) 62%, transparent); } .live-run-item.presented { outline: 1px solid color-mix(in srgb, var(--accent) 52%, transparent); outline-offset: -1px; } .live-run-item:has(.live-run-actions .text-button) { grid-template-columns: minmax(0, 1fr); } .live-run-item:has(.live-run-actions .text-button) .live-run-actions { justify-content: space-between; margin: 0; padding: 0 0.45rem 0.4rem; } .live-action-bar { padding: 0.35rem 0.5rem; } @media (max-width: 46rem) { .live-rail { background: color-mix(in srgb, var(--panel-strong) 96%, var(--bg)); } .live-script-section, .moderation-card { padding: 0.85rem 0.9rem; } } /* Stream planning keeps quick metadata beside the rundown. */ .planning-workspace { grid-template-columns: minmax(0, 1fr) clamp(18rem, 23vw, 22rem); } .planning-workspace.library-open { grid-template-columns: minmax(15rem, 18rem) minmax(20rem, 1fr) clamp(18rem, 21vw, 21rem); } .planning-workspace.library-open .builder-filter { grid-template-columns: minmax(0, 1fr); } .planning-workspace .run-pane { width: 100%; max-width: none; } .stream-inspector-slot { min-width: 0; } .stream-inspector { display: grid; position: sticky; top: 4.9rem; height: calc(100dvh - 5.65rem); grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 0; overflow: hidden; background: color-mix(in srgb, var(--panel-strong) 94%, var(--bg)); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .stream-inspector-header { padding: 0.9rem; border-bottom: 1px solid var(--line); } .stream-inspector-header > div { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .stream-inspector-header :is(h2, p) { margin: 0; } .stream-inspector-header h2 { margin-top: 0.2rem; font-size: 1.05rem; letter-spacing: -0.02em; overflow-wrap: anywhere; } .stream-inspector-header > p:last-child { margin-top: 0.3rem; color: var(--text-faint); font-size: 0.65rem; line-height: 1.45; } .stream-inspector-form { display: grid; min-height: 0; align-content: start; gap: 0.75rem; padding: 0.9rem; overflow-y: auto; scrollbar-gutter: stable; } .stream-inspector-form label, .stream-inspector-commands label { display: grid; min-width: 0; gap: 0.25rem; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; } .stream-inspector-form :is(input, select, textarea), .stream-inspector-commands select { width: 100%; min-width: 0; padding: 0.55rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 0.62rem; background: var(--field); color: var(--text); font: inherit; } .stream-inspector-form textarea { resize: vertical; } .stream-inspector-form small, .stream-inspector-note { color: var(--text-faint); font-size: 0.62rem; } .stream-inspector-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.55rem; } .stream-inspector .copy-field { grid-template-columns: minmax(0, 1fr); } .stream-inspector .copy-field button { width: fit-content; justify-self: end; } .stream-inspector-commands { padding: 0.65rem 0.9rem; border-top: 1px solid var(--line); } .stream-inspector-commands > summary { cursor: pointer; font-size: 0.68rem; font-weight: 720; } .stream-inspector-commands > div { display: grid; gap: 0.35rem; margin-top: 0.6rem; } .stream-inspector-commands form { display: flex; align-items: center; gap: 0.35rem; } .stream-inspector-commands form label { flex: 1; } .stream-inspector-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--line); background: var(--panel-strong); } .stream-inspector-actions.single-action { justify-content: flex-end; } .stream-inspector-actions .secondary-button, .stream-inspector-actions .primary-button { justify-content: center; } .editable-run-section.selected, .editable-usage.selected, .reserve-usage.selected { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent); } .section-drag-handle:focus-visible, .usage-drag-copy:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } @media (max-width: 72rem) { .planning-workspace, .planning-workspace.library-open { display: block; } .stream-inspector { position: static; height: auto; min-height: min(42rem, calc(100dvh - 10rem)); } .stream-inspector-form { overflow: visible; } } @media (max-width: 52rem) { .stream-inspector { min-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav) - 7rem); } .stream-inspector-grid { grid-template-columns: minmax(0, 1fr); } .stream-inspector-actions { position: sticky; z-index: 5; bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom)); } .stream-inspector-commands { margin-bottom: 4.5rem; } } /* Keep Post tabs above the general navigation reset declared earlier in this stylesheet. */ .post-editor-tabs { display: flex; min-height: 2.75rem; align-items: stretch; color: var(--text-muted); } .post-editor-tabs button { display: block; min-height: 2.75rem; color: inherit; pointer-events: auto; visibility: visible; opacity: 1; } .post-editor-tabs button.active { color: var(--gold-strong); } @media (max-width: 52rem) { .post-navigation, .post-editor, .post-inspector { padding-bottom: calc(var(--mobile-nav) + env(safe-area-inset-bottom)); } } /* 0.9.0 shared editorial workbench */ .unified-workspace, .fundus-list-workspace.unified-workspace { display: grid; width: 100%; min-height: calc(100dvh - 4.25rem); grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr) clamp(19rem, 23vw, 22rem); gap: 0.85rem; padding: 0.85rem; } .unified-workspace:has(.fundus-navigation.collapsed) { grid-template-columns: 4.1rem minmax(0, 1fr) clamp(19rem, 23vw, 22rem); } .workspace-navigation, .workspace-content-pane, .content-quick-inspector { min-width: 0; border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); border-radius: var(--radius-large); background: color-mix(in srgb, var(--glass) 92%, transparent); box-shadow: inset 0 1px rgb(255 255 255 / 7%); } .workspace-navigation, .content-quick-inspector { position: sticky; top: 5.1rem; display: flex; height: calc(100dvh - 5.95rem); min-height: 0; flex-direction: column; overflow: hidden; } .workspace-navigation > header, .workspace-content-pane > header, .content-quick-inspector > header { display: flex; min-height: 4.3rem; align-items: center; justify-content: space-between; gap: 0.65rem; padding: 0.8rem; border-bottom: 1px solid var(--line); } .workspace-navigation h1, .workspace-navigation h2, .workspace-content-pane > header h2, .content-quick-inspector h2 { margin: 0; font-size: 1rem; } .workspace-navigation > header > span, .workspace-content-pane > header > span { padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--material-deep); color: var(--text-muted); font-size: 0.7rem; } .workspace-filter-form, .workspace-navigation-group, .workspace-navigation-note, .workspace-navigation > .capture-panel { display: grid; gap: 0.65rem; padding: 0.8rem; border-bottom: 1px solid var(--line); } .workspace-navigation > .secondary-button { margin: 0.8rem; } .workspace-navigation-note { grid-template-columns: auto 1fr; align-items: start; color: var(--text-muted); } .workspace-navigation-note p { margin: 0; font-size: 0.75rem; line-height: 1.45; } .workspace-navigation-group > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; width: 100%; padding: 0.6rem; border-color: transparent; background: transparent; text-align: left; } .workspace-navigation-group > button.active { border-color: color-mix(in srgb, var(--gold) 36%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--material-inset)); } .workspace-navigation-group > button b { color: var(--text-faint); font-size: 0.7rem; } .content-quick-inspector > header > div { min-width: 0; } .content-quick-inspector > header h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inspector-expand-button { display: grid; width: 2.4rem; height: 2.4rem; flex: none; place-items: center; border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line)); border-radius: 0.65rem; background: color-mix(in srgb, var(--gold) 10%, var(--material-inset)); color: var(--gold-strong); } .content-quick-inspector-scroll { display: grid; min-height: 0; align-content: start; gap: 0; overflow-y: auto; scrollbar-gutter: stable; } .content-quick-inspector-scroll > form, .content-quick-inspector-scroll > section, .quick-fact-list { display: grid; gap: 0.65rem; margin: 0; padding: 0.85rem; border-bottom: 1px solid var(--line); } .content-quick-inspector-scroll label { display: grid; gap: 0.3rem; } .content-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .quick-upload-section form { display: grid; gap: 0.55rem; } .quick-fact-list > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .quick-fact-list dd { margin: 0; font-weight: 750; } .content-quick-inspector > footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding: 0.75rem; border-top: 1px solid var(--line); background: var(--panel-strong); } .content-quick-inspector > footer form { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.5rem; } .content-inspector-empty { display: grid; margin: auto; justify-items: center; padding: 1.5rem; color: var(--text-muted); text-align: center; } .content-inspector-empty .app-icon { width: 1.7rem; height: 1.7rem; color: var(--gold); } .fundus-list-workspace .fundus-list-pane, .workspace-content-pane { padding: 1rem; } .post-library-workspace .post-show-row { width: 100%; color: inherit; text-align: left; } .post-library-workspace .post-show-row.active { border-color: color-mix(in srgb, var(--gold) 52%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); box-shadow: none; } .inbox-catalog { display: grid; align-content: start; gap: 1rem; } .inbox-catalog-group { display: grid; gap: 0.35rem; } .inbox-catalog-group h3 { margin: 0.25rem 0; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; } .inbox-catalog-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; width: 100%; padding: 0.75rem; border-color: var(--line); background: color-mix(in srgb, var(--panel) 92%, transparent); color: inherit; text-align: left; } .inbox-catalog-row > span { display: grid; gap: 0.15rem; min-width: 0; } .inbox-catalog-row small { color: var(--text-faint); } .inbox-catalog-row.active { border-color: color-mix(in srgb, var(--gold) 48%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, var(--panel)); box-shadow: none; } .editor-route-shell { min-height: calc(100dvh - 4.25rem); } .editor-workspace-dialog { display: none; width: min(96rem, calc(100vw - 2rem)); height: min(58rem, calc(100dvh - 2rem)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line-strong)); border-radius: var(--radius-large); background: var(--panel-strong); box-shadow: var(--shadow-large); color: var(--text); } .editor-workspace-dialog[open] { display: block; } .editor-workspace-dialog::backdrop { background: color-mix(in srgb, var(--bg) 54%, transparent); backdrop-filter: blur(7px) saturate(0.95); } .post-workspace.post-editor-overlay, .post-workspace.post-editor-overlay.right-collapsed { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr) clamp(19rem, 23vw, 22rem); } .post-workspace.post-editor-overlay.right-collapsed { grid-template-columns: minmax(0, 1fr) 3.5rem; } .post-editor-context-toolbar { position: relative; z-index: 5; display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); background: var(--glass-chrome); } .post-editor-context-toolbar > label { min-width: 12rem; flex: 1; } .post-create-menu { position: relative; } .post-create-menu > summary { list-style: none; } .post-create-menu > div { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 20; display: grid; width: min(24rem, 80vw); gap: 0.6rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--panel-strong); box-shadow: var(--shadow-large); } .post-create-menu form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.5rem; } @media (max-width: 78rem) { .unified-workspace, .fundus-list-workspace.unified-workspace, .unified-workspace:has(.fundus-navigation.collapsed) { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); } .unified-workspace > .content-quick-inspector { position: static; width: 100%; height: auto; max-height: 42rem; grid-column: 2; } } @media (max-width: 52rem) { .unified-workspace, .fundus-list-workspace.unified-workspace, .unified-workspace:has(.fundus-navigation.collapsed) { display: block; min-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav)); padding: 0.55rem; } .unified-workspace > .fundus-navigation, .unified-workspace > .workspace-navigation { position: static; width: 100%; height: auto; margin-bottom: 0.55rem; } .unified-workspace > .content-quick-inspector { width: 100%; max-height: none; margin-top: 0.55rem; } .editor-workspace-dialog { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; } .post-workspace.post-editor-overlay, .post-workspace.post-editor-overlay.right-collapsed { display: block; height: 100%; min-height: 0; } .post-editor-overlay .post-mobile-switch { position: static; grid-template-columns: repeat(2, 1fr); } .post-editor-context-toolbar { align-items: stretch; flex-direction: column; } .post-editor-context-toolbar > label { min-width: 0; } } /* Stream-aligned Pieces and Post workbenches. */ .post-navigation-sort form, .post-navigation-sort label { display: block; } .post-navigation-sort select { width: 100%; min-width: 0; padding: 0.5rem 0.55rem; border: 1px solid var(--line); border-radius: 0.68rem; background: var(--field); color: var(--text); font: inherit; font-size: 0.72rem; } .content-quick-inspector.stream-inspector > .stream-inspector-header { display: block; min-height: 0; padding: 0.9rem; } .content-quick-inspector.stream-inspector { min-height: 0; } .content-quick-inspector.stream-inspector > .stream-inspector-header > div { display: flex; } .content-quick-inspector.stream-inspector > .stream-inspector-header h2 { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; } .piece-quick-inspector-scroll { display: block; overflow-y: auto; } .piece-quick-inspector-scroll > .stream-inspector-form { overflow: visible; border-bottom: 1px solid var(--line); } .piece-quick-inspector-scroll > .quick-upload-section { padding: 0.9rem; } .piece-quick-inspector-scroll > .quick-upload-section h3, .post-overview-inspector h3 { margin: 0; font-size: 0.76rem; } .post-overview-inspector.stream-inspector-form { gap: 0; padding: 0; } .post-overview-inspector > section, .post-overview-inspector > .quick-fact-list { padding: 0.9rem; } .post-workspace.post-editor-overlay { gap: 0.75rem; padding: 0.75rem; background: var(--material-deep); } .post-editor-overlay > .post-editor, .post-editor-overlay > .post-inspector { border: 1px solid color-mix(in srgb, var(--gold) 12%, var(--line)); border-radius: var(--radius-medium); box-shadow: inset 0 1px rgb(255 255 255 / 7%); } .post-editor-overlay > .post-editor { padding: 0; overflow: hidden; background: color-mix(in srgb, var(--panel-strong) 94%, var(--bg)); } .post-editor-overlay > .post-inspector.stream-inspector { position: static; height: auto; min-height: 0; border-left: 1px solid color-mix(in srgb, var(--gold) 12%, var(--line)); } .post-editor-overlay .post-editor-header { padding: 0.9rem; background: color-mix(in srgb, var(--panel-strong) 94%, var(--bg)); } .post-editor-overlay .post-editor-context-toolbar { padding: 0.55rem 0.9rem; background: var(--panel-strong); } .post-editor-overlay .post-editor-context-toolbar select { width: 100%; min-width: 0; padding: 0.55rem 0.62rem; border: 1px solid var(--line-strong); border-radius: 0.62rem; background: var(--field); color: var(--text); font: inherit; } .post-editor-overlay .post-inspector > .stream-inspector-header { display: block; min-height: 0; background: transparent; } .post-editor-overlay .post-inspector-scroll.stream-inspector-form { display: block; padding: 0; } .post-editor-overlay .post-inspector-scroll > section { padding: 0.9rem; } .post-editor-scroll > label, .post-editor-scroll > .post-field-grid > label, .post-tab-panel > label, .post-tab-panel > .post-field-grid > label, .post-writing-section > label, .post-editor-section > label, .post-thumbnail-upload > label { display: grid; gap: 0.3rem; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; } .post-editor-scroll :is(input, select, textarea) { border-color: var(--line-strong); background: var(--field); } @media (max-width: 72rem) { .post-workspace.post-editor-overlay { padding: 0; } .post-editor-overlay > .post-editor, .post-editor-overlay > .post-inspector { border: 0; border-radius: 0; } } /* Final cascade for the shared selection and three-pane Post workbench. */ .post-workspace.post-editor-overlay { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr) clamp(19rem, 23vw, 22rem); } .post-editor-overlay > .post-navigation { padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 12%, var(--line)); border-radius: var(--radius-medium); background: color-mix(in srgb, var(--panel-strong) 96%, transparent); } .post-editor-overlay .post-editor-scroll :is(input, select, textarea), .post-editor-overlay .post-inspector :is(input, select, textarea), .post-editor-overlay .post-editor-context-toolbar select, .post-create-menu input { background: color-mix(in srgb, var(--panel-strong) 97%, var(--gold) 3%); } label:has(> input[type='checkbox']), label:has(> input[type='radio']) { position: relative; border: 1px solid var(--line); border-radius: 0.65rem; background: transparent; cursor: pointer; } label:has(> input[type='checkbox']:checked), label:has(> input[type='radio']:checked) { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, var(--panel-strong)); box-shadow: none; color: var(--text); } label > input[type='checkbox'], label > input[type='radio'] { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; opacity: 0; } label:has(> input[type='checkbox']:focus-visible), label:has(> input[type='radio']:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } @media (max-width: 72rem) { .post-workspace.post-editor-overlay { display: block; } .post-editor-overlay > .post-navigation { border: 0; border-radius: 0; } } /* Postproduktion follows the regular Streams page instead of an editor overlay. */ .post-detail-page { width: 100%; max-width: 92rem; padding-top: 1rem; } .post-detail-heading { margin-bottom: 1rem; } .post-page-workspace { height: calc(100dvh - 13.5rem); min-height: 40rem; gap: 0.85rem; overflow: hidden; } .post-page-workspace > :is(.post-navigation, .post-editor, .post-inspector) { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-large); background: color-mix(in srgb, var(--panel-strong) 94%, var(--bg)); box-shadow: var(--shadow-soft); } .post-page-workspace > .post-navigation, .post-page-workspace > .post-inspector { border-inline: 1px solid var(--line); } .post-navigation > header { align-items: flex-start; } .post-navigation-stream { display: grid; gap: 0.15rem; margin: 0.55rem 0 0; color: var(--text-muted); font-size: 0.68rem; line-height: 1.35; } .post-navigation-stream strong { color: var(--text); font-size: 0.72rem; } .post-page-workspace .post-inspector > .stream-inspector-header { display: block; } .post-page-workspace .post-inspector > .stream-inspector-header h2 { margin-top: 0.2rem; } .post-page-workspace :is(.post-editor-scroll, .post-inspector) :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea), .post-material-dialog :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea) { width: 100%; min-width: 0; min-height: 2.45rem; padding: 0.48rem 0.58rem; border: 1px solid var(--line-strong); border-radius: 0.65rem; background: var(--field); color: var(--text); font: inherit; } .post-page-workspace :is(.post-writing-section, .post-editor-section, .post-overview-group) { border-color: var(--line); border-radius: var(--radius-large); background: var(--panel-strong); } .post-page-workspace .post-nav-group > div > button { border-radius: var(--radius-small); } .post-page-workspace .post-nav-group > div > button.active { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, var(--panel-strong)); box-shadow: none; } .post-page-workspace .post-material-button { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: var(--radius-small); background: color-mix(in srgb, var(--accent-soft) 52%, var(--panel-strong)); } .post-page-workspace .post-quick-create button { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: var(--radius-small); color: var(--accent-text); } .post-page-workspace .post-editor-tabs button.active { box-shadow: inset 0 -2px var(--gold); color: var(--gold-strong); } .post-page-workspace .post-thumbnail-grid figure.selected { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent); } .post-library-workspace .post-show-row:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel)); } .post-navigation-panel nav a.active { border-color: color-mix(in srgb, var(--gold) 38%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--material-inset)); color: var(--text); } @media (max-width: 72rem) { .post-page-workspace { height: auto; min-height: calc(100dvh - 12rem); overflow: visible; } .post-page-workspace > :is(.post-navigation, .post-editor, .post-inspector) { border-radius: var(--radius-large); } .post-mobile-switch button.active { border-color: color-mix(in srgb, var(--gold) 38%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--material-inset)); } } /* Live is a read-only projection of Streams and uses the same pane language. */ .live-view-page { width: 100%; max-width: 100rem; padding-top: 1rem; } .live-view-heading { margin-bottom: 1rem; } .live-readonly-state { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.7rem; border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line)); border-radius: 0.7rem; background: color-mix(in srgb, var(--gold) 8%, var(--panel)); color: var(--text-muted); font-size: 0.7rem; font-weight: 700; } .live-view-switch { display: none; } .live-view-workspace { display: grid; height: calc(100dvh - 13.5rem); min-height: 38rem; grid-template-columns: minmax(15rem, 18rem) minmax(22rem, 1fr) clamp(18rem, 22vw, 21rem); gap: 0.85rem; } .live-view-workspace > :is(.live-view-rundown, .live-view-content, .live-view-details) { min-width: 0; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-large); background: color-mix(in srgb, var(--panel-strong) 94%, var(--bg)); box-shadow: var(--shadow-soft); } .live-view-rundown { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0; } .live-view-rundown .pane-heading, .live-view-content-header { display: flex; min-height: 4.3rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line); } .live-view-rundown .pane-heading :is(p, h2), .live-view-content-header :is(p, h2) { margin: 0; } .live-view-rundown .pane-heading h2, .live-view-content-header h2 { margin-top: 0.15rem; font-size: 1.05rem; } .live-view-rundown .pane-heading > span { padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--material-deep); color: var(--text-muted); font-size: 0.68rem; } .live-view-rundown-scroll, .live-view-content-scroll { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } .live-view-rundown-scroll { padding: 0.75rem; } .live-view-section { display: grid; gap: 0.45rem; padding-bottom: 0.9rem; } .live-view-section + .live-view-section { padding-top: 0.9rem; border-top: 1px solid var(--line); } .live-view-section > header { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); align-items: center; gap: 0.5rem; padding: 0 0.25rem; } .live-view-section > header > span { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 0.55rem; background: var(--material-deep); color: var(--text-muted); font-size: 0.62rem; font-weight: 800; } .live-view-section > header div, .live-view-usage > span { display: grid; gap: 0.1rem; min-width: 0; } .live-view-section > header small, .live-view-usage small { color: var(--text-faint); font-size: 0.62rem; } .live-view-section > div { display: grid; gap: 0.35rem; } .live-view-usage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; width: 100%; padding: 0.65rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel-strong); color: inherit; text-align: left; } .live-view-usage:hover { border-color: color-mix(in srgb, var(--gold) 38%, var(--line)); background: color-mix(in srgb, var(--gold) 5%, var(--panel-strong)); } .live-view-usage.selected { border-color: color-mix(in srgb, var(--gold) 68%, var(--line)); background: color-mix(in srgb, var(--gold) 9%, var(--panel-strong)); box-shadow: none; } .live-view-usage.current:not(.selected) { border-color: color-mix(in srgb, var(--gold) 32%, var(--line)); } .live-view-usage time { color: var(--text-muted); font-size: 0.65rem; } .live-view-content { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0; } .live-view-content-header > strong { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; } .live-view-content-scroll { padding: clamp(1rem, 2vw, 1.4rem); } .live-view-content .live-script-document { font-size: var(--prompt-size); } .live-view-content .live-script-section { border-radius: var(--radius-large); } .live-view-empty { display: grid; margin: auto; justify-items: center; padding: 2rem; color: var(--text-muted); text-align: center; } .live-view-details.stream-inspector { position: static; top: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } .live-view-details .stream-inspector-header { display: block; } .live-view-facts, .live-view-settings { display: grid; gap: 0.65rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); } .live-view-facts h3, .live-view-settings h3 { margin: 0; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; } .live-view-facts dl { display: grid; gap: 0.45rem; margin: 0; } .live-view-facts dl > div { display: flex; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.45rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); font-size: 0.7rem; } .live-view-facts dt { color: var(--text-muted); } .live-view-facts dd { margin: 0; font-weight: 750; text-align: right; } .live-view-settings .font-control { justify-self: start; } @media (max-width: 72rem) { .live-view-page { padding-inline: 1rem; } .live-view-switch { display: flex; margin-bottom: 0.75rem; } .live-view-workspace { display: block; height: auto; min-height: calc(100dvh - 15rem); } .live-view-workspace > :is(.live-view-rundown, .live-view-content, .live-view-details) { height: auto; min-height: min(42rem, calc(100dvh - 15rem)); } .live-view-workspace > .mobile-hidden { display: none; } .live-view-rundown-scroll, .live-view-content-scroll { overflow: visible; } } @media (max-width: 52rem) { .live-view-page { padding-inline: 0.75rem; padding-bottom: calc(var(--mobile-nav) + 1rem); } .live-view-heading { align-items: flex-start; flex-direction: column; } .live-view-heading .show-summary { width: 100%; } .live-readonly-state { width: 100%; justify-content: center; } } /* Stable application geometry: navigation starts at the top, page heading stays free. */ .unified-workspace, .fundus-list-workspace.unified-workspace, .post-detail-page, .live-view-page { display: grid; width: 100%; max-width: none; min-height: calc(100dvh - 4.25rem); grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr) clamp(19rem, 23vw, 22rem); grid-template-rows: auto minmax(0, 1fr); gap: 0.85rem; margin: 0; padding: 0.85rem; } .unified-workspace > :is(.fundus-navigation, .workspace-navigation), .post-detail-page .post-navigation, .live-view-page .live-view-rundown { grid-column: 1; grid-row: 1 / 3; } .unified-workspace > :is(.fundus-list-pane, .workspace-content-pane), .post-page-workspace, .live-view-workspace { display: contents; } .unified-workspace > :is(.fundus-list-pane, .workspace-content-pane) > .page-heading, .inbox-workspace > .workspace-content-pane > header, .post-detail-page > .post-detail-heading, .live-view-page > .live-view-heading { grid-column: 2 / 4; grid-row: 1; align-self: center; min-height: 6.3rem; margin: 0; padding: 0.55rem 0.65rem; border: 0; background: transparent; box-shadow: none; } .fundus-library-content, .inbox-catalog-content, .post-library-content, .post-page-workspace > .post-editor, .live-view-workspace > .live-view-content { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius-large); background: color-mix(in srgb, var(--panel-strong) 94%, var(--bg)); box-shadow: var(--shadow-soft); } .fundus-library-content, .inbox-catalog-content, .post-library-content { align-self: start; padding: 1rem; } .unified-workspace > .content-quick-inspector, .post-page-workspace > .post-inspector, .live-view-workspace > .live-view-details { grid-column: 3; grid-row: 2; position: sticky; top: 5.1rem; height: calc(100dvh - 12.25rem); min-height: 32rem; } .post-detail-page .post-page-workspace > .post-navigation, .live-view-page .live-view-workspace > .live-view-rundown { position: sticky; top: 5.1rem; height: calc(100dvh - 5.95rem); min-height: 0; } .post-page-workspace > .post-editor, .live-view-workspace > .live-view-content { height: calc(100dvh - 12.25rem); min-height: 32rem; } .post-page-workspace > .post-mobile-switch, .live-view-page > .live-view-switch { display: none; } .live-view-content { grid-template-rows: auto minmax(0, 1fr) auto; } .live-view-content-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.55rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--line); background: var(--panel-strong); } .live-view-content-actions > :last-child { justify-self: end; } .live-view-clock { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text); font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 780; } .live-view-section { gap: 0.55rem; margin-bottom: 0.65rem; padding: 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: color-mix(in srgb, var(--panel-strong) 94%, var(--bg)); } .live-view-section + .live-view-section { padding-top: 0.7rem; border-top: 1px solid var(--line); } /* The Piece editor remains recognizably modal on desktop. */ dialog.piece-editor-dialog { width: min(88rem, calc(100vw - 5rem)); height: min(52rem, calc(100dvh - 5rem)); border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line-strong)); border-radius: 1.15rem; box-shadow: 0 1.5rem 5rem rgb(5 12 25 / 42%); } dialog:not(.piece-editor-dialog) { opacity: 0; transform: translate3d(0, 0.65rem, 0) scale(0.985); transform-origin: 50% 24%; transition: opacity 130ms ease-in, transform 150ms cubic-bezier(0.4, 0, 1, 1), display 150ms allow-discrete, overlay 150ms allow-discrete; } dialog:not(.piece-editor-dialog)[open] { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition-duration: 180ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } @starting-style { dialog:not(.piece-editor-dialog)[open] { opacity: 0; transform: translate3d(0, 0.8rem, 0) scale(0.98); } } .piece-editor-dialog[open] { transform-origin: 50% 18%; animation: surface-open 190ms cubic-bezier(0.16, 1, 0.3, 1) both; } .piece-editor-dialog.closing { pointer-events: none; animation: surface-close 145ms cubic-bezier(0.4, 0, 1, 1) both; } dialog[open]::backdrop { animation: backdrop-open 180ms ease-out both; } .piece-editor-dialog.closing::backdrop { animation: backdrop-close 145ms ease-in both; } dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-header, dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-tabs, dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-workspace, dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-footer { animation: surface-content-open 170ms cubic-bezier(0.16, 1, 0.3, 1) both; } dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-header { animation-delay: 18ms; } dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-tabs { animation-delay: 28ms; } dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-workspace { animation-delay: 38ms; } dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-footer { animation-delay: 48ms; } details > :not(summary) { animation: disclosure-open 140ms ease-out both; } .mobile-pane-switch button, .post-mobile-switch button, .dialog-close, .inspector-expand-button, .fundus-navigation, .workspace-navigation, .builder-pane, .stream-inspector { transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 160ms ease, transform 160ms cubic-bezier(0.2, 0.75, 0.25, 1), opacity 140ms ease; } .dialog-close:hover, .inspector-expand-button:hover { transform: scale(1.04); } .dialog-close:active, .inspector-expand-button:active { transform: scale(0.96); } @keyframes surface-open { from { opacity: 0; transform: translate3d(0, 0.9rem, 0) scale(0.972); box-shadow: 0 0.4rem 1.5rem rgb(5 12 25 / 18%); } 70% { transform: translate3d(0, -0.05rem, 0) scale(1.001); } } @keyframes surface-close { to { opacity: 0; transform: translate3d(0, 0.55rem, 0) scale(0.985); box-shadow: 0 0.5rem 1.8rem rgb(5 12 25 / 16%); } } @keyframes surface-content-open { from { opacity: 0; transform: translate3d(0, 0.28rem, 0); } } @keyframes backdrop-open { from { opacity: 0; } } @keyframes backdrop-close { to { opacity: 0; } } @keyframes disclosure-open { from { opacity: 0; transform: translateY(-0.2rem); } } @keyframes pane-enter { from { opacity: 0; transform: translateY(0.35rem); } } @media (max-width: 78rem) and (min-width: 52.01rem) { .unified-workspace, .fundus-list-workspace.unified-workspace, .post-detail-page, .live-view-page { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); grid-template-rows: auto auto auto; } .unified-workspace > :is(.fundus-navigation, .workspace-navigation), .post-detail-page .post-navigation, .live-view-page .live-view-rundown { grid-row: 1 / 4; } .unified-workspace > :is(.fundus-list-pane, .workspace-content-pane) > .page-heading, .inbox-workspace > .workspace-content-pane > header, .post-detail-page > .post-detail-heading, .live-view-page > .live-view-heading { grid-column: 2; } .unified-workspace > .content-quick-inspector, .post-page-workspace > .post-inspector, .live-view-workspace > .live-view-details { grid-column: 2; grid-row: 3; position: static; width: 100%; height: auto; min-height: 30rem; margin: 0; } .post-page-workspace > .post-editor, .live-view-workspace > .live-view-content { height: auto; min-height: 38rem; } .post-page-workspace > .mobile-hidden, .live-view-workspace > .mobile-hidden { display: grid; } } @media (max-width: 52rem) { .unified-workspace, .fundus-list-workspace.unified-workspace, .post-detail-page, .live-view-page { display: block; min-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav)); padding: 0.55rem 0.75rem calc(var(--mobile-nav) + 1rem); } .unified-workspace > :is(.fundus-list-pane, .workspace-content-pane), .post-page-workspace, .live-view-workspace { display: block; } .unified-workspace > :is(.fundus-list-pane, .workspace-content-pane) > .page-heading, .inbox-workspace > .workspace-content-pane > header, .post-detail-page > .post-detail-heading, .live-view-page > .live-view-heading { min-height: 0; padding: 0.65rem 0.25rem 0.9rem; } .fundus-library-content, .inbox-catalog-content, .post-library-content { padding: 0.75rem; } .post-page-workspace > .post-mobile-switch, .live-view-page > .live-view-switch { display: flex; margin-bottom: 0.75rem; } .post-page-workspace > :is(.post-navigation, .post-editor, .post-inspector), .live-view-workspace > :is(.live-view-rundown, .live-view-content, .live-view-details) { position: static; width: 100%; height: auto; min-height: calc(100dvh - var(--mobile-header) - var(--mobile-nav) - 12rem); } .post-page-workspace > :is(.post-navigation, .post-editor, .post-inspector):not(.mobile-hidden), .live-view-workspace > :is(.live-view-rundown, .live-view-content, .live-view-details):not(.mobile-hidden) { animation: pane-enter 160ms cubic-bezier(0.2, 0.75, 0.25, 1) both; } .live-view-content-actions { grid-template-columns: 1fr 1fr; position: sticky; bottom: var(--mobile-nav); z-index: 5; } .live-view-content-actions form { grid-column: 1 / 3; grid-row: 1; } .live-view-content-actions form button { width: 100%; justify-content: center; } dialog.piece-editor-dialog { width: calc(100vw - 1rem); height: calc(100dvh - 1rem); border: 1px solid var(--line); border-radius: 1rem; } } @media (prefers-reduced-motion: reduce) { .piece-editor-dialog[open], dialog[open], .piece-editor-dialog.closing, dialog[open]::backdrop, .piece-editor-dialog.closing::backdrop, dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-header, dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-tabs, dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-workspace, dialog.piece-editor-dialog[open]:not(.closing) > .piece-dialog-footer, details > :not(summary), .post-page-workspace > :is(.post-navigation, .post-editor, .post-inspector):not(.mobile-hidden), .live-view-workspace > :is(.live-view-rundown, .live-view-content, .live-view-details):not(.mobile-hidden) { animation: none; } dialog:not(.piece-editor-dialog) { transition: none; } .mobile-pane-switch button, .post-mobile-switch button, .dialog-close, .inspector-expand-button, .fundus-navigation, .workspace-navigation, .builder-pane, .stream-inspector { transition: none; } } @media (max-width: 52rem) { .post-detail-page { padding-inline: 0.75rem; } .post-detail-heading { padding-inline: 0.25rem; } }