Spaces:
Runtime error
Runtime error
| /* App pages: shared layout primitives, modals, pickers, artifacts, calendar, topic map. | |
| Strict palette: black, #217cff, white. Error and danger states use white contrast, never red. */ | |
| /* Layout primitives */ | |
| .page-wrap { | |
| display: grid; | |
| gap: 20px; | |
| max-width: 1280px; | |
| } | |
| .page-head { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| gap: 16px; | |
| } | |
| .page-head h1 { | |
| font-size: clamp(1.6rem, 4vw, 2.25rem); | |
| margin-top: 8px; | |
| } | |
| .page-actions, | |
| .row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .row.between { | |
| justify-content: space-between; | |
| } | |
| .row.end { | |
| justify-content: flex-end; | |
| } | |
| .row.wrap { | |
| row-gap: 12px; | |
| } | |
| .stack { | |
| display: grid; | |
| gap: 14px; | |
| align-content: start; | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .two-col, | |
| .grid-cards, | |
| .gallery { | |
| display: grid; | |
| gap: 16px; | |
| align-items: start; | |
| } | |
| @media (min-width: 960px) { | |
| .two-col { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| @media (min-width: 720px) { | |
| .grid-cards { | |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
| } | |
| .gallery { | |
| grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); | |
| } | |
| } | |
| .lede { | |
| max-width: 70ch; | |
| } | |
| .small, | |
| .small-link { | |
| font-size: 0.8125rem; | |
| } | |
| .small-link { | |
| text-decoration: none; | |
| } | |
| .small-link:hover { | |
| color: var(--white); | |
| } | |
| .notice { | |
| padding: 10px 14px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: var(--radius-sm); | |
| background: var(--blue-10); | |
| } | |
| .clamp-3 { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| h2 { | |
| font-size: 1.2rem; | |
| } | |
| h3 { | |
| font-size: 1.05rem; | |
| } | |
| /* Form bits */ | |
| .field { | |
| display: grid; | |
| gap: 6px; | |
| min-width: 0; | |
| flex: 1; | |
| } | |
| .field > span:first-child { | |
| font-size: 0.8125rem; | |
| color: var(--text-2); | |
| } | |
| .field-row { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .input-sm { | |
| height: 38px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.9rem; | |
| padding: 0 12px; | |
| } | |
| select.input { | |
| appearance: none; | |
| background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), | |
| linear-gradient(135deg, var(--text-2) 50%, transparent 50%); | |
| background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; | |
| background-size: 5px 5px; | |
| background-repeat: no-repeat; | |
| padding-right: 30px; | |
| } | |
| /* Dropdown: the themed select (components/Dropdown.tsx) */ | |
| .dropdown { | |
| position: relative; | |
| } | |
| .dropdown-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| width: 100%; | |
| height: 48px; | |
| padding: 0 16px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: rgba(0, 0, 0, 0.6); | |
| color: var(--text); | |
| font: 400 1rem var(--font-body); | |
| text-align: left; | |
| cursor: pointer; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .dropdown-btn:hover, | |
| .dropdown.open .dropdown-btn, | |
| .dropdown-btn:focus-visible { | |
| border-color: var(--blue); | |
| box-shadow: var(--glow-sm); | |
| outline: none; | |
| } | |
| .dropdown-value { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| min-width: 0; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .dropdown-value strong { | |
| font-weight: 500; | |
| } | |
| .dropdown-value .muted { | |
| font-size: 0.875rem; | |
| } | |
| .dropdown-chevron { | |
| flex: none; | |
| color: var(--text-2); | |
| transition: transform 0.15s; | |
| } | |
| .dropdown.open .dropdown-chevron { | |
| transform: rotate(180deg); | |
| } | |
| .dropdown-list { | |
| position: fixed; /* portalled to <body>, placed by Dropdown.tsx */ | |
| z-index: 1000; | |
| margin: 0; | |
| padding: 6px; | |
| list-style: none; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: var(--black); | |
| box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), var(--glow-sm); | |
| max-height: 288px; /* about six options, then it scrolls */ | |
| overflow-y: auto; | |
| overscroll-behavior: contain; | |
| } | |
| .dropdown-option { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| } | |
| .dropdown-group { | |
| padding: 8px 12px 4px; | |
| color: var(--text-3); | |
| font: 500 0.68rem var(--font-mono); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| cursor: default; | |
| } | |
| .dropdown-group.divider, | |
| .dropdown-option.divider { | |
| position: relative; | |
| margin-top: 9px; | |
| } | |
| .dropdown-group.divider::before, | |
| .dropdown-option.divider::before { | |
| content: ""; | |
| position: absolute; | |
| top: -5px; | |
| left: 8px; | |
| right: 8px; | |
| height: 1px; | |
| background: var(--line); | |
| } | |
| .dropdown-option .dropdown-value { | |
| flex: 1; | |
| } | |
| .dropdown-option.active { | |
| background: var(--blue-10); | |
| } | |
| .dropdown-option.on strong { | |
| color: var(--blue); | |
| } | |
| .dropdown-check { | |
| flex: none; | |
| color: var(--blue); | |
| } | |
| select.input option { | |
| background: var(--black); | |
| } | |
| .textarea { | |
| width: 100%; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--line-strong); | |
| background: rgba(0, 0, 0, 0.6); | |
| color: var(--text); | |
| font: 400 0.9375rem/1.5 var(--font-body); | |
| resize: vertical; | |
| } | |
| .textarea:focus { | |
| outline: none; | |
| border-color: var(--blue); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .textarea:disabled { | |
| opacity: 0.7; | |
| } | |
| .file-input { | |
| height: auto; | |
| padding: 8px 12px; | |
| border-radius: var(--radius-sm); | |
| } | |
| .search { | |
| max-width: 280px; | |
| } | |
| .check { | |
| display: flex; | |
| gap: 10px; | |
| align-items: flex-start; | |
| font-size: 0.9rem; | |
| color: var(--text-2); | |
| cursor: pointer; | |
| } | |
| .check input { | |
| accent-color: var(--blue); | |
| margin-top: 3px; | |
| } | |
| .over { | |
| color: var(--white); | |
| font-weight: 700; | |
| text-decoration: underline wavy var(--blue); | |
| } | |
| .color { | |
| width: 44px; | |
| height: 38px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| padding: 2px; | |
| } | |
| /* Buttons */ | |
| .btn-small { | |
| height: 34px; | |
| padding: 0 14px; | |
| font-size: 0.8125rem; | |
| } | |
| .btn-danger { | |
| border-color: var(--line-strong); | |
| color: var(--text-2); | |
| } | |
| .btn-danger:hover, | |
| .btn-danger.armed { | |
| color: var(--black); | |
| background: var(--white); | |
| border-color: var(--white); | |
| box-shadow: none; | |
| } | |
| .icon-btn { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 999px; | |
| border: 1px solid transparent; | |
| background: transparent; | |
| color: var(--text-2); | |
| cursor: pointer; | |
| } | |
| .icon-btn:hover { | |
| color: var(--white); | |
| border-color: var(--line-strong); | |
| } | |
| .link-btn.active { | |
| color: var(--blue); | |
| } | |
| /* Status pills */ | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 10px; | |
| border-radius: 999px; | |
| font-size: 0.7rem; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| .pill-ok { | |
| border: 1px solid var(--blue-60); | |
| background: var(--blue-10); | |
| color: var(--white); | |
| } | |
| .pill-busy { | |
| border: 1px dashed var(--line-strong); | |
| color: var(--text-2); | |
| animation: pill-pulse 1.6s ease-in-out infinite; | |
| } | |
| .pill-bad { | |
| border: 1px solid var(--white); | |
| background: var(--white); | |
| color: var(--black); | |
| } | |
| @keyframes pill-pulse { | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .pill-busy { | |
| animation: none; | |
| } | |
| } | |
| .ascent-failed .ascent-fill { | |
| background: repeating-linear-gradient(45deg, var(--white) 0 6px, transparent 6px 12px); | |
| box-shadow: none; | |
| } | |
| .ascent-failed .ascent-fill::after { | |
| display: none; | |
| } | |
| .ascent-failed .ascent-meta { | |
| color: var(--white); | |
| } | |
| .ascent-compact .ascent-track { | |
| height: 4px; | |
| } | |
| .loading { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 24px 0; | |
| } | |
| /* A page's first load: the loader in the middle of the space under the header */ | |
| .loading-center { | |
| display: grid; | |
| place-items: center; | |
| min-height: 60vh; | |
| } | |
| /* No header above it (the whole page is loading): centre in nearly the full window height */ | |
| .loading-center.full { | |
| min-height: 80vh; | |
| } | |
| /* Inside a card (a tab still loading): centred, without claiming most of the window */ | |
| .loading-center.inline { | |
| min-height: 200px; | |
| } | |
| /* The label sits under the spinner, both centred */ | |
| .loading-center .loading { | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .empty-state h3 { | |
| color: var(--white); | |
| } | |
| .empty-state.small p { | |
| max-width: 52ch; | |
| } | |
| /* Tabs */ | |
| .tabs { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| padding: 4px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| width: fit-content; | |
| max-width: 100%; | |
| } | |
| .tab { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 14px; | |
| border: none; | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text-2); | |
| font: 500 0.8125rem var(--font-body); | |
| cursor: pointer; | |
| } | |
| .tab:hover { | |
| color: var(--white); | |
| } | |
| .tab.active { | |
| background: var(--blue); | |
| color: var(--white); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .tab-count { | |
| font-size: 0.7rem; | |
| opacity: 0.7; | |
| } | |
| /* Modal and drawer */ | |
| .modal-backdrop, | |
| .drawer-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 50; | |
| background: rgba(0, 0, 0, 0.72); | |
| backdrop-filter: blur(4px); | |
| } | |
| .modal-backdrop { | |
| display: grid; | |
| place-items: center; | |
| padding: 16px; | |
| overflow: auto; | |
| } | |
| .modal { | |
| width: min(520px, 100%); | |
| max-height: calc(100vh - 32px); | |
| overflow: auto; | |
| background: var(--black); | |
| border-color: var(--line-strong); | |
| box-shadow: var(--glow-lg); | |
| display: grid; | |
| gap: 16px; | |
| } | |
| .modal:focus { | |
| outline: none; | |
| } | |
| .modal-wide { | |
| width: min(760px, 100%); | |
| } | |
| .modal-head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .drawer { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: min(720px, 100%); | |
| background: var(--black); | |
| border-left: 1px solid var(--line-strong); | |
| box-shadow: var(--glow-lg); | |
| overflow: auto; | |
| padding: 28px 24px 48px; | |
| } | |
| .drawer-close { | |
| position: sticky; | |
| top: 0; | |
| float: right; | |
| background: var(--black); | |
| } | |
| /* Reader */ | |
| .reader { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .reader-lines { | |
| margin-top: 12px; | |
| font-size: 0.975rem; | |
| line-height: 1.65; | |
| } | |
| .reader-line { | |
| display: grid; | |
| grid-template-columns: 40px 1fr; | |
| gap: 8px; | |
| padding: 2px 6px; | |
| border-radius: 6px; | |
| } | |
| .reader-line.hit { | |
| background: var(--blue-20); | |
| box-shadow: inset 3px 0 0 var(--blue); | |
| } | |
| .reader-n { | |
| color: var(--text-3); | |
| font-size: 0.7rem; | |
| text-align: right; | |
| padding-top: 4px; | |
| user-select: none; | |
| } | |
| .reader-gap { | |
| height: 10px; | |
| } | |
| .reader-h { | |
| font-family: var(--font-display); | |
| font-weight: 600; | |
| } | |
| .reader-h.h1 { | |
| font-size: 1.6rem; | |
| } | |
| .reader-h.h2 { | |
| font-size: 1.2rem; | |
| margin-top: 8px; | |
| } | |
| /* Picker */ | |
| .picker { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .picker-bar { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .picker-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 0.75rem; | |
| } | |
| /* Tick-all box: lines up with the row checkboxes below it */ | |
| .picker-all { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding-left: 13px; | |
| cursor: pointer; | |
| } | |
| .picker-all input { | |
| accent-color: var(--blue); | |
| } | |
| .picker-list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| max-height: 320px; | |
| overflow: auto; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| } | |
| .picker-row { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 2px 10px; | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--line); | |
| cursor: pointer; | |
| } | |
| /* Hover only: a picked post shows by its tick, not a highlight */ | |
| .picker-row:hover { | |
| background: var(--blue-10); | |
| } | |
| .picker-row.locked { | |
| cursor: not-allowed; | |
| opacity: 0.5; | |
| } | |
| .picker-row.locked:hover { | |
| background: none; | |
| } | |
| .picker-row input { | |
| accent-color: var(--blue); | |
| grid-row: span 2; | |
| margin-top: 4px; | |
| } | |
| .picker-title { | |
| font-size: 0.9rem; | |
| } | |
| .picker-meta { | |
| font-size: 0.7rem; | |
| } | |
| /* Lists of posts */ | |
| .doc-list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| } | |
| .doc-row { | |
| display: grid; | |
| gap: 2px; | |
| padding: 10px 0; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .doc-row .mono { | |
| font-size: 0.75rem; | |
| } | |
| .doc-title { | |
| text-align: left; | |
| font-size: 0.95rem; | |
| } | |
| .posts-table { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .add-source { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .source-card, | |
| .nb-card { | |
| display: grid; | |
| gap: 10px; | |
| align-content: start; | |
| } | |
| .source-card .mono, | |
| .nb-card .mono { | |
| font-size: 0.75rem; | |
| } | |
| .nb-card-link { | |
| display: grid; | |
| gap: 6px; | |
| text-decoration: none; | |
| } | |
| .nb-card-link:hover h3 { | |
| color: var(--blue); | |
| } | |
| /* Chips, citations, transcript */ | |
| .chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .chip { | |
| padding: 2px 10px; | |
| border-radius: 999px; | |
| border: 1px solid var(--blue-35); | |
| font-size: 0.75rem; | |
| } | |
| .cite-marker { | |
| display: inline-grid; | |
| place-items: center; | |
| min-width: 18px; | |
| height: 18px; | |
| margin: 0 2px; | |
| padding: 0 4px; | |
| border-radius: 6px; | |
| border: 1px solid var(--blue-60); | |
| background: var(--blue-10); | |
| color: var(--white); | |
| font-size: 0.65rem; | |
| vertical-align: super; | |
| cursor: pointer; | |
| } | |
| .cite-marker:hover { | |
| background: var(--blue); | |
| } | |
| .cite-title { | |
| text-align: left; | |
| } | |
| .transcript { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 8px; | |
| max-height: 320px; | |
| overflow: auto; | |
| font-size: 0.875rem; | |
| } | |
| .transcript li { | |
| display: grid; | |
| grid-template-columns: auto auto 1fr; | |
| gap: 8px; | |
| align-items: start; | |
| } | |
| .transcript-src { | |
| grid-column: 3; | |
| font-size: 0.7rem; | |
| } | |
| .transcript-time { | |
| font-size: 0.7rem; | |
| } | |
| .speaker { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| font: 600 0.65rem var(--font-mono); | |
| } | |
| .speaker-host_a { | |
| background: var(--blue); | |
| } | |
| .speaker-host_b { | |
| background: var(--white); | |
| color: var(--black); | |
| } | |
| /* Artifacts */ | |
| .artifact { | |
| display: grid; | |
| gap: 12px; | |
| align-content: start; | |
| padding: 18px; | |
| } | |
| .artifact-head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 12px; | |
| } | |
| .artifact-head h3 { | |
| margin-top: 4px; | |
| overflow-wrap: anywhere; | |
| } | |
| .artifact-head .mono { | |
| font-size: 0.7rem; | |
| } | |
| .artifact-body { | |
| display: grid; | |
| gap: 10px; | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| } | |
| .artifact-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .player { | |
| width: 100%; | |
| border-radius: var(--radius-sm); | |
| background: var(--black); | |
| } | |
| .video-short { | |
| max-height: 520px; | |
| aspect-ratio: 9 / 16; | |
| width: auto; | |
| justify-self: center; | |
| } | |
| .still { | |
| width: 100%; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--line); | |
| } | |
| .slides { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| /* Notebook view */ | |
| @media (min-width: 1100px) { | |
| .nbv { | |
| grid-template-columns: 260px minmax(0, 1fr) 360px; | |
| } | |
| } | |
| .nbv-doc { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 0 6px; | |
| font-size: 0.875rem; | |
| } | |
| .nbv-doc .link-btn { | |
| text-align: left; | |
| color: var(--text-2); | |
| } | |
| .nbv-doc .link-btn:hover { | |
| color: var(--white); | |
| } | |
| .nbv-doc .mono { | |
| font-size: 0.7rem; | |
| grid-column: 1; | |
| } | |
| .nbv-remove { | |
| grid-row: 1 / span 2; | |
| grid-column: 2; | |
| width: 26px; | |
| height: 26px; | |
| opacity: 0.55; /* always visible, so removing a post is easy to find */ | |
| } | |
| .nbv-doc:hover .nbv-remove, | |
| .nbv-remove:focus { | |
| opacity: 1; | |
| } | |
| .chat-bar { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .chat-bar select { | |
| max-width: 360px; | |
| } | |
| .turn-text { | |
| line-height: 1.65; | |
| white-space: pre-wrap; | |
| } | |
| .studio-buttons, | |
| .studio-group { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .studio-buttons { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .studio-group { | |
| padding-top: 10px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .studio-list { | |
| display: grid; | |
| gap: 12px; | |
| padding-top: 10px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .nbv-studio .artifact { | |
| padding: 14px; | |
| } | |
| /* Topic map */ | |
| .map-layout { | |
| display: grid; | |
| gap: 16px; | |
| } | |
| @media (min-width: 1100px) { | |
| .map-layout { | |
| grid-template-columns: minmax(0, 1fr) 320px; | |
| } | |
| } | |
| .map-canvas { | |
| padding: 8px; | |
| background: radial-gradient(60% 50% at 50% 50%, var(--blue-05), transparent 70%), var(--surface); | |
| } | |
| .map-canvas svg { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .map-node { | |
| cursor: grab; | |
| touch-action: none; | |
| transition: opacity 0.2s; | |
| } | |
| .map-node:focus { | |
| outline: none; | |
| } | |
| .map-node:focus circle:last-of-type { | |
| stroke: var(--blue); | |
| stroke-width: 2; | |
| } | |
| .map-label { | |
| fill: var(--white); | |
| font: 500 12px var(--font-body); | |
| paint-order: stroke; | |
| stroke: var(--black); | |
| stroke-width: 4px; | |
| pointer-events: none; | |
| } | |
| .map-side { | |
| display: grid; | |
| gap: 12px; | |
| align-content: start; | |
| max-height: 720px; | |
| overflow: auto; | |
| } | |
| .topic-rank { | |
| display: grid; | |
| gap: 6px; | |
| padding-left: 20px; | |
| margin: 0; | |
| } | |
| /* Voice */ | |
| .consent { | |
| margin: 0; | |
| padding: 12px 16px; | |
| border-left: 3px solid var(--blue); | |
| background: var(--blue-05); | |
| font-size: 0.9rem; | |
| } | |
| /* Launch Kit */ | |
| .kit-layout { | |
| display: grid; | |
| gap: 16px; | |
| align-items: start; | |
| } | |
| @media (min-width: 1100px) { | |
| .kit-layout { | |
| grid-template-columns: 340px minmax(0, 1fr); | |
| } | |
| } | |
| .kit-list { | |
| list-style: none; | |
| margin: 12px 0 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 8px; | |
| font-size: 0.875rem; | |
| } | |
| .kit-list .link-btn { | |
| text-align: left; | |
| } | |
| .post-edit, | |
| .slide-edit { | |
| display: grid; | |
| gap: 6px; | |
| padding: 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| } | |
| .hooks, | |
| .claims { | |
| display: grid; | |
| gap: 14px; | |
| padding-left: 20px; | |
| margin: 0; | |
| } | |
| .hooks li, | |
| .claims li { | |
| display: grid; | |
| gap: 4px; | |
| justify-items: start; | |
| } | |
| .pull { | |
| margin: 0; | |
| padding: 14px 18px; | |
| border-left: 3px solid var(--blue); | |
| font-family: var(--font-display); | |
| font-size: 1.15rem; | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .pull footer { | |
| font-size: 0.75rem; | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .seo { | |
| display: grid; | |
| gap: 6px 16px; | |
| margin: 0; | |
| } | |
| .seo dt { | |
| font-size: 0.75rem; | |
| color: var(--blue); | |
| font-family: var(--font-mono); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-top: 8px; | |
| } | |
| .seo dd { | |
| margin: 0; | |
| } | |
| .seo ul { | |
| margin: 0; | |
| padding-left: 18px; | |
| display: grid; | |
| gap: 4px; | |
| } | |
| /* Launchpad */ | |
| .accounts { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .account-list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .account { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 6px 6px 6px 12px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| } | |
| .account img { | |
| border-radius: 50%; | |
| } | |
| .cal-head { | |
| margin-bottom: 12px; | |
| } | |
| .cal-grid { | |
| display: grid; | |
| grid-template-columns: repeat(7, minmax(0, 1fr)); | |
| gap: 4px; | |
| } | |
| .cal-weekday { | |
| font-size: 0.7rem; | |
| padding: 4px; | |
| } | |
| .cal-day { | |
| min-height: 96px; | |
| padding: 6px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| min-width: 0; | |
| } | |
| .cal-day.out { | |
| opacity: 0.35; | |
| } | |
| .cal-day.today { | |
| border-color: var(--blue); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .cal-date { | |
| font-size: 0.7rem; | |
| color: var(--text-2); | |
| } | |
| .cal-item { | |
| display: block; | |
| width: 100%; | |
| padding: 3px 6px; | |
| border-radius: 6px; | |
| border: 1px solid var(--blue-35); | |
| background: var(--blue-10); | |
| color: var(--white); | |
| font: 500 0.7rem var(--font-body); | |
| text-align: left; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| cursor: pointer; | |
| } | |
| .cal-item:hover { | |
| border-color: var(--blue); | |
| } | |
| .cal-posted, | |
| .cal-reminded { | |
| background: var(--blue); | |
| } | |
| .cal-failed { | |
| background: var(--white); | |
| color: var(--black); | |
| border-color: var(--white); | |
| } | |
| .cal-draft { | |
| border-style: dashed; | |
| background: transparent; | |
| } | |
| @media (max-width: 720px) { | |
| .cal-day { | |
| min-height: 64px; | |
| } | |
| .cal-item .mono { | |
| display: none; | |
| } | |
| } | |
| .agenda { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| } | |
| .agenda-row { | |
| display: grid; | |
| grid-template-columns: 150px 120px minmax(0, 1fr) auto auto; | |
| gap: 12px; | |
| align-items: center; | |
| width: 100%; | |
| padding: 10px 4px; | |
| border: none; | |
| border-bottom: 1px solid var(--line); | |
| background: transparent; | |
| color: var(--text); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .agenda-row:hover { | |
| background: var(--blue-05); | |
| } | |
| .agenda-text { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| @media (max-width: 720px) { | |
| .agenda-row { | |
| grid-template-columns: 1fr auto; | |
| } | |
| .agenda-text { | |
| grid-column: 1 / -1; | |
| } | |
| } | |
| .metrics { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| font-size: 0.8125rem; | |
| color: var(--text-2); | |
| } | |
| /* Resurfacing */ | |
| .resurface-row { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .score { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| border: 1px solid var(--blue-60); | |
| box-shadow: var(--glow-sm); | |
| font-size: 0.8rem; | |
| } | |
| .angle { | |
| font-family: var(--font-display); | |
| font-size: 1.05rem; | |
| } | |
| /* Settings */ | |
| .meter { | |
| display: grid; | |
| gap: 6px; | |
| font-size: 0.9rem; | |
| } | |
| .integrations { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 6px; | |
| font-size: 0.8125rem; | |
| } | |
| .integrations li { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .integrations .ok { | |
| color: var(--blue); | |
| } | |
| .integrations .off { | |
| color: var(--text-3); | |
| } | |
| .logo-preview { | |
| width: 44px; | |
| height: 44px; | |
| object-fit: contain; | |
| background: var(--white); | |
| border-radius: 8px; | |
| } | |
| /* Mission Control */ | |
| .mc { | |
| display: grid; | |
| gap: 16px; | |
| } | |
| .checklist ol { | |
| list-style: none; | |
| margin: 10px 0 0; | |
| padding: 0; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px 20px; | |
| } | |
| .checklist li { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.9rem; | |
| } | |
| .checklist li.done a { | |
| color: var(--text-3); | |
| text-decoration: line-through; | |
| } | |
| .check-dot { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| border: 1px solid var(--blue-60); | |
| } | |
| .checklist li.done .check-dot { | |
| background: var(--blue); | |
| } | |
| .recent-list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .recent-list li { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 0.875rem; | |
| } | |
| .recent-list a { | |
| text-decoration: none; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| min-width: 0; | |
| } | |
| .recent-list .mono { | |
| font-size: 0.7rem; | |
| white-space: nowrap; | |
| } | |
| .mc-card .add-source { | |
| padding: 0; | |
| border: none; | |
| background: transparent; | |
| } | |
| /* Collapsible sidebar (desktop). Collapsed keeps icons, labels move into tooltips. */ | |
| .sidebar-top { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .sidebar-toggle { | |
| display: none; | |
| } | |
| @media (min-width: 900px) { | |
| .shell { | |
| transition: grid-template-columns 0.2s ease; | |
| } | |
| .sidebar-toggle { | |
| display: inline-grid; | |
| } | |
| .shell.collapsed { | |
| grid-template-columns: 64px 1fr; | |
| } | |
| .shell.collapsed .sidebar { | |
| padding: 16px 10px; | |
| align-items: center; | |
| } | |
| .shell.collapsed .sidebar-top { | |
| flex-direction: column; | |
| } | |
| /* Collapsed: only the logo, which expands the sidebar again. */ | |
| .shell.collapsed .sidebar-toggle, | |
| .shell.collapsed .sidebar nav, | |
| .shell.collapsed .sidebar-user { | |
| display: none; | |
| } | |
| .sidebar-brand-btn { | |
| padding: 4px; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| cursor: pointer; | |
| transition: box-shadow 0.2s ease; | |
| } | |
| .sidebar-brand-btn:hover, | |
| .sidebar-brand-btn:focus-visible { | |
| outline: none; | |
| box-shadow: 0 0 0 1px var(--blue-60), 0 0 16px var(--blue-35); | |
| } | |
| .shell.collapsed .side-link { | |
| justify-content: center; | |
| padding: 10px; | |
| } | |
| .shell.collapsed .side-label { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| clip: rect(0 0 0 0); | |
| white-space: nowrap; | |
| } | |
| .shell.collapsed .sidebar-user { | |
| justify-items: center; | |
| } | |
| .shell.collapsed .sidebar-user .link-btn { | |
| font-size: 0.75rem; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .shell { | |
| transition: none; | |
| } | |
| } | |
| /* First run onboarding */ | |
| .welcome { | |
| min-height: 100vh; | |
| } | |
| .welcome-wrap { | |
| position: relative; | |
| z-index: 1; | |
| width: min(720px, 100%); | |
| margin: 0 auto; | |
| padding: 32px var(--gutter) 64px; | |
| display: grid; | |
| gap: 24px; | |
| } | |
| .welcome-top { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .welcome-steps { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 8px; | |
| font-size: 0.75rem; | |
| color: var(--text-3); | |
| } | |
| .welcome-steps li { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .welcome-dot { | |
| height: 3px; | |
| border-radius: 999px; | |
| background: var(--line-strong); | |
| transition: background 0.3s, box-shadow 0.3s; | |
| } | |
| .welcome-steps li.done .welcome-dot { | |
| background: var(--blue-60); | |
| } | |
| .welcome-steps li.current { | |
| color: var(--white); | |
| } | |
| .welcome-steps li.current .welcome-dot { | |
| background: var(--blue); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .welcome-card { | |
| display: grid; | |
| gap: 18px; | |
| padding: clamp(24px, 5vw, 44px); | |
| background: rgba(0, 0, 0, 0.72); | |
| border-color: var(--line-strong); | |
| box-shadow: var(--glow-lg); | |
| animation: welcome-in 0.35s ease both; | |
| } | |
| .welcome-card h1 { | |
| font-size: clamp(1.8rem, 5vw, 2.6rem); | |
| line-height: 1.1; | |
| } | |
| @keyframes welcome-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(12px); | |
| } | |
| } | |
| .welcome-form { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .welcome-form .input { | |
| flex: 1 1 260px; | |
| height: 54px; | |
| font-size: 1.05rem; | |
| } | |
| .welcome-form .btn { | |
| height: 54px; | |
| padding: 0 28px; | |
| } | |
| .welcome-drop { | |
| flex: 1 1 100%; | |
| display: grid; | |
| place-items: center; | |
| gap: 4px; | |
| padding: 28px 16px; | |
| border: 1px dashed var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| text-align: center; | |
| cursor: pointer; | |
| transition: border-color 0.2s, background 0.2s; | |
| } | |
| .welcome-drop:hover, | |
| .welcome-drop.over, | |
| .welcome-drop:focus-within { | |
| border-color: var(--blue); | |
| background: var(--blue-05); | |
| } | |
| .welcome-drop input { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| opacity: 0; | |
| } | |
| .welcome-files { | |
| flex: 1 1 100%; | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 4px; | |
| } | |
| .welcome-files li { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 6px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| overflow-wrap: anywhere; | |
| } | |
| .welcome-cap { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 14px 16px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: var(--radius-sm); | |
| background: var(--blue-05); | |
| } | |
| .welcome-cap p { | |
| margin: 4px 0 0; | |
| } | |
| .welcome-examples { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.75rem; | |
| } | |
| .welcome-examples .chip { | |
| background: transparent; | |
| color: var(--text-2); | |
| cursor: pointer; | |
| font: inherit; | |
| } | |
| .welcome-examples .chip:hover { | |
| color: var(--white); | |
| border-color: var(--blue); | |
| } | |
| .goal-grid { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| @media (min-width: 640px) { | |
| .goal-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| .goal { | |
| display: grid; | |
| gap: 8px; | |
| align-content: start; | |
| padding: 18px; | |
| border-radius: var(--radius); | |
| border: 1px solid var(--line-strong); | |
| background: var(--surface); | |
| color: var(--text); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; | |
| } | |
| .goal:hover { | |
| border-color: var(--blue-60); | |
| } | |
| .goal.on { | |
| border-color: var(--blue); | |
| background: var(--blue-10); | |
| box-shadow: var(--glow-md); | |
| } | |
| .goal .muted { | |
| font-size: 0.85rem; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .welcome-card { | |
| animation: none; | |
| } | |
| } | |
| /* Markdown in answers and summaries */ | |
| .md { | |
| display: grid; | |
| gap: 0.85em; | |
| line-height: 1.7; | |
| font-size: 0.975rem; | |
| color: var(--text); | |
| overflow-wrap: anywhere; | |
| } | |
| .md > * { | |
| margin: 0; | |
| } | |
| .md h3, | |
| .md h4, | |
| .md h5 { | |
| font-family: var(--font-display); | |
| line-height: 1.3; | |
| margin-top: 0.4em; | |
| } | |
| .md h3 { | |
| font-size: 1.15rem; | |
| } | |
| .md h4 { | |
| font-size: 1.02rem; | |
| } | |
| .md h5 { | |
| font-size: 0.95rem; | |
| color: var(--text-2); | |
| } | |
| .md ul, | |
| .md ol { | |
| padding-left: 1.4em; | |
| display: grid; | |
| gap: 0.4em; | |
| } | |
| .md li > ul, | |
| .md li > ol { | |
| margin-top: 0.4em; | |
| } | |
| .md ul li::marker { | |
| color: var(--blue); | |
| } | |
| .md ol li::marker { | |
| color: var(--blue); | |
| font-family: var(--font-mono); | |
| font-size: 0.85em; | |
| } | |
| .md strong { | |
| color: var(--white); | |
| font-weight: 650; | |
| } | |
| .md em { | |
| color: var(--text-2); | |
| } | |
| .md a { | |
| color: var(--white); | |
| text-decoration-color: var(--blue-60); | |
| text-underline-offset: 3px; | |
| } | |
| .md code { | |
| font-family: var(--font-mono); | |
| font-size: 0.85em; | |
| padding: 1px 6px; | |
| border-radius: 6px; | |
| background: var(--surface-2); | |
| border: 1px solid var(--line); | |
| } | |
| .md pre { | |
| padding: 14px 16px; | |
| border-radius: var(--radius-sm); | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--line); | |
| overflow-x: auto; | |
| } | |
| .md pre code { | |
| padding: 0; | |
| border: none; | |
| background: none; | |
| font-size: 0.8125rem; | |
| line-height: 1.6; | |
| } | |
| /* Code blocks: language bar, copy, highlighting, collapse */ | |
| .md-code { | |
| position: relative; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| background: rgba(255, 255, 255, 0.03); | |
| overflow: hidden; | |
| max-width: 100%; | |
| } | |
| .md-code-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| padding: 6px 8px 6px 14px; | |
| border-bottom: 1px solid var(--line); | |
| background: rgba(33, 124, 255, 0.06); | |
| font-size: 0.7rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-3); | |
| } | |
| .md-code-copy, | |
| .md-code-more { | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text-2); | |
| font-size: 0.7rem; | |
| letter-spacing: 0.06em; | |
| padding: 3px 10px; | |
| cursor: pointer; | |
| } | |
| .md-code-copy:hover, | |
| .md-code-more:hover { | |
| color: var(--white); | |
| border-color: var(--blue-60); | |
| } | |
| .md-code pre { | |
| margin: 0; | |
| border: none; | |
| border-radius: 0; | |
| background: transparent; | |
| max-height: 520px; | |
| overflow: auto; | |
| } | |
| .md-code.collapsed pre { | |
| mask-image: linear-gradient(180deg, #000 70%, transparent); | |
| } | |
| .md-code-more { | |
| display: block; | |
| margin: 0 auto 10px; | |
| } | |
| .md pre code { | |
| color: rgba(255, 255, 255, 0.82); | |
| white-space: pre; | |
| tab-size: 2; | |
| } | |
| .tok-kw { | |
| color: var(--blue); | |
| font-weight: 600; | |
| } | |
| .tok-str { | |
| color: var(--white); | |
| } | |
| .tok-com { | |
| color: var(--text-3); | |
| font-style: italic; | |
| } | |
| .tok-num, | |
| .tok-prop { | |
| color: color-mix(in srgb, var(--blue) 55%, var(--white)); | |
| } | |
| .tok-fn { | |
| color: var(--white); | |
| font-weight: 600; | |
| } | |
| .tok-type { | |
| color: var(--white); | |
| text-decoration: underline; | |
| text-decoration-color: var(--blue-35); | |
| text-underline-offset: 3px; | |
| } | |
| /* Images */ | |
| .md-figure { | |
| margin: 0; | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .md-figure figcaption { | |
| font-size: 0.8rem; | |
| } | |
| .md-img { | |
| display: inline-block; | |
| max-width: 100%; | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| border: 1px solid var(--line); | |
| line-height: 0; | |
| vertical-align: middle; | |
| } | |
| .md-img img { | |
| display: block; | |
| max-width: 100%; | |
| max-height: 420px; | |
| height: auto; | |
| object-fit: contain; | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .md-img:hover { | |
| border-color: var(--blue-60); | |
| box-shadow: 0 0 18px var(--blue-20); | |
| } | |
| .md-img-broken { | |
| font-size: 0.8rem; | |
| color: var(--text-3); | |
| } | |
| /* Task lists */ | |
| .md li.md-task { | |
| list-style: none; | |
| margin-left: -1.2em; | |
| } | |
| .md li.md-task input { | |
| accent-color: var(--blue); | |
| margin: 0 8px 0 0; | |
| vertical-align: -2px; | |
| } | |
| .md li.md-task.done { | |
| color: var(--text-3); | |
| text-decoration: line-through; | |
| } | |
| .md blockquote { | |
| padding: 4px 0 4px 16px; | |
| border-left: 3px solid var(--blue); | |
| color: var(--text-2); | |
| } | |
| .md hr { | |
| border: none; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--blue-35), transparent); | |
| } | |
| .md-table { | |
| overflow-x: auto; | |
| } | |
| .md table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.875rem; | |
| } | |
| .md th, | |
| .md td { | |
| padding: 8px 10px; | |
| border-bottom: 1px solid var(--line); | |
| text-align: left; | |
| vertical-align: top; | |
| } | |
| .md th { | |
| font-family: var(--font-mono); | |
| font-size: 0.75rem; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--blue); | |
| } | |
| .turn-md { | |
| padding: 4px 2px; | |
| } | |
| .turn-assistant + .turn-user { | |
| margin-top: 8px; | |
| } | |
| /* Topic map zoom and pan */ | |
| .map-canvas { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .map-svg { | |
| cursor: grab; | |
| touch-action: none; | |
| user-select: none; | |
| aspect-ratio: 900 / 620; | |
| } | |
| .map-svg:active { | |
| cursor: grabbing; | |
| } | |
| .map-svg:focus-visible { | |
| outline: 1px solid var(--blue-60); | |
| outline-offset: -1px; | |
| } | |
| .map-controls { | |
| position: absolute; | |
| top: 12px; | |
| right: 12px; | |
| z-index: 1; | |
| display: grid; | |
| gap: 4px; | |
| padding: 4px; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: rgba(0, 0, 0, 0.7); | |
| } | |
| .map-controls .icon-btn { | |
| font: 600 1rem var(--font-mono); | |
| color: var(--white); | |
| } | |
| .map-controls .icon-btn { | |
| padding: 0; | |
| line-height: 1; | |
| } | |
| /* Trailing letter-spacing from .mono pushes "1:1" off centre in the round button. */ | |
| .map-controls .icon-btn.mono { | |
| font-size: 0.65rem; | |
| letter-spacing: 0; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .map-hint { | |
| position: absolute; | |
| left: 16px; | |
| bottom: 10px; | |
| z-index: 1; | |
| font-size: 0.7rem; | |
| pointer-events: none; | |
| } | |
| /* Voice page */ | |
| .vp .vp-card { | |
| animation: welcome-in 0.35s ease both; | |
| } | |
| .vp-steps { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 8px; | |
| font-size: 0.75rem; | |
| } | |
| .vp-steps button { | |
| display: grid; | |
| gap: 8px; | |
| width: 100%; | |
| padding: 0; | |
| border: 0; | |
| background: none; | |
| color: var(--text-3); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .vp-steps li.done button { | |
| color: var(--text-2); | |
| } | |
| .vp-steps li.current button { | |
| color: var(--white); | |
| } | |
| .vp-dot { | |
| height: 3px; | |
| border-radius: 999px; | |
| background: var(--line-strong); | |
| transition: background 0.3s, box-shadow 0.3s; | |
| } | |
| .vp-steps li.done .vp-dot { | |
| background: var(--blue-60); | |
| } | |
| .vp-steps li.current .vp-dot { | |
| background: var(--blue); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .voice-grid { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| /* The voices and the Add a voice tile share one row, wrapping only when they no longer fit */ | |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | |
| gap: 12px; | |
| } | |
| @media (max-width: 720px) { | |
| .voice-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| .voice-tile { | |
| position: relative; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s; | |
| } | |
| .voice-tile:hover { | |
| border-color: var(--line-strong); | |
| transform: translateY(-2px); | |
| } | |
| .voice-tile.on { | |
| border-color: var(--blue); | |
| background: var(--blue-05); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .voice-pick { | |
| width: 100%; | |
| display: grid; | |
| justify-items: center; | |
| gap: 4px; | |
| padding: 26px 12px 18px; | |
| border: 0; | |
| background: none; | |
| color: var(--white); | |
| font: inherit; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| .voice-pick strong { | |
| margin-top: 10px; | |
| font-size: 1rem; | |
| } | |
| .voice-pick strong, | |
| .voice-pick span.small { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .voice-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 76px; | |
| height: 76px; | |
| border-radius: 999px; | |
| border: 1px solid var(--blue-35); | |
| color: var(--blue); | |
| background: var(--blue-05); | |
| transition: background 0.2s, color 0.2s; | |
| } | |
| .voice-tile.on .voice-icon { | |
| background: var(--blue); | |
| border-color: var(--blue); | |
| color: var(--white); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .voice-badge { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| padding: 1px 7px; | |
| border-radius: 999px; | |
| background: var(--blue); | |
| color: var(--white); | |
| font-size: 0.625rem; | |
| letter-spacing: 0.04em; | |
| pointer-events: none; | |
| } | |
| .voice-badge.dim { | |
| background: var(--line-strong); | |
| color: var(--text-2); | |
| } | |
| .voice-play { | |
| position: absolute; | |
| top: 8px; | |
| right: 8px; | |
| padding: 0; | |
| border-color: var(--line-strong); | |
| } | |
| .voice-new { | |
| border-style: dashed; | |
| border-color: var(--line-strong); | |
| } | |
| .voice-new:hover { | |
| border-color: var(--blue-60); | |
| } | |
| .voice-icon.plus { | |
| border-style: dashed; | |
| background: transparent; | |
| } | |
| .voice-new:hover .voice-icon.plus { | |
| color: var(--white); | |
| border-color: var(--blue); | |
| } | |
| .gen-options { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .gen-row { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .gen-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .gen-chips .chip { | |
| padding: 5px 12px; | |
| background: transparent; | |
| color: var(--text-2); | |
| font: inherit; | |
| font-size: 0.8125rem; | |
| cursor: pointer; | |
| text-transform: capitalize; | |
| } | |
| .gen-chips .chip:hover { | |
| color: var(--white); | |
| } | |
| .gen-chips .chip.on { | |
| background: var(--blue); | |
| border-color: var(--blue); | |
| color: var(--white); | |
| } | |
| .gen-previews { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .gen-previews li { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 10px 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| } | |
| .gen-previews li.on { | |
| border-color: var(--blue); | |
| background: var(--blue-05); | |
| } | |
| .vp-clone { | |
| display: grid; | |
| gap: 8px; | |
| padding: 14px 16px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| } | |
| .vp-upgrade { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 16px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: var(--radius-sm); | |
| background: var(--blue-05); | |
| } | |
| .vp-upgrade p { | |
| margin: 4px 0 0; | |
| } | |
| .host-card { | |
| display: grid; | |
| gap: 10px; | |
| padding: 14px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| } | |
| .host-card select { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .delivery summary { | |
| cursor: pointer; | |
| } | |
| .delivery[open] { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .slider { | |
| display: grid; | |
| gap: 4px; | |
| font-size: 0.85rem; | |
| } | |
| .slider input[type="range"] { | |
| width: 100%; | |
| accent-color: var(--blue); | |
| } | |
| .library-filters { | |
| display: grid; | |
| gap: 8px; | |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); | |
| } | |
| .library-filters .input:first-child { | |
| grid-column: 1 / -1; | |
| } | |
| .library-grid { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 10px; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| max-height: 52vh; | |
| overflow: auto; | |
| } | |
| .library-voice { | |
| display: grid; | |
| gap: 6px; | |
| align-content: start; | |
| padding: 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| } | |
| .library-voice:hover { | |
| border-color: var(--blue-35); | |
| } | |
| .clone-tips { | |
| margin: 0; | |
| padding-left: 18px; | |
| display: grid; | |
| gap: 4px; | |
| } | |
| .reading-script { | |
| max-height: 220px; | |
| overflow: auto; | |
| padding: 14px 16px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: var(--radius-sm); | |
| background: var(--blue-05); | |
| font-family: var(--font-display); | |
| font-size: 1.05rem; | |
| line-height: 1.6; | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .reading-script p { | |
| margin: 0; | |
| } | |
| .takes { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .take-player { | |
| flex: 1; | |
| height: 32px; | |
| min-width: 160px; | |
| } | |
| .level { | |
| flex: 1; | |
| height: 6px; | |
| border-radius: 999px; | |
| background: var(--surface-2); | |
| overflow: hidden; | |
| } | |
| .level-fill { | |
| height: 100%; | |
| background: var(--blue); | |
| box-shadow: 0 0 10px var(--blue); | |
| transition: width 0.08s linear; | |
| } | |
| /* ---------- Density pass: tighter spacing, pages fit the window instead of forcing a scroll ---------- */ | |
| :root { | |
| --main-pad-top: 20px; | |
| --main-pad-bottom: 20px; | |
| } | |
| .shell-main { | |
| padding: var(--main-pad-top) var(--gutter) var(--main-pad-bottom); | |
| } | |
| @media (min-width: 900px) { | |
| .shell-main { | |
| padding-left: 28px; | |
| padding-right: 28px; | |
| } | |
| /* Beats `.shell > :not(.sky) { position: relative }`, so the nav stays put while content scrolls. */ | |
| .shell > .sidebar { | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| overflow-y: auto; | |
| padding: 14px 12px; | |
| gap: 14px; | |
| } | |
| /* Collapsed: just the logo (and the upgrade rocket), so nothing to scroll. */ | |
| .shell.collapsed > .sidebar { | |
| overflow: hidden; | |
| padding: 14px 10px; | |
| } | |
| .side-link { | |
| padding: 7px 10px; | |
| font-size: 0.9rem; | |
| } | |
| } | |
| .card { | |
| padding: 18px; | |
| } | |
| .page-wrap, | |
| .mc { | |
| gap: 14px; | |
| } | |
| .page-head, | |
| .mc-head { | |
| margin-bottom: 0; | |
| align-items: center; | |
| } | |
| .page-head h1, | |
| .mc-head h1 { | |
| font-size: clamp(1.35rem, 2.6vw, 1.75rem); | |
| margin-top: 4px; | |
| } | |
| .page-head .eyebrow, | |
| .mc-head .eyebrow { | |
| font-size: 0.7rem; | |
| } | |
| .lede { | |
| font-size: 0.9rem; | |
| margin-top: -6px; | |
| } | |
| .stack { | |
| gap: 10px; | |
| } | |
| .two-col, | |
| .grid-cards, | |
| .gallery, | |
| .mc-grid { | |
| gap: 14px; | |
| align-items: start; /* no stretched cards with dead space below short content */ | |
| } | |
| .mc-card { | |
| gap: 10px; | |
| } | |
| .empty-state { | |
| padding: 32px 16px; | |
| gap: 10px; | |
| } | |
| .empty-state.small { | |
| padding: 20px 12px; | |
| } | |
| .empty-state .empty-art { | |
| width: 72px; | |
| height: 54px; | |
| } | |
| .artifact { | |
| padding: 14px; | |
| gap: 10px; | |
| } | |
| .video-short { | |
| max-height: 360px; | |
| } | |
| .picker-list { | |
| max-height: 260px; | |
| } | |
| .doc-row { | |
| padding: 8px 0; | |
| } | |
| .source-row { | |
| padding: 10px 12px; | |
| } | |
| .loading { | |
| padding: 12px 0; | |
| } | |
| /* Notebook: exactly the window height, panes scroll inside. */ | |
| @media (min-width: 1100px) { | |
| .nbv { | |
| height: calc(100vh - var(--main-pad-top) - var(--main-pad-bottom)); | |
| min-height: 480px; | |
| } | |
| } | |
| .nbv-chat { | |
| min-height: 360px; | |
| } | |
| /* Topic map: canvas fills the space left in the window, never taller. */ | |
| @media (min-width: 1100px) { | |
| .map-layout { | |
| height: calc(100vh - 150px); | |
| min-height: 420px; | |
| } | |
| .map-canvas, | |
| .map-side { | |
| height: 100%; | |
| max-height: none; | |
| } | |
| .map-canvas { | |
| display: grid; | |
| place-items: center; | |
| } | |
| /* Keep the 900:620 aspect so pointer math matches the viewBox; fit inside the available box. */ | |
| .map-svg { | |
| height: 100%; | |
| width: auto; | |
| max-width: 100%; | |
| aspect-ratio: 900 / 620; | |
| } | |
| } | |
| @media (max-width: 1099px) { | |
| .map-svg { | |
| max-height: 62vh; | |
| } | |
| } | |
| /* Launch Kit: the post picker and kit list share the side column without pushing the page. */ | |
| @media (min-width: 1100px) { | |
| .kit-layout > aside { | |
| position: sticky; | |
| top: 0; | |
| max-height: calc(100vh - var(--main-pad-top) - var(--main-pad-bottom)); | |
| overflow-y: auto; | |
| } | |
| .kit-layout .picker-list { | |
| max-height: 220px; | |
| } | |
| } | |
| /* Launchpad: a month fits on one screen. */ | |
| .cal-day { | |
| min-height: 72px; | |
| padding: 4px 5px; | |
| gap: 3px; | |
| } | |
| .cal-head { | |
| margin-bottom: 8px; | |
| } | |
| .accounts { | |
| gap: 8px; | |
| } | |
| /* Modals: compact padding, body scrolls instead of the page. */ | |
| .modal { | |
| gap: 12px; | |
| padding: 18px; | |
| } | |
| /* ---------- Containment: text wraps inside its box instead of spilling past borders ---------- */ | |
| .shell-main, | |
| .page-wrap > *, | |
| .mc > *, | |
| .two-col > *, | |
| .grid-cards > *, | |
| .gallery > *, | |
| .mc-grid > *, | |
| .kit-layout > *, | |
| .map-layout > *, | |
| .nbv > *, | |
| .stack > *, | |
| .row > *, | |
| .field, | |
| .artifact-head > div, | |
| .source-title, | |
| .nb-card, | |
| .library-voice, | |
| .host-card, | |
| .post-edit, | |
| .slide-edit, | |
| .resurface-row, | |
| .recent-list li, | |
| .recent-list a { | |
| min-width: 0; | |
| } | |
| .card, | |
| .modal, | |
| .drawer, | |
| .md, | |
| .artifact-body, | |
| .cites, | |
| .transcript, | |
| .doc-title, | |
| .picker-title, | |
| .source-title, | |
| .nbv-doc, | |
| .kit-list, | |
| .topic-rank, | |
| .hooks, | |
| .claims, | |
| .seo dd, | |
| .account, | |
| .angle, | |
| .cite-span, | |
| .error-text, | |
| .notice { | |
| overflow-wrap: anywhere; | |
| word-break: normal; | |
| } | |
| /* Small buttons may wrap to two lines rather than punch out of narrow panes. */ | |
| .btn-small { | |
| white-space: normal; | |
| height: auto; | |
| min-height: 34px; | |
| padding: 6px 14px; | |
| line-height: 1.25; | |
| text-align: center; | |
| } | |
| .btn { | |
| max-width: 100%; | |
| } | |
| select.input, | |
| .input, | |
| .textarea { | |
| max-width: 100%; | |
| min-width: 0; | |
| text-overflow: ellipsis; | |
| } | |
| .row > select.input { | |
| flex: 1 1 160px; | |
| } | |
| .chip { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .small-link, | |
| .source-card a.mono { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .account { | |
| max-width: 100%; | |
| } | |
| .account .mono { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| max-width: 220px; | |
| display: inline-block; | |
| vertical-align: bottom; | |
| } | |
| .pill { | |
| flex-shrink: 0; | |
| } | |
| .artifact-head h3, | |
| .nb-card h3, | |
| .kit-view h2 { | |
| overflow-wrap: anywhere; | |
| } | |
| .metrics, | |
| .picker-actions, | |
| .artifact-actions { | |
| flex-wrap: wrap; | |
| } | |
| .map-side h2, | |
| .map-side .doc-title { | |
| overflow-wrap: anywhere; | |
| } | |
| .sidebar-user .mono { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .reader-line span:last-child { | |
| min-width: 0; | |
| overflow-wrap: anywhere; | |
| } | |
| /* Content uses the full width next to the sidebar (open or collapsed); centred only on very wide screens. */ | |
| .page-wrap, | |
| .mc, | |
| .nbv { | |
| width: 100%; | |
| max-width: 1760px; | |
| margin-inline: auto; | |
| } | |
| .shell-main { | |
| width: 100%; | |
| } | |
| @media (min-width: 900px) { | |
| .shell.collapsed .shell-main { | |
| padding-left: 24px; | |
| padding-right: 24px; | |
| } | |
| } | |
| @media (min-width: 1100px) { | |
| /* Wider screens give the side columns room instead of leaving it empty. */ | |
| .nbv { | |
| grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(320px, 400px); | |
| } | |
| .kit-layout { | |
| grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); | |
| } | |
| .map-layout { | |
| grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); | |
| } | |
| } | |
| /* Simplified layouts (2026-09-28): bigger components, fewer steps */ | |
| .clamp-1 { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* Mission Control */ | |
| .mc-hero { | |
| display: grid; | |
| gap: 18px; | |
| padding: clamp(18px, 3vw, 28px); | |
| } | |
| .mc-ask { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--blue); | |
| } | |
| .mc-ask .input { | |
| flex: 1; | |
| min-width: 0; | |
| height: 54px; | |
| font-size: 1.05rem; | |
| } | |
| .mc-ask .btn { | |
| height: 54px; | |
| padding: 0 28px; | |
| } | |
| .mc-actions { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| @media (max-width: 900px) { | |
| .mc-actions { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| .mc-action { | |
| display: grid; | |
| justify-items: start; | |
| align-content: start; | |
| gap: 6px; | |
| min-height: 132px; | |
| padding: 18px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| text-align: left; | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; | |
| } | |
| .mc-action svg { | |
| color: var(--blue); | |
| margin-bottom: 6px; | |
| } | |
| .mc-action:hover:not(:disabled) { | |
| border-color: var(--blue-60); | |
| box-shadow: var(--glow-sm); | |
| transform: translateY(-2px); | |
| } | |
| .mc-action:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| } | |
| .mc-more { | |
| display: grid; | |
| place-items: center; | |
| width: 28px; | |
| height: 28px; | |
| margin-bottom: 6px; | |
| border: 1px dashed var(--blue-60); | |
| border-radius: 999px; | |
| color: var(--blue); | |
| font-size: 1.1rem; | |
| line-height: 1; | |
| } | |
| .mc-next { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 14px 18px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: var(--radius-sm); | |
| background: var(--blue-05); | |
| } | |
| .mc-next p { | |
| margin: 0; | |
| flex: 1 1 320px; | |
| } | |
| .mc-stats { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| @media (max-width: 720px) { | |
| .mc-stats { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| .mc-stat { | |
| display: grid; | |
| gap: 2px; | |
| padding: 14px 18px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| color: var(--white); | |
| text-decoration: none; | |
| transition: border-color 0.2s; | |
| } | |
| .mc-stat:hover { | |
| border-color: var(--line-strong); | |
| } | |
| .mc-stat strong { | |
| font: 600 1.6rem var(--font-display, inherit); | |
| } | |
| /* Notebook view: chat takes the room, one narrower side panel (Create, what was made, Posts) */ | |
| @media (min-width: 1100px) { | |
| .nbv { | |
| grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); | |
| } | |
| } | |
| .nbv-titlebar { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .nbv-titlebar .nbv-title { | |
| margin: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .nbv-empty { | |
| display: grid; | |
| justify-items: center; | |
| gap: 12px; | |
| padding: 48px 16px; | |
| text-align: center; | |
| color: var(--blue); | |
| } | |
| .nbv-starters { | |
| display: grid; | |
| gap: 8px; | |
| width: min(100%, 520px); | |
| } | |
| .nbv-starter { | |
| padding: 12px 16px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: border-color 0.2s, background 0.2s; | |
| } | |
| .nbv-starter:hover { | |
| border-color: var(--blue-60); | |
| background: var(--blue-05); | |
| } | |
| .nbv-ask .input { | |
| height: 52px; | |
| font-size: 1rem; | |
| } | |
| .nbv-ask .btn { | |
| height: 52px; | |
| padding: 0 24px; | |
| } | |
| .nbv-make { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 8px; | |
| } | |
| .nbv-make button { | |
| padding: 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--white); | |
| font: 500 0.875rem var(--font-body); | |
| text-align: left; | |
| cursor: pointer; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .nbv-make button:hover:not(:disabled) { | |
| border-color: var(--blue-60); | |
| } | |
| .nbv-make button:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| } | |
| .nbv-make .nbv-make-main { | |
| grid-column: 1 / -1; | |
| display: grid; | |
| gap: 2px; | |
| padding: 16px; | |
| border-color: var(--blue-35); | |
| background: var(--blue-05); | |
| } | |
| .nbv-make .nbv-make-main strong { | |
| font-size: 1rem; | |
| } | |
| /* Notebooks: big clickable cards, options in a menu */ | |
| .nb-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 14px; | |
| } | |
| .nb-grid .nb-card { | |
| position: relative; | |
| min-height: 170px; | |
| } | |
| .nb-grid .nb-card-link { | |
| height: 100%; | |
| align-content: start; | |
| color: var(--white); | |
| } | |
| .nb-card-link svg { | |
| color: var(--blue); | |
| } | |
| .nb-archive { | |
| border-color: var(--blue-35); | |
| background: var(--blue-05); | |
| } | |
| .card-menu { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| } | |
| .card-menu-list { | |
| position: absolute; | |
| top: 34px; | |
| right: 0; | |
| z-index: 5; | |
| display: grid; | |
| min-width: 140px; | |
| padding: 6px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: var(--black, #000); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .card-menu-list button { | |
| padding: 8px 10px; | |
| border: 0; | |
| border-radius: 6px; | |
| background: none; | |
| color: var(--text); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .card-menu-list button:hover { | |
| background: var(--blue-10); | |
| } | |
| .nb-matches { | |
| max-height: 320px; | |
| overflow: auto; | |
| } | |
| /* Create (Studio): format tiles and one row of choices */ | |
| .format-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| @media (max-width: 900px) { | |
| .format-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| .format-tile { | |
| display: grid; | |
| justify-items: center; | |
| align-content: center; | |
| gap: 10px; | |
| min-height: 120px; | |
| padding: 16px 10px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| text-align: center; | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; | |
| } | |
| .format-tile svg { | |
| color: var(--blue); | |
| } | |
| .format-tile:hover { | |
| border-color: var(--line-strong); | |
| } | |
| .format-tile.on { | |
| border-color: var(--blue); | |
| background: var(--blue-05); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .studio-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: flex-end; | |
| gap: 12px; | |
| } | |
| .studio-row .field { | |
| flex: 1 1 200px; | |
| } | |
| .studio-row .field:first-child { | |
| flex: 2 1 280px; | |
| } | |
| .studio-go { | |
| height: 44px; | |
| padding: 0 26px; | |
| } | |
| /* Launch Kit: post cards to start, a thin rail of kits once one is open */ | |
| @media (min-width: 1100px) { | |
| .kit-layout.kit-open { | |
| grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); | |
| } | |
| } | |
| .kit-rail { | |
| display: grid; | |
| gap: 10px; | |
| align-content: start; | |
| } | |
| .post-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); | |
| gap: 12px; | |
| } | |
| .post-card { | |
| display: grid; | |
| align-content: space-between; | |
| gap: 10px; | |
| min-height: 150px; | |
| padding: 18px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; | |
| } | |
| .post-card strong { | |
| font-size: 1.02rem; | |
| line-height: 1.35; | |
| } | |
| .post-card-go { | |
| color: var(--blue); | |
| font-size: 0.8125rem; | |
| font-weight: 600; | |
| } | |
| .post-card:hover:not(:disabled) { | |
| border-color: var(--blue-60); | |
| box-shadow: var(--glow-sm); | |
| transform: translateY(-2px); | |
| } | |
| .post-card:disabled { | |
| opacity: 0.6; | |
| cursor: default; | |
| } | |
| /* Launchpad: account chips in one line, calendar first, ideas beside it */ | |
| .lp-accounts { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .lp-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 5px 12px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| font-size: 0.8125rem; | |
| } | |
| .lp-chip img { | |
| border-radius: 999px; | |
| } | |
| .lp-chip.warn { | |
| border-color: #ff8a3d; | |
| } | |
| .lp-chip.add { | |
| border-style: dashed; | |
| color: var(--text-2); | |
| cursor: pointer; | |
| } | |
| .lp-chip.add:hover { | |
| border-color: var(--blue); | |
| color: var(--white); | |
| } | |
| .lp-layout { | |
| display: grid; | |
| gap: 16px; | |
| align-items: start; | |
| } | |
| @media (min-width: 1200px) { | |
| .lp-layout { | |
| grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); | |
| } | |
| } | |
| .lp-ideas { | |
| align-content: start; | |
| } | |
| .lp-ideas .idea { | |
| display: grid; | |
| gap: 6px; | |
| padding-bottom: 12px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .lp-ideas .idea:last-child { | |
| border-bottom: 0; | |
| } | |
| .lp-empty { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 12px; | |
| padding: 12px 14px; | |
| border: 1px dashed var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| } | |
| .lp-empty p { | |
| margin: 0; | |
| } | |
| /* Topic map: full width until a topic or the briefing is open */ | |
| @media (min-width: 1100px) { | |
| .map-layout.map-full { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| } | |
| .map-menu { | |
| position: relative; | |
| top: auto; | |
| right: auto; | |
| } | |
| details.map-legend summary { | |
| cursor: pointer; | |
| list-style: none; | |
| } | |
| details.map-legend:not([open]) { | |
| padding: 4px 10px; | |
| } | |
| details.map-legend[open] summary { | |
| margin-bottom: 4px; | |
| } | |
| .topic-actions { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| /* Sources: one smart input, files drop anywhere */ | |
| .add-smart { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .add-smart .input { | |
| flex: 1 1 320px; | |
| height: 50px; | |
| font-size: 1rem; | |
| } | |
| .add-smart .btn { | |
| height: 50px; | |
| padding: 0 22px; | |
| } | |
| .page-wrap.drop-over { | |
| outline: 2px dashed var(--blue); | |
| outline-offset: 8px; | |
| border-radius: var(--radius); | |
| } | |
| /* Sidebar: seven stops, Settings pinned to the bottom */ | |
| @media (min-width: 900px) { | |
| .sidebar .side-settings { | |
| margin-top: auto; | |
| } | |
| .sidebar .side-settings ~ .sidebar-user { | |
| margin-top: 0; | |
| } | |
| } | |
| @media (max-width: 899px) { | |
| .sidebar { | |
| position: relative; | |
| } | |
| .sidebar .side-settings { | |
| position: absolute; | |
| top: 14px; | |
| right: 16px; | |
| padding: 8px; | |
| } | |
| .sidebar .side-settings .side-label { | |
| display: none; | |
| } | |
| } | |
| @media (min-width: 900px) { | |
| .shell.collapsed .side-settings { | |
| display: none; | |
| } | |
| } | |
| .tabs a.tab { | |
| text-decoration: none; | |
| } | |
| /* Notebook side panel: Create, what was made, then Posts, in one scrolling column */ | |
| .nbv-section { | |
| display: grid; | |
| gap: 10px; | |
| padding-top: 14px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .nbv-section-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| .nbv-section-head .mono { | |
| margin-left: 4px; | |
| letter-spacing: 0; | |
| } | |
| .nbv-made-label { | |
| padding-top: 6px; | |
| } | |
| /* What was made keeps its own scroll so a long list cannot push the posts far down */ | |
| .nbv-made { | |
| max-height: 40vh; | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| } | |
| .nbv-side { | |
| scrollbar-width: thin; | |
| } | |
| /* Create buttons: one per row, compact (Audio overview opens its options right under it) */ | |
| .nbv-make { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| .nbv-make > button, | |
| .nbv-make > a { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| min-height: 46px; | |
| padding: 0 14px; | |
| } | |
| /* Audio overview looks like the others (no highlight); its current format / length and chevron on the right */ | |
| .nbv-make .nbv-make-main { | |
| grid-column: auto; | |
| display: flex; /* label left, format / length + chevron right (the older rule made it a stacked grid) */ | |
| padding: 0 14px; | |
| border-color: var(--line); | |
| background: transparent; | |
| } | |
| .nbv-make-meta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* Audio overview opened: a blue edge, its options panel just below */ | |
| .nbv-make .nbv-make-main.open { | |
| border-color: var(--blue); | |
| } | |
| .nbv-audio-opts { | |
| display: grid; | |
| gap: 12px; | |
| padding: 14px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: var(--radius-sm); | |
| background: var(--blue-05); | |
| } | |
| .nbv-audio-row { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); /* Format needs a little more room than Length */ | |
| gap: 10px; | |
| } | |
| /* Each dropdown fills its column and can shrink, instead of spilling into its neighbour */ | |
| .nbv-audio-row > .field { | |
| min-width: 0; | |
| } | |
| .nbv-audio-row > .field > * { | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| .nbv-audio-opts .dropdown-btn { | |
| padding: 0 12px; | |
| font-size: 0.9rem; | |
| } | |
| .nbv-audio-opts .dropdown-btn { | |
| height: 40px; | |
| border-radius: 12px; | |
| } | |
| .nbv-audio-opts > .btn { | |
| justify-self: end; | |
| } | |
| .nbv-audio-opts .dropdown-value { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .voice-new .voice-pick:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.6; | |
| } | |
| /* The host a voice row belongs to (Audio hosts list) */ | |
| .voice-badge-inline { | |
| padding: 3px 10px; | |
| border-radius: 999px; | |
| background: var(--blue); | |
| color: var(--white); | |
| font-size: 0.72rem; | |
| letter-spacing: 0.06em; | |
| } | |
| .voice-badge-inline.dim { | |
| background: var(--surface-2, rgba(255, 255, 255, 0.08)); | |
| color: var(--text-2); | |
| } | |
| /* Audio hosts / Video voiceovers: the explainer takes the room, the Manage button sits at the right end */ | |
| .manage-top > p { | |
| flex: 1; | |
| min-width: 240px; | |
| margin: 0; | |
| } | |
| .manage-top > .btn { | |
| flex-shrink: 0; | |
| margin-left: auto; | |
| } | |
| /* A quiet way back: an arrow and text, no button outline */ | |
| .back-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 4px 0; | |
| border: 0; | |
| background: none; | |
| color: var(--text-2); | |
| font: inherit; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| } | |
| .back-link:hover { | |
| color: var(--text); | |
| } | |
| .back-link:hover svg { | |
| transform: translateX(-2px); | |
| } | |
| .back-link svg { | |
| transition: transform 0.15s; | |
| } | |
| /* Delivery settings for a host: a text link with a chevron that opens a two-column grid of sliders */ | |
| .delivery-card summary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: var(--text-2); | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| list-style: none; | |
| } | |
| .delivery-card summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .delivery-card summary:hover { | |
| color: var(--text); | |
| } | |
| .delivery-chevron { | |
| flex-shrink: 0; | |
| transition: transform 0.2s; | |
| } | |
| .delivery-card[open] .delivery-chevron { | |
| transform: rotate(180deg); | |
| } | |
| .delivery-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 22px 32px; | |
| padding-top: 18px; | |
| } | |
| .delivery-slider { | |
| display: grid; | |
| gap: 8px; | |
| font-size: 0.9rem; | |
| } | |
| .delivery-value { | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| background: rgba(33, 124, 255, 0.14); | |
| color: var(--blue); | |
| font-size: 0.78rem; | |
| } | |
| /* A slim track, filled up to the thumb (--pct) */ | |
| .delivery-slider input[type="range"] { | |
| width: 100%; | |
| height: 4px; | |
| border-radius: 999px; | |
| background: linear-gradient(to right, var(--blue) var(--pct, 50%), var(--line-strong) var(--pct, 50%)); | |
| appearance: none; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| .delivery-slider input[type="range"]::-webkit-slider-thumb { | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid var(--white); | |
| border-radius: 50%; | |
| background: var(--blue); | |
| box-shadow: 0 0 0 4px rgba(33, 124, 255, 0.2); | |
| appearance: none; | |
| } | |
| .delivery-slider input[type="range"]::-moz-range-thumb { | |
| width: 14px; | |
| height: 14px; | |
| border: 2px solid var(--white); | |
| border-radius: 50%; | |
| background: var(--blue); | |
| } | |
| .delivery-slider input[type="range"]:focus-visible::-webkit-slider-thumb { | |
| box-shadow: 0 0 0 6px rgba(33, 124, 255, 0.35); | |
| } | |
| .delivery-actions { | |
| padding-top: 14px; | |
| } | |
| @media (max-width: 640px) { | |
| .delivery-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |