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(min(320px, 100%), 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; | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| .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); | |
| } | |
| /* Paused / disconnected: needs the user, but nothing broke */ | |
| .pill-warn { | |
| border: 1px solid rgba(255, 196, 0, 0.55); | |
| background: rgba(255, 196, 0, 0.12); | |
| color: #ffd257; | |
| } | |
| @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; | |
| } | |
| /* Live found / fetched / indexed counts under a running sync */ | |
| .sync-stats { | |
| display: flex; | |
| gap: 20px; | |
| margin: 10px 0 0; | |
| font-size: 0.75rem; | |
| } | |
| .sync-stats dt { | |
| color: var(--text-2); | |
| } | |
| .sync-stats dd { | |
| margin: 2px 0 0; | |
| color: var(--white); | |
| font-size: 0.95rem; | |
| } | |
| /* Every loader: the spinner with its label underneath, both centered */ | |
| .loading { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| padding: 24px 0; | |
| text-align: center; | |
| } | |
| /* 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; | |
| } | |
| /* The Launchpad's calendar while it loads: about the month grid's height, so the card doesn't jump */ | |
| .loading-center.lp-cal-loading { | |
| min-height: 560px; | |
| } | |
| /* Inside a card (a tab still loading): centred, without claiming most of the window */ | |
| .loading-center.inline { | |
| min-height: 200px; | |
| } | |
| /* "The video service is being updated": a centered status line, not an error */ | |
| .service-notice { | |
| display: grid; | |
| place-items: center; | |
| padding: 24px 0; | |
| text-align: center; | |
| color: var(--white); | |
| } | |
| .service-notice.page { | |
| min-height: 60vh; | |
| } | |
| .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; | |
| grid-template-columns: minmax(0, 1fr); | |
| 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; | |
| } | |
| .citation-disclosure { | |
| border-top: 1px solid var(--line); | |
| padding-top: 8px; | |
| } | |
| .citation-disclosure > summary { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| width: fit-content; | |
| padding: 4px 2px; | |
| color: var(--text-2); | |
| font-size: 0.8125rem; | |
| font-weight: 500; | |
| list-style: none; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .citation-disclosure > summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .citation-disclosure > summary:hover { | |
| color: var(--white); | |
| } | |
| .citation-count { | |
| display: inline-grid; | |
| place-items: center; | |
| min-width: 20px; | |
| height: 20px; | |
| padding: 0 5px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: 999px; | |
| background: var(--blue-10); | |
| color: var(--text); | |
| font-size: 0.65rem; | |
| } | |
| .citation-chevron { | |
| transition: transform 0.18s ease; | |
| } | |
| .citation-disclosure[open] .citation-chevron { | |
| transform: rotate(180deg); | |
| } | |
| .citation-disclosure > .cites { | |
| margin-top: 8px; | |
| } | |
| .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; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| /* Thumbs sitting among the footer's pill buttons: flatten the feedback wrapper into the row and match the pills. */ | |
| .artifact-actions .afb { | |
| display: contents; | |
| } | |
| .artifact-actions .afb .fb-row { | |
| display: contents; | |
| } | |
| .artifact-actions .afb .fb-btn { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 999px; | |
| border: 1px solid var(--line-strong); | |
| } | |
| .artifact-actions .afb .fb-btn:hover { | |
| border-color: var(--blue-60); | |
| } | |
| .artifact-actions .afb .fb-why { | |
| flex: 0 0 100%; | |
| } | |
| .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 */ | |
| .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; | |
| } | |
| /* A Launch Kit's two parts, told apart: the full post, then the hooks as numbered cards */ | |
| .kit-section { | |
| display: grid; | |
| gap: 14px; | |
| padding-top: 20px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .kit-section-head { | |
| display: grid; | |
| gap: 4px; | |
| justify-items: start; | |
| } | |
| /* The section names as plain, large titles */ | |
| .kit-section-head h3 { | |
| margin: 0; | |
| font-size: 1.6rem; | |
| line-height: 1.2; | |
| } | |
| .kit-hooks { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); | |
| gap: 12px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .kit-hook { | |
| display: grid; | |
| align-content: start; | |
| gap: 8px; | |
| padding: 14px 16px; | |
| border: 1px solid var(--line); | |
| border-left: 3px solid var(--blue-35); | |
| border-radius: var(--radius-sm); | |
| background: rgba(255, 255, 255, 0.02); | |
| overflow-wrap: anywhere; | |
| } | |
| .kit-hook-top { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .kit-hook-num { | |
| color: var(--blue); | |
| } | |
| .kit-hook-strength { | |
| color: var(--text-2); | |
| } | |
| .kit-hook-text { | |
| margin: 0; | |
| font-weight: 500; | |
| } | |
| .kit-hook p { | |
| margin: 0; | |
| } | |
| .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: grid; | |
| gap: 1px; | |
| width: 100%; | |
| padding: 4px 7px; | |
| 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-time, | |
| .cal-item-title { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .cal-item-time { | |
| font-size: 0.68rem; | |
| opacity: 0.85; | |
| } | |
| .cal-item-title { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .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); | |
| } | |
| /* Its account's connection is down (or held by hand): never attempted until resumed */ | |
| .cal-paused { | |
| border-style: dashed; | |
| opacity: 0.55; | |
| text-decoration: line-through; | |
| text-decoration-color: var(--text-3); | |
| } | |
| .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; | |
| /* Sit the onboarding block in the vertical middle of the screen rather than pinned to the top. */ | |
| min-height: 100vh; | |
| align-content: center; | |
| } | |
| .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-step-num { | |
| margin-right: 8px; | |
| color: var(--blue); | |
| } | |
| .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: 0; | |
| } | |
| .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; | |
| } | |
| .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); | |
| } | |
| /* Build from options: one grey card, a label column on the left and its choices on the right, a line between rows */ | |
| .gen-options { | |
| display: grid; | |
| padding: 6px 18px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-lg); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .gen-row { | |
| display: grid; | |
| grid-template-columns: 110px minmax(0, 1fr); | |
| align-items: start; /* the label lines up with the first line of chips, also when they wrap */ | |
| gap: 8px 16px; | |
| padding: 18px 0; | |
| } | |
| .gen-row + .gen-row { | |
| border-top: 1px solid var(--line); | |
| } | |
| .gen-label { | |
| color: var(--text-2); | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| line-height: 32px; /* a chip's height */ | |
| } | |
| .gen-options .gen-chips { | |
| gap: 8px; | |
| } | |
| /* Its chips: smaller than the app's default chip (the later .chip rule), only in this card */ | |
| /* Soft pills: a faint fill and border; the picked one is tinted blue rather than solid */ | |
| .gen-options .gen-chips .chip { | |
| height: 32px; | |
| padding: 0 14px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.04); | |
| color: var(--text-2); | |
| font-size: 0.85rem; | |
| font-weight: 400; | |
| line-height: 30px; | |
| transition: background 0.15s, border-color 0.15s, color 0.15s; | |
| } | |
| .gen-options .gen-chips .chip:hover { | |
| border-color: var(--line-strong); | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--text); | |
| } | |
| .gen-options .gen-chips .chip.on { | |
| border-color: rgba(33, 124, 255, 0.55); | |
| background: rgba(33, 124, 255, 0.2); | |
| color: var(--white); | |
| } | |
| @media (max-width: 560px) { | |
| .gen-row { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| } | |
| .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; | |
| } | |
| .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; | |
| } | |
| } | |
| /* 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 > *, | |
| .map-layout > *, | |
| .nbv > *, | |
| .stack > *, | |
| .row > *, | |
| .field, | |
| .artifact-head > div, | |
| .source-title, | |
| .nb-card, | |
| .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, | |
| .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); | |
| } | |
| .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: conversation rail | current chat | notebook tools. */ | |
| .nbv { | |
| grid-template-areas: | |
| "history" | |
| "chat" | |
| "side"; | |
| } | |
| .nbv-history { | |
| grid-area: history; | |
| gap: 8px; | |
| max-height: 260px; | |
| padding: 10px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| backdrop-filter: blur(6px); | |
| } | |
| .nbv-history:hover { | |
| border-color: var(--line); | |
| box-shadow: none; | |
| } | |
| .nbv-history-back { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| min-height: 34px; | |
| padding: 4px 7px; | |
| border-radius: 7px; | |
| color: var(--text-2); | |
| font-size: 0.78rem; | |
| text-decoration: none; | |
| transition: color 0.15s, background 0.15s; | |
| } | |
| .nbv-history-back:hover { | |
| color: var(--white); | |
| background: var(--surface-2); | |
| } | |
| .nbv-chat { | |
| grid-area: chat; | |
| } | |
| .nbv-side { | |
| grid-area: side; | |
| } | |
| .nbv-history-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| min-height: 52px; | |
| padding: 3px 4px 9px 8px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .nbv-history-head > div { | |
| display: grid; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .nbv-history-head > .nbv-history-actions { | |
| display: flex; | |
| gap: 2px; | |
| overflow: visible; | |
| } | |
| .nbv-history-head h2 { | |
| font-size: 0.95rem; | |
| letter-spacing: 0; | |
| } | |
| .nbv-history-head span { | |
| font-size: 0.7rem; | |
| } | |
| .nbv-new-chat, | |
| .nbv-close-history, | |
| .nbv-show-history { | |
| display: grid; | |
| flex: 0 0 auto; | |
| place-items: center; | |
| width: 32px; | |
| height: 32px; | |
| min-height: 0; | |
| padding: 0; | |
| border: 0; | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--text-2); | |
| cursor: pointer; | |
| transition: color 0.15s, background 0.15s; | |
| } | |
| .nbv-new-chat:hover:not(:disabled), | |
| .nbv-close-history:hover, | |
| .nbv-show-history:hover { | |
| background: var(--surface-2); | |
| color: var(--white); | |
| } | |
| .nbv-new-chat:focus-visible, | |
| .nbv-close-history:focus-visible, | |
| .nbv-show-history:focus-visible { | |
| outline-offset: 1px; | |
| } | |
| .nbv-show-history { | |
| margin-right: 2px; | |
| } | |
| .nbv-new-chat:disabled, | |
| .nbv-chat-link:disabled { | |
| opacity: 0.55; | |
| cursor: not-allowed; | |
| } | |
| .nbv-chat-list { | |
| display: grid; | |
| align-content: start; | |
| gap: 2px; | |
| min-height: 0; | |
| padding: 2px 0; | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--line-strong) transparent; | |
| } | |
| .nbv-chat-list-label { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin: 0; | |
| padding: 8px 9px 4px; | |
| color: var(--text-3); | |
| font: 500 0.68rem var(--font-body); | |
| letter-spacing: 0.04em; | |
| } | |
| .nbv-chat-item { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 2rem; | |
| align-items: center; | |
| border: 1px solid transparent; | |
| border-radius: 8px; | |
| transition: background 0.15s, border-color 0.15s; | |
| } | |
| .nbv-chat-item:hover { | |
| background: var(--surface-2); | |
| } | |
| .nbv-chat-item.active { | |
| border-color: var(--line); | |
| background: var(--surface-2); | |
| } | |
| .nbv-chat-link { | |
| display: block; | |
| width: 100%; | |
| min-width: 0; | |
| padding: 9px 6px 9px 10px; | |
| border: 0; | |
| background: transparent; | |
| color: var(--text-2); | |
| font: 400 0.82rem var(--font-body); | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .nbv-chat-item.active .nbv-chat-link, | |
| .nbv-chat-link:hover { | |
| color: var(--white); | |
| } | |
| .nbv-chat-link > span:first-child { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .nbv-chat-delete { | |
| display: grid; | |
| place-items: center; | |
| width: 1.625rem; | |
| min-width: 1.625rem; | |
| height: 1.625rem; | |
| margin-right: 0.25rem; | |
| padding: 0; | |
| border: 0; | |
| border-radius: 6px; | |
| background: var(--surface-2); | |
| color: var(--text-2); | |
| font: 500 0.68rem var(--font-body); | |
| cursor: pointer; | |
| opacity: 0; | |
| } | |
| .nbv-chat-item:hover .nbv-chat-delete, | |
| .nbv-chat-item:focus-within .nbv-chat-delete, | |
| .nbv-chat-delete.armed { | |
| opacity: 1; | |
| } | |
| .nbv-chat-delete:hover, | |
| .nbv-chat-delete.armed { | |
| color: #ff8a8a; | |
| background: rgba(239, 68, 68, 0.22); | |
| } | |
| .nbv-history-empty { | |
| padding: 16px 9px; | |
| line-height: 1.5; | |
| } | |
| @media (min-width: 900px) { | |
| .shell.notebook-focus .shell-main { | |
| padding: 0; | |
| } | |
| .shell.notebook-focus .nbv { | |
| width: 100%; | |
| max-width: none; | |
| margin: 0; | |
| } | |
| .nbv { | |
| position: relative; /* the resize handles are placed over the boundaries */ | |
| grid-template-columns: var(--nbv-left, clamp(16rem, 20vw, 20rem)) minmax(0, 1fr); | |
| grid-template-areas: | |
| "history chat" | |
| "history side"; | |
| column-gap: 0; | |
| } | |
| .nbv-history { | |
| max-height: calc(100vh - var(--main-pad-top) - var(--main-pad-bottom)); | |
| border-right: 0; | |
| border-radius: var(--radius) 0 0 var(--radius); | |
| } | |
| .shell.notebook-focus .nbv-history { | |
| position: relative; | |
| top: auto; | |
| align-self: stretch; | |
| height: 100%; | |
| max-height: none; | |
| border-top-left-radius: 0; | |
| border-bottom-left-radius: 0; | |
| } | |
| .nbv-chat { | |
| border-radius: 0 var(--radius) var(--radius) 0; | |
| } | |
| .nbv-side { | |
| margin-left: 1rem; | |
| } | |
| .nbv-history-closed { | |
| grid-template-columns: minmax(0, 1fr); | |
| grid-template-areas: | |
| "chat" | |
| "side"; | |
| } | |
| .nbv-history-closed .nbv-chat { | |
| border-radius: var(--radius); | |
| } | |
| .nbv-history-closed .nbv-side { | |
| margin-left: 0; | |
| } | |
| } | |
| @media (min-width: 1100px) and (max-width: 1349px) { | |
| .nbv { | |
| height: auto; | |
| } | |
| .nbv-history { | |
| position: sticky; | |
| top: var(--main-pad-top); | |
| align-self: start; | |
| height: calc(100vh - var(--main-pad-top) - var(--main-pad-bottom)); | |
| } | |
| } | |
| @media (min-width: 1350px) { | |
| .shell.notebook-focus .nbv { | |
| height: 100vh; | |
| min-height: 100vh; | |
| } | |
| .nbv { | |
| grid-template-columns: var(--nbv-left, clamp(16rem, 20vw, 20rem)) minmax(0, 1fr) var(--nbv-right, clamp(18rem, 24vw, 24rem)); | |
| grid-template-areas: "history chat side"; | |
| } | |
| .nbv.nbv-history-closed { | |
| grid-template-columns: minmax(0, 1fr) var(--nbv-right, clamp(18rem, 24vw, 24rem)); | |
| grid-template-areas: "chat side"; | |
| } | |
| .nbv.nbv-history-closed .nbv-side { | |
| margin-left: 1rem; | |
| } | |
| } | |
| .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; | |
| } | |
| .turn, | |
| .turn-md, | |
| .turn-md .md { | |
| min-width: 0; | |
| overflow-wrap: anywhere; | |
| } | |
| .turn-assistant { | |
| width: 100%; | |
| justify-self: start; | |
| } | |
| .turn-user { | |
| max-width: min(85%, 48rem); | |
| } | |
| .nbv-empty { | |
| display: grid; | |
| justify-items: center; | |
| gap: 12px; | |
| padding: 48px 16px; | |
| text-align: center; | |
| color: var(--blue); | |
| } | |
| .nbv-chat-loading { | |
| display: grid; | |
| min-height: 100%; | |
| place-items: center; | |
| } | |
| .nbv-chat-loading .loading { | |
| flex-direction: column; | |
| padding: 32px; | |
| text-align: center; | |
| } | |
| .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: 3.5rem; | |
| padding-right: 4rem; | |
| font-size: 1rem; | |
| } | |
| .nbv-ask { | |
| position: relative; | |
| display: block; | |
| width: min(100%, 64rem); | |
| margin-inline: auto; | |
| } | |
| .nbv-ask .nbv-send { | |
| position: absolute; | |
| top: 50%; | |
| right: 0.375rem; | |
| width: 2.75rem; | |
| height: 2.75rem; | |
| padding: 0; | |
| border-radius: 50%; | |
| transform: translateY(-50%); | |
| } | |
| .nbv-send-spinner { | |
| width: 1rem; | |
| height: 1rem; | |
| border: 0.125rem solid rgba(255, 255, 255, 0.4); | |
| border-top-color: var(--white); | |
| border-radius: 50%; | |
| animation: spin 0.7s linear infinite; | |
| } | |
| .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; | |
| } | |
| .lp-layout { | |
| display: grid; | |
| gap: 16px; | |
| align-items: start; | |
| } | |
| @media (min-width: 1200px) { | |
| .lp-layout { | |
| grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); | |
| } | |
| } | |
| /* A page's way back (to the page before it), above its header */ | |
| .page-back { | |
| margin-bottom: 4px; | |
| } | |
| /* Create a launch kit: posts and earlier kits as rows (date, title, action on the right) */ | |
| .lk-rows { | |
| display: grid; | |
| align-content: start; /* rows keep their height and stay together, however tall the list is */ | |
| gap: 6px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .lk-row { | |
| display: flex; | |
| flex: none; | |
| align-items: center; | |
| gap: 16px; | |
| height: 64px; /* a title and its source line; fixed, so the list shows an exact number of rows */ | |
| padding: 8px 12px 8px 16px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: rgba(255, 255, 255, 0.03); | |
| transition: border-color 0.15s; | |
| } | |
| .lk-row:hover { | |
| border-color: var(--line-strong); | |
| } | |
| /* Pick a post to launch: the rows take the rest of the screen (at least four and a half), the rest scrolls inside | |
| the card */ | |
| .lk-rows-scroll { | |
| max-height: max(calc(4.5 * 64px + 4 * 6px), calc(100dvh - 380px)); | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| scrollbar-width: thin; | |
| } | |
| /* While the posts load: the loader in the middle of the list's space */ | |
| .lk-loading { | |
| display: grid; | |
| place-items: center; | |
| min-height: max(calc(4.5 * 64px + 4 * 6px), calc(100dvh - 380px)); | |
| } | |
| .lk-date { | |
| flex: none; | |
| width: 100px; | |
| } | |
| .lk-title { | |
| display: grid; | |
| flex: 1; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .lk-title strong { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| @media (max-width: 640px) { | |
| .lk-date { | |
| display: none; | |
| } | |
| } | |
| /* The picker's "Create a launch kit": a text link at the end of the tabs (goes to its own page) */ | |
| .lp-kit-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 0; | |
| border: 0; | |
| background: none; | |
| color: var(--white); | |
| font: inherit; | |
| font-weight: 500; | |
| cursor: pointer; | |
| } | |
| .lp-kit-link:hover { | |
| text-decoration: underline; | |
| text-underline-offset: 4px; | |
| } | |
| .lp-kit-link .icon { | |
| transition: transform 0.15s; | |
| } | |
| .lp-kit-link:hover .icon { | |
| transform: translateX(3px); | |
| } | |
| /* Where a post came from (its Launch Kit): a quiet line, apart from the attachment */ | |
| .lp-from-kit { | |
| margin: 0; | |
| } | |
| /* The Launchpad's right column: X and LinkedIn, connected or a Connect button */ | |
| .lp-connections { | |
| align-content: start; | |
| gap: 14px; | |
| } | |
| .lp-connections > h2, | |
| .lp-connections > p { | |
| margin: 0; | |
| } | |
| .lp-conn { | |
| display: grid; | |
| gap: 10px; | |
| padding: 14px 16px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .lp-conn p { | |
| margin: 0; | |
| } | |
| .lp-conn-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| .lp-conn-who { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .lp-conn-who img, | |
| .lp-conn-dot { | |
| flex: none; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| background: var(--surface-2); | |
| } | |
| .lp-conn > .btn { | |
| justify-self: start; | |
| } | |
| /* The composer (New post / Post): platforms, the attachment, one text box per platform */ | |
| .lp-compose .lp-platforms .chip { | |
| padding: 6px 14px; | |
| font-size: 0.875rem; | |
| } | |
| .lp-platform { | |
| display: grid; | |
| gap: 8px; | |
| padding: 14px 16px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .lp-platform-head { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 6px 12px; | |
| } | |
| .lp-platform-head .btn { | |
| margin-left: auto; | |
| } | |
| .lp-when { | |
| align-items: end; | |
| gap: 12px 24px; | |
| } | |
| /* When a post goes out: a button with the picked time, opening a month calendar and the day's half hours */ | |
| .slot-picker { | |
| display: grid; | |
| gap: 6px; | |
| width: 100%; | |
| } | |
| .slot-trigger { | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .slot-panel { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 140px; | |
| gap: 16px; | |
| padding: 14px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| } | |
| .slot-cal-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .slot-days { | |
| display: grid; | |
| grid-template-columns: repeat(7, 1fr); | |
| gap: 4px; | |
| text-align: center; | |
| } | |
| .slot-weekday { | |
| padding: 4px 0; | |
| } | |
| .slot-day, | |
| .slot-time { | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text); | |
| font: inherit; | |
| cursor: pointer; | |
| } | |
| .slot-day { | |
| height: 34px; | |
| } | |
| .slot-day.out { | |
| color: var(--text-2); | |
| } | |
| .slot-day.today { | |
| border-color: var(--line-strong); | |
| } | |
| .slot-day:hover:not(:disabled), | |
| .slot-time:hover:not(:disabled) { | |
| border-color: var(--blue-35); | |
| } | |
| .slot-day.on, | |
| .slot-time.on { | |
| border-color: var(--blue); | |
| background: var(--blue-10); | |
| color: var(--white); | |
| } | |
| .slot-day:disabled, | |
| .slot-time:disabled { | |
| opacity: 0.3; | |
| cursor: default; | |
| } | |
| .slot-times { | |
| display: grid; | |
| align-content: start; | |
| gap: 4px; | |
| max-height: 280px; | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| scrollbar-width: thin; | |
| } | |
| .slot-time { | |
| padding: 7px 10px; | |
| text-align: left; | |
| } | |
| @media (max-width: 640px) { | |
| .slot-panel { | |
| grid-template-columns: 1fr; | |
| } | |
| .slot-times { | |
| grid-template-columns: repeat(3, 1fr); | |
| max-height: 180px; | |
| } | |
| } | |
| /* What a post carries: a thumbnail (or an icon), its title and what it is */ | |
| .lp-attach { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 10px 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .lp-attach-text { | |
| display: grid; | |
| flex: 1; | |
| gap: 2px; | |
| min-width: 0; | |
| text-align: left; | |
| } | |
| .lp-attach-text strong { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .lp-attach-btn { | |
| justify-self: start; | |
| border-style: dashed; | |
| } | |
| .lp-thumb { | |
| flex: none; | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 10px; | |
| object-fit: cover; | |
| background: var(--surface-2); | |
| } | |
| .lp-thumb-icon { | |
| display: grid; | |
| place-items: center; | |
| color: var(--text-2); | |
| } | |
| /* Paused (connection down): why, Reconnect, and how to resume */ | |
| .lp-paused { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 8px 12px; | |
| padding: 12px 14px; | |
| border: 1px solid rgba(255, 196, 0, 0.45); | |
| border-radius: var(--radius-sm); | |
| background: rgba(255, 196, 0, 0.08); | |
| color: #ffd257; | |
| } | |
| .lp-paused .muted { | |
| flex-basis: 100%; | |
| } | |
| .lp-warn { | |
| color: #ffd257; | |
| } | |
| /* The Library as rows to schedule from: thumbnail, title, a Video / Launch Kit tag, the action on the right */ | |
| .lp-pick-rows { | |
| max-height: calc(4.5 * 64px + 4 * 6px); | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| scrollbar-width: thin; | |
| } | |
| /* The picker's empty message ("Nothing uploaded yet."), centered under the search */ | |
| .lp-pick-empty { | |
| margin: 8px 0; | |
| text-align: center; | |
| } | |
| /* An uploaded file's row: the row itself, and a Rename (pencil) button beside it */ | |
| /* One card per row: the row (attach / open) and its ⋮ inside the same border */ | |
| .lp-pick-item { | |
| display: flex; | |
| align-items: center; | |
| padding-right: 8px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: rgba(255, 255, 255, 0.03); | |
| transition: border-color 0.15s; | |
| } | |
| .lp-pick-item:hover { | |
| border-color: var(--blue-35); | |
| } | |
| .lp-pick-item > .lp-pick-row, | |
| .lp-pick-item > .lp-pick-row:hover { | |
| flex: 1; | |
| min-width: 0; | |
| border-color: transparent; | |
| background: transparent; | |
| } | |
| /* A row's ⋮ button, and the menu it opens (drawn over the picker's pop-up) */ | |
| .lp-row-menu-btn, | |
| .lp-row-menu-btn:hover { | |
| flex: none; | |
| width: 32px; | |
| height: 40px; | |
| padding: 0; | |
| display: grid; | |
| place-items: center; | |
| border: 0; | |
| border-radius: 8px; | |
| background: transparent; | |
| box-shadow: none; | |
| color: var(--text-2); | |
| } | |
| .lp-row-menu-btn:hover, | |
| .lp-row-menu-btn[aria-expanded="true"] { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--white); | |
| } | |
| .lp-menu { | |
| position: fixed; | |
| z-index: 60; | |
| display: grid; | |
| min-width: 160px; | |
| padding: 6px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: #0b0d12; | |
| box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); | |
| } | |
| .lp-menu-item { | |
| padding: 9px 12px; | |
| border: 0; | |
| border-radius: 6px; | |
| background: transparent; | |
| color: var(--text); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .lp-menu-item:hover, | |
| .lp-menu-item:focus-visible { | |
| background: var(--blue-10); | |
| outline: none; | |
| } | |
| /* Delete: lit up like the app's other danger buttons */ | |
| .lp-menu-item.danger:hover, | |
| .lp-menu-item.danger:focus-visible { | |
| color: var(--black); | |
| background: var(--white); | |
| } | |
| /* Renaming it: the row turns into a name field with Save / Cancel */ | |
| .lp-rename-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .lp-rename-row .input { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| /* Preview of an uploaded image or video, fitted to the screen */ | |
| .lp-preview { | |
| display: grid; | |
| place-items: center; | |
| min-height: 160px; | |
| border-radius: var(--radius-sm); | |
| background: #000; | |
| overflow: hidden; | |
| } | |
| .lp-preview video, | |
| .lp-preview img { | |
| display: block; | |
| max-width: 100%; | |
| max-height: 70vh; | |
| } | |
| /* The attached upload's thumbnail, clickable to preview it */ | |
| .lp-thumb-btn { | |
| flex: none; | |
| padding: 0; | |
| border: 0; | |
| border-radius: var(--radius-sm); | |
| background: none; | |
| cursor: zoom-in; | |
| } | |
| .lp-thumb-btn:focus-visible { | |
| outline: 2px solid var(--blue); | |
| outline-offset: 2px; | |
| } | |
| /* Uploads: the drop area for a file from the computer (click or drag one in) */ | |
| .lp-drop { | |
| display: grid; | |
| justify-items: center; | |
| gap: 6px; | |
| padding: 28px 16px; | |
| border: 1.5px dashed var(--line-strong); | |
| border-radius: var(--radius); | |
| background: rgba(255, 255, 255, 0.02); | |
| text-align: center; | |
| cursor: pointer; | |
| transition: border-color 0.15s, background 0.15s; | |
| } | |
| .lp-drop:hover, | |
| .lp-drop:focus-visible, | |
| .lp-drop.over { | |
| border-color: var(--blue); | |
| background: var(--blue-10); | |
| outline: none; | |
| } | |
| .lp-drop.busy { | |
| cursor: progress; | |
| } | |
| .lp-drop-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 50%; | |
| background: var(--blue-10); | |
| color: var(--blue); | |
| } | |
| .lp-drop-link { | |
| color: var(--blue); | |
| text-decoration: underline; | |
| text-underline-offset: 3px; | |
| } | |
| /* The render pop-up: the progress bar spans the modal (the editor's is capped at 280px) */ | |
| .vw-render-status.lp-render-status { | |
| width: 100%; | |
| margin: 12px 0 8px; /* room from the text above and the buttons below */ | |
| } | |
| /* "Rendering MP4 42%" centered over the bar */ | |
| .lp-render-status .vw-render-line { | |
| justify-content: center; | |
| } | |
| .lp-render-status .vw-render-pct { | |
| margin-left: 0; | |
| } | |
| /* While the Library loads: the loader in the middle of the list's space (the screen's height on Schedule a launch) */ | |
| .lp-loading { | |
| display: grid; | |
| place-items: center; | |
| min-height: calc(4.5 * 64px + 4 * 6px); | |
| } | |
| .lp-loading.fill { | |
| min-height: max(calc(4.5 * 64px + 4 * 6px), calc(100dvh - 340px)); | |
| } | |
| /* Schedule a launch: the rows take the rest of the screen (below the header, kind chips and search) */ | |
| .lp-pick-rows-fill { | |
| max-height: calc(100dvh - 340px); | |
| } | |
| .lp-pick-row { | |
| width: 100%; | |
| padding-left: 10px; | |
| color: var(--text); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .lp-pick-row .lp-thumb { | |
| width: 44px; | |
| height: 44px; | |
| } | |
| .lp-pick-row:hover { | |
| border-color: var(--blue-35); | |
| } | |
| .lp-tag { | |
| flex: none; | |
| min-width: 96px; /* one width for every kind, so the tags line up in a column, label centered */ | |
| padding: 3px 10px; | |
| text-align: center; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| color: var(--text-2); | |
| font-size: 0.75rem; | |
| white-space: nowrap; | |
| } | |
| /* Both in the app's blue: a kit filled, a video outlined */ | |
| .lp-tag.kit { | |
| border-color: var(--blue-60); | |
| background: var(--blue-10); | |
| color: var(--white); | |
| } | |
| .lp-tag.video { | |
| border-color: var(--blue-35); | |
| background: transparent; | |
| color: var(--white); | |
| } | |
| /* Under the calendar: how many posts are coming up, and how to change one */ | |
| .lp-cal-foot { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 6px 16px; | |
| } | |
| .lp-cal-foot p { | |
| margin: 0; | |
| } | |
| .lp-cal-hint { | |
| color: var(--text-2); | |
| } | |
| /* Editing a scheduled post: When and Account side by side, their labels and boxes on one line (the time zone note | |
| sits under When without pushing Account down), and the actions on their own line below a rule */ | |
| .lp-edit-when { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| align-items: start; | |
| gap: 16px; | |
| } | |
| .lp-edit-when .field { | |
| margin: 0; | |
| } | |
| .lp-edit-when select.input { | |
| width: 100%; | |
| } | |
| @media (max-width: 640px) { | |
| .lp-edit-when { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| } | |
| .lp-edit-actions { | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-top: 4px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--line); | |
| } | |
| /* "Audio can't be posted": the headphones, why, and the download */ | |
| .lp-audio-only { | |
| max-width: 460px; | |
| } | |
| .lp-audio-only p { | |
| margin: 0; | |
| line-height: 1.6; | |
| } | |
| .lp-audio-only-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 52px; | |
| height: 52px; | |
| border-radius: 50%; | |
| background: var(--blue-10); | |
| color: var(--blue); | |
| } | |
| .lp-audio-only-actions { | |
| justify-content: flex-end; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| /* A slide deck: outlined like a video, dashed (its slides go out as images) */ | |
| .lp-tag.deck { | |
| border-color: var(--blue-35); | |
| border-style: dashed; | |
| color: var(--white); | |
| } | |
| .lp-pick-go { | |
| display: inline-flex; | |
| flex: none; | |
| align-items: center; | |
| gap: 6px; | |
| min-width: 110px; | |
| justify-content: flex-end; | |
| color: var(--text-2); | |
| font-size: 0.85rem; | |
| } | |
| .lp-pick-row:hover .lp-pick-go { | |
| color: var(--white); | |
| } | |
| @media (max-width: 640px) { | |
| .lp-pick-go { | |
| display: none; | |
| } | |
| } | |
| /* A calendar item that carries a video or images */ | |
| .cal-media { | |
| display: inline-flex; | |
| margin-left: 4px; | |
| vertical-align: -1px; | |
| color: var(--blue); | |
| } | |
| .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 takes all the room under the create buttons and scrolls inside it */ | |
| .nbv-side > .stack { | |
| display: flex; | |
| flex: 1 1 auto; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| .nbv-side > .stack > * { | |
| flex: none; | |
| } | |
| .nbv-side > .stack > .nbv-made { | |
| flex: 1 1 0; | |
| align-content: start; | |
| grid-auto-rows: max-content; | |
| min-height: 12rem; | |
| 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); | |
| } | |
| /* ---------- Mind map: the right-rail tile and list, the dialog, and the galaxy explorer ---------- */ | |
| .nbv-make .nbv-make-map { | |
| grid-column: 1 / -1; | |
| display: grid; | |
| gap: 2px; | |
| } | |
| .mm-list { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .mm-row { | |
| position: relative; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 6px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| padding: 4px 6px 4px 4px; | |
| } | |
| .mm-row.is-ready:hover { | |
| border-color: var(--blue-60); | |
| } | |
| .mm-row-main { | |
| flex: 1; | |
| min-width: 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 6px; | |
| border: 0; | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .mm-row-main:disabled { | |
| cursor: default; | |
| opacity: 0.7; | |
| } | |
| .mm-row-art { | |
| flex: none; | |
| color: var(--blue); | |
| } | |
| .mm-row-text { | |
| display: grid; | |
| min-width: 0; | |
| } | |
| .mm-row-text strong { | |
| font-size: 0.875rem; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .voice-new .voice-pick:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.6; | |
| } | |
| /* 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; | |
| } | |
| .mm-row-progress { | |
| flex-basis: 100%; | |
| padding: 0 6px 6px; | |
| } | |
| .mm-dialog { | |
| display: grid; | |
| gap: 16px; | |
| } | |
| .mm-dialog-h { | |
| margin: 0 0 8px; | |
| font: 500 0.95rem var(--font-body); | |
| } | |
| .mm-pick-toggle { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 14px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--white); | |
| font: 0.875rem var(--font-body); | |
| cursor: pointer; | |
| } | |
| .mm-pick { | |
| margin-top: 8px; | |
| max-height: 200px; | |
| overflow: auto; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| padding: 4px; | |
| } | |
| .mm-pick-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 6px 8px; | |
| border-radius: 6px; | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| } | |
| .mm-pick-item:hover { | |
| background: var(--surface-2); | |
| } | |
| .mm-pick-all { | |
| color: var(--text-2); | |
| border-bottom: 1px solid var(--line); | |
| border-radius: 6px 6px 0 0; | |
| } | |
| .mm-focus.input { | |
| width: 100%; | |
| height: auto; | |
| min-height: 150px; | |
| padding: 14px 16px; | |
| border-radius: var(--radius-sm); | |
| resize: vertical; | |
| line-height: 1.6; | |
| } | |
| /* Explorer */ | |
| .mm-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 45; | |
| background: radial-gradient(ellipse at 50% 45%, #0a1226 0%, #03060d 55%, #000 100%); | |
| color: var(--white); | |
| } | |
| .mm-stage { | |
| position: absolute; | |
| inset: 0; | |
| overflow: hidden; | |
| } | |
| .mm-svg { | |
| display: block; | |
| cursor: grab; | |
| touch-action: none; | |
| user-select: none; | |
| } | |
| .mm-svg:active { | |
| cursor: grabbing; | |
| } | |
| .mm-star { | |
| fill: #fff; | |
| opacity: 0.5; | |
| } | |
| .mm-twinkle { | |
| animation: mm-twinkle 4s ease-in-out infinite; | |
| } | |
| @keyframes mm-twinkle { | |
| 50% { | |
| opacity: 0.12; | |
| } | |
| } | |
| .mm-orbit { | |
| fill: none; | |
| stroke: var(--blue); | |
| stroke-width: 1; | |
| stroke-opacity: 0.3; | |
| pointer-events: none; | |
| } | |
| .mm-orbit-0 { | |
| stroke-opacity: 0.55; | |
| } | |
| .mm-link { | |
| stroke: var(--blue); | |
| stroke-width: 1; | |
| pointer-events: none; | |
| } | |
| .mm-node { | |
| cursor: pointer; | |
| outline: none; | |
| } | |
| .mm-hit { | |
| fill: transparent; | |
| } | |
| .mm-body { | |
| fill: #06101f; | |
| stroke: var(--blue); | |
| stroke-width: 1.5; | |
| vector-effect: non-scaling-stroke; | |
| transition: fill 0.2s; | |
| } | |
| .mm-l1 .mm-body { | |
| fill: var(--blue); | |
| stroke: #8fbaff; | |
| } | |
| .mm-l3 .mm-body { | |
| fill: #fff; | |
| stroke: none; | |
| } | |
| .mm-node:hover .mm-body, | |
| .mm-node:focus-visible .mm-body, | |
| .mm-node.is-focus .mm-body { | |
| fill: #fff; | |
| stroke: #8fbaff; | |
| stroke-width: 3; | |
| } | |
| .mm-pulse { | |
| animation: mm-breathe 5s ease-in-out infinite; | |
| transform-box: fill-box; | |
| transform-origin: center; | |
| } | |
| @keyframes mm-breathe { | |
| 50% { | |
| transform: scale(1.12); | |
| } | |
| } | |
| .mm-label, | |
| .mm-note, | |
| .mm-more { | |
| fill: #fff; | |
| font-family: var(--font-display); | |
| paint-order: stroke; | |
| stroke: #000; | |
| stroke-width: 0.22em; | |
| stroke-linejoin: round; | |
| pointer-events: none; | |
| } | |
| .mm-l0 .mm-label { | |
| font-weight: 600; | |
| } | |
| .mm-note { | |
| fill: rgba(255, 255, 255, 0.78); | |
| font-family: var(--font-body); | |
| } | |
| .mm-more { | |
| fill: #8fbaff; | |
| font-family: var(--font-mono); | |
| } | |
| .mm-top { | |
| position: absolute; | |
| top: 14px; | |
| left: 14px; | |
| right: 14px; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| pointer-events: none; | |
| } | |
| .mm-top > * { | |
| pointer-events: auto; | |
| } | |
| .mm-title { | |
| min-width: 0; | |
| display: grid; | |
| gap: 2px; | |
| padding-top: 2px; | |
| } | |
| .mm-title strong { | |
| font: 600 1rem var(--font-display); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .mm-trail { | |
| font-size: 0.75rem; | |
| color: var(--text-3); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .mm-trail .link-btn { | |
| font-size: inherit; | |
| } | |
| .mm-btn { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 38px; | |
| height: 38px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 50%; | |
| background: rgba(8, 12, 22, 0.92); | |
| color: var(--white); | |
| font: 500 1.1rem var(--font-body); | |
| cursor: pointer; | |
| } | |
| .mm-btn:hover { | |
| border-color: var(--blue-60); | |
| } | |
| .mm-btn-text { | |
| width: auto; | |
| padding: 0 14px; | |
| border-radius: 999px; | |
| font-size: 0.8rem; | |
| margin-left: auto; | |
| } | |
| .mm-btn-sm { | |
| width: 28px; | |
| height: 28px; | |
| } | |
| .mm-controls { | |
| position: absolute; | |
| left: 14px; | |
| bottom: 44px; | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .mm-hint { | |
| position: absolute; | |
| left: 14px; | |
| bottom: 14px; | |
| margin: 0; | |
| font-size: 0.72rem; | |
| pointer-events: none; | |
| } | |
| .mm-panel { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: 340px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| padding: 64px 20px 20px; | |
| overflow: auto; | |
| background: rgba(4, 8, 16, 0.94); | |
| border-left: 1px solid var(--line); | |
| transition: transform 0.3s; | |
| } | |
| .mm-panel.is-closed { | |
| transform: translateX(100%); | |
| } | |
| .mm-panel-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| position: absolute; | |
| top: 14px; | |
| left: 20px; | |
| right: 14px; | |
| } | |
| .mm-panel h3 { | |
| margin: 0; | |
| font: 600 1.25rem var(--font-display); | |
| } | |
| .mm-note-text { | |
| margin: 0; | |
| color: var(--text-2); | |
| line-height: 1.55; | |
| } | |
| .mm-panel-label { | |
| margin: 8px 0 0; | |
| font-size: 0.7rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-3); | |
| } | |
| .mm-chips, | |
| .mm-sources { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .mm-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .mm-chip { | |
| padding: 5px 11px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: 999px; | |
| background: var(--blue-05); | |
| color: var(--white); | |
| font: 0.8rem var(--font-body); | |
| cursor: pointer; | |
| } | |
| .mm-chip:hover { | |
| border-color: var(--blue); | |
| } | |
| .mm-sources li + li { | |
| margin-top: 10px; | |
| } | |
| .mm-quote { | |
| margin: 4px 0 0; | |
| padding-left: 10px; | |
| border-left: 2px solid var(--blue-35); | |
| } | |
| .mm-panel .btn { | |
| align-self: flex-start; | |
| margin-top: 6px; | |
| } | |
| @media (max-width: 819px) { | |
| .mm-panel { | |
| top: auto; | |
| width: auto; | |
| left: 0; | |
| max-height: 38%; | |
| padding: 18px 16px 16px; | |
| border-left: 0; | |
| border-top: 1px solid var(--line); | |
| } | |
| .mm-panel-head { | |
| position: static; | |
| } | |
| .mm-controls { | |
| bottom: calc(38% + 14px); | |
| } | |
| .mm-hint { | |
| display: none; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .mm-twinkle, | |
| .mm-pulse { | |
| animation: none; | |
| } | |
| } | |
| .modal.modal-wide:has(.mm-dialog) { | |
| width: min(960px, 100%); | |
| } | |
| /* ---------- Mind map galaxy: deep space, coloured arms, glowing stars (these rules refine the ones above) ---------- */ | |
| .mm-overlay { | |
| background: | |
| radial-gradient(ellipse 60% 50% at 18% 28%, rgba(33, 124, 255, 0.14), transparent 70%), | |
| radial-gradient(ellipse 55% 55% at 82% 72%, rgba(33, 124, 255, 0.22), transparent 70%), | |
| radial-gradient(ellipse 40% 35% at 62% 16%, rgba(33, 124, 255, 0.08), transparent 70%), | |
| radial-gradient(ellipse at 50% 45%, #13224a 0%, #0a1430 60%, #060c20 100%); | |
| } | |
| .mm-overlay::before { | |
| content: ""; | |
| position: absolute; | |
| inset: -20%; | |
| pointer-events: none; | |
| background: linear-gradient(118deg, transparent 38%, rgba(160, 190, 255, 0.06) 46%, rgba(205, 220, 255, 0.1) 50%, rgba(160, 190, 255, 0.06) 54%, transparent 62%); | |
| filter: blur(28px); | |
| } | |
| .mm-vignette { | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(4, 9, 26, 0.45) 100%); | |
| } | |
| .mm-meteor { | |
| position: absolute; | |
| top: 10%; | |
| left: -12%; | |
| width: 150px; | |
| height: 1.5px; | |
| pointer-events: none; | |
| opacity: 0; | |
| background: linear-gradient(90deg, transparent, #fff); | |
| animation: mm-meteor 12s linear infinite 3s; | |
| } | |
| @keyframes mm-meteor { | |
| 0% { | |
| transform: translate(0, 0) rotate(24deg); | |
| opacity: 0; | |
| } | |
| 1.5% { | |
| opacity: 0.9; | |
| } | |
| 7% { | |
| transform: translate(75vw, 34vw) rotate(24deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate(75vw, 34vw) rotate(24deg); | |
| opacity: 0; | |
| } | |
| } | |
| .mm-orbit { | |
| stroke-width: 1; | |
| stroke-opacity: 0.32; | |
| stroke-dasharray: none; | |
| } | |
| .mm-satellite { | |
| opacity: 0.85; | |
| } | |
| .mm-link { | |
| stroke-width: 1; | |
| } | |
| .mm-flow { | |
| stroke-dasharray: 3 8; | |
| animation: mm-flow 1.6s linear infinite; | |
| } | |
| @keyframes mm-flow { | |
| to { | |
| stroke-dashoffset: -22; | |
| } | |
| } | |
| .mm-halo { | |
| pointer-events: none; | |
| opacity: 0.8; | |
| } | |
| .mm-node:hover .mm-halo { | |
| opacity: 1; | |
| } | |
| .mm-spike { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 0.9; | |
| stroke-opacity: 0.38; | |
| vector-effect: non-scaling-stroke; | |
| pointer-events: none; | |
| } | |
| .mm-body { | |
| stroke-width: 1.5; | |
| } | |
| .mm-l1 .mm-body { | |
| fill: currentColor; | |
| stroke: #fff; | |
| stroke-opacity: 0.7; | |
| filter: none; | |
| } | |
| .mm-l2 .mm-body { | |
| fill: #1c3f86; | |
| stroke: currentColor; | |
| stroke-width: 1.8; | |
| } | |
| .mm-l3 .mm-body { | |
| fill: #fff; | |
| stroke: none; | |
| } | |
| .mm-spark { | |
| fill: #fff; | |
| pointer-events: none; | |
| } | |
| .mm-l2 .mm-spark { | |
| fill: currentColor; | |
| } | |
| .mm-l3 .mm-spark { | |
| display: none; | |
| } | |
| .mm-node:hover .mm-body, | |
| .mm-node:focus-visible .mm-body, | |
| .mm-node.is-focus .mm-body { | |
| fill: currentColor; | |
| stroke: #fff; | |
| stroke-opacity: 1; | |
| stroke-width: 2; | |
| filter: none; | |
| } | |
| .mm-node.is-focus .mm-spark, | |
| .mm-node:hover .mm-spark { | |
| fill: #fff; | |
| } | |
| .mm-sources .link-btn { | |
| background: none; | |
| border: 0; | |
| padding: 0; | |
| color: #fff; | |
| text-align: left; | |
| text-decoration: underline; | |
| text-decoration-color: color-mix(in srgb, var(--c, #4f9bff) 60%, transparent); | |
| text-underline-offset: 3px; | |
| } | |
| .mm-corona { | |
| fill: none; | |
| stroke: #bcd6ff; | |
| stroke-opacity: 0.5; | |
| stroke-width: 1; | |
| stroke-dasharray: 2 6; | |
| vector-effect: non-scaling-stroke; | |
| pointer-events: none; | |
| } | |
| .mm-corona-2 { | |
| stroke-opacity: 0.2; | |
| stroke-dasharray: none; | |
| } | |
| .mm-focus-ring { | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-width: 1.5; | |
| pointer-events: none; | |
| animation: mm-ring 2.2s ease-in-out infinite; | |
| } | |
| @keyframes mm-ring { | |
| 0%, | |
| 100% { | |
| opacity: 0.9; | |
| } | |
| 50% { | |
| opacity: 0.25; | |
| } | |
| } | |
| .mm-l0 .mm-label { | |
| letter-spacing: 0.14em; | |
| font-weight: 700; | |
| } | |
| .mm-l1 .mm-label { | |
| font-weight: 600; | |
| } | |
| .mm-l3 .mm-label { | |
| fill: rgba(255, 255, 255, 0.88); | |
| } | |
| .mm-panel { | |
| background: linear-gradient(180deg, rgba(8, 14, 30, 0.96), rgba(3, 6, 14, 0.97)); | |
| border-left-color: color-mix(in srgb, var(--c, #4f9bff) 35%, transparent); | |
| } | |
| .mm-panel::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--c, #4f9bff), transparent); | |
| } | |
| .mm-panel h3 { | |
| text-shadow: 0 0 24px color-mix(in srgb, var(--c, #4f9bff) 60%, transparent); | |
| } | |
| .mm-chip { | |
| border-color: color-mix(in srgb, var(--c, #4f9bff) 55%, transparent); | |
| background: color-mix(in srgb, var(--c, #4f9bff) 12%, transparent); | |
| } | |
| .mm-chip:hover { | |
| border-color: var(--c, #4f9bff); | |
| background: color-mix(in srgb, var(--c, #4f9bff) 24%, transparent); | |
| } | |
| .mm-quote { | |
| border-left-color: color-mix(in srgb, var(--c, #4f9bff) 55%, transparent); | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .mm-meteor, | |
| .mm-flow, | |
| .mm-focus-ring { | |
| animation: none; | |
| } | |
| } | |
| .mm-trail .link-btn { | |
| background: none; | |
| border: 0; | |
| padding: 0; | |
| color: var(--text-2); | |
| } | |
| .mm-trail .link-btn:hover { | |
| color: #fff; | |
| } | |
| .mm-shapes { | |
| margin-left: auto; | |
| display: inline-flex; | |
| gap: 2px; | |
| padding: 3px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: rgba(8, 12, 22, 0.92); | |
| } | |
| .mm-shape { | |
| padding: 6px 12px; | |
| border: 0; | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text-2); | |
| font: 500 0.78rem var(--font-body); | |
| cursor: pointer; | |
| } | |
| .mm-shape:hover { | |
| color: #fff; | |
| } | |
| .mm-shape.is-on { | |
| background: var(--blue); | |
| color: #fff; | |
| } | |
| .mm-btn-text { | |
| margin-left: 0; | |
| } | |
| /* Thumbs up / down under an answer */ | |
| .fb { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .fb-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .fb-btn { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 30px; | |
| height: 30px; | |
| border: 1px solid transparent; | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--text-3); | |
| cursor: pointer; | |
| transition: color 0.15s, border-color 0.15s, background 0.15s; | |
| } | |
| .fb-btn:hover { | |
| color: var(--white); | |
| border-color: var(--line-strong); | |
| } | |
| .fb-btn.is-on { | |
| color: var(--blue); | |
| border-color: var(--blue-35); | |
| background: var(--blue-10); | |
| } | |
| .fb-why { | |
| display: grid; | |
| gap: 8px; | |
| padding: 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| } | |
| .fb-why p { | |
| margin: 0; | |
| } | |
| .fb-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .fb-chip { | |
| padding: 5px 11px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text-2); | |
| font: 0.8rem var(--font-body); | |
| cursor: pointer; | |
| } | |
| .fb-chip.is-on { | |
| border-color: var(--blue); | |
| background: var(--blue-10); | |
| color: var(--white); | |
| } | |
| .fb-note.input { | |
| height: auto; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.9rem; | |
| resize: vertical; | |
| line-height: 1.5; | |
| } | |
| /* Quiz: settings dialog and player. Black, white and blue only: a right answer is filled blue with a tick, a wrong | |
| one is outlined and struck through. */ | |
| .quiz-lang { | |
| max-width: 260px; | |
| } | |
| .nbv-chat-quiz { | |
| margin-left: auto; | |
| flex-shrink: 0; | |
| } | |
| .quiz-play { | |
| display: grid; | |
| gap: 14px; | |
| } | |
| .quiz-progress { | |
| height: 4px; | |
| overflow: hidden; | |
| border-radius: 999px; | |
| background: var(--surface-2); | |
| } | |
| .quiz-progress span { | |
| display: block; | |
| height: 100%; | |
| background: var(--blue); | |
| transition: width 0.25s ease; | |
| } | |
| .quiz-q { | |
| margin: 0; | |
| font: 500 1.15rem/1.45 var(--font-display); | |
| } | |
| .quiz-options { | |
| display: grid; | |
| gap: 8px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .quiz-opt { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| width: 100%; | |
| padding: 12px 14px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .quiz-opt:hover:not(:disabled) { | |
| background: var(--surface-2); | |
| } | |
| .quiz-opt.on { | |
| border-color: var(--blue); | |
| background: var(--blue-10); | |
| } | |
| .quiz-opt.right { | |
| border-color: var(--blue); | |
| background: var(--blue-20); | |
| } | |
| .quiz-opt.wrong { | |
| border-style: dashed; | |
| color: var(--text-3); | |
| text-decoration: line-through; | |
| } | |
| .quiz-opt:disabled { | |
| cursor: default; | |
| } | |
| .quiz-mark { | |
| display: inline-grid; | |
| place-items: center; | |
| flex-shrink: 0; | |
| width: 20px; | |
| height: 20px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 50%; | |
| } | |
| .quiz-mark.square { | |
| border-radius: 5px; | |
| } | |
| .quiz-opt.on .quiz-mark, | |
| .quiz-opt.right .quiz-mark { | |
| border-color: var(--blue); | |
| background: var(--blue); | |
| } | |
| .quiz-short.input { | |
| height: auto; | |
| resize: vertical; | |
| } | |
| .quiz-feedback { | |
| display: grid; | |
| gap: 6px; | |
| padding: 12px 14px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| } | |
| .quiz-feedback.right { | |
| border-color: var(--blue-60); | |
| background: var(--blue-10); | |
| } | |
| .quiz-feedback p { | |
| margin: 0; | |
| } | |
| .quiz-result { | |
| display: grid; | |
| gap: 14px; | |
| } | |
| .quiz-score { | |
| margin: 0; | |
| font: 600 3rem var(--font-display); | |
| } | |
| .quiz-score span { | |
| color: var(--text-3); | |
| font-size: 1.5rem; | |
| } | |
| .quiz-review { | |
| display: grid; | |
| gap: 6px; | |
| margin: 0; | |
| padding-left: 20px; | |
| } | |
| .quiz-review li.wrong { | |
| color: var(--text-3); | |
| } | |
| /* Flashcards: a card that flips between its front and its answer. */ | |
| .fc-deck { | |
| display: grid; | |
| gap: 14px; | |
| } | |
| .fc-count { | |
| margin: 0; | |
| } | |
| .fc-card { | |
| display: grid; | |
| align-content: center; | |
| justify-items: center; | |
| gap: 12px; | |
| min-height: 240px; | |
| padding: 28px 24px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| color: var(--white); | |
| font: inherit; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| .fc-card.flipped { | |
| border-color: var(--blue-60); | |
| background: var(--blue-10); | |
| } | |
| .fc-side { | |
| font: 0.75rem var(--font-mono); | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| color: var(--text-3); | |
| } | |
| .fc-text { | |
| font: 500 1.25rem/1.5 var(--font-display); | |
| } | |
| .fc-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| /* Reports: the create dialog and the report page. Black, white and blue only. */ | |
| .rp-dialog { | |
| gap: 18px; | |
| } | |
| .rp-source { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .rp-source-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| justify-self: start; | |
| padding: 8px 14px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| } | |
| .rp-formats { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .rp-format { | |
| position: relative; | |
| display: grid; | |
| gap: 8px; | |
| padding: 18px 20px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .rp-format.on { | |
| border-color: var(--blue); | |
| background: var(--blue-20); | |
| } | |
| .rp-format svg { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| } | |
| .rp-new { | |
| margin-left: 6px; | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| background: var(--white); | |
| color: var(--black); | |
| font: 600 0.7rem var(--font-body); | |
| } | |
| .rp-templates { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .rp-template { | |
| position: relative; | |
| display: grid; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| } | |
| .rp-template.on { | |
| border-color: var(--blue); | |
| background: var(--blue-10); | |
| } | |
| .rp-template.wait { | |
| min-height: 110px; | |
| background: var(--surface); | |
| } | |
| .rp-template-main { | |
| display: grid; | |
| gap: 8px; | |
| padding: 16px 56px 16px 18px; | |
| border: 0; | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .rp-pencil { | |
| position: absolute; | |
| top: 12px; | |
| right: 12px; | |
| display: grid; | |
| place-items: center; | |
| width: 34px; | |
| height: 34px; | |
| border: 0; | |
| border-radius: 50%; | |
| background: var(--surface-2); | |
| color: var(--white); | |
| cursor: pointer; | |
| } | |
| .rp-pencil:hover { | |
| background: var(--blue-20); | |
| } | |
| .rp-note { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| margin: 0; | |
| } | |
| .rp-header { | |
| display: grid; | |
| gap: 6px; | |
| padding: 16px 18px; | |
| border-radius: var(--radius); | |
| background: var(--blue-10); | |
| } | |
| .rp-instructions.input { | |
| height: auto; | |
| min-height: 190px; | |
| resize: vertical; | |
| line-height: 1.6; | |
| } | |
| .rp-page { | |
| display: grid; | |
| gap: 18px; | |
| max-width: 820px; | |
| } | |
| .rp-head h1 { | |
| margin: 4px 0 12px; | |
| } | |
| .rp { | |
| display: grid; | |
| gap: 22px; | |
| } | |
| .rp-block { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .rp-h { | |
| margin: 0; | |
| font: 500 1.1rem var(--font-display); | |
| } | |
| .rp-callout { | |
| padding: 14px 18px; | |
| border-left: 2px solid var(--blue); | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| background: var(--blue-10); | |
| } | |
| .rp-callout p { | |
| margin: 4px 0 0; | |
| } | |
| .rp-terms { | |
| display: grid; | |
| gap: 10px; | |
| margin: 0; | |
| } | |
| .rp-terms dt { | |
| font-weight: 600; | |
| } | |
| .rp-terms dd { | |
| margin: 2px 0 0; | |
| color: var(--text-2); | |
| } | |
| .rp-table-wrap { | |
| overflow-x: auto; | |
| } | |
| .rp-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .rp-table th, | |
| .rp-table td { | |
| padding: 8px 12px; | |
| border: 1px solid var(--line); | |
| text-align: left; | |
| vertical-align: top; | |
| } | |
| .rp-table th { | |
| background: var(--surface-2); | |
| } | |
| .rp-timeline { | |
| display: grid; | |
| gap: 14px; | |
| margin: 0; | |
| padding: 0 0 0 18px; | |
| border-left: 1px solid var(--blue-60); | |
| list-style: none; | |
| } | |
| .rp-timeline li { | |
| display: grid; | |
| gap: 2px; | |
| } | |
| .rp-timeline p { | |
| margin: 0; | |
| color: var(--text-2); | |
| } | |
| .rp-visual { | |
| display: grid; | |
| gap: 10px; | |
| justify-items: start; | |
| } | |
| @media (max-width: 640px) { | |
| .rp-formats, | |
| .rp-templates { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .rp-suggest-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 18px; | |
| } | |
| /* A spot in a report where the AI thinks a visual would help */ | |
| .rp-suggestion { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 14px; | |
| padding: 12px 16px; | |
| border: 1px dashed var(--blue-60); | |
| border-radius: var(--radius); | |
| background: var(--blue-05); | |
| } | |
| .rp-suggestion p { | |
| margin: 2px 0 0; | |
| } | |
| .rp-visual-wrap { | |
| position: relative; | |
| } | |
| .rp-remove { | |
| justify-self: end; | |
| } | |
| .rp-add-options { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr); | |
| gap: 10px; | |
| } | |
| .rp-share-link { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .rp-share-link .input { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| /* The page a share link opens */ | |
| .rp-public { | |
| display: grid; | |
| align-content: start; | |
| gap: 24px; | |
| min-height: 100vh; | |
| max-width: 820px; | |
| margin: 0 auto; | |
| padding: 20px var(--gutter) 56px; | |
| } | |
| .rp-public-empty { | |
| justify-items: center; | |
| align-content: center; | |
| text-align: center; | |
| } | |
| .rp-public-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .rp-public-body h1 { | |
| margin: 4px 0 20px; | |
| } | |
| .rp-public-foot { | |
| padding-top: 20px; | |
| border-top: 1px solid var(--line); | |
| text-align: center; | |
| } | |
| .rp-sources { | |
| position: relative; | |
| } | |
| .rp-sources-pop { | |
| position: absolute; | |
| top: calc(100% + 8px); | |
| right: 0; | |
| z-index: 20; | |
| width: min(360px, 86vw); | |
| max-height: 60vh; | |
| overflow: auto; | |
| padding: 14px 16px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| background: var(--black); | |
| box-shadow: var(--glow-md); | |
| } | |
| .rp-sources-pop ul { | |
| display: grid; | |
| gap: 8px; | |
| margin: 8px 0 0; | |
| padding-left: 18px; | |
| } | |
| /* Quiz and flashcard dialogs: wide, source on the left and focus on the right, so nothing needs scrolling. */ | |
| .modal.modal-wide:has(.sf-grid) { | |
| width: min(1180px, 100%); | |
| } | |
| .sf-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 28px; | |
| align-items: start; | |
| } | |
| .sf-col { | |
| display: grid; | |
| gap: 12px; | |
| align-content: start; | |
| min-width: 0; | |
| } | |
| .sf-grid .picker-list { | |
| max-height: 168px; | |
| } | |
| .sf-grid .vw-focus-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .sf-grid .vw-focus-desc { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .sf-grid .vw-focus-custom textarea { | |
| min-height: 56px; | |
| } | |
| .sf-settings { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 14px 28px; | |
| } | |
| /* The dialog itself never scrolls when the window is tall enough for it; the post list scrolls on its own. */ | |
| @media (min-height: 760px) { | |
| .modal:has(.sf-grid) { | |
| overflow: hidden; | |
| } | |
| } | |
| @media (max-width: 860px) { | |
| .sf-grid, | |
| .sf-settings { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Quiz, flashcards: the notebook dropdown with a posts dropdown beside it (no list underneath), and three columns */ | |
| .sp-row { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .sp-trigger { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| width: 100%; | |
| min-height: 46px; | |
| padding: 0 18px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| cursor: pointer; | |
| } | |
| .sp-trigger.open, | |
| .sp-trigger:focus-visible { | |
| border-color: var(--blue); | |
| outline: none; | |
| } | |
| .sp-trigger:disabled { | |
| opacity: 0.6; | |
| cursor: default; | |
| } | |
| .sp-panel { | |
| position: fixed; | |
| z-index: 70; | |
| display: grid; | |
| gap: 8px; | |
| overflow: auto; | |
| padding: 12px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| background: var(--black); | |
| box-shadow: var(--glow-lg); | |
| } | |
| .sp-note { | |
| margin: 0; | |
| } | |
| .modal.modal-wide:has(.sf-3) { | |
| width: min(1360px, 100%); | |
| } | |
| .sf-3 { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 36px; | |
| } | |
| .sf-3 .sf-col { | |
| gap: 18px; | |
| } | |
| /* In the third column the settings stack, one under another, with the button last */ | |
| .sf-3 .sf-settings { | |
| grid-template-columns: 1fr; | |
| gap: 18px; | |
| } | |
| @media (max-width: 1100px) { | |
| .sf-3 { | |
| grid-template-columns: 1fr; | |
| } | |
| .sp-row { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Create report: one size for every view, wide, so it never grows or scrolls. */ | |
| /* videos.css also sizes a modal that holds .vw-in-modal, and loads later: the extra class wins over it */ | |
| .modal.modal-wide:has(.rp-dialog) { | |
| width: min(1320px, 100%); | |
| } | |
| .rp-dialog { | |
| height: min(620px, calc(100vh - 100px)); | |
| grid-template-rows: auto auto minmax(0, 1fr) auto; | |
| gap: 14px; | |
| } | |
| .rp-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .rp-source-view { | |
| grid-row: 2 / 4; | |
| align-content: start; | |
| overflow: auto; | |
| } | |
| .rp-formats { | |
| gap: 12px; | |
| } | |
| .rp-format { | |
| gap: 4px; | |
| padding: 12px 18px; | |
| } | |
| .rp-area { | |
| display: grid; | |
| align-content: start; | |
| gap: 10px; | |
| min-height: 0; | |
| } | |
| .rp-templates { | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .rp-template-main { | |
| align-content: start; | |
| gap: 6px; | |
| padding: 14px 54px 14px 16px; | |
| } | |
| .rp-template-main strong { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| overflow-wrap: break-word; | |
| } | |
| .rp-template-main .muted { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| font-size: 0.85rem; | |
| } | |
| .rp-template.wait { | |
| align-content: center; | |
| gap: 10px; | |
| min-height: 104px; | |
| padding: 16px; | |
| } | |
| .rp-spin { | |
| margin-left: 4px; | |
| } | |
| .rp-loading-text { | |
| text-transform: none; | |
| letter-spacing: 0; | |
| color: var(--text-3); | |
| } | |
| .rp-suggest-label { | |
| margin-top: 6px; | |
| } | |
| .rp-editor { | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr) auto; | |
| gap: 10px; | |
| height: 100%; | |
| min-height: 0; | |
| } | |
| .rp-editor-top { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| } | |
| .rp-lang { | |
| width: 220px; | |
| flex-shrink: 0; | |
| } | |
| /* A text area, not the single line pill the other inputs are */ | |
| .rp-instructions.input { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 140px; | |
| padding: 16px 18px; | |
| border-radius: var(--radius); | |
| line-height: 1.65; | |
| resize: none; | |
| } | |
| .rp-editing { | |
| margin: 0; | |
| } | |
| .rp-bar { | |
| grid-row: 1; | |
| } | |
| .rp-formats { | |
| grid-row: 2; | |
| } | |
| .rp-area { | |
| grid-row: 3; | |
| } | |
| /* The instructions fill the frame, so the Interactive view has no empty gap under it */ | |
| .rp-area:has(.rp-editor) { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .rp-area > .rp-editor { | |
| flex: 1; | |
| height: auto; | |
| } | |
| /* Interactive: the instructions box is a comfortable size, not the whole frame (the pencil editor still fills it) */ | |
| .rp-area:not(:has(.rp-editing)) > .rp-editor { | |
| flex: 0 1 auto; | |
| height: 300px; | |
| max-height: 100%; | |
| } | |
| .rp-foot { | |
| grid-row: 4; | |
| display: grid; | |
| gap: 8px; | |
| align-self: end; | |
| } | |
| @media (max-width: 900px) { | |
| .rp-dialog { | |
| height: auto; | |
| } | |
| .rp-templates { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .rp-editor-top { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| } | |
| /* The instructions label: bigger and clear of the format cards above it */ | |
| .rp-editor-top .vw-label { | |
| color: var(--white); | |
| font: 500 1.05rem var(--font-body); | |
| letter-spacing: 0; | |
| text-transform: none; | |
| } | |
| .rp-area:not(:has(.rp-editing)) > .rp-editor { | |
| margin-top: 20px; | |
| } | |
| /* Create report, the template editor: the template and source on the left, the instructions filling the right */ | |
| .rp-edit { | |
| grid-row: 1 / 4; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr); | |
| align-content: start; | |
| gap: 20px; | |
| min-height: 0; | |
| } | |
| .rp-edit-side { | |
| display: grid; | |
| align-content: start; | |
| gap: 18px; | |
| } | |
| .rp-back { | |
| justify-self: start; | |
| padding: 6px 2px; | |
| border: 0; | |
| background: transparent; | |
| color: var(--text-2); | |
| font: inherit; | |
| cursor: pointer; | |
| } | |
| .rp-back:hover { | |
| color: var(--white); | |
| } | |
| .rp-edit-side .rp-header { | |
| gap: 8px; | |
| padding: 20px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: var(--radius); | |
| } | |
| .rp-edit-side .rp-header strong { | |
| font: 500 1.35rem/1.2 var(--font-display); | |
| } | |
| .rp-edit-tip { | |
| margin: 0; | |
| line-height: 1.6; | |
| } | |
| .rp-edit-main { | |
| min-height: 0; | |
| } | |
| .rp-edit-main .rp-editor { | |
| height: 100%; | |
| } | |
| /* A report on the page: contents on the left, large light headings and roomy text on the right */ | |
| .rp-page, | |
| .rp-public { | |
| max-width: 1240px; | |
| } | |
| .rp-layout { | |
| display: block; | |
| } | |
| .rp-layout.has-toc { | |
| display: grid; | |
| grid-template-columns: 300px minmax(0, 1fr); | |
| gap: 56px; | |
| align-items: start; | |
| } | |
| .rp-toc { | |
| position: sticky; | |
| top: 24px; | |
| display: grid; | |
| gap: 18px; | |
| max-height: calc(100vh - 48px); | |
| overflow: auto; | |
| } | |
| .rp-toc-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 44px; | |
| height: 44px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 50%; | |
| background: var(--surface-2); | |
| } | |
| .rp-toc ol { | |
| display: grid; | |
| gap: 6px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .rp-toc button { | |
| display: flex; | |
| gap: 10px; | |
| width: 100%; | |
| padding: 10px 12px; | |
| border: 0; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-2); | |
| font: 400 1rem/1.4 var(--font-body); | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .rp-toc button:hover { | |
| color: var(--white); | |
| } | |
| .rp-toc button.on { | |
| background: var(--surface-2); | |
| color: var(--white); | |
| } | |
| .rp-toc-n { | |
| flex-shrink: 0; | |
| color: var(--text-3); | |
| } | |
| .rp { | |
| gap: 36px; | |
| min-width: 0; | |
| } | |
| .rp-slot { | |
| display: grid; | |
| gap: 18px; | |
| scroll-margin-top: 24px; | |
| } | |
| .rp-prose h2 { | |
| margin: 0 0 18px; | |
| font: 400 clamp(2rem, 3.2vw, 2.9rem) / 1.15 var(--font-display); | |
| letter-spacing: -0.01em; | |
| } | |
| .rp-prose h3 { | |
| margin: 28px 0 10px; | |
| font: 500 1.45rem/1.3 var(--font-display); | |
| } | |
| .rp-prose p, | |
| .rp-prose li { | |
| font-size: 1.1rem; | |
| line-height: 1.75; | |
| color: var(--text-2); | |
| } | |
| .rp-prose strong { | |
| color: var(--white); | |
| } | |
| .rp-prose ul { | |
| display: grid; | |
| gap: 12px; | |
| padding-left: 28px; | |
| list-style: circle; | |
| } | |
| .rp-prose li::marker { | |
| color: var(--text-2); | |
| } | |
| @media (max-width: 960px) { | |
| .rp-layout.has-toc { | |
| grid-template-columns: 1fr; | |
| gap: 24px; | |
| } | |
| .rp-toc { | |
| display: none; | |
| } | |
| } | |
| /* Sources under an answer: each source once, with a clickable number for every place it was cited */ | |
| .cites-grouped { | |
| display: grid; | |
| gap: 10px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .cites-grouped li { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| gap: 4px 12px; | |
| } | |
| .cite-nums { | |
| display: inline-flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| } | |
| .cite-num { | |
| vertical-align: baseline; | |
| height: 22px; | |
| min-width: 22px; | |
| margin: 0 3px; | |
| font-size: 0.75rem; | |
| } | |
| .sp-row { | |
| grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); | |
| } | |
| .sp-trigger-text { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* The fixed notebook and its posts dropdown, one under the other */ | |
| .sp-fixed { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .sp-notebook { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-height: 46px; | |
| padding: 0 18px; | |
| border: 1px solid var(--blue-60); | |
| border-radius: 999px; | |
| background: var(--blue-10); | |
| min-width: 0; | |
| } | |
| .sp-notebook strong { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| font-weight: 600; | |
| } | |
| .sp-notebook-label { | |
| flex-shrink: 0; | |
| font: 0.7rem var(--font-mono); | |
| letter-spacing: 0.16em; | |
| text-transform: uppercase; | |
| color: var(--text-2); | |
| } | |
| .sp-notebook .muted { | |
| margin-left: auto; | |
| flex-shrink: 0; | |
| } | |
| /* Quiz and flashcards layout: source and its settings, then the focus, then the rest. */ | |
| .sf-below { | |
| display: grid; | |
| gap: 18px; | |
| padding-top: 18px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .sf-submit { | |
| display: grid; | |
| justify-items: end; | |
| gap: 10px; | |
| margin-top: 6px; | |
| } | |
| /* The character count stays on one line */ | |
| .vw-focus-custom-foot .mono { | |
| flex-shrink: 0; | |
| white-space: nowrap; | |
| } | |
| .rp-bar-title { | |
| font: 500 1.15rem var(--font-display); | |
| } | |
| /* The source view: a title row, the two columns, and Done */ | |
| .rp-source-view { | |
| gap: 0; | |
| } | |
| /* Create report, one screen: the sources and focus on the left, the format and templates on the right */ | |
| .rp-dialog { | |
| height: min(740px, calc(100vh - 100px)); | |
| grid-template-rows: minmax(0, 1fr) auto; | |
| gap: 16px; | |
| } | |
| .rp-split { | |
| grid-row: 1; | |
| grid-template-columns: 420px minmax(0, 1fr); | |
| gap: 40px; | |
| min-height: 0; | |
| } | |
| .rp-left { | |
| align-content: start; | |
| gap: 14px; | |
| min-height: 0; | |
| overflow: auto; | |
| padding-right: 4px; | |
| } | |
| .rp-left .vw-focus-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .rp-left .vw-focus-desc { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .rp-left .vw-focus-custom textarea { | |
| min-height: 56px; | |
| } | |
| .rp-right { | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr); | |
| gap: 16px; | |
| min-height: 0; | |
| } | |
| .rp-right .rp-area { | |
| grid-row: auto; | |
| } | |
| .rp-right .rp-templates { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| } | |
| .rp-edit { | |
| grid-row: 1; | |
| } | |
| .rp-foot { | |
| grid-row: 2; | |
| } | |
| @media (max-width: 1000px) { | |
| .rp-dialog { | |
| height: auto; | |
| } | |
| .rp-split { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Quiz and flashcards open in a popup like the other dialogs, and can be minimised to a pill */ | |
| .so-title { | |
| margin: 0; | |
| overflow: hidden; | |
| font: 500 1.1rem var(--font-display); | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .so-actions { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .so-pill { | |
| position: fixed; | |
| right: 20px; | |
| bottom: 20px; | |
| z-index: 45; | |
| display: flex; | |
| align-items: center; | |
| max-width: min(420px, calc(100vw - 40px)); | |
| border: 1px solid var(--blue-60); | |
| border-radius: 999px; | |
| background: #060c20; | |
| box-shadow: var(--glow-md); | |
| animation: so-open 0.3s ease; | |
| } | |
| .so-pill-open { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 0; | |
| padding: 10px 6px 10px 16px; | |
| border: 0; | |
| background: transparent; | |
| color: var(--white); | |
| font: inherit; | |
| cursor: pointer; | |
| } | |
| .so-pill-title { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .so-pill-dot { | |
| flex-shrink: 0; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--blue); | |
| box-shadow: 0 0 10px var(--blue); | |
| } | |
| .so-pill-close { | |
| margin-right: 6px; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .so-pill { | |
| animation: none; | |
| } | |
| } | |
| /* Create report, one column: the sources in a row on top, then the format, then the templates or instructions */ | |
| .rp-split { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto auto minmax(0, 1fr); | |
| gap: 16px; | |
| align-content: start; | |
| } | |
| .rp-source-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: flex-end; | |
| gap: 12px 16px; | |
| } | |
| .rp-source-row > .field { | |
| flex: 0 0 auto; | |
| } | |
| .rp-source-row .sp-fixed { | |
| flex: 1 1 560px; | |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); | |
| align-items: center; | |
| } | |
| .rp-source-row .vw-label { | |
| display: none; | |
| } | |
| .rp-split > .rp-formats { | |
| grid-row: auto; | |
| } | |
| .rp-split .rp-format { | |
| align-content: start; | |
| min-height: 0; | |
| padding: 14px 20px; | |
| } | |
| .rp-split .rp-area { | |
| grid-row: auto; | |
| } | |
| .rp-split .rp-templates { | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| } | |
| @media (max-width: 1000px) { | |
| .rp-split .rp-templates { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| .rp-source-row > .field:has(.picker) { | |
| flex: 1 1 100%; | |
| } | |
| .rp-dialog { | |
| height: min(680px, calc(100vh - 100px)); | |
| } | |
| /* Posts and chats: two matching dropdowns side by side under the notebook bar */ | |
| .sp-menus { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| /* The sources at the end of a report */ | |
| .rp-sources-section { | |
| margin-top: 12px; | |
| padding-top: 28px; | |
| border-top: 1px solid var(--line); | |
| } | |
| /* The prompt and the sources of a report, in a drop-down */ | |
| .rp-sources-toggle { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 22px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text); | |
| font: inherit; | |
| cursor: pointer; | |
| } | |
| .rp-sources-toggle:hover { | |
| border-color: var(--blue-60); | |
| } | |
| .rp-sources-toggle svg { | |
| transition: transform 0.15s ease; | |
| } | |
| .rp-sources-toggle.open svg { | |
| transform: rotate(180deg); | |
| } | |
| .rp-sources-panel { | |
| display: grid; | |
| gap: 22px; | |
| margin-top: 14px; | |
| padding: 22px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: var(--surface-1, rgba(255, 255, 255, 0.03)); | |
| } | |
| .rp-sources-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 12px; | |
| } | |
| .rp-sources-sub { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 0 0 10px; | |
| font: 500 1rem / 1.3 var(--font-body, inherit); | |
| } | |
| .rp-sources-head .rp-sources-sub { | |
| margin: 0; | |
| } | |
| .rp-sources-count { | |
| padding: 1px 8px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| color: var(--text-2); | |
| font-size: 0.75rem; | |
| } | |
| .rp-sources-filter { | |
| width: min(260px, 100%); | |
| } | |
| .rp-sources-prompt { | |
| margin: 0; | |
| color: var(--text-2); | |
| line-height: 1.7; | |
| white-space: pre-wrap; | |
| } | |
| /* The sources: aligned rows in two columns, scrolling when there are many, so titles line up and none is cut off to a stub */ | |
| .rp-sources-list { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 6px 14px; | |
| max-height: 380px; | |
| margin: 0; | |
| padding: 0 6px 0 0; | |
| overflow-y: auto; | |
| list-style: none; | |
| scrollbar-width: thin; | |
| } | |
| .rp-src-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| min-width: 0; | |
| } | |
| .rp-src-main { | |
| display: flex; | |
| flex: 1 1 auto; | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 0; | |
| padding: 9px 12px; | |
| border: 1px solid transparent; | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.03); | |
| color: var(--text); | |
| font-size: 0.9rem; | |
| text-decoration: none; | |
| } | |
| a.rp-src-main:hover { | |
| border-color: var(--blue-60); | |
| background: rgba(255, 255, 255, 0.06); | |
| } | |
| .rp-src-n { | |
| flex: 0 0 auto; | |
| min-width: 1.6em; | |
| color: var(--text-2); | |
| font-size: 0.72rem; | |
| } | |
| .rp-src-title { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .rp-src-out { | |
| flex: 0 0 auto; | |
| color: var(--text-2); | |
| opacity: 0; | |
| transition: opacity 0.12s ease; | |
| } | |
| a.rp-src-main:hover .rp-src-out { | |
| opacity: 1; | |
| } | |
| @media (max-width: 720px) { | |
| .rp-sources-list { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| .rp-sources-head { | |
| flex-wrap: wrap; | |
| } | |
| } | |
| /* A suggested visual while it is being built */ | |
| .rp-suggestion.building { | |
| border-style: solid; | |
| border-color: var(--blue-60); | |
| } | |
| .rp-building { | |
| display: grid; | |
| gap: 8px; | |
| max-width: 420px; | |
| margin-top: 10px; | |
| } | |
| .rp-building-label { | |
| display: inline-flex; | |
| align-items: center; | |
| flex-shrink: 0; | |
| gap: 10px; | |
| color: var(--text-2); | |
| font-size: 0.875rem; | |
| } | |
| /* A report, cleaner: a clear title, a light contents list, a readable line length and quiet section dividers */ | |
| .rp-public { | |
| max-width: 1160px; | |
| gap: 20px; | |
| } | |
| .rp-public-bar { | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .rp-public-body h1, | |
| .rp-head h1 { | |
| margin: 8px 0 12px; | |
| font: 500 clamp(2.2rem, 4.2vw, 3.4rem) / 1.08 var(--font-display); | |
| letter-spacing: -0.02em; | |
| } | |
| .rp-meta { | |
| margin: 0 0 36px; | |
| color: var(--text-3); | |
| font-size: 0.9rem; | |
| } | |
| .rp-layout.has-toc { | |
| grid-template-columns: 250px minmax(0, 1fr); | |
| gap: 64px; | |
| } | |
| /* Contents: a small label and a plain list, the current section marked by a blue bar */ | |
| .rp-toc { | |
| gap: 12px; | |
| top: 28px; | |
| } | |
| .rp-toc-icon { | |
| display: none; | |
| } | |
| .rp-toc::before { | |
| content: "Contents"; | |
| padding-left: 14px; | |
| color: var(--text-3); | |
| font: 0.7rem var(--font-mono); | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| } | |
| .rp-toc ol { | |
| gap: 2px; | |
| } | |
| .rp-toc button { | |
| padding: 8px 14px; | |
| border-radius: 0; | |
| box-shadow: inset 1px 0 0 var(--line-strong); | |
| font-size: 0.95rem; | |
| line-height: 1.4; | |
| } | |
| .rp-toc button.on { | |
| background: transparent; | |
| box-shadow: inset 2px 0 0 var(--blue); | |
| color: var(--white); | |
| } | |
| .rp { | |
| gap: 0; | |
| } | |
| .rp-slot { | |
| gap: 20px; | |
| } | |
| /* Each section is set apart by a quiet rule and room, the first one is not */ | |
| .rp-slot:has(> .rp-prose h2) { | |
| padding: 40px 0 8px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .rp-slot:first-child:has(> .rp-prose h2) { | |
| padding-top: 0; | |
| border-top: 0; | |
| } | |
| .rp-slot:not(:has(> .rp-prose h2)) { | |
| padding: 8px 0; | |
| } | |
| .rp-prose h2 { | |
| margin: 0 0 18px; | |
| font: 500 clamp(1.7rem, 2.6vw, 2.2rem) / 1.2 var(--font-display); | |
| letter-spacing: -0.01em; | |
| } | |
| .rp-prose h3 { | |
| margin: 30px 0 10px; | |
| font: 500 1.25rem/1.3 var(--font-display); | |
| } | |
| .rp-prose p, | |
| .rp-prose li { | |
| max-width: 70ch; | |
| font-size: 1.05rem; | |
| line-height: 1.8; | |
| } | |
| .rp-prose p { | |
| margin: 0 0 16px; | |
| } | |
| .rp-sources-section { | |
| margin-top: 24px; | |
| } | |
| .rp-public-foot { | |
| margin-top: 24px; | |
| } | |
| @media (max-width: 960px) { | |
| .rp-public-body h1, | |
| .rp-head h1 { | |
| font-size: 2.1rem; | |
| } | |
| } | |
| /* A Mind Constellation inside a report: the same map, in a frame */ | |
| .mm-overlay.mm-embedded { | |
| position: relative; | |
| inset: auto; | |
| z-index: auto; | |
| height: clamp(420px, 62vh, 640px); | |
| overflow: hidden; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-lg); | |
| animation: none; | |
| } | |
| .rp-map-hint { | |
| margin: 0; | |
| } | |
| /* Cards with action buttons: the buttons and Delete share one line, and every button is the same size */ | |
| .artifact-inline { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 12px 8px; | |
| } | |
| .artifact-inline > * { | |
| flex: 0 0 100%; | |
| min-width: 0; | |
| } | |
| .artifact-inline .artifact-body, | |
| .artifact-inline .artifact-body .row, | |
| .artifact-inline .artifact-actions { | |
| display: contents; | |
| } | |
| .artifact-inline .artifact-body > p { | |
| flex: 0 0 100%; | |
| margin: 0; | |
| } | |
| .artifact-inline .btn, | |
| .artifact-inline .artifact-actions button { | |
| flex: 0 0 auto; | |
| width: auto; | |
| height: 40px; | |
| padding: 0 20px; | |
| border-radius: 999px; | |
| white-space: nowrap; | |
| } | |
| /* Infographics: the theme cards and the full-screen viewer */ | |
| /* .input is a one-line pill: this is a multi-line box, so it gets a height, padding and a softer corner */ | |
| .ig-prompt.input { | |
| height: auto; | |
| min-height: 170px; | |
| padding: 14px 18px; | |
| border-radius: 18px; | |
| line-height: 1.6; | |
| resize: vertical; | |
| } | |
| .ig-themes { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .ig-theme { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| padding: 8px; | |
| text-align: left; | |
| border: 1px solid var(--line, rgba(128, 128, 128, 0.3)); | |
| border-radius: 12px; | |
| background: transparent; | |
| color: inherit; | |
| cursor: pointer; | |
| } | |
| .ig-theme img { | |
| width: 100%; | |
| aspect-ratio: 2260 / 1600; | |
| object-fit: cover; | |
| object-position: top; | |
| border-radius: 8px; | |
| } | |
| .ig-theme-name { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .ig-theme.on { | |
| border-color: var(--accent, #7aa2ff); | |
| box-shadow: 0 0 0 2px var(--accent, #7aa2ff); | |
| } | |
| .ig-theme:disabled { | |
| opacity: 0.6; | |
| cursor: wait; | |
| } | |
| .ig-thumb { | |
| display: block; | |
| width: 100%; | |
| max-width: 280px; | |
| padding: 0; | |
| border: 1px solid var(--line, rgba(128, 128, 128, 0.3)); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| background: none; | |
| cursor: zoom-in; | |
| } | |
| /* The page is 1600 x 2260; the frame is scaled down to the width it is given */ | |
| .ig-frame { | |
| position: relative; | |
| width: 100%; | |
| overflow: hidden; | |
| background: #0f1720; | |
| border-radius: 10px; | |
| } | |
| .ig-frame iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| border: 0; | |
| transform-origin: top left; | |
| pointer-events: none; | |
| } | |
| /* The page (1600 x 2260) fills the modal, so its text is easy to read; the modal scrolls */ | |
| /* Sized from the window's height so the whole page fits with no scrolling: 170px is the modal's title and toolbar, 1600 x 2260 is the page */ | |
| .modal.modal-wide:has(.ig-viewer) { | |
| width: min(calc((100vh - 170px) * 1600 / 2260 + 36px), 100%); | |
| max-height: calc(100vh - 16px); | |
| overflow: hidden; | |
| } | |
| .ig-viewer { | |
| position: relative; | |
| display: grid; | |
| gap: 10px; | |
| width: 100%; | |
| } | |
| .ig-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| /* Over the picture, so opening it never changes the layout */ | |
| .ig-info { | |
| position: absolute; | |
| top: 44px; | |
| left: 0; | |
| right: 0; | |
| z-index: 5; | |
| display: grid; | |
| gap: 4px; | |
| padding: 14px 18px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 14px; | |
| background: rgba(0, 0, 0, 0.94); | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); | |
| } | |
| .ig-info p { | |
| margin: 0; | |
| } | |
| .ig-viewer .ig-frame { | |
| border-radius: 6px; | |
| } | |
| .ig-public .ig-frame { | |
| border-radius: 10px; | |
| box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); | |
| } | |
| @media (max-width: 1000px) { | |
| .ig-themes { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| .rp-infographic { | |
| display: grid; | |
| gap: 10px; | |
| justify-items: start; | |
| margin: 0; | |
| } | |
| .rp-infographic .ig-frame { | |
| max-width: 100%; | |
| } | |
| .rp-public.ig-public { | |
| max-width: 1000px; | |
| } | |
| /* A report as a flight: a "Flight plan" contents list, a path that fills as you read, and a waypoint for each section (the look of the blog posts) */ | |
| .rp-layout.has-toc { | |
| grid-template-columns: 240px minmax(0, 1fr); | |
| gap: 48px; | |
| } | |
| .rp-toc::before { | |
| content: none; | |
| } | |
| .rp-toc-label, | |
| .rp-stop-label { | |
| display: block; | |
| font-size: 0.68rem; | |
| letter-spacing: 0.16em; | |
| text-transform: uppercase; | |
| color: var(--blue); | |
| } | |
| .rp-toc ol { | |
| gap: 2px; | |
| border-left: 1px solid var(--line); | |
| } | |
| .rp-toc button { | |
| gap: 10px; | |
| margin-left: -1px; | |
| padding: 7px 10px; | |
| box-shadow: none; | |
| border-left: 2px solid transparent; | |
| color: var(--text-3); | |
| font-size: 0.85rem; | |
| } | |
| .rp-toc button .rp-toc-n { | |
| padding-top: 2px; | |
| font-size: 0.68rem; | |
| } | |
| .rp-toc li.done button { | |
| color: var(--text-2); | |
| } | |
| .rp-toc button.on { | |
| box-shadow: none; | |
| border-left-color: var(--blue); | |
| background: linear-gradient(90deg, var(--blue-10), transparent); | |
| color: var(--white); | |
| } | |
| .rp { | |
| position: relative; | |
| padding-left: 40px; | |
| } | |
| .rp-path { | |
| position: absolute; | |
| left: 11px; | |
| top: 6px; | |
| bottom: 0; | |
| width: 2px; | |
| background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 12px); | |
| } | |
| .rp-path-fill { | |
| width: 100%; | |
| background: linear-gradient(180deg, var(--blue-35), var(--blue)); | |
| box-shadow: 0 0 10px var(--blue-60); | |
| } | |
| .rp-path-ship { | |
| position: absolute; | |
| left: 50%; | |
| width: 14px; | |
| height: 14px; | |
| margin: -7px 0 0 -7px; | |
| border-radius: 50%; | |
| background: var(--white); | |
| box-shadow: 0 0 12px var(--white), 0 0 24px var(--blue); | |
| } | |
| .rp-slot.rp-stop { | |
| position: relative; | |
| margin-bottom: 24px; | |
| padding: 0; | |
| border-top: 0; | |
| } | |
| .rp-slot.rp-stop:first-of-type, | |
| .rp-slot.rp-stop:first-of-type:has(> .rp-prose h2) { | |
| padding-top: 0; | |
| } | |
| .rp-slot.rp-stop:has(> .rp-prose h2) { | |
| padding: 0; | |
| border-top: 0; | |
| } | |
| .rp-node { | |
| position: absolute; | |
| left: -36px; | |
| top: 2px; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| border: 2px solid var(--line-strong); | |
| background: var(--black); | |
| transition: all 0.4s ease; | |
| } | |
| .rp-stop.reached .rp-node { | |
| border-color: var(--blue); | |
| background: var(--blue); | |
| box-shadow: 0 0 14px var(--blue); | |
| } | |
| .rp-stop-label { | |
| margin: 0; | |
| color: var(--text-3); | |
| } | |
| .rp-stop.reached .rp-stop-label { | |
| color: var(--blue); | |
| } | |
| .rp-prose a { | |
| color: var(--white); | |
| text-decoration: underline; | |
| text-decoration-color: var(--blue); | |
| text-underline-offset: 3px; | |
| } | |
| @media (max-width: 960px) { | |
| .rp { | |
| padding-left: 32px; | |
| } | |
| .rp-node { | |
| left: -30px; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .rp-node { | |
| transition: none; | |
| } | |
| } | |
| /* Quiz settings: one clean column, the way it is read (difficulty, types, sources, topic), the button in a footer */ | |
| .qz-setup { | |
| gap: 24px; | |
| } | |
| .qz-setup .vw-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .qz-foot { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding-top: 18px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .modal.modal-wide:has(.qz-setup) { | |
| width: min(900px, 100%); | |
| } | |
| /* A source's buttons stay on one row, labels whole: a little tighter so all three fit a narrow card */ | |
| .source-actions { | |
| flex-wrap: nowrap; | |
| gap: 6px; | |
| } | |
| .source-actions .btn { | |
| flex: none; | |
| padding-inline: 14px; | |
| white-space: nowrap; | |
| } | |
| /* While a source is deleted the Delete button stays the way it looks once armed: solid white, with a dark spinner */ | |
| .source-card.removing { | |
| pointer-events: none; | |
| } | |
| .btn-danger.armed:disabled { | |
| opacity: 1; | |
| } | |
| .btn-danger.armed .nbv-send-spinner { | |
| border-color: rgba(0, 0, 0, 0.25); | |
| border-top-color: var(--black); | |
| } | |
| /* Create buttons: two to a row. Audio overview shares its row with Slide deck; its options and Mind Constellation take | |
| a whole row. */ | |
| .nbv-make { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .nbv-make .nbv-make-stars { | |
| grid-column: 1 / -1; | |
| } | |
| /* Mind Constellation: a little night sky of its own, stars that twinkle and a slow shine across it */ | |
| .nbv-make .nbv-make-stars { | |
| position: relative; | |
| overflow: hidden; | |
| min-height: 64px; | |
| border-color: var(--blue-35); | |
| background: | |
| radial-gradient(1.5px 1.5px at 12% 28%, #fff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 27% 70%, #fff 50%, transparent 52%), | |
| radial-gradient(2px 2px at 44% 36%, #cfe0ff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 58% 78%, #fff 50%, transparent 52%), | |
| radial-gradient(1.5px 1.5px at 72% 24%, #fff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 86% 62%, #cfe0ff 50%, transparent 52%), | |
| radial-gradient(120% 140% at 85% 0%, var(--blue-20), transparent 60%), | |
| linear-gradient(135deg, #05070f, #0a1224); | |
| box-shadow: inset 0 0 24px var(--blue-10); | |
| } | |
| .nbv-make .nbv-make-stars::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| radial-gradient(1px 1px at 20% 52%, #fff 50%, transparent 52%), | |
| radial-gradient(1.5px 1.5px at 36% 18%, #fff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 52% 58%, #cfe0ff 50%, transparent 52%), | |
| radial-gradient(2px 2px at 66% 46%, #fff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 80% 84%, #fff 50%, transparent 52%), | |
| radial-gradient(1.5px 1.5px at 94% 30%, #cfe0ff 50%, transparent 52%); | |
| animation: nbv-stars-twinkle 3.2s ease-in-out infinite; | |
| pointer-events: none; | |
| } | |
| .nbv-make .nbv-make-stars::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 40%; | |
| left: -50%; | |
| background: linear-gradient(100deg, transparent, rgba(160, 190, 255, 0.22), transparent); | |
| animation: nbv-stars-shine 5s ease-in-out infinite; | |
| pointer-events: none; | |
| } | |
| .nbv-make .nbv-make-stars > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .nbv-make .nbv-make-stars svg { | |
| color: var(--white); | |
| filter: drop-shadow(0 0 6px var(--blue)); | |
| } | |
| .nbv-make .nbv-make-stars:hover:not(:disabled) { | |
| box-shadow: inset 0 0 24px var(--blue-20), 0 0 18px var(--blue-35); | |
| } | |
| @keyframes nbv-stars-twinkle { | |
| 50% { | |
| opacity: 0.25; | |
| } | |
| } | |
| @keyframes nbv-stars-shine { | |
| 0%, | |
| 55% { | |
| left: -50%; | |
| } | |
| 100% { | |
| left: 130%; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .nbv-make .nbv-make-stars::before, | |
| .nbv-make .nbv-make-stars::after { | |
| animation: none; | |
| } | |
| } | |
| /* Mind Constellation, better: a constellation drawn in it, a title with a line under it, a deeper night sky */ | |
| .nbv-make .nbv-make-stars { | |
| min-height: 78px; | |
| gap: 14px; | |
| padding: 0 16px; | |
| justify-content: flex-start; | |
| border-color: var(--blue-60); | |
| background: | |
| radial-gradient(1.5px 1.5px at 8% 22%, #fff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 31% 82%, #fff 50%, transparent 52%), | |
| radial-gradient(2px 2px at 52% 20%, #cfe0ff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 66% 74%, #fff 50%, transparent 52%), | |
| radial-gradient(1.5px 1.5px at 78% 30%, #fff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 92% 70%, #cfe0ff 50%, transparent 52%), | |
| radial-gradient(70% 120% at 100% 0%, rgba(80, 120, 255, 0.35), transparent 65%), | |
| radial-gradient(60% 100% at 0% 100%, rgba(140, 90, 255, 0.22), transparent 65%), | |
| linear-gradient(135deg, #04060e, #0b1530); | |
| box-shadow: inset 0 0 30px var(--blue-10), 0 0 0 1px var(--blue-10); | |
| } | |
| .nbv-make .nbv-make-stars .nbv-stars-art { | |
| flex: none; | |
| color: #dbe6ff; | |
| filter: drop-shadow(0 0 5px var(--blue)); | |
| animation: nbv-stars-float 6s ease-in-out infinite; | |
| } | |
| .nbv-make .nbv-make-stars .nbv-stars-text { | |
| display: grid; | |
| gap: 3px; | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .nbv-make .nbv-make-stars .nbv-stars-text strong { | |
| font: 600 1.05rem var(--font-display); | |
| letter-spacing: 0.01em; | |
| } | |
| .nbv-make .nbv-make-stars .nbv-stars-text small { | |
| color: var(--text-2); | |
| font: 0.78rem var(--font-body); | |
| } | |
| @keyframes nbv-stars-float { | |
| 50% { | |
| transform: translateY(-2px); | |
| } | |
| } | |
| /* The list of maps: each a small card with its own sky, the facts on one line, a quiet delete */ | |
| .mm-row { | |
| gap: 10px; | |
| padding: 8px 10px 8px 8px; | |
| border-color: var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: | |
| radial-gradient(1px 1px at 82% 30%, #fff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 92% 70%, #cfe0ff 50%, transparent 52%), | |
| radial-gradient(80% 140% at 0% 0%, var(--blue-10), transparent 70%), | |
| var(--surface); | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .mm-row.is-ready:hover { | |
| box-shadow: 0 0 16px var(--blue-20); | |
| } | |
| .mm-row-main { | |
| gap: 12px; | |
| padding: 4px; | |
| } | |
| .mm-row-art { | |
| display: grid; | |
| place-items: center; | |
| width: 46px; | |
| height: 46px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: 50%; | |
| background: var(--blue-10); | |
| } | |
| .mm-row-text { | |
| gap: 3px; | |
| } | |
| .mm-row-text strong { | |
| font-size: 0.95rem; | |
| } | |
| .mm-row-text .small { | |
| display: block; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .mm-row .mm-row-del { | |
| flex: none; | |
| display: grid; | |
| place-items: center; | |
| width: 32px; | |
| height: 32px; | |
| padding: 0; | |
| border: 1px solid transparent; | |
| border-radius: 50%; | |
| background: transparent; | |
| color: var(--text-3); | |
| gap: 6px; | |
| } | |
| .mm-row .mm-row-del:hover { | |
| border-color: var(--line-strong); | |
| background: var(--surface-2); | |
| color: var(--white); | |
| } | |
| .mm-row .mm-row-del.armed { | |
| width: auto; | |
| padding: 0 12px; | |
| border-radius: 999px; | |
| background: var(--white); | |
| color: var(--black); | |
| font-size: 0.8rem; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .nbv-make .nbv-make-stars .nbv-stars-art { | |
| animation: none; | |
| } | |
| } | |
| /* Mind Constellation, calmer: blue and black only, the text on one line, the constellation tucked at the right */ | |
| .nbv-make .nbv-make-stars { | |
| min-height: 72px; | |
| justify-content: space-between; | |
| padding: 0 18px; | |
| border-color: var(--blue-35); | |
| background: | |
| radial-gradient(1.5px 1.5px at 46% 24%, #fff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 58% 78%, #cfe0ff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 74% 16%, #fff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 90% 84%, #cfe0ff 50%, transparent 52%), | |
| radial-gradient(90% 160% at 100% 50%, var(--blue-20), transparent 70%), | |
| linear-gradient(135deg, #05070d, #08101f); | |
| box-shadow: none; | |
| } | |
| .nbv-make .nbv-make-stars::before { | |
| background: | |
| radial-gradient(1px 1px at 52% 60%, #fff 50%, transparent 52%), | |
| radial-gradient(1.5px 1.5px at 66% 40%, #cfe0ff 50%, transparent 52%), | |
| radial-gradient(1px 1px at 84% 30%, #fff 50%, transparent 52%); | |
| } | |
| .nbv-make .nbv-make-stars .nbv-stars-text { | |
| flex: 1 1 auto; | |
| } | |
| .nbv-make .nbv-make-stars .nbv-stars-text strong { | |
| font: 600 1rem var(--font-display); | |
| white-space: nowrap; | |
| } | |
| .nbv-make .nbv-make-stars .nbv-stars-text small { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .nbv-make .nbv-make-stars .nbv-stars-art { | |
| flex: none; | |
| width: 56px; | |
| height: auto; | |
| color: #cfe0ff; | |
| } | |
| .nbv-make .nbv-make-stars:hover:not(:disabled) { | |
| border-color: var(--blue-60); | |
| box-shadow: 0 0 16px var(--blue-20); | |
| } | |
| /* The map's card: plain, no stray dots behind the text */ | |
| .mm-row { | |
| background: | |
| radial-gradient(80% 140% at 0% 0%, var(--blue-05), transparent 70%), | |
| var(--surface); | |
| } | |
| .mm-row .mm-row-text .small { | |
| font-size: 0.8rem; | |
| } | |
| /* Create buttons: a small icon before each label, white, the blue glow on hover */ | |
| .nbv-make > button:not(.nbv-make-stars), | |
| .nbv-make .nbv-make-label { | |
| gap: 10px; | |
| justify-content: flex-start; | |
| } | |
| .nbv-make > button.nbv-make-main { | |
| justify-content: space-between; | |
| } | |
| .nbv-make .nbv-make-label { | |
| display: inline-flex; | |
| align-items: center; | |
| } | |
| .nbv-make > button svg.icon, | |
| .nbv-make .nbv-make-label svg.icon { | |
| flex: none; | |
| color: var(--text-2); | |
| transition: color 0.2s, filter 0.2s; | |
| } | |
| .nbv-make > button:hover:not(:disabled) svg.icon { | |
| color: var(--blue); | |
| filter: drop-shadow(0 0 6px var(--blue-60)); | |
| } | |
| /* The quiz: the question type on the left, how far along on the right, always in view */ | |
| .quiz-meta { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .quiz-meta p { | |
| margin: 0; | |
| } | |
| .quiz-count { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| flex: none; | |
| color: var(--text-3); | |
| font: 500 0.95rem var(--font-mono); | |
| } | |
| .quiz-count strong { | |
| color: var(--white); | |
| font-size: 1.15rem; | |
| } | |
| .quiz-count svg { | |
| color: var(--blue); | |
| } | |
| /* The quiz result: a medal and a verdict, the score big, the per-question results folded away under it */ | |
| .quiz-result { | |
| display: grid; | |
| gap: 20px; | |
| } | |
| .quiz-hero { | |
| display: grid; | |
| justify-items: center; | |
| gap: 6px; | |
| padding: 28px 16px 24px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius); | |
| background: radial-gradient(80% 120% at 50% 0%, var(--blue-10), transparent 70%); | |
| text-align: center; | |
| } | |
| .quiz-hero p { | |
| margin: 0; | |
| } | |
| .quiz-badge { | |
| display: grid; | |
| place-items: center; | |
| width: 92px; | |
| height: 92px; | |
| margin-bottom: 6px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: 50%; | |
| background: var(--blue-10); | |
| color: var(--blue); | |
| box-shadow: 0 0 28px var(--blue-20); | |
| } | |
| .quiz-hero.gold .quiz-badge { | |
| border-color: rgba(255, 200, 70, 0.6); | |
| background: rgba(255, 200, 70, 0.12); | |
| color: #ffc846; | |
| box-shadow: 0 0 32px rgba(255, 200, 70, 0.28); | |
| } | |
| .quiz-hero.silver .quiz-badge { | |
| border-color: rgba(210, 220, 235, 0.6); | |
| background: rgba(210, 220, 235, 0.1); | |
| color: #dbe4f0; | |
| box-shadow: 0 0 28px rgba(210, 220, 235, 0.2); | |
| } | |
| .quiz-hero.bronze .quiz-badge { | |
| border-color: rgba(214, 140, 80, 0.6); | |
| background: rgba(214, 140, 80, 0.12); | |
| color: #e0955a; | |
| box-shadow: 0 0 28px rgba(214, 140, 80, 0.22); | |
| } | |
| .quiz-hero.low .quiz-badge { | |
| border-color: var(--line-strong); | |
| background: var(--surface-2); | |
| color: var(--text-2); | |
| box-shadow: none; | |
| } | |
| .quiz-verdict { | |
| font: 600 clamp(1.6rem, 3.4vw, 2.2rem) / 1.15 var(--font-display); | |
| } | |
| .quiz-hero .quiz-score { | |
| font: 600 clamp(3rem, 8vw, 4.5rem) / 1 var(--font-display); | |
| } | |
| .quiz-detail-toggle { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| width: 100%; | |
| padding: 12px 16px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--white); | |
| font: 500 0.95rem var(--font-body); | |
| cursor: pointer; | |
| } | |
| .quiz-detail-toggle:hover, | |
| .quiz-detail-toggle.open { | |
| border-color: var(--blue-60); | |
| } | |
| .quiz-result .quiz-review { | |
| display: grid; | |
| gap: 6px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .quiz-review button { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| width: 100%; | |
| padding: 10px 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-2); | |
| font: 0.92rem/1.45 var(--font-body); | |
| text-align: left; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| .quiz-review button:hover { | |
| border-color: var(--blue-60); | |
| color: var(--white); | |
| } | |
| .quiz-review-mark { | |
| flex: none; | |
| display: grid; | |
| place-items: center; | |
| width: 22px; | |
| height: 22px; | |
| margin-top: 1px; | |
| border-radius: 50%; | |
| } | |
| .quiz-review .right .quiz-review-mark { | |
| background: rgba(60, 200, 120, 0.18); | |
| color: #5fe0a0; | |
| } | |
| .quiz-review .wrong .quiz-review-mark { | |
| background: rgba(239, 68, 68, 0.18); | |
| color: #ff8a8a; | |
| } | |
| .quiz-review-n { | |
| flex: none; | |
| min-width: 1.6em; | |
| padding-top: 2px; | |
| color: var(--text-3); | |
| font-size: 0.8rem; | |
| } | |
| .quiz-review-q { | |
| min-width: 0; | |
| } | |
| /* The result fits on one screen: a smaller medal, the questions in two columns, one line each (the full text on hover) */ | |
| .quiz-result { | |
| gap: 14px; | |
| } | |
| .quiz-hero { | |
| gap: 4px; | |
| padding: 18px 16px 16px; | |
| } | |
| .quiz-badge { | |
| width: 68px; | |
| height: 68px; | |
| margin-bottom: 2px; | |
| } | |
| .quiz-badge svg { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .quiz-hero .quiz-score { | |
| font-size: clamp(2.4rem, 6vw, 3.4rem); | |
| } | |
| .quiz-result .quiz-review { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 6px; | |
| } | |
| .quiz-review button { | |
| align-items: center; | |
| padding: 8px 10px; | |
| } | |
| .quiz-review-q { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| @media (max-width: 720px) { | |
| .quiz-result .quiz-review { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| } | |
| /* The quiz's custom topic: a roomy box to type in */ | |
| .qz-setup .vw-focus-custom textarea { | |
| min-height: 140px; | |
| font-size: 1rem; | |
| line-height: 1.55; | |
| } | |
| /* The infographic viewer: wide by default (the modal is as wide as the window's height lets the whole page be), or tall */ | |
| .modal.modal-wide:has(.ig-viewer.landscape) { | |
| width: min(calc((100vh - 170px) * 2260 / 1600 + 36px), 100%); | |
| } | |
| .ig-bar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .ig-layout { | |
| display: inline-flex; | |
| padding: 2px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| } | |
| .ig-layout button { | |
| padding: 5px 12px; | |
| border: 0; | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text-2); | |
| font: 500 0.8rem var(--font-body); | |
| cursor: pointer; | |
| } | |
| .ig-layout button.on { | |
| background: var(--blue); | |
| color: var(--white); | |
| } | |
| .ig-dl { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .ig-dl-menu { | |
| position: absolute; | |
| top: calc(100% + 6px); | |
| right: 0; | |
| z-index: 5; | |
| display: grid; | |
| min-width: 190px; | |
| padding: 6px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: var(--black); | |
| box-shadow: var(--glow-lg); | |
| } | |
| .ig-dl-menu button { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 14px; | |
| padding: 9px 10px; | |
| border: 0; | |
| border-radius: 6px; | |
| background: transparent; | |
| color: var(--white); | |
| font: 500 0.88rem var(--font-body); | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .ig-dl-menu button:hover { | |
| background: var(--surface-2); | |
| } | |
| .ig-dl-menu small { | |
| font-size: 0.72rem; | |
| } | |
| .ig-thumb:has(.ig-frame) { | |
| max-width: 320px; | |
| } | |
| /* The odd one out in the Create grid takes a whole row, so no tile sits alone beside a gap */ | |
| .nbv-make .nbv-make-wide { | |
| grid-column: 1 / -1; | |
| } | |
| /* A make that was just asked for, until the server has it: a card with a spinner and a shimmer */ | |
| .nbv-starting { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| padding: 14px; | |
| border: 1px solid var(--blue-35); | |
| border-radius: var(--radius-sm); | |
| background: var(--blue-05); | |
| } | |
| .nbv-starting .nbv-send-spinner { | |
| flex: none; | |
| margin-top: 2px; | |
| } | |
| .nbv-starting-text { | |
| display: grid; | |
| flex: 1; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .nbv-starting-text strong { | |
| font: 500 0.92rem var(--font-body); | |
| } | |
| /* ---- Slide decks ------------------------------------------------------------------------------------------------ */ | |
| .sd-dialog { | |
| gap: 22px; | |
| } | |
| /* The settings: the two styles across one row, then format, length and language side by side */ | |
| .sd-themes { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 220px)); | |
| justify-content: center; | |
| gap: 16px; | |
| } | |
| .sd-theme { | |
| display: grid; | |
| gap: 6px; | |
| padding: 5px 5px 8px; | |
| text-align: left; | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| background: transparent; | |
| color: inherit; | |
| cursor: pointer; | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| .sd-theme:hover { | |
| border-color: var(--line-strong); | |
| } | |
| .sd-theme.on { | |
| border-color: var(--blue); | |
| box-shadow: 0 0 0 1px var(--blue), var(--glow-sm); | |
| } | |
| .sd-theme-img { | |
| position: relative; | |
| display: block; | |
| } | |
| .sd-theme-img img { | |
| display: block; | |
| width: 100%; | |
| aspect-ratio: 16 / 9; /* the whole slide, small */ | |
| object-fit: cover; | |
| border-radius: 8px; | |
| } | |
| .sd-check { | |
| position: absolute; | |
| top: 6px; | |
| right: 6px; | |
| display: grid; | |
| place-items: center; | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 50%; | |
| background: var(--black); | |
| color: var(--white); | |
| box-shadow: 0 0 0 2px var(--blue); | |
| } | |
| .sd-theme-name { | |
| padding: 0 4px; | |
| text-align: center; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| } | |
| .sd-opts { | |
| display: grid; | |
| grid-template-columns: auto minmax(210px, 1fr) minmax(140px, 0.7fr); /* format as wide as its pills */ | |
| column-gap: 28px; | |
| row-gap: 14px; | |
| align-items: start; | |
| } | |
| .sd-opts .field { | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| /* The dropdowns stay inside their column: a long value shortens with an ellipsis */ | |
| .sd-opts .dropdown, | |
| .sd-opts .dropdown-btn { | |
| min-width: 0; | |
| max-width: 100%; | |
| } | |
| .sd-opts .dropdown-value { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* The length's slide range, inside its dropdown: the same small grey text as the hints under the other fields */ | |
| .sd-opts .dropdown-value .muted { | |
| font-size: 0.83em; | |
| } | |
| .sd-opts .dropdown-btn { | |
| padding-left: 16px; | |
| padding-right: 14px; | |
| } | |
| /* Format pills look exactly like the dropdowns beside them: same height, text, border and fill */ | |
| .sd-opts .vw-chips { | |
| flex-wrap: nowrap; | |
| gap: 8px; | |
| } | |
| .sd-opts .vw-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| height: 48px; | |
| padding: 0 18px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: rgba(0, 0, 0, 0.6); | |
| color: var(--text); | |
| font: 500 1rem var(--font-body); | |
| white-space: nowrap; | |
| } | |
| .sd-opts .vw-chip.on { | |
| border-color: var(--blue); | |
| background: var(--blue); | |
| color: var(--white); | |
| } | |
| .sd-opts .vw-chip:hover:not(.on) { | |
| border-color: var(--blue-60); | |
| } | |
| /* The format's description wraps under the pills instead of widening their column */ | |
| .sd-opts > .field:first-child > small { | |
| display: block; | |
| width: 0; | |
| min-width: 100%; | |
| } | |
| /* A little more room than other dialogs, for the three settings side by side */ | |
| .modal.modal-wide:has(.sd-dialog) { | |
| width: min(840px, calc(100vw - 32px)); | |
| } | |
| .sd-prompt { | |
| width: 100%; | |
| min-height: 92px; | |
| padding: 14px 18px; | |
| border-radius: 14px; | |
| line-height: 1.55; | |
| resize: vertical; | |
| } | |
| /* One 1920 x 1080 slide, scaled into whatever box it is given. */ | |
| .sd-frame { | |
| position: relative; | |
| width: 100%; | |
| overflow: hidden; | |
| background: #000; | |
| } | |
| .sd-frame-width { | |
| aspect-ratio: 16 / 9; | |
| } | |
| .sd-frame-contain { | |
| position: absolute; | |
| inset: 0; | |
| background: transparent; | |
| } | |
| .sd-frame iframe { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| border: 0; | |
| transform-origin: center center; | |
| pointer-events: none; | |
| } | |
| /* In edit mode the slide's text is edited in place, so the frame takes the mouse */ | |
| .sd-frame-edit iframe { | |
| pointer-events: auto; | |
| } | |
| /* A deck in the notebook's list: a quiet row (icon, title, "2 sources · 5d ago", menu), highlighted on hover */ | |
| .sd-item { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| align-items: center; | |
| column-gap: 4px; | |
| padding: 4px 4px 4px 0; | |
| border-radius: 16px; | |
| transition: background 0.15s; | |
| } | |
| .sd-item.is-ready:hover, | |
| .sd-item:focus-within { | |
| background: var(--surface-2); | |
| } | |
| .sd-item-main { | |
| display: grid; | |
| grid-template-columns: 40px minmax(0, 1fr); | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 0; | |
| padding: 8px 4px 8px 10px; | |
| border-radius: 16px; | |
| outline: none; | |
| } | |
| .sd-item.is-ready .sd-item-main { | |
| cursor: pointer; | |
| } | |
| .sd-item-main:focus-visible { | |
| box-shadow: 0 0 0 2px var(--blue); | |
| } | |
| .sd-item-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 40px; | |
| height: 40px; | |
| color: var(--blue); | |
| } | |
| .sd-item-text { | |
| display: grid; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .sd-item-text strong { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| font-weight: 500; | |
| font-size: 0.95rem; | |
| color: var(--text); | |
| } | |
| .sd-item-meta { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| font-size: 0.82rem; | |
| color: var(--text-3); | |
| } | |
| .sd-item .sd-menu-wrap .sd-icon-btn { | |
| color: var(--text-2); | |
| } | |
| .sd-item-progress { | |
| grid-column: 1 / -1; | |
| padding: 0 12px 8px 60px; | |
| } | |
| .sd-item-failed { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .sd-item-failed p { | |
| flex: 1; | |
| margin: 0; | |
| } | |
| .sd-rename { | |
| width: 100%; | |
| padding: 4px 10px; | |
| font-size: 0.95rem; | |
| } | |
| /* The deck's popup: actions along the top, every slide below it */ | |
| .modal.modal-wide:has(.sd-view) { | |
| width: min(980px, calc(100vw - 32px)); | |
| max-height: calc(100vh - 32px); | |
| display: flex; | |
| flex-direction: column; | |
| transition: width 0.2s ease; | |
| } | |
| .modal.modal-wide:has(.sd-view.big) { | |
| width: calc(100vw - 32px); | |
| height: calc(100vh - 32px); | |
| } | |
| .modal:has(.sd-view) .modal-head { | |
| gap: 12px; | |
| } | |
| .modal:has(.sd-view) .modal-head h2 { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .sd-head-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| flex: none; | |
| } | |
| .sd-icon-btn { | |
| display: grid; | |
| place-items: center; | |
| width: 38px; | |
| height: 38px; | |
| padding: 0; | |
| border: 0; | |
| border-radius: 50%; | |
| background: transparent; | |
| color: var(--text); | |
| cursor: pointer; | |
| transition: background 0.15s, color 0.15s; | |
| } | |
| .sd-icon-btn:hover:not(:disabled), | |
| .sd-icon-btn[aria-expanded="true"], | |
| .sd-icon-btn[aria-pressed="true"] { | |
| background: var(--surface-2); | |
| color: var(--white); | |
| } | |
| .sd-icon-btn:focus-visible { | |
| outline: 2px solid var(--blue); | |
| outline-offset: 1px; | |
| } | |
| .sd-icon-btn:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| } | |
| .sd-menu-wrap { | |
| position: relative; | |
| } | |
| /* In <body>, above popups (z-index over the modal's backdrop) */ | |
| .sd-menu.sd-menu-floating { | |
| position: fixed; | |
| top: auto; | |
| right: auto; | |
| z-index: 2100; | |
| } | |
| .sd-menu { | |
| position: absolute; | |
| top: calc(100% + 6px); | |
| right: 0; | |
| z-index: 20; | |
| display: grid; | |
| min-width: 270px; | |
| padding: 6px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: var(--black); | |
| box-shadow: var(--glow-lg); | |
| } | |
| .sd-menu button { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 10px 12px; | |
| border: 0; | |
| border-radius: 6px; | |
| background: transparent; | |
| color: var(--white); | |
| font: 500 0.92rem var(--font-body); | |
| text-align: left; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| } | |
| .sd-menu button:hover, | |
| .sd-menu button:focus-visible { | |
| background: var(--surface-2); | |
| } | |
| .sd-menu button.danger { | |
| color: #ff8a8a; | |
| } | |
| .sd-confirm p { | |
| margin: 0; | |
| line-height: 1.6; | |
| } | |
| .sd-confirm-actions { | |
| justify-content: flex-end; | |
| gap: 10px; | |
| } | |
| .sd-menu .error-text { | |
| margin: 4px 8px; | |
| } | |
| .sd-menu-error { | |
| position: absolute; | |
| top: calc(100% + 6px); | |
| right: 0; | |
| width: 240px; | |
| text-align: right; | |
| } | |
| .sd-view { | |
| display: grid; | |
| gap: 12px; | |
| min-height: 0; | |
| flex: 1; | |
| } | |
| .sd-meta { | |
| margin: 0; | |
| } | |
| .sd-stack { | |
| display: grid; | |
| gap: 16px; | |
| max-height: calc(100vh - 190px); | |
| margin: 0; | |
| padding: 0 6px 6px 0; | |
| overflow-y: auto; | |
| list-style: none; | |
| } | |
| .sd-view.big .sd-stack { | |
| max-height: calc(100vh - 160px); | |
| justify-items: center; | |
| } | |
| .sd-view.big .sd-stack > li { | |
| width: min(100%, calc((100vh - 190px) * 16 / 9)); | |
| } | |
| .sd-slide { | |
| display: block; | |
| width: 100%; | |
| padding: 0; | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| overflow: hidden; | |
| background: none; | |
| cursor: pointer; | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| .sd-slide:hover, | |
| .sd-slide:focus-visible { | |
| border-color: var(--blue-60); | |
| box-shadow: var(--glow-sm); | |
| } | |
| /* Edit mode: the slide's text boxes are clicked into, so no pointer; the slide being typed in is lit */ | |
| .sd-slide-editing { | |
| cursor: default; | |
| } | |
| .sd-slide-editing:focus-within { | |
| border-color: var(--blue); | |
| box-shadow: var(--glow-sm); | |
| } | |
| .sd-save { | |
| height: 36px; | |
| margin-right: 6px; | |
| padding: 0 18px; | |
| } | |
| .sd-edit-hint { | |
| color: var(--text-2); | |
| } | |
| .sd-edit-error { | |
| margin: -4px 0 10px; | |
| } | |
| /* Edit mode: each slide's controls above it (layout, text boxes to add, move, duplicate, delete) */ | |
| .sd-tools { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 6px; | |
| margin-bottom: 8px; | |
| } | |
| .sd-tools-no { | |
| margin-right: 4px; | |
| color: var(--text-2); | |
| font-size: 0.8125rem; | |
| font-weight: 600; | |
| } | |
| .sd-tools-layout select, | |
| .sd-add-slide select { | |
| width: auto; | |
| height: 32px; | |
| padding: 0 30px 0 12px; | |
| font-size: 0.8125rem; | |
| } | |
| .sd-tool { | |
| height: 32px; | |
| padding: 0 12px; | |
| border: 1px dashed var(--line-strong); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text); | |
| font: 600 0.8125rem var(--font-body); | |
| cursor: pointer; | |
| } | |
| .sd-tool:hover:not(:disabled) { | |
| border-color: var(--blue); | |
| background: var(--surface-2); | |
| } | |
| .sd-tool:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| } | |
| .sd-tools-gap { | |
| flex: 1; | |
| } | |
| .sd-tool-icon { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .sd-tool-danger:hover:not(:disabled) { | |
| color: #ff8a8a; | |
| } | |
| /* Between two slides in edit mode: a divider line with "+ Add slide here" on it */ | |
| .sd-add-slide { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin: 20px 0 12px; | |
| } | |
| .sd-add-slide::before, | |
| .sd-add-slide::after { | |
| content: ""; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--line-strong); | |
| } | |
| .sd-add-slide select { | |
| border-style: dashed; | |
| } | |
| /* The server is drawing the slides again: they wait, not taking clicks */ | |
| .sd-stack.sd-busy .sd-slide { | |
| opacity: 0.6; | |
| pointer-events: none; | |
| transition: opacity 0.15s; | |
| } | |
| .sd-notes-edit { | |
| min-height: 84px; | |
| resize: vertical; | |
| line-height: 1.6; | |
| } | |
| .sd-notes { | |
| display: grid; | |
| gap: 6px; | |
| margin-top: 8px; | |
| padding: 14px 18px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| line-height: 1.6; | |
| } | |
| .sd-notes p { | |
| margin: 0; | |
| } | |
| /* Presenting: the slide fills the screen, letterboxed in its own sky colour; the controls fade when the mouse rests. */ | |
| .sd-present { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1000; | |
| background: #000; | |
| cursor: pointer; | |
| } | |
| .sd-present.light { | |
| background: #e9eef9; | |
| } | |
| .sd-present-stage { | |
| position: absolute; | |
| inset: 0; | |
| } | |
| .sd-present-bar { | |
| position: absolute; | |
| left: 50%; | |
| bottom: 22px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 12px; | |
| transform: translateX(-50%); | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: rgba(0, 0, 0, 0.72); | |
| color: var(--white); | |
| cursor: default; | |
| transition: opacity 0.3s; | |
| } | |
| .sd-present.idle { | |
| cursor: none; | |
| } | |
| .sd-present.idle .sd-present-bar { | |
| opacity: 0; | |
| } | |
| .sd-count { | |
| min-width: 64px; | |
| text-align: center; | |
| font: 500 0.85rem var(--font-mono, monospace); | |
| } | |
| @media (max-width: 760px) { | |
| .sd-opts { | |
| grid-template-columns: 1fr; | |
| } | |
| .sd-opts .vw-chips { | |
| flex-wrap: wrap; | |
| } | |
| .modal:has(.sd-view) .modal-head { | |
| flex-wrap: wrap; | |
| } | |
| .sd-icon-btn { | |
| width: 34px; | |
| height: 34px; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .sd-present-bar, | |
| .sd-item, | |
| .sd-slide, | |
| .sd-icon-btn, | |
| .modal.modal-wide:has(.sd-view), | |
| .sd-theme { | |
| transition: none; | |
| } | |
| } | |
| /* ---- Notebook: side panels resized by dragging the line between a panel and the chat (components/PaneResizer) ---- */ | |
| .nbv-resizer { | |
| display: none; | |
| } | |
| @media (min-width: 900px) { | |
| .nbv-resizer { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| z-index: 6; | |
| display: block; | |
| width: 12px; | |
| margin-left: -6px; | |
| cursor: col-resize; | |
| touch-action: none; | |
| } | |
| .nbv-resizer::after { | |
| content: ""; | |
| position: absolute; | |
| top: 14px; | |
| bottom: 14px; | |
| left: 5px; | |
| width: 2px; | |
| border-radius: 2px; | |
| background: transparent; | |
| transition: background 0.15s, box-shadow 0.15s; | |
| } | |
| .nbv-resizer:hover::after, | |
| .nbv-resizer.dragging::after, | |
| .nbv-resizer:focus-visible::after { | |
| background: var(--blue); | |
| box-shadow: 0 0 10px var(--blue-60); | |
| } | |
| .nbv-resizer:focus-visible { | |
| outline: none; | |
| } | |
| } | |
| /* While dragging: no text selection, the resize cursor everywhere, and frames (slides, infographics) let the pointer | |
| through so the drag is never lost over them. */ | |
| body.nbv-resizing, | |
| body.nbv-resizing * { | |
| cursor: col-resize ; | |
| user-select: none; | |
| } | |
| body.nbv-resizing iframe { | |
| pointer-events: none; | |
| } | |
| /* The panels' contents follow the panels' own widths, not the window's. */ | |
| .nbv-side, | |
| .nbv-history, | |
| .nbv-chat { | |
| container-type: inline-size; | |
| } | |
| /* Create tiles never wrap a word: the label shortens with an ellipsis, the icon stays. */ | |
| .nbv-make > button, | |
| .nbv-make .nbv-make-label { | |
| min-width: 0; | |
| overflow: hidden; | |
| } | |
| .nbv-make .nbv-make-label { | |
| flex: 1; | |
| } | |
| .nbv-make-text { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* Tiles per row by the panel's width: one when narrow, two by default, three or four when the panel is wide. */ | |
| @container (max-width: 299px) { | |
| .nbv-make { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| } | |
| @container (min-width: 560px) { | |
| .nbv-make { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| } | |
| .nbv-make .nbv-make-wide { | |
| grid-column: auto; | |
| } | |
| } | |
| @container (min-width: 760px) { | |
| .nbv-make { | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .nbv-resizer::after { | |
| transition: none; | |
| } | |
| } | |
| /* ---- Audio overview settings (components/AudioOverview) ---- */ | |
| .ao-dialog { | |
| gap: 20px; | |
| } | |
| .ao-styles { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .ao-style { | |
| display: grid; | |
| align-content: start; | |
| gap: 8px; | |
| min-height: 132px; | |
| padding: 14px 14px 16px; | |
| text-align: left; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 18px; | |
| background: rgba(0, 0, 0, 0.6); | |
| color: var(--text); | |
| cursor: pointer; | |
| transition: border-color 0.15s, background 0.15s; | |
| } | |
| .ao-style:hover:not(:disabled):not(.on) { | |
| border-color: var(--blue-60); | |
| } | |
| .ao-style.on { | |
| border-color: var(--blue); | |
| background: var(--blue-20); | |
| } | |
| .ao-style:disabled { | |
| opacity: 0.45; | |
| cursor: not-allowed; | |
| } | |
| .ao-style-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .ao-style-head strong { | |
| font-weight: 600; | |
| } | |
| .ao-radio { | |
| display: grid; | |
| place-items: center; | |
| flex: none; | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 50%; | |
| border: 1px solid var(--line-strong); | |
| } | |
| .ao-style.on .ao-radio { | |
| border-color: var(--blue); | |
| background: var(--black); | |
| } | |
| .ao-style-blurb { | |
| font-size: 0.85rem; | |
| line-height: 1.45; | |
| color: var(--text-2); | |
| } | |
| /* Hosts pills share the slide deck's pill look (.sd-opts); the two voice pickers sit side by side */ | |
| .ao-voices { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 14px; | |
| } | |
| .ao-voices > p { | |
| grid-column: 1 / -1; | |
| margin: 0; | |
| } | |
| @media (max-width: 760px) { | |
| .ao-styles { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .ao-voices { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .ao-style { | |
| transition: none; | |
| } | |
| } | |
| .modal.modal-wide:has(.ao-dialog) { | |
| width: min(880px, calc(100vw - 32px)); | |
| } | |
| /* ---- Audio overview in the notebook's list (components/AudioOverview: AudioOverviewCard) ---- */ | |
| .ao-card { | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| transition: border-color 0.15s; | |
| } | |
| .ao-card.open { | |
| border-color: var(--line-strong); | |
| } | |
| .ao-card-head { | |
| display: grid; | |
| grid-template-columns: 40px minmax(0, 1fr) auto; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 10px 10px 8px; | |
| border-radius: var(--radius); | |
| outline: none; | |
| } | |
| .ao-card-head[role="button"] { | |
| cursor: pointer; | |
| } | |
| .ao-card-head[role="button"]:hover { | |
| background: var(--surface-2); | |
| } | |
| .ao-card-head:focus-visible { | |
| box-shadow: 0 0 0 2px var(--blue); | |
| } | |
| .ao-card-icon { | |
| display: grid; | |
| place-items: center; | |
| width: 40px; | |
| height: 40px; | |
| color: var(--blue); | |
| } | |
| .ao-card-text { | |
| display: grid; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .ao-card-text strong { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| font-weight: 500; | |
| font-size: 0.95rem; | |
| } | |
| .ao-card-meta { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| font-size: 0.82rem; | |
| color: var(--text-3); | |
| } | |
| .ao-chevron { | |
| display: grid; | |
| place-items: center; | |
| width: 32px; | |
| height: 32px; | |
| color: var(--text-2); | |
| } | |
| .ao-card-progress { | |
| padding: 0 12px 10px 58px; | |
| } | |
| .ao-card-body { | |
| display: grid; | |
| gap: 12px; | |
| padding: 4px 14px 14px; | |
| } | |
| /* The player: play, time, a seek bar and the speed, in one pill */ | |
| .ao-player { | |
| display: grid; | |
| grid-template-columns: auto auto minmax(0, 1fr) auto; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 6px 8px 6px 6px; | |
| border-radius: 999px; | |
| background: var(--surface-2); | |
| } | |
| .ao-play { | |
| display: grid; | |
| place-items: center; | |
| width: 38px; | |
| height: 38px; | |
| border: 0; | |
| border-radius: 50%; | |
| background: var(--blue); | |
| color: var(--white); | |
| cursor: pointer; | |
| } | |
| .ao-play:focus-visible, | |
| .ao-speed:focus-visible { | |
| outline: 2px solid var(--blue); | |
| outline-offset: 2px; | |
| } | |
| .ao-time { | |
| font-size: 0.8rem; | |
| color: var(--text-2); | |
| white-space: nowrap; | |
| } | |
| .ao-seek { | |
| width: 100%; | |
| height: 4px; | |
| margin: 0; | |
| border-radius: 2px; | |
| background: linear-gradient(to right, var(--blue) var(--ao-fill, 0%), var(--line-strong) var(--ao-fill, 0%)); | |
| appearance: none; | |
| cursor: pointer; | |
| } | |
| .ao-seek::-webkit-slider-thumb { | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 50%; | |
| background: var(--white); | |
| appearance: none; | |
| } | |
| .ao-seek::-moz-range-thumb { | |
| width: 14px; | |
| height: 14px; | |
| border: 0; | |
| border-radius: 50%; | |
| background: var(--white); | |
| } | |
| .ao-speed { | |
| min-width: 52px; | |
| height: 30px; | |
| padding: 0 10px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text); | |
| font-size: 0.8rem; | |
| cursor: pointer; | |
| } | |
| .ao-speed:hover { | |
| border-color: var(--blue-60); | |
| } | |
| .ao-transcript-toggle { | |
| justify-self: start; | |
| } | |
| .ao-card-actions { | |
| gap: 8px; | |
| } | |
| /* Delete reads as a normal button (not dimmed), red when pointed at */ | |
| .ao-delete:hover, | |
| .ao-delete:focus-visible { | |
| border-color: #ef4444; | |
| color: #ff8a8a; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .ao-card { | |
| transition: none; | |
| } | |
| } | |
| /* The download going: a strip over the picture in the card, so it can be followed once the viewer has closed */ | |
| .ig-thumb-wrap { | |
| position: relative; | |
| width: 100%; | |
| max-width: 320px; | |
| } | |
| .ig-thumb-wrap .ig-thumb { | |
| max-width: none; | |
| } | |
| .ig-thumb-status { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| border-radius: 10px; | |
| background: rgba(3, 5, 10, 0.72); | |
| backdrop-filter: blur(2px); | |
| color: var(--white); | |
| font: 500 0.9rem var(--font-body); | |
| pointer-events: none; | |
| } | |
| .ig-thumb-status.done { | |
| background: rgba(3, 5, 10, 0.6); | |
| animation: ig-status-out 4s ease forwards; | |
| } | |
| @keyframes ig-status-out { | |
| 0%, | |
| 60% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } | |
| /* Thumbs on generated artifacts: a quiet row under the content; "compact" opens the reasons over the page */ | |
| .afb { | |
| position: relative; | |
| margin-top: 6px; | |
| } | |
| .afb .fb-row { | |
| align-items: center; | |
| } | |
| .afb-label { | |
| margin-right: 4px; | |
| } | |
| .fb-btn.is-down.is-on { | |
| color: #ff8a8a; | |
| background: rgba(239, 68, 68, 0.18); | |
| } | |
| .afb-compact { | |
| margin-top: 0; | |
| display: inline-flex; | |
| } | |
| .afb-compact .afb-why { | |
| position: absolute; | |
| top: calc(100% + 8px); | |
| right: 0; | |
| z-index: 8; | |
| width: min(360px, 86vw); | |
| padding: 14px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: var(--black); | |
| box-shadow: var(--glow-lg); | |
| } | |
| /* Posts live under the chat history, in the left rail: the chat list and the posts each scroll in their own share of it */ | |
| .nbv-history .nbv-chat-list { | |
| flex: 0 1 auto; | |
| max-height: 40%; | |
| } | |
| .nbv-history .nbv-posts { | |
| flex: 1 1 0; | |
| min-height: 9rem; | |
| align-content: start; | |
| gap: 8px; | |
| padding-top: 10px; | |
| border-top: 1px solid var(--line); | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--line-strong) transparent; | |
| } | |
| .nbv-history .nbv-posts .nbv-docs { | |
| gap: 6px; | |
| } | |
| .nbv-history .nbv-posts .nbv-doc { | |
| display: grid; | |
| gap: 2px; | |
| font-size: 0.85rem; | |
| } | |
| /* Chats grouped by date; posts as a quiet, collapsible list with a filter */ | |
| .nbv-chat-group { | |
| display: grid; | |
| gap: 2px; | |
| margin-bottom: 6px; | |
| } | |
| .nbv-history .nbv-chat-list-label { | |
| padding: 10px 9px 4px; | |
| color: var(--text-3); | |
| font-size: 0.66rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .nbv-posts-toggle { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 2px 0; | |
| border: 0; | |
| background: transparent; | |
| color: var(--text-2); | |
| font: 600 0.72rem var(--font-body); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| } | |
| .nbv-posts-toggle:hover { | |
| color: var(--white); | |
| } | |
| .nbv-posts-chev { | |
| transition: transform 0.15s; | |
| } | |
| .nbv-posts-chev.open { | |
| transform: rotate(90deg); | |
| } | |
| .nbv-posts-count { | |
| padding: 1px 7px; | |
| border-radius: 999px; | |
| background: var(--surface-2); | |
| color: var(--text-2); | |
| font: 500 0.68rem var(--font-body); | |
| letter-spacing: 0; | |
| } | |
| .nbv-posts-search { | |
| padding: 7px 10px; | |
| font-size: 0.82rem; | |
| } | |
| .nbv-history .nbv-posts .nbv-doc { | |
| padding: 6px 8px; | |
| border-radius: 8px; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| } | |
| .nbv-history .nbv-posts .nbv-doc:hover { | |
| background: var(--surface-2); | |
| } | |
| .nbv-history .nbv-posts .nbv-doc .link-btn { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| border-bottom: 0; | |
| text-decoration: none; | |
| font-size: 0.84rem; | |
| line-height: 1.35; | |
| } | |
| /* Chats fold like posts: the whole list, and each date heading */ | |
| .nbv-chats-toggle { | |
| margin: 4px 0 2px 9px; | |
| } | |
| .nbv-history .nbv-group-toggle { | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-start; | |
| gap: 6px; | |
| width: 100%; | |
| border: 0; | |
| background: transparent; | |
| cursor: pointer; | |
| text-align: left; | |
| } | |
| .nbv-history .nbv-group-toggle:hover { | |
| color: var(--white); | |
| } | |
| .nbv-group-count { | |
| margin-left: auto; | |
| color: var(--text-3); | |
| letter-spacing: 0; | |
| } | |
| /* The quiz result as a small galaxy: a nebula behind a medal-planet, its ring and moon, and a star per question on an orbit */ | |
| .quiz-hero { | |
| --c1: #9cc2ff; | |
| --c2: #3d7bff; | |
| --c3: #10205a; | |
| --neb1: rgba(47, 123, 255, 0.34); | |
| --neb2: rgba(40, 180, 230, 0.2); | |
| --tint: #8db8ff; | |
| position: relative; | |
| overflow: hidden; | |
| gap: 4px; | |
| padding: 10px 20px 24px; | |
| border-color: color-mix(in srgb, var(--tint) 30%, transparent); | |
| background: | |
| radial-gradient(60% 70% at 18% 8%, var(--neb1), transparent 70%), | |
| radial-gradient(55% 70% at 86% 0%, var(--neb2), transparent 72%), | |
| radial-gradient(90% 60% at 50% 120%, color-mix(in srgb, var(--c2) 22%, transparent), transparent 70%), | |
| #060a18; | |
| } | |
| .quiz-hero.gold { | |
| --c1: #fff0b8; | |
| --c2: #ffc846; | |
| --c3: #8a4a08; | |
| --neb1: rgba(255, 170, 60, 0.28); | |
| --neb2: rgba(255, 130, 40, 0.16); | |
| --tint: #ffc846; | |
| } | |
| .quiz-hero.silver { | |
| --c1: #ffffff; | |
| --c2: #b9c8de; | |
| --c3: #3c4a66; | |
| --neb1: rgba(120, 190, 255, 0.26); | |
| --neb2: rgba(90, 200, 230, 0.18); | |
| --tint: #cfdcf0; | |
| } | |
| .quiz-hero.bronze { | |
| --c1: #ffd2a4; | |
| --c2: #d98a4e; | |
| --c3: #5c2c10; | |
| --neb1: rgba(230, 120, 60, 0.26); | |
| --neb2: rgba(230, 150, 50, 0.16); | |
| --tint: #e0955a; | |
| } | |
| .quiz-hero.low { | |
| --c1: #a8cbff; | |
| --c2: #2f7bff; | |
| --c3: #0c1c4d; | |
| --neb1: rgba(47, 123, 255, 0.3); | |
| --neb2: rgba(40, 170, 230, 0.18); | |
| --tint: #8db8ff; | |
| } | |
| .quiz-hero > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .quiz-hero .quiz-scene { | |
| width: min(100%, 470px); | |
| height: auto; | |
| margin: 0 auto -6px; | |
| overflow: visible; | |
| z-index: 0; | |
| } | |
| .quiz-scene .qs-star { | |
| fill: #fff; | |
| opacity: 0.7; | |
| animation: qs-twinkle 3.6s ease-in-out infinite; | |
| } | |
| .quiz-scene .qs-spark { | |
| fill: #fff; | |
| opacity: 0.85; | |
| animation: qs-twinkle 3s ease-in-out infinite; | |
| } | |
| .quiz-scene .qs-orbit { | |
| fill: none; | |
| stroke: var(--tint); | |
| stroke-opacity: 0.28; | |
| stroke-width: 0.9; | |
| stroke-dasharray: 2 5; | |
| } | |
| .quiz-scene .qs-ring { | |
| fill: none; | |
| stroke: var(--c2); | |
| stroke-width: 5.5; | |
| stroke-linecap: round; | |
| } | |
| .quiz-scene .qs-ring.back { | |
| stroke-opacity: 0.45; | |
| } | |
| .quiz-scene .qs-ring.front { | |
| stroke: var(--c1); | |
| filter: drop-shadow(0 0 5px var(--c2)); | |
| } | |
| .quiz-scene .qs-bands path { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-opacity: 0.16; | |
| stroke-width: 3; | |
| } | |
| .quiz-scene .qs-shade { | |
| fill: #000; | |
| fill-opacity: 0.28; | |
| } | |
| .quiz-scene .qs-emblem path { | |
| fill: #fff; | |
| fill-opacity: 0.92; | |
| stroke: var(--c3); | |
| stroke-opacity: 0.35; | |
| stroke-width: 0.8; | |
| } | |
| .quiz-scene .qs-moon { | |
| fill: #fff; | |
| filter: drop-shadow(0 0 4px #fff); | |
| } | |
| .quiz-scene .orb circle { | |
| fill: var(--tint); | |
| fill-opacity: 0.2; | |
| } | |
| .quiz-scene .orb.lit circle { | |
| fill: #fff; | |
| fill-opacity: 1; | |
| filter: drop-shadow(0 0 5px var(--tint)); | |
| } | |
| .quiz-scene .orb.lit { | |
| animation: qs-twinkle 2.6s ease-in-out infinite; | |
| } | |
| .quiz-scene .orb-halo { | |
| fill: var(--tint) ; | |
| fill-opacity: 0.22 ; | |
| filter: none ; | |
| } | |
| .quiz-hero.gold::before, | |
| .quiz-hero.gold::after, | |
| .quiz-hero.silver::before, | |
| .quiz-hero.silver::after, | |
| .quiz-hero.bronze::before, | |
| .quiz-hero.bronze::after { | |
| content: ""; | |
| position: absolute; | |
| z-index: 0; | |
| top: 8%; | |
| left: 100%; | |
| width: 120px; | |
| height: 2px; | |
| border-radius: 2px; | |
| background: linear-gradient(90deg, #fff, transparent); | |
| box-shadow: 0 0 8px var(--tint); | |
| transform-origin: left center; | |
| opacity: 0; | |
| animation: quiz-shoot 4.8s ease-in infinite; | |
| pointer-events: none; | |
| } | |
| .quiz-hero.gold::after, | |
| .quiz-hero.silver::after, | |
| .quiz-hero.bronze::after { | |
| top: 36%; | |
| width: 80px; | |
| animation-delay: 2.4s; | |
| animation-duration: 6s; | |
| } | |
| .quiz-hero .quiz-verdict { | |
| margin-top: 0; | |
| text-shadow: 0 0 24px color-mix(in srgb, var(--tint) 45%, transparent); | |
| } | |
| .quiz-hero .quiz-score { | |
| background: linear-gradient(180deg, #fff 35%, var(--tint)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .quiz-hero .quiz-score span { | |
| -webkit-text-fill-color: var(--text-3); | |
| font-size: 0.4em; | |
| } | |
| .quiz-hero .quiz-note { | |
| max-width: 34ch; | |
| line-height: 1.45; | |
| } | |
| .quiz-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-top: 8px; | |
| } | |
| .quiz-chip { | |
| padding: 4px 12px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--text-2); | |
| font: 500 0.78rem var(--font-body); | |
| } | |
| .quiz-chip.pct { | |
| border-color: color-mix(in srgb, var(--tint) 50%, transparent); | |
| color: #fff; | |
| } | |
| .quiz-chip.right { | |
| border-color: rgba(60, 200, 120, 0.35); | |
| color: #5fe0a0; | |
| } | |
| .quiz-chip.wrong { | |
| border-color: rgba(255, 138, 138, 0.3); | |
| color: #ff9a9a; | |
| } | |
| @keyframes qs-twinkle { | |
| 50% { opacity: 0.3; } | |
| } | |
| @keyframes quiz-shoot { | |
| 0% { opacity: 0; transform: translate(0, 0) rotate(-30deg); } | |
| 8% { opacity: 1; } | |
| 35%, 100% { opacity: 0; transform: translate(-130vw, 60vw) rotate(-30deg); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .quiz-hero::before, | |
| .quiz-hero::after, | |
| .quiz-scene * { | |
| animation: none ; | |
| } | |
| } | |
| /* Quiz and flashcards open in the same dark popup as the other dialogs; hidden while minimised */ | |
| .so-backdrop[hidden] { | |
| display: none; | |
| } | |
| /* One fixed size for every question, answer and result, so the popup never grows or shrinks; the content scrolls inside */ | |
| .modal.modal-wide.so-modal { | |
| grid-template-rows: auto minmax(0, 1fr); | |
| width: min(920px, 100%) ; | |
| height: min(700px, calc(100vh - 32px)); | |
| overflow: hidden; | |
| } | |
| .so-content { | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| scrollbar-width: thin; | |
| } | |
| /* Results: the score card, feedback and buttons stay put; only the per-question list scrolls */ | |
| .so-content > .quiz-result { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| .so-content > .quiz-result > * { | |
| flex: none; | |
| } | |
| .so-content > .quiz-result > .quiz-review { | |
| flex: 1 1 0; | |
| min-height: 3.5rem; | |
| align-content: start; | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--line-strong) transparent; | |
| } | |
| .so-content > .quiz-result .quiz-hero .quiz-scene { | |
| width: min(100%, 400px); | |
| } | |
| .modal.modal-wide.so-modal { | |
| height: min(760px, calc(100vh - 32px)); | |
| } | |
| /* The review a person already gave, shown again under the thumbs when the quiz, cards, report or infographic is reopened */ | |
| .afb-saved { | |
| display: grid; | |
| gap: 6px; | |
| justify-items: start; | |
| margin-top: 8px; | |
| padding: 10px 12px; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface); | |
| } | |
| .afb-saved .fb-chip { | |
| cursor: default; | |
| } | |
| .afb-saved-text { | |
| margin: 0; | |
| color: var(--text-2); | |
| font-size: 0.88rem; | |
| line-height: 1.45; | |
| overflow-wrap: anywhere; | |
| white-space: pre-wrap; | |
| } | |