/* Visor Classroom — styles for the class, assignment, writer, review and live
   pages. Reuses the tokens and components in app.css (.btn, .card, .pill,
   .tabs, .modal…); only what those don't cover lives here. */

/* ---------- shell ---------- */
a.btn { text-decoration: none; }
.page { max-width: 1100px; margin: 0 auto; padding: 26px 24px 70px; }
.page h1 { font-size: 22px; margin: 0 0 2px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.head-actions, .btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-row { margin-top: 10px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
.crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { color: var(--ink-3); }
.loading-row { display: flex; justify-content: center; padding: 60px 0; }
.home-section { margin-top: 30px; }
.home-section .section-title { margin-bottom: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 4px 0 16px; cursor: pointer; }
.check-row input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.input-sm { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
select.input { appearance: auto; }

/* Visible focus for everything new (keyboard users). Not the editor's menus,
   toolbar, outline and find panel: docs-editor.css gives those their own
   (the :where keeps this rule's weight as it was for everything else). */
.route-view :is(a, button, select, input, textarea):focus-visible:where(:not([class*="dui-"], .dx-menubar-slot [class*="dui-"] *, .dx-toolbar-slot [class*="dui-"] *, .dx-outline *, .dui-find *)),
.modal button:focus-visible, .modal a:focus-visible, .brand:focus-visible, .dd-menu :is(a, button):focus-visible, .collapse .ch:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px;
}

/* ---------- lists ---------- */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(217,83,79,.5); animation: livePulse 1.6s infinite; vertical-align: middle; }
.live-dot-text { color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(217,83,79,.5); } 70% { box-shadow: 0 0 0 7px rgba(217,83,79,0); } 100% { box-shadow: 0 0 0 0 rgba(217,83,79,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.list-card { overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { background: var(--surface-2); }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .due { white-space: nowrap; }
.row-link { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; text-decoration: none; color: inherit; }
.create-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---------- roster ---------- */
.roster { width: 100%; border-collapse: collapse; }
.roster th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 12px 16px 10px; border-bottom: 1px solid var(--line); }
.roster td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.roster tbody tr { transition: background-color .15s; }
.roster tbody tr:hover { background: var(--surface-2); }
.roster tr:last-child td { border-bottom: 0; }
.roster-name { display: flex; align-items: center; gap: 10px; }
.row-actions { white-space: nowrap; text-align: right; }
.join-code-big { font-size: 30px; font-weight: 800; letter-spacing: .18em; }
.class-students { align-items: stretch; }
.tip-wrap { position: relative; display: inline-flex; }
.tip-wrap .tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; width: 260px; background: var(--ink); color: #fff; font-size: 12px; padding: 8px 12px; border-radius: 12px; z-index: 5; }
.tip-wrap:hover .tip, .tip-wrap:focus-within .tip { display: block; }
.danger-zone { box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--red-soft); }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .page { padding: 18px 14px 60px; }
}

/* ---------- assignment forms ---------- */
.preset-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.choice.preset { text-align: left; padding: 14px; }
.choice.preset.selected { border-color: var(--brand); background: var(--brand-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 8px; }
fieldset.field { border: 0; padding: 0; margin: 0 0 14px; grid-column: 1 / -1; }
fieldset.field legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.radio-row { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 4px 0; cursor: pointer; }
.radio-row input { margin-top: 3px; }
details.more { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 16px; margin: 8px 0 4px; background: var(--surface-2); }
details.more summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.more[open] summary { margin-bottom: 12px; }
.dim { opacity: .55; }
.linklike { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
.gb-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.gb-pool { border: 1.5px dashed var(--line); border-radius: var(--r-lg); padding: 10px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gb-pool .kicker { width: 100%; }
.gb-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.gb-group { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.gb-group-head { display: flex; gap: 6px; align-items: center; }
.gb-members { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.gchip { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-soft); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 600; cursor: grab; }
.gchip select { border: 0; background: transparent; font-size: 11px; color: var(--ink-2); max-width: 70px; }

/* ---------- assignment page ---------- */
.head-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.instructions { white-space: normal; line-height: 1.65; margin-bottom: 14px; }
.settings-table { overflow: hidden; }
.st-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.st-row:last-child { border-bottom: 0; }
.st-k { color: var(--ink-2); font-weight: 600; }
.group-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.group-row .grow { flex: 1; min-width: 200px; }
.group-stats { display: flex; flex-direction: column; font-size: 13px; color: var(--ink-2); }
@media (max-width: 720px) { .preset-row, .form-grid { grid-template-columns: 1fr; } .st-row { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Visor Writer: a Docs-like letter page on a grey canvas ----------
   The header (title, status, actions; then DocsUI's menu bar in #dxMenubar),
   the toolbar slot (#dxToolbar, sticky under the header), then the canvas: the
   outline (#dxOutline) and the page (#wrPaper), 8.5in wide with 1in margins,
   with the Works Cited as a second page below. The document's own typography
   is doc-format.css (.doc-style-mla / .doc-style-docs); the menus, toolbar,
   find panel and outline are docs-editor.css. */
body.writing { background: #F9FBFD; }
/* The editor has the whole window: no sidebar, no sheet. An arrow leads back
   to the assignment, and during a session (writer.js adds .writing-focus) the
   editor shows its own icon and avatar menu instead. */
body.writing #appView:not(.hidden), body.embed #appView:not(.hidden) { display: block; }
body.writing .vbar, body.writing .vnav, body.writing .vnav-scrim, body.embed .vbar, body.embed .vnav, body.embed .vnav-scrim { display: none; }
body.writing .route-view, body.embed .route-view { margin: 0; min-height: 100vh; background: none; border-radius: 0; box-shadow: none; }
/* The editor's own avatar menu only while the site's bar is away */
body:not(.writing-focus) .wr-user { display: none; }
/* Outside a session the arrow is enough */
body:not(.writing-focus) .wr-logo { display: none; }
/* ...an arrow back to the assignment takes its place */
body.writing-focus .wr-back, .wr-embed .wr-back { display: none; }
.wr-back { flex: none; width: 32px; height: 32px; margin: 2px -4px 0 -6px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); transition: background-color .15s, color .15s; }
.wr-back:hover { background: #E8EEF2; color: var(--ink); }
.wr-back svg { width: 20px; height: 20px; }
a.wr-cls { text-decoration: none; transition: border-color .15s, color .15s; }
a.wr-cls:hover { border-color: var(--brand); color: var(--brand); }
/* Scrolling to the caret keeps it clear of the sticky header and toolbar */
html:has(body.writing), body.writing { scroll-padding-top: calc(var(--dx-sticky-h, 120px) + 16px); scroll-padding-bottom: 32px; }
.wr { --dx-canvas: #F9FBFD; --dx-page-shadow: 0 1px 3px 1px rgba(60,64,67,.15), 0 1px 2px rgba(60,64,67,.12); padding: 0 0 80px; }
/* The header, as in Docs: the Visor icon (back to the assignment), the
   title with its class and the save cloud, the menus under the title, and on
   the right the session, Instructions, Sources, End and Submit, and the avatar */
.wr-bar { position: sticky; top: 0; z-index: 30; background: #F9FBFD; padding: 8px 16px 2px; }
.wr-head { display: flex; align-items: flex-start; gap: 10px; }
.wr-logo { flex: none; width: 40px; height: 40px; margin-top: 2px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s; }
.wr-logo:hover { background: #E8EEF2; }
.wr-logo img { width: 30px; height: auto; }
.wr-head-main { flex: 1; min-width: 0; }
.wr-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 28px; padding: 2px 0 0 7px; }
.dx-menubar-slot:empty { display: none; }
.wr-title { display: flex; align-items: center; min-width: 0; }
.wr-h { margin: 0; font-weight: 500; font-size: 18px; line-height: 24px; color: #1F1F1F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.wr-cls { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-2); padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
/* The save cloud: a fixed slot, so "Saving…" / "Saved" / "Offline" never moves the rest of the header */
.wr-saved { flex: none; display: inline-flex; align-items: center; gap: 5px; min-width: 6.6em; font-size: 12.5px; color: var(--ink-2); }
.wr-saved svg { width: 18px; height: 18px; flex: none; }
.wr-saved.offline { color: var(--amber); font-weight: 600; }
.wr-saved.saving svg, .wr-saved.unsaved svg { animation: wrPulse 1.2s ease-in-out infinite; }
@keyframes wrPulse { 50% { opacity: .35; } }
.wr-head-right { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.wr-status { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wr-status > * { white-space: nowrap; }
.wr-rec { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: #FDECEC; color: #B3261E; font-weight: 600; }
.wr-rec .live-dot { width: 7px; height: 7px; }
.wr-timer { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.wr-timer:empty { display: none; }
.wr-timer.low { color: var(--red); }
.wr-actions { display: flex; align-items: center; gap: 6px; }
.wr-hbtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #444746; font-weight: 600; font-size: 13.5px; transition: background-color .15s, color .15s; }
.wr-hbtn:hover { background: #E8EEF2; color: var(--ink); }
.wr-hbtn[aria-expanded="true"] { background: #DCEBF2; color: var(--brand); }
.wr-hbtn svg { width: 17px; height: 17px; flex: none; }
.wr-hbtn .wr-hchev { width: 15px; height: 15px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.wr-hbtn[aria-expanded="true"] .wr-hchev { transform: rotate(180deg); }
.wr-hcount { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.wr-hcount:empty { display: none; }
/* Submit: the pill Docs gives Share */
.wr-actions .wr-submit { height: 36px; padding: 0 18px; border-radius: 8px; font-size: 14px; }
.wr-actions .wr-submit svg { width: 15px; height: 15px; }
.wr-actions .wr-end { height: 36px; border-radius: 8px; padding: 0 14px; }
.wr-avatar { border: 0; background: none; padding: 3px; border-radius: 50%; display: inline-flex; transition: background-color .15s; }
.wr-avatar:hover { background: #E8EEF2; }
.wr-avatar .avatar { width: 32px; height: 32px; font-size: 12px; }
/* The toolbar row, under the header; DocsUI draws the bar itself */
.dx-toolbar-slot { position: sticky; top: var(--wr-bar-h, 96px); z-index: 25; background: var(--dx-canvas); padding: 4px 16px 8px; }
.dx-toolbar-slot:empty { display: none; }
.dx-fallback-bar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; max-width: 816px; margin: 0 auto; }
.wr-wc { font-size: 12.5px; color: var(--ink-2); margin-right: 6px; font-variant-numeric: tabular-nums; }
.wr-tb-btn { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.wr-tb-btn:hover { border-color: var(--blue); }
.dx-above > * { box-sizing: border-box; width: calc(8.5in * var(--dx-zoom, 1)); max-width: 100%; margin-left: auto; margin-right: auto; }
.wr-banner-slot { margin-top: 12px; }
.wr-banner-slot:empty { display: none; }
.wr-banner { display: flex; align-items: center; gap: 10px; border-radius: var(--r); padding: 10px 14px; margin-bottom: 4px; font-size: 14px; background: var(--blue-soft); color: var(--ink); }
.wr-banner span { flex: 1; }
.wr-banner.warn { background: var(--amber-soft); }
.wr-banner.teacher { background: var(--violet-soft); font-weight: 600; }
/* Start, ended and feedback cards: centred above the page */
.dx-intro { margin-top: 12px; }
.dx-intro:empty { display: none; }
.wr-card { margin-bottom: 4px; }
.wr-describe { font-size: 14px; color: var(--ink-2); }
.wr-instr-open { line-height: 1.65; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.wr-start-h { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
/* The Instructions dropdown: a bar at the top of the canvas that opens smoothly
   (its height animates from 0fr to 1fr) */
.wr-instr-drop { margin-top: 14px; }
.wr-instr-drop > * { background: #fff; }
.wr-instr-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-radius .28s cubic-bezier(.2, .7, .2, 1), background-color .15s, box-shadow .15s; }
.wr-instr-head:hover { background: #FBFCFD; box-shadow: 0 1px 4px rgba(16, 48, 61, .06); }
.wr-instr-drop.open .wr-instr-head { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.wr-instr-chev { display: inline-flex; color: var(--ink-2); }
.wr-instr-chev svg { width: 16px; height: 16px; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.wr-instr-drop.open .wr-instr-chev svg { transform: rotate(180deg); }
.wr-instr-t { font-weight: 700; font-size: 14.5px; }
.wr-instr-sum { margin-left: auto; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wr-instr-body { display: grid; grid-template-rows: 0fr; border: 1px solid transparent; border-top: 0; border-radius: 0 0 10px 10px; transition: grid-template-rows .3s cubic-bezier(.2, .7, .2, 1), border-color .3s; }
.wr-instr-drop.open .wr-instr-body { grid-template-rows: 1fr; border-color: var(--line); }
.wr-instr-inner { overflow: hidden; min-height: 0; }
.wr-instr-pad { padding: 2px 18px 16px 42px; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.wr-instr-drop.open .wr-instr-pad { opacity: 1; transform: none; transition-delay: .06s; }
.wr-instr-text { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.wr-instr-rules { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.wr-instr-k { display: block; font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.wr-ext { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 600; }
.wr-ext svg { width: 16px; height: 16px; }
.wr-ext.ok { color: var(--green-deep); }
.wr-ext.missing { color: var(--amber); }
.wr-card-line { display: flex; gap: 8px; align-items: center; }
.wr-card-line svg { width: 18px; height: 18px; color: var(--green-deep); }
.wr-feedback { background: var(--violet-soft); border-radius: var(--r); padding: 12px 16px; margin-bottom: 12px; }
.wr-score { font-size: 26px; font-weight: 800; margin: 2px 0 6px; }

/* The canvas: the outline on the left (when shown), the pages in the rest */
.dx-canvas { position: relative; display: flex; align-items: flex-start; padding: 0 16px; }
.dx-outline { display: none; flex: none; width: 220px; box-sizing: border-box; position: sticky; top: calc(var(--wr-bar-h, 96px) + var(--dx-tb-h, 44px) + 12px); max-height: calc(100vh - var(--wr-bar-h, 96px) - var(--dx-tb-h, 44px) - 24px); overflow-y: auto; margin: 20px 12px 0 0; }
.dx-canvas.dx-outline-on .dx-outline { display: block; }
/* The Sources panel slides in to the right of the page (its inside keeps its
   width, so nothing reflows while it opens) */
.dx-side { flex: none; width: 0; opacity: 0; overflow: hidden; position: sticky; top: calc(var(--wr-bar-h, 96px) + var(--dx-tb-h, 44px) + 12px); margin: 20px 0 0; transition: width .3s cubic-bezier(.2, .7, .2, 1), opacity .2s ease, margin .3s cubic-bezier(.2, .7, .2, 1); }
.dx-canvas.dx-side-on .dx-side { width: 320px; opacity: 1; margin-left: 16px; }
.dx-side { z-index: 6; }
.dx-canvas.dx-side-on .dx-pages { min-width: calc(8.5in * var(--dx-zoom, 1) + 4px); }
.dx-side-inner { width: 320px; max-height: calc(100vh - var(--wr-bar-h, 96px) - var(--dx-tb-h, 44px) - 36px); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(60, 64, 67, .1); box-sizing: border-box; }
.dx-side-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--line); }
.dx-side-head b { font-size: 15px; }
.dx-side-head b:focus { outline: none; }
.dx-side-style { font-size: 11.5px; font-weight: 700; color: var(--ink-2); padding: 1px 7px; border-radius: 999px; background: #EEF3F6; }
.dx-side-head .btn-icon { margin-left: auto; }
.dx-side-body { overflow-y: auto; padding: 12px 14px 16px; }
.dx-side-note { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.dx-side-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.dx-src { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #FBFCFD; transition: border-color .15s, box-shadow .15s; }
.dx-src:hover { border-color: #C9D5DC; box-shadow: 0 2px 6px rgba(16, 48, 61, .06); }
.dx-src-text { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; padding-left: 1.4em; text-indent: -1.4em; }
.dx-src-row { display: flex; align-items: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
/* "Check: …" on its own line, so it never pushes the icons out of the card */
.dx-src-check { margin-top: 8px; }
.dx-src-check .chip-check { white-space: normal; text-align: left; max-width: 100%; }
.dx-src-in { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-2); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-src .btn-sm { padding: 4px 10px; }
.dx-side-empty { padding: 14px; border: 1px dashed var(--field-line); border-radius: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.dx-side-adds { display: flex; gap: 6px; }
.dx-side-adds .btn { flex: 1; justify-content: center; }
.dx-side-hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.wr-works-add { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
/* The source dialog: from a link, the details, or written */
.src-tabs { margin-bottom: 16px; }
.src-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,48,59,0.14), 0 0 0 1px rgba(18,48,59,0.05); }
.src-pane { display: none; }
.src-pane.on { display: block; animation: vxPaneIn .2s var(--ease, ease); }
@keyframes vxPaneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.src-find { display: flex; gap: 8px; }
.src-find .input { flex: 1; }
.src-found { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-bottom: 14px; border-radius: 8px; background: var(--green-soft); color: var(--green-deep); font-size: 13.5px; font-weight: 600; animation: vxPaneIn .25s var(--ease, ease); }
.src-found.warn { background: var(--amber-soft); color: #8A5A10; }
.src-found svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.input.needs { border-color: #E3A23B; box-shadow: 0 0 0 3px rgba(227, 155, 46, .16); }
.src-preview { margin-top: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #FBFCFD; }
.src-preview-k { font-size: 12.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; }
.src-preview-t { font-family: 'Times New Roman', Tinos, Times, serif; font-size: 15px; line-height: 1.5; padding-left: 1.5em; text-indent: -1.5em; overflow-wrap: anywhere; }
.src-preview-in { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.src-preview-in:empty { display: none; }
@media (max-width: 1100px) {
  /* Narrower windows: the panel floats over the page's right edge */
  .dx-side { position: fixed; right: 12px; top: calc(var(--dx-tb-bottom, var(--dx-sticky-h, 120px)) + 10px); margin: 0; z-index: 20; }
  .dx-canvas.dx-side-on .dx-side { margin: 0; }
  .dx-side-inner { box-shadow: 0 8px 28px rgba(16, 48, 61, .18); }
}
/* Not a scroll box: a page wider than the window (a big zoom, the outline
   open) scrolls the window sideways, with its scrollbar at the bottom of the
   window, and the paused card can stick in view as the window scrolls */
.dx-pages { flex: 1; min-width: 0; padding: 0 2px; }
/* The page: letter size, 1in margins, zoomed as a whole (--dx-zoom on the canvas) */
.wr-paper { position: relative; background: #fff; }
.dx-page { box-sizing: border-box; width: 8.5in; min-height: 11in; margin: 20px auto; padding: 1in; border-radius: 0; box-shadow: var(--dx-page-shadow); zoom: var(--dx-zoom, 1); }
.dx-page .ql-container.ql-snow { border: 0; height: auto; }
/* The writing fills the page (the page-break code sets how many pages tall) */
.dx-page .ql-editor { padding: 0; overflow: visible; min-height: var(--dx-text-h, 9in); color: #000; }
.dx-page .ql-editor:focus { outline: none; }
.dx-page .ql-editor.ql-blank::before { left: 0; right: 0; font-style: normal; color: #9aa0a6; }
.dx-page .ql-editor img { cursor: default; }
/* Page breaks: a dashed line across the page and "Page N" in the right margin */
.dx-breaks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dx-break { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #c4c7c5; }
.dx-break span { position: absolute; right: 10px; top: 4px; font: 500 10px/1 var(--font); letter-spacing: .02em; color: #80868b; }
/* Find: every match, and the current one (CSS Custom Highlight API) */
::highlight(dx-find) { background-color: #fde293; color: inherit; }
::highlight(dx-find-current) { background-color: #f6b26b; color: inherit; }
/* The selection while the focus is in a toolbar field, the link box or find (writerPaintSelection) */
::highlight(dx-sel) { background-color: #d3d7dc; color: inherit; }
/* Locked: the page dims and a card says why */
.wr-paper.locked .ql-editor { opacity: .45; filter: grayscale(.6); user-select: none; }
.wr-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 1in; background: rgba(249,251,253,.45); z-index: 5; }
/* The card is the editor's own UI, not the document: it keeps its size at any
   zoom (the page's zoom is undone on it) and sticks under the toolbar */
.wr-card-pause { position: sticky; top: calc(var(--dx-sticky-h, 120px) + 60px); zoom: calc(1 / var(--dx-zoom, 1)); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 22px 26px; max-width: 400px; text-align: center; font-family: var(--font); line-height: 1.5; }
.wr-embed .wr-card-pause { zoom: 1; }
.wr-card-pause b { font-size: 16.5px; display: block; }
.wr-card-pause p { color: var(--ink-2); margin: 6px 0 12px; font-size: 14px; }
/* A locked session out of full screen: nothing of the essay stays on the page */
.wr-wipe { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 24px; background: #fff; overflow: auto; }
.wr-wiped > :not(.wr-wipe) { visibility: hidden; }
html:has(.wr-wiped) { overflow: hidden; }
.wr-wipe-card { width: 100%; max-width: 460px; text-align: center; }
.wr-wipe-ic { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--red-soft); color: #B23B37; }
.wr-wipe-ic svg { width: 32px; height: 32px; }
.wr-wipe h2 { margin: 16px 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.015em; }
.wr-wipe p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.wr-wipe-seen { margin: 20px 0 14px; padding: 13px 16px; border-radius: var(--r-lg); background: var(--red-soft); box-shadow: inset 0 0 0 1px #F0C4C2; color: #8A2B27; font-size: 14.5px; line-height: 1.45; }
.wr-wipe-seen b { display: block; font-size: 16px; font-weight: 700; }
.wr-wipe .wr-away { margin-bottom: 18px; color: var(--ink-2); font-size: 14px; }
/* Outside a writing session there's no essay to show, and no tools for it */
.wr-essay-hidden .wr-wc, .wr-essay-hidden #wrPaper, .wr-essay-hidden #dxToolbar, .wr-essay-hidden #dxMenubar, .wr-essay-hidden #dxOutline, .wr-essay-hidden #wrSide, .wr-essay-hidden #wrSources, .wr-essay-hidden #wrSideBtn, .wr-essay-hidden .wr-wc { display: none; }
.wr-unsub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.wr-away { font-family: var(--mono); font-size: 13px; color: var(--amber); font-weight: 700; margin-bottom: 12px; }
.dx-wc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dx-wc-table td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.dx-wc-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Side panel: compact. No outline, no page breaks, a fluid page with no zoom */
.wr-embed { padding-bottom: 40px; }
.wr-embed .wr-bar { padding: 6px 10px 0; }
/* The panel's own header already shows the title, "Session active" and the timer */
.wr-embed .wr-title-row .wr-title, .wr-embed .wr-rec, .wr-embed .wr-timer { display: none; }
.wr-embed .wr-head { align-items: center; }
.wr-embed .wr-title-row { padding-left: 0; }
.wr-embed .wr-head-right { padding-top: 0; }
.wr-embed .wr-actions .wr-submit, .wr-embed .wr-actions .wr-end { height: 30px; padding: 0 12px; font-size: 13px; }
.wr-embed #dxMenubar { display: none; }
.wr-embed .dx-toolbar-slot { padding: 4px 8px; }
.wr-embed .dx-canvas { padding: 0 8px; }
.wr-embed .dx-outline, .wr-embed .dx-breaks { display: none !important; }
.wr-embed .dx-pages { overflow-x: visible; }
.wr-embed .dx-above > * { width: auto; }
.wr-embed .dx-page { width: auto; min-height: 62vh; margin: 8px 0; padding: 18px 16px; box-shadow: var(--shadow-sm); border-radius: var(--r); zoom: 1; }
.wr-embed .dx-page .ql-editor { min-height: 50vh; }
@media (max-width: 1150px) {
  body.writing-focus .wr-hbtn span:not(.wr-hcount), body.writing-focus .wr-rec-t { display: none; }
  body.writing-focus .wr-hbtn { padding: 0 9px; }
}
@media (max-width: 900px) {
  .wr-cls, .wr-hbtn span:not(.wr-hcount), .wr-rec-t { display: none; }
  .wr-hbtn { padding: 0 9px; }
}
@media (max-width: 720px) {
  .wr-bar { padding: 6px 10px 0; }
  .wr-head { flex-wrap: wrap; }
  .wr-head-right { width: 100%; justify-content: flex-end; padding-top: 0; }
  .wr-instr-sum { display: none; }
  .wr-instr-pad { padding-left: 18px; }
}

/* ---------- extension connect, profile extras ---------- */
.page.narrow { max-width: 640px; }
.roster-card { position: relative; overflow-x: auto; }
/* On a phone a staff row stacks: the person, their role under them, the gear beside */
@media (max-width: 600px) {
  .staff-table, .staff-table tbody { display: block; }
  .staff-table thead { display: none; }
  .staff-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
  .staff-table tr:last-child { border-bottom: 0; }
  .staff-table td { padding: 0; border: 0; }
  .staff-table td:nth-child(2) { grid-column: 1; padding-left: 42px; }
  .staff-table td.row-actions { grid-column: 2; grid-row: 1 / span 2; }
}
/* In place of a page: nothing at this address, or it couldn't be opened */
.problem-page { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12vh 16px 40px; text-align: center; }
.problem-page img { width: 60px; height: auto; margin-bottom: 8px; }
.problem-page h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.problem-page p { margin: 0 0 14px; max-width: 42ch; color: var(--ink-2); }
.connect-card { text-align: left; }
.connect-card h1 { margin: 10px 0 8px; }
.connect-logo { height: 34px; }
.connected-line { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 6px 0 10px; color: var(--green-deep); }
.connected-line svg { width: 20px; height: 20px; }
.prof-extras { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.prof-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; }

/* ---------- Works Cited ---------- */
.wr-works { background: #fff; border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 22px 64px 26px; margin-top: 16px; }
.wr-works h2 { font-size: 17px; text-align: center; margin: 0 0 12px; }
.wr-bib { list-style: none; padding: 0; margin: 0 0 12px; }
.wr-bib li { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: flex-start; padding: 6px 0; line-height: 1.6; }
/* The grade and the Check chip, on a line of their own under the entry */
.wr-bib-notes { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px 2em; font-family: var(--font); font-size: 13px; line-height: 1.5; }
.wr-bib-text { flex: 1; padding-left: 2em; text-indent: -2em; overflow-wrap: anywhere; }
.wr-bib-tools { display: flex; gap: 2px; align-items: center; flex: none; }
.chip-check { border: 0; background: var(--amber-soft); color: #9a6212; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.chip-check::before { content: "⚠ "; }
@media (max-width: 720px) { .wr-works { padding: 18px 20px; } }
/* Reliability grades (source-grade.js): a chip per source, and what it's based on */
.src-grade { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; padding: 2px 9px 2px 2px; font: 700 12px/1.4 var(--font); white-space: nowrap; cursor: pointer; text-indent: 0; vertical-align: middle; }
.src-grade b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 11px; }
.src-grade:focus-visible { outline: 2px solid var(--brand, #1E9BC4); outline-offset: 2px; }
.src-grade.g-A { background: var(--green-soft); color: #2E7A3E; } .src-grade.g-A b, .grade-letter.g-A { background: #3E9A50; }
.src-grade.g-B { background: var(--blue-soft); color: #17708F; } .src-grade.g-B b, .grade-letter.g-B { background: #1E8DB3; }
.src-grade.g-C { background: var(--amber-soft); color: #8A5A10; } .src-grade.g-C b, .grade-letter.g-C { background: #C9821F; }
.src-grade.g-D { background: var(--red-soft); color: #A3322E; } .src-grade.g-D b, .grade-letter.g-D { background: #C9443F; }
.src-grade.g-none { padding: 2px 9px; background: var(--surface, #F3F5F7); color: var(--ink-3); font-weight: 600; cursor: default; }
.grade-head { display: flex; align-items: center; gap: 12px; }
.grade-letter { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: #fff; font: 800 19px/1 var(--font); }
.grade-word { font-weight: 700; font-size: 14.5px; }
.grade-why { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; }
.grade-notes { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; line-height: 1.5; }
.grade-notes li { position: relative; padding-left: 20px; margin-top: 3px; }
.grade-notes li::before { position: absolute; left: 2px; font-weight: 800; }
.grade-notes .n-up::before { content: "+"; color: #3E9A50; }
.grade-notes .n-down::before { content: "−"; color: #C9443F; }
.grade-notes .n-info::before { content: "•"; color: var(--ink-3); }
.grade-how { margin: 10px 0 0; line-height: 1.5; }
.src-preview-grade { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font); }
.src-preview-grade:empty { display: none; }
.src-preview-grade p.small { margin: 0; }
@media print { .src-grade { display: none !important; } }
/* In the writer: a page of its own, in the document's style */
.dx-sources .wr-works { box-sizing: border-box; width: 8.5in; margin: 20px auto; padding: 1in; border-radius: 0; box-shadow: var(--dx-page-shadow); zoom: var(--dx-zoom, 1); color: #000; }
.dx-sources.doc-style-mla .wr-works { font-family: 'Times New Roman', Tinos, Times, serif; font-size: 12pt; line-height: 2; }
.dx-sources.doc-style-docs .wr-works { font-family: Arial, Arimo, Helvetica, sans-serif; font-size: 11pt; line-height: 1.15; }
.dx-sources .wr-works h2 { font: inherit; font-weight: normal; text-align: center; margin: 0; }
.dx-sources .wr-bib li { padding: 0; line-height: inherit; }
.dx-sources .wr-bib-text { padding-left: .5in; text-indent: -.5in; }
.dx-sources .wr-bib-notes { padding-left: .5in; }
.dx-sources .wr-works .muted, .dx-sources .wr-works .btn, .dx-sources .wr-bib-tools { font-family: var(--font); font-size: 13px; line-height: 1.5; }
.wr-embed .dx-sources .wr-works { width: auto; margin: 8px 0; padding: 16px; box-shadow: var(--shadow-sm); border-radius: var(--r); zoom: 1; }

/* ---------- segmented filters ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: #EDF2F4; border: 0; border-radius: var(--r-ctl); padding: 3px; }
.seg button { border: 0; background: transparent; border-radius: var(--r-sm); padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background-color .15s, color .15s, box-shadow .15s; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(18,48,59,0.08); }

/* ---------- live board ---------- */
.live-glance { padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.live-glance-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.live-glance-h h3, .live-tools h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.live-glance-h h3 { flex: 1; }
.glance-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.glance-cols ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.glance-cols .btn { margin-top: 10px; }
.live-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-ctl); background: var(--green-soft); color: #256B3B; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.live-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-deep); }
.live-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.live-tools label { display: inline-flex; align-items: center; gap: 6px; }
.live-banner { margin-bottom: 10px; }
.live-card { overflow-x: auto; position: relative; }
.live-table th { background: var(--surface-2); color: var(--ink-2); padding: 9px 12px; }
.live-table td { padding: 8px 12px; }
.live-table th:first-child, .live-table td:first-child { padding-left: 16px; }
.live-table th, .live-table td { white-space: nowrap; }
.live-table td.mono { font-family: inherit; font-variant-numeric: tabular-nums; }
.live-table tr.attn { background: #FEF8EE; }
.live-table td.low { color: var(--red); font-weight: 700; }
.attn-text { color: #8A5A0B; display: flex; align-items: center; gap: 4px; }
.attn-text svg { width: 12px; height: 12px; }
.ok-mark { color: var(--green-deep); font-weight: 800; }
.no-mark { color: var(--red); font-weight: 800; }
.live-acts { display: flex; gap: 2px; justify-content: flex-end; }
.live-act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); transition: background-color .15s, color .15s; }
.live-act:hover { background: var(--surface); color: var(--ink); }
.live-act svg { width: 16px; height: 16px; }

/* ---------- review ---------- */
.btn.disabled { opacity: .45; pointer-events: none; }
/* The essay with its notes beside it */
.review .course-bar { flex-wrap: nowrap; gap: 10px; }
.review .course-bar .crumbs { margin: 0; min-width: 0; }
.review .page-head h1 { font-size: 21px; }
.rv-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; margin-top: 16px; }
.rv-side { min-width: 0; }
.side-note { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.rv-notes ul { font-size: 14px; }
.rv-side .src-bar { height: 12px; }
.rv-side-rows { margin-top: 8px; }
.rv-side .side-stat { padding: 6px 0; }
@media (max-width: 1180px) { .rv-split { grid-template-columns: minmax(0, 1fr); } }
.rv-doc-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.rv-paper { max-width: 760px; margin: 0 auto; border-radius: var(--r); }
.rv-paper .ql-toolbar { display: none; }
.rv-paper + .wr-works { max-width: 760px; margin: 16px auto 0; }
.src-view { padding: 48px 64px 60px; line-height: 2; font-size: 17px; white-space: pre-wrap; }
.rv-tiles { margin: 14px 0; }
.rv-h { margin: 22px 0 10px; }
.rv-notes ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; }
.rv-notes-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rv-table { width: 100%; border-collapse: collapse; margin: 12px 0 6px; font-size: 14px; }
.rv-table td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.rv-paste-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.rv-quote { margin: 8px 0 0; padding: 8px 12px; background: var(--surface-2); border-left: 3px solid var(--line); border-radius: 0; font-size: 14px; color: var(--ink-2); }
.rl-list { overflow: hidden; }
.rl { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.rl:last-child { border-bottom: 0; }
.rl-kind { font-size: 12px; font-weight: 700; color: var(--ink-2); min-width: 74px; }
.rl-ai .rl-kind { color: var(--amber); }

/* Where the text came from: the src-<category> colours and patterns, and the
   --rp-* colours, are in doc-format.css (shared with the editor and print) */
.src-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; }
.src-key { display: inline-flex; align-items: center; gap: 6px; padding: 1px 4px; border-radius: 4px; }
.src-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); background: #fff; }
.src-key.src-typed i { background: var(--rp-typed); }
.src-bar { display: flex; height: 22px; border-radius: 999px; overflow: hidden; background: var(--surface); }
.src-bar i { display: block; height: 100%; }
.src-bar-typed { background: var(--rp-typed); }
.src-bar-pasted-research { background: var(--rp-research); }
.src-bar-pasted-outside { background: repeating-linear-gradient(135deg, var(--rp-outside) 0 6px, #f0b75e 6px 12px); }
.src-bar-pasted-internal { background: var(--rp-internal); }
.src-bar-cited { background: var(--rp-cited); }
.src-bar-template { background: var(--rp-template); }
.src-bar-other { background: repeating-linear-gradient(90deg, var(--rp-other) 0 4px, #f2a5a2 4px 8px); }

/* ---------- replay (the extension's look, on Visor's colors) ---------- */
.rp-stage { display: grid; grid-template-columns: 1fr 240px; gap: 12px; }
.rp-paper { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 36px 44px; min-height: 52vh; max-height: 62vh; overflow-y: auto; }
.rp-text { white-space: pre-wrap; font-family: "Iowan Old Style", Georgia, serif; font-size: 17px; line-height: 1.75; color: #1b2a31; }
.rp-run.rp-big { background: color-mix(in srgb, var(--c) 10%, transparent); }
.rp-fresh { animation: rp-ignite 1.1s ease forwards; }
@keyframes rp-ignite { 0% { background: color-mix(in srgb, var(--c) 45%, transparent); } 100% { background: transparent; } }
.rp-paste-glow { animation: rp-glow 1.6s ease forwards; border-radius: 3px; }
@keyframes rp-glow { 0% { background: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 90%, transparent); } 100% { background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: none; } }
.rp-caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: text-bottom; background: var(--blue-deep); animation: rp-blink 1.05s steps(2, start) infinite; }
@keyframes rp-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .rp-fresh, .rp-paste-glow, .rp-caret { animation: none; } }
.rp-ghosts { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 12px; max-height: 62vh; overflow-y: auto; }
.rp-ghosts-head { font-size: 12.5px; font-weight: 700; color: var(--ink-3); margin-bottom: 8px; }
.rp-ghost { font-size: 13px; color: var(--red); text-decoration: line-through; opacity: .8; padding: 4px 0; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; }
.rp-transport { display: flex; align-items: center; gap: 12px; margin-top: 12px; background: #fff; border-radius: 999px; padding: 8px 16px; box-shadow: var(--shadow-sm); flex-wrap: wrap; }
.rp-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.rp-play svg { width: 16px; height: 16px; }
.rp-mini { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; width: 32px; height: 32px; }
.rp-scrub-wrap { flex: 1; min-width: 200px; position: relative; padding: 6px 0 14px; }
.rp-scrub { position: relative; height: 10px; border-radius: 999px; background: var(--surface); cursor: pointer; }
.rp-scrub:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; }
.rp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--grad); opacity: .55; }
.rp-knob { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3px solid var(--blue-deep); }
.rp-bands { position: absolute; inset: 0; z-index: 2; }   /* above the fill, so markers can be hovered */
.rp-fill, .rp-knob { pointer-events: none; }
.rp-sess { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .55; }
.rp-pause { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(227,155,46,.8) 0 3px, rgba(227,155,46,.35) 3px 6px); border-radius: 2px; }
.rp-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; }
.rp-tick { position: absolute; top: 0; width: 3px; height: 9px; margin-left: -1px; border-radius: 1px; background: var(--ink-3); }
.rp-tick-search { background: var(--rp-research); }
.rp-tick-copy { background: var(--rp-outside); }
.rp-tick-cite { background: var(--rp-cited); }
.rp-tick-ai-site, .rp-tick-blocked { background: var(--red); height: 10px; }
.rp-speeds button { border: 0; background: transparent; padding: 4px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.rp-speeds button[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue-deep); }
.rp-skip { font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.rp-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.rp-legend { display: flex; gap: 10px; flex-wrap: wrap; }
.rp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rp-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
@media (max-width: 900px) { .rp-stage { grid-template-columns: 1fr; } .src-view { padding: 24px; } }

/* ---------- print / save as PDF ---------- */
.print-area { display: none; }
@media print {
  body.printing { background: #fff !important; }
  body.printing .vbar, body.printing .vnav, body.printing #appView > .shell, body.printing #routeView > .course, body.printing #modalRoot, body.printing #toastRoot, body.printing #authView { display: none !important; }
  body.printing #appView:not(.hidden) { display: block; }
  body.printing #routeView { min-height: 0; margin: 0; border-radius: 0; box-shadow: none; }
  body.printing .print-area { display: block !important; }
  .print-essay .ql-editor, .print-essay .ql-editor p, .print-essay .ql-editor li { line-height: 2; }
  .print-essay { font-family: "Iowan Old Style", Georgia, serif; font-size: 12pt; line-height: 2; color: #000; }
  .print-essay header { margin-bottom: 18pt; line-height: 1.6; }
  .print-name { font-weight: 700; }
  .print-body { padding: 0 !important; }
  .print-essay .wr-works { box-shadow: none; padding: 0; margin-top: 24pt; break-before: page; }
  .print-essay .chip-check { display: none; }
  .print-summary { break-before: page; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 11pt; line-height: 1.5; color: #000; }
  .print-summary h1 { font-size: 16pt; } .print-summary h2 { font-size: 12.5pt; margin-top: 14pt; }
  .print-foot { margin-top: 18pt; color: #444; font-size: 9.5pt; }
}

/* ---------- the writer's print (File → Print, ⌘P) ----------
   writer.js fills #dxPrint with the essay (a read-only copy in the document
   style) and the Works Cited, adds body.dx-printing, and puts the @page rule
   (letter, 1in margins; MLA's "Lastname 1" header) in a style element while
   printing. */
.dx-print { display: none; }
@media print {
  body.dx-printing { background: #fff !important; }
  body.dx-printing .vbar, body.dx-printing .vnav, body.dx-printing #appView > .shell, body.dx-printing #modalRoot, body.dx-printing #toastRoot, body.dx-printing #authView, body.dx-printing .wr > :not(.dx-print) { display: none !important; }
  body.dx-printing #routeView { min-height: 0; }
  body.dx-printing .wr { padding: 0; }
  body.dx-printing .dx-print { display: block !important; color: #000; }
  .dx-print .ql-editor { padding: 0; overflow: visible; height: auto; }
  .dx-print .ql-editor img { break-inside: avoid; }
  .dx-print-works { break-before: page; }
  .dx-print-works.doc-style-mla { font-family: 'Times New Roman', Tinos, Times, serif; font-size: 12pt; line-height: 2; }
  .dx-print-works.doc-style-docs { font-family: Arial, Arimo, Helvetica, sans-serif; font-size: 11pt; line-height: 1.15; }
  .dx-print-works h2 { font: inherit; font-weight: normal; text-align: center; margin: 0; }
  .dx-print-works .wr-bib { list-style: none; padding: 0; margin: 0; }
  .dx-print-works .wr-bib li { display: block; padding: 0; line-height: inherit; }
  .dx-print-works .wr-bib-text { display: block; padding-left: .5in; text-indent: -.5in; }
  body.dx-printing .dx-print * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- labels ---------- */
.ai-label { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--violet-soft); color: #5B3FB0; font-size: 11.5px; font-weight: 700; }

/* ---------- discussions ---------- */
.consent-card { margin-bottom: 14px; border: 1.5px solid var(--amber-soft); }
.disc-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.row-btn { width: 100%; border: 0; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.row-btn:hover { background: var(--surface); }
.disc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.disc-segs { display: flex; flex-direction: column; gap: 8px; }
.disc-seg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: var(--r); padding: 8px 12px; box-shadow: var(--shadow-sm); }
.disc-seg audio { height: 32px; margin-left: auto; max-width: 320px; }
.disc-share { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 12px; font-size: 14px; }
.disc-bar { display: inline-block; width: 120px; height: 8px; border-radius: 999px; background: var(--surface); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.disc-bar i { display: block; height: 100%; background: var(--grad); }
.disc-quote { margin: 4px 0 0 2px; color: var(--ink-2); }
.follows th[scope="row"] { text-align: left; }
.disc-script { max-height: 60vh; overflow-y: auto; padding: 12px 16px; }
.disc-script .line.flash { background: var(--amber-soft); transition: background .3s; }
.ai-card { border: 1.5px solid var(--violet-soft); }