:root {
--international-orange: #FF4400;
--radius: 0.75rem;
--bg: #F2F0E9;
--surface: #FDFDFB;
--surface-hover: #E8E6DD;
--border: #E5E2D9;
--border-strong: #D5D2C9;
--text: #1A1A1A;
--text-secondary: #4A4A4A;
--text-muted: #8A8A8A;
--green-bg: #ecfdf5;
--green: #047857;
--green-border: #a7f3d0;
--amber-bg: #fffbeb;
--amber: #b45309;
--amber-border: #fde68a;
--red-bg: #fef2f2;
--red: #b91c1c;
--red-border: #fecaca;
--blue-bg: #eff6ff;
--blue: #1d4ed8;
--blue-border: #bfdbfe;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* OP-904: Manrope ships ARBITRARY LIGATURES in its default `liga` feature — the three literal
characters `(c)` are shaped as a single © glyph. Nothing in the editor rewrites the text: the
saved HTML, the SCORM package and the learner-facing player all hold the literal `(c)`, which
is why Preview looked right while the authoring canvas looked wrong. An author writing an FAR
citation ("135.267(c)") therefore sees a copyright symbol they cannot delete, edit or type
around, because there is nothing there to edit. Reported against page 67 of
PEGASUSELITEAVIATION.2001183; the workaround an author is driven to — splitting the citation
across an boundary so the run cannot ligate — is visible in that course's version history
(v20 `135.267 (c)`, vs v19 `135.267 (c)`), and it corrupts the markup to fix a font.
`no-common-ligatures` turns off `liga` only. Verified in Chromium against the live Google
Fonts Manrope: `liga` carries the substitution, `calt` (contextual alternates, which Manrope
uses for real shaping) does not, so it stays on. Do NOT use `font-variant-ligatures: none` —
that also disables `calt`.
This is a whole-document rule on purpose: `(c)` is equally unwritable in the page-title field
and the structure list, not just in `.rte-content`. The learner-facing player is unaffected
either way — it never loads Manrope (`AirAcademy-Course-Player/packages/course-player/src/player.css:2`
is a system stack), which is the same reason Preview always rendered correctly.
THE UNIVERSAL SELECTOR IS LOAD-BEARING. `font-variant-ligatures` is an inherited property, so
declaring it once on `body` looks sufficient. It is not: Chromium's UA stylesheet declares
`font-variant: normal` on `table`, and that shorthand resets `font-variant-ligatures` to
`normal` for the entire subtree. Essentially all Ascent-authored content sits inside a layout
table, so a body-only rule fixes nothing where it actually matters — measured: `.rte-content`
computed `no-common-ligatures` while the `` inside it still computed `normal`, and the ©
survived. An author-origin `*` rule beats the UA rule at every level. */
*, *::before, *::after { font-variant-ligatures: no-common-ligatures; }
body {
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 500;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
height: 100vh;
overflow: hidden;
}
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
/* ===== Login ===== */
#login-screen {
--login-accent: #330066;
--login-accent-hover: #240047;
--login-accent-ring: rgba(51,0,102,0.14);
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
min-height: 100vh;
padding: 112px 24px 48px;
overflow: auto;
background: #EDE9FE;
}
.login-page-brand {
position: absolute;
top: 32px;
left: 32px;
display: flex;
align-items: center;
}
.login-page-brand-logo {
display: block;
width: min(260px, calc(100vw - 64px));
height: auto;
}
.login-card {
background: var(--surface);
border-radius: 16px;
padding: 48px 40px;
width: 100%;
max-width: 400px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-logo { font-size: 24px; font-weight: 800; color: var(--international-orange); margin-bottom: 4px; }
#login-screen .login-logo { color: var(--login-accent); }
.login-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
.login-field { margin-bottom: 20px; }
.login-field label { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.login-field input {
width: 100%;
padding: 12px 14px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 14px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--bg);
color: var(--text);
outline: none;
}
.login-field input:focus { border-color: var(--international-orange); box-shadow: 0 0 0 3px rgba(255,68,0,0.08); }
#login-screen .login-field input:focus { border-color: var(--login-accent); box-shadow: 0 0 0 3px var(--login-accent-ring); }
.login-error { color: var(--red); font-size: 13px; font-weight: 600; margin-bottom: 12px; min-height: 20px; }
.login-btn {
width: 100%;
padding: 12px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
border: none;
border-radius: 8px;
background: var(--international-orange);
color: #fff;
cursor: pointer;
transition: background 0.15s;
}
.login-btn:hover { background: #e63d00; }
#login-screen .login-btn { background: var(--login-accent); }
#login-screen .login-btn:hover { background: var(--login-accent-hover); }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 600px) {
#login-screen {
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
padding: 24px 16px 32px;
}
.login-page-brand {
position: static;
margin-bottom: 32px;
}
.login-page-brand-logo {
width: min(220px, 100%);
}
.login-card {
padding: 36px 28px;
}
}
/* ===== Destination Chooser ===== */
#chooser-screen {
--login-accent: #330066;
--login-accent-hover: #240047;
--login-accent-ring: rgba(51,0,102,0.14);
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
min-height: 100vh;
padding: 112px 24px 48px;
}
.chooser-card { max-width: 440px; }
#chooser-screen .login-logo { color: var(--login-accent); }
.chooser-options { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 16px; }
.chooser-option {
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
padding: 18px 20px;
border: 1px solid var(--border-strong);
border-radius: 10px;
background: var(--bg);
color: var(--text);
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
transition: border-color .12s, box-shadow .12s, transform .04s;
}
.chooser-option:hover { border-color: var(--login-accent); box-shadow: 0 0 0 3px var(--login-accent-ring); }
.chooser-option:active { transform: translateY(1px); }
.chooser-option-title { font-size: 16px; font-weight: 700; }
.chooser-option-desc { font-size: 13px; color: var(--text-muted); }
.chooser-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.chooser-remember input { cursor: pointer; }
@media (max-width: 600px) {
#chooser-screen {
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
padding: 24px 16px 32px;
}
}
/* ===== App Shell ===== */
#app { display: flex; flex-direction: column; height: 100vh; }
/* ===== Top Bar ===== */
#topbar {
height: 52px;
background: #1a1a2e;
display: flex;
align-items: center;
padding: 0 20px;
gap: 16px;
flex-shrink: 0;
z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: 16px; }
.logo { color: var(--international-orange); font-weight: 800; font-size: 15px; letter-spacing: 0.3px; cursor: pointer; }
.topbar-center { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.breadcrumb { color: #8899aa; font-size: 13px; cursor: pointer; font-weight: 600; }
.breadcrumb:hover { color: #a0c4ff; }
.breadcrumb-sep { color: #3a3a5a; font-size: 13px; }
.breadcrumb-current { color: #ccc; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* OE-82: the company that owns the open module. Deliberately quieter than the module title — it is
context to confirm at a glance, not the thing being edited. */
.breadcrumb-company { color: #8899aa; font-size: 13px; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unsaved-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff9800; display: none; flex-shrink: 0; }
.unsaved-dot.show { display: inline-block; }
/* OE-48: draft-health hint — only shown when a draft store is failing. */
.draft-health { font-size: 12px; font-weight: 700; margin-left: 8px; white-space: nowrap; }
.draft-health.warn { color: #d98300; }
.draft-health.error { color: #e5484d; }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.user-name { color: #8899aa; font-size: 13px; font-weight: 600; }
.topbar-btn {
padding: 7px 16px;
border: none;
border-radius: 6px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.btn-logout { background: transparent; color: #8899aa; border: 1px solid #3a3a5a; }
.btn-logout:hover { background: #2a2a4a; color: #ccc; }
.btn-settings { background: #2d3a4a; color: #a0c4ff; }
.btn-settings:hover { background: #3a4a5a; }
.btn-preview { background: #2d3a4a; color: #a0c4ff; }
.btn-preview:hover { background: #3a4a5a; }
.btn-history { background: #2d3a4a; color: #a0c4ff; }
.btn-history:hover { background: #3a4a5a; }
.btn-pdf-print { background: #2d3a4a; color: #a0c4ff; }
.btn-pdf-print:hover { background: #3a4a5a; }
/* OE-92: the Ascent "Export HTML" equivalent — same utility-group styling as its neighbours. */
.btn-download-html { background: #2d3a4a; color: #a0c4ff; }
.btn-download-html:hover { background: #3a4a5a; }
/* OE-25: the Revision Log Analytics button in the top bar. Same utility-group styling; the rest of
that page's styling lives in revision-log.css, which only that page loads. */
.btn-analytics { background: #2d3a4a; color: #a0c4ff; }
.btn-analytics:hover { background: #3a4a5a; }
.btn-structure { background: var(--surface-hover); color: var(--text-secondary); }
.btn-structure:hover { background: var(--border); }
.btn-delete-page { background: var(--red-bg); color: var(--red); }
.btn-delete-page:hover { background: var(--red-border); }
.btn-publish { background: #047857; color: #fff; }
.btn-publish:hover { background: #065f46; }
.btn-lms-shell-toolbar { background: #0369a1; color: #fff; }
.btn-lms-shell-toolbar:hover { background: #075985; }
/* OE-68: Attach SCORM is the "primary" action of the three (the one that actually ships content),
so it gets a slightly stronger fill than Create/Assign — same family, a bit more emphasis. */
.btn-lms-shell-toolbar-primary { background: #0284c7; }
.btn-lms-shell-toolbar-primary:hover { background: #0369a1; }
/* One attachment control, with an explicit non-destructive side-by-side choice. */
.lms-attach-split { position: relative; display: inline-flex; }
.lms-attach-split .btn-lms-attach-menu-toggle { min-width: 28px; margin-left: 1px; padding: 0 8px; }
.lms-attach-menu { position: absolute; z-index: 30; right: 0; top: calc(100% + 4px); min-width: 235px; padding: 4px; background: #fff; border: 1px solid #bae6fd; border-radius: 6px; box-shadow: 0 8px 18px rgba(15, 23, 42, .18); }
.lms-attach-menu button { display: block; width: 100%; border: 0; border-radius: 4px; background: transparent; color: #0f172a; padding: 8px 10px; text-align: left; font: inherit; cursor: pointer; }
.lms-attach-menu button:hover, .lms-attach-menu button:focus-visible { background: #e0f2fe; outline: none; }
.topbar-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* ===== Browse View ===== */
#browse-view { flex: 1; overflow-y: auto; padding: 32px 48px; }
.browse-container { max-width: 1400px; margin: 0 auto; }
header { margin-bottom: 28px; }
header h1 { font-size: 28px; margin-bottom: 4px; }
header p { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.browse-header-actions {
float: right;
display: flex;
gap: 8px;
margin-top: -28px;
}
.catalog-refresh-status {
margin: -12px 0 16px;
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
}
.catalog-refresh-status.loading { background: #e0f2fe; color: #0369a1; }
.catalog-refresh-status.success { background: #dcfce7; color: #166534; }
.catalog-refresh-status.error { background: #fee2e2; color: #991b1b; }
.browse-scope-banner {
margin-bottom: 16px;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid var(--amber-border);
background: var(--amber-bg);
color: var(--amber);
font-size: 13px;
font-weight: 600;
}
.search-bar {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 24px;
margin-bottom: 16px;
}
.search-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.search-input-wrap { flex: 1; min-width: 300px; position: relative; }
.search-input-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-input-wrap input {
width: 100%;
padding: 10px 14px 10px 42px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--bg);
color: var(--text);
outline: none;
}
.search-input-wrap input:focus { border-color: var(--international-orange); box-shadow: 0 0 0 3px rgba(255,68,0,0.08); }
.search-input-wrap input::placeholder { color: var(--text-muted); }
.filter-select {
padding: 10px 14px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--bg);
color: var(--text);
outline: none;
cursor: pointer;
min-width: 140px;
}
/* Searchable catalog filters retain the native select as the value source while presenting the
same searchable list behavior used by the import customer-folder picker. */
.searchable-filter { position: relative; min-width: 180px; }
.searchable-filter-input { width: 100%; box-sizing: border-box; padding-right: 34px; }
.searchable-filter-toggle { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 30px; border: 0; border-left: 1px solid var(--border); border-radius: 0 5px 5px 0; background: var(--surface); color: var(--text-muted); cursor: pointer; }
.searchable-filter-toggle:focus-visible { outline: 2px solid var(--international-orange); outline-offset: -2px; }
.searchable-filter-list { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; right: 0; max-height: 288px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.searchable-filter-option { padding: 9px 14px; color: var(--text); cursor: pointer; }
.searchable-filter-option.is-active, .searchable-filter-option:hover { background: var(--surface-hover); }
.searchable-filter-empty { padding: 10px 14px; color: var(--text-muted); }
/* OE-134: a searchable option that carries a picture (the Course Settings "Catalog picture" choice). */
.searchable-filter-option.has-thumbnail { display: flex; align-items: center; gap: 10px; }
.searchable-filter-thumbnail { flex: none; width: 48px; height: 24px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); }
.filter-select:focus { border-color: var(--international-orange); box-shadow: 0 0 0 3px rgba(255,68,0,0.08); }
.btn-clear {
padding: 10px 18px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface);
color: var(--text-secondary);
cursor: pointer;
}
.btn-clear:hover { background: var(--surface-hover); }
.results-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 0 4px; }
.results-count { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.results-count strong { color: var(--international-orange); font-weight: 800; }
.table-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead { background: var(--surface-hover); position: sticky; top: 0; z-index: 1; }
th {
padding: 10px 14px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
text-align: left;
border-bottom: 1px solid var(--border);
}
td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
/* OE-45: last-edited column */
.last-edited-cell { font-size: 12px; line-height: 1.35; }
.last-edited-by { font-weight: 600; }
.last-edited-when { color: var(--text-muted); }
.last-edited-empty { color: var(--text-muted); }
/* OE-39: clickable sort headers */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); background: var(--surface); }
th .sort-arrow { font-size: 10px; color: var(--accent, #a0c4ff); }
tbody tr { cursor: pointer; transition: background 0.1s; }
tbody tr:hover { background: var(--surface-hover); }
.course-title-cell { font-weight: 600; color: var(--text); }
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.badge-91 { background: var(--blue-bg); color: var(--blue); }
.badge-135 { background: var(--amber-bg); color: var(--amber); }
.badge-type-master { background: #ede9fe; color: #6d28d9; }
.badge-type-variant { background: #dcfce7; color: #166534; }
.badge-type-ascent { background: #f1f5f9; color: #475569; }
.badge-status-draft { background: #fef3c7; color: #92400e; }
.badge-status-published { background: #d1fae5; color: #065f46; }
.badge-lms-shell { background: #e0f2fe; color: #0369a1; }
.btn-fork {
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
border: 1px solid #6d28d9;
background: #ede9fe;
color: #6d28d9;
border-radius: 4px;
cursor: pointer;
}
.btn-fork:hover { background: #ddd6fe; }
.btn-lms-shell {
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
border: 1px solid #0369a1;
background: #e0f2fe;
color: #0369a1;
border-radius: 4px;
cursor: pointer;
}
.btn-lms-shell:hover { background: #bae6fd; }
.btn-lms-shell:disabled { opacity: 0.65; cursor: wait; }
/* Fork Modal */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 260;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.55);
}
.modal-content {
width: min(100%, 480px);
max-height: calc(100vh - 48px);
overflow: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
padding: 28px;
}
.modal-content h3 {
font-size: 22px;
margin-bottom: 8px;
}
.fork-destination-note {
margin: 0 0 18px;
padding: 12px 14px;
border: 1px solid #bae6fd;
border-radius: 12px;
background: #f0f9ff;
color: #075985;
font-size: 13px;
font-weight: 650;
line-height: 1.45;
}
.fork-source-summary {
margin: 0 0 18px;
padding: 12px 14px;
border: 1px solid #d1d5db;
border-radius: 12px;
background: #f8fafc;
color: #334155;
font-size: 12px;
line-height: 1.45;
}
.fork-source-summary strong {
display: block;
margin-bottom: 4px;
color: #111827;
}
.fork-source-summary.severe {
border-color: #fecaca;
background: #fef2f2;
color: #991b1b;
}
.btn-edit {
padding: 5px 12px;
font-size: 12px;
font-weight: 700;
border: 1px solid var(--international-orange);
border-radius: 6px;
background: transparent;
color: var(--international-orange);
cursor: pointer;
}
.btn-edit:hover { background: var(--international-orange); color: #fff; }
.pagination { display: flex; gap: 4px; }
.page-btn {
padding: 6px 12px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface);
color: var(--text-secondary);
cursor: pointer;
}
.page-btn:hover { background: var(--surface-hover); }
.page-btn.active { background: var(--international-orange); color: #fff; border-color: var(--international-orange); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-icon { font-size: 48px; margin-bottom: 12px; }
/* ===== Editor View ===== */
#editor-view { flex: 1; overflow: hidden; min-width: 0; }
#editor-layout { display: flex; flex: 1; width: 100%; height: 100%; min-width: 0; }
/* Editor Sidebar */
#editor-sidebar {
width: 300px;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
flex-shrink: 0;
}
#sidebar-header { padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#sidebar-header h3 { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.sidebar-header-actions {
display: flex;
gap: 8px;
margin-left: auto;
flex-wrap: wrap;
}
.sidebar-add-btn,
.section-add-btn,
.section-action-btn {
padding: 6px 10px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface);
color: var(--text-secondary);
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
}
.sidebar-add-btn:hover,
.section-add-btn:hover,
.section-action-btn:hover { background: var(--surface-hover); }
.section-action-btn-danger { border-color: var(--red-border); color: var(--red); }
#sidebar-header .section-rename-btn {
padding: 6px 10px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface);
color: var(--text-secondary);
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
}
#sidebar-header .section-rename-btn:hover { background: var(--surface-hover); }
#sidebar-tree { flex: 1; overflow-y: auto; padding: 8px 0; }
.tree-section { margin-bottom: 4px; }
/* OE-43: drag-and-drop of pages between title sections */
.tree-item[draggable="true"] { cursor: grab; }
.tree-item.dragging { opacity: 0.45; }
.tree-item.drag-over { border-top: 2px solid var(--accent, #2563eb); }
.tree-section.drag-over-section { outline: 2px dashed var(--accent, #2563eb); outline-offset: -2px; border-radius: 6px; }
.tree-section-header {
padding: 8px 16px;
font-size: 12px;
font-weight: 700;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tree-section-header:hover { background: var(--surface-hover); }
.tree-section-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tree-section-header .arrow { font-size: 10px; transition: transform 0.2s; }
.tree-section-header .arrow.collapsed { transform: rotate(-90deg); }
.tree-section-header .section-header-actions {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
flex-wrap: wrap;
justify-content: flex-end;
}
.tree-section-header .section-add-btn,
.tree-section-header .section-rename-btn,
.tree-section-header .section-action-btn {
opacity: 0;
transition: opacity 0.15s;
}
.tree-section-header .section-rename-btn,
.tree-section-header .section-action-btn {
padding: 6px 10px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface);
color: var(--text-secondary);
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
}
.tree-section-header .section-action-btn-danger { border-color: var(--red-border); color: var(--red); }
.tree-section-header .section-rename-btn:hover,
.tree-section-header .section-action-btn:hover { background: var(--surface-hover); }
.tree-section-header:hover .section-add-btn,
.tree-section-header:hover .section-rename-btn,
.tree-section-header:hover .section-action-btn,
.tree-section-header .section-add-btn:focus,
.tree-section-header .section-rename-btn:focus,
.tree-section-header .section-action-btn:focus { opacity: 1; }
.tree-item {
padding: 7px 16px 7px 32px;
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.15s;
border-left: 3px solid transparent;
}
.tree-item:hover { background: #f0f4ff; }
.tree-item.active { background: #e3f2fd; border-left-color: var(--international-orange); font-weight: 600; }
.tree-item .type-badge {
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
font-weight: 600;
text-transform: uppercase;
flex-shrink: 0;
}
.type-html .type-badge { background: var(--blue-bg); color: var(--blue); }
.type-selftest .type-badge { background: var(--amber-bg); color: var(--amber); }
.type-quiz .type-badge { background: var(--red-bg); color: var(--red); }
.tree-item .page-num { color: var(--text-muted); font-size: 11px; min-width: 18px; flex-shrink: 0; }
.tree-item .page-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* OE-114: the outline's attention mark. Same two levels, and the same colours, as the .quiz-validation
badge the page itself shows — one rule, one look, so an author reading the outline and an author
reading the page are being told the same thing. */
.tree-item .page-notice {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
line-height: 16px;
text-align: center;
cursor: help;
}
.tree-item .page-notice.warn { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber); }
.tree-item .page-notice.error { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
/* OE-30: multi-select page delete */
.tree-item .page-select-cb { margin-right: 6px; flex-shrink: 0; cursor: pointer; accent-color: var(--international-orange); }
.multi-delete-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e5e7eb; }
.multi-delete-count { font-size: 12px; color: var(--text-muted); margin-right: auto; }
.sidebar-add-btn.multi-delete-btn { border-color: var(--red-border); color: var(--red); }
.delete-pages-list { margin: 8px 0 4px; max-height: 240px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 12px; }
.delete-pages-row { font-size: 13px; padding: 3px 0; }
.delete-pages-confirm-btn { background: var(--red); border-color: var(--red); }
/* OE-38: populate-exam-from-review-questions picker */
.populate-exam-toolbar { display: flex; gap: 8px; margin: 4px 0; }
.populate-exam-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 4px 0; cursor: pointer; }
.populate-exam-item input { margin-top: 3px; flex-shrink: 0; }
.populate-exam-dupe { color: var(--text-muted); font-style: italic; }
.populate-exam-btn { margin-left: 8px; }
/* Editor Panel */
#editor-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#editor-toolbar {
padding: 14px 24px;
background: linear-gradient(180deg, rgba(253, 253, 251, 0.98) 0%, rgba(248, 245, 237, 0.94) 100%);
border-bottom: 1px solid var(--border);
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: 16px 20px;
flex-wrap: wrap;
min-width: 0;
}
.toolbar-left {
display: flex;
align-items: flex-start;
gap: 12px;
flex: 1 1 100%;
min-width: 0;
}
.toolbar-meta {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 3px 0;
}
.toolbar-right {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 100%;
flex-wrap: wrap;
justify-content: flex-start;
min-width: 0;
}
.toolbar-group {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 4px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255,255,255,0.58);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.pdf-print-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.pdf-print-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 40;
width: min(320px, calc(100vw - 32px));
padding: 10px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 16px 36px rgba(0,0,0,0.18);
}
.pdf-print-option {
width: 100%;
min-height: 36px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg);
color: var(--text);
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.pdf-print-option:hover {
border-color: var(--border-strong);
background: var(--surface-hover);
}
.pdf-print-range-row {
display: grid;
grid-template-columns: minmax(140px, 1fr) minmax(84px, 108px);
gap: 8px;
margin: 8px 0;
}
#pdf-page-range-input {
min-width: 0;
height: 36px;
padding: 8px 10px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: #fff;
color: var(--text);
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
}
#pdf-page-range-input:focus {
border-color: var(--international-orange);
box-shadow: 0 0 0 3px rgba(255,68,0,0.08);
outline: none;
}
.pdf-print-status {
min-height: 18px;
margin-top: 8px;
color: var(--text-muted);
font-size: 12px;
font-weight: 700;
line-height: 1.4;
}
.pdf-print-status.error { color: var(--red); }
.pdf-print-status.success { color: var(--green); }
.toolbar-group-publish {
background: transparent;
border: none;
padding: 0;
box-shadow: none;
margin-left: auto;
}
#editor-toolbar .page-label {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 20px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text);
}
#editor-toolbar .page-type {
display: inline-flex;
align-items: center;
min-height: 28px;
font-size: 12px;
letter-spacing: 0.02em;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(232, 230, 221, 0.82);
color: var(--text-secondary);
font-weight: 700;
}
/* OE-76: the page-type pill and the page's revision date share one row, so surfacing the date
costs no extra toolbar height. */
.toolbar-meta-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
min-width: 0;
}
#editor-toolbar .page-revision {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
/* An unrecorded revision reads as visibly absent, never as a date the editor guessed. */
#editor-toolbar .page-revision.is-unrecorded {
font-weight: 500;
font-style: italic;
opacity: 0.75;
}
/* OE-76 — the ORIGINAL Ascent date, visually distinct from the OWS revision beside it.
Lighter and set apart by a rule so a reader can tell at a glance which system's clock a date came
from. Reading an Ascent date as an OWS review is the false compliance record this feature exists
to prevent, and the wording alone should not have to carry that distinction. */
#editor-toolbar .page-ascent-date {
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
white-space: nowrap;
padding-left: 10px;
border-left: 1px solid var(--border);
}
#editor-toolbar .page-ascent-date:empty { display: none; }
/* OE-76 — the module's Ascent age, at the top of the History panel and visually OUTSIDE the OWS
version list below it. Everything in that list is an edit a named person made here; this line is
what the module arrived with. Set apart deliberately: reading an Ascent date as an OWS review is
the false compliance record this feature exists to prevent, and wording alone should not have to
carry that distinction. */
.history-origin {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
}
.history-origin-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.history-ascent-origin {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
/* An unrecorded origin date reads as visibly absent, never as a date the editor guessed. */
.history-ascent-origin.is-unrecorded {
font-style: italic;
opacity: 0.75;
}
#editor-toolbar .topbar-btn { white-space: nowrap; }
#editor-workspace {
flex: 1;
min-height: 0;
display: flex;
overflow: hidden;
min-width: 0;
}
#editor-content {
flex: 1; overflow-y: auto; padding: 24px; background: var(--bg); min-width: 0;
/* OP-863 — THE AUTHORED CONTENT MEASURE. Same token, same value, as the shared player's
`#content-area { --aaa-content-measure }` in
AirAcademy-Course-Player/packages/course-player/src/player.css. See the WYSIWYG PARITY
CONTRACT block further down this file for why the two must not drift. */
--aaa-content-measure: 864px;
/* The player card hands authored content `measure - 64px` (32px padding per side, no border).
This canvas is border-box with a 1px border and 24px side padding, i.e. 50px of chrome, so
it must be 14px narrower than the player card to hand the author the IDENTICAL measure:
864 - 14 = 850; 850 - 2 - 48 = 800px, exactly what the learner gets. */
--aaa-canvas-chrome-delta: 14px;
}
#editor-inspector {
width: 320px;
flex-shrink: 0;
border-left: 1px solid var(--border);
background: linear-gradient(180deg, #fdfcf8 0%, #f6f2e7 100%);
overflow-y: auto;
}
.editor-inspector-shell {
padding: 18px 18px 28px;
display: flex;
flex-direction: column;
gap: 14px;
}
.editor-inspector-header {
display: flex;
flex-direction: column;
gap: 6px;
}
.editor-inspector-kicker {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.editor-inspector-header h3 {
font-size: 20px;
line-height: 1.15;
letter-spacing: -0.02em;
}
.editor-inspector-header p {
color: var(--text-secondary);
font-size: 13px;
line-height: 1.5;
}
.editor-inspector-empty {
padding: 14px 16px;
border: 1px dashed var(--border-strong);
border-radius: 14px;
background: rgba(255,255,255,0.62);
color: var(--text-secondary);
font-size: 13px;
line-height: 1.55;
}
.editor-inspector-panel {
display: flex;
flex-direction: column;
gap: 18px;
}
.inspector-group {
padding: 14px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255,255,255,0.68);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.inspector-group-title {
margin-bottom: 10px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.editor-empty-state { text-align: center; padding: 60px; color: var(--text-muted); }
@media (max-width: 1400px) {
#editor-workspace {
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
}
#editor-inspector {
width: 100%;
border-left: none;
border-top: 1px solid var(--border);
max-height: 360px;
}
}
@media (max-width: 1180px) {
.toolbar-left,
.toolbar-right { flex-basis: 100%; }
#editor-toolbar .page-label {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#editor-inspector {
width: 280px;
}
}
@media (max-width: 860px) {
#editor-toolbar { padding: 12px 16px; }
.toolbar-group {
width: 100%;
justify-content: flex-start;
}
.toolbar-group-publish {
width: 100%;
margin-left: 0;
}
#editor-workspace {
flex-direction: column;
}
#editor-inspector {
width: 100%;
border-left: none;
border-top: 1px solid var(--border);
max-height: 320px;
}
.pdf-print-menu {
left: 0;
right: auto;
}
.pdf-print-range-row {
grid-template-columns: 1fr;
}
}
/* HTML Editor */
/* OP-863 — the authoring column is capped at the SAME authored content measure the learner gets,
so an author sizing a banner or a table against the canvas edge is sizing it against the real
thing. `.html-editor` is the ONE wrapper around the page-body canvas (renderHtmlEditor in
editor.js): title field, toolbar, `.rte-content` and the attachment manager all sit inside it,
so capping here keeps that whole column flush instead of leaving a ragged 50px step.
It was a magic `900px` — close to the shared player's old magic `1400px`, but not equal to it,
which is exactly the WYSIWYG gap OP-863 is about: the canvas handed the author 850px of room
while the player handed the learner 1336px at a 1920 screen. Both are now one declared token.
See the WYSIWYG PARITY CONTRACT block below. */
.html-editor { max-width: calc(var(--aaa-content-measure) - var(--aaa-canvas-chrome-delta)); margin: 0 auto; }
.editor-field { margin-bottom: 20px; }
.editor-field label {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 6px;
}
.editor-field input[type="text"],
.editor-field input[type="number"] {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-strong);
border-radius: 6px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 14px;
color: var(--text);
background: var(--surface);
outline: none;
}
.editor-field input:focus { border-color: var(--international-orange); }
/* Rich Text Toolbar */
.rte-toolbar {
display: flex;
gap: 2px;
padding: 6px 8px;
background: var(--surface-hover);
border: 1px solid var(--border-strong);
border-bottom: none;
border-radius: 8px 8px 0 0;
flex-wrap: wrap;
}
.rte-btn {
padding: 6px 10px;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
color: var(--text-secondary);
font-family: 'Manrope', system-ui, sans-serif;
}
.rte-btn:hover { background: var(--border); }
.rte-icon-btn {
min-width: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.rte-btn svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
}
.rte-color-tools {
display: inline-flex;
align-items: center;
gap: 6px;
padding-left: 4px;
}
.rte-color-label {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface);
color: var(--text-secondary);
font-weight: 800;
font-size: 14px;
}
.rte-color-label svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
}
.rte-palette {
display: inline-flex;
align-items: center;
gap: 4px;
}
.rte-swatch {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid rgba(15, 23, 42, 0.12);
cursor: pointer;
padding: 0;
}
.rte-swatch:hover { transform: scale(1.06); }
.rte-divider { width: 1px; background: var(--border-strong); margin: 4px; }
.rte-select {
padding: 4px 8px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
color: var(--text-secondary);
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
cursor: pointer;
min-width: 100px;
}
.rte-select:hover { border-color: var(--text-secondary); }
.rte-callout-select { width: 130px; }
.rte-list-style { width: 120px; } /* OE-40 */
.rte-select:focus { outline: 2px solid var(--international-orange); outline-offset: 1px; }
.rte-color-picker {
width: 30px;
height: 30px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: transparent;
cursor: pointer;
padding: 2px;
}
/* OP-1058: the Ω "Insert symbol" palette. One button per formatting bar, one popover anchored
under it. The rows are the groups in INSERT_SYMBOL_GROUPS (editor.js) and nothing here decides
what is in them. */
.rte-symbol {
position: relative;
display: inline-flex;
align-items: center;
}
.rte-symbol-btn { font-size: 15px; font-weight: 700; }
.rte-symbol-panel {
display: none;
position: absolute;
z-index: 100;
top: calc(100% + 6px);
left: 0;
min-width: 340px;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 8px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.rte-symbol-panel.is-open { display: block; }
.rte-symbol-title {
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
margin-bottom: 8px;
}
.rte-symbol-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 4px;
}
.rte-symbol-group {
flex: none;
width: 72px;
padding-top: 6px;
font-size: 12px;
color: var(--text-secondary);
}
.rte-symbol-glyphs {
display: flex;
flex-wrap: wrap;
gap: 2px;
}
.rte-symbol-glyph {
min-width: 28px;
height: 28px;
padding: 0 4px;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: var(--text);
font-size: 15px;
line-height: 1;
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
}
.rte-symbol-glyph:hover { background: var(--border); border-color: var(--border-strong); }
.rte-content {
border: 1px solid var(--border-strong);
border-radius: 0 0 8px 8px;
padding: 20px 24px;
min-height: 300px;
background: var(--surface);
outline: none;
line-height: 1.6;
font-size: 14px;
overflow: hidden;
}
.rte-content:focus { border-color: var(--international-orange); }
/* OE-77: the HTML source ("Code View") pane. Shares the canvas' slot — exactly one of the two is
visible at a time — so it takes the same box, in monospace. Authors paste content SOURCE here and
the markup survives the clipboard verbatim. It is NOT part of the WYSIWYG parity contract below:
nothing renders through this pane, it only carries text in and out of `.rte-content`. */
.rte-source {
display: none;
width: 100%;
border: 1px solid var(--border-strong);
border-radius: 0 0 8px 8px;
padding: 20px 24px;
min-height: 300px;
background: var(--surface);
color: var(--text);
outline: none;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
resize: vertical;
}
.rte-source:focus { border-color: var(--international-orange); }
/* The toolbar button stays lit while the source pane is the visible half. */
.rte-btn.is-active { background: var(--border); color: var(--text); }
/* ─────────────────────────────────────────────────────────────────────────────────────────────
CONTENT RENDERING IN THE EDITOR — WYSIWYG PARITY CONTRACT (OP-847 alignment pass, 2026-07-27)
`.rte-content` is the authoring canvas. What an author sees HERE must match what a learner sees
in the shared player, whose theme is the canonical
`AirAcademy-Course-Player/packages/course-player/src/player.css` (`#content-area` block; v2's
vendored copy is kept byte-identical to it). Every rule below is the `#content-area` rule with
the selector swapped to `.rte-content`, IN THE SAME ORDER, so the two files can be diffed.
This canvas had drifted: it was missing the Ascent content-class rules entirely, so authored
content rendered one way here and another way in the player. OP-847 (fixed-width admin tables
sitting flush-left) was one symptom of that drift, not a one-off.
THE CONTRACT COVERS THE CONTAINER WIDTH TOO (OP-863, 2026-07-28). The original pass matched
the CONTENT rules but never the box those rules run inside, and that omission is precisely how
the next bug got in: each surface carried its OWN magic number — the player card stopped at
`max-width: 1400px`, this canvas at `.html-editor { max-width: 900px }` — so the author was
laying out inside 850px while the learner read inside 1336px on a 1920 screen, and nothing
anywhere said the two numbers were supposed to be related. Width is now one declared token,
`--aaa-content-measure`, set to the same value in three hand-synced stylesheets with no build
step linking them:
1. AirAcademy-Course-Player/packages/course-player/src/player.css (canonical, #content-area)
2. AirAcademy-Course-Player/packages/course-player-vue/src/assets/player.css (vendored copy)
3. this file (#editor-content, minus --aaa-canvas-chrome-delta for the canvas' own chrome)
Changing one without the others is the standing failure mode here. When you touch the measure,
touch all three, and re-run the OP-863 layout specification in the player repo
(`npm run test:layout`), which fails if the three fall out of step.
The cap is a BOUND, not a fixed width: it collapses on narrow screens, and neither the
player's `@media (max-width: 768px)` block nor this file's responsive rules are affected.
DELIBERATE EDITOR-ONLY DIVERGENCES — do NOT "fix" these into player parity:
a. `table:not([style*="width"]):not([width]) { width: 100% }` — the canvas default for a table
the author has not sized yet. The player instead sets `width: 100%` on ALL tables, which
would fight the Width (Narrow/Medium/Full) inspector while authoring.
b. the player's `table:not(.autofit-right-table) td { width: auto !important }` and the
`width: auto !important` half of its `table[border="1"] td` rule are OMITTED — an
!important author rule beats the inline `width` that initTableColumnResize() writes, so
importing them would break manual column dragging.
c. `td { overflow: hidden }` (player: `visible`) — keeps the cell-selection outline and the
column-resize hit area clipped to the cell.
d. iframe/video stay `max-width: 100%` rather than the player's
`width: 100% !important; min-width: 400px` — the canvas is narrower than the player's
1400px page, and a 400px floor overflows it.
───────────────────────────────────────────────────────────────────────────────────────────── */
/* Tables */
.rte-content table { border-collapse: collapse; max-width: 100%; table-layout: auto; }
/* (a) editor-only default — see the divergence note above. */
.rte-content table:not([style*="width"]):not([width]) { width: 100%; }
/* OP-847: Ascent admin boilerplate centers its fixed-width page tables with the presentational
hint . app.css's universal reset (line ~25,
`*, *::before, *::after { margin: 0 }`) is author-origin CSS, so it OVERRIDES the align="center"
UA mapping (margin-inline: auto) and the 800px table sat flush-left in the canvas — the same
root cause, and the same fix, as the shared player. */
.rte-content table[align="center"] { margin-left: auto !important; margin-right: auto !important; }
.rte-content .ae_noborder, .rte-content .ae_noborder td { border: none !important; }
.rte-content .cell-padding td { padding: 12px 16px; vertical-align: top; }
.rte-content .fixed-table { table-layout: fixed; }
.rte-content .autofit-right-table td:first-child { width: 50% !important; }
.rte-content .autofit-right-table td:last-child { width: 50% !important; text-align: center; vertical-align: middle; }
.rte-content .autofit-right-table td:last-child img { max-width: 100%; max-height: 500px; object-fit: contain; }
/* (c) editor-only — see the divergence note above. */
.rte-content td { overflow: hidden; word-wrap: break-word; }
.rte-content .solid-borders { table-layout: auto !important; }
.rte-content .solid-borders td, .rte-content .solid-borders th { border: 1px solid #bbb; padding: 8px 12px; white-space: normal; }
.rte-content .fr-alternate-rows tr:nth-child(even) td, .rte-content .alternate-rows tr:nth-child(even) td { background-color: #f2f2f2; }
.rte-content table[border="1"] { table-layout: auto !important; }
/* (b) the player's `width: auto !important` is omitted here — see the divergence note above. */
.rte-content table[border="1"] td, .rte-content table[border="1"] th { border: 1px solid #bbb; padding: 8px 12px; }
/* Images */
/* The auto margins match the player: an image the author has NOT explicitly aligned centers in
both surfaces. applyImageAlignmentToElement() writes INLINE margins for left/center/right, and
inline style beats this rule, so the alignment inspector is unaffected. */
.rte-content img { max-width: 100%; width: auto; height: auto !important; margin-left: auto; margin-right: auto; border-radius: 4px; }
.rte-content img:not([style*="float"]) { display: block; }
.rte-content img[style*="float"] { display: inline; margin: 8px; }
.rte-content td img { max-width: 100%; height: auto !important; margin-left: auto; margin-right: auto; }
/* OE-40 S/M/L presets — values match applyImageSize (200/350/700). min(Npx, 100%) caps at the
chosen size AND shrinks to fit a narrow canvas; !important so applyImageSize's own inline
max-width and the fixed-px override below cannot force these back to full width. */
.rte-content .image-small { max-width: min(200px, 100%) !important; }
.rte-content .image-medium { max-width: min(350px, 100%) !important; }
.rte-content .image-large { max-width: min(700px, 100%) !important; }
.rte-content .aligncenter, .rte-content [style*="margin-left: auto"][style*="margin-right: auto"] { margin-left: auto !important; margin-right: auto !important; }
/* Text */
.rte-content p { margin-bottom: 12px; line-height: 1.6; }
/* Lists */
.rte-content ul, .rte-content ol { margin: 12px 0; padding-left: 24px; list-style-position: outside; }
.rte-content td ul, .rte-content td ol { padding-left: 20px; }
.rte-content li { margin-bottom: 6px; line-height: 1.6; }
/* Iframes and video — (d) editor-only sizing, see the divergence note above. */
.rte-content iframe { max-width: 100% !important; height: auto; aspect-ratio: 16/9; border: none; border-radius: 4px; display: block; }
.rte-content .fr-video { display: block; max-width: 100%; overflow: hidden; }
.rte-content .fr-dvb { display: block; width: 100%; }
.rte-content .fr-draggable { max-width: 100%; width: 100%; }
.rte-content video { max-width: 100%; height: auto; border-radius: 4px; }
/* Override fixed pixel widths — but NOT the S/M/L presets (they own their own responsive cap
above). This is `max-width` only, so the inline `width` that column-resize writes still wins. */
.rte-content [style*="width:"][style*="px"]:not(.image-small):not(.image-medium):not(.image-large) { max-width: 100% !important; }
.rte-content img[style*="width:"]:not(.image-small):not(.image-medium):not(.image-large) { max-width: 100% !important; height: auto !important; }
/* Froala classes */
.rte-content .fr-class-transparency { opacity: 0.7; }
.rte-content .fr-class-highlighted { background: #ffeb3b; padding: 2px 4px; }
.rte-content .fr-class-code { font-family: monospace; background: #f5f5f5; padding: 2px 4px; border-radius: 3px; }
/* Section header banners */
.rte-content td[bgcolor="#330066"] { border-radius: 4px; padding: 12px 16px !important; }
.rte-content td[bgcolor="#330066"] span,
.rte-content td[bgcolor="#330066"] strong { color: #fff !important; }
/* Selftest Editor */
.selftest-editor { max-width: 900px; margin: 0 auto; }
.question-editor { background: var(--surface); border-radius: 8px; padding: 24px; border: 1px solid var(--border); }
.editor-danger-actions {
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
.danger-action-btn,
.question-delete-btn {
padding: 7px 12px;
border: 1px solid var(--red-border);
background: var(--red-bg);
color: var(--red);
border-radius: 6px;
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.danger-action-btn:hover,
.question-delete-btn:hover { background: var(--red-border); }
.answer-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
padding: 10px 14px;
background: var(--bg);
border-radius: 6px;
border: 1px solid var(--border);
}
.answer-row.correct-answer { background: var(--green-bg); border-color: var(--green-border); }
/* OE-56: multi-correct ("select all that apply") answer rows get a checkbox glyph so authors can tell at a
glance they may mark more than one correct answer (single questions keep the plain radio-style row). */
.answer-row.multi::before {
content: '';
flex-shrink: 0;
width: 16px;
height: 16px;
border: 2px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
}
.answer-row.multi.correct-answer::before {
border-color: var(--green);
background: var(--green);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center;
}
.answer-row input[type="text"] {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--border-strong);
border-radius: 4px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
color: var(--text);
background: var(--surface);
}
.answer-row .hint-input {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--border-strong);
border-radius: 4px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
color: var(--text-muted);
background: var(--surface);
}
.answer-row .correct-toggle {
padding: 6px 12px;
border: 1px solid var(--border-strong);
border-radius: 4px;
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
background: var(--surface);
color: var(--text-secondary);
white-space: nowrap;
}
.answer-row .correct-toggle.is-correct { background: var(--green); color: #fff; border-color: var(--green); }
.answer-row .remove-btn {
padding: 6px 10px;
border: none;
background: var(--red-bg);
color: var(--red);
border-radius: 4px;
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.answer-row .remove-btn:hover { background: var(--red-border); }
.add-answer-btn {
padding: 8px 16px;
border: 1px dashed var(--border-strong);
background: transparent;
border-radius: 6px;
cursor: pointer;
color: var(--text-muted);
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
margin-top: 8px;
width: 100%;
}
.add-answer-btn:hover { background: var(--surface-hover); border-color: var(--text-muted); }
.editor-support-card {
background: var(--surface);
border-radius: 8px;
padding: 20px;
border: 1px solid var(--border);
margin-top: 16px;
}
.support-card-title {
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 10px;
}
.support-card-row {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.support-card-note {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.support-card-select {
min-width: 260px;
max-width: 100%;
}
.attachment-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.attachment-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg);
}
.attachment-meta {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.attachment-name {
font-size: 13px;
color: var(--text);
font-weight: 600;
word-break: break-word;
}
.attachment-name-input {
width: min(100%, 320px);
padding: 6px 10px;
border: 1px solid var(--border-strong);
border-radius: 4px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
}
/* OE-83: the attachment's URL is now the link to it, so an author can pull a reference document
back out of a module instead of only being able to look at where it lives. */
.attachment-link {
font-size: 12px;
color: var(--text-muted);
word-break: break-all;
text-decoration: none;
}
a.attachment-link:hover {
color: var(--text);
text-decoration: underline;
}
/* An attachment whose file cannot be resolved says so, rather than offering a link that 404s. */
.attachment-link-broken {
color: var(--red);
font-style: italic;
}
.attachment-download-btn {
padding: 6px 10px;
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text);
border-radius: 4px;
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
}
.attachment-download-btn:hover { background: var(--bg); }
.attachment-empty {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 12px;
}
/* Quiz Editor */
.quiz-editor { max-width: 900px; margin: 0 auto; }
/* OE-90: the running exam question total, read at the top of the exam page before scrolling.
An accuracy control for the 135 Team while they delete questions, so it is stated plainly
rather than styled as a decorative badge. */
.exam-question-count {
margin: 0 0 12px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--international-orange);
border-radius: 6px;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
}
.quiz-settings {
background: var(--surface);
border-radius: 8px;
padding: 20px;
border: 1px solid var(--border);
margin-bottom: 20px;
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.quiz-settings .setting { display: flex; align-items: center; gap: 8px; }
.quiz-settings label { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.quiz-settings input[type="number"] {
width: 60px;
padding: 6px 8px;
border: 1px solid var(--border-strong);
border-radius: 4px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
}
.quiz-question-card {
background: var(--surface);
border-radius: 8px;
padding: 20px;
border: 1px solid var(--border);
margin-bottom: 16px;
}
.quiz-question-card .q-header {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
margin-bottom: 12px;
font-weight: 700;
color: var(--text);
font-size: 14px;
}
.quiz-question-card .q-title {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* OE-56: per-question header controls — the "Select all that apply" toggle sits beside Delete. */
.quiz-question-card .q-header-controls {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.quiz-question-card .multi-toggle-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
white-space: nowrap;
}
.quiz-question-card .multi-toggle-label input[type="checkbox"] { cursor: pointer; }
.quiz-question-card.multi-question { border-color: var(--border-strong); }
/* OE-56: inline per-question validation badge (all-or-nothing correctness rules). */
.quiz-validation {
margin: 4px 0 10px;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.quiz-validation.error { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.quiz-validation.warn { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber); }
.quiz-validation.ok { display: none; }
.add-question-btn { margin-bottom: 16px; }
/* Question Bank Pool — authorable since OP-1035 (was read-only: delete, but never add) */
.pool-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 4px;
background: var(--amber-bg);
color: var(--amber);
font-weight: 600;
margin-left: 8px;
}
.pool-notice {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 16px;
padding: 10px 14px;
background: var(--amber-bg);
border: 1px solid var(--amber-border);
border-radius: 6px;
line-height: 1.5;
}
.pool-question {
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: 6px;
margin-bottom: 8px;
background: var(--surface);
}
.pool-q-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
/* OE-150: a group question's "Select all that apply" sits beside its Delete, in normal case. */
.pool-q-controls { display: inline-flex; align-items: center; gap: 10px; }
.pool-q-label .multi-toggle-label { text-transform: none; letter-spacing: normal; }
.pool-question.multi-question { border-color: var(--border-strong); }
/* OP-589: per-bank-question delete (removes one pooled question, not the whole bank) */
.pool-q-delete-btn {
padding: 3px 10px;
border: none;
background: var(--red-bg);
color: var(--red);
border-radius: 4px;
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
text-transform: none;
letter-spacing: 0;
}
.pool-q-delete-btn:hover { background: var(--red-border); }
/* OP-1035: the three additive bank affordances. They reuse .add-answer-btn's dashed "add" language so
an author reads them as the same kind of action as "+ Add Answer", and are tinted with the same amber
the bank badge and notice already use, so an add INSIDE a bank is visibly bank-scoped. */
.add-bank-question-btn,
.add-bank-btn {
border-color: var(--amber-border);
color: var(--amber);
}
.add-bank-question-btn:hover,
.add-bank-btn:hover {
background: var(--amber-bg);
border-color: var(--amber);
}
.add-bank-btn { margin-left: 8px; }
/* OP-1035: "Make this a question group" sits in the fixed question's header controls, beside the
multi-answer toggle and Delete. Quiet by default — it is a deliberate structural change, not a
routine one — and it must never be mistaken for the destructive red Delete next to it. */
.make-bank-btn {
padding: 3px 10px;
border: 1px solid var(--border-strong);
background: transparent;
color: var(--text-muted);
border-radius: 4px;
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.make-bank-btn:hover {
background: var(--amber-bg);
border-color: var(--amber);
color: var(--amber);
}
/* Build/version badge — quiet fixed-corner provenance so "am I on the current editor?" is a glance.
Populated by version-badge.js from GET /version. Muted by default, brightens on hover. */
.build-badge {
position: fixed;
right: 8px;
bottom: 6px;
z-index: 2147483000;
padding: 2px 7px;
border-radius: 4px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 10px;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--text-muted, #8a8f98);
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.06);
opacity: 0.55;
cursor: pointer;
user-select: none;
transition: opacity 0.15s ease;
}
.build-badge:hover { opacity: 1; }
/* Loud when the deploy didn't stamp a commit — signals the build-stamp step didn't run. */
.build-badge--unstamped { color: var(--red, #c0392b); opacity: 0.85; }
.pool-q-text {
font-size: 13px;
color: var(--text);
margin-bottom: 8px;
line-height: 1.5;
}
.pool-answers { display: flex; flex-direction: column; gap: 4px; }
.pool-answer {
font-size: 12px;
padding: 4px 10px;
color: var(--text-secondary);
background: var(--bg);
border-radius: 4px;
}
.pool-answer.pool-correct { color: var(--green); font-weight: 600; background: var(--green-bg); }
.pool-question .editor-field { margin-top: 10px; }
.pool-question .rte-content { min-height: 110px; }
.pool-question .quiz-answers { margin-top: 12px; }
#delete-undo-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 12px 24px 0;
padding: 12px 16px;
border: 1px solid var(--amber-border);
border-radius: 8px;
background: var(--amber-bg);
color: var(--text);
}
#restore-undo-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 12px 24px 0;
padding: 12px 16px;
border: 1px solid var(--blue-border);
border-radius: 8px;
background: var(--blue-bg);
color: var(--text);
}
.undo-btn {
padding: 8px 14px;
border: none;
border-radius: 6px;
background: var(--text);
color: #fff;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.undo-btn:hover { opacity: 0.92; }
.delete-undo-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.undo-dismiss-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--text);
font-family: 'Manrope', system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.undo-dismiss-btn:hover { background: rgba(0, 0, 0, 0.08); }
/* Section delete confirm dialog (F1 / AIR-124) — reuses .modal-overlay / .modal-content. */
#section-delete-modal { display: none; }
#section-delete-modal.modal-overlay { display: none; }
#section-delete-modal[style*="flex"] { display: flex; }
.section-delete-blast-radius {
margin: 14px 0 4px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: #f8fafc;
color: #334155;
font-size: 13px;
line-height: 1.6;
}
.section-delete-blast-label {
color: var(--text-muted);
font-size: 12px;
}
.section-delete-fork-note {
margin: 14px 0 0;
padding: 12px 14px;
border: 1px solid var(--amber-border);
border-radius: 12px;
background: var(--amber-bg);
color: var(--text);
font-size: 12px;
line-height: 1.5;
}
.section-delete-server-btn { margin-left: 4px; }
/* Sidebar page count */
.sidebar-page-count {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
padding: 0 16px 12px;
width: 100%;
}
/* OE-81: the page filter — Second Review's place-keeper, which survives opening a page where the
browser's own Ctrl+F cannot. Full width so it reads as the sidebar's own control. */
.sidebar-filter-row {
display: flex;
gap: 8px;
width: 100%;
align-items: center;
}
.sidebar-filter-input {
flex: 1;
min-width: 0;
padding: 6px 10px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
}
.sidebar-filter-count {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
width: 100%;
}
/* Settings Panel */
#settings-panel {
position: fixed;
top: 52px;
right: 0;
width: 380px;
background: var(--surface);
border-left: 1px solid var(--border);
height: calc(100vh - 52px);
z-index: 50;
padding: 24px;
overflow-y: auto;
box-shadow: -4px 0 12px rgba(0,0,0,0.08);
}
.settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.settings-header h3 { font-size: 18px; color: var(--text); }
.settings-close {
width: 32px;
height: 32px;
border: none;
background: var(--bg);
border-radius: 6px;
font-size: 18px;
cursor: pointer;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
}
.settings-close:hover { background: var(--surface-hover); color: var(--text); }
.setting-group { margin-bottom: 20px; }
.setting-group label {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.setting-group input[type="text"],
.setting-group input[type="number"],
.setting-group textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-strong);
border-radius: 6px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
color: var(--text);
background: var(--bg);
outline: none;
}
.setting-group input:focus, .setting-group textarea:focus { border-color: var(--international-orange); }
.setting-inline-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.setting-inline-field span {
display: block;
font-size: 11px;
color: var(--text-muted);
margin-bottom: 6px;
}
.setting-inline-field.setting-inline-toggle {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.setting-inline-field.setting-inline-toggle .toggle-switch {
margin-top: 4px;
}
.setting-inline-grid.single-row {
grid-template-columns: minmax(0, 1fr);
}
.setting-help-text {
margin: 0 0 10px;
font-size: 12px;
line-height: 1.5;
color: var(--text-secondary);
}
.version-details { font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.version-details strong { font-weight: 700; }
/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--border-strong);
border-radius: 24px;
transition: 0.3s;
}
.toggle-slider::before {
content: '';
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: #fff;
border-radius: 50%;
transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
/* History Button */
.btn-history { background: #2d3a4a; color: #a0c4ff; }
.btn-history:hover { background: #3a4a5a; }
/* History Panel */
#history-panel {
position: fixed;
top: 52px;
right: 0;
width: 420px;
background: var(--surface);
border-left: 1px solid var(--border);
height: calc(100vh - 52px);
z-index: 50;
display: flex;
flex-direction: column;
box-shadow: -4px 0 12px rgba(0,0,0,0.08);
}
.history-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.history-header h3 { font-size: 18px; color: var(--text); }
.history-list {
flex: 1;
overflow-y: auto;
padding: 12px 0;
}
.history-note {
padding: 12px 24px;
border-bottom: 1px solid var(--border);
background: #f8fafc;
color: var(--text-muted);
font-size: 12px;
line-height: 1.5;
}
.history-loading {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
}
.history-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
font-size: 13px;
}
.history-current {
padding: 14px 24px;
border-bottom: 1px solid var(--border);
background: var(--green-bg);
}
.history-current .history-version-badge {
background: var(--green);
color: #fff;
}
.history-item {
padding: 14px 24px;
border-bottom: 1px solid var(--border);
transition: background 0.15s;
}
.history-item:hover {
background: var(--surface-hover);
}
.history-item-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.history-version-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
background: var(--surface-hover);
color: var(--text-secondary);
}
.history-editor {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.history-date {
font-size: 12px;
color: var(--text-muted);
margin-left: auto;
}
.history-summary {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 8px;
font-style: italic;
}
.history-actions {
display: flex;
gap: 8px;
}
.history-btn-view {
padding: 5px 12px;
font-size: 12px;
font-weight: 700;
border: 1px solid var(--blue);
border-radius: 6px;
background: transparent;
color: var(--blue);
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
}
.history-btn-view:hover { background: var(--blue-bg); }
.history-btn-restore {
padding: 5px 12px;
font-size: 12px;
font-weight: 700;
border: 1px solid var(--international-orange);
border-radius: 6px;
background: transparent;
color: var(--international-orange);
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
}
.history-btn-restore:hover { background: var(--international-orange); color: #fff; }
/* History Panel */
#history-panel {
position: fixed;
top: 52px;
right: 0;
width: 420px;
background: var(--surface);
border-left: 1px solid var(--border);
height: calc(100vh - 52px);
z-index: 50;
padding: 0;
overflow-y: auto;
box-shadow: -4px 0 12px rgba(0,0,0,0.08);
}
.history-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
background: var(--surface);
z-index: 1;
}
.history-header h3 { font-size: 18px; color: var(--text); }
.history-header-actions { display: flex; align-items: center; gap: 8px; }
.history-export-btn { font-size: 12px; padding: 4px 10px; }
.history-list { padding: 12px; }
.history-loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; }
.history-current {
padding: 14px 16px;
border: 2px solid var(--international-orange);
border-radius: 8px;
margin-bottom: 12px;
background: rgba(255,68,0,0.03);
}
.history-item {
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 8px;
background: var(--surface);
transition: border-color 0.15s;
}
.history-item:hover { border-color: var(--border-strong); }
.history-item-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.history-version-badge {
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
background: var(--blue-bg);
color: var(--blue);
}
.history-current .history-version-badge {
background: var(--international-orange);
color: #fff;
}
.history-editor {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
.history-date {
font-size: 11px;
color: var(--text-muted);
margin-left: auto;
}
.history-version {
font-size: 14px;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.history-meta {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 4px;
line-height: 1.5;
}
.history-summary {
font-size: 12px;
color: var(--text-secondary);
font-style: italic;
margin-bottom: 8px;
}
.history-actions { display: flex; gap: 8px; }
.history-actions button,
.history-btn-view,
.history-btn-restore {
padding: 5px 12px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text-secondary);
}
.history-actions button:hover,
.history-btn-view:hover { background: var(--surface-hover); }
.history-actions .btn-restore,
.history-btn-restore {
border-color: var(--international-orange);
color: var(--international-orange);
}
.history-actions .btn-restore:hover,
.history-btn-restore:hover {
background: var(--international-orange);
color: #fff;
}
.history-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
font-size: 13px;
}
/* Preview Modal */
#preview-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.85);
z-index: 200;
display: flex;
flex-direction: column;
}
.preview-toolbar {
height: 48px;
background: #1a1a2e;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
color: #ccc;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.preview-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
margin-right: 12px;
font-size: 12px;
color: #d9deea;
}
.preview-toggle input { margin: 0; }
.preview-close-btn {
padding: 7px 16px;
background: #f44336;
color: #fff;
border: none;
border-radius: 6px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.preview-close-btn:hover { background: #d32f2f; }
#preview-frame { flex: 1; border: none; background: #fff; margin: 16px; border-radius: 8px; }
/* Publish Modal */
#publish-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 250;
display: flex;
align-items: center;
justify-content: center;
}
#new-page-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 250;
display: flex;
align-items: center;
justify-content: center;
}
#lms-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 250;
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto;
padding: 16px;
box-sizing: border-box;
}
.publish-card {
background: var(--surface);
border-radius: 12px;
padding: 32px;
width: 480px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.lms-card {
width: min(560px, calc(100vw - 32px));
}
.publish-card h3 { font-size: 20px; margin-bottom: 8px; }
.publish-card p { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; line-height: 1.5; }
.publish-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
.publish-actions .login-btn { width: auto; padding: 10px 24px; }
.publish-actions .btn-clear { padding: 10px 24px; }
.publish-status { margin-top: 16px; font-size: 13px; font-weight: 600; min-height: 20px; }
.publish-status.success { color: var(--green); }
.publish-status.error { color: var(--red); }
.lms-details {
display: grid;
gap: 8px;
margin: 18px 0;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
}
/* OE-146: the heading line of the Save Module dialog's Docebo-courses box. */
.docebo-links-heading { font-size: 13px; font-weight: 700; color: var(--text); }
.lms-detail-row {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 12px;
font-size: 13px;
line-height: 1.4;
}
.lms-detail-label {
color: var(--text-muted);
font-weight: 700;
}
.lms-detail-value {
min-width: 0;
color: var(--text);
overflow-wrap: anywhere;
}
.lms-create-options {
display: grid;
gap: 10px;
margin: 0 0 18px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
}
.lms-field-label {
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.lms-select {
width: 100%;
padding: 9px 10px;
font-size: 14px;
color: var(--text);
background: var(--surface, var(--bg));
border: 1px solid var(--border);
border-radius: 8px;
}
.lms-publish-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text);
cursor: pointer;
margin-top: 4px;
}
.lms-publish-row input { width: 16px; height: 16px; }
.lms-publish-hint { color: var(--text-muted); font-weight: 500; }
.lms-field-hint {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 8px;
line-height: 1.5;
}
.lms-assign-existing {
border-top: 1px solid var(--border-color);
margin-top: 16px;
padding-top: 12px;
display: grid;
gap: 8px;
}
.lms-divider {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.lms-assign-row {
display: flex;
gap: 8px;
}
.lms-input {
flex: 1;
padding: 8px 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 13px;
background: var(--input-bg, #fff);
color: var(--text-primary);
}
.lms-assign-result {
display: grid;
gap: 4px;
}
.lms-warnings {
display: grid;
gap: 8px;
}
.lms-warning {
padding: 10px 12px;
border: 1px solid var(--amber-border);
border-radius: 8px;
background: var(--amber-bg);
color: var(--amber);
font-size: 13px;
font-weight: 650;
line-height: 1.45;
}
@media (max-width: 600px) {
#lms-modal {
align-items: flex-start;
}
#lms-modal .lms-card {
padding: 24px 20px;
max-height: calc(100vh - 32px);
overflow-y: auto;
}
.lms-detail-row {
grid-template-columns: 112px minmax(0, 1fr);
gap: 10px;
}
#lms-modal .publish-actions {
justify-content: stretch;
}
#lms-modal .publish-actions button {
flex: 1;
}
}
/* Loading Overlay */
#loading-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(255,255,255,0.8);
z-index: 300;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid var(--border);
border-top-color: var(--international-orange);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
/* Unsaved Changes Modal */
#unsaved-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 250;
display: flex;
align-items: center;
justify-content: center;
}
.btn-discard {
padding: 10px 24px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
border: 1px solid var(--red);
border-radius: 8px;
background: transparent;
color: var(--red);
cursor: pointer;
}
.btn-discard:hover { background: var(--red-bg); }
/* Draft Banner */
.draft-banner {
background: var(--amber-bg);
border: 1px solid var(--amber-border);
border-radius: 8px;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 24px 12px;
font-size: 13px;
font-weight: 600;
color: var(--amber);
}
.draft-banner button {
padding: 4px 12px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
border: 1px solid var(--amber);
border-radius: 4px;
background: transparent;
color: var(--amber);
cursor: pointer;
margin-left: 8px;
}
.draft-banner button:hover { background: var(--amber-border); }
/* OP-895: the banner stack lives outside #editor-content so it survives page selection. Rows wrap
because the staleness wording is a sentence, not a label — it must stay readable, not be clipped. */
#draft-state-banner { margin-top: 12px; }
#draft-state-banner .draft-banner { flex-wrap: wrap; gap: 8px; line-height: 1.45; font-weight: 500; }
#draft-state-banner .draft-banner > span:first-child { flex: 1 1 320px; }
.draft-banner-attention { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.draft-banner-attention button { border-color: var(--red); color: var(--red); }
.draft-banner-attention button:hover { background: var(--red-bg); }
/* OE-50: .btn-save-draft styles removed with the button. */
/* Inspector Controls */
#image-editor-popover,
#video-editor-popover,
#table-editor-popover,
#banner-editor-popover {
position: static;
z-index: auto;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
min-width: 0;
}
.img-editor-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.img-editor-row:last-child { margin-bottom: 0; }
.img-editor-row-stack { align-items: flex-start; }
.img-editor-note {
margin-bottom: 8px;
color: var(--text-muted);
font-size: 11px;
line-height: 1.45;
}
.img-editor-row label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; min-width: 50px; }
.img-editor-btn {
padding: 6px 12px;
border: 1px solid var(--border-strong);
background: var(--surface);
border-radius: 4px;
cursor: pointer;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
.img-editor-btn:hover { background: var(--surface-hover); }
.img-editor-btn-danger { border-color: var(--red); color: var(--red); }
.img-editor-btn-danger:hover { background: var(--red-bg); }
.img-editor-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.img-size-btns { display: flex; gap: 4px; }
.inspector-group .img-size-btns { flex-wrap: wrap; }
.img-size-btn {
padding: 4px 10px;
border: 1px solid var(--border-strong);
background: var(--surface);
border-radius: 4px;
cursor: pointer;
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
font-family: 'Manrope', system-ui, sans-serif;
}
.img-size-btn:hover { background: var(--surface-hover); }
.img-size-btn.active {
background: var(--blue-bg);
border-color: var(--blue-border);
color: var(--blue);
}
.img-size-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.img-fill-swatches {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.fill-swatch {
width: 26px;
height: 26px;
border-radius: 6px;
border: 1px solid var(--border-strong);
cursor: pointer;
padding: 0;
}
.fill-swatch:hover { transform: translateY(-1px); }
.fill-swatch-light { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12); }
#img-alt-input {
flex: 1;
padding: 6px 10px;
border: 1px solid var(--border-strong);
border-radius: 4px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px;
outline: none;
}
#img-alt-input:focus { border-color: var(--international-orange); }
.rte-content img.img-selected { outline: 3px solid var(--international-orange); outline-offset: 2px; cursor: pointer; }
/* OP-678: "click to enlarge" (dual-size) images. The wrapper anchor is layout-transparent in the
editor canvas so it never disturbs image size/alignment; the deployed player renders it inline-block
with a "Click to enlarge" badge + lightbox. A dashed outline marks expandable images for authors. */
.rte-content .dual-size-image { display: contents; }
.rte-content .dual-size-image > img { outline: 2px dashed var(--international-orange); outline-offset: 3px; }
.rte-content .dual-size-image > img.img-selected { outline: 3px solid var(--international-orange); }
.rte-content video.video-selected,
.rte-content table.table-selected,
.rte-content .editor-banner-block.banner-selected {
outline: 3px solid var(--international-orange);
outline-offset: 2px;
}
.rte-content tr.table-row-selected > td,
.rte-content tr.table-row-selected > th {
background-color: rgba(251, 146, 60, 0.12);
}
.rte-content td.table-cell-selected,
.rte-content th.table-cell-selected {
box-shadow: inset 0 0 0 2px var(--international-orange);
}
/* Banner heading gets a subtle caret-visible state when empty. The
inside
the h2 keeps the element from collapsing in contentEditable. */
.rte-content .editor-banner-block h2:only-child {
min-height: 1.3em;
}
/* Find & Replace modal (AIR-122) — reuses .modal-overlay / .modal-content. Display is toggled inline
to `flex`; the rules below keep it hidden unless the inline style opts in (matches the section-delete
idiom). The Apply button starts disabled (read-only until preview enables it). */
#find-replace-modal { display: none; }
#find-replace-modal.modal-overlay { display: none; }
#find-replace-modal[style*="flex"] { display: flex; }
.find-replace-note {
margin: 0 0 14px;
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
}
.find-replace-field {
margin-bottom: 12px;
}
.find-replace-field label {
display: block;
margin-bottom: 4px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.find-replace-field input[type="text"] {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 8px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 14px;
}
.find-replace-case-row {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 12px;
font-size: 13px;
color: var(--text);
}
.find-replace-results {
margin: 0 0 16px;
padding: 12px 14px;
min-height: 18px;
max-height: 220px;
overflow: auto;
border: 1px solid var(--border);
border-radius: 12px;
background: #f8fafc;
color: #334155;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
}
#find-replace-apply-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
/* Course Family / Genealogy modal (F2 / AIR-125) — reuses .modal-overlay / .modal-content. Display is
toggled inline to `flex`; the rules below keep it hidden unless the inline style opts in (matches the
section-delete / find-replace idiom). READ-ONLY view — a selectable checkbox list, no apply control. */
#course-family-modal { display: none; }
#course-family-modal.modal-overlay { display: none; }
#course-family-modal[style*="flex"] { display: flex; }
.course-family-note {
margin: 0 0 14px;
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
}
.course-family-select-all-row {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.course-family-list {
margin: 0 0 12px;
max-height: 320px;
overflow: auto;
border: 1px solid var(--border);
border-radius: 12px;
background: #f8fafc;
}
.course-family-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
font-size: 13px;
color: var(--text);
cursor: pointer;
}
.course-family-row:last-child {
border-bottom: none;
}
.course-family-row-title {
flex: 1 1 auto;
font-weight: 600;
}
.course-family-row-customer {
flex: 0 0 auto;
color: var(--text-muted);
font-size: 12px;
}
.course-family-count {
margin: 0 0 16px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
/* Content Search modal (F3 / AIR-126) — reuses .modal-overlay / .modal-content. Display is toggled inline
to `flex`; the rules below keep it hidden unless the inline style opts in (matches the genealogy /
find-replace / section-delete idiom). READ-ONLY blast-radius view — grouped-by-course results + an
affected-course count, no apply control. */
#content-search-modal { display: none; }
#content-search-modal.modal-overlay { display: none; }
#content-search-modal[style*="flex"] { display: flex; }
.content-search-note {
margin: 0 0 14px;
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
}
.content-search-field {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px;
}
.content-search-field input {
flex: 1 1 200px;
min-width: 180px;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 14px;
}
/* OP-1059: "Search in" — the scope the phrase is looked for in. */
.content-search-scope-label {
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
white-space: nowrap;
}
.content-search-scope {
padding: 8px 10px;
font-size: 13px;
min-width: 132px;
}
.content-search-scope option:disabled {
color: var(--text-muted);
}
.content-search-count {
margin: 0 0 12px;
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.content-search-results {
margin: 0;
max-height: 360px;
overflow: auto;
}
.content-search-group {
border: 1px solid var(--border);
border-radius: 12px;
background: #f8fafc;
margin: 0 0 10px;
padding: 10px 12px;
}
.content-search-group:last-child {
margin-bottom: 0;
}
.content-search-group-header {
font-size: 13px;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.content-search-course-id {
font-weight: 400;
font-size: 12px;
color: var(--text-muted);
}
.content-search-match-count {
margin-left: auto;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
}
.content-search-match-list {
margin: 8px 0 0;
padding-left: 18px;
font-size: 12px;
color: var(--text);
}
.content-search-match {
margin: 2px 0;
}
/* Bulk Settings modal (AIR-121) — reuses .modal-overlay / .modal-content. Display is toggled inline to
`flex`; the rules below keep it hidden unless the inline style opts in (matches the genealogy / content-
search / find-replace / section-delete idiom). Batch-write a SETTINGS-ONLY change across a C-SEL set:
Preview (writes nothing) → explicit confirm → Apply, with a real Stop/Cancel (aborts the apply fetch). */
#bulk-settings-modal { display: none; }
#bulk-settings-modal.modal-overlay { display: none; }
#bulk-settings-modal[style*="flex"] { display: flex; }
.bulk-settings-note {
margin: 0 0 14px;
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
}
.bulk-settings-selection-count {
margin: 0 0 12px;
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.bulk-settings-field {
margin: 0 0 12px;
}
.bulk-settings-field label {
display: block;
margin: 0 0 4px;
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.bulk-settings-field input[type="number"] {
width: 160px;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 14px;
}
.bulk-settings-results {
margin: 0 0 12px;
max-height: 300px;
overflow: auto;
}
.bulk-settings-plan-head {
font-size: 12px;
font-weight: 700;
color: var(--text);
margin: 0 0 8px;
}
.bulk-settings-plan-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: 10px;
background: #f8fafc;
margin: 0 0 6px;
font-size: 12px;
}
.bulk-settings-plan-title {
flex: 1 1 200px;
font-weight: 600;
color: var(--text);
}
.bulk-settings-diff code {
font-size: 11px;
color: var(--text-muted);
}
.bulk-settings-before {
color: var(--text-muted);
}
.bulk-settings-after {
font-weight: 700;
color: var(--text);
}
.bulk-settings-confirm-row {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.bulk-settings-progress {
margin: 0 0 12px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
/* Batch Fork modal (AIR-123) — reuses .modal-overlay / .modal-content. Display is toggled inline to
`flex`; the rules below keep it hidden unless the inline style opts in (matches the genealogy / content-
search / find-replace / section-delete / bulk-settings idiom). One source master → MANY target customer
folders: Preview (writes nothing) → explicit confirm → Apply, with a real Stop/Cancel (aborts the apply
fetch). */
#batch-fork-modal { display: none; }
#batch-fork-modal.modal-overlay { display: none; }
#batch-fork-modal[style*="flex"] { display: flex; }
.batch-fork-note {
margin: 0 0 14px;
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
}
.batch-fork-field {
margin: 0 0 12px;
}
.batch-fork-select-all-row {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.batch-fork-targets {
max-height: 220px;
overflow: auto;
border: 1px solid var(--border);
border-radius: 10px;
padding: 6px;
}
.batch-fork-target-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 8px;
font-size: 13px;
}
.batch-fork-target-row:hover {
background: #f8fafc;
}
.batch-fork-target-name {
flex: 1 1 auto;
font-weight: 600;
color: var(--text);
}
.batch-fork-target-meta {
font-size: 11px;
color: var(--text-muted);
}
.batch-fork-results {
margin: 0 0 12px;
max-height: 240px;
overflow: auto;
}
.batch-fork-plan-head {
font-size: 12px;
font-weight: 700;
color: var(--text);
margin: 0 0 8px;
}
.batch-fork-plan-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: 10px;
background: #f8fafc;
margin: 0 0 6px;
font-size: 12px;
}
.batch-fork-plan-title {
flex: 1 1 200px;
font-weight: 600;
color: var(--text);
}
.batch-fork-plan-folder code {
font-size: 11px;
color: var(--text-muted);
}
.batch-fork-confirm-row {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.batch-fork-progress {
margin: 0 0 12px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
/* ── OE-74 — Scenario Decision page (authoring surface) ──────────────────────────────────────────
Responsive by construction: every row is a flex line that wraps, and nothing is sized in
viewport units, so the same markup lays out on a desktop, an iPad and a phone without a second
set of rules. Focus is never suppressed — the whole surface is keyboard-reachable. */
.scenario-decision-editor { max-width: 900px; margin: 0 auto; }
.scenario-preview-notice {
border: 1px solid var(--border-strong);
background: var(--bg);
border-radius: 8px;
padding: 12px 14px;
font-size: 13px;
line-height: 1.5;
margin-bottom: 14px;
}
.scenario-verdict {
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 14px;
font-size: 13px;
line-height: 1.5;
}
.scenario-verdict-title { font-weight: 700; margin-bottom: 6px; }
.scenario-verdict-line { margin-top: 4px; }
.scenario-verdict-refusal { background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red); }
.scenario-verdict-warning { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); }
.scenario-choice {
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px;
margin-bottom: 14px;
background: var(--surface);
}
.scenario-choice.scenario-choice-correct { border-color: var(--green-border); background: var(--green-bg); }
.scenario-choice-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scenario-choice-number {
min-width: 24px;
height: 24px;
border-radius: 12px;
background: var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.scenario-choice-text { flex: 1 1 240px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px; }
.scenario-mini-btn {
padding: 6px 9px;
border: 1px solid var(--border-strong);
background: var(--bg);
border-radius: 6px;
cursor: pointer;
font-size: 12px;
line-height: 1;
}
.scenario-mini-btn:hover { background: var(--border); }
.scenario-feedback { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--border-strong); }
.scenario-feedback-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.scenario-section { border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-bottom: 10px; background: var(--bg); }
.scenario-section-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.scenario-section-heading { flex: 1 1 200px; min-width: 0; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 6px; font-weight: 600; }
.scenario-section-body { min-height: 80px; }
.scenario-section-body img,
.scenario-section-body video,
.scenario-section-body table { max-width: 100%; }
.scenario-behaviour-card .scenario-setting { margin-bottom: 14px; }
.scenario-behaviour-card .scenario-setting label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
@media (max-width: 640px) {
.scenario-choice-head { align-items: stretch; }
.scenario-choice-text { flex-basis: 100%; }
.scenario-section-heading { flex-basis: 100%; }
}
/* ===== OE-111 — T-Module forking =====
(a) the fork dialog's "stay on this list" choice, and the running list of forks made while the
author stayed put — staying put means a fork leaves no other trace on screen, so this list IS
the confirmation; (b) the Bulk fork panel's itemised failure list, which must read as clearly
unfinished work rather than as decoration. */
#bulk-fork-modal { display: none; }
#bulk-fork-modal.modal-overlay { display: none; }
#bulk-fork-modal[style*="flex"] { display: flex; }
.fork-stay-here-row {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 0 0;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.fork-activity {
margin: 0 0 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: #f0fdf4;
}
.fork-activity-head {
font-size: 12px;
font-weight: 700;
color: #166534;
margin: 0 0 8px;
}
.fork-activity-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 12px;
}
.fork-activity-title {
flex: 1 1 240px;
font-weight: 600;
color: var(--text);
}
.fork-activity-folder {
font-size: 11px;
color: var(--text-muted);
}
.fork-activity-open {
font-size: 11px;
padding: 2px 10px;
}
.bulk-fork-failed-head {
font-size: 12px;
font-weight: 700;
color: #991b1b;
margin: 12px 0 8px;
}
.bulk-fork-failed-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: 1px solid #fecaca;
border-radius: 10px;
background: #fef2f2;
margin: 0 0 6px;
font-size: 12px;
}
.bulk-fork-failed-why {
flex: 1 1 240px;
font-size: 11px;
color: #991b1b;
}
/* Course Details modal (OE-127) — reuses .modal-overlay / .modal-content. Display is toggled inline
to `flex`; the rules below keep it hidden unless the inline style opts in (matches the
course-family / find-replace idiom). READ-ONLY view: three facts and a way into the editor. */
#course-details-modal { display: none; }
#course-details-modal.modal-overlay { display: none; }
#course-details-modal[style*="flex"] { display: flex; }
.course-details-modal-content {
width: min(100%, 380px);
}
.course-details-title {
margin: 0 0 2px;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.course-details-subject {
margin: 0 0 18px;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
}
.course-details-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.course-details-row:last-child {
border-bottom: none;
}
.course-details-label {
flex: 0 0 auto;
font-size: 13px;
color: var(--text-muted);
}
.course-details-value {
flex: 1 1 auto;
text-align: right;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
/* A lockout is the one value a reader is usually hunting for, so it is the one value that is
coloured. Everything else stays neutral rather than competing with it. */
.course-details-value.is-lockout {
color: #dc2626;
}
.course-details-status {
margin: 8px 0 0;
font-size: 13px;
color: var(--text-muted);
}
.course-details-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 22px;
}
.course-info-cell {
text-align: right;
}
.btn-course-info {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
border: none;
background: none;
color: var(--text-muted);
}
.btn-course-info:hover {
color: var(--text);
background: none;
}
|