:root {
  --bg: #efece4;
  --page: #fdfcf9;
  --ink: #1b1a17;
  --ink-2: #5c5950;
  --muted: #8a867b;
  --line: rgba(0, 0, 0, .09);
  --accent: #2f5fd8;
  --accent-2: #c2561f;
  --tint: rgba(0, 0, 0, .055);
  --tint-focus: rgba(47, 95, 216, .11);
  --tint-sym: rgba(194, 86, 31, .22);
  --grid: rgba(0, 0, 0, .12);
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 44px -14px rgba(0, 0, 0, .22);
  --serif: Charter, "Iowan Old Style", "Source Serif 4", "Times New Roman", Georgia, serif;
  --sans: -apple-system, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif;
  --page-w: 720px;
  --margin-w: 300px;
  --gutter: 28px;
  --chrome: #e9e6dd;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121211;
  --page: #1d1d1b;
  --ink: #e8e4da;
  --ink-2: #b4afa4;
  --muted: #827d73;
  --line: rgba(255, 255, 255, .1);
  --accent: #86a8ff;
  --accent-2: #ec9663;
  --tint: rgba(255, 255, 255, .075);
  --tint-focus: rgba(134, 168, 255, .15);
  --tint-sym: rgba(236, 150, 99, .3);
  --grid: rgba(255, 255, 255, .14);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 44px -14px rgba(0, 0, 0, .8);
  --chrome: #0d0d0c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow-y: scroll; overscroll-behavior-y: none; }
button { font: inherit; }
[hidden] { display: none !important; }

/* ---- the shell: activity bar, sidebar, title bar with tabs, status bar --------------------------------
   Three fixed columns around the main area, which keeps scrolling the window (the reader's spread
   relies on window scroll): the activity bar (icons), the sidebar (one view at a time, resizable,
   collapsible with ⌘B), and the title bar over the main area with a tab per open book or homework.
   The status bar runs along the bottom. Below 720 px the activity bar is a bottom bar and the
   sidebar opens over the page. */
:root { --act-w: 48px; --side-w: 260px; --bar-h: 36px; --status-h: 22px; --act-h: 52px; --bottom-h: var(--status-h); --shell-left: calc(var(--act-w) + var(--side-w)); }
html.side-closed { --shell-left: var(--act-w); }
.i { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
kbd { display: inline-block; min-width: 18px; padding: 0 5px; font: 500 11px/17px var(--sans); text-align: center; color: var(--ink-2); background: var(--page); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; white-space: nowrap; }

/* the activity bar */
.activity { position: fixed; z-index: 30; left: 0; top: 0; bottom: var(--status-h); width: var(--act-w); display: flex; flex-direction: column; background: var(--chrome); border-right: 1px solid var(--line); }
.act-home { flex: none; height: var(--bar-h); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.act-home .back { display: flex; align-items: center; justify-content: center; width: 32px; height: 28px; border-radius: 6px; color: var(--ink-2); }
.act-home .back:hover { background: var(--tint); color: var(--ink); }
.act-home .back .i { width: 20px; height: 20px; stroke-width: 1.8; }
.act-home .brand { display: block; width: 18px; height: 18px; color: var(--accent); }
.act-home .brand svg { display: block; width: 18px; height: 18px; }
.act-home .back:not([hidden]) + .brand { display: none; }
.act-views { display: flex; flex-direction: column; padding-top: 4px; }
.act-foot { margin-top: auto; padding-bottom: 4px; }
.activity-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.activity-btn .i { width: 22px; height: 22px; }
.activity-btn:hover, .activity-btn.on { color: var(--ink); }
.activity-btn.on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
html.side-closed:not(.side-overlay) .activity-btn.on { color: var(--muted); }
html.side-closed:not(.side-overlay) .activity-btn.on::before { display: none; }
html.side-closed:not(.side-overlay) .activity-btn:hover { color: var(--ink); }
.activity-btn:focus-visible, .tool:focus-visible, .sb-item:focus-visible, .tab:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.badge { position: absolute; right: 7px; bottom: 9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--page); font: 600 10px/16px var(--sans); text-align: center; pointer-events: none; }

/* the sidebar */
.side { position: fixed; z-index: 25; left: var(--act-w); top: 0; bottom: var(--status-h); width: var(--side-w); display: flex; flex-direction: column; background: var(--chrome); border-right: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
html.side-closed .side { display: none; }
html.side-overlay .side { display: flex; box-shadow: var(--shadow); animation: sideIn .16s cubic-bezier(.2, .75, .2, 1) both; }
@keyframes sideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.side-head { flex: none; display: flex; align-items: center; gap: 8px; height: var(--bar-h); padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
.side-title { flex: 1; min-width: 0; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.tool { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.tool:hover { background: var(--tint); color: var(--ink); }
.tool .i { width: 16px; height: 16px; }
.scope { max-width: 150px; height: 24px; padding: 0 4px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-2); font: 12.5px var(--sans); cursor: pointer; text-overflow: ellipsis; }
.scope:hover { background: var(--tint); color: var(--ink); }
.views { position: relative; flex: 1; min-height: 0; }
.view { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 24px; }
.view-explorer { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.view-empty { margin: 0; padding: 12px 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.sash { position: absolute; z-index: 2; top: 0; bottom: 0; right: -3px; width: 6px; cursor: col-resize; touch-action: none; }
.sash:hover, .sash.on { background: color-mix(in srgb, var(--accent) 50%, transparent); transition: background .15s .25s; }
.sash.on { transition: none; }
html.sizing, html.sizing * { cursor: col-resize !important; user-select: none !important; }

/* the explorer: courses, their reading and homework, loose books; the open book's contents under it */
.tree { flex: 1 1 auto; min-height: 72px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 12px; }
.tree-row { position: relative; display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 calc(8px + var(--d, 0) * 12px); color: var(--ink-2); font-size: 13px; cursor: pointer; white-space: nowrap; user-select: none; outline: none; }
.tree-row:hover { background: var(--tint); color: var(--ink); }
.tree-row:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.tree-row.current { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
.tree-row .twist { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .12s ease; }
.tree-row .twist.none { visibility: hidden; }
.tree-row[aria-expanded="true"] .twist { transform: rotate(90deg); }
.tree-row .ico { flex: none; width: 16px; height: 16px; color: var(--muted); }
.tree-row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree-row .aux { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tree-row .more { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: -4px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; visibility: hidden; }
.tree-row:hover .more, .tree-row .more.on { visibility: visible; }
.tree-row:hover .aux { display: none; }
.tree-row .more:hover { background: var(--tint); color: var(--ink); }
.tree-row .more .i { width: 15px; height: 15px; }
.tree-row input.rename { flex: 1; min-width: 0; height: 20px; padding: 0 4px; border: 1px solid var(--accent); border-radius: 3px; background: var(--page); color: var(--ink); font: 13px var(--sans); outline: none; }
.tree-empty { padding: 8px 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.tree-empty button { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.pane { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; max-height: 58%; border-top: 1px solid var(--line); }
.pane.open { flex: 0 1 50%; }
.pane-head { flex: none; display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; background: transparent; color: var(--ink-2); font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; text-align: left; cursor: pointer; }
.pane-head:hover { color: var(--ink); }
.pane-head .twist { width: 16px; height: 16px; color: var(--muted); transition: transform .12s ease; }
.pane.open .pane-head .twist { transform: rotate(90deg); }
.pane-head .book { margin-left: 4px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the title bar: a tab per open book or homework, the page and the depth dial */
.bar { position: fixed; z-index: 20; top: 0; left: var(--shell-left); right: 0; height: var(--bar-h); display: flex; align-items: stretch; background: var(--chrome); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.tabs { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 240px; height: calc(var(--bar-h) - 1px); padding: 0 6px 0 12px; border-right: 1px solid var(--line); color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; }
.tab:hover { color: var(--ink-2); background: color-mix(in srgb, var(--bg) 50%, transparent); }
.tab.on { height: var(--bar-h); background: var(--bg); color: var(--ink); }
.tab.on::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); }
.tab .i { flex: none; width: 15px; height: 15px; }
.tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tab.on .tab-label { font-weight: 500; }
.tab.home { padding: 0 14px 0 12px; }
.tab.drag { opacity: .5; }
.tab-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; visibility: hidden; }
.tab:hover .tab-x, .tab.on .tab-x { visibility: visible; }
.tab-x:hover { background: var(--tint); color: var(--ink); }
.tab-x .i { width: 14px; height: 14px; stroke-width: 1.7; }
#title.clickable, .tab.on #title { cursor: pointer; }
.bar-right { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 8px; }
.pages { display: flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.pages input { width: 3.6ch; text-align: right; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; padding: 0; }
.pages input:focus { color: var(--accent); }
.pages-sep { margin: 0 4px; color: var(--muted); }
.depth { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.depth button { border: 0; background: transparent; color: var(--muted); width: 24px; height: 20px; cursor: pointer; padding: 0; font-size: 12px; }
.depth button.on { background: var(--ink); color: var(--bg); }

/* the main area: right of the sidebar, under the title bar, over the status bar */
main { margin-left: var(--shell-left); padding-top: var(--bar-h); padding-bottom: var(--bottom-h); min-height: 100vh; }

/* the status bar */
.statusbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: var(--status-h); display: flex; align-items: stretch; background: var(--chrome); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.sb-left, .sb-right { flex: none; display: flex; align-items: stretch; min-width: 0; }
.sb-left { padding-left: 4px; max-width: 46%; }
.sb-right { padding-right: 4px; }
.sb-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 300px; height: 100%; padding: 0 8px; border: 0; background: transparent; color: var(--ink-2); font: 12.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
span.sb-item { cursor: default; }
button.sb-item:hover { background: var(--tint); color: var(--ink); }
.sb-item:empty { display: none; }
.sb-item .i { flex: none; width: 13px; height: 13px; }
.sb-item.icon { width: 28px; justify-content: center; padding: 0; font-size: 13px; }
.sb-tex.busy::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; }
.sb-tex.bad { color: var(--accent-2); }

/* the command palette and quick open */
.palette-wrap { position: fixed; inset: 0; z-index: 60; }
.palette { position: absolute; top: calc(var(--bar-h) + 10px); left: 0; right: 0; width: min(620px, calc(100vw - 32px)); margin: 0 auto; overflow: hidden; background: var(--page); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); animation: rise .14s cubic-bezier(.2, .75, .2, 1) both; }
.palette input { display: block; width: 100%; height: 44px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 14px var(--sans); outline: none; }
.palette input::placeholder { color: var(--muted); }
.palette .list { max-height: min(56vh, 440px); overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.palette .row { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 12px; border-radius: 6px; color: var(--ink); font-size: 13px; cursor: pointer; }
.palette .row.sel { background: var(--tint-focus); }
.palette .row .ico { flex: none; width: 16px; height: 16px; color: var(--muted); }
.palette .row.sel .ico { color: var(--accent); }
.palette .row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette .row .label.doc { font-family: var(--serif); font-size: 15px; }
.palette .row .label b { color: var(--accent); font-weight: 600; }
.palette .row .meta { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.palette .row .keys { flex: none; display: flex; gap: 4px; }
.palette .group { padding: 8px 12px 4px; color: var(--muted); font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.palette .empty { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.palette .foot { display: flex; gap: 16px; padding: 6px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; }

/* menus: a row's actions, the course switcher */
.menu { position: fixed; z-index: 70; min-width: 200px; max-width: 320px; max-height: 70vh; overflow-y: auto; padding: 4px; background: var(--page); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); font-size: 13px; animation: rise .12s ease both; }
.menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu button:hover, .menu button.sel { background: var(--tint-focus); }
.menu button.on { color: var(--accent); }
.menu button.danger { color: var(--accent-2); }
.menu .sep { height: 1px; margin: 4px 6px; background: var(--line); }
.menu .head { padding: 6px 10px 2px; color: var(--muted); font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.menu .say { padding: 6px 10px 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }   /* a sentence or two before a confirmation */

/* the views' content, set for the sidebar's width: two lines per row, no rules between them */
#side .section { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; padding: 14px 16px 6px; font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 0; }
#side .section button, #side .section a { margin: 0; padding: 0; border: 0; background: transparent; color: var(--accent); font: 12px var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; text-decoration: none; white-space: nowrap; }
#side .section > span:first-child { flex: 1; min-width: 0; }
#side .changes .section { color: var(--accent-2); }
#side .changes, #side .facts, #side .review-line, #side .connections { margin: 0; }
#side .change-row, #side .fact, #side .review-due { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 1px; align-items: baseline; padding: 6px 16px; border-top: 0; font-size: 13px; }
#side .change-row:hover, #side .fact:hover, #side .review-due:hover { background: var(--tint); }
#side .change-row .what, #side .review-due .what { grid-column: 1 / -1; grid-row: 1; min-width: 0; font-family: var(--serif); font-size: 14px; line-height: 1.35; color: var(--ink); white-space: normal; overflow: visible; }
#side .change-row .kind, #side .review-due .kind { grid-column: 1; grid-row: 2; min-width: 0; font-size: 12px; }
#side .change-row .where, #side .review-due .where { grid-column: 2; grid-row: 2; max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; text-align: right; white-space: nowrap; }
#side .change-row .kind, #side .review-due .kind { font-size: 10.5px; }
#side .fact .kind { grid-column: 1; grid-row: 1; min-width: 0; font-size: 10.5px; }
#side .fact .when { grid-column: 2; grid-row: 1; font-size: 12px; }
#side .fact .what { grid-column: 1 / -1; grid-row: 2; font-family: var(--serif); font-size: 14px; line-height: 1.35; color: var(--ink); }
#side .fact .what .sub { margin-top: 1px; }
#side .fact .src, #side .fact .del { position: absolute; top: 4px; opacity: 0; background: var(--chrome); border-radius: 4px; padding: 1px 4px; }
#side .fact .src { right: 30px; }
#side .fact .del { right: 10px; }
#side .fact:hover .src, #side .fact:hover .del { opacity: 1; }
#side .fact .change { white-space: normal; }
#side .course-sum { padding: 12px 16px 4px; }
#side .course-sum .cs-name { font-family: var(--serif); font-size: 16px; line-height: 1.3; color: var(--ink); }
#side .course-sum .cs-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--muted); }
#side .course-sum .cs-meta button { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }

/* the search view: find in the book, and what in the library has that name */
.search-box { position: relative; padding: 8px 12px 6px; }
#side .search-box .find { display: block; width: 100%; height: 28px; padding: 0 64px 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--page); color: var(--ink); font: 13px var(--sans); outline: none; }
#side .search-box .find:focus { border-color: var(--accent); }
.search-box .find::-webkit-search-cancel-button { display: none; }
.find-count { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.find-results .hit, .search-lib .hit { display: flex; gap: 8px; align-items: baseline; padding: 4px 16px; cursor: pointer; color: var(--ink-2); }
.find-results .hit:hover, .search-lib .hit:hover { background: var(--tint); }
.find-results .hit.on { background: var(--tint-focus); }
.hit .pg { flex: none; min-width: 32px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hit .snip { min-width: 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.4; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hit mark { background: var(--tint-sym); color: var(--ink); border-radius: 2px; }
.search-lib .hit .ico { flex: none; width: 15px; height: 15px; align-self: center; color: var(--muted); }
.search-lib .hit .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.search-lib .hit .m { flex: none; font-size: 12px; color: var(--muted); }
.search-note { padding: 6px 16px; font-size: 12.5px; color: var(--muted); }

/* hosted mode before sign-in: the card alone */
html.signed-out .activity, html.signed-out .side, html.signed-out .bar, html.signed-out .statusbar { display: none !important; }
html.signed-out main { margin-left: 0; padding: 0; min-height: 0; }

/* phones: the activity bar along the bottom, the sidebar over the page */
@media (max-width: 719px) {
  :root, html.side-closed { --shell-left: 0px; --bottom-h: calc(var(--act-h) + env(safe-area-inset-bottom, 0px)); }
  .activity { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: var(--bottom-h); flex-direction: row; padding-bottom: env(safe-area-inset-bottom, 0px); border-right: 0; border-top: 1px solid var(--line); }
  .act-home { position: fixed; z-index: 31; top: 0; left: 0; width: 44px; background: var(--chrome); border-right: 0; }
  .act-views { flex: 4; flex-direction: row; justify-content: space-around; padding: 0; }
  .act-foot { flex: 1; display: flex; margin: 0; padding: 0; }
  .badge { left: calc(50% + 3px); right: auto; top: 9px; bottom: auto; }
  .activity-btn { flex: 1; width: auto; height: var(--act-h); }
  .activity-btn.on::before { left: 30%; right: 30%; top: 0; bottom: auto; width: auto; height: 2px; }
  .side { display: none; top: var(--bar-h); left: 0; bottom: var(--bottom-h); width: min(340px, 88vw); }
  html.side-overlay .side { display: flex; }
  html.side-overlay body::after { content: ''; position: fixed; z-index: 24; inset: var(--bar-h) 0 var(--bottom-h) 0; background: rgba(0, 0, 0, .18); }
  .sash { display: none; }
  .bar { left: 0; padding-left: 44px; }
  .bar-right { gap: 8px; padding: 0 8px 0 4px; }
  .tab { max-width: 170px; padding-left: 10px; }
  .tab:not(.on):not(.home) .tab-x { display: none; }
  .statusbar { top: auto; bottom: calc(var(--bottom-h) + 10px); height: auto; justify-content: center; background: transparent; border: 0; pointer-events: none; }
  .statusbar .sb-left, .statusbar .sb-right { display: none; }
  .statusbar .status { flex: 0 1 auto; max-width: calc(100vw - 32px); padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--page) 92%, transparent); box-shadow: var(--shadow); white-space: normal; text-align: center; }
}

/* ---- the explorer's sections: Recent, Courses, Loose books ------------------------------------------- */
.tree-sec + .tree-sec { margin-top: 4px; }
.sec-head { display: flex; align-items: center; gap: 4px; height: 22px; margin-top: 2px; padding: 0 8px 0 4px; color: var(--ink-2); font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; user-select: none; outline: none; }
.sec-head:hover { color: var(--ink); }
.sec-head:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.sec-head .twist { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform .12s ease; }
.tree-sec.open > .sec-head .twist { transform: rotate(90deg); }
.sec-name { flex: 1; min-width: 0; }
.sec-tools { display: flex; gap: 2px; visibility: hidden; }
.sec-head:hover .sec-tools, .sec-head:focus-within .sec-tools { visibility: visible; }
.sec-tools .tool { width: 20px; height: 20px; }
.sec-tools .tool .i { width: 14px; height: 14px; }
.tree-sec:not(.open) > .tree-list { display: none; }
.tree-list { list-style: none; margin: 0; padding: 0 0 4px; }
.tree-row .row-tools { flex: none; display: none; align-items: center; gap: 1px; margin-right: -4px; }
.tree-row:hover .row-tools, .tree-row:focus-within .row-tools { display: flex; }
.tree-row .row-tools .tool { width: 20px; height: 20px; border-radius: 4px; }
.tree-row .row-tools .tool .i { width: 14px; height: 14px; }
.tree-row .row-tools .more { visibility: visible; margin-right: 0; }
.tree-row .aux.soon { color: var(--accent-2); }
.tree-row.course-row .ico, .tree-row.course-row.project .ico { color: var(--muted); }
.tree-row.course-row { margin-top: 2px; }
.tree-row.course-row .label { font-weight: 600; color: var(--ink); }
.tree-row.group .label { color: var(--ink-2); }
.tree-row.group.sub .label { color: var(--muted); }
.tree-row.group .aux { font-size: 11.5px; }
.tree-row.assignment .label { color: var(--ink); }
.tree-row.assignment.submitted .label { color: var(--ink-2); }
.tree-hint { padding: 3px 8px 5px calc(30px + var(--d, 0) * 12px); font-size: 12px; font-style: italic; color: var(--muted); }
.tree-row .dis { color: var(--muted); font-size: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tree-row.add-row { color: var(--muted); }
.tree-row.add-row .label { font-style: italic; }
.tree-row.add-row:hover { color: var(--accent); }

/* ---- the welcome page: start, recent, what is due this week -------------------------------------------- */
#library { container-type: inline-size; }
.library .library-inner { max-width: 960px; margin: 0 auto; padding: 9vh 48px 80px; }
.signin .library-inner { max-width: 560px; margin: 14vh auto 0; padding: 0 24px 80px; }
.wordmark { font-family: var(--serif); font-weight: 400; font-size: 36px; letter-spacing: -.01em; margin: 0 0 8px; }
.tagline { color: var(--ink-2); margin: 0 0 30px; font-size: 15px; line-height: 1.5; }
.welcome-head { margin-bottom: 48px; }
.welcome-head .tagline { margin: 0; }
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: start; }
@container (max-width: 720px) { .welcome-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .welcome-col:last-child { order: -1; margin-bottom: 36px; } }   /* what is due first */
.library .section { padding: 0 0 10px; font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.welcome-col > .section:not(:first-child) { margin-top: 36px; }
.start-list, .recent-list, .due-list { list-style: none; margin: 0; padding: 0; }
.start-list li { margin: 0; }
.start-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 0; border: 0; background: transparent; color: var(--accent); font: 14px var(--sans); text-align: left; cursor: pointer; }
.start-link .i { flex: none; width: 18px; height: 18px; color: var(--accent); stroke-width: 1.4; }
.start-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.start-link.over, #drop.over { color: var(--ink); }
.library:has(#drop.over) .welcome { outline: 2px dashed var(--accent); outline-offset: 16px; border-radius: 8px; }
.recent-list li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; cursor: pointer; min-width: 0; }
.recent-list li .ico { flex: none; width: 15px; height: 15px; align-self: center; color: var(--muted); }
.recent-list .doc-title { flex: 0 1 auto; min-width: min(60%, 12ch); max-width: 70%; font-family: var(--serif); font-size: 15px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-list li:hover .doc-title { text-decoration: underline; text-underline-offset: 3px; }
.recent-list .doc-meta { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-list li { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; padding: 5px 0; cursor: pointer; align-items: baseline; }
.due-list li .when { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.due-list li.soon .when { color: var(--accent-2); }
.due-list li .what { font-family: var(--serif); font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-list li .where { grid-column: 2; font-size: 12px; color: var(--muted); }   /* wraps: both dates when the sources disagree stay in sight */
.due-list li .where:empty { display: none; }
.due-list li:hover .what { color: var(--accent); }
.key-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; font-size: 13px; color: var(--ink-2); align-items: baseline; }
.key-list dt { margin: 0; }
.key-list dd { margin: 0; }
@media (pointer: coarse) { .welcome-col > .section:has(+ .key-list), .key-list { display: none; } }   /* no keys on a phone */
.quiet { color: var(--muted); font-size: 13px; line-height: 1.5; }
li.quiet { cursor: default; padding: 5px 0; display: block; }
.quiet .linklike { font-size: inherit; }

/* ---- a course's or a project's home: its head, next up, books and notes ------------------------------- */
.library.course .welcome { display: none; }
.library:not(.course) .course-home { display: none; }
.library.course .library-inner { padding-top: 40px; }
.course-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; }
.course-head .course-name { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: -.01em; }
.course-head .ws-ico { flex: none; width: 24px; height: 24px; color: var(--muted); stroke-width: 1.3; }
.course-head .grade { font-size: 12px; color: var(--muted); white-space: nowrap; }
.course-head .course-acts { flex-basis: 100%; display: flex; gap: 16px; padding-left: 36px; font-size: 13px; }
.course-head .course-acts .linklike { text-decoration: none; }
.course-head .course-acts .linklike:hover { text-decoration: underline; }
.next-up { margin: 32px 0 8px; }
.next-up .more { margin: 8px 0 0; font-size: 12px; }
.next-card { padding: 12px 16px; margin: 0 0 8px; background: var(--page); border: 1px solid var(--line); border-radius: 8px; }
.next-card.soon { border-left: 2px solid var(--accent-2); }
.nc-head { display: flex; align-items: baseline; gap: 10px; }
.nc-head .ico { flex: none; width: 16px; height: 16px; align-self: center; color: var(--muted); }
.nc-title { flex: 1; min-width: 0; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.nc-due { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.next-card.soon .nc-due { color: var(--accent-2); }
.nc-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0 26px; font-size: 12.5px; }
.nc-file, .nc-solve { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; cursor: pointer; }
.nc-file .i, .nc-solve .i { width: 14px; height: 14px; color: var(--muted); }
.nc-file em { font-style: normal; color: var(--muted); }
.nc-file:hover span { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.nc-solve { color: var(--accent); }
.nc-solve .i { color: var(--accent); }
.nc-solve:hover span { text-decoration: underline; text-underline-offset: 2px; }
.nc-canvas { color: var(--muted); text-decoration: none; }
.nc-canvas:hover { color: var(--accent); }
.course-home .cols { margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
.course-home .cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
@container (max-width: 720px) { .course-home .cols.three { grid-template-columns: minmax(0, 1fr); } }
/* three narrow columns: a title wraps rather than ending in "…", and what is known of it goes under it */
.course-home .cols.three li { flex-wrap: wrap; row-gap: 2px; }
.course-home .cols.three .doc-title { white-space: normal; }
.course-home .cols.three .doc-meta { order: 3; flex-basis: 100%; }
.course-home .cols .section { padding: 0 0 8px; }
.course-home .doc-meta.bad { color: var(--accent-2); }

/* ---- Settings, a tab of the main area: the sections at the left, their rows on the right ------------------- */
.settings-page { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: 0 48px; justify-content: center; padding: 32px 40px 120px; }
.set-nav { position: sticky; top: calc(var(--bar-h) + 32px); align-self: start; display: flex; flex-direction: column; gap: 1px; }
.set-title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding-left: 10px; font-family: var(--serif); font-size: 22px; color: var(--ink); }
.set-title .gear { width: 22px; height: 22px; color: var(--muted); stroke-width: 1.3; }
.set-nav a { display: block; padding: 5px 10px; border-radius: 6px; color: var(--ink-2); font-size: 13px; text-decoration: none; }
.set-nav a:hover { background: var(--tint); color: var(--ink); }
.set-nav a.on { background: var(--tint-focus); color: var(--ink); }
.set-body { min-width: 0; }
.set-sec { padding: 8px 0 32px; border-bottom: 1px solid var(--line); }
.set-sec + .set-sec { padding-top: 32px; }
.set-sec:last-child { border-bottom: 0; }
.set-sec h2 { margin: 0 0 16px; font: 600 15px var(--sans); color: var(--ink); }
.set-intro { margin: -8px 0 16px; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 600px; }
.set-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 24px; align-items: start; padding: 10px 0; }
.set-label { font-size: 13px; color: var(--ink); }
.set-label small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted); }
#settings .profile { display: block; }
#settings .profile input { width: 100%; padding: 4px 0; font-size: 15px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button { min-width: 52px; height: 28px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: var(--page); color: var(--ink-2); font: 12.5px var(--sans); cursor: pointer; font-variant-numeric: tabular-nums; }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); color: var(--bg); }
.prefetch-row { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.prefetch-row label { cursor: pointer; }
.prefetch-row input { vertical-align: -1px; margin-right: 6px; }
#settings .engine { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
#settings .engine select { margin: 8px 8px 0 0; height: 28px; padding: 0 6px; font-size: 12.5px; }
#settings .engine .spend { margin-top: 8px; color: var(--muted); }
#settings .engine details.cheap { margin-top: 12px; }
#settings .engine .cheap-form { grid-template-columns: 1fr 1fr; max-width: 600px; }
#settings .engine .cheap-form input:not([type=checkbox]), #settings .engine .cheap-form select { height: 28px; }
#settings .engine > button { margin-top: 10px; }
#settings .account { margin: 0; padding: 0; border: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
#settings .account input { max-width: 420px; display: block; }
#settings .connections { margin: 0; }
#settings .conn-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
#settings .conn-row:first-child { border-top: 0; padding-top: 4px; }
#settings .conn-row .name { min-width: 0; font: 13px var(--sans); color: var(--ink); }
#settings .conn-row .state { grid-column: 2; min-width: 0; font-size: 12.5px; line-height: 1.5; }
#settings .conn-row .act { grid-column: 2; flex-basis: auto; font-size: 13px; }
#settings .conn-row form { max-width: 560px; }
#settings .conn-row.gradescope .gs-paste { display: contents; } #settings .conn-row.gradescope .gs-page { font: 12.5px var(--sans); width: min(100%, 360px); vertical-align: middle; } #settings .conn-row .gs-mail { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
#settings .conn-row input:not([type=checkbox]), #settings .conn-row select { height: 28px; padding: 0 8px; font-size: 12.5px; }
#settings .connections .caldav-form { display: flex; flex-wrap: wrap; gap: 6px; max-width: 560px; margin: 0 0 12px 244px; font-size: 12.5px; color: var(--muted); }
#settings .prefs .conn-row:first-child { padding-top: 4px; }
#settings .set-keys .help-cols { font-size: 13px; }
#settings .set-keys dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; align-content: start; }
#settings .set-keys dt { color: var(--ink); } #settings .set-keys dd { margin: 0; color: var(--ink-2); }
#settings .set-keys dt.group, #settings .set-keys dd.group { margin-top: 12px; font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@container (max-width: 1px) { }
@media (max-width: 1000px) { .settings-page { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 120px; } .set-nav { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 16px; } .set-title { flex-basis: 100%; } .set-row, #settings .conn-row { grid-template-columns: minmax(0, 1fr); } #settings .conn-row .state, #settings .conn-row .act { grid-column: 1; } #settings .connections .caldav-form { margin-left: 0; } }
.activity-btn.act-settings:hover, .activity-btn.act-settings.on { color: var(--accent); }
.act-settings .gear { width: 22px; height: 22px; stroke-width: 1.35; }
.tab .gear { stroke-width: 1.4; }

/* ---- the calendar: a tab of the main area, and the agenda in the sidebar's Calendar view ------------------- */
.calendar-page { padding: 24px 32px 80px; }
.cal-host { max-width: 1200px; margin: 0 auto; }
.cal-wait { margin: 12vh auto 0; max-width: 420px; text-align: center; }
.cal-open { padding: 8px 12px 4px; }
.cal-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--page); color: var(--ink); font: 12.5px var(--sans); cursor: pointer; }
.cal-btn:hover { border-color: var(--accent); color: var(--accent); }
.cal-btn .i { width: 15px; height: 15px; }
.agenda:empty { display: none; }

.doclist { list-style: none; padding: 0; margin: 0; }
.doclist li { display: flex; align-items: baseline; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.doclist li:hover .doc-title { color: var(--accent); }
.doc-title { font-family: var(--serif); font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.doc-del { color: var(--muted); border: 0; background: transparent; cursor: pointer; opacity: 0; padding: 0 4px; }
.doclist li:hover .doc-del { opacity: 1; }
.doc-del:hover { color: var(--accent-2); }
.drop { display: block; border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 10px; padding: 28px 24px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--tint-focus); color: var(--ink); }

/* ---- reader --------------------------------------------------------------- */
.spread { width: calc(var(--page-w) + var(--gutter) + var(--margin-w)); margin: 0 auto; padding: 16px 0 45vh; }
/* the margin's width and the gutter follow the room the reader has: state.js readerLayout */
.spread { max-width: 100%; }
.page-wrap { position: relative; width: var(--page-w); margin-bottom: 16px; }
.page { position: relative; width: var(--page-w); background: var(--page); box-shadow: var(--shadow); border-radius: 2px; }
.slice { position: relative; width: 100%; overflow: hidden; }
.slice canvas { display: block; }
:root[data-theme="dark"] .slice { filter: invert(.9) hue-rotate(180deg) contrast(.92); }
.overlay { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.overlay rect.hover { fill: var(--tint); }
.overlay rect.focus { fill: var(--tint-focus); }
.overlay rect.sym { fill: var(--tint-sym); }
.overlay rect.find { fill: var(--tint-sym); }
.overlay line.rule { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }

/* ---- unfold --------------------------------------------------------------- */
.unfold { position: relative; height: 0; overflow: hidden; background: var(--page); transition: height .36s cubic-bezier(.2, .75, .2, 1); }
.unfold-inner { position: relative; padding: 14px 0 20px; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink); }
.unfold-inner::before { content: ""; position: absolute; left: calc(var(--col-x0) - 16px); top: 12px; bottom: 16px; width: 2px; background: var(--accent); border-radius: 2px; }
.layer { position: relative; padding-left: var(--col-x0); padding-right: calc(var(--page-w) - var(--col-x1)); }
.layer + .layer { margin-top: 14px; padding-top: 14px; }
.layer + .layer::before { content: ""; position: absolute; left: var(--col-x0); right: calc(var(--page-w) - var(--col-x1)); top: 0; border-top: 1px dashed var(--line); }
.layer p { margin: 0 0 .7em; }
.layer p:last-child { margin-bottom: 0; }
.layer ul, .layer ol { margin: 0 0 .7em; padding-left: 1.3em; }
.layer code { font-size: .9em; }
.layer .katex-display { margin: .6em 0; overflow-x: auto; overflow-y: hidden; }
.layer .katex { font-size: 1.02em; }
.layer .err { color: var(--muted); font-style: italic; }
.layer.waiting { min-height: 1.5em; }
.layer.waiting::after {
  content: ""; position: absolute; left: var(--col-x0); right: calc(var(--page-w) - var(--col-x1)); top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat;
  animation: sweep 1.3s ease-in-out infinite; opacity: .7;
}
@keyframes sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.layer.streaming > :last-child::after { content: ""; display: inline-block; width: .45em; height: .95em; vertical-align: -.12em; margin-left: 3px; background: var(--accent); opacity: .55; border-radius: 1px; }
.layer-viz iframe { display: block; width: 100%; height: 360px; border: 0; background: transparent; border-radius: 6px; }

/* ---- margin --------------------------------------------------------------- */
.margin { position: absolute; left: calc(var(--page-w) + var(--gutter)); top: 0; width: var(--margin-w); height: 100%; }
.margin-hit { position: absolute; inset: 0; cursor: text; }
.margin > * { font-family: var(--serif); }
.mark { position: absolute; left: 0; max-width: 100%; display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; transform: translateY(-50%); transition: color .15s; }
.mark:hover { color: var(--accent-2); }
.mark svg { width: 15px; height: 15px; flex: none; }
.mark .why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; font-size: 13px; }
.ltag { position: absolute; left: 0; font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); user-select: none; }
.deflabel { position: absolute; left: 0; max-width: 100%; font-size: 12.5px; color: var(--muted); font-style: italic; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deflabel:hover { color: var(--accent); }
.note { position: absolute; left: 0; width: 100%; font-size: 13.5px; line-height: 1.45; padding-left: 10px; }
.note::before { content: ""; position: absolute; left: 0; top: .35em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-2); }
.note .q { font-style: italic; color: var(--ink); white-space: pre-wrap; }
.note .a { color: var(--ink-2); margin-top: 5px; }
.note .a p { margin: 0 0 .5em; }
.note .a p:last-child { margin-bottom: 0; }
.note .a .katex { font-size: 1em; }
.note .a.waiting { height: 1em; position: relative; }
.note .a.waiting::after { content: ""; position: absolute; left: 0; right: 30%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: sweep 1.3s ease-in-out infinite; opacity: .7; }
.note textarea { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--accent-2); background: transparent; color: var(--ink); font: italic 13.5px/1.45 var(--serif); resize: none; outline: none; padding: 1px 0 3px; overflow: hidden; }
.note textarea::placeholder { color: var(--muted); }
.note .del { position: absolute; right: 0; top: -2px; border: 0; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; font-size: 14px; padding: 0 2px; }
.note:hover .del { opacity: 1; }
.note .del:hover { color: var(--accent-2); }

/* ---- status, setup, help ---------------------------------------------------- */
.status { flex: 1; min-width: 0; align-self: center; padding: 0 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-size: 12.5px; color: var(--ink-2); opacity: 0; transition: opacity .5s; pointer-events: none; }
.status.show { opacity: 1; }
.setup { position: fixed; left: calc(50% + var(--shell-left) / 2); bottom: calc(var(--bottom-h) + 16px); transform: translateX(-50%); z-index: 35; }
.setup-inner { background: var(--page); color: var(--ink-2); box-shadow: var(--shadow); border-radius: 12px; padding: 14px 18px; font-size: 13px; width: 440px; max-width: calc(100vw - 32px); }
.setup-inner p { margin: 0 0 10px; line-height: 1.45; }
.setup-foot { color: var(--muted); font-size: 12px; margin: 10px 0 0 !important; }
.setup form { display: flex; gap: 8px; }
.setup input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--bg); color: var(--ink); font: 13px var(--sans); outline: none; }
.setup input:focus { border-color: var(--accent); }
.setup button { border: 0; border-radius: 8px; padding: 7px 14px; background: var(--ink); color: var(--bg); cursor: pointer; }
.help { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.help-inner { background: var(--page); box-shadow: var(--shadow); border-radius: 14px; padding: 24px 28px; width: 840px; max-width: calc(100vw - 32px); font-size: 13px; }
.help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
@media (max-width: 760px) { .help-cols { grid-template-columns: 1fr; } }
.help dt.group, .help dd.group { margin-top: 12px; font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.help dt.group:first-child { margin-top: 0; }
.help-title { font-family: var(--serif); font-size: 20px; margin-bottom: 14px; }
.help dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; align-content: start; }
.help dt { color: var(--ink); font-variant-numeric: tabular-nums; }
.help dd { margin: 0; color: var(--ink-2); }
.help-foot { margin-top: 16px; color: var(--muted); font-style: italic; font-family: var(--serif); font-size: 14px; }

::selection { background: var(--tint-focus); }

/* ---- find, outline, profile ------------------------------------------------- */
.find { font: 13px var(--sans); }
.outline { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 10px; font-size: 13px; }
.outline div { display: flex; gap: 8px; align-items: baseline; padding: 3px 12px 3px 28px; color: var(--ink-2); cursor: pointer; }
.outline div:hover { background: var(--tint); color: var(--ink); }
.outline div span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline div span:last-child { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.outline .d0 { color: var(--ink); }
.outline .d1 { padding-left: 40px; } .outline .d2 { padding-left: 52px; } .outline .d3 { padding-left: 64px; }
.outline .empty { color: var(--muted); font-style: italic; cursor: default; }
.profile { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--muted); }
.profile input { flex: 1; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: italic 14px var(--serif); outline: none; padding: 2px 0; }
.profile input:focus { border-bottom-color: var(--accent); }
.engine { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.engine button { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 0; font: inherit; }
.setup-foot code { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
.outline .section { padding: 12px 12px 4px 28px; font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: default; }
.outline .section:hover { background: transparent; color: var(--muted); }
.outline .note-row span:first-child { font-family: var(--serif); font-style: italic; font-size: 13.5px; }
.outline .act-row span:first-child { font-family: var(--sans); font-style: normal; font-size: 13px; color: var(--accent); }
.layer-film video { display: block; width: 100%; border-radius: 6px; background: #000; }
.peek { position: absolute; left: 0; width: 100%; background: var(--page); box-shadow: var(--shadow); border-radius: 8px; padding: 8px 8px 6px; cursor: pointer; z-index: 3; transition: width .18s ease, transform .18s ease; }
.peek canvas { display: block; width: 100%; height: auto; }
:root[data-theme="dark"] .peek canvas { filter: invert(.9) hue-rotate(180deg) contrast(.92); }
.peek .cap { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.peek:hover .cap { color: var(--accent); }
.note.quiz::before { background: var(--accent); }
.note.quiz .q::before { content: "Q · "; font-style: normal; color: var(--accent); font-family: var(--sans); font-size: 11px; letter-spacing: .06em; }
.note .reveal { font-family: var(--sans); font-size: 11px; color: var(--accent); cursor: pointer; margin-top: 3px; letter-spacing: .04em; text-transform: uppercase; }
.deflabel.symlabel { color: var(--accent-2); }
.engine select { margin: 0 8px 0 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 12px var(--sans); padding: 2px 4px; }
.engine .spend { margin-top: 4px; }
.note .verdict { margin-top: 4px; font-family: var(--sans); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.note .verdict span { cursor: pointer; margin-right: 12px; }
.note .verdict span:hover { color: var(--accent); }
.note[data-result="got"] .verdict span[data-r="got"] { color: var(--accent); }
.note[data-result="missed"] .verdict span[data-r="missed"] { color: var(--accent-2); }
.note[data-result="missed"]::before { background: var(--accent-2); }
.note[data-result="got"]::before { background: var(--muted); opacity: .6; }
.engine .cheap-line { margin-top: 6px; }
.engine details.cheap { margin-top: 4px; }
.engine details.cheap summary { cursor: pointer; color: var(--accent); }
.engine .cheap-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 8px; align-items: center; }
.engine .cheap-form input:not([type=checkbox]), .engine .cheap-form select { width: 100%; box-sizing: border-box; margin: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 12px var(--sans); padding: 4px 6px; }
.engine .cheap-form label { cursor: pointer; }
.engine .cheap-form label input { vertical-align: -1px; margin-right: 4px; }
.engine .cheap-form .note { grid-column: 1 / -1; color: var(--muted); }
.engine .prefetch { display: block; margin-top: 6px; cursor: pointer; }
.engine .prefetch input { vertical-align: -1px; margin-right: 4px; }

/* ---- hosted mode ------------------------------------------------------------- */
.signin-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.signin-form input { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--page); color: var(--ink); font: 14px var(--sans); outline: none; }
.signin-form input:focus { border-color: var(--accent); }
.signin-buttons { display: flex; gap: 8px; }
.signin-buttons button { border: 0; border-radius: 8px; padding: 8px 14px; background: var(--ink); color: var(--bg); cursor: pointer; }
.signin-buttons button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.signin-msg { color: var(--accent-2); font-size: 13px; min-height: 1.2em; margin: 0; }
.account { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.account input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 12.5px var(--sans); outline: none; padding: 3px 0; margin-top: 4px; }
.account button { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 0; font: inherit; margin-right: 10px; }
.account table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.account td { padding: 2px 0; border-top: 1px solid var(--line); }
.account td input { width: 70px; border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; margin: 0; font-size: 12px; }
.sample-line { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.linklike { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.doclist .course { padding: 14px 4px 4px; border-top: 0; cursor: default; font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.doclist .course:hover .doc-title { color: inherit; }
.doclist .doc-sub { color: var(--muted); font-family: var(--sans); font-size: 12px; margin-right: 8px; }

/* ---- writer ------------------------------------------------------------------ */
.writer { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); height: calc(100vh - var(--bar-h) - var(--bottom-h)); }
.writer-src { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; }
.writer-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 18px 6px; }
.writer-head input { flex: 1; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--ink); font: 500 15px var(--sans); outline: none; padding: 2px 0; }
.writer-head input:focus { border-bottom-color: var(--accent); }
.writer-course { color: var(--muted); font-size: 12px; white-space: nowrap; }
#src { flex: 1; border: 0; resize: none; outline: none; padding: 10px 18px 24px; background: transparent; color: var(--ink); font: 14px/1.55 ui-monospace, "SF Mono", Menlo, monospace; tab-size: 2; }
#src::placeholder { color: var(--muted); }
.writer-preview { overflow-y: auto; padding: 22px 28px 60px; }
.preview { max-width: 720px; margin: 0 auto; background: var(--page); box-shadow: var(--shadow); border-radius: 2px; padding: 48px 56px; font-family: var(--serif); font-size: 16px; line-height: 1.55; min-height: calc(100vh - 150px); }
.preview .block { position: relative; padding: 2px 12px; margin: 0 -12px; border-radius: 4px; }
.preview .block.hover { background: var(--tint); }
.preview .block.empty { color: var(--muted); font-style: italic; }
.preview .block p { margin: 0 0 .7em; }
.preview .block h1, .preview .block h2, .preview .block h3 { font-weight: 500; margin: .4em 0 .4em; }
.preview .block .katex-display { margin: .4em 0; overflow-x: auto; }
.preview .check { position: relative; margin: 4px -12px 14px; padding: 10px 14px 10px 18px; border-left: 2px solid var(--accent); background: var(--bg); border-radius: 0 6px 6px 0; font-size: 15px; min-height: 1.6em; }
.preview .check.question { border-left-color: var(--accent-2); }
.preview .check .q { font-style: italic; margin-bottom: 4px; }
.preview .check .a p:last-child, .preview .check p:last-child { margin-bottom: 0; }
.preview .check textarea { width: 100%; border: 0; border-bottom: 1px solid var(--accent-2); background: transparent; color: var(--ink); font: italic 15px/1.45 var(--serif); resize: none; outline: none; overflow: hidden; }
.preview .check.waiting::after { content: ""; position: absolute; left: 18px; right: 14px; top: 50%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; animation: sweep 1.3s ease-in-out infinite; opacity: .7; }
.doclist .note-row-icon { color: var(--muted); font-family: var(--sans); font-size: 12px; margin-right: 8px; }
.doclist .course .mini { float: right; font-family: var(--sans); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; }
@media (max-width: 900px) { .writer { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; } .writer-src { border-right: 0; border-bottom: 1px solid var(--line); } }
.preview .block .block-tools { position: absolute; right: 8px; top: 2px; display: none; gap: 6px; font-family: var(--sans); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.preview .block.hover .block-tools { display: flex; }
.preview .block-tools button { border: 0; background: var(--page); color: var(--accent); cursor: pointer; padding: 1px 6px; border-radius: 4px; font: inherit; box-shadow: var(--shadow); }
.preview .block-tools button:hover { color: var(--bg); background: var(--accent); }
/* the block the caret is in; citations of the course and their peeks; the @ picker */
.preview .block.caret { background: var(--tint); }
.preview a.ref { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: help; }
.preview a.ref:hover { color: var(--accent); border-bottom-style: solid; }
.refpeek { position: fixed; z-index: 7; max-width: 400px; background: var(--page); box-shadow: var(--shadow); border-radius: 8px; padding: 9px 12px 10px; font-family: var(--serif); font-size: 14px; line-height: 1.45; color: var(--ink); pointer-events: none; animation: rise .18s cubic-bezier(.2, .75, .2, 1) both; }
.refpeek .cap { font-family: var(--sans); font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.refpeek p { margin: 0; }
.refpick { position: fixed; z-index: 7; min-width: 280px; max-width: 440px; max-height: 280px; overflow-y: auto; background: var(--page); box-shadow: var(--shadow); border-radius: 8px; padding: 4px; font-family: var(--sans); font-size: 12.5px; animation: rise .16s cubic-bezier(.2, .75, .2, 1) both; }
.refpick .row { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: 5px; cursor: pointer; }
.refpick .row.sel { background: var(--tint-focus); }
.refpick .kind { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 62px; }
.refpick .term { flex: 1; min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refpick .where { color: var(--muted); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.refpick .note { padding: 5px 8px; color: var(--muted); font-style: italic; }
@media print { .refpick, .refpeek { display: none !important; } .preview a.ref { border-bottom: 0; } }

/* ---- motion: one curve, short, always at the point of attention ------------------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes riseLeft { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.page.fresh canvas { animation: fadeIn .28s ease both; }
.layer { animation: fadeIn .3s ease both; }
.unfold.closing .unfold-inner { opacity: 0; transition: opacity .18s ease; }
.peek { animation: rise .2s cubic-bezier(.2, .75, .2, 1) both; }
.mark, .deflabel, .ltag { animation: riseLeft .24s ease both; }
.note { animation: rise .26s ease both; }
.layer-viz iframe, .layer-film video { animation: fadeIn .4s ease both; }
.preview .check { animation: rise .22s ease both; }
.outline, .help-inner { animation: rise .2s cubic-bezier(.2, .75, .2, 1) both; }
.doclist li { animation: fadeIn .25s ease both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Canvas --------------------------------------------------------------------- */
.canvas { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.canvas form { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.canvas input, .canvas select { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 12px var(--sans); padding: 3px 6px; }
.canvas input { flex: 1; min-width: 140px; }
.canvas button { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 0; font: inherit; margin-right: 8px; }
.canvas label.notify { display: block; margin-top: 8px; cursor: pointer; }
.canvas label.notify input { vertical-align: -1px; margin-right: 4px; }
.writer-head .linklike { text-decoration: none; font-size: 12px; color: var(--muted); }
.writer-head .linklike:hover { color: var(--accent); }
@media print {
  body { background: #fff; }
  .bar, .activity, .side, .statusbar, .palette-wrap, .menu, .writer-src, .status, .setup, .help, .outline, #library, #reader, #signin, .block-tools, .preview .check { display: none !important; }
  main { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  .writer { display: block; height: auto; }
  .writer-preview { overflow: visible; padding: 0; }
  .preview { box-shadow: none; max-width: none; padding: 0; min-height: 0; }
  .preview .block { padding: 0; margin: 0; }
}
.layer a.pageref, .note a.pageref, .preview a.pageref { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.layer a.pageref:hover, .note a.pageref:hover { border-bottom-style: solid; }

/* ---- what changed ------------------------------------------------------------------ */
.changes { margin: 22px 0 6px; animation: fadeIn .25s ease-out; }
.changes.closing { opacity: 0; transition: opacity .18s ease-out; }
.changes .section { font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); padding: 0 4px 6px; display: flex; justify-content: space-between; }
.changes .section button { border: 0; background: transparent; color: var(--accent); cursor: pointer; font: inherit; letter-spacing: 0; text-transform: none; padding: 0; margin-left: 14px; }
.change-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 4px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 15px; }
.change-row .kind { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 92px; }
.change-row.assignment_due_changed .kind, .change-row.notice .kind, .change-row.fact_changed .kind { color: var(--accent-2); }
.change-row .what { flex: 1; min-width: 0; }
.change-row .what a { color: inherit; text-decoration: none; }
.change-row .what a:hover { color: var(--accent); }
.change-row .where { font-family: var(--sans); font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- course facts ----------------------------------------------------------------- */
.facts { margin: 22px 0 6px; }
.facts .section { font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 4px 6px; }
.fact { display: flex; align-items: baseline; gap: 12px; padding: 7px 4px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 15px; }
.fact .kind { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 92px; }
.fact.exam .kind, .fact.deadline_change .kind, .fact.location_change .kind { color: var(--accent-2); }
.fact .what { flex: 1; min-width: 0; }
.fact .what .sub { display: block; font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact .when { flex: 0 0 auto; font-family: var(--sans); font-size: 12px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fact .what .head { display: inline; }
.fact .what .change { margin-top: 2px; }
.fact .src { font-family: var(--sans); font-size: 11px; color: var(--muted); border: 0; background: transparent; cursor: help; padding: 0; }
.fact .del { border: 0; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; padding: 0 4px; }
.fact:hover .del { opacity: 1; }
.fact .change { font-family: var(--sans); font-size: 11px; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); border: 0; border-radius: 999px; padding: 1px 8px; cursor: pointer; vertical-align: 1px; white-space: nowrap; }
.fact .change:hover { background: color-mix(in srgb, var(--accent-2) 18%, transparent); }
.fact.new .kind::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }

/* films are drawn on the light page; in the dark theme they get the same treatment as the page canvas */
:root[data-theme="dark"] .layer-film video { filter: invert(.9) hue-rotate(180deg) contrast(.92); }

/* pictures and films want room: they follow the column when it is wide, and never go under three quarters of the page */
.layer-viz, .layer-film { padding-left: min(var(--col-x0), 12%); padding-right: min(calc(var(--page-w) - var(--col-x1)), 12%); }

/* the storyline of a film while it renders */
.film-plan { margin: 0; padding: 0 0 0 1.3em; font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.film-plan li { animation: rise .4s ease both; padding: 2px 0; }
.film-plan li:first-child { font-family: var(--serif); font-size: 16px; color: var(--ink); list-style: none; margin-left: -1.3em; padding-bottom: 6px; }

/* a finished layer's tag is also its "again" button */
.ltag.done { cursor: pointer; }
.ltag.done:hover { color: var(--accent); }

/* ---- review: the due quiz questions, in the contents and on the library page ------- */
.outline .review span:first-child { color: var(--accent); font-style: normal; }
.note.quiz.reviewing::before { background: var(--accent); box-shadow: 0 0 0 4px var(--tint-focus); }
.note.quiz.reviewing .q { color: var(--accent); }
.review-line { margin: 22px 0 6px; }
.review-due { display: flex; align-items: baseline; gap: 12px; padding: 7px 4px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 15px; cursor: pointer; }
.review-due .kind { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); min-width: 92px; }
.review-due .what { flex: 1; min-width: 0; }
.review-due:hover .what { color: var(--accent); }
.review-due .where { font-family: var(--sans); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }

/* the settings card scrolls when it is taller than the window */
.help-inner { max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; }

/* ---- narrow screens: the page fits the screen and the margin lies over its right edge ------- */
html.narrow .spread { width: var(--page-w); padding-top: 8px; }
html.narrow .margin { left: auto; right: 0; width: 54%; pointer-events: none; }
html.narrow .margin > * { pointer-events: auto; }
html.narrow .note, html.narrow .peek, html.narrow .deflabel { background: var(--page); box-shadow: var(--shadow); border-radius: 6px; padding: 6px 8px; }
html.narrow .mark { background: color-mix(in srgb, var(--page) 85%, transparent); border-radius: 6px; padding: 2px 6px; }
html.narrow .ltag { background: color-mix(in srgb, var(--page) 85%, transparent); padding: 1px 5px; border-radius: 4px; }

/* on a narrow screen a pencil mark is just the pencil, at the right edge; its reason shows when tapped (the unfold) */
html.narrow .mark { left: auto; right: 4px; max-width: none; }
html.narrow .mark .why { display: none; }

/* the digest row under the Canvas connection */
.canvas .digest { margin-top: 10px; }
.canvas .digest form { margin-top: 6px; align-items: center; }
.canvas .digest label { white-space: nowrap; cursor: pointer; }
.canvas .digest label input { vertical-align: -1px; margin-right: 4px; }

/* the course's grade at the right of its header in the library, and the reading plan under the facts */
.doclist .course .grade { float: right; margin-right: 16px; font-family: var(--sans); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.fact .what a { color: var(--accent); text-decoration: none; }
.fact .what a:hover { text-decoration: underline; }
.change-row.assignment_removed .kind, .change-row.fact_removed .kind { color: var(--accent-2); }
.change-row.grade_changed .kind { color: var(--accent); }

/* the plans under the account line: one quiet button per plan, or the running plan and "manage" */
.account .plans { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.account .plans button.quiet { margin: 0; }
.account .plans button.quiet:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- the library around courses ------------------------------------------------------- */
.connections .section, .cols .section { font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 4px 6px; }

.course-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 2vh 0 6px; }
.course-head .course-name { font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: -.01em; margin: 0; flex: 1; min-width: 0; }
.course-head .grade { font-family: var(--sans); font-size: 12px; color: var(--muted); white-space: nowrap; }
.course-head .course-acts { display: flex; gap: 14px; font-size: 13px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 14px; }
.cols .doclist { margin-top: 0; }
.cols .doclist li.empty { color: var(--muted); font-family: var(--sans); font-size: 12.5px; cursor: default; line-height: 1.45; }
.cols .doclist li.empty:hover .doc-title { color: inherit; }
@media (max-width: 720px) { .cols { grid-template-columns: 1fr; } }

.connections { margin: 30px 0 6px; }
.conn-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.conn-row .name { font-family: var(--serif); font-size: 16px; min-width: 150px; }
.conn-row .state { font-family: var(--sans); font-size: 12.5px; color: var(--muted); flex: 1; min-width: 200px; line-height: 1.45; }
.conn-row .act { font-family: var(--sans); font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.conn-row .act:empty { display: none; }
.conn-row form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; }
.conn-row input:not([type=checkbox]), .conn-row select { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 12px var(--sans); padding: 3px 6px; }
.conn-row input:not([type=checkbox]) { flex: 1; min-width: 140px; }
.conn-row button, .conn-row a[role=button] { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: none; }
.conn-row label { cursor: pointer; color: var(--ink-2); }
/* the accounts (accounts.js): the head on one line ("Google · ada@gmail.com · Calendar ✓ Mail ✓ · Disconnect"), a line per use */
.acct-row .acct-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.acct-row .acct-head:empty { display: none; }
.acct-row .acct-dot { color: var(--muted); }
.acct-row .acct-who, .acct-row .acct-chips { font: 12.5px var(--sans); color: var(--ink-2); }
.acct-row .acct-body { flex-direction: column; align-items: stretch; gap: 6px; }
.acct-row .acct-use { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 12px; align-items: baseline; padding: 2px 0 6px; }
.acct-row .acct-use-name { color: var(--ink); }
.acct-row .acct-use-what { color: var(--muted); line-height: 1.45; }
.acct-row .acct-use > button { grid-column: 2; justify-self: start; }
.acct-row .acct-msg:empty { display: none; }
.acct-row .acct-msg { margin: 0; color: var(--ink-2); }
.acct-row .acct-msg[data-kind="err"], .acct-row .acct-err { color: var(--accent-2); margin: 0; }
.acct-row .acct-msg .acct-again { margin-left: 4px; text-decoration: underline; }
.acct-row .acct-note { margin: 0; color: var(--muted); }
.acct-row .acct-setup { color: var(--accent); }
.acct-row .acct-mail { margin: 4px 0 0 96px; }
.acct-row .acct-mail .cx-row { border-top: 0; padding-top: 0; }
.acct-row .acct-mail .cx-head, .acct-row .acct-mail .cx-desc, .acct-row .acct-mail .cx-off { display: none; }
.acct-send { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-basis: 100%; color: var(--muted); }
@media (max-width: 600px) { .acct-row .acct-mail { margin-left: 0; } }
.conn-row label input { vertical-align: -1px; margin-right: 4px; }
.conn-row .digest { width: 100%; }
.conn-row .digest .cap { color: var(--muted); }
.conn-row .caldav-form, .connections .caldav-form { width: 100%; }
#title { cursor: pointer; }

/* ---- LaTeX homework: the editor and the compiled pages --------------------------------------- */
.tex-editor { flex: 1; min-height: 0; overflow: hidden; }
.tex-editor .cm-editor { height: 100%; background: transparent; }
.tex-editor .cm-editor.cm-focused { outline: none; }
.tex-editor .cm-scroller { overflow: auto; font: 13.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: 6px 0 40px; }
.tex-editor .cm-gutters { background: transparent; border-right: 1px solid var(--line); color: var(--muted); }
.tex-editor .cm-activeLineGutter { background: var(--tint-focus); }
.tex-editor .cm-activeLine { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tex-editor .cm-content { caret-color: var(--accent); color: var(--ink); }
.tex-editor .cm-cursor { border-left-color: var(--accent); }
.tex-editor .cm-selectionBackground, .tex-editor .cm-editor ::selection { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; }
.tex-editor .cm-matchingBracket { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 2px; }
.tex-editor .cm-tooltip { background: var(--page); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 8px; color: var(--ink); font: 12.5px var(--sans); }
.tex-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li { padding: 3px 8px; }
.tex-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] { background: var(--tint-focus); color: var(--accent); }
.tex-editor .cm-completionDetail { color: var(--muted); font-style: normal; margin-left: 8px; }
.tex-editor .cm-panels { background: var(--page); color: var(--ink); border-color: var(--line); font: 12.5px var(--sans); }
.tex-editor .cm-panels input, .tex-editor .cm-panels button { font: inherit; }
.tex-editor .cm-lintRange-error { background-image: none; border-bottom: 2px solid var(--accent-2); }
.tex-editor .cm-lint-marker-error { color: var(--accent-2); }
.tex-errors { border-top: 1px solid var(--line); max-height: 120px; overflow: auto; font: 12.5px var(--sans); background: color-mix(in srgb, var(--accent-2) 6%, transparent); }
.tex-error { display: flex; gap: 10px; padding: 5px 18px; cursor: pointer; }
.tex-error:hover { background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
.tex-error .line { color: var(--accent-2); min-width: 54px; font-variant-numeric: tabular-nums; }
.tex-error .msg { color: var(--ink); }
.tex-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tex-status.busy::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--accent); border-right-color: transparent; margin-right: 6px; vertical-align: -1px; animation: spin .8s linear infinite; }
.tex-status.bad { color: var(--accent-2); }
@keyframes spin { to { transform: rotate(360deg); } }
.tex-pages { position: relative; width: var(--page-w); margin: 0 auto; padding: 4px 0 40vh; }
.tex-mark { position: absolute; left: -10px; width: 4px; height: 22px; margin-top: -11px; border-radius: 2px; background: var(--accent); opacity: 0; pointer-events: none; }
.tex-mark.show { animation: texmark 1.4s ease-out both; }
@keyframes texmark { 0% { opacity: .9; } 70% { opacity: .9; } 100% { opacity: 0; } }
.writer-preview:has(#texPages:not([hidden])) { padding: 12px 16px 0; }

/* on a narrow page the margin's click area must not sit between the cursor and the text */
html.narrow .margin-hit { pointer-events: none; }

.writer-head .linklike { white-space: nowrap; }
.writer-head .tex-status { overflow: hidden; text-overflow: ellipsis; max-width: 38%; }

.doclist .doc-move { border: 0; background: transparent; color: var(--accent); cursor: pointer; font: 12px var(--sans); padding: 0; opacity: 0; }
.doclist li:hover .doc-move { opacity: 1; }


/* files beside a LaTeX source */
.tex-editor.over { outline: 2px dashed var(--accent); outline-offset: -4px; }
.writer-head { position: relative; }

/* school sign-in (static/js/sso.js): "Continue with …" above the password, the quiet list of schools */
#siForm [hidden] { display: none !important; }
#siForm .sso-go { border: 0; border-radius: 8px; padding: 9px 14px; background: var(--ink); color: var(--bg); font: 14px var(--sans); cursor: pointer; }
#siForm .sso-go:disabled { opacity: .55; cursor: progress; }
#siForm.sso-match #siLogin { background: transparent; color: var(--ink); border: 1px solid var(--line); }
#siForm .sso-toggle { align-self: flex-start; border: 0; background: transparent; padding: 0; font: 13px var(--sans); color: var(--muted); cursor: pointer; }
#siForm .sso-toggle:hover { color: var(--accent); }
#siForm .sso-list { display: flex; flex-direction: column; gap: 6px; }
#siForm .sso-list button { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: transparent; color: var(--ink); font: 14px var(--sans); text-align: left; cursor: pointer; }
#siForm .sso-list button:hover { border-color: var(--accent); color: var(--accent); }
/* school sign-in: the same type and height as the card's other buttons */
#siForm .sso-go, #siForm .sso-list button { font: inherit; padding: 8px 14px; }
/* the built-in sign-ins: each provider's own button, as its guidelines draw it (Microsoft: 41px, Segoe UI Semibold 15px,
   #5e5e5e on white with a #8c8c8c line, white on #2f2f2f in the dark; Google: 40px, Roboto Medium 14px, #1f1f1f on white
   with a #747775 line, #e3e3e3 on #131314 with a #8e918f line in the dark) */
#siForm .sso-brands { display: flex; flex-direction: column; gap: 8px; }
#siForm .sso-brand, .acct-row .sso-brand { display: flex; align-items: center; justify-content: center; gap: 12px; height: 41px; padding: 0 12px; cursor: pointer;
  border: 1px solid #8c8c8c; border-radius: 0; background: #fff; color: #5e5e5e; font: 600 15px "Segoe UI", system-ui, -apple-system, sans-serif; }
#siForm .sso-brand svg, .acct-row .sso-brand svg { flex: none; }
#siForm .sso-brand:disabled, .acct-row .sso-brand:disabled { opacity: .6; cursor: progress; }
#siForm .sso-brand-google, .acct-row .sso-brand-google { height: 40px; gap: 10px; border-color: #747775; border-radius: 4px; color: #1f1f1f; font: 500 14px Roboto, system-ui, -apple-system, sans-serif; }
:root[data-theme="dark"] #siForm .sso-brand-microsoft, :root[data-theme="dark"] .acct-row .sso-brand-microsoft { background: #2f2f2f; border-color: #2f2f2f; color: #fff; }
:root[data-theme="dark"] #siForm .sso-brand-google, :root[data-theme="dark"] .acct-row .sso-brand-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
#siForm .sso-or { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--muted); font: 12px var(--sans); }
#siForm .sso-or::before, #siForm .sso-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ==========================================================================
   Reader: selecting text, the aim and its action strip, the explanation card,
   the margin (page.js, hover.js, layers.js, margin.js, refs.js). Kept last on
   purpose: these rules win over earlier ones by order or by specificity.
   ========================================================================== */
:root {
  --paper: #ffffff;                       /* the page bitmap's own white: an opening meets the page without a seam */
  --card: #f5f4f0;
  --card-line: rgba(0, 0, 0, .06);
  --aim: rgba(47, 95, 216, .05);          /* the barely-there tint under the aimed passage */
  --sel: rgba(47, 95, 216, .16);          /* the selection */
}
:root[data-theme="dark"] {
  --paper: #222222;                       /* white through the dark page filter */
  --card: #2c2c2a;
  --card-line: rgba(255, 255, 255, .07);
  --aim: rgba(134, 168, 255, .08);
  --sel: rgba(134, 168, 255, .25);
}

/* the page shows the text cursor: words can be selected; the browser's own selection stays out of it */
.page .slice { cursor: text; -webkit-user-select: none; user-select: none; }
.page .overlay { -webkit-user-select: none; user-select: none; }
html.selecting, html.selecting * { cursor: text !important; -webkit-user-select: none !important; user-select: none !important; }

/* the aim: a 2px accent underline under each line of the passage, over a barely-there tint */
.overlay rect.hover, .overlay rect.focus { fill: var(--aim); }
.overlay line.hover-line, .overlay line.focus-line { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.overlay line.focus-line { stroke-opacity: .45; }
.overlay rect.hover-fig, .overlay rect.focus-fig { fill: var(--aim); stroke: var(--accent); stroke-width: 1.5; stroke-opacity: .4; }
/* the selection: a quiet tinted run, one rounded rectangle per line */
.overlay rect.sel { fill: var(--sel); }
.overlay line.rule { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }

/* the action strip: explain · why · picture · film · ask, beside the aimed passage, never over text */
.strip {
  position: absolute; z-index: 5; display: flex; align-items: center; height: 18px; padding: 0 3px;
  border-radius: 999px; white-space: nowrap; font: 500 11.5px/18px var(--sans); letter-spacing: .01em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
  -webkit-user-select: none; user-select: none; animation: fadeIn .12s ease-out both;
}
.strip .sep { color: color-mix(in srgb, var(--accent) 38%, transparent); }
.strip-act { border: 0; margin: 0; padding: 0 5px; background: none; color: inherit; font: inherit; line-height: inherit; border-radius: 999px; cursor: pointer; }
.strip-act:hover, .strip-act:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); outline: none; }
.strip.v { flex-direction: column; align-items: stretch; height: auto; padding: 4px 3px; border-radius: 8px; box-shadow: none; background: color-mix(in srgb, var(--accent) 6%, var(--paper)); }
.strip.v .sep { display: none; }
.strip.v .strip-act { text-align: left; padding: 0 7px; border-radius: 5px; line-height: 17px; }
.strip.over { background: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent), var(--shadow); }
.strip.leaving { opacity: 0; transition: opacity .12s ease-in; pointer-events: none; }
@media (pointer: coarse) {
  .strip { height: 30px; font-size: 13px; line-height: 30px; padding: 0 4px; }
  .strip-act { padding: 0 8px; }
  .strip.v .strip-act { line-height: 28px; }
}
/* on a phone it waits at the bottom of the screen, within the page */
.strip.fixed { z-index: 18; height: 40px; padding: 0 6px; font-size: 14px; line-height: 40px; background: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent), var(--shadow); }
.strip.fixed .strip-act { padding: 0 10px; }

/* the opening along the line, and the card in it */
.unfold { background: var(--paper); }
.unfold-inner { padding: 4px 0 14px; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink); }
.unfold-inner::before { content: none; display: none; }
.card {
  position: relative; margin-left: var(--card-x0, 0px); width: calc(var(--card-x1, var(--page-w)) - var(--card-x0, 0px));
  background: var(--card); border-radius: 8px; padding-bottom: 16px;
}
.card-head {
  display: flex; align-items: center; height: 36px; font: 12px/1 var(--sans);
  padding: 0 calc(var(--card-x1) - var(--text-x1) - 6px) 0 calc(var(--text-x0) - var(--card-x0) - 6px);
}
.card-tabs { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.card-tab, .card-act { border: 0; margin: 0; padding: 12px 6px 11px; background: none; font: inherit; letter-spacing: .01em; white-space: nowrap; cursor: pointer; }
.card-tab { position: relative; color: var(--ink-2); }
.card-tab:hover { color: var(--ink); }
.card-tab.on { color: var(--ink); }
.card-tab.on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 2px; border-radius: 1px; background: var(--accent); }
.card-tab.idle { color: var(--muted); }
.card-tab.idle:hover { color: var(--accent); }
.card-tab.ready:not(.on)::before, .card-tab.busy:not(.on)::before { content: ""; position: absolute; right: 1px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.card-tab.busy:not(.on)::before { background: var(--muted); }
.card-tab.err { color: var(--accent-2); }
.card-acts { display: flex; align-items: center; margin-left: auto; }
.card-act { color: var(--muted); }
.card-act:hover:not(:disabled) { color: var(--accent); }
.card-act:disabled { opacity: .4; cursor: default; }
.card-tab:focus-visible, .card-act:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -5px; border-radius: 7px; }
.card .layer { padding-left: calc(var(--text-x0) - var(--card-x0)); padding-right: calc(var(--card-x1) - var(--text-x1)); animation: fadeIn .22s ease both; }
.card .layer + .layer { margin-top: 0; padding-top: 0; }
.card .layer + .layer::before { content: none; }
.card .layer-viz, .card .layer-film { padding-left: 8px; padding-right: 8px; }
.card .layer.waiting { min-height: 22px; }
.card .layer.waiting::after { left: calc(var(--text-x0) - var(--card-x0)); right: calc(var(--card-x1) - var(--text-x1)); top: 11px; }
.card .layer-viz.waiting::after, .card .layer-film.waiting::after { left: calc(var(--text-x0) - var(--card-x0)); right: calc(var(--card-x1) - var(--text-x1)); top: auto; bottom: 4px; }
.card .film-status { padding: 0 0 8px calc(var(--text-x0) - var(--card-x0) - 8px); font: 12px/1.4 var(--sans); color: var(--muted); }
.card .layer-film .film-plan { margin-left: calc(var(--text-x0) - var(--card-x0) - 8px); margin-right: calc(var(--card-x1) - var(--text-x1) - 8px); }
.card .layer .err { font-family: var(--sans); font-size: 13px; font-style: normal; }
.margin .ltag { display: none !important; }   /* the old margin tags: the card's tabs and "again" took their place */

/* the margin: the same 8px rhythm everywhere, the quieter voice of a reader's pencil */
.margin > * { font-family: var(--serif); }
.mark { gap: 7px; color: var(--muted); }
.mark svg { width: 14px; height: 14px; }
.mark .why { font-size: 12.5px; line-height: 16px; font-style: italic; color: color-mix(in srgb, var(--muted) 82%, transparent); }
.mark:hover .why { color: var(--accent-2); }
.deflabel { font-size: 12.5px; line-height: 16px; }
.peek { border-radius: 8px; padding: 8px 8px 6px; }
.peek .cap { font: 11px/16px var(--sans); margin-top: 4px; }
.note { font-size: 13.5px; line-height: 1.45; padding-left: 12px; }
.note::before { top: .58em; }
.note .a { margin-top: 4px; }
.note.compose { padding: 8px 12px 10px; background: var(--card); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--card-line); }
.note.compose::before, .note.compose .del { display: none; }
.compose-cap { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font: 11px/16px var(--sans); letter-spacing: .02em; color: var(--muted); }
.compose-cap .keys { opacity: .75; }
.note.compose textarea { border: 0; padding: 0; background: transparent; color: var(--ink); font: italic 14px/1.45 var(--serif); }
.note .reveal, .note .verdict { margin-top: 4px; font: 11.5px/16px var(--sans); letter-spacing: .02em; text-transform: none; }
.note .verdict span { margin-right: 12px; }
.note.quiz .q::before { font-size: 11.5px; letter-spacing: .02em; }

/* narrow screens: the card takes the page's width, the margin lies over the page's edge, a pencil mark is the pencil alone */
html.narrow .unfold-inner { font-size: 15px; }
html.narrow .note.compose { box-shadow: var(--shadow); }
html.narrow .mark { left: auto; right: 4px; max-width: none; }
html.narrow .mark .why { display: none; }

@media (prefers-reduced-motion: reduce) {
  .strip, .card .layer, .note, .peek, .mark, .deflabel { animation: none !important; }
  .strip.leaving, .unfold { transition: none !important; }
}

/* ---- reader, narrow screens: a margin note is a small mark at the page's edge until it is tapped open ---- */
html.narrow .note:not(.open):not(.compose):not(.reviewing) {
  left: auto; right: 2px; width: 24px; height: 24px; padding: 0; overflow: hidden; border-radius: 50%;
  background: var(--paper); box-shadow: var(--shadow); cursor: pointer;
}
html.narrow .note:not(.open):not(.compose):not(.reviewing) > * { display: none; }
html.narrow .note:not(.open):not(.compose):not(.reviewing)::before {
  content: "?"; position: static; display: block; width: auto; height: auto; margin: 0; border-radius: 0; background: none; box-shadow: none;
  font: 600 12px/24px var(--sans); text-align: center; color: var(--accent-2);
}
html.narrow .note.quiz:not(.open):not(.compose):not(.reviewing)::before { content: "Q"; color: var(--accent); }
html.narrow .note.open, html.narrow .note.compose, html.narrow .note.reviewing { z-index: 7; }

/* ---- beta: the update notice, What's new, the feedback dialog, your data, the Admin section (beta.js, admin.js) ---- */
.sb-item.beta-notice { color: var(--accent); }
.sb-item.beta-notice::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (max-width: 719px) {   /* a phone's status bar is its message alone: a newer version shows beside it */
  .statusbar .sb-right:has(> .beta-notice.up) { display: flex; padding: 0; }
  .statusbar .sb-right:has(> .beta-notice.up) > :not(.beta-notice) { display: none; }
  .statusbar:has(> .sb-right > .beta-notice.up) > .status:not(.show) { display: none; }   /* centred alone */
  .statusbar .sb-item.beta-notice { height: auto; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--page) 92%, transparent); box-shadow: var(--shadow); pointer-events: auto; }
}
#settings .beta-note { padding: 12px 0 14px; border-top: 1px solid var(--line); }
#settings .set-intro + .beta-note { padding-top: 0; border-top: 0; }
.beta-note-head { display: flex; align-items: baseline; gap: 10px; }
.beta-version { font: 600 13px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.beta-date { font-size: 12px; color: var(--muted); }
.beta-note.new .beta-note-head::after { content: 'new'; align-self: center; padding: 0 7px; border-radius: 999px; background: var(--tint-focus); color: var(--accent); font: 600 10.5px/16px var(--sans); letter-spacing: .04em; }
.beta-note ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.beta-feedback { width: min(480px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 12px; background: var(--page); color: var(--ink); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.beta-feedback::backdrop { background: rgba(0, 0, 0, .22); }
.beta-feedback form { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 18px; }
.beta-feedback h2 { margin: 0; font: 600 15px var(--sans); }
.beta-feedback textarea { min-height: 132px; padding: 9px 11px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); outline: none; }
.beta-feedback textarea:focus { border-color: var(--accent); }
.beta-feedback label { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; cursor: pointer; }
.beta-feedback label input { flex: none; margin: 1px 0 0; }   /* centred on the first line */
.beta-feedback label small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.beta-buttons { display: flex; align-items: center; gap: 8px; }
.beta-msg { flex: 1; margin: 0 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--accent); }
.beta-msg.bad { color: var(--accent-2); }
.beta-buttons button { height: 30px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font: 13px var(--sans); cursor: pointer; }
.beta-buttons button.primary { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.beta-buttons button:disabled { opacity: .4; cursor: default; }
.admin-part + .admin-part { margin-top: 28px; }
.admin-part h3 { margin: 0 0 6px; font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.admin-part .set-intro { margin: -8px 0 0; }
.beta-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; color: var(--ink-2); }
.admin-part .beta-form { padding: 4px 0 12px; }
.beta-form input, .admin-spend input, .admin-link { height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: 12.5px var(--sans); outline: none; }
.beta-form input:focus, .admin-spend input:focus { border-color: var(--accent); }
.beta-form input[name=note] { flex: 1 1 220px; min-width: 0; }
.beta-form input[type=password] { flex: 0 1 220px; min-width: 0; }
.beta-form input[type=number] { width: 64px; margin-left: 4px; }
.beta-form button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--ink); color: var(--bg); font: 12.5px var(--sans); cursor: pointer; }
.beta-form button.danger { background: transparent; color: var(--accent-2); box-shadow: inset 0 0 0 1px currentColor; }
.beta-form .msg { flex-basis: 100%; margin: 0; color: var(--accent-2); }
.beta-form .msg:empty { display: none; }
.admin-stuck { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--accent-2); }
.admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.admin-row .main { grid-column: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.admin-row .meta { grid-column: 1; min-width: 0; font-size: 12px; color: var(--muted); }
.admin-row .acts { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; gap: 14px; }
.admin-row .acts button, .admin-more { padding: 0; border: 0; background: transparent; color: var(--accent); font: 12.5px var(--sans); cursor: pointer; }
.admin-row.dim > :not(.acts) { opacity: .5; }
.admin-row.fresh { padding-left: 10px; box-shadow: inset 2px 0 0 var(--accent); }
.admin-link { grid-column: 1 / -1; width: 100%; margin-top: 6px; color: var(--ink-2); font: 12px ui-monospace, Menlo, monospace; }
.admin-note .main { white-space: pre-wrap; line-height: 1.5; }
.admin-error .main { font: 12px/1.5 ui-monospace, Menlo, monospace; }
.admin-spend { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-spend input { width: 76px; margin-left: 2px; }
.admin-spend.saved input { border-color: var(--accent); }
.admin-spend input.bad { border-color: var(--accent-2); }
.admin-more { margin-top: 10px; }

/* =====================================================================================================
   The writing surface: one editor for notes and homework (writer.js, editor.js, assist.js, tex.js).
   Notes: source | page. LaTeX, as in Overleaf: source | the compiled pages under a toolbar; its files
   head its contents in the sidebar.
   These rules hang on #writer.ed, which writer.js sets, and override the earlier writer rules by
   specificity; CodeMirror's own colours are in editor.js (houseTheme), from the same tokens.
   ===================================================================================================== */
#writer.ed { grid-template-columns: minmax(0, var(--src-w, 44%)) 1px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
#writer.ed.preview-off { grid-template-columns: minmax(0, 1fr); }
#writer.ed.preview-off .writer-preview, #writer.ed.preview-off .writer-split { display: none; }
#writer.ed .writer-src { border-right: 0; min-width: 0; min-height: 0; position: relative; container-type: inline-size; }

/* the divider: a hairline with a wider grip, the accent while it is held */
#writer.ed .writer-split { position: relative; z-index: 3; background: var(--line); cursor: col-resize; touch-action: none; transition: background-color .15s .1s; }
#writer.ed .writer-split::after { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; }
#writer.ed .writer-split:hover, #writer.ed.dragging .writer-split:active { background: var(--accent); }
#writer.ed.dragging, #writer.ed.dragging * { cursor: col-resize !important; user-select: none; }
#writer.ed.dragging .writer-preview { pointer-events: none; }
#writer.ed.collapsing .writer-preview { opacity: .35; transition: opacity .12s; }

/* the head: one quiet line; the title, its course, the status at the right, then the actions */
#writer.ed .writer-head { display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); font: 12.5px var(--sans); color: var(--muted); position: relative; }
#writer.ed .writer-head #noteTitle { order: 0; flex: 0 1 auto; min-width: 40px; max-width: 55%; margin: 0; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: var(--ink); font: 500 12.5px var(--sans); outline: none; text-overflow: ellipsis; }
#writer.ed .writer-head #noteTitle:hover { border-bottom-color: var(--line); }
#writer.ed .writer-head #noteTitle:focus { border-bottom-color: var(--accent); }
#writer.ed .writer-course { order: 1; flex: 0 1 auto; min-width: 0; margin-left: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#writer.ed .writer-conflict { order: 1; flex: none; margin-left: 12px; white-space: nowrap; color: var(--accent-2); }
#writer.ed .writer-status { order: 2; flex: 1 1 0; min-width: 0; max-width: none; margin: 0 8px 0 16px; text-align: right; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#writer.ed .writer-status.bad { color: var(--accent-2); }
#writer.ed .writer-status.busy::before { display: none; }
@container (max-width: 520px) { #writer.ed .writer-status { visibility: hidden; } }
#writer.ed .writer-act { order: 3; flex: none; margin: 0; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 12.5px var(--sans); line-height: 16px; text-decoration: none; white-space: nowrap; cursor: pointer; }
#writer.ed .writer-act:hover, #writer.ed .writer-act.on { color: var(--ink); background: var(--tint); }
#writer.ed .writer-act:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
#writer.ed .writer-toggle { order: 4; display: inline-flex; margin-left: 4px; padding: 4px; }
#writer.ed .writer-toggle.on { background: transparent; }
#writer.ed .writer-toggle svg { display: block; width: 16px; height: 16px; }
#writer.ed .writer-toggle .pane { transition: opacity .15s; }
#writer.ed .writer-toggle:not(.on) .pane { opacity: 0; }

/* the editors fill the rest of the column */
#writer.ed .writer-editor { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
#writer.ed .writer-editor .cm-editor { height: 100%; }
#writer.ed .writer-editor.over { outline: 2px dashed var(--accent); outline-offset: -8px; }

/* the files of a LaTeX document, heading its contents in the sidebar (tex.js) */
#writerFiles { padding-bottom: 4px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
#writerFiles.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.outline .file { align-items: center; padding-left: 22px; }
.outline .file.on { background: var(--tint-focus); color: var(--ink); }
.outline .file .ico { flex: none; display: inline-flex; color: var(--muted); }
.outline .file .ico svg { width: 14px; height: 14px; }
.outline .file.on .ico { color: var(--accent); }
.outline .file .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline .file .rm { display: none; border: 0; background: transparent; color: var(--muted); font: inherit; padding: 0 4px; border-radius: 4px; cursor: pointer; }
.outline .file:hover .rm, .outline .file .rm.sure { display: inline; }
.outline .file:hover .size { display: none; }
.outline .file .rm:hover, .outline .file .rm.sure { color: var(--accent-2); }
.outline .file.new input { width: 100%; border: 1px solid var(--accent); border-radius: 4px; background: var(--page); color: var(--ink); font: 12px ui-monospace, "SF Mono", Menlo, monospace; padding: 2px 6px; outline: none; }
.outline .file.new input.bad { border-color: var(--accent-2); }
.file-acts { display: flex; gap: 2px; margin: 2px 0 0; padding: 0 12px 0 16px; }
.file-acts button { border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 12px var(--sans); padding: 3px 6px; cursor: pointer; }
.file-acts button:hover { color: var(--ink); background: var(--tint); }

/* an image beside the source, over the editor */
#writer.ed .tex-image { position: absolute; inset: 40px 0 0 0; z-index: 4; display: flex; flex-direction: column; background: var(--bg); }
#writer.ed .tex-image .cap { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); font: 12.5px var(--sans); color: var(--muted); }
#writer.ed .tex-image .name { flex: 1; color: var(--ink); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
#writer.ed .tex-image button { border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; padding: 4px 6px; cursor: pointer; }
#writer.ed .tex-image button:hover { color: var(--ink); background: var(--tint); }
#writer.ed .tex-image .img { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--muted); font: 12.5px var(--sans); }
#writer.ed .tex-image img { max-width: 100%; max-height: 100%; background: #fff; box-shadow: var(--shadow); }

/* the preview: the rendered page, or the compiled pages under their toolbar */
#writer.ed .writer-preview { min-width: 0; min-height: 0; overflow: auto; padding: 24px 32px 64px; }
#writer.ed .preview { min-height: calc(100% - 8px); }
#writer.ed[data-kind="tex"] .writer-preview { padding: 0 16px; }
#writer.ed .tex-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 2px; height: 40px; margin: 0 -16px 16px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--bg); font: 12.5px var(--sans); color: var(--muted); }
#writer.ed .tex-bar .tb { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
#writer.ed .tex-bar .tb:hover, #writer.ed .tex-bar .tb.on { color: var(--ink); background: var(--tint); }
#writer.ed .tex-bar .tb svg { width: 14px; height: 14px; }
#writer.ed .tex-bar .tb-compile { color: var(--ink); font-weight: 500; }
#writer.ed .tex-bar .tb-compile svg { color: var(--accent); }
#writer.ed .tex-bar.compiling .tb-compile svg { animation: spin .9s linear infinite; }
#writer.ed .tex-bar .tb-auto { gap: 4px; }
#writer.ed .tex-bar .tb-auto input { margin: 0; accent-color: var(--accent); }
#writer.ed .tex-bar .n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font: 600 10.5px/16px var(--sans); text-align: center; }
#writer.ed .tex-bar .n:empty { display: none; }
#writer.ed .tex-bar .n.err { background: var(--accent-2); color: var(--page); }
#writer.ed .tex-bar .n.warn { background: var(--tint); color: var(--ink-2); }
#writer.ed .tex-bar .tb-gap { flex: 1; }
#writer.ed .tex-bar .tb-page { padding: 0 8px; font-variant-numeric: tabular-nums; }
#writer.ed .tex-bar .tb-zoom { min-width: 48px; justify-content: center; font-variant-numeric: tabular-nums; }
#writer.ed .tex-bar .tb-zoom.on { color: var(--muted); background: transparent; }
#writer.ed .tex-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
#writer.ed .tex-bar.compiling .tex-progress { background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; animation: sweep 1.1s ease-in-out infinite; }

/* the logs: under the toolbar, at its right */
#writer.ed .tex-errors { position: absolute; top: calc(100% + 4px); right: 8px; width: min(520px, calc(100% - 16px)); max-height: 60vh; overflow: auto; padding: 4px 0; border: 0; border-radius: 8px; background: var(--page); box-shadow: var(--shadow); font: 12.5px var(--sans); animation: rise .16s ease both; }
#writer.ed .tex-error { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; line-height: 16px; cursor: pointer; }
#writer.ed .tex-error:hover { background: var(--tint); }
#writer.ed .tex-error .line { flex: none; min-width: 56px; color: var(--accent-2); font: 12px ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
#writer.ed .tex-error .msg { flex: 1; min-width: 0; color: var(--ink); }
#writer.ed .tex-error .fix { flex: none; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font: inherit; padding: 0 6px; cursor: pointer; }
#writer.ed .tex-error .fix:hover { background: var(--tint-focus); }
#writer.ed .tex-note { padding: 6px 12px; color: var(--muted); }
#writer.ed .tex-errors details { padding: 4px 12px 8px; }
#writer.ed .tex-errors summary { color: var(--muted); cursor: pointer; }
#writer.ed .tex-errors pre { max-height: 240px; overflow: auto; margin: 8px 0 0; font: 11px/1.45 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-2); white-space: pre-wrap; }

/* the AI: the ✦ beside a selection, its menu, its popover (the suggestion itself is in the editor) */
.assist-star { position: fixed; z-index: 30; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--page); box-shadow: var(--shadow); color: var(--accent); font: 12px/20px var(--sans); text-align: center; cursor: pointer; animation: fadeIn .15s ease both; }
.assist-star:hover { background: var(--accent); color: var(--page); }
.assist-menu { position: fixed; z-index: 31; min-width: 232px; padding: 4px; border-radius: 8px; background: var(--page); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: rise .14s ease both; }
.assist-menu button { border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: 12.5px var(--sans); text-align: left; padding: 6px 10px; cursor: pointer; outline: none; }
.assist-menu button:hover, .assist-menu button:focus { background: var(--tint-focus); color: var(--accent); }
.assist-pop { position: fixed; z-index: 31; width: min(420px, calc(100vw - 16px)); max-height: 50vh; overflow: auto; padding: 8px 12px 12px; border-radius: 8px; background: var(--page); box-shadow: var(--shadow); color: var(--ink); animation: rise .16s ease both; }
.assist-pop .cap { display: flex; align-items: center; gap: 6px; font: 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.assist-pop .cap span:first-child { color: var(--accent); }
.assist-pop .cap .t { flex: 1; }
.assist-pop .cap button { border: 0; background: transparent; color: var(--muted); font: 14px var(--sans); cursor: pointer; padding: 0 2px; }
.assist-pop .body { position: relative; min-height: 1.5em; margin-top: 4px; font: 14.5px/1.5 var(--serif); }
.assist-pop .body p { margin: 0 0 .5em; }
.assist-pop .body p:last-child { margin-bottom: 0; }
.assist-pop .body.waiting::after { content: ""; position: absolute; left: 0; right: 30%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; animation: sweep 1.3s ease-in-out infinite; }

@media (max-width: 900px) {
  #writer.ed { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 42%) minmax(0, 1fr); }
  #writer.ed .writer-split { display: none; }
  #writer.ed .writer-src { border-bottom: 1px solid var(--line); }
  #writer.ed.preview-off { grid-template-rows: minmax(0, 1fr); }
  #writer.ed .writer-preview { padding: 16px 16px 48px; }
}
@media print {
  #writer.ed .writer-split, #writer.ed .tex-bar { display: none !important; }
  #writer.ed.preview-off .writer-preview { display: block !important; }
  #writer.ed .writer-preview { overflow: visible; padding: 0; }
}

/* ---- connectors (static/js/connectors.js): Slack, mail and the other sources the fast model reads ----------
   One row per connector in Settings → Connections, grouped, set like the Canvas and calendar rows around it:
   the name at the left (the account under it once connected), at the right what it does, then its sign-in,
   or what it watches with the course or project each belongs to, the rules for mail, "scan now" and what the
   last scan found. Every select of courses and projects is 160 px wide and ends 22 px from the right, in the
   list of channels and in the rules alike, so that they line up. The rows follow the width they are given
   (container queries): the name goes over the body below 600 px, a rule takes two lines in a body under
   470 px, what a channel holds goes under its name under 380 px (and its course under that under 320 px),
   a field under its label under 340 px. */
.connectors { container: cx / inline-size; font: 13px/1.5 var(--sans); color: var(--ink-2); }
.connectors .cx-group-name { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); font: 600 10.5px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.connectors:first-child > .cx-group:first-child > .cx-group-name { padding-top: 4px; border-top: 0; }
.connectors .cx-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 24px; align-items: start; padding: 6px 0 16px; }
.connectors .cx-row + .cx-row { padding-top: 14px; border-top: 1px solid var(--line); }
.connectors .cx-head { min-width: 0; }
.connectors .cx-name { color: var(--ink); }
.connectors .cx-account { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connectors .cx-body { container: cxb / inline-size; min-width: 0; font-size: 12.5px; line-height: 1.5; }
.connectors .cx-body > * { margin: 0; }
.connectors .cx-body > * + * { margin-top: 10px; }
.connectors .cx-body > .cx-msg:empty, .connectors .cx-body > .cx-err:empty { margin-top: 0; }
.connectors .cx-desc, .connectors .cx-note { color: var(--muted); }
.connectors .cx-privacy { font-size: 12px; color: var(--muted); }
.connectors .cx-cheap { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; font-size: 12px; color: var(--muted); cursor: pointer; }
.connectors .cx-err, .connectors .cx-bad { color: var(--accent-2); }
.connectors .cx-msg { color: var(--ink-2); }
.connectors .cx-msg[data-kind=busy] { color: var(--muted); }
.connectors .cx-msg[data-kind=err], .connectors .cx-msg[data-kind=warn] { color: var(--accent-2); }

/* buttons read as links, as everywhere in the settings */
.connectors .cx-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; text-underline-offset: 2px; }
.connectors .cx-btn:hover:not(:disabled) { text-decoration: underline; }
.connectors .cx-btn:disabled { color: var(--muted); cursor: default; }
.connectors .cx-quiet { color: var(--muted); }
.connectors .cx-quiet:hover:not(:disabled) { color: var(--accent); }
.connectors .cx-off:hover:not(:disabled) { color: var(--accent-2); }
.connectors .cx-btn:focus-visible, .connectors .cx-x:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.connectors .cx-line, .connectors .cx-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.connectors .cx-actions .cx-off { margin-left: auto; }
.connectors .cx-last { font-size: 12px; color: var(--muted); }

/* fields */
.connectors input:not([type=checkbox]), .connectors select { box-sizing: border-box; width: 100%; min-width: 0; height: 28px; margin: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--page); color: var(--ink); font: 12.5px var(--sans); outline: none; }
.connectors select { padding: 0 4px 0 6px; cursor: pointer; text-overflow: ellipsis; }
.connectors input:not([type=checkbox]):focus-visible, .connectors select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--tint-focus); }
.connectors input::placeholder { color: var(--muted); opacity: .75; }
.connectors input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.connectors input[type=number]::-webkit-inner-spin-button, .connectors input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.connectors input[type=checkbox] { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* the sign-in form: the labels in a column of their own, the help under its field */
.connectors .cx-form { display: grid; gap: 6px; max-width: 440px; }
.connectors .cx-f { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 2px 12px; align-items: center; }
.connectors .cx-flabel { color: var(--ink-2); }
.connectors .cx-help { grid-column: 2; margin: 0 0 2px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.connectors .cx-submit { padding: 2px 0 0 96px; }
.connectors .cx-bare .cx-submit { padding: 0; }

/* a block of a connected row: its head, then its list */
.connectors .cx-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 4px; }
.connectors .cx-block-title { color: var(--ink); }
.connectors .cx-count, .connectors .cx-flag { font-size: 12px; color: var(--muted); }
.connectors .cx-flag.done { animation: cxFade 2.2s ease forwards; }
@keyframes cxFade { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
.connectors .cx-block-head .cx-filter { flex: 0 1 160px; width: 160px; height: 24px; margin: 0 22px 0 auto; padding: 0 8px; }

/* what can be watched: the box and the name at the left, the course or project at the right (only while it is watched) */
.connectors .cx-list { margin: 0; padding: 0; list-style: none; }
.connectors .cx-cont { display: grid; grid-template-columns: minmax(0, 1fr) 160px 16px; gap: 2px 6px; align-items: center; min-height: 32px; padding: 2px 0; }
.connectors .cx-watch { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: baseline; min-width: 0; margin-right: 6px; cursor: pointer; }
.connectors .cx-watch input { position: relative; top: 2px; }
.connectors .cx-ctext { min-width: 0; overflow-wrap: anywhere; }
.connectors .cx-cname { color: var(--ink-2); }
.connectors .cx-cont.on .cx-cname { color: var(--ink); }
.connectors .cx-meta { font-size: 12px; color: var(--muted); }
.connectors .cx-cont:not(.on) .cx-wscell { visibility: hidden; }
.connectors .cx-cont.need .cx-ws, .connectors .cx-rule.need .cx-ws { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); }
.connectors .cx-cflag { color: var(--accent-2); font-weight: 600; text-align: center; cursor: help; }
.connectors .cx-wscell { display: block; min-width: 0; }
.connectors .cx-more { margin-top: 4px; font-size: 12px; }

/* the rules: field, contains, text, arrow, course or project, remove; the last row is everything else */
.connectors .cx-rule-list { display: grid; gap: 6px; }
.connectors .cx-rule { display: grid; grid-template-columns: 84px max-content minmax(0, 1fr) 12px 160px 16px; gap: 6px; align-items: center; }
.connectors .cx-op, .connectors .cx-arrow, .connectors .cx-else { font-size: 12px; color: var(--muted); }
.connectors .cx-arrow { text-align: center; }
.connectors .cx-default .cx-else { grid-column: 1 / 4; }
.connectors .cx-default .cx-arrow { grid-area: 1 / 4; }
.connectors .cx-default .cx-wscell { grid-area: 1 / 5; }
.connectors .cx-and { grid-column: 1 / -1; padding-left: 90px; font-size: 12px; color: var(--muted); }
.connectors .cx-x { width: 16px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); font: 15px/20px var(--sans); cursor: pointer; }
.connectors .cx-x:hover { color: var(--accent-2); background: var(--tint); }
.connectors .cx-addline { margin-top: 6px; }

@container cx (max-width: 600px) {
  .connectors .cx-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .connectors .cx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
}
@container cxb (max-width: 470px) {
  .connectors .cx-rule-list { gap: 10px; }
  .connectors .cx-rule { row-gap: 4px; }
  .connectors .cx-rule .cx-sub { grid-column: 3 / 6; }
  .connectors .cx-rule .cx-arrow { grid-area: 2 / 4; }
  .connectors .cx-rule .cx-wscell { grid-area: 2 / 5; }
  .connectors .cx-rule .cx-x { grid-area: 2 / 6; }
  .connectors .cx-default .cx-arrow { grid-area: 1 / 4; }
  .connectors .cx-default .cx-wscell { grid-area: 1 / 5; }
  .connectors .cx-and { padding-left: 0; }
}
@container cxb (max-width: 380px) {
  /* what a channel holds goes under its name, so that its course or project keeps the name's line */
  .connectors .cx-meta { display: block; line-height: 1.4; }
  .connectors .cx-cont { padding: 4px 0; }
  .connectors .cx-block-head .cx-filter { flex-basis: 100%; width: 100%; margin-right: 0; }
}
@container cxb (max-width: 320px) {
  /* no room for both: the course or project goes under the name, and only while it is watched */
  .connectors .cx-cont { row-gap: 4px; }
  .connectors .cx-watch { grid-area: 1 / 1 / auto / -1; margin-right: 0; }
  .connectors .cx-cont .cx-wscell { grid-area: 2 / 2; }
  .connectors .cx-cont .cx-cflag { grid-area: 2 / 3; }
  .connectors .cx-cont:not(.on) .cx-wscell { display: none; }
}
@container cxb (max-width: 340px) {
  .connectors .cx-f { grid-template-columns: minmax(0, 1fr); }
  .connectors .cx-help { grid-column: 1; }
  .connectors .cx-submit { padding-left: 0; }
  .connectors .cx-rule { grid-template-columns: 72px max-content minmax(0, 1fr) 12px minmax(0, 160px) 16px; }
}
/* inside the settings page the rows take one column where its own rows do (#settings .conn-row, under 1000 px) */
@media (max-width: 1000px) {
  #settings .connectors .cx-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  #settings .connectors .cx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
}

/* ---- calendar (static/js/calendar.js): a month, a week and an agenda of the deadlines, exams, classes,
   office hours, readings and the reader's own events; the event popover; the sidebar's compact agenda.
   A course's colour is a muted hue (--h, set on each event) at one lightness and chroma per theme; exams
   are in --accent-2; the reader's own events are grey, with no dot. On the 8 px grid. ------------------- */
:root { --cal-l: 62%; --cal-k: .08; }
:root[data-theme="dark"] { --cal-l: 74%; --cal-k: .075; }
:where(.cal, .cal-pop, .cal-mini) button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
:where(.cal, .cal-pop, .cal-mini) :focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.cal { position: relative; max-width: 1240px; margin: 0 auto; padding: 16px 24px 24px; color: var(--ink-2); font: 13px/1.4 var(--sans); outline: none; }
.calendar-page:has(> .cal-host > .cal) { padding: 0; }   /* the shell's calendar tab: the calendar keeps its own margins (it sizes itself to the window) */
.cal-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: oklch(var(--cal-l) var(--cal-k) var(--h, 250)); }
.cal-dot.none { visibility: hidden; }
.cal-ti { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.cal-chip, .cal-row, .cal-blk, .cal-mini-row).exam .cal-ti { color: var(--accent-2); }
:is(.cal-chip, .cal-row, .cal-blk, .cal-mini-row).done { opacity: .5; }
:is(.cal-chip, .cal-row, .cal-blk, .cal-mini-row).done .cal-ti { text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-mk { flex: none; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent-2) 11%, transparent); color: var(--accent-2); font: 500 10px/16px var(--sans); letter-spacing: .02em; white-space: nowrap; }
.cal-mk.icon { display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 12px; padding: 0; border-radius: 0; background: none; }
.cal-mk.icon svg { display: block; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cal-mk.icon + .cal-mk.icon { margin-left: -1px; }

/* the header: ‹ Today ›, the range, Month · Week · Agenda; the course filters under it */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 40px; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--ink-2); }
.cal-ico:hover { background: var(--tint); color: var(--ink); }
.cal-ico svg, .cal-pop-x svg, .cal-act svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cal-ico svg { width: 18px; height: 18px; }
.cal-today { height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-size: 12.5px; }
.cal-today:hover { background: var(--tint); }
.cal-title { flex: 1 1 auto; min-width: 0; margin: 0 0 0 4px; font: 400 20px/28px var(--serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-views { display: flex; align-items: center; gap: 4px; font-size: 12.5px; }
.cal-views button { height: 28px; padding: 0 4px; border-radius: 5px; color: var(--muted); }
.cal-views button:hover { color: var(--ink); }
.cal-views button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.cal-sep { color: var(--muted); opacity: .6; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0 -8px; }
.cal-filter { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px 0 8px; border-radius: 12px; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.cal-filter:hover { background: var(--tint); color: var(--ink); }
.cal-filter .cal-dot { width: 8px; height: 8px; }
.cal-filter.mine .cal-dot { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.cal-filter[aria-pressed="false"] { color: var(--muted); }
.cal-filter[aria-pressed="false"] .cal-dot { background: transparent; box-shadow: inset 0 0 0 1.5px oklch(var(--cal-l) var(--cal-k) var(--h, 250)); }
.cal-filter.mine[aria-pressed="false"] .cal-dot { box-shadow: inset 0 0 0 1.5px var(--muted); }
.cal-load { position: relative; height: 1px; margin: 8px 0 7px; overflow: hidden; }
.cal.loading .cal-load::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%; opacity: .7; animation: calSweep 1.2s ease-in-out infinite; }
@keyframes calSweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.cal-body.pending { opacity: .55; }
.cal-note { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cal-note.err { color: var(--accent-2); }
.cal-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cal-foot { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }

/* the month: a sheet of paper, the day's number top left, at most three chips and "+N more" */
.cal-wds { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wd { padding: 0 8px 8px; font: 600 10.5px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(112px, auto); overflow: hidden; background: var(--page); border: 1px solid var(--line); border-radius: 8px; }
.cal-cell { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 4px 2px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-cell.out { background: color-mix(in srgb, var(--bg) 50%, var(--page)); }
.cal-num { flex: none; align-self: flex-start; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font: 500 12px/22px var(--sans); text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-cell:not(.today) > button.cal-num:hover { background: var(--tint); color: var(--ink); }
.cal-cell.out .cal-num, .cal-cell.past .cal-num { color: var(--muted); }
.cal-cell.today > .cal-num, .cal-wh.today .cal-num, .cal-aday.today .cal-num { background: var(--accent); color: var(--page); font-weight: 600; }
.cal-evs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; height: 20px; overflow: hidden; padding: 0 6px; border-radius: 4px; color: var(--ink); font-size: 12px; line-height: 20px; white-space: nowrap; }
.cal-chip:hover { background: var(--tint); }
.cal-chip .cal-t { flex: none; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cal-chip .cal-ti { flex: 0 1 auto; }
.cal-chip .cal-cs { flex: none; margin-left: auto; padding-left: 8px; color: var(--muted); font-size: 11.5px; }
.cal-chip.exam .cal-ti { font-weight: 500; }
.cal-chip.allday { background: oklch(var(--cal-l) var(--cal-k) var(--h, 250) / .14); }
.cal-chip.allday:hover { background: oklch(var(--cal-l) var(--cal-k) var(--h, 250) / .24); }
.cal-chip.mine { color: var(--muted); }
.cal-cell.past .cal-chip:not(.done) { opacity: .7; }
.cal-more { flex: none; align-self: flex-start; height: 16px; padding: 0 6px; border-radius: 4px; color: var(--muted); font-size: 11.5px; line-height: 16px; }
.cal-more:hover { background: var(--tint); color: var(--ink); }

/* the week: the days' heads and an all-day row (deadlines are moments, so they sit there too), then the
   hours from 7 to 22 scrolling under them, blocks side by side where they overlap, a line at now */
.cal-wk-scroll { position: relative; overflow: auto; overscroll-behavior: contain; background: var(--page); border: 1px solid var(--line); border-radius: 8px; }
.cal-wk-in { position: relative; min-width: 100%; }
.cal-wk-row { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.cal-wk-top { position: sticky; top: 0; z-index: 4; background: var(--page); border-bottom: 1px solid var(--line); }
.cal-gut { position: sticky; left: 0; z-index: 3; background: var(--page); }
.cal-wh { display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 8px; border-left: 1px solid var(--line); }
.cal-wh-w { font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cal-wh .cal-num { align-self: center; font-size: 13px; color: var(--ink); }
.cal-wh.past .cal-num { color: var(--muted); }
.cal-wa { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 28px; padding: 2px 4px 6px; border-left: 1px solid var(--line); }
.cal-wk-grid { position: relative; }
.cal-hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 10.5px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-wc { position: relative; min-width: 0; border-left: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0 47px, var(--line) 47px 48px); }
.cal-wc.today { background-color: color-mix(in srgb, var(--accent) 3%, transparent); }
.cal-blk { position: absolute; z-index: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 4px 6px 4px 8px; border-radius: 4px; background-color: var(--page); background-image: linear-gradient(oklch(var(--cal-l) var(--cal-k) var(--h, 250) / .15), oklch(var(--cal-l) var(--cal-k) var(--h, 250) / .15)); box-shadow: inset 2px 0 0 oklch(var(--cal-l) var(--cal-k) var(--h, 250)); color: var(--ink); font-size: 11.5px; line-height: 16px; }
.cal-blk:hover { z-index: 2; background-image: linear-gradient(oklch(var(--cal-l) var(--cal-k) var(--h, 250) / .25), oklch(var(--cal-l) var(--cal-k) var(--h, 250) / .25)); }
.cal-blk-ti { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; font-weight: 500; }
.cal-blk-m, .cal-blk-w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.cal-blk.short { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; }
.cal-blk.short .cal-blk-m { flex: none; order: -1; }
.cal-blk.exam { background-image: linear-gradient(color-mix(in srgb, var(--accent-2) 13%, transparent), color-mix(in srgb, var(--accent-2) 13%, transparent)); box-shadow: inset 2px 0 0 var(--accent-2); }
.cal-blk.exam:hover { background-image: linear-gradient(color-mix(in srgb, var(--accent-2) 21%, transparent), color-mix(in srgb, var(--accent-2) 21%, transparent)); }
.cal-blk.mine { background-image: linear-gradient(var(--tint), var(--tint)); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--muted) 55%, transparent); color: var(--muted); }
.cal-blk.mine .cal-blk-ti { font-weight: 400; }
.cal-blk.mine .cal-blk-m, .cal-blk.mine .cal-blk-w { color: var(--muted); }
.cal-now { position: absolute; left: 0; right: 0; z-index: 0; height: 0; border-top: 1.5px solid var(--accent); pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -4px; top: -4.75px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* the agenda: a day's date on the left, its events on the right: time · title · course · room */
.cal-agenda { max-width: 920px; }
.cal-amonth { margin-top: 16px; padding: 8px 0 8px 72px; font: 400 17px/24px var(--serif); color: var(--ink); }
.cal-aday { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.cal-agenda > .cal-aday:first-child { padding-top: 0; border-top: 0; }
.cal-adate { display: flex; align-items: center; gap: 8px; height: 32px; }
.cal-adate .cal-num { min-width: 28px; height: 28px; padding: 0 4px; border-radius: 14px; font: 500 15px/28px var(--sans); color: var(--ink); }
.cal-aday.past .cal-adate .cal-num { color: var(--muted); }
.cal-aw { font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cal-arows { min-width: 0; }
.cal-row { display: grid; grid-template-columns: 144px minmax(0, 1fr) minmax(0, max-content) minmax(0, 200px); align-items: center; column-gap: 16px; width: 100%; min-height: 32px; padding: 4px 8px; border-radius: 6px; }
.cal-row:hover { background: var(--tint); }
.cal-row-t { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-row-ti { display: flex; align-items: center; gap: 8px; min-width: 0; font: 15px/22px var(--serif); color: var(--ink); }
.cal-row-m { display: contents; }
.cal-row-c, .cal-row-w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.cal-row-w { text-align: right; }
.cal-row-w.split, .cal.narrow .cal-row-m:has(.split) { white-space: normal; }   /* the sources' dates: all of them, on a phone too */
.cal-row.mine .cal-row-ti { color: var(--muted); }
.cal-score { flex: none; font: 11.5px var(--sans); color: var(--muted); }
.cal-none { margin: 0; padding: 4px 8px; font-size: 12.5px; line-height: 24px; color: var(--muted); }

/* the popover: what, when, where, what moved, what clashes, and what can be done */
.cal-pop { position: fixed; z-index: 80; width: 320px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); box-shadow: var(--shadow); color: var(--ink-2); font: 13px/1.45 var(--sans); text-align: left; outline: none; animation: calRise .14s cubic-bezier(.2, .75, .2, 1) both; }
@keyframes calRise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes calUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cal-pop-top { display: flex; align-items: flex-start; gap: 8px; min-height: 16px; margin-right: 32px; font-size: 12px; line-height: 16px; color: var(--muted); }
.cal-pop-top .cal-dot { width: 8px; height: 8px; margin-top: 4px; }
.cal-pop-course { min-width: 0; overflow-wrap: anywhere; }
.cal-pop-kind { flex: none; margin-left: auto; font: 600 10px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cal-pop.exam .cal-pop-kind, .cal-pop.exam .cal-pop-title { color: var(--accent-2); }
.cal-pop-x { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; color: var(--muted); }
.cal-pop-x:hover { background: var(--tint); color: var(--ink); }
.cal-pop-x svg { width: 14px; height: 14px; }
.cal-pop-title { margin: 8px 0 12px; font: 400 18px/24px var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.cal-pop dl { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.cal-pop dt { color: var(--muted); font-size: 11.5px; line-height: 20px; }
.cal-pop dd { margin: 0; color: var(--ink); line-height: 20px; overflow-wrap: anywhere; }
.cal-pop dd s { color: var(--muted); text-decoration-thickness: 1px; }
.cal-pop-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.cal-act { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 13px; text-decoration: none; }
.cal-act:hover { text-decoration: underline; text-underline-offset: 2px; }
.cal-act.primary { font-weight: 600; }
.cal-act svg { width: 13px; height: 13px; }
.cal-pop.sheet { left: 8px; right: 8px; top: auto; bottom: calc(var(--bottom-h, 0px) + 8px); width: auto; max-height: 70vh; animation-name: calUp; }
.cal-pop-day { width: 304px; }
.cal-pop-list { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.cal-pop-list .cal-chip { height: 28px; padding: 0 8px; }

/* phones: the agenda first, the month as a grid of dots with the chosen day under it */
.cal.narrow { padding: 8px 16px 24px; }
.cal.narrow .cal-head { gap: 8px; }
.cal.narrow .cal-title { font-size: 18px; }
.cal.narrow .cal-views { margin-left: -4px; }
.cal.narrow .cal-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cal.narrow .cal-wd { padding: 0 0 8px; text-align: center; }
.cal.narrow .cal-grid { grid-auto-rows: 52px; }
.cal.narrow .cal-cell { align-items: center; gap: 4px; padding: 6px 0 0; }
.cal.narrow .cal-cell .cal-num { align-self: center; width: 28px; min-width: 0; height: 28px; padding: 0; border-radius: 14px; font-size: 13px; line-height: 28px; }
.cal.narrow .cal-cell.sel:not(.today) .cal-num { background: var(--tint-focus); color: var(--ink); }
.cal-dots { display: flex; justify-content: center; gap: 3px; height: 5px; }
.cal-dots i { width: 5px; height: 5px; border-radius: 50%; background: oklch(var(--cal-l) var(--cal-k) var(--h, 250)); }
.cal-dots i.exam { background: var(--accent-2); }
.cal-dots i.mine { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.cal-dots i.plus { width: 3px; height: 3px; align-self: center; background: var(--muted); }
.cal-daylist { margin-top: 16px; }
.cal-dl-head { display: flex; align-items: baseline; gap: 8px; padding: 0 8px 8px; font: 600 12.5px var(--sans); color: var(--ink); }
.cal-dl-today { font-weight: 500; color: var(--accent); }
.cal.narrow .cal-agenda { max-width: none; }
.cal.narrow .cal-aday { grid-template-columns: 44px minmax(0, 1fr); }
.cal.narrow .cal-adate { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; height: auto; padding-top: 2px; }
.cal.narrow .cal-aw { padding-left: 2px; font-size: 10px; }
.cal.narrow .cal-amonth { padding-left: 44px; }
.cal.narrow .cal-row { grid-template-columns: 14px max-content minmax(0, 1fr); grid-template-areas: "ti ti ti" ". t m"; align-items: baseline; column-gap: 0; padding: 6px 8px; }
.cal.narrow .cal-row-ti { grid-area: ti; }
.cal.narrow .cal-row-t { grid-area: t; line-height: 16px; }
.cal.narrow .cal-row-m { grid-area: m; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--muted); }
.cal.narrow .cal-row-c, .cal.narrow .cal-row-w { display: inline; }
.cal.narrow .cal-row-c:not(:empty)::before, .cal.narrow .cal-row-w:not(:empty)::before { content: "\00a0·\00a0"; }
.cal.narrow .cal-wk-in { width: 720px; }
.cal.narrow .cal-wk-row { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }

/* the sidebar's agenda: a day's name, then two lines an event */
.cal-mini { padding: 0 0 8px; font: 13px/1.4 var(--sans); color: var(--ink-2); }
.cal-mini-day { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 16px 4px; font: 600 10.5px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cal-mini-date { font: 400 11.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.cal-mini-row { display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 10px; align-items: center; width: 100%; padding: 4px 16px; }
.cal-mini-row:hover { background: var(--tint); }
.cal-mini-row .cal-dot { grid-row: 1; }
.cal-mini-row .cal-dot.none { visibility: hidden; }
.cal-mini-ti { display: flex; align-items: center; gap: 6px; min-width: 0; font: 14px/20px var(--serif); color: var(--ink); }
.cal-mini-m { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--muted); }
.cal-mini-row.mine .cal-mini-ti { color: var(--muted); }
.cal-mini-none { margin: 0; padding: 8px 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .cal-pop, .cal.loading .cal-load::after { animation: none !important; }
  .cal *, .cal-pop * { transition: none !important; }
}

/* ---- provider: Settings → AI provider, the reader's own key (static/js/provider.js) ----------------------- */
.provider input:not([type=checkbox]) { width: 100%; max-width: 420px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--page); color: var(--ink); font: 12.5px var(--sans); }
.provider input:not([type=checkbox]):focus { outline: none; border-color: var(--accent); }
.provider .prov-more summary { font-size: 13px; color: var(--accent); cursor: pointer; margin: 2px 0 12px; }
.provider .prov-models { display: grid; grid-template-columns: repeat(2, minmax(0, 205px)); gap: 10px; }
.provider .prov-models label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.provider .prov-vision { font-size: 13px; color: var(--ink-2); cursor: pointer; }
.provider .prov-vision input { vertical-align: -1px; }
.provider .prov-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.provider .prov-save { height: 28px; padding: 0 14px; border: 0; border-radius: 7px; background: var(--ink); color: var(--bg); font: 12.5px var(--sans); cursor: pointer; }
.provider .prov-save:disabled { opacity: .6; cursor: progress; }
.provider .prov-state { line-height: 1.5; color: var(--muted); }
.provider .prov-state.bad { color: var(--accent-2); }
@media (max-width: 1000px) { .provider .prov-models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.provider .seg { justify-self: start; }

/* ---- grading: a LaTeX solution's grade in the editor, the explorer and Settings (static/js/grading.js) ----------
   A dot per verdict: complete blue, a gap half filled, an error orange, missing grey; smaller when the grader is
   unsure, hollow for an earlier version, pulsing while the grader reads. The button gives way before the toolbar's other
   controls do. On a phone the toolbar is tighter, and the button shows only its dots, in the page number's place. */
.gr-dot { --c: var(--muted); flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.gr-dot.complete { --c: var(--accent); }
.gr-dot.gap { --c: var(--accent-2); background: linear-gradient(90deg, var(--c) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--c); }
.gr-dot.error { --c: var(--accent-2); }
.gr-dot.soft { transform: scale(.75); }
.stale .gr-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.gr-score.full, .tree-row .gr-est.full { color: var(--accent); }
.tree-row .gr-est.stale { opacity: .6; }
.gr-bad { color: var(--accent-2); }
#writer.ed .tex-bar .tb-grade { min-width: 0; overflow: hidden; font-variant-numeric: tabular-nums; }
#writer.ed .tex-bar .tb-grade.busy .gr-dot { animation: fadeIn .8s ease-in-out infinite alternate; }
#writer.ed .tex-bar .tb-grade .gr-dots { display: inline-flex; align-items: center; gap: 3px; }
#writer.ed .tex-bar .tb-grade .gr-dots:empty { display: none; }
#writer.ed .grade-list .gr-row { padding: 6px 12px; line-height: 1.45; }
#writer.ed .grade-list .gr-row.at { cursor: pointer; }
#writer.ed .grade-list .gr-row.at:hover { background: var(--tint); }
#writer.ed .grade-list .gr-head { display: flex; align-items: center; gap: 8px; color: var(--ink); }
#writer.ed .grade-list .gr-head.soft { color: var(--ink-2); }
#writer.ed .grade-list :is(.gr-issue, .gr-hint, .gr-refs) { margin: 2px 0 0 16px; color: var(--ink-2); }
#writer.ed .grade-list .gr-hint { color: var(--muted); }
#writer.ed .grade-list .gr-refs { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; }
#writer.ed .grade-list .gr-foot { padding: 8px 12px 6px; color: var(--muted); }
#writer.ed .grade-list .gr-row + .gr-foot { margin-top: 4px; border-top: 1px solid var(--line); }
#writer.ed .grade-list .gr-foot > div { margin-top: 4px; }
.tex-editor .cm-grade-gutter .cm-gutterElement { display: flex; align-items: center; padding: 0 4px 0 2px; }
@media (max-width: 560px) {
  #writer.ed .tex-bar { padding: 0 4px; }
  #writer.ed .tex-bar :is(.tb, .tb-page) { padding: 0 5px; }
  #writer.ed .tex-bar .tb-grade .gr-dots:not(:empty) + .gr-score, #writer.ed .tex-bar .tb-grade:not([hidden]) ~ .tb-page { display: none; }
}


/* ---- calendar, after the review (overrides the calendar block above; static/js/calendar.js) -------------------
   A course's colour is the server's (--h, and --t a shade for the seventh course on) at a little more chroma; a
   deadline is a hollow square and an exam a diamond wherever a class has its course's dot, a deadline's title
   medium and its time in ink; an overdue one is never dimmed; the agenda and the sidebar open on what is overdue
   and what is due next; what is over today is dimmed under a line at now; week blocks cascade, their titles over
   up to three lines, the line at now above them; times at a readable contrast; touch targets of 44 px on a
   phone; the empty calendar says where events come from. */
:root { --cal-l: 60%; --cal-k: .115; --cal-dl: -11%; --cal-warn: color-mix(in srgb, var(--accent-2) 72%, var(--ink)); }
:root[data-theme="dark"] { --cal-l: 74%; --cal-k: .1; --cal-dl: 9%; }
:is(.cal-chip, .cal-row, .cal-blk, .cal-mini-row, .cal-filter, .cal-scope, .cal-pop, .cal-dots i) {
  --cal-c: oklch(calc(var(--cal-l) + var(--t, 0) * var(--cal-dl)) var(--cal-k) var(--h, 250));
}
.cal-dot { background: var(--cal-c); }
.cal-filter[aria-pressed="false"] .cal-dot { box-shadow: inset 0 0 0 1.5px var(--cal-c); }
.cal-dots i { background: var(--cal-c); }
.cal-chip.allday { background: color-mix(in oklab, var(--cal-c) 14%, transparent); }
.cal-chip.allday:hover { background: color-mix(in oklab, var(--cal-c) 24%, transparent); }
.cal-chip.allday.mine { background: var(--tint); }
.cal-chip.allday.mine:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* what an event is, at a glance: a class its course's dot, a deadline a hollow square, an exam a diamond */
.cal-dot.due { width: 7px; height: 7px; border-radius: 1.5px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--cal-c); }
.cal-dot.due.over { background: color-mix(in srgb, var(--accent-2) 24%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent-2); }
.cal-dot.exam { width: 7px; height: 7px; border-radius: 1px; background: var(--accent-2); transform: rotate(45deg) scale(.88); }
.cal-dot.meeting, .cal-dots i.meeting { background: var(--accent); }   /* a group meeting: the accent's blue, which no course has */
.cal-pop-top .cal-dot.due, .cal-pop-top .cal-dot.exam { width: 8px; height: 8px; }
.cal-chip.due .cal-ti { font-weight: 500; }
.cal-chip .cal-t { color: var(--ink-2); }
.cal-chip.overdue { background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
.cal-chip.overdue .cal-ti, .cal-row.due.overdue .cal-row-t, .cal-mini-row.due.overdue .cal-mini-t { color: var(--cal-warn); }
.cal-cell.past .cal-chip:not(.done) { opacity: .85; }
.cal-cell.past .cal-chip.overdue { opacity: 1; }
/* "moved" and "clash" in a chip or a block: one small mark (its words in the title, the popover and the agenda) */
.cal-mk.dot { width: 6px; height: 6px; padding: 0; border-radius: 50%; background: var(--accent-2); }
/* an event over several days: flat where it goes on in the next day's cell (or block) */
.cal-chip.cont-l { margin-left: -4px; width: calc(100% + 4px); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-chip.cont-r { margin-right: -4px; width: calc(100% + 4px); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-chip.cont-l.cont-r { width: calc(100% + 8px); }
.cal-blk.cont-t { border-top-left-radius: 0; border-top-right-radius: 0; }
.cal-blk.cont-b { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* "+N more": a 24 px target */
.cal-more { height: 24px; line-height: 24px; }

/* the header: the view in use, the course a calendar is of, filters that cut a long name short, the focus */
.cal-views button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.cal-fl { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-filter { flex: none; }
.cal-scope { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 24px; padding: 0 10px 0 8px; border-radius: 12px; background: var(--tint); color: var(--ink); font-size: 12px; white-space: nowrap; }
.cal-scope .cal-dot { width: 8px; height: 8px; }
.cal-filters .cal-all { align-self: center; margin-left: 8px; font-size: 12px; }
.cal:focus-visible { outline: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 10px; }
.cal.narrow:focus-visible { box-shadow: none; }   /* a phone has no keys for it */
.cal-note { color: var(--ink-2); }

/* the week: a block's ring in the page's colour where blocks lie over each other, its title over up to three
   lines (--lines), the line at now above every block; each day a stacking context of its own, so that blocks
   stay under the sticky head and the hours */
.cal-wc { isolation: isolate; --lane: clamp(32%, 52px, 45%); --split: calc(100% - var(--lane)); }
.cal-blk { background-image: linear-gradient(color-mix(in oklab, var(--cal-c) 15%, transparent), color-mix(in oklab, var(--cal-c) 15%, transparent)); box-shadow: inset 2px 0 0 var(--cal-c), 0 0 0 1px var(--page); }
.cal-blk:hover { background-image: linear-gradient(color-mix(in oklab, var(--cal-c) 24%, transparent), color-mix(in oklab, var(--cal-c) 24%, transparent)); }
.cal-blk.exam { box-shadow: inset 2px 0 0 var(--accent-2), 0 0 0 1px var(--page); }
.cal-blk.meeting { box-shadow: inset 2px 0 0 var(--accent), 0 0 0 1px var(--page); }
.cal-blk.mine { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--muted) 55%, transparent), 0 0 0 1px var(--page); padding: 3px 4px 3px 6px; }
.cal-blk.mine:hover { background-image: linear-gradient(color-mix(in srgb, var(--ink) 9%, transparent), color-mix(in srgb, var(--ink) 9%, transparent)); }
.cal-blk.wrap .cal-blk-ti { align-items: flex-start; }
.cal-blk.wrap .cal-blk-ti .cal-ti { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 2); white-space: normal; text-overflow: clip; line-height: 16px; }
.cal-blk.wrap .cal-blk-ti .cal-mk.dot { margin-top: 5px; }
.cal-blk-m { color: var(--ink-2); }
.cal-now { z-index: 80; height: 1.5px; margin-top: -.75px; border-top: 0; background: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--page) 85%, transparent); }
.cal-now::before { content: none; }
.cal-now-dot { position: absolute; left: -4px; top: -3.25px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px var(--page); }

/* the agenda: what is overdue and what is due next above the days; rows whose title keeps its room; today's
   rows over by now dimmed above a line at now, the one on now marked */
.cal-pin { margin: 0 0 16px; padding: 8px 0 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); }
.cal-pin-h { margin: 0; padding: 0 16px 2px; font: 600 10.5px/20px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cal-pin.over .cal-pin-h { color: var(--cal-warn); }
.cal-pin + .cal-aday, .cal-pin + .cal-amonth { border-top: 0; }
.cal-row { grid-template-columns: 144px minmax(160px, 1fr) minmax(0, 128px) minmax(0, 180px); }
.cal-pin .cal-row { grid-template-columns: 200px minmax(160px, 1fr) minmax(0, 128px) minmax(0, 180px); padding: 4px 16px; border-radius: 0; }
.cal-pin .cal-row-t { white-space: normal; line-height: 16px; }
.cal-row-ti { overflow: hidden; }
.cal-row-t { color: var(--ink-2); }
.cal-row.due .cal-row-t { color: var(--ink); font-weight: 500; }
.cal-row.mine .cal-row-t { color: var(--muted); }
:is(.cal-row, .cal-mini-row).over { opacity: .5; }
:is(.cal-row, .cal-mini-row).over:hover { opacity: .8; }
.cal-row.live { box-shadow: inset 2px 0 0 var(--accent); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-row.live .cal-row-t, .cal-mini-row.live .cal-mini-t { color: var(--accent); }
.cal-nowline { display: flex; align-items: center; gap: 8px; height: 20px; padding: 0 8px; color: var(--accent); font: 500 11px/20px var(--sans); font-variant-numeric: tabular-nums; }
.cal-nowline::before { content: ''; flex: none; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--accent); }
.cal-nowline::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 70%, transparent); }

/* the popover */
.cal-od { color: var(--cal-warn); font-weight: 500; }
.cal-pop dl { grid-template-columns: minmax(48px, max-content) minmax(0, 1fr); }
.cal-pre { white-space: pre-line; }

/* the sidebar: the same head, the time of a row in ink */
.cal-mini-pin { margin: 8px 8px 4px; padding: 4px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--page); }
.cal-mini-pin-h { margin: 0; padding: 4px 8px 0; font: 600 10.5px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cal-mini-pin.over .cal-mini-pin-h { color: var(--cal-warn); }
.cal-mini-pin .cal-mini-row { padding: 4px 8px; }
.cal-mini-t { color: var(--ink-2); }
.cal-mini-row.due .cal-mini-t { color: var(--ink); font-weight: 500; }
.cal-mini-row.mine .cal-mini-t { color: var(--muted); }

/* the calendar with nothing on it: a card over the faint, empty grid */
.cal-body.empty { position: relative; min-height: 280px; }
.cal-faint { opacity: .4; pointer-events: none; }
.cal-empty { position: absolute; z-index: 5; top: 72px; left: 50%; width: min(440px, calc(100% - 32px)); transform: translateX(-50%); padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); box-shadow: var(--shadow); text-align: center; }
.cal-empty h3 { margin: 0 0 8px; font: 400 19px/26px var(--serif); color: var(--ink); }
.cal-empty p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.cal-empty-acts { margin-top: 16px; }
.cal-btn2 { height: 32px; padding: 0 16px; border-radius: 7px; background: var(--ink); color: var(--page); font-size: 12.5px; text-align: center; }
.cal-btn2:hover { opacity: .88; }

/* phones: 44 px targets around the small controls, the filters scrolling edge to edge under a fade, a ring on a
   day with something due, the week's columns snapping in beside the hours */
.cal.narrow .cal-head { row-gap: 16px; }
.cal.narrow .cal-nav .cal-ico, .cal.narrow .cal-nav .cal-today, .cal.narrow .cal-views button, .cal.narrow .cal-filters .cal-filter, .cal.narrow .cal-filters .cal-all { position: relative; }
.cal.narrow .cal-nav .cal-ico::before, .cal.narrow .cal-nav .cal-today::before, .cal.narrow .cal-views button::before { content: ''; position: absolute; inset: -8px -2px; }
.cal.narrow .cal-nav .cal-ico::before { inset: -8px; }
.cal.narrow .cal-nav .cal-today::before { inset: -9px -3px; }   /* (from inside its border) */
.cal.narrow .cal-nav { gap: 12px; }
.cal.narrow .cal-filters .cal-filter::before, .cal.narrow .cal-filters .cal-all::before { content: ''; position: absolute; inset: -10px -2px; }
.cal.narrow .cal-filters { margin: 8px -16px 0; padding: 10px 40px 10px 8px; gap: 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 40px), transparent); }
.cal.narrow .cal-filters + .cal-load { margin-top: -2px; }
.cal-pop.sheet .cal-pop-x { top: 6px; right: 6px; width: 44px; height: 44px; }
.cal-pop.sheet .cal-act { min-height: 44px; }
.cal.narrow .cal-cell.has-due .cal-num { box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.cal.narrow .cal-cell.today.has-due .cal-num { box-shadow: 0 0 0 2px var(--page), 0 0 0 3.25px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.cal-dots { align-items: center; height: 7px; }
.cal-dots i.due { width: 6px; height: 6px; border-radius: 1px; background: transparent; box-shadow: inset 0 0 0 1.25px var(--cal-c); }
.cal-dots i.due.over { background: color-mix(in srgb, var(--accent-2) 30%, transparent); box-shadow: inset 0 0 0 1.25px var(--accent-2); }
.cal-dots i.exam { border-radius: 1px; background: var(--accent-2); transform: rotate(45deg) scale(.9); }
.cal-dots i.done { opacity: .45; }
.cal.narrow .cal-pin .cal-row { grid-template-columns: 14px max-content minmax(0, 1fr); padding: 6px 12px; }
.cal.narrow .cal-row.live { box-shadow: inset 2px 0 0 var(--accent); }
.cal.narrow .cal-wk-scroll { scroll-snap-type: x proximity; }
.cal.narrow .cal-wc { scroll-snap-align: start; scroll-margin-left: 44px; }
.cal.narrow .cal-empty { top: 24px; }

/* ---- connectors (static/js/connectors.js), continued: a watched container's "import its PDFs" (a source with files),
   a line of its own under the name, lined up with the name's text; hidden while the container is not watched. */
.connectors .cx-files { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: -2px 0 2px 22px; font-size: 12px; color: var(--muted); cursor: pointer; }
.connectors .cx-files:hover { color: var(--ink-2); }
.connectors .cx-cont:not(.on) .cx-files { display: none; }

/* ---- assignments added by hand: the inline form ---- */
.asg-form { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px 6px 38px; }
#courseNext .asg-form { padding: 0 0 10px; max-width: 520px; }
.asg-line { display: flex; gap: 4px; }
.cal-redate { gap: 8px; } .cal-said { color: var(--accent-2); font-size: 12px; }
.cal-redate input[name="where"] { width: 9em; }
/* Sync now in the calendar's head; "open in Canvas", small, after the popover's acts; the home page's Changed line */
.cal-sync { font-size: 12.5px; text-decoration: none; }
.cal-out { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 11.5px; color: var(--muted); text-decoration: none; }
.cal-out:hover { color: var(--accent); }
.cal-out svg { display: block; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.welcome-changed { margin: 0 0 14px; }
.changed-line { margin: 0 0 6px; font: 13.5px/1.45 var(--sans); color: var(--ink); }
.changed-line b { margin-right: 6px; font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); }
.asg-form input, .asg-form select, .cal-redate input { min-width: 0; height: 22px; padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--page); color: var(--ink); font: 12.5px var(--sans); }
.asg-form input:focus, .asg-form select:focus, .cal-redate input:focus { border-color: var(--accent); outline: none; }
.asg-form [name="title"], .asg-form [name="where"] { flex: 1; }

/* Sign in with Canvas (canvas-signin.js): Canvas's red mark on a plain button, as providers draw their own sign-in */
.conn-row.canvas-signin .act { flex-direction: column; align-items: flex-start; gap: 8px; }
.conn-row .canvas-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.conn-row .canvas-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px; border: 1px solid #dadce0; border-radius: 4px; background: #fff; color: #1f1f1f; font: 500 14px/1 var(--sans); letter-spacing: .1px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.conn-row .canvas-btn:hover { background: #f8f9fa; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.conn-row .canvas-btn:focus-visible { outline: 2px solid #e72429; outline-offset: 2px; }
.conn-row .canvas-btn:disabled { opacity: .6; cursor: progress; box-shadow: none; }
.conn-row .canvas-btn svg { width: 20px; height: 20px; flex: none; }
:root[data-theme="dark"] .conn-row .canvas-btn { background: #131314; border-color: #8e918f; color: #e3e3e3; }
:root[data-theme="dark"] .conn-row .canvas-btn:hover { background: #1f1f20; }
.conn-row .canvas-school { font: 13px var(--sans); color: var(--ink); }
.conn-row .canvas-quiet { color: var(--muted); font-size: 12px; }
.conn-row .canvas-quiet:hover { color: var(--accent); }
.conn-row .canvas-err { margin: 0; font: 13px/1.45 var(--sans); color: var(--accent-2); }
.conn-row .canvas-find { width: min(100%, 360px); }
#settings .conn-row .canvas-find { height: 34px; font-size: 13px; }
.conn-row .canvas-found { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; align-self: stretch; }
.conn-row .canvas-found:empty { display: none; }
.conn-row .canvas-pick { font: 13px var(--sans); }
.conn-row .canvas-none { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.conn-row .canvas-line { margin: 0; font: 13px/1.45 var(--sans); color: var(--ink); }
.conn-row .canvas-acts { display: flex; gap: 16px; flex-wrap: wrap; }
.conn-row .canvas-note { width: min(100%, 560px); font: 12px/1.4 var(--sans); }